feat: design tokens, globals CSS, fonts, navigation config

- Rewrite globals.css with dark-theme OKLCH tokens, glass utilities, ambient bg
- Update root layout with Inter + JetBrains Mono fonts, theme script
- Redirect / to /dashboard
- Update navigation config — remove search link, add recordings
- Update analysis search-panel with glass styling

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

services/frontend/src/components/shared/detail-stat.tsx

@@ -1,42 +0,0 @@
-import { Card, CardContent } from "@/components/ui/card";
-import { formatNumber } from "@/lib/format";
-import { cn } from "@/lib/utils";
-
-interface DetailStatProps {
-  label: string;
-  value: number;
-  variant?: "default" | "danger" | "success";
-  suffix?: string;
-}
-
-const valueColor = {
-  default: "",
-  danger: "text-red-400",
-  success: "text-emerald-400",
-};
-
-/**
- * Small stat label used inside detail views.
- */
-export function DetailStat({
-  label,
-  value,
-  variant = "default",
-  suffix,
-}: DetailStatProps) {
-  return (
-    <Card className="bg-gradient-to-br from-cyan-500/5 to-transparent border-cyan-500/10">
-      <CardContent className="p-3">
-        <p className="text-xs text-muted-foreground/70 tracking-wide">
-          {label}
-        </p>
-        <p
-          className={cn("text-lg font-bold tabular-nums", valueColor[variant])}
-        >
-          {formatNumber(value)}
-          {suffix}
-        </p>
-      </CardContent>
-    </Card>
-  );
-}

services/frontend/src/components/shared/empty-state.tsx

@@ -1,26 +1,22 @@
-import type { LucideIcon } from "lucide-react";
+"use client";
+
+import { Inbox } from "lucide-react";
+import { GlassPanel } from "@/components/glass/panel";
 
 interface EmptyStateProps {
-  icon: LucideIcon;
-  title: string;
+  title?: string;
   description?: string;
 }
 
-/**
- * Consistent empty state for data-fetching pages.
- */
 export function EmptyState({
-  icon: Icon,
-  title,
-  description,
+  title = "No data yet",
+  description = "Nothing to display here yet.",
 }: EmptyStateProps) {
   return (
-    <div className="flex flex-col items-center justify-center py-20 text-center">
-      <Icon className="size-10 text-muted-foreground/40 mb-3" />
-      <p className="text-sm text-muted-foreground">{title}</p>
-      {description && (
-        <p className="text-xs text-muted-foreground/60 mt-1">{description}</p>
-      )}
-    </div>
+    <GlassPanel dense className="flex flex-col items-center gap-2 py-12">
+      <Inbox className="size-8 text-text-secondary/20" />
+      <p className="text-sm text-text-secondary/60">{title}</p>
+      <p className="text-xs text-text-secondary/40">{description}</p>
+    </GlassPanel>
   );
 }

services/frontend/src/components/shared/error-boundary.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { Component, type ReactNode } from "react";
+import { GlassCard } from "@/components/glass/card";
+import { AlertCircle, RefreshCw } from "lucide-react";
+
+interface Props { children: ReactNode; fallback?: ReactNode; }
+interface State { hasError: boolean; error?: Error; }
+
+export class ErrorBoundary extends Component<Props, State> {
+  state: State = { hasError: false };
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback || (
+        <GlassCard variant="danger" className="flex flex-col items-center gap-2 py-8">
+          <AlertCircle className="size-6 text-destructive" />
+          <p className="text-sm text-text-secondary">{this.state.error?.message || "Something went wrong"}</p>
+          <button
+            type="button"
+            onClick={() => this.setState({ hasError: false })}
+            className="flex items-center gap-1 text-xs text-primary hover:text-primary/80 transition-colors"
+          >
+            <RefreshCw className="size-3" /> Try again
+          </button>
+        </GlassCard>
+      );
+    }
+    return this.props.children;
+  }
+}

services/frontend/src/components/shared/index.ts

@@ -1,5 +1,4 @@
-export { DetailStat } from "./detail-stat";
 export { EmptyState } from "./empty-state";
+export { ErrorBoundary } from "./error-boundary";
 export { ErrorState } from "./error-state";
 export { LoadingSkeleton } from "./loading-skeleton";
-export { StatCard } from "./stat-card";

services/frontend/src/components/shared/loading-skeleton.tsx

@@ -1,38 +1,43 @@
-import { Skeleton } from "@/components/ui/skeleton";
+"use client";
+
 import { cn } from "@/lib/utils";
 
 interface LoadingSkeletonProps {
-  /** Number of skeleton rows */
   count?: number;
-  /** Height per skeleton row */
   height?: string;
-  /** Grid layout: columns */
+  width?: string;
   columns?: number;
-  /** Additional classes */
   className?: string;
 }
 
-/**
- * Consistent loading skeleton for data-fetching pages.
- * Renders a grid of skeleton placeholders.
- */
 export function LoadingSkeleton({
   count = 4,
-  height = "h-28",
-  columns = 1,
+  height = "h-24",
+  width,
+  columns,
   className,
 }: LoadingSkeletonProps) {
-  return (
+  const items = Array.from({ length: count }, (_, i) => (
     <div
+      key={i}
       className={cn(
-        "grid gap-3",
-        columns > 1 ? "grid-cols-1 md:grid-cols-2" : "grid-cols-1",
+        "glass rounded-[var(--radius-card)] overflow-hidden",
+        height,
+        width,
         className,
       )}
     >
-      {Array.from({ length: count }, (_, i) => (
-        <Skeleton key={i} className={cn(height, "rounded-xl")} />
-      ))}
+      <div className="w-full h-full animate-shimmer" />
     </div>
-  );
+  ));
+
+  if (columns) {
+    return (
+      <div className={`grid grid-cols-1 md:grid-cols-${Math.min(columns, 6)} gap-3`}>
+        {items}
+      </div>
+    );
+  }
+
+  return <div className="space-y-2">{items}</div>;
 }

services/frontend/src/components/shared/stat-card.tsx

@@ -1,78 +0,0 @@
-import type { LucideIcon } from "lucide-react";
-
-import { Card, CardContent } from "@/components/ui/card";
-import { formatNumber } from "@/lib/format";
-import { cn } from "@/lib/utils";
-
-interface StatCardProps {
-  label: string;
-  value: number;
-  icon: LucideIcon;
-  variant?: "default" | "danger" | "success" | "warning";
-}
-
-const variantStyles = {
-  default: "from-cyan-500/10 to-teal-500/5 border-cyan-500/20",
-  danger: "from-red-500/10 to-rose-500/5 border-red-500/20",
-  success: "from-emerald-500/10 to-green-500/5 border-emerald-500/20",
-  warning: "from-amber-500/10 to-yellow-500/5 border-amber-500/20",
-};
-
-const iconBg = {
-  default: "bg-cyan-500/15 text-cyan-400",
-  danger: "bg-red-500/15 text-red-400",
-  success: "bg-emerald-500/15 text-emerald-400",
-  warning: "bg-amber-500/15 text-amber-400",
-};
-
-const valueColor = {
-  default: "",
-  danger: "text-red-400",
-  success: "text-emerald-400",
-  warning: "text-amber-400",
-};
-
-/**
- * Metric card used across dashboard and landing pages.
- */
-export function StatCard({
-  label,
-  value,
-  icon: Icon,
-  variant = "default",
-}: StatCardProps) {
-  return (
-    <Card
-      className={cn(
-        "border bg-gradient-to-br backdrop-blur-sm",
-        variantStyles[variant],
-      )}
-    >
-      <CardContent className="p-4">
-        <div className="flex items-start justify-between">
-          <div className="space-y-1.5">
-            <p className="text-xs text-muted-foreground/80 tracking-wide">
-              {label}
-            </p>
-            <p
-              className={cn(
-                "text-2xl font-bold tabular-nums tracking-tight",
-                valueColor[variant],
-              )}
-            >
-              {formatNumber(value)}
-            </p>
-          </div>
-          <div
-            className={cn(
-              "flex size-9 shrink-0 items-center justify-center rounded-lg",
-              iconBg[variant],
-            )}
-          >
-            <Icon className="size-4" />
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}