Add GREETING state so recognised faces are shown in GUI and spoken

Previously, a matched face triggered speak() → goto_sleep() inline
inside the ACTIVE state, so the GUI state jumped straight to "sleeping"
and the user saw nothing.

Changes:
- New State.GREETING: entered as soon as a face is matched; sets
_shared["recognized_name"] so the GUI shows the name immediately,
before speak() is even called. If TTS is unavailable the name is
still visible in the control panel.
- /status now returns recognized_name alongside state.
- GUI: new green greeting-section div shows "Welcome back, <name>!"
when state is "greeting"; hidden in all other states.
- STATE_LABELS updated with greeting entry.
- Greeting section styled in style.css (green card).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

recognizer/main.py

@@ -32,6 +32,7 @@ class State(Enum):
     SLEEPING  = auto()
     WAKING    = auto()
     ACTIVE    = auto()
+    GREETING  = auto()   # known face found – show name in GUI, speak, then sleep
     ENROLLING = auto()
 
 
@@ -44,7 +45,8 @@ class Recognizer(ReachyMiniApp):
         _lock = threading.Lock()
         _shared: dict = {
             "state": "sleeping",
-            "pending_name": None,   # set by /set_name when ENROLLING
+            "pending_name": None,     # set by /set_name when ENROLLING
+            "recognized_name": None,  # set when a known face is found
         }
 
         # --- Settings-app REST endpoints ---
@@ -61,7 +63,10 @@ class Recognizer(ReachyMiniApp):
         @self.settings_app.get("/status")
         def get_status():
             with _lock:
-                return {"state": _shared["state"]}
+                return {
+                    "state": _shared["state"],
+                    "recognized_name": _shared["recognized_name"],
+                }
 
         # --- Initialise ---
         face_db = load_face_db()
@@ -71,6 +76,7 @@ class Recognizer(ReachyMiniApp):
         active_start = 0.0
         last_face_check = 0.0
         enrollment_frames: list[np.ndarray] = []
+        greeting_name = ""
         scan_t0 = 0.0             # reference time for head-scan idle animation
 
         reachy_mini.goto_sleep()
@@ -134,9 +140,10 @@ class Recognizer(ReachyMiniApp):
                         try:
                             name = find_match(frame, face_db)
                             if name:
-                                speak(f"Hi {name}!", reachy_mini)
-                                reachy_mini.goto_sleep()
-                                state = State.SLEEPING
+                                greeting_name = name
+                                with _lock:
+                                    _shared["recognized_name"] = name
+                                state = State.GREETING
                             else:
                                 speak(
                                     "I don't know you yet. "
@@ -157,6 +164,18 @@ class Recognizer(ReachyMiniApp):
 
                 time.sleep(0.05)
 
+            # ---------- GREETING ----------
+            elif state == State.GREETING:
+                with _lock:
+                    _shared["state"] = "greeting"
+                # Speak first; GUI already shows the name via /status.
+                # If TTS is unavailable the name remains visible in the UI.
+                speak(f"Hi {greeting_name}!", reachy_mini)
+                reachy_mini.goto_sleep()
+                with _lock:
+                    _shared["recognized_name"] = None
+                state = State.SLEEPING
+
             # ---------- ENROLLING ----------
             elif state == State.ENROLLING:
                 with _lock:

recognizer/static/index.html

@@ -15,6 +15,10 @@
         State: <strong id="state-label">—</strong>
     </div>
 
+    <div id="greeting-section" style="display:none;">
+        <p>Welcome back, <strong id="greeting-name"></strong>! 👋</p>
+    </div>
+
     <div id="enroll-section" style="display:none;">
         <p>A new face was detected. Enter the person's name:</p>
         <div id="enroll-form">

recognizer/static/main.js

@@ -2,6 +2,7 @@ const STATE_LABELS = {
     sleeping:  "😴 Sleeping – listening for noise",
     waking:    "⚡ Waking up…",
     active:    "👀 Active – looking for faces",
+    greeting:  "👋 Face recognised!",
     enrolling: "🆕 New face detected – waiting for name",
 };
 
@@ -19,6 +20,16 @@ async function pollStatus() {
             const label = document.getElementById("state-label");
             label.textContent = STATE_LABELS[newState] ?? newState;
 
+            // Greeting section: show recognised name
+            const greetingSection = document.getElementById("greeting-section");
+            if (newState === "greeting" && data.recognized_name) {
+                document.getElementById("greeting-name").textContent = data.recognized_name;
+                greetingSection.style.display = "block";
+            } else {
+                greetingSection.style.display = "none";
+            }
+
+            // Enroll section
             const enrollSection = document.getElementById("enroll-section");
             enrollSection.style.display = newState === "enrolling" ? "block" : "none";
 

recognizer/static/style.css

@@ -28,6 +28,17 @@ h1 {
     color: #1a73e8;
 }
 
+#greeting-section {
+    background: #e8f5e9;
+    border: 1px solid #66bb6a;
+    border-radius: 8px;
+    padding: 1.25rem;
+    margin-bottom: 1.5rem;
+    font-size: 1.1rem;
+    font-weight: 500;
+    color: #1b5e20;
+}
+
 #enroll-section {
     background: #fff;
     border: 1px solid #fbc02d;