separation of ui and static

apps/ui/Dockerfile

@@ -1,49 +1,41 @@
-# UI Service Dockerfile
-# FastAPI + Jinja2 + HTMX Dashboard
+# UI Service Dockerfile (Application only, without static files)
 
 FROM python:3.14-alpine
 
-# Prevent Python from writing .pyc files and enable unbuffered output
 ENV PYTHONDONTWRITEBYTECODE=1 \
     PYTHONUNBUFFERED=1 \
     UI_PORT=8002 \
     API_BASE=http://api:8001 \
-    BASE_PATH=""
+    BASE_PATH="" \
+    STATIC_BASE=http://static:8080
 
-# Create non-root user
 RUN addgroup -g 10001 -S app && \
     adduser -u 10001 -S app -G app
 
-# Set working directory
 WORKDIR /app
 
-# Install system dependencies
 RUN apk add --no-cache \
     curl \
     gcc \
     musl-dev \
     linux-headers
 
-# Install Python dependencies
 COPY apps/ui/requirements.txt /app/requirements.txt
 RUN pip install --no-cache-dir -r requirements.txt
 
-# Copy application code
+# Copy only Python code and templates, but exclude static assets
 COPY apps/__init__.py /app/apps/__init__.py
-COPY apps/ui/ /app/apps/ui/
+COPY apps/ui/__init__.py /app/apps/ui/__init__.py
+COPY apps/ui/main.py /app/apps/ui/main.py
+COPY apps/ui/api_client.py /app/apps/ui/api_client.py
+COPY apps/ui/templates/ /app/apps/ui/templates/
 
-# Change ownership to app user
 RUN chown -R app:app /app
-
-# Switch to non-root user
 USER app
 
-# Health check
 HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
     CMD curl -f http://localhost:${UI_PORT}/health || exit 1
 
-# Expose port
 EXPOSE 8002
 
-# Run application
 CMD ["python", "-m", "uvicorn", "apps.ui.main:app", "--host", "0.0.0.0", "--port", "8002"]

apps/ui/main.py

@@ -16,9 +16,11 @@ logger = logging.getLogger(__name__)
 # Read configuration from environment variables
 API_BASE = os.getenv("API_BASE", "http://localhost:8001")
 BASE_PATH = os.getenv("BASE_PATH", "")  # e.g., "/ui" for reverse proxy
+STATIC_BASE = os.getenv("STATIC_BASE", "/static")
 
 print(f"UI using API_BASE: {API_BASE}")
 print(f"UI using BASE_PATH: {BASE_PATH}")
+print(f"UI using STATIC_BASE: {STATIC_BASE}")
 
 def api_url(path: str) -> str:
     """Helper function to construct API URLs.
@@ -43,6 +45,9 @@ app = FastAPI(
 templates_dir = Path(__file__).parent / "templates"
 templates = Jinja2Templates(directory=str(templates_dir))
 
+# Make STATIC_BASE available in all templates
+templates.env.globals["STATIC_BASE"] = STATIC_BASE
+
 # Setup static files
 static_dir = Path(__file__).parent / "static"
 static_dir.mkdir(exist_ok=True)
@@ -98,7 +103,8 @@ async def health() -> JSONResponse:
         "status": "ok",
         "service": "ui",
         "api_base": API_BASE,
-        "base_path": BASE_PATH
+        "base_path": BASE_PATH,
+        "static_base": STATIC_BASE,
     })
 
 
@@ -127,7 +133,7 @@ async def rooms(request: Request) -> HTMLResponse:
     """
     return templates.TemplateResponse("rooms.html", {
         "request": request,
-        "api_base": API_BASE
+        "api_base": API_BASE,
     })
 
 
@@ -145,7 +151,7 @@ async def room_detail(request: Request, room_name: str) -> HTMLResponse:
     return templates.TemplateResponse("room.html", {
         "request": request,
         "api_base": API_BASE,
-        "room_name": room_name
+        "room_name": room_name,
     })
 
 

apps/ui/static/README.md

@@ -1,301 +0,0 @@
-# Home Automation API Client
-
-Wiederverwendbare JavaScript-API-Client-Bibliothek für das Home Automation UI.
-
-## Installation
-
-Füge die folgenden Script-Tags in deine HTML-Seiten ein:
-
-```html
-<script src="/static/types.js"></script>
-<script src="/static/api-client.js"></script>
-```
-
-## Konfiguration
-
-Der API-Client nutzt `window.API_BASE`, das vom Backend gesetzt wird:
-
-```javascript
-window.API_BASE = '{{ api_base }}';  // Jinja2 template
-```
-
-## Verwendung
-
-### Globale Instanz
-
-Der API-Client erstellt automatisch eine globale Instanz `window.apiClient`:
-
-```javascript
-// Layout abrufen
-const layout = await window.apiClient.getLayout();
-
-// Geräte abrufen
-const devices = await window.apiClient.getDevices();
-
-// Gerätestatus abrufen
-const state = await window.apiClient.getDeviceState('kitchen_light');
-
-// Gerätesteuerung
-await window.apiClient.setDeviceState('kitchen_light', 'light', {
-    power: true,
-    brightness: 80
-});
-```
-
-### Verfügbare Methoden
-
-#### `getLayout(): Promise<Layout>`
-Lädt die Layout-Daten (Räume und ihre Geräte).
-
-```javascript
-const layout = await window.apiClient.getLayout();
-// { rooms: [{name: "Küche", devices: ["kitchen_light", ...]}, ...] }
-```
-
-#### `getDevices(): Promise<Device[]>`
-Lädt alle Geräte mit ihren Features.
-
-```javascript
-const devices = await window.apiClient.getDevices();
-// [{device_id: "...", name: "...", type: "light", features: {...}}, ...]
-```
-
-#### `getDeviceState(deviceId): Promise<DeviceState>`
-Lädt den aktuellen Status eines Geräts.
-
-```javascript
-const state = await window.apiClient.getDeviceState('kitchen_light');
-// {power: true, brightness: 80, ...}
-```
-
-#### `getAllStates(): Promise<Object>`
-Lädt alle Gerätestatus auf einmal.
-
-```javascript
-const states = await window.apiClient.getAllStates();
-// {"kitchen_light": {power: true, ...}, "thermostat_1": {...}, ...}
-```
-
-#### `setDeviceState(deviceId, type, payload): Promise<void>`
-Sendet einen Befehl an ein Gerät.
-
-```javascript
-// Licht einschalten
-await window.apiClient.setDeviceState('kitchen_light', 'light', {
-    power: true,
-    brightness: 80
-});
-
-// Thermostat einstellen
-await window.apiClient.setDeviceState('thermostat_1', 'thermostat', {
-    target_temp: 22.5
-});
-
-// Rollladen steuern
-await window.apiClient.setDeviceState('cover_1', 'cover', {
-    position: 50
-});
-```
-
-#### `getDeviceRoom(deviceId): Promise<{room: string}>`
-Ermittelt den Raum eines Geräts.
-
-```javascript
-const { room } = await window.apiClient.getDeviceRoom('kitchen_light');
-// {room: "Küche"}
-```
-
-#### `getScenes(): Promise<Scene[]>`
-Lädt alle verfügbaren Szenen.
-
-```javascript
-const scenes = await window.apiClient.getScenes();
-```
-
-#### `activateScene(sceneId): Promise<void>`
-Aktiviert eine Szene.
-
-```javascript
-await window.apiClient.activateScene('evening');
-```
-
-### Realtime-Updates (SSE)
-
-#### `connectRealtime(onEvent, onError): EventSource`
-Verbindet sich mit dem SSE-Stream für Live-Updates.
-
-```javascript
-window.apiClient.connectRealtime(
-    (event) => {
-        console.log('Update:', event.device_id, event.state);
-        // event = {device_id: "...", type: "state", state: {...}}
-    },
-    (error) => {
-        console.error('Connection error:', error);
-    }
-);
-```
-
-#### `onDeviceUpdate(deviceId, callback): Function`
-Registriert einen Listener für spezifische Geräte-Updates.
-
-```javascript
-// Für ein bestimmtes Gerät
-const unsubscribe = window.apiClient.onDeviceUpdate('kitchen_light', (event) => {
-    console.log('Kitchen light changed:', event.state);
-    updateUI(event.state);
-});
-
-// Für alle Geräte
-const unsubscribeAll = window.apiClient.onDeviceUpdate(null, (event) => {
-    console.log('Any device changed:', event.device_id, event.state);
-});
-
-// Später: Listener entfernen
-unsubscribe();
-```
-
-#### `disconnectRealtime(): void`
-Trennt die SSE-Verbindung und entfernt alle Listener.
-
-```javascript
-window.apiClient.disconnectRealtime();
-```
-
-### Helper-Methoden
-
-#### `findDevice(devices, deviceId): Device|null`
-Findet ein Gerät in einem Array.
-
-```javascript
-const devices = await window.apiClient.getDevices();
-const device = window.apiClient.findDevice(devices, 'kitchen_light');
-```
-
-#### `findRoom(layout, roomName): Room|null`
-Findet einen Raum im Layout.
-
-```javascript
-const layout = await window.apiClient.getLayout();
-const room = window.apiClient.findRoom(layout, 'Küche');
-```
-
-#### `getDevicesForRoom(layout, devices, roomName): Device[]`
-Gibt alle Geräte eines Raums zurück.
-
-```javascript
-const layout = await window.apiClient.getLayout();
-const devices = await window.apiClient.getDevices();
-const kitchenDevices = window.apiClient.getDevicesForRoom(layout, devices, 'Küche');
-```
-
-#### `api(path): string`
-Konstruiert eine vollständige API-URL.
-
-```javascript
-const url = window.apiClient.api('/devices');
-// "http://172.19.1.11:8001/devices"
-```
-
-### Backward Compatibility
-
-Die globale `api()` Funktion ist weiterhin verfügbar:
-
-```javascript
-function api(url) {
-    return window.apiClient.api(url);
-}
-```
-
-## Typen (JSDoc)
-
-Die Datei `types.js` enthält JSDoc-Definitionen für alle API-Typen:
-
-- `Room` - Raum mit Geräten
-- `Layout` - Layout-Struktur
-- `Device` - Gerätedaten
-- `DeviceFeatures` - Geräte-Features
-- `DeviceState` - Gerätestatus (Light, Thermostat, Contact, etc.)
-- `RealtimeEvent` - SSE-Event-Format
-- `Scene` - Szenen-Definition
-- `*Payload` - Command-Payloads für verschiedene Gerätetypen
-
-Diese ermöglichen IDE-Autocomplete und Type-Checking in modernen Editoren (VS Code, WebStorm).
-
-## Beispiel: Vollständige Seite
-
-```html
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <title>My Page</title>
-    <script src="/static/types.js"></script>
-    <script src="/static/api-client.js"></script>
-</head>
-<body>
-    <div id="status"></div>
-    <button id="toggle">Toggle Light</button>
-
-    <script>
-        window.API_BASE = 'http://172.19.1.11:8001';
-        const deviceId = 'kitchen_light';
-
-        async function init() {
-            // Load initial state
-            const state = await window.apiClient.getDeviceState(deviceId);
-            updateUI(state);
-
-            // Listen for updates
-            window.apiClient.onDeviceUpdate(deviceId, (event) => {
-                updateUI(event.state);
-            });
-
-            // Connect to realtime
-            window.apiClient.connectRealtime((event) => {
-                console.log('Event:', event);
-            });
-
-            // Handle button clicks
-            document.getElementById('toggle').onclick = async () => {
-                const currentState = await window.apiClient.getDeviceState(deviceId);
-                await window.apiClient.setDeviceState(deviceId, 'light', {
-                    power: !currentState.power
-                });
-            };
-        }
-
-        function updateUI(state) {
-            document.getElementById('status').textContent = 
-                state.power ? 'ON' : 'OFF';
-        }
-
-        init();
-    </script>
-</body>
-</html>
-```
-
-## Error Handling
-
-Alle API-Methoden werfen Exceptions bei Fehlern:
-
-```javascript
-try {
-    const state = await window.apiClient.getDeviceState('invalid_id');
-} catch (error) {
-    console.error('API error:', error);
-    showErrorMessage(error.message);
-}
-```
-
-## Auto-Reconnect
-
-Der SSE-Client versucht automatisch, nach 5 Sekunden wieder zu verbinden, wenn die Verbindung abbricht.
-
-## Verwendete Technologien
-
-- **Fetch API** - Für HTTP-Requests
-- **EventSource** - Für Server-Sent Events
-- **JSDoc** - Für Type Definitions
-- **ES6+** - Modern JavaScript (Class, async/await, etc.)

apps/ui/static/api-client.js

@@ -1,290 +0,0 @@
-/**
- * Home Automation API Client
- * 
- * Provides a unified interface to interact with the backend API.
- * All functions use the global window.API_BASE configuration.
- */
-
-class HomeAutomationClient {
-    /**
-     * Get layout info for a specific device
-     * @param {string} deviceId - Device ID
-     * @returns {Promise<object>} Layout info
-     */
-    async getDeviceLayout(deviceId) {
-        return await this.fetch(this.api(`/devices/${deviceId}/layout`));
-    }
-    constructor() {
-        this.eventSource = null;
-        this.eventListeners = [];
-    }
-
-    /**
-     * Helper to construct full API URLs
-     * Reads window.API_BASE at runtime to support dynamic configuration
-     * @param {string} path - API path (e.g., '/devices')
-     * @returns {string} Full URL
-     */
-    api(path) {
-        const baseUrl = window.API_BASE || '';
-        return `${baseUrl}${path}`;
-    }
-
-    /**
-     * Generic fetch wrapper with error handling
-     * @param {string} url - URL to fetch
-     * @param {object} options - Fetch options
-     * @returns {Promise<any>} Response data
-     */
-    async fetch(url, options = {}) {
-        try {
-            const response = await fetch(url, {
-                ...options,
-                headers: {
-                    'Content-Type': 'application/json',
-                    ...options.headers
-                }
-            });
-
-            if (!response.ok) {
-                throw new Error(`API error: ${response.status} ${response.statusText}`);
-            }
-
-            return await response.json();
-        } catch (error) {
-            console.error('API request failed:', error);
-            throw error;
-        }
-    }
-
-    /**
-     * Get layout data (rooms and their devices)
-     * @returns {Promise<{rooms: Array<{name: string, devices: string[]}>}>}
-     */
-    async getLayout() {
-        return await this.fetch(this.api('/layout'));
-    }
-
-    /**
-     * Get all devices with their features
-     * @returns {Promise<Array<{device_id: string, name: string, type: string, features: object}>>}
-     */
-    async getDevices() {
-        return await this.fetch(this.api('/devices'));
-    }
-
-    async getDevice(deviceId) {
-        return await this.fetch(this.api(`/devices/${deviceId}`));
-    }
-
-    /**
-     * Get current state of a specific device
-     * @param {string} deviceId - Device ID
-     * @returns {Promise<object>} Device state
-     */
-    async getDeviceState(deviceId) {
-        return await this.fetch(this.api(`/devices/${deviceId}/state`));
-    }
-
-    /**
-     * Get all device states at once
-     * @returns {Promise<object>} Map of device_id to state
-     */
-    async getAllStates() {
-        return await this.fetch(this.api('/devices/states'));
-    }
-
-    /**
-     * Send a command to a device
-     * @param {string} deviceId - Device ID
-     * @param {string} type - Device type (light, thermostat, etc.)
-     * @param {object} payload - Command payload
-     * @returns {Promise<void>}
-     */
-    async setDeviceState(deviceId, type, payload) {
-        const requestBody = { type, payload };
-        console.log('API setDeviceState request:', requestBody);
-        await fetch(this.api(`/devices/${deviceId}/set`), {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(requestBody)
-        });
-    }
-
-    /**
-     * Get room information for a device
-     * @param {string} deviceId - Device ID
-     * @returns {Promise<{room: string}>}
-     */
-    async getDeviceRoom(deviceId) {
-        return await this.fetch(this.api(`/devices/${deviceId}/room`));
-    }
-
-    /**
-     * Get all available scenes
-     * @returns {Promise<Array<{scene_id: string, name: string, devices: object}>>}
-     */
-    async getScenes() {
-        return await this.fetch(this.api('/scenes'));
-    }
-
-    /**
-     * Activate a scene
-     * @param {string} sceneId - Scene ID
-     * @returns {Promise<void>}
-     */
-    async activateScene(sceneId) {
-        await fetch(this.api(`/scenes/${sceneId}/activate`), {
-            method: 'POST'
-        });
-    }
-
-    /**
-     * Connect to realtime event stream (SSE)
-     * @param {Function} onEvent - Callback function(event)
-     * @param {Function} onError - Error callback (optional)
-     * @returns {EventSource} EventSource instance
-     */
-    connectRealtime(onEvent, onError = null) {
-        if (this.eventSource) {
-            this.eventSource.close();
-        }
-
-        const realtimeUrl = this.api('/realtime');
-        console.log('Connecting to SSE endpoint:', realtimeUrl);
-        this.eventSource = new EventSource(realtimeUrl);
-
-        this.eventSource.onmessage = (event) => {
-            console.log('Raw SSE event received:', event.data);
-            try {
-                const data = JSON.parse(event.data);
-                console.log('Parsed SSE data:', data);
-                
-                // Normalize event format: convert API format to unified format
-                const normalizedEvent = {
-                    device_id: data.device_id,
-                    type: data.type,
-                    state: data.payload || data.state  // Support both formats
-                };
-                
-                console.log('Normalized SSE event:', normalizedEvent);
-                onEvent(normalizedEvent);
-                
-                // Notify all registered listeners
-                this.eventListeners.forEach(listener => {
-                    if (!listener.deviceId || listener.deviceId === normalizedEvent.device_id) {
-                        listener.callback(normalizedEvent);
-                    }
-                });
-            } catch (error) {
-                console.error('Failed to parse SSE event:', error, 'Raw data:', event.data);
-            }
-        };
-
-        this.eventSource.onopen = (event) => {
-            console.log('SSE connection opened:', event);
-        };
-
-        this.eventSource.onerror = (error) => {
-            console.error('SSE connection error:', error);
-            console.log('EventSource readyState:', this.eventSource.readyState);
-            if (onError) {
-                onError(error);
-            }
-            
-            // Auto-reconnect after 5 seconds
-            setTimeout(() => {
-                if (this.eventSource) {
-                    this.eventSource.close();
-                    this.connectRealtime(onEvent, onError);
-                }
-            }, 5000);
-        };
-
-        return this.eventSource;
-    }
-
-    /**
-     * Register a listener for specific device updates
-     * @param {string|null} deviceId - Device ID or null for all devices
-     * @param {Function} callback - Callback function(event)
-     * @returns {Function} Unsubscribe function
-     */
-    onDeviceUpdate(deviceId, callback) {
-        const listener = { deviceId, callback };
-        this.eventListeners.push(listener);
-
-        // Return unsubscribe function
-        return () => {
-            const index = this.eventListeners.indexOf(listener);
-            if (index > -1) {
-                this.eventListeners.splice(index, 1);
-            }
-        };
-    }
-
-    /**
-     * Disconnect from realtime stream
-     */
-    disconnectRealtime() {
-        if (this.eventSource) {
-            this.eventSource.close();
-            this.eventSource = null;
-        }
-        this.eventListeners = [];
-    }
-
-    /**
-     * Helper: Get device by ID from devices array
-     * @param {Array} devices - Devices array
-     * @param {string} deviceId - Device ID to find
-     * @returns {object|null} Device object or null
-     */
-    findDevice(devices, deviceId) {
-        return devices.find(d => d.device_id === deviceId) || null;
-    }
-
-    /**
-     * Helper: Get room by name from layout
-     * @param {object} layout - Layout object
-     * @param {string} roomName - Room name to find
-     * @returns {object|null} Room object or null
-     */
-    findRoom(layout, roomName) {
-        return layout.rooms.find(r => r.name === roomName) || null;
-    }
-
-    /**
-     * Helper: Get devices for a specific room
-     * @param {object} layout - Layout object
-     * @param {Array} devices - Devices array
-     * @param {string} roomName - Room name
-     * @returns {Array} Array of device objects
-     */
-    getDevicesForRoom(layout, devices, roomName) {
-        const room = this.findRoom(layout, roomName);
-        if (!room) return [];
-
-        const deviceMap = {};
-        devices.forEach(d => deviceMap[d.device_id] = d);
-
-        // Extract device IDs from room.devices (they are objects with device_id property)
-        const deviceIds = room.devices.map(d => d.device_id || d);
-        
-        return deviceIds
-            .map(id => deviceMap[id])
-            .filter(d => d != null);
-    }
-}
-
-// Create global instance
-window.apiClient = new HomeAutomationClient();
-
-/**
- * Convenience function for backward compatibility
- */
-function api(url) {
-    return window.apiClient.api(url);
-}

apps/ui/static/apple-touch-icon.svg

@@ -1,4 +0,0 @@
-<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="180" height="180" rx="40" fill="#667EEA"/>
-<text x="90" y="130" font-size="80" text-anchor="middle" fill="white">🏡</text>
-</svg>

apps/ui/static/favicon.svg

@@ -1,13 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <!-- Roof -->
-  <path d="M50 10 L90 45 L85 45 L85 50 L15 50 L15 45 L10 45 Z" fill="#667eea" stroke="#4c51bf" stroke-width="2" stroke-linejoin="round"/>
-  <!-- House body -->
-  <rect x="15" y="45" width="70" height="45" fill="#764ba2" stroke="#4c51bf" stroke-width="2"/>
-  <!-- Door -->
-  <rect x="35" y="60" width="15" height="30" fill="#4c51bf" rx="2"/>
-  <!-- Window -->
-  <rect x="60" y="60" width="20" height="15" fill="#fbbf24" stroke="#f59e0b" stroke-width="1"/>
-  <!-- Window panes -->
-  <line x1="70" y1="60" x2="70" y2="75" stroke="#f59e0b" stroke-width="1"/>
-  <line x1="60" y1="67.5" x2="80" y2="67.5" stroke="#f59e0b" stroke-width="1"/>
-</svg>

apps/ui/static/garage-icon.svg

@@ -1,4 +0,0 @@
-<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="180" height="180" rx="40" fill="#667EEA"/>
-<text x="90" y="130" font-size="80" text-anchor="middle" fill="white">🚗</text>
-</svg>

apps/ui/static/manifest.json

@@ -1,43 +0,0 @@
-{
-    "name": "Home Automation",
-    "short_name": "Home",
-    "description": "Smart Home Automation System",
-    "start_url": "/",
-    "display": "standalone",
-    "background_color": "#667eea",
-    "theme_color": "#667eea",
-    "orientation": "portrait",
-    "icons": [
-        {
-            "src": "/static/apple-touch-icon-180x180.png",
-            "sizes": "180x180",
-            "type": "image/png",
-            "purpose": "any maskable"
-        },
-        {
-            "src": "/static/apple-touch-icon-152x152.png",
-            "sizes": "152x152",
-            "type": "image/png"
-        },
-        {
-            "src": "/static/apple-touch-icon-120x120.png",
-            "sizes": "120x120",
-            "type": "image/png"
-        },
-        {
-            "src": "/static/apple-touch-icon-76x76.png",
-            "sizes": "76x76",
-            "type": "image/png"
-        },
-        {
-            "src": "/static/apple-touch-icon-32x32.png",
-            "sizes": "32x32",
-            "type": "image/png"
-        },
-        {
-            "src": "/static/apple-touch-icon-16x16.png",
-            "sizes": "16x16",
-            "type": "image/png"
-        }
-    ]
-}

apps/ui/static/style.css

@@ -1,257 +0,0 @@
-/* Home Automation Dashboard Styles */
-
-:root {
-    --primary-color: #3b82f6;
-    --primary-hover: #2563eb;
-    --bg-color: #f8fafc;
-    --card-bg: #ffffff;
-    --text-primary: #1e293b;
-    --text-secondary: #64748b;
-    --border-color: #e2e8f0;
-    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-}
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-    background-color: var(--bg-color);
-    color: var(--text-primary);
-    line-height: 1.6;
-}
-
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 1rem;
-}
-
-/* Header */
-header {
-    background-color: var(--card-bg);
-    border-radius: 0.5rem;
-    padding: 1.5rem;
-    margin-bottom: 2rem;
-    box-shadow: var(--shadow);
-}
-
-header h1 {
-    font-size: 2rem;
-    font-weight: 700;
-    color: var(--text-primary);
-}
-
-/* Main Content */
-main {
-    margin-bottom: 2rem;
-}
-
-/* Room Section */
-.room {
-    background-color: var(--card-bg);
-    border-radius: 0.5rem;
-    padding: 1.5rem;
-    margin-bottom: 1.5rem;
-    box-shadow: var(--shadow);
-}
-
-.room-title {
-    font-size: 1.5rem;
-    font-weight: 600;
-    margin-bottom: 1rem;
-    color: var(--text-primary);
-    border-bottom: 2px solid var(--border-color);
-    padding-bottom: 0.5rem;
-}
-
-/* Device Grid */
-.devices-grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 1rem;
-}
-
-/* Tablet: 2 columns */
-@media (max-width: 1024px) {
-    .devices-grid {
-        grid-template-columns: repeat(2, 1fr);
-    }
-}
-
-/* Mobile: 1 column */
-@media (max-width: 640px) {
-    .devices-grid {
-        grid-template-columns: 1fr;
-    }
-}
-
-/* Device Tile */
-.device-tile {
-    background-color: var(--bg-color);
-    border: 1px solid var(--border-color);
-    border-radius: 0.5rem;
-    padding: 1rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    transition: all 0.2s;
-}
-
-.device-tile:hover {
-    box-shadow: var(--shadow-lg);
-    transform: translateY(-2px);
-}
-
-.device-header {
-    display: flex;
-    align-items: flex-start;
-    gap: 0.75rem;
-}
-
-.device-icon {
-    font-size: 2.5rem;
-    flex-shrink: 0;
-    line-height: 1;
-}
-
-.device-info {
-    flex: 1;
-    min-width: 0;
-}
-
-.device-title {
-    font-size: 1rem;
-    font-weight: 600;
-    color: var(--text-primary);
-    margin-bottom: 0.25rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.device-id {
-    font-size: 0.75rem;
-    color: var(--text-secondary);
-    font-family: 'Monaco', 'Courier New', monospace;
-}
-
-/* Device State */
-.device-state {
-    padding: 0.5rem;
-    background-color: var(--card-bg);
-    border-radius: 0.375rem;
-    text-align: center;
-}
-
-.state-text {
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: var(--text-secondary);
-}
-
-/* Device Controls */
-.device-controls {
-    display: flex;
-    gap: 0.5rem;
-}
-
-/* Buttons */
-.btn {
-    flex: 1;
-    padding: 0.625rem 1rem;
-    border: none;
-    border-radius: 0.375rem;
-    font-size: 0.875rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.2s;
-    text-transform: uppercase;
-    letter-spacing: 0.025em;
-}
-
-.btn-on {
-    background-color: #10b981;
-    color: white;
-}
-
-.btn-on:hover {
-    background-color: #059669;
-}
-
-.btn-off {
-    background-color: #ef4444;
-    color: white;
-}
-
-.btn-off:hover {
-    background-color: #dc2626;
-}
-
-.btn:active {
-    transform: scale(0.98);
-}
-
-.btn-primary {
-    background-color: var(--primary-color);
-    color: white;
-}
-
-.btn-primary:hover {
-    background-color: var(--primary-hover);
-}
-
-.btn-primary:active {
-    transform: scale(0.98);
-}
-
-/* Empty State */
-.empty-state {
-    background-color: var(--card-bg);
-    border-radius: 0.5rem;
-    padding: 3rem 1.5rem;
-    text-align: center;
-    box-shadow: var(--shadow);
-}
-
-.empty-state p {
-    font-size: 1.125rem;
-    color: var(--text-secondary);
-    margin-bottom: 0.5rem;
-}
-
-.empty-state .hint {
-    font-size: 0.875rem;
-    color: var(--text-secondary);
-}
-
-/* Footer */
-footer {
-    text-align: center;
-    padding: 1rem;
-    color: var(--text-secondary);
-    font-size: 0.875rem;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-    header h1 {
-        font-size: 1.5rem;
-    }
-    
-    .room-title {
-        font-size: 1.25rem;
-    }
-    
-    .container {
-        padding: 0.75rem;
-    }
-    
-    .room {
-        padding: 1rem;
-    }
-}

apps/ui/static/types.js

@@ -1,166 +0,0 @@
-/**
- * Type definitions for Home Automation API
- * 
- * These are JSDoc type definitions that provide IDE autocomplete
- * and type checking in JavaScript files.
- */
-
-/**
- * @typedef {Object} Room
- * @property {string} name - Room name (e.g., "Küche", "Wohnzimmer")
- * @property {Array<{device_id: string, title: string, icon: string, rank: number}>} devices - Array of device objects in this room
- */
-
-/**
- * @typedef {Object} Layout
- * @property {Room[]} rooms - Array of rooms with their devices
- */
-
-/**
- * @typedef {Object} DeviceFeatures
- * @property {boolean} [dimmable] - Light: supports brightness control
- * @property {boolean} [color_hsb] - Light: supports HSB color control
- * @property {boolean} [color_temp] - Light: supports color temperature
- * @property {number} [min_temp] - Thermostat: minimum temperature
- * @property {number} [max_temp] - Thermostat: maximum temperature
- * @property {number} [step] - Thermostat: temperature step size
- */
-
-/**
- * @typedef {Object} Device
- * @property {string} device_id - Unique device identifier
- * @property {string} name - Human-readable device name
- * @property {string} type - Device type: light, thermostat, contact, temp_humidity_sensor, relay, outlet, cover
- * @property {DeviceFeatures} features - Device-specific features
- */
-
-/**
- * @typedef {Object} LightState
- * @property {boolean} power - On/off state
- * @property {number} [brightness] - Brightness 0-100 (if dimmable)
- * @property {Object} [color_hsb] - HSB color (if color_hsb)
- * @property {number} color_hsb.hue - Hue 0-360
- * @property {number} color_hsb.saturation - Saturation 0-100
- * @property {number} color_hsb.brightness - Brightness 0-100
- * @property {number} [color_temp] - Color temperature in mireds (if color_temp)
- */
-
-/**
- * @typedef {Object} ThermostatState
- * @property {number} current_temp - Current temperature in °C
- * @property {number} target_temp - Target temperature in °C
- * @property {string} mode - Operating mode: heat, cool, auto, off
- */
-
-/**
- * @typedef {Object} ContactState
- * @property {boolean} open - true if open, false if closed
- */
-
-/**
- * @typedef {Object} TempHumidityState
- * @property {number} temperature - Temperature in °C
- * @property {number} humidity - Relative humidity 0-100%
- */
-
-/**
- * @typedef {Object} RelayState
- * @property {boolean} power - On/off state
- */
-
-/**
- * @typedef {Object} OutletState
- * @property {boolean} power - On/off state
- */
-
-/**
- * @typedef {Object} CoverState
- * @property {number} position - Position 0-100 (0=closed, 100=open)
- * @property {string} state - State: open, closed, opening, closing, stopped
- */
-
-/**
- * @typedef {LightState|ThermostatState|ContactState|TempHumidityState|RelayState|OutletState|CoverState} DeviceState
- */
-
-/**
- * @typedef {Object} RealtimeEvent
- * @property {string} device_id - Device that changed
- * @property {string} type - Device type
- * @property {DeviceState} state - New device state
- */
-
-/**
- * @typedef {Object} Scene
- * @property {string} scene_id - Unique scene identifier
- * @property {string} name - Human-readable scene name
- * @property {Object<string, Object>} devices - Map of device_id to desired state
- */
-
-/**
- * @typedef {Object} LightPayload
- * @property {boolean} [power] - Turn on/off
- * @property {number} [brightness] - Set brightness 0-100
- * @property {Object} [color_hsb] - Set HSB color
- * @property {number} color_hsb.hue - Hue 0-360
- * @property {number} color_hsb.saturation - Saturation 0-100
- * @property {number} color_hsb.brightness - Brightness 0-100
- */
-
-/**
- * @typedef {Object} ThermostatPayload
- * @property {number} [target_temp] - Set target temperature
- * @property {string} [mode] - Set mode: heat, cool, auto, off
- */
-
-/**
- * @typedef {Object} RelayPayload
- * @property {boolean} power - Turn on/off
- */
-
-/**
- * @typedef {Object} OutletPayload
- * @property {boolean} power - Turn on/off
- */
-
-/**
- * @typedef {Object} CoverPayload
- * @property {number} [position] - Set position 0-100
- * @property {string} [action] - Action: open, close, stop
- */
-
-/**
- * Example usage:
- * 
- * // Get layout data
- * const layout = await window.apiClient.getLayout();
- * // layout is typed as Layout
- * 
- * // Get devices
- * const devices = await window.apiClient.getDevices();
- * // devices is typed as Device[]
- * 
- * // Get device state
- * const state = await window.apiClient.getDeviceState('kitchen_light');
- * // state is typed as DeviceState
- * 
- * // Set device state
- * await window.apiClient.setDeviceState('kitchen_light', 'light', {
- *     power: true,
- *     brightness: 80
- * });
- * 
- * // Connect to realtime events
- * window.apiClient.connectRealtime((event) => {
- *     console.log('Device update:', event.device_id, event.state);
- * });
- * 
- * // Listen to specific device
- * const unsubscribe = window.apiClient.onDeviceUpdate('kitchen_light', (event) => {
- *     console.log('Kitchen light changed:', event.state);
- * });
- * 
- * // Later: cleanup
- * unsubscribe();
- * window.apiClient.disconnectRealtime();
- */

apps/ui/templates/dashboard.html

@@ -6,17 +6,17 @@
     <title>Home Automation</title>
     
     <!-- Apple Touch Icon -->
-    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="/static/apple-touch-icon.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="/static/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/static/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/static/apple-touch-icon.png">
-    <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ STATIC_BASE }}/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="{{ STATIC_BASE }}/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="{{ STATIC_BASE }}/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ STATIC_BASE }}/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ STATIC_BASE }}/apple-touch-icon.png">
+    <link rel="icon" type="image/svg+xml" href="{{ STATIC_BASE }}/favicon.svg">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
     <meta name="apple-mobile-web-app-title" content="Dashboard">
     <meta name="theme-color" content="#667eea">
-    <link rel="manifest" href="/static/manifest.json">
+    <link rel="manifest" href="{{ STATIC_BASE }}/manifest.json">
     <style>
         * {
             margin: 0;

apps/ui/templates/device.html

@@ -6,16 +6,16 @@
     <title>Gerät - Home Automation</title>
     
     <!-- Apple Touch Icon -->
-    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="/static/apple-touch-icon.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="/static/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/static/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/static/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ STATIC_BASE }}/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="{{ STATIC_BASE }}/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="{{ STATIC_BASE }}/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ STATIC_BASE }}/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ STATIC_BASE }}/apple-touch-icon.png">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
     <meta name="apple-mobile-web-app-title" content="Gerät">
     <meta name="theme-color" content="#667eea">
-    <link rel="manifest" href="/static/manifest.json">
+    <link rel="manifest" href="{{ STATIC_BASE }}/manifest.json">
     <style>
         * {
             margin: 0;
@@ -346,8 +346,8 @@
     </script>
     
     <!-- Load API client AFTER API_BASE is set -->
-    <script src="/static/types.js"></script>
-    <script src="/static/api-client.js"></script>
+    <script src="{{ STATIC_BASE }}/types.js"></script>
+    <script src="{{ STATIC_BASE }}/api-client.js"></script>
     
     <script>
         // Get device ID from URL

apps/ui/templates/garage.html

@@ -6,17 +6,17 @@
     <title>Garage - Home Automation</title>
     
     <!-- Apple Touch Icon -->
-    <link rel="apple-touch-icon" sizes="180x180" href="/static/garage-icon-180x180.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="/static/garage-icon-152x152.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="/static/garage-icon-120x120.png">
-    <link rel="apple-touch-icon" sizes="76x76" href="/static/garage-icon-76x76.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/static/garage-icon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/static/garage-icon-16x16.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ STATIC_BASE }}/garage-icon-180x180.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="{{ STATIC_BASE }}/garage-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="{{ STATIC_BASE }}/garage-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="{{ STATIC_BASE }}/garage-icon-76x76.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ STATIC_BASE }}/garage-icon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ STATIC_BASE }}/garage-icon-16x16.png">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
     <meta name="apple-mobile-web-app-title" content="Garage">
     <meta name="theme-color" content="#667eea">
-    <link rel="manifest" href="/manifest.json">
+    <link rel="manifest" href="{{ STATIC_BASE }}/manifest.json">
     <style>
         * {
             margin: 0;
@@ -306,8 +306,8 @@
     </script>
     
     <!-- Load API client AFTER API_BASE is set -->
-    <script src="/static/types.js"></script>
-    <script src="/static/api-client.js"></script>
+    <script src="{{ STATIC_BASE }}/types.js"></script>
+    <script src="{{ STATIC_BASE }}/api-client.js"></script>
     
     <script>
         // Device IDs for garage devices

apps/ui/templates/index.html

@@ -6,17 +6,17 @@
     <title>Home Automation</title>
     
     <!-- Apple Touch Icon -->
-    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon-180x180.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="/static/apple-touch-icon-152x152.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="/static/apple-touch-icon-120x120.png">
-    <link rel="apple-touch-icon" sizes="76x76" href="/static/apple-touch-icon-76x76.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/static/apple-touch-icon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/static/apple-touch-icon-16x16.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ STATIC_BASE }}/apple-touch-icon-180x180.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="{{ STATIC_BASE }}/apple-touch-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="{{ STATIC_BASE }}/apple-touch-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="{{ STATIC_BASE }}/apple-touch-icon-76x76.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ STATIC_BASE }}/apple-touch-icon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ STATIC_BASE }}/apple-touch-icon-16x16.png">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
     <meta name="apple-mobile-web-app-title" content="Home Automation">
     <meta name="theme-color" content="#667eea">
-    <link rel="manifest" href="/static/manifest.json">
+    <link rel="manifest" href="{{ STATIC_BASE }}/manifest.json">
     <style>
         * {
             margin: 0;

apps/ui/templates/room.html

@@ -6,16 +6,16 @@
     <title>{{ room_name }} - Home Automation</title>
     
     <!-- Apple Touch Icon -->
-    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="/static/apple-touch-icon.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="/static/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/static/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/static/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ STATIC_BASE }}/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="{{ STATIC_BASE }}/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="{{ STATIC_BASE }}/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ STATIC_BASE }}/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ STATIC_BASE }}/apple-touch-icon.png">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
     <meta name="apple-mobile-web-app-title" content="{{ room_name }}">
     <meta name="theme-color" content="#667eea">
-    <link rel="manifest" href="/static/manifest.json">
+    <link rel="manifest" href="{{ STATIC_BASE }}/manifest.json">
     <style>
         * {
             margin: 0;
@@ -229,8 +229,8 @@
     </script>
     
     <!-- Load API client AFTER API_BASE is set -->
-    <script src="/static/types.js"></script>
-    <script src="/static/api-client.js"></script>
+    <script src="{{ STATIC_BASE }}/types.js"></script>
+    <script src="{{ STATIC_BASE }}/api-client.js"></script>
     
     <script>
         // Get room name from URL

apps/ui/templates/rooms.html

@@ -6,17 +6,17 @@
     <title>Räume - Home Automation</title>
     
     <!-- Apple Touch Icon -->
-    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon-180x180.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="/static/apple-touch-icon-152x152.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="/static/apple-touch-icon-120x120.png">
-    <link rel="apple-touch-icon" sizes="76x76" href="/static/apple-touch-icon-76x76.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/static/apple-touch-icon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/static/apple-touch-icon-16x16.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ STATIC_BASE }}/apple-touch-icon-180x180.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="{{ STATIC_BASE }}/apple-touch-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="{{ STATIC_BASE }}/apple-touch-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="{{ STATIC_BASE }}/apple-touch-icon-76x76.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ STATIC_BASE }}/apple-touch-icon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ STATIC_BASE }}/apple-touch-icon-16x16.png">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
     <meta name="apple-mobile-web-app-title" content="Räume">
     <meta name="theme-color" content="#667eea">
-    <link rel="manifest" href="/manifest.json">
+    <link rel="manifest" href="{{ STATIC_BASE }}/manifest.json">
     <style>
         * {
             margin: 0;
@@ -163,8 +163,8 @@
     </script>
     
     <!-- Load API client AFTER API_BASE is set -->
-    <script src="/static/types.js"></script>
-    <script src="/static/api-client.js"></script>
+    <script src="{{ STATIC_BASE }}/types.js"></script>
+    <script src="{{ STATIC_BASE }}/api-client.js"></script>
     
     <script>
         // Room icon mapping