feat(analytics): add error boundary for AnalyticsPanel and improve loading state handling

frontend/src/App.tsx

@@ -1,9 +1,7 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Component, Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { DashboardLayout } from "./components/layout/DashboardLayout";
 import { LivePanel } from "./components/live/LivePanel";
 import { MessagesPanel } from "./components/messages/MessagesPanel";
-import { Tabs, TabsContent } from "./components/ui/tabs";
-import { AnalyticsPanel } from "./components/analytics";
 import { AuthOverlay } from "./components/layout/AuthOverlay";
 import { useDashboardSocket } from "./hooks/useDashboardSocket";
 import { mergeMessages, useMessages } from "./hooks/useMessages";
@@ -14,6 +12,28 @@ import type { MessageRecord } from "./types/messages";
 import type { DashboardTab } from "./types/ui";
 import type { ActiveSpeaker } from "./types/voice";
 
+const AnalyticsPanel = lazy(() => import("./components/analytics").then((module) => ({ default: module.AnalyticsPanel })));
+
+class AnalyticsErrorBoundary extends Component<{ children: React.ReactNode }, { hasError: boolean }> {
+  state = { hasError: false };
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  override render() {
+    if (this.state.hasError) {
+      return (
+        <div className="rounded-2xl border border-destructive/30 bg-destructive/10 p-6 text-sm text-destructive">
+          Analytics failed to load. The rest of the dashboard is still available.
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
 const SAMPLE_RATE = 24000;
 const CHANNELS = 1;
 
@@ -164,19 +184,21 @@ export default function App() {
       onTabChange={(tab) => patchUIState({ activeTab: tab })}
     >
       <div className="md:hidden">
-        <Tabs value={activeTab} onValueChange={(value) => patchUIState({ activeTab: value as DashboardTab })}>
           <div className="mb-4 grid grid-cols-4 gap-1.5 rounded-2xl bg-muted p-1">
             {tabs.map((tab) => (
-              <button key={tab} className={`rounded-xl px-2 py-2 text-xs font-medium ${activeTab === tab ? "bg-background text-foreground" : "text-muted-foreground"}`} onClick={() => patchUIState({ activeTab: tab })}>
+            <button
+              key={tab}
+              type="button"
+              className={`rounded-xl px-2 py-2 text-xs font-medium ${activeTab === tab ? "bg-background text-foreground" : "text-muted-foreground"}`}
+              onClick={() => patchUIState({ activeTab: tab })}
+            >
                 {tab}
               </button>
             ))}
           </div>
-        </Tabs>
       </div>
-      <Tabs value={activeTab} onValueChange={(value) => patchUIState({ activeTab: value as DashboardTab })}>
+      {activeTab === "live" ? (
-        <TabsContent value="live">
+        !isAuthenticated ? (
-          {!isAuthenticated ? (
           <AuthOverlay onAuthenticated={() => setIsAuthenticated(true)} />
         ) : (
           <LivePanel
@@ -204,9 +226,8 @@ export default function App() {
             onStop={media.stop}
             onVolumeChange={media.setVolume}
           />
-          )}
+        )
-        </TabsContent>
+      ) : activeTab === "messages" ? (
-        <TabsContent value="messages">
         <MessagesPanel
           guilds={voice.guilds}
           channels={voice.textChannels}
@@ -217,8 +238,15 @@ export default function App() {
           onChannelChange={(channelId) => patchUIState({ selectedTextChannel: channelId })}
           onReanalyze={messages.reanalyze}
         />
-        </TabsContent>
+      ) : (
-        <TabsContent value="analytics">
+        <AnalyticsErrorBoundary>
+          <Suspense
+            fallback={
+              <div className="rounded-2xl border border-dashed border-border p-8 text-sm text-muted-foreground">
+                Loading analytics...
+              </div>
+            }
+          >
             <AnalyticsPanel
               guilds={voice.guilds}
               channels={voice.textChannels}
@@ -227,8 +255,9 @@ export default function App() {
               onGuildChange={(guildId) => patchUIState({ selectedTextGuild: guildId, selectedTextChannel: "" })}
               onChannelChange={(channelId) => patchUIState({ selectedTextChannel: channelId })}
             />
-        </TabsContent>
+          </Suspense>
-      </Tabs>
+        </AnalyticsErrorBoundary>
+      )}
     </DashboardLayout>
   );
 }