Add statistics endpoint

frontend/src/components/SettingsModal.tsx

@@ -10,6 +10,7 @@ import type {
   HealthStatus,
   RadioConfig,
   RadioConfigUpdate,
+  StatisticsResponse,
 } from '../types';
 import { Input } from './ui/input';
 import { Label } from './ui/label';
@@ -109,6 +110,7 @@ export function SettingsModal(props: SettingsModalProps) {
       connectivity: false,
       database: false,
       bot: false,
+      statistics: false,
     };
   });
 
@@ -185,6 +187,10 @@ export function SettingsModal(props: SettingsModalProps) {
   const [editingNameId, setEditingNameId] = useState<string | null>(null);
   const [editingNameValue, setEditingNameValue] = useState('');
 
+  // Statistics state
+  const [stats, setStats] = useState<StatisticsResponse | null>(null);
+  const [statsLoading, setStatsLoading] = useState(false);
+
   useEffect(() => {
     if (config) {
       setName(config.name);
@@ -239,6 +245,31 @@ export function SettingsModal(props: SettingsModalProps) {
     setSectionError(null);
   }, [externalSidebarNav, desktopSection]);
 
+  // Fetch statistics when the section becomes visible
+  const statisticsVisible = externalSidebarNav
+    ? desktopSection === 'statistics'
+    : expandedSections.statistics;
+
+  useEffect(() => {
+    if (!statisticsVisible) return;
+    let cancelled = false;
+    setStatsLoading(true);
+    api.getStatistics().then(
+      (data) => {
+        if (!cancelled) {
+          setStats(data);
+          setStatsLoading(false);
+        }
+      },
+      () => {
+        if (!cancelled) setStatsLoading(false);
+      }
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [statisticsVisible]);
+
   // Detect current preset from form values
   const currentPreset = useMemo(() => {
     const freqNum = parseFloat(freq);
@@ -1207,6 +1238,141 @@ export function SettingsModal(props: SettingsModalProps) {
           )}
         </div>
       )}
+
+      {shouldRenderSection('statistics') && (
+        <div className={sectionWrapperClass}>
+          {renderSectionHeader('statistics')}
+          {isSectionVisible('statistics') && (
+            <div className={sectionContentClass}>
+              {statsLoading && !stats ? (
+                <div className="py-8 text-center text-muted-foreground">Loading statistics...</div>
+              ) : stats ? (
+                <div className="space-y-6">
+                  {/* Network */}
+                  <div>
+                    <h4 className="text-sm font-medium mb-2">Network</h4>
+                    <div className="grid grid-cols-3 gap-3">
+                      <div className="text-center p-3 bg-muted/50 rounded-md">
+                        <div className="text-2xl font-bold">{stats.contact_count}</div>
+                        <div className="text-xs text-muted-foreground">Contacts</div>
+                      </div>
+                      <div className="text-center p-3 bg-muted/50 rounded-md">
+                        <div className="text-2xl font-bold">{stats.repeater_count}</div>
+                        <div className="text-xs text-muted-foreground">Repeaters</div>
+                      </div>
+                      <div className="text-center p-3 bg-muted/50 rounded-md">
+                        <div className="text-2xl font-bold">{stats.channel_count}</div>
+                        <div className="text-xs text-muted-foreground">Channels</div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <Separator />
+
+                  {/* Messages */}
+                  <div>
+                    <h4 className="text-sm font-medium mb-2">Messages</h4>
+                    <div className="grid grid-cols-3 gap-3">
+                      <div className="text-center p-3 bg-muted/50 rounded-md">
+                        <div className="text-2xl font-bold">{stats.total_dms}</div>
+                        <div className="text-xs text-muted-foreground">Direct Messages</div>
+                      </div>
+                      <div className="text-center p-3 bg-muted/50 rounded-md">
+                        <div className="text-2xl font-bold">{stats.total_channel_messages}</div>
+                        <div className="text-xs text-muted-foreground">Channel Messages</div>
+                      </div>
+                      <div className="text-center p-3 bg-muted/50 rounded-md">
+                        <div className="text-2xl font-bold">{stats.total_outgoing}</div>
+                        <div className="text-xs text-muted-foreground">Sent (Outgoing)</div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <Separator />
+
+                  {/* Packets */}
+                  <div>
+                    <h4 className="text-sm font-medium mb-2">Packets</h4>
+                    <div className="space-y-2">
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm text-muted-foreground">Total stored</span>
+                        <span className="font-medium">{stats.total_packets}</span>
+                      </div>
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm text-green-500">Decrypted</span>
+                        <span className="font-medium text-green-500">
+                          {stats.decrypted_packets}
+                        </span>
+                      </div>
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm text-yellow-500">Undecrypted</span>
+                        <span className="font-medium text-yellow-500">
+                          {stats.undecrypted_packets}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <Separator />
+
+                  {/* Activity */}
+                  <div>
+                    <h4 className="text-sm font-medium mb-2">Activity</h4>
+                    <table className="w-full text-sm">
+                      <thead>
+                        <tr className="text-muted-foreground">
+                          <th className="text-left font-normal pb-1"></th>
+                          <th className="text-right font-normal pb-1">1h</th>
+                          <th className="text-right font-normal pb-1">24h</th>
+                          <th className="text-right font-normal pb-1">7d</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td className="py-1">Contacts heard</td>
+                          <td className="text-right py-1">{stats.contacts_heard.last_hour}</td>
+                          <td className="text-right py-1">{stats.contacts_heard.last_24_hours}</td>
+                          <td className="text-right py-1">{stats.contacts_heard.last_week}</td>
+                        </tr>
+                        <tr>
+                          <td className="py-1">Repeaters heard</td>
+                          <td className="text-right py-1">{stats.repeaters_heard.last_hour}</td>
+                          <td className="text-right py-1">{stats.repeaters_heard.last_24_hours}</td>
+                          <td className="text-right py-1">{stats.repeaters_heard.last_week}</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+
+                  {/* Busiest Channels */}
+                  {stats.busiest_channels_24h.length > 0 && (
+                    <>
+                      <Separator />
+                      <div>
+                        <h4 className="text-sm font-medium mb-2">Busiest Channels (24h)</h4>
+                        <div className="space-y-1">
+                          {stats.busiest_channels_24h.map((ch, i) => (
+                            <div
+                              key={ch.channel_key}
+                              className="flex justify-between items-center text-sm"
+                            >
+                              <span>
+                                <span className="text-muted-foreground mr-2">{i + 1}.</span>
+                                {ch.channel_name}
+                              </span>
+                              <span className="text-muted-foreground">{ch.message_count} msgs</span>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    </>
+                  )}
+                </div>
+              ) : null}
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );
 }

frontend/src/components/settingsConstants.ts

@@ -1,4 +1,10 @@
-export type SettingsSection = 'radio' | 'identity' | 'connectivity' | 'database' | 'bot';
+export type SettingsSection =
+  | 'radio'
+  | 'identity'
+  | 'connectivity'
+  | 'database'
+  | 'bot'
+  | 'statistics';
 
 export const SETTINGS_SECTION_ORDER: SettingsSection[] = [
   'radio',
@@ -6,6 +12,7 @@ export const SETTINGS_SECTION_ORDER: SettingsSection[] = [
   'connectivity',
   'database',
   'bot',
+  'statistics',
 ];
 
 export const SETTINGS_SECTION_LABELS: Record<SettingsSection, string> = {
@@ -14,4 +21,5 @@ export const SETTINGS_SECTION_LABELS: Record<SettingsSection, string> = {
   connectivity: '📡 Connectivity',
   database: '🗄️ Database',
   bot: '🤖 Bot',
+  statistics: '📊 Statistics',
 };