refactor: move dashboard screens into shell routes

WebApp/src/routes/(shell)/app/+page.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	// @ts-nocheck
+	import { appController } from '$lib/app/controller';
+	import { appState } from '$lib/app/store';
+
+	let redirected = $state(false);
+
+	$effect(() => {
+		if (redirected || $appState.loading) {
+			return;
+		}
+
+		if (!$appState.session) {
+			appController.navigate('auth');
+			redirected = true;
+			return;
+		}
+
+		if (!$appState.deviceToken) {
+			appController.navigate('onboarding');
+			redirected = true;
+			return;
+		}
+
+		appController.navigate('home');
+		redirected = true;
+	});
+</script>
+
+<section class="flex flex-1 items-center justify-center px-6">
+	<div class="rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm text-slate-300">
+		Preparing your workspace…
+	</div>
+</section>

WebApp/src/routes/(shell)/app/activity/+page.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	// @ts-nocheck
+	import AppChrome from '$lib/sim/ui/AppChrome.svelte';
+	import { appController } from '$lib/app/controller';
+	import { appState } from '$lib/app/store';
+	import { Alert, AlertDescription, AlertTitle } from '$lib/components/ui/alert/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
+	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+	import { BellOff, Trash2, Calendar } from '@lucide/svelte';
+</script>
+
+<AppChrome pageKey="activity">
+	<section id="screen-activity" class="flex flex-col gap-6 max-w-4xl mx-auto py-4">
+		<div class="flex items-center justify-between">
+			<h2 class="text-2xl font-bold text-white tracking-tight">Activity History</h2>
+			<Button
+				id="clearActivityBtn"
+				variant="ghost"
+				class="rounded-xl border border-white/5 text-gray-400 hover:bg-white/5 hover:text-white"
+				onclick={() => appController.clearNotifications()}
+			>
+				<Trash2 class="size-4 mr-2" />
+				Clear Read
+			</Button>
+		</div>
+
+		<Card variant="glass" class="rounded-3xl">
+			<CardHeader>
+				<CardTitle class="text-sm font-semibold tracking-wide text-white">Motion Alerts</CardTitle>
+			</CardHeader>
+			<CardContent>
+				<ScrollArea class="max-h-[32rem] pr-3">
+					<div id="activityFeedList" class="flex flex-col gap-3">
+				{#if $appState.motionNotifications.length === 0}
+						<Alert variant="default" class="border-white/10 bg-black/20 text-center opacity-70 py-10">
+							<BellOff class="h-12 w-12 mx-auto mb-4 text-gray-600" />
+							<AlertTitle class="text-sm text-gray-200">All quiet</AlertTitle>
+							<AlertDescription class="text-sm text-gray-400">
+								No notifications yet.
+							</AlertDescription>
+						</Alert>
+				{:else}
+					{#each $appState.motionNotifications as notification (notification.id)}
+							<Button
+								type="button"
+								variant="ghost"
+								class="h-auto w-full flex-col items-start gap-1 rounded-xl border border-white/5 px-4 py-3 text-left transition-all hover:bg-white/5 {notification.isRead ? 'bg-gray-900/30 text-gray-400' : 'bg-blue-600/10 text-white border-blue-500/20'}"
+							onclick={() => appController.openMotionNotificationTarget(notification.id, notification.cameraDeviceId)}
+						>
+								<p class="text-sm font-semibold">{notification.message}</p>
+								<div class="flex items-center gap-2 mt-1">
+									<Calendar class="size-3 text-gray-500" />
+									<p class="text-[10px] text-gray-500">{new Date(notification.createdAt).toLocaleString()}</p>
+								</div>
+							</Button>
+					{/each}
+				{/if}
+					</div>
+				</ScrollArea>
+			</CardContent>
+		</Card>
+	</section>
+</AppChrome>

WebApp/src/routes/(shell)/app/camera/+page.svelte

@@ -0,0 +1,264 @@
+<script lang="ts">
+	// @ts-nocheck
+	import AppChrome from '$lib/sim/ui/AppChrome.svelte';
+	import { appController } from '$lib/app/controller';
+	import { appState } from '$lib/app/store';
+	import { Alert, AlertDescription, AlertTitle } from '$lib/components/ui/alert/index.js';
+	import { Badge } from '$lib/components/ui/badge/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
+	import { Label } from '$lib/components/ui/label/index.js';
+	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+	import { Select, SelectContent, SelectItem, SelectTrigger } from '$lib/components/ui/select/index.js';
+	import { Switch } from '$lib/components/ui/switch/index.js';
+	import {
+		VideoOff,
+		RefreshCw,
+		Zap,
+		Square,
+		Activity,
+		Settings2,
+		Terminal,
+		Camera
+	} from '@lucide/svelte';
+
+	let cameraVideoElement: HTMLVideoElement | null = null;
+
+	$effect(() => {
+		appController.setCameraVideoElement(cameraVideoElement);
+	});
+
+	const cameraInputItems = () =>
+		$appState.cameraInputDevices.map((cameraInput) => ({
+			value: cameraInput.id,
+			label: cameraInput.label
+		}));
+
+	const selectedCameraInputLabel = () =>
+		$appState.cameraInputDevices.find((cameraInput) => cameraInput.id === $appState.selectedCameraInputId)?.label ||
+		($appState.cameraInputDevices.length > 0 ? 'Choose camera input' : 'No camera inputs found');
+
+	const motionDetectionProfileItems = [
+		{ value: 'low_power', label: 'Low Power' },
+		{ value: 'balanced', label: 'Balanced' },
+		{ value: 'responsive', label: 'Responsive' }
+	];
+
+	const motionDetectionProfileLabel = () =>
+		motionDetectionProfileItems.find((item) => item.value === $appState.motionDetection.profile)?.label || 'Balanced';
+</script>
+
+<AppChrome pageKey="camera">
+	<section id="screen-home-camera" class="mx-auto flex h-full min-h-0 max-w-7xl flex-col gap-4 lg:gap-6">
+		<div class="flex flex-col gap-4 lg:gap-6 xl:flex-1 xl:min-h-0">
+			<Card variant="glass" class="relative flex min-h-[220px] overflow-hidden sm:min-h-[260px] xl:flex-[3]">
+				<div id="cameraPreview" class="flex-1 bg-black relative flex items-center justify-center {$appState.isMotionActive ? 'bg-red-900/20' : ''}">
+					<video
+						id="cameraVideo"
+						class="absolute inset-0 w-full h-full object-cover {$appState.cameraPreviewReady ? '' : 'hidden'}"
+						autoplay
+						playsinline
+						muted
+						bind:this={cameraVideoElement}
+					></video>
+					<Badge
+						variant="destructive"
+						class="absolute top-4 left-4 z-20 gap-2 rounded-full border border-white/10 bg-black/50 px-3 py-1.5 backdrop-blur"
+					>
+						<span class="w-2 h-2 bg-red-500 rounded-full shadow-[0_0_8px_rgba(239,68,68,0.8)] animate-pulse"></span>
+						<span class="text-[10px] font-bold tracking-widest">REC</span>
+					</Badge>
+				</div>
+
+				<div
+					id="cameraOfflineOverlay"
+					class="absolute inset-0 bg-[#0a0a0c]/80 backdrop-blur-sm z-10 flex flex-col items-center justify-center gap-4 {$appState.socketConnected ? 'hidden' : ''}"
+				>
+					<Alert variant="default" class="w-full max-w-sm border-white/10 bg-[#141418]/90 text-center shadow-xl">
+						<VideoOff class="mx-auto h-12 w-12 text-gray-600 mb-2" />
+						<AlertTitle class="text-base text-white">Camera Offline</AlertTitle>
+						<AlertDescription class="text-sm text-gray-400">
+							Reconnect this device to resume live monitoring.
+						</AlertDescription>
+						<div class="mt-4 flex justify-center">
+							<Button
+								id="cameraGoOnlineBtn"
+								variant="outline"
+								class="rounded-xl border-emerald-500/50 text-emerald-400 hover:border-emerald-400 hover:bg-emerald-500/10"
+								onclick={() => appController.goOnline()}
+							>
+								Go Online
+							</Button>
+						</div>
+					</Alert>
+				</div>
+			</Card>
+
+			<div class="grid grid-cols-1 gap-4 lg:gap-6 xl:min-h-0 xl:flex-[2] xl:grid-cols-[2fr_1fr]">
+				<Card variant="glass" class="min-h-[220px] overflow-hidden xl:min-h-0">
+					<CardHeader class="pb-2 flex flex-row items-center gap-2">
+						<Terminal class="size-3.5 text-gray-500" />
+						<CardTitle class="text-[10px] font-bold uppercase tracking-widest text-gray-500">Activity Logs</CardTitle>
+					</CardHeader>
+					<CardContent class="flex-1 xl:min-h-0">
+						<ScrollArea
+							id="cameraLogs"
+							class="h-[220px] rounded-xl border border-white/5 bg-black/40 p-4 text-xs font-mono text-gray-400 xl:h-full xl:min-h-[220px]"
+						>
+						{#if $appState.activityLog.length === 0}
+							<div class="text-gray-600 italic">Awaiting connection...</div>
+						{:else}
+							{#each $appState.activityLog as log (log.id)}
+								<div class="mb-1 leading-relaxed">
+									<span class="text-gray-600">[{new Date(log.createdAt).toLocaleTimeString()}]</span>
+									<span class="text-blue-400/80">{log.type}:</span>
+									<span>{log.message}</span>
+								</div>
+							{/each}
+						{/if}
+						</ScrollArea>
+					</CardContent>
+				</Card>
+
+				<Card variant="glass" class="min-h-[220px] overflow-hidden xl:min-h-0">
+					<CardHeader class="pb-2 flex flex-row items-center gap-2">
+						<Settings2 class="size-3.5 text-gray-500" />
+						<CardTitle class="text-[10px] font-bold uppercase tracking-widest text-gray-500">Control Plane</CardTitle>
+					</CardHeader>
+					<CardContent class="space-y-4 xl:min-h-0 xl:overflow-y-auto">
+						<div class="space-y-2">
+							<div class="flex items-center justify-between gap-2">
+								<Label for="cameraInputSelect" class="text-[10px] font-bold uppercase tracking-widest text-gray-400 flex items-center gap-1.5">
+									<Camera class="size-3" />
+									Camera Input
+								</Label>
+								<Button
+									id="refreshCameraInputsBtn"
+									variant="ghost"
+									size="xs"
+									class="h-6 rounded-lg text-gray-500 hover:text-white"
+									onclick={() => appController.refreshCameraInputs()}
+								>
+									<RefreshCw class="size-3 mr-1" />
+									Refresh
+								</Button>
+							</div>
+							<Select
+								type="single"
+								value={$appState.selectedCameraInputId}
+								items={cameraInputItems()}
+								onValueChange={(value) => appController.selectCameraInput(value)}
+							>
+								<SelectTrigger
+									id="cameraInputSelect"
+									class="h-10 w-full rounded-xl border-white/10 bg-black/40 text-gray-200"
+								>
+									{selectedCameraInputLabel()}
+								</SelectTrigger>
+								<SelectContent>
+								{#each $appState.cameraInputDevices as cameraInput (cameraInput.id)}
+										<SelectItem value={cameraInput.id} label={cameraInput.label} />
+								{/each}
+								</SelectContent>
+							</Select>
+						</div>
+
+						<div class="space-y-3 rounded-2xl border border-white/10 bg-black/30 p-3 sm:p-4 sm:space-y-4">
+							<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+								<div class="space-y-1">
+									<p class="text-[10px] font-bold uppercase tracking-widest text-gray-400">Automatic Detection</p>
+									<p class="text-sm text-gray-200 font-medium">
+										{$appState.motionDetection.enabled ? 'Armed' : 'Disarmed'}
+									</p>
+									<p class="text-[10px] text-gray-500 leading-tight">
+										Foreground browser monitoring.
+									</p>
+								</div>
+								<Button
+									variant={$appState.motionDetection.enabled ? 'secondary' : 'outline'}
+									class="min-w-[80px] h-9 self-start rounded-xl sm:self-auto text-xs"
+									onclick={() => appController.setMotionDetectionEnabled(!$appState.motionDetection.enabled)}
+								>
+									{$appState.motionDetection.enabled ? 'Pause' : 'Arm'}
+								</Button>
+							</div>
+
+							<div class="space-y-2">
+								<div class="flex items-center justify-between gap-2">
+									<Label for="motionDetectionProfile" class="text-[10px] font-bold uppercase tracking-widest text-gray-400">
+										Profile
+									</Label>
+									<span class="text-[10px] font-bold uppercase tracking-widest text-blue-500/80">{$appState.motionDetection.state}</span>
+								</div>
+								<Select
+									type="single"
+									value={$appState.motionDetection.profile}
+									items={motionDetectionProfileItems}
+									onValueChange={(value) => appController.setMotionDetectionProfile(value)}
+								>
+									<SelectTrigger
+										id="motionDetectionProfile"
+										class="h-10 w-full rounded-xl border-white/10 bg-black/40 text-gray-200"
+									>
+										{motionDetectionProfileLabel()}
+									</SelectTrigger>
+									<SelectContent>
+										{#each motionDetectionProfileItems as item (item.value)}
+											<SelectItem value={item.value} label={item.label} />
+										{/each}
+									</SelectContent>
+								</Select>
+							</div>
+
+							<div class="grid grid-cols-2 gap-2">
+								<div class="rounded-xl border border-white/5 bg-white/5 px-3 py-2">
+									<p class="text-[9px] font-bold uppercase tracking-widest text-gray-500">Detector</p>
+									<p class="mt-0.5 text-xs font-bold text-gray-200">{$appState.motionDetection.state}</p>
+								</div>
+								<div class="rounded-xl border border-white/5 bg-white/5 px-3 py-2">
+									<p class="text-[9px] font-bold uppercase tracking-widest text-gray-500">Score</p>
+									<p class="mt-0.5 text-xs font-bold text-gray-200">{$appState.motionDetection.score.toFixed(3)}</p>
+								</div>
+							</div>
+
+							<div class="flex items-center justify-between gap-3 rounded-xl border border-white/5 bg-white/5 px-3 py-2">
+								<div class="space-y-0.5">
+									<p class="text-xs font-bold text-gray-200">Debug Overlay</p>
+									<p class="text-[10px] text-gray-500">Sample profiles & metrics.</p>
+								</div>
+								<Switch
+									checked={$appState.motionDetection.debug}
+									onCheckedChange={(v) => appController.setMotionDetectionDebug(v)}
+								/>
+							</div>
+						</div>
+
+						<div class="space-y-2">
+						{#if !$appState.isMotionActive}
+								<Button
+									id="startMotionBtn"
+									variant="outline"
+									class="h-12 w-full justify-start rounded-xl border-white/5 bg-white/5 font-bold text-sm hover:border-blue-500/30 hover:bg-blue-500/10 hover:text-blue-400 group"
+									onclick={() => appController.startMotion()}
+								>
+									<Zap class="mr-3 h-4 w-4 text-gray-400 group-hover:text-blue-400" />
+									Simulate Motion
+								</Button>
+						{:else}
+								<Button
+									id="endMotionBtn"
+									variant="outline"
+									class="h-12 w-full justify-start rounded-xl border-white/5 bg-white/5 font-bold text-sm hover:bg-white/10"
+									onclick={() => appController.endMotion()}
+								>
+									<Square class="mr-3 h-4 w-4 text-red-500 animate-pulse" />
+									Stop Recording
+								</Button>
+						{/if}
+						</div>
+					</CardContent>
+				</Card>
+			</div>
+		</div>
+	</section>
+</AppChrome>

WebApp/src/routes/(shell)/app/client/+page.svelte

@@ -0,0 +1,338 @@
+<script lang="ts">
+	// @ts-nocheck
+	import AppChrome from '$lib/sim/ui/AppChrome.svelte';
+	import { appController } from '$lib/app/controller';
+	import { appState } from '$lib/app/store';
+	import { Alert, AlertDescription, AlertTitle } from '$lib/components/ui/alert/index.js';
+	import { Badge } from '$lib/components/ui/badge/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
+	import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '$lib/components/ui/dropdown-menu/index.js';
+	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+	import {
+		Plus,
+		RefreshCw,
+		Monitor,
+		Eye,
+		Video,
+		VideoOff,
+		MoreVertical,
+		X,
+		History,
+		Activity,
+		ShieldCheck,
+		Clock
+	} from '@lucide/svelte';
+
+	let clientVideoElement: HTMLVideoElement | null = null;
+
+	$effect(() => {
+		appController.setClientVideoElement(clientVideoElement);
+	});
+
+	const statusDotClass = (status: string) =>
+		status?.toLowerCase() === 'online' ? 'bg-green-500' : 'bg-gray-600';
+
+	const isCameraLive = (cameraDeviceId: string) => {
+		const sessionId = $appState.cameraSessions?.[cameraDeviceId];
+		if (!sessionId) return false;
+		return $appState.connectedStreamSessionIds.includes(sessionId);
+	};
+
+	const activeCameraLabel = () => {
+		const linked = $appState.linkedCameras.find((camera) => camera.cameraDeviceId === $appState.activeCameraDeviceId);
+		return linked?.cameraName || linked?.cameraDeviceId || 'Live Feed Viewer';
+	};
+
+	const activeStreamSessionId = () => {
+		if ($appState.activeStreamSessionId) {
+			return $appState.activeStreamSessionId;
+		}
+		if (!$appState.activeCameraDeviceId) {
+			return null;
+		}
+		return $appState.cameraSessions?.[$appState.activeCameraDeviceId] ?? null;
+	};
+
+	const activeStreamDiagnostics = () => {
+		const streamSessionId = activeStreamSessionId();
+		if (!streamSessionId) {
+			return null;
+		}
+		return $appState.streamDiagnostics?.[streamSessionId] ?? null;
+	};
+
+	const diagnosticLevelClass = (level: string) => {
+		if (level === 'error') return 'border-red-500/20 bg-red-500/10 text-red-200';
+		if (level === 'success') return 'border-emerald-500/20 bg-emerald-500/10 text-emerald-200';
+		return 'border-white/10 bg-white/5 text-gray-300';
+	};
+</script>
+
+<AppChrome pageKey="client">
+	<section id="screen-home-client" class="mx-auto flex h-full max-w-7xl min-h-0 flex-col gap-6">
+		<div class="flex justify-between items-center px-1">
+			<h2 class="text-2xl font-bold text-white tracking-tight">Client Dashboard</h2>
+			<div class="flex gap-2">
+				<Button
+					id="linkCameraBtn"
+					variant="outline"
+					size="sm"
+					class="rounded-xl border-white/10 text-gray-300 shadow-none hover:bg-white/5 hover:text-white"
+					onclick={() => appController.linkCamera()}
+				>
+					<Plus class="h-4 w-4 mr-1.5" />
+					Link Camera
+				</Button>
+				<Button
+					id="refreshClientBtn"
+					variant="ghost"
+					size="icon-sm"
+					class="rounded-xl border border-white/5 bg-white/5 hover:bg-white/10"
+					aria-label="Refresh linked cameras"
+					title="Refresh linked cameras"
+					onclick={() => appController.refreshClientData()}
+				>
+					<RefreshCw class="h-4 w-4" />
+				</Button>
+			</div>
+		</div>
+
+		<Card variant="glass" class="mb-2 shrink-0 rounded-3xl">
+			<CardHeader class="pb-3 flex flex-row items-center gap-2">
+				<Monitor class="size-3.5 text-gray-500" />
+				<CardTitle class="text-[10px] font-bold uppercase tracking-widest text-gray-500">Your Cameras</CardTitle>
+			</CardHeader>
+			<CardContent>
+				{#if $appState.linkedCameras.length === 0}
+					<Alert variant="default" class="border-dashed border-white/10 bg-black/20 text-center py-8">
+						<AlertTitle class="text-sm text-gray-200">No cameras linked</AlertTitle>
+						<AlertDescription class="text-xs text-gray-500">
+							Link a camera to start viewing live feeds and recordings.
+						</AlertDescription>
+					</Alert>
+				{:else}
+					<ScrollArea class="w-full whitespace-nowrap" orientation="horizontal">
+						<div id="linkedCamerasList" class="flex gap-4 pb-3">
+						{#each $appState.linkedCameras as link (link.id)}
+							<div
+								role="button"
+								tabindex="0"
+								class="min-w-[240px] max-w-[240px] flex-shrink-0 cursor-pointer text-left group"
+								onclick={(event) => {
+									if ((event.target as HTMLElement).closest('[data-menu-trigger]')) return;
+									appController.selectCamera(link.cameraDeviceId);
+								}}
+								onkeydown={(event) => {
+									if (event.key === 'Enter' || event.key === ' ') appController.selectCamera(link.cameraDeviceId);
+								}}
+							>
+								<Card
+									size="sm"
+									class="overflow-hidden rounded-xl border transition-all duration-300 { $appState.activeCameraDeviceId === link.cameraDeviceId ? 'border-blue-500/50 bg-blue-950/20' : 'border-white/5 bg-gray-900/60 hover:border-blue-500/30' }"
+								>
+									<div class="relative aspect-video overflow-hidden border-b border-white/5 bg-black/40">
+										{#if $appState.activeCameraDeviceId === link.cameraDeviceId}
+											<div class="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-blue-500/10 text-blue-400">
+												<Eye class="h-6 w-6" />
+												<Badge variant="secondary" class="rounded-full px-2 text-[10px] uppercase tracking-wider">
+													Viewing
+												</Badge>
+											</div>
+										{:else}
+											<div class="absolute inset-0 flex flex-col items-center justify-center gap-2 text-gray-600 transition-colors group-hover:text-gray-400">
+												<Video class="h-6 w-6" />
+												<p class="text-[10px] font-medium tracking-wide">{isCameraLive(link.cameraDeviceId) ? 'LIVE' : 'CLICK TO VIEW'}</p>
+											</div>
+										{/if}
+									</div>
+									<CardContent class="px-3 py-3">
+										<div class="flex items-start justify-between gap-2">
+											<div class="min-w-0 flex-1 space-y-2">
+												<p class="truncate text-xs font-bold text-gray-200" title={link.cameraName || link.cameraDeviceId}>
+													{link.cameraName || link.cameraDeviceId}
+												</p>
+												<Badge
+													variant={link.cameraStatus?.toLowerCase() === 'online' ? 'secondary' : 'outline'}
+													class="gap-1.5 rounded-full px-2 capitalize text-[10px]"
+												>
+													<span class="h-1.5 w-1.5 rounded-full shrink-0 {statusDotClass(link.cameraStatus)} shadow-[0_0_4px_rgba(16,185,129,0.4)]"></span>
+													{link.cameraStatus || 'offline'}
+												</Badge>
+											</div>
+											<DropdownMenu>
+												<DropdownMenuTrigger>
+													{#snippet child({ props })}
+														<Button
+															data-menu-trigger
+															variant="ghost"
+															size="icon-xs"
+															class="text-gray-400 hover:text-white"
+															{...props}
+														>
+															<MoreVertical class="h-3.5 w-3.5" />
+														</Button>
+													{/snippet}
+												</DropdownMenuTrigger>
+												<DropdownMenuContent align="end" class="w-28">
+													<DropdownMenuItem
+														onclick={(event) => {
+															event.stopPropagation();
+															appController.renameLinkedCamera(link.cameraDeviceId);
+														}}
+													>
+														Rename
+													</DropdownMenuItem>
+													<DropdownMenuItem
+														variant="destructive"
+														onclick={(event) => {
+															event.stopPropagation();
+															appController.deleteLinkedCamera(link.id);
+														}}
+													>
+														Delete
+													</DropdownMenuItem>
+												</DropdownMenuContent>
+											</DropdownMenu>
+										</div>
+									</CardContent>
+								</Card>
+							</div>
+						{/each}
+						</div>
+					</ScrollArea>
+				{/if}
+			</CardContent>
+		</Card>
+
+		<div class="flex flex-1 min-h-0 flex-col gap-6 xl:flex-row">
+			<Card
+				id="clientStreamViewerWrapper"
+				variant="glass"
+				class="min-w-0 flex-1 overflow-hidden shadow-xl {$appState.activeCameraDeviceId ? 'flex min-h-[400px] flex-col xl:min-h-0' : 'hidden'}"
+			>
+				<CardHeader class="border-b border-white/5 bg-black/20 px-5 py-3">
+					<div class="flex items-center justify-between gap-3">
+						<div class="flex items-center gap-3">
+							{#if isCameraLive($appState.activeCameraDeviceId)}
+								<span class="w-2 h-2 rounded-full bg-red-500 animate-[pulse_2s_ease-in-out_infinite]" id="clientLiveDot"></span>
+							{/if}
+							<CardTitle class="text-sm font-semibold tracking-wide text-white" id="clientStreamViewerTitle">
+								{activeCameraLabel()}
+							</CardTitle>
+						</div>
+						<Button
+						id="closeStreamViewerBtn"
+						variant="ghost"
+						size="icon-xs"
+						class="text-gray-400 hover:text-white"
+						aria-label="Close stream viewer"
+						title="Close stream viewer"
+						onclick={() => appController.closeStreamViewer()}
+					>
+							<X class="h-4 w-4" />
+						</Button>
+					</div>
+				</CardHeader>
+
+				<CardContent id="clientStreamContainer" class="relative flex min-h-[320px] flex-1 items-center justify-center overflow-hidden bg-black p-0">
+					<video
+						id="clientStreamVideo"
+						class="absolute inset-0 h-full w-full object-contain {$appState.clientStreamMode === 'video' ? '' : 'hidden'}"
+						autoplay
+						muted
+						playsinline
+						bind:this={clientVideoElement}
+					></video>
+
+					<div
+						id="clientStreamPlaceholder"
+						class="relative z-10 m-6 flex max-w-sm flex-col items-center gap-4 text-center {$appState.clientStreamMode === 'none' || $appState.clientStreamMode === 'connecting' || $appState.clientStreamMode === 'unavailable' ? '' : 'hidden'}"
+					>
+						<div class="p-5 rounded-full bg-white/5 mb-2">
+							<VideoOff class="h-10 w-10 text-gray-600" />
+						</div>
+						<p class="text-base font-semibold text-white">Stream unavailable</p>
+						<p class="text-xs font-bold uppercase tracking-widest text-gray-500">
+							{$appState.clientPlaceholderText}
+						</p>
+					</div>
+				</CardContent>
+
+				{#if activeStreamDiagnostics()}
+					<div class="border-t border-white/5 bg-black/20 px-5 py-4">
+						<div class="flex flex-wrap items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-gray-500">
+							<Activity class="size-3 text-blue-500" />
+							<span>Diagnostics</span>
+							<Badge variant="outline" class="border-white/5 text-[9px] text-gray-500 px-1.5 font-mono">
+								{activeStreamSessionId()?.slice(0, 8)}
+							</Badge>
+							{#if isCameraLive($appState.activeCameraDeviceId)}
+								<Badge variant="secondary" class="rounded-full px-2 text-[9px] font-bold uppercase tracking-widest">Peer connected</Badge>
+							{/if}
+						</div>
+						<div class="mt-4 grid gap-2">
+							{#each activeStreamDiagnostics().entries.slice(0, 4) as entry (entry.id)}
+								<div class="rounded-xl border px-3 py-2 {diagnosticLevelClass(entry.level)} transition-colors">
+									<div class="flex items-center justify-between gap-3">
+										<span class="text-[10px] font-bold uppercase tracking-wider">{entry.stage}</span>
+										<span class="text-[9px] font-medium opacity-50">{new Date(entry.createdAt).toLocaleTimeString()}</span>
+									</div>
+									<p class="mt-1 text-xs text-current opacity-90">{entry.message}</p>
+								</div>
+							{/each}
+						</div>
+					</div>
+				{/if}
+			</Card>
+
+			<div class="flex shrink-0 flex-col gap-6 pr-2 xl:max-h-full xl:w-96 xl:overflow-y-auto">
+				<Card variant="glass" class="flex-1 rounded-3xl">
+					<CardHeader class="pb-3 flex flex-row items-center gap-2">
+						<History class="size-3.5 text-gray-500" />
+						<CardTitle class="text-[10px] font-bold uppercase tracking-widest text-gray-400">Recent Clips</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<ScrollArea class="max-h-[30rem] pr-3">
+							<div id="recordingsList" class="space-y-3">
+						{#if $appState.recordings.length === 0}
+								<Alert variant="default" class="border-dashed border-white/10 bg-gray-900/30 text-center py-6">
+									<AlertTitle class="text-xs text-gray-200">No recordings found</AlertTitle>
+									<AlertDescription class="text-[10px] text-gray-500">
+										Captured clips will appear here.
+									</AlertDescription>
+								</Alert>
+						{:else}
+							{#each $appState.recordings.slice(0, 8) as recording (recording.id)}
+									<Card size="sm" class="border-white/5 bg-white/5 hover:bg-white/10 transition-colors">
+										<CardContent class="flex items-center justify-between gap-4 px-3 py-3">
+											<div class="flex flex-col gap-1">
+												<div class="flex items-center gap-1.5">
+													<Clock class="size-3 text-gray-500" />
+													<span class="text-xs font-semibold text-gray-300">{new Date(recording.createdAt).toLocaleTimeString()}</span>
+												</div>
+												<span class="text-[9px] font-bold uppercase tracking-widest text-gray-500">
+													{recording.status ?? 'unknown'} · {recording.durationSeconds != null ? `${recording.durationSeconds}s` : '--'}
+												</span>
+											</div>
+											<Button
+												variant="outline"
+												size="xs"
+												class="h-7 rounded-lg border-white/10 text-xs font-bold text-gray-400 hover:text-white"
+												disabled={recording.status !== 'ready'}
+												onclick={() => appController.openRecording(recording.id)}
+											>
+												View
+											</Button>
+										</CardContent>
+									</Card>
+							{/each}
+						{/if}
+							</div>
+						</ScrollArea>
+					</CardContent>
+				</Card>
+			</div>
+		</div>
+	</section>
+</AppChrome>

WebApp/src/routes/(shell)/app/onboarding/+page.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+	// @ts-nocheck
+	import AppChrome from '$lib/sim/ui/AppChrome.svelte';
+	import { appController } from '$lib/app/controller';
+	import { appState } from '$lib/app/store';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { Label } from '$lib/components/ui/label/index.js';
+	import { ToggleGroup, ToggleGroupItem } from '$lib/components/ui/toggle-group/index.js';
+	import { Settings } from '@lucide/svelte';
+
+	let showAdvancedSettings = false;
+</script>
+
+<AppChrome pageKey="onboarding">
+	<section id="screen-onboarding" class="flex flex-col items-center justify-center min-h-[70vh] max-w-lg mx-auto">
+		<Card variant="glass" class="w-full rounded-3xl">
+			<CardHeader class="px-6 pt-6 text-center">
+				<CardTitle class="text-3xl font-bold tracking-tight text-white">Configure Device</CardTitle>
+				<CardDescription class="text-sm text-gray-400">Set up this browser dashboard role</CardDescription>
+			</CardHeader>
+			<CardContent class="flex flex-col gap-6 px-6">
+				<div class="flex flex-col gap-2">
+					<Label class="text-xs font-semibold tracking-wider text-gray-400" for="deviceName">DEVICE NAME</Label>
+					<Input
+						id="deviceName"
+						type="text"
+						placeholder="e.g. Living Room Cam"
+						class="h-12 rounded-xl border-white/10 bg-black/40 text-white placeholder:text-gray-500"
+						value={$appState.onboardingForm.name}
+						oninput={(event) => appController.setOnboardingField('name', (event.currentTarget as HTMLInputElement).value)}
+					/>
+				</div>
+
+				<div class="flex flex-col gap-2">
+					<Label class="text-xs font-semibold tracking-wider text-gray-400" for="role">ROLE</Label>
+					<ToggleGroup
+						id="role"
+						type="single"
+						value={$appState.onboardingForm.role}
+						variant="outline"
+						size="lg"
+						class="grid w-full grid-cols-2 gap-2 rounded-xl border border-white/5 bg-black/40 p-1.5"
+						onValueChange={(value) => value && appController.selectRole(value)}
+					>
+						<ToggleGroupItem
+							id="btn-role-camera"
+							value="camera"
+							class="h-10 justify-center rounded-lg border-white/0 text-sm font-medium text-gray-400 data-[state=on]:border-blue-500/30 data-[state=on]:bg-blue-600 data-[state=on]:text-white"
+						>
+							Camera
+						</ToggleGroupItem>
+						<ToggleGroupItem
+							id="btn-role-client"
+							value="client"
+							class="h-10 justify-center rounded-lg border-white/0 text-sm font-medium text-gray-400 data-[state=on]:border-blue-500/30 data-[state=on]:bg-blue-600 data-[state=on]:text-white"
+						>
+							Client
+						</ToggleGroupItem>
+					</ToggleGroup>
+				</div>
+
+				<div class="flex flex-col gap-3">
+					<div class="flex items-center justify-between">
+						<div class="space-y-1">
+							<Label class="text-xs font-semibold tracking-wider text-gray-400">ADVANCED SETTINGS</Label>
+							<p class="text-xs text-gray-500">Optional device settings and push configuration.</p>
+						</div>
+						<Button
+							id="toggleAdvancedSettingsBtn"
+							type="button"
+							variant="ghost"
+							class="h-10 w-10 rounded-full border border-white/10 bg-black/30 p-0 text-gray-300 hover:bg-white/5 hover:text-white"
+							aria-label={showAdvancedSettings ? 'Hide advanced settings' : 'Show advanced settings'}
+							aria-expanded={showAdvancedSettings}
+							onclick={() => (showAdvancedSettings = !showAdvancedSettings)}
+						>
+							<Settings class="h-5 w-5" />
+						</Button>
+					</div>
+
+					{#if showAdvancedSettings}
+						<div class="rounded-2xl border border-white/8 bg-black/30 p-4">
+							<div class="flex flex-col gap-2">
+								<Label class="text-xs font-semibold tracking-wider text-gray-400" for="pushToken">PUSH TOKEN (OPTIONAL)</Label>
+								<Input
+									id="pushToken"
+									type="text"
+									placeholder="simulated_token_123"
+									class="h-12 rounded-xl border-white/10 bg-black/40 text-white placeholder:text-gray-500"
+									value={$appState.onboardingForm.pushToken}
+									oninput={(event) => appController.setOnboardingField('pushToken', (event.currentTarget as HTMLInputElement).value)}
+								/>
+							</div>
+						</div>
+					{/if}
+				</div>
+			</CardContent>
+			<CardFooter class="flex flex-col items-stretch gap-3 border-0 bg-transparent px-6 pb-6 pt-2">
+				<Button
+					id="registerBtn"
+					variant="premium"
+					class="h-12 w-full rounded-xl text-base"
+					onclick={() => appController.registerDevice()}
+				>
+					Complete Setup
+				</Button>
+				<Button
+					id="loadSavedBtn"
+					variant="ghost"
+					class="h-12 w-full rounded-xl text-gray-500 hover:bg-white/5 hover:text-white"
+					onclick={() => appController.loadSavedDevice()}
+				>
+					Load previously saved device
+				</Button>
+			</CardFooter>
+		</Card>
+	</section>
+</AppChrome>

WebApp/src/routes/(shell)/app/settings/+page.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+	// @ts-nocheck
+	import { api } from '$lib/app/api';
+	import AppChrome from '$lib/sim/ui/AppChrome.svelte';
+	import { appController } from '$lib/app/controller';
+	import { appState } from '$lib/app/store';
+	import { Avatar, AvatarFallback } from '$lib/components/ui/avatar/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
+	import { Separator } from '$lib/components/ui/separator/index.js';
+	import {
+		BarChart3,
+		ChevronRight,
+		Settings,
+		LogOut,
+		Database,
+		ShieldCheck,
+		Activity
+	} from '@lucide/svelte';
+
+	const profileName = () => $appState.session?.user?.name || 'User';
+	const profileEmail = () => $appState.session?.user?.email || 'user@example.com';
+	const profileInitial = () => ($appState.session?.user?.name?.[0] || 'U').toUpperCase();
+
+	let isCheckingMinio = false;
+	let minioStatus: 'idle' | 'ok' | 'error' = 'idle';
+	let minioStatusMessage = '';
+	let minioCheckedAt = '';
+
+	const checkMinioServer = async () => {
+		isCheckingMinio = true;
+		minioStatus = 'idle';
+		minioStatusMessage = '';
+
+		try {
+			const readiness = await api.ops.getReadiness();
+			const minioCheck = readiness?.checks?.minio;
+			minioStatus = minioCheck === 'ok' ? 'ok' : 'error';
+			minioStatusMessage =
+				minioCheck === 'ok'
+					? 'MinIO is reachable and the configured bucket responded successfully.'
+					: `MinIO readiness check returned: ${String(minioCheck ?? 'unknown')}`;
+			minioCheckedAt = readiness?.timestamp ?? new Date().toISOString();
+		} catch (error) {
+			minioStatus = 'error';
+			minioStatusMessage = error instanceof Error ? error.message : 'MinIO check failed';
+			minioCheckedAt = new Date().toISOString();
+		} finally {
+			isCheckingMinio = false;
+		}
+	};
+
+	const formatCheckedAt = (value) => {
+		if (!value) {
+			return '';
+		}
+
+		try {
+			return new Date(value).toLocaleString();
+		} catch {
+			return value;
+		}
+	};
+</script>
+
+<AppChrome pageKey="settings">
+	<section id="screen-settings" class="flex flex-col gap-6 max-w-2xl mx-auto py-8">
+		<h2 class="text-2xl font-bold text-white tracking-tight px-2">Settings</h2>
+
+		<Card variant="glass" class="rounded-3xl">
+			<CardContent class="flex items-center gap-6 py-6">
+				<Avatar id="profileInitials" size="lg" class="size-20 bg-blue-600/20 text-2xl font-bold text-blue-500">
+					<AvatarFallback>{profileInitial()}</AvatarFallback>
+				</Avatar>
+				<div>
+					<h3 class="text-xl font-semibold tracking-wide text-white" id="profileName">{profileName()}</h3>
+					<p class="mt-1 text-gray-400" id="profileEmail">{profileEmail()}</p>
+				</div>
+			</CardContent>
+		</Card>
+
+		<Card variant="glass" class="overflow-hidden rounded-3xl">
+			<CardHeader>
+				<CardTitle class="text-sm font-semibold tracking-wide text-white">Tools & Diagnostics</CardTitle>
+			</CardHeader>
+			<CardContent class="flex flex-col gap-0 p-0">
+				<Button
+				id="checkOpsBtn"
+				variant="ghost"
+				class="group h-auto w-full justify-between rounded-none px-5 py-5 text-left text-gray-300 hover:bg-white/5"
+				onclick={() => appController.runDiagnostics()}
+			>
+				<div class="flex items-center gap-4">
+					<div class="p-2 rounded-lg bg-white/5 group-hover:bg-blue-500/20 group-hover:text-blue-400 transition-colors">
+						<BarChart3 class="h-5 w-5" />
+					</div>
+					<span class="font-medium">Run System Diagnostics</span>
+				</div>
+				<ChevronRight class="h-4 w-4 text-gray-600 group-hover:text-gray-400 transition-colors" />
+				</Button>
+				<Separator class="bg-white/5" />
+				<div class="px-5 py-5">
+					<div class="flex flex-col gap-4 rounded-2xl border border-white/8 bg-white/[0.03] p-4">
+						<div class="flex items-start justify-between gap-4">
+							<div class="space-y-1">
+								<div class="flex items-center gap-2">
+									<Database class="size-4 text-blue-500" />
+									<h4 class="text-sm font-semibold tracking-wide text-white">MinIO Storage Check</h4>
+								</div>
+								<p class="text-xs text-gray-400">
+									Test backend connectivity to object storage.
+								</p>
+							</div>
+							<Button
+								id="checkMinioBtn"
+								size="sm"
+								variant="outline"
+								class="shrink-0 rounded-xl border-white/10"
+								disabled={isCheckingMinio}
+								onclick={checkMinioServer}
+							>
+								{isCheckingMinio ? 'Checking…' : 'Check Now'}
+							</Button>
+						</div>
+
+						{#if minioStatus !== 'idle'}
+							<div
+								class={`rounded-xl border px-3 py-3 text-sm ${
+									minioStatus === 'ok'
+										? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-300'
+										: 'border-red-500/30 bg-red-500/10 text-red-300'
+								}`}
+							>
+								<div class="flex items-center gap-2">
+									{#if minioStatus === 'ok'}
+										<ShieldCheck class="size-4" />
+									{:else}
+										<Activity class="size-4" />
+									{/if}
+									<p class="font-medium">
+										{minioStatus === 'ok' ? 'MinIO is up' : 'MinIO check failed'}
+									</p>
+								</div>
+								<p class="mt-1 opacity-90 text-xs">{minioStatusMessage}</p>
+								{#if minioCheckedAt}
+									<p class="mt-2 text-[10px] opacity-75 italic">Last checked: {formatCheckedAt(minioCheckedAt)}</p>
+								{/if}
+							</div>
+						{/if}
+					</div>
+				</div>
+				<Separator class="bg-white/5" />
+				<Button variant="ghost" class="group h-auto w-full justify-between rounded-none px-5 py-5 text-left text-gray-300 hover:bg-white/5">
+				<div class="flex items-center gap-4">
+					<div class="p-2 rounded-lg bg-white/5 group-hover:bg-blue-500/20 group-hover:text-blue-400 transition-colors">
+						<Settings class="h-5 w-5" />
+					</div>
+					<span class="font-medium">Device Information</span>
+				</div>
+				<ChevronRight class="h-4 w-4 text-gray-600 group-hover:text-gray-400 transition-colors" />
+				</Button>
+			</CardContent>
+		</Card>
+
+		<Button
+			id="signOutBtn"
+			variant="destructive"
+			class="mt-4 h-14 w-full rounded-2xl border border-red-500/50 text-base font-bold hover:border-red-500 hover:bg-red-500/10"
+			onclick={() => appController.signOut()}
+		>
+			<LogOut class="mr-3 h-5 w-5" />
+			Sign Out
+		</Button>
+	</section>
+</AppChrome>