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/lib/api/chatbot.ts

@@ -1,9 +1,9 @@
-import type { ChatHistoryMessage, MascotChatResponse } from "@/lib/types";
+import type { ChatbotResponse, ChatHistoryMessage } from "@/lib/types";
 import { api } from "./client";
 
-export const mascotApi = {
+export const chatbotApi = {
   send: (message: string) =>
-    api.post<MascotChatResponse>("/api/mascot/chat", { message }),
+    api.post<ChatbotResponse>("/api/mascot/chat", { message }),
 
   getHistory: () => api.get<ChatHistoryMessage[]>("/api/mascot/chat/history"),
 

services/frontend/src/lib/api/index.ts

@@ -1,7 +1,7 @@
+export { chatbotApi } from "./chatbot";
 export { ApiError, api, apiRequest } from "./client";
 export { configApi } from "./config";
 export { dashboardApi } from "./dashboard";
-export { mascotApi } from "./mascot";
 export { messagesApi } from "./messages";
 export { recordingsApi } from "./recordings";
 export { uiStateApi } from "./ui-state";

services/frontend/src/lib/types/ui.ts

@@ -11,7 +11,7 @@ export interface UiState {
   is_streaming?: boolean | null;
 }
 
-export interface MascotChatResponse {
+export interface ChatbotResponse {
   response: string;
   timestamp: string;
 }