chore: release v1.4.0

- Decentralized Room Registry pattern
- Each room registers itself with central registry
- Dynamic navigation tabs and settings dropdown
- New Media Room and Parlor feature folders
- Permission-based room filtering support

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

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

CHANGELOG.md

@@ -7,6 +7,123 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.4.0] - 2026-01-05
+
+### Added
+- **Decentralized Room Registry** - Each room registers itself with central registry
+  - `RoomDefinition` class with id, label, icons, routes, and permissions
+  - `RoomRegistry` singleton for managing all rooms
+  - Dynamic navigation tabs built from registry
+  - Settings dropdown builds from available rooms
+  - Permission-based room filtering support
+- **Media Room** - New placeholder room for future media management features
+- **Parlor** - Now a proper feature folder with router registration
+
+### Changed
+- Room navigation is now fully dynamic via registry
+  - `top_header_bar.dart` uses `roomRegistry.all` instead of hardcoded list
+  - `app_scaffold.dart` uses registry for route matching and navigation
+  - Settings page dropdown populated from `roomRegistry.all`
+- Routers moved to per-room pattern:
+  - `lib/features/front_hall/router.dart` (new)
+  - `lib/features/parlor/router.dart` (new)
+  - `lib/features/media_room/router.dart` (new)
+  - Existing `control_room/router.dart` and `security/router.dart` now register with registry
+- Documentation updated in ARCHITECTURE.md with Room Registry Pattern section
+
+### Removed
+- Hardcoded room lists in `top_header_bar.dart` and `app_scaffold.dart`
+- `_PlaceholderPage` widget in `app_router.dart` (each room has its own page)
+
+## [1.3.1] - 2026-01-05
+
+### Fixed
+- Default room preference now applies on app load
+  - Root `/` redirects to user's preferred default room
+  - Front Hall moved to `/front-hall` route (was `/`)
+
+## [1.3.0] - 2026-01-05
+
+### Added
+- **URL deep-linking for DataGrids** - State is now reflected in URL query parameters
+  - `?search=` - DataGrid search query
+  - `?sort=` - Column ID for sorting
+  - `?order=desc` - Sort direction
+  - `?id=` - Opened document ID (proxy hosts page)
+- `PageUrlState` utility class (`lib/routing/url_state.dart`) for URL ↔ state serialization
+- Browser URL updates via `replaceState` without triggering GoRouter rebuilds
+- `id` field added to `DataGridColumn` for unique column identification in URLs
+- `FilterPanelSemantics` class for filter panel semantic IDs
+- TESTING.md documentation for semantic widgets and automation testing
+
+### Changed
+- `idSelector` in DataGridController now returns `String` (was `Object`) for URL compatibility
+- All DataGrid pages now support URL deep-linking:
+  - Containers list (`/control-room/containers`)
+  - Proxy hosts (`/control-room/proxy-hosts`)
+  - Users (`/security/users`)
+  - Groups (`/security/groups`)
+- Router passes `GoRouterState` to pages for query parameter access
+
+## [1.2.0] - 2026-01-05
+
+### Added
+- **Semantic labels for UI automation** (`lib/core/semantics/`)
+  - `semantic_ids.dart` - Centralized semantic identifier constants
+  - `semantic_widget.dart` - Helper widget and extension for adding semantics
+  - Enables browser automation tools (Puppeteer, WebDriver) via accessibility tree
+- Semantic IDs added to:
+  - Profile dropdown button and menu items (theme options, settings, logout)
+  - Room navigation tabs (Front Hall, Control Room, Security, Parlor)
+  - NavPanel items (sidebar navigation)
+- `SemanticsBinding.instance.ensureSemantics()` enabled on web builds
+
+## [1.1.16] - 2026-01-05
+
+### Fixed
+- Theme toggle causing logout due to AuthInterceptor auto-signout on 401
+  - Removed aggressive `signOut()` call in `AuthInterceptor.onError`
+  - 401 errors now propagate to calling code for graceful handling
+  - Preferences API 401 no longer triggers full logout redirect
+
+## [1.1.15] - 2026-01-05
+
+### Fixed
+- Theme toggle causing auth issues due to AuthNotifier auto-dispose
+  - Applied `@persistentRiverpod` annotation to AuthNotifier
+  - AuthProvider now persists for app lifetime, preventing rebuild on theme change
+
+## [1.1.14] - 2026-01-04
+
+### Fixed
+- Theme toggle causing auth issues due to ThemeProvider auto-dispose
+  - Added `@persistentRiverpod` annotation for providers that need keepAlive
+  - ThemeProvider now persists for app lifetime
+
+### Added
+- `@persistentRiverpod` annotation in `core/providers/annotations.dart`
+  - Reusable annotation for providers that should not auto-dispose
+  - Documented in ARCHITECTURE.md
+
+## [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

docs/ARCHITECTURE.md

@@ -20,6 +20,7 @@ lib/
 │   ├── auth/                     # Authentik OIDC integration
 │   ├── config/                   # Environment configuration
 │   ├── error/                    # Error types and handling
+│   ├── semantics/                # Semantic IDs for automation
 │   └── theme/                    # Material 3 theming
 ├── routing/                      # go_router configuration
 ├── shared/                       # Reusable components
@@ -27,14 +28,20 @@ lib/
 │   └── layouts/                  # App scaffold, navigation
 ├── features/                     # Feature modules (rooms)
 │   ├── front_hall/               # Dashboard - estate overview
+│   │   └── router.dart           # Room registration
 │   ├── control_room/             # Infrastructure
+│   │   ├── router.dart           # Room registration
 │   │   ├── containers/           # Container management
-│   │   ├── stacks/               # Stack management
+│   │   └── npm/                  # Proxy hosts management
-│   │   ├── networks/             # Network management
+│   ├── security/                 # User & access management
-│   │   └── volumes/              # Volume management
+│   │   ├── router.dart           # Room registration
-│   ├── parlor/                   # Housekeeping - home automation
+│   │   ├── users/                # User management
-│   ├── library/                  # Knowledge management (future)
+│   │   └── groups/               # Group management
-│   └── study/                    # Secretarial tasks (future)
+│   ├── parlor/                   # AI chat & automation hub
+│   │   └── router.dart           # Room registration
+│   ├── media_room/               # Media management (future)
+│   │   └── router.dart           # Room registration
+│   └── settings/                 # User preferences
 └── chat/                         # Tatlock chat - omnipresent, NOT a room
 ```
 
@@ -44,13 +51,16 @@ lib/
 |---------|-----------|---------|
 | Front Hall | `features/front_hall/` | Dashboard, overview, quick access |
 | Control Room | `features/control_room/` | Infrastructure management |
-| Parlor | `features/parlor/` | Home automation |
+| Security | `features/security/` | User & access management |
-| Library | `features/library/` | Knowledge, docs, bookmarks |
+| Parlor | `features/parlor/` | AI chat & automation hub |
-| Study | `features/study/` | Email, calendar (hidden for now) |
+| Media Room | `features/media_room/` | Media management (future) |
+| *(non-room)* | `features/settings/` | User preferences |
 | *(omnipresent)* | `chat/` | Tatlock assistant dock |
 
 Note: `chat/` lives at the top level of `lib/` (not under `features/`) because it's not a navigable room - it's an omnipresent dock injected at the layout level.
 
+Each room has a `router.dart` file that registers the room with the central registry. See [Room Registry Pattern](#room-registry-pattern) for details.
+
 ## Feature Structure
 
 Each feature follows a three-layer architecture:
@@ -420,6 +430,41 @@ ContainerRepository containerRepository(Ref ref) {
 }
 ```
 
+### Persistent Providers
+
+By default, `@riverpod` generates providers with `isAutoDispose: true`, meaning they dispose when no longer watched. This causes issues for:
+
+- **API clients** with interceptors that store a `Ref`
+- **App-level state** like theme, auth, config
+- **Providers with listeners** to other providers
+
+Use `@persistentRiverpod` from `core/providers/annotations.dart` for these cases:
+
+```dart
+import 'package:tatlock_ui/core/providers/annotations.dart';
+
+// ✅ Correct - persists for app lifetime
+@persistentRiverpod
+Dio coreApiClient(Ref ref) { ... }
+
+@persistentRiverpod
+class ThemeNotifier extends _$ThemeNotifier { ... }
+
+// ❌ Wrong - auto-dispose can invalidate stored Ref
+@riverpod
+Dio coreApiClient(Ref ref) { ... }
+```
+
+**When to use `@persistentRiverpod`:**
+
+| Use Case | Annotation | Example |
+|----------|------------|---------|
+| API clients with interceptors | `@persistentRiverpod` | `coreApiClient`, `tatlockApiClient` |
+| Auth state provider | `@persistentRiverpod` | `AuthNotifier` |
+| Theme/config providers | `@persistentRiverpod` | `ThemeNotifier` |
+| Feature data providers | `@riverpod` (default) | `ContainersNotifier` |
+| UI state providers | `@riverpod` (default) | `SearchFilterNotifier` |
+
 ## File Naming Conventions
 
 | Type | Convention | Example |
@@ -509,3 +554,172 @@ import 'package:tatlock_ui/features/containers/domain/entities/container.dart';
 // Bad - importing model in presentation
 import '../data/models/container_model.dart'; // Don't do this
 ```
+
+## Semantic Identifiers for Automation
+
+All interactive widgets should have semantic identifiers for UI automation. This enables reliable testing with Puppeteer, Appium, and other automation tools.
+
+### Quick Reference
+
+```dart
+import 'package:tatlock_ui/core/semantics/semantic_ids.dart';
+
+// Wrap interactive widgets with Semantics
+Semantics(
+  identifier: DataGridSemantics.row(item.id),
+  label: 'Select ${item.name}',
+  child: MyRowWidget(item: item),
+)
+```
+
+### Key Points
+
+1. **Central ID Registry** - All IDs defined in `lib/core/semantics/semantic_ids.dart`
+2. **Naming Convention** - `{area}_{component}_{identifier}` (e.g., `dataGrid_row_abc123`)
+3. **Web Enabled** - Semantics tree exposed via `SemanticsBinding.instance.ensureSemantics()` in `main.dart`
+
+For complete documentation on semantic patterns, automation queries, and best practices, see **[TESTING.md](./TESTING.md)**.
+
+## Room Registry Pattern
+
+The application uses a **decentralized room registry** pattern for navigation. Each feature/room registers itself with the central registry, providing:
+
+- **Decoupled navigation** - Rooms define their own routes, icons, and metadata
+- **Permission-based filtering** - Rooms can specify required permissions
+- **Dynamic UI** - Settings dropdowns and tab bars build from registry
+- **Single source of truth** - All room metadata in one place per room
+
+### Architecture
+
+```
+lib/routing/room_registry.dart          # Central registry class
+lib/features/{room}/router.dart         # Per-room registration
+```
+
+### Room Definition
+
+Each room's `router.dart` exports a `RoomDefinition` and register function:
+
+```dart
+// lib/features/control_room/router.dart
+import 'package:tatlock_ui/routing/room_registry.dart';
+
+/// Room definition with all metadata.
+final controlRoomRoom = RoomDefinition(
+  id: 'control-room',              // Preference value, URL segment
+  label: 'Control Room',           // Display name
+  icon: Icons.dns_outlined,        // Unselected icon
+  selectedIcon: Icons.dns,         // Selected icon
+  defaultRoute: '/control-room/containers',  // Landing route
+  routes: controlRoomRoutes,       // Function returning List<RouteBase>
+  requiredPermissions: [],         // Empty = accessible to all
+);
+
+/// Register with the central registry.
+void registerControlRoom() {
+  roomRegistry.register(controlRoomRoom);
+}
+
+/// Routes for go_router.
+List<RouteBase> controlRoomRoutes() {
+  return [
+    GoRoute(path: '/control-room', ...),
+    // Sub-routes...
+  ];
+}
+```
+
+### Registration Order
+
+Rooms are registered in `app_router.dart` in display order:
+
+```dart
+void _initializeRoomRegistry() {
+  if (roomRegistry.all.isNotEmpty) return; // Skip if initialized
+
+  // Registration order = tab order
+  registerFrontHall();
+  registerControlRoom();
+  registerSecurity();
+  registerParlor();
+  registerMediaRoom();
+}
+```
+
+### Using the Registry
+
+**Navigation tabs** (`top_header_bar.dart`):
+```dart
+List<RoomDefinition> get _rooms => roomRegistry.all;
+
+// Build tab for each room
+for (final room in _rooms) {
+  IconButton(
+    icon: Icon(isSelected ? room.selectedIcon : room.icon),
+    onPressed: () => onRoomSelected(index),
+  );
+}
+```
+
+**Settings dropdown**:
+```dart
+DropdownButton<String>(
+  items: roomRegistry.all
+      .map((room) => DropdownMenuItem(
+            value: room.id,
+            child: Text(room.label),
+          ))
+      .toList(),
+);
+```
+
+**Router** - All routes from registry:
+```dart
+ShellRoute(
+  routes: [
+    ...roomRegistry.allRoutes(),
+    // Plus non-room routes like /settings
+  ],
+);
+```
+
+**Route matching**:
+```dart
+int _selectedIndex(BuildContext context) {
+  final location = GoRouterState.of(context).matchedLocation;
+  return roomRegistry.indexOfRoute(location);
+}
+```
+
+### Permission Filtering
+
+Rooms can specify required permissions:
+
+```dart
+final adminRoom = RoomDefinition(
+  id: 'admin',
+  requiredPermissions: ['admin:access'],
+  // ...
+);
+
+// Filter by user permissions
+final accessibleRooms = roomRegistry.accessibleTo(userPermissions);
+```
+
+### Adding a New Room
+
+1. Create feature folder: `lib/features/{room_name}/`
+2. Create `router.dart` with `RoomDefinition` and register function
+3. Create placeholder page in `presentation/pages/{room_name}_page.dart`
+4. Add `register{RoomName}()` call to `_initializeRoomRegistry()` in `app_router.dart`
+5. Import the router in `app_router.dart`
+
+### Current Rooms
+
+| Room | ID | Default Route |
+|------|-----|---------------|
+| Front Hall | `front-hall` | `/front-hall` |
+| Control Room | `control-room` | `/control-room/containers` |
+| Security | `security` | `/security/users` |
+| Parlor | `parlor` | `/parlor` |
+| Media Room | `media-room` | `/media-room` |

docs/TESTING.md

@@ -0,0 +1,368 @@
+# Testing & Automation Guide
+
+This document covers automated testing patterns for Tatlock UI, focusing on semantic identifiers that enable reliable UI automation.
+
+## Overview
+
+Tatlock UI uses Flutter's **Semantics tree** to expose stable identifiers for automated testing. These identifiers are accessible to:
+
+- **Puppeteer** (via Chrome DevTools accessibility API)
+- **Appium** (via accessibility labels)
+- **WebDriver** (via ARIA attributes)
+- **Flutter integration tests**
+
+The semantics system is enabled on web in `main.dart`:
+
+```dart
+if (kIsWeb) {
+  SemanticsBinding.instance.ensureSemantics();
+}
+```
+
+## Semantic Identifiers
+
+All semantic IDs are centralized in `lib/core/semantics/semantic_ids.dart`. This provides:
+
+1. **Stable selectors** - IDs don't change with UI refactoring
+2. **Type safety** - Compile-time verification of ID usage
+3. **Discoverability** - Single source of truth for automation targets
+
+### Available ID Classes
+
+| Class | Purpose | Example IDs |
+|-------|---------|-------------|
+| `ProfileSemantics` | User profile dropdown | `profile_button`, `profile_menu_settings` |
+| `RoomTabSemantics` | Main navigation tabs | `roomTab_frontHall`, `roomTab_controlRoom` |
+| `NavSemantics` | Side navigation panel | `nav_panel`, `nav_item_{id}` |
+| `DataGridSemantics` | Data tables | `dataGrid_row_{id}`, `dataGrid_search` |
+| `DialogSemantics` | Modal dialogs | `dialog_confirm`, `dialog_cancel` |
+| `SettingsSemantics` | Settings page | `settings_theme`, `settings_defaultRoom` |
+| `StateSemantics` | Loading/error states | `state_auth_loading`, `snackbar_{type}` |
+
+### ID Naming Convention
+
+```
+{area}_{component}_{identifier}
+```
+
+- **area**: Feature or section (e.g., `profile`, `nav`, `dataGrid`)
+- **component**: Widget type (e.g., `menu`, `button`, `row`)
+- **identifier**: Specific item (e.g., `light`, `settings`, `selectAll`)
+
+Examples:
+- `profile_menu_theme_dark` - Dark theme option in profile menu
+- `dataGrid_row_abc123` - Row with ID "abc123" in data grid
+- `nav_item_containers` - Containers nav item
+
+## Adding Semantics to Widgets
+
+### Method 1: Direct Semantics Widget
+
+Use Flutter's `Semantics` widget with the `identifier` property:
+
+```dart
+import 'package:tatlock_ui/core/semantics/semantic_ids.dart';
+
+Semantics(
+  identifier: ProfileSemantics.button,
+  label: 'Open profile menu',
+  button: true,
+  child: IconButton(
+    icon: Icon(Icons.person),
+    onPressed: () => ...,
+  ),
+)
+```
+
+### Method 2: SemanticWidget Wrapper
+
+Use the convenience wrapper from `lib/core/semantics/semantic_widget.dart`:
+
+```dart
+import 'package:tatlock_ui/core/semantics/semantic_ids.dart';
+import 'package:tatlock_ui/core/semantics/semantic_widget.dart';
+
+SemanticWidget(
+  id: DataGridSemantics.search,
+  label: 'Search data grid',
+  textField: true,
+  child: TextField(
+    decoration: InputDecoration(hintText: 'Search...'),
+  ),
+)
+```
+
+### Method 3: Extension Method
+
+Use the `withSemantics` extension for inline wrapping:
+
+```dart
+TextField(
+  decoration: InputDecoration(hintText: 'Search...'),
+).withSemantics(
+  id: DataGridSemantics.search,
+  label: 'Search data grid',
+)
+```
+
+### Dynamic IDs
+
+For lists and grids, use the generator methods:
+
+```dart
+// Row in a data grid
+Semantics(
+  identifier: DataGridSemantics.row(item.id),  // "dataGrid_row_abc123"
+  child: DataGridRow(item: item),
+)
+
+// Navigation item
+Semantics(
+  identifier: NavSemantics.item(route.id),  // "nav_item_containers"
+  child: NavItem(route: route),
+)
+
+// Bulk action button
+Semantics(
+  identifier: DataGridSemantics.bulkAction('delete'),  // "dataGrid_bulk_delete"
+  child: IconButton(icon: Icon(Icons.delete), ...),
+)
+```
+
+## Querying from Puppeteer
+
+Puppeteer can query semantic identifiers via Chrome's accessibility tree:
+
+```javascript
+// Connect to Chrome with DevTools protocol
+const browser = await puppeteer.connect({
+  browserURL: 'http://localhost:9222'
+});
+const page = await browser.newPage();
+
+// Get accessibility snapshot
+const snapshot = await page.accessibility.snapshot({ interestingOnly: false });
+
+// Find element by semantic identifier
+function findBySemanticId(node, id) {
+  if (node.name === id || node.description === id) {
+    return node;
+  }
+  for (const child of node.children || []) {
+    const found = findBySemanticId(child, id);
+    if (found) return found;
+  }
+  return null;
+}
+
+// Example: Find profile button
+const profileButton = findBySemanticId(snapshot, 'profile_button');
+
+// Example: Find a specific data grid row
+const row = findBySemanticId(snapshot, 'dataGrid_row_abc123');
+```
+
+### Using Chrome DevTools MCP
+
+With the Chrome DevTools MCP server, you can query semantics directly:
+
+```javascript
+// Take a snapshot (returns accessibility tree)
+const snapshot = await mcp__chrome_devtools__take_snapshot();
+
+// Click by semantic ID (uid in snapshot)
+await mcp__chrome_devtools__click({ uid: 'profile_button' });
+
+// Fill input by semantic ID
+await mcp__chrome_devtools__fill({
+  uid: 'dataGrid_search',
+  value: 'my search query'
+});
+```
+
+## Best Practices
+
+### 1. Add Semantics to Interactive Elements
+
+Every clickable, tappable, or input element should have a semantic identifier:
+
+```dart
+// Buttons
+Semantics(
+  identifier: 'myFeature_submit',
+  button: true,
+  label: 'Submit form',
+  child: ElevatedButton(...),
+)
+
+// Text fields
+Semantics(
+  identifier: 'myFeature_email',
+  textField: true,
+  label: 'Email address',
+  child: TextField(...),
+)
+
+// Checkboxes
+Semantics(
+  identifier: 'myFeature_rememberMe',
+  checked: isChecked,
+  label: 'Remember me',
+  child: Checkbox(...),
+)
+```
+
+### 2. Use Meaningful Labels
+
+Labels help both accessibility tools and test debugging:
+
+```dart
+// Good - descriptive label
+Semantics(
+  identifier: DataGridSemantics.rowAction(item.id, 'delete'),
+  label: 'Delete ${item.name}',
+  button: true,
+  child: ...,
+)
+
+// Bad - no context
+Semantics(
+  identifier: 'btn1',
+  child: ...,
+)
+```
+
+### 3. Register New IDs Centrally
+
+Always add new semantic IDs to `semantic_ids.dart`:
+
+```dart
+/// My new feature IDs.
+abstract class MyFeatureSemantics {
+  static const submitButton = 'myFeature_submit';
+  static const cancelButton = 'myFeature_cancel';
+  static const nameField = 'myFeature_name';
+
+  /// Generate ID for a list item.
+  static String item(String id) => 'myFeature_item_$id';
+}
+```
+
+### 4. Test ID Stability
+
+Semantic IDs should remain stable across releases. When refactoring:
+
+- Keep existing IDs unchanged
+- Add deprecation comments if IDs must change
+- Update automation tests when IDs change
+
+### 5. Exclude Decorative Elements
+
+Don't add semantic IDs to purely decorative elements:
+
+```dart
+// Decorative icon - no semantics needed
+Icon(Icons.star, color: Colors.yellow)
+
+// Interactive icon - needs semantics
+Semantics(
+  identifier: 'rating_star_3',
+  button: true,
+  label: 'Rate 3 stars',
+  child: IconButton(
+    icon: Icon(Icons.star),
+    onPressed: () => rate(3),
+  ),
+)
+```
+
+## DataGrid Semantic Patterns
+
+The DataGrid component has comprehensive semantic coverage:
+
+```
+dataGrid                     - The grid container
+dataGrid_search              - Search input field
+dataGrid_search_clear        - Clear search button
+dataGrid_selectAll           - Select all checkbox
+dataGrid_header_{columnId}   - Column header (sortable)
+dataGrid_row_{itemId}        - Row container
+dataGrid_row_{itemId}_checkbox    - Row selection checkbox
+dataGrid_row_{itemId}_actions     - Row actions menu trigger
+dataGrid_row_{itemId}_action_{actionId}  - Specific row action
+dataGrid_bulk_{actionId}     - Bulk action button
+dataGrid_bulk_clear          - Clear selection button
+dataGrid_loading             - Loading indicator
+dataGrid_empty               - Empty state message
+dataGrid_error               - Error state message
+dataGrid_refresh             - Refresh button
+```
+
+### Example: Automating DataGrid Selection
+
+```javascript
+// Select all rows
+await click('dataGrid_selectAll');
+
+// Select specific row
+await click('dataGrid_row_abc123_checkbox');
+
+// Perform bulk delete
+await click('dataGrid_bulk_delete');
+
+// Confirm in dialog
+await click('dialog_confirm');
+```
+
+## Debugging Semantics
+
+### Flutter DevTools
+
+1. Open Flutter DevTools
+2. Go to "Inspector" tab
+3. Enable "Semantics" overlay
+4. Click widgets to see their semantic properties
+
+### Chrome DevTools
+
+1. Open DevTools (F12)
+2. Go to "Accessibility" tab
+3. Inspect the accessibility tree
+4. Search for semantic identifiers
+
+### Programmatic Inspection
+
+```dart
+// In a test, dump the semantics tree
+debugDumpSemanticsTree();
+
+// Check if semantics are enabled
+print('Semantics enabled: ${SemanticsBinding.instance.semanticsEnabled}');
+```
+
+## Integration with URL Routing
+
+For deep-linkable test scenarios, semantic IDs work with URL query parameters:
+
+```
+/control-room/containers?selected=abc123
+```
+
+Automation can:
+1. Navigate to URL with query params
+2. Verify selection state via `dataGrid_row_abc123_checkbox` (checked: true)
+3. Interact with selected rows via semantic IDs
+
+See [URL Routing](#url-routing) section for query parameter patterns.
+
+## Checklist for New Features
+
+When adding a new feature, ensure semantic coverage:
+
+- [ ] Add semantic ID class to `semantic_ids.dart`
+- [ ] Wrap all buttons with `Semantics` + `identifier`
+- [ ] Wrap all inputs with `Semantics` + `identifier`
+- [ ] Wrap list/grid items with dynamic IDs
+- [ ] Add labels for accessibility
+- [ ] Test that IDs appear in accessibility snapshot
+- [ ] Document IDs in this file if they establish new patterns

lib/core/api/api_client.dart

@@ -2,6 +2,7 @@ import 'package:dio/dio.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 import 'package:tatlock_ui/core/api/api_interceptors.dart';
 import 'package:tatlock_ui/core/config/app_config.dart';
+import 'package:tatlock_ui/core/providers/annotations.dart';
 
 import 'api_client_native.dart' if (dart.library.html) 'api_client_web.dart'
     as platform;
@@ -9,10 +10,7 @@ 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.
-///
+@persistentRiverpod
-/// 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,
@@ -36,10 +34,7 @@ Dio coreApiClient(Ref ref) {
 }
 
 /// Provides the Dio instance for Tatlock API.
-///
+@persistentRiverpod
-/// 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/api/api_interceptors.dart

@@ -38,16 +38,9 @@ class AuthInterceptor extends Interceptor {
 
   @override
   void onError(DioException err, ErrorInterceptorHandler handler) {
-    // Skip auth error handling for LAN development
+    // Don't auto-signout on 401 - let calling code handle auth errors gracefully.
-    if (!AppConfig.requiresAuth) {
+    // Auto-signout was causing issues (e.g., theme toggle triggering logout when
-      handler.next(err);
+    // preferences API returned 401).
-      return;
-    }
-
-    if (err.response?.statusCode == 401) {
-      // Token expired - trigger re-authentication
-      _ref.read(authProvider.notifier).signOut();
-    }
     handler.next(err);
   }
 }

lib/core/auth/auth_provider.dart

@@ -6,6 +6,7 @@ import 'package:riverpod_annotation/riverpod_annotation.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 
 import '../config/app_config.dart';
+import '../providers/annotations.dart';
 import 'auth_datasource.dart';
 import 'auth_state.dart';
 import 'oidc_service.dart';
@@ -24,7 +25,7 @@ part 'auth_provider.g.dart';
 ///
 /// After OIDC authentication, syncs with core-api via POST /auth/sync
 /// to get user profile, roles, and preferences.
-@riverpod
+@persistentRiverpod
 class AuthNotifier extends _$AuthNotifier {
   // Storage keys
   static const _accessTokenKey = 'auth_access_token';

lib/core/providers/annotations.dart

@@ -0,0 +1,15 @@
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+/// Riverpod annotation for providers that should persist for the app lifetime.
+///
+/// Use this instead of `@riverpod` when:
+/// - The provider holds app-level state (theme, auth, config)
+/// - The provider stores a Ref that must remain valid (API clients with interceptors)
+/// - Disposing would cause flickering or re-initialization issues
+///
+/// Example:
+/// ```dart
+/// @persistentRiverpod
+/// class ThemeNotifier extends _$ThemeNotifier { ... }
+/// ```
+const persistentRiverpod = Riverpod(keepAlive: true);

lib/core/semantics/semantic_ids.dart

@@ -0,0 +1,125 @@
+/// Semantic identifiers for UI automation and accessibility.
+///
+/// These IDs are exposed via Flutter's Semantics tree, making widgets
+/// discoverable by automation tools (Appium, WebDriver, Puppeteer with
+/// accessibility enabled).
+///
+/// Naming convention: `{area}_{component}_{identifier}`
+/// - area: room or feature area (e.g., profile, nav, dataGrid)
+/// - component: widget type (e.g., menu, button, row)
+/// - identifier: specific item (e.g., light, containers, selectAll)
+library;
+
+/// Profile dropdown menu IDs.
+abstract class ProfileSemantics {
+  static const button = 'profile_button';
+  static const menu = 'profile_menu';
+  static const settings = 'profile_menu_settings';
+  static const themeSystem = 'profile_menu_theme_system';
+  static const themeLight = 'profile_menu_theme_light';
+  static const themeDark = 'profile_menu_theme_dark';
+  static const logout = 'profile_menu_logout';
+}
+
+/// Room tab navigation IDs.
+abstract class RoomTabSemantics {
+  static const frontHall = 'roomTab_frontHall';
+  static const controlRoom = 'roomTab_controlRoom';
+  static const security = 'roomTab_security';
+  static const parlor = 'roomTab_parlor';
+
+  /// Get semantic ID for room index.
+  static String forIndex(int index) => switch (index) {
+        0 => frontHall,
+        1 => controlRoom,
+        2 => security,
+        3 => parlor,
+        _ => 'roomTab_$index',
+      };
+}
+
+/// Navigation panel IDs.
+abstract class NavSemantics {
+  static const panel = 'nav_panel';
+  static const refresh = 'nav_refresh';
+
+  /// Generate ID for a nav item.
+  static String item(String id) => 'nav_item_$id';
+
+  /// Generate ID for a nav section.
+  static String section(String id) => 'nav_section_$id';
+}
+
+/// DataGrid component IDs.
+abstract class DataGridSemantics {
+  static const grid = 'dataGrid';
+  static const search = 'dataGrid_search';
+  static const searchClear = 'dataGrid_search_clear';
+  static const selectAll = 'dataGrid_selectAll';
+  static const loading = 'dataGrid_loading';
+  static const empty = 'dataGrid_empty';
+  static const error = 'dataGrid_error';
+  static const refresh = 'dataGrid_refresh';
+
+  /// Generate ID for a column header.
+  static String header(String columnId) => 'dataGrid_header_$columnId';
+
+  /// Generate ID for a row.
+  static String row(String itemId) => 'dataGrid_row_$itemId';
+
+  /// Generate ID for a row checkbox.
+  static String rowCheckbox(String itemId) => 'dataGrid_row_${itemId}_checkbox';
+
+  /// Generate ID for a row actions menu.
+  static String rowActions(String itemId) => 'dataGrid_row_${itemId}_actions';
+
+  /// Generate ID for a row action.
+  static String rowAction(String itemId, String actionId) =>
+      'dataGrid_row_${itemId}_action_$actionId';
+
+  /// Generate ID for a bulk action button.
+  static String bulkAction(String actionId) => 'dataGrid_bulk_$actionId';
+
+  static const bulkClear = 'dataGrid_bulk_clear';
+}
+
+/// Dialog/modal IDs.
+abstract class DialogSemantics {
+  static const confirm = 'dialog_confirm';
+  static const cancel = 'dialog_cancel';
+  static const close = 'dialog_close';
+
+  /// Generate ID for a named dialog.
+  static String named(String name) => 'dialog_$name';
+
+  /// Generate ID for a dialog action button.
+  static String action(String dialogName, String actionId) =>
+      'dialog_${dialogName}_$actionId';
+}
+
+/// Settings page IDs.
+abstract class SettingsSemantics {
+  static const themeDropdown = 'settings_theme';
+  static const defaultRoomDropdown = 'settings_defaultRoom';
+}
+
+/// Filter panel IDs.
+abstract class FilterPanelSemantics {
+  static const panel = 'filterPanel';
+  static const search = 'filterPanel_search';
+  static const searchClear = 'filterPanel_search_clear';
+  static const refresh = 'filterPanel_refresh';
+
+  /// Generate ID for a filter item.
+  static String item(String id) => 'filterPanel_item_$id';
+}
+
+/// Loading/state indicator IDs.
+abstract class StateSemantics {
+  static const authLoading = 'state_auth_loading';
+  static const authError = 'state_auth_error';
+  static const pageLoading = 'state_page_loading';
+
+  /// Generate ID for a snackbar.
+  static String snackbar(String type) => 'snackbar_$type';
+}

lib/core/semantics/semantic_widget.dart

@@ -0,0 +1,118 @@
+import 'package:flutter/material.dart';
+
+/// Wraps a widget with semantic information for accessibility and automation.
+///
+/// Usage:
+/// ```dart
+/// SemanticWidget(
+///   id: ProfileSemantics.button,
+///   label: 'Open profile menu',
+///   child: IconButton(...),
+/// )
+/// ```
+///
+/// For buttons, use `button: true`. For other interactive elements,
+/// set the appropriate semantic properties.
+class SemanticWidget extends StatelessWidget {
+  const SemanticWidget({
+    super.key,
+    required this.id,
+    required this.child,
+    this.label,
+    this.hint,
+    this.button = false,
+    this.link = false,
+    this.header = false,
+    this.textField = false,
+    this.enabled = true,
+    this.selected,
+    this.checked,
+    this.value,
+    this.excludeSemantics = false,
+  });
+
+  /// Unique identifier for this widget, exposed via [SemanticsProperties.identifier].
+  final String id;
+
+  /// The widget to wrap.
+  final Widget child;
+
+  /// Accessibility label describing the widget.
+  final String? label;
+
+  /// Hint text for screen readers.
+  final String? hint;
+
+  /// Whether this widget represents a button.
+  final bool button;
+
+  /// Whether this widget represents a link.
+  final bool link;
+
+  /// Whether this widget represents a header.
+  final bool header;
+
+  /// Whether this widget represents a text field.
+  final bool textField;
+
+  /// Whether the widget is enabled.
+  final bool enabled;
+
+  /// Whether the widget is selected (for toggle buttons, tabs).
+  final bool? selected;
+
+  /// Whether the widget is checked (for checkboxes).
+  final bool? checked;
+
+  /// Current value (for sliders, progress indicators).
+  final String? value;
+
+  /// Whether to exclude child semantics.
+  final bool excludeSemantics;
+
+  @override
+  Widget build(BuildContext context) {
+    return Semantics(
+      identifier: id,
+      label: label,
+      hint: hint,
+      button: button,
+      link: link,
+      header: header,
+      textField: textField,
+      enabled: enabled,
+      selected: selected,
+      checked: checked,
+      value: value,
+      excludeSemantics: excludeSemantics,
+      child: child,
+    );
+  }
+}
+
+/// Extension to easily wrap any widget with semantic info.
+extension SemanticExtension on Widget {
+  /// Wraps this widget with a semantic identifier.
+  Widget withSemantics({
+    required String id,
+    String? label,
+    String? hint,
+    bool button = false,
+    bool link = false,
+    bool enabled = true,
+    bool? selected,
+    bool? checked,
+  }) {
+    return SemanticWidget(
+      id: id,
+      label: label,
+      hint: hint,
+      button: button,
+      link: link,
+      enabled: enabled,
+      selected: selected,
+      checked: checked,
+      child: this,
+    );
+  }
+}

lib/core/theme/theme_provider.dart

@@ -1,6 +1,10 @@
+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';
+import 'package:tatlock_ui/core/providers/annotations.dart';
 
 part 'theme_provider.g.dart';
 
@@ -17,13 +21,21 @@ enum ThemeSetting {
 }
 
 /// Provider for theme setting state.
-@riverpod
+///
+/// Syncs with API preferences when user is authenticated. On login, the theme
+/// from API preferences takes precedence over local storage.
+@persistentRiverpod
 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 +51,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/containers/presentation/pages/containers_list_page.dart

@@ -1,9 +1,13 @@
+import 'dart:async';
+
 import 'package:flutter/material.dart' hide Container;
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
 import 'package:tatlock_ui/core/api/api_client.dart';
 import 'package:tatlock_ui/features/control_room/containers/presentation/providers/containers_provider.dart';
 import 'package:tatlock_ui/features/control_room/containers/presentation/widgets/container_logs_viewer.dart';
 import 'package:tatlock_ui/features/control_room/containers/presentation/widgets/container_status_badge.dart';
+import 'package:tatlock_ui/routing/url_state.dart';
 import 'package:tatlock_ui/shared/components/data_grid/adapters/core_api_source.dart';
 import 'package:tatlock_ui/shared/components/data_grid/data_grid_exports.dart';
 
@@ -101,7 +105,10 @@ class ContainerPort {
 
 /// Page displaying the list of containers using DataGrid.
 class ContainersListPage extends ConsumerStatefulWidget {
-  const ContainersListPage({super.key});
+  const ContainersListPage({super.key, this.routerState});
+
+  /// Router state for URL deep-linking.
+  final GoRouterState? routerState;
 
   @override
   ConsumerState<ContainersListPage> createState() => _ContainersListPageState();
@@ -110,10 +117,18 @@ class ContainersListPage extends ConsumerStatefulWidget {
 class _ContainersListPageState extends ConsumerState<ContainersListPage> {
   late final StateNotifierProvider<DataGridController<ContainerData>,
       DataGridState<ContainerData>> _gridProvider;
+  late PageUrlState _urlState;
+  Timer? _urlSyncTimer;
 
   @override
   void initState() {
     super.initState();
+
+    // Parse URL state
+    _urlState = PageUrlState.fromQueryParams(
+      widget.routerState?.uri.queryParameters ?? {},
+    );
+
     final dio = ref.read(coreApiClientProvider);
     final source = CoreApiDataSource<ContainerData>(
       dio: dio,
@@ -121,17 +136,68 @@ class _ContainersListPageState extends ConsumerState<ContainersListPage> {
       fromJson: ContainerData.fromJson,
     );
 
+    // Initialize grid with URL state
     _gridProvider = dataGridProvider<ContainerData>(
       source: source,
       config: _buildConfig(),
       idSelector: (c) => c.id,
+      initialSearch: _urlState.search,
+      initialSortColumnIndex: _columnIndexForId(_urlState.sortColumn),
+      initialSortDescending: _urlState.sortDescending,
     );
   }
 
+  @override
+  void dispose() {
+    _urlSyncTimer?.cancel();
+    super.dispose();
+  }
+
+  /// Find column index by column ID.
+  int? _columnIndexForId(String? columnId) {
+    if (columnId == null) return null;
+    final columns = _buildConfig().columns;
+    for (var i = 0; i < columns.length; i++) {
+      if (columns[i].id == columnId) return i;
+    }
+    return null;
+  }
+
+  /// Get column ID by index.
+  String? _columnIdForIndex(int index) {
+    final columns = _buildConfig().columns;
+    if (index >= 0 && index < columns.length) {
+      return columns[index].id;
+    }
+    return null;
+  }
+
+  /// Schedule URL sync with debounce.
+  void _scheduleUrlSync() {
+    _urlSyncTimer?.cancel();
+    _urlSyncTimer = Timer(const Duration(milliseconds: 500), _syncUrlParams);
+  }
+
+  /// Sync current state to URL.
+  void _syncUrlParams() {
+    final state = ref.read(_gridProvider);
+
+    final params = PageUrlState(
+      search: state.searchQuery.isEmpty ? null : state.searchQuery,
+      sortColumn: state.sortColumnIndex != null
+          ? _columnIdForIndex(state.sortColumnIndex!)
+          : null,
+      sortDescending: state.sortDescending,
+    ).toQueryParams();
+
+    updateBrowserUrlParams(params);
+  }
+
   DataGridConfig<ContainerData> _buildConfig() {
     return DataGridConfig<ContainerData>(
       columns: [
         DataGridColumn<ContainerData>(
+          id: 'container',
           header: 'Container',
           valueBuilder: (c) => '${c.name} ${c.image}',
           sortable: true,
@@ -140,12 +206,14 @@ class _ContainersListPageState extends ConsumerState<ContainersListPage> {
           cellBuilder: (context, c) => _ContainerCell(container: c),
         ),
         DataGridColumn<ContainerData>(
+          id: 'ports',
           header: 'Ports',
           valueBuilder: (c) => c.ports.map((p) => p.formatted).join(', '),
           width: const DataGridColumnWidth.flex(1),
           cellBuilder: (context, c) => _PortsCell(ports: c.ports),
         ),
         DataGridColumn<ContainerData>(
+          id: 'status',
           header: 'Status',
           valueBuilder: (c) => c.displayStatus,
           width: const DataGridColumnWidth.fixed(160),
@@ -211,6 +279,15 @@ class _ContainersListPageState extends ConsumerState<ContainersListPage> {
   Widget build(BuildContext context) {
     final colorScheme = Theme.of(context).colorScheme;
 
+    // Listen for grid state changes to sync URL
+    ref.listen(_gridProvider, (previous, next) {
+      if (previous?.searchQuery != next.searchQuery ||
+          previous?.sortColumnIndex != next.sortColumnIndex ||
+          previous?.sortDescending != next.sortDescending) {
+        _scheduleUrlSync();
+      }
+    });
+
     // Listen for container action results to show snackbars
     ref.listen<AsyncValue<void>>(containerActionsProvider, (previous, next) {
       if (previous?.isLoading == true && !next.isLoading) {

lib/features/control_room/npm/presentation/pages/proxy_hosts_page.dart

@@ -1,8 +1,12 @@
+import 'dart:async';
+
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
 import 'package:tatlock_ui/core/api/api_client.dart';
 import 'package:tatlock_ui/features/control_room/npm/presentation/pages/proxy_host_page.dart';
 import 'package:tatlock_ui/features/control_room/npm/presentation/providers/proxy_hosts_provider.dart';
+import 'package:tatlock_ui/routing/url_state.dart';
 import 'package:tatlock_ui/shared/components/data_grid/adapters/core_api_source.dart';
 import 'package:tatlock_ui/shared/components/data_grid/data_grid_exports.dart';
 
@@ -33,7 +37,10 @@ class DomainData {
 
 /// Page displaying the list of proxy hosts (domains) from NPM.
 class ProxyHostsPage extends ConsumerStatefulWidget {
-  const ProxyHostsPage({super.key});
+  const ProxyHostsPage({super.key, this.routerState});
+
+  /// Router state for URL deep-linking.
+  final GoRouterState? routerState;
 
   @override
   ConsumerState<ProxyHostsPage> createState() => _ProxyHostsPageState();
@@ -42,10 +49,18 @@ class ProxyHostsPage extends ConsumerStatefulWidget {
 class _ProxyHostsPageState extends ConsumerState<ProxyHostsPage> {
   late final StateNotifierProvider<DataGridController<DomainData>,
       DataGridState<DomainData>> _gridProvider;
+  late PageUrlState _urlState;
+  Timer? _urlSyncTimer;
 
   @override
   void initState() {
     super.initState();
+
+    // Parse URL state
+    _urlState = PageUrlState.fromQueryParams(
+      widget.routerState?.uri.queryParameters ?? {},
+    );
+
     final dio = ref.read(coreApiClientProvider);
     final source = CoreApiDataSource<DomainData>(
       dio: dio,
@@ -53,17 +68,80 @@ class _ProxyHostsPageState extends ConsumerState<ProxyHostsPage> {
       fromJson: DomainData.fromJson,
     );
 
+    // Initialize grid with URL state
     _gridProvider = dataGridProvider<DomainData>(
       source: source,
       config: _buildConfig(),
       idSelector: (d) => d.proxyHostId.toString(),
+      initialSearch: _urlState.search,
+      initialSortColumnIndex: _columnIndexForId(_urlState.sortColumn),
+      initialSortDescending: _urlState.sortDescending,
     );
+
+    // Open document from URL if id present
+    if (_urlState.id != null) {
+      final id = int.tryParse(_urlState.id!);
+      if (id != null) {
+        WidgetsBinding.instance.addPostFrameCallback((_) {
+          ref.read(selectedProxyHostProvider.notifier).select(id);
+        });
+      }
+    }
+  }
+
+  @override
+  void dispose() {
+    _urlSyncTimer?.cancel();
+    super.dispose();
+  }
+
+  /// Find column index by column ID.
+  int? _columnIndexForId(String? columnId) {
+    if (columnId == null) return null;
+    final columns = _buildConfig().columns;
+    for (var i = 0; i < columns.length; i++) {
+      if (columns[i].id == columnId) return i;
+    }
+    return null;
+  }
+
+  /// Get column ID by index.
+  String? _columnIdForIndex(int index) {
+    final columns = _buildConfig().columns;
+    if (index >= 0 && index < columns.length) {
+      return columns[index].id;
+    }
+    return null;
+  }
+
+  /// Schedule URL sync with debounce.
+  void _scheduleUrlSync() {
+    _urlSyncTimer?.cancel();
+    _urlSyncTimer = Timer(const Duration(milliseconds: 500), _syncUrlParams);
+  }
+
+  /// Sync current state to URL.
+  void _syncUrlParams() {
+    final state = ref.read(_gridProvider);
+    final selectedId = ref.read(selectedProxyHostProvider);
+
+    final params = PageUrlState(
+      id: selectedId?.toString(),
+      search: state.searchQuery.isEmpty ? null : state.searchQuery,
+      sortColumn: state.sortColumnIndex != null
+          ? _columnIdForIndex(state.sortColumnIndex!)
+          : null,
+      sortDescending: state.sortDescending,
+    ).toQueryParams();
+
+    updateBrowserUrlParams(params);
   }
 
   DataGridConfig<DomainData> _buildConfig() {
     return DataGridConfig<DomainData>(
       columns: [
         DataGridColumn<DomainData>(
+          id: 'domain',
           header: 'Domain',
           valueBuilder: (d) => d.domain,
           sortable: true,
@@ -72,12 +150,14 @@ class _ProxyHostsPageState extends ConsumerState<ProxyHostsPage> {
           cellBuilder: (context, d) => _DomainCell(domain: d),
         ),
         DataGridColumn<DomainData>(
+          id: 'service',
           header: 'Service',
           valueBuilder: (d) => d.service,
           width: const DataGridColumnWidth.flex(1),
           cellBuilder: (context, d) => _ServiceCell(service: d.service),
         ),
         DataGridColumn<DomainData>(
+          id: 'ssl',
           header: 'SSL',
           valueBuilder: (d) => d.sslEnabled ? 'Enabled' : 'Disabled',
           width: const DataGridColumnWidth.fixed(100),
@@ -101,6 +181,8 @@ class _ProxyHostsPageState extends ConsumerState<ProxyHostsPage> {
 
   void _viewDomain(DomainData domain) {
     ref.read(selectedProxyHostProvider.notifier).select(domain.proxyHostId);
+    // Navigate with id to enable back button
+    context.go('/control-room/proxy-hosts?id=${domain.proxyHostId}');
   }
 
   void _createNew() {
@@ -112,6 +194,15 @@ class _ProxyHostsPageState extends ConsumerState<ProxyHostsPage> {
     final selectedId = ref.watch(selectedProxyHostProvider);
     final isCreating = ref.watch(creatingProxyHostProvider);
 
+    // Listen for grid state changes to sync URL
+    ref.listen(_gridProvider, (previous, next) {
+      if (previous?.searchQuery != next.searchQuery ||
+          previous?.sortColumnIndex != next.sortColumnIndex ||
+          previous?.sortDescending != next.sortDescending) {
+        _scheduleUrlSync();
+      }
+    });
+
     // Show create page if creating new
     if (isCreating) {
       return ProxyHostPage.create(
@@ -128,6 +219,8 @@ class _ProxyHostsPageState extends ConsumerState<ProxyHostsPage> {
         proxyHostId: selectedId,
         onClose: () {
           ref.read(selectedProxyHostProvider.notifier).clear();
+          // Clear id from URL
+          context.go('/control-room/proxy-hosts');
           ref.read(_gridProvider.notifier).refresh();
         },
       );

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

@@ -17,11 +17,15 @@ class ControlRoomPage extends ConsumerWidget {
   const ControlRoomPage({
     super.key,
     this.nav = ControlRoomNav.containers,
+    this.routerState,
   });
 
   /// The current nav item to display.
   final ControlRoomNav nav;
 
+  /// Router state for URL deep-linking (query params).
+  final GoRouterState? routerState;
+
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final colorScheme = Theme.of(context).colorScheme;
@@ -53,7 +57,7 @@ class ControlRoomPage extends ConsumerWidget {
           ),
           // Section content
           Expanded(
-            child: _SectionContent(nav: nav),
+            child: _SectionContent(nav: nav, routerState: routerState),
           ),
         ],
       ),
@@ -63,50 +67,18 @@ class ControlRoomPage extends ConsumerWidget {
 
 /// Renders content for the selected nav item.
 class _SectionContent extends ConsumerWidget {
-  const _SectionContent({required this.nav});
+  const _SectionContent({required this.nav, this.routerState});
 
   final ControlRoomNav nav;
+  final GoRouterState? routerState;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    switch (nav) {
+    return switch (nav) {
-      case ControlRoomNav.containers:
+      ControlRoomNav.containers => _ContainersSection(routerState: routerState),
-        return const _ContainersSection();
+      ControlRoomNav.proxyHosts => ProxyHostsPage(routerState: routerState),
-      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,9 +122,43 @@ class _PlaceholderSection extends StatelessWidget {
   }
 }
 
+/// Containers section with optional stack filter.
+class _ContainersSection extends ConsumerWidget {
+  const _ContainersSection({this.routerState});
+
+  final GoRouterState? routerState;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final selectedStack = ref.watch(selectedStackProvider);
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Row(
+      children: [
+        // Stacks filter panel
+        _StacksFilterPanel(routerState: routerState),
+        // Divider
+        VerticalDivider(
+          width: 1,
+          thickness: 1,
+          color: colorScheme.outlineVariant,
+        ),
+        // Main content - containers list or stack detail
+        Expanded(
+          child: selectedStack == null
+              ? ContainersListPage(routerState: routerState)
+              : StackDetailPage(stackId: selectedStack),
+        ),
+      ],
+    );
+  }
+}
+
 /// Stacks filter panel for Containers section (includes "All Containers" option).
 class _StacksFilterPanel extends ConsumerWidget {
-  const _StacksFilterPanel();
+  const _StacksFilterPanel({this.routerState});
+
+  final GoRouterState? routerState;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -210,6 +216,7 @@ class _StacksFilterPanel extends ConsumerWidget {
               data: (stacks) => _StacksList(
                 stacks: stacks,
                 selectedStackId: selectedStack,
+                routerState: routerState,
                 onStackSelected: (id) =>
                     ref.read(selectedStackProvider.notifier).select(id),
                 onStackAction: (id, action) =>
@@ -284,12 +291,14 @@ class _StacksList extends StatefulWidget {
     required this.selectedStackId,
     required this.onStackSelected,
     required this.onStackAction,
+    this.routerState,
   });
 
   final List<Stack> stacks;
   final String? selectedStackId;
   final void Function(String) onStackSelected;
   final void Function(String, String) onStackAction;
+  final GoRouterState? routerState;
 
   @override
   State<_StacksList> createState() => _StacksListState();

lib/features/control_room/router.dart

@@ -2,35 +2,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/routing/room_registry.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);
 
@@ -53,6 +50,22 @@ enum ControlRoomNav {
 /// Get route path for a nav item.
 String pathForNav(ControlRoomNav nav) => nav.path;
 
+/// Control Room room definition.
+final controlRoomRoom = RoomDefinition(
+  id: 'control-room',
+  label: 'Control Room',
+  icon: Icons.dns_outlined,
+  selectedIcon: Icons.dns,
+  defaultRoute: ControlRoomRoutes.containers,
+  routes: controlRoomRoutes,
+  // No permissions required - accessible to all authenticated users
+);
+
+/// Register Control Room with the room registry.
+void registerControlRoom() {
+  roomRegistry.register(controlRoomRoom);
+}
+
 /// Control Room routes for go_router.
 List<RouteBase> controlRoomRoutes() {
   return [
@@ -67,8 +80,11 @@ List<RouteBase> controlRoomRoutes() {
       GoRoute(
         path: nav.path,
         name: 'controlRoom${_capitalize(nav.id.replaceAll('-', '_'))}',
-        pageBuilder: (context, state) =>
+        pageBuilder: (context, state) => noTransitionPage(
-            noTransitionPage(context, state, ControlRoomPage(nav: nav)),
+          context,
+          state,
+          ControlRoomPage(nav: nav, routerState: state),
+        ),
       ),
   ];
 }

lib/features/front_hall/router.dart

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:tatlock_ui/features/front_hall/presentation/pages/front_hall_page.dart';
+import 'package:tatlock_ui/routing/app_router.dart';
+import 'package:tatlock_ui/routing/room_registry.dart';
+
+/// Route paths for Front Hall.
+abstract class FrontHallRoutes {
+  static const base = '/front-hall';
+}
+
+/// Front Hall room definition.
+final frontHallRoom = RoomDefinition(
+  id: 'front-hall',
+  label: 'Front Hall',
+  icon: Icons.door_front_door_outlined,
+  selectedIcon: Icons.door_front_door,
+  defaultRoute: FrontHallRoutes.base,
+  routes: frontHallRoutes,
+  // No permissions required - accessible to all authenticated users
+);
+
+/// Register Front Hall with the room registry.
+void registerFrontHall() {
+  roomRegistry.register(frontHallRoom);
+}
+
+/// Front Hall routes for go_router.
+List<RouteBase> frontHallRoutes() {
+  return [
+    GoRoute(
+      path: FrontHallRoutes.base,
+      name: 'frontHall',
+      pageBuilder: (context, state) =>
+          noTransitionPage(context, state, const FrontHallPage()),
+    ),
+  ];
+}

lib/features/media_room/presentation/pages/media_room_page.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+
+/// Media Room - media management and playback.
+///
+/// Placeholder page for future implementation.
+class MediaRoomPage extends StatelessWidget {
+  const MediaRoomPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Icon(
+            Icons.movie,
+            size: 64,
+            color: Theme.of(context).colorScheme.outline,
+          ),
+          const SizedBox(height: 16),
+          Text(
+            'Media Room',
+            style: Theme.of(context).textTheme.headlineMedium,
+          ),
+          const SizedBox(height: 8),
+          Text(
+            'Media management and playback - coming soon',
+            style: Theme.of(context).textTheme.bodyLarge?.copyWith(
+                  color: Theme.of(context).colorScheme.outline,
+                ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/features/media_room/router.dart

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:tatlock_ui/features/media_room/presentation/pages/media_room_page.dart';
+import 'package:tatlock_ui/routing/app_router.dart';
+import 'package:tatlock_ui/routing/room_registry.dart';
+
+/// Route paths for Media Room.
+abstract class MediaRoomRoutes {
+  static const base = '/media-room';
+}
+
+/// Media Room room definition.
+final mediaRoomRoom = RoomDefinition(
+  id: 'media-room',
+  label: 'Media Room',
+  icon: Icons.movie_outlined,
+  selectedIcon: Icons.movie,
+  defaultRoute: MediaRoomRoutes.base,
+  routes: mediaRoomRoutes,
+  // No permissions required - accessible to all authenticated users
+);
+
+/// Register Media Room with the room registry.
+void registerMediaRoom() {
+  roomRegistry.register(mediaRoomRoom);
+}
+
+/// Media Room routes for go_router.
+List<RouteBase> mediaRoomRoutes() {
+  return [
+    GoRoute(
+      path: MediaRoomRoutes.base,
+      name: 'mediaRoom',
+      pageBuilder: (context, state) =>
+          noTransitionPage(context, state, const MediaRoomPage()),
+    ),
+  ];
+}

lib/features/parlor/presentation/pages/parlor_page.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+
+/// Parlor - AI chat and automation hub.
+///
+/// Placeholder page for future implementation.
+class ParlorPage extends StatelessWidget {
+  const ParlorPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Icon(
+            Icons.lightbulb,
+            size: 64,
+            color: Theme.of(context).colorScheme.outline,
+          ),
+          const SizedBox(height: 16),
+          Text(
+            'Parlor',
+            style: Theme.of(context).textTheme.headlineMedium,
+          ),
+          const SizedBox(height: 8),
+          Text(
+            'AI chat and automation hub - coming soon',
+            style: Theme.of(context).textTheme.bodyLarge?.copyWith(
+                  color: Theme.of(context).colorScheme.outline,
+                ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/features/parlor/router.dart

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:tatlock_ui/features/parlor/presentation/pages/parlor_page.dart';
+import 'package:tatlock_ui/routing/app_router.dart';
+import 'package:tatlock_ui/routing/room_registry.dart';
+
+/// Route paths for Parlor.
+abstract class ParlorRoutes {
+  static const base = '/parlor';
+}
+
+/// Parlor room definition.
+final parlorRoom = RoomDefinition(
+  id: 'parlor',
+  label: 'Parlor',
+  icon: Icons.lightbulb_outline,
+  selectedIcon: Icons.lightbulb,
+  defaultRoute: ParlorRoutes.base,
+  routes: parlorRoutes,
+  // No permissions required - accessible to all authenticated users
+);
+
+/// Register Parlor with the room registry.
+void registerParlor() {
+  roomRegistry.register(parlorRoom);
+}
+
+/// Parlor routes for go_router.
+List<RouteBase> parlorRoutes() {
+  return [
+    GoRoute(
+      path: ParlorRoutes.base,
+      name: 'parlor',
+      pageBuilder: (context, state) =>
+          noTransitionPage(context, state, const ParlorPage()),
+    ),
+  ];
+}

lib/features/security/groups/groups_list_page.dart

@@ -1,6 +1,10 @@
+import 'dart:async';
+
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
 import 'package:tatlock_ui/core/api/api_client.dart';
+import 'package:tatlock_ui/routing/url_state.dart';
 import 'package:tatlock_ui/shared/components/data_grid/adapters/core_api_source.dart';
 import 'package:tatlock_ui/shared/components/data_grid/data_grid_exports.dart';
 
@@ -31,7 +35,10 @@ class GroupData {
 
 /// Groups list page using the shared DataGrid component.
 class GroupsListPage extends ConsumerStatefulWidget {
-  const GroupsListPage({super.key});
+  const GroupsListPage({super.key, this.routerState});
+
+  /// Router state for URL deep-linking.
+  final GoRouterState? routerState;
 
   @override
   ConsumerState<GroupsListPage> createState() => _GroupsListPageState();
@@ -40,11 +47,19 @@ class GroupsListPage extends ConsumerStatefulWidget {
 class _GroupsListPageState extends ConsumerState<GroupsListPage> {
   late final StateNotifierProvider<DataGridController<GroupData>,
       DataGridState<GroupData>> _gridProvider;
+  late PageUrlState _urlState;
+  Timer? _urlSyncTimer;
   bool _isSyncing = false;
 
   @override
   void initState() {
     super.initState();
+
+    // Parse URL state
+    _urlState = PageUrlState.fromQueryParams(
+      widget.routerState?.uri.queryParameters ?? {},
+    );
+
     // Create provider in initState to ensure stable reference
     final dio = ref.read(coreApiClientProvider);
     final source = CoreApiDataSource<GroupData>(
@@ -53,13 +68,63 @@ class _GroupsListPageState extends ConsumerState<GroupsListPage> {
       fromJson: GroupData.fromJson,
     );
 
+    // Initialize grid with URL state
     _gridProvider = dataGridProvider<GroupData>(
       source: source,
       config: _buildConfig(),
       idSelector: (g) => g.id,
+      initialSearch: _urlState.search,
+      initialSortColumnIndex: _columnIndexForId(_urlState.sortColumn),
+      initialSortDescending: _urlState.sortDescending,
     );
   }
 
+  @override
+  void dispose() {
+    _urlSyncTimer?.cancel();
+    super.dispose();
+  }
+
+  /// Find column index by column ID.
+  int? _columnIndexForId(String? columnId) {
+    if (columnId == null) return null;
+    final columns = _buildConfig().columns;
+    for (var i = 0; i < columns.length; i++) {
+      if (columns[i].id == columnId) return i;
+    }
+    return null;
+  }
+
+  /// Get column ID by index.
+  String? _columnIdForIndex(int index) {
+    final columns = _buildConfig().columns;
+    if (index >= 0 && index < columns.length) {
+      return columns[index].id;
+    }
+    return null;
+  }
+
+  /// Schedule URL sync with debounce.
+  void _scheduleUrlSync() {
+    _urlSyncTimer?.cancel();
+    _urlSyncTimer = Timer(const Duration(milliseconds: 500), _syncUrlParams);
+  }
+
+  /// Sync current state to URL.
+  void _syncUrlParams() {
+    final state = ref.read(_gridProvider);
+
+    final params = PageUrlState(
+      search: state.searchQuery.isEmpty ? null : state.searchQuery,
+      sortColumn: state.sortColumnIndex != null
+          ? _columnIdForIndex(state.sortColumnIndex!)
+          : null,
+      sortDescending: state.sortDescending,
+    ).toQueryParams();
+
+    updateBrowserUrlParams(params);
+  }
+
   Future<void> _syncFromAuthentik() async {
     if (_isSyncing) return;
     setState(() => _isSyncing = true);
@@ -96,6 +161,7 @@ class _GroupsListPageState extends ConsumerState<GroupsListPage> {
     return DataGridConfig<GroupData>(
       columns: [
         DataGridColumn<GroupData>(
+          id: 'name',
           header: 'Name',
           valueBuilder: (g) => g.name,
           sortable: true,
@@ -103,18 +169,21 @@ class _GroupsListPageState extends ConsumerState<GroupsListPage> {
           width: const DataGridColumnWidth.flex(2),
         ),
         DataGridColumn<GroupData>(
+          id: 'members',
           header: 'Members',
           valueBuilder: (g) => g.memberCount.toString(),
           width: const DataGridColumnWidth.fixed(100),
           alignment: DataGridColumnAlignment.end,
         ),
         DataGridColumn<GroupData>(
+          id: 'type',
           header: 'Type',
           valueBuilder: (g) => g.isSuperuser ? 'Superuser' : 'Standard',
           cellBuilder: (context, g) => _GroupTypeBadge(isSuperuser: g.isSuperuser),
           width: const DataGridColumnWidth.fixed(120),
         ),
         DataGridColumn<GroupData>(
+          id: 'parent',
           header: 'Parent',
           valueBuilder: (g) => g.parentName ?? '-',
           width: const DataGridColumnWidth.flex(1),
@@ -129,6 +198,15 @@ class _GroupsListPageState extends ConsumerState<GroupsListPage> {
 
   @override
   Widget build(BuildContext context) {
+    // Listen for grid state changes to sync URL
+    ref.listen(_gridProvider, (previous, next) {
+      if (previous?.searchQuery != next.searchQuery ||
+          previous?.sortColumnIndex != next.sortColumnIndex ||
+          previous?.sortDescending != next.sortDescending) {
+        _scheduleUrlSync();
+      }
+    });
+
     return DataGrid<GroupData>(
       provider: _gridProvider,
       config: _buildConfig(),

lib/features/security/presentation/pages/security_page.dart

@@ -11,11 +11,15 @@ class SecurityPage extends ConsumerWidget {
   const SecurityPage({
     super.key,
     this.nav = SecurityNav.users,
+    this.routerState,
   });
 
   /// The current nav item to display.
   final SecurityNav nav;
 
+  /// Router state for URL deep-linking (query params).
+  final GoRouterState? routerState;
+
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final colorScheme = Theme.of(context).colorScheme;
@@ -45,7 +49,7 @@ class SecurityPage extends ConsumerWidget {
           ),
           // Section content
           Expanded(
-            child: _SectionContent(nav: nav),
+            child: _SectionContent(nav: nav, routerState: routerState),
           ),
         ],
       ),
@@ -55,17 +59,18 @@ class SecurityPage extends ConsumerWidget {
 
 /// Renders content for the selected nav item.
 class _SectionContent extends StatelessWidget {
-  const _SectionContent({required this.nav});
+  const _SectionContent({required this.nav, this.routerState});
 
   final SecurityNav nav;
+  final GoRouterState? routerState;
 
   @override
   Widget build(BuildContext context) {
     switch (nav) {
       case SecurityNav.users:
-        return const UsersListPage();
+        return UsersListPage(routerState: routerState);
       case SecurityNav.groups:
-        return const GroupsListPage();
+        return GroupsListPage(routerState: routerState);
       default:
         return _PlaceholderSection(nav: nav);
     }

lib/features/security/router.dart

@@ -2,6 +2,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/routing/room_registry.dart';
 import 'package:tatlock_ui/shared/layouts/widgets/nav_panel.dart';
 
 /// Route paths for Security room.
@@ -47,6 +48,22 @@ enum SecurityNav {
 /// Get route path for a nav item.
 String pathForSecurityNav(SecurityNav nav) => nav.path;
 
+/// Security room definition.
+final securityRoom = RoomDefinition(
+  id: 'security',
+  label: 'Security',
+  icon: Icons.security_outlined,
+  selectedIcon: Icons.security,
+  defaultRoute: SecurityRoutes.users,
+  routes: securityRoutes,
+  // No permissions required - accessible to all authenticated users
+);
+
+/// Register Security room with the room registry.
+void registerSecurity() {
+  roomRegistry.register(securityRoom);
+}
+
 /// Security room routes for go_router.
 List<RouteBase> securityRoutes() {
   return [
@@ -61,8 +78,11 @@ List<RouteBase> securityRoutes() {
       GoRoute(
         path: nav.path,
         name: 'security${_capitalize(nav.id.replaceAll('-', '_'))}',
-        pageBuilder: (context, state) =>
+        pageBuilder: (context, state) => noTransitionPage(
-            noTransitionPage(context, state, SecurityPage(nav: nav)),
+          context,
+          state,
+          SecurityPage(nav: nav, routerState: state),
+        ),
       ),
   ];
 }

lib/features/security/users/users_list_page.dart

@@ -1,6 +1,10 @@
+import 'dart:async';
+
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
 import 'package:tatlock_ui/core/api/api_client.dart';
+import 'package:tatlock_ui/routing/url_state.dart';
 import 'package:tatlock_ui/shared/components/data_grid/adapters/core_api_source.dart';
 import 'package:tatlock_ui/shared/components/data_grid/data_grid_exports.dart';
 
@@ -61,7 +65,10 @@ class UserData {
 
 /// Users list page using the shared DataGrid component.
 class UsersListPage extends ConsumerStatefulWidget {
-  const UsersListPage({super.key});
+  const UsersListPage({super.key, this.routerState});
+
+  /// Router state for URL deep-linking.
+  final GoRouterState? routerState;
 
   @override
   ConsumerState<UsersListPage> createState() => _UsersListPageState();
@@ -70,11 +77,19 @@ class UsersListPage extends ConsumerStatefulWidget {
 class _UsersListPageState extends ConsumerState<UsersListPage> {
   late final StateNotifierProvider<DataGridController<UserData>,
       DataGridState<UserData>> _gridProvider;
+  late PageUrlState _urlState;
+  Timer? _urlSyncTimer;
   bool _isSyncing = false;
 
   @override
   void initState() {
     super.initState();
+
+    // Parse URL state
+    _urlState = PageUrlState.fromQueryParams(
+      widget.routerState?.uri.queryParameters ?? {},
+    );
+
     final dio = ref.read(coreApiClientProvider);
     final source = CoreApiDataSource<UserData>(
       dio: dio,
@@ -82,13 +97,63 @@ class _UsersListPageState extends ConsumerState<UsersListPage> {
       fromJson: UserData.fromJson,
     );
 
+    // Initialize grid with URL state
     _gridProvider = dataGridProvider<UserData>(
       source: source,
       config: _buildConfig(),
       idSelector: (u) => u.id,
+      initialSearch: _urlState.search,
+      initialSortColumnIndex: _columnIndexForId(_urlState.sortColumn),
+      initialSortDescending: _urlState.sortDescending,
     );
   }
 
+  @override
+  void dispose() {
+    _urlSyncTimer?.cancel();
+    super.dispose();
+  }
+
+  /// Find column index by column ID.
+  int? _columnIndexForId(String? columnId) {
+    if (columnId == null) return null;
+    final columns = _buildConfig().columns;
+    for (var i = 0; i < columns.length; i++) {
+      if (columns[i].id == columnId) return i;
+    }
+    return null;
+  }
+
+  /// Get column ID by index.
+  String? _columnIdForIndex(int index) {
+    final columns = _buildConfig().columns;
+    if (index >= 0 && index < columns.length) {
+      return columns[index].id;
+    }
+    return null;
+  }
+
+  /// Schedule URL sync with debounce.
+  void _scheduleUrlSync() {
+    _urlSyncTimer?.cancel();
+    _urlSyncTimer = Timer(const Duration(milliseconds: 500), _syncUrlParams);
+  }
+
+  /// Sync current state to URL.
+  void _syncUrlParams() {
+    final state = ref.read(_gridProvider);
+
+    final params = PageUrlState(
+      search: state.searchQuery.isEmpty ? null : state.searchQuery,
+      sortColumn: state.sortColumnIndex != null
+          ? _columnIdForIndex(state.sortColumnIndex!)
+          : null,
+      sortDescending: state.sortDescending,
+    ).toQueryParams();
+
+    updateBrowserUrlParams(params);
+  }
+
   Future<void> _syncFromAuthentik() async {
     if (_isSyncing) return;
     setState(() => _isSyncing = true);
@@ -125,6 +190,7 @@ class _UsersListPageState extends ConsumerState<UsersListPage> {
     return DataGridConfig<UserData>(
       columns: [
         DataGridColumn<UserData>(
+          id: 'user',
           header: 'User',
           valueBuilder: (u) => u.name,
           sortable: true,
@@ -133,12 +199,14 @@ class _UsersListPageState extends ConsumerState<UsersListPage> {
           cellBuilder: (context, u) => _UserCell(user: u),
         ),
         DataGridColumn<UserData>(
+          id: 'roles',
           header: 'Roles',
           valueBuilder: (u) => u.roles.join(', '),
           width: const DataGridColumnWidth.flex(1),
           cellBuilder: (context, u) => _RolesCell(roles: u.roles),
         ),
         DataGridColumn<UserData>(
+          id: 'lastLogin',
           header: 'Last Login',
           valueBuilder: (u) => u.lastLoginFormatted,
           width: const DataGridColumnWidth.fixed(120),
@@ -154,6 +222,15 @@ class _UsersListPageState extends ConsumerState<UsersListPage> {
 
   @override
   Widget build(BuildContext context) {
+    // Listen for grid state changes to sync URL
+    ref.listen(_gridProvider, (previous, next) {
+      if (previous?.searchQuery != next.searchQuery ||
+          previous?.sortColumnIndex != next.sortColumnIndex ||
+          previous?.sortDescending != next.sortDescending) {
+        _scheduleUrlSync();
+      }
+    });
+
     return DataGrid<UserData>(
       provider: _gridProvider,
       config: _buildConfig(),

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

@@ -0,0 +1,301 @@
+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';
+import 'package:tatlock_ui/routing/room_registry.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: roomRegistry.all
+                                .map(
+                                  (room) => DropdownMenuItem(
+                                    value: room.id,
+                                    child: Text(room.label),
+                                  ),
+                                )
+                                .toList(),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+
+                  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

@@ -1,6 +1,8 @@
 import 'dart:developer' as developer;
 
+import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 import 'app.dart';
@@ -11,6 +13,12 @@ import 'version.g.dart';
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
 
+  // Enable semantics tree on web for accessibility and automation tools.
+  // This exposes widget identifiers to browser automation (Puppeteer, etc.)
+  if (kIsWeb) {
+    SemanticsBinding.instance.ensureSemantics();
+  }
+
   // Use path-based URLs on web (no-op on mobile/desktop)
   configureUrlStrategy();
 

lib/routing/app_router.dart

@@ -1,13 +1,34 @@
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
+import 'package:tatlock_ui/core/auth/auth_provider.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/front_hall/router.dart';
+import 'package:tatlock_ui/features/media_room/router.dart';
+import 'package:tatlock_ui/features/parlor/router.dart';
 import 'package:tatlock_ui/features/security/router.dart';
+import 'package:tatlock_ui/features/settings/presentation/pages/settings_page.dart';
+import 'package:tatlock_ui/routing/room_registry.dart';
 import 'package:tatlock_ui/shared/layouts/app_scaffold.dart';
 
 part 'app_router.g.dart';
 
+/// Initialize room registry with all rooms.
+///
+/// Called once before creating the router.
+/// Order of registration determines tab order in UI.
+void _initializeRoomRegistry() {
+  // Skip if already initialized
+  if (roomRegistry.all.isNotEmpty) return;
+
+  // Register rooms in display order
+  registerFrontHall();
+  registerControlRoom();
+  registerSecurity();
+  registerParlor();
+  registerMediaRoom();
+}
+
 /// No-animation page builder for instant transitions
 Page<void> noTransitionPage(BuildContext context, GoRouterState state, Widget child) {
   return NoTransitionPage<void>(
@@ -18,41 +39,60 @@ Page<void> noTransitionPage(BuildContext context, GoRouterState state, Widget ch
 
 /// Route paths as constants.
 abstract class AppRoutes {
-  static const frontHall = '/';
+  static const root = '/';
-  static const parlor = '/parlor';
   static const settings = '/settings';
 }
 
+/// Maps defaultRoom preference value to route path.
+String _routeForDefaultRoom(String? defaultRoom) {
+  // Look up room in registry, fall back to first room's default route
+  final room = roomRegistry.byId(defaultRoom ?? '');
+  if (room != null) {
+    return room.defaultRoute;
+  }
+  // Default to first registered room (Front Hall)
+  return roomRegistry.all.isNotEmpty
+      ? roomRegistry.all.first.defaultRoute
+      : FrontHallRoutes.base;
+}
+
 /// Provides the GoRouter instance.
 @riverpod
 GoRouter appRouter(Ref ref) {
+  // Initialize room registry on first access
+  _initializeRoomRegistry();
+
+  final authState = ref.watch(authProvider);
+
   return GoRouter(
-    initialLocation: AppRoutes.frontHall,
+    initialLocation: AppRoutes.root,
     debugLogDiagnostics: true,
+    redirect: (context, state) {
+      // Redirect from root to user's default room preference
+      if (state.matchedLocation == AppRoutes.root) {
+        final defaultRoom = authState.value?.preferences?.defaultRoom;
+        return _routeForDefaultRoom(defaultRoom);
+      }
+      return null;
+    },
     routes: [
+      // Root redirects to default room (handled by redirect callback above)
+      GoRoute(
+        path: AppRoutes.root,
+        redirect: (context, state) => _routeForDefaultRoom(null),
+      ),
       // Main app routes (inside shell with app scaffold)
       ShellRoute(
         builder: (context, state, child) => AppScaffold(child: child),
         routes: [
-          GoRoute(
+          // All room routes from registry
-            path: AppRoutes.frontHall,
+          ...roomRegistry.allRoutes(),
-            name: 'frontHall',
+          // Settings page (not a room, just a page)
-            pageBuilder: (context, state) =>
-                noTransitionPage(context, state, const FrontHallPage()),
-          ),
-          ...controlRoomRoutes(),
-          ...securityRoutes(),
-          GoRoute(
-            path: AppRoutes.parlor,
-            name: 'parlor',
-            pageBuilder: (context, state) =>
-                noTransitionPage(context, state, const _PlaceholderPage(title: 'Parlor')),
-          ),
           GoRoute(
             path: AppRoutes.settings,
             name: 'settings',
             pageBuilder: (context, state) =>
-                noTransitionPage(context, state, const _PlaceholderPage(title: 'Settings')),
+                noTransitionPage(context, state, const SettingsPage()),
           ),
         ],
       ),
@@ -60,38 +100,4 @@ GoRouter appRouter(Ref ref) {
   );
 }
 
-/// Placeholder page for routes not yet implemented.
-class _PlaceholderPage extends StatelessWidget {
-  const _PlaceholderPage({required this.title});
-
-  final String title;
-
-  @override
-  Widget build(BuildContext context) {
-    return Center(
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          Icon(
-            Icons.construction,
-            size: 64,
-            color: Theme.of(context).colorScheme.outline,
-          ),
-          const SizedBox(height: 16),
-          Text(
-            title,
-            style: Theme.of(context).textTheme.headlineMedium,
-          ),
-          const SizedBox(height: 8),
-          Text(
-            'Coming soon',
-            style: Theme.of(context).textTheme.bodyLarge?.copyWith(
-                  color: Theme.of(context).colorScheme.outline,
-                ),
-          ),
-        ],
-      ),
-    );
-  }
-}
 

lib/routing/room_registry.dart

@@ -0,0 +1,113 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+/// Defines a room in the application.
+///
+/// Each feature/room registers itself with metadata for navigation,
+/// routing, and permission-based access control.
+class RoomDefinition {
+  const RoomDefinition({
+    required this.id,
+    required this.label,
+    required this.icon,
+    required this.selectedIcon,
+    required this.defaultRoute,
+    required this.routes,
+    this.requiredPermissions = const [],
+  });
+
+  /// Unique identifier used in preferences (e.g., 'front-hall', 'control-room').
+  final String id;
+
+  /// Display label for UI.
+  final String label;
+
+  /// Icon when not selected.
+  final IconData icon;
+
+  /// Icon when selected.
+  final IconData selectedIcon;
+
+  /// Default route path when room is selected.
+  final String defaultRoute;
+
+  /// All routes this room provides to go_router.
+  final List<RouteBase> Function() routes;
+
+  /// Permissions required to access this room (empty = accessible to all).
+  /// User must have ALL listed permissions.
+  final List<String> requiredPermissions;
+}
+
+/// Central registry of all rooms in the application.
+///
+/// Each room's router.dart file registers itself here.
+/// UI components query this registry to build navigation.
+class RoomRegistry {
+  RoomRegistry._();
+
+  static final RoomRegistry instance = RoomRegistry._();
+
+  final List<RoomDefinition> _rooms = [];
+
+  /// Register a room. Called by each room's router.dart.
+  void register(RoomDefinition room) {
+    // Avoid duplicate registration
+    if (!_rooms.any((r) => r.id == room.id)) {
+      _rooms.add(room);
+    }
+  }
+
+  /// Get all registered rooms.
+  List<RoomDefinition> get all => List.unmodifiable(_rooms);
+
+  /// Get rooms filtered by user permissions.
+  ///
+  /// [userPermissions] is the set of permissions the user has.
+  /// Returns rooms where the user has ALL required permissions.
+  List<RoomDefinition> accessibleTo(Set<String> userPermissions) {
+    return _rooms.where((room) {
+      if (room.requiredPermissions.isEmpty) return true;
+      return room.requiredPermissions.every(userPermissions.contains);
+    }).toList();
+  }
+
+  /// Get a room by its ID.
+  RoomDefinition? byId(String id) {
+    try {
+      return _rooms.firstWhere((r) => r.id == id);
+    } catch (_) {
+      return null;
+    }
+  }
+
+  /// Get the index of a room by its ID.
+  int indexOfId(String id) {
+    return _rooms.indexWhere((r) => r.id == id);
+  }
+
+  /// Get the index of a room by route path.
+  int indexOfRoute(String path) {
+    // Find room whose defaultRoute matches or whose routes start with path
+    for (var i = 0; i < _rooms.length; i++) {
+      final room = _rooms[i];
+      if (path == room.defaultRoute || path.startsWith('/${room.id}')) {
+        return i;
+      }
+    }
+    return 0; // Default to first room
+  }
+
+  /// Get all routes from all registered rooms.
+  List<RouteBase> allRoutes() {
+    return _rooms.expand((room) => room.routes()).toList();
+  }
+
+  /// Clear registry (useful for testing).
+  void clear() {
+    _rooms.clear();
+  }
+}
+
+/// Global registry instance.
+final roomRegistry = RoomRegistry.instance;

lib/routing/url_state.dart

@@ -0,0 +1,98 @@
+import 'package:flutter/foundation.dart' show kIsWeb;
+
+// Conditional import for web-only functionality
+import 'url_state_stub.dart' if (dart.library.js_interop) 'url_state_web.dart'
+    as platform;
+
+/// Parses and builds URL query parameters for page state.
+///
+/// Used to enable deep-linking for DataGrid and filter panel state.
+/// Query params are read once on page load and updated via browser
+/// replaceState to avoid GoRouter rebuild loops.
+class PageUrlState {
+  const PageUrlState({
+    this.id,
+    this.filter,
+    this.search,
+    this.sortColumn,
+    this.sortDescending = false,
+  });
+
+  /// Opened document ID (view/edit mode).
+  final String? id;
+
+  /// Filter panel search value.
+  final String? filter;
+
+  /// DataGrid search value.
+  final String? search;
+
+  /// Column ID for sorting.
+  final String? sortColumn;
+
+  /// Sort direction (true = descending).
+  final bool sortDescending;
+
+  /// Parse from query parameters map.
+  factory PageUrlState.fromQueryParams(Map<String, String> params) {
+    return PageUrlState(
+      id: params['id'],
+      filter: params['filter'],
+      search: params['search'],
+      sortColumn: params['sort'],
+      sortDescending: params['order'] == 'desc',
+    );
+  }
+
+  /// Convert to query parameter map (omits empty/default values).
+  Map<String, String> toQueryParams() {
+    return {
+      if (id != null && id!.isNotEmpty) 'id': id!,
+      if (filter != null && filter!.isNotEmpty) 'filter': filter!,
+      if (search != null && search!.isNotEmpty) 'search': search!,
+      if (sortColumn != null && sortColumn!.isNotEmpty) 'sort': sortColumn!,
+      if (sortDescending) 'order': 'desc',
+    };
+  }
+
+  /// Create a copy with modified values.
+  PageUrlState copyWith({
+    String? id,
+    String? filter,
+    String? search,
+    String? sortColumn,
+    bool? sortDescending,
+    bool clearId = false,
+  }) {
+    return PageUrlState(
+      id: clearId ? null : (id ?? this.id),
+      filter: filter ?? this.filter,
+      search: search ?? this.search,
+      sortColumn: sortColumn ?? this.sortColumn,
+      sortDescending: sortDescending ?? this.sortDescending,
+    );
+  }
+
+  /// Whether any state is present.
+  bool get isEmpty =>
+      id == null &&
+      (filter == null || filter!.isEmpty) &&
+      (search == null || search!.isEmpty) &&
+      sortColumn == null;
+
+  @override
+  String toString() =>
+      'PageUrlState(id: $id, filter: $filter, search: $search, '
+      'sort: $sortColumn, desc: $sortDescending)';
+}
+
+/// Updates browser URL with query parameters without triggering navigation.
+///
+/// Uses browser's replaceState API on web, no-op on other platforms.
+/// This allows the URL to stay in sync for bookmarking/sharing without
+/// causing Flutter to rebuild.
+void updateBrowserUrlParams(Map<String, String> params) {
+  if (kIsWeb) {
+    platform.updateBrowserUrlParams(params);
+  }
+}

lib/routing/url_state_stub.dart

@@ -0,0 +1,4 @@
+/// Stub implementation for non-web platforms.
+void updateBrowserUrlParams(Map<String, String> params) {
+  // No-op on non-web platforms
+}

lib/routing/url_state_web.dart

@@ -0,0 +1,13 @@
+import 'package:web/web.dart' as web;
+
+/// Updates browser URL with query parameters without triggering navigation.
+///
+/// Uses browser's replaceState API to update the URL bar for bookmarking
+/// without causing Flutter/GoRouter to rebuild the page.
+void updateBrowserUrlParams(Map<String, String> params) {
+  final currentUri = Uri.parse(web.window.location.href);
+  final newUri = currentUri.replace(
+    queryParameters: params.isEmpty ? null : params,
+  );
+  web.window.history.replaceState(null, '', newUri.toString());
+}

lib/shared/components/data_grid/data_grid_column.dart

@@ -45,6 +45,7 @@ enum DataGridColumnAlignment {
 /// Column definition for DataGrid.
 class DataGridColumn<T> {
   const DataGridColumn({
+    required this.id,
     required this.header,
     required this.valueBuilder,
     this.cellBuilder,
@@ -58,6 +59,9 @@ class DataGridColumn<T> {
     this.tooltip,
   });
 
+  /// Unique identifier for this column (used in URL deep-linking).
+  final String id;
+
   /// Column header text.
   final String header;
 

lib/shared/components/data_grid/data_grid_provider.dart

@@ -15,9 +15,15 @@ class DataGridController<T> extends StateNotifier<DataGridState<T>> {
     required this.source,
     required this.config,
     required this.idSelector,
+    String? initialSearch,
+    int? initialSortColumnIndex,
+    bool? initialSortDescending,
   }) : super(DataGridState<T>(
-          sortColumnIndex: config.defaultSortColumn,
+          searchQuery: initialSearch ?? '',
-          sortDescending: config.defaultSortDescending,
+          sortColumnIndex:
+              initialSortColumnIndex ?? config.defaultSortColumn,
+          sortDescending:
+              initialSortDescending ?? config.defaultSortDescending,
         )) {
     // Initial load
     _load();
@@ -29,8 +35,13 @@ class DataGridController<T> extends StateNotifier<DataGridState<T>> {
   /// Grid configuration.
   final DataGridConfig<T> config;
 
-  /// Function to extract unique ID from an item.
+  /// Function to extract unique ID from an item (used for selection and URL deep-linking).
-  final Object Function(T item) idSelector;
+  ///
+  /// Returns a unique string identifier for each row. Can be:
+  /// - A simple ID field: `(item) => item.id.toString()`
+  /// - A combination of fields: `(item) => '${item.name}_${item.type}'`
+  /// - Any unique identifier suitable for URLs
+  final String Function(T item) idSelector;
 
   /// Debounce timer for search.
   Timer? _searchDebounce;
@@ -185,7 +196,7 @@ class DataGridController<T> extends StateNotifier<DataGridState<T>> {
     if (!config.rowsSelectable) return;
 
     final id = idSelector(item);
-    final newSelection = Set<Object>.from(state.selectedIds);
+    final newSelection = Set<String>.from(state.selectedIds);
 
     if (newSelection.contains(id)) {
       newSelection.remove(id);
@@ -287,17 +298,35 @@ class DataGridController<T> extends StateNotifier<DataGridState<T>> {
 ///   idSelector: (c) => c.id,
 /// );
 /// ```
+///
+/// For URL deep-linking, pass initial state from URL params:
+/// ```dart
+/// final gridProvider = dataGridProvider<Container>(
+///   source: source,
+///   config: config,
+///   idSelector: (c) => c.id,
+///   initialSearch: urlState.search,
+///   initialSortColumnIndex: _columnIndexForId(urlState.sortColumn),
+///   initialSortDescending: urlState.sortDescending,
+/// );
+/// ```
 StateNotifierProvider<DataGridController<T>, DataGridState<T>>
     dataGridProvider<T>({
   required DataGridSource<T> source,
   required DataGridConfig<T> config,
-  required Object Function(T) idSelector,
+  required String Function(T) idSelector,
+  String? initialSearch,
+  int? initialSortColumnIndex,
+  bool? initialSortDescending,
 }) {
   return StateNotifierProvider<DataGridController<T>, DataGridState<T>>(
     (ref) => DataGridController<T>(
       source: source,
       config: config,
       idSelector: idSelector,
+      initialSearch: initialSearch,
+      initialSortColumnIndex: initialSortColumnIndex,
+      initialSortDescending: initialSortDescending,
     ),
   );
 }

lib/shared/components/data_grid/data_grid_state.dart

@@ -31,7 +31,7 @@ sealed class DataGridState<T> with _$DataGridState<T> {
     @Default(false) bool sortDescending,
 
     /// Currently selected item IDs (if selectable).
-    @Default({}) Set<Object> selectedIds,
+    @Default({}) Set<String> selectedIds,
 
     /// Current page (for paginated mode).
     @Default(0) int currentPage,

lib/shared/layouts/app_scaffold.dart

@@ -4,9 +4,7 @@ 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/config/app_config.dart';
-import 'package:tatlock_ui/features/control_room/router.dart';
+import 'package:tatlock_ui/routing/room_registry.dart';
-import 'package:tatlock_ui/features/security/router.dart';
-import 'package:tatlock_ui/routing/app_router.dart';
 import 'package:tatlock_ui/shared/layouts/widgets/top_header_bar.dart';
 
 /// Main application scaffold with top header navigation.
@@ -217,22 +215,13 @@ class _AppScaffoldState extends ConsumerState<AppScaffold> {
 
   int _selectedIndex(BuildContext context) {
     final location = GoRouterState.of(context).matchedLocation;
-
+    return roomRegistry.indexOfRoute(location);
-    if (location.startsWith(ControlRoomRoutes.base)) return 1;
-    if (location.startsWith(SecurityRoutes.base)) return 2;
-    if (location.startsWith(AppRoutes.parlor)) return 3;
-    // Settings is no longer in main nav (accessed via Profile dropdown)
-    return 0; // Front Hall
   }
 
   void _onNavSelected(BuildContext context, int index) {
-    final route = switch (index) {
+    final rooms = roomRegistry.all;
-      0 => AppRoutes.frontHall,
+    if (index >= 0 && index < rooms.length) {
-      1 => ControlRoomRoutes.containers,
+      context.go(rooms[index].defaultRoute);
-      2 => SecurityRoutes.users,
+    }
-      3 => AppRoutes.parlor,
-      _ => AppRoutes.frontHall,
-    };
-    context.go(route);
   }
 }

lib/shared/layouts/widgets/nav_panel.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:tatlock_ui/core/semantics/semantic_ids.dart';
 
 import 'panel_header.dart';
 
@@ -199,17 +200,22 @@ class _NavTile extends StatelessWidget {
     final colorScheme = Theme.of(context).colorScheme;
     final textTheme = Theme.of(context).textTheme;
 
-    return Padding(
+    return Semantics(
-      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
+      identifier: NavSemantics.item(item.id),
-      child: Material(
+      label: item.label,
-        color: isSelected
+      button: true,
-            ? colorScheme.primaryContainer.withValues(alpha: 0.4)
+      selected: isSelected,
-            : Colors.transparent,
+      child: Padding(
-        borderRadius: BorderRadius.circular(8),
+        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
-        child: InkWell(
+        child: Material(
-          onTap: onTap,
+          color: isSelected
+              ? colorScheme.primaryContainer.withValues(alpha: 0.4)
+              : Colors.transparent,
           borderRadius: BorderRadius.circular(8),
-          child: Padding(
+          child: InkWell(
+            onTap: onTap,
+            borderRadius: BorderRadius.circular(8),
+            child: Padding(
             padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
             child: Row(
               children: [
@@ -258,6 +264,7 @@ class _NavTile extends StatelessWidget {
           ),
         ),
       ),
+      ),
     );
   }
 }

lib/shared/layouts/widgets/profile_dropdown.dart

@@ -1,7 +1,11 @@
+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/semantics/semantic_ids.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,90 +17,213 @@ 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(
-      data: (auth) => PopupMenuButton<String>(
+      data: (auth) => Semantics(
-        offset: const Offset(0, 48),
+        identifier: ProfileSemantics.button,
-        shape: RoundedRectangleBorder(
+        label: 'Profile menu',
-          borderRadius: BorderRadius.circular(8),
+        button: true,
-        ),
+        child: PopupMenuButton<String>(
-        child: Tooltip(
+          offset: const Offset(0, 48),
-          message: auth.isAuthenticated ? auth.userName ?? 'User' : 'Guest',
+          shape: RoundedRectangleBorder(
-          child: CircleAvatar(
+            borderRadius: BorderRadius.circular(8),
-            radius: 18,
+          ),
-            backgroundColor: colorScheme.primaryContainer,
+          child: Tooltip(
-            child: auth.isAuthenticated
+            message: auth.isAuthenticated ? auth.userName ?? 'User' : 'Guest',
-                ? Text(
+            child: CircleAvatar(
-                    _getInitials(auth.userName),
+              radius: 18,
-                    style: TextStyle(
+              backgroundColor: colorScheme.primaryContainer,
+              child: auth.isAuthenticated
+                  ? Text(
+                      _getInitials(auth.userName),
+                      style: TextStyle(
+                        color: colorScheme.onPrimaryContainer,
+                        fontWeight: FontWeight.w500,
+                      ),
+                    )
+                  : Icon(
+                      Icons.person_outline,
+                      size: 20,
                       color: colorScheme.onPrimaryContainer,
-                      fontWeight: FontWeight.w500,
                     ),
-                  )
-                : Icon(
-                    Icons.person_outline,
-                    size: 20,
-                    color: colorScheme.onPrimaryContainer,
-                  ),
-          ),
-        ),
-        itemBuilder: (context) => [
-          // User info header (non-selectable)
-          PopupMenuItem<String>(
-            enabled: false,
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Text(
-                  auth.isAuthenticated ? auth.userName ?? 'User' : 'Guest',
-                  style: Theme.of(context).textTheme.titleSmall,
-                ),
-                if (auth.userEmail != null)
-                  Text(
-                    auth.userEmail!,
-                    style: Theme.of(context).textTheme.bodySmall?.copyWith(
-                          color: colorScheme.onSurfaceVariant,
-                        ),
-                  ),
-              ],
             ),
           ),
-          const PopupMenuDivider(),
+          itemBuilder: (context) => [
-
+            // User info header (non-selectable)
-          // Settings
+            PopupMenuItem<String>(
-          const PopupMenuItem<String>(
+              enabled: false,
-            value: 'settings',
+              child: Column(
-            child: Row(
+                crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Icon(Icons.settings_outlined, size: 20),
-                SizedBox(width: 12),
-                Text('Settings'),
-              ],
-            ),
-          ),
-
-          // Logout (only if authenticated)
-          if (auth.isAuthenticated)
-            const PopupMenuItem<String>(
-              value: 'logout',
-              child: Row(
                 children: [
-                  Icon(Icons.logout, size: 20),
+                  Text(
-                  SizedBox(width: 12),
+                    auth.isAuthenticated ? auth.userName ?? 'User' : 'Guest',
-                  Text('Logout'),
+                    style: Theme.of(context).textTheme.titleSmall,
+                  ),
+                  if (auth.userEmail != null)
+                    Text(
+                      auth.userEmail!,
+                      style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                            color: colorScheme.onSurfaceVariant,
+                          ),
+                    ),
                 ],
               ),
             ),
-        ],
+            const PopupMenuDivider(),
-        onSelected: (value) {
+
-          switch (value) {
+            // Settings
-            case 'settings':
+            PopupMenuItem<String>(
-              context.go(AppRoutes.settings);
+              value: 'settings',
-            case 'logout':
+              child: Semantics(
-              ref.read(authProvider.notifier).signOut();
+                identifier: ProfileSemantics.settings,
-          }
+                child: const Row(
-        },
+                  children: [
+                    Icon(Icons.settings_outlined, size: 20),
+                    SizedBox(width: 12),
+                    Text('Settings'),
+                  ],
+                ),
+              ),
+            ),
+
+            // 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: Semantics(
+                identifier: ProfileSemantics.themeSystem,
+                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: Semantics(
+                identifier: ProfileSemantics.themeLight,
+                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: Semantics(
+                identifier: ProfileSemantics.themeDark,
+                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)
+              PopupMenuItem<String>(
+                value: 'logout',
+                child: Semantics(
+                  identifier: ProfileSemantics.logout,
+                  child: const Row(
+                    children: [
+                      Icon(Icons.logout, size: 20),
+                      SizedBox(width: 12),
+                      Text('Logout'),
+                    ],
+                  ),
+                ),
+              ),
+          ],
+          onSelected: (value) {
+            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();
+            }
+          },
+        ),
       ),
       loading: () => const CircleAvatar(
         radius: 18,
@@ -126,4 +253,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');
+    }
+  }
 }

lib/shared/layouts/widgets/top_header_bar.dart

@@ -1,6 +1,8 @@
 import 'dart:math';
 
 import 'package:flutter/material.dart';
+import 'package:tatlock_ui/core/semantics/semantic_ids.dart';
+import 'package:tatlock_ui/routing/room_registry.dart';
 
 import 'profile_dropdown.dart';
 
@@ -23,28 +25,8 @@ class TopHeaderBar extends StatelessWidget {
   static const double _logoCircleRadius = (_logoSize + _logoMargin * 2) / 2; // 64px
   static const double _bulgeFraction = 0.20; // 20% of circle below header line
 
-  static const _rooms = [
+  /// Get rooms from the registry.
-    _RoomDestination(
+  List<RoomDefinition> get _rooms => roomRegistry.all;
-      icon: Icons.door_front_door_outlined,
-      selectedIcon: Icons.door_front_door,
-      label: 'Front Hall',
-    ),
-    _RoomDestination(
-      icon: Icons.dns_outlined,
-      selectedIcon: Icons.dns,
-      label: 'Control Room',
-    ),
-    _RoomDestination(
-      icon: Icons.security_outlined,
-      selectedIcon: Icons.security,
-      label: 'Security',
-    ),
-    _RoomDestination(
-      icon: Icons.lightbulb_outline,
-      selectedIcon: Icons.lightbulb,
-      label: 'Parlor',
-    ),
-  ];
 
   @override
   Widget build(BuildContext context) {
@@ -120,24 +102,31 @@ class TopHeaderBar extends StatelessWidget {
 
   List<Widget> _buildRoomTabs(BuildContext context) {
     final colorScheme = Theme.of(context).colorScheme;
+    final rooms = _rooms;
 
-    return List.generate(_rooms.length, (index) {
+    return List.generate(rooms.length, (index) {
-      final room = _rooms[index];
+      final room = rooms[index];
       final isSelected = index == selectedIndex;
 
       return Padding(
         padding: const EdgeInsets.symmetric(horizontal: 4),
-        child: Tooltip(
+        child: Semantics(
-          message: room.label,
+          identifier: RoomTabSemantics.forIndex(index),
-          child: IconButton(
+          label: room.label,
-            icon: Icon(
+          button: true,
-              isSelected ? room.selectedIcon : room.icon,
+          selected: isSelected,
-              color: isSelected ? colorScheme.primary : colorScheme.onSurface,
+          child: Tooltip(
-            ),
+            message: room.label,
-            onPressed: () => onRoomSelected(index),
+            child: IconButton(
-            style: IconButton.styleFrom(
+              icon: Icon(
-              backgroundColor:
+                isSelected ? room.selectedIcon : room.icon,
-                  isSelected ? colorScheme.primaryContainer : null,
+                color: isSelected ? colorScheme.primary : colorScheme.onSurface,
+              ),
+              onPressed: () => onRoomSelected(index),
+              style: IconButton.styleFrom(
+                backgroundColor:
+                    isSelected ? colorScheme.primaryContainer : null,
+              ),
             ),
           ),
         ),
@@ -250,14 +239,3 @@ class _HeaderPainter extends CustomPainter {
   }
 }
 
-class _RoomDestination {
-  const _RoomDestination({
-    required this.icon,
-    required this.selectedIcon,
-    required this.label,
-  });
-
-  final IconData icon;
-  final IconData selectedIcon;
-  final String label;
-}

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.11+1
+version: 1.4.0+1
 
 environment:
   sdk: ^3.10.4

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>