feat: add app header, sidebar, and mobile navigation components

- Implemented AppHeader component with theme toggle and connection status.
- Created AppSidebar component for navigation with connection status indicator.
- Added MobileNav component for mobile navigation with responsive design.
- Introduced shared components: DetailStat, EmptyState, ErrorState, LoadingSkeleton, and StatCard for consistent UI.
- Developed hooks for async data fetching: useAsync, useConfig, useDashboard, useGuilds, useMedia, useMessages, useRecordings, and useVoice.
- Added chatbot API functions for sending messages and managing chat history.

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

@@ -0,0 +1,38 @@
+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;
+}
+
+/**
+ * Small stat label used inside detail views.
+ */
+export function DetailStat({
+  label,
+  value,
+  variant = "default",
+  suffix,
+}: DetailStatProps) {
+  return (
+    <Card>
+      <CardContent className="p-3">
+        <p className="text-xs text-muted-foreground">{label}</p>
+        <p
+          className={cn(
+            "text-lg font-bold tabular-nums",
+            variant === "danger" && "text-destructive",
+            variant === "success" && "text-green-500",
+          )}
+        >
+          {formatNumber(value)}
+          {suffix}
+        </p>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,26 @@
+import type { LucideIcon } from "lucide-react";
+
+interface EmptyStateProps {
+  icon: LucideIcon;
+  title: string;
+  description?: string;
+}
+
+/**
+ * Consistent empty state for data-fetching pages.
+ */
+export function EmptyState({
+  icon: Icon,
+  title,
+  description,
+}: 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>
+  );
+}

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

@@ -0,0 +1,27 @@
+import { AlertCircle, RefreshCw } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+
+interface ErrorStateProps {
+  message: string;
+  onRetry?: () => void;
+}
+
+/**
+ * Consistent error state for data-fetching pages.
+ * Shows the error message with an optional retry button.
+ */
+export function ErrorState({ message, onRetry }: ErrorStateProps) {
+  return (
+    <div className="flex flex-col items-center justify-center py-20 text-center">
+      <AlertCircle className="size-10 text-destructive mb-3" />
+      <p className="text-sm text-muted-foreground mb-4 max-w-sm">{message}</p>
+      {onRetry && (
+        <Button variant="outline" onClick={onRetry}>
+          <RefreshCw className="size-4 mr-2" />
+          Retry
+        </Button>
+      )}
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,38 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+
+interface LoadingSkeletonProps {
+  /** Number of skeleton rows */
+  count?: number;
+  /** Height per skeleton row */
+  height?: string;
+  /** Grid layout: columns */
+  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,
+  className,
+}: LoadingSkeletonProps) {
+  return (
+    <div
+      className={cn(
+        "grid gap-3",
+        columns > 1 ? `grid-cols-1 md:grid-cols-${columns}` : "grid-cols-1",
+        className,
+      )}
+    >
+      {Array.from({ length: count }, (_, i) => (
+        <Skeleton key={i} className={cn(height, "rounded-xl")} />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,55 @@
+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";
+}
+
+/**
+ * Metric card used across dashboard and landing pages.
+ */
+export function StatCard({
+  label,
+  value,
+  icon: Icon,
+  variant = "default",
+}: StatCardProps) {
+  return (
+    <Card>
+      <CardContent className="p-4">
+        <div className="flex items-start justify-between">
+          <div className="space-y-1.5">
+            <p className="text-xs text-muted-foreground">{label}</p>
+            <p
+              className={cn(
+                "text-2xl font-bold tabular-nums tracking-tight",
+                variant === "danger" && "text-destructive",
+                variant === "success" && "text-green-500",
+              )}
+            >
+              {formatNumber(value)}
+            </p>
+          </div>
+          <div
+            className={cn(
+              "flex size-9 shrink-0 items-center justify-center rounded-lg",
+              variant === "danger"
+                ? "bg-destructive/10 text-destructive"
+                : variant === "success"
+                  ? "bg-green-500/10 text-green-500"
+                  : "bg-primary/10 text-primary",
+            )}
+          >
+            <Icon className="size-4" />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}