frontend: add login page and auth guard

Add authentication flow to the frontend:
- authStore with token management (localStorage persistence)
- Login page with username/password form at /login
- Layout-level auth guard that redirects to /login when no valid
  session exists, validates token on load via GET /api/auth/me
- Top navigation bar showing username and admin link when applicable

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/routes/+layout.svelte

@@ -1,22 +1,67 @@
 <script lang="ts">
-	//import Header from './Header.svelte';
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import { isAuthenticated, getToken, handleUnauthorized } from './stores/authStore.svelte';
 	import '../app.css';
 
 	let { children } = $props();
+
+	let userProfile: { username: string; is_admin: boolean } | null = $state(null);
+	let authChecked = $state(false);
+
+	onMount(async () => {
+		const currentPath = page.url.pathname;
+
+		if (currentPath === '/login') {
+			authChecked = true;
+			return;
+		}
+
+		if (!isAuthenticated()) {
+			await goto('/login');
+			authChecked = true;
+			return;
+		}
+
+		// Validate token by fetching user profile
+		try {
+			const response = await fetch('/api/auth/me', {
+				headers: { Authorization: `Bearer ${getToken()}` }
+			});
+
+			if (!response.ok) {
+				handleUnauthorized();
+				authChecked = true;
+				return;
+			}
+
+			userProfile = await response.json();
+		} catch {
+			handleUnauthorized();
+		}
+
+		authChecked = true;
+	});
 </script>
 
 <div class="app">
-	<!--<Header />-->
+	{#if authChecked}
+		{#if userProfile && page.url.pathname !== '/login'}
+			<nav class="top-nav">
+				<a href="/" class="nav-link">Apps</a>
+				{#if userProfile.is_admin}
+					<a href="/admin" class="nav-link">Admin</a>
+				{/if}
+				<span class="nav-spacer"></span>
+				<span class="nav-user">{userProfile.username}</span>
+			</nav>
+		{/if}
 
-	<main>
-		{@render children()}
-	</main>
-
-	<!--<footer>
-		<p>
-			visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to learn about SvelteKit
-		</p>
-	</footer>-->
+		<main>
+			{@render children()}
+		</main>
+	{/if}
 </div>
 
 <style>
@@ -27,31 +72,39 @@
 	}
 
 	main {
-		/*flex: 1;*/
-		/*display: flex;*/
-		/*flex-direction: column;*/
-		/*padding: 1rem;*/
 		width: 100%;
-		/*max-width: 64rem;*/
 		margin: 0 auto;
 		box-sizing: border-box;
 	}
 
-	footer {
+	.top-nav {
 		display: flex;
-		flex-direction: column;
-		justify-content: center;
 		align-items: center;
-		padding: 12px;
+		padding: 0.5rem 1rem;
+		background-color: #1a1a2e;
+		border-bottom: 1px solid #333;
 	}
 
-	footer a {
-		font-weight: bold;
+	.nav-link {
+		color: #aaa;
+		text-decoration: none;
+		padding: 0.4rem 0.8rem;
+		border-radius: 4px;
+		font-size: 0.9rem;
 	}
 
-	@media (min-width: 480px) {
-		footer {
-			padding: 12px 0;
-		}
+	.nav-link:hover {
+		color: #e0e0e0;
+		background-color: #2a2a4e;
+		text-decoration: none;
+	}
+
+	.nav-spacer {
+		flex-grow: 1;
+	}
+
+	.nav-user {
+		color: #888;
+		font-size: 0.85rem;
 	}
 </style>