improve MQTT error bubble up and massage communitymqtt + debug etc. for version management. Closes #70

frontend/src/components/SettingsModal.tsx

@@ -275,7 +275,9 @@ export function SettingsModal(props: SettingsModalProps) {
       {shouldRenderSection('about') && (
         <section className={sectionWrapperClass}>
           {renderSectionHeader('about')}
-          {isSectionVisible('about') && <SettingsAboutSection className={sectionContentClass} />}
+          {isSectionVisible('about') && (
+            <SettingsAboutSection health={health} className={sectionContentClass} />
+          )}
         </section>
       )}
     </div>

frontend/src/components/settings/SettingsAboutSection.tsx

@@ -1,10 +1,17 @@
+import type { HealthStatus } from '../../types';
 import { Separator } from '../ui/separator';
 
 const GITHUB_URL = 'https://github.com/jkingsman/Remote-Terminal-for-MeshCore';
 
-export function SettingsAboutSection({ className }: { className?: string }) {
-  const version = __APP_VERSION__;
-  const commit = __COMMIT_HASH__;
+export function SettingsAboutSection({
+  health,
+  className,
+}: {
+  health?: HealthStatus | null;
+  className?: string;
+}) {
+  const version = health?.app_info?.version ?? 'unknown';
+  const commit = health?.app_info?.commit_hash;
 
   return (
     <div className={className}>
@@ -14,8 +21,14 @@ export function SettingsAboutSection({ className }: { className?: string }) {
           <h3 className="text-lg font-semibold">RemoteTerm for MeshCore</h3>
           <div className="text-sm text-muted-foreground">
             v{version}
-            <span className="mx-1.5">·</span>
-            <span className="font-mono text-xs">{commit}</span>
+            {commit ? (
+              <>
+                <span className="mx-1.5">·</span>
+                <span className="font-mono text-xs" title={commit}>
+                  {commit}
+                </span>
+              </>
+            ) : null}
           </div>
         </div>
 

frontend/src/test/settingsAboutSection.test.tsx

@@ -1,20 +1,28 @@
 import { render, screen } from '@testing-library/react';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
 import { SettingsAboutSection } from '../components/settings/SettingsAboutSection';
 
 describe('SettingsAboutSection', () => {
-  beforeEach(() => {
-    vi.stubGlobal('__APP_VERSION__', '3.2.0-test');
-    vi.stubGlobal('__COMMIT_HASH__', 'deadbeef');
-  });
-
-  afterEach(() => {
-    vi.unstubAllGlobals();
-  });
-
   it('renders the debug support snapshot link', () => {
-    render(<SettingsAboutSection />);
+    render(
+      <SettingsAboutSection
+        health={{
+          status: 'ok',
+          radio_connected: true,
+          radio_initializing: false,
+          connection_info: 'Serial: /dev/ttyUSB0',
+          app_info: {
+            version: '3.2.0-test',
+            commit_hash: 'deadbeef',
+          },
+          database_size_mb: 1.2,
+          oldest_undecrypted_timestamp: null,
+          fanout_statuses: {},
+          bots_disabled: false,
+        }}
+      />
+    );
 
     const link = screen.getByRole('link', { name: /Open debug support snapshot/i });
     expect(link).toHaveAttribute('href', '/api/debug');

frontend/src/types.ts

@@ -51,12 +51,18 @@ export interface FanoutStatusEntry {
   status: string;
 }
 
+export interface AppInfo {
+  version: string;
+  commit_hash: string | null;
+}
+
 export interface HealthStatus {
   status: string;
   radio_connected: boolean;
   radio_initializing: boolean;
   radio_state?: 'connected' | 'initializing' | 'connecting' | 'disconnected' | 'paused';
   connection_info: string | null;
+  app_info?: AppInfo | null;
   radio_device_info?: {
     model: string | null;
     firmware_build: string | null;

frontend/src/types/globals.d.ts

@@ -1,2 +0,0 @@
-declare const __APP_VERSION__: string;
-declare const __COMMIT_HASH__: string;