Add React UI with real-time music sync progress

run/cifs_archive/copy-music.sh

@@ -56,7 +56,7 @@ function do_music_sync {
 
   if ! rsync -rum --no-human-readable --exclude=.fseventsd/*** --exclude=*.DS_Store --exclude=.metadata_never_index \
                 --exclude="System Volume Information/***" \
-                --delete --modify-window=2 --info=stats2 "$SRC/" "$DST" &> "$LOG"
+                --delete --modify-window=2 --info=progress2,stats2 "$SRC/" "$DST" &> "$LOG"
   then
     log "rsync failed with error $?"
   fi

setup/pi/configure-web.sh

@@ -53,6 +53,9 @@ then
   ln -s /var/www/html/favicon.ico /var/www/html/new/favicon.ico
 fi
 
+# install React UI at /react/ - alternative interface with real-time sync progress
+mkdir -p /var/www/html/react
+cp -r "$SOURCE_DIR/teslausb-www-react/dist/"* /var/www/html/react/
 
 cat > /sbin/mount.ctts << EOF
 #!/bin/bash -eu

teslausb-www-react/.gitignore

@@ -0,0 +1,30 @@
+# Dependencies
+node_modules/
+
+# Build output - included in repo for teslausb integration
+# dist/
+
+# Editor
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+npm-debug.log*
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# Session notes (local development only)
+SESSION-NOTES.md
+
+# Release artifacts
+teslausb-react-ui.tgz

teslausb-www-react/README.md

@@ -0,0 +1,106 @@
+# TeslaUSB React Web UI
+
+A modern, React-based web interface for TeslaUSB. Built with Preact for minimal bundle size and optimized for Raspberry Pi.
+
+## Features
+
+- **Dashboard** - System status, storage visualization, real-time sync progress
+- **Video Viewer** - 6-camera synchronized playback with multiple layout options
+- **File Browser** - Drag-and-drop file management for Music, LightShow, and Boombox drives
+- **Log Viewer** - Real-time log tailing with download option
+- **Music Sync Progress** - Live progress display (percentage, speed, ETA) during music sync
+- **UI Switcher** - Easy switching between Standard, Vue, and React UIs
+
+## Installation
+
+### Option 1: TeslaUSB Integration (Recommended)
+
+If TeslaUSB includes this UI, it will be automatically installed at `/react/` during setup. Access it at:
+
+```
+http://<your-pi-ip>/react/
+```
+
+### Option 2: Manual Tarball Installation
+
+Download the latest release and extract to your TeslaUSB:
+
+```bash
+# On your Raspberry Pi
+sudo /root/bin/remountfs_rw
+curl -L -o /tmp/reactui.tgz https://github.com/oaquique/teslausb-www-react/releases/latest/download/teslausb-react-ui.tgz
+sudo tar -C /var/www/html -xf /tmp/reactui.tgz
+```
+
+Then access at `http://<your-pi-ip>/react/`
+
+### Option 3: Full Replacement via Deploy Script
+
+Replace the entire web UI (serves from root `/`):
+
+```bash
+# Build and deploy to your Raspberry Pi
+./deploy.sh [email protected]
+```
+
+## Switching Between UIs
+
+TeslaUSB supports multiple web interfaces:
+
+| UI | Path | Description |
+|----|------|-------------|
+| Standard | `/` | Original TeslaUSB interface |
+| Vue | `/new/` | Vue-based alternative |
+| React | `/react/` | This interface |
+
+Use the "Switch UI" section in the sidebar to navigate between them.
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Build release tarball (for /react/ path)
+./build-release.sh
+```
+
+## Tech Stack
+
+- **Preact** - 3KB React alternative for minimal bundle size
+- **Vite** - Fast build tool with excellent tree-shaking
+- **Custom CSS** - No external UI framework for maximum performance
+
+## Project Structure
+
+```
+teslausb-www-react/
+├── src/
+│   ├── components/      # UI components
+│   ├── hooks/           # Custom React hooks
+│   ├── services/        # API layer
+│   └── styles/          # CSS
+├── cgi-bin/             # CGI scripts for this UI
+├── public/              # Static assets
+├── deploy.sh            # Full deployment script
+├── rollback.sh          # Restore previous UI
+└── build-release.sh     # Create release tarball
+```
+
+## Rollback
+
+If deployed via `deploy.sh`, you can restore the previous UI:
+
+```bash
+./rollback.sh [email protected]
+```
+
+## License
+
+Same as TeslaUSB project.