mapper/openspec/changes/mpvj-headless-control-center/tasks.md

1. Backend Setup & OSC Bridge

• 1.1 Initialize Node.js project and install dependencies (express, node-osc, socket.io, systeminformation).
• 1.2 Implement the OSC Client to send messages to localhost:9999.
• 1.3 Create WebSocket handlers for real-time vertex and surface manipulation events.
• 1.4 Add API endpoints for ofxPiMapper process management (start/stop/restart).

2. Media & System API

• 2.1 Implement the Media Manager API for listing, uploading, and deleting files in /home/pi/media.
• 2.2 Create the System Monitor API to poll and return CPU, RAM, and Temperature data.
• 2.3 Implement the OSC /source/set endpoint for remote media assignment.

3. Frontend Scaffolding & Virtual Canvas

• 3.1 Scaffold React/Vite project with Tailwind CSS.
• 3.2 Implement the "Virtual Canvas" component using HTML5 Canvas or SVG to represent the projection area.
• 3.3 Add interactive surface manipulation (Quad/Triangle) with touch/drag support.
• 3.4 Integrate Socket.io client to pipe vertex movements to the backend in real-time.

4. Networking & Headless Config

• 4.1 Create shell scripts for toggling between Access Point and Client Mode.
• 4.2 Implement the Networking UI in React for WiFi scanning and connection management.
• 4.3 Configure avahi-daemon to provide mpvj.local mDNS access.

5. Integration & Deployment

• 5.1 Create a systemd service for the MPVJ backend to ensure it starts on boot.
• 5.2 Build the React frontend and configure Express to serve static files.
• 5.3 Conduct end-to-end testing of mapping, media assignment, and WiFi switching.