feat: add Control Room with containers and stacks management

- Add Control Room page with stacks sidebar and containers list - Implement container actions (start/stop/restart) with snackbars - Add container logs viewer dialog - Add search/filter for both stacks and containers lists - Add external links for Portainer and Netdata (url_launcher) - Add VS Code launch configuration for Flutter web debugging 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-31 02:01:01 +01:00
parent dd6bcbdbda
commit 3b89ed8c18
42 changed files with 4166 additions and 21 deletions
@@ -0,0 +1,73 @@
+import 'package:dio/dio.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+import '../../../../../core/api/api_client.dart';
+import '../models/container_model.dart';
+
+part 'containers_datasource.g.dart';
+
+/// Remote data source for container operations.
+class ContainersDatasource {
+  ContainersDatasource(this._dio);
+
+  final Dio _dio;
+
+  /// Gets all containers from the API.
+  Future<List<ContainerModel>> getContainers({bool all = true}) async {
+    final response = await _dio.get<List<dynamic>>(
+      '/infrastructure/containers',
+      queryParameters: {'all': all},
+    );
+
+    return response.data!
+        .map((json) => ContainerModel.fromJson(json as Map<String, dynamic>))
+        .toList();
+  }
+
+  /// Gets a single container by ID.
+  Future<ContainerModel> getContainer(String id) async {
+    final response = await _dio.get<Map<String, dynamic>>(
+      '/infrastructure/containers/$id',
+    );
+
+    return ContainerModel.fromJson(response.data!);
+  }
+
+  /// Performs an action on a container.
+  Future<void> containerAction(String id, String action) async {
+    await _dio.post<void>('/infrastructure/containers/$id/$action');
+  }
+
+  /// Gets container logs.
+  Future<String> getContainerLogs(
+    String id, {
+    int? tail,
+    bool timestamps = false,
+  }) async {
+    final response = await _dio.get<String>(
+      '/infrastructure/containers/$id/logs',
+      queryParameters: {
+        if (tail != null) 'tail': tail,
+        'timestamps': timestamps,
+      },
+    );
+
+    return response.data ?? '';
+  }
+
+  /// Removes a container.
+  Future<void> removeContainer(String id, {bool force = false}) async {
+    await _dio.delete<void>(
+      '/infrastructure/containers/$id',
+      queryParameters: {'force': force},
+    );
+  }
+}
+
+/// Provides the containers datasource.
+@riverpod
+ContainersDatasource containersDatasource(Ref ref) {
+  final dio = ref.watch(coreApiClientProvider);
+  return ContainersDatasource(dio);
+}
@@ -0,0 +1,130 @@
+import 'package:freezed_annotation/freezed_annotation.dart';
+
+import '../../domain/entities/container.dart';
+
+part 'container_model.freezed.dart';
+part 'container_model.g.dart';
+
+/// Container data model for API serialization.
+@freezed
+class ContainerModel with _$ContainerModel {
+  const factory ContainerModel({
+    @JsonKey(name: 'Id') required String id,
+    @JsonKey(name: 'Names') required List<String> names,
+    @JsonKey(name: 'Image') required String image,
+    @JsonKey(name: 'State') required String state,
+    @JsonKey(name: 'Status') required String status,
+    @JsonKey(name: 'Labels') @Default({}) Map<String, String> labels,
+    @JsonKey(name: 'Ports') @Default([]) List<PortModel> ports,
+    @JsonKey(name: 'Mounts') @Default([]) List<MountModel> mounts,
+    @JsonKey(name: 'NetworkSettings') NetworkSettingsModel? networkSettings,
+    @JsonKey(name: 'Created') int? created,
+    @JsonKey(name: 'SizeRw') int? sizeRw,
+    @JsonKey(name: 'SizeRootFs') int? sizeRootFs,
+  }) = _ContainerModel;
+
+  const ContainerModel._();
+
+  factory ContainerModel.fromJson(Map<String, dynamic> json) =>
+      _$ContainerModelFromJson(json);
+
+  /// Converts to domain entity.
+  Container toEntity() {
+    // Extract stack name from labels (Docker Compose convention)
+    final stackName = labels['com.docker.compose.project'];
+    final stackId = stackName; // Use project name as ID for now
+
+    return Container(
+      id: id.substring(0, 12),
+      fullId: id,
+      name: names.isNotEmpty ? names.first.replaceFirst('/', '') : id,
+      image: image,
+      state: _parseState(state),
+      status: status,
+      stackName: stackName,
+      stackId: stackId,
+      ports: ports.map((p) => p.toEntity()).toList(),
+      labels: labels,
+      mounts: mounts.map((m) => m.toEntity()).toList(),
+      networks: networkSettings?.networks.keys.toList() ?? [],
+      createdAt: created != null
+          ? DateTime.fromMillisecondsSinceEpoch(created! * 1000)
+          : null,
+    );
+  }
+
+  ContainerState _parseState(String state) {
+    return switch (state.toLowerCase()) {
+      'created' => ContainerState.created,
+      'running' => ContainerState.running,
+      'paused' => ContainerState.paused,
+      'restarting' => ContainerState.restarting,
+      'removing' => ContainerState.removing,
+      'exited' => ContainerState.exited,
+      'dead' => ContainerState.dead,
+      _ => ContainerState.exited,
+    };
+  }
+}
+
+/// Port mapping model.
+@freezed
+class PortModel with _$PortModel {
+  const factory PortModel({
+    @JsonKey(name: 'IP') String? ip,
+    @JsonKey(name: 'PrivatePort') required int privatePort,
+    @JsonKey(name: 'PublicPort') int? publicPort,
+    @JsonKey(name: 'Type') @Default('tcp') String type,
+  }) = _PortModel;
+
+  const PortModel._();
+
+  factory PortModel.fromJson(Map<String, dynamic> json) =>
+      _$PortModelFromJson(json);
+
+  PortMapping toEntity() {
+    return PortMapping(
+      hostIp: ip,
+      hostPort: publicPort,
+      containerPort: privatePort,
+      protocol: type,
+    );
+  }
+}
+
+/// Mount model.
+@freezed
+class MountModel with _$MountModel {
+  const factory MountModel({
+    @JsonKey(name: 'Type') required String type,
+    @JsonKey(name: 'Source') required String source,
+    @JsonKey(name: 'Destination') required String destination,
+    @JsonKey(name: 'Mode') @Default('rw') String mode,
+    @JsonKey(name: 'RW') @Default(true) bool rw,
+  }) = _MountModel;
+
+  const MountModel._();
+
+  factory MountModel.fromJson(Map<String, dynamic> json) =>
+      _$MountModelFromJson(json);
+
+  VolumeMount toEntity() {
+    return VolumeMount(
+      type: type,
+      source: source,
+      destination: destination,
+      mode: rw ? 'rw' : 'ro',
+    );
+  }
+}
+
+/// Network settings model.
+@freezed
+class NetworkSettingsModel with _$NetworkSettingsModel {
+  const factory NetworkSettingsModel({
+    @JsonKey(name: 'Networks') @Default({}) Map<String, dynamic> networks,
+  }) = _NetworkSettingsModel;
+
+  factory NetworkSettingsModel.fromJson(Map<String, dynamic> json) =>
+      _$NetworkSettingsModelFromJson(json);
+}
@@ -0,0 +1,84 @@
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+import '../../domain/entities/container.dart';
+import '../../domain/repositories/container_repository.dart';
+import '../datasources/containers_datasource.dart';
+
+part 'container_repository_impl.g.dart';
+
+/// Implementation of ContainerRepository using remote datasource.
+class ContainerRepositoryImpl implements ContainerRepository {
+  ContainerRepositoryImpl(this._datasource);
+
+  final ContainersDatasource _datasource;
+
+  @override
+  Future<List<Container>> getContainers() async {
+    final models = await _datasource.getContainers();
+    return models.map((m) => m.toEntity()).toList();
+  }
+
+  @override
+  Future<List<Container>> getContainersByStack(String stackId) async {
+    final containers = await getContainers();
+    return containers.where((c) => c.stackId == stackId).toList();
+  }
+
+  @override
+  Future<Container> getContainer(String id) async {
+    final model = await _datasource.getContainer(id);
+    return model.toEntity();
+  }
+
+  @override
+  Future<void> startContainer(String id) async {
+    await _datasource.containerAction(id, 'start');
+  }
+
+  @override
+  Future<void> stopContainer(String id) async {
+    await _datasource.containerAction(id, 'stop');
+  }
+
+  @override
+  Future<void> restartContainer(String id) async {
+    await _datasource.containerAction(id, 'restart');
+  }
+
+  @override
+  Future<void> pauseContainer(String id) async {
+    await _datasource.containerAction(id, 'pause');
+  }
+
+  @override
+  Future<void> unpauseContainer(String id) async {
+    await _datasource.containerAction(id, 'unpause');
+  }
+
+  @override
+  Future<void> removeContainer(String id, {bool force = false}) async {
+    await _datasource.removeContainer(id, force: force);
+  }
+
+  @override
+  Future<String> getContainerLogs(
+    String id, {
+    int? tail,
+    bool timestamps = false,
+  }) async {
+    return _datasource.getContainerLogs(id, tail: tail, timestamps: timestamps);
+  }
+
+  @override
+  Stream<String> streamContainerLogs(String id, {bool timestamps = false}) {
+    // TODO: Implement WebSocket/SSE streaming
+    throw UnimplementedError('Log streaming not yet implemented');
+  }
+}
+
+/// Provides the container repository.
+@riverpod
+ContainerRepository containerRepository(ContainerRepositoryRef ref) {
+  final datasource = ref.watch(containersDatasourceProvider);
+  return ContainerRepositoryImpl(datasource);
+}
@@ -0,0 +1,171 @@
+import 'package:freezed_annotation/freezed_annotation.dart';
+
+part 'container.freezed.dart';
+
+/// Docker container entity.
+@freezed
+class Container with _$Container {
+  const factory Container({
+    /// Container ID (short form).
+    required String id,
+
+    /// Full container ID.
+    required String fullId,
+
+    /// Container name (without leading slash).
+    required String name,
+
+    /// Image name with tag.
+    required String image,
+
+    /// Current container state.
+    required ContainerState state,
+
+    /// Container status string (e.g., "Up 2 hours").
+    required String status,
+
+    /// Stack/project this container belongs to.
+    String? stackName,
+
+    /// Stack ID if part of a stack.
+    String? stackId,
+
+    /// Mapped ports.
+    @Default([]) List<PortMapping> ports,
+
+    /// Environment variables (key-value pairs).
+    @Default({}) Map<String, String> environment,
+
+    /// Container labels.
+    @Default({}) Map<String, String> labels,
+
+    /// Mounted volumes.
+    @Default([]) List<VolumeMount> mounts,
+
+    /// Networks the container is connected to.
+    @Default([]) List<String> networks,
+
+    /// When the container was created.
+    DateTime? createdAt,
+
+    /// When the container was started.
+    DateTime? startedAt,
+
+    /// CPU usage percentage (0-100).
+    double? cpuPercent,
+
+    /// Memory usage in bytes.
+    int? memoryUsage,
+
+    /// Memory limit in bytes.
+    int? memoryLimit,
+  }) = _Container;
+
+  const Container._();
+
+  /// Whether the container is running.
+  bool get isRunning => state == ContainerState.running;
+
+  /// Whether the container can be started.
+  bool get canStart =>
+      state == ContainerState.exited ||
+      state == ContainerState.created ||
+      state == ContainerState.paused;
+
+  /// Whether the container can be stopped.
+  bool get canStop => state == ContainerState.running;
+
+  /// Whether the container can be restarted.
+  bool get canRestart =>
+      state == ContainerState.running || state == ContainerState.exited;
+
+  /// Memory usage as a percentage of the limit.
+  double? get memoryPercent {
+    if (memoryUsage == null || memoryLimit == null || memoryLimit == 0) {
+      return null;
+    }
+    return (memoryUsage! / memoryLimit!) * 100;
+  }
+
+  /// Formatted memory usage string.
+  String get memoryFormatted {
+    if (memoryUsage == null) return '--';
+    return _formatBytes(memoryUsage!);
+  }
+
+  /// Formatted memory limit string.
+  String get memoryLimitFormatted {
+    if (memoryLimit == null) return '--';
+    return _formatBytes(memoryLimit!);
+  }
+
+  String _formatBytes(int bytes) {
+    if (bytes < 1024) return '$bytes B';
+    if (bytes < 1024 * 1024) return '${(bytes / 1024).toStringAsFixed(1)} KB';
+    if (bytes < 1024 * 1024 * 1024) {
+      return '${(bytes / (1024 * 1024)).toStringAsFixed(1)} MB';
+    }
+    return '${(bytes / (1024 * 1024 * 1024)).toStringAsFixed(2)} GB';
+  }
+}
+
+/// Container state.
+enum ContainerState {
+  created,
+  running,
+  paused,
+  restarting,
+  removing,
+  exited,
+  dead,
+}
+
+/// Port mapping configuration.
+@freezed
+class PortMapping with _$PortMapping {
+  const factory PortMapping({
+    /// Host IP (usually 0.0.0.0).
+    String? hostIp,
+
+    /// Port on the host.
+    int? hostPort,
+
+    /// Port inside the container.
+    required int containerPort,
+
+    /// Protocol (tcp/udp).
+    @Default('tcp') String protocol,
+  }) = _PortMapping;
+
+  const PortMapping._();
+
+  /// Formatted string representation.
+  String get formatted {
+    if (hostPort == null) return '$containerPort/$protocol';
+    final ip = hostIp == '0.0.0.0' ? '' : '$hostIp:';
+    return '$ip$hostPort->$containerPort/$protocol';
+  }
+}
+
+/// Volume mount configuration.
+@freezed
+class VolumeMount with _$VolumeMount {
+  const factory VolumeMount({
+    /// Mount type (bind, volume, tmpfs).
+    required String type,
+
+    /// Source path or volume name.
+    required String source,
+
+    /// Destination path in container.
+    required String destination,
+
+    /// Mount mode (rw, ro).
+    @Default('rw') String mode,
+  }) = _VolumeMount;
+
+  const VolumeMount._();
+
+  /// Whether the mount is read-only.
+  bool get isReadOnly => mode == 'ro';
+}
@@ -0,0 +1,44 @@
+import '../entities/container.dart';
+
+/// Repository interface for container operations.
+abstract class ContainerRepository {
+  /// Gets all containers.
+  Future<List<Container>> getContainers();
+
+  /// Gets containers filtered by stack.
+  Future<List<Container>> getContainersByStack(String stackId);
+
+  /// Gets a single container by ID.
+  Future<Container> getContainer(String id);
+
+  /// Starts a container.
+  Future<void> startContainer(String id);
+
+  /// Stops a container.
+  Future<void> stopContainer(String id);
+
+  /// Restarts a container.
+  Future<void> restartContainer(String id);
+
+  /// Pauses a container.
+  Future<void> pauseContainer(String id);
+
+  /// Unpauses a container.
+  Future<void> unpauseContainer(String id);
+
+  /// Removes a container.
+  Future<void> removeContainer(String id, {bool force = false});
+
+  /// Gets container logs.
+  Future<String> getContainerLogs(
+    String id, {
+    int? tail,
+    bool timestamps = false,
+  });
+
+  /// Streams container logs in real-time.
+  Stream<String> streamContainerLogs(
+    String id, {
+    bool timestamps = false,
+  });
+}
@@ -0,0 +1,396 @@
+import 'package:flutter/material.dart' hide Container;
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../../domain/entities/container.dart';
+import '../providers/containers_provider.dart';
+import '../widgets/container_logs_viewer.dart';
+import '../widgets/container_status_badge.dart';
+
+/// Page displaying the list of containers using DataGrid.
+class ContainersListPage extends ConsumerWidget {
+  const ContainersListPage({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final containersAsync = ref.watch(containersProvider);
+    final colorScheme = Theme.of(context).colorScheme;
+
+    // Listen for container action results to show snackbars
+    ref.listen<AsyncValue<void>>(containerActionsProvider, (previous, next) {
+      if (previous?.isLoading == true && !next.isLoading) {
+        next.whenOrNull(
+          data: (_) {
+            ScaffoldMessenger.of(context).showSnackBar(
+              SnackBar(
+                content: const Text('Container action completed'),
+                backgroundColor: colorScheme.primaryContainer,
+                behavior: SnackBarBehavior.floating,
+                duration: const Duration(seconds: 2),
+              ),
+            );
+          },
+          error: (error, _) {
+            ScaffoldMessenger.of(context).showSnackBar(
+              SnackBar(
+                content: Row(
+                  children: [
+                    Icon(Icons.error_outline, color: colorScheme.onErrorContainer),
+                    const SizedBox(width: 8),
+                    Expanded(
+                      child: Text(
+                        'Container action failed: $error',
+                        style: TextStyle(color: colorScheme.onErrorContainer),
+                      ),
+                    ),
+                  ],
+                ),
+                backgroundColor: colorScheme.errorContainer,
+                behavior: SnackBarBehavior.floating,
+                duration: const Duration(seconds: 4),
+              ),
+            );
+          },
+        );
+      }
+    });
+
+    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),
+                    );
+                  },
+                ),
+        ),
+      ],
+    );
+  }
+}
+
+class _ContainerListTile extends StatelessWidget {
+  const _ContainerListTile({
+    required this.container,
+    required this.onAction,
+    required this.onViewLogs,
+  });
+
+  final Container container;
+  final void Function(String) onAction;
+  final VoidCallback onViewLogs;
+
+  @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,
+                  ),
+                ],
+              ),
+            ),
+            // 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,
+                style: TextStyle(
+                  fontSize: 12,
+                  color: colorScheme.onSurfaceVariant,
+                ),
+                textAlign: TextAlign.end,
+              ),
+            ),
+            // 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'),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
@@ -0,0 +1,92 @@
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+import '../../../stacks/presentation/providers/stacks_provider.dart';
+import '../../data/repositories/container_repository_impl.dart';
+import '../../domain/entities/container.dart';
+
+part 'containers_provider.g.dart';
+
+/// Provides all containers.
+@riverpod
+Future<List<Container>> allContainers(AllContainersRef 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 {
+  final repository = ref.watch(containerRepositoryProvider);
+  final selectedStack = ref.watch(selectedStackProvider);
+
+  if (selectedStack == null) {
+    return repository.getContainers();
+  }
+
+  return repository.getContainersByStack(selectedStack);
+}
+
+/// Provides a single container by ID.
+@riverpod
+Future<Container> container(ContainerRef ref, String id) async {
+  final repository = ref.watch(containerRepositoryProvider);
+  return repository.getContainer(id);
+}
+
+/// Controller for container actions.
+@riverpod
+class ContainerActions extends _$ContainerActions {
+  @override
+  AsyncValue<void> build() => const AsyncValue.data(null);
+
+  Future<void> start(String id) async {
+    state = const AsyncValue.loading();
+    state = await AsyncValue.guard(() async {
+      final repository = ref.read(containerRepositoryProvider);
+      await repository.startContainer(id);
+      ref.invalidate(allContainersProvider);
+      ref.invalidate(containersProvider);
+    });
+  }
+
+  Future<void> stop(String id) async {
+    state = const AsyncValue.loading();
+    state = await AsyncValue.guard(() async {
+      final repository = ref.read(containerRepositoryProvider);
+      await repository.stopContainer(id);
+      ref.invalidate(allContainersProvider);
+      ref.invalidate(containersProvider);
+    });
+  }
+
+  Future<void> restart(String id) async {
+    state = const AsyncValue.loading();
+    state = await AsyncValue.guard(() async {
+      final repository = ref.read(containerRepositoryProvider);
+      await repository.restartContainer(id);
+      ref.invalidate(allContainersProvider);
+      ref.invalidate(containersProvider);
+    });
+  }
+
+  Future<void> remove(String id, {bool force = false}) async {
+    state = const AsyncValue.loading();
+    state = await AsyncValue.guard(() async {
+      final repository = ref.read(containerRepositoryProvider);
+      await repository.removeContainer(id, force: force);
+      ref.invalidate(allContainersProvider);
+      ref.invalidate(containersProvider);
+    });
+  }
+}
+
+/// Container logs provider.
+@riverpod
+Future<String> containerLogs(
+  ContainerLogsRef ref,
+  String id, {
+  int? tail = 100,
+}) async {
+  final repository = ref.watch(containerRepositoryProvider);
+  return repository.getContainerLogs(id, tail: tail);
+}
@@ -0,0 +1,172 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../providers/containers_provider.dart';
+
+/// Widget for displaying container logs.
+class ContainerLogsViewer extends ConsumerStatefulWidget {
+  const ContainerLogsViewer({
+    super.key,
+    required this.containerId,
+    required this.containerName,
+  });
+
+  final String containerId;
+  final String containerName;
+
+  @override
+  ConsumerState<ContainerLogsViewer> createState() =>
+      _ContainerLogsViewerState();
+}
+
+class _ContainerLogsViewerState extends ConsumerState<ContainerLogsViewer> {
+  final _scrollController = ScrollController();
+  int _tailLines = 100;
+  bool _autoScroll = true;
+
+  @override
+  void dispose() {
+    _scrollController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final logsAsync = ref.watch(
+      containerLogsProvider(widget.containerId, tail: _tailLines),
+    );
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        // Toolbar
+        Container(
+          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+          decoration: BoxDecoration(
+            color: colorScheme.surfaceContainerHighest,
+            border: Border(
+              bottom: BorderSide(color: colorScheme.outlineVariant),
+            ),
+          ),
+          child: Row(
+            children: [
+              Text(
+                widget.containerName,
+                style: Theme.of(context).textTheme.titleSmall?.copyWith(
+                      fontWeight: FontWeight.w600,
+                    ),
+              ),
+              const Spacer(),
+              // Tail lines selector
+              DropdownButton<int>(
+                value: _tailLines,
+                items: const [
+                  DropdownMenuItem(value: 50, child: Text('50 lines')),
+                  DropdownMenuItem(value: 100, child: Text('100 lines')),
+                  DropdownMenuItem(value: 500, child: Text('500 lines')),
+                  DropdownMenuItem(value: 1000, child: Text('1000 lines')),
+                ],
+                onChanged: (value) {
+                  if (value != null) {
+                    setState(() => _tailLines = value);
+                  }
+                },
+                underline: const SizedBox.shrink(),
+              ),
+              const SizedBox(width: 8),
+              IconButton(
+                icon: const Icon(Icons.copy, size: 18),
+                tooltip: 'Copy logs',
+                onPressed: logsAsync.whenOrNull(
+                  data: (logs) => () async {
+                    await Clipboard.setData(ClipboardData(text: logs));
+                    if (context.mounted) {
+                      ScaffoldMessenger.of(context).showSnackBar(
+                        const SnackBar(content: Text('Logs copied to clipboard')),
+                      );
+                    }
+                  },
+                ),
+              ),
+              IconButton(
+                icon: const Icon(Icons.refresh, size: 18),
+                tooltip: 'Refresh',
+                onPressed: () {
+                  ref.invalidate(
+                    containerLogsProvider(widget.containerId, tail: _tailLines),
+                  );
+                },
+              ),
+            ],
+          ),
+        ),
+        // Logs content
+        Expanded(
+          child: logsAsync.when(
+            loading: () => const Center(child: CircularProgressIndicator()),
+            error: (error, _) => Center(
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Icon(Icons.error_outline, color: colorScheme.error, size: 48),
+                  const SizedBox(height: 16),
+                  Text('Failed to load logs'),
+                  const SizedBox(height: 8),
+                  Text(
+                    error.toString(),
+                    style: TextStyle(color: colorScheme.outline),
+                  ),
+                ],
+              ),
+            ),
+            data: (logs) => logs.isEmpty
+                ? Center(
+                    child: Text(
+                      'No logs available',
+                      style: TextStyle(color: colorScheme.outline),
+                    ),
+                  )
+                : Container(
+                    color: Colors.black87,
+                    padding: const EdgeInsets.all(12),
+                    child: SelectableText(
+                      logs,
+                      style: const TextStyle(
+                        fontFamily: 'monospace',
+                        fontSize: 12,
+                        color: Colors.white70,
+                        height: 1.4,
+                      ),
+                    ),
+                  ),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+/// Shows container logs in a bottom sheet.
+void showContainerLogs(
+  BuildContext context, {
+  required String containerId,
+  required String containerName,
+}) {
+  showModalBottomSheet(
+    context: context,
+    isScrollControlled: true,
+    useSafeArea: true,
+    builder: (context) => DraggableScrollableSheet(
+      initialChildSize: 0.7,
+      minChildSize: 0.3,
+      maxChildSize: 0.95,
+      expand: false,
+      builder: (context, scrollController) => ContainerLogsViewer(
+        containerId: containerId,
+        containerName: containerName,
+      ),
+    ),
+  );
+}
@@ -0,0 +1,90 @@
+import 'package:flutter/material.dart' hide Container;
+
+import '../../domain/entities/container.dart';
+
+/// Status badge for container state.
+class ContainerStatusBadge extends StatelessWidget {
+  const ContainerStatusBadge({
+    super.key,
+    required this.state,
+    this.showLabel = true,
+  });
+
+  final ContainerState state;
+  final bool showLabel;
+
+  @override
+  Widget build(BuildContext context) {
+    final (color, icon, label) = _getStateStyle(context);
+
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        color: color.withValues(alpha: 0.15),
+        borderRadius: BorderRadius.circular(4),
+        border: Border.all(color: color.withValues(alpha: 0.3)),
+      ),
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Icon(icon, size: 14, color: color),
+            if (showLabel) ...[
+              const SizedBox(width: 4),
+              Text(
+                label,
+                style: TextStyle(
+                  fontSize: 12,
+                  fontWeight: FontWeight.w500,
+                  color: color,
+                ),
+              ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+
+  (Color, IconData, String) _getStateStyle(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return switch (state) {
+      ContainerState.running => (
+          Colors.green,
+          Icons.play_circle,
+          'Running',
+        ),
+      ContainerState.paused => (
+          Colors.orange,
+          Icons.pause_circle,
+          'Paused',
+        ),
+      ContainerState.restarting => (
+          Colors.blue,
+          Icons.refresh,
+          'Restarting',
+        ),
+      ContainerState.exited => (
+          colorScheme.outline,
+          Icons.stop_circle,
+          'Exited',
+        ),
+      ContainerState.created => (
+          colorScheme.outline,
+          Icons.circle_outlined,
+          'Created',
+        ),
+      ContainerState.removing => (
+          Colors.red,
+          Icons.delete,
+          'Removing',
+        ),
+      ContainerState.dead => (
+          colorScheme.error,
+          Icons.error,
+          'Dead',
+        ),
+    };
+  }
+}
@@ -0,0 +1,375 @@
+import 'package:flutter/material.dart' hide Stack;
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+import '../../../../core/config/app_config.dart';
+import '../../containers/presentation/pages/containers_list_page.dart';
+import '../../stacks/data/repositories/stack_repository_impl.dart';
+import '../../stacks/domain/entities/stack.dart';
+import '../../stacks/presentation/providers/stacks_provider.dart';
+import '../../stacks/presentation/widgets/stack_list_tile.dart';
+
+/// Main Control Room page with stacks sidebar and containers view.
+class ControlRoomPage extends ConsumerWidget {
+  const ControlRoomPage({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return Scaffold(
+      body: Row(
+        children: [
+          // Stacks sidebar
+          const _StacksSidebar(),
+          // Divider
+          VerticalDivider(
+            width: 1,
+            thickness: 1,
+            color: Theme.of(context).colorScheme.outlineVariant,
+          ),
+          // Main content area
+          const Expanded(
+            child: ContainersListPage(),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+/// Sidebar showing stacks list.
+class _StacksSidebar extends ConsumerWidget {
+  const _StacksSidebar();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final stacksAsync = ref.watch(stacksProvider);
+    final selectedStack = ref.watch(selectedStackProvider);
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return SizedBox(
+      width: 280,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          // Header
+          Container(
+            padding: const EdgeInsets.all(16),
+            decoration: BoxDecoration(
+              color: colorScheme.surfaceContainerHighest,
+              border: Border(
+                bottom: BorderSide(color: colorScheme.outlineVariant),
+              ),
+            ),
+            child: Row(
+              children: [
+                Icon(
+                  Icons.layers,
+                  color: colorScheme.primary,
+                ),
+                const SizedBox(width: 12),
+                Text(
+                  'Stacks',
+                  style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                        fontWeight: FontWeight.w600,
+                      ),
+                ),
+                const Spacer(),
+                IconButton(
+                  icon: const Icon(Icons.refresh, size: 20),
+                  tooltip: 'Refresh stacks',
+                  onPressed: () => ref.invalidate(stacksProvider),
+                ),
+              ],
+            ),
+          ),
+          // All containers option
+          ListTile(
+            selected: selectedStack == null,
+            selectedTileColor: colorScheme.primaryContainer.withValues(alpha: 0.3),
+            leading: Icon(
+              Icons.all_inbox,
+              color: selectedStack == null
+                  ? colorScheme.primary
+                  : colorScheme.onSurfaceVariant,
+            ),
+            title: const Text('All Containers'),
+            onTap: () => ref.read(selectedStackProvider.notifier).clear(),
+          ),
+          const Divider(height: 1),
+          // Stacks list
+          Expanded(
+            child: stacksAsync.when(
+              loading: () => const Center(
+                child: CircularProgressIndicator(),
+              ),
+              error: (error, _) => Center(
+                child: Padding(
+                  padding: const EdgeInsets.all(16),
+                  child: Column(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      Icon(
+                        Icons.error_outline,
+                        color: colorScheme.error,
+                      ),
+                      const SizedBox(height: 8),
+                      Text(
+                        'Failed to load stacks',
+                        style: TextStyle(color: colorScheme.error),
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+              data: (stacks) => _StacksList(
+                stacks: stacks,
+                selectedStackId: selectedStack,
+                onStackSelected: (id) =>
+                    ref.read(selectedStackProvider.notifier).select(id),
+                onStackAction: (id, action) =>
+                    _handleStackAction(context, ref, id, action),
+              ),
+            ),
+          ),
+          // External links
+          const Divider(height: 1),
+          Padding(
+            padding: const EdgeInsets.all(8),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                Text(
+                  'External',
+                  style: Theme.of(context).textTheme.labelSmall?.copyWith(
+                        color: colorScheme.outline,
+                      ),
+                ),
+                const SizedBox(height: 4),
+                Wrap(
+                  spacing: 4,
+                  children: [
+                    _ExternalLinkChip(
+                      label: 'Portainer',
+                      icon: Icons.dashboard,
+                      onTap: () => launchUrl(
+                        Uri.parse(AppConfig.portainerUrl),
+                        mode: LaunchMode.externalApplication,
+                      ),
+                    ),
+                    _ExternalLinkChip(
+                      label: 'Netdata',
+                      icon: Icons.analytics,
+                      onTap: () => launchUrl(
+                        Uri.parse(AppConfig.netdataUrl),
+                        mode: LaunchMode.externalApplication,
+                      ),
+                    ),
+                  ],
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Future<void> _handleStackAction(
+    BuildContext context,
+    WidgetRef ref,
+    String stackId,
+    String action,
+  ) async {
+    final repository = ref.read(stackRepositoryProvider);
+    final messenger = ScaffoldMessenger.of(context);
+    final colorScheme = Theme.of(context).colorScheme;
+
+    try {
+      switch (action) {
+        case 'start':
+          await repository.startStack(stackId);
+        case 'stop':
+          await repository.stopStack(stackId);
+        case 'restart':
+          await repository.restartStack(stackId);
+      }
+
+      // Refresh data
+      ref.invalidate(stacksProvider);
+
+      // Show success snackbar
+      messenger.showSnackBar(
+        SnackBar(
+          content: Text('Stack ${action}ed successfully'),
+          backgroundColor: colorScheme.primaryContainer,
+          behavior: SnackBarBehavior.floating,
+          duration: const Duration(seconds: 2),
+        ),
+      );
+    } catch (e) {
+      messenger.showSnackBar(
+        SnackBar(
+          content: Row(
+            children: [
+              Icon(Icons.error_outline, color: colorScheme.onErrorContainer),
+              const SizedBox(width: 8),
+              Expanded(
+                child: Text(
+                  'Failed to $action stack: ${e.toString()}',
+                  style: TextStyle(color: colorScheme.onErrorContainer),
+                ),
+              ),
+            ],
+          ),
+          backgroundColor: colorScheme.errorContainer,
+          behavior: SnackBarBehavior.floating,
+          duration: const Duration(seconds: 4),
+        ),
+      );
+    }
+  }
+}
+
+class _StacksList extends StatefulWidget {
+  const _StacksList({
+    required this.stacks,
+    required this.selectedStackId,
+    required this.onStackSelected,
+    required this.onStackAction,
+  });
+
+  final List<Stack> stacks;
+  final String? selectedStackId;
+  final void Function(String) onStackSelected;
+  final void Function(String, String) onStackAction;
+
+  @override
+  State<_StacksList> createState() => _StacksListState();
+}
+
+class _StacksListState extends State<_StacksList> {
+  final _searchController = TextEditingController();
+  String _searchQuery = '';
+
+  @override
+  void dispose() {
+    _searchController.dispose();
+    super.dispose();
+  }
+
+  List<Stack> get _filteredStacks {
+    if (_searchQuery.isEmpty) return widget.stacks;
+    final query = _searchQuery.toLowerCase();
+    return widget.stacks.where((s) {
+      return s.name.toLowerCase().contains(query);
+    }).toList();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final filtered = _filteredStacks;
+
+    return Column(
+      children: [
+        // Search field
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+          child: TextField(
+            controller: _searchController,
+            decoration: InputDecoration(
+              hintText: 'Search stacks...',
+              prefixIcon: const Icon(Icons.search, size: 18),
+              suffixIcon: _searchQuery.isNotEmpty
+                  ? IconButton(
+                      icon: const Icon(Icons.clear, size: 16),
+                      onPressed: () {
+                        _searchController.clear();
+                        setState(() => _searchQuery = '');
+                      },
+                    )
+                  : null,
+              isDense: true,
+              contentPadding: const EdgeInsets.symmetric(
+                horizontal: 12,
+                vertical: 8,
+              ),
+              border: OutlineInputBorder(
+                borderRadius: BorderRadius.circular(8),
+              ),
+            ),
+            style: const TextStyle(fontSize: 13),
+            onChanged: (value) => setState(() => _searchQuery = value),
+          ),
+        ),
+        // Stack list or empty state
+        Expanded(
+          child: filtered.isEmpty
+              ? Center(
+                  child: Padding(
+                    padding: const EdgeInsets.all(16),
+                    child: Column(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        Icon(
+                          _searchQuery.isEmpty
+                              ? Icons.layers_clear
+                              : Icons.search_off,
+                          size: 32,
+                          color: colorScheme.outline,
+                        ),
+                        const SizedBox(height: 8),
+                        Text(
+                          _searchQuery.isEmpty
+                              ? 'No stacks found'
+                              : 'No stacks match "$_searchQuery"',
+                          style: TextStyle(
+                            color: colorScheme.outline,
+                            fontSize: 13,
+                          ),
+                          textAlign: TextAlign.center,
+                        ),
+                      ],
+                    ),
+                  ),
+                )
+              : ListView.builder(
+                  itemCount: filtered.length,
+                  itemBuilder: (context, index) {
+                    final stack = filtered[index];
+                    return StackListTile(
+                      stack: stack,
+                      isSelected: stack.id == widget.selectedStackId,
+                      onTap: () => widget.onStackSelected(stack.id),
+                      onStart: () => widget.onStackAction(stack.id, 'start'),
+                      onStop: () => widget.onStackAction(stack.id, 'stop'),
+                      onRestart: () => widget.onStackAction(stack.id, 'restart'),
+                    );
+                  },
+                ),
+        ),
+      ],
+    );
+  }
+}
+
+class _ExternalLinkChip extends StatelessWidget {
+  const _ExternalLinkChip({
+    required this.label,
+    required this.icon,
+    required this.onTap,
+  });
+
+  final String label;
+  final IconData icon;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return ActionChip(
+      avatar: Icon(icon, size: 16),
+      label: Text(label),
+      onPressed: onTap,
+    );
+  }
+}
@@ -0,0 +1,84 @@
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+import '../../../containers/data/datasources/containers_datasource.dart';
+import '../../../containers/domain/entities/container.dart';
+import '../../domain/entities/stack.dart';
+
+part 'stacks_datasource.g.dart';
+
+/// Data source for stack operations.
+///
+/// Stacks are derived from container labels (Docker Compose convention).
+/// The Core API doesn't have a dedicated stacks endpoint, so we aggregate
+/// from containers.
+class StacksDatasource {
+  StacksDatasource(this._containersDatasource);
+
+  final ContainersDatasource _containersDatasource;
+
+  /// Gets all stacks by aggregating container data.
+  Future<List<Stack>> getStacks() async {
+    final containers = await _containersDatasource.getContainers();
+    final containerEntities = containers.map((c) => c.toEntity()).toList();
+
+    // Group containers by stack name
+    final stackMap = <String, List<Container>>{};
+
+    for (final container in containerEntities) {
+      final stackName = container.stackName;
+      if (stackName != null) {
+        stackMap.putIfAbsent(stackName, () => []).add(container);
+      }
+    }
+
+    // Convert to Stack entities
+    return stackMap.entries.map((entry) {
+      final name = entry.key;
+      final stackContainers = entry.value;
+      final runningCount = stackContainers.where((c) => c.isRunning).length;
+
+      return Stack(
+        id: name, // Use name as ID for compose stacks
+        name: name,
+        type: StackType.compose,
+        status: runningCount == stackContainers.length
+            ? StackStatus.active
+            : runningCount > 0
+                ? StackStatus.active
+                : StackStatus.inactive,
+        containerCount: stackContainers.length,
+        runningCount: runningCount,
+      );
+    }).toList()
+      ..sort((a, b) => a.name.compareTo(b.name));
+  }
+
+  /// Gets a single stack by ID.
+  Future<Stack> getStack(String id) async {
+    final stacks = await getStacks();
+    return stacks.firstWhere(
+      (s) => s.id == id,
+      orElse: () => throw Exception('Stack not found: $id'),
+    );
+  }
+
+  /// Performs an action on all containers in a stack.
+  Future<void> stackAction(String stackId, String action) async {
+    final containers = await _containersDatasource.getContainers();
+    final stackContainers = containers
+        .map((c) => c.toEntity())
+        .where((c) => c.stackId == stackId)
+        .toList();
+
+    for (final container in stackContainers) {
+      await _containersDatasource.containerAction(container.fullId, action);
+    }
+  }
+}
+
+/// Provides the stacks datasource.
+@riverpod
+StacksDatasource stacksDatasource(StacksDatasourceRef ref) {
+  final containersDatasource = ref.watch(containersDatasourceProvider);
+  return StacksDatasource(containersDatasource);
+}
@@ -0,0 +1,62 @@
+import 'package:freezed_annotation/freezed_annotation.dart';
+
+import '../../domain/entities/stack.dart';
+
+part 'stack_model.freezed.dart';
+part 'stack_model.g.dart';
+
+/// Stack data model for API serialization.
+@freezed
+class StackModel with _$StackModel {
+  const factory StackModel({
+    required String id,
+    required String name,
+    @JsonKey(name: 'type') String? typeString,
+    @JsonKey(name: 'status') String? statusString,
+    @JsonKey(name: 'container_count') @Default(0) int containerCount,
+    @JsonKey(name: 'running_count') @Default(0) int runningCount,
+    @JsonKey(name: 'compose_file') String? composeFile,
+    String? environment,
+    @JsonKey(name: 'created_at') String? createdAt,
+    @JsonKey(name: 'updated_at') String? updatedAt,
+  }) = _StackModel;
+
+  const StackModel._();
+
+  factory StackModel.fromJson(Map<String, dynamic> json) =>
+      _$StackModelFromJson(json);
+
+  /// Converts to domain entity.
+  Stack toEntity() {
+    return Stack(
+      id: id,
+      name: name,
+      type: _parseStackType(typeString),
+      status: _parseStackStatus(statusString),
+      containerCount: containerCount,
+      runningCount: runningCount,
+      composeFile: composeFile,
+      environment: environment,
+      createdAt: createdAt != null ? DateTime.tryParse(createdAt!) : null,
+      updatedAt: updatedAt != null ? DateTime.tryParse(updatedAt!) : null,
+    );
+  }
+
+  StackType _parseStackType(String? type) {
+    return switch (type?.toLowerCase()) {
+      'compose' => StackType.compose,
+      'swarm' => StackType.swarm,
+      'kubernetes' || 'k8s' => StackType.kubernetes,
+      _ => StackType.compose,
+    };
+  }
+
+  StackStatus _parseStackStatus(String? status) {
+    return switch (status?.toLowerCase()) {
+      'active' || 'running' => StackStatus.active,
+      'inactive' || 'stopped' => StackStatus.inactive,
+      'error' => StackStatus.error,
+      _ => StackStatus.unknown,
+    };
+  }
+}
@@ -0,0 +1,52 @@
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+import '../../domain/entities/stack.dart';
+import '../../domain/repositories/stack_repository.dart';
+import '../datasources/stacks_datasource.dart';
+
+part 'stack_repository_impl.g.dart';
+
+/// Implementation of StackRepository.
+class StackRepositoryImpl implements StackRepository {
+  StackRepositoryImpl(this._datasource);
+
+  final StacksDatasource _datasource;
+
+  @override
+  Future<List<Stack>> getStacks() async {
+    return _datasource.getStacks();
+  }
+
+  @override
+  Future<Stack> getStack(String id) async {
+    return _datasource.getStack(id);
+  }
+
+  @override
+  Future<void> startStack(String id) async {
+    await _datasource.stackAction(id, 'start');
+  }
+
+  @override
+  Future<void> stopStack(String id) async {
+    await _datasource.stackAction(id, 'stop');
+  }
+
+  @override
+  Future<void> restartStack(String id) async {
+    await _datasource.stackAction(id, 'restart');
+  }
+
+  @override
+  Future<void> removeStack(String id) async {
+    // TODO: Implement stack removal
+    throw UnimplementedError('Stack removal not yet implemented');
+  }
+}
+
+/// Provides the stack repository.
+@riverpod
+StackRepository stackRepository(StackRepositoryRef ref) {
+  final datasource = ref.watch(stacksDatasourceProvider);
+  return StackRepositoryImpl(datasource);
+}
@@ -0,0 +1,66 @@
+import 'package:freezed_annotation/freezed_annotation.dart';
+
+part 'stack.freezed.dart';
+
+/// Container orchestration stack (Docker Compose stack).
+@freezed
+class Stack with _$Stack {
+  const factory Stack({
+    /// Unique stack identifier.
+    required String id,
+
+    /// Stack name.
+    required String name,
+
+    /// Stack type (compose, swarm, kubernetes).
+    @Default(StackType.compose) StackType type,
+
+    /// Current stack status.
+    @Default(StackStatus.unknown) StackStatus status,
+
+    /// Number of containers in the stack.
+    @Default(0) int containerCount,
+
+    /// Number of running containers.
+    @Default(0) int runningCount,
+
+    /// Path to the compose file (if applicable).
+    String? composeFile,
+
+    /// Environment name (e.g., production, staging).
+    String? environment,
+
+    /// When the stack was created.
+    DateTime? createdAt,
+
+    /// When the stack was last updated.
+    DateTime? updatedAt,
+  }) = _Stack;
+
+  const Stack._();
+
+  /// Whether all containers in the stack are running.
+  bool get isHealthy => runningCount == containerCount && containerCount > 0;
+
+  /// Whether the stack has any running containers.
+  bool get hasRunningContainers => runningCount > 0;
+
+  /// Whether the stack is partially running.
+  bool get isPartial =>
+      runningCount > 0 && runningCount < containerCount;
+}
+
+/// Stack orchestration type.
+enum StackType {
+  compose,
+  swarm,
+  kubernetes,
+}
+
+/// Stack status.
+enum StackStatus {
+  active,
+  inactive,
+  error,
+  unknown,
+}
@@ -0,0 +1,22 @@
+import '../entities/stack.dart';
+
+/// Repository interface for stack operations.
+abstract class StackRepository {
+  /// Gets all stacks.
+  Future<List<Stack>> getStacks();
+
+  /// Gets a single stack by ID.
+  Future<Stack> getStack(String id);
+
+  /// Starts all containers in a stack.
+  Future<void> startStack(String id);
+
+  /// Stops all containers in a stack.
+  Future<void> stopStack(String id);
+
+  /// Restarts all containers in a stack.
+  Future<void> restartStack(String id);
+
+  /// Removes a stack (stops and removes containers).
+  Future<void> removeStack(String id);
+}
@@ -0,0 +1,35 @@
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+import '../../data/repositories/stack_repository_impl.dart';
+import '../../domain/entities/stack.dart';
+
+part 'stacks_provider.g.dart';
+
+/// Provides the list of all stacks.
+@riverpod
+Future<List<Stack>> stacks(StacksRef 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 {
+  final repository = ref.watch(stackRepositoryProvider);
+  return repository.getStack(id);
+}
+
+/// Currently selected stack ID (null = all containers).
+@riverpod
+class SelectedStack extends _$SelectedStack {
+  @override
+  String? build() => null;
+
+  void select(String? stackId) {
+    state = stackId;
+  }
+
+  void clear() {
+    state = null;
+  }
+}
@@ -0,0 +1,131 @@
+import 'package:flutter/material.dart' hide Stack;
+
+import '../../domain/entities/stack.dart';
+
+/// List tile for displaying a stack in the sidebar.
+class StackListTile extends StatelessWidget {
+  const StackListTile({
+    super.key,
+    required this.stack,
+    required this.isSelected,
+    required this.onTap,
+    this.onStart,
+    this.onStop,
+    this.onRestart,
+  });
+
+  final Stack stack;
+  final bool isSelected;
+  final VoidCallback onTap;
+  final VoidCallback? onStart;
+  final VoidCallback? onStop;
+  final VoidCallback? onRestart;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return ListTile(
+      selected: isSelected,
+      selectedTileColor: colorScheme.primaryContainer.withValues(alpha: 0.3),
+      leading: _buildStatusIndicator(context),
+      title: Text(
+        stack.name,
+        style: const TextStyle(fontWeight: FontWeight.w500),
+      ),
+      subtitle: Text(
+        '${stack.runningCount}/${stack.containerCount} containers',
+        style: TextStyle(
+          fontSize: 12,
+          color: colorScheme.onSurfaceVariant,
+        ),
+      ),
+      trailing: _buildActions(context),
+      onTap: onTap,
+    );
+  }
+
+  Widget _buildStatusIndicator(BuildContext context) {
+    final color = switch (stack.status) {
+      StackStatus.active when stack.isHealthy => Colors.green,
+      StackStatus.active when stack.isPartial => Colors.orange,
+      StackStatus.active => Colors.green,
+      StackStatus.inactive => Theme.of(context).colorScheme.outline,
+      StackStatus.error => Theme.of(context).colorScheme.error,
+      StackStatus.unknown => Theme.of(context).colorScheme.outline,
+    };
+
+    return Container(
+      width: 12,
+      height: 12,
+      decoration: BoxDecoration(
+        shape: BoxShape.circle,
+        color: color,
+        boxShadow: [
+          if (stack.isHealthy)
+            BoxShadow(
+              color: color.withValues(alpha: 0.4),
+              blurRadius: 4,
+              spreadRadius: 1,
+            ),
+        ],
+      ),
+    );
+  }
+
+  Widget? _buildActions(BuildContext context) {
+    if (onStart == null && onStop == null && onRestart == null) {
+      return null;
+    }
+
+    return PopupMenuButton<String>(
+      icon: const Icon(Icons.more_vert, size: 18),
+      tooltip: 'Stack actions',
+      onSelected: (action) {
+        switch (action) {
+          case 'start':
+            onStart?.call();
+          case 'stop':
+            onStop?.call();
+          case 'restart':
+            onRestart?.call();
+        }
+      },
+      itemBuilder: (context) => [
+        if (onStart != null && !stack.isHealthy)
+          const PopupMenuItem(
+            value: 'start',
+            child: Row(
+              children: [
+                Icon(Icons.play_arrow, size: 18),
+                SizedBox(width: 8),
+                Text('Start'),
+              ],
+            ),
+          ),
+        if (onStop != null && stack.hasRunningContainers)
+          const PopupMenuItem(
+            value: 'stop',
+            child: Row(
+              children: [
+                Icon(Icons.stop, size: 18),
+                SizedBox(width: 8),
+                Text('Stop'),
+              ],
+            ),
+          ),
+        if (onRestart != null && stack.hasRunningContainers)
+          const PopupMenuItem(
+            value: 'restart',
+            child: Row(
+              children: [
+                Icon(Icons.refresh, size: 18),
+                SizedBox(width: 8),
+                Text('Restart'),
+              ],
+            ),
+          ),
+      ],
+    );
+  }
+}