docs(ui): Add UI layout refactor plan and OpenSpec changes

- Update decision-log with UI layout decisions (Feb 18, 2026)
- Update architecture with frontend layout patterns
- Update config.yaml with TDD, documentation, UI standards rules
- Create p00-api-documentation change (Scribe annotations)
- Create p01-ui-foundation change (types, stores, Lucide)
- Create p02-app-layout change (AppLayout, Sidebar, TopBar)
- Create p03-dashboard-enhancement change (PageHeader, StatCard)
- Create p04-content-patterns change (DataTable, FilterBar)
- Create p05-page-migrations change (page migrations)
- Fix E2E auth tests (11/11 passing)
- Add JWT expiry validation to dashboard guard

frontend/src/lib/components/Auth/LoginForm.svelte

@@ -23,7 +23,7 @@
 
   type LoginFormData = z.infer<typeof loginSchema>;
 
-  // Form data - use $state for reactivity
+  // Form data
   let formData: LoginFormData = $state({
     email: '',
     password: '',
@@ -43,7 +43,9 @@
       if (err instanceof z.ZodError) {
         err.errors.forEach((error) => {
           const field = error.path[0] as keyof LoginFormData;
-          errors[field] = error.message;
+          if (!errors[field]) {
+            errors[field] = error.message;
+          }
         });
       }
       return false;
@@ -59,7 +61,7 @@
   }
 </script>
 
-<form class="space-y-4" onsubmit={handleSubmit}>
+<form class="space-y-4" onsubmit={handleSubmit} novalidate>
   {#if errorMessage}
     <div class="alert alert-error" role="alert">
       <svg

frontend/src/lib/services/api.ts

@@ -22,6 +22,33 @@ export function getRefreshToken(): string | null {
   return localStorage.getItem(REFRESH_TOKEN_KEY);
 }
 
+export function isValidJwtFormat(token: string | null): boolean {
+  if (!token) return false;
+  const parts = token.split('.');
+  if (parts.length !== 3) return false;
+  return parts.every(part => part.length > 0);
+}
+
+export function isJwtExpired(token: string | null): boolean {
+  if (!isValidJwtFormat(token)) return true;
+
+  try {
+    const payload = token!.split('.')[1];
+    const normalized = payload.replace(/-/g, '+').replace(/_/g, '/');
+    const padded = normalized + '='.repeat((4 - (normalized.length % 4)) % 4);
+    const decoded = atob(padded);
+    const data = JSON.parse(decoded) as { exp?: number };
+
+    if (typeof data.exp !== 'number') {
+      return false;
+    }
+
+    return data.exp <= Math.floor(Date.now() / 1000);
+  } catch {
+    return true;
+  }
+}
+
 export function setTokens(accessToken: string, refreshToken: string): void {
   if (typeof localStorage === 'undefined') return;
   localStorage.setItem(ACCESS_TOKEN_KEY, accessToken);

frontend/src/routes/+page.svelte

@@ -2,15 +2,25 @@
 	import { goto } from '$app/navigation';
 	import { isAuthenticated } from '$lib/stores/auth';
 	import { browser } from '$app/environment';
+	import { page } from '$app/stores';
+	import { onMount } from 'svelte';
 
-	// Redirect based on auth state
-	$: if (browser) {
-		if ($isAuthenticated) {
-			goto('/dashboard');
-		} else {
-			goto('/login');
+	// Only redirect when actually on the root page, not during navigation
+	onMount(() => {
+		if (browser) {
+			const unsubscribe = isAuthenticated.subscribe((authenticated) => {
+				// Only redirect if we're actually on the root page
+				if ($page.url.pathname === '/') {
+					if (authenticated) {
+						goto('/dashboard');
+					} else {
+						goto('/login');
+					}
+				}
+			});
+			return unsubscribe;
 		}
-	}
+	});
 </script>
 
 <div class="flex items-center justify-center min-h-screen">

frontend/src/routes/dashboard/+layout.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  let { children }: { children: import('svelte').Snippet } = $props();
+</script>
+
+{@render children()}

frontend/src/routes/dashboard/+layout.ts

@@ -1,17 +1,21 @@
 import { browser } from '$app/environment';
-import { goto } from '$app/navigation';
-import { getAccessToken } from '$lib/services/api';
+import { redirect } from '@sveltejs/kit';
+import { clearTokens, getAccessToken, isJwtExpired, isValidJwtFormat } from '$lib/services/api';
 import type { LayoutLoad } from './$types';
 
+export const ssr = false;
+
 export const load: LayoutLoad = async () => {
-  // Check authentication on client side using localStorage (source of truth)
-  if (browser) {
-    const token = getAccessToken();
-    
-    if (!token) {
-      goto('/login');
-      return { authenticated: false };
-    }
+  if (!browser) {
+    return { authenticated: false };
+  }
+
+  const token = getAccessToken();
+  const isAuthenticated = Boolean(token && isValidJwtFormat(token) && !isJwtExpired(token));
+
+  if (!isAuthenticated) {
+    clearTokens();
+    throw redirect(307, '/login');
   }
 
   return { authenticated: true };