chore: bump version to 0.3.1

- Add multi-stage Dockerfile (Flutter build → nginx:alpine)
- Add nginx.conf with SPA routing, gzip, and caching
- Add Gitea workflow for release-triggered builds
- Document release procedure in AGENTS.md

Deploys to port 8092, auto-updates via Watchtower.

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

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

.gitea/workflows/build.yml

@@ -0,0 +1,34 @@
+name: Build and Push
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Login to Gitea Registry
+        uses: docker/login-action@v3
+        with:
+          registry: git.schweitz.internal
+          username: ${{ secrets.REGISTRY_USER }}
+          password: ${{ secrets.REGISTRY_PASSWORD }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          tags: |
+            git.schweitz.internal/jpmschweitzer/tatlock-ui:latest
+            git.schweitz.internal/jpmschweitzer/tatlock-ui:${{ github.ref_name }}
+
+      - name: Trigger Watchtower update
+        if: success()
+        run: |
+          curl -sf -H "Authorization: Bearer ${{ secrets.WATCHTOWER_TOKEN }}" \
+            http://watchtower:8080/v1/update

.gitignore

@@ -119,3 +119,4 @@ secrets/
 # Uploads (reference images, not tracked)
 uploads/
 logs/
+.vscode/launch.json

AGENTS.md

@@ -42,7 +42,36 @@ This document contains instructions and documentation references for AI assistan
     * Tag after updating `pubspec.yaml` version and CHANGELOG
     * Push tags with `git push --tags`
 
+### 🚀 Release Procedure
+
+This project uses version-tag-based CI/CD. Releases trigger automated Docker builds and deployments.
+
+**Release Steps:**
+
+1. Update version in `pubspec.yaml` (bump major.minor.patch, not build number)
+2. Update `CHANGELOG.md` with changes under `## [x.x.x] - YYYY-MM-DD`
+3. Commit changes: `git commit -m "chore: release vX.X.X"`
+4. Create git tag: `git tag vX.X.X`
+5. Push with tags: `git push origin master --tags`
+6. Create release in Gitea UI (git.schweitz.net → Releases → New Release)
+   * Select the tag
+   * Add release notes (can copy from CHANGELOG)
+   * **Publish** the release (this triggers CI/CD)
+
+**What happens on release:**
+
+* Gitea CI builds Flutter web app in Docker
+* Image pushed to `git.schweitz.internal/jpmschweitzer/tatlock-ui:latest` and `:vX.X.X`
+* Watchtower detects new image and auto-updates running container
+* App available at `http://tower:8092` (and eventually `home.schweitz.net`)
+
+**Rollback:**
+
+* In Portainer, update image tag to previous version (e.g., `:v0.2.0`)
+* Or: `docker pull git.schweitz.internal/jpmschweitzer/tatlock-ui:v0.2.0`
+
 ### 🧪 Testing Requirements
+
 * **Always add tests for new code before committing.** No exceptions.
 * Tests should cover the happy path and key edge cases.
 * Run `flutter test` before committing to ensure all tests pass.
@@ -50,5 +79,14 @@ This document contains instructions and documentation references for AI assistan
 * Code coverage should not decrease with new commits.
 
 ### 📝 Changelog Maintenance
+
 * **Update `CHANGELOG.md`** with every user-facing change.
-* Format: `## [Unreleased] - YYYY-MM-DD` followed by `### Added`, `### Changed`, or `### Fixed`.
+* Format: `## [Unreleased] - YYYY-MM-DD` followed by `### Added`, `### Changed`, or `### Fixed`.
+
+### 🎨 UI Patterns (MUST READ BEFORE CHANGES)
+
+* **Before modifying the widget tree**, read `docs/UI_LAYOUT.md` to understand established patterns.
+* Investigate existing implementations in the codebase before creating new components.
+* **DO NOT** reinvent wheels - check if shared components already exist in `lib/shared/components/`.
+* Look at similar features for reference patterns (e.g., how other list views, forms, or CRUD screens are built).
+* Deviating from established patterns creates inconsistency and technical debt.

Dockerfile

@@ -0,0 +1,41 @@
+# Stage 1: Build Flutter web application
+FROM ghcr.io/cirruslabs/flutter:stable AS builder
+
+WORKDIR /app
+
+# Copy dependency files first for better caching
+COPY pubspec.yaml pubspec.lock ./
+
+# Get dependencies
+RUN flutter pub get
+
+# Copy the rest of the application
+COPY . .
+
+# Generate code with build_runner
+RUN dart run build_runner build --delete-conflicting-outputs
+
+# Build for web release
+RUN flutter build web --release
+
+# Stage 2: Serve with nginx
+FROM nginx:alpine
+
+# Install curl for healthcheck
+RUN apk add --no-cache curl
+
+# Copy custom nginx configuration
+COPY nginx.conf /etc/nginx/nginx.conf
+
+# Copy built web app to nginx html directory
+COPY --from=builder /app/build/web /usr/share/nginx/html
+
+# Expose port 80
+EXPOSE 80
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
+  CMD curl -f http://localhost:80/ || exit 1
+
+# Run nginx in foreground
+CMD ["nginx", "-g", "daemon off;"]

analysis_options.yaml

@@ -9,6 +9,12 @@
 # packages, and plugins designed to encourage good coding practices.
 include: package:flutter_lints/flutter.yaml
 
+analyzer:
+  errors:
+    # Freezed uses @JsonKey on constructor parameters which triggers this warning
+    # but is the correct pattern for freezed classes
+    invalid_annotation_target: ignore
+
 linter:
   # The lint rules applied to this project can be customized in the
   # section below to disable rules from the `package:flutter_lints/flutter.yaml`

lib/app.dart

@@ -12,7 +12,7 @@ class TatlockApp extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final router = ref.watch(appRouterProvider);
-    final themeAsync = ref.watch(themeNotifierProvider);
+    final themeAsync = ref.watch(themeProvider);
 
     // Get theme mode, defaulting to system while loading
     final themeMode = switch (themeAsync) {

lib/core/api/api_client.dart

@@ -7,7 +7,7 @@ part 'api_client.g.dart';
 
 /// Provides the Dio instance for Core API.
 @riverpod
-Dio coreApiClient(CoreApiClientRef ref) {
+Dio coreApiClient(Ref ref) {
   final dio = Dio(
     BaseOptions(
       baseUrl: AppConfig.coreApiUrl,
@@ -31,7 +31,7 @@ Dio coreApiClient(CoreApiClientRef ref) {
 
 /// Provides the Dio instance for Tatlock API.
 @riverpod
-Dio tatlockApiClient(TatlockApiClientRef ref) {
+Dio tatlockApiClient(Ref ref) {
   final dio = Dio(
     BaseOptions(
       baseUrl: AppConfig.tatlockApiUrl,

lib/core/api/api_interceptors.dart

@@ -22,7 +22,7 @@ class AuthInterceptor extends Interceptor {
       return;
     }
 
-    final authState = _ref.read(authNotifierProvider);
+    final authState = _ref.read(authProvider);
 
     authState.whenData((auth) {
       if (auth.isAuthenticated && auth.accessToken != null) {
@@ -43,7 +43,7 @@ class AuthInterceptor extends Interceptor {
 
     if (err.response?.statusCode == 401) {
       // Token expired - trigger re-authentication
-      _ref.read(authNotifierProvider.notifier).signOut();
+      _ref.read(authProvider.notifier).signOut();
     }
     handler.next(err);
   }

lib/core/auth/auth_state.dart

@@ -4,7 +4,7 @@ part 'auth_state.freezed.dart';
 
 /// Authentication state.
 @freezed
-class AuthState with _$AuthState {
+sealed class AuthState with _$AuthState {
   const factory AuthState({
     @Default(false) bool isAuthenticated,
     String? accessToken,

lib/features/control_room/containers/data/datasources/containers_datasource.dart

@@ -1,5 +1,4 @@
 import 'package:dio/dio.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 import 'package:tatlock_ui/core/api/api_client.dart';
 import 'package:tatlock_ui/features/control_room/containers/data/models/container_model.dart';

lib/features/control_room/containers/data/models/container_model.dart

@@ -6,7 +6,7 @@ part 'container_model.g.dart';
 
 /// Container data model for API serialization.
 @freezed
-class ContainerModel with _$ContainerModel {
+sealed class ContainerModel with _$ContainerModel {
   const factory ContainerModel({
     @JsonKey(name: 'Id') required String id,
     @JsonKey(name: 'Names') required List<String> names,
@@ -68,7 +68,7 @@ class ContainerModel with _$ContainerModel {
 
 /// Port mapping model.
 @freezed
-class PortModel with _$PortModel {
+sealed class PortModel with _$PortModel {
   const factory PortModel({
     @JsonKey(name: 'IP') String? ip,
     @JsonKey(name: 'PrivatePort') required int privatePort,
@@ -93,7 +93,7 @@ class PortModel with _$PortModel {
 
 /// Mount model.
 @freezed
-class MountModel with _$MountModel {
+sealed class MountModel with _$MountModel {
   const factory MountModel({
     @JsonKey(name: 'Type') required String type,
     @JsonKey(name: 'Source') required String source,
@@ -119,7 +119,7 @@ class MountModel with _$MountModel {
 
 /// Network settings model.
 @freezed
-class NetworkSettingsModel with _$NetworkSettingsModel {
+sealed class NetworkSettingsModel with _$NetworkSettingsModel {
   const factory NetworkSettingsModel({
     @JsonKey(name: 'Networks') @Default({}) Map<String, dynamic> networks,
   }) = _NetworkSettingsModel;

lib/features/control_room/containers/data/repositories/container_repository_impl.dart

@@ -77,7 +77,7 @@ class ContainerRepositoryImpl implements ContainerRepository {
 
 /// Provides the container repository.
 @riverpod
-ContainerRepository containerRepository(ContainerRepositoryRef ref) {
+ContainerRepository containerRepository(Ref ref) {
   final datasource = ref.watch(containersDatasourceProvider);
   return ContainerRepositoryImpl(datasource);
 }

lib/features/control_room/containers/domain/entities/container.dart

@@ -4,7 +4,7 @@ part 'container.freezed.dart';
 
 /// Docker container entity.
 @freezed
-class Container with _$Container {
+sealed class Container with _$Container {
   const factory Container({
     /// Container ID (short form).
     required String id,
@@ -122,7 +122,7 @@ enum ContainerState {
 
 /// Port mapping configuration.
 @freezed
-class PortMapping with _$PortMapping {
+sealed class PortMapping with _$PortMapping {
   const factory PortMapping({
     /// Host IP (usually 0.0.0.0).
     String? hostIp,
@@ -149,7 +149,7 @@ class PortMapping with _$PortMapping {
 
 /// Volume mount configuration.
 @freezed
-class VolumeMount with _$VolumeMount {
+sealed class VolumeMount with _$VolumeMount {
   const factory VolumeMount({
     /// Mount type (bind, volume, tmpfs).
     required String type,

lib/features/control_room/containers/presentation/pages/containers_list_page.dart

@@ -1,17 +1,180 @@
 import 'package:flutter/material.dart' hide Container;
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:tatlock_ui/features/control_room/containers/domain/entities/container.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/shared/components/data_grid/adapters/core_api_source.dart';
+import 'package:tatlock_ui/shared/components/data_grid/data_grid_exports.dart';
+
+/// Container data class for DataGrid display.
+class ContainerData {
+  ContainerData({
+    required this.id,
+    required this.fullId,
+    required this.name,
+    required this.image,
+    required this.state,
+    required this.status,
+    required this.ports,
+  });
+
+  factory ContainerData.fromJson(Map<String, dynamic> json) {
+    final ports = (json['ports'] as List<dynamic>?)
+            ?.map((p) => ContainerPort.fromJson(p as Map<String, dynamic>))
+            .toList() ??
+        [];
+
+    return ContainerData(
+      id: json['id'] as String,
+      fullId: json['full_id'] as String? ?? json['id'] as String,
+      name: json['name'] as String,
+      image: json['image'] as String,
+      state: json['state'] as String,
+      status: json['status'] as String,
+      ports: ports,
+    );
+  }
+
+  final String id;
+  final String fullId;
+  final String name;
+  final String image;
+  final String state;
+  final String status;
+  final List<ContainerPort> ports;
+
+  bool get canStart => state == 'exited' || state == 'created';
+  bool get canStop => state == 'running';
+  bool get canRestart => state == 'running';
+}
+
+class ContainerPort {
+  ContainerPort({required this.privatePort, this.publicPort, this.type = 'tcp'});
+
+  factory ContainerPort.fromJson(Map<String, dynamic> json) => ContainerPort(
+        privatePort: json['private_port'] as int? ?? json['PrivatePort'] as int? ?? 0,
+        publicPort: json['public_port'] as int? ?? json['PublicPort'] as int?,
+        type: json['type'] as String? ?? json['Type'] as String? ?? 'tcp',
+      );
+
+  final int privatePort;
+  final int? publicPort;
+  final String type;
+
+  String get formatted => publicPort != null ? '$publicPort:$privatePort' : '$privatePort';
+}
 
 /// Page displaying the list of containers using DataGrid.
-class ContainersListPage extends ConsumerWidget {
+class ContainersListPage extends ConsumerStatefulWidget {
   const ContainersListPage({super.key});
 
   @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final containersAsync = ref.watch(containersProvider);
+  ConsumerState<ContainersListPage> createState() => _ContainersListPageState();
+}
+
+class _ContainersListPageState extends ConsumerState<ContainersListPage> {
+  late final StateNotifierProvider<DataGridController<ContainerData>,
+      DataGridState<ContainerData>> _gridProvider;
+
+  @override
+  void initState() {
+    super.initState();
+    final dio = ref.read(coreApiClientProvider);
+    final source = CoreApiDataSource<ContainerData>(
+      dio: dio,
+      endpoint: '/infrastructure/containers',
+      fromJson: ContainerData.fromJson,
+    );
+
+    _gridProvider = dataGridProvider<ContainerData>(
+      source: source,
+      config: _buildConfig(),
+      idSelector: (c) => c.id,
+    );
+  }
+
+  DataGridConfig<ContainerData> _buildConfig() {
+    return DataGridConfig<ContainerData>(
+      columns: [
+        DataGridColumn<ContainerData>(
+          header: 'Container',
+          valueBuilder: (c) => c.name,
+          sortable: true,
+          searchable: true,
+          width: const DataGridColumnWidth.flex(2),
+          cellBuilder: (context, c) => _ContainerCell(container: c),
+        ),
+        DataGridColumn<ContainerData>(
+          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>(
+          header: 'Status',
+          valueBuilder: (c) => c.status,
+          width: const DataGridColumnWidth.fixed(140),
+          alignment: DataGridColumnAlignment.end,
+        ),
+      ],
+      actions: [
+        DataGridAction<ContainerData>(
+          icon: Icons.play_arrow,
+          label: 'Start',
+          onTap: (c) async => _handleAction(c, 'start'),
+          showWhen: (c) => c.canStart,
+        ),
+        DataGridAction<ContainerData>(
+          icon: Icons.stop,
+          label: 'Stop',
+          onTap: (c) async => _handleAction(c, 'stop'),
+          showWhen: (c) => c.canStop,
+        ),
+        DataGridAction<ContainerData>(
+          icon: Icons.refresh,
+          label: 'Restart',
+          onTap: (c) async => _handleAction(c, 'restart'),
+          showWhen: (c) => c.canRestart,
+        ),
+        DataGridAction<ContainerData>(
+          icon: Icons.article,
+          label: 'View Logs',
+          onTap: (c) async => _showLogs(c),
+        ),
+      ],
+      enableSearch: true,
+      searchHint: 'Search containers...',
+      showHeader: true,
+      showFooter: true,
+    );
+  }
+
+  Future<void> _handleAction(ContainerData container, String action) async {
+    final actions = ref.read(containerActionsProvider.notifier);
+    switch (action) {
+      case 'start':
+        await actions.start(container.fullId);
+      case 'stop':
+        await actions.stop(container.fullId);
+      case 'restart':
+        await actions.restart(container.fullId);
+    }
+    // Refresh the grid after action
+    ref.read(_gridProvider.notifier).refresh();
+  }
+
+  Future<void> _showLogs(ContainerData container) async {
+    if (!mounted) return;
+    showContainerLogs(
+      context,
+      containerId: container.fullId,
+      containerName: container.name,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
     final colorScheme = Theme.of(context).colorScheme;
 
     // Listen for container action results to show snackbars
@@ -53,343 +216,87 @@ class ContainersListPage extends ConsumerWidget {
       }
     });
 
-    return containersAsync.when(
-      loading: () => const Center(child: CircularProgressIndicator()),
-      error: (error, stack) => Center(
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            Icon(
-              Icons.error_outline,
-              size: 48,
-              color: colorScheme.error,
-            ),
-            const SizedBox(height: 16),
-            const Text('Failed to load containers'),
-            const SizedBox(height: 8),
-            Text(
-              error.toString(),
-              style: TextStyle(color: colorScheme.outline),
-            ),
-            const SizedBox(height: 16),
-            FilledButton.icon(
-              onPressed: () => ref.invalidate(containersProvider),
-              icon: const Icon(Icons.refresh),
-              label: const Text('Retry'),
-            ),
-          ],
-        ),
-      ),
-      data: (containers) => _ContainersList(
-        containers: containers,
-        onAction: (container, action) => _handleAction(ref, container, action),
-        onViewLogs: (c) => showContainerLogs(
-          context,
-          containerId: c.fullId,
-          containerName: c.name,
-        ),
-        onRefresh: () => ref.invalidate(containersProvider),
-      ),
-    );
-  }
-
-  void _handleAction(WidgetRef ref, Container container, String action) {
-    final actions = ref.read(containerActionsProvider.notifier);
-    switch (action) {
-      case 'start':
-        actions.start(container.fullId);
-      case 'stop':
-        actions.stop(container.fullId);
-      case 'restart':
-        actions.restart(container.fullId);
-    }
-  }
-}
-
-class _ContainersList extends StatefulWidget {
-  const _ContainersList({
-    required this.containers,
-    required this.onAction,
-    required this.onViewLogs,
-    required this.onRefresh,
-  });
-
-  final List<Container> containers;
-  final void Function(Container, String) onAction;
-  final void Function(Container) onViewLogs;
-  final VoidCallback onRefresh;
-
-  @override
-  State<_ContainersList> createState() => _ContainersListState();
-}
-
-class _ContainersListState extends State<_ContainersList> {
-  final _searchController = TextEditingController();
-  String _searchQuery = '';
-
-  @override
-  void dispose() {
-    _searchController.dispose();
-    super.dispose();
-  }
-
-  List<Container> get _filteredContainers {
-    if (_searchQuery.isEmpty) return widget.containers;
-    final query = _searchQuery.toLowerCase();
-    return widget.containers.where((c) {
-      return c.name.toLowerCase().contains(query) ||
-          c.image.toLowerCase().contains(query) ||
-          c.status.toLowerCase().contains(query);
-    }).toList();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    final colorScheme = Theme.of(context).colorScheme;
-    final filtered = _filteredContainers;
-
-    return Column(
-      children: [
-        // Toolbar with search
-        Padding(
-          padding: const EdgeInsets.all(16),
-          child: Row(
-            children: [
-              Text(
-                '${filtered.length} of ${widget.containers.length} containers',
-                style: Theme.of(context).textTheme.titleSmall?.copyWith(
-                      color: colorScheme.onSurfaceVariant,
-                    ),
-              ),
-              const Spacer(),
-              SizedBox(
-                width: 250,
-                child: TextField(
-                  controller: _searchController,
-                  decoration: InputDecoration(
-                    hintText: 'Search containers...',
-                    prefixIcon: const Icon(Icons.search, size: 20),
-                    suffixIcon: _searchQuery.isNotEmpty
-                        ? IconButton(
-                            icon: const Icon(Icons.clear, size: 18),
-                            onPressed: () {
-                              _searchController.clear();
-                              setState(() => _searchQuery = '');
-                            },
-                          )
-                        : null,
-                    isDense: true,
-                    contentPadding: const EdgeInsets.symmetric(
-                      horizontal: 12,
-                      vertical: 8,
-                    ),
-                    border: OutlineInputBorder(
-                      borderRadius: BorderRadius.circular(8),
-                    ),
-                  ),
-                  onChanged: (value) => setState(() => _searchQuery = value),
-                ),
-              ),
-              const SizedBox(width: 8),
-              IconButton(
-                icon: const Icon(Icons.refresh),
-                tooltip: 'Refresh',
-                onPressed: widget.onRefresh,
-              ),
-            ],
-          ),
-        ),
-        // Container list or empty state
-        Expanded(
-          child: filtered.isEmpty
-              ? Center(
-                  child: Column(
-                    mainAxisSize: MainAxisSize.min,
-                    children: [
-                      Icon(
-                        _searchQuery.isEmpty
-                            ? Icons.inbox_outlined
-                            : Icons.search_off,
-                        size: 64,
-                        color: colorScheme.outline,
-                      ),
-                      const SizedBox(height: 16),
-                      Text(
-                        _searchQuery.isEmpty
-                            ? 'No containers found'
-                            : 'No containers match "$_searchQuery"',
-                        style: Theme.of(context).textTheme.titleMedium?.copyWith(
-                              color: colorScheme.onSurfaceVariant,
-                            ),
-                      ),
-                      if (_searchQuery.isNotEmpty) ...[
-                        const SizedBox(height: 8),
-                        TextButton(
-                          onPressed: () {
-                            _searchController.clear();
-                            setState(() => _searchQuery = '');
-                          },
-                          child: const Text('Clear search'),
-                        ),
-                      ],
-                    ],
-                  ),
-                )
-              : ListView.builder(
-                  itemCount: filtered.length,
-                  itemBuilder: (context, index) {
-                    final container = filtered[index];
-                    return _ContainerListTile(
-                      container: container,
-                      onAction: (action) => widget.onAction(container, action),
-                      onViewLogs: () => widget.onViewLogs(container),
-                    );
-                  },
-                ),
+    return DataGrid<ContainerData>(
+      provider: _gridProvider,
+      config: _buildConfig(),
+      idSelector: (c) => c.id,
+      toolbarActions: [
+        IconButton(
+          icon: const Icon(Icons.refresh),
+          tooltip: 'Refresh',
+          onPressed: () => ref.read(_gridProvider.notifier).refresh(),
         ),
       ],
     );
   }
 }
 
-class _ContainerListTile extends StatelessWidget {
-  const _ContainerListTile({
-    required this.container,
-    required this.onAction,
-    required this.onViewLogs,
-  });
+class _ContainerCell extends StatelessWidget {
+  const _ContainerCell({required this.container});
 
-  final Container container;
-  final void Function(String) onAction;
-  final VoidCallback onViewLogs;
+  final ContainerData container;
 
   @override
   Widget build(BuildContext context) {
     final colorScheme = Theme.of(context).colorScheme;
 
-    return Card(
-      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
-      child: Padding(
-        padding: const EdgeInsets.all(12),
-        child: Row(
-          children: [
-            // Status and name
-            Expanded(
-              flex: 2,
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Row(
-                    children: [
-                      ContainerStatusBadge(state: container.state),
-                      const SizedBox(width: 8),
-                      Expanded(
-                        child: Text(
-                          container.name,
-                          style: const TextStyle(fontWeight: FontWeight.w500),
-                          overflow: TextOverflow.ellipsis,
-                        ),
-                      ),
-                    ],
-                  ),
-                  const SizedBox(height: 4),
-                  Text(
-                    container.image,
-                    style: TextStyle(
-                      fontSize: 12,
-                      color: colorScheme.onSurfaceVariant,
-                    ),
-                    overflow: TextOverflow.ellipsis,
-                  ),
-                ],
+    return Row(
+      children: [
+        ContainerStatusBadge.fromString(container.state),
+        const SizedBox(width: 8),
+        Expanded(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Text(
+                container.name,
+                style: const TextStyle(fontWeight: FontWeight.w500),
+                overflow: TextOverflow.ellipsis,
               ),
-            ),
-            // Ports
-            if (container.ports.isNotEmpty)
-              Expanded(
-                child: Text(
-                  container.ports.map((p) => p.formatted).join(', '),
-                  style: TextStyle(
-                    fontSize: 12,
-                    color: colorScheme.onSurfaceVariant,
-                    fontFamily: 'monospace',
-                  ),
-                  overflow: TextOverflow.ellipsis,
-                ),
-              ),
-            // Status text
-            SizedBox(
-              width: 120,
-              child: Text(
-                container.status,
+              Text(
+                container.image,
                 style: TextStyle(
                   fontSize: 12,
                   color: colorScheme.onSurfaceVariant,
                 ),
-                textAlign: TextAlign.end,
+                overflow: TextOverflow.ellipsis,
               ),
-            ),
-            // Actions
-            const SizedBox(width: 8),
-            PopupMenuButton<String>(
-              icon: const Icon(Icons.more_vert),
-              tooltip: 'Actions',
-              onSelected: (action) {
-                if (action == 'logs') {
-                  onViewLogs();
-                } else {
-                  onAction(action);
-                }
-              },
-              itemBuilder: (context) => [
-                if (container.canStart)
-                  const PopupMenuItem(
-                    value: 'start',
-                    child: Row(
-                      children: [
-                        Icon(Icons.play_arrow, size: 18),
-                        SizedBox(width: 8),
-                        Text('Start'),
-                      ],
-                    ),
-                  ),
-                if (container.canStop)
-                  const PopupMenuItem(
-                    value: 'stop',
-                    child: Row(
-                      children: [
-                        Icon(Icons.stop, size: 18),
-                        SizedBox(width: 8),
-                        Text('Stop'),
-                      ],
-                    ),
-                  ),
-                if (container.canRestart)
-                  const PopupMenuItem(
-                    value: 'restart',
-                    child: Row(
-                      children: [
-                        Icon(Icons.refresh, size: 18),
-                        SizedBox(width: 8),
-                        Text('Restart'),
-                      ],
-                    ),
-                  ),
-                const PopupMenuItem(
-                  value: 'logs',
-                  child: Row(
-                    children: [
-                      Icon(Icons.article, size: 18),
-                      SizedBox(width: 8),
-                      Text('View Logs'),
-                    ],
-                  ),
-                ),
-              ],
-            ),
-          ],
+            ],
+          ),
         ),
+      ],
+    );
+  }
+}
+
+class _PortsCell extends StatelessWidget {
+  const _PortsCell({required this.ports});
+
+  final List<ContainerPort> ports;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    if (ports.isEmpty) {
+      return Text(
+        '-',
+        style: TextStyle(
+          fontSize: 12,
+          color: colorScheme.outline,
+        ),
+      );
+    }
+
+    return Text(
+      ports.map((p) => p.formatted).join(', '),
+      style: TextStyle(
+        fontSize: 12,
+        color: colorScheme.onSurfaceVariant,
+        fontFamily: 'monospace',
       ),
+      overflow: TextOverflow.ellipsis,
     );
   }
 }

lib/features/control_room/containers/presentation/providers/containers_provider.dart

@@ -7,14 +7,14 @@ part 'containers_provider.g.dart';
 
 /// Provides all containers.
 @riverpod
-Future<List<Container>> allContainers(AllContainersRef ref) async {
+Future<List<Container>> allContainers(Ref ref) async {
   final repository = ref.watch(containerRepositoryProvider);
   return repository.getContainers();
 }
 
 /// Provides containers filtered by the selected stack.
 @riverpod
-Future<List<Container>> containers(ContainersRef ref) async {
+Future<List<Container>> containers(Ref ref) async {
   final repository = ref.watch(containerRepositoryProvider);
   final selectedStack = ref.watch(selectedStackProvider);
 
@@ -27,7 +27,7 @@ Future<List<Container>> containers(ContainersRef ref) async {
 
 /// Provides a single container by ID.
 @riverpod
-Future<Container> container(ContainerRef ref, String id) async {
+Future<Container> container(Ref ref, String id) async {
   final repository = ref.watch(containerRepositoryProvider);
   return repository.getContainer(id);
 }
@@ -82,7 +82,7 @@ class ContainerActions extends _$ContainerActions {
 /// Container logs provider.
 @riverpod
 Future<String> containerLogs(
-  ContainerLogsRef ref,
+  Ref ref,
   String id, {
   int? tail = 100,
 }) async {

lib/features/control_room/containers/presentation/widgets/container_logs_viewer.dart

@@ -22,7 +22,6 @@ class ContainerLogsViewer extends ConsumerStatefulWidget {
 class _ContainerLogsViewerState extends ConsumerState<ContainerLogsViewer> {
   final _scrollController = ScrollController();
   int _tailLines = 100;
-  bool _autoScroll = true;
 
   @override
   void dispose() {

lib/features/control_room/containers/presentation/widgets/container_status_badge.dart

@@ -1,5 +1,23 @@
 import 'package:flutter/material.dart' hide Container;
-import 'package:tatlock_ui/features/control_room/containers/domain/entities/container.dart';
+
+/// Container state enum for status display.
+enum ContainerState {
+  created,
+  running,
+  paused,
+  restarting,
+  removing,
+  exited,
+  dead;
+
+  /// Parse a string to ContainerState.
+  static ContainerState fromString(String value) {
+    return ContainerState.values.firstWhere(
+      (s) => s.name == value.toLowerCase(),
+      orElse: () => ContainerState.exited,
+    );
+  }
+}
 
 /// Status badge for container state.
 class ContainerStatusBadge extends StatelessWidget {
@@ -9,6 +27,14 @@ class ContainerStatusBadge extends StatelessWidget {
     this.showLabel = true,
   });
 
+  /// Create badge from a string state value.
+  factory ContainerStatusBadge.fromString(String state, {bool showLabel = true}) {
+    return ContainerStatusBadge(
+      state: ContainerState.fromString(state),
+      showLabel: showLabel,
+    );
+  }
+
   final ContainerState state;
   final bool showLabel;
 

lib/features/control_room/npm/data/datasources/proxy_hosts_datasource.dart

@@ -1,5 +1,4 @@
 import 'package:dio/dio.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 import 'package:tatlock_ui/core/api/api_client.dart';
 import 'package:tatlock_ui/features/control_room/npm/data/models/proxy_host_model.dart';

lib/features/control_room/npm/data/models/proxy_host_model.dart

@@ -43,7 +43,7 @@ class IntOrBoolConverter implements JsonConverter<int, dynamic> {
 ///
 /// Maps to the NPM API response format via Core API.
 @freezed
-class ProxyHostModel with _$ProxyHostModel {
+sealed class ProxyHostModel with _$ProxyHostModel {
   const factory ProxyHostModel({
     required int id,
     @JsonKey(name: 'domain_names') required List<String> domainNames,
@@ -96,7 +96,7 @@ class ProxyHostModel with _$ProxyHostModel {
 
 /// Proxy location model.
 @freezed
-class ProxyLocationModel with _$ProxyLocationModel {
+sealed class ProxyLocationModel with _$ProxyLocationModel {
   const factory ProxyLocationModel({
     required String path,
     @JsonKey(name: 'forward_scheme') required String forwardScheme,
@@ -123,7 +123,7 @@ class ProxyLocationModel with _$ProxyLocationModel {
 ///
 /// This is a simpler model used for listing domains.
 @freezed
-class DomainInfoModel with _$DomainInfoModel {
+sealed class DomainInfoModel with _$DomainInfoModel {
   const factory DomainInfoModel({
     required String domain,
     required String service,

lib/features/control_room/npm/domain/entities/proxy_host.dart

@@ -4,7 +4,7 @@ part 'proxy_host.freezed.dart';
 
 /// NPM proxy host entity representing a domain configuration.
 @freezed
-class ProxyHost with _$ProxyHost {
+sealed class ProxyHost with _$ProxyHost {
   const factory ProxyHost({
     /// Proxy host ID.
     required int id,
@@ -76,7 +76,7 @@ class ProxyHost with _$ProxyHost {
 
 /// Proxy location for advanced routing.
 @freezed
-class ProxyLocation with _$ProxyLocation {
+sealed class ProxyLocation with _$ProxyLocation {
   const factory ProxyLocation({
     /// Location path.
     required String path,

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

@@ -101,7 +101,7 @@ class _ProxyHostPageState extends ConsumerState<ProxyHostPage>
       child: EntityAsyncContent<ProxyHost>(
         isLoading: proxyHostAsync.isLoading,
         error: proxyHostAsync.error,
-        data: proxyHostAsync.valueOrNull,
+        data: proxyHostAsync.value,
         onRetry: () => ref.invalidate(proxyHostProvider(widget.proxyHostId!)),
         builder: (proxyHost) {
           if (isEditing) {
@@ -275,7 +275,7 @@ class _ProxyHostView extends StatelessWidget {
                   shrinkWrap: true,
                   physics: const NeverScrollableScrollPhysics(),
                   itemCount: proxyHost.locations.length,
-                  separatorBuilder: (_, __) => const Divider(height: 1),
+                  separatorBuilder: (_, index) => const Divider(height: 1),
                   itemBuilder: (context, index) {
                     final loc = proxyHost.locations[index];
                     return ListTile(

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

@@ -1,24 +1,124 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:tatlock_ui/features/control_room/npm/data/models/proxy_host_model.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/shared/components/data_grid/adapters/core_api_source.dart';
+import 'package:tatlock_ui/shared/components/data_grid/data_grid_exports.dart';
+
+/// Domain info data class for DataGrid display.
+class DomainData {
+  DomainData({
+    required this.domain,
+    required this.service,
+    required this.proxyHostId,
+    required this.sslEnabled,
+    this.certificateId,
+  });
+
+  factory DomainData.fromJson(Map<String, dynamic> json) => DomainData(
+        domain: json['domain'] as String,
+        service: json['service'] as String,
+        proxyHostId: json['proxy_host_id'] as int,
+        sslEnabled: json['ssl_enabled'] as bool? ?? false,
+        certificateId: json['certificate_id'] as int?,
+      );
+
+  final String domain;
+  final String service;
+  final int proxyHostId;
+  final bool sslEnabled;
+  final int? certificateId;
+}
 
 /// Page displaying the list of proxy hosts (domains) from NPM.
-class ProxyHostsPage extends ConsumerWidget {
+class ProxyHostsPage extends ConsumerStatefulWidget {
   const ProxyHostsPage({super.key});
 
   @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final domainsAsync = ref.watch(domainsProvider);
+  ConsumerState<ProxyHostsPage> createState() => _ProxyHostsPageState();
+}
+
+class _ProxyHostsPageState extends ConsumerState<ProxyHostsPage> {
+  late final StateNotifierProvider<DataGridController<DomainData>,
+      DataGridState<DomainData>> _gridProvider;
+
+  @override
+  void initState() {
+    super.initState();
+    final dio = ref.read(coreApiClientProvider);
+    final source = CoreApiDataSource<DomainData>(
+      dio: dio,
+      endpoint: '/infrastructure/domains',
+      fromJson: DomainData.fromJson,
+    );
+
+    _gridProvider = dataGridProvider<DomainData>(
+      source: source,
+      config: _buildConfig(),
+      idSelector: (d) => d.proxyHostId.toString(),
+    );
+  }
+
+  DataGridConfig<DomainData> _buildConfig() {
+    return DataGridConfig<DomainData>(
+      columns: [
+        DataGridColumn<DomainData>(
+          header: 'Domain',
+          valueBuilder: (d) => d.domain,
+          sortable: true,
+          searchable: true,
+          width: const DataGridColumnWidth.flex(2),
+          cellBuilder: (context, d) => _DomainCell(domain: d),
+        ),
+        DataGridColumn<DomainData>(
+          header: 'Service',
+          valueBuilder: (d) => d.service,
+          width: const DataGridColumnWidth.flex(1),
+          cellBuilder: (context, d) => _ServiceCell(service: d.service),
+        ),
+        DataGridColumn<DomainData>(
+          header: 'SSL',
+          valueBuilder: (d) => d.sslEnabled ? 'Enabled' : 'Disabled',
+          width: const DataGridColumnWidth.fixed(100),
+          alignment: DataGridColumnAlignment.end,
+          cellBuilder: (context, d) => _SslBadge(enabled: d.sslEnabled),
+        ),
+      ],
+      actions: [
+        DataGridAction<DomainData>(
+          icon: Icons.edit,
+          label: 'Edit',
+          onTap: (d) async => _viewDomain(d),
+        ),
+      ],
+      enableSearch: true,
+      searchHint: 'Search domains...',
+      showHeader: true,
+      showFooter: true,
+    );
+  }
+
+  void _viewDomain(DomainData domain) {
+    ref.read(selectedProxyHostProvider.notifier).select(domain.proxyHostId);
+  }
+
+  void _createNew() {
+    ref.read(creatingProxyHostProvider.notifier).start();
+  }
+
+  @override
+  Widget build(BuildContext context) {
     final selectedId = ref.watch(selectedProxyHostProvider);
     final isCreating = ref.watch(creatingProxyHostProvider);
-    final colorScheme = Theme.of(context).colorScheme;
 
     // Show create page if creating new
     if (isCreating) {
       return ProxyHostPage.create(
-        onClose: () => ref.read(creatingProxyHostProvider.notifier).stop(),
+        onClose: () {
+          ref.read(creatingProxyHostProvider.notifier).stop();
+          ref.read(_gridProvider.notifier).refresh();
+        },
       );
     }
 
@@ -26,289 +126,116 @@ class ProxyHostsPage extends ConsumerWidget {
     if (selectedId != null) {
       return ProxyHostPage(
         proxyHostId: selectedId,
-        onClose: () => ref.read(selectedProxyHostProvider.notifier).clear(),
+        onClose: () {
+          ref.read(selectedProxyHostProvider.notifier).clear();
+          ref.read(_gridProvider.notifier).refresh();
+        },
       );
     }
 
-    return domainsAsync.when(
-      loading: () => const Center(child: CircularProgressIndicator()),
-      error: (error, stack) => Center(
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            Icon(
-              Icons.error_outline,
-              size: 48,
-              color: colorScheme.error,
-            ),
-            const SizedBox(height: 16),
-            const Text('Failed to load proxy hosts'),
-            const SizedBox(height: 8),
-            Text(
-              error.toString(),
-              style: TextStyle(color: colorScheme.outline),
-            ),
-            const SizedBox(height: 16),
-            FilledButton.icon(
-              onPressed: () => ref.invalidate(domainsProvider),
-              icon: const Icon(Icons.refresh),
-              label: const Text('Retry'),
-            ),
-          ],
+    return DataGrid<DomainData>(
+      provider: _gridProvider,
+      config: _buildConfig(),
+      idSelector: (d) => d.proxyHostId.toString(),
+      toolbarActions: [
+        IconButton(
+          icon: const Icon(Icons.refresh),
+          tooltip: 'Refresh',
+          onPressed: () => ref.read(_gridProvider.notifier).refresh(),
         ),
-      ),
-      data: (domains) => _DomainsList(
-        domains: domains,
-        onRefresh: () => ref.invalidate(domainsProvider),
-        onSelect: (id) => ref.read(selectedProxyHostProvider.notifier).select(id),
-        onCreateNew: () => ref.read(creatingProxyHostProvider.notifier).start(),
-      ),
-    );
-  }
-}
-
-class _DomainsList extends StatefulWidget {
-  const _DomainsList({
-    required this.domains,
-    required this.onRefresh,
-    required this.onSelect,
-    required this.onCreateNew,
-  });
-
-  final List<DomainInfoModel> domains;
-  final VoidCallback onRefresh;
-  final void Function(int proxyHostId) onSelect;
-  final VoidCallback onCreateNew;
-
-  @override
-  State<_DomainsList> createState() => _DomainsListState();
-}
-
-class _DomainsListState extends State<_DomainsList> {
-  final _searchController = TextEditingController();
-  String _searchQuery = '';
-
-  @override
-  void dispose() {
-    _searchController.dispose();
-    super.dispose();
-  }
-
-  List<DomainInfoModel> get _filteredDomains {
-    if (_searchQuery.isEmpty) return widget.domains;
-    final query = _searchQuery.toLowerCase();
-    return widget.domains.where((d) {
-      return d.domain.toLowerCase().contains(query) ||
-          d.service.toLowerCase().contains(query);
-    }).toList();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    final colorScheme = Theme.of(context).colorScheme;
-    final filtered = _filteredDomains;
-
-    return Column(
-      children: [
-        // Toolbar with search
-        Padding(
-          padding: const EdgeInsets.all(16),
-          child: Row(
-            children: [
-              Text(
-                '${filtered.length} of ${widget.domains.length} proxy hosts',
-                style: Theme.of(context).textTheme.titleSmall?.copyWith(
-                      color: colorScheme.onSurfaceVariant,
-                    ),
-              ),
-              const Spacer(),
-              SizedBox(
-                width: 250,
-                child: TextField(
-                  controller: _searchController,
-                  decoration: InputDecoration(
-                    hintText: 'Search domains...',
-                    prefixIcon: const Icon(Icons.search, size: 20),
-                    suffixIcon: _searchQuery.isNotEmpty
-                        ? IconButton(
-                            icon: const Icon(Icons.clear, size: 18),
-                            onPressed: () {
-                              _searchController.clear();
-                              setState(() => _searchQuery = '');
-                            },
-                          )
-                        : null,
-                    isDense: true,
-                    contentPadding: const EdgeInsets.symmetric(
-                      horizontal: 12,
-                      vertical: 8,
-                    ),
-                    border: OutlineInputBorder(
-                      borderRadius: BorderRadius.circular(8),
-                    ),
-                  ),
-                  onChanged: (value) => setState(() => _searchQuery = value),
-                ),
-              ),
-              const SizedBox(width: 8),
-              IconButton(
-                icon: const Icon(Icons.refresh),
-                tooltip: 'Refresh',
-                onPressed: widget.onRefresh,
-              ),
-              const SizedBox(width: 8),
-              FilledButton.icon(
-                onPressed: widget.onCreateNew,
-                icon: const Icon(Icons.add),
-                label: const Text('New'),
-              ),
-            ],
-          ),
-        ),
-        // Domain list or empty state
-        Expanded(
-          child: filtered.isEmpty
-              ? Center(
-                  child: Column(
-                    mainAxisSize: MainAxisSize.min,
-                    children: [
-                      Icon(
-                        _searchQuery.isEmpty
-                            ? Icons.public_off
-                            : Icons.search_off,
-                        size: 64,
-                        color: colorScheme.outline,
-                      ),
-                      const SizedBox(height: 16),
-                      Text(
-                        _searchQuery.isEmpty
-                            ? 'No proxy hosts configured'
-                            : 'No domains match "$_searchQuery"',
-                        style: Theme.of(context).textTheme.titleMedium?.copyWith(
-                              color: colorScheme.onSurfaceVariant,
-                            ),
-                      ),
-                      if (_searchQuery.isNotEmpty) ...[
-                        const SizedBox(height: 8),
-                        TextButton(
-                          onPressed: () {
-                            _searchController.clear();
-                            setState(() => _searchQuery = '');
-                          },
-                          child: const Text('Clear search'),
-                        ),
-                      ],
-                    ],
-                  ),
-                )
-              : ListView.builder(
-                  itemCount: filtered.length,
-                  itemBuilder: (context, index) {
-                    final domain = filtered[index];
-                    return _DomainListTile(
-                      domain: domain,
-                      onTap: () => widget.onSelect(domain.proxyHostId),
-                    );
-                  },
-                ),
+        const SizedBox(width: 8),
+        FilledButton.icon(
+          onPressed: _createNew,
+          icon: const Icon(Icons.add),
+          label: const Text('New'),
         ),
       ],
     );
   }
 }
 
-class _DomainListTile extends StatelessWidget {
-  const _DomainListTile({required this.domain, required this.onTap});
+class _DomainCell extends StatelessWidget {
+  const _DomainCell({required this.domain});
 
-  final DomainInfoModel domain;
-  final VoidCallback onTap;
+  final DomainData domain;
 
   @override
   Widget build(BuildContext context) {
     final colorScheme = Theme.of(context).colorScheme;
 
-    return Card(
-      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
-      child: InkWell(
-        onTap: onTap,
-        borderRadius: BorderRadius.circular(12),
-        child: Padding(
-          padding: const EdgeInsets.all(12),
-          child: Row(
-            children: [
-              // SSL status icon
-              Container(
-                padding: const EdgeInsets.all(8),
-                decoration: BoxDecoration(
-                  color: domain.sslEnabled
-                      ? Colors.green.withValues(alpha: 0.1)
-                      : colorScheme.surfaceContainerHighest,
-                  borderRadius: BorderRadius.circular(8),
-                ),
-                child: Icon(
-                  domain.sslEnabled ? Icons.lock : Icons.lock_open,
-                  size: 20,
-                  color: domain.sslEnabled ? Colors.green : colorScheme.outline,
-                ),
-              ),
-              const SizedBox(width: 12),
-              // Domain and service info
-              Expanded(
-                flex: 2,
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text(
-                      domain.domain,
-                      style: const TextStyle(fontWeight: FontWeight.w500),
-                      overflow: TextOverflow.ellipsis,
-                    ),
-                    const SizedBox(height: 4),
-                    Text(
-                      domain.service,
-                      style: TextStyle(
-                        fontSize: 12,
-                        color: colorScheme.onSurfaceVariant,
-                      ),
-                      overflow: TextOverflow.ellipsis,
-                    ),
-                  ],
-                ),
-              ),
-              // Service target
-              Expanded(
-                child: Text(
-                  domain.service,
-                  style: TextStyle(
-                    fontSize: 12,
-                    color: colorScheme.onSurfaceVariant,
-                    fontFamily: 'monospace',
-                  ),
-                  overflow: TextOverflow.ellipsis,
-                  textAlign: TextAlign.end,
-                ),
-              ),
-              // SSL badge
-              const SizedBox(width: 12),
-              Container(
-                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
-                decoration: BoxDecoration(
-                  color: domain.sslEnabled
-                      ? Colors.green.withValues(alpha: 0.1)
-                      : colorScheme.surfaceContainerHighest,
-                  borderRadius: BorderRadius.circular(4),
-                ),
-                child: Text(
-                  domain.sslEnabled ? 'SSL' : 'HTTP',
-                  style: TextStyle(
-                    fontSize: 11,
-                    fontWeight: FontWeight.w500,
-                    color: domain.sslEnabled ? Colors.green : colorScheme.outline,
-                  ),
-                ),
-              ),
-            ],
+    return Row(
+      children: [
+        Container(
+          padding: const EdgeInsets.all(8),
+          decoration: BoxDecoration(
+            color: domain.sslEnabled
+                ? Colors.green.withValues(alpha: 0.1)
+                : colorScheme.surfaceContainerHighest,
+            borderRadius: BorderRadius.circular(8),
           ),
+          child: Icon(
+            domain.sslEnabled ? Icons.lock : Icons.lock_open,
+            size: 20,
+            color: domain.sslEnabled ? Colors.green : colorScheme.outline,
+          ),
+        ),
+        const SizedBox(width: 12),
+        Expanded(
+          child: Text(
+            domain.domain,
+            style: const TextStyle(fontWeight: FontWeight.w500),
+            overflow: TextOverflow.ellipsis,
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _ServiceCell extends StatelessWidget {
+  const _ServiceCell({required this.service});
+
+  final String service;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Text(
+      service,
+      style: TextStyle(
+        fontSize: 12,
+        color: colorScheme.onSurfaceVariant,
+        fontFamily: 'monospace',
+      ),
+      overflow: TextOverflow.ellipsis,
+    );
+  }
+}
+
+class _SslBadge extends StatelessWidget {
+  const _SslBadge({required this.enabled});
+
+  final bool enabled;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+      decoration: BoxDecoration(
+        color: enabled
+            ? Colors.green.withValues(alpha: 0.1)
+            : colorScheme.surfaceContainerHighest,
+        borderRadius: BorderRadius.circular(4),
+      ),
+      child: Text(
+        enabled ? 'SSL' : 'HTTP',
+        style: TextStyle(
+          fontSize: 11,
+          fontWeight: FontWeight.w500,
+          color: enabled ? Colors.green : colorScheme.outline,
         ),
       ),
     );

lib/features/control_room/npm/presentation/providers/proxy_hosts_provider.dart

@@ -1,4 +1,3 @@
-import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 import 'package:tatlock_ui/features/control_room/npm/data/datasources/proxy_hosts_datasource.dart';
 import 'package:tatlock_ui/features/control_room/npm/data/models/proxy_host_model.dart';

lib/features/control_room/router.dart

@@ -16,10 +16,6 @@ abstract class ControlRoomRoutes {
   static const redirections = '/control-room/redirections';
   static const streams = '/control-room/streams';
   static const certificates = '/control-room/certificates';
-  // Authentik
-  static const users = '/control-room/users';
-  static const groups = '/control-room/groups';
-  static const applications = '/control-room/applications';
 }
 
 /// Control Room navigation items with section grouping.
@@ -33,11 +29,7 @@ enum ControlRoomNav {
   proxyHosts('proxy-hosts', 'Proxy Hosts', Icons.public, 'NPM'),
   redirections('redirections', 'Redirections', Icons.alt_route, 'NPM'),
   streams('streams', 'Streams', Icons.stream, 'NPM'),
-  certificates('certificates', 'SSL Certificates', Icons.verified_user, 'NPM'),
-  // Authentik section
-  users('users', 'Users', Icons.people, 'Authentik'),
-  groups('groups', 'Groups', Icons.group_work, 'Authentik'),
-  applications('applications', 'Applications', Icons.apps, 'Authentik');
+  certificates('certificates', 'SSL Certificates', Icons.verified_user, 'NPM');
 
   const ControlRoomNav(this.id, this.label, this.icon, this.section);
 

lib/features/control_room/stacks/data/datasources/stacks_datasource.dart

@@ -125,7 +125,7 @@ class StacksDatasource {
 
 /// Provides the stacks datasource.
 @riverpod
-StacksDatasource stacksDatasource(StacksDatasourceRef ref) {
+StacksDatasource stacksDatasource(Ref ref) {
   final dio = ref.watch(coreApiClientProvider);
   final containersDatasource = ref.watch(containersDatasourceProvider);
   return StacksDatasource(dio, containersDatasource);

lib/features/control_room/stacks/data/models/stack_model.dart

@@ -6,7 +6,7 @@ part 'stack_model.g.dart';
 
 /// Stack data model for API serialization.
 @freezed
-class StackModel with _$StackModel {
+sealed class StackModel with _$StackModel {
   const factory StackModel({
     required String id,
     required String name,

lib/features/control_room/stacks/data/repositories/stack_repository_impl.dart

@@ -75,7 +75,7 @@ class StackRepositoryImpl implements StackRepository {
 
 /// Provides the stack repository.
 @riverpod
-StackRepository stackRepository(StackRepositoryRef ref) {
+StackRepository stackRepository(Ref ref) {
   final datasource = ref.watch(stacksDatasourceProvider);
   return StackRepositoryImpl(datasource);
 }

lib/features/control_room/stacks/domain/entities/stack.dart

@@ -4,7 +4,7 @@ part 'stack.freezed.dart';
 
 /// Container orchestration stack (Docker Compose stack).
 @freezed
-class Stack with _$Stack {
+sealed class Stack with _$Stack {
   const factory Stack({
     /// Unique stack identifier.
     required String id,

lib/features/control_room/stacks/presentation/providers/stacks_provider.dart

@@ -6,14 +6,14 @@ part 'stacks_provider.g.dart';
 
 /// Provides the list of all stacks.
 @riverpod
-Future<List<Stack>> stacks(StacksRef ref) async {
+Future<List<Stack>> stacks(Ref ref) async {
   final repository = ref.watch(stackRepositoryProvider);
   return repository.getStacks();
 }
 
 /// Provides a single stack by ID.
 @riverpod
-Future<Stack> stack(StackRef ref, String id) async {
+Future<Stack> stack(Ref ref, String id) async {
   final repository = ref.watch(stackRepositoryProvider);
   return repository.getStack(id);
 }
@@ -35,14 +35,14 @@ class SelectedStack extends _$SelectedStack {
 
 /// Provides the YAML content for a stack.
 @riverpod
-Future<String> stackYaml(StackYamlRef ref, String stackId) async {
+Future<String> stackYaml(Ref ref, String stackId) async {
   final repository = ref.watch(stackRepositoryProvider);
   return repository.getStackYaml(stackId);
 }
 
 /// Provides the environment variables for a stack.
 @riverpod
-Future<Map<String, String>> stackEnvVars(StackEnvVarsRef ref, String stackId) async {
+Future<Map<String, String>> stackEnvVars(Ref ref, String stackId) async {
   final repository = ref.watch(stackRepositoryProvider);
   return repository.getStackEnvVars(stackId);
 }

lib/features/security/groups/groups_list_page.dart

@@ -0,0 +1,188 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:tatlock_ui/core/api/api_client.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';
+
+/// Simple group data class for display.
+class GroupData {
+  GroupData({
+    required this.id,
+    required this.name,
+    required this.isSuperuser,
+    required this.memberCount,
+    this.parentName,
+  });
+
+  factory GroupData.fromJson(Map<String, dynamic> json) => GroupData(
+        id: json['id'] as String,
+        name: json['name'] as String,
+        isSuperuser: json['is_superuser'] as bool? ?? false,
+        memberCount: json['member_count'] as int? ?? 0,
+        parentName: json['parent_name'] as String?,
+      );
+
+  final String id;
+  final String name;
+  final bool isSuperuser;
+  final int memberCount;
+  final String? parentName;
+}
+
+/// Groups list page using the shared DataGrid component.
+class GroupsListPage extends ConsumerStatefulWidget {
+  const GroupsListPage({super.key});
+
+  @override
+  ConsumerState<GroupsListPage> createState() => _GroupsListPageState();
+}
+
+class _GroupsListPageState extends ConsumerState<GroupsListPage> {
+  late final StateNotifierProvider<DataGridController<GroupData>,
+      DataGridState<GroupData>> _gridProvider;
+  bool _isSyncing = false;
+
+  @override
+  void initState() {
+    super.initState();
+    // Create provider in initState to ensure stable reference
+    final dio = ref.read(coreApiClientProvider);
+    final source = CoreApiDataSource<GroupData>(
+      dio: dio,
+      endpoint: '/auth/groups',
+      fromJson: GroupData.fromJson,
+    );
+
+    _gridProvider = dataGridProvider<GroupData>(
+      source: source,
+      config: _buildConfig(),
+      idSelector: (g) => g.id,
+    );
+  }
+
+  Future<void> _syncFromAuthentik() async {
+    if (_isSyncing) return;
+    setState(() => _isSyncing = true);
+
+    try {
+      final dio = ref.read(coreApiClientProvider);
+      await dio.post<void>('/auth/groups/sync-from-authentik');
+
+      if (!mounted) return;
+      ref.read(_gridProvider.notifier).refresh();
+
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(
+          content: const Text('Groups synced from Authentik'),
+          behavior: SnackBarBehavior.floating,
+          duration: const Duration(seconds: 2),
+        ),
+      );
+    } catch (e) {
+      if (!mounted) return;
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(
+          content: Text('Sync failed: $e'),
+          behavior: SnackBarBehavior.floating,
+          duration: const Duration(seconds: 4),
+        ),
+      );
+    } finally {
+      if (mounted) setState(() => _isSyncing = false);
+    }
+  }
+
+  DataGridConfig<GroupData> _buildConfig() {
+    return DataGridConfig<GroupData>(
+      columns: [
+        DataGridColumn<GroupData>(
+          header: 'Name',
+          valueBuilder: (g) => g.name,
+          sortable: true,
+          searchable: true,
+          width: const DataGridColumnWidth.flex(2),
+        ),
+        DataGridColumn<GroupData>(
+          header: 'Members',
+          valueBuilder: (g) => g.memberCount.toString(),
+          width: const DataGridColumnWidth.fixed(100),
+          alignment: DataGridColumnAlignment.end,
+        ),
+        DataGridColumn<GroupData>(
+          header: 'Type',
+          valueBuilder: (g) => g.isSuperuser ? 'Superuser' : 'Standard',
+          cellBuilder: (context, g) => _GroupTypeBadge(isSuperuser: g.isSuperuser),
+          width: const DataGridColumnWidth.fixed(120),
+        ),
+        DataGridColumn<GroupData>(
+          header: 'Parent',
+          valueBuilder: (g) => g.parentName ?? '-',
+          width: const DataGridColumnWidth.flex(1),
+        ),
+      ],
+      enableSearch: true,
+      searchHint: 'Search groups...',
+      showHeader: true,
+      showFooter: true,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return DataGrid<GroupData>(
+      provider: _gridProvider,
+      config: _buildConfig(),
+      idSelector: (g) => g.id,
+      toolbarActions: [
+        IconButton(
+          icon: const Icon(Icons.refresh),
+          tooltip: 'Refresh',
+          onPressed: () => ref.read(_gridProvider.notifier).refresh(),
+        ),
+        const SizedBox(width: 8),
+        FilledButton.icon(
+          onPressed: _isSyncing ? null : _syncFromAuthentik,
+          icon: _isSyncing
+              ? const SizedBox(
+                  width: 16,
+                  height: 16,
+                  child: CircularProgressIndicator(strokeWidth: 2),
+                )
+              : const Icon(Icons.sync),
+          label: const Text('Sync from Authentik'),
+        ),
+      ],
+    );
+  }
+}
+
+class _GroupTypeBadge extends StatelessWidget {
+  const _GroupTypeBadge({required this.isSuperuser});
+
+  final bool isSuperuser;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+      decoration: BoxDecoration(
+        color: isSuperuser
+            ? colorScheme.primaryContainer
+            : colorScheme.surfaceContainerHighest,
+        borderRadius: BorderRadius.circular(4),
+      ),
+      child: Text(
+        isSuperuser ? 'Superuser' : 'Standard',
+        style: TextStyle(
+          fontSize: 12,
+          fontWeight: FontWeight.w500,
+          color: isSuperuser
+              ? colorScheme.onPrimaryContainer
+              : colorScheme.onSurfaceVariant,
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,113 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+import 'package:tatlock_ui/features/security/router.dart';
+import 'package:tatlock_ui/features/security/users/users_list_page.dart';
+import 'package:tatlock_ui/features/security/groups/groups_list_page.dart';
+import 'package:tatlock_ui/shared/layouts/widgets/nav_panel.dart';
+
+/// Main Security room page with nav panel and section content.
+class SecurityPage extends ConsumerWidget {
+  const SecurityPage({
+    super.key,
+    this.nav = SecurityNav.users,
+  });
+
+  /// The current nav item to display.
+  final SecurityNav nav;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Scaffold(
+      body: Row(
+        children: [
+          // Nav Panel - section navigation with grouping
+          NavPanel(
+            title: 'Sections',
+            icon: Icons.security_outlined,
+            items: SecurityNav.values.map((n) => n.toNavItem()).toList(),
+            selectedId: nav.id,
+            onItemSelected: (id) {
+              final newNav = SecurityNav.values.firstWhere(
+                (n) => n.id == id,
+              );
+              // Navigate to section URL
+              context.go(pathForSecurityNav(newNav));
+            },
+          ),
+          // Divider
+          VerticalDivider(
+            width: 1,
+            thickness: 1,
+            color: colorScheme.outlineVariant,
+          ),
+          // Section content
+          Expanded(
+            child: _SectionContent(nav: nav),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+/// Renders content for the selected nav item.
+class _SectionContent extends StatelessWidget {
+  const _SectionContent({required this.nav});
+
+  final SecurityNav nav;
+
+  @override
+  Widget build(BuildContext context) {
+    switch (nav) {
+      case SecurityNav.users:
+        return const UsersListPage();
+      case SecurityNav.groups:
+        return const GroupsListPage();
+      default:
+        return _PlaceholderSection(nav: nav);
+    }
+  }
+}
+
+/// Placeholder for nav items not yet implemented.
+class _PlaceholderSection extends StatelessWidget {
+  const _PlaceholderSection({required this.nav});
+
+  final SecurityNav nav;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+
+    return Center(
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Icon(
+            nav.icon,
+            size: 64,
+            color: colorScheme.outline,
+          ),
+          const SizedBox(height: 16),
+          Text(
+            nav.label,
+            style: textTheme.headlineSmall?.copyWith(
+              color: colorScheme.onSurfaceVariant,
+            ),
+          ),
+          const SizedBox(height: 8),
+          Text(
+            '${nav.section} • Coming soon',
+            style: textTheme.bodyMedium?.copyWith(
+              color: colorScheme.outline,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/features/security/router.dart

@@ -0,0 +1,74 @@
+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/shared/layouts/widgets/nav_panel.dart';
+
+/// Route paths for Security room.
+abstract class SecurityRoutes {
+  static const base = '/security';
+  // User Management (Authentik)
+  static const users = '/security/users';
+  static const groups = '/security/groups';
+  // Monitoring (future)
+  static const cveMonitor = '/security/cve-monitor';
+  static const networkMonitor = '/security/network-monitor';
+  static const dnsAdblock = '/security/dns-adblock';
+}
+
+/// Security room navigation items with section grouping.
+enum SecurityNav {
+  // User Management section (moved from Control Room)
+  users('users', 'Users', Icons.people, 'User Management'),
+  groups('groups', 'Groups', Icons.group_work, 'User Management'),
+  // Monitoring section (placeholders for future)
+  cveMonitor('cve-monitor', 'CVE Monitor', Icons.security, 'Monitoring'),
+  networkMonitor('network-monitor', 'Network Monitor', Icons.router, 'Monitoring'),
+  dnsAdblock('dns-adblock', 'DNS / Adblock', Icons.dns, 'Monitoring');
+
+  const SecurityNav(this.id, this.label, this.icon, this.section);
+
+  final String id;
+  final String label;
+  final IconData icon;
+  final String section;
+
+  NavItem toNavItem() => NavItem(
+        id: id,
+        label: label,
+        icon: icon,
+        section: section,
+      );
+
+  /// Get route path for this nav item.
+  String get path => '/security/$id';
+}
+
+/// Get route path for a nav item.
+String pathForSecurityNav(SecurityNav nav) => nav.path;
+
+/// Security room routes for go_router.
+List<RouteBase> securityRoutes() {
+  return [
+    // Redirect /security to /security/users
+    GoRoute(
+      path: SecurityRoutes.base,
+      name: 'security',
+      redirect: (context, state) => SecurityRoutes.users,
+    ),
+    // Generate routes for all nav items
+    for (final nav in SecurityNav.values)
+      GoRoute(
+        path: nav.path,
+        name: 'security${_capitalize(nav.id.replaceAll('-', '_'))}',
+        builder: (context, state) => SecurityPage(nav: nav),
+      ),
+  ];
+}
+
+String _capitalize(String s) {
+  if (s.isEmpty) return s;
+  return s
+      .split('_')
+      .map((part) => part[0].toUpperCase() + part.substring(1))
+      .join('');
+}

lib/features/security/users/users_list_page.dart

@@ -0,0 +1,306 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:tatlock_ui/core/api/api_client.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';
+
+/// Simple user data class for display.
+class UserData {
+  UserData({
+    required this.id,
+    required this.email,
+    required this.name,
+    this.avatarUrl,
+    required this.createdAt,
+    this.lastLogin,
+    this.roles = const [],
+  });
+
+  factory UserData.fromJson(Map<String, dynamic> json) => UserData(
+        id: json['id'] as String,
+        email: json['email'] as String,
+        name: json['name'] as String,
+        avatarUrl: json['avatar_url'] as String?,
+        createdAt: DateTime.parse(json['created_at'] as String),
+        lastLogin: json['last_login'] != null
+            ? DateTime.parse(json['last_login'] as String)
+            : null,
+        roles: (json['roles'] as List<dynamic>?)?.cast<String>() ?? [],
+      );
+
+  final String id;
+  final String email;
+  final String name;
+  final String? avatarUrl;
+  final DateTime createdAt;
+  final DateTime? lastLogin;
+  final List<String> roles;
+
+  bool get isAdmin => roles.any((r) => r.endsWith(':admin'));
+
+  String get initials {
+    final parts = name.split(' ');
+    if (parts.length >= 2) {
+      return '${parts.first[0]}${parts.last[0]}'.toUpperCase();
+    }
+    return name.substring(0, name.length.clamp(0, 2)).toUpperCase();
+  }
+
+  String get lastLoginFormatted {
+    if (lastLogin == null) return 'Never';
+    final diff = DateTime.now().difference(lastLogin!);
+    if (diff.inDays > 30) {
+      return '${lastLogin!.day}/${lastLogin!.month}/${lastLogin!.year}';
+    }
+    if (diff.inDays > 0) return '${diff.inDays}d ago';
+    if (diff.inHours > 0) return '${diff.inHours}h ago';
+    if (diff.inMinutes > 0) return '${diff.inMinutes}m ago';
+    return 'Just now';
+  }
+}
+
+/// Users list page using the shared DataGrid component.
+class UsersListPage extends ConsumerStatefulWidget {
+  const UsersListPage({super.key});
+
+  @override
+  ConsumerState<UsersListPage> createState() => _UsersListPageState();
+}
+
+class _UsersListPageState extends ConsumerState<UsersListPage> {
+  late final StateNotifierProvider<DataGridController<UserData>,
+      DataGridState<UserData>> _gridProvider;
+  bool _isSyncing = false;
+
+  @override
+  void initState() {
+    super.initState();
+    final dio = ref.read(coreApiClientProvider);
+    final source = CoreApiDataSource<UserData>(
+      dio: dio,
+      endpoint: '/auth/users',
+      fromJson: UserData.fromJson,
+    );
+
+    _gridProvider = dataGridProvider<UserData>(
+      source: source,
+      config: _buildConfig(),
+      idSelector: (u) => u.id,
+    );
+  }
+
+  Future<void> _syncFromAuthentik() async {
+    if (_isSyncing) return;
+    setState(() => _isSyncing = true);
+
+    try {
+      final dio = ref.read(coreApiClientProvider);
+      await dio.post<void>('/auth/users/sync-from-authentik');
+
+      if (!mounted) return;
+      ref.read(_gridProvider.notifier).refresh();
+
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(
+          content: const Text('Users synced from Authentik'),
+          behavior: SnackBarBehavior.floating,
+          duration: const Duration(seconds: 2),
+        ),
+      );
+    } catch (e) {
+      if (!mounted) return;
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(
+          content: Text('Sync failed: $e'),
+          behavior: SnackBarBehavior.floating,
+          duration: const Duration(seconds: 4),
+        ),
+      );
+    } finally {
+      if (mounted) setState(() => _isSyncing = false);
+    }
+  }
+
+  DataGridConfig<UserData> _buildConfig() {
+    return DataGridConfig<UserData>(
+      columns: [
+        DataGridColumn<UserData>(
+          header: 'User',
+          valueBuilder: (u) => u.name,
+          sortable: true,
+          searchable: true,
+          width: const DataGridColumnWidth.flex(2),
+          cellBuilder: (context, u) => _UserCell(user: u),
+        ),
+        DataGridColumn<UserData>(
+          header: 'Roles',
+          valueBuilder: (u) => u.roles.join(', '),
+          width: const DataGridColumnWidth.flex(1),
+          cellBuilder: (context, u) => _RolesCell(roles: u.roles),
+        ),
+        DataGridColumn<UserData>(
+          header: 'Last Login',
+          valueBuilder: (u) => u.lastLoginFormatted,
+          width: const DataGridColumnWidth.fixed(120),
+          alignment: DataGridColumnAlignment.end,
+        ),
+      ],
+      enableSearch: true,
+      searchHint: 'Search users...',
+      showHeader: true,
+      showFooter: true,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return DataGrid<UserData>(
+      provider: _gridProvider,
+      config: _buildConfig(),
+      idSelector: (u) => u.id,
+      toolbarActions: [
+        IconButton(
+          icon: const Icon(Icons.refresh),
+          tooltip: 'Refresh',
+          onPressed: () => ref.read(_gridProvider.notifier).refresh(),
+        ),
+        const SizedBox(width: 8),
+        FilledButton.icon(
+          onPressed: _isSyncing ? null : _syncFromAuthentik,
+          icon: _isSyncing
+              ? const SizedBox(
+                  width: 16,
+                  height: 16,
+                  child: CircularProgressIndicator(strokeWidth: 2),
+                )
+              : const Icon(Icons.sync),
+          label: const Text('Sync from Authentik'),
+        ),
+      ],
+    );
+  }
+}
+
+class _UserCell extends StatelessWidget {
+  const _UserCell({required this.user});
+
+  final UserData user;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Row(
+      children: [
+        CircleAvatar(
+          radius: 16,
+          backgroundColor: colorScheme.primaryContainer,
+          backgroundImage:
+              user.avatarUrl != null ? NetworkImage(user.avatarUrl!) : null,
+          child: user.avatarUrl == null
+              ? Text(
+                  user.initials,
+                  style: TextStyle(
+                    fontSize: 12,
+                    color: colorScheme.onPrimaryContainer,
+                    fontWeight: FontWeight.w500,
+                  ),
+                )
+              : null,
+        ),
+        const SizedBox(width: 12),
+        Expanded(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Row(
+                children: [
+                  Flexible(
+                    child: Text(
+                      user.name,
+                      style: const TextStyle(fontWeight: FontWeight.w500),
+                      overflow: TextOverflow.ellipsis,
+                    ),
+                  ),
+                  if (user.isAdmin) ...[
+                    const SizedBox(width: 8),
+                    Container(
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: 6,
+                        vertical: 2,
+                      ),
+                      decoration: BoxDecoration(
+                        color: colorScheme.primaryContainer,
+                        borderRadius: BorderRadius.circular(4),
+                      ),
+                      child: Text(
+                        'Admin',
+                        style: TextStyle(
+                          fontSize: 10,
+                          fontWeight: FontWeight.w500,
+                          color: colorScheme.onPrimaryContainer,
+                        ),
+                      ),
+                    ),
+                  ],
+                ],
+              ),
+              Text(
+                user.email,
+                style: TextStyle(
+                  fontSize: 12,
+                  color: colorScheme.onSurfaceVariant,
+                ),
+                overflow: TextOverflow.ellipsis,
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _RolesCell extends StatelessWidget {
+  const _RolesCell({required this.roles});
+
+  final List<String> roles;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    if (roles.isEmpty) {
+      return Text(
+        'No roles',
+        style: TextStyle(
+          fontSize: 12,
+          color: colorScheme.outline,
+          fontStyle: FontStyle.italic,
+        ),
+      );
+    }
+
+    return Wrap(
+      spacing: 4,
+      runSpacing: 4,
+      children: roles.take(3).map((role) {
+        return Container(
+          padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
+          decoration: BoxDecoration(
+            color: colorScheme.surfaceContainerHighest,
+            borderRadius: BorderRadius.circular(4),
+          ),
+          child: Text(
+            role.split(':').last,
+            style: TextStyle(
+              fontSize: 10,
+              color: colorScheme.onSurfaceVariant,
+            ),
+          ),
+        );
+      }).toList(),
+    );
+  }
+}

lib/routing/app_router.dart

@@ -3,6 +3,7 @@ import 'package:go_router/go_router.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 import 'package:tatlock_ui/features/control_room/router.dart';
 import 'package:tatlock_ui/features/front_hall/presentation/pages/front_hall_page.dart';
+import 'package:tatlock_ui/features/security/router.dart';
 import 'package:tatlock_ui/shared/layouts/app_scaffold.dart';
 
 part 'app_router.g.dart';
@@ -16,7 +17,7 @@ abstract class AppRoutes {
 
 /// Provides the GoRouter instance.
 @riverpod
-GoRouter appRouter(AppRouterRef ref) {
+GoRouter appRouter(Ref ref) {
   return GoRouter(
     initialLocation: AppRoutes.frontHall,
     debugLogDiagnostics: true,
@@ -30,6 +31,7 @@ GoRouter appRouter(AppRouterRef ref) {
             builder: (context, state) => const FrontHallPage(),
           ),
           ...controlRoomRoutes(),
+          ...securityRoutes(),
           GoRoute(
             path: AppRoutes.parlor,
             name: 'parlor',

lib/shared/components/data_grid/adapters/core_api_source.dart

@@ -88,28 +88,37 @@ class CoreApiDataSource<T> extends DataGridSource<T> {
       queryParams[limitParam] = limit;
     }
 
-    final response = await dio.get<Map<String, dynamic>>(
+    final response = await dio.get<dynamic>(
       endpoint,
       queryParameters: queryParams,
     );
 
-    final data = response.data!;
+    final responseData = response.data!;
 
     // Handle both paginated and wrapped responses
     List<dynamic> itemsJson;
     int totalCount;
 
-    if (data.containsKey(itemsKey)) {
-      // Paginated response: { items: [...], total: N }
-      itemsJson = data[itemsKey] as List<dynamic>;
-      totalCount = data[totalCountKey] as int? ?? itemsJson.length;
+    if (responseData is List) {
+      // Direct array response: [...]
+      itemsJson = responseData;
+      totalCount = itemsJson.length;
+    } else if (responseData is Map<String, dynamic>) {
+      final data = responseData;
+      if (data.containsKey(itemsKey)) {
+        // Paginated response: { items: [...], total: N }
+        itemsJson = data[itemsKey] as List<dynamic>;
+        totalCount = data[totalCountKey] as int? ?? itemsJson.length;
+      } else {
+        // Try common wrapper patterns: { data: [...] } or { results: [...] }
+        itemsJson = (data['data'] ?? data['results'] ?? []) as List<dynamic>;
+        totalCount = data['count'] as int? ??
+            data['total'] as int? ??
+            data['totalCount'] as int? ??
+            itemsJson.length;
+      }
     } else {
-      // Try common wrapper patterns: { data: [...] } or { results: [...] }
-      itemsJson = (data['data'] ?? data['results'] ?? []) as List<dynamic>;
-      totalCount = data['count'] as int? ??
-          data['total'] as int? ??
-          data['totalCount'] as int? ??
-          itemsJson.length;
+      throw FormatException('Unexpected response type: ${responseData.runtimeType}');
     }
 
     final items = itemsJson

lib/shared/components/data_grid/data_grid.dart

@@ -1,9 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_riverpod/legacy.dart';
 
 import 'data_grid_config.dart';
 import 'data_grid_provider.dart';
-import 'data_grid_source.dart';
 import 'data_grid_state.dart';
 import 'widgets/data_grid_bulk_actions.dart';
 import 'widgets/data_grid_empty_state.dart';

lib/shared/components/data_grid/data_grid_exports.dart

@@ -75,6 +75,9 @@
 /// ```
 library;
 
+export 'package:flutter_riverpod/legacy.dart'
+    show StateNotifierProvider, StateNotifier;
+
 export 'data_grid.dart';
 export 'data_grid_action.dart';
 export 'data_grid_column.dart';

lib/shared/components/data_grid/data_grid_provider.dart

@@ -1,7 +1,7 @@
 import 'dart:async';
 
 import 'package:flutter/foundation.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_riverpod/legacy.dart';
 
 import 'data_grid_config.dart';
 import 'data_grid_source.dart';

lib/shared/components/data_grid/data_grid_state.dart

@@ -4,7 +4,7 @@ part 'data_grid_state.freezed.dart';
 
 /// State for a DataGrid instance.
 @freezed
-class DataGridState<T> with _$DataGridState<T> {
+sealed class DataGridState<T> with _$DataGridState<T> {
   const factory DataGridState({
     /// Current items being displayed.
     @Default([]) List<T> items,

lib/shared/layouts/app_scaffold.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:tatlock_ui/features/control_room/router.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';
 
@@ -54,7 +55,8 @@ class AppScaffold extends StatelessWidget {
     final location = GoRouterState.of(context).matchedLocation;
 
     if (location.startsWith(ControlRoomRoutes.base)) return 1;
-    if (location.startsWith(AppRoutes.parlor)) return 2;
+    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
   }
@@ -63,7 +65,8 @@ class AppScaffold extends StatelessWidget {
     final route = switch (index) {
       0 => AppRoutes.frontHall,
       1 => ControlRoomRoutes.containers,
-      2 => AppRoutes.parlor,
+      2 => SecurityRoutes.users,
+      3 => AppRoutes.parlor,
       _ => AppRoutes.frontHall,
     };
     context.go(route);

lib/shared/layouts/widgets/profile_dropdown.dart

@@ -12,7 +12,7 @@ class ProfileDropdown extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final authState = ref.watch(authNotifierProvider);
+    final authState = ref.watch(authProvider);
     final colorScheme = Theme.of(context).colorScheme;
 
     return authState.when(
@@ -94,7 +94,7 @@ class ProfileDropdown extends ConsumerWidget {
             case 'settings':
               context.go(AppRoutes.settings);
             case 'logout':
-              ref.read(authNotifierProvider.notifier).signOut();
+              ref.read(authProvider.notifier).signOut();
           }
         },
       ),
@@ -106,7 +106,7 @@ class ProfileDropdown extends ConsumerWidget {
           child: CircularProgressIndicator(strokeWidth: 2),
         ),
       ),
-      error: (_, __) => CircleAvatar(
+      error: (err, stack) => CircleAvatar(
         radius: 18,
         backgroundColor: colorScheme.errorContainer,
         child: Icon(

lib/shared/layouts/widgets/top_header_bar.dart

@@ -34,6 +34,11 @@ class TopHeaderBar extends StatelessWidget {
       selectedIcon: Icons.dns,
       label: 'Control Room',
     ),
+    _RoomDestination(
+      icon: Icons.security_outlined,
+      selectedIcon: Icons.security,
+      label: 'Security',
+    ),
     _RoomDestination(
       icon: Icons.lightbulb_outline,
       selectedIcon: Icons.lightbulb,
@@ -76,7 +81,7 @@ class TopHeaderBar extends StatelessWidget {
               'assets/icons/logo.png',
               height: _logoSize,
               width: _logoSize,
-              errorBuilder: (_, __, ___) => Icon(
+              errorBuilder: (context, error, stack) => Icon(
                 Icons.layers,
                 size: 32,
                 color: colorScheme.primary,

nginx.conf

@@ -0,0 +1,87 @@
+worker_processes auto;
+error_log /var/log/nginx/error.log warn;
+pid /var/run/nginx.pid;
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
+    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
+                    '$status $body_bytes_sent "$http_referer" '
+                    '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log /var/log/nginx/access.log main;
+
+    sendfile on;
+    tcp_nopush on;
+    tcp_nodelay on;
+    keepalive_timeout 65;
+    types_hash_max_size 2048;
+
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_proxied any;
+    gzip_comp_level 6;
+    gzip_min_length 1000;
+    gzip_types
+        text/plain
+        text/css
+        text/javascript
+        application/javascript
+        application/json
+        application/x-javascript
+        application/xml
+        application/xml+rss
+        image/svg+xml
+        font/woff
+        font/woff2;
+
+    server {
+        listen 80;
+        server_name _;
+        root /usr/share/nginx/html;
+        index index.html;
+
+        # Security headers
+        add_header X-Frame-Options "SAMEORIGIN" always;
+        add_header X-Content-Type-Options "nosniff" always;
+        add_header X-XSS-Protection "1; mode=block" always;
+
+        # SPA routing: all routes fall back to index.html
+        location / {
+            try_files $uri $uri/ /index.html;
+        }
+
+        # No cache for index.html (ensures updates are picked up)
+        location = /index.html {
+            add_header Cache-Control "no-cache, no-store, must-revalidate";
+            add_header Pragma "no-cache";
+            add_header Expires "0";
+        }
+
+        # Long cache for Flutter assets (content-hash naming ensures freshness)
+        location ~* \.(js|css|woff|woff2|ttf|eot|ico|png|jpg|jpeg|gif|svg|webp)$ {
+            expires 1y;
+            add_header Cache-Control "public, immutable";
+            access_log off;
+        }
+
+        # Cache manifest and version files briefly
+        location ~* \.(json|webmanifest)$ {
+            expires 1h;
+            add_header Cache-Control "public";
+        }
+
+        # Health check endpoint
+        location /health {
+            access_log off;
+            return 200 "OK";
+            add_header Content-Type text/plain;
+        }
+    }
+}

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: 0.3.0+1
+version: 0.3.1+1
 
 environment:
   sdk: ^3.10.4
@@ -32,20 +32,20 @@ dependencies:
     sdk: flutter
 
   # State Management
-  flutter_riverpod: ^2.6.1
-  riverpod_annotation: ^2.6.1
-  hooks_riverpod: ^2.6.1
-  flutter_hooks: ^0.20.5
+  flutter_riverpod: ^3.0.0
+  riverpod_annotation: ^4.0.0
+  hooks_riverpod: ^3.0.0
+  flutter_hooks: ^0.21.0
 
   # Code Generation Support
-  freezed_annotation: ^2.4.4
+  freezed_annotation: ^3.1.0
   json_annotation: ^4.9.0
 
   # Networking
   dio: ^5.7.0
 
   # Routing
-  go_router: ^14.6.2
+  go_router: ^17.0.1
 
   # Storage
   shared_preferences: ^2.3.3
@@ -54,7 +54,7 @@ dependencies:
   flex_color_scheme: ^8.1.0
   flutter_adaptive_scaffold: ^0.3.1
   flutter_markdown: ^0.7.4
-  fl_chart: ^0.69.2
+  fl_chart: ^1.1.1
 
   # Icons
   cupertino_icons: ^1.0.8
@@ -70,19 +70,19 @@ dev_dependencies:
     sdk: flutter
 
   # Linting
-  flutter_lints: ^5.0.0
+  flutter_lints: ^6.0.0
 
   # Code Generation
   build_runner: ^2.4.13
-  freezed: ^2.5.7
+  freezed: ^3.2.3
   json_serializable: ^6.8.0
-  riverpod_generator: ^2.6.3
+  riverpod_generator: ^4.0.0
 
   # Testing
   mocktail: ^1.0.4
 
   # Build tools
-  build: ^2.4.0
+  build: ^4.0.3
   yaml: ^3.1.0
 
 # For information on the generic Dart part of this file, see the