feat: Phases 4-7 — Full Feature Expansion (26 features)

Phase 4 — New Widget Types:
- Clock/Weather, System Stats, RSS/Feed, Calendar, Markdown,
  Metric/Counter, Link Group, Camera/Stream widgets
- Backend services with caching for each data source
- Full creation form with dynamic config fields per type

Phase 5 — Visual & Styling Enhancements:
- Glassmorphism card style (solid/glass/outline)
- Board-level themes with per-board hue/saturation
- Animated SVG status rings replacing static dots
- Card size options (compact/medium/large)
- Custom CSS injection (admin + per-board, sanitized)
- Wallpaper backgrounds with blur/overlay/parallax

Phase 6 — Functional Features:
- Favorites bar with drag-and-drop reordering
- Recent apps tracking with privacy toggle
- Uptime dashboard page (/status, guest-accessible)
- Notifications system (Discord/Slack/Telegram/HTTP webhooks)
- App tags with filtering in board view
- Multi-URL app cards with expandable sub-links
- Personal API tokens with scoped permissions
- Audit log with retention and admin viewer

Phase 7 — Quality of Life:
- Onboarding wizard (5-step first-launch setup)
- App URL health preview with favicon/title detection
- Board templates (4 built-in + custom import/export)
- Keyboard shortcut overlay (j/k nav, 1-9 boards, ? help)

212 files changed, 15641 insertions, 980 deletions.
Build, lint, type check, and 222 tests all pass.

src/lib/components/widget/MetricWidget.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { TrendingUp, TrendingDown, Minus } from 'lucide-svelte';
+	import type { MetricWidgetConfig } from '$lib/types/widget.js';
+
+	interface Props {
+		config: MetricWidgetConfig;
+	}
+
+	let { config }: Props = $props();
+
+	let currentValue: number | null = $state(null);
+	let trend: 'up' | 'down' | 'flat' | null = $state(null);
+	let loading = $state(true);
+	let error = $state(false);
+
+	const refreshMs = $derived((config.refreshInterval ?? 60) * 1000);
+
+	function formatNumber(n: number): string {
+		if (Math.abs(n) >= 1_000_000) {
+			return (n / 1_000_000).toFixed(1) + 'M';
+		}
+		if (Math.abs(n) >= 1_000) {
+			return (n / 1_000).toFixed(1) + 'K';
+		}
+		// Use locale formatting for smaller numbers
+		return n.toLocaleString('en-US', { maximumFractionDigits: 2 });
+	}
+
+	async function fetchMetric() {
+		error = false;
+		try {
+			// eslint-disable-next-line svelte/prefer-svelte-reactivity
+			const params = new URLSearchParams({ source: config.source });
+			if (config.value) params.set('value', config.value);
+			if (config.url) params.set('url', config.url);
+			if (config.jsonPath) params.set('jsonPath', config.jsonPath);
+			if (config.query) params.set('query', config.query);
+
+			const res = await fetch(`/api/widgets/metric?${params}`);
+			if (res.ok) {
+				const json = await res.json();
+				if (json.success && json.data) {
+					currentValue = json.data.value;
+					trend = json.data.trend ?? null;
+				}
+			} else {
+				error = true;
+			}
+		} catch {
+			error = true;
+		} finally {
+			loading = false;
+		}
+	}
+
+	onMount(() => {
+		fetchMetric();
+	});
+
+	$effect(() => {
+		const interval = setInterval(fetchMetric, refreshMs);
+		return () => clearInterval(interval);
+	});
+
+	const trendColor = $derived.by(() => {
+		if (trend === 'up') return 'text-green-500';
+		if (trend === 'down') return 'text-red-500';
+		return 'text-muted-foreground';
+	});
+</script>
+
+<div class="flex h-full flex-col items-center justify-center rounded-xl border border-border bg-card p-4">
+	{#if loading}
+		<div class="flex flex-col items-center gap-2">
+			<div class="h-10 w-24 animate-pulse rounded bg-muted"></div>
+			<div class="h-4 w-16 animate-pulse rounded bg-muted"></div>
+		</div>
+	{:else if error}
+		<span class="text-xs text-muted-foreground">Failed to load metric</span>
+	{:else if currentValue !== null}
+		<!-- Trend arrow -->
+		<div class="mb-1 {trendColor}">
+			{#if trend === 'up'}
+				<TrendingUp class="h-5 w-5" />
+			{:else if trend === 'down'}
+				<TrendingDown class="h-5 w-5" />
+			{:else}
+				<Minus class="h-5 w-5" />
+			{/if}
+		</div>
+
+		<!-- Big number -->
+		<div class="flex items-baseline gap-1">
+			<span class="text-4xl font-bold tabular-nums text-foreground">
+				{formatNumber(currentValue)}
+			</span>
+			{#if config.unit}
+				<span class="text-lg text-muted-foreground">{config.unit}</span>
+			{/if}
+		</div>
+
+		<!-- Label -->
+		<p class="mt-1 text-sm text-muted-foreground">{config.label}</p>
+	{:else}
+		<span class="text-xs text-muted-foreground">No data</span>
+	{/if}
+</div>