Fix Control entry flow, hide persona editor, polish dashboard

Operators opening the app in Reachy Mini Control landed on the persona/
API console (raw prompt + tools.txt editing) instead of the dashboard.

- index.html now redirects straight to /dashboard so the dashboard is
the greeting screen
- Move the persona/prompt/tools studio into personality.html (markup
unchanged so main.js keeps driving it), reachable from a new
"Advanced" button in the dashboard header
- Dashboard polish: de-duplicate State (top strip now shows Known
Guests instead of a second State pill), collapse the developer-only
"Last Face Event -> Model" block, wrap the header for Control's narrow
panel, warmer empty states
- Fix header face confidence rendering: it multiplied an LBPH distance
by 100 and showed nonsense like "5037%"; now shows the raw LBPH value,
consistent with the rest of the UI

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/reachy_mini_receptionist/static/dashboard.html

@@ -289,6 +289,7 @@
 
     header {
       display: flex; align-items: center; gap: 12px;
+      flex-wrap: wrap; row-gap: 10px;   /* wrap cleanly in Control's narrow panel */
       padding: 14px 24px; border-bottom: 1px solid var(--border);
       background: var(--panel);
     }
@@ -398,6 +399,16 @@
       letter-spacing: 0.08em; color: var(--muted);
       padding: 0 8px 6px; text-align: center;
     }
+    /* Collapsible wrapper — developer detail, closed by default so the
+       camera panel reads clean during a demo. */
+    details.best-face-events-panel > summary {
+      cursor: pointer; list-style: none; user-select: none;
+    }
+    details.best-face-events-panel > summary::-webkit-details-marker { display: none; }
+    details.best-face-events-panel > summary::after {
+      content: ' ▸'; color: var(--muted); font-size: 0.7rem;
+    }
+    details.best-face-events-panel[open] > summary::after { content: ' ▾'; }
     .event-compact-list { list-style: none; display: flex; flex-direction: column; gap: 4px; padding: 0 8px 8px; }
     .event-compact-item { padding: 4px 0; border-top: 1px solid rgba(255,255,255,0.05); }
     .event-compact-key {
@@ -948,8 +959,17 @@
        onerror="this.style.display='none'; this.nextElementSibling.style.display='inline';" />
   <span class="brand-logo-fallback" style="font-size:1.4rem; display:none;">🤖</span>
   <h1>MethdAI Receptionist</h1>
+  <!-- Advanced / Developer: opens the persona + prompt + tools studio.
+       Kept off the default flow (operators land on this dashboard, not the
+       studio); this is the deliberate escape hatch for editing the robot's
+       personality when you actually need to. -->
+  <a class="btn" id="btn-advanced" href="/static/personality.html"
+     style="margin-left:auto; text-decoration:none;"
+     title="Developer: edit the robot's persona, prompt & enabled tools">
+    🧑‍💻 Advanced
+  </a>
   <button class="btn icon-only" id="btn-theme-toggle"
-          style="margin-left:auto"
+          style="margin-left:8px"
           title="Toggle light / dark theme">
     <span id="theme-toggle-icon">🌙</span>
   </button>
@@ -973,7 +993,7 @@
     <button id="volume-mute" style="background:none; border:none; cursor:pointer;
             color:var(--text); font-size:0.95rem; padding:0; line-height:1;">🔊</button>
     <input type="range" id="volume-slider" min="0" max="100" value="80"
-           style="width:90px; accent-color:var(--accent);" />
+           style="width:72px; accent-color:var(--accent);" />
     <span id="volume-label" style="min-width:32px; text-align:right;">—</span>
   </div>
 
@@ -1020,12 +1040,14 @@
       <span class="stat-value dim" id="stat-last-visit">—</span>
       <span class="stat-sub" id="stat-last-visit-time">—</span>
     </div>
+    <!-- Known Guests KPI. Replaced the old "Current State" card here — that
+         value was a duplicate of the State pill in the Active Session panel
+         below. The authoritative live state (with the journey trail + LLM
+         cue) lives there; this slot now surfaces a non-duplicative metric. -->
     <div class="stat-card">
-      <span class="stat-label">Current State</span>
-      <span class="stat-value dim" id="stat-current-state-wrap">
-        <span class="session-state-pill idle" id="stat-current-state">idle</span>
-      </span>
-      <span class="stat-sub" id="stat-current-visitor">No active visitor</span>
+      <span class="stat-label">Known Guests</span>
+      <span class="stat-value" id="stat-known-guests">—</span>
+      <span class="stat-sub">Registered faces</span>
     </div>
   </div>
 
@@ -1052,8 +1074,8 @@
           <div class="best-face-name unknown" id="best-face-name">—</div>
           <div class="best-face-meta" id="best-face-meta">No detection</div>
 
-          <div class="best-face-events-panel">
-            <div class="event-title">🧠 Last Face Event Sent To Model</div>
+          <details class="best-face-events-panel">
+            <summary class="event-title">🧠 Last Face Event → Model</summary>
             <ul class="event-compact-list">
               <li class="event-compact-item">
                 <div class="event-compact-key">Status</div>
@@ -1068,7 +1090,7 @@
                 <div class="event-compact-val" id="event-previous">—</div>
               </li>
             </ul>
-          </div>
+          </details>
         </div>
       </div>
     </div>
@@ -1142,7 +1164,7 @@
     </div>
     <div class="panel-body">
       <ul class="guest-list" id="guest-list">
-        <li class="empty">No guests registered yet</li>
+        <li class="empty">No visitors registered yet — new faces appear here after they check in.</li>
       </ul>
     </div>
   </div>
@@ -1155,7 +1177,7 @@
     </div>
     <div class="panel-body">
       <ul class="outbox-list" id="outbox-list">
-        <li class="empty">No emails sent yet</li>
+        <li class="empty">No host notifications yet — emails to hosts will appear here.</li>
       </ul>
     </div>
   </div>
@@ -1350,7 +1372,11 @@
       if (d.is_known) {
         dot.className = 'dot known';
         label.textContent = d.name;
-        conf.textContent = `${Math.round(d.confidence * 100)}%`;
+        // `confidence` is an LBPH *distance* (lower = better match), not a
+        // 0–1 probability — multiplying by 100 produced nonsense like
+        // "5037%" in the header. Show the raw LBPH value, consistent with
+        // the Best-Face panel and the session cue below.
+        conf.textContent = `LBPH ${(Number(d.confidence) || 0).toFixed(1)}`;
         overlay.textContent = `✓ Known: ${d.name}`;
         overlay.className = 'video-overlay known';
       } else {
@@ -1409,7 +1435,7 @@
       const r = await fetch(`${BASE}/api/calendar`);
       const appts = await r.json();
       const ul = document.getElementById('calendar-list');
-      if (!appts.length) { ul.innerHTML = '<li class="empty">No appointments today</li>'; return; }
+      if (!appts.length) { ul.innerHTML = "<li class=\"empty\">No appointments on today's calendar.</li>"; return; }
       ul.innerHTML = appts.map(a => `
         <li class="appt-item">
           <span class="appt-time">${a.time}</span>
@@ -1429,7 +1455,9 @@
       const guests = await r.json();
       const ul = document.getElementById('guest-list');
       document.getElementById('guest-count').textContent = guests.length ? `${guests.length}` : '';
-      if (!guests.length) { ul.innerHTML = '<li class="empty">No guests registered yet</li>'; return; }
+      const kg = document.getElementById('stat-known-guests');
+      if (kg) kg.textContent = `${guests.length}`;
+      if (!guests.length) { ul.innerHTML = '<li class="empty">No visitors registered yet — new faces appear here after they check in.</li>'; return; }
       ul.innerHTML = guests.map(g => `
         <li class="guest-item">
           <div class="guest-avatar">
@@ -1464,7 +1492,7 @@
       const ul = document.getElementById('outbox-list');
       document.getElementById('outbox-count').textContent = items.length ? `${items.length}` : '';
       if (!items.length) {
-        ul.innerHTML = '<li class="empty">No emails sent yet</li>';
+        ul.innerHTML = '<li class="empty">No host notifications yet — emails to hosts will appear here.</li>';
         _lastOutboxCount = 0;
         return;
       }
@@ -1545,13 +1573,8 @@
         lvTimeEl.textContent = 'No visits yet';
       }
 
-      const stateEl = document.getElementById('stat-current-state');
-      const state = d.current_state || 'idle';
-      stateEl.textContent = state.replaceAll('_', ' ');
-      stateEl.className = `session-state-pill ${state}`;
-
-      const visEl = document.getElementById('stat-current-visitor');
-      visEl.textContent = d.current_visitor ? `Visitor: ${d.current_visitor}` : 'No active visitor';
+      // Current state / visitor intentionally NOT rendered here anymore —
+      // they duplicated the Active Session panel. See the Known Guests card.
     } catch(e) {}
   }
 

src/reachy_mini_receptionist/static/index.html

@@ -3,118 +3,28 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Reachy Mini Conversation – Settings</title>
-    <link rel="stylesheet" href="/static/style.css" />
+    <title>MethdAI Receptionist</title>
+    <!-- The app landing page now goes straight to the operator dashboard.
+         The old persona/API console lived here and was the first thing an
+         operator saw in Reachy Mini Control — it exposed raw prompt/tools
+         editing that end users should never touch. That studio moved to
+         /static/personality.html and is reachable from the dashboard's
+         "Advanced" button. Redirect via meta-refresh + JS (covers Control's
+         embedded webview) with a manual link as a no-JS fallback. -->
+    <meta http-equiv="refresh" content="0; url=/dashboard" />
+    <script>
+      window.location.replace("/dashboard");
+    </script>
+    <style>
+      body {
+        margin: 0; min-height: 100vh; display: flex; align-items: center;
+        justify-content: center; background: #0e1118; color: #e2e8f0;
+        font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+      }
+      a { color: #818cf8; }
+    </style>
   </head>
   <body>
-    <div class="ambient"></div>
-    <div id="loading" class="loading">
-      <div class="spinner"></div>
-      <p>Loading…</p>
-    </div>
-    <div class="container">
-      <div class="dashboard-banner" role="navigation" aria-label="Dashboard quick link">
-        <a href="/dashboard">Open Receptionist Dashboard</a>
-      </div>
-
-      <header class="hero">
-        <div class="pill">Headless control</div>
-        <h1>Reachy Mini Conversation</h1>
-        <p class="subtitle">Configure your OpenAI key and tweak personalities without the full UI.</p>
-      </header>
-
-      <div id="configured" class="panel hidden">
-        <div class="panel-heading">
-          <div>
-            <p class="eyebrow">Credentials</p>
-            <h2>API key ready</h2>
-          </div>
-          <span class="chip chip-ok">Connected</span>
-        </div>
-        <p class="muted">OpenAI API key is already configured. You can jump straight to personalities.</p>
-        <button id="change-key-btn" class="ghost">Change API key</button>
-      </div>
-
-      <div id="form-panel" class="panel hidden">
-        <div class="panel-heading">
-          <div>
-            <p class="eyebrow">Credentials</p>
-            <h2>Connect OpenAI</h2>
-          </div>
-          <span class="chip">Required</span>
-        </div>
-        <p class="muted">Paste your API key once and we will store it locally for the headless conversation loop.</p>
-        <label for="api-key">OpenAI API Key</label>
-        <input id="api-key" type="password" placeholder="sk-..." autocomplete="off" />
-        <div class="actions">
-          <button id="save-btn">Save key</button>
-          <p id="status" class="status"></p>
-        </div>
-      </div>
-
-      <div id="personality-panel" class="panel hidden">
-        <div class="panel-heading">
-          <div>
-            <p class="eyebrow">Profiles</p>
-            <h2>Personality studio</h2>
-          </div>
-          <span class="chip">Live</span>
-        </div>
-        <p class="muted">Create lean instruction sets, toggle tools, and apply a voice for your Reachy Mini.</p>
-        <div class="section">
-          <div class="section-heading">
-            <h3>Select & launch</h3>
-            <p class="muted small">Pick a profile and choose what should launch on startup.</p>
-          </div>
-          <div class="row row-top">
-            <label for="personality-select">Select</label>
-            <select id="personality-select"></select>
-            <button id="persist-personality" class="ghost">Use on startup</button>
-            <button id="apply-personality" class="ghost">Apply</button>
-            <button id="new-personality" class="ghost">New</button>
-          </div>
-          <div class="row">
-            <label>Startup personality</label>
-            <div class="startup-row">
-              <span id="startup-label" class="chip">Built-in default</span>
-            </div>
-          </div>
-        </div>
-
-        <div class="section">
-          <div class="section-heading">
-            <h3>Create / edit</h3>
-            <p class="muted small">Adjust instructions, tools, and voice, then save your profile.</p>
-          </div>
-          <div class="row">
-            <label for="personality-name">Name</label>
-            <input id="personality-name" type="text" class="input-field" placeholder="my_profile" />
-            <label for="voice-select">Voice</label>
-            <select id="voice-select"></select>
-          </div>
-          <div class="row">
-            <label for="instructions-ta">Instructions</label>
-            <textarea id="instructions-ta" rows="8" placeholder="# Write your instructions here"></textarea>
-          </div>
-          <div class="row">
-            <label for="tools-ta">tools.txt</label>
-            <textarea id="tools-ta" rows="6" placeholder="# tools enabled for this profile"></textarea>
-          </div>
-          <div class="row">
-            <label for="tools-available">Available tools</label>
-            <div id="tools-available" class="checkbox-grid"></div>
-          </div>
-          <div class="row row-save">
-            <label></label>
-            <div class="actions">
-              <button id="save-personality">Save</button>
-            </div>
-          </div>
-        </div>
-        <p id="personality-status" class="status"></p>
-      </div>
-    </div>
-
-    <script src="/static/main.js"></script>
+    <p>Opening the Receptionist Dashboard… <a href="/dashboard">Continue</a></p>
   </body>
-  </html>
+</html>

src/reachy_mini_receptionist/static/personality.html

@@ -0,0 +1,120 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Advanced — Personality Studio</title>
+    <link rel="stylesheet" href="/static/style.css" />
+  </head>
+  <body>
+    <div class="ambient"></div>
+    <div id="loading" class="loading">
+      <div class="spinner"></div>
+      <p>Loading…</p>
+    </div>
+    <div class="container">
+      <div class="dashboard-banner" role="navigation" aria-label="Dashboard quick link">
+        <a href="/dashboard">← Back to Receptionist Dashboard</a>
+      </div>
+
+      <header class="hero">
+        <div class="pill">Advanced · Developer</div>
+        <h1>Personality studio</h1>
+        <p class="subtitle">Edit the robot's persona, prompt, and enabled tools. Not needed for normal operation.</p>
+      </header>
+
+      <div id="configured" class="panel hidden">
+        <div class="panel-heading">
+          <div>
+            <p class="eyebrow">Credentials</p>
+            <h2>API key ready</h2>
+          </div>
+          <span class="chip chip-ok">Connected</span>
+        </div>
+        <p class="muted">OpenAI API key is already configured. You can jump straight to personalities.</p>
+        <button id="change-key-btn" class="ghost">Change API key</button>
+      </div>
+
+      <div id="form-panel" class="panel hidden">
+        <div class="panel-heading">
+          <div>
+            <p class="eyebrow">Credentials</p>
+            <h2>Connect OpenAI</h2>
+          </div>
+          <span class="chip">Required</span>
+        </div>
+        <p class="muted">Paste your API key once and we will store it locally for the headless conversation loop.</p>
+        <label for="api-key">OpenAI API Key</label>
+        <input id="api-key" type="password" placeholder="sk-..." autocomplete="off" />
+        <div class="actions">
+          <button id="save-btn">Save key</button>
+          <p id="status" class="status"></p>
+        </div>
+      </div>
+
+      <div id="personality-panel" class="panel hidden">
+        <div class="panel-heading">
+          <div>
+            <p class="eyebrow">Profiles</p>
+            <h2>Personality studio</h2>
+          </div>
+          <span class="chip">Live</span>
+        </div>
+        <p class="muted">Create lean instruction sets, toggle tools, and apply a voice for your Reachy Mini.</p>
+        <div class="section">
+          <div class="section-heading">
+            <h3>Select & launch</h3>
+            <p class="muted small">Pick a profile and choose what should launch on startup.</p>
+          </div>
+          <div class="row row-top">
+            <label for="personality-select">Select</label>
+            <select id="personality-select"></select>
+            <button id="persist-personality" class="ghost">Use on startup</button>
+            <button id="apply-personality" class="ghost">Apply</button>
+            <button id="new-personality" class="ghost">New</button>
+          </div>
+          <div class="row">
+            <label>Startup personality</label>
+            <div class="startup-row">
+              <span id="startup-label" class="chip">Built-in default</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="section">
+          <div class="section-heading">
+            <h3>Create / edit</h3>
+            <p class="muted small">Adjust instructions, tools, and voice, then save your profile.</p>
+          </div>
+          <div class="row">
+            <label for="personality-name">Name</label>
+            <input id="personality-name" type="text" class="input-field" placeholder="my_profile" />
+            <label for="voice-select">Voice</label>
+            <select id="voice-select"></select>
+          </div>
+          <div class="row">
+            <label for="instructions-ta">Instructions</label>
+            <textarea id="instructions-ta" rows="8" placeholder="# Write your instructions here"></textarea>
+          </div>
+          <div class="row">
+            <label for="tools-ta">tools.txt</label>
+            <textarea id="tools-ta" rows="6" placeholder="# tools enabled for this profile"></textarea>
+          </div>
+          <div class="row">
+            <label for="tools-available">Available tools</label>
+            <div id="tools-available" class="checkbox-grid"></div>
+          </div>
+          <div class="row row-save">
+            <label></label>
+            <div class="actions">
+              <button id="save-personality">Save</button>
+            </div>
+          </div>
+        </div>
+        <p id="personality-status" class="status"></p>
+      </div>
+    </div>
+
+    <script src="/static/main.js"></script>
+  </body>
+  </html>