feat: add settings page and theme toggle in user dropdown

- Settings page with Appearance, Navigation, and Account sections
- Theme toggle (System/Light/Dark) in profile dropdown
- Theme syncs with API preferences on login
- Default room preference syncs with backend

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

AGENTS.md

@@ -59,10 +59,8 @@ This project uses version-tag-based CI/CD. Releases trigger automated Docker bui
 3. Commit changes: `git commit -m "chore: release vX.X.X"`
 4. Create git tag: `git tag vX.X.X`
 5. Push with tags: `git push origin master --tags`
-6. Create release in Gitea UI (git.schweitz.net → Releases → New Release)
+
-   * Select the tag
+CI/CD auto-triggers when a tag starting with `v` is pushed.
-   * Add release notes (can copy from CHANGELOG)
-   * **Publish** the release (this triggers CI/CD)
 
 **What happens on release:**
 

CHANGELOG.md

@@ -7,6 +7,43 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.1.13] - 2026-01-04
+
+### Added
+- Settings page with Appearance, Navigation, and Account sections
+- Theme toggle in user profile dropdown (System/Light/Dark)
+- Theme syncs with API preferences on login
+- Default room preference syncs with backend
+
+### Changed
+- Theme changes now persist to both local storage and API
+
+## [1.1.12] - 2026-01-04
+
+### Changed
+- Control Room navigation reorganized:
+  - New "Stack" section with Containers and Proxy Hosts
+  - New "Data Management" section with PostgreSQL, Redis, Qdrant, Neo4j placeholders
+  - Removed: Networks, Volumes, Images (Portainer) and Redirections, Streams, Certificates (NPM)
+
+## [1.1.11] - 2026-01-04
+
+### Fixed
+- API client providers now use `keepAlive: true` to prevent Ref invalidation
+  - Fixes "DioException [unknown]: null" error on /security/users and other API pages
+  - AuthInterceptor's stored Ref was becoming invalid when provider auto-disposed
+
+## [1.1.10] - 2026-01-04
+
+### Changed
+- Removed page swipe transitions - all navigation is now instant (NoTransitionPage)
+
+## [1.1.9] - 2026-01-04
+
+### Changed
+- Moved health check to `/health` directory - URL is now `/health` instead of `/health.html`
+  - Enables NPM forward auth path exclusion for health endpoint
+
 ## [1.1.8] - 2026-01-04
 
 ### Changed

lib/core/api/api_client.dart

@@ -9,7 +9,10 @@ import 'api_client_native.dart' if (dart.library.html) 'api_client_web.dart'
 part 'api_client.g.dart';
 
 /// Provides the Dio instance for Core API.
-@riverpod
+///
+/// Uses keepAlive to prevent auto-dispose - the AuthInterceptor stores
+/// a Ref that must remain valid for the lifetime of API requests.
+@Riverpod(keepAlive: true)
 Dio coreApiClient(Ref ref) {
   final options = BaseOptions(
     baseUrl: AppConfig.coreApiUrl,
@@ -33,7 +36,10 @@ Dio coreApiClient(Ref ref) {
 }
 
 /// Provides the Dio instance for Tatlock API.
-@riverpod
+///
+/// Uses keepAlive to prevent auto-dispose - the AuthInterceptor stores
+/// a Ref that must remain valid for the lifetime of API requests.
+@Riverpod(keepAlive: true)
 Dio tatlockApiClient(Ref ref) {
   final options = BaseOptions(
     baseUrl: AppConfig.tatlockApiUrl,

lib/core/theme/theme_provider.dart

@@ -1,6 +1,9 @@
+import 'dart:developer' as developer;
+
 import 'package:flutter/material.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 import 'package:shared_preferences/shared_preferences.dart';
+import 'package:tatlock_ui/core/auth/auth_provider.dart';
 
 part 'theme_provider.g.dart';
 
@@ -17,13 +20,21 @@ enum ThemeSetting {
 }
 
 /// Provider for theme setting state.
+///
+/// Syncs with API preferences when user is authenticated. On login, the theme
+/// from API preferences takes precedence over local storage.
 @riverpod
 class ThemeNotifier extends _$ThemeNotifier {
   static const _prefsKey = 'theme_setting';
 
   @override
   ThemeSetting build() {
+    // Load local setting first for immediate UI
     _loadSavedSetting();
+
+    // Listen for auth state changes to sync from API preferences
+    _syncFromAuthPreferences();
+
     return ThemeSetting.system;
   }
 
@@ -39,6 +50,36 @@ class ThemeNotifier extends _$ThemeNotifier {
     }
   }
 
+  /// Listen to auth state and sync theme from API preferences.
+  void _syncFromAuthPreferences() {
+    ref.listen(authProvider, (_, next) {
+      next.whenData((auth) {
+        final apiTheme = auth.preferences?.theme;
+        if (apiTheme != null && apiTheme.isNotEmpty) {
+          try {
+            final themeSetting = ThemeSetting.values.byName(apiTheme);
+            if (themeSetting != state) {
+              developer.log(
+                'Syncing theme from API: $apiTheme',
+                name: 'theme',
+              );
+              state = themeSetting;
+              // Also persist to local storage for offline use
+              _saveToLocalStorage(themeSetting);
+            }
+          } catch (_) {
+            // Invalid theme value from API, keep current
+          }
+        }
+      });
+    });
+  }
+
+  Future<void> _saveToLocalStorage(ThemeSetting setting) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setString(_prefsKey, setting.name);
+  }
+
   /// Update theme setting and persist to storage.
   Future<void> setSetting(ThemeSetting setting) async {
     state = setting;

lib/features/control_room/presentation/pages/control_room_page.dart

@@ -69,44 +69,11 @@ class _SectionContent extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    switch (nav) {
+    return switch (nav) {
-      case ControlRoomNav.containers:
+      ControlRoomNav.containers => const _ContainersSection(),
-        return const _ContainersSection();
+      ControlRoomNav.proxyHosts => const ProxyHostsPage(),
-      case ControlRoomNav.proxyHosts:
+      _ => _PlaceholderSection(nav: nav),
-        return const ProxyHostsPage();
+    };
-      default:
-        return _PlaceholderSection(nav: nav);
-    }
-  }
-}
-
-/// Containers section with optional stack filter.
-class _ContainersSection extends ConsumerWidget {
-  const _ContainersSection();
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final selectedStack = ref.watch(selectedStackProvider);
-    final colorScheme = Theme.of(context).colorScheme;
-
-    return Row(
-      children: [
-        // Stacks filter panel
-        const _StacksFilterPanel(),
-        // Divider
-        VerticalDivider(
-          width: 1,
-          thickness: 1,
-          color: colorScheme.outlineVariant,
-        ),
-        // Main content - containers list or stack detail
-        Expanded(
-          child: selectedStack == null
-              ? const ContainersListPage()
-              : StackDetailPage(stackId: selectedStack),
-        ),
-      ],
-    );
   }
 }
 
@@ -150,6 +117,36 @@ class _PlaceholderSection extends StatelessWidget {
   }
 }
 
+/// Containers section with optional stack filter.
+class _ContainersSection extends ConsumerWidget {
+  const _ContainersSection();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final selectedStack = ref.watch(selectedStackProvider);
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Row(
+      children: [
+        // Stacks filter panel
+        const _StacksFilterPanel(),
+        // Divider
+        VerticalDivider(
+          width: 1,
+          thickness: 1,
+          color: colorScheme.outlineVariant,
+        ),
+        // Main content - containers list or stack detail
+        Expanded(
+          child: selectedStack == null
+              ? const ContainersListPage()
+              : StackDetailPage(stackId: selectedStack),
+        ),
+      ],
+    );
+  }
+}
+
 /// Stacks filter panel for Containers section (includes "All Containers" option).
 class _StacksFilterPanel extends ConsumerWidget {
   const _StacksFilterPanel();

lib/features/control_room/router.dart

@@ -1,35 +1,32 @@
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:tatlock_ui/features/control_room/presentation/pages/control_room_page.dart';
+import 'package:tatlock_ui/routing/app_router.dart';
 import 'package:tatlock_ui/shared/layouts/widgets/nav_panel.dart';
 
 /// Route paths for Control Room.
 abstract class ControlRoomRoutes {
   static const base = '/control-room';
-  // Portainer
+  // Stack
   static const containers = '/control-room/containers';
-  static const networks = '/control-room/networks';
-  static const volumes = '/control-room/volumes';
-  static const images = '/control-room/images';
-  // NPM
   static const proxyHosts = '/control-room/proxy-hosts';
-  static const redirections = '/control-room/redirections';
+  // Data Management
-  static const streams = '/control-room/streams';
+  static const postgres = '/control-room/postgres';
-  static const certificates = '/control-room/certificates';
+  static const redis = '/control-room/redis';
+  static const qdrant = '/control-room/qdrant';
+  static const neo4j = '/control-room/neo4j';
 }
 
 /// Control Room navigation items with section grouping.
 enum ControlRoomNav {
-  // Portainer section
+  // Stack Management section - Docker containers and reverse proxy
-  containers('containers', 'Containers', Icons.dns, 'Portainer'),
+  containers('containers', 'Containers', Icons.dns, 'Stack Management'),
-  networks('networks', 'Networks', Icons.hub, 'Portainer'),
+  proxyHosts('proxy-hosts', 'Proxy Hosts', Icons.public, 'Stack Management'),
-  volumes('volumes', 'Volumes', Icons.storage, 'Portainer'),
+  // Data Management section - Database browsers
-  images('images', 'Images', Icons.photo_library, 'Portainer'),
+  postgres('postgres', 'PostgreSQL', Icons.table_chart, 'Data Management'),
-  // NPM section
+  redis('redis', 'Redis', Icons.memory, 'Data Management'),
-  proxyHosts('proxy-hosts', 'Proxy Hosts', Icons.public, 'NPM'),
+  qdrant('qdrant', 'Qdrant', Icons.scatter_plot, 'Data Management'),
-  redirections('redirections', 'Redirections', Icons.alt_route, 'NPM'),
+  neo4j('neo4j', 'Neo4j', Icons.hub, 'Data Management');
-  streams('streams', 'Streams', Icons.stream, 'NPM'),
-  certificates('certificates', 'SSL Certificates', Icons.verified_user, 'NPM');
 
   const ControlRoomNav(this.id, this.label, this.icon, this.section);
 
@@ -66,7 +63,8 @@ List<RouteBase> controlRoomRoutes() {
       GoRoute(
         path: nav.path,
         name: 'controlRoom${_capitalize(nav.id.replaceAll('-', '_'))}',
-        builder: (context, state) => ControlRoomPage(nav: nav),
+        pageBuilder: (context, state) =>
+            noTransitionPage(context, state, ControlRoomPage(nav: nav)),
       ),
   ];
 }

lib/features/security/router.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:tatlock_ui/features/security/presentation/pages/security_page.dart';
+import 'package:tatlock_ui/routing/app_router.dart';
 import 'package:tatlock_ui/shared/layouts/widgets/nav_panel.dart';
 
 /// Route paths for Security room.
@@ -60,7 +61,8 @@ List<RouteBase> securityRoutes() {
       GoRoute(
         path: nav.path,
         name: 'security${_capitalize(nav.id.replaceAll('-', '_'))}',
-        builder: (context, state) => SecurityPage(nav: nav),
+        pageBuilder: (context, state) =>
+            noTransitionPage(context, state, SecurityPage(nav: nav)),
       ),
   ];
 }

lib/features/settings/presentation/pages/settings_page.dart

@@ -0,0 +1,306 @@
+import 'dart:developer' as developer;
+
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:tatlock_ui/core/auth/auth_provider.dart';
+import 'package:tatlock_ui/core/theme/theme_provider.dart';
+
+/// Settings page with user preferences.
+class SettingsPage extends ConsumerWidget {
+  const SettingsPage({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final authState = ref.watch(authProvider);
+    final currentTheme = ref.watch(themeProvider);
+    final colorScheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+
+    return Scaffold(
+      body: authState.when(
+        data: (auth) => SingleChildScrollView(
+          padding: const EdgeInsets.all(24),
+          child: Center(
+            child: ConstrainedBox(
+              constraints: const BoxConstraints(maxWidth: 600),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  // Page header
+                  Text(
+                    'Settings',
+                    style: textTheme.headlineMedium,
+                  ),
+                  const SizedBox(height: 32),
+
+                  // Appearance section
+                  _SectionHeader(title: 'Appearance'),
+                  const SizedBox(height: 8),
+                  Card(
+                    child: Padding(
+                      padding: const EdgeInsets.all(16),
+                      child: Row(
+                        children: [
+                          Icon(
+                            _themeIcon(currentTheme),
+                            color: colorScheme.onSurfaceVariant,
+                          ),
+                          const SizedBox(width: 16),
+                          Expanded(
+                            child: Column(
+                              crossAxisAlignment: CrossAxisAlignment.start,
+                              children: [
+                                Text('Theme', style: textTheme.titleMedium),
+                                Text(
+                                  'Choose your preferred color scheme',
+                                  style: textTheme.bodySmall?.copyWith(
+                                    color: colorScheme.onSurfaceVariant,
+                                  ),
+                                ),
+                              ],
+                            ),
+                          ),
+                          DropdownButton<ThemeSetting>(
+                            value: currentTheme,
+                            underline: const SizedBox(),
+                            onChanged: (value) {
+                              if (value != null) {
+                                _updateTheme(ref, value);
+                              }
+                            },
+                            items: const [
+                              DropdownMenuItem(
+                                value: ThemeSetting.system,
+                                child: Text('System'),
+                              ),
+                              DropdownMenuItem(
+                                value: ThemeSetting.light,
+                                child: Text('Light'),
+                              ),
+                              DropdownMenuItem(
+                                value: ThemeSetting.dark,
+                                child: Text('Dark'),
+                              ),
+                            ],
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+
+                  const SizedBox(height: 24),
+
+                  // Navigation section
+                  _SectionHeader(title: 'Navigation'),
+                  const SizedBox(height: 8),
+                  Card(
+                    child: Padding(
+                      padding: const EdgeInsets.all(16),
+                      child: Row(
+                        children: [
+                          Icon(
+                            Icons.home_outlined,
+                            color: colorScheme.onSurfaceVariant,
+                          ),
+                          const SizedBox(width: 16),
+                          Expanded(
+                            child: Column(
+                              crossAxisAlignment: CrossAxisAlignment.start,
+                              children: [
+                                Text(
+                                  'Default Room',
+                                  style: textTheme.titleMedium,
+                                ),
+                                Text(
+                                  'Room to show when app opens',
+                                  style: textTheme.bodySmall?.copyWith(
+                                    color: colorScheme.onSurfaceVariant,
+                                  ),
+                                ),
+                              ],
+                            ),
+                          ),
+                          DropdownButton<String>(
+                            value:
+                                auth.preferences?.defaultRoom ?? 'front-hall',
+                            underline: const SizedBox(),
+                            onChanged: (value) {
+                              if (value != null) {
+                                _updateDefaultRoom(ref, value);
+                              }
+                            },
+                            items: const [
+                              DropdownMenuItem(
+                                value: 'front-hall',
+                                child: Text('Front Hall'),
+                              ),
+                              DropdownMenuItem(
+                                value: 'control-room',
+                                child: Text('Control Room'),
+                              ),
+                              DropdownMenuItem(
+                                value: 'parlor',
+                                child: Text('Parlor'),
+                              ),
+                            ],
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+
+                  const SizedBox(height: 24),
+
+                  // Account section
+                  _SectionHeader(title: 'Account'),
+                  const SizedBox(height: 8),
+                  Card(
+                    child: Column(
+                      children: [
+                        _AccountInfoTile(
+                          icon: Icons.person_outline,
+                          label: 'Name',
+                          value: auth.userName ?? 'Not available',
+                        ),
+                        const Divider(height: 1),
+                        _AccountInfoTile(
+                          icon: Icons.email_outlined,
+                          label: 'Email',
+                          value: auth.userEmail ?? 'Not available',
+                        ),
+                        if (auth.roles.isNotEmpty) ...[
+                          const Divider(height: 1),
+                          _AccountInfoTile(
+                            icon: Icons.shield_outlined,
+                            label: 'Roles',
+                            value: auth.roles.map((r) => r.name).join(', '),
+                          ),
+                        ],
+                      ],
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ),
+        loading: () => const Center(child: CircularProgressIndicator()),
+        error: (error, _) => Center(
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Icon(Icons.error_outline, size: 48, color: colorScheme.error),
+              const SizedBox(height: 16),
+              Text(
+                'Failed to load settings',
+                style: textTheme.titleMedium,
+              ),
+              const SizedBox(height: 8),
+              Text(
+                error.toString(),
+                style: textTheme.bodySmall?.copyWith(
+                  color: colorScheme.onSurfaceVariant,
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  IconData _themeIcon(ThemeSetting theme) {
+    return switch (theme) {
+      ThemeSetting.system => Icons.brightness_auto,
+      ThemeSetting.light => Icons.light_mode,
+      ThemeSetting.dark => Icons.dark_mode,
+    };
+  }
+
+  Future<void> _updateTheme(WidgetRef ref, ThemeSetting setting) async {
+    // Update local theme immediately for instant UI response
+    await ref.read(themeProvider.notifier).setSetting(setting);
+
+    // Sync to backend
+    try {
+      await ref.read(authProvider.notifier).updatePreferences(
+            theme: setting.name,
+          );
+    } catch (e) {
+      developer.log('Failed to sync theme preference: $e', name: 'settings');
+    }
+  }
+
+  Future<void> _updateDefaultRoom(WidgetRef ref, String room) async {
+    try {
+      await ref.read(authProvider.notifier).updatePreferences(
+            defaultRoom: room,
+          );
+    } catch (e) {
+      developer.log('Failed to sync default room: $e', name: 'settings');
+    }
+  }
+}
+
+/// Section header widget.
+class _SectionHeader extends StatelessWidget {
+  const _SectionHeader({required this.title});
+
+  final String title;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+
+    return Text(
+      title.toUpperCase(),
+      style: textTheme.labelMedium?.copyWith(
+        color: colorScheme.primary,
+        letterSpacing: 1.0,
+        fontWeight: FontWeight.w600,
+      ),
+    );
+  }
+}
+
+/// Account info tile widget.
+class _AccountInfoTile extends StatelessWidget {
+  const _AccountInfoTile({
+    required this.icon,
+    required this.label,
+    required this.value,
+  });
+
+  final IconData icon;
+  final String label;
+  final String value;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+
+    return Padding(
+      padding: const EdgeInsets.all(16),
+      child: Row(
+        children: [
+          Icon(icon, color: colorScheme.onSurfaceVariant),
+          const SizedBox(width: 16),
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(label, style: textTheme.bodySmall?.copyWith(
+                  color: colorScheme.onSurfaceVariant,
+                )),
+                const SizedBox(height: 2),
+                Text(value, style: textTheme.titleMedium),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/main.dart

@@ -14,10 +14,7 @@ void main() async {
   // Use path-based URLs on web (no-op on mobile/desktop)
   configureUrlStrategy();
 
-  developer.log(
+  debugPrint('🪣 ${AppVersion.name} v${AppVersion.fullVersion}');
-    '${AppVersion.name} v${AppVersion.fullVersion}',
-    name: 'tatlock_ui',
-  );
 
   // Initialize auth before starting the app.
   // This handles OIDC callback and silent auth on web.

lib/routing/app_router.dart

@@ -4,10 +4,19 @@ import 'package:riverpod_annotation/riverpod_annotation.dart';
 import 'package:tatlock_ui/features/control_room/router.dart';
 import 'package:tatlock_ui/features/front_hall/presentation/pages/front_hall_page.dart';
 import 'package:tatlock_ui/features/security/router.dart';
+import 'package:tatlock_ui/features/settings/presentation/pages/settings_page.dart';
 import 'package:tatlock_ui/shared/layouts/app_scaffold.dart';
 
 part 'app_router.g.dart';
 
+/// No-animation page builder for instant transitions
+Page<void> noTransitionPage(BuildContext context, GoRouterState state, Widget child) {
+  return NoTransitionPage<void>(
+    key: state.pageKey,
+    child: child,
+  );
+}
+
 /// Route paths as constants.
 abstract class AppRoutes {
   static const frontHall = '/';
@@ -29,21 +38,22 @@ GoRouter appRouter(Ref ref) {
           GoRoute(
             path: AppRoutes.frontHall,
             name: 'frontHall',
-            builder: (context, state) => const FrontHallPage(),
+            pageBuilder: (context, state) =>
+                noTransitionPage(context, state, const FrontHallPage()),
           ),
           ...controlRoomRoutes(),
           ...securityRoutes(),
           GoRoute(
             path: AppRoutes.parlor,
             name: 'parlor',
-            builder: (context, state) =>
+            pageBuilder: (context, state) =>
-                const _PlaceholderPage(title: 'Parlor'),
+                noTransitionPage(context, state, const _PlaceholderPage(title: 'Parlor')),
           ),
           GoRoute(
             path: AppRoutes.settings,
             name: 'settings',
-            builder: (context, state) =>
+            pageBuilder: (context, state) =>
-                const _PlaceholderPage(title: 'Settings'),
+                noTransitionPage(context, state, const SettingsPage()),
           ),
         ],
       ),

lib/shared/layouts/widgets/profile_dropdown.dart

@@ -1,7 +1,10 @@
+import 'dart:developer' as developer;
+
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
 import 'package:tatlock_ui/core/auth/auth_provider.dart';
+import 'package:tatlock_ui/core/theme/theme_provider.dart';
 import 'package:tatlock_ui/routing/app_router.dart';
 
 /// Profile dropdown menu in the header.
@@ -13,6 +16,7 @@ class ProfileDropdown extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final authState = ref.watch(authProvider);
+    final currentTheme = ref.watch(themeProvider);
     final colorScheme = Theme.of(context).colorScheme;
 
     return authState.when(
@@ -76,6 +80,102 @@ class ProfileDropdown extends ConsumerWidget {
             ),
           ),
 
+          // Theme submenu header
+          PopupMenuItem<String>(
+            enabled: false,
+            height: 32,
+            child: Text(
+              'THEME',
+              style: Theme.of(context).textTheme.labelSmall?.copyWith(
+                    color: colorScheme.onSurfaceVariant,
+                    letterSpacing: 0.5,
+                  ),
+            ),
+          ),
+
+          // Theme: System
+          PopupMenuItem<String>(
+            value: 'theme_system',
+            height: 40,
+            child: Row(
+              children: [
+                Icon(
+                  Icons.brightness_auto,
+                  size: 18,
+                  color: currentTheme == ThemeSetting.system
+                      ? colorScheme.primary
+                      : null,
+                ),
+                const SizedBox(width: 12),
+                Text(
+                  'System',
+                  style: currentTheme == ThemeSetting.system
+                      ? TextStyle(color: colorScheme.primary)
+                      : null,
+                ),
+                const Spacer(),
+                if (currentTheme == ThemeSetting.system)
+                  Icon(Icons.check, size: 16, color: colorScheme.primary),
+              ],
+            ),
+          ),
+
+          // Theme: Light
+          PopupMenuItem<String>(
+            value: 'theme_light',
+            height: 40,
+            child: Row(
+              children: [
+                Icon(
+                  Icons.light_mode,
+                  size: 18,
+                  color: currentTheme == ThemeSetting.light
+                      ? colorScheme.primary
+                      : null,
+                ),
+                const SizedBox(width: 12),
+                Text(
+                  'Light',
+                  style: currentTheme == ThemeSetting.light
+                      ? TextStyle(color: colorScheme.primary)
+                      : null,
+                ),
+                const Spacer(),
+                if (currentTheme == ThemeSetting.light)
+                  Icon(Icons.check, size: 16, color: colorScheme.primary),
+              ],
+            ),
+          ),
+
+          // Theme: Dark
+          PopupMenuItem<String>(
+            value: 'theme_dark',
+            height: 40,
+            child: Row(
+              children: [
+                Icon(
+                  Icons.dark_mode,
+                  size: 18,
+                  color: currentTheme == ThemeSetting.dark
+                      ? colorScheme.primary
+                      : null,
+                ),
+                const SizedBox(width: 12),
+                Text(
+                  'Dark',
+                  style: currentTheme == ThemeSetting.dark
+                      ? TextStyle(color: colorScheme.primary)
+                      : null,
+                ),
+                const Spacer(),
+                if (currentTheme == ThemeSetting.dark)
+                  Icon(Icons.check, size: 16, color: colorScheme.primary),
+              ],
+            ),
+          ),
+
+          const PopupMenuDivider(),
+
           // Logout (only if authenticated)
           if (auth.isAuthenticated)
             const PopupMenuItem<String>(
@@ -93,6 +193,12 @@ class ProfileDropdown extends ConsumerWidget {
           switch (value) {
             case 'settings':
               context.go(AppRoutes.settings);
+            case 'theme_system':
+              _updateTheme(ref, ThemeSetting.system);
+            case 'theme_light':
+              _updateTheme(ref, ThemeSetting.light);
+            case 'theme_dark':
+              _updateTheme(ref, ThemeSetting.dark);
             case 'logout':
               ref.read(authProvider.notifier).signOut();
           }
@@ -126,4 +232,20 @@ class ProfileDropdown extends ConsumerWidget {
     }
     return name[0].toUpperCase();
   }
+
+  /// Update theme locally and sync to API.
+  Future<void> _updateTheme(WidgetRef ref, ThemeSetting setting) async {
+    // Update local theme immediately for instant UI response
+    await ref.read(themeProvider.notifier).setSetting(setting);
+
+    // Sync to backend (fire-and-forget, errors logged not shown)
+    try {
+      await ref.read(authProvider.notifier).updatePreferences(
+            theme: setting.name,
+          );
+    } catch (e) {
+      // Theme still works locally even if API sync fails
+      developer.log('Failed to sync theme preference: $e', name: 'profile');
+    }
+  }
 }

npm-config.conf

@@ -0,0 +1,53 @@
+# Increase buffer size for large headers from Authentik
+proxy_buffers 8 16k;
+proxy_buffer_size 32k;
+
+# Exclude static assets from forward auth
+# These paths bypass auth_request but still proxy to upstream
+location ~ ^/(manifest\.json|favicon\.(ico|png)|health|icons|assets) {
+    auth_request off;
+    proxy_pass $forward_scheme://$server:$port;
+}
+
+# Forward authentication via standalone outpost
+auth_request /outpost.goauthentik.io/auth/nginx;
+error_page 401 = @goauthentik_proxy_signin;
+
+# Capture auth response headers
+auth_request_set $auth_cookie $upstream_http_set_cookie;
+auth_request_set $authentik_username $upstream_http_x_authentik_username;
+auth_request_set $authentik_groups $upstream_http_x_authentik_groups;
+auth_request_set $authentik_email $upstream_http_x_authentik_email;
+auth_request_set $authentik_name $upstream_http_x_authentik_name;
+auth_request_set $authentik_uid $upstream_http_x_authentik_uid;
+
+# Forward auth headers to application
+add_header Set-Cookie $auth_cookie;
+proxy_set_header X-authentik-username $authentik_username;
+proxy_set_header X-authentik-groups $authentik_groups;
+proxy_set_header X-authentik-email $authentik_email;
+proxy_set_header X-authentik-name $authentik_name;
+proxy_set_header X-authentik-uid $authentik_uid;
+
+# Outpost proxy location
+location /outpost.goauthentik.io {
+    proxy_pass https://localhost:9444/outpost.goauthentik.io;
+    proxy_set_header Host $host;
+    proxy_set_header X-Original-URL $scheme://$http_host$request_uri;
+    proxy_set_header X-Forwarded-Proto $scheme;
+    proxy_set_header X-Forwarded-Host $http_host;
+    proxy_set_header X-Forwarded-For $remote_addr;
+    proxy_pass_request_body off;
+    proxy_set_header Content-Length "";
+
+    # WebSocket support
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection $connection_upgrade;
+}
+
+# Signin redirect handler
+location @goauthentik_proxy_signin {
+    internal;
+    return 302 /outpost.goauthentik.io/start?rd=$request_uri;
+}

pubspec.yaml

@@ -16,7 +16,7 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
 # In Windows, build-name is used as the major, minor, and patch parts
 # of the product and file versions while build-number is used as the build suffix.
-version: 1.1.8+1
+version: 1.1.13+1
 
 environment:
   sdk: ^3.10.4

tool/generate_health_json.dart

@@ -1,5 +1,5 @@
 #!/usr/bin/env dart
-// Generates web/health.json from pubspec.yaml
+// Generates web/health/health.json from pubspec.yaml
 // Run: dart run tool/generate_health_json.dart
 
 // ignore_for_file: avoid_print
@@ -37,15 +37,15 @@ void main() {
     'fullVersion': '$version+$buildNumber',
   };
 
-  final webDir = Directory('web');
+  final healthDir = Directory('web/health');
-  if (!webDir.existsSync()) {
+  if (!healthDir.existsSync()) {
-    webDir.createSync(recursive: true);
+    healthDir.createSync(recursive: true);
   }
 
-  final healthFile = File('web/health.json');
+  final healthFile = File('web/health/health.json');
   healthFile.writeAsStringSync(
     const JsonEncoder.withIndent('  ').convert(health),
   );
 
-  print('Generated web/health.json with version $version+$buildNumber');
+  print('Generated web/health/health.json with version $version+$buildNumber');
 }

web/health/health.json

@@ -0,0 +1,8 @@
+{
+  "status": "healthy",
+  "name": "tatlock_ui",
+  "title": "Tatlock - a Home Lab AI",
+  "version": "1.0.4",
+  "buildNumber": 1,
+  "fullVersion": "1.0.4+1"
+}

web/health/index.html

@@ -13,7 +13,7 @@
   <h1 id="status">Loading...</h1>
   <pre id="data"></pre>
   <script>
-    fetch('/health.json')
+    fetch('./health.json')
       .then(r => r.json())
       .then(data => {
         document.getElementById('status').textContent = data.status?.toUpperCase() || 'OK';

web/index.html

@@ -36,7 +36,8 @@
     body {
       margin: 0;
       padding: 0;
-      background-color: #1a1a2e;
+      /* Match Flutter's dark theme scaffold background (FlexScheme.aquaBlue) */
+      background-color: #111111;
     }
   </style>
 </head>