Improve React UI layout and Docker build setup

- Update Dockerfile with multi-stage build for React frontend
- Improve PlaylistsPage layout with better controls and spacing
- Improve TableControlPage with 2-column grid layout
- Add page descriptions to Browse and Playlists pages
- Fix connection indicator to show device status (not WebSocket)
- Update playlist selection style to use accent colors
- Add .dockerignore for faster builds
- Add frontend .env.example for PORT configuration
- Update docker-compose.yml with cleaner volume mounts

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

.dockerignore

@@ -0,0 +1,44 @@
+# Git
+.git
+.gitignore
+
+# Node modules (built in Docker)
+frontend/node_modules
+node_modules
+
+# Build outputs (built in Docker)
+static/dist
+
+# Development files
+.env
+.env.*
+*.log
+.DS_Store
+
+# IDE
+.vscode
+.idea
+*.swp
+*.swo
+
+# Python cache
+__pycache__
+*.pyc
+*.pyo
+.pytest_cache
+.mypy_cache
+
+# Documentation
+*.md
+!README.md
+
+# Docker files (not needed in image)
+docker-compose*.yml
+Dockerfile*
+
+# Test files
+tests/
+*.test.*
+
+# Dune Weaver Touch (separate app)
+dune-weaver-touch/

.gitignore

@@ -16,4 +16,4 @@ node_modules/
 # Custom branding assets (user uploads)
 static/custom/*
 !static/custom/.gitkeep
-.claude/
+.claude/static/dist/

CLAUDE.md

@@ -1,92 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Development Commands
-
-### CSS/Frontend Development
-- `npm run dev` or `npm run watch-css` - Watch mode for Tailwind CSS development 
-- `npm run build-css` - Build and minify Tailwind CSS for production
-
-### Python Application
-- `python main.py` - Start the FastAPI server on port 8080
-- The application uses uvicorn internally and runs on 0.0.0.0:8080
-
-## Architecture Overview
-
-Dune Weaver is a web-controlled kinetic sand table system with both hardware and software components:
-
-### Core Application Structure
-- **FastAPI backend** (`main.py`) - Main web server with REST APIs and WebSocket support
-- **Modular design** with organized modules:
-  - `modules/connection/` - Serial and WebSocket connection management for hardware
-  - `modules/core/` - Core business logic (patterns, playlists, state management, caching)
-  - `modules/led/` - WLED integration for lighting effects  
-  - `modules/mqtt/` - MQTT integration capabilities
-  - `modules/update/` - Software update management
-
-### Coordinate System
-The sand table uses **polar coordinates (θ, ρ)** instead of traditional Cartesian:
-- **Theta (θ)**: Angular position in degrees (0-360°)
-- **Rho (ρ)**: Radial distance from center (0.0 at center, 1.0 at perimeter)
-
-### Pattern System
-- **Pattern files**: `.thr` files in `patterns/` directory containing theta-rho coordinate pairs
-- **Pattern format**: Each line contains `theta rho` values separated by space, comments start with `#`
-- **Cached previews**: WebP images generated in `patterns/cached_images/` for UI display
-- **Custom patterns**: User uploads stored in `patterns/custom_patterns/`
-
-### Hardware Communication
-- Supports both **Serial** and **WebSocket** connections to hardware controllers
-- **ESP32** or **Arduino** boards control stepper motors
-- **Homing system**: Crash-homing method without limit switches
-- **Hardware coupling**: Angular and radial axes are mechanically coupled, requiring software compensation
-
-### State Management
-- Global state managed in `modules/core/state.py`
-- Persistent state saved to `state.json`
-- Real-time status updates via WebSocket (`/ws/status`)
-
-### Key Features
-- **Playlist system**: Sequential pattern execution with timing control
-- **WLED integration**: Synchronized lighting effects during pattern execution
-- **Image caching**: Automatic preview generation for all patterns
-- **Pattern execution control**: Play, pause, resume, stop, skip functionality
-- **MQTT support**: External system integration
-- **Software updates**: Git-based update system
-
-## Important Implementation Notes
-
-### Cursor Rules Integration
-The project follows FastAPI best practices from `.cursorrules`:
-- Use functional programming patterns where possible
-- Implement proper error handling with early returns
-- Use Pydantic models for request/response validation
-- Prefer async operations for I/O-bound tasks
-- Follow proper dependency injection patterns
-
-### Hardware Constraints
-- Angular axis movement affects radial position due to mechanical coupling
-- Software compensates for this coupling automatically
-- No physical limit switches - relies on crash-homing for position reference
-
-### Threading and Concurrency
-- Uses asyncio for concurrent operations
-- Pattern execution runs in background tasks
-- Thread-safe connection management with locks
-- WebSocket connections for real-time status updates
-
-## Testing and Development
-
-### Running the Application
-1. Install Python dependencies: `pip install -r requirements.txt`
-2. Install Node dependencies: `npm install`
-3. Build CSS: `npm run build-css`
-4. Start server: `python main.py`
-
-### File Structure Conventions
-- Pattern files in `patterns/` (can have subdirectories)
-- Static assets in `static/` (CSS, JS, images)
-- HTML templates in `templates/`
-- Configuration files in root directory
-- Firmware configurations in `firmware/` subdirectories for different hardware versions

Dockerfile

@@ -1,3 +1,21 @@
+# Stage 1: Build frontend
+FROM --platform=$TARGETPLATFORM node:20-slim AS frontend-builder
+
+WORKDIR /app/frontend
+
+# Copy frontend package files
+COPY frontend/package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy frontend source
+COPY frontend/ ./
+
+# Build frontend
+RUN npm run build
+
+# Stage 2: Python backend
 FROM --platform=$TARGETPLATFORM python:3.11-slim-bookworm
 
 # Faster, repeatable builds
@@ -30,7 +48,11 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
     && apt-get purge -y gcc g++ make scons \
     && rm -rf /var/lib/apt/lists/*
 
+# Copy backend code
 COPY . .
 
+# Copy built frontend from Stage 1
+COPY --from=frontend-builder /app/static/dist ./static/dist
+
 EXPOSE 8080
 CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8080"]

docker-compose.yml

@@ -1,18 +1,21 @@
 services:
   dune-weaver:
-    build: . # Uncomment this if you need to build
-    image: ghcr.io/tuanchris/dune-weaver:main # Use latest production image
+    build: .
+    image: ghcr.io/tuanchris/dune-weaver:main
     restart: always
+    network_mode: "host" # Use host network for device access (serves on port 8080)
+    # Alternative: Use port mapping instead of host network
     # ports:
-    #   - "8080:8080" # Map port 8080 of the container to 8080 of the host (access via http://localhost:8080)
-    network_mode: "host" # Use host network for device access
+    #   - "8080:8080"
     volumes:
-      - .:/app  # Mount entire app for development
-      # Mount Docker socket to allow container to restart itself
+      # Persist state and patterns
+      - ./state.json:/app/state.json
+      - ./patterns:/app/patterns
+      # Mount Docker socket for container self-restart/update
       - /var/run/docker.sock:/var/run/docker.sock
-      # Mount timezone file from host for Still Sands scheduling
+      # Mount timezone file from host for scheduling features
       - /etc/timezone:/etc/host-timezone:ro
-      # Mount systemd to allow host shutdown
+      # Mount systemd for host shutdown capability
       - /run/systemd/system:/run/systemd/system:ro
       - /var/run/dbus/system_bus_socket:/var/run/dbus/system_bus_socket:ro
       - /sys/fs/cgroup:/sys/fs/cgroup:ro

frontend/.env.example

@@ -0,0 +1,5 @@
+# Frontend Development Server Configuration
+# Copy this file to .env to customize
+
+# Dev server port (default: 80)
+PORT=80

frontend/vite.config.ts

@@ -11,7 +11,7 @@ export default defineConfig({
     },
   },
   server: {
-    port: 5173,
+    port: parseInt(process.env.PORT || '80'),
     proxy: {
       // WebSocket endpoints
       '/ws': {

modules/core/state.py

@@ -114,6 +114,9 @@ class AppState:
         self.scheduled_pause_finish_pattern = False  # Finish current pattern before pausing
         self.scheduled_pause_timezone = None  # User-selected timezone (None = use system timezone)
 
+        # Server port setting (requires restart to take effect)
+        self.server_port = 8080  # Default server port
+
         # MQTT settings (UI-configurable, overrides .env if set)
         self.mqtt_enabled = False  # Master enable/disable for MQTT
         self.mqtt_broker = ""  # MQTT broker IP/hostname