chore: add project config files and assets

- Add Claude plans directory
- Add original logo art assets
- Add DevTools options
- Add Core API spec documentation
- Add iOS/macOS Podfiles
- Add logs/ to gitignore

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

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

.claude/settings.local.json

@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "mcp__chrome-devtools__take_screenshot",
+      "mcp__puppeteer__puppeteer_evaluate",
+      "mcp__chrome-devtools__navigate_page"
+    ]
+  }
+}

.gitignore

@@ -25,7 +25,8 @@ lib/**/*.g.dart
 *.iml
 *.ipr
 *.iws
-.vscode/
+.vscode/*
+!.vscode/launch.json
 *.swp
 *.swo
 *~
@@ -118,3 +119,4 @@ secrets/
 
 # Uploads (reference images, not tracked)
 uploads/
+logs/

.vscode/launch.json

@@ -0,0 +1,40 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Flutter Web (Chrome)",
+      "type": "dart",
+      "request": "launch",
+      "program": "lib/main.dart",
+      "args": [
+        "-d",
+        "chrome",
+        "--web-port=8080"
+      ]
+    },
+    {
+      "name": "Flutter Web (Chrome) - Profile",
+      "type": "dart",
+      "request": "launch",
+      "program": "lib/main.dart",
+      "flutterMode": "profile",
+      "args": [
+        "-d",
+        "chrome",
+        "--web-port=8080"
+      ]
+    },
+    {
+      "name": "Flutter Web (Chrome) - Release",
+      "type": "dart",
+      "request": "launch",
+      "program": "lib/main.dart",
+      "flutterMode": "release",
+      "args": [
+        "-d",
+        "chrome",
+        "--web-port=8080"
+      ]
+    }
+  ]
+}

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+- API defaults now use LAN IPs for local development (no auth required)
+- Auth interceptor skips authentication when using LAN endpoints
+
 ## [0.3.0] - 2025-12-30
 
 ### Added

devtools_options.yaml

@@ -0,0 +1,3 @@
+description: This file stores settings for Dart & Flutter DevTools.
+documentation: https://docs.flutter.dev/tools/devtools/extensions#configure-extension-enablement-states
+extensions:

docs/CORE_API_SPEC.md

@@ -0,0 +1,346 @@
+# Core API Specification
+
+Expected API endpoints for the Tatlock UI Control Room feature.
+
+**Base URL:** `http://{host}:8083` (configurable via `CORE_API_URL`)
+
+---
+
+## Containers
+
+### List Containers
+
+```
+GET /infrastructure/containers
+```
+
+**Query Parameters:**
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `all` | boolean | `true` | Include stopped containers |
+
+**Response:** `200 OK`
+```json
+[
+  {
+    "Id": "abc123def456...",
+    "Names": ["/container-name"],
+    "Image": "nginx:latest",
+    "State": "running",
+    "Status": "Up 2 hours",
+    "Labels": {
+      "com.docker.compose.project": "my-stack",
+      "com.docker.compose.service": "web"
+    },
+    "Ports": [
+      {
+        "IP": "0.0.0.0",
+        "PrivatePort": 80,
+        "PublicPort": 8080,
+        "Type": "tcp"
+      }
+    ],
+    "Mounts": [
+      {
+        "Type": "bind",
+        "Source": "/host/path",
+        "Destination": "/container/path",
+        "Mode": "rw",
+        "RW": true
+      }
+    ],
+    "NetworkSettings": {
+      "Networks": {
+        "bridge": {}
+      }
+    },
+    "Created": 1704067200,
+    "SizeRw": 12345,
+    "SizeRootFs": 67890
+  }
+]
+```
+
+---
+
+### Get Container
+
+```
+GET /infrastructure/containers/{id}
+```
+
+**Path Parameters:**
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `id` | string | Full container ID |
+
+**Response:** `200 OK`
+```json
+{
+  "Id": "abc123def456...",
+  "Names": ["/container-name"],
+  "Image": "nginx:latest",
+  "State": "running",
+  "Status": "Up 2 hours",
+  "Labels": {},
+  "Ports": [],
+  "Mounts": [],
+  "NetworkSettings": {},
+  "Created": 1704067200
+}
+```
+
+---
+
+### Container Actions
+
+```
+POST /infrastructure/containers/{id}/{action}
+```
+
+**Path Parameters:**
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `id` | string | Full container ID |
+| `action` | string | One of: `start`, `stop`, `restart` |
+
+**Response:** `204 No Content`
+
+---
+
+### Get Container Logs
+
+```
+GET /infrastructure/containers/{id}/logs
+```
+
+**Path Parameters:**
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `id` | string | Full container ID |
+
+**Query Parameters:**
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `tail` | integer | (all) | Number of lines from end |
+| `timestamps` | boolean | `false` | Include timestamps |
+
+**Response:** `200 OK`
+```
+Content-Type: text/plain
+
+2024-01-01T12:00:00Z Log line 1
+2024-01-01T12:00:01Z Log line 2
+...
+```
+
+---
+
+### Delete Container
+
+```
+DELETE /infrastructure/containers/{id}
+```
+
+**Path Parameters:**
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `id` | string | Full container ID |
+
+**Query Parameters:**
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `force` | boolean | `false` | Force remove running container |
+
+**Response:** `204 No Content`
+
+---
+
+## Stacks
+
+Stacks are Docker Compose projects. The stack ID is the value of the `com.docker.compose.project` label on containers.
+
+### Get Stack Compose YAML
+
+```
+GET /infrastructure/stacks/{stackId}/compose
+```
+
+**Path Parameters:**
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `stackId` | string | Stack name (compose project name) |
+
+**Response:** `200 OK`
+```
+Content-Type: text/yaml
+
+version: '3.8'
+services:
+  web:
+    image: nginx:latest
+    ports:
+      - "8080:80"
+  db:
+    image: postgres:14
+    environment:
+      POSTGRES_PASSWORD: ${DB_PASSWORD}
+```
+
+---
+
+### Update Stack Compose YAML
+
+```
+PUT /infrastructure/stacks/{stackId}/compose
+```
+
+**Path Parameters:**
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `stackId` | string | Stack name (compose project name) |
+
+**Request Body:**
+```
+Content-Type: text/yaml
+
+version: '3.8'
+services:
+  web:
+    image: nginx:latest
+    ...
+```
+
+**Response:** `204 No Content`
+
+---
+
+### Get Stack Environment Variables
+
+```
+GET /infrastructure/stacks/{stackId}/env
+```
+
+**Path Parameters:**
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `stackId` | string | Stack name (compose project name) |
+
+**Response:** `200 OK`
+```json
+{
+  "DB_PASSWORD": "secret123",
+  "API_KEY": "abc-def-ghi",
+  "DEBUG": "false"
+}
+```
+
+---
+
+### Update Stack Environment Variables
+
+```
+PUT /infrastructure/stacks/{stackId}/env
+```
+
+**Path Parameters:**
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `stackId` | string | Stack name (compose project name) |
+
+**Request Body:**
+```json
+{
+  "DB_PASSWORD": "new-secret",
+  "API_KEY": "new-key",
+  "DEBUG": "true"
+}
+```
+
+**Response:** `204 No Content`
+
+---
+
+### Deploy Stack
+
+Redeploys the stack with current YAML and environment variables.
+
+```
+POST /infrastructure/stacks/{stackId}/deploy
+```
+
+**Path Parameters:**
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `stackId` | string | Stack name (compose project name) |
+
+**Response:** `202 Accepted`
+
+---
+
+### Rebuild Stack
+
+Pulls fresh images and recreates all containers in the stack.
+
+```
+POST /infrastructure/stacks/{stackId}/rebuild
+```
+
+**Path Parameters:**
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `stackId` | string | Stack name (compose project name) |
+
+**Response:** `202 Accepted`
+
+---
+
+## Data Types Reference
+
+### Container States
+
+| Value | Description |
+|-------|-------------|
+| `created` | Container created but not started |
+| `running` | Container is running |
+| `paused` | Container is paused |
+| `restarting` | Container is restarting |
+| `removing` | Container is being removed |
+| `exited` | Container has exited |
+| `dead` | Container is dead |
+
+### Port Types
+
+| Value | Description |
+|-------|-------------|
+| `tcp` | TCP port |
+| `udp` | UDP port |
+
+### Mount Types
+
+| Value | Description |
+|-------|-------------|
+| `bind` | Bind mount from host |
+| `volume` | Docker volume |
+| `tmpfs` | Temporary filesystem |
+
+---
+
+## Error Responses
+
+All endpoints return standard HTTP error codes:
+
+| Code | Description |
+|------|-------------|
+| `400` | Bad Request - Invalid parameters |
+| `404` | Not Found - Container/Stack not found |
+| `409` | Conflict - Container already in requested state |
+| `500` | Internal Server Error |
+
+**Error Body:**
+```json
+{
+  "error": "Container not found",
+  "code": "NOT_FOUND"
+}
+```

docs/UI_LAYOUT.md

@@ -22,36 +22,107 @@ The UI uses a **tabbed room navigation** in the header rather than a traditional
 
 ```
 ┌─────────────────────────────────────────────────────────────────────────────┐
-│  HEADER (intrinsic height)                                                  │
-│  [Logo] [═══════ Room Tabs (scrollable) ═══════] [Notifications] [Profile] │
+│  HEADER BAR (56px, with logo bulge overlay)                                 │
+│  [◯Logo◯] [Room Icons] ─────────────────────────────────── [Profile Menu]  │
 ├─────────────────────────────────────────────────────────────────────────────┤
 │                                                                             │
-│  ┌─────────────────────────────────────────────────┐ ┌───────────────────┐  │
-│  │                                                 │ │                   │  │
-│  │  MAIN CONTENT                                   │ │  CHAT DOCK        │  │
-│  │  flex: 1                                        │ │  flex: 0          │  │
-│  │                                                 │ │                   │  │
-│  │  ┌─────────────┐ ┌────────────────────────────┐ │ │  Tatlock chat     │  │
-│  │  │ CONTEXT     │ │ PRIMARY                    │ │ │  assistant,       │  │
-│  │  │ SIDEBAR     │ │ CONTENT                    │ │ │  persistent       │  │
-│  │  │             │ │                            │ │ │  across rooms     │  │
-│  │  │ flex: 0     │ │ flex: 1                    │ │ │                   │  │
-│  │  │ intrinsic   │ │                            │ │ │                   │  │
-│  │  └─────────────┘ └────────────────────────────┘ │ │                   │  │
-│  │                                                 │ │                   │  │
-│  └─────────────────────────────────────────────────┘ └───────────────────┘  │
+│  ┌─────────────┐ ┌─────────────────────────────────┐ ┌───────────────────┐  │
+│  │ NAV PANEL   │ │  PRIMARY CONTENT                │ │  CHAT DOCK        │  │
+│  │             │ │                                 │ │                   │  │
+│  │ Room-level  │ │  ┌──────────┐ ┌──────────────┐  │ │  Tatlock AI       │  │
+│  │ navigation  │ │  │ FILTER   │ │ DATA GRID    │  │ │  assistant        │  │
+│  │ (sections)  │ │  │ PANEL    │ │              │  │ │                   │  │
+│  │             │ │  │          │ │              │  │ │  Persistent       │  │
+│  │ 280px fixed │ │  │ Optional │ │ flex: 1      │  │ │  across rooms     │  │
+│  │             │ │  │ 280px    │ │              │  │ │                   │  │
+│  └─────────────┘ │  └──────────┘ └──────────────┘  │ │  280px-33vw       │  │
+│                  │                                 │ │                   │  │
+│                  │  flex: 1                        │ │  flex: 0          │  │
+│                  └─────────────────────────────────┘ └───────────────────┘  │
 │                                                                             │
 └─────────────────────────────────────────────────────────────────────────────┘
 ```
 
-### Component Roles
+---
+
+## Panel Taxonomy
+
+All panels share common styling patterns but serve different purposes.
+
+### Panel Types
+
+| Panel | Position | Purpose | Width | Content Alignment |
+|-------|----------|---------|-------|-------------------|
+| **Header Bar** | Top | Room nav, profile | 56px height | Logo in bulge, rest at bottom |
+| **Nav Panel** | Left | Room-level section nav | 280px fixed | Header docked to bottom |
+| **Filter Panel** | Left (inside content) | Data filtering/search | 280px fixed | Header docked to bottom |
+| **Detail Panel** | Right (inside content) | Selected item details | 320-400px | Standard header |
+| **Chat Dock** | Right | AI assistant | 280px-33vw | Standard header |
+
+### Panel Header Behavior
+
+All left-side panels (Nav Panel, Filter Panel) dock their header content to the **bottom** of the header area. This accommodates the logo bulge that overlays into their space.
+
+```
+┌─────────────────────────┐
+│                         │  ← Logo bulge overlays this space
+│         (empty)         │
+│                         │
+│  [Icon] Title   [Action]│  ← Content docked to bottom (8px margin)
+├─────────────────────────┤
+│  Panel content...       │
+```
+
+Right-side panels (Detail Panel, Chat Dock) use standard vertically-centered headers since the logo bulge doesn't reach them.
+
+---
+
+## Panel Configurations by Room
+
+### Front Hall
+```
+┌────────────────────────────────────────────────────────────────┬────────────┐
+│  PRIMARY CONTENT (no nav panel)                                │ CHAT DOCK  │
+│  Dashboard cards, activity feed                                │ (expanded) │
+└────────────────────────────────────────────────────────────────┴────────────┘
+```
+
+### Control Room
+```
+┌───────────┬──────────────────────────────────────────────────────┬──────────┐
+│ NAV PANEL │  PRIMARY CONTENT                                     │ CHAT     │
+│           │  ┌────────────┬────────────────────────────────────┐ │ DOCK     │
+│ Sections: │  │ FILTER     │ DATA GRID                          │ │          │
+│ • Contai. │  │ PANEL      │ Container/Stack list               │ │ (collap- │
+│ • Stacks  │  │            │                                    │ │  sed)    │
+│ • Network │  │ Stack list │                                    │ │          │
+│ • Volumes │  │ + search   │                                    │ │          │
+└───────────┴──┴────────────┴────────────────────────────────────┴─┴──────────┘
+```
+
+### Parlor
+```
+┌───────────┬────────────────────────────────────────────────────┬────────────┐
+│ NAV PANEL │  PRIMARY CONTENT                                   │ CHAT DOCK  │
+│           │  Device controls, scenes                           │ (collapsed)│
+│ Areas:    │                                                    │            │
+│ • Living  │                                                    │            │
+│ • Bedroom │                                                    │            │
+│ • Kitchen │                                                    │            │
+└───────────┴────────────────────────────────────────────────────┴────────────┘
+```
+
+---
+
+## Component Roles
 
 | Component | Flex | Description |
 |-----------|------|-------------|
-| **Header** | intrinsic | Logo, room tabs, action icons |
-| **Main Content** | `flex: 1` | Fills remaining horizontal space |
-| **Context Sidebar** | `flex: 0`, intrinsic | Room-specific navigation (Control Room, Parlor) |
-| **Primary Content** | `flex: 1` | Room's main working area |
+| **Header Bar** | intrinsic (56px) | Logo bulge, room icons, profile menu |
+| **Nav Panel** | `flex: 0`, 280px | Room-level section navigation |
+| **Filter Panel** | `flex: 0`, 280px | Data filtering within a section |
+| **Primary Content** | `flex: 1` | Main working area |
+| **Detail Panel** | `flex: 0`, 320-400px | Selected item details (optional) |
 | **Chat Dock** | `flex: 0`, intrinsic | Tatlock assistant, collapsible |
 
 ---
@@ -61,55 +132,76 @@ The UI uses a **tabbed room navigation** in the header rather than a traditional
 ### Wide (>= 1200px)
 
 ```
-┌────────────────────────────────────────────────────────┬────────────────────┐
-│  [Sidebar]  [══════════ Content ══════════]            │  Chat (expanded)   │
-└────────────────────────────────────────────────────────┴────────────────────┘
+┌───────────┬─────────────────────────────────────────────┬────────────────────┐
+│ NAV PANEL │  [Filter Panel]  [═══ Data Grid ═══]        │  CHAT DOCK         │
+│ (280px)   │  (280px)         (flex: 1)                  │  (expanded, 320px) │
+└───────────┴─────────────────────────────────────────────┴────────────────────┘
 ```
 
+- All panels visible
 - Chat dock expanded by default on Front Hall
-- Context sidebar visible with labels
+- Nav panel visible with full labels
+- Filter panel visible (where applicable)
 - Full data grid columns
 
 ### Medium (>= 800px, < 1200px)
 
 ```
-┌────────────────────────────────────────────────────────────────────────┬────┐
-│  [Sidebar]  [══════════════════ Content ══════════════════]            │ 💬 │
-└────────────────────────────────────────────────────────────────────────┴────┘
+┌───────────┬───────────────────────────────────────────────────────────┬────┐
+│ NAV PANEL │  [Filter Panel]  [═══════════ Data Grid ═══════════]      │ 💬 │
+│ (280px)   │  (280px)         (flex: 1)                                │48px│
+└───────────┴───────────────────────────────────────────────────────────┴────┘
 ```
 
-- Chat dock collapsed to icon rail
-- Click to expand as overlay
-- Context sidebar still visible
+- Chat dock collapsed to icon rail (48px)
+- Click chat icon to expand as overlay
+- Nav panel still visible
+- Filter panel still visible
+- Data grid may hide some columns
 
 ### Compact (>= 600px, < 800px)
 
 ```
-┌────────────────────────────────────────────────────────────────────────┬────┐
-│  [≡]  [════════════════════ Content ════════════════════]              │ 💬 │
-└────────────────────────────────────────────────────────────────────────┴────┘
+┌────┬───────────────────────────────────────────────────────────────────┬────┐
+│ ≡  │  [═══════════════════════ Content ═══════════════════════]        │ 💬 │
+│48px│  Filter panel becomes top bar or collapsible                      │48px│
+└────┴───────────────────────────────────────────────────────────────────┴────┘
 ```
 
-- Context sidebar becomes drawer (hamburger menu)
-- Chat dock collapsed
-- Reduced data grid columns
+- Nav panel collapses to icon rail (48px), expands as drawer on tap
+- Filter panel moves to top of content or becomes collapsible
+- Chat dock remains collapsed (48px)
+- Data grid shows essential columns only
 
 ### Mobile (< 600px)
 
 ```
 ┌────────────────────────────────────────────────────────────────────────┐
-│  [≡]  [Tabs scroll horizontally]                            [💬]      │
+│  HEADER: [≡] [Room Icons scroll] ─────────────────────────────── [💬] │
 ├────────────────────────────────────────────────────────────────────────┤
 │                                                                        │
-│  [══════════════════════ Content ══════════════════════]               │
+│  [═══════════════════════ Content ══════════════════════]              │
+│  Filter as expandable section at top                                   │
 │                                                                        │
 └────────────────────────────────────────────────────────────────────────┘
 ```
 
 - Single column layout
-- Room tabs scroll horizontally
-- Chat opens as bottom sheet
-- Context sidebar as full-screen drawer
+- Nav panel opens as full-screen drawer (hamburger menu)
+- Filter panel becomes expandable section at top of content
+- Chat opens as bottom sheet (60vh max)
+- Data grid becomes card list or single-column table
+
+---
+
+## Panel Folding Summary
+
+| Panel | Wide (≥1200) | Medium (≥800) | Compact (≥600) | Mobile (<600) |
+|-------|--------------|---------------|----------------|---------------|
+| **Nav Panel** | 280px visible | 280px visible | 48px rail → drawer | Hidden → drawer |
+| **Filter Panel** | 280px visible | 280px visible | Collapsed/top bar | Expandable section |
+| **Chat Dock** | 320px expanded | 48px rail → overlay | 48px rail → overlay | Icon → bottom sheet |
+| **Detail Panel** | 320-400px slide-in | 320px slide-in | Full-width overlay | Full-screen |
 
 ---
 
@@ -275,6 +367,42 @@ The Tatlock chat assistant is **omnipresent** - accessible from any room.
 
 ## Flutter Implementation Notes
 
+### Panel Widget Library
+
+All panels are built from shared components in `lib/shared/layouts/widgets/`:
+
+| Widget | File | Purpose |
+|--------|------|---------|
+| `PanelContainer` | `panel_container.dart` | Base container for all panels |
+| `PanelHeader` | `panel_header.dart` | Configurable header (bottom-docked or centered) |
+| `NavPanel` | `nav_panel.dart` | Left-side room navigation |
+| `FilterPanel` | `filter_panel.dart` | Left-side data filtering |
+| `DetailPanel` | `detail_panel.dart` | Right-side item details |
+| `ChatDock` | `chat_dock.dart` | Right-side AI assistant |
+
+### PanelHeader Configuration
+
+```dart
+/// Panel header with configurable content alignment.
+class PanelHeader extends StatelessWidget {
+  const PanelHeader({
+    required this.title,
+    required this.icon,
+    this.actions,
+    this.dockToBottom = false, // true for left-side panels
+  });
+}
+```
+
+**Left-side panels** (Nav, Filter) use `dockToBottom: true` to accommodate the logo bulge:
+- Header height: 56px (matches app header)
+- Content aligned to bottom with 8px margin
+- Empty space at top allows logo bulge overlay
+
+**Right-side panels** (Detail, Chat) use `dockToBottom: false`:
+- Standard vertically-centered content
+- No accommodation needed for logo bulge
+
 ### Recommended Widgets
 
 | Concept | Flutter Widget |
@@ -296,6 +424,19 @@ abstract class Breakpoints {
 }
 ```
 
+### Panel Width Constants
+
+```dart
+abstract class PanelWidths {
+  static const double navPanel = 280;
+  static const double filterPanel = 280;
+  static const double detailPanel = 360;
+  static const double chatDockExpanded = 320;
+  static const double chatDockCollapsed = 48;
+  static const double railWidth = 48;
+}
+```
+
 ### Layout Builder Pattern
 
 ```dart

ios/Flutter/Debug.xcconfig

@@ -1 +1,2 @@
+#include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig"
 #include "Generated.xcconfig"

ios/Flutter/Release.xcconfig

@@ -1 +1,2 @@
+#include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.release.xcconfig"
 #include "Generated.xcconfig"

ios/Podfile

@@ -0,0 +1,43 @@
+# Uncomment this line to define a global platform for your project
+# platform :ios, '13.0'
+
+# CocoaPods analytics sends network stats synchronously affecting flutter build latency.
+ENV['COCOAPODS_DISABLE_STATS'] = 'true'
+
+project 'Runner', {
+  'Debug' => :debug,
+  'Profile' => :release,
+  'Release' => :release,
+}
+
+def flutter_root
+  generated_xcode_build_settings_path = File.expand_path(File.join('..', 'Flutter', 'Generated.xcconfig'), __FILE__)
+  unless File.exist?(generated_xcode_build_settings_path)
+    raise "#{generated_xcode_build_settings_path} must exist. If you're running pod install manually, make sure flutter pub get is executed first"
+  end
+
+  File.foreach(generated_xcode_build_settings_path) do |line|
+    matches = line.match(/FLUTTER_ROOT\=(.*)/)
+    return matches[1].strip if matches
+  end
+  raise "FLUTTER_ROOT not found in #{generated_xcode_build_settings_path}. Try deleting Generated.xcconfig, then run flutter pub get"
+end
+
+require File.expand_path(File.join('packages', 'flutter_tools', 'bin', 'podhelper'), flutter_root)
+
+flutter_ios_podfile_setup
+
+target 'Runner' do
+  use_frameworks!
+
+  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
+  target 'RunnerTests' do
+    inherit! :search_paths
+  end
+end
+
+post_install do |installer|
+  installer.pods_project.targets.each do |target|
+    flutter_additional_ios_build_settings(target)
+  end
+end

lib/core/api/api_client.dart

@@ -1,8 +1,7 @@
 import 'package:dio/dio.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
-
-import '../config/app_config.dart';
-import 'api_interceptors.dart';
+import 'package:tatlock_ui/core/api/api_interceptors.dart';
+import 'package:tatlock_ui/core/config/app_config.dart';
 
 part 'api_client.g.dart';
 

lib/core/api/api_interceptors.dart

@@ -2,11 +2,13 @@ import 'dart:developer' as developer;
 
 import 'package:dio/dio.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-
-import '../auth/auth_provider.dart';
-import '../error/app_exception.dart';
+import 'package:tatlock_ui/core/auth/auth_provider.dart';
+import 'package:tatlock_ui/core/config/app_config.dart';
+import 'package:tatlock_ui/core/error/app_exception.dart';
 
 /// Adds authentication token to requests.
+///
+/// Skipped entirely when [AppConfig.requiresAuth] is false (LAN development).
 class AuthInterceptor extends Interceptor {
   AuthInterceptor(this._ref);
 
@@ -14,6 +16,12 @@ class AuthInterceptor extends Interceptor {
 
   @override
   void onRequest(RequestOptions options, RequestInterceptorHandler handler) {
+    // Skip auth for LAN development
+    if (!AppConfig.requiresAuth) {
+      handler.next(options);
+      return;
+    }
+
     final authState = _ref.read(authNotifierProvider);
 
     authState.whenData((auth) {
@@ -27,6 +35,12 @@ class AuthInterceptor extends Interceptor {
 
   @override
   void onError(DioException err, ErrorInterceptorHandler handler) {
+    // Skip auth error handling for LAN development
+    if (!AppConfig.requiresAuth) {
+      handler.next(err);
+      return;
+    }
+
     if (err.response?.statusCode == 401) {
       // Token expired - trigger re-authentication
       _ref.read(authNotifierProvider.notifier).signOut();

lib/core/config/app_config.dart

@@ -1,19 +1,35 @@
 /// Application configuration from compile-time environment variables.
 ///
-/// Set via: flutter build --dart-define=API_URL=https://...
+/// ## Development (LAN - no auth required)
+/// Default values use LAN IPs for local development:
+/// ```bash
+/// flutter run -d chrome
+/// ```
+///
+/// ## Production (public URLs - auth required)
+/// Override with public URLs for production builds:
+/// ```bash
+/// flutter build web \
+///   --dart-define=CORE_API_URL=https://api.schweitz.net \
+///   --dart-define=TATLOCK_API_URL=https://tatlock.schweitz.net
+/// ```
 class AppConfig {
   AppConfig._();
 
   /// Core API base URL
+  /// - LAN default: No auth required
+  /// - Production: https://api.schweitz.net (requires OIDC)
   static const coreApiUrl = String.fromEnvironment(
     'CORE_API_URL',
-    defaultValue: 'https://api.schweitz.net',
+    defaultValue: 'http://192.168.86.149:8083',
   );
 
   /// Tatlock API base URL
+  /// - LAN default: No auth required
+  /// - Production: https://tatlock.schweitz.net (requires OIDC)
   static const tatlockApiUrl = String.fromEnvironment(
     'TATLOCK_API_URL',
-    defaultValue: 'https://tatlock.schweitz.net',
+    defaultValue: 'http://192.168.86.149:8000',
   );
 
   /// Authentik OIDC discovery URL
@@ -37,4 +53,21 @@ class AppConfig {
 
   /// Whether running in debug mode
   static const isDebug = bool.fromEnvironment('DEBUG', defaultValue: false);
+
+  /// Whether auth is required (false for LAN development)
+  static bool get requiresAuth =>
+      coreApiUrl.contains('schweitz.net') ||
+      tatlockApiUrl.contains('schweitz.net');
+
+  /// Portainer URL for container management
+  static const portainerUrl = String.fromEnvironment(
+    'PORTAINER_URL',
+    defaultValue: 'http://192.168.86.149:9000',
+  );
+
+  /// Netdata URL for system monitoring
+  static const netdataUrl = String.fromEnvironment(
+    'NETDATA_URL',
+    defaultValue: 'http://192.168.86.149:19999',
+  );
 }

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

@@ -0,0 +1,72 @@
+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';
+
+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);
+}

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

@@ -0,0 +1,129 @@
+import 'package:freezed_annotation/freezed_annotation.dart';
+import 'package:tatlock_ui/features/control_room/containers/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);
+}

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

@@ -0,0 +1,83 @@
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+import 'package:tatlock_ui/features/control_room/containers/data/datasources/containers_datasource.dart';
+import 'package:tatlock_ui/features/control_room/containers/domain/entities/container.dart';
+import 'package:tatlock_ui/features/control_room/containers/domain/repositories/container_repository.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);
+}

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

@@ -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';
+}

lib/features/control_room/containers/domain/repositories/container_repository.dart

@@ -0,0 +1,44 @@
+import 'package:tatlock_ui/features/control_room/containers/domain/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,
+  });
+}

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

@@ -0,0 +1,395 @@
+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/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';
+
+/// 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'),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,91 @@
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+import 'package:tatlock_ui/features/control_room/containers/data/repositories/container_repository_impl.dart';
+import 'package:tatlock_ui/features/control_room/containers/domain/entities/container.dart';
+import 'package:tatlock_ui/features/control_room/stacks/presentation/providers/stacks_provider.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);
+}

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

@@ -0,0 +1,171 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:tatlock_ui/features/control_room/containers/presentation/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,
+      ),
+    ),
+  );
+}

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

@@ -0,0 +1,89 @@
+import 'package:flutter/material.dart' hide Container;
+import 'package:tatlock_ui/features/control_room/containers/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',
+        ),
+    };
+  }
+}

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

@@ -0,0 +1,292 @@
+import 'package:flutter/material.dart' hide Stack;
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:tatlock_ui/features/control_room/containers/presentation/pages/containers_list_page.dart';
+import 'package:tatlock_ui/features/control_room/stacks/data/repositories/stack_repository_impl.dart';
+import 'package:tatlock_ui/features/control_room/stacks/domain/entities/stack.dart';
+import 'package:tatlock_ui/features/control_room/stacks/presentation/pages/stack_detail_page.dart';
+import 'package:tatlock_ui/features/control_room/stacks/presentation/providers/stacks_provider.dart';
+import 'package:tatlock_ui/features/control_room/stacks/presentation/widgets/stack_list_tile.dart';
+import 'package:tatlock_ui/shared/layouts/widgets/filter_panel.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) {
+    final selectedStack = ref.watch(selectedStackProvider);
+
+    return Scaffold(
+      body: Row(
+        children: [
+          // Stacks sidebar
+          const _StacksSidebar(),
+          // Divider
+          VerticalDivider(
+            width: 1,
+            thickness: 1,
+            color: Theme.of(context).colorScheme.outlineVariant,
+          ),
+          // Main content area - shows either all containers or stack detail
+          Expanded(
+            child: selectedStack == null
+                ? const ContainersListPage()
+                : StackDetailPage(stackId: selectedStack),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+/// Sidebar showing stacks list (Filter Panel per UI_LAYOUT.md).
+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 FilterPanel(
+      title: 'Stacks',
+      icon: Icons.layers,
+      onRefresh: () => ref.invalidate(stacksProvider),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          // 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),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  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'),
+                    );
+                  },
+                ),
+        ),
+      ],
+    );
+  }
+}
+

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

@@ -0,0 +1,132 @@
+import 'package:dio/dio.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/datasources/containers_datasource.dart';
+import 'package:tatlock_ui/features/control_room/containers/domain/entities/container.dart';
+import 'package:tatlock_ui/features/control_room/stacks/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 provides endpoints for stack YAML and environment variables.
+class StacksDatasource {
+  StacksDatasource(this._dio, this._containersDatasource);
+
+  final Dio _dio;
+  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);
+    }
+  }
+
+  /// Gets the compose YAML for a stack.
+  Future<String> getStackYaml(String stackId) async {
+    final response = await _dio.get<String>(
+      '/infrastructure/stacks/$stackId/compose',
+    );
+    return response.data ?? '';
+  }
+
+  /// Updates the compose YAML for a stack.
+  Future<void> updateStackYaml(String stackId, String yaml) async {
+    await _dio.put<void>(
+      '/infrastructure/stacks/$stackId/compose',
+      data: yaml,
+      options: Options(contentType: 'text/yaml'),
+    );
+  }
+
+  /// Gets the environment variables for a stack.
+  Future<Map<String, String>> getStackEnvVars(String stackId) async {
+    final response = await _dio.get<Map<String, dynamic>>(
+      '/infrastructure/stacks/$stackId/env',
+    );
+    return response.data?.map((k, v) => MapEntry(k, v.toString())) ?? {};
+  }
+
+  /// Updates the environment variables for a stack.
+  Future<void> updateStackEnvVars(
+    String stackId,
+    Map<String, String> envVars,
+  ) async {
+    await _dio.put<void>(
+      '/infrastructure/stacks/$stackId/env',
+      data: envVars,
+    );
+  }
+
+  /// Deploys/redeploys a stack with current configuration.
+  Future<void> deployStack(String stackId) async {
+    await _dio.post<void>('/infrastructure/stacks/$stackId/deploy');
+  }
+
+  /// Rebuilds a stack (pulls fresh images and recreates containers).
+  Future<void> rebuildStack(String stackId) async {
+    await _dio.post<void>('/infrastructure/stacks/$stackId/rebuild');
+  }
+}
+
+/// Provides the stacks datasource.
+@riverpod
+StacksDatasource stacksDatasource(StacksDatasourceRef 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

@@ -0,0 +1,61 @@
+import 'package:freezed_annotation/freezed_annotation.dart';
+import 'package:tatlock_ui/features/control_room/stacks/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,
+    };
+  }
+}

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

@@ -0,0 +1,81 @@
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+import 'package:tatlock_ui/features/control_room/stacks/data/datasources/stacks_datasource.dart';
+import 'package:tatlock_ui/features/control_room/stacks/domain/entities/stack.dart';
+import 'package:tatlock_ui/features/control_room/stacks/domain/repositories/stack_repository.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');
+  }
+
+  @override
+  Future<String> getStackYaml(String id) async {
+    return _datasource.getStackYaml(id);
+  }
+
+  @override
+  Future<void> updateStackYaml(String id, String yaml) async {
+    await _datasource.updateStackYaml(id, yaml);
+  }
+
+  @override
+  Future<Map<String, String>> getStackEnvVars(String id) async {
+    return _datasource.getStackEnvVars(id);
+  }
+
+  @override
+  Future<void> updateStackEnvVars(String id, Map<String, String> envVars) async {
+    await _datasource.updateStackEnvVars(id, envVars);
+  }
+
+  @override
+  Future<void> deployStack(String id) async {
+    await _datasource.deployStack(id);
+  }
+
+  @override
+  Future<void> rebuildStack(String id) async {
+    await _datasource.rebuildStack(id);
+  }
+}
+
+/// Provides the stack repository.
+@riverpod
+StackRepository stackRepository(StackRepositoryRef ref) {
+  final datasource = ref.watch(stacksDatasourceProvider);
+  return StackRepositoryImpl(datasource);
+}

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

@@ -0,0 +1,72 @@
+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,
+
+    /// Compose YAML content.
+    String? yaml,
+
+    /// Environment variables for the stack.
+    @Default({}) Map<String, String> envVars,
+
+    /// 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,
+}

lib/features/control_room/stacks/domain/repositories/stack_repository.dart

@@ -0,0 +1,40 @@
+import 'package:tatlock_ui/features/control_room/stacks/domain/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);
+
+  /// Gets the compose YAML for a stack.
+  Future<String> getStackYaml(String id);
+
+  /// Updates the compose YAML for a stack.
+  Future<void> updateStackYaml(String id, String yaml);
+
+  /// Gets the environment variables for a stack.
+  Future<Map<String, String>> getStackEnvVars(String id);
+
+  /// Updates the environment variables for a stack.
+  Future<void> updateStackEnvVars(String id, Map<String, String> envVars);
+
+  /// Deploys/redeploys a stack with current configuration.
+  Future<void> deployStack(String id);
+
+  /// Rebuilds a stack (pulls fresh images and recreates containers).
+  Future<void> rebuildStack(String id);
+}

lib/features/control_room/stacks/presentation/pages/stack_detail_page.dart

@@ -0,0 +1,334 @@
+import 'package:flutter/material.dart' hide Stack;
+import 'package:flutter_riverpod/flutter_riverpod.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/features/control_room/stacks/domain/entities/stack.dart';
+import 'package:tatlock_ui/features/control_room/stacks/presentation/providers/stacks_provider.dart';
+import 'package:tatlock_ui/features/control_room/stacks/presentation/widgets/env_vars_editor.dart';
+import 'package:tatlock_ui/features/control_room/stacks/presentation/widgets/yaml_editor.dart';
+
+/// Detail page for a selected stack with YAML editor, env vars, and container list.
+class StackDetailPage extends ConsumerStatefulWidget {
+  const StackDetailPage({
+    super.key,
+    required this.stackId,
+  });
+
+  final String stackId;
+
+  @override
+  ConsumerState<StackDetailPage> createState() => _StackDetailPageState();
+}
+
+class _StackDetailPageState extends ConsumerState<StackDetailPage>
+    with SingleTickerProviderStateMixin {
+  late TabController _tabController;
+
+  @override
+  void initState() {
+    super.initState();
+    _tabController = TabController(length: 2, vsync: this);
+  }
+
+  @override
+  void dispose() {
+    _tabController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final stackAsync = ref.watch(stackProvider(widget.stackId));
+    final containersAsync = ref.watch(containersProvider);
+    final colorScheme = Theme.of(context).colorScheme;
+
+    // Listen for config action results
+    ref.listen<AsyncValue<void>>(stackConfigActionsProvider, (previous, next) {
+      if (previous?.isLoading == true && !next.isLoading) {
+        next.whenOrNull(
+          data: (_) {
+            ScaffoldMessenger.of(context).showSnackBar(
+              SnackBar(
+                content: const Text('Configuration saved'),
+                backgroundColor: colorScheme.primaryContainer,
+                behavior: SnackBarBehavior.floating,
+              ),
+            );
+          },
+          error: (error, _) {
+            ScaffoldMessenger.of(context).showSnackBar(
+              SnackBar(
+                content: Text('Failed to save: $error'),
+                backgroundColor: colorScheme.errorContainer,
+                behavior: SnackBarBehavior.floating,
+              ),
+            );
+          },
+        );
+      }
+    });
+
+    return Column(
+      children: [
+        // Stack editor (top section - 60%)
+        Expanded(
+          flex: 6,
+          child: stackAsync.when(
+            loading: () => const Center(child: CircularProgressIndicator()),
+            error: (error, _) => Center(child: Text('Error: $error')),
+            data: (stack) => _StackEditor(
+              stack: stack,
+              tabController: _tabController,
+            ),
+          ),
+        ),
+        // Divider with drag handle appearance
+        Container(
+          height: 8,
+          color: colorScheme.surfaceContainerHighest,
+          child: Center(
+            child: Container(
+              width: 40,
+              height: 4,
+              decoration: BoxDecoration(
+                color: colorScheme.outline,
+                borderRadius: BorderRadius.circular(2),
+              ),
+            ),
+          ),
+        ),
+        // Container list (bottom section - 40%)
+        Expanded(
+          flex: 4,
+          child: containersAsync.when(
+            loading: () => const Center(child: CircularProgressIndicator()),
+            error: (error, _) => Center(child: Text('Error: $error')),
+            data: (containers) => _CompactContainerList(
+              containers: containers,
+              stackId: widget.stackId,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+/// Stack configuration editor with tabs for YAML and environment variables.
+class _StackEditor extends ConsumerWidget {
+  const _StackEditor({
+    required this.stack,
+    required this.tabController,
+  });
+
+  final Stack stack;
+  final TabController tabController;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Column(
+      children: [
+        // Header with stack info and actions
+        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),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      stack.name,
+                      style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                            fontWeight: FontWeight.w600,
+                          ),
+                    ),
+                    Text(
+                      '${stack.runningCount}/${stack.containerCount} containers running',
+                      style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                            color: colorScheme.onSurfaceVariant,
+                          ),
+                    ),
+                  ],
+                ),
+              ),
+              OutlinedButton.icon(
+                onPressed: () {
+                  ref.read(stackConfigActionsProvider.notifier).rebuild(stack.id);
+                },
+                icon: const Icon(Icons.refresh, size: 18),
+                label: const Text('Rebuild'),
+              ),
+              const SizedBox(width: 8),
+              FilledButton.icon(
+                onPressed: () {
+                  ref.read(stackConfigActionsProvider.notifier).deploy(stack.id);
+                },
+                icon: const Icon(Icons.rocket_launch, size: 18),
+                label: const Text('Deploy'),
+              ),
+            ],
+          ),
+        ),
+        // Tab bar
+        TabBar(
+          controller: tabController,
+          tabs: const [
+            Tab(text: 'Compose YAML'),
+            Tab(text: 'Environment Variables'),
+          ],
+        ),
+        // Tab content
+        Expanded(
+          child: TabBarView(
+            controller: tabController,
+            children: [
+              YamlEditor(stackId: stack.id),
+              EnvVarsEditor(stackId: stack.id),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+/// Compact container list for the docked bottom section.
+class _CompactContainerList extends ConsumerWidget {
+  const _CompactContainerList({
+    required this.containers,
+    required this.stackId,
+  });
+
+  final List<dynamic> containers;
+  final String stackId;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final actions = ref.read(containerActionsProvider.notifier);
+
+    // Filter containers for this stack
+    final stackContainers = containers
+        .where((c) => c.stackId == stackId || c.stackName == stackId)
+        .toList();
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        // Header
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+          child: Row(
+            children: [
+              Icon(Icons.dns, size: 18, color: colorScheme.primary),
+              const SizedBox(width: 8),
+              Text(
+                'Containers (${stackContainers.length})',
+                style: Theme.of(context).textTheme.titleSmall,
+              ),
+              const Spacer(),
+              IconButton(
+                icon: const Icon(Icons.refresh, size: 18),
+                tooltip: 'Refresh',
+                onPressed: () => ref.invalidate(containersProvider),
+              ),
+            ],
+          ),
+        ),
+        const Divider(height: 1),
+        // Container list
+        Expanded(
+          child: stackContainers.isEmpty
+              ? Center(
+                  child: Text(
+                    'No containers in this stack',
+                    style: TextStyle(color: colorScheme.outline),
+                  ),
+                )
+              : ListView.builder(
+                  padding: const EdgeInsets.symmetric(horizontal: 8),
+                  itemCount: stackContainers.length,
+                  itemBuilder: (context, index) {
+                    final container = stackContainers[index];
+                    return Card(
+                      margin: const EdgeInsets.symmetric(
+                        horizontal: 8,
+                        vertical: 2,
+                      ),
+                      child: ListTile(
+                        dense: true,
+                        leading: ContainerStatusBadge(state: container.state),
+                        title: Text(
+                          container.name,
+                          style: const TextStyle(fontSize: 13),
+                          overflow: TextOverflow.ellipsis,
+                        ),
+                        subtitle: Text(
+                          container.image,
+                          style: TextStyle(
+                            fontSize: 11,
+                            color: colorScheme.onSurfaceVariant,
+                          ),
+                          overflow: TextOverflow.ellipsis,
+                        ),
+                        trailing: PopupMenuButton<String>(
+                          icon: const Icon(Icons.more_vert, size: 18),
+                          itemBuilder: (context) => [
+                            if (container.canStart)
+                              const PopupMenuItem(
+                                value: 'start',
+                                child: Text('Start'),
+                              ),
+                            if (container.canStop)
+                              const PopupMenuItem(
+                                value: 'stop',
+                                child: Text('Stop'),
+                              ),
+                            if (container.canRestart)
+                              const PopupMenuItem(
+                                value: 'restart',
+                                child: Text('Restart'),
+                              ),
+                            const PopupMenuItem(
+                              value: 'logs',
+                              child: Text('View Logs'),
+                            ),
+                          ],
+                          onSelected: (action) {
+                            switch (action) {
+                              case 'start':
+                                actions.start(container.fullId);
+                              case 'stop':
+                                actions.stop(container.fullId);
+                              case 'restart':
+                                actions.restart(container.fullId);
+                              case 'logs':
+                                showContainerLogs(
+                                  context,
+                                  containerId: container.fullId,
+                                  containerName: container.name,
+                                );
+                            }
+                          },
+                        ),
+                      ),
+                    );
+                  },
+                ),
+        ),
+      ],
+    );
+  }
+}

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

@@ -0,0 +1,91 @@
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+import 'package:tatlock_ui/features/control_room/stacks/data/repositories/stack_repository_impl.dart';
+import 'package:tatlock_ui/features/control_room/stacks/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;
+  }
+}
+
+/// Provides the YAML content for a stack.
+@riverpod
+Future<String> stackYaml(StackYamlRef 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 {
+  final repository = ref.watch(stackRepositoryProvider);
+  return repository.getStackEnvVars(stackId);
+}
+
+/// Controller for stack configuration actions.
+@riverpod
+class StackConfigActions extends _$StackConfigActions {
+  @override
+  AsyncValue<void> build() => const AsyncValue.data(null);
+
+  Future<void> saveYaml(String stackId, String yaml) async {
+    state = const AsyncValue.loading();
+    state = await AsyncValue.guard(() async {
+      final repository = ref.read(stackRepositoryProvider);
+      await repository.updateStackYaml(stackId, yaml);
+      ref.invalidate(stackYamlProvider(stackId));
+    });
+  }
+
+  Future<void> saveEnvVars(String stackId, Map<String, String> envVars) async {
+    state = const AsyncValue.loading();
+    state = await AsyncValue.guard(() async {
+      final repository = ref.read(stackRepositoryProvider);
+      await repository.updateStackEnvVars(stackId, envVars);
+      ref.invalidate(stackEnvVarsProvider(stackId));
+    });
+  }
+
+  Future<void> deploy(String stackId) async {
+    state = const AsyncValue.loading();
+    state = await AsyncValue.guard(() async {
+      final repository = ref.read(stackRepositoryProvider);
+      await repository.deployStack(stackId);
+      ref.invalidate(stacksProvider);
+    });
+  }
+
+  Future<void> rebuild(String stackId) async {
+    state = const AsyncValue.loading();
+    state = await AsyncValue.guard(() async {
+      final repository = ref.read(stackRepositoryProvider);
+      await repository.rebuildStack(stackId);
+      ref.invalidate(stacksProvider);
+    });
+  }
+}

lib/features/control_room/stacks/presentation/widgets/env_vars_editor.dart

@@ -0,0 +1,351 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:tatlock_ui/features/control_room/stacks/presentation/providers/stacks_provider.dart';
+
+/// Environment variables editor for stack configuration.
+class EnvVarsEditor extends ConsumerStatefulWidget {
+  const EnvVarsEditor({
+    super.key,
+    required this.stackId,
+  });
+
+  final String stackId;
+
+  @override
+  ConsumerState<EnvVarsEditor> createState() => _EnvVarsEditorState();
+}
+
+class _EnvVarsEditorState extends ConsumerState<EnvVarsEditor> {
+  final List<_EnvVarEntry> _entries = [];
+  Map<String, String> _originalEnvVars = {};
+  bool _hasChanges = false;
+
+  void _initializeEntries(Map<String, String> envVars) {
+    if (_originalEnvVars.isEmpty && envVars.isNotEmpty) {
+      _originalEnvVars = Map.from(envVars);
+      _entries.clear();
+      for (final entry in envVars.entries) {
+        _entries.add(_EnvVarEntry(
+          keyController: TextEditingController(text: entry.key),
+          valueController: TextEditingController(text: entry.value),
+        ));
+      }
+    }
+  }
+
+  void _checkChanges() {
+    final currentMap = <String, String>{};
+    for (final entry in _entries) {
+      final key = entry.keyController.text.trim();
+      if (key.isNotEmpty) {
+        currentMap[key] = entry.valueController.text;
+      }
+    }
+
+    final hasChanges = !_mapsEqual(currentMap, _originalEnvVars);
+    if (hasChanges != _hasChanges) {
+      setState(() => _hasChanges = hasChanges);
+    }
+  }
+
+  bool _mapsEqual(Map<String, String> a, Map<String, String> b) {
+    if (a.length != b.length) return false;
+    for (final key in a.keys) {
+      if (!b.containsKey(key) || a[key] != b[key]) return false;
+    }
+    return true;
+  }
+
+  void _addEntry() {
+    setState(() {
+      _entries.add(_EnvVarEntry(
+        keyController: TextEditingController(),
+        valueController: TextEditingController(),
+      ));
+    });
+  }
+
+  void _removeEntry(int index) {
+    setState(() {
+      _entries[index].dispose();
+      _entries.removeAt(index);
+      _checkChanges();
+    });
+  }
+
+  void _onSave() {
+    final envVars = <String, String>{};
+    for (final entry in _entries) {
+      final key = entry.keyController.text.trim();
+      if (key.isNotEmpty) {
+        envVars[key] = entry.valueController.text;
+      }
+    }
+
+    ref
+        .read(stackConfigActionsProvider.notifier)
+        .saveEnvVars(widget.stackId, envVars);
+
+    setState(() {
+      _originalEnvVars = Map.from(envVars);
+      _hasChanges = false;
+    });
+  }
+
+  void _onReset() {
+    for (final entry in _entries) {
+      entry.dispose();
+    }
+    _entries.clear();
+
+    for (final entry in _originalEnvVars.entries) {
+      _entries.add(_EnvVarEntry(
+        keyController: TextEditingController(text: entry.key),
+        valueController: TextEditingController(text: entry.value),
+      ));
+    }
+
+    setState(() => _hasChanges = false);
+  }
+
+  @override
+  void dispose() {
+    for (final entry in _entries) {
+      entry.dispose();
+    }
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final envVarsAsync = ref.watch(stackEnvVarsProvider(widget.stackId));
+    final colorScheme = Theme.of(context).colorScheme;
+    final configState = ref.watch(stackConfigActionsProvider);
+    final isLoading = configState.isLoading;
+
+    return envVarsAsync.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 environment variables',
+              style: TextStyle(color: colorScheme.error),
+            ),
+            const SizedBox(height: 8),
+            Text(
+              error.toString(),
+              style: TextStyle(color: colorScheme.outline, fontSize: 12),
+              textAlign: TextAlign.center,
+            ),
+            const SizedBox(height: 16),
+            FilledButton.icon(
+              onPressed: () =>
+                  ref.invalidate(stackEnvVarsProvider(widget.stackId)),
+              icon: const Icon(Icons.refresh),
+              label: const Text('Retry'),
+            ),
+          ],
+        ),
+      ),
+      data: (envVars) {
+        _initializeEntries(envVars);
+        return Column(
+          children: [
+            // Toolbar
+            Container(
+              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+              decoration: BoxDecoration(
+                color: colorScheme.surfaceContainerLow,
+                border: Border(
+                  bottom: BorderSide(color: colorScheme.outlineVariant),
+                ),
+              ),
+              child: Row(
+                children: [
+                  Icon(
+                    Icons.settings,
+                    size: 18,
+                    color: colorScheme.onSurfaceVariant,
+                  ),
+                  const SizedBox(width: 8),
+                  Text(
+                    '.env',
+                    style: TextStyle(
+                      fontFamily: 'monospace',
+                      fontSize: 13,
+                      color: colorScheme.onSurfaceVariant,
+                    ),
+                  ),
+                  if (_hasChanges) ...[
+                    const SizedBox(width: 8),
+                    Container(
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: 8,
+                        vertical: 2,
+                      ),
+                      decoration: BoxDecoration(
+                        color: colorScheme.tertiaryContainer,
+                        borderRadius: BorderRadius.circular(4),
+                      ),
+                      child: Text(
+                        'Modified',
+                        style: TextStyle(
+                          fontSize: 11,
+                          color: colorScheme.onTertiaryContainer,
+                        ),
+                      ),
+                    ),
+                  ],
+                  const Spacer(),
+                  IconButton(
+                    icon: const Icon(Icons.add),
+                    tooltip: 'Add variable',
+                    onPressed: _addEntry,
+                  ),
+                  if (_hasChanges) ...[
+                    TextButton(
+                      onPressed: isLoading ? null : _onReset,
+                      child: const Text('Reset'),
+                    ),
+                    const SizedBox(width: 8),
+                    FilledButton.icon(
+                      onPressed: isLoading ? null : _onSave,
+                      icon: isLoading
+                          ? const SizedBox(
+                              width: 16,
+                              height: 16,
+                              child: CircularProgressIndicator(strokeWidth: 2),
+                            )
+                          : const Icon(Icons.save, size: 18),
+                      label: const Text('Save'),
+                    ),
+                  ],
+                ],
+              ),
+            ),
+            // Environment variables list
+            Expanded(
+              child: _entries.isEmpty
+                  ? Center(
+                      child: Column(
+                        mainAxisSize: MainAxisSize.min,
+                        children: [
+                          Icon(
+                            Icons.settings_outlined,
+                            size: 48,
+                            color: colorScheme.outline,
+                          ),
+                          const SizedBox(height: 16),
+                          Text(
+                            'No environment variables',
+                            style: TextStyle(color: colorScheme.outline),
+                          ),
+                          const SizedBox(height: 8),
+                          TextButton.icon(
+                            onPressed: _addEntry,
+                            icon: const Icon(Icons.add),
+                            label: const Text('Add Variable'),
+                          ),
+                        ],
+                      ),
+                    )
+                  : ListView.builder(
+                      padding: const EdgeInsets.all(16),
+                      itemCount: _entries.length,
+                      itemBuilder: (context, index) {
+                        final entry = _entries[index];
+                        return Padding(
+                          padding: const EdgeInsets.only(bottom: 8),
+                          child: Row(
+                            children: [
+                              // Key field
+                              Expanded(
+                                flex: 2,
+                                child: TextField(
+                                  controller: entry.keyController,
+                                  onChanged: (_) => _checkChanges(),
+                                  style: const TextStyle(
+                                    fontFamily: 'monospace',
+                                    fontSize: 13,
+                                  ),
+                                  decoration: InputDecoration(
+                                    labelText: 'Key',
+                                    isDense: true,
+                                    border: OutlineInputBorder(
+                                      borderRadius: BorderRadius.circular(8),
+                                    ),
+                                  ),
+                                ),
+                              ),
+                              const SizedBox(width: 8),
+                              // Equals sign
+                              Text(
+                                '=',
+                                style: TextStyle(
+                                  fontSize: 18,
+                                  color: colorScheme.outline,
+                                  fontWeight: FontWeight.bold,
+                                ),
+                              ),
+                              const SizedBox(width: 8),
+                              // Value field
+                              Expanded(
+                                flex: 3,
+                                child: TextField(
+                                  controller: entry.valueController,
+                                  onChanged: (_) => _checkChanges(),
+                                  style: const TextStyle(
+                                    fontFamily: 'monospace',
+                                    fontSize: 13,
+                                  ),
+                                  decoration: InputDecoration(
+                                    labelText: 'Value',
+                                    isDense: true,
+                                    border: OutlineInputBorder(
+                                      borderRadius: BorderRadius.circular(8),
+                                    ),
+                                  ),
+                                ),
+                              ),
+                              const SizedBox(width: 8),
+                              // Delete button
+                              IconButton(
+                                icon: Icon(
+                                  Icons.delete_outline,
+                                  color: colorScheme.error,
+                                ),
+                                tooltip: 'Remove',
+                                onPressed: () => _removeEntry(index),
+                              ),
+                            ],
+                          ),
+                        );
+                      },
+                    ),
+            ),
+          ],
+        );
+      },
+    );
+  }
+}
+
+/// Helper class to manage key-value pair controllers.
+class _EnvVarEntry {
+  _EnvVarEntry({
+    required this.keyController,
+    required this.valueController,
+  });
+
+  final TextEditingController keyController;
+  final TextEditingController valueController;
+
+  void dispose() {
+    keyController.dispose();
+    valueController.dispose();
+  }
+}

lib/features/control_room/stacks/presentation/widgets/stack_list_tile.dart

@@ -0,0 +1,130 @@
+import 'package:flutter/material.dart' hide Stack;
+import 'package:tatlock_ui/features/control_room/stacks/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'),
+              ],
+            ),
+          ),
+      ],
+    );
+  }
+}

lib/features/control_room/stacks/presentation/widgets/yaml_editor.dart

@@ -0,0 +1,175 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:tatlock_ui/features/control_room/stacks/presentation/providers/stacks_provider.dart';
+import 'package:tatlock_ui/shared/components/code_editor/code_editor.dart';
+
+/// YAML editor for stack compose configuration.
+class YamlEditor extends ConsumerStatefulWidget {
+  const YamlEditor({
+    super.key,
+    required this.stackId,
+  });
+
+  final String stackId;
+
+  @override
+  ConsumerState<YamlEditor> createState() => _YamlEditorState();
+}
+
+class _YamlEditorState extends ConsumerState<YamlEditor> {
+  final _editorKey = GlobalKey<CodeEditorState>();
+  bool _hasChanges = false;
+  String _originalYaml = '';
+  bool _initialized = false;
+
+  void _initializeEditor(String yaml) {
+    if (!_initialized && yaml.isNotEmpty) {
+      _originalYaml = yaml;
+      _initialized = true;
+    }
+  }
+
+  void _onChanged(String value) {
+    setState(() {
+      _hasChanges = value != _originalYaml;
+    });
+  }
+
+  void _onSave() {
+    final currentText = _editorKey.currentState?.text ?? '';
+    ref
+        .read(stackConfigActionsProvider.notifier)
+        .saveYaml(widget.stackId, currentText);
+    setState(() {
+      _originalYaml = currentText;
+      _hasChanges = false;
+    });
+  }
+
+  void _onReset() {
+    _editorKey.currentState?.text = _originalYaml;
+    setState(() {
+      _hasChanges = false;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final yamlAsync = ref.watch(stackYamlProvider(widget.stackId));
+    final colorScheme = Theme.of(context).colorScheme;
+    final configState = ref.watch(stackConfigActionsProvider);
+    final isLoading = configState.isLoading;
+
+    return yamlAsync.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 YAML',
+              style: TextStyle(color: colorScheme.error),
+            ),
+            const SizedBox(height: 8),
+            Text(
+              error.toString(),
+              style: TextStyle(color: colorScheme.outline, fontSize: 12),
+              textAlign: TextAlign.center,
+            ),
+            const SizedBox(height: 16),
+            FilledButton.icon(
+              onPressed: () => ref.invalidate(stackYamlProvider(widget.stackId)),
+              icon: const Icon(Icons.refresh),
+              label: const Text('Retry'),
+            ),
+          ],
+        ),
+      ),
+      data: (yaml) {
+        _initializeEditor(yaml);
+        return Column(
+          children: [
+            // Toolbar
+            Container(
+              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+              decoration: BoxDecoration(
+                color: colorScheme.surfaceContainerLow,
+                border: Border(
+                  bottom: BorderSide(color: colorScheme.outlineVariant),
+                ),
+              ),
+              child: Row(
+                children: [
+                  Icon(
+                    Icons.code,
+                    size: 18,
+                    color: colorScheme.onSurfaceVariant,
+                  ),
+                  const SizedBox(width: 8),
+                  Text(
+                    'docker-compose.yml',
+                    style: TextStyle(
+                      fontFamily: 'monospace',
+                      fontSize: 13,
+                      color: colorScheme.onSurfaceVariant,
+                    ),
+                  ),
+                  if (_hasChanges) ...[
+                    const SizedBox(width: 8),
+                    Container(
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: 8,
+                        vertical: 2,
+                      ),
+                      decoration: BoxDecoration(
+                        color: colorScheme.tertiaryContainer,
+                        borderRadius: BorderRadius.circular(4),
+                      ),
+                      child: Text(
+                        'Modified',
+                        style: TextStyle(
+                          fontSize: 11,
+                          color: colorScheme.onTertiaryContainer,
+                        ),
+                      ),
+                    ),
+                  ],
+                  const Spacer(),
+                  if (_hasChanges) ...[
+                    TextButton(
+                      onPressed: isLoading ? null : _onReset,
+                      child: const Text('Reset'),
+                    ),
+                    const SizedBox(width: 8),
+                    FilledButton.icon(
+                      onPressed: isLoading ? null : _onSave,
+                      icon: isLoading
+                          ? const SizedBox(
+                              width: 16,
+                              height: 16,
+                              child: CircularProgressIndicator(strokeWidth: 2),
+                            )
+                          : const Icon(Icons.save, size: 18),
+                      label: const Text('Save'),
+                    ),
+                  ],
+                ],
+              ),
+            ),
+            // Editor with syntax highlighting
+            Expanded(
+              child: CodeEditor(
+                key: _editorKey,
+                language: CodeEditorLanguage.yaml,
+                initialValue: yaml,
+                onChanged: _onChanged,
+              ),
+            ),
+          ],
+        );
+      },
+    );
+  }
+}

lib/features/front_hall/presentation/pages/front_hall_page.dart

@@ -1,6 +1,5 @@
 import 'package:flutter/material.dart';
-
-import '../../../../version.g.dart';
+import 'package:tatlock_ui/version.g.dart';
 
 /// Front Hall - estate overview and quick access.
 class FrontHallPage extends StatelessWidget {
@@ -10,19 +9,8 @@ class FrontHallPage extends StatelessWidget {
   Widget build(BuildContext context) {
     final colorScheme = Theme.of(context).colorScheme;
 
-    return Scaffold(
-      appBar: AppBar(
-        title: const Text('Front Hall'),
-        actions: [
-          IconButton(
-            icon: const Icon(Icons.refresh),
-            onPressed: () {
-              // TODO: Refresh data
-            },
-          ),
-        ],
-      ),
-      body: ListView(
+    // No Scaffold/AppBar needed - header is provided by AppScaffold
+    return ListView(
         padding: const EdgeInsets.all(16),
         children: [
           // Welcome card
@@ -107,8 +95,7 @@ class FrontHallPage extends StatelessWidget {
             ),
           ),
         ],
-      ),
-    );
+      );
   }
 }
 

lib/routing/app_router.dart

@@ -1,9 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
-
-import '../shared/layouts/app_scaffold.dart';
-import '../features/front_hall/presentation/pages/front_hall_page.dart';
+import 'package:tatlock_ui/features/control_room/presentation/pages/control_room_page.dart';
+import 'package:tatlock_ui/features/front_hall/presentation/pages/front_hall_page.dart';
+import 'package:tatlock_ui/shared/layouts/app_scaffold.dart';
 
 part 'app_router.g.dart';
 
@@ -35,26 +35,7 @@ GoRouter appRouter(AppRouterRef ref) {
           GoRoute(
             path: AppRoutes.controlRoom,
             name: 'controlRoom',
-            builder: (context, state) =>
-                const _PlaceholderPage(title: 'Control Room'),
-            routes: [
-              GoRoute(
-                path: 'containers',
-                name: 'containers',
-                builder: (context, state) =>
-                    const _PlaceholderPage(title: 'Containers'),
-                routes: [
-                  GoRoute(
-                    path: ':id',
-                    name: 'containerDetail',
-                    builder: (context, state) {
-                      final id = state.pathParameters['id']!;
-                      return _PlaceholderPage(title: 'Container: $id');
-                    },
-                  ),
-                ],
-              ),
-            ],
+            builder: (context, state) => const ControlRoomPage(),
           ),
           GoRoute(
             path: AppRoutes.parlor,

lib/shared/components/code_editor/code_editor.dart

@@ -0,0 +1,180 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_code_editor/flutter_code_editor.dart';
+
+import 'code_editor_language.dart';
+
+export 'code_editor_language.dart';
+
+/// A generic code editor widget with syntax highlighting.
+///
+/// Supports multiple languages via [CodeEditorLanguage] configuration.
+class CodeEditor extends StatefulWidget {
+  const CodeEditor({
+    super.key,
+    required this.language,
+    this.initialValue = '',
+    this.onChanged,
+    this.readOnly = false,
+    this.showLineNumbers = true,
+  });
+
+  /// The programming language for syntax highlighting.
+  final CodeEditorLanguage language;
+
+  /// Initial content of the editor.
+  final String initialValue;
+
+  /// Called when the content changes.
+  final ValueChanged<String>? onChanged;
+
+  /// Whether the editor is read-only.
+  final bool readOnly;
+
+  /// Whether to show line numbers.
+  final bool showLineNumbers;
+
+  @override
+  State<CodeEditor> createState() => CodeEditorState();
+}
+
+class CodeEditorState extends State<CodeEditor> {
+  late CodeController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _initController();
+  }
+
+  void _initController() {
+    _controller = CodeController(
+      text: widget.initialValue,
+      language: widget.language.mode,
+    );
+
+    _controller.addListener(_onTextChanged);
+  }
+
+  void _onTextChanged() {
+    widget.onChanged?.call(_controller.text);
+  }
+
+  @override
+  void didUpdateWidget(CodeEditor oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.language != widget.language) {
+      // Language changed, recreate controller
+      _controller.removeListener(_onTextChanged);
+      final currentText = _controller.text;
+      _controller.dispose();
+      _controller = CodeController(
+        text: currentText,
+        language: widget.language.mode,
+      );
+      _controller.addListener(_onTextChanged);
+    }
+  }
+
+  @override
+  void dispose() {
+    _controller.removeListener(_onTextChanged);
+    _controller.dispose();
+    super.dispose();
+  }
+
+  /// Gets the current text content.
+  String get text => _controller.text;
+
+  /// Sets the text content programmatically.
+  set text(String value) {
+    _controller.text = value;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final isDark = Theme.of(context).brightness == Brightness.dark;
+
+    return CodeTheme(
+      data: isDark ? _darkTheme(colorScheme) : _lightTheme(colorScheme),
+      child: CodeField(
+        controller: _controller,
+        readOnly: widget.readOnly,
+        gutterStyle: widget.showLineNumbers
+            ? GutterStyle(
+                showLineNumbers: true,
+                showErrors: false,
+                showFoldingHandles: false,
+                margin: 0,
+                textStyle: TextStyle(
+                  fontFamily: 'monospace',
+                  fontSize: 12,
+                  color: colorScheme.outline,
+                ),
+                background: colorScheme.surfaceContainerLow,
+              )
+            : GutterStyle.none,
+        textStyle: TextStyle(
+          fontFamily: 'monospace',
+          fontSize: 13,
+          height: 1.5,
+          color: colorScheme.onSurface,
+        ),
+        padding: const EdgeInsets.all(16),
+        background: colorScheme.surfaceContainerLowest,
+      ),
+    );
+  }
+
+  CodeThemeData _lightTheme(ColorScheme colorScheme) {
+    return CodeThemeData(
+      styles: {
+        'root': TextStyle(
+          color: colorScheme.onSurface,
+          backgroundColor: colorScheme.surfaceContainerLowest,
+        ),
+        'keyword': TextStyle(color: Colors.purple.shade700),
+        'string': TextStyle(color: Colors.green.shade700),
+        'number': TextStyle(color: Colors.blue.shade700),
+        'comment': TextStyle(
+          color: Colors.grey.shade600,
+          fontStyle: FontStyle.italic,
+        ),
+        'attr': TextStyle(color: Colors.orange.shade800),
+        'literal': TextStyle(color: Colors.teal.shade700),
+        'built_in': TextStyle(color: Colors.indigo.shade600),
+        'type': TextStyle(color: Colors.cyan.shade800),
+        'variable': TextStyle(color: Colors.brown.shade600),
+        'symbol': TextStyle(color: Colors.red.shade700),
+        'section': TextStyle(color: Colors.deepPurple.shade700),
+        'meta': TextStyle(color: Colors.pink.shade700),
+      },
+    );
+  }
+
+  CodeThemeData _darkTheme(ColorScheme colorScheme) {
+    return CodeThemeData(
+      styles: {
+        'root': TextStyle(
+          color: colorScheme.onSurface,
+          backgroundColor: colorScheme.surfaceContainerLowest,
+        ),
+        'keyword': const TextStyle(color: Color(0xFFC792EA)),
+        'string': const TextStyle(color: Color(0xFFC3E88D)),
+        'number': const TextStyle(color: Color(0xFFF78C6C)),
+        'comment': TextStyle(
+          color: Colors.grey.shade500,
+          fontStyle: FontStyle.italic,
+        ),
+        'attr': const TextStyle(color: Color(0xFFFFCB6B)),
+        'literal': const TextStyle(color: Color(0xFF82AAFF)),
+        'built_in': const TextStyle(color: Color(0xFF89DDFF)),
+        'type': const TextStyle(color: Color(0xFFFFCB6B)),
+        'variable': const TextStyle(color: Color(0xFFEEFFFF)),
+        'symbol': const TextStyle(color: Color(0xFFF07178)),
+        'section': const TextStyle(color: Color(0xFF82AAFF)),
+        'meta': const TextStyle(color: Color(0xFFF78C6C)),
+      },
+    );
+  }
+}

lib/shared/components/code_editor/code_editor_language.dart

@@ -0,0 +1,39 @@
+import 'package:highlight/highlight_core.dart';
+import 'package:highlight/languages/yaml.dart' as hl_yaml;
+import 'package:highlight/languages/json.dart' as hl_json;
+import 'package:highlight/languages/dockerfile.dart' as hl_dockerfile;
+import 'package:highlight/languages/bash.dart' as hl_bash;
+import 'package:highlight/languages/ini.dart' as hl_ini;
+
+/// Supported languages for the code editor.
+enum CodeEditorLanguage {
+  yaml('yaml', 'YAML'),
+  json('json', 'JSON'),
+  dockerfile('dockerfile', 'Dockerfile'),
+  bash('bash', 'Bash'),
+  ini('ini', 'INI/ENV'),
+  plaintext('plaintext', 'Plain Text');
+
+  const CodeEditorLanguage(this.id, this.displayName);
+
+  final String id;
+  final String displayName;
+
+  /// Gets the highlight Mode for this language.
+  Mode? get mode {
+    switch (this) {
+      case CodeEditorLanguage.yaml:
+        return hl_yaml.yaml;
+      case CodeEditorLanguage.json:
+        return hl_json.json;
+      case CodeEditorLanguage.dockerfile:
+        return hl_dockerfile.dockerfile;
+      case CodeEditorLanguage.bash:
+        return hl_bash.bash;
+      case CodeEditorLanguage.ini:
+        return hl_ini.ini;
+      case CodeEditorLanguage.plaintext:
+        return null;
+    }
+  }
+}

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

@@ -0,0 +1,129 @@
+import 'package:dio/dio.dart';
+import 'package:tatlock_ui/shared/components/data_grid/data_grid_source.dart';
+
+/// Data source adapter for Core API endpoints.
+///
+/// Implements the DataGrid data source interface for fetching data
+/// from the Core API with support for search, sorting, and pagination.
+///
+/// Example:
+/// ```dart
+/// final containersSource = CoreApiDataSource<Container>(
+///   dio: dio,
+///   endpoint: '/infrastructure/containers',
+///   fromJson: Container.fromJson,
+///   searchParam: 'search',
+///   sortParam: 'sort_by',
+///   orderParam: 'order',
+/// );
+/// ```
+class CoreApiDataSource<T> extends DataGridSource<T> {
+  CoreApiDataSource({
+    required this.dio,
+    required this.endpoint,
+    required this.fromJson,
+    this.searchParam = 'search',
+    this.sortParam = 'sort',
+    this.orderParam = 'order',
+    this.offsetParam = 'offset',
+    this.limitParam = 'limit',
+    this.itemsKey = 'items',
+    this.totalCountKey = 'total',
+  });
+
+  /// Dio HTTP client instance.
+  final Dio dio;
+
+  /// API endpoint path.
+  final String endpoint;
+
+  /// Function to parse JSON into the item type.
+  final T Function(Map<String, dynamic> json) fromJson;
+
+  /// Query parameter name for search.
+  final String searchParam;
+
+  /// Query parameter name for sort field.
+  final String sortParam;
+
+  /// Query parameter name for sort order.
+  final String orderParam;
+
+  /// Query parameter name for pagination offset.
+  final String offsetParam;
+
+  /// Query parameter name for pagination limit.
+  final String limitParam;
+
+  /// JSON key for items array in response.
+  final String itemsKey;
+
+  /// JSON key for total count in response.
+  final String totalCountKey;
+
+  @override
+  Future<DataGridResult<T>> fetch({
+    String? searchQuery,
+    String? sortField,
+    bool sortDescending = false,
+    int? offset,
+    int? limit,
+  }) async {
+    final queryParams = <String, dynamic>{};
+
+    if (searchQuery != null && searchQuery.isNotEmpty) {
+      queryParams[searchParam] = searchQuery;
+    }
+
+    if (sortField != null) {
+      queryParams[sortParam] = sortField;
+      queryParams[orderParam] = sortDescending ? 'desc' : 'asc';
+    }
+
+    if (offset != null) {
+      queryParams[offsetParam] = offset;
+    }
+
+    if (limit != null) {
+      queryParams[limitParam] = limit;
+    }
+
+    final response = await dio.get<Map<String, dynamic>>(
+      endpoint,
+      queryParameters: queryParams,
+    );
+
+    final data = 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;
+    } 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;
+    }
+
+    final items = itemsJson
+        .map((json) => fromJson(json as Map<String, dynamic>))
+        .toList();
+
+    final hasMore = offset != null && limit != null
+        ? (offset + items.length) < totalCount
+        : false;
+
+    return DataGridResult(
+      items: items,
+      totalCount: totalCount,
+      hasMore: hasMore,
+    );
+  }
+}

lib/shared/components/data_grid/data_grid.dart

@@ -0,0 +1,215 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.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';
+import 'widgets/data_grid_footer.dart';
+import 'widgets/data_grid_header.dart';
+import 'widgets/data_grid_row.dart';
+import 'widgets/data_grid_search_bar.dart';
+
+/// A configurable data grid widget for displaying tabular data.
+///
+/// Features:
+/// - Sortable columns
+/// - Row selection (single and bulk)
+/// - Per-row and bulk actions
+/// - Search/filtering
+/// - Pagination or infinite scroll
+/// - Custom cell rendering
+/// - Empty, loading, and error states
+///
+/// Usage:
+/// ```dart
+/// DataGrid<Container>(
+///   provider: containersGridProvider,
+///   config: containersGridConfig,
+///   idSelector: (c) => c.id,
+/// )
+/// ```
+class DataGrid<T> extends ConsumerWidget {
+  const DataGrid({
+    super.key,
+    required this.provider,
+    required this.config,
+    required this.idSelector,
+    this.toolbarActions,
+  });
+
+  /// The Riverpod provider for this grid's state.
+  final StateNotifierProvider<DataGridController<T>, DataGridState<T>> provider;
+
+  /// Grid configuration.
+  final DataGridConfig<T> config;
+
+  /// Function to extract unique ID from an item.
+  final Object Function(T item) idSelector;
+
+  /// Additional actions to show in the toolbar (next to search).
+  final List<Widget>? toolbarActions;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final state = ref.watch(provider);
+    final controller = ref.read(provider.notifier);
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        // Toolbar: search + bulk actions + custom actions
+        if (config.enableSearch ||
+            (state.selectedCount > 0 && config.bulkActions.isNotEmpty) ||
+            toolbarActions != null)
+          _buildToolbar(context, state, controller),
+
+        // Header
+        if (config.showHeader)
+          DataGridHeader<T>(
+            config: config,
+            sortColumnIndex: state.sortColumnIndex,
+            sortDescending: state.sortDescending,
+            onSort: controller.sortBy,
+            showCheckbox: config.rowsSelectable,
+            allSelected: state.allSelected,
+            someSelected: state.someSelected,
+            onSelectAll: controller.toggleSelectAll,
+          ),
+
+        // Content area
+        Expanded(
+          child: _buildContent(context, state, controller),
+        ),
+
+        // Footer
+        if (config.showFooter)
+          DataGridFooter(
+            totalCount: state.totalCount,
+            displayedCount: state.items.length,
+            dataMode: config.dataMode,
+            currentPage: state.currentPage,
+            onPageChange: controller.goToPage,
+            isLoading: state.isLoading,
+          ),
+      ],
+    );
+  }
+
+  Widget _buildToolbar(
+    BuildContext context,
+    DataGridState<T> state,
+    DataGridController<T> controller,
+  ) {
+    return Padding(
+      padding: const EdgeInsets.all(16),
+      child: Row(
+        children: [
+          if (config.enableSearch)
+            DataGridSearchBar(
+              onSearch: controller.search,
+              onClear: controller.clearSearch,
+              hintText: config.searchHint,
+              initialValue: state.searchQuery,
+            ),
+          if (state.selectedCount > 0 && config.bulkActions.isNotEmpty) ...[
+            const SizedBox(width: 16),
+            Expanded(
+              child: DataGridBulkActions<T>(
+                selectedCount: state.selectedCount,
+                bulkActions: config.bulkActions,
+                onClearSelection: controller.clearSelection,
+                getSelectedItems: controller.getSelectedItems,
+              ),
+            ),
+          ] else ...[
+            const Spacer(),
+          ],
+          if (toolbarActions != null) ...toolbarActions!,
+        ],
+      ),
+    );
+  }
+
+  Widget _buildContent(
+    BuildContext context,
+    DataGridState<T> state,
+    DataGridController<T> controller,
+  ) {
+    // Initial loading state
+    if (state.isInitialLoad && state.isLoading) {
+      return config.loadingBuilder?.call(context) ??
+          const DataGridLoadingState();
+    }
+
+    // Error state
+    if (state.hasError && state.items.isEmpty) {
+      return config.errorBuilder?.call(context, state.error!, controller.refresh) ??
+          DataGridErrorState(
+            error: state.error!,
+            onRetry: controller.refresh,
+          );
+    }
+
+    // Empty state
+    if (state.isEmpty) {
+      return config.emptyStateBuilder?.call(context) ??
+          DataGridEmptyState(
+            title: state.searchQuery.isNotEmpty
+                ? 'No results found'
+                : 'No items found',
+            subtitle: state.searchQuery.isNotEmpty
+                ? 'Try a different search term'
+                : null,
+          );
+    }
+
+    // Data rows
+    return _buildListView(state, controller);
+  }
+
+  Widget _buildListView(
+    DataGridState<T> state,
+    DataGridController<T> controller,
+  ) {
+    final isInfiniteScroll = config.dataMode is InfiniteDataMode;
+
+    return NotificationListener<ScrollNotification>(
+      onNotification: (notification) {
+        if (isInfiniteScroll &&
+            notification is ScrollEndNotification &&
+            notification.metrics.extentAfter < 200) {
+          controller.loadMore();
+        }
+        return false;
+      },
+      child: ListView.builder(
+        itemCount: state.items.length + (state.isLoading && !state.isInitialLoad ? 1 : 0),
+        itemBuilder: (context, index) {
+          // Loading indicator at bottom for infinite scroll
+          if (index >= state.items.length) {
+            return const Padding(
+              padding: EdgeInsets.all(16),
+              child: Center(child: CircularProgressIndicator()),
+            );
+          }
+
+          final item = state.items[index];
+          final isSelected = controller.isSelected(item);
+
+          return DataGridRow<T>(
+            item: item,
+            index: index,
+            config: config,
+            isSelected: isSelected,
+            onSelect: () => controller.toggleSelection(item),
+            onTap: config.onRowTap != null ? () => config.onRowTap!(item) : null,
+            backgroundColor: config.rowColor?.call(context, item, index),
+          );
+        },
+      ),
+    );
+  }
+}

lib/shared/components/data_grid/data_grid_action.dart

@@ -0,0 +1,83 @@
+import 'package:flutter/material.dart';
+
+/// Per-row action for DataGrid.
+class DataGridAction<T> {
+  const DataGridAction({
+    required this.icon,
+    required this.label,
+    required this.onTap,
+    this.showWhen,
+    this.destructive = false,
+    this.requiresConfirmation = false,
+    this.confirmationMessage,
+  });
+
+  /// Icon to display in the action menu.
+  final IconData icon;
+
+  /// Label for the action.
+  final String label;
+
+  /// Callback when the action is triggered.
+  final Future<void> Function(T item) onTap;
+
+  /// Condition to show/hide this action for specific items.
+  final bool Function(T item)? showWhen;
+
+  /// Whether this is a destructive action (styled differently).
+  final bool destructive;
+
+  /// Whether to show a confirmation dialog before executing.
+  final bool requiresConfirmation;
+
+  /// Custom confirmation message. Defaults to "Are you sure?".
+  final String? confirmationMessage;
+
+  /// Checks if this action should be shown for the given item.
+  bool shouldShow(T item) => showWhen?.call(item) ?? true;
+}
+
+/// Bulk action for selected rows in DataGrid.
+class DataGridBulkAction<T> {
+  const DataGridBulkAction({
+    required this.icon,
+    required this.label,
+    required this.onTap,
+    this.minSelected = 1,
+    this.maxSelected,
+    this.destructive = false,
+    this.requiresConfirmation = false,
+    this.confirmationMessage,
+  });
+
+  /// Icon to display.
+  final IconData icon;
+
+  /// Label for the action.
+  final String label;
+
+  /// Callback when the action is triggered with selected items.
+  final Future<void> Function(List<T> items) onTap;
+
+  /// Minimum number of items that must be selected.
+  final int minSelected;
+
+  /// Maximum number of items that can be selected (null = no limit).
+  final int? maxSelected;
+
+  /// Whether this is a destructive action.
+  final bool destructive;
+
+  /// Whether to show a confirmation dialog before executing.
+  final bool requiresConfirmation;
+
+  /// Custom confirmation message.
+  final String? confirmationMessage;
+
+  /// Checks if this action is available for the given selection count.
+  bool isAvailable(int selectedCount) {
+    if (selectedCount < minSelected) return false;
+    if (maxSelected != null && selectedCount > maxSelected!) return false;
+    return true;
+  }
+}

lib/shared/components/data_grid/data_grid_column.dart

@@ -0,0 +1,110 @@
+import 'package:flutter/material.dart';
+
+/// Column width specification for DataGrid columns.
+sealed class DataGridColumnWidth {
+  const DataGridColumnWidth._();
+
+  /// Fixed width in logical pixels.
+  const factory DataGridColumnWidth.fixed(double width) = GridFixedWidth;
+
+  /// Flexible width with flex factor (like Expanded).
+  const factory DataGridColumnWidth.flex([int flex]) = GridFlexWidth;
+
+  /// Fraction of available width (0.0 to 1.0).
+  const factory DataGridColumnWidth.fraction(double fraction) =
+      GridFractionWidth;
+}
+
+/// Fixed column width.
+final class GridFixedWidth extends DataGridColumnWidth {
+  const GridFixedWidth(this.width) : super._();
+  final double width;
+}
+
+/// Flexible column width.
+final class GridFlexWidth extends DataGridColumnWidth {
+  const GridFlexWidth([this.flex = 1]) : super._();
+  final int flex;
+}
+
+/// Fractional column width.
+final class GridFractionWidth extends DataGridColumnWidth {
+  const GridFractionWidth(this.fraction)
+      : assert(fraction > 0 && fraction <= 1),
+        super._();
+  final double fraction;
+}
+
+/// Column alignment options.
+enum DataGridColumnAlignment {
+  start,
+  center,
+  end,
+}
+
+/// Column definition for DataGrid.
+class DataGridColumn<T> {
+  const DataGridColumn({
+    required this.header,
+    required this.valueBuilder,
+    this.cellBuilder,
+    this.cellControlsBuilder,
+    this.width = const DataGridColumnWidth.flex(1),
+    this.alignment = DataGridColumnAlignment.start,
+    this.sortable = false,
+    this.sortField,
+    this.searchable = false,
+    this.visible = true,
+    this.tooltip,
+  });
+
+  /// Column header text.
+  final String header;
+
+  /// Extracts the string value from an item for sorting/searching.
+  final String Function(T item) valueBuilder;
+
+  /// Custom cell widget builder. If null, displays valueBuilder result as text.
+  final Widget Function(BuildContext context, T item)? cellBuilder;
+
+  /// Additional controls to show in the cell (e.g., quick actions).
+  final Widget Function(BuildContext context, T item)? cellControlsBuilder;
+
+  /// Column width specification.
+  final DataGridColumnWidth width;
+
+  /// Text alignment within the column.
+  final DataGridColumnAlignment alignment;
+
+  /// Whether this column can be sorted.
+  final bool sortable;
+
+  /// API field name for server-side sorting. Defaults to using header if null.
+  final String? sortField;
+
+  /// Whether this column is included in search.
+  final bool searchable;
+
+  /// Whether this column is visible.
+  final bool visible;
+
+  /// Tooltip builder for cell hover.
+  final String Function(T item)? tooltip;
+
+  /// Gets the effective sort field name.
+  String get effectiveSortField => sortField ?? header.toLowerCase();
+
+  /// Converts alignment enum to CrossAxisAlignment.
+  CrossAxisAlignment get crossAxisAlignment => switch (alignment) {
+        DataGridColumnAlignment.start => CrossAxisAlignment.start,
+        DataGridColumnAlignment.center => CrossAxisAlignment.center,
+        DataGridColumnAlignment.end => CrossAxisAlignment.end,
+      };
+
+  /// Converts alignment enum to TextAlign.
+  TextAlign get textAlign => switch (alignment) {
+        DataGridColumnAlignment.start => TextAlign.start,
+        DataGridColumnAlignment.center => TextAlign.center,
+        DataGridColumnAlignment.end => TextAlign.end,
+      };
+}

lib/shared/components/data_grid/data_grid_config.dart

@@ -0,0 +1,142 @@
+import 'package:flutter/material.dart';
+
+import 'data_grid_action.dart';
+import 'data_grid_column.dart';
+
+/// Data loading mode for the grid.
+sealed class DataGridDataMode {
+  const DataGridDataMode._();
+
+  /// Load all data at once.
+  const factory DataGridDataMode.all() = AllDataMode;
+
+  /// Paginated loading with page controls.
+  const factory DataGridDataMode.paginated({int pageSize}) = PaginatedDataMode;
+
+  /// Infinite scroll loading.
+  const factory DataGridDataMode.infinite({
+    int initialLoad,
+    int loadMoreThreshold,
+  }) = InfiniteDataMode;
+}
+
+/// Load all data mode.
+final class AllDataMode extends DataGridDataMode {
+  const AllDataMode() : super._();
+}
+
+/// Paginated data mode.
+final class PaginatedDataMode extends DataGridDataMode {
+  const PaginatedDataMode({this.pageSize = 25}) : super._();
+  final int pageSize;
+}
+
+/// Infinite scroll data mode.
+final class InfiniteDataMode extends DataGridDataMode {
+  const InfiniteDataMode({
+    this.initialLoad = 50,
+    this.loadMoreThreshold = 10,
+  }) : super._();
+
+  final int initialLoad;
+  final int loadMoreThreshold;
+}
+
+/// Main configuration for a DataGrid.
+class DataGridConfig<T> {
+  const DataGridConfig({
+    required this.columns,
+    this.actions = const [],
+    this.bulkActions = const [],
+    this.rowsSelectable = false,
+    this.showHeader = true,
+    this.showFooter = true,
+    this.enableSearch = false,
+    this.searchHint = 'Search...',
+    this.defaultSortColumn,
+    this.defaultSortDescending = false,
+    this.emptyStateBuilder,
+    this.loadingBuilder,
+    this.errorBuilder,
+    this.onRowTap,
+    this.cellPadding = const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+    this.headerHeight = 48.0,
+    this.rowHeight,
+    this.dataMode = const DataGridDataMode.all(),
+    this.rowColor,
+    this.alternatingRowColors = false,
+  });
+
+  /// Column definitions.
+  final List<DataGridColumn<T>> columns;
+
+  /// Per-row actions (shown in actions menu).
+  final List<DataGridAction<T>> actions;
+
+  /// Bulk actions for selected rows.
+  final List<DataGridBulkAction<T>> bulkActions;
+
+  /// Whether rows can be selected.
+  final bool rowsSelectable;
+
+  /// Whether to show the header row.
+  final bool showHeader;
+
+  /// Whether to show the footer with count/pagination.
+  final bool showFooter;
+
+  /// Whether to show search bar.
+  final bool enableSearch;
+
+  /// Placeholder text for search input.
+  final String searchHint;
+
+  /// Index of column to sort by default.
+  final int? defaultSortColumn;
+
+  /// Whether default sort is descending.
+  final bool defaultSortDescending;
+
+  /// Custom empty state widget builder.
+  final Widget Function(BuildContext context)? emptyStateBuilder;
+
+  /// Custom loading widget builder.
+  final Widget Function(BuildContext context)? loadingBuilder;
+
+  /// Custom error widget builder.
+  final Widget Function(BuildContext context, Object error, VoidCallback retry)?
+      errorBuilder;
+
+  /// Callback when a row is tapped.
+  final void Function(T item)? onRowTap;
+
+  /// Padding for each cell.
+  final EdgeInsetsGeometry cellPadding;
+
+  /// Height of the header row.
+  final double headerHeight;
+
+  /// Height of each data row. If null, rows size to content.
+  final double? rowHeight;
+
+  /// Data loading mode.
+  final DataGridDataMode dataMode;
+
+  /// Custom row background color builder.
+  final Color? Function(BuildContext context, T item, int index)? rowColor;
+
+  /// Whether to use alternating row colors.
+  final bool alternatingRowColors;
+
+  /// Gets visible columns only.
+  List<DataGridColumn<T>> get visibleColumns =>
+      columns.where((c) => c.visible).toList();
+
+  /// Gets searchable column indices.
+  List<int> get searchableColumnIndices => columns
+      .asMap()
+      .entries
+      .where((e) => e.value.searchable)
+      .map((e) => e.key)
+      .toList();
+}

lib/shared/components/data_grid/data_grid_exports.dart

@@ -0,0 +1,85 @@
+/// DataGrid component for displaying tabular data.
+///
+/// This library provides a configurable, feature-rich data grid widget
+/// for Flutter applications using Riverpod for state management.
+///
+/// Features:
+/// - Sortable columns
+/// - Row selection (single and bulk)
+/// - Per-row and bulk actions with confirmations
+/// - Search/filtering
+/// - Pagination or infinite scroll
+/// - Custom cell rendering
+/// - Empty, loading, and error states
+/// - Responsive column widths
+///
+/// Example:
+/// ```dart
+/// // Define your data source
+/// final usersSource = InMemoryDataSource<User>(
+///   items: users,
+///   searchMatcher: (user, query) =>
+///     user.name.toLowerCase().contains(query.toLowerCase()),
+/// );
+///
+/// // Define grid configuration
+/// final usersConfig = DataGridConfig<User>(
+///   columns: [
+///     DataGridColumn(
+///       header: 'Name',
+///       valueBuilder: (u) => u.name,
+///       sortable: true,
+///       searchable: true,
+///     ),
+///     DataGridColumn(
+///       header: 'Email',
+///       valueBuilder: (u) => u.email,
+///     ),
+///     DataGridColumn(
+///       header: 'Status',
+///       valueBuilder: (u) => u.status,
+///       cellBuilder: (context, u) => StatusBadge(status: u.status),
+///     ),
+///   ],
+///   actions: [
+///     DataGridAction(
+///       icon: Icons.edit,
+///       label: 'Edit',
+///       onTap: (user) async => editUser(user),
+///     ),
+///     DataGridAction(
+///       icon: Icons.delete,
+///       label: 'Delete',
+///       onTap: (user) async => deleteUser(user),
+///       destructive: true,
+///       requiresConfirmation: true,
+///     ),
+///   ],
+///   rowsSelectable: true,
+///   enableSearch: true,
+/// );
+///
+/// // Create the provider
+/// final usersGridProvider = dataGridProvider<User>(
+///   source: usersSource,
+///   config: usersConfig,
+///   idSelector: (u) => u.id,
+/// );
+///
+/// // Use in widget
+/// DataGrid<User>(
+///   provider: usersGridProvider,
+///   config: usersConfig,
+///   idSelector: (u) => u.id,
+/// )
+/// ```
+library;
+
+export 'data_grid.dart';
+export 'data_grid_action.dart';
+export 'data_grid_column.dart';
+export 'data_grid_config.dart';
+export 'data_grid_provider.dart';
+export 'data_grid_source.dart';
+export 'data_grid_state.dart';
+export 'widgets/data_grid_empty_state.dart';

lib/shared/components/data_grid/data_grid_provider.dart

@@ -0,0 +1,266 @@
+import 'dart:async';
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import 'data_grid_config.dart';
+import 'data_grid_source.dart';
+import 'data_grid_state.dart';
+
+/// Controller for a DataGrid instance.
+///
+/// Manages loading, searching, sorting, and selection state.
+class DataGridController<T> extends StateNotifier<DataGridState<T>> {
+  DataGridController({
+    required this.source,
+    required this.config,
+    required this.idSelector,
+  }) : super(DataGridState<T>(
+          sortColumnIndex: config.defaultSortColumn,
+          sortDescending: config.defaultSortDescending,
+        )) {
+    // Initial load
+    _load();
+  }
+
+  /// Data source for fetching items.
+  final DataGridSource<T> source;
+
+  /// Grid configuration.
+  final DataGridConfig<T> config;
+
+  /// Function to extract unique ID from an item.
+  final Object Function(T item) idSelector;
+
+  /// Debounce timer for search.
+  Timer? _searchDebounce;
+
+  @override
+  void dispose() {
+    _searchDebounce?.cancel();
+    super.dispose();
+  }
+
+  /// Loads or reloads data from the source.
+  Future<void> _load({bool refresh = false}) async {
+    if (refresh) {
+      state = state.copyWith(isLoading: true, error: null);
+    } else {
+      state = state.copyWith(isLoading: true, isInitialLoad: true, error: null);
+    }
+
+    try {
+      final sortField = state.sortColumnIndex != null
+          ? config.columns[state.sortColumnIndex!].effectiveSortField
+          : null;
+
+      final (offset, limit) = _getPaginationParams();
+
+      final result = await source.fetch(
+        searchQuery: state.searchQuery.isEmpty ? null : state.searchQuery,
+        sortField: sortField,
+        sortDescending: state.sortDescending,
+        offset: offset,
+        limit: limit,
+      );
+
+      state = state.copyWith(
+        items: result.items,
+        totalCount: result.totalCount,
+        hasMore: result.hasMore,
+        isLoading: false,
+        isInitialLoad: false,
+        error: null,
+      );
+    } catch (e, stack) {
+      debugPrint('DataGrid load error: $e\n$stack');
+      state = state.copyWith(
+        isLoading: false,
+        isInitialLoad: false,
+        error: e,
+      );
+    }
+  }
+
+  /// Gets pagination parameters based on data mode.
+  (int?, int?) _getPaginationParams() {
+    return switch (config.dataMode) {
+      AllDataMode() => (null, null),
+      PaginatedDataMode(:final pageSize) => (
+          state.currentPage * pageSize,
+          pageSize,
+        ),
+      InfiniteDataMode(:final initialLoad) => (0, initialLoad),
+    };
+  }
+
+  /// Refreshes the grid data.
+  Future<void> refresh() => _load(refresh: true);
+
+  /// Sets the search query with debouncing.
+  void search(String query) {
+    _searchDebounce?.cancel();
+    _searchDebounce = Timer(const Duration(milliseconds: 300), () {
+      if (state.searchQuery != query) {
+        state = state.copyWith(searchQuery: query, currentPage: 0);
+        _load(refresh: true);
+      }
+    });
+  }
+
+  /// Clears the search query.
+  void clearSearch() {
+    _searchDebounce?.cancel();
+    if (state.searchQuery.isNotEmpty) {
+      state = state.copyWith(searchQuery: '', currentPage: 0);
+      _load(refresh: true);
+    }
+  }
+
+  /// Sorts by the given column index.
+  void sortBy(int columnIndex) {
+    final column = config.columns[columnIndex];
+    if (!column.sortable) return;
+
+    final newDescending =
+        state.sortColumnIndex == columnIndex ? !state.sortDescending : false;
+
+    state = state.copyWith(
+      sortColumnIndex: columnIndex,
+      sortDescending: newDescending,
+      currentPage: 0,
+    );
+    _load(refresh: true);
+  }
+
+  /// Clears sorting.
+  void clearSort() {
+    state = state.copyWith(
+      sortColumnIndex: null,
+      sortDescending: false,
+      currentPage: 0,
+    );
+    _load(refresh: true);
+  }
+
+  /// Toggles selection of an item.
+  void toggleSelection(T item) {
+    if (!config.rowsSelectable) return;
+
+    final id = idSelector(item);
+    final newSelection = Set<Object>.from(state.selectedIds);
+
+    if (newSelection.contains(id)) {
+      newSelection.remove(id);
+    } else {
+      newSelection.add(id);
+    }
+
+    state = state.copyWith(selectedIds: newSelection);
+  }
+
+  /// Selects all visible items.
+  void selectAll() {
+    if (!config.rowsSelectable) return;
+
+    final allIds = state.items.map(idSelector).toSet();
+    state = state.copyWith(selectedIds: allIds);
+  }
+
+  /// Clears all selections.
+  void clearSelection() {
+    state = state.copyWith(selectedIds: {});
+  }
+
+  /// Toggles select all / clear all.
+  void toggleSelectAll() {
+    if (state.allSelected) {
+      clearSelection();
+    } else {
+      selectAll();
+    }
+  }
+
+  /// Checks if an item is selected.
+  bool isSelected(T item) => state.selectedIds.contains(idSelector(item));
+
+  /// Gets the selected items.
+  List<T> getSelectedItems() {
+    return state.items.where((item) => isSelected(item)).toList();
+  }
+
+  /// Goes to a specific page (for paginated mode).
+  void goToPage(int page) {
+    if (config.dataMode is! PaginatedDataMode) return;
+
+    final mode = config.dataMode as PaginatedDataMode;
+    final maxPage = (state.totalCount / mode.pageSize).ceil() - 1;
+
+    if (page < 0 || page > maxPage) return;
+
+    state = state.copyWith(currentPage: page);
+    _load(refresh: true);
+  }
+
+  /// Goes to the next page.
+  void nextPage() => goToPage(state.currentPage + 1);
+
+  /// Goes to the previous page.
+  void previousPage() => goToPage(state.currentPage - 1);
+
+  /// Loads more items (for infinite scroll mode).
+  Future<void> loadMore() async {
+    if (config.dataMode is! InfiniteDataMode) return;
+    if (state.isLoading || !state.hasMore) return;
+
+    state = state.copyWith(isLoading: true);
+
+    try {
+      final sortField = state.sortColumnIndex != null
+          ? config.columns[state.sortColumnIndex!].effectiveSortField
+          : null;
+
+      final result = await source.fetch(
+        searchQuery: state.searchQuery.isEmpty ? null : state.searchQuery,
+        sortField: sortField,
+        sortDescending: state.sortDescending,
+        offset: state.items.length,
+        limit: (config.dataMode as InfiniteDataMode).initialLoad,
+      );
+
+      state = state.copyWith(
+        items: [...state.items, ...result.items],
+        totalCount: result.totalCount,
+        hasMore: result.hasMore,
+        isLoading: false,
+      );
+    } catch (e) {
+      state = state.copyWith(isLoading: false, error: e);
+    }
+  }
+}
+
+/// Creates a DataGridController provider for a specific grid.
+///
+/// Usage:
+/// ```dart
+/// final containersGridProvider = dataGridProvider<Container>(
+///   source: containersDataSource,
+///   config: containersGridConfig,
+///   idSelector: (c) => c.id,
+/// );
+/// ```
+StateNotifierProvider<DataGridController<T>, DataGridState<T>>
+    dataGridProvider<T>({
+  required DataGridSource<T> source,
+  required DataGridConfig<T> config,
+  required Object Function(T) idSelector,
+}) {
+  return StateNotifierProvider<DataGridController<T>, DataGridState<T>>(
+    (ref) => DataGridController<T>(
+      source: source,
+      config: config,
+      idSelector: idSelector,
+    ),
+  );
+}

lib/shared/components/data_grid/data_grid_source.dart

@@ -0,0 +1,108 @@
+/// Result from a data source fetch operation.
+class DataGridResult<T> {
+  const DataGridResult({
+    required this.items,
+    required this.totalCount,
+    this.hasMore = false,
+  });
+
+  /// The fetched items.
+  final List<T> items;
+
+  /// Total count of items (for pagination display).
+  final int totalCount;
+
+  /// Whether there are more items to load (for infinite scroll).
+  final bool hasMore;
+
+  /// Creates an empty result.
+  const DataGridResult.empty()
+      : items = const [],
+        totalCount = 0,
+        hasMore = false;
+}
+
+/// Abstract data source for DataGrid.
+///
+/// Implement this to provide data to the grid. Can be backed by
+/// API calls, local database, or in-memory lists.
+abstract class DataGridSource<T> {
+  /// Fetches items from the data source.
+  ///
+  /// - [searchQuery]: Optional search text to filter results.
+  /// - [sortField]: Field name to sort by.
+  /// - [sortDescending]: Whether to sort in descending order.
+  /// - [offset]: Number of items to skip (for pagination).
+  /// - [limit]: Maximum number of items to return.
+  Future<DataGridResult<T>> fetch({
+    String? searchQuery,
+    String? sortField,
+    bool sortDescending = false,
+    int? offset,
+    int? limit,
+  });
+
+  /// Gets the total count of items matching the query.
+  ///
+  /// Override this if you need a separate count query.
+  /// By default, returns the totalCount from the last fetch.
+  Future<int> count({String? searchQuery}) async {
+    final result = await fetch(searchQuery: searchQuery, limit: 0);
+    return result.totalCount;
+  }
+}
+
+/// In-memory data source for local data.
+class InMemoryDataSource<T> extends DataGridSource<T> {
+  InMemoryDataSource({
+    required this.items,
+    this.searchMatcher,
+    this.sortComparator,
+  });
+
+  /// All items in the data source.
+  final List<T> items;
+
+  /// Function to check if an item matches the search query.
+  final bool Function(T item, String query)? searchMatcher;
+
+  /// Function to compare two items for sorting.
+  final int Function(T a, T b, String field, bool descending)? sortComparator;
+
+  @override
+  Future<DataGridResult<T>> fetch({
+    String? searchQuery,
+    String? sortField,
+    bool sortDescending = false,
+    int? offset,
+    int? limit,
+  }) async {
+    var result = List<T>.from(items);
+
+    // Apply search filter
+    if (searchQuery != null && searchQuery.isNotEmpty && searchMatcher != null) {
+      result = result.where((item) => searchMatcher!(item, searchQuery)).toList();
+    }
+
+    // Apply sorting
+    if (sortField != null && sortComparator != null) {
+      result.sort((a, b) => sortComparator!(a, b, sortField, sortDescending));
+    }
+
+    final totalCount = result.length;
+
+    // Apply pagination
+    if (offset != null && offset > 0) {
+      result = result.skip(offset).toList();
+    }
+    if (limit != null && limit > 0) {
+      result = result.take(limit).toList();
+    }
+
+    return DataGridResult(
+      items: result,
+      totalCount: totalCount,
+      hasMore: offset != null && limit != null && (offset + limit) < totalCount,
+    );
+  }
+}

lib/shared/components/data_grid/data_grid_state.dart

@@ -0,0 +1,62 @@
+import 'package:freezed_annotation/freezed_annotation.dart';
+
+part 'data_grid_state.freezed.dart';
+
+/// State for a DataGrid instance.
+@freezed
+class DataGridState<T> with _$DataGridState<T> {
+  const factory DataGridState({
+    /// Current items being displayed.
+    @Default([]) List<T> items,
+
+    /// Total count of items (may differ from items.length for pagination).
+    @Default(0) int totalCount,
+
+    /// Whether data is currently loading.
+    @Default(false) bool isLoading,
+
+    /// Whether initial load is in progress.
+    @Default(true) bool isInitialLoad,
+
+    /// Error that occurred during loading.
+    Object? error,
+
+    /// Current search query.
+    @Default('') String searchQuery,
+
+    /// Index of the column currently sorted by.
+    int? sortColumnIndex,
+
+    /// Whether sort is descending.
+    @Default(false) bool sortDescending,
+
+    /// Currently selected item IDs (if selectable).
+    @Default({}) Set<Object> selectedIds,
+
+    /// Current page (for paginated mode).
+    @Default(0) int currentPage,
+
+    /// Whether more items can be loaded (for infinite scroll).
+    @Default(false) bool hasMore,
+  }) = _DataGridState<T>;
+}
+
+/// Extension methods for DataGridState.
+extension DataGridStateX<T> on DataGridState<T> {
+  /// Whether the grid has an error.
+  bool get hasError => error != null;
+
+  /// Whether the grid is empty (no items and not loading).
+  bool get isEmpty => items.isEmpty && !isLoading && !hasError;
+
+  /// Whether all visible items are selected.
+  bool get allSelected =>
+      items.isNotEmpty && selectedIds.length == items.length;
+
+  /// Whether some (but not all) items are selected.
+  bool get someSelected =>
+      selectedIds.isNotEmpty && selectedIds.length < items.length;
+
+  /// Number of selected items.
+  int get selectedCount => selectedIds.length;
+}

lib/shared/components/data_grid/widgets/data_grid_actions_menu.dart

@@ -0,0 +1,98 @@
+import 'package:flutter/material.dart';
+import 'package:tatlock_ui/shared/components/data_grid/data_grid_action.dart';
+
+/// Actions menu for a DataGrid row.
+class DataGridActionsMenu<T> extends StatelessWidget {
+  const DataGridActionsMenu({
+    super.key,
+    required this.item,
+    required this.actions,
+  });
+
+  final T item;
+  final List<DataGridAction<T>> actions;
+
+  @override
+  Widget build(BuildContext context) {
+    final visibleActions = actions.where((a) => a.shouldShow(item)).toList();
+
+    if (visibleActions.isEmpty) {
+      return const SizedBox.shrink();
+    }
+
+    return PopupMenuButton<DataGridAction<T>>(
+      icon: const Icon(Icons.more_vert),
+      tooltip: 'Actions',
+      onSelected: (action) => _handleAction(context, action),
+      itemBuilder: (context) => visibleActions.map((action) {
+        final colorScheme = Theme.of(context).colorScheme;
+
+        return PopupMenuItem<DataGridAction<T>>(
+          value: action,
+          child: Row(
+            children: [
+              Icon(
+                action.icon,
+                size: 20,
+                color: action.destructive ? colorScheme.error : null,
+              ),
+              const SizedBox(width: 12),
+              Text(
+                action.label,
+                style: TextStyle(
+                  color: action.destructive ? colorScheme.error : null,
+                ),
+              ),
+            ],
+          ),
+        );
+      }).toList(),
+    );
+  }
+
+  Future<void> _handleAction(
+    BuildContext context,
+    DataGridAction<T> action,
+  ) async {
+    if (action.requiresConfirmation) {
+      final confirmed = await _showConfirmationDialog(context, action);
+      if (!confirmed) return;
+    }
+
+    await action.onTap(item);
+  }
+
+  Future<bool> _showConfirmationDialog(
+    BuildContext context,
+    DataGridAction<T> action,
+  ) async {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return await showDialog<bool>(
+          context: context,
+          builder: (context) => AlertDialog(
+            title: Text(action.label),
+            content: Text(
+              action.confirmationMessage ?? 'Are you sure you want to proceed?',
+            ),
+            actions: [
+              TextButton(
+                onPressed: () => Navigator.of(context).pop(false),
+                child: const Text('Cancel'),
+              ),
+              FilledButton(
+                onPressed: () => Navigator.of(context).pop(true),
+                style: action.destructive
+                    ? FilledButton.styleFrom(
+                        backgroundColor: colorScheme.error,
+                        foregroundColor: colorScheme.onError,
+                      )
+                    : null,
+                child: const Text('Confirm'),
+              ),
+            ],
+          ),
+        ) ??
+        false;
+  }
+}

lib/shared/components/data_grid/widgets/data_grid_bulk_actions.dart

@@ -0,0 +1,143 @@
+import 'package:flutter/material.dart';
+import 'package:tatlock_ui/shared/components/data_grid/data_grid_action.dart';
+
+/// Bulk actions bar shown when items are selected.
+class DataGridBulkActions<T> extends StatelessWidget {
+  const DataGridBulkActions({
+    super.key,
+    required this.selectedCount,
+    required this.bulkActions,
+    required this.onClearSelection,
+    required this.getSelectedItems,
+  });
+
+  final int selectedCount;
+  final List<DataGridBulkAction<T>> bulkActions;
+  final VoidCallback onClearSelection;
+  final List<T> Function() getSelectedItems;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+      decoration: BoxDecoration(
+        color: colorScheme.primaryContainer,
+        borderRadius: BorderRadius.circular(8),
+      ),
+      child: Row(
+        children: [
+          Text(
+            '$selectedCount selected',
+            style: TextStyle(
+              fontWeight: FontWeight.w500,
+              color: colorScheme.onPrimaryContainer,
+            ),
+          ),
+          const SizedBox(width: 16),
+          ...bulkActions.where((a) => a.isAvailable(selectedCount)).map(
+                (action) => Padding(
+                  padding: const EdgeInsets.only(right: 8),
+                  child: _BulkActionButton(
+                    action: action,
+                    onPressed: () => _handleAction(context, action),
+                  ),
+                ),
+              ),
+          const Spacer(),
+          IconButton(
+            icon: const Icon(Icons.close),
+            onPressed: onClearSelection,
+            tooltip: 'Clear selection',
+          ),
+        ],
+      ),
+    );
+  }
+
+  Future<void> _handleAction(
+    BuildContext context,
+    DataGridBulkAction<T> action,
+  ) async {
+    if (action.requiresConfirmation) {
+      final confirmed = await _showConfirmationDialog(context, action);
+      if (!confirmed) return;
+    }
+
+    final items = getSelectedItems();
+    await action.onTap(items);
+  }
+
+  Future<bool> _showConfirmationDialog(
+    BuildContext context,
+    DataGridBulkAction<T> action,
+  ) async {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return await showDialog<bool>(
+          context: context,
+          builder: (context) => AlertDialog(
+            title: Text(action.label),
+            content: Text(
+              action.confirmationMessage ??
+                  'Are you sure you want to ${action.label.toLowerCase()} $selectedCount items?',
+            ),
+            actions: [
+              TextButton(
+                onPressed: () => Navigator.of(context).pop(false),
+                child: const Text('Cancel'),
+              ),
+              FilledButton(
+                onPressed: () => Navigator.of(context).pop(true),
+                style: action.destructive
+                    ? FilledButton.styleFrom(
+                        backgroundColor: colorScheme.error,
+                        foregroundColor: colorScheme.onError,
+                      )
+                    : null,
+                child: const Text('Confirm'),
+              ),
+            ],
+          ),
+        ) ??
+        false;
+  }
+}
+
+class _BulkActionButton<T> extends StatelessWidget {
+  const _BulkActionButton({
+    required this.action,
+    required this.onPressed,
+  });
+
+  final DataGridBulkAction<T> action;
+  final VoidCallback onPressed;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    if (action.destructive) {
+      return OutlinedButton.icon(
+        onPressed: onPressed,
+        icon: Icon(action.icon, size: 18),
+        label: Text(action.label),
+        style: OutlinedButton.styleFrom(
+          foregroundColor: colorScheme.error,
+          side: BorderSide(color: colorScheme.error),
+        ),
+      );
+    }
+
+    return OutlinedButton.icon(
+      onPressed: onPressed,
+      icon: Icon(action.icon, size: 18),
+      label: Text(action.label),
+      style: OutlinedButton.styleFrom(
+        foregroundColor: colorScheme.onPrimaryContainer,
+        side: BorderSide(color: colorScheme.onPrimaryContainer),
+      ),
+    );
+  }
+}

lib/shared/components/data_grid/widgets/data_grid_empty_state.dart

@@ -0,0 +1,133 @@
+import 'package:flutter/material.dart';
+
+/// Default empty state for DataGrid.
+class DataGridEmptyState extends StatelessWidget {
+  const DataGridEmptyState({
+    super.key,
+    this.icon = Icons.inbox_outlined,
+    this.title = 'No items found',
+    this.subtitle,
+    this.action,
+    this.onAction,
+  });
+
+  final IconData icon;
+  final String title;
+  final String? subtitle;
+  final String? action;
+  final VoidCallback? onAction;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Center(
+      child: Padding(
+        padding: const EdgeInsets.all(32),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Icon(
+              icon,
+              size: 64,
+              color: colorScheme.outline,
+            ),
+            const SizedBox(height: 16),
+            Text(
+              title,
+              style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                    color: colorScheme.onSurfaceVariant,
+                  ),
+            ),
+            if (subtitle != null) ...[
+              const SizedBox(height: 8),
+              Text(
+                subtitle!,
+                style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                      color: colorScheme.outline,
+                    ),
+                textAlign: TextAlign.center,
+              ),
+            ],
+            if (action != null && onAction != null) ...[
+              const SizedBox(height: 24),
+              FilledButton.tonal(
+                onPressed: onAction,
+                child: Text(action!),
+              ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// Loading state for DataGrid.
+class DataGridLoadingState extends StatelessWidget {
+  const DataGridLoadingState({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const Center(
+      child: Padding(
+        padding: EdgeInsets.all(32),
+        child: CircularProgressIndicator(),
+      ),
+    );
+  }
+}
+
+/// Error state for DataGrid.
+class DataGridErrorState extends StatelessWidget {
+  const DataGridErrorState({
+    super.key,
+    required this.error,
+    required this.onRetry,
+  });
+
+  final Object error;
+  final VoidCallback onRetry;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Center(
+      child: Padding(
+        padding: const EdgeInsets.all(32),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Icon(
+              Icons.error_outline,
+              size: 64,
+              color: colorScheme.error,
+            ),
+            const SizedBox(height: 16),
+            Text(
+              'Failed to load data',
+              style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                    color: colorScheme.onSurfaceVariant,
+                  ),
+            ),
+            const SizedBox(height: 8),
+            Text(
+              error.toString(),
+              style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                    color: colorScheme.outline,
+                  ),
+              textAlign: TextAlign.center,
+            ),
+            const SizedBox(height: 24),
+            FilledButton.icon(
+              onPressed: onRetry,
+              icon: const Icon(Icons.refresh),
+              label: const Text('Retry'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/shared/components/data_grid/widgets/data_grid_footer.dart

@@ -0,0 +1,110 @@
+import 'package:flutter/material.dart';
+import 'package:tatlock_ui/shared/components/data_grid/data_grid_config.dart';
+
+/// Footer for DataGrid with item count and pagination controls.
+class DataGridFooter extends StatelessWidget {
+  const DataGridFooter({
+    super.key,
+    required this.totalCount,
+    required this.displayedCount,
+    required this.dataMode,
+    this.currentPage = 0,
+    this.onPageChange,
+    this.isLoading = false,
+  });
+
+  final int totalCount;
+  final int displayedCount;
+  final DataGridDataMode dataMode;
+  final int currentPage;
+  final void Function(int page)? onPageChange;
+  final bool isLoading;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+      decoration: BoxDecoration(
+        color: colorScheme.surfaceContainerHighest,
+        border: Border(
+          top: BorderSide(color: colorScheme.outlineVariant),
+        ),
+      ),
+      child: Row(
+        children: [
+          Text(
+            _getCountText(),
+            style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                  color: colorScheme.onSurfaceVariant,
+                ),
+          ),
+          const Spacer(),
+          if (dataMode is PaginatedDataMode) _buildPaginationControls(context),
+        ],
+      ),
+    );
+  }
+
+  String _getCountText() {
+    return switch (dataMode) {
+      AllDataMode() => '$totalCount items',
+      PaginatedDataMode(:final pageSize) => _getPaginatedCountText(pageSize),
+      InfiniteDataMode() => '$displayedCount of $totalCount items',
+    };
+  }
+
+  String _getPaginatedCountText(int pageSize) {
+    final start = currentPage * pageSize + 1;
+    final end = (start + displayedCount - 1).clamp(start, totalCount);
+    return '$start-$end of $totalCount items';
+  }
+
+  Widget _buildPaginationControls(BuildContext context) {
+    final mode = dataMode as PaginatedDataMode;
+    final totalPages = (totalCount / mode.pageSize).ceil();
+    final canGoPrevious = currentPage > 0;
+    final canGoNext = currentPage < totalPages - 1;
+
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        IconButton(
+          icon: const Icon(Icons.first_page),
+          onPressed: canGoPrevious ? () => onPageChange?.call(0) : null,
+          tooltip: 'First page',
+          iconSize: 20,
+        ),
+        IconButton(
+          icon: const Icon(Icons.chevron_left),
+          onPressed:
+              canGoPrevious ? () => onPageChange?.call(currentPage - 1) : null,
+          tooltip: 'Previous page',
+          iconSize: 20,
+        ),
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 8),
+          child: Text(
+            'Page ${currentPage + 1} of $totalPages',
+            style: Theme.of(context).textTheme.bodySmall,
+          ),
+        ),
+        IconButton(
+          icon: const Icon(Icons.chevron_right),
+          onPressed:
+              canGoNext ? () => onPageChange?.call(currentPage + 1) : null,
+          tooltip: 'Next page',
+          iconSize: 20,
+        ),
+        IconButton(
+          icon: const Icon(Icons.last_page),
+          onPressed:
+              canGoNext ? () => onPageChange?.call(totalPages - 1) : null,
+          tooltip: 'Last page',
+          iconSize: 20,
+        ),
+      ],
+    );
+  }
+}

lib/shared/components/data_grid/widgets/data_grid_header.dart

@@ -0,0 +1,143 @@
+import 'package:flutter/material.dart';
+import 'package:tatlock_ui/shared/components/data_grid/data_grid_column.dart';
+import 'package:tatlock_ui/shared/components/data_grid/data_grid_config.dart';
+
+/// Header row for DataGrid.
+class DataGridHeader<T> extends StatelessWidget {
+  const DataGridHeader({
+    super.key,
+    required this.config,
+    required this.sortColumnIndex,
+    required this.sortDescending,
+    required this.onSort,
+    this.showCheckbox = false,
+    this.allSelected = false,
+    this.someSelected = false,
+    this.onSelectAll,
+  });
+
+  final DataGridConfig<T> config;
+  final int? sortColumnIndex;
+  final bool sortDescending;
+  final void Function(int columnIndex) onSort;
+  final bool showCheckbox;
+  final bool allSelected;
+  final bool someSelected;
+  final VoidCallback? onSelectAll;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final columns = config.visibleColumns;
+
+    return Container(
+      height: config.headerHeight,
+      decoration: BoxDecoration(
+        color: colorScheme.surfaceContainerHighest,
+        border: Border(
+          bottom: BorderSide(color: colorScheme.outlineVariant),
+        ),
+      ),
+      child: Row(
+        children: [
+          if (showCheckbox)
+            SizedBox(
+              width: 56,
+              child: Center(
+                child: Checkbox(
+                  value: allSelected ? true : (someSelected ? null : false),
+                  tristate: true,
+                  onChanged: (_) => onSelectAll?.call(),
+                ),
+              ),
+            ),
+          ...columns.asMap().entries.map((entry) {
+            final index = entry.key;
+            final column = entry.value;
+            final isSorted = sortColumnIndex == index;
+
+            return _buildHeaderCell(
+              context,
+              column,
+              index,
+              isSorted,
+              isSorted && sortDescending,
+            );
+          }),
+          if (config.actions.isNotEmpty)
+            const SizedBox(width: 56), // Space for actions column
+        ],
+      ),
+    );
+  }
+
+  Widget _buildHeaderCell(
+    BuildContext context,
+    DataGridColumn<T> column,
+    int index,
+    bool isSorted,
+    bool isDescending,
+  ) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final textStyle = Theme.of(context).textTheme.labelLarge?.copyWith(
+          fontWeight: FontWeight.w600,
+          color: colorScheme.onSurfaceVariant,
+        );
+
+    Widget content = Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Flexible(
+          child: Text(
+            column.header,
+            style: textStyle,
+            overflow: TextOverflow.ellipsis,
+            textAlign: column.textAlign,
+          ),
+        ),
+        if (column.sortable) ...[
+          const SizedBox(width: 4),
+          AnimatedRotation(
+            turns: isDescending ? 0.5 : 0,
+            duration: const Duration(milliseconds: 200),
+            child: Icon(
+              isSorted ? Icons.arrow_upward : Icons.unfold_more,
+              size: 16,
+              color: isSorted
+                  ? colorScheme.primary
+                  : colorScheme.onSurfaceVariant.withValues(alpha: 0.5),
+            ),
+          ),
+        ],
+      ],
+    );
+
+    if (column.sortable) {
+      content = InkWell(
+        onTap: () => onSort(index),
+        child: Padding(
+          padding: config.cellPadding,
+          child: content,
+        ),
+      );
+    } else {
+      content = Padding(
+        padding: config.cellPadding,
+        child: content,
+      );
+    }
+
+    return _wrapWithWidth(column.width, content);
+  }
+
+  Widget _wrapWithWidth(DataGridColumnWidth width, Widget child) {
+    return switch (width) {
+      GridFixedWidth(:final width) => SizedBox(width: width, child: child),
+      GridFlexWidth(:final flex) => Expanded(flex: flex, child: child),
+      GridFractionWidth(:final fraction) => FractionallySizedBox(
+          widthFactor: fraction,
+          child: child,
+        ),
+    };
+  }
+}

lib/shared/components/data_grid/widgets/data_grid_row.dart

@@ -0,0 +1,149 @@
+import 'package:flutter/material.dart';
+import 'package:tatlock_ui/shared/components/data_grid/data_grid_column.dart';
+import 'package:tatlock_ui/shared/components/data_grid/data_grid_config.dart';
+import 'package:tatlock_ui/shared/components/data_grid/widgets/data_grid_actions_menu.dart';
+
+/// A single data row in the DataGrid.
+class DataGridRow<T> extends StatelessWidget {
+  const DataGridRow({
+    super.key,
+    required this.item,
+    required this.index,
+    required this.config,
+    this.isSelected = false,
+    this.onSelect,
+    this.onTap,
+    this.backgroundColor,
+  });
+
+  final T item;
+  final int index;
+  final DataGridConfig<T> config;
+  final bool isSelected;
+  final VoidCallback? onSelect;
+  final VoidCallback? onTap;
+  final Color? backgroundColor;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final columns = config.visibleColumns;
+
+    // Determine row background color
+    Color? bgColor = backgroundColor;
+    if (bgColor == null && config.alternatingRowColors) {
+      bgColor = index.isOdd
+          ? colorScheme.surfaceContainerLowest
+          : colorScheme.surface;
+    }
+    if (isSelected) {
+      bgColor = colorScheme.primaryContainer.withValues(alpha: 0.3);
+    }
+
+    final rowContent = Container(
+      height: config.rowHeight,
+      constraints: config.rowHeight == null
+          ? const BoxConstraints(minHeight: 48)
+          : null,
+      decoration: BoxDecoration(
+        color: bgColor,
+        border: Border(
+          bottom: BorderSide(
+            color: colorScheme.outlineVariant.withValues(alpha: 0.5),
+          ),
+        ),
+      ),
+      child: Row(
+        children: [
+          if (config.rowsSelectable)
+            SizedBox(
+              width: 56,
+              child: Center(
+                child: Checkbox(
+                  value: isSelected,
+                  onChanged: (_) => onSelect?.call(),
+                ),
+              ),
+            ),
+          ...columns.map((column) => _buildCell(context, column)),
+          if (config.actions.isNotEmpty)
+            SizedBox(
+              width: 56,
+              child: DataGridActionsMenu<T>(
+                item: item,
+                actions: config.actions,
+              ),
+            ),
+        ],
+      ),
+    );
+
+    if (onTap != null) {
+      return InkWell(
+        onTap: onTap,
+        child: rowContent,
+      );
+    }
+
+    return rowContent;
+  }
+
+  Widget _buildCell(BuildContext context, DataGridColumn<T> column) {
+    Widget content;
+
+    if (column.cellBuilder != null) {
+      content = column.cellBuilder!(context, item);
+    } else {
+      content = Text(
+        column.valueBuilder(item),
+        textAlign: column.textAlign,
+        overflow: TextOverflow.ellipsis,
+      );
+    }
+
+    // Wrap with controls if provided
+    if (column.cellControlsBuilder != null) {
+      content = Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Flexible(child: content),
+          const SizedBox(width: 8),
+          column.cellControlsBuilder!(context, item),
+        ],
+      );
+    }
+
+    // Wrap with tooltip if provided
+    if (column.tooltip != null) {
+      content = Tooltip(
+        message: column.tooltip!(item),
+        child: content,
+      );
+    }
+
+    final cell = Padding(
+      padding: config.cellPadding,
+      child: Align(
+        alignment: switch (column.alignment) {
+          DataGridColumnAlignment.start => Alignment.centerLeft,
+          DataGridColumnAlignment.center => Alignment.center,
+          DataGridColumnAlignment.end => Alignment.centerRight,
+        },
+        child: content,
+      ),
+    );
+
+    return _wrapWithWidth(column.width, cell);
+  }
+
+  Widget _wrapWithWidth(DataGridColumnWidth width, Widget child) {
+    return switch (width) {
+      GridFixedWidth(:final width) => SizedBox(width: width, child: child),
+      GridFlexWidth(:final flex) => Expanded(flex: flex, child: child),
+      GridFractionWidth(:final fraction) => FractionallySizedBox(
+          widthFactor: fraction,
+          child: child,
+        ),
+    };
+  }
+}

lib/shared/components/data_grid/widgets/data_grid_search_bar.dart

@@ -0,0 +1,76 @@
+import 'package:flutter/material.dart';
+
+/// Search bar for DataGrid.
+class DataGridSearchBar extends StatefulWidget {
+  const DataGridSearchBar({
+    super.key,
+    required this.onSearch,
+    required this.onClear,
+    this.hintText = 'Search...',
+    this.initialValue = '',
+  });
+
+  final void Function(String query) onSearch;
+  final VoidCallback onClear;
+  final String hintText;
+  final String initialValue;
+
+  @override
+  State<DataGridSearchBar> createState() => _DataGridSearchBarState();
+}
+
+class _DataGridSearchBarState extends State<DataGridSearchBar> {
+  late final TextEditingController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = TextEditingController(text: widget.initialValue);
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return SizedBox(
+      width: 300,
+      child: TextField(
+        controller: _controller,
+        decoration: InputDecoration(
+          hintText: widget.hintText,
+          prefixIcon: const Icon(Icons.search),
+          suffixIcon: _controller.text.isNotEmpty
+              ? IconButton(
+                  icon: const Icon(Icons.clear),
+                  onPressed: () {
+                    _controller.clear();
+                    widget.onClear();
+                  },
+                )
+              : null,
+          isDense: true,
+          filled: true,
+          fillColor: colorScheme.surfaceContainerHighest,
+          border: OutlineInputBorder(
+            borderRadius: BorderRadius.circular(8),
+            borderSide: BorderSide.none,
+          ),
+          contentPadding: const EdgeInsets.symmetric(
+            horizontal: 16,
+            vertical: 12,
+          ),
+        ),
+        onChanged: (value) {
+          setState(() {}); // Update clear button visibility
+          widget.onSearch(value);
+        },
+      ),
+    );
+  }
+}

lib/shared/layouts/app_scaffold.dart

@@ -1,48 +1,51 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_adaptive_scaffold/flutter_adaptive_scaffold.dart';
 import 'package:go_router/go_router.dart';
+import 'package:tatlock_ui/routing/app_router.dart';
+import 'package:tatlock_ui/shared/layouts/widgets/top_header_bar.dart';
 
-import '../../routing/app_router.dart';
-
-/// Main application scaffold with adaptive navigation.
+/// Main application scaffold with top header navigation.
+///
+/// Layout structure per UI_LAYOUT.md:
+/// ```
+/// ┌─────────────────────────────────────────────────────────────────┐
+/// │  HEADER: [Logo] [Room Tabs] [Profile]                           │
+/// ├─────────────────────────────────────────────────────────────────┤
+/// │  BODY: Room page content (may include room-specific sidebar)    │
+/// └─────────────────────────────────────────────────────────────────┘
+/// ```
 class AppScaffold extends StatelessWidget {
   const AppScaffold({super.key, required this.child});
 
   final Widget child;
 
+  // Header height must match TopHeaderBar._headerHeight
+  static const double _headerHeight = 56.0;
+
   @override
   Widget build(BuildContext context) {
-    // TODO: Replace AdaptiveScaffold with custom layout per UI_LAYOUT.md
-    // - Header with room tabs (not bottom/rail nav)
-    // - Chat dock on right side
-    return AdaptiveScaffold(
-      selectedIndex: _selectedIndex(context),
-      onSelectedIndexChange: (index) => _onNavSelected(context, index),
-      destinations: const [
-        NavigationDestination(
-          icon: Icon(Icons.door_front_door_outlined),
-          selectedIcon: Icon(Icons.door_front_door),
-          label: 'Front Hall',
-        ),
-        NavigationDestination(
-          icon: Icon(Icons.dns_outlined),
-          selectedIcon: Icon(Icons.dns),
-          label: 'Control Room',
-        ),
-        NavigationDestination(
-          icon: Icon(Icons.weekend_outlined),
-          selectedIcon: Icon(Icons.weekend),
-          label: 'Parlor',
-        ),
-        NavigationDestination(
-          icon: Icon(Icons.settings_outlined),
-          selectedIcon: Icon(Icons.settings),
-          label: 'Settings',
-        ),
-      ],
-      body: (_) => child,
-      smallBody: (_) => child,
-      useDrawer: false,
+    return Scaffold(
+      body: Stack(
+        children: [
+          // Main content area with top padding for header
+          Positioned.fill(
+            child: Padding(
+              padding: const EdgeInsets.only(top: _headerHeight),
+              child: child,
+            ),
+          ),
+
+          // Top header overlays content (bulge extends into content area)
+          Positioned(
+            top: 0,
+            left: 0,
+            right: 0,
+            child: TopHeaderBar(
+              selectedIndex: _selectedIndex(context),
+              onRoomSelected: (index) => _onNavSelected(context, index),
+            ),
+          ),
+        ],
+      ),
     );
   }
 
@@ -51,7 +54,7 @@ class AppScaffold extends StatelessWidget {
 
     if (location.startsWith(AppRoutes.controlRoom)) return 1;
     if (location.startsWith(AppRoutes.parlor)) return 2;
-    if (location.startsWith(AppRoutes.settings)) return 3;
+    // Settings is no longer in main nav (accessed via Profile dropdown)
     return 0; // Front Hall
   }
 
@@ -60,7 +63,6 @@ class AppScaffold extends StatelessWidget {
       0 => AppRoutes.frontHall,
       1 => AppRoutes.controlRoom,
       2 => AppRoutes.parlor,
-      3 => AppRoutes.settings,
       _ => AppRoutes.frontHall,
     };
     context.go(route);

lib/shared/layouts/widgets/filter_panel.dart

@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+
+import 'panel_header.dart';
+
+/// Left-side filter panel for data filtering and selection.
+///
+/// Used within primary content area to filter data grids (e.g., stack list
+/// in Control Room). Header content is docked to bottom to accommodate
+/// the logo bulge overlay.
+///
+/// See UI_LAYOUT.md for panel taxonomy and layout specifications.
+class FilterPanel extends StatelessWidget {
+  const FilterPanel({
+    super.key,
+    required this.title,
+    required this.icon,
+    required this.child,
+    this.width = 280,
+    this.onRefresh,
+  });
+
+  /// Panel title displayed in header.
+  final String title;
+
+  /// Leading icon for the header.
+  final IconData icon;
+
+  /// Panel content (e.g., list, search field, filters).
+  final Widget child;
+
+  /// Panel width (default 280px per UI_LAYOUT.md spec).
+  final double width;
+
+  /// Optional refresh callback - adds refresh button to header.
+  final VoidCallback? onRefresh;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: width,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          PanelHeader(
+            title: title,
+            icon: icon,
+            dockToBottom: true, // Left-side panel
+            actions: [
+              if (onRefresh != null)
+                IconButton(
+                  icon: const Icon(Icons.refresh, size: 20),
+                  tooltip: 'Refresh',
+                  onPressed: onRefresh,
+                  padding: EdgeInsets.zero,
+                  constraints: const BoxConstraints(),
+                ),
+            ],
+          ),
+          Expanded(child: child),
+        ],
+      ),
+    );
+  }
+}

lib/shared/layouts/widgets/panel_header.dart

@@ -0,0 +1,70 @@
+import 'package:flutter/material.dart';
+
+/// Panel header with configurable content alignment.
+///
+/// Left-side panels (Nav, Filter) should use [dockToBottom: true] to
+/// accommodate the logo bulge overlay. Right-side panels use default centering.
+///
+/// See UI_LAYOUT.md for panel taxonomy and layout specifications.
+class PanelHeader extends StatelessWidget {
+  const PanelHeader({
+    super.key,
+    required this.title,
+    required this.icon,
+    this.actions,
+    this.dockToBottom = false,
+    this.height = 56.0,
+  });
+
+  /// Panel title text.
+  final String title;
+
+  /// Leading icon for the panel.
+  final IconData icon;
+
+  /// Optional action widgets (e.g., refresh button).
+  final List<Widget>? actions;
+
+  /// Whether to dock content to bottom (for left-side panels under logo bulge).
+  final bool dockToBottom;
+
+  /// Header height (should match app header height).
+  final double height;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Container(
+      height: height,
+      padding: EdgeInsets.only(
+        left: 16,
+        right: 8,
+        bottom: dockToBottom ? 8 : 0,
+      ),
+      alignment: dockToBottom ? Alignment.bottomCenter : Alignment.center,
+      decoration: BoxDecoration(
+        color: colorScheme.surfaceContainerHighest,
+        border: Border(
+          bottom: BorderSide(color: colorScheme.outlineVariant),
+        ),
+      ),
+      child: Row(
+        crossAxisAlignment:
+            dockToBottom ? CrossAxisAlignment.end : CrossAxisAlignment.center,
+        children: [
+          Icon(icon, color: colorScheme.primary),
+          const SizedBox(width: 12),
+          Text(
+            title,
+            style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                  fontWeight: FontWeight.w600,
+                ),
+          ),
+          const Spacer(),
+          if (actions != null) ...actions!,
+        ],
+      ),
+    );
+  }
+}

lib/shared/layouts/widgets/profile_dropdown.dart

@@ -0,0 +1,129 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+import 'package:tatlock_ui/core/auth/auth_provider.dart';
+import 'package:tatlock_ui/routing/app_router.dart';
+
+/// Profile dropdown menu in the header.
+///
+/// Shows user info when authenticated, with Settings and Logout options.
+class ProfileDropdown extends ConsumerWidget {
+  const ProfileDropdown({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final authState = ref.watch(authNotifierProvider);
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return authState.when(
+      data: (auth) => PopupMenuButton<String>(
+        offset: const Offset(0, 48),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(8),
+        ),
+        child: Tooltip(
+          message: auth.isAuthenticated ? auth.userName ?? 'User' : 'Guest',
+          child: CircleAvatar(
+            radius: 18,
+            backgroundColor: colorScheme.primaryContainer,
+            child: auth.isAuthenticated
+                ? Text(
+                    _getInitials(auth.userName),
+                    style: TextStyle(
+                      color: colorScheme.onPrimaryContainer,
+                      fontWeight: FontWeight.w500,
+                    ),
+                  )
+                : Icon(
+                    Icons.person_outline,
+                    size: 20,
+                    color: colorScheme.onPrimaryContainer,
+                  ),
+          ),
+        ),
+        itemBuilder: (context) => [
+          // User info header (non-selectable)
+          PopupMenuItem<String>(
+            enabled: false,
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  auth.isAuthenticated ? auth.userName ?? 'User' : 'Guest',
+                  style: Theme.of(context).textTheme.titleSmall,
+                ),
+                if (auth.userEmail != null)
+                  Text(
+                    auth.userEmail!,
+                    style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                          color: colorScheme.onSurfaceVariant,
+                        ),
+                  ),
+              ],
+            ),
+          ),
+          const PopupMenuDivider(),
+
+          // Settings
+          const PopupMenuItem<String>(
+            value: 'settings',
+            child: Row(
+              children: [
+                Icon(Icons.settings_outlined, size: 20),
+                SizedBox(width: 12),
+                Text('Settings'),
+              ],
+            ),
+          ),
+
+          // Logout (only if authenticated)
+          if (auth.isAuthenticated)
+            const PopupMenuItem<String>(
+              value: 'logout',
+              child: Row(
+                children: [
+                  Icon(Icons.logout, size: 20),
+                  SizedBox(width: 12),
+                  Text('Logout'),
+                ],
+              ),
+            ),
+        ],
+        onSelected: (value) {
+          switch (value) {
+            case 'settings':
+              context.go(AppRoutes.settings);
+            case 'logout':
+              ref.read(authNotifierProvider.notifier).signOut();
+          }
+        },
+      ),
+      loading: () => const CircleAvatar(
+        radius: 18,
+        child: SizedBox(
+          width: 16,
+          height: 16,
+          child: CircularProgressIndicator(strokeWidth: 2),
+        ),
+      ),
+      error: (_, __) => CircleAvatar(
+        radius: 18,
+        backgroundColor: colorScheme.errorContainer,
+        child: Icon(
+          Icons.error_outline,
+          size: 20,
+          color: colorScheme.onErrorContainer,
+        ),
+      ),
+    );
+  }
+
+  String _getInitials(String? name) {
+    if (name == null || name.isEmpty) return '?';
+    final parts = name.trim().split(' ');
+    if (parts.length >= 2) {
+      return '${parts.first[0]}${parts.last[0]}'.toUpperCase();
+    }
+    return name[0].toUpperCase();
+  }
+}

lib/shared/layouts/widgets/top_header_bar.dart

@@ -0,0 +1,258 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+
+import 'profile_dropdown.dart';
+
+/// Top header bar with room navigation tabs and profile dropdown.
+/// Features a circular "bulge" extending below the header for the logo.
+class TopHeaderBar extends StatelessWidget {
+  const TopHeaderBar({
+    super.key,
+    required this.selectedIndex,
+    required this.onRoomSelected,
+  });
+
+  final int selectedIndex;
+  final ValueChanged<int> onRoomSelected;
+
+  // Header dimensions
+  static const double _headerHeight = 56.0;
+  static const double _logoSize = 120.0;
+  static const double _logoMargin = 4.0; // Equal margin top/bottom within bubble
+  static const double _logoCircleRadius = (_logoSize + _logoMargin * 2) / 2; // 64px
+  static const double _bulgeFraction = 0.20; // 20% of circle below header line
+
+  static const _rooms = [
+    _RoomDestination(
+      icon: Icons.door_front_door_outlined,
+      selectedIcon: Icons.door_front_door,
+      label: 'Front Hall',
+    ),
+    _RoomDestination(
+      icon: Icons.dns_outlined,
+      selectedIcon: Icons.dns,
+      label: 'Control Room',
+    ),
+    _RoomDestination(
+      icon: Icons.lightbulb_outline,
+      selectedIcon: Icons.lightbulb,
+      label: 'Parlor',
+    ),
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    // Calculate bulge: 20% of circle diameter extends below
+    final bulgeExtension = _logoCircleRadius * 2 * _bulgeFraction;
+
+    return SizedBox(
+      height: _headerHeight + bulgeExtension,
+      child: Stack(
+        clipBehavior: Clip.none,
+        children: [
+          // Main header bar with custom bottom shape
+          Positioned.fill(
+            child: CustomPaint(
+              painter: _HeaderPainter(
+                color: colorScheme.surface,
+                borderColor: colorScheme.outlineVariant,
+                circleRadius: _logoCircleRadius,
+                bulgeFraction: _bulgeFraction,
+                headerHeight: _headerHeight,
+                circleLeftOffset: 16 + _logoCircleRadius,
+              ),
+            ),
+          ),
+
+          // Logo centered in the visible bubble area (from top of header to bottom of bulge)
+          Positioned(
+            left: 16 + _logoMargin,
+            // Center logo in visible bubble: from y=0 to y=headerHeight+bulgeExtension
+            top: ((_headerHeight + bulgeExtension) - _logoSize) / 2,
+            child: Image.asset(
+              'assets/icons/logo.png',
+              height: _logoSize,
+              width: _logoSize,
+              errorBuilder: (_, __, ___) => Icon(
+                Icons.layers,
+                size: 32,
+                color: colorScheme.primary,
+              ),
+            ),
+          ),
+
+          // Header content (room tabs and profile)
+          Positioned(
+            top: 0,
+            left: 0,
+            right: 0,
+            height: _headerHeight,
+            child: Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 16),
+              child: Row(
+                children: [
+                  // Spacer for logo area
+                  SizedBox(width: _logoCircleRadius * 2 + 16),
+
+                  // Room tabs
+                  ..._buildRoomTabs(context),
+
+                  const Spacer(),
+
+                  // Profile dropdown
+                  const ProfileDropdown(),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  List<Widget> _buildRoomTabs(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return List.generate(_rooms.length, (index) {
+      final room = _rooms[index];
+      final isSelected = index == selectedIndex;
+
+      return Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 4),
+        child: Tooltip(
+          message: room.label,
+          child: IconButton(
+            icon: Icon(
+              isSelected ? room.selectedIcon : room.icon,
+              color: isSelected ? colorScheme.primary : colorScheme.onSurface,
+            ),
+            onPressed: () => onRoomSelected(index),
+            style: IconButton.styleFrom(
+              backgroundColor:
+                  isSelected ? colorScheme.primaryContainer : null,
+            ),
+          ),
+        ),
+      );
+    });
+  }
+}
+
+/// Custom painter for the header with a circular bulge for the logo.
+class _HeaderPainter extends CustomPainter {
+  _HeaderPainter({
+    required this.color,
+    required this.borderColor,
+    required this.circleRadius,
+    required this.bulgeFraction,
+    required this.headerHeight,
+    required this.circleLeftOffset,
+  });
+
+  final Color color;
+  final Color borderColor;
+  final double circleRadius;
+  final double bulgeFraction; // Fraction of circle below header (0.0 to 0.5)
+  final double headerHeight;
+  final double circleLeftOffset;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final paint = Paint()
+      ..color = color
+      ..style = PaintingStyle.fill;
+
+    final borderPaint = Paint()
+      ..color = borderColor
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = 1;
+
+    // Calculate circle center position
+    // bulgeFraction of the diameter should be below the header line
+    // bulgeAmount = bulgeFraction * 2 * radius (fraction of diameter)
+    final bulgeAmount = bulgeFraction * 2 * circleRadius;
+    // Center is positioned so that (radius - centerOffset) = bulgeAmount
+    // centerOffset = radius - bulgeAmount
+    final centerY = headerHeight - circleRadius + bulgeAmount;
+    final circleCenter = Offset(circleLeftOffset, centerY);
+
+    // Calculate the angle where circle intersects header line
+    // At y = headerHeight: distance from center = headerHeight - centerY
+    final distFromCenter = headerHeight - centerY;
+    // cos(angle) = distFromCenter / radius
+    final cosAngle = distFromCenter / circleRadius;
+    final angle = acos(cosAngle.clamp(-1.0, 1.0));
+
+    // Arc starts at (π/2 - angle) and ends at (π/2 + angle)
+    // In Flutter, 0 is at 3 o'clock, π/2 is at 6 o'clock
+    final startAngle = (3.14159 / 2) - angle;
+    final sweepAngle = angle * 2;
+
+    // Calculate where arc intersects header line
+    final halfChord = circleRadius * sin(angle);
+    final arcLeft = circleLeftOffset - halfChord;
+    final arcRight = circleLeftOffset + halfChord;
+
+    // Create path for header with bulge
+    final path = Path();
+
+    // Start from top-left
+    path.moveTo(0, 0);
+
+    // Top edge
+    path.lineTo(size.width, 0);
+
+    // Right edge down to header height
+    path.lineTo(size.width, headerHeight);
+
+    // Bottom edge - going right to left with curved bulge
+    path.lineTo(arcRight, headerHeight);
+
+    // Arc for the bulge
+    final arcRect = Rect.fromCircle(center: circleCenter, radius: circleRadius);
+    path.arcTo(arcRect, startAngle, sweepAngle, false);
+
+    // Continue to left edge
+    path.lineTo(0, headerHeight);
+
+    // Close path
+    path.close();
+
+    // Draw filled shape
+    canvas.drawPath(path, paint);
+
+    // Draw border along bottom edge only (with bulge)
+    final borderPath = Path();
+    borderPath.moveTo(0, headerHeight);
+    borderPath.lineTo(arcLeft, headerHeight);
+    borderPath.arcTo(arcRect, 3.14159 - startAngle, -sweepAngle, false);
+    borderPath.lineTo(size.width, headerHeight);
+
+    canvas.drawPath(borderPath, borderPaint);
+  }
+
+  @override
+  bool shouldRepaint(covariant _HeaderPainter oldDelegate) {
+    return color != oldDelegate.color ||
+        borderColor != oldDelegate.borderColor ||
+        circleRadius != oldDelegate.circleRadius ||
+        bulgeFraction != oldDelegate.bulgeFraction ||
+        headerHeight != oldDelegate.headerHeight ||
+        circleLeftOffset != oldDelegate.circleLeftOffset;
+  }
+}
+
+class _RoomDestination {
+  const _RoomDestination({
+    required this.icon,
+    required this.selectedIcon,
+    required this.label,
+  });
+
+  final IconData icon;
+  final IconData selectedIcon;
+  final String label;
+}

linux/flutter/generated_plugin_registrant.cc

@@ -6,6 +6,10 @@
 
 #include "generated_plugin_registrant.h"
 
+#include <url_launcher_linux/url_launcher_plugin.h>
 
 void fl_register_plugins(FlPluginRegistry* registry) {
+  g_autoptr(FlPluginRegistrar) url_launcher_linux_registrar =
+      fl_plugin_registry_get_registrar_for_plugin(registry, "UrlLauncherPlugin");
+  url_launcher_plugin_register_with_registrar(url_launcher_linux_registrar);
 }

linux/flutter/generated_plugins.cmake

@@ -3,6 +3,7 @@
 #
 
 list(APPEND FLUTTER_PLUGIN_LIST
+  url_launcher_linux
 )
 
 list(APPEND FLUTTER_FFI_PLUGIN_LIST

macos/Podfile

@@ -0,0 +1,42 @@
+platform :osx, '10.15'
+
+# CocoaPods analytics sends network stats synchronously affecting flutter build latency.
+ENV['COCOAPODS_DISABLE_STATS'] = 'true'
+
+project 'Runner', {
+  'Debug' => :debug,
+  'Profile' => :release,
+  'Release' => :release,
+}
+
+def flutter_root
+  generated_xcode_build_settings_path = File.expand_path(File.join('..', 'Flutter', 'ephemeral', 'Flutter-Generated.xcconfig'), __FILE__)
+  unless File.exist?(generated_xcode_build_settings_path)
+    raise "#{generated_xcode_build_settings_path} must exist. If you're running pod install manually, make sure \"flutter pub get\" is executed first"
+  end
+
+  File.foreach(generated_xcode_build_settings_path) do |line|
+    matches = line.match(/FLUTTER_ROOT\=(.*)/)
+    return matches[1].strip if matches
+  end
+  raise "FLUTTER_ROOT not found in #{generated_xcode_build_settings_path}. Try deleting Flutter-Generated.xcconfig, then run \"flutter pub get\""
+end
+
+require File.expand_path(File.join('packages', 'flutter_tools', 'bin', 'podhelper'), flutter_root)
+
+flutter_macos_podfile_setup
+
+target 'Runner' do
+  use_frameworks!
+
+  flutter_install_all_macos_pods File.dirname(File.realpath(__FILE__))
+  target 'RunnerTests' do
+    inherit! :search_paths
+  end
+end
+
+post_install do |installer|
+  installer.pods_project.targets.each do |target|
+    flutter_additional_macos_build_settings(target)
+  end
+end

pubspec.yaml

@@ -58,6 +58,12 @@ dependencies:
 
   # Icons
   cupertino_icons: ^1.0.8
+  flutter_svg: ^2.0.10+1
+
+  # URL Launcher
+  url_launcher: ^6.3.1
+  flutter_code_editor: ^0.3.5
+  highlight: ^0.7.0
 
 dev_dependencies:
   flutter_test:
@@ -90,10 +96,9 @@ flutter:
   # the material Icons class.
   uses-material-design: true
 
-  # To add assets to your application, add an assets section, like this:
-  # assets:
-  #   - images/a_dot_burr.jpeg
-  #   - images/a_dot_ham.jpeg
+  # Assets
+  assets:
+    - assets/icons/
 
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.dev/to/resolution-aware-images

windows/flutter/generated_plugin_registrant.cc

@@ -6,6 +6,9 @@
 
 #include "generated_plugin_registrant.h"
 
+#include <url_launcher_windows/url_launcher_windows.h>
 
 void RegisterPlugins(flutter::PluginRegistry* registry) {
+  UrlLauncherWindowsRegisterWithRegistrar(
+      registry->GetRegistrarForPlugin("UrlLauncherWindows"));
 }

windows/flutter/generated_plugins.cmake

@@ -3,6 +3,7 @@
 #
 
 list(APPEND FLUTTER_PLUGIN_LIST
+  url_launcher_windows
 )
 
 list(APPEND FLUTTER_FFI_PLUGIN_LIST