Add real-time emotion monitor to web GUI

- Add get_current_emotion_status() to MovementManager
- Add /emotion_status API endpoint
- Update frontend with emotion panel showing:
- Current emotion name and type
- Progress bar with elapsed/duration
- PAD values visualization for generated emotions
- Poll every 200ms for smooth updates

src/feeling_machine/console.py

@@ -303,6 +303,17 @@ class LocalStream:
                 logger.warning(f"API key validation failed: {e}")
                 return JSONResponse({"valid": False, "error": "validation_error"}, status_code=500)
 
+        # GET /emotion_status -> current emotion being played
+        @self._settings_app.get("/emotion_status")
+        def _emotion_status() -> JSONResponse:
+            try:
+                movement_manager = self.handler.deps.movement_manager
+                status = movement_manager.get_current_emotion_status()
+                return JSONResponse(status)
+            except Exception as e:
+                logger.warning(f"Failed to get emotion status: {e}")
+                return JSONResponse({"playing": False, "error": str(e)})
+
         self._settings_initialized = True
 
     def launch(self) -> None:

src/feeling_machine/moves.py

@@ -357,6 +357,75 @@ class MovementManager:
 
         return self._now() - last_activity >= self.idle_inactivity_delay
 
+    def get_current_emotion_status(self) -> Dict[str, Any]:
+        """Get information about the currently playing emotion/move.
+
+        Thread-safe: reads shared state with appropriate locking.
+
+        Returns a dict with:
+        - playing: bool - whether an emotion/move is currently playing
+        - type: str - "pad_emotion", "classic_emotion", "dance", "breathing", or None
+        - emotion_name: str or None - name of the emotion (if available)
+        - pad_values: dict or None - P, A, D values (if PAD emotion)
+        - duration: float or None - total duration in seconds
+        - elapsed: float or None - elapsed time in seconds
+        - progress: float or None - progress 0.0 to 1.0
+        """
+        from feeling_machine.dance_emotion_moves import PADEmotionMove, EmotionQueueMove, DanceQueueMove
+
+        with self._status_lock:
+            current_move = self.state.current_move
+            move_start_time = self.state.move_start_time
+
+        if current_move is None:
+            return {"playing": False, "type": None}
+
+        current_time = self._now()
+        elapsed = current_time - move_start_time if move_start_time else 0.0
+        duration = getattr(current_move, "duration", None)
+
+        # Handle infinite duration (breathing)
+        if duration == float("inf"):
+            progress = None
+            duration_display = None
+        else:
+            duration_display = duration
+            progress = min(elapsed / duration, 1.0) if duration and duration > 0 else 0.0
+
+        result: Dict[str, Any] = {
+            "playing": True,
+            "elapsed": round(elapsed, 2),
+            "duration": round(duration_display, 2) if duration_display else None,
+            "progress": round(progress, 3) if progress is not None else None,
+        }
+
+        if isinstance(current_move, BreathingMove):
+            result["type"] = "breathing"
+            result["emotion_name"] = None
+            result["pad_values"] = None
+        elif isinstance(current_move, PADEmotionMove):
+            result["type"] = "pad_emotion"
+            result["emotion_name"] = None  # PAD emotions don't have names by default
+            result["pad_values"] = {
+                "P": round(current_move.P, 2),
+                "A": round(current_move.A, 2),
+                "D": round(current_move.D, 2),
+            }
+        elif isinstance(current_move, EmotionQueueMove):
+            result["type"] = "classic_emotion"
+            result["emotion_name"] = getattr(current_move, "emotion_name", None)
+            result["pad_values"] = None
+        elif isinstance(current_move, DanceQueueMove):
+            result["type"] = "dance"
+            result["emotion_name"] = getattr(current_move, "move_name", None)
+            result["pad_values"] = None
+        else:
+            result["type"] = "unknown"
+            result["emotion_name"] = None
+            result["pad_values"] = None
+
+        return result
+
     def set_listening(self, listening: bool) -> None:
         """Enable or disable listening mode without touching shared state directly.
 

src/feeling_machine/static/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Feeling Machine – Settings</title>
+    <title>Feeling Machine</title>
     <link rel="stylesheet" href="/static/style.css" />
   </head>
   <body>
@@ -14,11 +14,69 @@
     </div>
     <div class="container">
       <header class="hero">
-        <div class="pill">Headless control</div>
-        <h1>Feeling Machine</h1>
-        <p class="subtitle">Configure your OpenAI API key for the conversation app.</p>
+        <div class="pill">Feeling Machine</div>
+        <h1>Emotion Monitor</h1>
+        <p class="subtitle" id="subtitle">Configure your OpenAI API key to get started.</p>
       </header>
 
+      <!-- Emotion Status Panel (shown when key is configured) -->
+      <div id="emotion-panel" class="panel hidden">
+        <div class="panel-heading">
+          <div>
+            <p class="eyebrow">Now Playing</p>
+            <h2 id="emotion-title">Idle</h2>
+          </div>
+          <span id="emotion-chip" class="chip">Ready</span>
+        </div>
+
+        <div id="emotion-details" class="emotion-details">
+          <div class="emotion-row">
+            <span class="emotion-label">Status</span>
+            <span id="emotion-status" class="emotion-value">Waiting for emotion...</span>
+          </div>
+        </div>
+
+        <!-- Progress bar -->
+        <div id="progress-container" class="progress-container hidden">
+          <div class="progress-bar">
+            <div id="progress-fill" class="progress-fill"></div>
+          </div>
+          <div class="progress-text">
+            <span id="progress-elapsed">0.0s</span>
+            <span id="progress-duration">/ 0.0s</span>
+          </div>
+        </div>
+
+        <!-- PAD Values (shown for PAD emotions) -->
+        <div id="pad-section" class="pad-section hidden">
+          <p class="section-title">PAD Values</p>
+          <div class="pad-grid">
+            <div class="pad-item">
+              <div class="pad-bar-container">
+                <div id="pad-p-bar" class="pad-bar pad-pleasure"></div>
+              </div>
+              <span class="pad-label">Pleasure</span>
+              <span id="pad-p-value" class="pad-value">0.00</span>
+            </div>
+            <div class="pad-item">
+              <div class="pad-bar-container">
+                <div id="pad-a-bar" class="pad-bar pad-arousal"></div>
+              </div>
+              <span class="pad-label">Arousal</span>
+              <span id="pad-a-value" class="pad-value">0.00</span>
+            </div>
+            <div class="pad-item">
+              <div class="pad-bar-container">
+                <div id="pad-d-bar" class="pad-bar pad-dominance"></div>
+              </div>
+              <span class="pad-label">Dominance</span>
+              <span id="pad-d-value" class="pad-value">0.00</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- API Key Configuration Panel -->
       <div id="configured" class="panel hidden">
         <div class="panel-heading">
           <div>
@@ -51,4 +109,4 @@
 
     <script src="/static/main.js"></script>
   </body>
-</html>
+</html>

src/feeling_machine/static/main.js

@@ -62,24 +62,165 @@ function show(el, flag) {
   el.classList.toggle("hidden", !flag);
 }
 
+// Emotion status polling
+let emotionPollInterval = null;
+
+function getEmotionTypeLabel(type) {
+  switch (type) {
+    case "pad_emotion": return "Generated Emotion";
+    case "classic_emotion": return "Classic Emotion";
+    case "dance": return "Dance";
+    case "breathing": return "Breathing";
+    default: return "Unknown";
+  }
+}
+
+function getEmotionChipClass(type, playing) {
+  if (!playing) return "chip";
+  switch (type) {
+    case "pad_emotion": return "chip chip-pad";
+    case "classic_emotion": return "chip chip-classic";
+    case "dance": return "chip chip-dance";
+    case "breathing": return "chip chip-breathing";
+    default: return "chip chip-ok";
+  }
+}
+
+function updatePadBar(barEl, value) {
+  // PAD values are -1 to 1, convert to 0-100% positioning
+  // value of 0 = 50%, value of -1 = 0%, value of 1 = 100%
+  const percent = ((value + 1) / 2) * 100;
+  barEl.style.width = `${percent}%`;
+}
+
+async function fetchEmotionStatus() {
+  try {
+    const resp = await fetchWithTimeout("/emotion_status", {}, 1000);
+    if (!resp.ok) return null;
+    return await resp.json();
+  } catch (e) {
+    return null;
+  }
+}
+
+function updateEmotionUI(status) {
+  const emotionTitle = document.getElementById("emotion-title");
+  const emotionChip = document.getElementById("emotion-chip");
+  const emotionStatus = document.getElementById("emotion-status");
+  const progressContainer = document.getElementById("progress-container");
+  const progressFill = document.getElementById("progress-fill");
+  const progressElapsed = document.getElementById("progress-elapsed");
+  const progressDuration = document.getElementById("progress-duration");
+  const padSection = document.getElementById("pad-section");
+
+  if (!status || !status.playing) {
+    emotionTitle.textContent = "Idle";
+    emotionChip.textContent = "Ready";
+    emotionChip.className = "chip";
+    emotionStatus.textContent = "Waiting for emotion...";
+    show(progressContainer, false);
+    show(padSection, false);
+    return;
+  }
+
+  // Update title
+  if (status.emotion_name) {
+    emotionTitle.textContent = status.emotion_name;
+  } else if (status.type === "pad_emotion") {
+    emotionTitle.textContent = "PAD Emotion";
+  } else if (status.type === "breathing") {
+    emotionTitle.textContent = "Breathing";
+  } else {
+    emotionTitle.textContent = getEmotionTypeLabel(status.type);
+  }
+
+  // Update chip
+  emotionChip.textContent = getEmotionTypeLabel(status.type);
+  emotionChip.className = getEmotionChipClass(status.type, true);
+
+  // Update status text
+  if (status.type === "breathing") {
+    emotionStatus.textContent = "Robot is breathing while idle";
+  } else if (status.type === "pad_emotion") {
+    emotionStatus.textContent = "Playing procedurally generated emotion";
+  } else if (status.type === "classic_emotion") {
+    emotionStatus.textContent = "Playing pre-recorded animation";
+  } else if (status.type === "dance") {
+    emotionStatus.textContent = "Dancing!";
+  } else {
+    emotionStatus.textContent = "Playing...";
+  }
+
+  // Update progress bar
+  if (status.duration && status.progress !== null) {
+    show(progressContainer, true);
+    progressFill.style.width = `${status.progress * 100}%`;
+    progressElapsed.textContent = `${status.elapsed.toFixed(1)}s`;
+    progressDuration.textContent = `/ ${status.duration.toFixed(1)}s`;
+  } else {
+    show(progressContainer, false);
+  }
+
+  // Update PAD values
+  if (status.pad_values) {
+    show(padSection, true);
+    document.getElementById("pad-p-value").textContent = status.pad_values.P.toFixed(2);
+    document.getElementById("pad-a-value").textContent = status.pad_values.A.toFixed(2);
+    document.getElementById("pad-d-value").textContent = status.pad_values.D.toFixed(2);
+    updatePadBar(document.getElementById("pad-p-bar"), status.pad_values.P);
+    updatePadBar(document.getElementById("pad-a-bar"), status.pad_values.A);
+    updatePadBar(document.getElementById("pad-d-bar"), status.pad_values.D);
+  } else {
+    show(padSection, false);
+  }
+}
+
+function startEmotionPolling() {
+  if (emotionPollInterval) return;
+
+  async function poll() {
+    const status = await fetchEmotionStatus();
+    if (status) {
+      updateEmotionUI(status);
+    }
+  }
+
+  poll(); // Initial fetch
+  emotionPollInterval = setInterval(poll, 200); // Poll every 200ms for smooth updates
+}
+
+function stopEmotionPolling() {
+  if (emotionPollInterval) {
+    clearInterval(emotionPollInterval);
+    emotionPollInterval = null;
+  }
+}
+
 async function init() {
   const loading = document.getElementById("loading");
   const statusEl = document.getElementById("status");
   const formPanel = document.getElementById("form-panel");
   const configuredPanel = document.getElementById("configured");
+  const emotionPanel = document.getElementById("emotion-panel");
   const saveBtn = document.getElementById("save-btn");
   const changeKeyBtn = document.getElementById("change-key-btn");
   const input = document.getElementById("api-key");
+  const subtitle = document.getElementById("subtitle");
 
   show(loading, true);
   show(formPanel, false);
   show(configuredPanel, false);
+  show(emotionPanel, false);
 
   const st = (await waitForStatus()) || { has_key: false };
 
   if (st.has_key) {
+    subtitle.textContent = "Monitor emotions in real-time.";
+    show(emotionPanel, true);
     show(configuredPanel, true);
+    startEmotionPolling();
   } else {
+    subtitle.textContent = "Configure your OpenAI API key to get started.";
     show(formPanel, true);
   }
   show(loading, false);
@@ -133,4 +274,4 @@ async function init() {
   });
 }
 
-window.addEventListener("DOMContentLoaded", init);
+window.addEventListener("DOMContentLoaded", init);

src/feeling_machine/static/style.css

@@ -11,6 +11,9 @@
   --accent: #45c4ff;
   --accent-2: #5ef0c1;
   --shadow: 0 20px 70px rgba(0, 0, 0, 0.45);
+  --pad-pleasure: #ff6b9d;
+  --pad-arousal: #ffc85c;
+  --pad-dominance: #6b8cff;
 }
 
 * { box-sizing: border-box; }
@@ -60,7 +63,7 @@ body {
 .container {
   position: relative;
   max-width: 600px;
-  margin: 10vh auto;
+  margin: 6vh auto;
   padding: 0 24px 40px;
   z-index: 1;
 }
@@ -128,12 +131,33 @@ body {
   color: var(--text);
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid var(--border);
+  transition: all 0.2s ease;
 }
 .chip-ok {
   background: rgba(76, 224, 179, 0.15);
   color: var(--ok);
   border-color: rgba(76, 224, 179, 0.4);
 }
+.chip-pad {
+  background: rgba(255, 107, 157, 0.15);
+  color: var(--pad-pleasure);
+  border-color: rgba(255, 107, 157, 0.4);
+}
+.chip-classic {
+  background: rgba(69, 196, 255, 0.15);
+  color: var(--accent);
+  border-color: rgba(69, 196, 255, 0.4);
+}
+.chip-dance {
+  background: rgba(255, 200, 92, 0.15);
+  color: var(--pad-arousal);
+  border-color: rgba(255, 200, 92, 0.4);
+}
+.chip-breathing {
+  background: rgba(107, 140, 255, 0.15);
+  color: var(--pad-dominance);
+  border-color: rgba(107, 140, 255, 0.4);
+}
 
 .hidden { display: none; }
 label {
@@ -203,8 +227,106 @@ button.ghost:hover { border-color: rgba(94, 240, 193, 0.4); }
 .status.warn { color: var(--warn); }
 .status.error { color: var(--error); }
 
+/* Emotion Panel Styles */
+.emotion-details {
+  margin-top: 12px;
+}
+.emotion-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border);
+}
+.emotion-row:last-child {
+  border-bottom: none;
+}
+.emotion-label {
+  font-size: 13px;
+  color: var(--muted);
+}
+.emotion-value {
+  font-size: 14px;
+  color: var(--text);
+}
+
+/* Progress Bar */
+.progress-container {
+  margin-top: 16px;
+}
+.progress-bar {
+  height: 6px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+  overflow: hidden;
+}
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--accent), var(--accent-2));
+  border-radius: 3px;
+  transition: width 0.15s ease;
+}
+.progress-text {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+/* PAD Section */
+.pad-section {
+  margin-top: 20px;
+  padding-top: 16px;
+  border-top: 1px solid var(--border);
+}
+.section-title {
+  margin: 0 0 12px;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--muted);
+}
+.pad-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+.pad-item {
+  text-align: center;
+}
+.pad-bar-container {
+  height: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 8px;
+}
+.pad-bar {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.2s ease;
+  min-width: 2px;
+}
+.pad-pleasure { background: linear-gradient(90deg, #ff4777, var(--pad-pleasure)); }
+.pad-arousal { background: linear-gradient(90deg, #ff8c00, var(--pad-arousal)); }
+.pad-dominance { background: linear-gradient(90deg, #4a5eff, var(--pad-dominance)); }
+.pad-label {
+  display: block;
+  font-size: 11px;
+  color: var(--muted);
+  margin-bottom: 2px;
+}
+.pad-value {
+  display: block;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text);
+}
+
 @media (max-width: 760px) {
   .hero h1 { font-size: 26px; }
   button { width: 100%; justify-content: center; }
   .actions { flex-direction: column; align-items: flex-start; }
-}
+  .pad-grid { grid-template-columns: 1fr; gap: 12px; }
+}