Передаем на тест

frontend/src/components/Navbar.svelte

@@ -9,6 +9,13 @@
     import { page } from '$app/stores';
     import { t } from '$lib/i18n';
     import { LanguageSwitcher } from '$lib/ui';
+    import { auth } from '../lib/auth/store';
+    import { goto } from '$app/navigation';
+
+    function handleLogout() {
+        auth.logout();
+        goto('/login');
+    }
 </script>
 
 <header class="bg-white shadow-md p-4 flex justify-between items-center">
@@ -41,7 +48,32 @@
                 <a href="/settings/git" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">{$t.nav.settings_git}</a>
             </div>
         </div>
+
+        {#if $auth.isAuthenticated && $auth.user?.roles?.some(r => r.name === 'Admin')}
+            <div class="relative inline-block group">
+                <button class="text-gray-600 hover:text-blue-600 font-medium pb-1 {$page.url.pathname.startsWith('/admin') ? 'text-blue-600 border-b-2 border-blue-600' : ''}">
+                    {$t.nav.admin}
+                </button>
+                <div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-1 py-2 w-48 z-10 border border-gray-100 before:absolute before:-top-2 before:left-0 before:right-0 before:h-2 before:content-[''] right-0">
+                    <a href="/admin/users" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">{$t.nav.admin_users}</a>
+                    <a href="/admin/roles" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">{$t.nav.admin_roles}</a>
+                    <a href="/admin/settings" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">{$t.nav.admin_settings}</a>
+                </div>
+            </div>
+        {/if}
         <LanguageSwitcher />
+        
+        {#if $auth.isAuthenticated}
+            <div class="flex items-center space-x-2 border-l pl-4 ml-4">
+                <span class="text-sm text-gray-600">{$auth.user?.username}</span>
+                <button
+                    on:click={handleLogout}
+                    class="text-sm text-red-600 hover:text-red-800 font-medium"
+                >
+                    Logout
+                </button>
+            </div>
+        {/if}
     </nav>
 </header>
 <!-- [/DEF:Navbar:Component] -->

frontend/src/components/auth/ProtectedRoute.svelte

@@ -0,0 +1,61 @@
+<!-- [DEF:ProtectedRoute:Component] -->
+<!--
+@SEMANTICS: auth, guard, route, protection
+@PURPOSE:   Wraps content to ensure only authenticated users can access it.
+@LAYER:     Component
+@RELATION:  USES -> authStore
+@RELATION:  CALLS -> goto
+
+@INVARIANT: Redirects to /login if user is not authenticated.
+-->
+
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { auth } from '../../lib/auth/store';
+    import { goto } from '$app/navigation';
+
+    // [SECTION: TEMPLATE]
+    // Only render slot if authenticated
+    // [/SECTION: TEMPLATE]
+
+    onMount(async () => {
+        // Check if we have a token but no user profile yet
+        if ($auth.token && !$auth.user) {
+            auth.setLoading(true);
+            try {
+                const response = await fetch('/api/auth/me', {
+                    headers: {
+                        'Authorization': `Bearer ${$auth.token}`
+                    }
+                });
+                
+                if (response.ok) {
+                    const user = await response.json();
+                    auth.setUser(user);
+                } else {
+                    // Token invalid or expired
+                    auth.logout();
+                    goto('/login');
+                }
+            } catch (e) {
+                console.error('Failed to verify session:', e);
+                auth.logout();
+                goto('/login');
+            } finally {
+                auth.setLoading(false);
+            }
+        } else if (!$auth.token) {
+            goto('/login');
+        }
+    });
+</script>
+
+{#if $auth.loading}
+    <div class="flex items-center justify-center min-h-screen">
+        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+    </div>
+{:else if $auth.isAuthenticated}
+    <slot />
+{/if}
+
+<!-- [/DEF:ProtectedRoute:Component] -->