fix: complete sensing server API, WebSocket connectivity, and mobile tests (#125)

The web UI had persistent 404 errors on model, recording, and training
endpoints, and the sensing WebSocket never connected on Dashboard/Live
Demo tabs because sensingService.start() was only called lazily on
Sensing tab visit.

Server (main.rs):
- Add 14 fully-functional Axum handlers: model CRUD (7), recording
  lifecycle (4), training control (3)
- Scan data/models/ and data/recordings/ at startup
- Recording writes CSI frames to .jsonl via tokio background task
- Model load/unload lifecycle with state tracking

Web UI (app.js):
- Import and start sensingService early in initializeServices() so
  Dashboard and Live Demo tabs connect to /ws/sensing immediately

Mobile (ws.service.ts):
- Fix WebSocket URL builder to use same-origin port instead of
  hardcoded port 3001

Mobile (jest.config.js):
- Fix testPathIgnorePatterns that was ignoring the entire test directory

Mobile (25 test files):
- Replace all it.todo() placeholder tests with real implementations
  covering components, services, stores, hooks, screens, and utils

ADR-043 documents all changes.

ui/mobile/src/__tests__/components/ConnectionBanner.test.tsx

@@ -1,5 +1,36 @@
-describe('placeholder', () => {
-  it('passes', () => {
-    expect(true).toBe(true);
+import React from 'react';
+import { render, screen } from '@testing-library/react-native';
+import { ConnectionBanner } from '@/components/ConnectionBanner';
+import { ThemeProvider } from '@/theme/ThemeContext';
+
+const renderWithTheme = (ui: React.ReactElement) =>
+  render(<ThemeProvider>{ui}</ThemeProvider>);
+
+describe('ConnectionBanner', () => {
+  it('renders LIVE STREAM text when connected', () => {
+    renderWithTheme(<ConnectionBanner status="connected" />);
+    expect(screen.getByText('LIVE STREAM')).toBeTruthy();
+  });
+
+  it('renders DISCONNECTED text when disconnected', () => {
+    renderWithTheme(<ConnectionBanner status="disconnected" />);
+    expect(screen.getByText('DISCONNECTED')).toBeTruthy();
+  });
+
+  it('renders SIMULATED DATA text when simulated', () => {
+    renderWithTheme(<ConnectionBanner status="simulated" />);
+    expect(screen.getByText('SIMULATED DATA')).toBeTruthy();
+  });
+
+  it('renders without crashing for each status', () => {
+    const statuses: Array<'connected' | 'simulated' | 'disconnected'> = [
+      'connected',
+      'simulated',
+      'disconnected',
+    ];
+    for (const status of statuses) {
+      const { unmount } = renderWithTheme(<ConnectionBanner status={status} />);
+      unmount();
+    }
   });
 });

ui/mobile/src/__tests__/components/GaugeArc.test.tsx

@@ -1,5 +1,63 @@
-describe('placeholder', () => {
-  it('passes', () => {
-    expect(true).toBe(true);
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider } from '@/theme/ThemeContext';
+
+jest.mock('react-native-svg', () => {
+  const { View } = require('react-native');
+  return {
+    __esModule: true,
+    default: View, // Svg
+    Svg: View,
+    Circle: View,
+    G: View,
+    Text: View,
+    Rect: View,
+    Line: View,
+    Path: View,
+  };
+});
+
+// GaugeArc uses Animated.createAnimatedComponent(Circle), so we need
+// the reanimated mock (already in jest.setup.ts) and SVG mock above.
+import { GaugeArc } from '@/components/GaugeArc';
+
+const renderWithTheme = (ui: React.ReactElement) =>
+  render(<ThemeProvider>{ui}</ThemeProvider>);
+
+describe('GaugeArc', () => {
+  it('renders without crashing', () => {
+    const { toJSON } = renderWithTheme(
+      <GaugeArc value={50} max={100} label="BPM" unit="bpm" color="#00FF00" />,
+    );
+    expect(toJSON()).not.toBeNull();
+  });
+
+  it('renders with min and max values', () => {
+    const { toJSON } = renderWithTheme(
+      <GaugeArc value={0} min={0} max={200} label="Test" unit="x" color="#FF0000" />,
+    );
+    expect(toJSON()).not.toBeNull();
+  });
+
+  it('renders with colorTo gradient', () => {
+    const { toJSON } = renderWithTheme(
+      <GaugeArc
+        value={75}
+        max={100}
+        label="HR"
+        unit="bpm"
+        color="#00FF00"
+        colorTo="#FF0000"
+        size={200}
+      />,
+    );
+    expect(toJSON()).not.toBeNull();
+  });
+
+  it('renders with custom size', () => {
+    const { toJSON } = renderWithTheme(
+      <GaugeArc value={30} max={60} label="BR" unit="brpm" color="#0088FF" size={80} />,
+    );
+    expect(toJSON()).not.toBeNull();
   });
 });

ui/mobile/src/__tests__/components/HudOverlay.test.tsx

@@ -1,5 +1,16 @@
-describe('placeholder', () => {
-  it('passes', () => {
-    expect(true).toBe(true);
+// HudOverlay.tsx is an empty file (0 bytes). This test verifies that importing
+// it does not throw and that the module exists.
+
+describe('HudOverlay', () => {
+  it('module can be imported without error', () => {
+    expect(() => {
+      require('@/components/HudOverlay');
+    }).not.toThrow();
+  });
+
+  it('module exports are defined (may be empty)', () => {
+    const mod = require('@/components/HudOverlay');
+    // The module is empty, so it should be an object (possibly with no exports)
+    expect(typeof mod).toBe('object');
   });
 });

ui/mobile/src/__tests__/components/OccupancyGrid.test.tsx

@@ -1,5 +1,62 @@
-describe('placeholder', () => {
-  it('passes', () => {
-    expect(true).toBe(true);
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider } from '@/theme/ThemeContext';
+
+jest.mock('react-native-svg', () => {
+  const { View } = require('react-native');
+  return {
+    __esModule: true,
+    default: View,
+    Svg: View,
+    Circle: View,
+    G: View,
+    Text: View,
+    Rect: View,
+    Line: View,
+    Path: View,
+  };
+});
+
+import { OccupancyGrid } from '@/components/OccupancyGrid';
+
+const renderWithTheme = (ui: React.ReactElement) =>
+  render(<ThemeProvider>{ui}</ThemeProvider>);
+
+describe('OccupancyGrid', () => {
+  it('renders without crashing with empty values', () => {
+    const { toJSON } = renderWithTheme(<OccupancyGrid values={[]} />);
+    expect(toJSON()).not.toBeNull();
+  });
+
+  it('renders with a full 400-element values array', () => {
+    const values = new Array(400).fill(0.5);
+    const { toJSON } = renderWithTheme(<OccupancyGrid values={values} />);
+    expect(toJSON()).not.toBeNull();
+  });
+
+  it('renders with person positions', () => {
+    const values = new Array(400).fill(0.3);
+    const positions = [
+      { x: 5, y: 5 },
+      { x: 15, y: 10 },
+    ];
+    const { toJSON } = renderWithTheme(
+      <OccupancyGrid values={values} personPositions={positions} />,
+    );
+    expect(toJSON()).not.toBeNull();
+  });
+
+  it('renders with custom size', () => {
+    const values = new Array(400).fill(0);
+    const { toJSON } = renderWithTheme(
+      <OccupancyGrid values={values} size={200} />,
+    );
+    expect(toJSON()).not.toBeNull();
+  });
+
+  it('handles values outside 0-1 range by clamping', () => {
+    const values = [-0.5, 0, 0.5, 1.5, NaN, 2, ...new Array(394).fill(0)];
+    const { toJSON } = renderWithTheme(<OccupancyGrid values={values} />);
+    expect(toJSON()).not.toBeNull();
   });
 });

ui/mobile/src/__tests__/components/SignalBar.test.tsx

@@ -1,5 +1,46 @@
-describe('placeholder', () => {
-  it('passes', () => {
-    expect(true).toBe(true);
+import React from 'react';
+import { render, screen } from '@testing-library/react-native';
+import { SignalBar } from '@/components/SignalBar';
+import { ThemeProvider } from '@/theme/ThemeContext';
+
+const renderWithTheme = (ui: React.ReactElement) =>
+  render(<ThemeProvider>{ui}</ThemeProvider>);
+
+describe('SignalBar', () => {
+  it('renders the label text', () => {
+    renderWithTheme(<SignalBar value={0.5} label="Signal Strength" />);
+    expect(screen.getByText('Signal Strength')).toBeTruthy();
+  });
+
+  it('renders the percentage text', () => {
+    renderWithTheme(<SignalBar value={0.75} label="Test" />);
+    expect(screen.getByText('75%')).toBeTruthy();
+  });
+
+  it('clamps value at 0 for negative input', () => {
+    renderWithTheme(<SignalBar value={-0.5} label="Low" />);
+    expect(screen.getByText('0%')).toBeTruthy();
+  });
+
+  it('clamps value at 100 for input above 1', () => {
+    renderWithTheme(<SignalBar value={1.5} label="High" />);
+    expect(screen.getByText('100%')).toBeTruthy();
+  });
+
+  it('renders without crashing with custom color', () => {
+    const { toJSON } = renderWithTheme(
+      <SignalBar value={0.5} label="Custom" color="#FF0000" />,
+    );
+    expect(toJSON()).not.toBeNull();
+  });
+
+  it('renders 0% for zero value', () => {
+    renderWithTheme(<SignalBar value={0} label="Zero" />);
+    expect(screen.getByText('0%')).toBeTruthy();
+  });
+
+  it('renders 100% for value of 1', () => {
+    renderWithTheme(<SignalBar value={1} label="Full" />);
+    expect(screen.getByText('100%')).toBeTruthy();
   });
 });

ui/mobile/src/__tests__/components/SparklineChart.test.tsx

@@ -1,5 +1,54 @@
-describe('placeholder', () => {
-  it('passes', () => {
-    expect(true).toBe(true);
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { SparklineChart } from '@/components/SparklineChart';
+import { ThemeProvider } from '@/theme/ThemeContext';
+
+const renderWithTheme = (ui: React.ReactElement) =>
+  render(<ThemeProvider>{ui}</ThemeProvider>);
+
+describe('SparklineChart', () => {
+  it('renders without crashing with data points', () => {
+    const { toJSON } = renderWithTheme(
+      <SparklineChart data={[-50, -45, -48, -42, -47]} />,
+    );
+    expect(toJSON()).not.toBeNull();
+  });
+
+  it('renders with empty data array', () => {
+    const { toJSON } = renderWithTheme(<SparklineChart data={[]} />);
+    expect(toJSON()).not.toBeNull();
+  });
+
+  it('renders with single data point', () => {
+    const { toJSON } = renderWithTheme(<SparklineChart data={[42]} />);
+    expect(toJSON()).not.toBeNull();
+  });
+
+  it('renders with custom color', () => {
+    const { toJSON } = renderWithTheme(
+      <SparklineChart data={[1, 2, 3]} color="#FF0000" />,
+    );
+    expect(toJSON()).not.toBeNull();
+  });
+
+  it('renders with custom height', () => {
+    const { toJSON } = renderWithTheme(
+      <SparklineChart data={[1, 2, 3]} height={100} />,
+    );
+    expect(toJSON()).not.toBeNull();
+  });
+
+  it('has an image accessibility role', () => {
+    const { getByRole } = renderWithTheme(
+      <SparklineChart data={[1, 2, 3]} />,
+    );
+    expect(getByRole('image')).toBeTruthy();
+  });
+
+  it('renders with all identical values', () => {
+    const { toJSON } = renderWithTheme(
+      <SparklineChart data={[5, 5, 5, 5, 5]} />,
+    );
+    expect(toJSON()).not.toBeNull();
   });
 });

ui/mobile/src/__tests__/components/StatusDot.test.tsx

@@ -1,5 +1,49 @@
-describe('placeholder', () => {
-  it('passes', () => {
-    expect(true).toBe(true);
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { StatusDot } from '@/components/StatusDot';
+import { ThemeProvider } from '@/theme/ThemeContext';
+
+const renderWithTheme = (ui: React.ReactElement) =>
+  render(<ThemeProvider>{ui}</ThemeProvider>);
+
+describe('StatusDot', () => {
+  it('renders without crashing for connected status', () => {
+    const { toJSON } = renderWithTheme(<StatusDot status="connected" />);
+    expect(toJSON()).not.toBeNull();
+  });
+
+  it('renders without crashing for disconnected status', () => {
+    const { toJSON } = renderWithTheme(<StatusDot status="disconnected" />);
+    expect(toJSON()).not.toBeNull();
+  });
+
+  it('renders without crashing for simulated status', () => {
+    const { toJSON } = renderWithTheme(<StatusDot status="simulated" />);
+    expect(toJSON()).not.toBeNull();
+  });
+
+  it('renders without crashing for connecting status', () => {
+    const { toJSON } = renderWithTheme(<StatusDot status="connecting" />);
+    expect(toJSON()).not.toBeNull();
+  });
+
+  it('renders with custom size', () => {
+    const { toJSON } = renderWithTheme(
+      <StatusDot status="connected" size={20} />,
+    );
+    expect(toJSON()).not.toBeNull();
+  });
+
+  it('renders all statuses without error', () => {
+    const statuses: Array<'connected' | 'simulated' | 'disconnected' | 'connecting'> = [
+      'connected',
+      'simulated',
+      'disconnected',
+      'connecting',
+    ];
+    for (const status of statuses) {
+      const { unmount } = renderWithTheme(<StatusDot status={status} />);
+      unmount();
+    }
   });
 });