Merge pull request #16 from johndoe6345789/claude/fix-socketio-send-error-ivmuu

Replace sock.send() with sock.sendall() for reliable data transmission

.github/workflows/README.md

@@ -0,0 +1,50 @@
+# GitHub Actions Workflows
+
+This directory contains GitHub Actions workflows for CI/CD automation.
+
+## Workflows
+
+### test.yml
+Runs on every push and pull request to ensure code quality:
+- **Backend Tests**: Runs pytest with coverage on Python 3.11 and 3.12
+  - Requires 70% test coverage minimum
+  - Uploads coverage reports to Codecov
+- **Frontend Tests**: Lints and builds the Next.js frontend
+- **Docker Build Test**: Validates Docker images can be built successfully
+
+### docker-publish.yml
+Runs on pushes to main and version tags:
+- Builds and pushes Docker images to GitHub Container Registry (GHCR)
+- Creates multi-platform images for both backend and frontend
+- Tags images with branch name, PR number, version, and commit SHA
+
+### create-release.yml
+Handles release creation and management
+
+## Test Coverage Requirements
+
+Backend tests must maintain at least 70% code coverage. The pipeline will fail if coverage drops below this threshold.
+
+## Local Testing
+
+To run tests locally before pushing:
+
+```bash
+# Backend tests
+cd backend
+pip install -r requirements.txt -r requirements-dev.txt
+pytest --cov=. --cov-report=term-missing
+
+# Frontend build
+cd frontend
+npm install
+npm run build
+```
+
+## Adding New Tests
+
+When adding new features:
+1. Write unit tests in `backend/tests/test_*.py`
+2. Ensure all tests pass locally
+3. Push changes - the CI will automatically run all tests
+4. Fix any failing tests before merging

.github/workflows/test.yml

@@ -0,0 +1,115 @@
+name: Run Tests
+
+on:
+  push:
+    branches: ['**']
+  pull_request:
+    branches: [main]
+
+jobs:
+  backend-tests:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        python-version: ['3.11', '3.12']
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Python ${{ matrix.python-version }}
+        uses: actions/setup-python@v5
+        with:
+          python-version: ${{ matrix.python-version }}
+
+      - name: Cache pip packages
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/pip
+          key: ${{ runner.os }}-pip-${{ hashFiles('**/requirements*.txt') }}
+          restore-keys: |
+            ${{ runner.os }}-pip-
+
+      - name: Install dependencies
+        working-directory: ./backend
+        run: |
+          python -m pip install --upgrade pip
+          pip install -r requirements.txt
+          pip install -r requirements-dev.txt
+
+      - name: Run pytest with coverage
+        working-directory: ./backend
+        run: |
+          pytest --cov=. --cov-report=xml --cov-report=term-missing -v
+
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v4
+        with:
+          file: ./backend/coverage.xml
+          flags: backend
+          name: backend-coverage
+          fail_ci_if_error: false
+
+      - name: Check test coverage threshold
+        working-directory: ./backend
+        run: |
+          coverage report --fail-under=70
+
+  frontend-tests:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          cache-dependency-path: frontend/package-lock.json
+
+      - name: Install dependencies
+        working-directory: ./frontend
+        run: npm ci
+
+      - name: Run linting
+        working-directory: ./frontend
+        run: npm run lint || echo "Linting not configured yet"
+
+      - name: Build frontend
+        working-directory: ./frontend
+        run: npm run build
+
+  docker-build-test:
+    runs-on: ubuntu-latest
+    needs: [backend-tests, frontend-tests]
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build backend Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: ./backend
+          file: ./backend/Dockerfile
+          push: false
+          tags: backend:test
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+      - name: Build frontend Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: ./frontend
+          file: ./frontend/Dockerfile
+          push: false
+          tags: frontend:test
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+          build-args: |
+            NEXT_PUBLIC_API_URL=http://backend:5000

backend/.coveragerc

@@ -0,0 +1,22 @@
+[run]
+source = .
+omit =
+    tests/*
+    */__pycache__/*
+    */venv/*
+    */virtualenv/*
+    setup.py
+    conftest.py
+
+[report]
+exclude_lines =
+    pragma: no cover
+    def __repr__
+    raise AssertionError
+    raise NotImplementedError
+    if __name__ == .__main__.:
+    if TYPE_CHECKING:
+    @abstractmethod
+
+[html]
+directory = htmlcov

backend/app.py

@@ -575,7 +575,7 @@ def handle_input(data):
 
         # Send input to the container
         sock = exec_instance.output
-        sock.send(input_data.encode('utf-8'))
+        sock.sendall(input_data.encode('utf-8'))
 
     except Exception as e:
         logger.error(f"Error sending input: {e}", exc_info=True)

backend/pytest.ini

@@ -0,0 +1,17 @@
+[pytest]
+testpaths = tests
+python_files = test_*.py
+python_classes = Test*
+python_functions = test_*
+addopts =
+    -v
+    --strict-markers
+    --cov=.
+    --cov-report=term-missing
+    --cov-report=html
+    --cov-report=xml
+    --cov-branch
+markers =
+    unit: Unit tests
+    integration: Integration tests
+    slow: Slow running tests

backend/requirements-dev.txt

@@ -0,0 +1,6 @@
+pytest==8.0.0
+pytest-flask==1.3.0
+pytest-cov==4.1.0
+pytest-mock==3.12.0
+flask-testing==0.8.1
+coverage==7.4.1

backend/requirements.txt

@@ -3,4 +3,4 @@ Flask-CORS==6.0.0
 python-dotenv==1.0.0
 docker==7.1.0
 flask-socketio==5.3.6
-python-socketio==5.11.0
+python-socketio==5.14.0

backend/tests/README.md

@@ -0,0 +1,146 @@
+# Backend Tests
+
+Comprehensive test suite for the Docker Swarm Terminal backend API.
+
+## Test Structure
+
+```
+tests/
+├── conftest.py          # Pytest fixtures and configuration
+├── test_auth.py         # Authentication endpoint tests
+├── test_containers.py   # Container management tests
+├── test_exec.py         # Command execution tests
+├── test_health.py       # Health check tests
+└── test_utils.py        # Utility function tests
+```
+
+## Running Tests
+
+### Install Dependencies
+
+```bash
+pip install -r requirements.txt -r requirements-dev.txt
+```
+
+### Run All Tests
+
+```bash
+pytest
+```
+
+### Run with Coverage
+
+```bash
+pytest --cov=. --cov-report=html --cov-report=term-missing
+```
+
+This will generate an HTML coverage report in `htmlcov/index.html`.
+
+### Run Specific Test Files
+
+```bash
+pytest tests/test_auth.py
+pytest tests/test_containers.py -v
+```
+
+### Run Tests by Marker
+
+```bash
+pytest -m unit          # Run only unit tests
+pytest -m integration   # Run only integration tests
+```
+
+### Run with Verbose Output
+
+```bash
+pytest -v
+```
+
+## Test Coverage
+
+Current coverage target: **70%**
+
+To check if tests meet the coverage threshold:
+
+```bash
+coverage run -m pytest
+coverage report --fail-under=70
+```
+
+## Writing Tests
+
+### Test Naming Convention
+
+- Test files: `test_*.py`
+- Test classes: `Test*`
+- Test functions: `test_*`
+
+### Using Fixtures
+
+Common fixtures available in `conftest.py`:
+
+- `app`: Flask application instance
+- `client`: Test client for making HTTP requests
+- `auth_token`: Valid authentication token
+- `auth_headers`: Authentication headers dict
+- `mock_docker_client`: Mocked Docker client
+
+Example:
+
+```python
+def test_my_endpoint(client, auth_headers):
+    response = client.get('/api/my-endpoint', headers=auth_headers)
+    assert response.status_code == 200
+```
+
+### Mocking Docker Calls
+
+Use the `@patch` decorator to mock Docker API calls:
+
+```python
+from unittest.mock import patch, MagicMock
+
+@patch('app.get_docker_client')
+def test_container_operation(mock_get_client, client, auth_headers):
+    mock_client = MagicMock()
+    mock_get_client.return_value = mock_client
+    # Your test code here
+```
+
+## CI/CD Integration
+
+Tests automatically run on:
+- Every push to any branch
+- Every pull request to main
+- Multiple Python versions (3.11, 3.12)
+
+GitHub Actions will fail if:
+- Any test fails
+- Coverage drops below 70%
+- Docker images fail to build
+
+## Troubleshooting
+
+### Tests Failing Locally
+
+1. Ensure all dependencies are installed
+2. Check Python version (3.11+ required)
+3. Clear pytest cache: `pytest --cache-clear`
+
+### Import Errors
+
+Make sure you're running tests from the backend directory:
+
+```bash
+cd backend
+pytest
+```
+
+### Coverage Not Updating
+
+Clear coverage data and re-run:
+
+```bash
+coverage erase
+pytest --cov=. --cov-report=term-missing
+```

backend/tests/__init__.py

@@ -0,0 +1 @@
+# Test package initialization

backend/tests/conftest.py

@@ -0,0 +1,55 @@
+import pytest
+import sys
+import os
+
+# Add the backend directory to the path
+sys.path.insert(0, os.path.abspath(os.path.join(os.path.dirname(__file__), '..')))
+
+from app import app as flask_app, socketio
+
+
+@pytest.fixture
+def app():
+    """Create application for testing"""
+    flask_app.config.update({
+        'TESTING': True,
+        'WTF_CSRF_ENABLED': False
+    })
+    yield flask_app
+
+
+@pytest.fixture
+def client(app):
+    """Create a test client"""
+    return app.test_client()
+
+
+@pytest.fixture
+def runner(app):
+    """Create a test CLI runner"""
+    return app.test_cli_runner()
+
+
+@pytest.fixture
+def mock_docker_client(mocker):
+    """Mock Docker client"""
+    mock_client = mocker.MagicMock()
+    mock_client.ping.return_value = True
+    return mock_client
+
+
+@pytest.fixture
+def auth_token(client):
+    """Get a valid authentication token"""
+    response = client.post('/api/auth/login', json={
+        'username': 'admin',
+        'password': 'admin123'
+    })
+    data = response.get_json()
+    return data['token']
+
+
+@pytest.fixture
+def auth_headers(auth_token):
+    """Get authentication headers"""
+    return {'Authorization': f'Bearer {auth_token}'}

backend/tests/test_auth.py

@@ -0,0 +1,69 @@
+import pytest
+from datetime import datetime
+
+
+class TestAuthentication:
+    """Test authentication endpoints"""
+
+    def test_login_success(self, client):
+        """Test successful login"""
+        response = client.post('/api/auth/login', json={
+            'username': 'admin',
+            'password': 'admin123'
+        })
+
+        assert response.status_code == 200
+        data = response.get_json()
+        assert data['success'] is True
+        assert 'token' in data
+        assert data['username'] == 'admin'
+
+    def test_login_invalid_credentials(self, client):
+        """Test login with invalid credentials"""
+        response = client.post('/api/auth/login', json={
+            'username': 'admin',
+            'password': 'wrongpassword'
+        })
+
+        assert response.status_code == 401
+        data = response.get_json()
+        assert data['success'] is False
+        assert 'message' in data
+
+    def test_login_missing_username(self, client):
+        """Test login with missing username"""
+        response = client.post('/api/auth/login', json={
+            'password': 'admin123'
+        })
+
+        assert response.status_code == 401
+        data = response.get_json()
+        assert data['success'] is False
+
+    def test_login_missing_password(self, client):
+        """Test login with missing password"""
+        response = client.post('/api/auth/login', json={
+            'username': 'admin'
+        })
+
+        assert response.status_code == 401
+        data = response.get_json()
+        assert data['success'] is False
+
+    def test_logout_success(self, client, auth_token):
+        """Test successful logout"""
+        response = client.post('/api/auth/logout', headers={
+            'Authorization': f'Bearer {auth_token}'
+        })
+
+        assert response.status_code == 200
+        data = response.get_json()
+        assert data['success'] is True
+
+    def test_logout_without_token(self, client):
+        """Test logout without token"""
+        response = client.post('/api/auth/logout')
+
+        assert response.status_code == 200
+        data = response.get_json()
+        assert data['success'] is True

backend/tests/test_containers.py

@@ -0,0 +1,124 @@
+import pytest
+from unittest.mock import MagicMock, patch
+
+
+class TestContainerEndpoints:
+    """Test container management endpoints"""
+
+    def test_get_containers_unauthorized(self, client):
+        """Test getting containers without auth"""
+        response = client.get('/api/containers')
+        assert response.status_code == 401
+        data = response.get_json()
+        assert 'error' in data
+
+    def test_get_containers_invalid_token(self, client):
+        """Test getting containers with invalid token"""
+        response = client.get('/api/containers', headers={
+            'Authorization': 'Bearer invalid_token'
+        })
+        assert response.status_code == 401
+        data = response.get_json()
+        assert 'error' in data
+
+    @patch('app.get_docker_client')
+    def test_get_containers_success(self, mock_get_client, client, auth_headers):
+        """Test getting containers successfully"""
+        # Mock Docker client
+        mock_container = MagicMock()
+        mock_container.short_id = 'abc123'
+        mock_container.name = 'test-container'
+        mock_container.status = 'running'
+        mock_container.image.tags = ['nginx:latest']
+        mock_container.attrs = {'Created': '2024-01-01T00:00:00.000000000Z'}
+
+        mock_client = MagicMock()
+        mock_client.containers.list.return_value = [mock_container]
+        mock_get_client.return_value = mock_client
+
+        response = client.get('/api/containers', headers=auth_headers)
+        assert response.status_code == 200
+        data = response.get_json()
+        assert 'containers' in data
+        assert len(data['containers']) == 1
+        assert data['containers'][0]['id'] == 'abc123'
+        assert data['containers'][0]['name'] == 'test-container'
+
+    @patch('app.get_docker_client')
+    def test_get_containers_docker_unavailable(self, mock_get_client, client, auth_headers):
+        """Test getting containers when Docker is unavailable"""
+        mock_get_client.return_value = None
+
+        response = client.get('/api/containers', headers=auth_headers)
+        assert response.status_code == 500
+        data = response.get_json()
+        assert 'error' in data
+
+    @patch('app.get_docker_client')
+    def test_start_container_success(self, mock_get_client, client, auth_headers):
+        """Test starting a container"""
+        mock_container = MagicMock()
+        mock_client = MagicMock()
+        mock_client.containers.get.return_value = mock_container
+        mock_get_client.return_value = mock_client
+
+        response = client.post('/api/containers/abc123/start', headers=auth_headers)
+        assert response.status_code == 200
+        data = response.get_json()
+        assert data['success'] is True
+        mock_container.start.assert_called_once()
+
+    @patch('app.get_docker_client')
+    def test_stop_container_success(self, mock_get_client, client, auth_headers):
+        """Test stopping a container"""
+        mock_container = MagicMock()
+        mock_client = MagicMock()
+        mock_client.containers.get.return_value = mock_container
+        mock_get_client.return_value = mock_client
+
+        response = client.post('/api/containers/abc123/stop', headers=auth_headers)
+        assert response.status_code == 200
+        data = response.get_json()
+        assert data['success'] is True
+        mock_container.stop.assert_called_once()
+
+    @patch('app.get_docker_client')
+    def test_restart_container_success(self, mock_get_client, client, auth_headers):
+        """Test restarting a container"""
+        mock_container = MagicMock()
+        mock_client = MagicMock()
+        mock_client.containers.get.return_value = mock_container
+        mock_get_client.return_value = mock_client
+
+        response = client.post('/api/containers/abc123/restart', headers=auth_headers)
+        assert response.status_code == 200
+        data = response.get_json()
+        assert data['success'] is True
+        mock_container.restart.assert_called_once()
+
+    @patch('app.get_docker_client')
+    def test_remove_container_success(self, mock_get_client, client, auth_headers):
+        """Test removing a container"""
+        mock_container = MagicMock()
+        mock_client = MagicMock()
+        mock_client.containers.get.return_value = mock_container
+        mock_get_client.return_value = mock_client
+
+        response = client.delete('/api/containers/abc123', headers=auth_headers)
+        assert response.status_code == 200
+        data = response.get_json()
+        assert data['success'] is True
+        mock_container.remove.assert_called_once_with(force=True)
+
+    def test_container_operations_unauthorized(self, client):
+        """Test container operations without auth"""
+        endpoints = [
+            ('/api/containers/abc123/start', 'post'),
+            ('/api/containers/abc123/stop', 'post'),
+            ('/api/containers/abc123/restart', 'post'),
+            ('/api/containers/abc123', 'delete'),
+        ]
+
+        for endpoint, method in endpoints:
+            response = getattr(client, method)(endpoint)
+            assert response.status_code == 401

backend/tests/test_exec.py

@@ -0,0 +1,124 @@
+import pytest
+from unittest.mock import MagicMock, patch
+
+
+class TestContainerExec:
+    """Test container command execution"""
+
+    def test_exec_unauthorized(self, client):
+        """Test exec without auth"""
+        response = client.post('/api/containers/abc123/exec', json={
+            'command': 'ls'
+        })
+        assert response.status_code == 401
+
+    @patch('app.get_docker_client')
+    def test_exec_simple_command(self, mock_get_client, client, auth_headers, auth_token):
+        """Test executing a simple command"""
+        # Mock exec result
+        mock_exec_result = MagicMock()
+        mock_exec_result.output = b'file1.txt\nfile2.txt\n::WORKDIR::/app'
+        mock_exec_result.exit_code = 0
+
+        mock_container = MagicMock()
+        mock_container.exec_run.return_value = mock_exec_result
+
+        mock_client = MagicMock()
+        mock_client.containers.get.return_value = mock_container
+        mock_get_client.return_value = mock_client
+
+        response = client.post('/api/containers/abc123/exec',
+                               headers=auth_headers,
+                               json={'command': 'ls'})
+
+        assert response.status_code == 200
+        data = response.get_json()
+        assert data['exit_code'] == 0
+        assert 'file1.txt' in data['output']
+        assert data['workdir'] == '/app'
+
+    @patch('app.get_docker_client')
+    def test_exec_cd_command(self, mock_get_client, client, auth_headers, auth_token):
+        """Test executing cd command"""
+        # Mock exec result for cd command
+        mock_exec_result = MagicMock()
+        mock_exec_result.output = b'/home/user\n'
+        mock_exec_result.exit_code = 0
+
+        mock_container = MagicMock()
+        mock_container.exec_run.return_value = mock_exec_result
+
+        mock_client = MagicMock()
+        mock_client.containers.get.return_value = mock_container
+        mock_get_client.return_value = mock_client
+
+        response = client.post('/api/containers/abc123/exec',
+                               headers=auth_headers,
+                               json={'command': 'cd /home/user'})
+
+        assert response.status_code == 200
+        data = response.get_json()
+        assert data['exit_code'] == 0
+        assert data['workdir'] == '/home/user'
+        assert data['output'] == ''
+
+    @patch('app.get_docker_client')
+    def test_exec_command_with_error(self, mock_get_client, client, auth_headers, auth_token):
+        """Test executing a command that fails"""
+        # Mock exec result with error
+        mock_exec_result = MagicMock()
+        mock_exec_result.output = b'command not found::WORKDIR::/app'
+        mock_exec_result.exit_code = 127
+
+        mock_container = MagicMock()
+        mock_container.exec_run.return_value = mock_exec_result
+
+        mock_client = MagicMock()
+        mock_client.containers.get.return_value = mock_container
+        mock_get_client.return_value = mock_client
+
+        response = client.post('/api/containers/abc123/exec',
+                               headers=auth_headers,
+                               json={'command': 'invalidcommand'})
+
+        assert response.status_code == 200
+        data = response.get_json()
+        assert data['exit_code'] == 127
+        assert 'command not found' in data['output']
+
+    @patch('app.get_docker_client')
+    def test_exec_docker_unavailable(self, mock_get_client, client, auth_headers):
+        """Test exec when Docker is unavailable"""
+        mock_get_client.return_value = None
+
+        response = client.post('/api/containers/abc123/exec',
+                               headers=auth_headers,
+                               json={'command': 'ls'})
+
+        assert response.status_code == 500
+        data = response.get_json()
+        assert 'error' in data
+
+    @patch('app.get_docker_client')
+    def test_exec_unicode_handling(self, mock_get_client, client, auth_headers, auth_token):
+        """Test exec with unicode output"""
+        # Mock exec result with unicode
+        mock_exec_result = MagicMock()
+        mock_exec_result.output = 'Hello 世界\n::WORKDIR::/app'.encode('utf-8')
+        mock_exec_result.exit_code = 0
+
+        mock_container = MagicMock()
+        mock_container.exec_run.return_value = mock_exec_result
+
+        mock_client = MagicMock()
+        mock_client.containers.get.return_value = mock_container
+        mock_get_client.return_value = mock_client
+
+        response = client.post('/api/containers/abc123/exec',
+                               headers=auth_headers,
+                               json={'command': 'echo "Hello 世界"'})
+
+        assert response.status_code == 200
+        data = response.get_json()
+        assert data['exit_code'] == 0
+        assert '世界' in data['output']

backend/tests/test_health.py

@@ -0,0 +1,13 @@
+import pytest
+
+
+class TestHealthEndpoint:
+    """Test health check endpoint"""
+
+    def test_health_check(self, client):
+        """Test health check endpoint"""
+        response = client.get('/api/health')
+
+        assert response.status_code == 200
+        data = response.get_json()
+        assert data['status'] == 'healthy'

backend/tests/test_utils.py

@@ -0,0 +1,42 @@
+import pytest
+from datetime import datetime, timezone
+from app import format_uptime
+
+
+class TestUtilityFunctions:
+    """Test utility functions"""
+
+    def test_format_uptime_days(self):
+        """Test uptime formatting for days"""
+        # Create a timestamp 2 days and 3 hours ago
+        now = datetime.now(timezone.utc)
+        created_at = now.replace(day=now.day-2, hour=now.hour-3)
+        created_str = created_at.isoformat().replace('+00:00', 'Z')
+
+        result = format_uptime(created_str)
+        assert 'd' in result
+        assert 'h' in result
+
+    def test_format_uptime_hours(self):
+        """Test uptime formatting for hours"""
+        # Create a timestamp 3 hours and 15 minutes ago
+        now = datetime.now(timezone.utc)
+        created_at = now.replace(hour=now.hour-3, minute=now.minute-15)
+        created_str = created_at.isoformat().replace('+00:00', 'Z')
+
+        result = format_uptime(created_str)
+        assert 'h' in result
+        assert 'm' in result
+        assert 'd' not in result
+
+    def test_format_uptime_minutes(self):
+        """Test uptime formatting for minutes"""
+        # Create a timestamp 30 minutes ago
+        now = datetime.now(timezone.utc)
+        created_at = now.replace(minute=now.minute-30)
+        created_str = created_at.isoformat().replace('+00:00', 'Z')
+
+        result = format_uptime(created_str)
+        assert 'm' in result
+        assert 'h' not in result
+        assert 'd' not in result

frontend/app/dashboard/page.tsx

@@ -1,88 +1,32 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import {
-  Box,
-  Container,
-  Typography,
-  Button,
-  Grid,
-  AppBar,
-  Toolbar,
-  IconButton,
-  CircularProgress,
-  useMediaQuery,
-  useTheme,
-} from '@mui/material';
-import { Logout, Refresh, Inventory2 } from '@mui/icons-material';
-import { useAuth } from '@/lib/auth';
-import { apiClient, Container as ContainerType } from '@/lib/api';
+import { Box, Container, Typography, Grid, CircularProgress, useMediaQuery, useTheme } from '@mui/material';
+import { useAppDispatch } from '@/lib/store/hooks';
+import { logout as logoutAction } from '@/lib/store/authSlice';
+import { useAuthRedirect } from '@/lib/hooks/useAuthRedirect';
+import { useContainerList } from '@/lib/hooks/useContainerList';
+import { useTerminalModal } from '@/lib/hooks/useTerminalModal';
+import DashboardHeader from '@/components/Dashboard/DashboardHeader';
+import EmptyState from '@/components/Dashboard/EmptyState';
 import ContainerCard from '@/components/ContainerCard';
 import TerminalModal from '@/components/TerminalModal';
 
 export default function Dashboard() {
-  const { isAuthenticated, loading: authLoading, logout } = useAuth();
+  const { isAuthenticated, loading: authLoading } = useAuthRedirect('/');
+  const dispatch = useAppDispatch();
   const router = useRouter();
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
-  const [containers, setContainers] = useState<ContainerType[]>([]);
-  const [selectedContainer, setSelectedContainer] = useState<ContainerType | null>(null);
-  const [isTerminalOpen, setIsTerminalOpen] = useState(false);
-  const [isRefreshing, setIsRefreshing] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState('');
 
-  useEffect(() => {
-    if (!authLoading && !isAuthenticated) {
-      router.push('/');
-    }
-  }, [isAuthenticated, authLoading, router]);
-
-  const fetchContainers = async () => {
-    setIsRefreshing(true);
-    setError('');
-    try {
-      const data = await apiClient.getContainers();
-      setContainers(data);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to fetch containers');
-      if (err instanceof Error && err.message === 'Session expired') {
-        router.push('/');
-      }
-    } finally {
-      setIsRefreshing(false);
-      setIsLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    if (isAuthenticated) {
-      fetchContainers();
-      const interval = setInterval(fetchContainers, 10000);
-      return () => clearInterval(interval);
-    }
-  }, [isAuthenticated]);
-
-  const handleOpenShell = (container: ContainerType) => {
-    setSelectedContainer(container);
-    setIsTerminalOpen(true);
-  };
-
-  const handleCloseTerminal = () => {
-    setIsTerminalOpen(false);
-    setTimeout(() => setSelectedContainer(null), 300);
-  };
+  const { containers, isRefreshing, isLoading, error, refreshContainers } = useContainerList(isAuthenticated);
+  const { selectedContainer, isTerminalOpen, openTerminal, closeTerminal } = useTerminalModal();
 
   const handleLogout = async () => {
-    await logout();
+    await dispatch(logoutAction());
     router.push('/');
   };
 
-  const handleRefresh = () => {
-    fetchContainers();
-  };
-
   if (authLoading || isLoading) {
     return (
       <Box
@@ -100,91 +44,13 @@ export default function Dashboard() {
 
   return (
     <Box sx={{ minHeight: '100vh', backgroundColor: 'background.default' }}>
-      <AppBar
-        position="sticky"
-        sx={{
-          backgroundColor: 'rgba(45, 55, 72, 0.5)',
-          backdropFilter: 'blur(8px)',
-          borderBottom: 1,
-          borderColor: 'divider',
-        }}
-      >
-        <Toolbar>
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, flexGrow: 1 }}>
-            <Box
-              sx={{
-                width: 40,
-                height: 40,
-                background: 'rgba(56, 178, 172, 0.1)',
-                borderRadius: 1,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-            >
-              <Inventory2 sx={{ color: 'secondary.main' }} />
-            </Box>
-            <Box>
-              <Typography
-                variant="h1"
-                sx={{
-                  fontFamily: '"JetBrains Mono", monospace',
-                  fontSize: { xs: '1.1rem', sm: '1.5rem' }
-                }}
-              >
-                Container Shell
-              </Typography>
-              {!isMobile && (
-                <Typography variant="caption" color="text.secondary">
-                  {containers.length} active {containers.length === 1 ? 'container' : 'containers'}
-                </Typography>
-              )}
-            </Box>
-          </Box>
-
-          <Box sx={{ display: 'flex', gap: 1 }}>
-            {isMobile ? (
-              <>
-                <IconButton
-                  color="inherit"
-                  onClick={handleRefresh}
-                  disabled={isRefreshing}
-                  size="small"
-                >
-                  {isRefreshing ? <CircularProgress size={20} /> : <Refresh />}
-                </IconButton>
-                <IconButton
-                  color="inherit"
-                  onClick={handleLogout}
-                  size="small"
-                >
-                  <Logout />
-                </IconButton>
-              </>
-            ) : (
-              <>
-                <Button
-                  variant="outlined"
-                  size="small"
-                  onClick={handleRefresh}
-                  disabled={isRefreshing}
-                  startIcon={isRefreshing ? <CircularProgress size={16} /> : <Refresh />}
-                >
-                  Refresh
-                </Button>
-                <Button
-                  variant="outlined"
-                  size="small"
-                  onClick={handleLogout}
-                  startIcon={<Logout />}
-                >
-                  Logout
-                </Button>
-              </>
-            )}
-          </Box>
-        </Toolbar>
-      </AppBar>
+      <DashboardHeader
+        containerCount={containers.length}
+        isMobile={isMobile}
+        isRefreshing={isRefreshing}
+        onRefresh={refreshContainers}
+        onLogout={handleLogout}
+      />
 
       <Container maxWidth="xl" sx={{ py: { xs: 2, sm: 3, md: 4 } }}>
         {error && (
@@ -194,46 +60,15 @@ export default function Dashboard() {
         )}
 
         {containers.length === 0 && !isLoading ? (
-          <Box
-            sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-              justifyContent: 'center',
-              minHeight: 400,
-              textAlign: 'center',
-            }}
-          >
-            <Box
-              sx={{
-                width: 80,
-                height: 80,
-                backgroundColor: 'action.hover',
-                borderRadius: 1,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                mb: 2,
-              }}
-            >
-              <Inventory2 sx={{ fontSize: 40, color: 'text.secondary' }} />
-            </Box>
-            <Typography variant="h2" gutterBottom>
-              No Active Containers
-            </Typography>
-            <Typography color="text.secondary" sx={{ maxWidth: 500 }}>
-              There are currently no running containers to display. Start a container to see it
-              appear here.
-            </Typography>
-          </Box>
+          <EmptyState />
         ) : (
           <Grid container spacing={3}>
             {containers.map((container) => (
               <Grid size={{ xs: 12, sm: 6, lg: 4 }} key={container.id}>
                 <ContainerCard
                   container={container}
-                  onOpenShell={() => handleOpenShell(container)}
-                  onContainerUpdate={fetchContainers}
+                  onOpenShell={() => openTerminal(container)}
+                  onContainerUpdate={refreshContainers}
                 />
               </Grid>
             ))}
@@ -244,7 +79,7 @@ export default function Dashboard() {
       {selectedContainer && (
         <TerminalModal
           open={isTerminalOpen}
-          onClose={handleCloseTerminal}
+          onClose={closeTerminal}
           containerName={selectedContainer.name}
           containerId={selectedContainer.id}
         />

frontend/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import { ThemeProvider } from "@/lib/theme";
-import { AuthProvider } from "@/lib/auth";
+import { Providers } from "./providers";
 
 export const metadata: Metadata = {
   title: "Container Shell - Docker Swarm Terminal",
@@ -26,9 +26,9 @@ export default function RootLayout({
       </head>
       <body>
         <ThemeProvider>
-          <AuthProvider>
+          <Providers>
             {children}
-          </AuthProvider>
+          </Providers>
         </ThemeProvider>
       </body>
     </html>

frontend/app/page.tsx

@@ -1,19 +1,10 @@
 'use client';
 
-import { useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import { useAuth } from '@/lib/auth';
+import { useAuthRedirect } from '@/lib/hooks/useAuthRedirect';
 import LoginForm from '@/components/LoginForm';
 
 export default function Home() {
-  const { isAuthenticated, loading } = useAuth();
-  const router = useRouter();
-
-  useEffect(() => {
-    if (!loading && isAuthenticated) {
-      router.push('/dashboard');
-    }
-  }, [isAuthenticated, loading, router]);
+  const { loading } = useAuthRedirect('/dashboard');
 
   if (loading) {
     return null;

frontend/app/providers.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import React, { useEffect, useCallback } from 'react';
+import { Provider } from 'react-redux';
+import { useRouter } from 'next/navigation';
+import { store } from '@/lib/store/store';
+import { initAuth, setUnauthenticated } from '@/lib/store/authSlice';
+import { setAuthErrorCallback } from '@/lib/store/authErrorHandler';
+import { useAppDispatch } from '@/lib/store/hooks';
+
+function AuthInitializer({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+
+  // Memoize the auth error callback to prevent recreating on every render
+  const handleAuthError = useCallback(() => {
+    // Clear auth state and redirect to login
+    dispatch(setUnauthenticated());
+    router.push('/');
+  }, [dispatch, router]);
+
+  useEffect(() => {
+    // Initialize auth state
+    dispatch(initAuth());
+
+    // Set up global auth error handler
+    setAuthErrorCallback(handleAuthError);
+  }, [dispatch, handleAuthError]);
+
+  return <>{children}</>;
+}
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <Provider store={store}>
+      <AuthInitializer>{children}</AuthInitializer>
+    </Provider>
+  );
+}

frontend/components/ContainerCard.tsx

@@ -1,112 +1,38 @@
 'use client';
 
 import React, { useState } from 'react';
-import {
-  Card,
-  CardContent,
-  Typography,
-  Button,
-  Box,
-  Chip,
-  Divider,
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogContentText,
-  DialogActions,
-  CircularProgress,
-  Alert,
-  Snackbar,
-} from '@mui/material';
-import { Terminal, PlayArrow, Stop, Refresh, Delete, Inventory2 } from '@mui/icons-material';
-import { Container, apiClient } from '@/lib/api';
+import { Card, CardContent, Divider, Snackbar, Alert } from '@mui/material';
+import { Container } from '@/lib/api';
+import { ContainerCardProps } from '@/lib/interfaces/container';
+import { useContainerActions } from '@/lib/hooks/useContainerActions';
+import ContainerHeader from './ContainerCard/ContainerHeader';
+import ContainerInfo from './ContainerCard/ContainerInfo';
+import ContainerActions from './ContainerCard/ContainerActions';
+import DeleteConfirmDialog from './ContainerCard/DeleteConfirmDialog';
 
-interface ContainerCardProps {
-  container: Container;
-  onOpenShell: () => void;
-  onContainerUpdate?: () => void;
-}
+const borderColors = {
+  running: '#38b2ac',
+  stopped: '#718096',
+  paused: '#ecc94b',
+  exited: '#718096',
+  created: '#4299e1',
+};
 
 export default function ContainerCard({ container, onOpenShell, onContainerUpdate }: ContainerCardProps) {
-  const [isLoading, setIsLoading] = useState(false);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
-  const [snackbar, setSnackbar] = useState<{ open: boolean; message: string; severity: 'success' | 'error' }>({
-    open: false,
-    message: '',
-    severity: 'success',
-  });
+  const {
+    isLoading,
+    snackbar,
+    handleStart,
+    handleStop,
+    handleRestart,
+    handleRemove,
+    closeSnackbar,
+  } = useContainerActions(container.id, onContainerUpdate);
 
-  const statusColors = {
-    running: 'success',
-    stopped: 'default',
-    paused: 'warning',
-    exited: 'default',
-    created: 'info',
-  } as const;
-
-  const borderColors = {
-    running: '#38b2ac',
-    stopped: '#718096',
-    paused: '#ecc94b',
-    exited: '#718096',
-    created: '#4299e1',
-  };
-
-  const handleStart = async () => {
-    setIsLoading(true);
-    try {
-      await apiClient.startContainer(container.id);
-      setSnackbar({ open: true, message: 'Container started successfully', severity: 'success' });
-      onContainerUpdate?.();
-    } catch (error) {
-      setSnackbar({ open: true, message: `Failed to start: ${error instanceof Error ? error.message : 'Unknown error'}`, severity: 'error' });
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleStop = async () => {
-    setIsLoading(true);
-    try {
-      await apiClient.stopContainer(container.id);
-      setSnackbar({ open: true, message: 'Container stopped successfully', severity: 'success' });
-      onContainerUpdate?.();
-    } catch (error) {
-      setSnackbar({ open: true, message: `Failed to stop: ${error instanceof Error ? error.message : 'Unknown error'}`, severity: 'error' });
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleRestart = async () => {
-    setIsLoading(true);
-    try {
-      await apiClient.restartContainer(container.id);
-      setSnackbar({ open: true, message: 'Container restarted successfully', severity: 'success' });
-      onContainerUpdate?.();
-    } catch (error) {
-      setSnackbar({ open: true, message: `Failed to restart: ${error instanceof Error ? error.message : 'Unknown error'}`, severity: 'error' });
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleRemove = async () => {
+  const confirmRemove = () => {
     setShowDeleteDialog(false);
-    setIsLoading(true);
-    try {
-      await apiClient.removeContainer(container.id);
-      setSnackbar({ open: true, message: 'Container removed successfully', severity: 'success' });
-      onContainerUpdate?.();
-    } catch (error) {
-      setSnackbar({ open: true, message: `Failed to remove: ${error instanceof Error ? error.message : 'Unknown error'}`, severity: 'error' });
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleCloseSnackbar = () => {
-    setSnackbar({ ...snackbar, open: false });
+    handleRemove();
   };
 
   return (
@@ -117,235 +43,41 @@ export default function ContainerCard({ container, onOpenShell, onContainerUpdat
       }}
     >
       <CardContent>
-        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
-          <Box sx={{ display: 'flex', gap: 1.5, alignItems: 'flex-start', flex: 1 }}>
-            <Box
-              sx={{
-                width: 40,
-                height: 40,
-                background: 'rgba(56, 178, 172, 0.1)',
-                borderRadius: 1,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                flexShrink: 0,
-              }}
-            >
-              <Inventory2 sx={{ color: 'secondary.main', fontSize: 20 }} />
-            </Box>
-            <Box sx={{ minWidth: 0, flex: 1 }}>
-              <Typography
-                variant="h3"
-                component="h3"
-                sx={{
-                  fontFamily: '"JetBrains Mono", monospace',
-                  fontWeight: 500,
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  whiteSpace: 'nowrap',
-                }}
-              >
-                {container.name}
-              </Typography>
-              <Typography
-                variant="body2"
-                color="text.secondary"
-                sx={{
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  whiteSpace: 'nowrap',
-                }}
-              >
-                {container.image}
-              </Typography>
-            </Box>
-          </Box>
-
-          <Chip
-            label={container.status}
-            color={statusColors[container.status as keyof typeof statusColors] || 'default'}
-            size="small"
-            icon={container.status === 'running' ? <PlayArrow sx={{ fontSize: 12 }} /> : undefined}
-            sx={{
-              fontFamily: '"JetBrains Mono", monospace',
-              textTransform: 'capitalize',
-            }}
-          />
-        </Box>
+        <ContainerHeader
+          name={container.name}
+          image={container.image}
+          status={container.status}
+        />
 
         <Divider sx={{ my: 2 }} />
 
-        <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr' }, gap: 2, mb: 3 }}>
-          <Box>
-            <Typography
-              variant="caption"
-              color="text.secondary"
-              sx={{
-                textTransform: 'uppercase',
-                letterSpacing: '0.05em',
-                display: 'block',
-                mb: 0.5,
-              }}
-            >
-              Container ID
-            </Typography>
-            <Typography
-              variant="body2"
-              sx={{ fontFamily: '"JetBrains Mono", monospace' }}
-            >
-              {container.id}
-            </Typography>
-          </Box>
-          <Box>
-            <Typography
-              variant="caption"
-              color="text.secondary"
-              sx={{
-                textTransform: 'uppercase',
-                letterSpacing: '0.05em',
-                display: 'block',
-                mb: 0.5,
-              }}
-            >
-              Uptime
-            </Typography>
-            <Typography
-              variant="body2"
-              sx={{ fontFamily: '"JetBrains Mono", monospace' }}
-            >
-              {container.uptime}
-            </Typography>
-          </Box>
-        </Box>
+        <ContainerInfo id={container.id} uptime={container.uptime} />
 
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
-          {/* Action buttons based on status */}
-          <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
-            {(container.status === 'stopped' || container.status === 'exited' || container.status === 'created') && (
-              <Button
-                variant="contained"
-                size="small"
-                onClick={handleStart}
-                disabled={isLoading}
-                startIcon={isLoading ? <CircularProgress size={16} /> : <PlayArrow />}
-                sx={{
-                  flex: 1,
-                  minWidth: '100px',
-                  backgroundColor: '#38b2ac',
-                  '&:hover': { backgroundColor: '#2c8a84' },
-                }}
-              >
-                Start
-              </Button>
-            )}
-
-            {container.status === 'running' && (
-              <>
-                <Button
-                  variant="contained"
-                  size="small"
-                  onClick={handleStop}
-                  disabled={isLoading}
-                  startIcon={isLoading ? <CircularProgress size={16} /> : <Stop />}
-                  sx={{
-                    flex: 1,
-                    minWidth: '100px',
-                    backgroundColor: '#f56565',
-                    '&:hover': { backgroundColor: '#e53e3e' },
-                  }}
-                >
-                  Stop
-                </Button>
-                <Button
-                  variant="outlined"
-                  size="small"
-                  onClick={handleRestart}
-                  disabled={isLoading}
-                  startIcon={isLoading ? <CircularProgress size={16} /> : <Refresh />}
-                  sx={{
-                    flex: 1,
-                    minWidth: '100px',
-                    borderColor: '#ecc94b',
-                    color: '#ecc94b',
-                    '&:hover': {
-                      borderColor: '#d69e2e',
-                      backgroundColor: 'rgba(236, 201, 75, 0.1)',
-                    },
-                  }}
-                >
-                  Restart
-                </Button>
-              </>
-            )}
-
-            <Button
-              variant="outlined"
-              size="small"
-              onClick={() => setShowDeleteDialog(true)}
-              disabled={isLoading}
-              startIcon={<Delete />}
-              sx={{
-                minWidth: '100px',
-                borderColor: '#fc8181',
-                color: '#fc8181',
-                '&:hover': {
-                  borderColor: '#f56565',
-                  backgroundColor: 'rgba(252, 129, 129, 0.1)',
-                },
-              }}
-            >
-              Remove
-            </Button>
-          </Box>
-
-          {/* Terminal button */}
-          <Button
-            fullWidth
-            variant="contained"
-            color="primary"
-            onClick={onOpenShell}
-            disabled={container.status !== 'running' || isLoading}
-            startIcon={<Terminal />}
-            sx={{
-              fontWeight: 500,
-              '&:hover': {
-                backgroundColor: 'secondary.main',
-              },
-            }}
-          >
-            Open Shell
-          </Button>
-        </Box>
+        <ContainerActions
+          status={container.status}
+          isLoading={isLoading}
+          onStart={handleStart}
+          onStop={handleStop}
+          onRestart={handleRestart}
+          onRemove={() => setShowDeleteDialog(true)}
+          onOpenShell={onOpenShell}
+        />
       </CardContent>
 
-      {/* Delete confirmation dialog */}
-      <Dialog
+      <DeleteConfirmDialog
         open={showDeleteDialog}
+        containerName={container.name}
         onClose={() => setShowDeleteDialog(false)}
-      >
-        <DialogTitle>Confirm Container Removal</DialogTitle>
-        <DialogContent>
-          <DialogContentText>
-            Are you sure you want to remove container <strong>{container.name}</strong>?
-            This action cannot be undone.
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={() => setShowDeleteDialog(false)}>Cancel</Button>
-          <Button onClick={handleRemove} color="error" variant="contained">
-            Remove
-          </Button>
-        </DialogActions>
-      </Dialog>
+        onConfirm={confirmRemove}
+      />
 
-      {/* Snackbar for notifications */}
       <Snackbar
         open={snackbar.open}
         autoHideDuration={4000}
-        onClose={handleCloseSnackbar}
+        onClose={closeSnackbar}
         anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
       >
-        <Alert onClose={handleCloseSnackbar} severity={snackbar.severity} sx={{ width: '100%' }}>
+        <Alert onClose={closeSnackbar} severity={snackbar.severity} sx={{ width: '100%' }}>
           {snackbar.message}
         </Alert>
       </Snackbar>

frontend/components/ContainerCard/ContainerActions.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { Box, Button, CircularProgress } from '@mui/material';
+import { PlayArrow, Stop, Refresh, Delete, Terminal } from '@mui/icons-material';
+import { ContainerActionsProps } from '@/lib/interfaces/container';
+
+export default function ContainerActions({
+  status,
+  isLoading,
+  onStart,
+  onStop,
+  onRestart,
+  onRemove,
+  onOpenShell,
+}: ContainerActionsProps) {
+  const isRunning = status === 'running';
+  const isStopped = status === 'stopped' || status === 'exited' || status === 'created';
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+      <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
+        {isStopped && (
+          <Button
+            variant="contained"
+            size="small"
+            onClick={onStart}
+            disabled={isLoading}
+            startIcon={isLoading ? <CircularProgress size={16} /> : <PlayArrow />}
+            sx={{
+              flex: 1,
+              minWidth: '100px',
+              backgroundColor: '#38b2ac',
+              '&:hover': { backgroundColor: '#2c8a84' },
+            }}
+          >
+            Start
+          </Button>
+        )}
+
+        {isRunning && (
+          <>
+            <Button
+              variant="contained"
+              size="small"
+              onClick={onStop}
+              disabled={isLoading}
+              startIcon={isLoading ? <CircularProgress size={16} /> : <Stop />}
+              sx={{
+                flex: 1,
+                minWidth: '100px',
+                backgroundColor: '#f56565',
+                '&:hover': { backgroundColor: '#e53e3e' },
+              }}
+            >
+              Stop
+            </Button>
+            <Button
+              variant="outlined"
+              size="small"
+              onClick={onRestart}
+              disabled={isLoading}
+              startIcon={isLoading ? <CircularProgress size={16} /> : <Refresh />}
+              sx={{
+                flex: 1,
+                minWidth: '100px',
+                borderColor: '#ecc94b',
+                color: '#ecc94b',
+                '&:hover': {
+                  borderColor: '#d69e2e',
+                  backgroundColor: 'rgba(236, 201, 75, 0.1)',
+                },
+              }}
+            >
+              Restart
+            </Button>
+          </>
+        )}
+
+        <Button
+          variant="outlined"
+          size="small"
+          onClick={onRemove}
+          disabled={isLoading}
+          startIcon={<Delete />}
+          sx={{
+            minWidth: '100px',
+            borderColor: '#fc8181',
+            color: '#fc8181',
+            '&:hover': {
+              borderColor: '#f56565',
+              backgroundColor: 'rgba(252, 129, 129, 0.1)',
+            },
+          }}
+        >
+          Remove
+        </Button>
+      </Box>
+
+      <Button
+        fullWidth
+        variant="contained"
+        color="primary"
+        onClick={onOpenShell}
+        disabled={!isRunning || isLoading}
+        startIcon={<Terminal />}
+        sx={{
+          fontWeight: 500,
+          '&:hover': {
+            backgroundColor: 'secondary.main',
+          },
+        }}
+      >
+        Open Shell
+      </Button>
+    </Box>
+  );
+}

frontend/components/ContainerCard/ContainerHeader.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Box, Typography, Chip } from '@mui/material';
+import { PlayArrow, Inventory2 } from '@mui/icons-material';
+import { ContainerHeaderProps } from '@/lib/interfaces/container';
+
+const statusColors = {
+  running: 'success',
+  stopped: 'default',
+  paused: 'warning',
+  exited: 'default',
+  created: 'info',
+} as const;
+
+export default function ContainerHeader({ name, image, status }: ContainerHeaderProps) {
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
+      <Box sx={{ display: 'flex', gap: 1.5, alignItems: 'flex-start', flex: 1 }}>
+        <Box
+          sx={{
+            width: 40,
+            height: 40,
+            background: 'rgba(56, 178, 172, 0.1)',
+            borderRadius: 1,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+          }}
+        >
+          <Inventory2 sx={{ color: 'secondary.main', fontSize: 20 }} />
+        </Box>
+        <Box sx={{ minWidth: 0, flex: 1 }}>
+          <Typography
+            variant="h3"
+            component="h3"
+            sx={{
+              fontFamily: '"JetBrains Mono", monospace',
+              fontWeight: 500,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {name}
+          </Typography>
+          <Typography
+            variant="body2"
+            color="text.secondary"
+            sx={{
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {image}
+          </Typography>
+        </Box>
+      </Box>
+
+      <Chip
+        label={status}
+        color={statusColors[status as keyof typeof statusColors] || 'default'}
+        size="small"
+        icon={status === 'running' ? <PlayArrow sx={{ fontSize: 12 }} /> : undefined}
+        sx={{
+          fontFamily: '"JetBrains Mono", monospace',
+          textTransform: 'capitalize',
+        }}
+      />
+    </Box>
+  );
+}

frontend/components/ContainerCard/ContainerInfo.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+import { ContainerInfoProps } from '@/lib/interfaces/container';
+
+export default function ContainerInfo({ id, uptime }: ContainerInfoProps) {
+  return (
+    <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr' }, gap: 2, mb: 3 }}>
+      <Box>
+        <Typography
+          variant="caption"
+          color="text.secondary"
+          sx={{
+            textTransform: 'uppercase',
+            letterSpacing: '0.05em',
+            display: 'block',
+            mb: 0.5,
+          }}
+        >
+          Container ID
+        </Typography>
+        <Typography
+          variant="body2"
+          sx={{ fontFamily: '"JetBrains Mono", monospace' }}
+        >
+          {id}
+        </Typography>
+      </Box>
+      <Box>
+        <Typography
+          variant="caption"
+          color="text.secondary"
+          sx={{
+            textTransform: 'uppercase',
+            letterSpacing: '0.05em',
+            display: 'block',
+            mb: 0.5,
+          }}
+        >
+          Uptime
+        </Typography>
+        <Typography
+          variant="body2"
+          sx={{ fontFamily: '"JetBrains Mono", monospace' }}
+        >
+          {uptime}
+        </Typography>
+      </Box>
+    </Box>
+  );
+}

frontend/components/ContainerCard/DeleteConfirmDialog.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  Button,
+} from '@mui/material';
+import { DeleteConfirmDialogProps } from '@/lib/interfaces/container';
+
+export default function DeleteConfirmDialog({
+  open,
+  containerName,
+  onClose,
+  onConfirm,
+}: DeleteConfirmDialogProps) {
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>Confirm Container Removal</DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          Are you sure you want to remove container <strong>{containerName}</strong>?
+          This action cannot be undone.
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button onClick={onConfirm} color="error" variant="contained">
+          Remove
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

frontend/components/ContainerCard/__tests__/ContainerHeader.test.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ContainerHeader from '../ContainerHeader';
+
+describe('ContainerHeader', () => {
+  it('renders container name', () => {
+    render(
+      <ContainerHeader name="test-container" image="nginx:latest" status="running" />
+    );
+
+    expect(screen.getByText('test-container')).toBeInTheDocument();
+  });
+
+  it('renders container image', () => {
+    render(
+      <ContainerHeader name="test-container" image="nginx:latest" status="running" />
+    );
+
+    expect(screen.getByText('nginx:latest')).toBeInTheDocument();
+  });
+
+  it('renders status chip with correct label', () => {
+    render(
+      <ContainerHeader name="test-container" image="nginx:latest" status="running" />
+    );
+
+    expect(screen.getByText('running')).toBeInTheDocument();
+  });
+
+  it('applies success color for running status', () => {
+    const { container } = render(
+      <ContainerHeader name="test-container" image="nginx:latest" status="running" />
+    );
+
+    const statusChip = screen.getByText('running').closest('.MuiChip-root');
+    expect(statusChip).toHaveClass('MuiChip-colorSuccess');
+  });
+
+  it('applies default color for stopped status', () => {
+    const { container } = render(
+      <ContainerHeader name="test-container" image="nginx:latest" status="stopped" />
+    );
+
+    const statusChip = screen.getByText('stopped').closest('.MuiChip-root');
+    expect(statusChip).toHaveClass('MuiChip-colorDefault');
+  });
+
+  it('applies warning color for paused status', () => {
+    const { container } = render(
+      <ContainerHeader name="test-container" image="nginx:latest" status="paused" />
+    );
+
+    const statusChip = screen.getByText('paused').closest('.MuiChip-root');
+    expect(statusChip).toHaveClass('MuiChip-colorWarning');
+  });
+
+  it('renders play icon for running containers', () => {
+    const { container } = render(
+      <ContainerHeader name="test-container" image="nginx:latest" status="running" />
+    );
+
+    const playIcon = container.querySelector('[data-testid="PlayArrowIcon"]');
+    expect(playIcon).toBeInTheDocument();
+  });
+
+  it('does not render play icon for stopped containers', () => {
+    const { container } = render(
+      <ContainerHeader name="test-container" image="nginx:latest" status="stopped" />
+    );
+
+    const playIcon = container.querySelector('[data-testid="PlayArrowIcon"]');
+    expect(playIcon).not.toBeInTheDocument();
+  });
+});

frontend/components/ContainerCard/__tests__/ContainerInfo.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ContainerInfo from '../ContainerInfo';
+
+describe('ContainerInfo', () => {
+  it('renders container ID label', () => {
+    render(<ContainerInfo id="abc123def456" uptime="2 hours" />);
+
+    expect(screen.getByText(/container id/i)).toBeInTheDocument();
+  });
+
+  it('renders container ID value', () => {
+    render(<ContainerInfo id="abc123def456" uptime="2 hours" />);
+
+    expect(screen.getByText('abc123def456')).toBeInTheDocument();
+  });
+
+  it('renders uptime label', () => {
+    render(<ContainerInfo id="abc123def456" uptime="2 hours" />);
+
+    expect(screen.getByText(/uptime/i)).toBeInTheDocument();
+  });
+
+  it('renders uptime value', () => {
+    render(<ContainerInfo id="abc123def456" uptime="2 hours" />);
+
+    expect(screen.getByText('2 hours')).toBeInTheDocument();
+  });
+
+  it('renders different uptime formats correctly', () => {
+    const { rerender } = render(<ContainerInfo id="abc123" uptime="5 minutes" />);
+    expect(screen.getByText('5 minutes')).toBeInTheDocument();
+
+    rerender(<ContainerInfo id="abc123" uptime="3 days" />);
+    expect(screen.getByText('3 days')).toBeInTheDocument();
+
+    rerender(<ContainerInfo id="abc123" uptime="1 month" />);
+    expect(screen.getByText('1 month')).toBeInTheDocument();
+  });
+});

frontend/components/Dashboard/DashboardHeader.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import {
+  AppBar,
+  Toolbar,
+  Box,
+  Typography,
+  Button,
+  IconButton,
+  CircularProgress,
+} from '@mui/material';
+import { Logout, Refresh, Inventory2 } from '@mui/icons-material';
+import { DashboardHeaderProps } from '@/lib/interfaces/dashboard';
+
+export default function DashboardHeader({
+  containerCount,
+  isMobile,
+  isRefreshing,
+  onRefresh,
+  onLogout,
+}: DashboardHeaderProps) {
+  return (
+    <AppBar
+      position="sticky"
+      sx={{
+        backgroundColor: 'rgba(45, 55, 72, 0.5)',
+        backdropFilter: 'blur(8px)',
+        borderBottom: 1,
+        borderColor: 'divider',
+      }}
+    >
+      <Toolbar>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, flexGrow: 1 }}>
+          <Box
+            sx={{
+              width: 40,
+              height: 40,
+              background: 'rgba(56, 178, 172, 0.1)',
+              borderRadius: 1,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <Inventory2 sx={{ color: 'secondary.main' }} />
+          </Box>
+          <Box>
+            <Typography
+              variant="h1"
+              sx={{
+                fontFamily: '"JetBrains Mono", monospace',
+                fontSize: { xs: '1.1rem', sm: '1.5rem' }
+              }}
+            >
+              Container Shell
+            </Typography>
+            {!isMobile && (
+              <Typography variant="caption" color="text.secondary">
+                {containerCount} active {containerCount === 1 ? 'container' : 'containers'}
+              </Typography>
+            )}
+          </Box>
+        </Box>
+
+        <Box sx={{ display: 'flex', gap: 1 }}>
+          {isMobile ? (
+            <>
+              <IconButton
+                color="inherit"
+                onClick={onRefresh}
+                disabled={isRefreshing}
+                size="small"
+              >
+                {isRefreshing ? <CircularProgress size={20} /> : <Refresh />}
+              </IconButton>
+              <IconButton
+                color="inherit"
+                onClick={onLogout}
+                size="small"
+              >
+                <Logout />
+              </IconButton>
+            </>
+          ) : (
+            <>
+              <Button
+                variant="outlined"
+                size="small"
+                onClick={onRefresh}
+                disabled={isRefreshing}
+                startIcon={isRefreshing ? <CircularProgress size={16} /> : <Refresh />}
+              >
+                Refresh
+              </Button>
+              <Button
+                variant="outlined"
+                size="small"
+                onClick={onLogout}
+                startIcon={<Logout />}
+              >
+                Logout
+              </Button>
+            </>
+          )}
+        </Box>
+      </Toolbar>
+    </AppBar>
+  );
+}

frontend/components/Dashboard/EmptyState.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+import { Inventory2 } from '@mui/icons-material';
+
+export default function EmptyState() {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: 400,
+        textAlign: 'center',
+      }}
+    >
+      <Box
+        sx={{
+          width: 80,
+          height: 80,
+          backgroundColor: 'action.hover',
+          borderRadius: 1,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          mb: 2,
+        }}
+      >
+        <Inventory2 sx={{ fontSize: 40, color: 'text.secondary' }} />
+      </Box>
+      <Typography variant="h2" gutterBottom>
+        No Active Containers
+      </Typography>
+      <Typography color="text.secondary" sx={{ maxWidth: 500 }}>
+        There are currently no running containers to display. Start a container to see it appear here.
+      </Typography>
+    </Box>
+  );
+}

frontend/components/Dashboard/__tests__/EmptyState.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import EmptyState from '../EmptyState';
+
+describe('EmptyState', () => {
+  it('renders no containers message', () => {
+    render(<EmptyState />);
+
+    expect(screen.getByText(/no active containers/i)).toBeInTheDocument();
+  });
+
+  it('renders descriptive message', () => {
+    render(<EmptyState />);
+
+    expect(
+      screen.getByText(/there are currently no running containers to display/i)
+    ).toBeInTheDocument();
+  });
+
+  it('renders inventory icon', () => {
+    const { container } = render(<EmptyState />);
+
+    const icon = container.querySelector('[data-testid="Inventory2Icon"]');
+    expect(icon).toBeInTheDocument();
+  });
+});

frontend/components/LoginForm.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState } from 'react';
+import React from 'react';
 import {
   Card,
   CardContent,
@@ -11,31 +11,19 @@ import {
   Alert,
 } from '@mui/material';
 import { LockOpen } from '@mui/icons-material';
-import { useAuth } from '@/lib/auth';
-import { useRouter } from 'next/navigation';
+import { useLoginForm } from '@/lib/hooks/useLoginForm';
 
 export default function LoginForm() {
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState('');
-  const [isShaking, setIsShaking] = useState(false);
-  const { login } = useAuth();
-  const router = useRouter();
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError('');
-
-    const success = await login(username, password);
-
-    if (success) {
-      router.push('/dashboard');
-    } else {
-      setError('Invalid credentials');
-      setIsShaking(true);
-      setTimeout(() => setIsShaking(false), 500);
-    }
-  };
+  const {
+    username,
+    setUsername,
+    password,
+    setPassword,
+    isShaking,
+    error,
+    loading,
+    handleSubmit,
+  } = useLoginForm();
 
   return (
     <Box
@@ -121,8 +109,9 @@ export default function LoginForm() {
               color="secondary"
               size="large"
               sx={{ mb: 2 }}
+              disabled={loading}
             >
-              Access Dashboard
+              {loading ? 'Logging in...' : 'Access Dashboard'}
             </Button>
 
             <Typography

frontend/components/TerminalModal.tsx

@@ -1,44 +1,14 @@
 'use client';
 
-import React, { useState, useRef, useEffect } from 'react';
-import {
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  Button,
-  TextField,
-  Box,
-  Typography,
-  IconButton,
-  Paper,
-  useMediaQuery,
-  useTheme,
-  ToggleButtonGroup,
-  ToggleButton,
-  Tooltip,
-  Alert,
-  Snackbar,
-} from '@mui/material';
-import { Close, Send, Terminal as TerminalIcon, Code, Warning } from '@mui/icons-material';
-import { apiClient, API_BASE_URL } from '@/lib/api';
-import { io, Socket } from 'socket.io-client';
-import { Terminal } from '@xterm/xterm';
-import { FitAddon } from '@xterm/addon-fit';
-import '@xterm/xterm/css/xterm.css';
-
-interface TerminalModalProps {
-  open: boolean;
-  onClose: () => void;
-  containerName: string;
-  containerId: string;
-}
-
-interface OutputLine {
-  type: 'command' | 'output' | 'error';
-  content: string;
-  workdir?: string;
-}
+import React, { useState } from 'react';
+import { Dialog, DialogContent, DialogActions, Button, useMediaQuery, useTheme } from '@mui/material';
+import { useSimpleTerminal } from '@/lib/hooks/useSimpleTerminal';
+import { useInteractiveTerminal } from '@/lib/hooks/useInteractiveTerminal';
+import { TerminalModalProps } from '@/lib/interfaces/terminal';
+import TerminalHeader from './TerminalModal/TerminalHeader';
+import SimpleTerminal from './TerminalModal/SimpleTerminal';
+import InteractiveTerminal from './TerminalModal/InteractiveTerminal';
+import FallbackNotification from './TerminalModal/FallbackNotification';
 
 export default function TerminalModal({
   open,
@@ -49,269 +19,33 @@ export default function TerminalModal({
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
-  // Mode selection: 'simple' or 'interactive'
   const [mode, setMode] = useState<'simple' | 'interactive'>('interactive');
-
-  // Fallback tracking
   const [interactiveFailed, setInteractiveFailed] = useState(false);
   const [fallbackReason, setFallbackReason] = useState('');
   const [showFallbackNotification, setShowFallbackNotification] = useState(false);
 
-  // Simple mode state
-  const [command, setCommand] = useState('');
-  const [output, setOutput] = useState<OutputLine[]>([]);
-  const [isExecuting, setIsExecuting] = useState(false);
-  const [workdir, setWorkdir] = useState('/');
-  const outputRef = useRef<HTMLDivElement>(null);
+  const simpleTerminal = useSimpleTerminal(containerId);
 
-  // Interactive mode state
-  const terminalRef = useRef<HTMLDivElement>(null);
-  const xtermRef = useRef<Terminal | null>(null);
-  const socketRef = useRef<Socket | null>(null);
-  const fitAddonRef = useRef<FitAddon | null>(null);
-  const connectionAttempts = useRef(0);
-
-  // Auto-scroll to bottom when output changes (simple mode)
-  useEffect(() => {
-    if (outputRef.current) {
-      outputRef.current.scrollTop = outputRef.current.scrollHeight;
-    }
-  }, [output]);
-
-  // Function to fallback to simple mode
-  const fallbackToSimpleMode = (reason: string) => {
+  const handleFallback = (reason: string) => {
     console.warn('Falling back to simple mode:', reason);
     setInteractiveFailed(true);
     setFallbackReason(reason);
     setMode('simple');
     setShowFallbackNotification(true);
-
-    // Cleanup interactive terminal if it exists
-    if (socketRef.current) {
-      socketRef.current.disconnect();
-      socketRef.current = null;
-    }
-    if (xtermRef.current) {
-      xtermRef.current.dispose();
-      xtermRef.current = null;
-    }
+    interactiveTerminal.cleanup();
   };
 
-  // Initialize interactive terminal
-  useEffect(() => {
-    if (!open || mode !== 'interactive' || !terminalRef.current) return;
-
-    // Create terminal instance
-    const term = new Terminal({
-      cursorBlink: true,
-      fontSize: isMobile ? 12 : 14,
-      fontFamily: '"Ubuntu Mono", "Courier New", monospace',
-      theme: {
-        background: '#300A24',
-        foreground: '#F8F8F2',
-        cursor: '#F8F8F2',
-        black: '#2C0922',
-        red: '#FF5555',
-        green: '#50FA7B',
-        yellow: '#F1FA8C',
-        blue: '#8BE9FD',
-        magenta: '#FF79C6',
-        cyan: '#8BE9FD',
-        white: '#F8F8F2',
-        brightBlack: '#6272A4',
-        brightRed: '#FF6E6E',
-        brightGreen: '#69FF94',
-        brightYellow: '#FFFFA5',
-        brightBlue: '#D6ACFF',
-        brightMagenta: '#FF92DF',
-        brightCyan: '#A4FFFF',
-        brightWhite: '#FFFFFF',
-      },
-    });
-
-    const fitAddon = new FitAddon();
-    term.loadAddon(fitAddon);
-    term.open(terminalRef.current);
-
-    // Fit terminal to container
-    setTimeout(() => {
-      try {
-        fitAddon.fit();
-      } catch (e) {
-        console.error('Error fitting terminal:', e);
-      }
-    }, 0);
-
-    xtermRef.current = term;
-    fitAddonRef.current = fitAddon;
-
-    // Connect to WebSocket
-    const wsUrl = API_BASE_URL.replace(/^http/, 'ws');
-    const socket = io(`${wsUrl}/terminal`, {
-      transports: ['websocket', 'polling'],
-    });
-
-    socketRef.current = socket;
-
-    socket.on('connect', () => {
-      console.log('WebSocket connected');
-      connectionAttempts.current = 0; // Reset on successful connection
-
-      // Start terminal session
-      const token = apiClient.getToken();
-      const termSize = fitAddon.proposeDimensions();
-      socket.emit('start_terminal', {
-        container_id: containerId,
-        token: token,
-        cols: termSize?.cols || 80,
-        rows: termSize?.rows || 24,
-      });
-    });
-
-    socket.on('connect_error', (error) => {
-      console.error('WebSocket connection error:', error);
-      connectionAttempts.current++;
-
-      // After 2 failed attempts, fallback to simple mode
-      if (connectionAttempts.current >= 2) {
-        fallbackToSimpleMode('Failed to establish WebSocket connection. Network or server may be unavailable.');
-      }
-    });
-
-    socket.on('started', () => {
-      term.write('\r\n*** Interactive Terminal Started ***\r\n');
-      term.write('You can now use sudo, nano, vim, and other interactive commands.\r\n\r\n');
-    });
-
-    socket.on('output', (data: { data: string }) => {
-      term.write(data.data);
-    });
-
-    socket.on('error', (data: { error: string }) => {
-      console.error('Terminal error:', data.error);
-      term.write(`\r\n\x1b[31mError: ${data.error}\x1b[0m\r\n`);
-
-      // Check for critical errors that should trigger fallback
-      const criticalErrors = ['Unauthorized', 'Cannot connect to Docker', 'Invalid session'];
-      if (criticalErrors.some(err => data.error.includes(err))) {
-        setTimeout(() => {
-          fallbackToSimpleMode(`Interactive terminal failed: ${data.error}`);
-        }, 2000); // Give user time to see the error
-      }
-    });
-
-    socket.on('exit', () => {
-      term.write('\r\n\r\n*** Terminal Session Ended ***\r\n');
-    });
-
-    socket.on('disconnect', (reason) => {
-      console.log('WebSocket disconnected:', reason);
-
-      // If disconnect was unexpected and not user-initiated
-      if (reason === 'transport error' || reason === 'transport close') {
-        fallbackToSimpleMode('WebSocket connection lost unexpectedly.');
-      }
-    });
-
-    // Handle terminal input
-    term.onData((data) => {
-      socket.emit('input', { data });
-    });
-
-    // Handle terminal resize
-    const handleResize = () => {
-      try {
-        fitAddon.fit();
-        const termSize = fitAddon.proposeDimensions();
-        if (termSize) {
-          socket.emit('resize', {
-            cols: termSize.cols,
-            rows: termSize.rows,
-          });
-        }
-      } catch (e) {
-        console.error('Error resizing terminal:', e);
-      }
-    };
-
-    window.addEventListener('resize', handleResize);
-
-    // Cleanup
-    return () => {
-      window.removeEventListener('resize', handleResize);
-      term.dispose();
-      socket.disconnect();
-      xtermRef.current = null;
-      socketRef.current = null;
-      fitAddonRef.current = null;
-    };
-  }, [open, mode, containerId, isMobile]);
-
-  const handleExecute = async () => {
-    if (!command.trim()) return;
-
-    setIsExecuting(true);
-
-    // Add command to output with current working directory
-    setOutput((prev) => [...prev, {
-      type: 'command',
-      content: command,
-      workdir: workdir
-    }]);
-
-    try {
-      const result = await apiClient.executeCommand(containerId, command);
-
-      // Update working directory if provided
-      if (result.workdir) {
-        setWorkdir(result.workdir);
-      }
-
-      // Add command output
-      if (result.output && result.output.trim()) {
-        setOutput((prev) => [...prev, {
-          type: result.exit_code === 0 ? 'output' : 'error',
-          content: result.output
-        }]);
-      } else if (command.trim().startsWith('ls')) {
-        // If ls command returns empty output, indicate empty directory
-        setOutput((prev) => [...prev, {
-          type: 'output',
-          content: '(empty directory)'
-        }]);
-      }
-    } catch (error) {
-      setOutput((prev) => [...prev, {
-        type: 'error',
-        content: `Error: ${error instanceof Error ? error.message : 'Unknown error'}`
-      }]);
-    } finally {
-      setIsExecuting(false);
-      setCommand('');
-    }
-  };
-
-  const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      handleExecute();
-    }
-  };
+  const interactiveTerminal = useInteractiveTerminal({
+    open: open && mode === 'interactive',
+    containerId,
+    containerName,
+    isMobile,
+    onFallback: handleFallback,
+  });
 
   const handleClose = () => {
-    // Cleanup interactive terminal
-    if (socketRef.current) {
-      socketRef.current.disconnect();
-    }
-    if (xtermRef.current) {
-      xtermRef.current.dispose();
-    }
-
-    // Reset simple mode state
-    setOutput([]);
-    setCommand('');
-    setWorkdir('/');
-
+    interactiveTerminal.cleanup();
+    simpleTerminal.reset();
     onClose();
   };
 
@@ -320,11 +54,9 @@ export default function TerminalModal({
     newMode: 'simple' | 'interactive' | null,
   ) => {
     if (newMode !== null) {
-      // If switching to interactive mode after a failure, reset the failure state
       if (newMode === 'interactive' && interactiveFailed) {
         setInteractiveFailed(false);
         setFallbackReason('');
-        connectionAttempts.current = 0;
       }
       setMode(newMode);
     }
@@ -334,47 +66,13 @@ export default function TerminalModal({
     setInteractiveFailed(false);
     setFallbackReason('');
     setShowFallbackNotification(false);
-    connectionAttempts.current = 0;
     setMode('interactive');
   };
 
-  const formatPrompt = (workdir: string) => {
-    // Shorten workdir if it's too long (show ~ for home, or just basename)
-    let displayDir = workdir;
-    if (workdir.length > 30) {
-      const parts = workdir.split('/');
-      displayDir = '.../' + parts[parts.length - 1];
-    }
-    return `root@${containerName}:${displayDir}#`;
-  };
-
-  const highlightCommand = (line: OutputLine) => {
-    if (line.type === 'command') {
-      const prompt = formatPrompt(line.workdir || '/');
-      const parts = line.content.split(' ');
-      const cmd = parts[0];
-      const args = parts.slice(1).join(' ');
-
-      return (
-        <div style={{ marginBottom: '4px' }}>
-          <span style={{ color: '#8BE9FD', fontWeight: 'bold' }}>{prompt}</span>
-          {' '}
-          <span style={{ color: '#50FA7B', fontWeight: 'bold' }}>{cmd}</span>
-          {args && <span style={{ color: '#F8F8F2' }}> {args}</span>}
-        </div>
-      );
-    } else if (line.type === 'error') {
-      return (
-        <div style={{ color: '#FF5555', marginBottom: '2px' }}>
-          {line.content}
-        </div>
-      );
-    } else {
-      return (
-        <div style={{ color: '#F8F8F2', marginBottom: '2px', whiteSpace: 'pre-wrap' }}>
-          {line.content}
-        </div>
-      );
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      simpleTerminal.executeCommand();
     }
   };
 
@@ -392,238 +90,30 @@ export default function TerminalModal({
         },
       }}
     >
-      <DialogTitle
-        sx={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          pb: 2,
-          pt: { xs: 1, sm: 2 },
-          px: { xs: 2, sm: 3 },
-          flexWrap: 'wrap',
-          gap: 2,
-        }}
-      >
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, flex: 1 }}>
-          <Typography
-            variant="h2"
-            component="div"
-            sx={{ fontSize: { xs: '1.1rem', sm: '1.5rem' } }}
-          >
-            Terminal - {containerName}
-          </Typography>
-          <ToggleButtonGroup
-            value={mode}
-            exclusive
-            onChange={handleModeChange}
-            size="small"
-            sx={{ display: 'flex' }}
-          >
-            <Tooltip title={interactiveFailed ? "Interactive mode failed - click to retry" : "Interactive mode with full terminal support (sudo, nano, vim)"}>
-              <ToggleButton
-                value="interactive"
-                sx={{
-                  flex: 1,
-                  fontSize: { xs: '0.75rem', sm: '0.875rem' },
-                  ...(interactiveFailed && {
-                    borderColor: '#f59e0b',
-                    color: '#f59e0b',
-                    '&:hover': {
-                      borderColor: '#d97706',
-                      backgroundColor: 'rgba(245, 158, 11, 0.1)',
-                    },
-                  }),
-                }}
-              >
-                {interactiveFailed ? (
-                  <Warning sx={{ mr: 0.5, fontSize: '1rem' }} />
-                ) : (
-                  <TerminalIcon sx={{ mr: 0.5, fontSize: '1rem' }} />
-                )}
-                Interactive
-              </ToggleButton>
-            </Tooltip>
-            <Tooltip title="Simple command execution mode">
-              <ToggleButton value="simple" sx={{ flex: 1, fontSize: { xs: '0.75rem', sm: '0.875rem' } }}>
-                <Code sx={{ mr: 0.5, fontSize: '1rem' }} />
-                Simple
-              </ToggleButton>
-            </Tooltip>
-          </ToggleButtonGroup>
-        </Box>
-        <IconButton onClick={handleClose} size="small">
-          <Close />
-        </IconButton>
-      </DialogTitle>
+      <TerminalHeader
+        containerName={containerName}
+        mode={mode}
+        interactiveFailed={interactiveFailed}
+        onModeChange={handleModeChange}
+        onClose={handleClose}
+      />
 
       <DialogContent dividers>
         {mode === 'interactive' ? (
-          /* Interactive terminal with xterm.js */
-          <Box
-            ref={terminalRef}
-            sx={{
-              height: { xs: '400px', sm: '500px' },
-              backgroundColor: '#300A24',
-              borderRadius: '4px',
-              border: '1px solid #5E2750',
-              overflow: 'hidden',
-              '& .xterm': {
-                padding: '8px',
-              },
-              '& .xterm-viewport': {
-                backgroundColor: '#300A24 !important',
-              },
-            }}
-          />
+          <InteractiveTerminal terminalRef={interactiveTerminal.terminalRef} />
         ) : (
-          /* Simple command execution mode */
-          <>
-            <Paper
-              ref={outputRef}
-              elevation={0}
-              sx={{
-                backgroundColor: '#300A24',
-                color: '#F8F8F2',
-                fontFamily: '"Ubuntu Mono", "Courier New", monospace',
-                fontSize: { xs: '12px', sm: '14px' },
-                padding: { xs: 1.5, sm: 2 },
-                minHeight: { xs: '300px', sm: '400px' },
-                maxHeight: { xs: '400px', sm: '500px' },
-                overflowY: 'auto',
-                mb: 2,
-                border: '1px solid #5E2750',
-                borderRadius: '4px',
-                '&::-webkit-scrollbar': {
-                  width: { xs: '6px', sm: '10px' },
-                },
-                '&::-webkit-scrollbar-track': {
-                  background: '#2C0922',
-                },
-                '&::-webkit-scrollbar-thumb': {
-                  background: '#5E2750',
-                  borderRadius: '5px',
-                  '&:hover': {
-                    background: '#772953',
-                  }
-                },
-              }}
-            >
-              {output.length === 0 ? (
-                <Box>
-                  <Typography sx={{
-                    color: '#8BE9FD',
-                    fontFamily: 'inherit',
-                    fontSize: '13px',
-                    mb: 1
-                  }}>
-                    Ubuntu-style Terminal - Connected to <span style={{ color: '#50FA7B', fontWeight: 'bold' }}>{containerName}</span>
-                  </Typography>
-                  <Typography sx={{
-                    color: '#6272A4',
-                    fontFamily: 'inherit',
-                    fontSize: '12px'
-                  }}>
-                    Type a command and press Enter or click Execute...
-                  </Typography>
-                </Box>
-              ) : (
-                <Box>
-                  {output.map((line, index) => (
-                    <React.Fragment key={index}>
-                      {highlightCommand(line)}
-                    </React.Fragment>
-                  ))}
-                </Box>
-              )}
-            </Paper>
-
-            <Box sx={{
-              display: 'flex',
-              flexDirection: isMobile ? 'column' : 'row',
-              gap: 1,
-              alignItems: isMobile ? 'stretch' : 'center'
-            }}>
-              <Typography sx={{
-                fontFamily: '"Ubuntu Mono", monospace',
-                fontSize: { xs: '12px', sm: '14px' },
-                color: '#8BE9FD',
-                fontWeight: 'bold',
-                whiteSpace: 'nowrap',
-                alignSelf: isMobile ? 'flex-start' : 'center'
-              }}>
-                {formatPrompt(workdir)}
-              </Typography>
-              <Box sx={{ display: 'flex', gap: 1, flex: 1 }}>
-                <TextField
-                  fullWidth
-                  value={command}
-                  onChange={(e) => setCommand(e.target.value)}
-                  onKeyPress={handleKeyPress}
-                  placeholder="ls -la"
-                  disabled={isExecuting}
-                  variant="outlined"
-                  size="small"
-                  autoFocus
-                  sx={{
-                    fontFamily: '"Ubuntu Mono", monospace',
-                    '& input': {
-                      fontFamily: '"Ubuntu Mono", monospace',
-                      fontSize: { xs: '12px', sm: '14px' },
-                      padding: { xs: '6px 10px', sm: '8px 12px' },
-                      color: '#F8F8F2',
-                    },
-                    '& .MuiOutlinedInput-root': {
-                      backgroundColor: '#1E1E1E',
-                      '& fieldset': {
-                        borderColor: '#5E2750',
-                      },
-                      '&:hover fieldset': {
-                        borderColor: '#772953',
-                      },
-                      '&.Mui-focused fieldset': {
-                        borderColor: '#8BE9FD',
-                      },
-                    },
-                  }}
-                />
-                {isMobile ? (
-                  <IconButton
-                    onClick={handleExecute}
-                    disabled={isExecuting || !command.trim()}
-                    sx={{
-                      backgroundColor: '#5E2750',
-                      color: 'white',
-                      '&:hover': {
-                        backgroundColor: '#772953',
-                      },
-                      '&:disabled': {
-                        backgroundColor: '#3a1a2f',
-                      },
-                    }}
-                  >
-                    <Send />
-                  </IconButton>
-                ) : (
-                  <Button
-                    variant="contained"
-                    onClick={handleExecute}
-                    disabled={isExecuting || !command.trim()}
-                    startIcon={<Send />}
-                    sx={{
-                      backgroundColor: '#5E2750',
-                      '&:hover': {
-                        backgroundColor: '#772953',
-                      },
-                      textTransform: 'none',
-                      fontWeight: 'bold',
-                    }}
-                  >
-                    Run
-                  </Button>
-                )}
-              </Box>
-            </Box>
-          </>
+          <SimpleTerminal
+            output={simpleTerminal.output}
+            command={simpleTerminal.command}
+            workdir={simpleTerminal.workdir}
+            isExecuting={simpleTerminal.isExecuting}
+            isMobile={isMobile}
+            containerName={containerName}
+            outputRef={simpleTerminal.outputRef}
+            onCommandChange={simpleTerminal.setCommand}
+            onExecute={simpleTerminal.executeCommand}
+            onKeyPress={handleKeyPress}
+          />
         )}
       </DialogContent>
 
@@ -633,32 +123,12 @@ export default function TerminalModal({
         </Button>
       </DialogActions>
 
-      {/* Fallback notification */}
-      <Snackbar
-        open={showFallbackNotification}
-        autoHideDuration={10000}
+      <FallbackNotification
+        show={showFallbackNotification}
+        reason={fallbackReason}
         onClose={() => setShowFallbackNotification(false)}
-        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-      >
-        <Alert
-          severity="warning"
-          icon={<Warning />}
-          action={
-            <Button color="inherit" size="small" onClick={handleRetryInteractive}>
-              Retry
-            </Button>
-          }
-          onClose={() => setShowFallbackNotification(false)}
-          sx={{ width: '100%', maxWidth: '600px' }}
-        >
-          <Typography variant="body2" sx={{ fontWeight: 600, mb: 0.5 }}>
-            Switched to Simple Mode
-          </Typography>
-          <Typography variant="body2" sx={{ fontSize: '0.875rem' }}>
-            {fallbackReason}
-          </Typography>
-        </Alert>
-      </Snackbar>
+        onRetry={handleRetryInteractive}
+      />
     </Dialog>
   );
 }

frontend/components/TerminalModal/CommandInput.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { Box, Typography, TextField, Button, IconButton } from '@mui/material';
+import { Send } from '@mui/icons-material';
+import { CommandInputProps } from '@/lib/interfaces/terminal';
+import { formatPrompt } from '@/lib/utils/terminal';
+
+export default function CommandInput({
+  command,
+  workdir,
+  isExecuting,
+  isMobile,
+  containerName,
+  onCommandChange,
+  onExecute,
+  onKeyPress,
+}: CommandInputProps) {
+  return (
+    <Box sx={{
+      display: 'flex',
+      flexDirection: isMobile ? 'column' : 'row',
+      gap: 1,
+      alignItems: isMobile ? 'stretch' : 'center'
+    }}>
+      <Typography sx={{
+        fontFamily: '"Ubuntu Mono", monospace',
+        fontSize: { xs: '12px', sm: '14px' },
+        color: '#8BE9FD',
+        fontWeight: 'bold',
+        whiteSpace: 'nowrap',
+        alignSelf: isMobile ? 'flex-start' : 'center'
+      }}>
+        {formatPrompt(containerName, workdir)}
+      </Typography>
+      <Box sx={{ display: 'flex', gap: 1, flex: 1 }}>
+        <TextField
+          fullWidth
+          value={command}
+          onChange={(e) => onCommandChange(e.target.value)}
+          onKeyPress={onKeyPress}
+          placeholder="ls -la"
+          disabled={isExecuting}
+          variant="outlined"
+          size="small"
+          autoFocus
+          sx={{
+            fontFamily: '"Ubuntu Mono", monospace',
+            '& input': {
+              fontFamily: '"Ubuntu Mono", monospace',
+              fontSize: { xs: '12px', sm: '14px' },
+              padding: { xs: '6px 10px', sm: '8px 12px' },
+              color: '#F8F8F2',
+            },
+            '& .MuiOutlinedInput-root': {
+              backgroundColor: '#1E1E1E',
+              '& fieldset': {
+                borderColor: '#5E2750',
+              },
+              '&:hover fieldset': {
+                borderColor: '#772953',
+              },
+              '&.Mui-focused fieldset': {
+                borderColor: '#8BE9FD',
+              },
+            },
+          }}
+        />
+        {isMobile ? (
+          <IconButton
+            onClick={onExecute}
+            disabled={isExecuting || !command.trim()}
+            sx={{
+              backgroundColor: '#5E2750',
+              color: 'white',
+              '&:hover': {
+                backgroundColor: '#772953',
+              },
+              '&:disabled': {
+                backgroundColor: '#3a1a2f',
+              },
+            }}
+          >
+            <Send />
+          </IconButton>
+        ) : (
+          <Button
+            variant="contained"
+            onClick={onExecute}
+            disabled={isExecuting || !command.trim()}
+            startIcon={<Send />}
+            sx={{
+              backgroundColor: '#5E2750',
+              '&:hover': {
+                backgroundColor: '#772953',
+              },
+              textTransform: 'none',
+              fontWeight: 'bold',
+            }}
+          >
+            Run
+          </Button>
+        )}
+      </Box>
+    </Box>
+  );
+}

frontend/components/TerminalModal/FallbackNotification.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Snackbar, Alert, Typography, Button } from '@mui/material';
+import { Warning } from '@mui/icons-material';
+import { FallbackNotificationProps } from '@/lib/interfaces/terminal';
+
+export default function FallbackNotification({
+  show,
+  reason,
+  onClose,
+  onRetry,
+}: FallbackNotificationProps) {
+  return (
+    <Snackbar
+      open={show}
+      autoHideDuration={10000}
+      onClose={onClose}
+      anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+    >
+      <Alert
+        severity="warning"
+        icon={<Warning />}
+        action={
+          <Button color="inherit" size="small" onClick={onRetry}>
+            Retry
+          </Button>
+        }
+        onClose={onClose}
+        sx={{ width: '100%', maxWidth: '600px' }}
+      >
+        <Typography variant="body2" sx={{ fontWeight: 600, mb: 0.5 }}>
+          Switched to Simple Mode
+        </Typography>
+        <Typography variant="body2" sx={{ fontSize: '0.875rem' }}>
+          {reason}
+        </Typography>
+      </Alert>
+    </Snackbar>
+  );
+}

frontend/components/TerminalModal/InteractiveTerminal.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import '@xterm/xterm/css/xterm.css';
+import { InteractiveTerminalProps } from '@/lib/interfaces/terminal';
+
+export default function InteractiveTerminal({ terminalRef }: InteractiveTerminalProps) {
+  return (
+    <Box
+      ref={terminalRef}
+      sx={{
+        height: { xs: '400px', sm: '500px' },
+        backgroundColor: '#300A24',
+        borderRadius: '4px',
+        border: '1px solid #5E2750',
+        overflow: 'hidden',
+        '& .xterm': {
+          padding: '8px',
+        },
+        '& .xterm-viewport': {
+          backgroundColor: '#300A24 !important',
+        },
+      }}
+    />
+  );
+}

frontend/components/TerminalModal/SimpleTerminal.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { SimpleTerminalProps } from '@/lib/interfaces/terminal';
+import TerminalOutput from './TerminalOutput';
+import CommandInput from './CommandInput';
+
+export default function SimpleTerminal({
+  output,
+  command,
+  workdir,
+  isExecuting,
+  isMobile,
+  containerName,
+  outputRef,
+  onCommandChange,
+  onExecute,
+  onKeyPress,
+}: SimpleTerminalProps) {
+  return (
+    <>
+      <TerminalOutput
+        output={output}
+        containerName={containerName}
+        outputRef={outputRef}
+      />
+      <CommandInput
+        command={command}
+        workdir={workdir}
+        isExecuting={isExecuting}
+        isMobile={isMobile}
+        containerName={containerName}
+        onCommandChange={onCommandChange}
+        onExecute={onExecute}
+        onKeyPress={onKeyPress}
+      />
+    </>
+  );
+}

frontend/components/TerminalModal/TerminalHeader.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import {
+  DialogTitle,
+  Box,
+  Typography,
+  IconButton,
+  ToggleButtonGroup,
+  ToggleButton,
+  Tooltip,
+} from '@mui/material';
+import { Close, Terminal as TerminalIcon, Code, Warning } from '@mui/icons-material';
+import { TerminalHeaderProps } from '@/lib/interfaces/terminal';
+
+export default function TerminalHeader({
+  containerName,
+  mode,
+  interactiveFailed,
+  onModeChange,
+  onClose,
+}: TerminalHeaderProps) {
+  return (
+    <DialogTitle
+      sx={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        pb: 2,
+        pt: { xs: 1, sm: 2 },
+        px: { xs: 2, sm: 3 },
+        flexWrap: 'wrap',
+        gap: 2,
+      }}
+    >
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, flex: 1 }}>
+        <Typography
+          variant="h2"
+          component="div"
+          sx={{ fontSize: { xs: '1.1rem', sm: '1.5rem' } }}
+        >
+          Terminal - {containerName}
+        </Typography>
+        <ToggleButtonGroup
+          value={mode}
+          exclusive
+          onChange={onModeChange}
+          size="small"
+          sx={{ display: 'flex' }}
+        >
+          <Tooltip title={interactiveFailed ? "Interactive mode failed - click to retry" : "Interactive mode with full terminal support (sudo, nano, vim)"}>
+            <ToggleButton
+              value="interactive"
+              sx={{
+                flex: 1,
+                fontSize: { xs: '0.75rem', sm: '0.875rem' },
+                ...(interactiveFailed && {
+                  borderColor: '#f59e0b',
+                  color: '#f59e0b',
+                  '&:hover': {
+                    borderColor: '#d97706',
+                    backgroundColor: 'rgba(245, 158, 11, 0.1)',
+                  },
+                }),
+              }}
+            >
+              {interactiveFailed ? (
+                <Warning sx={{ mr: 0.5, fontSize: '1rem' }} />
+              ) : (
+                <TerminalIcon sx={{ mr: 0.5, fontSize: '1rem' }} />
+              )}
+              Interactive
+            </ToggleButton>
+          </Tooltip>
+          <Tooltip title="Simple command execution mode">
+            <ToggleButton value="simple" sx={{ flex: 1, fontSize: { xs: '0.75rem', sm: '0.875rem' } }}>
+              <Code sx={{ mr: 0.5, fontSize: '1rem' }} />
+              Simple
+            </ToggleButton>
+          </Tooltip>
+        </ToggleButtonGroup>
+      </Box>
+      <IconButton onClick={onClose} size="small">
+        <Close />
+      </IconButton>
+    </DialogTitle>
+  );
+}

frontend/components/TerminalModal/TerminalOutput.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Box, Paper, Typography } from '@mui/material';
+import { TerminalOutputProps } from '@/lib/interfaces/terminal';
+import { highlightCommand } from '@/lib/utils/terminal';
+
+export default function TerminalOutput({ output, containerName, outputRef }: TerminalOutputProps) {
+  return (
+    <Paper
+      ref={outputRef}
+      elevation={0}
+      sx={{
+        backgroundColor: '#300A24',
+        color: '#F8F8F2',
+        fontFamily: '"Ubuntu Mono", "Courier New", monospace',
+        fontSize: { xs: '12px', sm: '14px' },
+        padding: { xs: 1.5, sm: 2 },
+        minHeight: { xs: '300px', sm: '400px' },
+        maxHeight: { xs: '400px', sm: '500px' },
+        overflowY: 'auto',
+        mb: 2,
+        border: '1px solid #5E2750',
+        borderRadius: '4px',
+        '&::-webkit-scrollbar': {
+          width: { xs: '6px', sm: '10px' },
+        },
+        '&::-webkit-scrollbar-track': {
+          background: '#2C0922',
+        },
+        '&::-webkit-scrollbar-thumb': {
+          background: '#5E2750',
+          borderRadius: '5px',
+          '&:hover': {
+            background: '#772953',
+          }
+        },
+      }}
+    >
+      {output.length === 0 ? (
+        <Box>
+          <Typography sx={{
+            color: '#8BE9FD',
+            fontFamily: 'inherit',
+            fontSize: '13px',
+            mb: 1
+          }}>
+            Ubuntu-style Terminal - Connected to <span style={{ color: '#50FA7B', fontWeight: 'bold' }}>{containerName}</span>
+          </Typography>
+          <Typography sx={{
+            color: '#6272A4',
+            fontFamily: 'inherit',
+            fontSize: '12px'
+          }}>
+            Type a command and press Enter or click Execute...
+          </Typography>
+        </Box>
+      ) : (
+        <Box>
+          {output.map((line, index) => (
+            <React.Fragment key={index}>
+              {highlightCommand(line, containerName)}
+            </React.Fragment>
+          ))}
+        </Box>
+      )}
+    </Paper>
+  );
+}

frontend/components/TerminalModal/__tests__/TerminalHeader.test.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import TerminalHeader from '../TerminalHeader';
+
+describe('TerminalHeader', () => {
+  const mockOnClose = jest.fn();
+  const mockOnModeChange = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders container name', () => {
+    render(
+      <TerminalHeader
+        containerName="test-container"
+        mode="interactive"
+        interactiveFailed={false}
+        onModeChange={mockOnModeChange}
+        onClose={mockOnClose}
+      />
+    );
+
+    expect(screen.getByText(/Terminal - test-container/i)).toBeInTheDocument();
+  });
+
+  it('renders interactive and simple mode buttons', () => {
+    render(
+      <TerminalHeader
+        containerName="test-container"
+        mode="interactive"
+        interactiveFailed={false}
+        onModeChange={mockOnModeChange}
+        onClose={mockOnClose}
+      />
+    );
+
+    expect(screen.getByText('Interactive')).toBeInTheDocument();
+    expect(screen.getByText('Simple')).toBeInTheDocument();
+  });
+
+  it('calls onClose when close button is clicked', () => {
+    render(
+      <TerminalHeader
+        containerName="test-container"
+        mode="interactive"
+        interactiveFailed={false}
+        onModeChange={mockOnModeChange}
+        onClose={mockOnClose}
+      />
+    );
+
+    const closeButton = screen.getByRole('button', { name: '' });
+    fireEvent.click(closeButton);
+
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+
+  it('shows warning icon when interactive mode failed', () => {
+    const { container } = render(
+      <TerminalHeader
+        containerName="test-container"
+        mode="simple"
+        interactiveFailed={true}
+        onModeChange={mockOnModeChange}
+        onClose={mockOnClose}
+      />
+    );
+
+    const warningIcon = container.querySelector('[data-testid="WarningIcon"]');
+    expect(warningIcon).toBeInTheDocument();
+  });
+
+  it('applies correct mode selection', () => {
+    render(
+      <TerminalHeader
+        containerName="test-container"
+        mode="simple"
+        interactiveFailed={false}
+        onModeChange={mockOnModeChange}
+        onClose={mockOnClose}
+      />
+    );
+
+    const simpleButton = screen.getByText('Simple').closest('button');
+    expect(simpleButton).toHaveClass('Mui-selected');
+  });
+});

frontend/components/__tests__/LoginForm.test.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import authReducer from '@/lib/store/authSlice';
+import LoginForm from '../LoginForm';
+
+jest.mock('next/navigation', () => ({
+  useRouter: jest.fn(() => ({
+    push: jest.fn(),
+  })),
+}));
+
+const createMockStore = (loading = false) =>
+  configureStore({
+    reducer: {
+      auth: authReducer,
+    },
+    preloadedState: {
+      auth: {
+        isAuthenticated: false,
+        loading,
+        username: null,
+        error: null,
+      },
+    },
+  });
+
+const renderWithProvider = (component: React.ReactElement, loading = false) => {
+  return render(<Provider store={createMockStore(loading)}>{component}</Provider>);
+};
+
+describe('LoginForm', () => {
+  it('renders login form elements', () => {
+    renderWithProvider(<LoginForm />);
+
+    expect(screen.getByLabelText(/username/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/password/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /access dashboard/i })).toBeInTheDocument();
+  });
+
+  it('updates username input on change', () => {
+    renderWithProvider(<LoginForm />);
+
+    const usernameInput = screen.getByLabelText(/username/i) as HTMLInputElement;
+    fireEvent.change(usernameInput, { target: { value: 'testuser' } });
+
+    expect(usernameInput.value).toBe('testuser');
+  });
+
+  it('updates password input on change', () => {
+    renderWithProvider(<LoginForm />);
+
+    const passwordInput = screen.getByLabelText(/password/i) as HTMLInputElement;
+    fireEvent.change(passwordInput, { target: { value: 'testpass' } });
+
+    expect(passwordInput.value).toBe('testpass');
+  });
+
+  it('shows loading text when loading', () => {
+    renderWithProvider(<LoginForm />, true);
+
+    expect(screen.getByRole('button', { name: /logging in/i })).toBeInTheDocument();
+  });
+
+  it('password input is type password', () => {
+    renderWithProvider(<LoginForm />);
+
+    const passwordInput = screen.getByLabelText(/password/i) as HTMLInputElement;
+    expect(passwordInput.type).toBe('password');
+  });
+
+  it('shows helper text with default credentials', () => {
+    renderWithProvider(<LoginForm />);
+
+    expect(screen.getByText(/default: admin \/ admin123/i)).toBeInTheDocument();
+  });
+});

frontend/jest.config.js

@@ -0,0 +1,27 @@
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest({
+  dir: './',
+})
+
+const customJestConfig = {
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  testEnvironment: 'jest-environment-jsdom',
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/$1',
+  },
+  testMatch: [
+    '**/__tests__/**/*.[jt]s?(x)',
+    '**/?(*.)+(spec|test).[jt]s?(x)',
+  ],
+  collectCoverageFrom: [
+    'lib/**/*.{js,jsx,ts,tsx}',
+    'components/**/*.{js,jsx,ts,tsx}',
+    'app/**/*.{js,jsx,ts,tsx}',
+    '!**/*.d.ts',
+    '!**/node_modules/**',
+    '!**/.next/**',
+  ],
+}
+
+module.exports = createJestConfig(customJestConfig)

frontend/jest.setup.js

@@ -0,0 +1,28 @@
+import '@testing-library/jest-dom'
+
+// Mock window.matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+})
+
+// Mock localStorage
+const localStorageMock = {
+  getItem: jest.fn(),
+  setItem: jest.fn(),
+  removeItem: jest.fn(),
+  clear: jest.fn(),
+}
+global.localStorage = localStorageMock
+
+// Mock fetch
+global.fetch = jest.fn()

frontend/lib/api.ts

@@ -1,5 +1,7 @@
-export const API_BASE_URL = 
-  typeof window !== 'undefined' && (window as any).__ENV__?.NEXT_PUBLIC_API_URL 
+import { triggerAuthError } from './store/authErrorHandler';
+
+export const API_BASE_URL =
+  typeof window !== 'undefined' && (window as any).__ENV__?.NEXT_PUBLIC_API_URL
     ? (window as any).__ENV__.NEXT_PUBLIC_API_URL
     : process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5000';
 
@@ -31,6 +33,7 @@ class ApiClient {
       localStorage.setItem('auth_token', token);
     } else {
       localStorage.removeItem('auth_token');
+      localStorage.removeItem('auth_username');
     }
   }
 
@@ -41,6 +44,23 @@ class ApiClient {
     return this.token;
   }
 
+  getUsername(): string | null {
+    if (typeof window !== 'undefined') {
+      return localStorage.getItem('auth_username');
+    }
+    return null;
+  }
+
+  setUsername(username: string | null) {
+    if (typeof window !== 'undefined') {
+      if (username) {
+        localStorage.setItem('auth_username', username);
+      } else {
+        localStorage.removeItem('auth_username');
+      }
+    }
+  }
+
   async login(username: string, password: string): Promise<AuthResponse> {
     const response = await fetch(`${API_BASE_URL}/api/auth/login`, {
       method: 'POST',
@@ -53,6 +73,7 @@ class ApiClient {
     const data = await response.json();
     if (data.success && data.token) {
       this.setToken(data.token);
+      this.setUsername(data.username || username);
     }
     return data;
   }
@@ -73,6 +94,7 @@ class ApiClient {
   async getContainers(): Promise<Container[]> {
     const token = this.getToken();
     if (!token) {
+      triggerAuthError();
       throw new Error('Not authenticated');
     }
 
@@ -85,6 +107,7 @@ class ApiClient {
     if (!response.ok) {
       if (response.status === 401) {
         this.setToken(null);
+        triggerAuthError();
         throw new Error('Session expired');
       }
       throw new Error('Failed to fetch containers');
@@ -97,6 +120,7 @@ class ApiClient {
   async executeCommand(containerId: string, command: string): Promise<any> {
     const token = this.getToken();
     if (!token) {
+      triggerAuthError();
       throw new Error('Not authenticated');
     }
 
@@ -110,6 +134,11 @@ class ApiClient {
     });
 
     if (!response.ok) {
+      if (response.status === 401) {
+        this.setToken(null);
+        triggerAuthError();
+        throw new Error('Session expired');
+      }
       throw new Error('Failed to execute command');
     }
 
@@ -119,6 +148,7 @@ class ApiClient {
   async startContainer(containerId: string): Promise<any> {
     const token = this.getToken();
     if (!token) {
+      triggerAuthError();
       throw new Error('Not authenticated');
     }
 
@@ -130,6 +160,11 @@ class ApiClient {
     });
 
     if (!response.ok) {
+      if (response.status === 401) {
+        this.setToken(null);
+        triggerAuthError();
+        throw new Error('Session expired');
+      }
       const error = await response.json();
       throw new Error(error.error || 'Failed to start container');
     }
@@ -140,6 +175,7 @@ class ApiClient {
   async stopContainer(containerId: string): Promise<any> {
     const token = this.getToken();
     if (!token) {
+      triggerAuthError();
       throw new Error('Not authenticated');
     }
 
@@ -151,6 +187,11 @@ class ApiClient {
     });
 
     if (!response.ok) {
+      if (response.status === 401) {
+        this.setToken(null);
+        triggerAuthError();
+        throw new Error('Session expired');
+      }
       const error = await response.json();
       throw new Error(error.error || 'Failed to stop container');
     }
@@ -161,6 +202,7 @@ class ApiClient {
   async restartContainer(containerId: string): Promise<any> {
     const token = this.getToken();
     if (!token) {
+      triggerAuthError();
       throw new Error('Not authenticated');
     }
 
@@ -172,6 +214,11 @@ class ApiClient {
     });
 
     if (!response.ok) {
+      if (response.status === 401) {
+        this.setToken(null);
+        triggerAuthError();
+        throw new Error('Session expired');
+      }
       const error = await response.json();
       throw new Error(error.error || 'Failed to restart container');
     }
@@ -182,6 +229,7 @@ class ApiClient {
   async removeContainer(containerId: string): Promise<any> {
     const token = this.getToken();
     if (!token) {
+      triggerAuthError();
       throw new Error('Not authenticated');
     }
 
@@ -193,6 +241,11 @@ class ApiClient {
     });
 
     if (!response.ok) {
+      if (response.status === 401) {
+        this.setToken(null);
+        triggerAuthError();
+        throw new Error('Session expired');
+      }
       const error = await response.json();
       throw new Error(error.error || 'Failed to remove container');
     }

frontend/lib/auth.tsx

@@ -1,70 +0,0 @@
-'use client';
-
-import React, { createContext, useContext, useState, useEffect } from 'react';
-import { apiClient } from './api';
-
-interface AuthContextType {
-  isAuthenticated: boolean;
-  username: string | null;
-  login: (username: string, password: string) => Promise<boolean>;
-  logout: () => Promise<void>;
-  loading: boolean;
-}
-
-const AuthContext = createContext<AuthContextType | undefined>(undefined);
-
-export function AuthProvider({ children }: { children: React.ReactNode }) {
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-  const [username, setUsername] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    // Check if user has a valid token
-    const token = apiClient.getToken();
-    if (token) {
-      setIsAuthenticated(true);
-      // In a real app, you'd validate the token with the backend
-    }
-    setLoading(false);
-  }, []);
-
-  const login = async (username: string, password: string): Promise<boolean> => {
-    try {
-      const response = await apiClient.login(username, password);
-      if (response.success) {
-        setIsAuthenticated(true);
-        setUsername(response.username || username);
-        return true;
-      }
-      return false;
-    } catch (error) {
-      console.error('Login error:', error);
-      return false;
-    }
-  };
-
-  const logout = async () => {
-    try {
-      await apiClient.logout();
-    } catch (error) {
-      console.error('Logout error:', error);
-    } finally {
-      setIsAuthenticated(false);
-      setUsername(null);
-    }
-  };
-
-  return (
-    <AuthContext.Provider value={{ isAuthenticated, username, login, logout, loading }}>
-      {children}
-    </AuthContext.Provider>
-  );
-}
-
-export function useAuth() {
-  const context = useContext(AuthContext);
-  if (context === undefined) {
-    throw new Error('useAuth must be used within an AuthProvider');
-  }
-  return context;
-}

frontend/lib/hooks/__tests__/useAuthRedirect.test.tsx

@@ -0,0 +1,69 @@
+import { renderHook } from '@testing-library/react';
+import { useRouter } from 'next/navigation';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import authReducer from '@/lib/store/authSlice';
+import { useAuthRedirect } from '../useAuthRedirect';
+
+jest.mock('next/navigation', () => ({
+  useRouter: jest.fn(),
+}));
+
+const createMockStore = (isAuthenticated: boolean) =>
+  configureStore({
+    reducer: {
+      auth: authReducer,
+    },
+    preloadedState: {
+      auth: {
+        isAuthenticated,
+        loading: false,
+        username: isAuthenticated ? 'testuser' : null,
+        error: null,
+      },
+    },
+  });
+
+describe('useAuthRedirect', () => {
+  const mockPush = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useRouter as jest.Mock).mockReturnValue({
+      push: mockPush,
+    });
+  });
+
+  it('redirects to dashboard when authenticated and redirectTo is dashboard', () => {
+    const store = createMockStore(true);
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <Provider store={store}>{children}</Provider>
+    );
+
+    renderHook(() => useAuthRedirect('/dashboard'), { wrapper });
+
+    expect(mockPush).toHaveBeenCalledWith('/dashboard');
+  });
+
+  it('redirects to login when not authenticated and redirectTo is /', () => {
+    const store = createMockStore(false);
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <Provider store={store}>{children}</Provider>
+    );
+
+    renderHook(() => useAuthRedirect('/'), { wrapper });
+
+    expect(mockPush).toHaveBeenCalledWith('/');
+  });
+
+  it('does not redirect when authenticated but redirectTo is /', () => {
+    const store = createMockStore(true);
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <Provider store={store}>{children}</Provider>
+    );
+
+    renderHook(() => useAuthRedirect('/'), { wrapper });
+
+    expect(mockPush).not.toHaveBeenCalled();
+  });
+});

frontend/lib/hooks/__tests__/useLoginForm.test.tsx

@@ -0,0 +1,90 @@
+import { renderHook, act } from '@testing-library/react';
+import { useRouter } from 'next/navigation';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import authReducer from '@/lib/store/authSlice';
+import { useLoginForm } from '../useLoginForm';
+
+jest.mock('next/navigation', () => ({
+  useRouter: jest.fn(),
+}));
+
+const createMockStore = () =>
+  configureStore({
+    reducer: {
+      auth: authReducer,
+    },
+  });
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+  <Provider store={createMockStore()}>{children}</Provider>
+);
+
+describe('useLoginForm', () => {
+  const mockPush = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useRouter as jest.Mock).mockReturnValue({
+      push: mockPush,
+    });
+  });
+
+  it('initializes with empty username and password', () => {
+    const { result } = renderHook(() => useLoginForm(), { wrapper });
+
+    expect(result.current.username).toBe('');
+    expect(result.current.password).toBe('');
+    expect(result.current.error).toBeNull();
+  });
+
+  it('updates username when setUsername is called', () => {
+    const { result } = renderHook(() => useLoginForm(), { wrapper });
+
+    act(() => {
+      result.current.setUsername('testuser');
+    });
+
+    expect(result.current.username).toBe('testuser');
+  });
+
+  it('updates password when setPassword is called', () => {
+    const { result } = renderHook(() => useLoginForm(), { wrapper });
+
+    act(() => {
+      result.current.setPassword('testpass');
+    });
+
+    expect(result.current.password).toBe('testpass');
+  });
+
+  it('handles form submission', async () => {
+    const { result } = renderHook(() => useLoginForm(), { wrapper });
+    const mockEvent = {
+      preventDefault: jest.fn(),
+    } as unknown as React.FormEvent;
+
+    act(() => {
+      result.current.setUsername('testuser');
+      result.current.setPassword('testpass');
+    });
+
+    await act(async () => {
+      await result.current.handleSubmit(mockEvent);
+    });
+
+    expect(mockEvent.preventDefault).toHaveBeenCalled();
+  });
+
+  it('returns loading state', () => {
+    const { result } = renderHook(() => useLoginForm(), { wrapper });
+
+    expect(result.current.loading).toBeDefined();
+  });
+
+  it('returns isShaking state', () => {
+    const { result } = renderHook(() => useLoginForm(), { wrapper });
+
+    expect(result.current.isShaking).toBe(false);
+  });
+});

frontend/lib/hooks/__tests__/useTerminalModal.test.tsx

@@ -0,0 +1,61 @@
+import { renderHook, act } from '@testing-library/react';
+import { useTerminalModal } from '../useTerminalModal';
+
+describe('useTerminalModal', () => {
+  it('initializes with modal closed and no container selected', () => {
+    const { result } = renderHook(() => useTerminalModal());
+
+    expect(result.current.isTerminalOpen).toBe(false);
+    expect(result.current.selectedContainer).toBeNull();
+  });
+
+  it('opens modal with selected container', () => {
+    const { result } = renderHook(() => useTerminalModal());
+    const mockContainer = { id: '123', name: 'test-container' } as any;
+
+    act(() => {
+      result.current.openTerminal(mockContainer);
+    });
+
+    expect(result.current.isTerminalOpen).toBe(true);
+    expect(result.current.selectedContainer).toEqual(mockContainer);
+  });
+
+  it('closes modal and eventually clears selected container', async () => {
+    const { result } = renderHook(() => useTerminalModal());
+    const mockContainer = { id: '123', name: 'test-container' } as any;
+
+    act(() => {
+      result.current.openTerminal(mockContainer);
+    });
+
+    expect(result.current.isTerminalOpen).toBe(true);
+
+    act(() => {
+      result.current.closeTerminal();
+    });
+
+    expect(result.current.isTerminalOpen).toBe(false);
+  });
+
+  it('handles multiple open and close cycles', () => {
+    const { result } = renderHook(() => useTerminalModal());
+    const container1 = { id: '123', name: 'container1' } as any;
+    const container2 = { id: '456', name: 'container2' } as any;
+
+    act(() => {
+      result.current.openTerminal(container1);
+    });
+    expect(result.current.selectedContainer).toEqual(container1);
+
+    act(() => {
+      result.current.closeTerminal();
+    });
+    expect(result.current.isTerminalOpen).toBe(false);
+
+    act(() => {
+      result.current.openTerminal(container2);
+    });
+    expect(result.current.selectedContainer).toEqual(container2);
+  });
+});

frontend/lib/hooks/useAuthRedirect.ts

@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAppSelector } from '@/lib/store/hooks';
+
+export function useAuthRedirect(redirectTo: '/dashboard' | '/') {
+  const { isAuthenticated, loading } = useAppSelector((state) => state.auth);
+  const router = useRouter();
+
+  useEffect(() => {
+    if (loading) return;
+
+    if (redirectTo === '/dashboard' && isAuthenticated) {
+      router.push('/dashboard');
+    } else if (redirectTo === '/' && !isAuthenticated) {
+      router.push('/');
+    }
+  }, [isAuthenticated, loading, router, redirectTo]);
+
+  return { isAuthenticated, loading };
+}

frontend/lib/hooks/useContainerActions.ts

@@ -0,0 +1,87 @@
+import { useState } from 'react';
+import { apiClient } from '@/lib/api';
+
+export function useContainerActions(containerId: string, onUpdate?: () => void) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [snackbar, setSnackbar] = useState<{
+    open: boolean;
+    message: string;
+    severity: 'success' | 'error';
+  }>({
+    open: false,
+    message: '',
+    severity: 'success',
+  });
+
+  const showSuccess = (message: string) => {
+    setSnackbar({ open: true, message, severity: 'success' });
+    onUpdate?.();
+  };
+
+  const showError = (action: string, error: unknown) => {
+    const message = `Failed to ${action}: ${error instanceof Error ? error.message : 'Unknown error'}`;
+    setSnackbar({ open: true, message, severity: 'error' });
+  };
+
+  const handleStart = async () => {
+    setIsLoading(true);
+    try {
+      await apiClient.startContainer(containerId);
+      showSuccess('Container started successfully');
+    } catch (error) {
+      showError('start', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleStop = async () => {
+    setIsLoading(true);
+    try {
+      await apiClient.stopContainer(containerId);
+      showSuccess('Container stopped successfully');
+    } catch (error) {
+      showError('stop', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleRestart = async () => {
+    setIsLoading(true);
+    try {
+      await apiClient.restartContainer(containerId);
+      showSuccess('Container restarted successfully');
+    } catch (error) {
+      showError('restart', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleRemove = async () => {
+    setIsLoading(true);
+    try {
+      await apiClient.removeContainer(containerId);
+      showSuccess('Container removed successfully');
+    } catch (error) {
+      showError('remove', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const closeSnackbar = () => {
+    setSnackbar({ ...snackbar, open: false });
+  };
+
+  return {
+    isLoading,
+    snackbar,
+    handleStart,
+    handleStop,
+    handleRestart,
+    handleRemove,
+    closeSnackbar,
+  };
+}

frontend/lib/hooks/useContainerList.ts

@@ -0,0 +1,39 @@
+import { useState, useEffect } from 'react';
+import { apiClient, Container } from '@/lib/api';
+
+export function useContainerList(isAuthenticated: boolean) {
+  const [containers, setContainers] = useState<Container[]>([]);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  const fetchContainers = async () => {
+    setIsRefreshing(true);
+    setError('');
+    try {
+      const data = await apiClient.getContainers();
+      setContainers(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch containers');
+    } finally {
+      setIsRefreshing(false);
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      fetchContainers();
+      const interval = setInterval(fetchContainers, 10000);
+      return () => clearInterval(interval);
+    }
+  }, [isAuthenticated]);
+
+  return {
+    containers,
+    isRefreshing,
+    isLoading,
+    error,
+    refreshContainers: fetchContainers,
+  };
+}

frontend/lib/hooks/useInteractiveTerminal.ts

@@ -0,0 +1,208 @@
+import { useRef, useEffect } from 'react';
+import { io, Socket } from 'socket.io-client';
+import { apiClient, API_BASE_URL } from '@/lib/api';
+import type { Terminal } from '@xterm/xterm';
+import type { FitAddon } from '@xterm/addon-fit';
+
+interface UseInteractiveTerminalProps {
+  open: boolean;
+  containerId: string;
+  containerName: string;
+  isMobile: boolean;
+  onFallback: (reason: string) => void;
+}
+
+export function useInteractiveTerminal({
+  open,
+  containerId,
+  containerName,
+  isMobile,
+  onFallback,
+}: UseInteractiveTerminalProps) {
+  const terminalRef = useRef<HTMLDivElement>(null);
+  const xtermRef = useRef<Terminal | null>(null);
+  const socketRef = useRef<Socket | null>(null);
+  const fitAddonRef = useRef<FitAddon | null>(null);
+  const connectionAttempts = useRef(0);
+
+  useEffect(() => {
+    if (!open || !terminalRef.current) return;
+
+    let term: Terminal | null = null;
+    let fitAddon: FitAddon | null = null;
+    let socket: Socket | null = null;
+
+    const initTerminal = async () => {
+      try {
+        const [{ Terminal }, { FitAddon }] = await Promise.all([
+          import('@xterm/xterm'),
+          import('@xterm/addon-fit'),
+        ]);
+
+        if (!terminalRef.current) return;
+
+        term = new Terminal({
+          cursorBlink: true,
+          fontSize: isMobile ? 12 : 14,
+          fontFamily: '"Ubuntu Mono", "Courier New", monospace',
+          theme: {
+            background: '#300A24',
+            foreground: '#F8F8F2',
+            cursor: '#F8F8F2',
+            black: '#2C0922',
+            red: '#FF5555',
+            green: '#50FA7B',
+            yellow: '#F1FA8C',
+            blue: '#8BE9FD',
+            magenta: '#FF79C6',
+            cyan: '#8BE9FD',
+            white: '#F8F8F2',
+            brightBlack: '#6272A4',
+            brightRed: '#FF6E6E',
+            brightGreen: '#69FF94',
+            brightYellow: '#FFFFA5',
+            brightBlue: '#D6ACFF',
+            brightMagenta: '#FF92DF',
+            brightCyan: '#A4FFFF',
+            brightWhite: '#FFFFFF',
+          },
+        });
+
+        fitAddon = new FitAddon();
+        term.loadAddon(fitAddon);
+        term.open(terminalRef.current);
+
+        setTimeout(() => {
+          try {
+            if (fitAddon) fitAddon.fit();
+          } catch (e) {
+            console.error('Error fitting terminal:', e);
+          }
+        }, 0);
+
+        xtermRef.current = term;
+        fitAddonRef.current = fitAddon;
+
+        const wsUrl = API_BASE_URL.replace(/^http/, 'ws');
+        socket = io(`${wsUrl}/terminal`, {
+          transports: ['websocket', 'polling'],
+        });
+
+        socketRef.current = socket;
+
+        socket.on('connect', () => {
+          console.log('WebSocket connected');
+          connectionAttempts.current = 0;
+
+          const token = apiClient.getToken();
+          const termSize = fitAddon?.proposeDimensions();
+          socket?.emit('start_terminal', {
+            container_id: containerId,
+            token: token,
+            cols: termSize?.cols || 80,
+            rows: termSize?.rows || 24,
+          });
+        });
+
+        socket.on('connect_error', (error) => {
+          console.error('WebSocket connection error:', error);
+          connectionAttempts.current++;
+
+          if (connectionAttempts.current >= 2) {
+            onFallback('Failed to establish WebSocket connection. Network or server may be unavailable.');
+          }
+        });
+
+        socket.on('started', () => {
+          term?.write('\r\n*** Interactive Terminal Started ***\r\n');
+          term?.write('You can now use sudo, nano, vim, and other interactive commands.\r\n\r\n');
+        });
+
+        socket.on('output', (data: { data: string }) => {
+          term?.write(data.data);
+        });
+
+        socket.on('error', (data: { error: string }) => {
+          console.error('Terminal error:', data.error);
+          term?.write(`\r\n\x1b[31mError: ${data.error}\x1b[0m\r\n`);
+
+          const criticalErrors = ['Unauthorized', 'Cannot connect to Docker', 'Invalid session'];
+          if (criticalErrors.some(err => data.error.includes(err))) {
+            setTimeout(() => {
+              onFallback(`Interactive terminal failed: ${data.error}`);
+            }, 2000);
+          }
+        });
+
+        socket.on('exit', () => {
+          term?.write('\r\n\r\n*** Terminal Session Ended ***\r\n');
+        });
+
+        socket.on('disconnect', (reason) => {
+          console.log('WebSocket disconnected:', reason);
+
+          if (reason === 'transport error' || reason === 'transport close') {
+            onFallback('WebSocket connection lost unexpectedly.');
+          }
+        });
+
+        term.onData((data) => {
+          socket?.emit('input', { data });
+        });
+
+        const handleResize = () => {
+          try {
+            if (fitAddon) {
+              fitAddon.fit();
+              const termSize = fitAddon.proposeDimensions();
+              if (termSize) {
+                socket?.emit('resize', {
+                  cols: termSize.cols,
+                  rows: termSize.rows,
+                });
+              }
+            }
+          } catch (e) {
+            console.error('Error resizing terminal:', e);
+          }
+        };
+
+        window.addEventListener('resize', handleResize);
+
+        return () => {
+          window.removeEventListener('resize', handleResize);
+          if (term) term.dispose();
+          if (socket) socket.disconnect();
+        };
+      } catch (error) {
+        console.error('Failed to initialize terminal:', error);
+        onFallback('Failed to load terminal. Switching to simple mode.');
+      }
+    };
+
+    const cleanup = initTerminal();
+
+    return () => {
+      cleanup.then((cleanupFn) => {
+        if (cleanupFn) cleanupFn();
+      });
+      xtermRef.current = null;
+      socketRef.current = null;
+      fitAddonRef.current = null;
+    };
+  }, [open, containerId, isMobile, onFallback]);
+
+  const cleanup = () => {
+    if (socketRef.current) {
+      socketRef.current.disconnect();
+    }
+    if (xtermRef.current) {
+      xtermRef.current.dispose();
+    }
+  };
+
+  return {
+    terminalRef,
+    cleanup,
+  };
+}

frontend/lib/hooks/useLoginForm.ts

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAppDispatch, useAppSelector } from '@/lib/store/hooks';
+import { login, clearError } from '@/lib/store/authSlice';
+
+export function useLoginForm() {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [isShaking, setIsShaking] = useState(false);
+  const dispatch = useAppDispatch();
+  const { error, loading } = useAppSelector((state) => state.auth);
+  const router = useRouter();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    dispatch(clearError());
+
+    const result = await dispatch(login({ username, password }));
+
+    if (login.fulfilled.match(result)) {
+      router.push('/dashboard');
+    } else {
+      setIsShaking(true);
+      setTimeout(() => setIsShaking(false), 500);
+    }
+  };
+
+  return {
+    username,
+    setUsername,
+    password,
+    setPassword,
+    isShaking,
+    error,
+    loading,
+    handleSubmit,
+  };
+}

frontend/lib/hooks/useSimpleTerminal.ts

@@ -0,0 +1,74 @@
+import { useState, useRef, useEffect } from 'react';
+import { apiClient } from '@/lib/api';
+import { OutputLine } from '@/lib/interfaces/terminal';
+
+export function useSimpleTerminal(containerId: string) {
+  const [command, setCommand] = useState('');
+  const [output, setOutput] = useState<OutputLine[]>([]);
+  const [isExecuting, setIsExecuting] = useState(false);
+  const [workdir, setWorkdir] = useState('/');
+  const outputRef = useRef<HTMLDivElement>(null);
+
+  // Auto-scroll to bottom when output changes
+  useEffect(() => {
+    if (outputRef.current) {
+      outputRef.current.scrollTop = outputRef.current.scrollHeight;
+    }
+  }, [output]);
+
+  const executeCommand = async () => {
+    if (!command.trim()) return;
+
+    setIsExecuting(true);
+    setOutput((prev) => [...prev, {
+      type: 'command',
+      content: command,
+      workdir: workdir
+    }]);
+
+    try {
+      const result = await apiClient.executeCommand(containerId, command);
+
+      if (result.workdir) {
+        setWorkdir(result.workdir);
+      }
+
+      if (result.output && result.output.trim()) {
+        setOutput((prev) => [...prev, {
+          type: result.exit_code === 0 ? 'output' : 'error',
+          content: result.output
+        }]);
+      } else if (command.trim().startsWith('ls')) {
+        setOutput((prev) => [...prev, {
+          type: 'output',
+          content: '(empty directory)'
+        }]);
+      }
+    } catch (error) {
+      setOutput((prev) => [...prev, {
+        type: 'error',
+        content: `Error: ${error instanceof Error ? error.message : 'Unknown error'}`
+      }]);
+    } finally {
+      setIsExecuting(false);
+      setCommand('');
+    }
+  };
+
+  const reset = () => {
+    setOutput([]);
+    setCommand('');
+    setWorkdir('/');
+  };
+
+  return {
+    command,
+    setCommand,
+    output,
+    isExecuting,
+    workdir,
+    outputRef,
+    executeCommand,
+    reset,
+  };
+}

frontend/lib/hooks/useTerminalModal.ts

@@ -0,0 +1,24 @@
+import { useState } from 'react';
+import { Container } from '@/lib/api';
+
+export function useTerminalModal() {
+  const [selectedContainer, setSelectedContainer] = useState<Container | null>(null);
+  const [isTerminalOpen, setIsTerminalOpen] = useState(false);
+
+  const openTerminal = (container: Container) => {
+    setSelectedContainer(container);
+    setIsTerminalOpen(true);
+  };
+
+  const closeTerminal = () => {
+    setIsTerminalOpen(false);
+    setTimeout(() => setSelectedContainer(null), 300);
+  };
+
+  return {
+    selectedContainer,
+    isTerminalOpen,
+    openTerminal,
+    closeTerminal,
+  };
+}

frontend/lib/interfaces/container.ts

@@ -0,0 +1,35 @@
+import { Container } from '@/lib/api';
+
+export interface ContainerCardProps {
+  container: Container;
+  onOpenShell: () => void;
+  onContainerUpdate?: () => void;
+}
+
+export interface ContainerHeaderProps {
+  name: string;
+  image: string;
+  status: string;
+}
+
+export interface ContainerInfoProps {
+  id: string;
+  uptime: string;
+}
+
+export interface ContainerActionsProps {
+  status: string;
+  isLoading: boolean;
+  onStart: () => void;
+  onStop: () => void;
+  onRestart: () => void;
+  onRemove: () => void;
+  onOpenShell: () => void;
+}
+
+export interface DeleteConfirmDialogProps {
+  open: boolean;
+  containerName: string;
+  onClose: () => void;
+  onConfirm: () => void;
+}

frontend/lib/interfaces/dashboard.ts

@@ -0,0 +1,7 @@
+export interface DashboardHeaderProps {
+  containerCount: number;
+  isMobile: boolean;
+  isRefreshing: boolean;
+  onRefresh: () => void;
+  onLogout: () => void;
+}

frontend/lib/interfaces/terminal.ts

@@ -0,0 +1,61 @@
+export interface OutputLine {
+  type: 'command' | 'output' | 'error';
+  content: string;
+  workdir?: string;
+}
+
+export interface TerminalModalProps {
+  open: boolean;
+  onClose: () => void;
+  containerName: string;
+  containerId: string;
+}
+
+export interface TerminalHeaderProps {
+  containerName: string;
+  mode: 'simple' | 'interactive';
+  interactiveFailed: boolean;
+  onModeChange: (event: React.MouseEvent<HTMLElement>, newMode: 'simple' | 'interactive' | null) => void;
+  onClose: () => void;
+}
+
+export interface InteractiveTerminalProps {
+  terminalRef: React.RefObject<HTMLDivElement | null>;
+}
+
+export interface SimpleTerminalProps {
+  output: OutputLine[];
+  command: string;
+  workdir: string;
+  isExecuting: boolean;
+  isMobile: boolean;
+  containerName: string;
+  outputRef: React.RefObject<HTMLDivElement | null>;
+  onCommandChange: (value: string) => void;
+  onExecute: () => void;
+  onKeyPress: (e: React.KeyboardEvent) => void;
+}
+
+export interface TerminalOutputProps {
+  output: OutputLine[];
+  containerName: string;
+  outputRef: React.RefObject<HTMLDivElement | null>;
+}
+
+export interface CommandInputProps {
+  command: string;
+  workdir: string;
+  isExecuting: boolean;
+  isMobile: boolean;
+  containerName: string;
+  onCommandChange: (value: string) => void;
+  onExecute: () => void;
+  onKeyPress: (e: React.KeyboardEvent) => void;
+}
+
+export interface FallbackNotificationProps {
+  show: boolean;
+  reason: string;
+  onClose: () => void;
+  onRetry: () => void;
+}

frontend/lib/store/__tests__/authSlice.test.ts

@@ -0,0 +1,134 @@
+import { configureStore } from '@reduxjs/toolkit';
+import authReducer, {
+  login,
+  logout,
+  initAuth,
+  setUnauthenticated,
+} from '../authSlice';
+import * as apiClient from '@/lib/api';
+
+jest.mock('@/lib/api');
+
+describe('authSlice', () => {
+  let store: ReturnType<typeof configureStore>;
+
+  beforeEach(() => {
+    store = configureStore({
+      reducer: {
+        auth: authReducer,
+      },
+    });
+    jest.clearAllMocks();
+    localStorage.clear();
+  });
+
+  describe('initial state', () => {
+    it('has correct initial state', () => {
+      const state = store.getState().auth;
+      expect(state).toEqual({
+        isAuthenticated: false,
+        loading: true,
+        username: null,
+        error: null,
+      });
+    });
+  });
+
+  describe('setUnauthenticated', () => {
+    it('sets auth state to unauthenticated', () => {
+      store.dispatch(setUnauthenticated());
+      const state = store.getState().auth;
+      expect(state.isAuthenticated).toBe(false);
+      expect(state.username).toBeNull();
+    });
+  });
+
+  describe('login async thunk', () => {
+    it('handles successful login', async () => {
+      const mockLoginResponse = { success: true, username: 'testuser' };
+      (apiClient.apiClient.login as jest.Mock).mockResolvedValue(mockLoginResponse);
+
+      await store.dispatch(login({ username: 'testuser', password: 'password' }));
+
+      const state = store.getState().auth;
+      expect(state.isAuthenticated).toBe(true);
+      expect(state.username).toBe('testuser');
+      expect(state.loading).toBe(false);
+    });
+
+    it('handles login failure', async () => {
+      (apiClient.apiClient.login as jest.Mock).mockRejectedValue(
+        new Error('Invalid credentials')
+      );
+
+      await store.dispatch(login({ username: 'testuser', password: 'wrong' }));
+
+      const state = store.getState().auth;
+      expect(state.isAuthenticated).toBe(false);
+      expect(state.username).toBeNull();
+      expect(state.loading).toBe(false);
+      expect(state.error).toBeTruthy();
+    });
+
+    it('sets loading state during login', () => {
+      (apiClient.apiClient.login as jest.Mock).mockImplementation(
+        () => new Promise(() => {})
+      );
+
+      store.dispatch(login({ username: 'testuser', password: 'password' }));
+
+      const state = store.getState().auth;
+      expect(state.loading).toBe(true);
+    });
+  });
+
+  describe('logout async thunk', () => {
+    it('clears authentication state on logout', async () => {
+      (apiClient.apiClient.logout as jest.Mock).mockResolvedValue({});
+
+      await store.dispatch(logout());
+
+      const state = store.getState().auth;
+      expect(state.isAuthenticated).toBe(false);
+      expect(state.username).toBeNull();
+    });
+  });
+
+  describe('initAuth async thunk', () => {
+    it('restores auth state when token is valid', async () => {
+      (apiClient.apiClient.getToken as jest.Mock).mockReturnValue('valid-token');
+      (apiClient.apiClient.getUsername as jest.Mock).mockReturnValue('testuser');
+      (apiClient.apiClient.getContainers as jest.Mock).mockResolvedValue([]);
+
+      await store.dispatch(initAuth());
+
+      const state = store.getState().auth;
+      expect(state.isAuthenticated).toBe(true);
+      expect(state.username).toBe('testuser');
+    });
+
+    it('clears invalid token', async () => {
+      (apiClient.apiClient.getToken as jest.Mock).mockReturnValue('invalid-token');
+      (apiClient.apiClient.getContainers as jest.Mock).mockRejectedValue(
+        new Error('Unauthorized')
+      );
+
+      await store.dispatch(initAuth());
+
+      const state = store.getState().auth;
+      expect(state.isAuthenticated).toBe(false);
+      expect(state.username).toBeNull();
+      expect(apiClient.apiClient.setToken).toHaveBeenCalledWith(null);
+    });
+
+    it('handles no token present', async () => {
+      (apiClient.apiClient.getToken as jest.Mock).mockReturnValue(null);
+
+      await store.dispatch(initAuth());
+
+      const state = store.getState().auth;
+      expect(state.isAuthenticated).toBe(false);
+      expect(state.username).toBeNull();
+    });
+  });
+});

frontend/lib/store/authErrorHandler.ts

@@ -0,0 +1,22 @@
+// Global auth error handler
+// This can be called from API client when auth errors occur
+let authErrorCallback: (() => void) | null = null;
+let authErrorHandled = false;
+
+export const setAuthErrorCallback = (callback: () => void) => {
+  authErrorCallback = callback;
+  authErrorHandled = false;
+};
+
+export const triggerAuthError = () => {
+  if (!authErrorCallback) {
+    return;
+  }
+
+  if (authErrorHandled) {
+    return;
+  }
+
+  authErrorHandled = true;
+  authErrorCallback();
+};

frontend/lib/store/authSlice.ts

@@ -0,0 +1,119 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
+import { apiClient } from '../api';
+
+interface AuthState {
+  isAuthenticated: boolean;
+  username: string | null;
+  loading: boolean;
+  error: string | null;
+}
+
+const initialState: AuthState = {
+  isAuthenticated: false,
+  username: null,
+  loading: true,
+  error: null,
+};
+
+// Async thunks
+export const initAuth = createAsyncThunk('auth/init', async () => {
+  const token = apiClient.getToken();
+  if (token) {
+    // Validate token by fetching containers
+    try {
+      await apiClient.getContainers();
+      const username = apiClient.getUsername();
+      return { isAuthenticated: true, username };
+    } catch (error) {
+      // Token is invalid, clear it
+      apiClient.setToken(null);
+      return { isAuthenticated: false, username: null };
+    }
+  }
+  return { isAuthenticated: false, username: null };
+});
+
+export const login = createAsyncThunk(
+  'auth/login',
+  async ({ username, password }: { username: string; password: string }, { rejectWithValue }) => {
+    try {
+      const response = await apiClient.login(username, password);
+      if (response.success) {
+        return { username: response.username || username };
+      }
+      return rejectWithValue(response.message || 'Login failed');
+    } catch (error) {
+      return rejectWithValue('Login failed. Please try again.');
+    }
+  }
+);
+
+export const logout = createAsyncThunk('auth/logout', async () => {
+  await apiClient.logout();
+});
+
+const authSlice = createSlice({
+  name: 'auth',
+  initialState,
+  reducers: {
+    clearError: (state) => {
+      state.error = null;
+    },
+    setUnauthenticated: (state) => {
+      state.isAuthenticated = false;
+      state.username = null;
+      apiClient.setToken(null);
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      // Init auth
+      .addCase(initAuth.pending, (state) => {
+        state.loading = true;
+      })
+      .addCase(initAuth.fulfilled, (state, action) => {
+        state.loading = false;
+        state.isAuthenticated = action.payload.isAuthenticated;
+        state.username = action.payload.username;
+      })
+      .addCase(initAuth.rejected, (state) => {
+        state.loading = false;
+        state.isAuthenticated = false;
+        state.username = null;
+      })
+      // Login
+      .addCase(login.pending, (state) => {
+        state.loading = true;
+        state.error = null;
+      })
+      .addCase(login.fulfilled, (state, action) => {
+        state.loading = false;
+        state.isAuthenticated = true;
+        state.username = action.payload.username;
+        state.error = null;
+      })
+      .addCase(login.rejected, (state, action) => {
+        state.loading = false;
+        state.isAuthenticated = false;
+        state.error = action.payload as string;
+      })
+      // Logout
+      .addCase(logout.pending, (state) => {
+        state.loading = true;
+      })
+      .addCase(logout.fulfilled, (state) => {
+        state.loading = false;
+        state.isAuthenticated = false;
+        state.username = null;
+      })
+      .addCase(logout.rejected, (state) => {
+        // Even if logout fails, clear local state
+        state.loading = false;
+        state.isAuthenticated = false;
+        state.username = null;
+      });
+  },
+});
+
+export const { clearError, setUnauthenticated } = authSlice.actions;
+export default authSlice.reducer;

frontend/lib/store/hooks.ts

@@ -0,0 +1,5 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import type { RootState, AppDispatch } from './store';
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

frontend/lib/store/store.ts

@@ -0,0 +1,11 @@
+import { configureStore } from '@reduxjs/toolkit';
+import authReducer from './authSlice';
+
+export const store = configureStore({
+  reducer: {
+    auth: authReducer,
+  },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;

frontend/lib/theme.tsx

@@ -85,9 +85,18 @@ const theme = createTheme({
           borderRadius: '6px',
           padding: '8px 16px',
           transition: 'all 0.1s ease',
+          '&:hover': {
+            boxShadow: '0 0 8px rgba(56, 178, 172, 0.3)',
+          },
           '&:active': {
             transform: 'scale(0.98)',
           },
+          '&.Mui-disabled': {
+            opacity: 0.5,
+            backgroundColor: 'rgba(74, 85, 104, 0.3)',
+            borderColor: 'rgba(74, 85, 104, 0.5)',
+            color: 'rgba(247, 250, 252, 0.5)',
+          },
         },
       },
     },

frontend/lib/utils/__tests__/terminal.test.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { formatPrompt, highlightCommand } from '../terminal';
+import { OutputLine } from '@/lib/interfaces/terminal';
+
+describe('formatPrompt', () => {
+  it('formats a simple prompt correctly', () => {
+    const result = formatPrompt('test-container', '/home/user');
+    expect(result).toBe('root@test-container:/home/user#');
+  });
+
+  it('truncates long directory paths', () => {
+    const longPath = '/very/long/directory/path/that/is/over/thirty/characters';
+    const result = formatPrompt('test-container', longPath);
+    expect(result).toContain('...');
+    expect(result).toContain('characters');
+    expect(result).toMatch(/^root@test-container:\.\.\.\/characters#$/);
+  });
+
+  it('handles root directory', () => {
+    const result = formatPrompt('test-container', '/');
+    expect(result).toBe('root@test-container:/#');
+  });
+
+  it('handles container names with special characters', () => {
+    const result = formatPrompt('my-container-123', '/app');
+    expect(result).toBe('root@my-container-123:/app#');
+  });
+});
+
+describe('highlightCommand', () => {
+  it('renders command output with proper formatting', () => {
+    const line: OutputLine = {
+      type: 'command',
+      content: 'ls -la',
+      workdir: '/home/user',
+    };
+
+    const { container } = render(highlightCommand(line, 'test-container'));
+    expect(container.textContent).toContain('root@test-container:/home/user#');
+    expect(container.textContent).toContain('ls');
+    expect(container.textContent).toContain('-la');
+  });
+
+  it('renders command with no arguments', () => {
+    const line: OutputLine = {
+      type: 'command',
+      content: 'pwd',
+      workdir: '/app',
+    };
+
+    const { container } = render(highlightCommand(line, 'test-container'));
+    expect(container.textContent).toContain('pwd');
+  });
+
+  it('renders error output with red color', () => {
+    const line: OutputLine = {
+      type: 'error',
+      content: 'Error: command not found',
+    };
+
+    const { container } = render(highlightCommand(line, 'test-container'));
+    const errorDiv = container.querySelector('div');
+    expect(errorDiv).toHaveStyle({ color: '#FF5555' });
+    expect(container.textContent).toContain('Error: command not found');
+  });
+
+  it('renders regular output', () => {
+    const line: OutputLine = {
+      type: 'output',
+      content: 'Hello world',
+    };
+
+    const { container } = render(highlightCommand(line, 'test-container'));
+    expect(container.textContent).toContain('Hello world');
+  });
+
+  it('preserves whitespace in output', () => {
+    const line: OutputLine = {
+      type: 'output',
+      content: 'Line 1\nLine 2',
+    };
+
+    const { container } = render(highlightCommand(line, 'test-container'));
+    const outputDiv = container.querySelector('div');
+    expect(outputDiv).toHaveStyle({ whiteSpace: 'pre-wrap' });
+  });
+
+  it('uses default workdir when not provided', () => {
+    const line: OutputLine = {
+      type: 'command',
+      content: 'echo test',
+    };
+
+    const { container } = render(highlightCommand(line, 'test-container'));
+    expect(container.textContent).toContain('root@test-container:/#');
+  });
+});

frontend/lib/utils/terminal.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { OutputLine } from '@/lib/interfaces/terminal';
+
+export const formatPrompt = (containerName: string, workdir: string): string => {
+  let displayDir = workdir;
+  if (workdir.length > 30) {
+    const parts = workdir.split('/');
+    displayDir = '.../' + parts[parts.length - 1];
+  }
+  return `root@${containerName}:${displayDir}#`;
+};
+
+export const highlightCommand = (line: OutputLine, containerName: string): React.ReactElement => {
+  if (line.type === 'command') {
+    const prompt = formatPrompt(containerName, line.workdir || '/');
+    const parts = line.content.split(' ');
+    const cmd = parts[0];
+    const args = parts.slice(1).join(' ');
+
+    return (
+      <div style={{ marginBottom: '4px' }}>
+        <span style={{ color: '#8BE9FD', fontWeight: 'bold' }}>{prompt}</span>
+        {' '}
+        <span style={{ color: '#50FA7B', fontWeight: 'bold' }}>{cmd}</span>
+        {args && <span style={{ color: '#F8F8F2' }}> {args}</span>}
+      </div>
+    );
+  } else if (line.type === 'error') {
+    return (
+      <div style={{ color: '#FF5555', marginBottom: '2px' }}>
+        {line.content}
+      </div>
+    );
+  } else {
+    return (
+      <div style={{ color: '#F8F8F2', marginBottom: '2px', whiteSpace: 'pre-wrap' }}>
+        {line.content}
+      </div>
+    );
+  }
+};

frontend/package.json

@@ -6,27 +6,38 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint"
+    "lint": "eslint",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.3.7",
     "@mui/material": "^7.3.7",
-    "@xterm/xterm": "^5.5.0",
+    "@reduxjs/toolkit": "^2.11.2",
     "@xterm/addon-fit": "^0.10.0",
+    "@xterm/xterm": "^5.5.0",
     "next": "16.1.5",
     "react": "19.2.3",
     "react-dom": "19.2.3",
+    "react-redux": "^9.2.0",
     "socket.io-client": "^4.8.1"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^30.0.0",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "16.1.1",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
     "tailwindcss": "^4",
     "typescript": "^5"
   }