feat: live status dashboard for the voice loop

Add a stdlib-only observability site so you can open a browser and watch, step by step: whether it is listening, what it heard, what the brain thought and answered, how long each stage took, and whether anything errored. - wsai/monitor.py: thread-safe telemetry hub (per-turn timed steps, status header, error log) with a pub/sub for live push. - wsai/dashboard.py: stdlib http.server serving a self-contained page plus an SSE (/events) live stream; /api/state snapshot fallback. - Pipeline emits step-by-step turn telemetry (화면 맥락 → 두뇌 → 응답) and listening/running status; optional monitor, so existing paths are untouched. - `python -m wsai --dashboard` starts the site (0.0.0.0:8787, WSAI_DASHBOARD_PORT) and loops the mock voice demo so there is always live activity to watch. - Tests cover turn recording, per-step timing, error marking, and live push. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-08-16 20:24:13 +09:00
parent 3d76cd6c52
commit 6b0755e1ff
7 changed files with 780 additions and 21 deletions
--- a/wsai/dashboard.py
+++ b/wsai/dashboard.py
@@ -0,0 +1,328 @@
+"""Live status website for the voice loop.
+
+Serves a single self-contained page plus a Server-Sent-Events stream so you can
+open a browser and watch, step by step: is it listening, what it heard, what it
+thought/answered, how long each stage took, and whether anything errored.
+
+Pure stdlib (``http.server``). Runs in a background thread so it never blocks
+the asyncio pipeline.
+
+Endpoints:
+    GET /            -> the dashboard HTML
+    GET /api/state   -> JSON snapshot (initial load / fallback polling)
+    GET /events      -> text/event-stream live push
+"""
+
+from __future__ import annotations
+
+import json
+import logging
+import queue
+import threading
+from http.server import BaseHTTPRequestHandler, ThreadingHTTPServer
+
+from .monitor import Monitor
+
+log = logging.getLogger("wsai.dashboard")
+
+
+def _make_handler(monitor: Monitor):
+    class Handler(BaseHTTPRequestHandler):
+        # Quiet: don't spam the console with one line per request.
+        def log_message(self, *args) -> None:  # noqa: D401
+            return
+
+        def _send(self, code: int, body: bytes, ctype: str) -> None:
+            self.send_response(code)
+            self.send_header("Content-Type", ctype)
+            self.send_header("Content-Length", str(len(body)))
+            self.send_header("Cache-Control", "no-store")
+            self.end_headers()
+            self.wfile.write(body)
+
+        def do_GET(self) -> None:  # noqa: N802
+            path = self.path.split("?", 1)[0]
+            if path == "/" or path == "/index.html":
+                self._send(200, PAGE.encode("utf-8"), "text/html; charset=utf-8")
+            elif path == "/api/state":
+                body = json.dumps(monitor.snapshot(), ensure_ascii=False).encode("utf-8")
+                self._send(200, body, "application/json; charset=utf-8")
+            elif path == "/events":
+                self._stream_events()
+            else:
+                self._send(404, b"not found", "text/plain; charset=utf-8")
+
+        def _stream_events(self) -> None:
+            self.send_response(200)
+            self.send_header("Content-Type", "text/event-stream; charset=utf-8")
+            self.send_header("Cache-Control", "no-store")
+            self.send_header("Connection", "keep-alive")
+            self.end_headers()
+            q = monitor.subscribe()
+            try:
+                # Prime the client with a full snapshot so it renders instantly.
+                first = json.dumps(
+                    {"type": "snapshot", "snapshot": monitor.snapshot()},
+                    ensure_ascii=False,
+                )
+                self.wfile.write(f"data: {first}\n\n".encode("utf-8"))
+                self.wfile.flush()
+                while True:
+                    try:
+                        data = q.get(timeout=15)
+                    except queue.Empty:
+                        # Heartbeat keeps proxies / the browser from timing out.
+                        self.wfile.write(b": ping\n\n")
+                        self.wfile.flush()
+                        continue
+                    self.wfile.write(f"data: {data}\n\n".encode("utf-8"))
+                    self.wfile.flush()
+            except (BrokenPipeError, ConnectionResetError):
+                pass
+            finally:
+                monitor.unsubscribe(q)
+
+    return Handler
+
+
+class Dashboard:
+    """Owns the HTTP server thread."""
+
+    def __init__(self, monitor: Monitor, host: str = "0.0.0.0", port: int = 8787) -> None:
+        self.monitor = monitor
+        self.host = host
+        self.port = port
+        self._server: ThreadingHTTPServer | None = None
+        self._thread: threading.Thread | None = None
+
+    def start(self) -> None:
+        handler = _make_handler(self.monitor)
+        self._server = ThreadingHTTPServer((self.host, self.port), handler)
+        self._server.daemon_threads = True
+        self._thread = threading.Thread(
+            target=self._server.serve_forever, name="wsai-dashboard", daemon=True
+        )
+        self._thread.start()
+        log.info("dashboard on http://%s:%d", self.host, self.port)
+
+    def stop(self) -> None:
+        if self._server is not None:
+            self._server.shutdown()
+            self._server.server_close()
+            self._server = None
+
+
+# --------------------------------------------------------------------------- #
+# The page. One file, no external assets, so it works offline / behind a LAN.
+# --------------------------------------------------------------------------- #
+PAGE = r"""<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>watch_sceen_ai · 실시간 상태</title>
+<style>
+  :root{
+    --bg:#0b0f14; --panel:#131a22; --panel2:#0f151c; --line:#223040;
+    --fg:#e6edf3; --muted:#8aa0b2; --accent:#3fb6ff; --ok:#37d67a;
+    --err:#ff5c6c; --warn:#ffc857; --heard:#7aa2ff; --reply:#b28bff;
+  }
+  *{box-sizing:border-box}
+  body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
+    background:var(--bg);color:var(--fg);line-height:1.5}
+  header{position:sticky;top:0;z-index:5;background:linear-gradient(180deg,#0d141c,#0b0f14);
+    border-bottom:1px solid var(--line);padding:14px 20px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
+  h1{font-size:16px;margin:0;font-weight:650;letter-spacing:.2px}
+  .sub{color:var(--muted);font-size:12px}
+  .pill{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;
+    background:var(--panel);border:1px solid var(--line);font-size:12.5px;color:var(--muted)}
+  .dot{width:9px;height:9px;border-radius:50%;background:#556}
+  .dot.live{background:var(--ok);box-shadow:0 0 0 0 rgba(55,214,122,.6);animation:pulse 1.6s infinite}
+  .dot.off{background:#556}
+  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(55,214,122,.55)}70%{box-shadow:0 0 0 9px rgba(55,214,122,0)}100%{box-shadow:0 0 0 0 rgba(55,214,122,0)}}
+  .stats{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
+  .stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px 12px;min-width:78px}
+  .stat b{display:block;font-size:16px}
+  .stat span{color:var(--muted);font-size:11px}
+  main{max-width:1000px;margin:0 auto;padding:18px 20px 60px}
+  .comp{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 18px}
+  .comp .pill{font-size:11.5px}
+  .turn{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:12px 0;
+    animation:rise .25s ease}
+  @keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
+  .turn.active{border-color:#2b5d86;box-shadow:0 0 0 1px #14324a inset}
+  .turn.error{border-color:#5c2530}
+  .trow{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
+  .badge{font-size:11px;padding:2px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
+  .badge.ok{color:var(--ok);border-color:#1f5236}
+  .badge.error{color:var(--err);border-color:#5c2530}
+  .badge.active{color:var(--accent);border-color:#234a63}
+  .time{color:var(--muted);font-size:11.5px;margin-left:auto}
+  .line{display:flex;gap:9px;margin:5px 0;align-items:flex-start}
+  .tag{flex:0 0 42px;font-size:11px;color:var(--muted);padding-top:2px}
+  .heard{color:var(--heard);font-weight:550}
+  .reply{color:var(--reply);font-weight:550}
+  .steps{margin-top:10px;border-top:1px dashed var(--line);padding-top:10px;display:flex;flex-direction:column;gap:6px}
+  .step{display:grid;grid-template-columns:120px 1fr 66px;gap:10px;align-items:center;font-size:12.5px}
+  .step .sname{color:var(--muted)}
+  .step .sbar{height:8px;background:var(--panel2);border-radius:6px;overflow:hidden;border:1px solid var(--line)}
+  .step .sfill{height:100%;background:linear-gradient(90deg,#2b7bb0,#3fb6ff)}
+  .step.err .sfill{background:linear-gradient(90deg,#7a2531,#ff5c6c)}
+  .step .sms{text-align:right;color:var(--fg);font-variant-numeric:tabular-nums}
+  .step .serr{grid-column:1 / -1;color:var(--err);font-size:11.5px}
+  .total{margin-top:8px;font-size:12px;color:var(--muted)}
+  .total b{color:var(--fg)}
+  .empty{color:var(--muted);text-align:center;padding:50px 0;font-size:14px}
+  .events{margin-top:26px}
+  .events h2{font-size:13px;color:var(--muted);font-weight:600;margin:0 0 8px}
+  .ev{font-size:12px;color:var(--muted);padding:3px 0;border-bottom:1px solid #16202b;display:flex;gap:10px}
+  .ev.error{color:var(--err)}
+  .ev .et{flex:0 0 68px;color:#5f7488}
+  code{background:#0c1219;padding:1px 5px;border-radius:5px;border:1px solid var(--line)}
+</style>
+</head>
+<body>
+<header>
+  <div>
+    <h1>watch_sceen_ai · 실시간 상태</h1>
+    <div class="sub">STT → 두뇌 → TTS 음성 루프를 단계별로 관찰</div>
+  </div>
+  <div class="pill"><span id="dot" class="dot off"></span><span id="listen">연결 대기</span></div>
+  <div class="stats">
+    <div class="stat"><b id="s-turns">0</b><span>대화 수</span></div>
+    <div class="stat"><b id="s-errors">0</b><span>오류</span></div>
+    <div class="stat"><b id="s-up">0초</b><span>가동시간</span></div>
+    <div class="stat"><b id="s-conn">·</b><span>연결</span></div>
+  </div>
+</header>
+<main>
+  <div class="comp" id="comp"></div>
+  <div id="turns"></div>
+  <div id="empty" class="empty">아직 대화가 없습니다. 사용자가 말하면 여기에 단계별로 나타납니다.</div>
+  <div class="events">
+    <h2>이벤트 / 오류 로그</h2>
+    <div id="events"></div>
+  </div>
+</main>
+<script>
+const $ = (id)=>document.getElementById(id);
+const turns = new Map();   // id -> turn object
+let statusData = null;
+
+function fmtTime(wall){
+  const d = new Date(wall*1000);
+  return d.toLocaleTimeString('ko-KR',{hour12:false}) +
+    '.' + String(d.getMilliseconds()).padStart(3,'0');
+}
+function fmtUptime(s){
+  s = Math.floor(s||0);
+  const h=Math.floor(s/3600), m=Math.floor(s%3600/60), sec=s%60;
+  if(h) return h+'시간 '+m+'분';
+  if(m) return m+'분 '+sec+'초';
+  return sec+'초';
+}
+function esc(t){const d=document.createElement('div');d.textContent=t==null?'':t;return d.innerHTML;}
+
+function renderStatus(s){
+  statusData = s;
+  $('s-turns').textContent = s.turns_total ?? 0;
+  $('s-errors').textContent = s.errors_total ?? 0;
+  $('s-up').textContent = fmtUptime(s.uptime_s);
+  const listening = s.listening;
+  $('dot').className = 'dot ' + (listening ? 'live' : 'off');
+  $('listen').textContent = listening ? '듣는 중' : (s.running ? '실행 중 (대기)' : '중지됨');
+  const comps = s.components || {};
+  const el = $('comp'); el.innerHTML = '';
+  const names = {source:'눈(소스)', vision:'시각', stt:'귀(STT)', brain:'두뇌', tts:'입(TTS)', text:'텍스트'};
+  for(const k of Object.keys(names)){
+    if(!(k in comps)) continue;
+    const v = comps[k];
+    const p = document.createElement('span');
+    p.className = 'pill';
+    p.innerHTML = '<span class="dot '+(v && v!=='none'?'live':'off')+'"></span>'+names[k]+': <b>&nbsp;'+esc(v||'off')+'</b>';
+    el.appendChild(p);
+  }
+}
+function setConn(ok){ $('s-conn').textContent = ok ? '●' : '○'; $('s-conn').style.color = ok ? 'var(--ok)':'var(--err)'; }
+
+function maxMs(steps){ let m=1; for(const s of steps) m=Math.max(m, s.ms||0); return m; }
+
+function turnEl(t){
+  const wrap = document.createElement('div');
+  wrap.className = 'turn ' + (t.status||'active');
+  wrap.id = 'turn-'+t.id;
+  const mx = maxMs(t.steps);
+  let steps = '';
+  for(const s of (t.steps||[])){
+    const pct = Math.max(3, Math.round((s.ms||0)/mx*100));
+    const err = s.ok===false;
+    steps += '<div class="step'+(err?' err':'')+'">'
+      + '<span class="sname">'+esc(s.name)+'</span>'
+      + '<span class="sbar"><span class="sfill" style="width:'+pct+'%"></span></span>'
+      + '<span class="sms">'+ (s.ms!=null? s.ms.toFixed(0)+' ms':'…') +'</span>'
+      + (err && s.error ? '<span class="serr">⚠ '+esc(s.error)+'</span>':'')
+      + '</div>';
+  }
+  const badge = t.status==='ok' ? '<span class="badge ok">정상</span>'
+    : t.status==='error' ? '<span class="badge error">오류</span>'
+    : '<span class="badge active">진행 중…</span>';
+  wrap.innerHTML =
+    '<div class="trow">'+badge
+      +'<span class="badge">#'+t.id+' · '+esc(t.source||'voice')+'</span>'
+      +'<span class="time">'+fmtTime(t.wall)+'</span></div>'
+    +'<div class="line"><span class="tag">들음</span><span class="heard">'+(t.heard?esc(t.heard):'<i style="color:var(--muted)">(수신 대기)</i>')+'</span></div>'
+    +'<div class="line"><span class="tag">답변</span><span class="reply">'+(t.reply?esc(t.reply):'<i style="color:var(--muted)">…생각 중</i>')+'</span></div>'
+    +(t.error?'<div class="line"><span class="tag">오류</span><span style="color:var(--err)">'+esc(t.error)+'</span></div>':'')
+    +'<div class="steps">'+steps+'</div>'
+    +'<div class="total">총 소요 <b>'+(t.total_ms?t.total_ms.toFixed(0)+' ms':'…')+'</b></div>';
+  return wrap;
+}
+
+function upsertTurn(t){
+  turns.set(t.id, t);
+  $('empty').style.display = 'none';
+  const cont = $('turns');
+  const existing = $('turn-'+t.id);
+  const fresh = turnEl(t);
+  if(existing){ existing.replaceWith(fresh); }
+  else { cont.prepend(fresh); }
+}
+
+function addEvent(e){
+  const box = $('events');
+  const row = document.createElement('div');
+  row.className = 'ev ' + (e.level==='error'?'error':'');
+  row.innerHTML = '<span class="et">'+fmtTime(e.wall)+'</span><span>'+esc(e.message)+'</span>';
+  box.prepend(row);
+  while(box.childElementCount>60) box.removeChild(box.lastChild);
+}
+
+function applySnapshot(snap){
+  renderStatus(snap.status);
+  turns.clear(); $('turns').innerHTML='';
+  const list = (snap.turns||[]);
+  for(const t of list) upsertTurn(t);
+  if(list.length===0){ $('empty').style.display='block'; }
+  $('events').innerHTML='';
+  for(const e of (snap.events||[])) addEvent(e);
+}
+
+function connect(){
+  const es = new EventSource('/events');
+  es.onopen = ()=> setConn(true);
+  es.onerror = ()=> setConn(false);
+  es.onmessage = (m)=>{
+    let ev; try{ ev = JSON.parse(m.data); }catch(_){ return; }
+    if(ev.type==='snapshot') applySnapshot(ev.snapshot);
+    else if(ev.type==='status') renderStatus(ev.status);
+    else if(ev.type==='turn') upsertTurn(ev.turn);
+    else if(ev.type==='log') { addEvent(ev); if(statusData){ statusData.errors_total=(statusData.errors_total||0)+(ev.level==='error'?1:0); $('s-errors').textContent=statusData.errors_total; } }
+  };
+}
+connect();
+// Refresh uptime label every second from the last known status.
+setInterval(()=>{ if(statusData){ statusData.uptime_s=(statusData.uptime_s||0)+1; $('s-up').textContent=fmtUptime(statusData.uptime_s);} }, 1000);
+</script>
+</body>
+</html>
+"""