feat: spectators see 'Take Over' button to seamlessly take control

static/js/main.js

@@ -188,6 +188,7 @@ class MotionApp {
         // Track state
         this.isPaused = false;
         this.isIdle = true;
+        this.isWatching = false;  // Spectator mode
         this.isProcessing = false;  // Prevent concurrent API calls
         this.pendingStartRequest = null;  // Store pending start request data
 
@@ -226,10 +227,10 @@ class MotionApp {
     
     async toggleStartReset() {
         if (this.isProcessing) return;  // Prevent concurrent operations
-        
-        if (this.isIdle) {
-            // Currently idle, so start
-            await this.startGeneration();
+
+        if (this.isIdle || this.isWatching) {
+            // Idle or spectator watching, so start (will force takeover if needed)
+            await this.startGeneration(this.isWatching);
         } else {
             // Currently running/paused, so reset
             await this.reset();
@@ -565,6 +566,7 @@ class MotionApp {
         this.isRunning = false;
         this.isPaused = false;
         this.isIdle = true;
+        this.isWatching = false;
         this.frameCount = 0;
         this.motionFpsCounter = 0;
         this.isFetchingFrame = false;
@@ -733,17 +735,22 @@ class MotionApp {
                 }
 
                 // Auto-start spectator mode if someone else is generating
-                if (data.is_generating && !data.is_active_session && this.isIdle && !this.isRunning) {
+                if (data.is_generating && !data.is_active_session && this.isIdle && !this.isWatching) {
+                    this.isWatching = true;
                     this.isRunning = true;
-                    this.isIdle = false;
                     this.statusEl.textContent = 'Watching';
+                    this.startResetBtn.textContent = 'Take Over';
+                    this.startResetBtn.classList.remove('btn-danger');
+                    this.startResetBtn.classList.add('btn-primary');
                     this.startFrameLoop();
                 }
                 // Stop spectator mode when generation stops
-                if (!data.is_generating && !data.is_active_session && this.isRunning && this.statusEl.textContent === 'Watching') {
+                if (!data.is_generating && !data.is_active_session && this.isWatching) {
+                    this.isWatching = false;
                     this.isRunning = false;
                     this.isIdle = true;
                     this.statusEl.textContent = 'Idle';
+                    this.startResetBtn.textContent = 'Start';
                     this.localFrameQueue = [];
                     this.broadcastLastId = 0;
                 }