Add FastAPI backend and React frontend subprojects

Backend:
- FastAPI app with 17 REST endpoints covering dashboard, monitoring,
  media index, file browser, and jobs
- Reuses existing clients/domain/services unchanged
- pydantic-settings config, dependency injection, CORS setup
- Auto-generated OpenAPI docs at /docs

Frontend:
- Vite + React + TypeScript SPA
- @tanstack/react-query for data fetching with polling
- ag-grid-react for media table and file browser
- recharts for monitoring charts
- Tailwind CSS styling
- 4 pages: Dashboard, Monitoring, Media, File Browser
- Typed API client matching all backend endpoints

Also:
- docs/MIGRATION_PLAN.md with full architecture plan
- Updated .gitignore for both subprojects
- Streamlit app preserved for now (can coexist)

frontend/src/pages/Monitoring.tsx

@@ -0,0 +1,140 @@
+import {
+	useMonitoringStatus,
+	useMonitoringMetrics,
+	useDiskSpace,
+	useCollectorControls,
+} from "../hooks/useMonitoring";
+import { MetricCard } from "../components/MetricCard";
+import { MonitoringCharts } from "../components/MonitoringCharts";
+
+function formatBytes(bytes: number): string {
+	if (!bytes || bytes === 0) return "0 B";
+	const units = ["B", "KB", "MB", "GB", "TB"];
+	let value = bytes;
+	let unitIdx = 0;
+	while (value >= 1000 && unitIdx < units.length - 1) {
+		value /= 1000;
+		unitIdx++;
+	}
+	return `${value.toFixed(1)} ${units[unitIdx]}`;
+}
+
+function formatRate(bytes: number): string {
+	return `${formatBytes(bytes)}/s`;
+}
+
+export function Monitoring() {
+	const { data: status } = useMonitoringStatus();
+	const { data: metrics } = useMonitoringMetrics();
+	const { data: disk } = useDiskSpace();
+	const { start, stop, restart } = useCollectorControls();
+
+	const samples = metrics?.samples ?? [];
+	const latest = samples.at(-1);
+
+	// Compute averages and peaks
+	const avg = (arr: number[]) =>
+		arr.length ? arr.reduce((a, b) => a + b, 0) / arr.length : 0;
+	const max = (arr: number[]) => (arr.length ? Math.max(...arr) : 0);
+
+	const cpuArr = samples.map((s) => s.cpu_pct);
+	const iowArr = samples.map((s) => s.iowait_pct ?? 0);
+	const memArr = samples.map((s) => s.mem_pct);
+	const netDownArr = samples.map((s) => s.net_rx_bytes_per_sec);
+	const netUpArr = samples.map((s) => s.net_tx_bytes_per_sec);
+	const diskReadArr = samples.map((s) => s.disk_read_bps);
+	const diskWriteArr = samples.map((s) => s.disk_write_bps);
+
+	return (
+		<div className="space-y-8">
+			{/* Controls */}
+			<section className="flex items-center gap-4">
+				<span className="text-sm text-gray-600">
+					Collector:{" "}
+					<code className="bg-gray-100 px-1 rounded">
+						{status?.status ?? "unknown"}
+					</code>
+				</span>
+				<button
+					onClick={() => start.mutate()}
+					className="px-3 py-1 text-sm rounded border hover:bg-gray-50"
+				>
+					Start
+				</button>
+				<button
+					onClick={() => restart.mutate()}
+					className="px-3 py-1 text-sm rounded border hover:bg-gray-50"
+				>
+					Restart
+				</button>
+				<button
+					onClick={() => stop.mutate()}
+					className="px-3 py-1 text-sm rounded border hover:bg-gray-50"
+				>
+					Stop
+				</button>
+			</section>
+
+			{/* Metrics summary */}
+			<section>
+				<div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-3">
+					<MetricCard
+						label="CPU now"
+						value={latest ? `${latest.cpu_pct.toFixed(1)}%` : "-"}
+						subtext={`avg ${avg(cpuArr).toFixed(1)}%\npeak ${max(cpuArr).toFixed(1)}%`}
+					/>
+					<MetricCard
+						label="IO Wait"
+						value={latest ? `${(latest.iowait_pct ?? 0).toFixed(1)}%` : "-"}
+						subtext={`avg ${avg(iowArr).toFixed(1)}%\npeak ${max(iowArr).toFixed(1)}%`}
+					/>
+					<MetricCard
+						label="RAM now"
+						value={latest ? `${latest.mem_pct.toFixed(1)}%` : "-"}
+						subtext={`avg ${avg(memArr).toFixed(1)}%\npeak ${max(memArr).toFixed(1)}%`}
+					/>
+					<MetricCard
+						label="Net down"
+						value={latest ? formatRate(latest.net_rx_bytes_per_sec) : "-"}
+						subtext={`avg ${formatRate(avg(netDownArr))}\npeak ${formatRate(max(netDownArr))}`}
+					/>
+					<MetricCard
+						label="Net up"
+						value={latest ? formatRate(latest.net_tx_bytes_per_sec) : "-"}
+						subtext={`avg ${formatRate(avg(netUpArr))}\npeak ${formatRate(max(netUpArr))}`}
+					/>
+					<MetricCard
+						label="Disk read"
+						value={latest ? formatRate(latest.disk_read_bps) : "-"}
+						subtext={`avg ${formatRate(avg(diskReadArr))}\npeak ${formatRate(max(diskReadArr))}`}
+					/>
+					<MetricCard
+						label="Disk write"
+						value={latest ? formatRate(latest.disk_write_bps) : "-"}
+						subtext={`avg ${formatRate(avg(diskWriteArr))}\npeak ${formatRate(max(diskWriteArr))}`}
+					/>
+				</div>
+			</section>
+
+			{/* Disk space */}
+			{disk && (
+				<section>
+					<div className="grid grid-cols-4 gap-3">
+						<MetricCard label="Disk used" value={formatBytes(disk.used)} />
+						<MetricCard
+							label="Disk available"
+							value={formatBytes(disk.available)}
+						/>
+						<MetricCard label="Disk total" value={formatBytes(disk.size)} />
+						<MetricCard label="Used %" value={disk.used_pct} />
+					</div>
+				</section>
+			)}
+
+			{/* Charts */}
+			<section>
+				<MonitoringCharts samples={samples} />
+			</section>
+		</div>
+	);
+}