Action some lighthouse findings

frontend/index.html

@@ -7,6 +7,7 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <meta name="apple-mobile-web-app-title" content="MCTerm" />
     <meta name="theme-color" content="#0a0a0a" />
+    <meta name="description" content="Web interface for MeshCore mesh radio networks. Send and receive messages, manage contacts and channels, and configure your radio." />
     <title>RemoteTerm for MeshCore</title>
     <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />

frontend/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

frontend/src/App.tsx

@@ -1,4 +1,13 @@
-import { useState, useEffect, useCallback, useMemo, useRef, startTransition } from 'react';
+import {
+  useState,
+  useEffect,
+  useCallback,
+  useMemo,
+  useRef,
+  startTransition,
+  lazy,
+  Suspense,
+} from 'react';
 import { api } from './api';
 import { useWebSocket } from './useWebSocket';
 import {
@@ -20,9 +29,13 @@ import {
   type SettingsSection,
 } from './components/SettingsModal';
 import { RawPacketList } from './components/RawPacketList';
-import { MapView } from './components/MapView';
-import { VisualizerView } from './components/VisualizerView';
 import { CrackerPanel } from './components/CrackerPanel';
+
+// Lazy-load heavy components (Leaflet, force-directed graph) to reduce initial bundle
+const MapView = lazy(() => import('./components/MapView').then((m) => ({ default: m.MapView })));
+const VisualizerView = lazy(() =>
+  import('./components/VisualizerView').then((m) => ({ default: m.VisualizerView }))
+);
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from './components/ui/sheet';
 import { Toaster, toast } from './components/ui/sonner';
 import {
@@ -947,7 +960,7 @@ export function App() {
           </SheetContent>
         </Sheet>
 
-        <div className="flex-1 flex flex-col bg-background min-w-0">
+        <main className="flex-1 flex flex-col bg-background min-w-0">
           <div className={cn('flex-1 flex flex-col min-h-0', showSettings && 'hidden')}>
             {activeConversation ? (
               activeConversation.type === 'map' ? (
@@ -956,16 +969,32 @@ export function App() {
                     Node Map
                   </div>
                   <div className="flex-1 overflow-hidden">
-                    <MapView contacts={contacts} focusedKey={activeConversation.mapFocusKey} />
+                    <Suspense
+                      fallback={
+                        <div className="flex-1 flex items-center justify-center text-muted-foreground">
+                          Loading map...
+                        </div>
+                      }
+                    >
+                      <MapView contacts={contacts} focusedKey={activeConversation.mapFocusKey} />
+                    </Suspense>
                   </div>
                 </>
               ) : activeConversation.type === 'visualizer' ? (
-                <VisualizerView
-                  packets={rawPackets}
-                  contacts={contacts}
-                  config={config}
-                  onClearPackets={() => setRawPackets([])}
-                />
+                <Suspense
+                  fallback={
+                    <div className="flex-1 flex items-center justify-center text-muted-foreground">
+                      Loading visualizer...
+                    </div>
+                  }
+                >
+                  <VisualizerView
+                    packets={rawPackets}
+                    contacts={contacts}
+                    config={config}
+                    onClearPackets={() => setRawPackets([])}
+                  />
+                </Suspense>
               ) : activeConversation.type === 'raw' ? (
                 <>
                   <div className="flex justify-between items-center px-4 py-3 border-b border-border font-medium text-lg">
@@ -1208,7 +1237,7 @@ export function App() {
               </div>
             </div>
           )}
-        </div>
+        </main>
       </div>
 
       {/* Global Cracker Panel - always rendered to maintain state */}

frontend/src/components/CrackerPanel.tsx

@@ -455,8 +455,11 @@ export function CrackerPanel({
     <div className="flex flex-col h-full p-3 gap-3 bg-background border-t border-border overflow-auto">
       <div className="flex items-center gap-3 flex-wrap">
         <div className="flex items-center gap-2">
-          <label className="text-sm text-muted-foreground">Max Length:</label>
+          <label htmlFor="cracker-max-length" className="text-sm text-muted-foreground">
+            Max Length:
+          </label>
           <input
+            id="cracker-max-length"
             type="number"
             min={1}
             max={10}