Add Application Performance Monitoring (APM) with Prometheus metrics

- Backend: Implement Prometheus metrics collection
  - Add prometheus-client dependency
  - Create metrics utility module with HTTP request tracking counters, histograms, gauges
  - Implement MetricsMiddleware to track request latency, count, and active requests
  - Add /metrics endpoint to expose metrics in Prometheus text format
  - Normalize paths to prevent cardinality explosion (e.g., /api/{id} for UUIDs)
  - Exclude /metrics and /health from detailed tracking

- Frontend: Add web vitals and API metrics collection
  - Install web-vitals library (v4.0.0) for Core Web Vitals tracking
  - Create metrics utility module for FCP, LCP, CLS, INP, TTFB collection
  - Implement useTrackedFetch hook for automatic API call metrics (method, endpoint, status, duration)
  - Initialize web vitals tracking in App component on mount
  - Provide exportMetrics() for sending metrics to backend

- Testing:
  - Add comprehensive backend metrics tests (9 tests, 100% coverage)
  - Add comprehensive frontend metrics tests (10 tests)
  - All tests passing

- Documentation:
  - Expand Docs/Observability.md with complete APM section
  - Include metrics reference, integration examples (Prometheus, Datadog, NewRelic)
  - Add troubleshooting guide and best practices for cardinality management
  - Update Tasks.md to mark APM task as complete

Metrics exposed:
- bangui_http_requests_total: HTTP request count by method, endpoint, status
- bangui_http_request_duration_seconds: Request latency histogram
- bangui_http_active_requests: Active request gauge
- Web Vitals: CLS, FCP, INP, LCP, TTFB with ratings
- API metrics: endpoint, method, status, duration, timestamp

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

frontend/src/hooks/useTrackedFetch.ts

@@ -0,0 +1,44 @@
+/**
+ * React hook for automatic API call metrics tracking.
+ *
+ * Wraps fetch calls to automatically record duration and status.
+ */
+
+import { useCallback } from 'react';
+import { recordApiCall } from '../utils/metrics';
+
+/**
+ * Hook that provides a tracked fetch wrapper.
+ *
+ * Usage:
+ * ```
+ * const trackedFetch = useTrackedFetch();
+ * const response = await trackedFetch('/api/endpoint');
+ * ```
+ *
+ * @returns A wrapper around fetch that automatically tracks metrics
+ */
+export function useTrackedFetch(): (
+  input: RequestInfo | URL,
+  init?: RequestInit,
+) => Promise<Response> {
+  return useCallback(async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+    const startTime = performance.now();
+    const urlStr = typeof input === 'string' ? input : input.toString();
+
+    try {
+      const response = await fetch(input, init);
+      const duration = performance.now() - startTime;
+
+      const method = init?.method || 'GET';
+      recordApiCall(method, urlStr, response.status, duration);
+
+      return response;
+    } catch (error) {
+      const duration = performance.now() - startTime;
+      // Record failed requests too (500 status for network errors)
+      recordApiCall(init?.method || 'GET', urlStr, 500, duration);
+      throw error;
+    }
+  }, []);
+}