infinicode 2.8.36 → 2.8.37

package/dist/kernel/federation/dashboard-html.js

@@ -319,6 +319,170 @@ button.act:disabled{opacity:0.5;cursor:default;}
 .pk-kv .l{font-size:0.56rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted);}
 .pk-ctl{display:flex;gap:0.45rem;flex-wrap:wrap;}
 .pk-note{font-family:var(--mono);font-size:0.58rem;color:var(--gold);opacity:0.85;margin-top:0.4rem;}
+.pk-prodtoggle{display:flex;align-items:center;gap:0.5rem;margin-top:0.6rem;padding:0.45rem 0.6rem;border-radius:8px;border:1px solid var(--border-strong);background:var(--panel-2);cursor:pointer;}
+.pk-prodtoggle input{width:15px;height:15px;accent-color:var(--gold-bright,var(--gold));cursor:pointer;}
+.pk-prodtoggle span{font-family:var(--mono);font-size:0.66rem;color:var(--ink);}
+.pk-prodtoggle:has(input:checked){border-color:var(--ok);background:rgba(60,180,110,0.12);}
+.pk-svc-list{display:flex;flex-direction:column;gap:0.35rem;}
+.pk-svc-row{display:flex;align-items:center;gap:0.5rem;padding:0.4rem 0.55rem;border-radius:8px;border:1px solid var(--border-strong);background:var(--panel-2);font-family:var(--mono);font-size:0.64rem;}
+.pk-svc-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--muted);}
+.pk-svc-row.up .pk-svc-dot{background:var(--ok);box-shadow:0 0 6px var(--ok);}
+.pk-svc-row.down .pk-svc-dot{background:var(--bad);}
+.pk-svc-row.disabled .pk-svc-dot{background:var(--muted);}
+.pk-svc-name{font-weight:600;color:var(--ink);min-width:6.5em;}
+.pk-svc-meta{color:var(--muted);flex:1;}
+.pk-svc-restart-btn{font-size:0.6rem;padding:0.2rem 0.5rem;flex-shrink:0;}
+
+/* ── RoboPark Sessions & Telemetry — sub-tab control room ── */
+.rp-subtabs{display:flex;gap:0.15rem;padding:0 1.1rem;border-bottom:1px solid var(--glass-border);
+  background:var(--panel);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
+  position:sticky;top:97px;z-index:18;flex-wrap:wrap;}
+.rp-subtab{font-family:var(--mono);font-size:0.72rem;padding:0.55rem 0.85rem;cursor:pointer;color:var(--muted);background:none;border:none;
+  border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:0.4rem;transition:color .12s,border-color .12s;}
+.rp-subtab:hover{color:var(--ink);}
+.rp-subtab.active{color:var(--gold-bright);border-bottom-color:var(--gold-bright);text-shadow:0 0 14px color-mix(in srgb,var(--gold-bright) 55%,transparent);}
+.rp-subtab:focus-visible{outline:2px solid var(--gold-bright);outline-offset:-2px;}
+.rp-subtab .badge{font-family:var(--mono);font-size:0.6rem;padding:0.04em 0.45em;border-radius:100px;background:var(--panel-2);
+  border:1px solid var(--glass-border);color:var(--muted);font-weight:600;}
+.rp-subtab.active .badge{color:var(--gold-bright);border-color:var(--border-strong);}
+.rp-sub{display:none;padding:0.8rem 1.1rem 1.5rem;}
+.rp-sub.active{display:block;}
+
+.rp-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0.7rem;margin-bottom:0.9rem;}
+.rp-kpi{border-radius:13px;padding:0.7rem 0.85rem;background:var(--panel);
+  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
+  border:1px solid var(--glass-border);box-shadow:var(--shadow),inset 0 1px 0 var(--glass-hi);position:relative;overflow:hidden;}
+.rp-kpi::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,214,112,0.04),transparent 60%);}
+.rp-kpi .l{font-family:var(--mono);font-size:0.6rem;text-transform:uppercase;letter-spacing:0.07em;color:var(--muted);margin-bottom:0.25rem;}
+.rp-kpi .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.7rem;color:var(--ink);font-weight:600;line-height:1.1;}
+.rp-kpi .v.ok{color:var(--ok);} .rp-kpi .v.warn{color:var(--warn);} .rp-kpi .v.bad{color:var(--bad);} .rp-kpi .v.info{color:var(--info);}
+.rp-kpi .s{font-family:var(--mono);font-size:0.62rem;color:var(--muted);margin-top:0.2rem;}
+
+.rp-mini-chart-wrap{border-radius:13px;padding:0.7rem 0.85rem;background:var(--panel);
+  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
+  border:1px solid var(--glass-border);box-shadow:var(--shadow),inset 0 1px 0 var(--glass-hi);margin-bottom:0.9rem;}
+.rp-mini-chart-wrap h4{font-family:var(--mono);font-size:0.62rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold-bright);
+  margin-bottom:0.4rem;display:flex;justify-content:space-between;align-items:baseline;}
+.rp-mini-chart-wrap h4 .now{color:var(--muted);font-size:0.6rem;}
+.rp-mini-chart{width:100%;height:120px;display:block;}
+
+.rp-section-h{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold-bright);
+  margin:0.2rem 0 0.55rem;display:flex;align-items:center;gap:0.5rem;justify-content:space-between;}
+.rp-section-h .meta{color:var(--muted);font-size:0.62rem;text-transform:none;letter-spacing:0.02em;font-weight:400;}
+
+.rp-top3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0.6rem;margin-bottom:0.9rem;}
+.rp-top3 .rp-card{padding:0.55rem 0.7rem;}
+
+.rp-stream{border-radius:13px;background:var(--panel);
+  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
+  border:1px solid var(--glass-border);box-shadow:var(--shadow),inset 0 1px 0 var(--glass-hi);padding:0.55rem 0.7rem;max-height:300px;overflow-y:auto;}
+.rp-stream .line{padding:0.22rem 0.4rem;}
+.rp-stream .line .ic{font-size:0.8rem;flex:none;}
+
+.rp-filterbar{display:flex;gap:0.45rem;flex-wrap:wrap;align-items:center;padding:0.5rem 0.7rem;background:var(--panel-2);
+  border:1px solid var(--glass-border);border-radius:11px;margin-bottom:0.6rem;}
+.rp-filterbar .rp-field{flex:1;min-width:120px;max-width:240px;}
+.rp-filterbar .rp-field label{font-size:0.6rem;}
+.rp-filterbar .rp-field input,.rp-filterbar .rp-field select{font-size:0.7rem;padding:0.35rem 0.5rem;}
+.rp-filterbar .rp-btn{padding:0.32rem 0.55rem;}
+
+.rp-sess-table,.rp-history-table,.rp-audit-table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:0.7rem;background:var(--panel);
+  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
+  border:1px solid var(--glass-border);border-radius:11px;overflow:hidden;box-shadow:var(--shadow),inset 0 1px 0 var(--glass-hi);}
+.rp-sess-table th,.rp-history-table th,.rp-audit-table th{padding:0.55rem 0.7rem;text-align:left;font-weight:600;
+  font-size:0.6rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold-bright);background:var(--panel-2);
+  border-bottom:1px solid var(--glass-border);position:sticky;top:0;z-index:1;}
+.rp-sess-table td,.rp-history-table td,.rp-audit-table td{padding:0.5rem 0.7rem;border-bottom:1px solid var(--glass-border);
+  color:var(--ink);vertical-align:middle;}
+.rp-sess-table tr:last-child td,.rp-history-table tr:last-child td,.rp-audit-table tr:last-child td{border-bottom:none;}
+.rp-sess-table tr:hover td,.rp-history-table tr:hover td,.rp-audit-table tr:hover td{background:color-mix(in srgb,var(--gold-bright) 5%,transparent);}
+.rp-sess-table .sid,.rp-history-table .sid{font-size:0.62rem;color:var(--muted);max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:middle;}
+.rp-sess-table .t-rel{color:var(--ink);display:block;font-size:0.7rem;}
+.rp-sess-table .t-abs{color:var(--muted);font-size:0.58rem;}
+.rp-sess-table .live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px var(--ok);margin-right:0.4rem;animation:pulse 2.4s infinite;vertical-align:middle;}
+.rp-tbl-wrap{max-height:520px;overflow:auto;border-radius:11px;}
+.rp-tbl-pager{display:flex;justify-content:space-between;align-items:center;padding:0.55rem 0.2rem;gap:0.5rem;font-family:var(--mono);font-size:0.66rem;color:var(--muted);}
+.rp-tbl-pager .rp-btn{padding:0.3rem 0.55rem;}
+.rp-tbl-empty{padding:1.5rem;text-align:center;color:var(--muted);font-family:var(--mono);font-size:0.75rem;}
+.rp-end-badge{display:inline-block;padding:0.05em 0.45em;border-radius:5px;font-size:0.6rem;font-family:var(--mono);
+  border:1px solid var(--glass-border);color:var(--muted);background:var(--panel-2);}
+.rp-end-badge.operator{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:var(--bad-bg);}
+.rp-end-badge.silence{color:var(--muted);}
+.rp-end-badge.error{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:var(--bad-bg);}
+.rp-end-badge.timeout{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:var(--warn-bg);}
+.rp-end-badge.completed{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:var(--ok-bg);}
+.rp-end-badge.active,.rp-end-badge.running{color:var(--ok);border-color:color(--ok);background:var(--ok-bg);}
+
+.rp-cat-chip{font-family:var(--mono);font-size:0.62rem;padding:0.28em 0.7em;border-radius:100px;
+  border:1px solid var(--glass-border);background:var(--panel-2);color:var(--muted);cursor:pointer;
+  display:inline-flex;align-items:center;gap:0.3rem;transition:all .12s;}
+.rp-cat-chip:hover{color:var(--ink);border-color:var(--border-strong);}
+.rp-cat-chip.active{color:var(--gold-bright);border-color:var(--gold-bright);background:color-mix(in srgb,var(--gold-bright) 10%,transparent);}
+.rp-cat-chip .ct{font-size:0.55rem;opacity:0.8;}
+
+.rp-modal-back{position:fixed;inset:0;z-index:60;background:rgba(4,3,12,0.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
+  display:none;align-items:flex-start;justify-content:center;padding:6vh 1rem 1rem;overflow-y:auto;}
+.rp-modal-back.open{display:flex;}
+.rp-modal{position:relative;width:min(720px,100%);max-height:80vh;background:linear-gradient(180deg,var(--panel-2),var(--panel));
+  -webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);
+  border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,0.55);display:flex;flex-direction:column;overflow:hidden;}
+.rp-modal-head{display:flex;align-items:center;gap:0.6rem;padding:0.8rem 1rem;border-bottom:1px solid var(--glass-border);background:var(--panel-2);}
+.rp-modal-head h3{font-family:var(--mono);font-size:0.86rem;font-weight:600;color:var(--gold-bright);flex:1;word-break:break-word;}
+.rp-modal-head .x{background:var(--panel-2);border:1px solid var(--glass-border);color:var(--muted);border-radius:9px;
+  width:30px;height:30px;cursor:pointer;font-size:0.95rem;flex:none;}
+.rp-modal-head .x:hover{color:var(--ink);border-color:var(--border-strong);}
+.rp-modal-body{padding:1rem;overflow-y:auto;flex:1;font-family:var(--mono);font-size:0.72rem;line-height:1.5;color:var(--ink);}
+.rp-modal-body .kv{display:grid;grid-template-columns:160px 1fr;gap:0.4rem 0.8rem;margin-bottom:0.4rem;}
+.rp-modal-body .kv .k{color:var(--muted);font-size:0.66rem;text-transform:uppercase;letter-spacing:0.05em;}
+.rp-modal-body .kv .v{color:var(--ink);word-break:break-word;white-space:pre-wrap;}
+.rp-modal-body pre{background:var(--panel-solid);border:1px solid var(--glass-border);border-radius:8px;padding:0.5rem 0.7rem;
+  font-size:0.66rem;max-height:240px;overflow:auto;white-space:pre-wrap;word-break:break-word;color:var(--ink);}
+
+/* ── TTS voice picker (used inside the generic modal) ── */
+.rp-voice-picker{display:flex;flex-direction:column;gap:0.6rem;min-height:320px;}
+.rp-voice-picker-toolbar{display:flex;gap:0.4rem;align-items:stretch;}
+.rp-voice-picker-toolbar input[type=search]{flex:1;min-width:0;font-family:var(--mono);font-size:0.78rem;background:var(--panel-solid);border:1px solid var(--glass-border);color:var(--ink);border-radius:8px;padding:0.5rem 0.7rem;}
+.rp-voice-picker-toolbar input[type=search]:focus{outline:none;border-color:var(--gold-bright);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold-bright) 18%,transparent);}
+.rp-voice-picker-status{font-size:0.66rem;color:var(--muted);display:flex;align-items:center;gap:0.5rem;min-height:1.1em;}
+.rp-voice-picker-status.busy{color:var(--gold-bright);}
+.rp-voice-picker-status.bad{color:var(--bad);}
+.rp-voice-picker-status.warn{color:var(--warn,#e0a23a);}
+.rp-voice-picker-status .rp-mono{font-family:var(--mono);}
+.rp-voice-picker-status .rp-spinner{display:inline-block;width:0.8em;height:0.8em;border:2px solid color-mix(in srgb,var(--gold-bright) 30%,transparent);border-top-color:var(--gold-bright);border-radius:50%;animation:rp-vp-spin 0.8s linear infinite;margin-right:0.25rem;}
+@keyframes rp-vp-spin{to{transform:rotate(360deg);}}
+.rp-voice-picker-results{display:flex;flex-direction:column;gap:0.7rem;max-height:55vh;overflow-y:auto;padding-right:0.25rem;}
+.rp-voice-picker-empty{color:var(--muted);font-style:italic;padding:1rem;text-align:center;border:1px dashed var(--glass-border);border-radius:8px;}
+.rp-vp-group{display:flex;flex-direction:column;gap:0.3rem;}
+.rp-vp-group-head{font-family:var(--mono);font-size:0.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;padding:0.1rem 0.2rem;}
+.rp-vp-item{display:block;text-align:left;width:100%;background:var(--panel-solid);border:1px solid var(--glass-border);border-radius:8px;padding:0.5rem 0.7rem;cursor:pointer;color:var(--ink);font-family:var(--mono);transition:border-color .12s, background .12s, transform .04s;}
+.rp-vp-item:hover{border-color:var(--gold-bright);background:color-mix(in srgb,var(--gold-bright) 6%,var(--panel-solid));}
+.rp-vp-item:active{transform:translateY(1px);}
+.rp-vp-item:focus-visible{outline:2px solid var(--gold-bright);outline-offset:1px;}
+.rp-vp-row1{display:flex;align-items:baseline;gap:0.5rem;justify-content:space-between;}
+.rp-vp-name{font-size:0.78rem;font-weight:600;color:var(--ink);}
+.rp-vp-meta{font-size:0.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;flex:none;}
+.rp-vp-id{font-size:0.62rem;color:var(--muted);margin-top:0.1rem;word-break:break-all;}
+.rp-vp-desc{font-size:0.64rem;color:var(--muted);margin-top:0.2rem;line-height:1.4;}
+.rp-voice-picker-foot{font-size:0.6rem;color:var(--muted);text-align:center;padding-top:0.2rem;border-top:1px solid var(--glass-border);}
+.rp-voice-picker-foot .rp-muted{color:var(--muted);}
+
+.rp-fleet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:0.7rem;padding:0;}
+.rp-fleet-card{position:relative;}
+.rp-fleet-card .spark{margin-top:0.5rem;height:36px;}
+.rp-fleet-card .rp-actions{margin-top:0.6rem;}
+.rp-fleet-card .pulse{position:absolute;top:0.75rem;right:0.85rem;display:flex;align-items:center;gap:0.35rem;font-family:var(--mono);font-size:0.6rem;color:var(--muted);}
+.rp-fleet-card .pulse .dot{width:8px;height:8px;border-radius:50%;background:var(--muted);}
+.rp-fleet-card .pulse.live .dot{background:var(--ok);box-shadow:0 0 8px var(--ok);animation:pulse 2.4s infinite;}
+.rp-fleet-card .pulse.idle .dot{background:var(--muted);}
+.rp-fleet-card .pulse.offline .dot{background:var(--bad);}
+.rp-spark{width:100%;height:36px;display:block;opacity:0.92;}
+
+.rp-setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.9rem;}
+@media (max-width:980px){.rp-setup-grid{grid-template-columns:1fr;}}
+
+.rp-form .rp-form{margin:0.5rem 0 0;padding:0.6rem 0.75rem;}
+
+.rp-input-grow{flex:1;min-width:140px;}
 </style>
 </head>
 <body>
@@ -395,120 +559,264 @@ button.act:disabled{opacity:0.5;cursor:default;}
     </div>
   </div>
 
-  <!-- Add LiveKit server -->
-  <div class="rp-form" id="rp-addserver">
-    <h3>Add LiveKit server</h3>
-    <div class="rp-quickrow">
-      <div class="rp-field"><label>Name</label><input id="srv-name" placeholder="LiveKit Server 1"></div>
-      <button class="rp-btn primary" id="srv-detect" style="height:fit-content" title="Probes this hub's own host + common local ports for a running LiveKit instance">🔍 Auto-detect &amp; fill</button>
-      <button class="rp-btn" id="srv-add" style="height:fit-content">Add server</button>
+  <!-- Sub-tab nav bar (sticky, just under main tabs) -->
+  <div class="rp-subtabs" id="rp-subtabs" role="tablist">
+    <button class="rp-subtab active" data-sub="overview" id="rpsbtn-overview" role="tab" aria-selected="true">Overview</button>
+    <button class="rp-subtab" data-sub="live" id="rpsbtn-live" role="tab" aria-selected="false">Live Sessions <span class="badge" id="rps-live-badge">0</span></button>
+    <button class="rp-subtab" data-sub="history" id="rpsbtn-history" role="tab" aria-selected="false">History</button>
+    <button class="rp-subtab" data-sub="audit" id="rpsbtn-audit" role="tab" aria-selected="false">Audit Log</button>
+    <button class="rp-subtab" data-sub="fleet" id="rpsbtn-fleet" role="tab" aria-selected="false">Fleet</button>
+    <button class="rp-subtab" data-sub="setup" id="rpsbtn-setup" role="tab" aria-selected="false">Setup</button>
+  </div>
+
+  <!-- ═══ Overview ═══ -->
+  <div class="rp-sub active" id="rp-sub-overview">
+    <div class="rp-kpi-grid" id="rp-overview-kpis"></div>
+    <div class="rp-mini-chart-wrap">
+      <h4>Fleet health · sessions (last 60 min) <span class="now" id="rp-overview-now">—</span></h4>
+      <canvas class="rp-mini-chart" id="rp-overview-chart" aria-label="Sessions over time"></canvas>
     </div>
-    <div class="rp-autonote" id="srv-autonote"></div>
-    <details class="rp-advanced">
-      <summary>Advanced — ID, URL, credentials, capacity</summary>
-      <div class="rp-advanced-grid">
-        <div class="rp-field"><label>ID</label><input id="srv-id" placeholder="auto-filled from name"></div>
-        <div class="rp-field"><label>URL (ws:// or wss://)</label><input id="srv-url" placeholder="ws://host:7880 — auto-detect fills this"></div>
-        <div class="rp-field"><label>API key</label><input id="srv-key" placeholder="devkey" value="devkey"></div>
-        <div class="rp-field"><label>API secret</label><input type="password" id="srv-secret" placeholder="secretsecretsecretsecretsecretsecret"></div>
-        <div class="rp-field"><label>Max sessions</label><input id="srv-max" type="number" value="8"></div>
-      </div>
-    </details>
+    <div class="rp-section-h">Top robots by activity <span class="meta" id="rp-overview-top-meta"></span></div>
+    <div class="rp-top3" id="rp-overview-top"></div>
+    <div class="rp-section-h">Recent activity <span class="meta" id="rp-overview-stream-meta">last 20</span></div>
+    <div class="rp-stream" id="rp-overview-stream"></div>
   </div>
 
-  <!-- Add robot / device -->
-  <div class="rp-form" id="rp-addrobot">
-    <h3>Add robot (mint enrollment token)</h3>
-    <div class="rp-quickrow">
-      <div class="rp-field"><label>Robot name</label><input id="rb-name" placeholder="jaguar"></div>
-      <div class="rp-field"><label>Character preset</label><select id="rb-char"><option value="">— auto (matched from name) —</option></select></div>
-      <button class="rp-btn primary" id="rb-add" style="height:fit-content">Add robot</button>
+  <!-- ═══ Live Sessions ═══ -->
+  <div class="rp-sub" id="rp-sub-live">
+    <div class="rp-filterbar">
+      <div class="rp-field"><label>Search</label><input id="rp-live-search" placeholder="session id, robot…"></div>
+      <div class="rp-field"><label>Robot</label><select id="rp-live-robot"><option value="">all robots</option></select></div>
+      <label class="rp-btn" style="display:inline-flex;align-items:center;gap:0.35rem;cursor:pointer;">
+        <input type="checkbox" id="rp-live-autoref" checked style="width:auto;margin:0;accent-color:var(--gold-bright);"> auto-refresh
+      </label>
+      <button class="rp-btn" id="rp-live-refresh">↻ Refresh now</button>
     </div>
-    <div class="rp-autonote" id="rb-autonote">the robot self-reports its IP and hardware on first heartbeat — you only need a name and (optionally) a character preset to get started.</div>
-    <div class="rp-quickrow" id="rb-clicmd-row" style="display:none;">
-      <div class="rp-field" style="flex:1;"><label>run this ON THE ROBOT (no need to click Add — this mints its own token)</label><input id="rb-clicmd" readonly style="cursor:text;"></div>
-      <button class="rp-btn" id="rb-clicmd-copy" style="height:fit-content">📋 Copy</button>
+    <div class="rp-tbl-wrap" id="rp-live-wrap">
+      <table class="rp-sess-table" id="rp-live-table">
+        <thead><tr>
+          <th>Robot</th><th>Session</th><th>Started</th><th>Duration</th><th>End reason</th><th>Actions</th>
+        </tr></thead>
+        <tbody id="rp-live-tbody"></tbody>
+      </table>
     </div>
-    <details class="rp-advanced">
-      <summary>Advanced — pre-set network/voice config before the robot connects</summary>
-      <div class="rp-advanced-grid">
-        <div class="rp-field"><label>Tailscale IP</label><input id="rb-tsip" placeholder="auto-detected once connected"></div>
-        <div class="rp-field"><label>LAN IP</label><input id="rb-lanip" placeholder="auto-detected once connected"></div>
-        <div class="rp-field"><label>Motor server URL</label><input id="rb-motor" placeholder="http://...:5000"></div>
-        <div class="rp-field"><label>LiveKit URL</label><input id="rb-lk" placeholder="— uses the registered server above —"></div>
-        <div class="rp-field"><label>Voice stack override</label><select id="rb-voice"><option value="">— from character preset —</option></select></div>
+    <div class="rp-tbl-empty" id="rp-live-empty" style="display:none;">No active sessions right now — sessions appear here the moment a robot joins a LiveKit room.</div>
+  </div>
+
+  <!-- ═══ History ═══ -->
+  <div class="rp-sub" id="rp-sub-history">
+    <div class="rp-filterbar">
+      <div class="rp-field"><label>Search</label><input id="rp-hist-search" placeholder="session id, robot…"></div>
+      <div class="rp-field"><label>Robot</label><select id="rp-hist-robot"><option value="">all robots</option></select></div>
+      <div class="rp-field"><label>End reason</label><select id="rp-hist-reason">
+        <option value="">any</option>
+        <option value="operator">operator</option>
+        <option value="silence">silence</option>
+        <option value="error">error</option>
+        <option value="timeout">timeout</option>
+        <option value="completed">completed</option>
+        <option value="unknown">unknown</option>
+      </select></div>
+      <div class="rp-field"><label>Range</label><select id="rp-hist-range">
+        <option value="24h">last 24h</option>
+        <option value="7d" selected>last 7 days</option>
+        <option value="30d">last 30 days</option>
+        <option value="all">all</option>
+      </select></div>
+      <button class="rp-btn" id="rp-hist-refresh">↻ Refresh</button>
+    </div>
+    <div class="rp-tbl-wrap" id="rp-hist-wrap">
+      <table class="rp-history-table" id="rp-hist-table">
+        <thead><tr>
+          <th>Session</th><th>Robot</th><th>Started</th><th>Ended</th><th>Duration</th><th>End reason</th><th>Triggers</th><th>Latency</th><th>Actions</th>
+        </tr></thead>
+        <tbody id="rp-hist-tbody"></tbody>
+      </table>
+    </div>
+    <div class="rp-tbl-empty" id="rp-hist-empty" style="display:none;">No sessions match the current filters.</div>
+    <div class="rp-tbl-pager" id="rp-hist-pager">
+      <span id="rp-hist-info">—</span>
+      <div>
+        <button class="rp-btn" id="rp-hist-prev">‹ Prev</button>
+        <button class="rp-btn" id="rp-hist-next">Next ›</button>
       </div>
-    </details>
+    </div>
   </div>
 
-  <div class="rp-grid" id="rp-grid"></div>
+  <!-- ═══ Audit Log ═══ -->
+  <div class="rp-sub" id="rp-sub-audit">
+    <div class="rp-filterbar" style="gap:0.4rem;">
+      <span class="rp-cat-chip active" data-cat="" id="rp-audit-cat-all">All</span>
+      <span class="rp-cat-chip" data-cat="robot" id="rp-audit-cat-robot">🤖 Robot</span>
+      <span class="rp-cat-chip" data-cat="device" id="rp-audit-cat-device">📡 Device</span>
+      <span class="rp-cat-chip" data-cat="session" id="rp-audit-cat-session">🎙 Session</span>
+      <span class="rp-cat-chip" data-cat="server" id="rp-audit-cat-server">🖥 Server</span>
+      <span class="rp-cat-chip" data-cat="voice" id="rp-audit-cat-voice">🗣 Voice</span>
+      <span class="rp-cat-chip" data-cat="character" id="rp-audit-cat-character">🎭 Character</span>
+      <div style="flex:1;"></div>
+      <button class="rp-btn" id="rp-audit-refresh">↻ Refresh</button>
+    </div>
+    <div class="rp-tbl-wrap" id="rp-audit-wrap">
+      <table class="rp-audit-table" id="rp-audit-table">
+        <thead><tr>
+          <th>Time</th><th>Category</th><th>Action</th><th>Target</th><th>Details</th><th>Source</th>
+        </tr></thead>
+        <tbody id="rp-audit-tbody"></tbody>
+      </table>
+    </div>
+    <div class="rp-tbl-empty" id="rp-audit-empty" style="display:none;">No audit events match the current filter.</div>
+  </div>
 
-  <!-- Config templates -->
-  <div class="rp-form" id="rp-templates" style="grid-template-columns:1fr 1fr; margin-top:1.2rem;">
-    <h3 style="grid-column:1/-1">Config templates</h3>
-    <div>
-      <h4 style="font-family:var(--mono);font-size:0.75rem;color:var(--gold-bright);margin:0.3rem 0 0.5rem;">Voice stacks</h4>
-      <div id="rp-voice-list" style="display:flex;flex-direction:column;gap:0.4rem;max-height:260px;overflow:auto;"></div>
-      <div style="display:flex;gap:0.4rem;margin-top:0.55rem;">
-        <input id="rp-newvoice-name" placeholder="new stack name" style="flex:1;min-width:0;">
-        <button class="rp-btn" id="rp-addvoice">Add</button>
+  <!-- ═══ Fleet ═══ -->
+  <div class="rp-sub" id="rp-sub-fleet">
+    <div class="rp-section-h">Robots <span class="meta" id="rp-fleet-meta">live + idle + offline</span></div>
+    <div class="rp-fleet-grid" id="rp-grid"></div>
+  </div>
+
+  <!-- ═══ Setup ═══ -->
+  <div class="rp-sub" id="rp-sub-setup">
+    <!-- Add LiveKit server -->
+    <div class="rp-form" id="rp-addserver">
+      <h3>Add LiveKit server</h3>
+      <div class="rp-quickrow">
+        <div class="rp-field"><label>Name</label><input id="srv-name" placeholder="LiveKit Server 1"></div>
+        <button class="rp-btn primary" id="srv-detect" style="height:fit-content" title="Probes this hub's own host + common local ports for a running LiveKit instance">🔍 Auto-detect &amp; fill</button>
+        <button class="rp-btn" id="srv-add" style="height:fit-content">Add server</button>
       </div>
-      <div class="rp-form" id="rp-voice-edit" style="display:none;grid-template-columns:1fr 1fr;gap:0.4rem;margin-top:0.6rem;padding:0.6rem;border-color:var(--border-strong);">
-        <h4 style="grid-column:1/-1;margin:0 0 0.2rem;">Edit voice stack: <span id="rpve-name-label"></span></h4>
-        <div class="rp-field"><label>STT provider</label><select id="rpve-stt-provider"><option value="speaches">speaches</option><option value="groq">groq</option><option value="vibevoice">vibevoice</option></select></div>
-        <div class="rp-field"><label>STT model</label><input id="rpve-stt-model"></div>
-        <div class="rp-field"><label>STT language</label><input id="rpve-stt-language" placeholder="en / auto"></div>
-        <div class="rp-field"><label>LLM provider</label><select id="rpve-llm-provider"><option value="ollama">ollama</option><option value="groq">groq</option><option value="gemini">gemini</option><option value="moltbot">moltbot</option></select></div>
-        <div class="rp-field"><label>LLM model</label><input id="rpve-llm-model"></div>
-        <div class="rp-field"><label>LLM API key</label><input type="password" id="rpve-llm-key" placeholder="(uses agent's own if blank)"></div>
-        <div class="rp-field"><label>Temperature</label><input id="rpve-temperature" type="number" step="0.1" value="0.7"></div>
-        <div class="rp-field"><label>Context size (num_ctx)</label><input id="rpve-num-ctx" type="number" value="8192"></div>
-        <div class="rp-field"><label>TTS provider</label><select id="rpve-tts-provider"><option value="elevenlabs">elevenlabs</option><option value="kokoro">kokoro</option><option value="piper">piper</option></select></div>
-        <div class="rp-field"><label>TTS voice</label><input id="rpve-tts-voice"></div>
-        <div class="rp-field"><label>TTS language</label><input id="rpve-tts-language" placeholder="en"></div>
-        <div class="rp-field"><label>Max turns</label><input id="rpve-max-turns" type="number" value="20"></div>
-        <div class="rp-field"><label>Min endpointing delay (s)</label><input id="rpve-endpointing" type="number" step="0.1" value="0.7"></div>
-        <div class="rp-field"><label><input type="checkbox" id="rpve-interruptions" checked style="width:auto;margin-right:0.35rem;">Allow interruptions</label></div>
-        <div class="rp-field"><label><input type="checkbox" id="rpve-wake-enabled" style="width:auto;margin-right:0.35rem;">Wake word enabled</label></div>
-        <div class="rp-field"><label>Wake word model</label><input id="rpve-wake-model" placeholder="models/hey_jarvis.onnx"></div>
-        <div class="rp-field"><label>Wake threshold</label><input id="rpve-wake-threshold" type="number" step="0.05" value="0.5"></div>
-        <div class="rp-field"><label>Wake timeout (s)</label><input id="rpve-wake-timeout" type="number" step="0.5" value="3.0"></div>
-        <div style="grid-column:1/-1;display:flex;gap:0.4rem;">
-          <button class="rp-btn" id="rpve-save">Save</button>
-          <button class="rp-btn" id="rpve-cancel">Cancel</button>
+      <div class="rp-autonote" id="srv-autonote"></div>
+      <details class="rp-advanced">
+        <summary>Advanced — ID, URL, credentials, capacity</summary>
+        <div class="rp-advanced-grid">
+          <div class="rp-field"><label>ID</label><input id="srv-id" placeholder="auto-filled from name"></div>
+          <div class="rp-field"><label>URL (ws:// or wss://)</label><input id="srv-url" placeholder="ws://host:7880 — auto-detect fills this"></div>
+          <div class="rp-field"><label>API key</label><input id="srv-key" placeholder="devkey" value="devkey"></div>
+          <div class="rp-field"><label>API secret</label><input type="password" id="srv-secret" placeholder="secretsecretsecretsecretsecretsecret"></div>
+          <div class="rp-field"><label>Max sessions</label><input id="srv-max" type="number" value="8"></div>
         </div>
+      </details>
+    </div>
+
+    <!-- Add robot / device -->
+    <div class="rp-form" id="rp-addrobot">
+      <h3>Add robot (mint enrollment token)</h3>
+      <div class="rp-quickrow">
+        <div class="rp-field"><label>Robot name</label><input id="rb-name" placeholder="jaguar"></div>
+        <div class="rp-field"><label>Character preset</label><select id="rb-char"><option value="">— auto (matched from name) —</option></select></div>
+        <button class="rp-btn primary" id="rb-add" style="height:fit-content">Add robot</button>
+      </div>
+      <div class="rp-autonote" id="rb-autonote">the robot self-reports its IP and hardware on first heartbeat — you only need a name and (optionally) a character preset to get started.</div>
+      <div class="rp-quickrow" id="rb-clicmd-row" style="display:none;">
+        <div class="rp-field" style="flex:1;"><label>run this ON THE ROBOT (no need to click Add — this mints its own token)</label><input id="rb-clicmd" readonly style="cursor:text;"></div>
+        <button class="rp-btn" id="rb-clicmd-copy" style="height:fit-content">📋 Copy</button>
       </div>
+      <details class="rp-advanced">
+        <summary>Advanced — pre-set network/voice config before the robot connects</summary>
+        <div class="rp-advanced-grid">
+          <div class="rp-field"><label>Tailscale IP</label><input id="rb-tsip" placeholder="auto-detected once connected"></div>
+          <div class="rp-field"><label>LAN IP</label><input id="rb-lanip" placeholder="auto-detected once connected"></div>
+          <div class="rp-field"><label>Motor server URL</label><input id="rb-motor" placeholder="http://...:5000"></div>
+          <div class="rp-field"><label>LiveKit URL</label><input id="rb-lk" placeholder="— uses the registered server above —"></div>
+          <div class="rp-field"><label>Voice stack override</label><select id="rb-voice"><option value="">— from character preset —</option></select></div>
+        </div>
+      </details>
     </div>
-    <div>
-      <h4 style="font-family:var(--mono);font-size:0.75rem;color:var(--gold-bright);margin:0.3rem 0 0.5rem;">Character presets</h4>
-      <div id="rp-char-list" style="display:flex;flex-direction:column;gap:0.4rem;max-height:260px;overflow:auto;"></div>
-      <div style="display:flex;gap:0.4rem;margin-top:0.55rem;">
-        <input id="rp-newchar-name" placeholder="new preset name" style="flex:1;min-width:0;">
-        <input id="rp-newchar-stack" list="rp-newchar-stack-list" placeholder="voice stack id" style="flex:1;min-width:0;">
-        <datalist id="rp-newchar-stack-list"></datalist>
-        <button class="rp-btn" id="rp-addchar">Add</button>
+
+    <!-- Local runtime / Docker manager -->
+    <div class="rp-form" id="rp-runtime" style="grid-template-columns:1fr;">
+      <h3>Runtime health · scheduler · LiveKit · Docker</h3>
+      <div class="rp-quickrow">
+        <div class="rp-autonote" id="rp-runtime-summary" style="flex:1;margin:0;">not checked</div>
+        <button class="rp-btn" id="rp-runtime-refresh">↻ Refresh health</button>
+      </div>
+      <div class="rp-tbl-wrap"><table class="rp-history-table"><thead><tr><th>Container</th><th>State</th><th>Image</th><th>Actions</th></tr></thead><tbody id="rp-runtime-containers"></tbody></table></div>
+      <div class="rp-autonote" id="rp-runtime-note">Docker controls are protected by the hub token. Logs are limited to the latest 100 lines.</div>
+    </div>
+
+    <!-- Config templates -->
+    <div class="rp-form" id="rp-templates" style="grid-template-columns:1fr 1fr; margin-top:1.2rem;">
+      <h3 style="grid-column:1/-1">Config templates</h3>
+      <div>
+        <h4 style="font-family:var(--mono);font-size:0.75rem;color:var(--gold-bright);margin:0.3rem 0 0.5rem;">Voice stacks</h4>
+        <div id="rp-voice-list" style="display:flex;flex-direction:column;gap:0.4rem;max-height:260px;overflow:auto;"></div>
+        <div style="display:flex;gap:0.4rem;margin-top:0.55rem;">
+          <input id="rp-newvoice-name" placeholder="new stack name" style="flex:1;min-width:0;">
+          <button class="rp-btn" id="rp-addvoice">Add</button>
+        </div>
+        <div class="rp-form" id="rp-voice-edit" style="display:none;grid-template-columns:1fr 1fr;gap:0.4rem;margin-top:0.6rem;padding:0.6rem;border-color:var(--border-strong);">
+          <h4 style="grid-column:1/-1;margin:0 0 0.2rem;">Edit voice stack: <span id="rpve-name-label"></span></h4>
+          <div class="rp-field"><label>STT provider</label><select id="rpve-stt-provider"><option value="speaches">speaches</option><option value="groq">groq</option><option value="vibevoice">vibevoice</option></select></div>
+          <div class="rp-field"><label>STT model</label><input id="rpve-stt-model"></div>
+          <div class="rp-field"><label>STT language</label><input id="rpve-stt-language" placeholder="en / auto"></div>
+          <div class="rp-field"><label>LLM provider</label><select id="rpve-llm-provider"><option value="ollama">ollama</option><option value="groq">groq</option><option value="gemini">gemini</option><option value="moltbot">moltbot</option></select></div>
+          <div class="rp-field"><label>LLM model</label><input id="rpve-llm-model"></div>
+          <div class="rp-field"><label>LLM API key</label><input type="password" id="rpve-llm-key" placeholder="(uses agent's own if blank)"></div>
+          <div class="rp-field"><label>Temperature</label><input id="rpve-temperature" type="number" step="0.1" value="0.7"></div>
+          <div class="rp-field"><label>Context size (num_ctx)</label><input id="rpve-num-ctx" type="number" value="8192"></div>
+          <div class="rp-field"><label>TTS provider</label><select id="rpve-tts-provider"><option value="elevenlabs">elevenlabs</option><option value="kokoro">kokoro</option><option value="piper">piper</option></select></div>
+          <div class="rp-field">
+            <label>TTS voice</label>
+            <div style="display:flex;gap:0.35rem;align-items:stretch;">
+              <select id="rpve-tts-voice" style="flex:1;min-width:0;"></select>
+              <button type="button" class="rp-btn" id="rpve-tts-voice-browse" title="Browse the full voice catalog for the selected provider" style="white-space:nowrap;">Browse…</button>
+            </div>
+            <div class="rp-autonote" id="rpve-tts-voice-note" style="margin-top:0.35rem;"></div>
+          </div>
+          <div class="rp-field"><label>TTS language</label><input id="rpve-tts-language" placeholder="en"></div>
+          <div class="rp-field"><label>Max turns</label><input id="rpve-max-turns" type="number" value="20"></div>
+          <div class="rp-field"><label>Min endpointing delay (s)</label><input id="rpve-endpointing" type="number" step="0.1" value="0.7"></div>
+          <div class="rp-field"><label><input type="checkbox" id="rpve-interruptions" checked style="width:auto;margin-right:0.35rem;">Allow interruptions</label></div>
+          <div class="rp-field"><label><input type="checkbox" id="rpve-wake-enabled" style="width:auto;margin-right:0.35rem;">Wake word enabled</label></div>
+          <div class="rp-field"><label>Wake word model</label><input id="rpve-wake-model" placeholder="models/hey_jarvis.onnx"></div>
+          <div class="rp-field"><label>Wake threshold</label><input id="rpve-wake-threshold" type="number" step="0.05" value="0.5"></div>
+          <div class="rp-field"><label>Wake timeout (s)</label><input id="rpve-wake-timeout" type="number" step="0.5" value="3.0"></div>
+          <div style="grid-column:1/-1;display:flex;gap:0.4rem;">
+            <button class="rp-btn" id="rpve-save">Save</button>
+            <button class="rp-btn" id="rpve-cancel">Cancel</button>
+          </div>
+        </div>
       </div>
-      <div class="rp-form" id="rp-char-edit" style="display:none;grid-template-columns:1fr;gap:0.4rem;margin-top:0.6rem;padding:0.6rem;border-color:var(--border-strong);">
-        <h4 style="margin:0 0 0.2rem;">Edit character: <span id="rpce-name-label"></span></h4>
-        <div class="rp-field"><label>Name</label><input id="rpce-name"></div>
-        <div class="rp-field"><label>Description</label><input id="rpce-description"></div>
-        <div class="rp-field"><label>System prompt</label><textarea id="rpce-prompt" rows="4" style="font-family:var(--mono);font-size:0.72rem;width:100%;resize:vertical;"></textarea></div>
-        <div class="rp-field"><label>Voice stack</label><select id="rpce-stack"></select></div>
-        <div class="rp-field"><label>Motors (comma-separated)</label><input id="rpce-motors" placeholder="drive, wave"></div>
-        <div style="display:flex;gap:0.4rem;">
-          <div class="rp-field" style="flex:1"><label>Pad X (0-1)</label><input id="rpce-nx" type="number" step="0.01" min="0" max="1"></div>
-          <div class="rp-field" style="flex:1"><label>Pad Y (0-1)</label><input id="rpce-ny" type="number" step="0.01" min="0" max="1"></div>
+      <div>
+        <h4 style="font-family:var(--mono);font-size:0.75rem;color:var(--gold-bright);margin:0.3rem 0 0.5rem;">Character presets</h4>
+        <div id="rp-char-list" style="display:flex;flex-direction:column;gap:0.4rem;max-height:260px;overflow:auto;"></div>
+        <div style="display:flex;gap:0.4rem;margin-top:0.55rem;">
+          <input id="rp-newchar-name" placeholder="new preset name" style="flex:1;min-width:0;">
+          <input id="rp-newchar-stack" list="rp-newchar-stack-list" placeholder="voice stack id" style="flex:1;min-width:0;">
+          <datalist id="rp-newchar-stack-list"></datalist>
+          <button class="rp-btn" id="rp-addchar">Add</button>
         </div>
-        <div class="rp-field"><label>Avatar image path</label><input id="rpce-img" placeholder="/static/robopark/jaguar.png"></div>
-        <div style="display:flex;gap:0.4rem;">
-          <button class="rp-btn" id="rpce-save">Save</button>
-          <button class="rp-btn" id="rpce-cancel">Cancel</button>
+        <div class="rp-form" id="rp-char-edit" style="display:none;grid-template-columns:1fr;gap:0.4rem;margin-top:0.6rem;padding:0.6rem;border-color:var(--border-strong);">
+          <h4 style="margin:0 0 0.2rem;">Edit character: <span id="rpce-name-label"></span></h4>
+          <div class="rp-field"><label>Name</label><input id="rpce-name"></div>
+          <div class="rp-field"><label>Description</label><input id="rpce-description"></div>
+          <div class="rp-field"><label>System prompt</label><textarea id="rpce-prompt" rows="4" style="font-family:var(--mono);font-size:0.72rem;width:100%;resize:vertical;"></textarea></div>
+          <div class="rp-field"><label>Voice stack</label><select id="rpce-stack"></select></div>
+          <div class="rp-field"><label>Motors (comma-separated)</label><input id="rpce-motors" placeholder="drive, wave"></div>
+          <div style="display:flex;gap:0.4rem;">
+            <div class="rp-field" style="flex:1"><label>Pad X (0-1)</label><input id="rpce-nx" type="number" step="0.01" min="0" max="1"></div>
+            <div class="rp-field" style="flex:1"><label>Pad Y (0-1)</label><input id="rpce-ny" type="number" step="0.01" min="0" max="1"></div>
+          </div>
+          <div class="rp-field"><label>Avatar image path</label><input id="rpce-img" placeholder="/static/robopark/jaguar.png"></div>
+          <div style="display:flex;gap:0.4rem;">
+            <button class="rp-btn" id="rpce-save">Save</button>
+            <button class="rp-btn" id="rpce-cancel">Cancel</button>
+          </div>
         </div>
       </div>
     </div>
   </div>
 </div>
 
+<!-- Generic modal: title + scrollable body, used for session + audit detail views -->
+<div class="rp-modal-back" id="rp-modal-back" role="dialog" aria-modal="true">
+  <div class="rp-modal" id="rp-modal">
+    <div class="rp-modal-head">
+      <h3 id="rp-modal-title">Details</h3>
+      <button class="x" id="rp-modal-close" aria-label="Close">✕</button>
+    </div>
+    <div class="rp-modal-body" id="rp-modal-body"></div>
+  </div>
+</div>
+
 <footer class="cmd">
   <span class="sel">on <b id="selName">this node</b></span>
   <input id="cmdInput" placeholder="/status   /nodes   /health   (Enter to run)" autocomplete="off" spellcheck="false">
@@ -526,12 +834,14 @@ button.act:disabled{opacity:0.5;cursor:default;}
   var rpReadOnly = false, pmBusy = false;
   var lastStatus = null;               // most recent /fed/status snapshot (shared with Park)
   var roboparkByName = {};             // robot_id -> latest telemetry row (shared with Park drawer)
+  var schedulerDevicesById = {};       // enrolled device rows + camera/audio inventory
+  var schedulerDevicesByName = {};     // same rows, keyed by device name (id != name, e.g. dev_8984a80e vs jaguar2)
   var voiceStacks = [];                // scheduler voice stacks (shared with setup forms + templates)
   var FALLBACK_SLOTS = [
     {label:'VOLT',    id:'volt',    keys:['volt'],           nx:0.18, ny:0.26, img:'/static/robopark/volt.png'},
     {label:'TESLA',   id:'tesla',   keys:['tesla'],          nx:0.38, ny:0.30, img:'/static/robopark/tesla.png'},
     {label:'JAGUAR',  id:'jaguar',  keys:['jaguar','jag'],   nx:0.58, ny:0.34, img:'/static/robopark/jaguar.png'},
-    {label:'VIXEN',   id:'vixen',   keys:['vixen','bmw'],    nx:0.54, ny:0.66, sub:'BMW', img:'/static/robopark/bmw.png'},
+    {label:'VIXEN',   id:'vixen',   keys:['vixen','bmw'],    nx:0.40, ny:0.68, sub:'BMW', img:'/static/robopark/bmw.png'},
     {label:'PANDA',   id:'panda',   keys:['panda'],          nx:0.82, ny:0.52, img:'/static/robopark/panda.png'}
   ];
   var parkSlots = FALLBACK_SLOTS.slice();
@@ -771,20 +1081,75 @@ button.act:disabled{opacity:0.5;cursor:default;}
     $('offline').style.display = (!ok && everOk) ? 'block' : 'none';
   }
 
+  // Scheduler-enrolled robots are not necessarily infinicode mesh peers. Add
+  // them to the same Fleet/Park collection so a robot running only the
+  // preview agent is still visible and selectable in the full dashboard.
+  function getJson(path){
+    // QS is "?token=..."; a path that already carries its own query string
+    // (e.g. "/robopark/api/sessions?active_only=false&limit=200") needs "&"
+    // instead, or the token param lands inside an invalid second "?" and
+    // the request goes out unauthenticated -> 401.
+    var url = path + (path.indexOf('?')>=0 ? QS.replace('?','&') : QS);
+    return fetch(url, {cache:'no-store'}).then(function(r){
+      if(!r.ok) throw new Error(path+' '+r.status);
+      return r.json();
+    });
+  }
+  function mergeSchedulerRobots(nodes){
+    return Promise.all([getJson('/robopark/api/robots'), getJson('/robopark/api/devices')]).then(function(data){
+      var rows = data[0], devices = data[1];
+      var deviceById = {}, deviceByName = {};
+      (Array.isArray(devices)?devices:[]).forEach(function(device){ deviceById[device.id] = device; if(device.name) deviceByName[device.name] = device; });
+      schedulerDevicesById = deviceById;
+      schedulerDevicesByName = deviceByName;
+      var merged = (nodes||[]).slice();
+      (Array.isArray(rows)?rows:[]).forEach(function(row){
+        var id = row.id || row.robot_id;
+        if(!id) return;
+        var name = row.name || id;
+        var duplicate = merged.some(function(n){
+          return n.schedulerRobotId===id || n.displayName===name || n.nodeId===id;
+        });
+        if(duplicate) return;
+        var device = deviceById[id] || {};
+        var status = String(device.status || row.status || '').toLowerCase();
+        var connected = ['online','detecting','connecting','running'].indexOf(status)>=0;
+        var keys = [String(id).toLowerCase(), String(name).toLowerCase()];
+        merged.push({
+          nodeId: 'scheduler-robot-'+id,
+          schedulerRobotId: id,
+          displayName: name,
+          role: 'robot',
+          platform: 'RoboPark robot',
+          version: 'scheduler',
+          capabilities: ['camera','microphone','voice'],
+          connected: connected,
+          load: 0,
+          lastSeenAt: device.last_heartbeat ? Date.parse(device.last_heartbeat) : (row.last_heartbeat ? Date.parse(row.last_heartbeat) : null),
+          telemKeys: keys,
+        });
+      });
+      return merged;
+    }).catch(function(){ return nodes||[]; });
+  }
+
   function poll(){
     fetch('/fed/status'+QS, {cache:'no-store'}).then(function(r){
       if(!r.ok) throw new Error('status '+r.status);
       return r.json();
     }).then(function(s){
-      everOk = true; setLive(true); lastStatus = s;
-      if(!selfId && s.self) selfId = s.self.nodeId;
-      if(s.control){ rpReadOnly = !!s.control.readonly; applyReadOnly(); }
-      updateHw(s);
-      renderSummary(s);
-      renderFleet(s.nodes||[]);
-      renderHw(s.hardware);
-      renderFeed(s.activity||[]);
-      Park.onStatus(s);
+       return mergeSchedulerRobots(s.nodes||[]).then(function(nodes){
+         s.nodes = nodes;
+         everOk = true; setLive(true); lastStatus = s;
+         if(!selfId && s.self) selfId = s.self.nodeId;
+         if(s.control){ rpReadOnly = !!s.control.readonly; applyReadOnly(); }
+         updateHw(s);
+         renderSummary(s);
+         renderFleet(s.nodes||[]);
+         renderHw(s.hardware);
+         renderFeed(s.activity||[]);
+         Park.onStatus(s);
+       });
     }).catch(function(){ setLive(false); });
   }
 
@@ -839,7 +1204,10 @@ button.act:disabled{opacity:0.5;cursor:default;}
     $('pane-park').classList.toggle('active', name==='park');
     $('pane-robopark').classList.toggle('active', name==='robopark');
     if (location.hash.replace('#','') !== name) { try{ history.replaceState(null,'','#'+name); }catch(e){} }
-    if (name==='robopark') pollRobopark();
+    if (name==='robopark'){
+      pollRobopark();
+      initRpSubTabs();
+    }
     if (name==='park') Park.activate(); else Park.deactivate();
   }
   var initHash = location.hash.replace('#','');
@@ -909,11 +1277,41 @@ button.act:disabled{opacity:0.5;cursor:default;}
       showOut('ended session for '+id); pollRobopark(); Park.refreshDrawer();
     }).catch(function(e){ showOut('end-session ('+id+'): '+e.message); });
   }
+
+  function runtimeDockerAction(action, container){
+    if(!container) return;
+    if(!confirm(action+' '+container+'?')) return;
+    rpAction('POST','/robopark/runtime/docker',{action:action,container:container}).then(function(res){ if(action==='logs'){ showOut(container+' logs (latest 100 lines):\\n'+(res&&res.output||'(no logs)')); } else { showOut(action+' queued for '+container); pollRuntimeHealth(); } }).catch(function(e){ showOut('docker '+action+' ('+container+'): '+e.message); });
+  }
+  function pollRuntimeHealth(){
+    var summary=$('rp-runtime-summary'), tbody=$('rp-runtime-containers'); if(!summary||!tbody) return;
+    getJson('/robopark/runtime/health').then(function(h){
+      var docker=h.docker||{}, scheduler=h.scheduler||{};
+      var containers=Array.isArray(h.containers&&h.containers.data)?h.containers.data:[];
+      summary.textContent=(docker.ok?'Docker connected':'Docker unavailable')+' · '+(scheduler.ok?'scheduler reachable':'scheduler unavailable')+' · '+containers.filter(function(c){return /^(up|running)/i.test(String(c.State||''));}).length+'/'+containers.length+' containers running';
+      summary.style.color=(docker.ok&&scheduler.ok)?'var(--ok)':'var(--bad)';
+      tbody.innerHTML=containers.length?containers.map(function(c){
+        var name=c.Names||c.Name||'container', state=c.State||'unknown', running=/^(up|running)/i.test(state);
+        return '<tr><td class="mono">'+esc(name)+'</td><td>'+esc(state)+'</td><td class="mono">'+esc(c.Image||'—')+'</td><td class="space-x-2">'+['start','stop','restart','logs'].map(function(a){return '<button class="rp-btn '+(a==='stop'?'danger':'')+'" data-runtime-action="'+a+'" data-runtime-container="'+esc(name)+'"'+((a==='start'&&running)||(a==='stop'&&!running)?' disabled':'')+'>'+a+'</button>';}).join(' ')+'</td></tr>';
+      }).join(''):'<tr><td colspan="4">No Docker containers found.</td></tr>';
+      if(!docker.ok) $('rp-runtime-note').textContent='Docker unavailable: '+(docker.error||'check Docker Desktop');
+    }).catch(function(e){ summary.textContent='runtime health unavailable'; summary.style.color='var(--bad)'; });
+  }
+  var runtimeRefresh=$('rp-runtime-refresh'); if(runtimeRefresh) runtimeRefresh.addEventListener('click', pollRuntimeHealth);
+  var runtimeTable=$('rp-runtime-containers'); if(runtimeTable) runtimeTable.addEventListener('click', function(e){ var b=e.target.closest('[data-runtime-action]'); if(b&&!b.disabled) runtimeDockerAction(b.dataset.runtimeAction,b.dataset.runtimeContainer); });
+  function recoverRobot(id){
+    if(!confirm('Recover '+id+'? This closes any stale LiveKit session and returns the robot to idle.')) return;
+    rpAction('POST','/robopark/api/robots/'+encodeURIComponent(id)+'/recover',{}).then(function(res){
+      showOut('recovered '+id+' — queued triggers cleared and robot returned to idle');
+      pollRobopark(); Park.refreshDrawer();
+    }).catch(function(e){ showOut('recover ('+id+'): '+e.message); });
+  }
   $('rp-grid').addEventListener('click', function(e){
     var b=e.target.closest?e.target.closest('.rp-btn'):null;
     if(b){ var id=b.getAttribute('data-robot'), act=b.getAttribute('data-act');
       if(act==='end') endSession(id);
       if(act==='trigger') triggerSession(id);
+      if(act==='recover') recoverRobot(id);
       if(act==='preview'){ selectTab('park'); Park.openDrawerForRobot(id); }
       return;
     }
@@ -932,10 +1330,115 @@ button.act:disabled{opacity:0.5;cursor:default;}
 
   var characterPresets=[];
   function loadCharacterPresets(){
-    fetch('/robopark/api/character-presets'+QS,{cache:'no-store'}).then(function(r){return r.json();}).then(function(d){ characterPresets=Array.isArray(d)?d:(d&&d.presets)||[]; fillCharacterDropdowns(); fillTemplateCharacterList(); }).catch(function(){});
+    fetch('/robopark/api/character-presets'+QS,{cache:'no-store'}).then(function(r){return r.json();}).then(function(d){ characterPresets=Array.isArray(d)?d:(d&&d.presets)||[]; fillCharacterDropdowns(); fillTemplateCharacterList(); refreshDrawerPresetOptions(); }).catch(function(){});
   }
   function loadVoiceStacks(){
-    fetch('/robopark/api/voice-stacks'+QS,{cache:'no-store'}).then(function(r){return r.json();}).then(function(d){ voiceStacks=Array.isArray(d)?d:(d&&d.stacks)||[]; fillVoiceStackDropdowns(); fillTemplateVoiceList(); }).catch(function(){});
+    fetch('/robopark/api/voice-stacks'+QS,{cache:'no-store'}).then(function(r){return r.json();}).then(function(d){ voiceStacks=Array.isArray(d)?d:(d&&d.stacks)||[]; fillVoiceStackDropdowns(); fillTemplateVoiceList(); refreshDrawerPresetOptions(); }).catch(function(){});
+  }
+
+  // ── TTS voice catalog (per provider) ──
+  // Holds the dropdown options for whichever TTS provider is currently
+  // selected in the voice-stack editor. We cache the catalog per-provider
+  // in ttsVoiceCache so flipping back and forth between kokoro/elevenlabs
+  // is instant. Each entry is { provider, source, count, voices, warning }.
+  var ttsVoiceCache = {};    // provider -> TtsVoiceList payload
+  var ttsVoiceLoading = {};  // provider -> in-flight Promise (de-dupes concurrent loads)
+  function loadTtsVoiceCatalog(provider, opts){
+    if(!provider) return Promise.resolve(null);
+    opts = opts || {};
+    var force = !!opts.force;
+    if(ttsVoiceCache[provider] && !force) return Promise.resolve(ttsVoiceCache[provider]);
+    if(ttsVoiceLoading[provider] && !force) return ttsVoiceLoading[provider];
+    var p = fetch('/robopark/api/voices/'+encodeURIComponent(provider)+QS,{cache:'no-store'})
+      .then(function(r){ return r.json(); })
+      .then(function(d){
+        ttsVoiceCache[provider] = d || {provider:provider, source:'static', count:0, voices:[], warning:'Empty response'};
+        return ttsVoiceCache[provider];
+      })
+      .catch(function(e){
+        var fallback = {provider:provider, source:'static', count:0, voices:[], warning:'Could not reach scheduler: '+(e&&e.message||e)};
+        ttsVoiceCache[provider] = fallback;
+        return fallback;
+      })
+      .then(function(v){ ttsVoiceLoading[provider]=null; return v; });
+    ttsVoiceLoading[provider] = p;
+    return p;
+  }
+  // Build the option list for the inline TTS-voice <select>. The current
+  // value (s.tts_voice) is always included as a synthetic option if it
+  // isn't in the catalog — that way editing a stack that was saved with a
+  // legacy / unknown voice still shows what the user actually had.
+  function fillTtsVoiceSelect(provider, currentVoiceId){
+    var sel = $('rpve-tts-voice');
+    var note = $('rpve-tts-voice-note');
+    if(!sel) return;
+    sel.innerHTML = '';
+    var cache = ttsVoiceCache[provider];
+    if(!cache){
+      sel.innerHTML = '<option value="">— loading voices… —</option>';
+      if(note){ note.className='rp-autonote busy'; note.textContent = 'Loading '+provider+' voice catalog…'; }
+      return;
+    }
+    var voices = Array.isArray(cache.voices) ? cache.voices : [];
+    if(!voices.length){
+      var ph = currentVoiceId
+        ? '<option value="'+esc(currentVoiceId)+'" selected>'+esc(currentVoiceId)+' (current)</option>'
+        : '<option value="">— no voices available —</option>';
+      sel.innerHTML = ph;
+    } else {
+      var html = '';
+      var seen = {};
+      for(var i=0;i<voices.length;i++){
+        var v = voices[i];
+        var id = v.id || v.voice_id || '';
+        if(!id || seen[id]) continue;
+        seen[id] = 1;
+        var label = v.name || id;
+        var subbits = [];
+        if(v.language) subbits.push(v.language);
+        if(v.gender)   subbits.push(v.gender);
+        if(v.category) subbits.push(v.category);
+        if(subbits.length) label = label + ' · ' + subbits.join(' · ');
+        html += '<option value="'+esc(id)+'"'+(id===currentVoiceId?' selected':'')+'>'+esc(label)+'</option>';
+      }
+      // Preserve an out-of-catalog current value so the user can still see
+      // what was previously saved.
+      if(currentVoiceId && !seen[currentVoiceId]){
+        html += '<option value="'+esc(currentVoiceId)+'" selected>'+esc(currentVoiceId)+' (saved value, not in catalog)</option>';
+      }
+      sel.innerHTML = html;
+    }
+    // status note (source + warning)
+    if(note){
+      var src = cache.source || 'static';
+      var cnt = cache.count != null ? cache.count : voices.length;
+      if(cache.warning){
+        note.className='rp-autonote bad';
+        note.textContent = '⚠ '+cache.warning+(cnt?(' — showing '+cnt+' voices.'):'');
+      } else {
+        note.className='rp-autonote';
+        note.textContent = cnt+' '+provider+' voices · source: '+src+(currentVoiceId?(' · current: '+currentVoiceId):'');
+      }
+    }
+  }
+  function refreshTtsVoiceSelect(force){
+    var provEl = $('rpve-tts-provider');
+    var sel = $('rpve-tts-voice');
+    if(!provEl || !sel) return;
+    var provider = provEl.value || 'elevenlabs';
+    var cur = sel.value || (sel.options[sel.selectedIndex] && sel.options[sel.selectedIndex].value) || '';
+    // Prefer the live value from the input field if the user has been
+    // editing it. openVoiceStackEdit sets it before this runs, so .value
+    // is the saved voice. The above cur is only used as a fallback.
+    var savedVoice = (sel && sel.__savedVoice) || cur;
+    if(force || !ttsVoiceCache[provider]){
+      fillTtsVoiceSelect(provider, savedVoice);
+      loadTtsVoiceCatalog(provider, {force:!!force}).then(function(){
+        fillTtsVoiceSelect(provider, savedVoice);
+      });
+    } else {
+      fillTtsVoiceSelect(provider, savedVoice);
+    }
   }
   function loadParkSlots(){
     fetch('/robopark/api/character-presets'+QS,{cache:'no-store'}).then(function(r){return r.json();}).then(function(d){
@@ -976,6 +1479,45 @@ button.act:disabled{opacity:0.5;cursor:default;}
       }
     }
   }
+  // Rebuild the option list inside the currently-open Park robot drawer so
+  // preset/voice dropdowns populate even if the data finishes loading AFTER
+  // the drawer was opened. Idempotent: no-op if the drawer is closed.
+  function refreshDrawerPresetOptions(){
+    var b=$('pk-body'); if(!b) return;
+    var setupChar=$('pk-setup-char');
+    if(setupChar){
+      var curSetup=setupChar.value;
+      setupChar.innerHTML='<option value="">— auto —</option>'+characterPresets.map(function(p){
+        var id=p.id||p.preset_id||p.character_id||'';
+        var name=(p.name||p.id||p.preset_id||'preset')+(p.description?(' — '+p.description):'');
+        return '<option value="'+esc(id)+'"'+(id===curSetup?' selected':'')+'>'+esc(name)+'</option>';
+      }).join('');
+    }
+    var setupVoice=$('pk-setup-voice');
+    if(setupVoice){
+      var curVoice=setupVoice.value;
+      setupVoice.innerHTML='<option value="">— from character preset —</option>'+voiceStacks.map(function(s){
+        var id=s.id||''; var name=(s.name||s.id||'stack')+(s.tts_voice?(' · '+s.tts_voice):'');
+        return '<option value="'+esc(id)+'"'+(id===curVoice?' selected':'')+'>'+esc(name)+'</option>';
+      }).join('');
+    }
+    var effChar=$('pk-eff-char');
+    if(effChar){
+      var curEffChar=effChar.value;
+      effChar.innerHTML=characterPresets.map(function(p){
+        var id=p.id||p.preset_id||p.character_id||''; var name=p.name||p.id||p.preset_id||'';
+        return '<option value="'+esc(id)+'"'+(id===curEffChar?' selected':'')+'>'+esc(name)+'</option>';
+      }).join('');
+    }
+    var effVoice=$('pk-eff-voice');
+    if(effVoice){
+      var curEffVoice=effVoice.value;
+      effVoice.innerHTML=voiceStacks.map(function(s){
+        var id=s.id||''; var name=s.name||s.id||'';
+        return '<option value="'+esc(id)+'"'+(id===curEffVoice?' selected':'')+'>'+esc(name)+'</option>';
+      }).join('');
+    }
+  }
 
   function slugify(s){ return (s||'').toLowerCase().replace(/[^a-z0-9_-]+/g,'-').replace(/^-|-$/g,'').slice(0,40); }
 
@@ -1058,7 +1600,10 @@ button.act:disabled{opacity:0.5;cursor:default;}
   function clearRobotForm(){ $('rb-name').value=''; $('rb-char').value=''; $('rb-tsip').value=''; $('rb-lanip').value=''; $('rb-motor').value=''; $('rb-lk').value=''; $('rb-voice').value=''; refreshRobotCliCommand(); }
   var srvDetectBtn=$('srv-detect'); if(srvDetectBtn) srvDetectBtn.addEventListener('click', detectLocalLiveKit);
   function triggerSession(id){
-    rpAction('POST','/robopark/api/robots/'+encodeURIComponent(id)+'/trigger-session',{confidence:0.9}).then(function(){ showOut('triggered motion for '+id); pollRobopark(); Park.refreshDrawer(); }).catch(function(e){ showOut('trigger-session ('+id+'): '+e.message); });
+    rpAction('POST','/robopark/api/robots/'+encodeURIComponent(id)+'/simulate-trigger',{}).then(function(res){
+      if(res && res.queued===false) throw new Error(res.reason||'trigger was not queued');
+      showOut('motion trigger queued for '+id+' — waiting for robot heartbeat'); pollRobopark(); Park.refreshDrawer();
+    }).catch(function(e){ showOut('motion trigger ('+id+'): '+e.message); });
   }
   function updateRobotCharacter(id, cid){
     if(!cid){ showOut('Choose a character preset'); return; }
@@ -1111,7 +1656,11 @@ button.act:disabled{opacity:0.5;cursor:default;}
     $('rpve-temperature').value=(s.temperature!=null?s.temperature:0.7);
     $('rpve-num-ctx').value=(s.num_ctx!=null?s.num_ctx:8192);
     $('rpve-tts-provider').value=s.tts_provider||'elevenlabs';
-    $('rpve-tts-voice').value=s.tts_voice||'';
+    // Stash the saved voice so refreshTtsVoiceSelect can keep it selected
+    // when the catalog hasn't loaded yet. fillTtsVoiceSelect reads this
+    // and includes it as a synthetic option if the catalog is missing it.
+    var sel = $('rpve-tts-voice'); if(sel) sel.__savedVoice = s.tts_voice || '';
+    refreshTtsVoiceSelect(true);
     $('rpve-tts-language').value=s.tts_language||'en';
     $('rpve-max-turns').value=(s.max_turns!=null?s.max_turns:20);
     $('rpve-endpointing').value=(s.min_endpointing_delay!=null?s.min_endpointing_delay:0.7);
@@ -1140,6 +1689,38 @@ button.act:disabled{opacity:0.5;cursor:default;}
   var vl=$('rp-voice-list'); if(vl) vl.addEventListener('click', function(e){ var c=e.target.closest?e.target.closest('.rp-card'):null; if(!c) return; var id=c.getAttribute('data-vsid'); if(id) openVoiceStackEdit(id); });
   var vsSave=$('rpve-save'); if(vsSave) vsSave.addEventListener('click', saveVoiceStackEdit);
   var vsCancel=$('rpve-cancel'); if(vsCancel) vsCancel.addEventListener('click', function(){ $('rp-voice-edit').style.display='none'; editingVoiceStackId=null; });
+  // TTS provider change: re-populate the voice <select> for the new provider.
+  // We pass force=true so the catalog is refetched if we haven't seen this
+  // provider yet; otherwise we use the cached list to repopulate instantly.
+  var ttsProvEl = $('rpve-tts-provider');
+  if(ttsProvEl) ttsProvEl.addEventListener('change', function(){
+    var sel = $('rpve-tts-voice');
+    if(sel) sel.__savedVoice = sel.value || sel.__savedVoice || '';
+    refreshTtsVoiceSelect(true);
+  });
+  // "Browse…" button: open the voice picker modal for the current provider.
+  var ttsBrowseBtn = $('rpve-tts-voice-browse');
+  if(ttsBrowseBtn) ttsBrowseBtn.addEventListener('click', function(){
+    var provEl = $('rpve-tts-provider');
+    var provider = (provEl && provEl.value) || 'elevenlabs';
+    openTtsVoicePicker(provider, function(voiceId){
+      var sel = $('rpve-tts-voice');
+      if(!sel) return;
+      // Make sure the chosen id exists as an option (it may have been
+      // absent from the inline dropdown because the catalog hadn't loaded
+      // yet). If it isn't there, append a synthetic option and select it.
+      var exists = false;
+      for(var i=0;i<sel.options.length;i++){ if(sel.options[i].value === voiceId){ exists=true; break; } }
+      if(!exists){
+        var o = document.createElement('option'); o.value=voiceId; o.textContent=voiceId+' (selected via Browse)';
+        sel.appendChild(o);
+      }
+      sel.value = voiceId;
+      sel.__savedVoice = voiceId;
+      var note = $('rpve-tts-voice-note');
+      if(note){ note.className='rp-autonote ok'; note.textContent='✓ selected '+voiceId+' from the '+provider+' catalog.'; }
+    });
+  });
 
   // ── character-preset edit panel ──
   var editingCharPresetId=null;
@@ -1193,6 +1774,10 @@ button.act:disabled{opacity:0.5;cursor:default;}
       // stash per-robot rows so the Park drawer can show live session stats
       roboparkByName = {};
       robotsFrom(d).forEach(function(x){ roboparkByName[robotName(x)] = x; if(x.name) roboparkByName[x.name] = x; });
+      // push the same map into the Park so the canvas can color robots
+      // by live/talking/waiting/ended status. updateTelemetry also
+      // re-derives the readiness → status mapping for every node.
+      if(Park && Park.updateTelemetry) Park.updateTelemetry(roboparkByName);
       if (d && (d.disabled || d.ok===false)){
         totals.innerHTML=''; $('pm-wrap').hidden=true;
         grid.innerHTML = '<div class="empty" style="grid-column:1/-1">'+esc(d.error||'no scheduler linked')+' — start the hub with <span class="mono">--scheduler-url http://&lt;scheduler&gt;:8080</span></div>';
@@ -1215,7 +1800,10 @@ button.act:disabled{opacity:0.5;cursor:default;}
         var lat = x.avg_latency_ms!=null?Math.round(x.avg_latency_ms)+'ms':'—';
         var dcls = x.drop_rate!=null?(x.drop_rate>=0.2?'bad':(x.drop_rate>=0.05?'warn':'ok')):'';
         var drop = x.drop_rate!=null?Math.round(x.drop_rate*100)+'%':'—';
-        var active = x.active_session||x.in_session||x.session_active;
+        var active = x.active_session||x.in_session||x.session_active||x.current_session_id||x.status==='connecting'||x.status==='running';
+        var readiness = x.readiness_code||'unknown';
+        var readinessBad = readiness!=='ready' && readiness!=='in_session';
+        var readinessClass = readiness==='ready'?'ok':(readiness==='in_session'?'':'bad');
         var idAttr = esc(name);
         html += '<div class="rp-card" data-name="'+esc(name)+'"><div class="rp-card-top">'+(avatar?'<div class="rp-card-img"><img alt="'+esc(name)+'" src="'+esc(avatar+QS)+'"></div>':'')+'<div style="min-width:0;flex:1;"><h4>'+esc(name)+(active?' <span class="chip" style="color:var(--ok)">live</span>':'')+'</h4></div></div><div class="rp-metrics">'
           + '<div class="rp-m"><span class="v">'+(x.trigger_count!=null?x.trigger_count:0)+'</span><span class="l">triggers</span></div>'
@@ -1227,6 +1815,8 @@ button.act:disabled{opacity:0.5;cursor:default;}
           + '<button class="rp-btn" data-act="preview" data-robot="'+idAttr+'">Preview</button>'
           + '<button class="rp-btn danger" data-act="end" data-robot="'+idAttr+'"'+((rpReadOnly||!active)?' disabled':'')+'>End session</button>'
           + '</div>'
+          + '<div class="pk-note '+readinessClass+'" style="margin-top:0.5rem;color:'+(readinessBad?'var(--bad)':'var(--ok)')+'">'+esc(readiness.replace(/_/g,' '))+' · '+esc(x.readiness_message||'no readiness detail')+'</div>'
+          + (readiness==='stuck_session'||readiness==='stale_session'||readiness==='join_timeout'?'<div class="rp-actions"><button class="rp-btn danger" data-act="recover" data-robot="'+idAttr+'"'+(rpReadOnly?' disabled':'')+'>Recover robot</button></div>':'')
           + '<div class="rp-field" style="margin-top:0.45rem"><label style="font-size:0.64rem">Character preset</label><select class="rp-char" data-act="char" data-robot="'+idAttr+'"><option value="">'+esc(x.character_id||x.character_preset_id||'— auto —')+'</option></select></div></div>';
       }
       grid.innerHTML = html;
@@ -1238,6 +1828,836 @@ button.act:disabled{opacity:0.5;cursor:default;}
     });
   }
 
+  // ══════════════════════════════════════════════════════════════════
+  //  Sessions & Telemetry — sub-tab control room
+  //  Six sub-tabs share a single pane-robopark pane:
+  //   Overview · Live Sessions · History · Audit Log · Fleet · Setup
+  //  Each sub-tab owns a poll function + a setInterval handle; the handles
+  //  are cleared on switch so the browser only fetches when its pane is
+  //  actually visible.
+  // ══════════════════════════════════════════════════════════════════
+
+  // ── shared time / formatting helpers ──
+  function rpFmtRelative(ts){
+    if(!ts) return '—';
+    var t=typeof ts==='number'?ts:Date.parse(ts);
+    if(!t||isNaN(t)) return '—';
+    var diff=Math.floor((Date.now()-t)/1000);
+    if(diff<0) diff=0;
+    if(diff<5) return 'just now';
+    if(diff<60) return diff+'s ago';
+    if(diff<3600) return Math.floor(diff/60)+'m ago';
+    if(diff<86400) return Math.floor(diff/3600)+'h ago';
+    return Math.floor(diff/86400)+'d ago';
+  }
+  function rpFmtAbs(ts){
+    if(!ts) return '—';
+    var t=typeof ts==='number'?ts:Date.parse(ts);
+    if(!t||isNaN(t)) return '—';
+    var d=new Date(t);
+    function p(n){return (n<10?'0':'')+n;}
+    return d.getFullYear()+'-'+p(d.getMonth()+1)+'-'+p(d.getDate())+' '+p(d.getHours())+':'+p(d.getMinutes())+':'+p(d.getSeconds());
+  }
+  function rpFmtDuration(sec){
+    if(sec==null||isNaN(sec)) return '—';
+    sec=Math.max(0,Math.floor(sec));
+    var h=Math.floor(sec/3600), m=Math.floor((sec%3600)/60), s=sec%60;
+    if(h) return h+'h '+m+'m';
+    if(m) return m+'m '+s+'s';
+    return s+'s';
+  }
+  function rpEndReasonClass(r){
+    var x=String(r||'').toLowerCase();
+    if(x==='operator'||x==='end_session'||x==='manual') return 'operator';
+    if(x==='error'||x==='abnormal'||x==='failed') return 'error';
+    if(x==='timeout'||x==='silence_timeout') return 'timeout';
+    if(x==='silence') return 'silence';
+    if(x==='completed'||x==='normal'||x==='done') return 'completed';
+    return '';
+  }
+  function rpCategoryIcon(cat){
+    var c=String(cat||'').toLowerCase();
+    if(c==='robot') return '🤖';
+    if(c==='device') return '📡';
+    if(c==='session') return '🎙';
+    if(c==='server') return '🖥';
+    if(c==='voice') return '🗣';
+    if(c==='character') return '🎭';
+    if(c==='preview') return '👁';
+    if(c==='settings') return '⚙';
+    return '✦';
+  }
+
+  // ── Sub-tab routing ──
+  var rpSubTab = 'overview';
+  var rpIntervals = {};      // sub-tab name -> setInterval handle
+  var rpHistoryAll = [];      // full recent-session list (we paginate client-side)
+  function setRpSubTab(name){
+    if(!name) return;
+    rpSubTab = name;
+    var btns = document.querySelectorAll('.rp-subtab');
+    for(var i=0;i<btns.length;i++){
+      var b=btns[i], sub=b.getAttribute('data-sub');
+      var isActive = sub===name;
+      b.classList.toggle('active', isActive);
+      b.setAttribute('aria-selected', isActive?'true':'false');
+    }
+    var subs = document.querySelectorAll('.rp-sub');
+    for(var j=0;j<subs.length;j++){
+      var s=subs[j];
+      s.classList.toggle('active', s.id==='rp-sub-'+name);
+    }
+    // stop every sub-tab interval, then start only the active one
+    var names = ['overview','live','history','audit','fleet','setup'];
+    for(var k=0;k<names.length;k++){
+      var n=names[k];
+      if(rpIntervals[n]){ clearInterval(rpIntervals[n]); rpIntervals[n]=null; }
+    }
+    if(name==='overview'){ pollOverview(); rpIntervals.overview = setInterval(pollOverview, 4000); }
+    if(name==='live'){ pollLiveSessions(); startLiveAutoRefresh(); }
+    if(name==='history'){ rpHistoryPage=0; pollHistory(); }
+    if(name==='audit'){ pollAuditLog(); rpIntervals.audit = setInterval(pollAuditLog, 6000); }
+    if(name==='fleet'){ pollFleet(); rpIntervals.fleet = setInterval(pollFleet, 5000); }
+    if(name==='setup'){ pollSettings(); loadCharacterPresets(); loadVoiceStacks(); pollRuntimeHealth(); }
+    // remember last sub-tab in URL hash
+    try{ history.replaceState(null,'','#robopark/'+name); }catch(e){}
+  }
+  function buildRpSubTabs(){
+    var btns = document.querySelectorAll('.rp-subtab');
+    for(var i=0;i<btns.length;i++){
+      (function(btn){
+        btn.addEventListener('click', function(){ setRpSubTab(btn.getAttribute('data-sub')); });
+      })(btns[i]);
+    }
+    // restore from hash like #robopark/history
+    var h=String(location.hash||'').replace('#','');
+    var m = h.match(/^robopark\\/(.+)$/);
+    var initial = (m && m[1]) ? m[1] : 'overview';
+    if(['overview','live','history','audit','fleet','setup'].indexOf(initial)<0) initial='overview';
+    setRpSubTab(initial);
+  }
+
+  // ── Modal helper ──
+  function showModal(title, bodyHtml){
+    var back = $('rp-modal-back');
+    if(!back) return;
+    $('rp-modal-title').textContent = title || 'Details';
+    $('rp-modal-body').innerHTML = bodyHtml || '';
+    back.classList.add('open');
+  }
+  function closeModal(){
+    var back = $('rp-modal-back');
+    if(!back) return;
+    back.classList.remove('open');
+    $('rp-modal-body').innerHTML = '';
+  }
+  // wire the close handlers (once)
+  (function(){
+    var closeBtn = $('rp-modal-close');
+    if(closeBtn) closeBtn.addEventListener('click', closeModal);
+    var back = $('rp-modal-back');
+    if(back) back.addEventListener('click', function(e){ if(e.target===back) closeModal(); });
+    document.addEventListener('keydown', function(e){ if(e.key==='Escape') closeModal(); });
+  })();
+
+  // ── TTS voice picker modal ──
+  // A robust, searchable, debounced-fetched picker for any TTS provider that
+  // exposes /api/voices/<provider> on the scheduler. Designed specifically
+  // for ElevenLabs (hundreds of voices, needs search + loading + error
+  // states) but works for any provider — Kokoro, Piper, etc.
+  //
+  // Usage: openTtsVoicePicker('elevenlabs', function(voiceId){ ... });
+  // The callback receives the picked voice_id and the modal closes itself.
+  // If the user dismisses the modal (Esc, backdrop, ✕) the callback is NOT
+  // called. The catalog is cached in ttsVoiceCache[provider] and re-used
+  // on subsequent opens; a manual "Refresh" button forces a refetch.
+  var ttsPickerState = {
+    provider: null,
+    voices: [],
+    filter: '',
+    loading: false,
+    error: null,
+    onPick: null,
+  };
+  function openTtsVoicePicker(provider, onPick){
+    ttsPickerState.provider = provider || 'elevenlabs';
+    ttsPickerState.onPick = (typeof onPick === 'function') ? onPick : null;
+    ttsPickerState.filter = '';
+    showModal('Browse '+ttsPickerState.provider+' voices', buildTtsPickerBody());
+    // Focus the search box on the next paint so the modal animation has
+    // started and the input is visible.
+    setTimeout(function(){
+      var inp = $('rp-voice-picker-search');
+      if(inp){ try{ inp.focus(); inp.select && inp.select(); }catch(e){} }
+    }, 30);
+    // Re-render after the catalog is loaded (may already be cached).
+    renderTtsPicker();
+    loadTtsVoiceCatalog(ttsPickerState.provider, {force:false}).then(function(){
+      // The modal may have been closed while the fetch was in flight.
+      if(ttsPickerState.provider !== provider) return;
+      renderTtsPicker();
+    });
+  }
+  function buildTtsPickerBody(){
+    // Toolbar (search + refresh) + scrollable results area. The two
+    // containers (#rp-voice-picker-results + #rp-voice-picker-status) are
+    // re-rendered in place by renderTtsPicker(), so opening the modal
+    // repeatedly is cheap and we don't leak listeners.
+    return ''
+      + '<div class="rp-voice-picker">'
+      +   '<div class="rp-voice-picker-toolbar">'
+      +     '<input type="search" id="rp-voice-picker-search" placeholder="Search by name, id, language, or category…" autocomplete="off" spellcheck="false">'
+      +     '<button type="button" class="rp-btn" id="rp-voice-picker-refresh" title="Refetch the voice catalog from the scheduler">↻ Refresh</button>'
+      +   '</div>'
+      +   '<div class="rp-voice-picker-status" id="rp-voice-picker-status"></div>'
+      +   '<div class="rp-voice-picker-results" id="rp-voice-picker-results"></div>'
+      +   '<div class="rp-voice-picker-foot">'
+      +     '<span class="rp-muted">Click a voice to select it · Esc to cancel</span>'
+      +   '</div>'
+      + '</div>';
+  }
+  function renderTtsPicker(){
+    var status = $('rp-voice-picker-status');
+    var results = $('rp-voice-picker-results');
+    if(!status || !results) return;       // modal was closed
+    var cache = ttsVoiceCache[ttsPickerState.provider];
+    var voices = (cache && Array.isArray(cache.voices)) ? cache.voices : [];
+    var warning = cache && cache.warning;
+    var source = cache && cache.source;
+
+    // ── status row (loading / error / counts / warning) ──
+    if(ttsPickerState.loading && !cache){
+      status.className = 'rp-voice-picker-status busy';
+      status.innerHTML = '<span class="rp-spinner"></span> Loading '+esc(ttsPickerState.provider)+' voice catalog…';
+      results.innerHTML = '';
+      return;
+    }
+    if(!cache){
+      status.className = 'rp-voice-picker-status bad';
+      status.innerHTML = '⚠ No catalog data for '+esc(ttsPickerState.provider)+'. Click Refresh to retry.';
+      results.innerHTML = '';
+      return;
+    }
+    if(warning && !voices.length){
+      status.className = 'rp-voice-picker-status bad';
+      status.innerHTML = '⚠ '+esc(warning);
+      results.innerHTML = '';
+      return;
+    }
+    var bits = [];
+    bits.push('<b>'+voices.length+'</b> '+esc(ttsPickerState.provider)+' voice'+(voices.length===1?'':'s'));
+    if(source) bits.push('· source: <span class="rp-mono">'+esc(source)+'</span>');
+    if(warning) bits.push('<span style="color:var(--bad)">⚠ '+esc(warning)+'</span>');
+    status.className = warning ? 'rp-voice-picker-status warn' : 'rp-voice-picker-status';
+    status.innerHTML = bits.join(' ');
+
+    // ── filtered results ──
+    var q = String(ttsPickerState.filter || '').toLowerCase().trim();
+    var filtered = voices;
+    if(q){
+      filtered = voices.filter(function(v){
+        var blob = [
+          v.id, v.name, v.language, v.gender, v.category, v.description
+        ].map(function(x){return x==null?'':String(x);}).join(' ').toLowerCase();
+        return blob.indexOf(q) >= 0;
+      });
+    }
+    if(!filtered.length){
+      results.innerHTML = '<div class="rp-voice-picker-empty">'
+        + (q ? ('No voices match “'+esc(q)+'”.')
+             : ('No voices available for this provider.'))
+        + '</div>';
+      return;
+    }
+    // Group by category for a tidy scannable list. Providers that don't
+    // set a category (Kokoro static list, etc.) all land in "Other".
+    var groups = {};
+    for(var i=0;i<filtered.length;i++){
+      var v = filtered[i];
+      var key = v.category || (v.language ? ('Language: '+v.language) : 'Other');
+      if(!groups[key]) groups[key] = [];
+      groups[key].push(v);
+    }
+    var groupNames = Object.keys(groups).sort(function(a,b){
+      if(a==='Other') return 1;
+      if(b==='Other') return -1;
+      return a.localeCompare(b);
+    });
+    var html = '';
+    for(var g=0;g<groupNames.length;g++){
+      var name = groupNames[g];
+      html += '<div class="rp-vp-group"><div class="rp-vp-group-head">'+esc(name)+' · '+groups[name].length+'</div>';
+      for(var j=0;j<groups[name].length;j++){
+        var voice = groups[name][j];
+        var id = voice.id || voice.voice_id || '';
+        if(!id) continue;
+        var meta = [];
+        if(voice.language) meta.push(voice.language);
+        if(voice.gender)   meta.push(voice.gender);
+        var sub = meta.length ? ('<span class="rp-vp-meta">'+esc(meta.join(' · '))+'</span>') : '';
+        var desc = voice.description ? ('<div class="rp-vp-desc">'+esc(voice.description)+'</div>') : '';
+        html += '<button type="button" class="rp-vp-item" data-voice-id="'+esc(id)+'">'
+              +   '<div class="rp-vp-row1"><span class="rp-vp-name">'+esc(voice.name||id)+'</span>'+sub+'</div>'
+              +   '<div class="rp-vp-id">'+esc(id)+'</div>'
+              +   desc
+              + '</button>';
+      }
+      html += '</div>';
+    }
+    results.innerHTML = html;
+  }
+  // Click delegation for picker items + the refresh button + the search
+  // input. Bound once on the document so re-opening the modal doesn't
+  // stack listeners.
+  document.addEventListener('click', function(e){
+    var btn = e.target.closest && e.target.closest('.rp-vp-item');
+    if(btn){
+      var vid = btn.getAttribute('data-voice-id');
+      if(vid && ttsPickerState.onPick){ ttsPickerState.onPick(vid); }
+      closeModal();
+      return;
+    }
+    var r = e.target.closest && e.target.closest('#rp-voice-picker-refresh');
+    if(r){
+      // Re-fetch the catalog, ignore cache, then re-render.
+      loadTtsVoiceCatalog(ttsPickerState.provider, {force:true}).then(function(){ renderTtsPicker(); });
+      return;
+    }
+  });
+  document.addEventListener('input', function(e){
+    if(e.target && e.target.id === 'rp-voice-picker-search'){
+      ttsPickerState.filter = e.target.value;
+      renderTtsPicker();
+    }
+  });
+
+  // ── Live Sessions sub-tab ──
+  var rpLiveAuto = true;
+  var rpLiveClockTimer = null;
+  function startLiveAutoRefresh(){
+    if(rpIntervals.live){ clearInterval(rpIntervals.live); rpIntervals.live=null; }
+    if(rpLiveClockTimer){ clearInterval(rpLiveClockTimer); rpLiveClockTimer=null; }
+    if(rpLiveAuto){
+      rpIntervals.live = setInterval(pollLiveSessions, 3000);
+      rpLiveClockTimer = setInterval(updateLiveDurations, 1000);
+    }
+  }
+  function updateLiveDurations(){
+    var tbody = $('rp-live-tbody'); if(!tbody) return;
+    var cells = tbody.querySelectorAll('td[data-started]');
+    for(var i=0;i<cells.length;i++){
+      var t = parseInt(cells[i].getAttribute('data-started'),10);
+      if(!t) continue;
+      cells[i].textContent = rpFmtDuration(Math.floor((Date.now()-t)/1000));
+    }
+  }
+  function pollLiveSessions(){
+    getJson('/robopark/api/sessions?active_only=true').then(function(rows){
+      renderLiveSessions(Array.isArray(rows)?rows:[]);
+    }).catch(function(e){ /* soft fail */ });
+  }
+  function renderLiveSessions(rows){
+    var tbody = $('rp-live-tbody'), empty = $('rp-live-empty'), wrap = $('rp-live-wrap');
+    var searchEl=$('rp-live-search'), robotEl=$('rp-live-robot');
+    var search = searchEl ? String(searchEl.value||'').toLowerCase() : '';
+    var robotF = robotEl ? String(robotEl.value||'') : '';
+    // refresh the robot dropdown whenever the set changes
+    if(robotEl){
+      var known={}; for(var i=0;i<rows.length;i++){ var rid=String(rows[i].robot_id||''); if(rid) known[rid]=1; }
+      var present = robotEl.querySelectorAll('option');
+      var have={};
+      for(var j=1;j<present.length;j++){ have[present[j].value]=1; if(!known[present[j].value]){ robotEl.removeChild(present[j]); } }
+      for(var rid in known){ if(!have[rid]){ var o=document.createElement('option'); o.value=rid; o.textContent=rid; robotEl.appendChild(o); } }
+    }
+    var filtered = rows.filter(function(s){
+      if(robotF && String(s.robot_id||'')!==robotF) return false;
+      if(search){
+        var blob = (String(s.session_id||'')+' '+String(s.robot_id||'')+' '+String(s.room_name||'')).toLowerCase();
+        if(blob.indexOf(search)<0) return false;
+      }
+      return true;
+    });
+    if(!filtered.length){ tbody.innerHTML=''; wrap.style.display='none'; empty.style.display='block'; }
+    else { empty.style.display='none'; wrap.style.display='block'; }
+    var html='';
+    for(var i=0;i<filtered.length;i++){
+      var s = filtered[i];
+      var rid = s.robot_id || '';
+      var sid = s.session_id || '';
+      var started = s.started_at ? Date.parse(s.started_at) : null;
+      var elapsed = started ? Math.floor((Date.now()-started)/1000) : null;
+      html += '<tr>'
+        + '<td><b>'+esc(rid)+'</b></td>'
+        + '<td><span class="sid" title="'+esc(sid)+'">'+esc(sid)+'</span></td>'
+        + '<td><span class="t-rel"><span class="live-dot"></span>'+esc(rpFmtRelative(started))+'</span><span class="t-abs">'+esc(rpFmtAbs(started))+'</span></td>'
+        + '<td data-started="'+started+'">'+esc(rpFmtDuration(elapsed))+'</td>'
+        + '<td><span class="rp-end-badge active">active</span></td>'
+        + '<td style="display:flex;gap:0.3rem;">'
+        +   '<button class="rp-btn" data-act="open-robot" data-robot="'+esc(rid)+'">Open robot</button>'
+        +   '<button class="rp-btn danger" data-act="end-session" data-sid="'+esc(sid)+'" data-robot="'+esc(rid)+'">End</button>'
+        + '</td>'
+        + '</tr>';
+    }
+    tbody.innerHTML = html;
+    // update the tab badge
+    var badge = $('rps-live-badge'); if(badge) badge.textContent = filtered.length;
+  }
+  function endSessionFromTable(sessionId, robotId){
+    if(!confirm('End session '+sessionId+' for '+robotId+'?')) return;
+    rpAction('POST','/robopark/api/robots/'+encodeURIComponent(robotId)+'/end-session?reason=operator').then(function(){
+      showOut('ended session for '+robotId);
+      pollLiveSessions();
+  pollRobopark();
+  pollRuntimeHealth();
+    }).catch(function(e){ showOut('end-session: '+e.message); });
+  }
+
+  // wire live tab interactions
+  (function(){
+    var s=$('rp-live-search'); if(s) s.addEventListener('input', function(){ pollLiveSessions(); });
+    var r=$('rp-live-robot'); if(r) r.addEventListener('change', function(){ pollLiveSessions(); });
+    var a=$('rp-live-autoref'); if(a) a.addEventListener('change', function(){ rpLiveAuto = !!a.checked; startLiveAutoRefresh(); });
+    var rb=$('rp-live-refresh'); if(rb) rb.addEventListener('click', pollLiveSessions);
+    var tb=$('rp-live-tbody'); if(tb) tb.addEventListener('click', function(e){
+      var b = e.target.closest ? e.target.closest('.rp-btn') : null;
+      if(!b) return;
+      var act = b.getAttribute('data-act');
+      if(act==='end-session'){ endSessionFromTable(b.getAttribute('data-sid'), b.getAttribute('data-robot')); }
+      if(act==='open-robot'){ var rid=b.getAttribute('data-robot'); if(rid){ setRpSubTab('fleet'); } }
+    });
+  })();
+
+  // ── History sub-tab ──
+  var rpHistoryFilter = { robot: '', endReason: '', range: '7d', search: '' };
+  var rpHistoryPage = 0;
+  var RP_HISTORY_PAGE_SIZE = 25;
+  function pollHistory(){
+    getJson('/robopark/api/sessions?active_only=false&limit=500').then(function(rows){
+      rpHistoryAll = Array.isArray(rows)?rows:[];
+      renderHistory(rpHistoryAll);
+    }).catch(function(e){
+      var tbody=$('rp-hist-tbody'); if(tbody) tbody.innerHTML='';
+      var empty=$('rp-hist-empty'); if(empty){ empty.style.display='block'; empty.textContent='history unreachable: '+(e&&e.message||''); }
+    });
+  }
+  function rpHistoryWithinRange(s, range){
+    if(range==='all'||!range) return true;
+    if(!s.started_at) return true;  // include rows with no timestamp when no filter set
+    var t = Date.parse(s.started_at); if(isNaN(t)) return true;
+    var now = Date.now();
+    if(range==='24h') return (now-t) <= 86400e3;
+    if(range==='7d')  return (now-t) <= 7*86400e3;
+    if(range==='30d') return (now-t) <= 30*86400e3;
+    return true;
+  }
+  function renderHistory(rows){
+    rows = rows || rpHistoryAll;
+    var tbody = $('rp-hist-tbody'), empty = $('rp-hist-empty'), wrap = $('rp-hist-wrap');
+    var info = $('rp-hist-info');
+    // refresh robot dropdown from rows
+    var rsel = $('rp-hist-robot');
+    if(rsel){
+      var known={};
+      for(var i=0;i<rows.length;i++){ var r=String(rows[i].robot_id||''); if(r) known[r]=1; }
+      // remove stale (preserve first "all" option)
+      var opts=rsel.querySelectorAll('option');
+      for(var j=opts.length-1;j>=1;j--){ if(!known[opts[j].value]) rsel.removeChild(opts[j]); }
+      for(var rid in known){
+        var present=false; for(var k=1;k<opts.length;k++){ if(opts[k].value===rid){ present=true; break; } }
+        if(!present){ var o=document.createElement('option'); o.value=rid; o.textContent=rid; rsel.appendChild(o); }
+      }
+    }
+    var f = rpHistoryFilter;
+    var filtered = rows.filter(function(s){
+      if(f.robot && String(s.robot_id||'')!==f.robot) return false;
+      if(f.endReason && String(s.end_reason||'').toLowerCase()!==f.endReason) return false;
+      if(f.search){
+        var blob = (String(s.session_id||'')+' '+String(s.robot_id||'')+' '+String(s.room_name||'')).toLowerCase();
+        if(blob.indexOf(f.search)<0) return false;
+      }
+      if(!rpHistoryWithinRange(s, f.range)) return false;
+      return true;
+    });
+    var totalPages = Math.max(1, Math.ceil(filtered.length / RP_HISTORY_PAGE_SIZE));
+    if(rpHistoryPage >= totalPages) rpHistoryPage = totalPages-1;
+    if(rpHistoryPage < 0) rpHistoryPage = 0;
+    var start = rpHistoryPage * RP_HISTORY_PAGE_SIZE;
+    var slice = filtered.slice(start, start+RP_HISTORY_PAGE_SIZE);
+    if(!slice.length){
+      tbody.innerHTML = '';
+      wrap.style.display='none';
+      empty.style.display='block';
+      empty.textContent = filtered.length ? 'no results on this page' : 'no sessions match the current filters';
+    } else {
+      empty.style.display='none';
+      wrap.style.display='block';
+    }
+    var html='';
+    for(var i=0;i<slice.length;i++){
+      var s = slice[i];
+      var sid = s.session_id || '';
+      var rid = s.robot_id || '';
+      var started = s.started_at ? Date.parse(s.started_at) : null;
+      var ended = s.ended_at ? Date.parse(s.ended_at) : null;
+      var dur = s.duration_seconds!=null ? s.duration_seconds : (started&&ended?Math.floor((ended-started)/1000):null);
+      var reason = s.end_reason || '';
+      var reasonCls = rpEndReasonClass(reason);
+      var trig = s.trigger_count!=null ? s.trigger_count : '—';
+      var lat = s.avg_latency_ms!=null ? Math.round(s.avg_latency_ms)+'ms' : '—';
+      html += '<tr data-sid="'+esc(sid)+'">'
+        + '<td><span class="sid" title="'+esc(sid)+'">'+esc(sid)+'</span></td>'
+        + '<td><b>'+esc(rid)+'</b></td>'
+        + '<td><span class="t-rel">'+esc(rpFmtRelative(started))+'</span><span class="t-abs">'+esc(rpFmtAbs(started))+'</span></td>'
+        + '<td><span class="t-rel">'+esc(rpFmtRelative(ended))+'</span><span class="t-abs">'+esc(rpFmtAbs(ended))+'</span></td>'
+        + '<td>'+esc(rpFmtDuration(dur))+'</td>'
+        + '<td><span class="rp-end-badge '+(reasonCls||'')+'">'+esc(reason||'—')+'</span></td>'
+        + '<td>'+esc(trig)+'</td>'
+        + '<td>'+esc(lat)+'</td>'
+        + '<td><button class="rp-btn" data-act="view" data-sid="'+esc(sid)+'">View</button></td>'
+        + '</tr>';
+    }
+    tbody.innerHTML = html;
+    if(info) info.textContent = 'showing '+(slice.length?(start+1):0)+'–'+(start+slice.length)+' of '+filtered.length+' · page '+(rpHistoryPage+1)+' / '+totalPages;
+    var prev=$('rp-hist-prev'), next=$('rp-hist-next');
+    if(prev) prev.disabled = rpHistoryPage<=0;
+    if(next) next.disabled = rpHistoryPage>=totalPages-1;
+  }
+  function openSessionDetailModal(s){
+    if(!s) return;
+    function row(k,v){ return '<div class="kv"><div class="k">'+esc(k)+'</div><div class="v">'+esc(v==null?'—':v)+'</div></div>'; }
+    var html = '';
+    html += row('Session ID', s.session_id);
+    html += row('Robot', s.robot_id);
+    html += row('Room', s.room_name);
+    html += row('Started', rpFmtAbs(s.started_at) + ' ('+rpFmtRelative(s.started_at)+')');
+    html += row('Ended',   rpFmtAbs(s.ended_at)   + ' ('+rpFmtRelative(s.ended_at)+')');
+    html += row('Duration', rpFmtDuration(s.duration_seconds));
+    html += row('End reason', s.end_reason || '—');
+    html += row('Trigger count', s.trigger_count!=null?s.trigger_count:'—');
+    html += row('Avg latency', s.avg_latency_ms!=null?Math.round(s.avg_latency_ms)+'ms':'—');
+    html += row('Drop rate', s.drop_rate!=null?Math.round(s.drop_rate*100)+'%':'—');
+    html += row('Operator', s.operator_id || s.ended_by || '—');
+    html += row('Character', s.character_id || s.character_name || '—');
+    html += row('Voice stack', s.voice_stack_id || '—');
+    if(s.notes) html += row('Notes', s.notes);
+    if(s.metadata){
+      html += '<div class="kv"><div class="k">Metadata</div><div class="v"><pre>'+esc(typeof s.metadata==='string'?s.metadata:JSON.stringify(s.metadata,null,2))+'</pre></div></div>';
+    }
+    showModal('Session '+(s.session_id||''), html);
+  }
+  (function(){
+    var s=$('rp-hist-search'); if(s) s.addEventListener('input', function(){ rpHistoryFilter.search = String(s.value||'').toLowerCase(); rpHistoryPage=0; renderHistory(); });
+    var r=$('rp-hist-robot'); if(r) r.addEventListener('change', function(){ rpHistoryFilter.robot = r.value||''; rpHistoryPage=0; renderHistory(); });
+    var re=$('rp-hist-reason'); if(re) re.addEventListener('change', function(){ rpHistoryFilter.endReason = re.value||''; rpHistoryPage=0; renderHistory(); });
+    var ra=$('rp-hist-range'); if(ra) ra.addEventListener('change', function(){ rpHistoryFilter.range = ra.value||'7d'; rpHistoryPage=0; renderHistory(); });
+    var rb=$('rp-hist-refresh'); if(rb) rb.addEventListener('click', pollHistory);
+    var prev=$('rp-hist-prev'); if(prev) prev.addEventListener('click', function(){ rpHistoryPage=Math.max(0,rpHistoryPage-1); renderHistory(); });
+    var next=$('rp-hist-next'); if(next) next.addEventListener('click', function(){ rpHistoryPage=rpHistoryPage+1; renderHistory(); });
+    var tb=$('rp-hist-tbody'); if(tb) tb.addEventListener('click', function(e){
+      var b = e.target.closest ? e.target.closest('.rp-btn') : null; if(!b) return;
+      if(b.getAttribute('data-act')==='view'){
+        var sid = b.getAttribute('data-sid');
+        for(var i=0;i<rpHistoryAll.length;i++){ if(String(rpHistoryAll[i].session_id||'')===sid){ openSessionDetailModal(rpHistoryAll[i]); return; } }
+      }
+    });
+  })();
+
+  // ── Audit Log sub-tab ──
+  var rpAuditFilter = { category: '' };
+  var rpAuditLast = [];
+  function pollAuditLog(){
+    var qs = rpAuditFilter.category ? ('?category='+encodeURIComponent(rpAuditFilter.category)+'&limit=200') : '?limit=200';
+    getJson('/robopark/api/history'+qs).then(function(rows){
+      renderAuditLog(Array.isArray(rows)?rows:[]);
+    }).catch(function(){
+      var tbody=$('rp-audit-tbody'); if(tbody) tbody.innerHTML='';
+      var empty=$('rp-audit-empty'); if(empty){ empty.style.display='block'; empty.textContent='audit log unreachable'; }
+    });
+  }
+  function renderAuditLog(rows){
+    var tbody=$('rp-audit-tbody'), empty=$('rp-audit-empty'), wrap=$('rp-audit-wrap');
+    if(!rows.length){
+      tbody.innerHTML='';
+      wrap.style.display='none';
+      empty.style.display='block';
+      return;
+    }
+    empty.style.display='none';
+    wrap.style.display='block';
+    var html='';
+    for(var i=0;i<rows.length;i++){
+      var ev=rows[i];
+      var ts = ev.timestamp;
+      var cat = ev.category || '—';
+      var act = ev.action || '—';
+      var ent = (ev.entity_type||'')+(ev.entity_id?(' · '+ev.entity_id):'');
+      var det = ev.details || '';
+      var src = ev.actor || '—';
+      if(typeof det==='object') det = JSON.stringify(det);
+      var detShort = String(det);
+      if(detShort.length>80) detShort = detShort.slice(0,77)+'…';
+      html += '<tr data-idx="'+i+'">'
+        + '<td><span class="t-rel">'+esc(rpFmtRelative(ts))+'</span><span class="t-abs">'+esc(rpFmtAbs(ts))+'</span></td>'
+        + '<td><span class="rp-end-badge">'+esc(rpCategoryIcon(cat))+' '+esc(cat)+'</span></td>'
+        + '<td><b>'+esc(act)+'</b></td>'
+        + '<td>'+esc(ent||'—')+'</td>'
+        + '<td style="max-width:32ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="'+esc(String(det).replace(/"/g,'&quot;'))+'">'+esc(detShort)+'</td>'
+        + '<td>'+esc(src)+'</td>'
+        + '</tr>';
+    }
+    tbody.innerHTML = html;
+    // stash for modal
+    rpAuditLast = rows;
+  }
+  function openAuditDetailModal(ev){
+    if(!ev) return;
+    function row(k,v){ return '<div class="kv"><div class="k">'+esc(k)+'</div><div class="v">'+esc(v==null?'—':v)+'</div></div>'; }
+    var html = '';
+    html += row('Time', rpFmtAbs(ev.timestamp) + ' ('+rpFmtRelative(ev.timestamp)+')');
+    html += row('Category', rpCategoryIcon(ev.category)+' '+(ev.category||'—'));
+    html += row('Action', ev.action);
+    html += row('Entity type', ev.entity_type);
+    html += row('Entity ID', ev.entity_id);
+    html += row('Actor / source', ev.actor);
+    if(ev.details){
+      var dStr = typeof ev.details==='string' ? ev.details : JSON.stringify(ev.details,null,2);
+      html += '<div class="kv"><div class="k">Details</div><div class="v"><pre>'+esc(dStr)+'</pre></div></div>';
+    }
+    showModal('Audit · '+(ev.action||'event')+' · '+(ev.entity_id||ev.entity_type||''), html);
+  }
+  (function(){
+    var chips = document.querySelectorAll('.rp-cat-chip');
+    for(var i=0;i<chips.length;i++){
+      (function(c){
+        c.addEventListener('click', function(){
+          for(var j=0;j<chips.length;j++) chips[j].classList.remove('active');
+          c.classList.add('active');
+          rpAuditFilter.category = c.getAttribute('data-cat')||'';
+          pollAuditLog();
+        });
+      })(chips[i]);
+    }
+    var rb=$('rp-audit-refresh'); if(rb) rb.addEventListener('click', pollAuditLog);
+    var tb=$('rp-audit-tbody'); if(tb) tb.addEventListener('click', function(e){
+      var tr = e.target.closest ? e.target.closest('tr') : null; if(!tr) return;
+      var idx = parseInt(tr.getAttribute('data-idx'),10);
+      if(!isNaN(idx) && rpAuditLast[idx]) openAuditDetailModal(rpAuditLast[idx]);
+    });
+  })();
+
+  // ── Fleet sub-tab (uses the existing #rp-grid) ──
+  // The Fleet sub-tab reuses the existing #rp-grid render in pollRobopark().
+  // We add sparklines by overlaying on top of the existing cards.
+  function pollFleet(){
+    pollRobopark();
+  }
+  function drawRobotSparkline(canvas, sessions){
+    if(!canvas || !canvas.getContext) return;
+    var ctx = canvas.getContext('2d');
+    var w = canvas.width = canvas.clientWidth;
+    var h = canvas.height = canvas.clientHeight;
+    ctx.clearRect(0,0,w,h);
+    if(!sessions || sessions.length<2){
+      ctx.fillStyle = 'rgba(158,147,180,0.4)';
+      ctx.font = '10px ui-monospace,Menlo,Consolas,monospace';
+      ctx.fillText('no history', 6, h/2+3);
+      return;
+    }
+    var counts = sessions.map(function(s){
+      return (s.duration_seconds!=null?s.duration_seconds:(s.ended_at&&s.started_at?(Date.parse(s.ended_at)-Date.parse(s.started_at))/1000:0));
+    });
+    var mx = Math.max.apply(null, counts); if(mx<=0) mx=1;
+    var pad = 2;
+    var stepX = (w - pad*2) / (counts.length - 1);
+    ctx.beginPath();
+    for(var i=0;i<counts.length;i++){
+      var x = pad + i*stepX;
+      var y = h - pad - (counts[i]/mx) * (h - pad*2);
+      if(i===0) ctx.moveTo(x,y); else ctx.lineTo(x,y);
+    }
+    // gold gradient line
+    try{
+      var grad = ctx.createLinearGradient(0,0,0,h);
+      grad.addColorStop(0, '#FFD86B');
+      grad.addColorStop(1, '#E6B23C');
+      ctx.strokeStyle = grad;
+    }catch(e){ ctx.strokeStyle = '#E6B23C'; }
+    ctx.lineWidth = 1.4;
+    ctx.lineJoin = 'round';
+    ctx.stroke();
+    // fill underneath
+    ctx.lineTo(pad+(counts.length-1)*stepX, h-pad);
+    ctx.lineTo(pad, h-pad);
+    ctx.closePath();
+    ctx.fillStyle = 'rgba(230,178,60,0.18)';
+    ctx.fill();
+  }
+
+  // ── Overview sub-tab ──
+  function pollOverview(){
+    Promise.all([
+      getJson('/robopark/api/sessions?active_only=false&limit=200').catch(function(){ return []; }),
+      getJson('/robopark/api/sessions/stats').catch(function(){ return {}; }),
+      getJson('/robopark/api/telemetry').catch(function(){ return {robots:[],totals:{}}; }),
+      getJson('/robopark/api/history?limit=20').catch(function(){ return []; })
+    ]).then(function(results){
+      renderOverview({
+        sessions: Array.isArray(results[0])?results[0]:[],
+        stats: results[1]||{},
+        telemetry: results[2]||{robots:[],totals:{}},
+        history: Array.isArray(results[3])?results[3]:[]
+      });
+    }).catch(function(){ /* soft fail */ });
+  }
+  function renderOverview(data){
+    var sessions = data.sessions||[];
+    var stats = data.stats||{};
+    var telemetry = data.telemetry||{};
+    var totals = telemetry.totals || {};
+    var robots = Array.isArray(telemetry.robots)?telemetry.robots:[];
+    // active sessions
+    var active = 0; for(var i=0;i<sessions.length;i++){ if(!sessions[i].ended_at) active++; }
+    var totalTrig = totals.trigger_count!=null?totals.trigger_count:stats.total_sessions;
+    var today = stats.today_sessions!=null?stats.today_sessions:0;
+    var avgLat = (function(){
+      var vals=[];
+      for(var i=0;i<robots.length;i++){ if(robots[i].avg_latency_ms!=null) vals.push(robots[i].avg_latency_ms); }
+      if(!vals.length) return null;
+      return Math.round(vals.reduce(function(a,b){return a+b;},0)/vals.length);
+    })();
+    var dropRate = totals.drop_rate!=null?totals.drop_rate:null;
+    var total = stats.total_sessions!=null?stats.total_sessions:0;
+    // uptime: ratio of robots connected — best effort (we don't have an uptime API,
+    // so we fall back to "robot count online" derived from telemetry robots)
+    // Render the KPI strip
+    function kpi(l,v,cls,sub){
+      return '<div class="rp-kpi"><div class="l">'+esc(l)+'</div><div class="v '+esc(cls||'')+'">'+esc(v)+'</div>'+(sub?('<div class="s">'+esc(sub)+'</div>'):'')+'</div>';
+    }
+    var html = '';
+    html += kpi('Triggers (total)', totalTrig!=null?totalTrig:'—', 'info', robots.length+' robot'+(robots.length===1?'':'s'));
+    html += kpi('Today', today, today>0?'ok':'', 'sessions today');
+    html += kpi('Active', active, active>0?'ok':'', 'live right now');
+    html += kpi('Avg latency', avgLat!=null?(avgLat+'ms'):'—', avgLat==null?'':avgLat>=500?'bad':avgLat>=200?'warn':'ok', 'across all robots');
+    html += kpi('Drop rate', dropRate!=null?Math.round(dropRate*100)+'%':'—', dropRate==null?'':dropRate>=0.2?'bad':dropRate>=0.05?'warn':'ok', 'failed / total');
+    html += kpi('Total sessions', total, '', stats.avg_duration_seconds!=null?('avg '+rpFmtDuration(stats.avg_duration_seconds)):'');
+    $('rp-overview-kpis').innerHTML = html;
+    // mini chart: bucket sessions by hour for the last 60 minutes from started_at
+    var buckets = new Array(12).fill(0);  // 12 buckets × 5min = 60min
+    var now = Date.now();
+    for(var i=0;i<sessions.length;i++){
+      var t = sessions[i].started_at ? Date.parse(sessions[i].started_at) : 0;
+      if(!t) continue;
+      var diff = now - t;
+      if(diff<0 || diff>3600e3) continue;
+      var idx = 11 - Math.floor(diff/(5*60e3));
+      if(idx>=0 && idx<12) buckets[idx]++;
+    }
+    drawOverviewChart($('rp-overview-chart'), buckets);
+    // top 3 robots by session count
+    var ranked = robots.slice().sort(function(a,b){ return (b.sessions_total||0)-(a.sessions_total||0); });
+    var top3 = ranked.slice(0,3);
+    var top = $('rp-overview-top'), topMeta = $('rp-overview-top-meta');
+    if(topMeta) topMeta.textContent = ranked.length?('of '+ranked.length+' robots'):'';
+    if(!top3.length){ top.innerHTML = '<div class="empty" style="grid-column:1/-1;">No robot telemetry yet.</div>'; }
+    else {
+      var thtml='';
+      for(var i=0;i<top3.length;i++){
+        var x = top3[i];
+        var name = x.name || x.id || 'robot';
+        var avatar = avatarSrcForNode({label:(x.character_name||x.character_id||name)});
+        thtml += '<div class="rp-card" style="padding:0.55rem 0.7rem;">'
+          + '<div class="rp-card-top">'
+          +   (avatar?'<div class="rp-card-img"><img alt="'+esc(name)+'" src="'+esc(avatar+QS)+'"></div>':'')
+          +   '<div style="min-width:0;flex:1;"><h4 style="margin:0;font-size:0.78rem;">'+esc(name)+'</h4>'
+          +   '<div class="rp-metrics" style="grid-template-columns:repeat(3,1fr);gap:0.2rem 0.5rem;margin-top:0.3rem;">'
+          +     '<div class="rp-m"><span class="v" style="font-size:0.9rem;">'+(x.sessions_total||0)+'</span><span class="l">sessions</span></div>'
+          +     '<div class="rp-m"><span class="v" style="font-size:0.9rem;">'+(x.trigger_count||0)+'</span><span class="l">triggers</span></div>'
+          +     '<div class="rp-m"><span class="v" style="font-size:0.9rem;">'+(x.avg_latency_ms!=null?Math.round(x.avg_latency_ms)+'ms':'—')+'</span><span class="l">latency</span></div>'
+          +   '</div></div></div></div>';
+      }
+      top.innerHTML = thtml;
+    }
+    // recent activity stream
+    var stream = $('rp-overview-stream'), smeta = $('rp-overview-stream-meta');
+    if(smeta) smeta.textContent = 'last '+(data.history?data.history.length:0);
+    var hist = data.history || [];
+    if(!hist.length){ stream.innerHTML = '<div class="line"><span class="d" style="color:var(--muted)">no recent activity</span></div>'; }
+    else {
+      var hhtml='';
+      for(var i=0;i<hist.length;i++){
+        var ev = hist[i];
+        var ts = ev.timestamp;
+        var cat = ev.category || '';
+        var act = ev.action || '';
+        var ent = (ev.entity_type||'')+(ev.entity_id?(' · '+ev.entity_id):'');
+        var det = ev.details || '';
+        if(typeof det==='object') det = JSON.stringify(det);
+        hhtml += '<div class="line"><span class="t">'+esc(clock(ts))+'</span>'
+          + '<span class="ic">'+esc(rpCategoryIcon(cat))+'</span>'
+          + '<span class="n" title="'+esc(cat)+'">'+esc(String(cat).slice(0,8))+'</span>'
+          + '<span class="d"><b>'+esc(act)+'</b> '+esc(ent)+(det?(' — '+esc(String(det).slice(0,60))):'')+'</span></div>';
+      }
+      stream.innerHTML = hhtml;
+    }
+    // update overview "now" indicator
+    var nowEl = $('rp-overview-now'); if(nowEl) nowEl.textContent = sessions.length+' recent · '+active+' active';
+  }
+  function drawOverviewChart(canvas, buckets){
+    if(!canvas || !canvas.getContext) return;
+    var ctx = canvas.getContext('2d');
+    var dpr = Math.max(1, Math.min(2, window.devicePixelRatio||1));
+    var w = canvas.clientWidth, h = canvas.clientHeight;
+    canvas.width = w*dpr; canvas.height = h*dpr;
+    ctx.setTransform(dpr,0,0,dpr,0,0);
+    ctx.clearRect(0,0,w,h);
+    var padL=20, padR=8, padT=8, padB=14;
+    var plotW = w - padL - padR, plotH = h - padT - padB;
+    var mx = Math.max(1, Math.max.apply(null, buckets));
+    // y grid (4 lines)
+    ctx.strokeStyle = 'rgba(255,255,255,0.07)';
+    ctx.lineWidth = 1;
+    for(var g=0;g<=4;g++){
+      var y = padT + (plotH * g/4);
+      ctx.beginPath(); ctx.moveTo(padL,y); ctx.lineTo(padL+plotW,y); ctx.stroke();
+      ctx.fillStyle = 'rgba(158,147,180,0.6)';
+      ctx.font = '9px ui-monospace,Menlo,Consolas,monospace';
+      ctx.fillText(Math.round(mx-(mx*g/4)), 2, y+3);
+    }
+    // bars
+    var n = buckets.length, barW = plotW/n;
+    for(var i=0;i<n;i++){
+      var v = buckets[i];
+      var bh = (v/mx)*plotH;
+      var x = padL + i*barW + 1;
+      var y = padT + (plotH - bh);
+      try{
+        var grad = ctx.createLinearGradient(0,y,0,y+bh);
+        grad.addColorStop(0, 'rgba(255,216,107,0.95)');
+        grad.addColorStop(1, 'rgba(230,178,60,0.55)');
+        ctx.fillStyle = grad;
+      }catch(e){ ctx.fillStyle = '#E6B23C'; }
+      ctx.fillRect(x, y, Math.max(1,barW-2), bh);
+    }
+    // x axis labels
+    ctx.fillStyle = 'rgba(158,147,180,0.7)';
+    ctx.font = '9px ui-monospace,Menlo,Consolas,monospace';
+    ctx.fillText('-60m', padL, h-2);
+    var mid = Math.round(n/2);
+    ctx.fillText('-30m', padL + mid*barW, h-2);
+    ctx.fillText('now',  padL + (n-1)*barW - 16, h-2);
+  }
+
+  // ── init sub-tabs when the robopark tab is opened ──
+  // We call buildRpSubTabs() the first time the user switches to the
+  // Sessions & Telemetry main tab. From then on, setRpSubTab(name) reuses
+  // it whenever the user picks a different sub-tab.
+  var rpSubTabsInited = false;
+  function initRpSubTabs(){
+    if(rpSubTabsInited) return;
+    rpSubTabsInited = true;
+    buildRpSubTabs();
+  }
+
   // ══════════════════════════════════════════════════════════════════
   //  Park — isometric live map of the mesh
   //  Real data: /fed/status nodes (placement + load) + /fed/stream frames
@@ -1247,12 +2667,39 @@ button.act:disabled{opacity:0.5;cursor:default;}
   var Park = (function(){
     var C, X, DPR=1, W=0, H=0, cam={x:0,y:0,z:1}, fitted=false;
     var nodes=[], byId={}, orbs=[], pulses=[], t0=0, raf=null, running=false, es=null, animSeq=-1;
-    var drawerId=null, camRAF=null, meterRAF=null, camAbort=null, drawerTimer=null;
+    var _lastScan = {};
+    // Latest per-robot scheduler telemetry, keyed by scheduler robot name
+    // (e.g. "jaguar") or id. Updated by pollRobopark() on every refresh
+    // (every 3s) via Park.updateTelemetry(...). The Park node → telemetry
+    // match is done in lookupTelemetry() by name.
+    var _telemetryByName = {};
+    // Remember the most recent in-session and ended timestamps per robot
+    // so the "ended" ring can fade out for ~4s after a session ends,
+    // and the "live/talking" status can persist briefly across polls.
+    var _statusMem = {};   // name -> { lastActiveAt, lastEndedAt, prevReadiness }
+    var drawerId=null, camRAF=null, meterRAF=null, camAbort=null, drawerTimer=null, deviceSelectorsReady=false;
     var previewOn=false, previewTimer=null;   // on-demand operator camera preview
     var visionOn=false;   // RoboVisionAI_PI overlay feed (direct MJPEG, not LiveKit)
-    var lkRoom=null, micAnalyser=null, audioCtx=null;
+    var lkRoom=null, micAnalyser=null, audioCtx=null, lkAudioEls=[];
     var imgs={}; // preloaded robot concept avatars
     var TW=44, TH=22, PARK_W=15, PARK_D=8;
+    // Plaza footprint and parking lot (upper-right corner of the plaza)
+    var P_X0=0.2, P_Y0=-0.10, P_X1=PARK_W-0.2, P_Y1=PARK_D-0.45;
+    // Plaza outline as a polygon — top edge stays straight, bottom-left dips up where the pond
+    // cuts into the plaza, and the right edge curves slightly inward to match the aerial.
+    var PLAZA_POLY=[
+      [0.4,  -0.10],
+      [8.6,  -0.10],
+      [8.6,   1.7 ],
+      [14.6,  1.7 ],
+      [14.6,  5.5 ],
+      [3.0,  5.5 ],
+      [2.5,  5.0 ],
+      [0.4,  4.5 ]
+    ];
+    var LOT_X0=9.0, LOT_Y0=-0.30, LOT_X1=14.8, LOT_Y1=1.6;
+    // Beach strip at the very bottom edge of the park
+    var BEACH_Y0=PARK_D-0.45, BEACH_Y1=PARK_D+0.3;
     // The real park (from the aerial photo): named robot pads at their ground
     // positions along the long Shenzhen Bay promenade plaza, plus palms, pond,
     // street and stage. A mesh node binds to a pad when its display name matches
@@ -1260,18 +2707,121 @@ button.act:disabled{opacity:0.5;cursor:default;}
     // SLOTS is now rebuilt from scheduler character_presets; keep the same shape.
     var SLOTS = parkSlots.slice();
     var HUBSLOT={label:'CONTROL', keys:[], nx:0.06, ny:0.16};
-    // Palm positions tuned to the aerial: clusters along the back edge and
-    // scattered down the center of the paved strip.
+    // Palm positions: two staggered rows on the plaza, between the robot pad columns.
+    // Robot pads in normalized 0..1: HUB(0.06,0.16), VOLT(0.18,0.26), TESLA(0.38,0.30),
+    //   JAGUAR(0.58,0.34), VIXEN(0.40,0.68), PANDA(0.82,0.52)
+    // Back row of palms at y=0.22, between the robots at the top of the plaza.
+    // Front row at y=0.62, between/around the lower robots (VIXEN/PANDA).
+    // Plus 2 grass palms near the upper-left for the tent area.
     var PALMS=[
-      [0.10,0.38],[0.14,0.55],[0.18,0.72],[0.22,0.30],[0.26,0.48],[0.30,0.66],
-      [0.36,0.24],[0.40,0.42],[0.44,0.60],[0.50,0.26],[0.54,0.46],[0.58,0.64],
-      [0.66,0.30],[0.70,0.50],[0.74,0.68],[0.80,0.36],[0.84,0.56],[0.90,0.40],[0.94,0.62],
-      [0.62,0.80],[0.76,0.84],[0.35,0.82]
+      [0.30,0.18],[0.50,0.18],[0.70,0.18],[0.90,0.18],
+      [0.18,0.55],[0.28,0.55],[0.50,0.55],[0.65,0.55],
+      [0.05,0.42],[0.05,0.62]
     ];
     // Pond / curved water feature at the lower-left of the plaza.
-    var POND={cx:0.28*15, cy:0.96*8, rx:3.4, ry:1.6};
+    var POND={cx:0.18*15, cy:0.84*8, rx:2.4, ry:1.1};
     // Street traffic along the top road (yellow taxis + private cars).
     var CARS=[[2.2,-0.92,'#f2c14e'],[4.4,-0.78,'#e0a23c'],[6.6,-0.95,'#7fb4ff'],[8.8,-1.02,'#ff7e6e'],[11.0,-0.84,'#d8d8e0'],[13.2,-0.98,'#f2c14e']];
+    // ── Walking people — looping sprites that stroll along fixed plaza paths.
+    // Each walker is a small canvas-drawn figure (head + body + two
+    // swinging legs + swinging arms) with a vertical bob and a slight
+    // body lean. A path is a list of [wx, wy] world points; the walker
+    // eases between them at a per-walker speed, and "greets" any robot
+    // pad it passes closely by pausing for ~1.4s in a wave pose while
+    // the robot's pulse fires. Kept simple on purpose: no canvas
+    // pathfinding, no random spawn, no state machine beyond a
+    // pauseUntil timer. ──
+    // Paths are aligned with the plaza chessboard so walkers appear to
+    // step across the tiles. Coordinates are world units; the iso()
+    // projection in drawWalker() handles the perspective.
+    //
+    // Six walkers total, distributed so at any moment at least a few are
+    // visible across the plaza. segDurMs is how long a single segment
+    // should take at this walker's pace — converting to a per-frame
+    // step value happens in tickWalkers() so speeds are frame-rate
+    // independent. ~3-4 seconds per segment reads as a calm stroll;
+    // shorter = brisker.
+    var WALKER_PATHS = [
+      // Top of plaza — slow stroller between the hub and front row of robots. L→R.
+      { segDurMs: 5200, shirt:'#5b9bd5', pants:'#2a3f5c', pauseAt:[[3.5,0.4]] },
+      // Lower half — loops past VIXEN and PANDA pads. R→L.
+      { segDurMs: 4200, shirt:'#c95b6f', pants:'#3a2a3a', pauseAt:[[11.0,5.1]] },
+      // Mid-plaza — wanders past TESLA. L→R.
+      { segDurMs: 4600, shirt:'#7fb069', pants:'#3d4f2c', pauseAt:[[5.6,1.6]] },
+      // Back of plaza — a quiet walker along the upper tiles. R→L.
+      { segDurMs: 6000, shirt:'#d68a3a', pants:'#4a3a26', pauseAt:[[8.0,-0.1]] },
+      // Diagonal — crosses the plaza between JAGUAR and PANDA. L→R.
+      { segDurMs: 5000, shirt:'#a26fb0', pants:'#3a2a4a', pauseAt:[[7.0,3.4]] },
+      // Slow elder at the front edge of the plaza. R→L.
+      { segDurMs: 7000, shirt:'#e8c39a', pants:'#5a4a2a', pauseAt:[[9.5,2.6]] },
+    ];
+    // Per-walker offsets so they don't all start at the same phase of
+    // their loop — makes the plaza feel populated at all times rather
+    // than empty for the first few seconds. Offsets are fractions of
+    // total path length (0..1) so they spread evenly.
+    var WALKER_PHASE_OFFSETS = [0.00, 0.18, 0.42, 0.66, 0.82, 0.30];
+    // Build the world-space path for each walker spec. Path idx chooses
+    // the route; all paths live on the plaza chessboard so walkers look
+    // like they step across the tiles.
+    function buildWalkerPath(spec){
+      if(spec.idx === 0){
+        return [[1.0,0.3],[3.5,0.4],[7.5,0.4],[9.8,0.3],[9.8,1.6],[1.0,1.6]];
+      }
+      if(spec.idx === 1){
+        return [[13.0,3.6],[11.0,5.1],[8.0,5.4],[5.0,5.2],[3.0,4.6],[1.4,3.4]];
+      }
+      if(spec.idx === 2){
+        return [[0.4,2.2],[3.0,2.4],[5.6,1.6],[8.4,1.6],[11.2,2.0],[13.4,2.2]];
+      }
+      if(spec.idx === 3){
+        return [[13.5,-0.1],[11.0,-0.05],[8.0,-0.1],[5.0,-0.05],[2.4,0.1],[2.4,0.9]];
+      }
+      if(spec.idx === 4){
+        return [[0.4,4.0],[3.0,3.6],[7.0,3.4],[10.0,3.8],[12.6,4.2],[12.6,5.2]];
+      }
+      // idx 5
+      return [[13.4,2.6],[9.5,2.6],[6.0,2.8],[3.0,2.6],[0.4,2.4],[0.4,1.6]];
+    }
+    // Cumulative arc-length table for each walker's polyline, used to
+    // convert a phase offset (0..1) into a (seg, segT) starting position
+    // and to drive the per-frame step so all walkers cover ground at a
+    // consistent world-space pace regardless of segment length.
+    function buildPathLengths(path){
+      var lens = [0];
+      var total = 0;
+      for(var i=0; i<path.length-1; i++){
+        var dx = path[i+1][0]-path[i][0], dy = path[i+1][1]-path[i][1];
+        total += Math.sqrt(dx*dx + dy*dy);
+        lens.push(total);
+      }
+      return { lens: lens, total: total || 1 };
+    }
+    function pathPosAt(pathInfo, dist){
+      // Returns {seg, t} for the given arc-length distance along the path.
+      var d = ((dist % pathInfo.total) + pathInfo.total) % pathInfo.total;
+      for(var i=0; i<pathInfo.lens.length-1; i++){
+        if(d <= pathInfo.lens[i+1]){
+          var segLen = pathInfo.lens[i+1] - pathInfo.lens[i] || 1;
+          return { seg: i, t: (d - pathInfo.lens[i]) / segLen };
+        }
+      }
+      return { seg: 0, t: 0 };
+    }
+    var walkers = WALKER_PATHS.map(function(spec, idx){
+      var path = buildWalkerPath({idx:idx});
+      var info = buildPathLengths(path);
+      var phase = WALKER_PHASE_OFFSETS[idx % WALKER_PHASE_OFFSETS.length] || 0;
+      var startPos = pathPosAt(info, phase * info.total);
+      return {
+        idx: idx,
+        spec: spec,
+        path: path,
+        info: info,
+        distance: startPos.seg + startPos.t, // current distance (in segments) along the path
+        pauseUntil: 0,                       // perf.now() ms; walker holds while now < pauseUntil
+        nextGreet: 0,                        // index into spec.pauseAt, for the next pause to fire
+      };
+    });
 
     function mono(){ return 'ui-monospace,Menlo,Consolas,monospace'; }
     function W2(nx,ny){ return [nx*PARK_W, ny*PARK_D]; }
@@ -1337,6 +2887,93 @@ button.act:disabled{opacity:0.5;cursor:default;}
 
     // Bind mesh nodes onto the fixed park pads; unmatched pads render as
     // offline placeholders so the whole park is always visible.
+    // ── Per-robot scheduler telemetry → status ──
+    // pollRobopark() pushes the latest /robopark/api/telemetry rows into
+    // Park.updateTelemetry(); we key them by robot name. layout() then
+    // looks up each robot node by its slot aliases and attaches a
+    // status + telemetry field used by drawRobot() to drive the
+    // status animations.
+    function updateTelemetry(map){
+      _telemetryByName = map || {};
+    }
+    function lookupTelemetry(node){
+      if(!node) return null;
+      // The hub is never a per-robot telemetry row — only robot slots are.
+      if(node.kind !== 'robot') return null;
+      // Try every alias the slot was built with: slot.label, slot.id,
+      // slot.sub, slot.keys, and the matched mesh node's displayName.
+      var slot = null;
+      for(var i=0;i<SLOTS.length;i++){ if(SLOTS[i].label === node.label){ slot = SLOTS[i]; break; } }
+      var aliases = [];
+      if(slot) aliases = aliases.concat(slotAliases(slot));
+      if(node.name) aliases.push(String(node.name).toLowerCase());
+      if(node.telemKeys) for(var tk=0; tk<node.telemKeys.length; tk++) aliases.push(node.telemKeys[tk]);
+      // Try each alias as a case-insensitive key against the telemetry map.
+      for(var ai=0; ai<aliases.length; ai++){
+        var a = aliases[ai];
+        if(!a) continue;
+        for(var key in _telemetryByName){
+          if(!Object.prototype.hasOwnProperty.call(_telemetryByName, key)) continue;
+          var kl = String(key).toLowerCase();
+          if(kl === a || kl.indexOf(a) >= 0 || a.indexOf(kl) >= 0) return _telemetryByName[key];
+        }
+      }
+      return null;
+    }
+    // Derive a coarse status string + a few extra flags from a
+    // scheduler telemetry row. Status is one of: 'offline' | 'ready'
+    // | 'live' | 'talking' | 'ended'. We also expose the raw readiness
+    // string so the existing label can still read it.
+    function computeStatus(tele, node){
+      if(!node || node.kind !== 'robot') return { status:'idle', readiness:null };
+      if(!node.connected) return { status:'offline', readiness:null };
+      var mem = _statusMem[node.id] || (_statusMem[node.id] = { lastActiveAt:0, lastEndedAt:0, prevReadiness:null });
+      var readiness = tele ? (tele.readiness_code || 'unknown') : null;
+      var hasSession = !!(tele && (tele.current_session_id || tele.active_session || tele.in_session || tele.session_active));
+      var sessionAge = tele ? (tele.session_age_seconds != null ? tele.session_age_seconds : null) : null;
+      var activityAge = tele ? (tele.session_activity_age_seconds != null ? tele.session_activity_age_seconds : null) : null;
+      var now = performance.now();
+      // mark transitions
+      if(readiness === 'in_session' && mem.prevReadiness !== 'in_session'){
+        mem.lastActiveAt = now;
+      }
+      if(mem.prevReadiness === 'in_session' && readiness !== 'in_session'){
+        mem.lastEndedAt = now;
+      }
+      mem.prevReadiness = readiness;
+      // decide status
+      var status = 'ready';
+      if(hasSession){
+        // active session. "talking" if the session has had activity
+        // within the last 2.5s; otherwise "live" (idle but connected).
+        if(activityAge != null && activityAge <= 2.5) status = 'talking';
+        else status = 'live';
+      } else if(readiness === 'in_session'){
+        // server says in_session but we don't have the session id on
+        // this row — treat as live.
+        status = 'live';
+      } else if(readiness && /stuck_session|stale_session/.test(readiness)){
+        status = 'live';   // still a session going on, just unhealthy
+      } else if(readiness === 'ready'){
+        // Show "ended" ring for ~4s after a session ends, then drop back
+        // to the calm "ready" (waiting) state.
+        if(mem.lastEndedAt && (now - mem.lastEndedAt) < 4000) status = 'ended';
+        else status = 'ready';
+      } else if(readiness && /production_off|production_off_robot|device_missing|server_unavailable|heartbeat_stale/.test(readiness)){
+        status = 'ready';   // still ready to talk, just gated
+      }
+      return {
+        status: status,
+        readiness: readiness,
+        readinessMessage: tele ? tele.readiness_message : null,
+        sessionAge: sessionAge,
+        activityAge: activityAge,
+        triggerCount: tele ? tele.trigger_count : null,
+        drops: tele ? tele.drops : null,
+        dropRate: tele ? tele.drop_rate : null,
+      };
+    }
+
     function layout(src){
       var list=(src||[]).slice(), used={}, out=[];
       function prevHit(id){ for(var p=0;p<nodes.length;p++){ if(nodes[p].id===id) return nodes[p]._hit; } return null; }
@@ -1349,7 +2986,7 @@ button.act:disabled{opacity:0.5;cursor:default;}
         }
         var id = match?match.nodeId:('pad:'+slot.label);
         if(match) used[match.nodeId]=1;
-        return {
+        var node = {
           id:id, kind:kind, label:slot.label,
           name: match?(match.displayName||match.nodeId):slot.label.toLowerCase(),
           sub: match?(slot.sub||''):'not joined',
@@ -1360,6 +2997,19 @@ button.act:disabled{opacity:0.5;cursor:default;}
           telemKeys: [slot.label.toLowerCase()].concat(slot.keys||[]).concat(match?[(match.displayName||'').toLowerCase()]:[]),
           wx:wx, wy:wy, _hit:prevHit(id)
         };
+        // Attach a status derived from the latest scheduler telemetry
+        // (push-poll, so it can lag up to 3s behind /fed/status).
+        if(kind === 'robot'){
+          var tele = lookupTelemetry(node);
+          var st = computeStatus(tele, node);
+          node.telemetry = tele;
+          node.status = st.status;
+          node.readiness = st.readiness;
+          node.readinessMessage = st.readinessMessage;
+          node.sessionAge = st.sessionAge;
+          node.activityAge = st.activityAge;
+        }
+        return node;
       }
       var h=W2(HUBSLOT.nx,HUBSLOT.ny); out.push(bind(HUBSLOT,h[0],h[1],'hub'));
       SLOTS.forEach(function(s){ var w=W2(s.nx,s.ny); out.push(bind(s,w[0],w[1],'robot')); });
@@ -1462,64 +3112,801 @@ button.act:disabled{opacity:0.5;cursor:default;}
       if(stroke){ X.strokeStyle=stroke; X.lineWidth=lw||1; X.stroke(); }
     }
     function drawGround(){
-      // grass base
-      var g=X.createLinearGradient(0,0,0,H); g.addColorStop(0,'rgba(38,68,44,0.55)'); g.addColorStop(1,'rgba(22,44,28,0.5)');
-      poly([[-2,-2.2],[PARK_W+2,-2.2],[PARK_W+2,PARK_D+2],[-2,PARK_D+2]], g, 'rgba(120,180,120,0.10)',1);
-      // street band along the far edge + dashed centerline + cars
-      poly([[0,-1.5],[PARK_W,-1.5],[PARK_W,-0.35],[0,-0.35]], 'rgba(26,26,32,0.88)', 'rgba(255,255,255,0.08)',1);
-      X.strokeStyle='rgba(232,210,120,0.5)'; X.setLineDash([9*cam.z,9*cam.z]);
+      var z=cam.z;
+      // ── grass base — multi-stop radial sun-lit gradient on a slightly larger field ──
+      // Field is now sized to the plaza footprint + a small margin. The previous
+      // version extended from x=-0.5..PARK_W+0.5, which left a wide empty green
+      // strip on either side of the plaza; trimmed here to remove that overhang.
+      var parkCx=PARK_W/2, parkCy=PARK_D/2;
+      var gCent=iso(parkCx,parkCy);
+      var gRad=X.createRadialGradient(gCent.x,gCent.y,12*z,gCent.x,gCent.y,Math.max(W,H)*0.62);
+      gRad.addColorStop(0,'rgba(154,196,108,0.95)');
+      gRad.addColorStop(0.45,'rgba(86,142,80,0.95)');
+      gRad.addColorStop(1,'rgba(44,98,52,0.95)');
+      // grass field — tight margin around the plaza + lot, NOT covering the road or the beach
+      var GF_X0=0.0, GF_X1=PARK_W, GF_Y0=-0.32, GF_Y1=PARK_D-0.55;
+      poly([[GF_X0,GF_Y0],[GF_X1,GF_Y0],[GF_X1,GF_Y1],[GF_X0,GF_Y1]], gRad, 'rgba(140,200,150,0.10)',1);
+      // ── "mowed stripes" effect — wide diagonal bands of alternating green tones ──
+      // Drawn as full-width rectangles in world space, slightly rotated via a parallelogram skew.
+      X.save();
+      var stripeColors=['rgba(108,162,90,0.45)','rgba(86,140,72,0.35)'];
+      var stripeCount=5;
+      var stripeW=(GF_X1-GF_X0+GF_Y1-GF_Y0+2)/stripeCount;
+      for(var si=0;si<stripeCount;si++){
+        var off=si*stripeW - ((GF_X1-GF_X0)+(GF_Y1-GF_Y0))*0.5;
+        // Build a parallelogram in world coords that runs from left-bottom to right-top
+        // at a slight angle (skewed +X, -Y direction) — looks like a stadium mowed lawn.
+        // Tightly fitted to the grass field bounds.
+        var p1=[GF_X0 + off, GF_Y1];
+        var p2=[GF_X0 + off + 1.0, GF_Y0];
+        var p3=[GF_X0 + off + 1.0 + (GF_X1-GF_X0), GF_Y0];
+        var p4=[GF_X0 + off + (GF_X1-GF_X0), GF_Y1];
+        poly([p1,p2,p3,p4], stripeColors[si%2], null, 0);
+      }
+      X.restore();
+      // ── outer hedge / foliage border just inside the grass field ──
+      // Slightly ragged inner edge: extra points along each side to break the straight line.
+      // The hedge wraps the grass field, which now hugs the plaza footprint (no side overhang).
+      var hedgeW=0.9; // world units thick
+      var pTL=[GF_X0,GF_Y0], pTR=[GF_X1,GF_Y0], pBR=[GF_X1,GF_Y1], pBL=[GF_X0,GF_Y1];
+      // Build a ragged inner-edge polygon: along the inner edge we add jitter points.
+      // We use 4 sides, each with 4 extra points (5 segments per side), jitter ±0.18.
+      function jx(seed){ return ((Math.sin(seed*12.9898)*43758.5453)%1+1)%1; }
+      function hedgeInnerPts(){
+        // Returns an inner ring (hedge width hedgeW from outer), starting at top-left and going CW.
+        var pts=[];
+        // top edge: from pTL toward pTR (jitter along y)
+        var segs=6;
+        for(var i=0;i<=segs;i++){
+          var t=i/segs;
+          var x=pTL[0]+(pTR[0]-pTL[0])*t;
+          var y=pTL[1]+hedgeW + (jx(i*3+1)-0.5)*0.34;
+          pts.push([x,y]);
+        }
+        // right edge: from pTR toward pBR (jitter along x)
+        for(var i2=1;i2<=segs;i2++){
+          var t2=i2/segs;
+          var x2=pTR[0]-hedgeW + (jx(i2*5+7)-0.5)*0.34;
+          var y2=pTR[1]+(pBR[1]-pTR[1])*t2;
+          pts.push([x2,y2]);
+        }
+        // bottom edge: from pBR toward pBL (jitter along y, reversed)
+        for(var i3=1;i3<=segs;i3++){
+          var t3=i3/segs;
+          var x3=pBR[0]+(pBL[0]-pBR[0])*t3;
+          var y3=pBR[1]-hedgeW + (jx(i3*7+13)-0.5)*0.34;
+          pts.push([x3,y3]);
+        }
+        // left edge: from pBL toward pTL (jitter along x, reversed)
+        for(var i4=1;i4<segs;i4++){
+          var t4=i4/segs;
+          var x4=pBL[0]+hedgeW + (jx(i4*11+19)-0.5)*0.34;
+          var y4=pBL[1]+(pTL[1]-pBL[1])*t4;
+          pts.push([x4,y4]);
+        }
+        return pts;
+      }
+      var innerRing=hedgeInnerPts();
+      // full grass outer polygon = outer rect, then inner ring (use even-odd via closePath)
+      X.save();
+      X.beginPath();
+      var outerRect=[[GF_X0,GF_Y0],[GF_X1,GF_Y0],[GF_X1,GF_Y1],[GF_X0,GF_Y1]];
+      for(var oi=0;oi<outerRect.length;oi++){ var op=iso(outerRect[oi][0],outerRect[oi][1]); if(oi===0)X.moveTo(op.x,op.y); else X.lineTo(op.x,op.y); }
+      X.closePath();
+      for(var ii=0;ii<innerRing.length;ii++){ var ip=iso(innerRing[ii][0],innerRing[ii][1]); if(ii===0)X.moveTo(ip.x,ip.y); else X.lineTo(ip.x,ip.y); }
+      X.closePath();
+      X.fillStyle='rgba(28,68,38,0.95)'; X.fill('evenodd');
+      X.restore();
+      // thin lighter inner rim ~0.15 inside the inner edge
+      function innerRimPts(){
+        var rim=[];
+        var segs=6;
+        for(var i=0;i<=segs;i++){ var t=i/segs; rim.push([(pTL[0]+(pTR[0]-pTL[0])*t), (pTL[1]+hedgeW-0.15) + (jx(i*3+1)-0.5)*0.30]); }
+        for(var i2=1;i2<=segs;i2++){ var t2=i2/segs; rim.push([(pTR[0]-hedgeW+0.15) + (jx(i2*5+7)-0.5)*0.30, (pTR[1]+(pBR[1]-pTR[1])*t2)]); }
+        for(var i3=1;i3<=segs;i3++){ var t3=i3/segs; rim.push([(pBR[0]+(pBL[0]-pBR[0])*t3), (pBR[1]-hedgeW+0.15) + (jx(i3*7+13)-0.5)*0.30]); }
+        for(var i4=1;i4<segs;i4++){ var t4=i4/segs; rim.push([(pBL[0]+hedgeW-0.15) + (jx(i4*11+19)-0.5)*0.30, (pBL[1]+(pTL[1]-pBL[1])*t4)]); }
+        return rim;
+      }
+      var rimPts=innerRimPts();
+      X.save();
+      X.beginPath();
+      for(var ri2=0;ri2<rimPts.length;ri2++){ var rp=iso(rimPts[ri2][0],rimPts[ri2][1]); if(ri2===0)X.moveTo(rp.x,rp.y); else X.lineTo(rp.x,rp.y); }
+      X.closePath();
+      X.strokeStyle='rgba(96,148,86,0.7)'; X.lineWidth=0.8*z; X.stroke();
+      X.restore();
+      // grass noise — scattered lighter tufts to add texture (warm bright-green tints)
+      X.save();
+      for(var ni=0;ni<60;ni++){
+        var gnx=GF_X0 + ((ni*37)%100)/100*(GF_X1-GF_X0);
+        var gny=GF_Y0 + ((ni*53)%100)/100*(GF_Y1-GF_Y0);
+        var gp=iso(gnx,gny);
+        X.fillStyle=(ni%2)?'rgba(150,200,110,0.20)':'rgba(56,112,62,0.22)';
+        X.beginPath(); X.arc(gp.x+((ni*7)%13-6)*z,gp.y+((ni*11)%9-4)*z,1.6*z,0,7); X.fill();
+      }
+      X.restore();
+      // ── flower spots — deterministic small dots in 3 colors, scattered in the lawn only ──
+      X.save();
+      var flowerColors=['rgba(232,124,164,0.85)','rgba(248,220,96,0.88)','rgba(248,248,240,0.85)'];
+      for(var fi=0;fi<34;fi++){
+        var fx=GF_X0 + jx(fi*17+3)*(GF_X1-GF_X0);
+        var fy=hedgeW + jx(fi*23+11)*(GF_Y1-hedgeW*1.4);
+        // skip plaza area (P_X0..P_X1, P_Y0..P_Y1) and pond area
+        if(fx>=P_X0-0.3 && fx<=P_X1+0.3 && fy>=P_Y0-0.3 && fy<=P_Y1+0.3) continue;
+        var dxp=fx-POND.cx, dyp=fy-POND.cy;
+        if(dxp*dxp/(POND.rx*POND.rx) + dyp*dyp/(POND.ry*POND.ry) < 1.1) continue;
+        var fp=iso(fx,fy);
+        X.fillStyle=flowerColors[fi%3];
+        X.beginPath(); X.arc(fp.x+((fi*5)%7-3)*z, fp.y+((fi*9)%5-2)*z, 1.4*z + (fi%2)*0.5*z, 0, 7); X.fill();
+      }
+      X.restore();
+      // beach strip at the very bottom (sandy)
+      poly([[-1,BEACH_Y0],[PARK_W+1,BEACH_Y0],[PARK_W+1,BEACH_Y1],[-1,BEACH_Y1]],
+        'rgba(214,196,150,0.55)', 'rgba(180,160,120,0.5)', 1);
+      // darker curb along the paved edge (drawn as a thin offset quad)
+      var curbOff=0.12;
+      var curbPoly=PLAZA_POLY.map(function(p){
+        // expand outward a bit so the curb ring is visible just outside the plaza footprint
+        return [p[0] + (p[0]<1?-curbOff:(p[0]>14?curbOff:0)), p[1] + (p[1]<-0.05?-curbOff:(p[1]>5?curbOff:0))];
+      });
+      poly(curbPoly, 'rgba(20,28,22,0.85)', null, 0);
+      // paved plaza base — neutral stone so the tile pattern reads clearly (polygon outline)
+      var pg=X.createLinearGradient(0,0,0,H);
+      pg.addColorStop(0,'rgba(170,162,150,0.92)');
+      pg.addColorStop(1,'rgba(132,124,114,0.92)');
+      poly(PLAZA_POLY, pg, 'rgba(60,52,44,0.55)',1);
+      // chessboard stone tile pattern — iterate a rectangle then clip to the plaza polygon
+      X.save();
+      X.beginPath();
+      for(var pli=0;pli<PLAZA_POLY.length;pli++){
+        var plp=iso(PLAZA_POLY[pli][0],PLAZA_POLY[pli][1]);
+        if(pli===0) X.moveTo(plp.x,plp.y); else X.lineTo(plp.x,plp.y);
+      }
+      X.closePath();
+      X.clip();
+      var tile=1.5;
+      var tx0=Math.floor(P_X0/tile)*tile, ty0=Math.floor(P_Y0/tile)*tile;
+      var lite='rgba(206,200,188,0.92)', dark='rgba(118,108,98,0.92)';
+      var liteBevel='rgba(238,232,218,0.55)', darkShade='rgba(60,52,44,0.45)';
+      for(var gy2=ty0;gy2<P_Y1+1;gy2+=tile){
+        for(var gx2=tx0;gx2<P_X1+1;gx2+=tile){
+          var x0=gx2, y0=gy2, x1=gx2+tile, y1=gy2+tile;
+          if(x1>P_X1) x1=P_X1; if(y1>P_Y1) y1=P_Y1;
+          var isLite=(((Math.round((x0-P_X0)/tile)+Math.round((y0-P_Y0)/tile))%2)+2)%2===0;
+          var top=isLite?lite:dark;
+          // top face
+          poly([[x0,y0],[x1,y0],[x1,y1],[x0,y1]], top, null, 0);
+          // bevel: lighter top-left edge, darker bottom-right edge (use iso projection edge lines)
+          var tlA=iso(x0,y0), tlB=iso(x1,y0), tlC=iso(x1,y1), tlD=iso(x0,y1);
+          // top edge (lit)
+          X.strokeStyle=isLite?liteBevel:'rgba(160,150,140,0.35)'; X.lineWidth=0.9*z;
+          X.beginPath(); X.moveTo(tlA.x,tlA.y); X.lineTo(tlB.x,tlB.y); X.stroke();
+          // left edge (lit)
+          X.strokeStyle=isLite?liteBevel:'rgba(150,140,130,0.30)';
+          X.beginPath(); X.moveTo(tlA.x,tlA.y); X.lineTo(tlD.x,tlD.y); X.stroke();
+          // bottom edge (shaded)
+          X.strokeStyle=darkShade;
+          X.beginPath(); X.moveTo(tlD.x,tlD.y); X.lineTo(tlC.x,tlC.y); X.stroke();
+          // right edge (shaded)
+          X.strokeStyle=darkShade;
+          X.beginPath(); X.moveTo(tlB.x,tlB.y); X.lineTo(tlC.x,tlC.y); X.stroke();
+        }
+      }
+      X.restore();
+      // outer plaza border for a clean curb (use the polygon)
+      poly(PLAZA_POLY, null, 'rgba(50,44,36,0.7)', 1.4*z);
+      // ── sun-shade pavilions on the plaza (4 of them) ──
+      // (pavilions removed — the chessboard plaza reads better without canopies)
+      // parking lot — upper-right corner of the plaza (after the road)
+      // curb ring around the lot
+      poly([[LOT_X0-0.08,LOT_Y0-0.08],[LOT_X1+0.08,LOT_Y0-0.08],[LOT_X1+0.08,LOT_Y1+0.08],[LOT_X0-0.08,LOT_Y1+0.08]],
+        'rgba(20,20,24,0.95)', null, 0);
+      // asphalt surface
+      poly([[LOT_X0,LOT_Y0],[LOT_X1,LOT_Y0],[LOT_X1,LOT_Y1],[LOT_X0,LOT_Y1]],
+        'rgba(34,34,40,0.96)', 'rgba(20,20,24,0.9)', 1);
+      // access driveway from lot down into the plaza (thin asphalt strip)
+      poly([[8.5, 1.5],[10.0, 1.5],[10.6, 2.5],[9.1, 2.5]],
+        'rgba(34,34,40,0.96)', 'rgba(20,20,24,0.85)', 0.8*z);
+      // parking bay lines (white) — 2 rows
+      X.strokeStyle='rgba(238,238,232,0.85)'; X.lineWidth=1.1*z; X.setLineDash([]);
+      var bays=6;
+      var lotH=LOT_Y1-LOT_Y0;
+      var rowYs=[LOT_Y0+lotH*0.32, LOT_Y0+lotH*0.70];
+      for(var ri2=0;ri2<rowYs.length;ri2++){
+        for(var bi=1;bi<bays;bi++){
+          var bx=LOT_X0+bi*((LOT_X1-LOT_X0)/bays);
+          var ba=iso(bx, rowYs[ri2]-0.18), bb=iso(bx, rowYs[ri2]+0.18);
+          X.beginPath(); X.moveTo(ba.x,ba.y); X.lineTo(bb.x,bb.y); X.stroke();
+        }
+      }
+      // front edge line
+      var feA=iso(LOT_X0+0.12,LOT_Y1-0.22), feB=iso(LOT_X1-0.12,LOT_Y1-0.22);
+      X.beginPath(); X.moveTo(feA.x,feA.y); X.lineTo(feB.x,feB.y); X.stroke();
+      // back edge line
+      var beA=iso(LOT_X0+0.12,LOT_Y0+0.22), beB=iso(LOT_X1-0.12,LOT_Y0+0.22);
+      X.beginPath(); X.moveTo(beA.x,beA.y); X.lineTo(beB.x,beB.y); X.stroke();
+      // parked cars in 2 rows
+      var bayW=(LOT_X1-LOT_X0)/bays;
+      var parkedColors=['#d44a4a','#5b8bd6','#e8e6dc','#f2c14e','#7fb4ff','#5fa060','#c87ed4','#e0a23c','#9aa0a8','#ff7e6e'];
+      for(var pri=0;pri<rowYs.length;pri++){
+        for(var pbi=0;pbi<bays-1;pbi++){
+          var pcx=LOT_X0+0.7+pbi*bayW;
+          if(pbi===0 || pbi===bays-2) continue; // skip end bays for some breathing room
+          drawCar(pcx, rowYs[pri], parkedColors[(pri*bays+pbi)%parkedColors.length]);
+        }
+      }
+      // street band along the far edge + dashed centerline + road cars
+      poly([[0,-1.5],[PARK_W,-1.5],[PARK_W,-0.35],[0,-0.35]], 'rgba(26,26,32,0.92)', 'rgba(255,255,255,0.08)',1);
+      X.strokeStyle='rgba(232,210,120,0.55)'; X.setLineDash([9*z,9*z]);
       var r1=iso(0.2,-0.92), r2=iso(PARK_W-0.2,-0.92); X.beginPath(); X.moveTo(r1.x,r1.y); X.lineTo(r2.x,r2.y); X.stroke(); X.setLineDash([]);
       CARS.forEach(function(c){ drawCar(c[0],c[1],c[2]); });
-      // white event tent / stage on the far left of the plaza (matches aerial)
-      drawTent(0.85, 0.18);
-      // paved plaza — long rectangular promenade matching the aerial footprint
-      var px0=0.2,py0=-0.10,px1=PARK_W-0.2,py1=PARK_D-0.45;
-      var pg=X.createLinearGradient(0,0,0,H); pg.addColorStop(0,'rgba(74,70,92,0.66)'); pg.addColorStop(1,'rgba(46,42,60,0.62)');
-      poly([[px0,py0],[px1,py0],[px1,py1],[px0,py1]], pg, 'rgba(255,255,255,0.07)',1);
-      // plaza grid (tile joints)
-      X.strokeStyle='rgba(255,255,255,0.05)'; X.lineWidth=1;
-      for(var gx=Math.ceil(px0);gx<px1;gx+=1.5){ var a=iso(gx,py0), b=iso(gx,py1); X.beginPath(); X.moveTo(a.x,a.y); X.lineTo(b.x,b.y); X.stroke(); }
-      for(var gy=Math.ceil(py0);gy<py1;gy+=1.5){ var c=iso(px0,gy), d=iso(px1,gy); X.beginPath(); X.moveTo(c.x,c.y); X.lineTo(d.x,d.y); X.stroke(); }
-      // curved pond / water feature at bottom-left
+      // white event tent in the left grass strip (west of the plaza)
+      drawTent(-0.15, 0.5);
+      // ── lake — wider sandy shore with soft radial fade to grass ──
+      // shore ring: a wider light sand band outside the water with a soft radial fade.
+      X.save();
+      var shoreRings=18;
+      for(var shr=shoreRings; shr>=0; shr--){
+        var t=shr/shoreRings;
+        var rx=POND.rx + 0.5*(1-t);
+        var ry=POND.ry + 0.5*(1-t);
+        var alpha=0.55*(1-t)*(1-t);
+        var col='rgba(228,210,168,'+alpha.toFixed(3)+')';
+        var ringPts=[];
+        for(var sk=0;sk<Math.PI*2;sk+=Math.PI/16){
+          ringPts.push([POND.cx+rx*Math.cos(sk), POND.cy+ry*Math.sin(sk)*0.7]);
+        }
+        poly(ringPts, col, null, 0);
+      }
+      X.restore();
+      // thin outer foam ring (kept for sparkle)
+      var foamPts=[];
+      for(var tf=0;tf<Math.PI*2;tf+=Math.PI/16){
+        foamPts.push([POND.cx+(POND.rx+0.06)*Math.cos(tf), POND.cy+(POND.ry+0.05)*Math.sin(tf)*0.7]);
+      }
+      poly(foamPts, 'rgba(232,244,248,0.45)', 'rgba(255,255,255,0.5)', 1.0*z);
+      // water outline (outer ellipse)
       var pts=[]; for(var t=0;t<Math.PI*2;t+=Math.PI/12){ pts.push([POND.cx+POND.rx*Math.cos(t), POND.cy+POND.ry*Math.sin(t)*0.7]); }
-      var wg=X.createLinearGradient(0,0,0,H); wg.addColorStop(0,'rgba(44,116,156,0.72)'); wg.addColorStop(1,'rgba(26,74,116,0.72)');
-      poly(pts, wg, 'rgba(130,205,235,0.32)',1.5);
-      // winding footpath along the pond
-      X.strokeStyle='rgba(210,190,150,0.35)'; X.lineWidth=2.5*cam.z; X.setLineDash([]);
-      var pathPts=[[0.15*PARK_W,0.82*PARK_D],[0.22*PARK_W,0.88*PARK_D],[0.32*PARK_W,0.92*PARK_D],[0.45*PARK_W,0.95*PARK_D]];
-      X.beginPath();
-      for(var pi=0;pi<pathPts.length;pi++){ var pp=iso(pathPts[pi][0],pathPts[pi][1]); if(pi===0)X.moveTo(pp.x,pp.y); else X.lineTo(pp.x,pp.y); }
-      X.stroke();
+      // ── lake bed — 3 concentric ellipses with progressively darker teal/blue, slightly offset toward upper-back ──
+      function lakeEllipse(cx,cy,rx,ry,offX,offY){ var a=[]; for(var k=0;k<Math.PI*2;k+=Math.PI/16){ a.push([cx+offX+rx*Math.cos(k), cy+offY+ry*Math.sin(k)*0.7]); } return a; }
+      // Outer: teal
+      poly(lakeEllipse(POND.cx, POND.cy, POND.rx*0.70, POND.ry*0.70, -0.10, -0.06), 'rgba(112,196,212,0.55)', null, 0);
+      // Mid: deeper teal
+      poly(lakeEllipse(POND.cx, POND.cy, POND.rx*0.45, POND.ry*0.45, -0.18, -0.10), 'rgba(56,148,178,0.78)', null, 0);
+      // Inner: deep blue
+      poly(lakeEllipse(POND.cx, POND.cy, POND.rx*0.22, POND.ry*0.22, -0.22, -0.12), 'rgba(20,82,124,0.92)', null, 0);
+      // water surface outline (drawn on top of the depth layers for a clean edge)
+      poly(pts, null, 'rgba(120,200,222,0.6)',1.6*z);
+      // ── sun-glare streak — translucent white diagonal ellipse at upper-right of lake ──
+      var glareCx=POND.cx+0.55, glareCy=POND.cy-0.55;
+      var glareP=iso(glareCx, glareCy);
+      var glareGrad=X.createRadialGradient(glareP.x, glareP.y, 2*z, glareP.x, glareP.y, 28*z);
+      glareGrad.addColorStop(0,'rgba(255,255,255,0.32)');
+      glareGrad.addColorStop(0.6,'rgba(255,255,255,0.10)');
+      glareGrad.addColorStop(1,'rgba(255,255,255,0)');
+      X.save();
+      X.translate(glareP.x, glareP.y);
+      X.rotate(-Math.PI/4);
+      X.fillStyle=glareGrad;
+      X.beginPath(); X.ellipse(0, 0, 26*z, 6*z, 0, 0, Math.PI*2); X.fill();
+      X.restore();
+      // ── animated ripple/highlight — thin white elliptical arcs that drift across the lake ──
+      var pondCent=iso(POND.cx, POND.cy);
+      var ripplePhase=Math.sin(performance.now()/1500);
+      X.save();
+      X.strokeStyle='rgba(232,248,252,0.7)'; X.lineWidth=1.0*z; X.lineCap='round';
+      for(var rk=0;rk<4;rk++){
+        var drift=(rk*0.6 + ripplePhase*0.8) % (POND.rx*1.4) - POND.rx*0.7;
+        var rxr2=Math.abs(ripplePhase)*POND.rx*0.35 + POND.rx*0.18 + rk*0.18;
+        var ryr2=POND.ry*0.18 + rk*0.10;
+        var rCx2=POND.cx + drift*0.4;
+        var rCy2=POND.cy - 0.10 + rk*0.12;
+        var rA2=iso(rCx2-rxr2, rCy2);
+        var rB2=iso(rCx2+rxr2, rCy2);
+        X.globalAlpha=0.35 + 0.4*Math.abs(Math.sin(performance.now()/900 + rk));
+        X.beginPath();
+        X.moveTo(rA2.x, rA2.y);
+        X.quadraticCurveTo(pondCent.x, rA2.y - 3*z, rB2.x, rB2.y);
+        X.stroke();
+      }
+      X.globalAlpha=1;
+      X.restore();
+      // ── lily pads — small green ellipse clusters at deterministic positions ──
+      var lilySpots=[
+        {x: POND.cx-1.8, y: POND.cy+0.25, s: 0.95},
+        {x: POND.cx+1.5, y: POND.cy+0.45, s: 1.05},
+        {x: POND.cx-0.3, y: POND.cy-0.55, s: 0.85},
+        {x: POND.cx+2.1, y: POND.cy-0.35, s: 0.9}
+      ];
+      for(var li=0;li<lilySpots.length;li++){
+        var lp=iso(lilySpots[li].x, lilySpots[li].y);
+        var lsz=lilySpots[li].s*z;
+        // lily pad: ellipse with a notch cut from the right side
+        X.save();
+        X.fillStyle='rgba(72,140,72,0.85)';
+        X.beginPath();
+        X.ellipse(lp.x, lp.y, 5*lsz, 3.2*lsz, 0, -0.4, Math.PI*2-0.4);
+        X.lineTo(lp.x, lp.y);
+        X.closePath(); X.fill();
+        // notch (darker wedge) — small triangle cut-out
+        X.fillStyle='rgba(30,90,40,0.7)';
+        X.beginPath();
+        X.moveTo(lp.x, lp.y);
+        X.lineTo(lp.x+5.2*lsz, lp.y-0.6*lsz);
+        X.lineTo(lp.x+5.2*lsz, lp.y+0.6*lsz);
+        X.closePath(); X.fill();
+        // highlight
+        X.fillStyle='rgba(150,210,130,0.45)';
+        X.beginPath(); X.ellipse(lp.x-1.2*lsz, lp.y-0.8*lsz, 2*lsz, 0.8*lsz, 0, 0, Math.PI*2); X.fill();
+        // tiny flower on one of them
+        if(li===1){
+          X.fillStyle='rgba(252,220,232,0.95)';
+          X.beginPath(); X.arc(lp.x-0.5*lsz, lp.y-0.4*lsz, 1.2*lsz, 0, Math.PI*2); X.fill();
+          X.fillStyle='rgba(248,184,200,0.95)';
+          X.beginPath(); X.arc(lp.x-0.5*lsz, lp.y-0.4*lsz, 0.6*lsz, 0, Math.PI*2); X.fill();
+        }
+        X.restore();
+      }
+      // ── tiny fountain — 3 concentric rings of decreasing opacity around lake centroid ──
+      X.save();
+      for(var fk=0;fk<3;fk++){
+        var fr=((fk+1)*0.18) + 0.06*Math.abs(Math.sin(performance.now()/600 + fk));
+        var falpha=0.55 - fk*0.18;
+        var fcol='rgba(220,240,248,'+falpha.toFixed(3)+')';
+        var fringPts=[];
+        for(var fj=0;fj<Math.PI*2;fj+=Math.PI/14){
+          fringPts.push([POND.cx + fr*Math.cos(fj), POND.cy + fr*Math.sin(fj)*0.7]);
+        }
+        poly(fringPts, null, fcol, 1.0*z);
+      }
+      X.restore();
+      // ── fully styled walking path — from plaza bottom edge curving right through the grass ──
+      X.lineCap='round'; X.lineJoin='round';
+      var pathPts=[
+        [3.5, 5.7],
+        [4.2, 6.2],
+        [5.4, 6.5],
+        [6.8, 6.5],
+        [8.2, 6.2],
+        [9.4, 5.7]
+      ];
+      function strokePath(strokeW, strokeStyle, dashed, dash){
+        X.beginPath();
+        for(var spi=0;spi<pathPts.length;spi++){
+          var spp=iso(pathPts[spi][0], pathPts[spi][1]);
+          if(spi===0) X.moveTo(spp.x, spp.y); else X.lineTo(spp.x, spp.y);
+        }
+        X.lineWidth=strokeW;
+        X.strokeStyle=strokeStyle;
+        if(dashed){ X.setLineDash(dash); } else { X.setLineDash([]); }
+        X.stroke();
+      }
+      // edge stroke (grass border) — drawn first, slightly wider
+      strokePath(4.0*z + 1.0*z, 'rgba(140,200,160,0.55)', false, null);
+      // base stroke — light tan compacted dirt
+      strokePath(4.0*z, 'rgba(212,190,140,0.92)', false, null);
+      // subtle darker speckle along the path for "compacted dirt" texture
+      X.save();
+      X.fillStyle='rgba(168,142,90,0.55)';
+      for(var spt=0;spt<14;spt++){
+        var sSeg=(spt+0.5)/14;
+        var sIdx = Math.min(pathPts.length-2, Math.floor(sSeg*(pathPts.length-1)));
+        var sT = sSeg*(pathPts.length-1) - sIdx;
+        var sAx=pathPts[sIdx][0]*(1-sT)+pathPts[sIdx+1][0]*sT;
+        var sAy=pathPts[sIdx][1]*(1-sT)+pathPts[sIdx+1][1]*sT;
+        var sPx=iso(sAx,sAy);
+        var sAng=Math.sin(spt*23.7)*1.4;
+        X.beginPath(); X.arc(sPx.x+Math.cos(sAng)*1.4*z, sPx.y+Math.sin(sAng)*1.0*z, 0.5*z, 0, 7); X.fill();
+      }
+      X.restore();
+      // a faint lighter highlight stripe down the middle
+      strokePath(1.0*z, 'rgba(238,222,178,0.5)', false, null);
+      X.setLineDash([]); X.lineCap='butt'; X.lineJoin='miter';
+      // ── path lanterns — vertical post + warm yellow glow at the top, 3 of them ──
+      var lanternSpots=[
+        [pathPts[1][0], pathPts[1][1]-0.2],
+        [pathPts[3][0], pathPts[3][1]],
+        [pathPts[5][0], pathPts[5][1]]
+      ];
+      for(var ln=0;ln<lanternSpots.length;ln++){
+        var lpos=iso(lanternSpots[ln][0], lanternSpots[ln][1]);
+        // post
+        X.strokeStyle='rgba(36,30,28,0.92)'; X.lineWidth=1.6*z;
+        X.beginPath(); X.moveTo(lpos.x, lpos.y); X.lineTo(lpos.x, lpos.y-1.5*z*10); X.stroke();
+        // base plate
+        X.fillStyle='rgba(48,40,36,0.92)';
+        X.beginPath(); X.ellipse(lpos.x, lpos.y, 2.4*z, 0.9*z, 0, 0, Math.PI*2); X.fill();
+        // glow at top (shadowBlur for warm glow)
+        X.save();
+        X.shadowColor='rgba(255,214,112,0.95)'; X.shadowBlur=12*z;
+        X.fillStyle='rgba(255,234,140,0.95)';
+        X.beginPath(); X.arc(lpos.x, lpos.y-1.5*z*10, 1.8*z, 0, Math.PI*2); X.fill();
+        X.restore();
+        // bright core
+        X.fillStyle='rgba(255,250,210,1)';
+        X.beginPath(); X.arc(lpos.x, lpos.y-1.5*z*10, 0.8*z, 0, Math.PI*2); X.fill();
+      }
+      // ── playground equipment in the grass area (below the plaza) ──
+      drawPlayground(13.2, 6.4, 'rgba(224,82,52,0.92)');
+      drawPlayground(13.8, 7.0, 'rgba(248,176,52,0.92)');
+      drawBlueCanopy(0.9, 6.6);
     }
     function drawTent(wx,wy){
-      var p=iso(wx,wy), z=cam.z;
-      // canopy shadow
-      X.fillStyle='rgba(0,0,0,0.28)'; X.beginPath(); X.ellipse(p.x,p.y+4*z,22*z,8*z,0,0,7); X.fill();
-      // white peaked tent
-      X.fillStyle='rgba(235,235,240,0.92)'; X.strokeStyle='rgba(180,180,190,0.6)'; X.lineWidth=1;
-      X.beginPath(); X.moveTo(p.x-20*z,p.y); X.lineTo(p.x,p.y-26*z); X.lineTo(p.x+20*z,p.y); X.closePath(); X.fill(); X.stroke();
-      X.beginPath(); X.moveTo(p.x-20*z,p.y); X.lineTo(p.x-12*z,p.y+16*z); X.lineTo(p.x+12*z,p.y+16*z); X.lineTo(p.x+20*z,p.y); X.closePath(); X.fill(); X.stroke();
-      // support poles
-      X.strokeStyle='rgba(160,160,170,0.7)'; X.lineWidth=1.5*z;
-      X.beginPath(); X.moveTo(p.x-10*z,p.y+16*z); X.lineTo(p.x-10*z,p.y+5*z); X.stroke();
-      X.beginPath(); X.moveTo(p.x+10*z,p.y+16*z); X.lineTo(p.x+10*z,p.y+5*z); X.stroke();
+      // Compact ridge tent: footprint 0.4 long x 0.28 deep (~ half a plaza tile), height 7*z.
+      var z=cam.z, wLong=0.4, wShort=0.28, h=7*z;
+      var bkL=iso(wx-wLong, wy-wShort), bkR=iso(wx+wLong, wy-wShort);
+      var frL=iso(wx-wLong, wy+wShort), frR=iso(wx+wLong, wy+wShort);
+      var rdL={ x:bkL.x, y:bkL.y - h };
+      var rdR={ x:bkR.x, y:bkR.y - h };
+      var cx=(bkL.x+frR.x)/2, cy=(bkL.y+frR.y)/2;
+      // soft ground shadow
+      X.fillStyle='rgba(0,0,0,0.30)';
+      X.beginPath(); X.ellipse(cx, cy + 2*z, wLong*TW*z*0.95, wShort*TH*z*2.2, 0, 0, 7); X.fill();
+      // stone apron
+      X.fillStyle='rgba(190,186,176,0.55)';
+      X.beginPath(); X.moveTo(bkL.x,bkL.y); X.lineTo(bkR.x,bkR.y); X.lineTo(frR.x,frR.y); X.lineTo(frL.x,frL.y); X.closePath(); X.fill();
+      X.strokeStyle='rgba(150,140,120,0.6)'; X.lineWidth=0.6*z;
+      X.beginPath(); X.moveTo(bkL.x,bkL.y); X.lineTo(bkR.x,bkR.y); X.lineTo(frR.x,frR.y); X.lineTo(frL.x,frL.y); X.closePath(); X.stroke();
+      // back roof panel (shaded)
+      X.fillStyle='rgba(196,200,212,0.97)';
+      X.beginPath(); X.moveTo(rdL.x,rdL.y); X.lineTo(rdR.x,rdR.y); X.lineTo(bkR.x,bkR.y); X.lineTo(bkL.x,bkL.y); X.closePath(); X.fill();
+      // front roof panel (lit)
+      X.fillStyle='rgba(248,248,252,0.98)';
+      X.beginPath(); X.moveTo(rdL.x,rdL.y); X.lineTo(rdR.x,rdR.y); X.lineTo(frR.x,frR.y); X.lineTo(frL.x,frL.y); X.closePath(); X.fill();
+      // ridge beam
+      X.strokeStyle='rgba(80,60,40,0.95)'; X.lineWidth=0.9*z;
+      X.beginPath(); X.moveTo(rdL.x,rdL.y); X.lineTo(rdR.x,rdR.y); X.stroke();
+      // 4 corner poles
+      X.strokeStyle='rgba(80,60,40,0.92)'; X.lineWidth=0.5*z;
+      X.beginPath(); X.moveTo(bkL.x,bkL.y); X.lineTo(rdL.x,rdL.y); X.stroke();
+      X.beginPath(); X.moveTo(bkR.x,bkR.y); X.lineTo(rdR.x,rdR.y); X.stroke();
+      X.strokeStyle='rgba(50,40,30,0.98)'; X.lineWidth=0.7*z;
+      X.beginPath(); X.moveTo(frL.x,frL.y); X.lineTo(rdL.x,rdL.y); X.stroke();
+      X.beginPath(); X.moveTo(frR.x,frR.y); X.lineTo(rdR.x,rdR.y); X.stroke();
+      // 2 mid poles on front edge
+      var midLF={ x:frL.x + (frR.x-frL.x)*0.33, y:frL.y + (frR.y-frL.y)*0.33 };
+      var midRF={ x:frL.x + (frR.x-frL.x)*0.66, y:frL.y + (frR.y-frL.y)*0.66 };
+      var midLT={ x:rdL.x + (rdR.x-rdL.x)*0.33, y:rdL.y + (rdR.y-rdL.y)*0.33 };
+      var midRT={ x:rdL.x + (rdR.x-rdL.x)*0.66, y:rdL.y + (rdR.y-rdL.y)*0.66 };
+      X.strokeStyle='rgba(50,40,30,0.95)'; X.lineWidth=0.5*z;
+      X.beginPath(); X.moveTo(midLF.x,midLF.y); X.lineTo(midLT.x,midLT.y); X.stroke();
+      X.beginPath(); X.moveTo(midRF.x,midRF.y); X.lineTo(midRT.x,midRT.y); X.stroke();
+      // fabric scallops on the front eave
+      X.strokeStyle='rgba(220,224,232,0.55)'; X.lineWidth=0.4*z;
+      function scallop(x1,y1,x2,y2,sag){
+        var mx=(x1+x2)/2, my=(y1+y2)/2 + sag;
+        X.beginPath(); X.moveTo(x1,y1); X.quadraticCurveTo(mx,my, x2,y2); X.stroke();
+      }
+      scallop(frL.x,frL.y, midLF.x,midLF.y, 0.8*z);
+      scallop(midLF.x,midLF.y, midRF.x,midRF.y, 0.8*z);
+      scallop(midRF.x,midRF.y, frR.x,frR.y, 0.8*z);
+      // small flag at the right ridge end
+      X.strokeStyle='rgba(80,60,40,0.95)'; X.lineWidth=0.5*z;
+      X.beginPath(); X.moveTo(rdR.x,rdR.y); X.lineTo(rdR.x, rdR.y - 4*z); X.stroke();
+      X.fillStyle='rgba(232,72,72,0.95)';
+      X.beginPath(); X.moveTo(rdR.x,rdR.y-4*z); X.lineTo(rdR.x+2.5*z,rdR.y-3*z); X.lineTo(rdR.x,rdR.y-2*z); X.closePath(); X.fill();
     }
     function drawCar(wx,wy,col){
       var p=iso(wx,wy), z=cam.z;
-      X.fillStyle='rgba(0,0,0,0.3)'; X.beginPath(); X.ellipse(p.x,p.y+3*z,11*z,5*z,0,0,7); X.fill();
-      X.fillStyle=col; X.beginPath(); X.roundRect(p.x-11*z,p.y-7*z,22*z,12*z,3*z); X.fill();
-      X.fillStyle='rgba(255,255,255,0.25)'; X.beginPath(); X.roundRect(p.x-6*z,p.y-6*z,12*z,5*z,2*z); X.fill();
+      // soft drop shadow
+      X.fillStyle='rgba(0,0,0,0.32)';
+      X.beginPath(); X.ellipse(p.x,p.y+4*z,13*z,5.5*z,0,0,7); X.fill();
+      // chassis (lower body)
+      X.fillStyle=col;
+      X.beginPath(); X.roundRect(p.x-13*z,p.y-5*z,26*z,11*z,3*z); X.fill();
+      // chassis bottom shade
+      X.fillStyle='rgba(0,0,0,0.22)';
+      X.beginPath(); X.roundRect(p.x-13*z,p.y+2*z,26*z,4*z,2*z); X.fill();
+      // roof (darker top)
+      X.fillStyle='rgba(0,0,0,0.55)';
+      X.beginPath(); X.roundRect(p.x-8*z,p.y-10*z,16*z,6*z,2.5*z); X.fill();
+      // roof tint with car color
+      X.fillStyle=col;
+      X.globalAlpha=0.6;
+      X.beginPath(); X.roundRect(p.x-8*z,p.y-10*z,16*z,6*z,2.5*z); X.fill();
+      X.globalAlpha=1;
+      // windshield highlight
+      X.fillStyle='rgba(180,220,255,0.65)';
+      X.beginPath(); X.roundRect(p.x-6*z,p.y-9*z,12*z,3*z,1.5*z); X.fill();
+      // windshield shine
+      X.fillStyle='rgba(255,255,255,0.45)';
+      X.beginPath();
+      X.moveTo(p.x-5*z,p.y-9*z); X.lineTo(p.x-2*z,p.y-9*z); X.lineTo(p.x-4*z,p.y-7*z); X.closePath(); X.fill();
+      // wheels
+      X.fillStyle='#0c0c10';
+      X.beginPath(); X.arc(p.x-8*z,p.y+5*z,2.6*z,0,7); X.fill();
+      X.beginPath(); X.arc(p.x+8*z,p.y+5*z,2.6*z,0,7); X.fill();
+      X.beginPath(); X.arc(p.x-8*z,p.y+6*z,2.6*z,0,7); X.fill();
+      X.beginPath(); X.arc(p.x+8*z,p.y+6*z,2.6*z,0,7); X.fill();
+      // wheel rims
+      X.fillStyle='rgba(200,200,210,0.75)';
+      X.beginPath(); X.arc(p.x-8*z,p.y+5.5*z,1*z,0,7); X.fill();
+      X.beginPath(); X.arc(p.x+8*z,p.y+5.5*z,1*z,0,7); X.fill();
+      // headlight glow (front — right side)
+      X.fillStyle='rgba(255,240,180,0.95)';
+      X.beginPath(); X.arc(p.x+12*z,p.y-1*z,1.6*z,0,7); X.fill();
+      X.fillStyle='rgba(255,240,180,0.4)';
+      X.beginPath(); X.arc(p.x+12*z,p.y-1*z,3*z,0,7); X.fill();
+      // tail light (rear — left side)
+      X.fillStyle='rgba(255,80,80,0.85)';
+      X.beginPath(); X.arc(p.x-12*z,p.y-1*z,1.2*z,0,7); X.fill();
+      // body highlight
+      X.fillStyle='rgba(255,255,255,0.18)';
+      X.beginPath(); X.roundRect(p.x-12*z,p.y-4*z,24*z,1.5*z,1*z); X.fill();
+    }
+    // Sun-shade pavilion: 4 thin white poles supporting a flat white square canopy.
+    function drawPavilion(wx,wy){
+      var p=iso(wx,wy), z=cam.z;
+      var canopy=12*z;
+      var poleH=6*z;
+      // soft ground shadow under the canopy
+      X.fillStyle='rgba(0,0,0,0.18)';
+      X.beginPath(); X.ellipse(p.x+1*z, p.y+3*z, canopy*1.1, canopy*0.42, 0, 0, 7); X.fill();
+      // four corner poles (slight isometric offset)
+      var poleOff=canopy*0.42;
+      function pole(px,py){
+        X.strokeStyle='rgba(240,240,244,0.95)';
+        X.lineWidth=0.9*z;
+        X.beginPath(); X.moveTo(px, py); X.lineTo(px, py-poleH); X.stroke();
+        // tiny base dot
+        X.fillStyle='rgba(40,40,48,0.6)';
+        X.beginPath(); X.arc(px, py, 0.8*z, 0, 7); X.fill();
+      }
+      pole(p.x-poleOff, p.y+poleOff*0.5);
+      pole(p.x+poleOff, p.y+poleOff*0.5);
+      pole(p.x-poleOff, p.y-poleOff*0.5);
+      pole(p.x+poleOff, p.y-poleOff*0.5);
+      // canopy roof — flat white square (top diamond)
+      X.fillStyle='rgba(248,248,252,0.97)';
+      X.beginPath();
+      X.moveTo(p.x, p.y-poleH-canopy*0.5);
+      X.lineTo(p.x+canopy, p.y-poleH);
+      X.lineTo(p.x, p.y-poleH+canopy*0.5);
+      X.lineTo(p.x-canopy, p.y-poleH);
+      X.closePath(); X.fill();
+      // canopy rim/edge
+      X.strokeStyle='rgba(170,172,180,0.85)';
+      X.lineWidth=0.8*z;
+      X.beginPath();
+      X.moveTo(p.x, p.y-poleH-canopy*0.5);
+      X.lineTo(p.x+canopy, p.y-poleH);
+      X.lineTo(p.x, p.y-poleH+canopy*0.5);
+      X.lineTo(p.x-canopy, p.y-poleH);
+      X.closePath(); X.stroke();
+      // soft highlight band on the top of the canopy
+      X.fillStyle='rgba(255,255,255,0.55)';
+      X.beginPath();
+      X.moveTo(p.x-canopy*0.8, p.y-poleH-canopy*0.05);
+      X.lineTo(p.x+canopy*0.8, p.y-poleH-canopy*0.05);
+      X.lineTo(p.x+canopy*0.6, p.y-poleH+canopy*0.25);
+      X.lineTo(p.x-canopy*0.6, p.y-poleH+canopy*0.25);
+      X.closePath(); X.fill();
+    }
+    // Abstract playground equipment: a small cluster of colored geometric shapes.
+    function drawPlayground(wx,wy,accent){
+      var p=iso(wx,wy), z=cam.z;
+      // ground shadow
+      X.fillStyle='rgba(0,0,0,0.20)';
+      X.beginPath(); X.ellipse(p.x+1*z, p.y+3*z, 9*z, 4*z, 0, 0, 7); X.fill();
+      // square post (red/orange)
+      X.fillStyle=accent || 'rgba(224,82,52,0.95)';
+      X.fillRect(p.x-3*z, p.y-8*z, 6*z, 6*z);
+      X.strokeStyle='rgba(0,0,0,0.35)'; X.lineWidth=0.6*z;
+      X.strokeRect(p.x-3*z, p.y-8*z, 6*z, 6*z);
+      // yellow circle
+      X.fillStyle='rgba(248,212,72,0.95)';
+      X.beginPath(); X.arc(p.x+5*z, p.y-4*z, 2.4*z, 0, Math.PI*2); X.fill();
+      X.strokeStyle='rgba(0,0,0,0.35)'; X.lineWidth=0.6*z; X.stroke();
+      // blue triangle
+      X.fillStyle='rgba(82,142,224,0.95)';
+      X.beginPath();
+      X.moveTo(p.x-6*z, p.y-2*z);
+      X.lineTo(p.x-2*z, p.y-2*z);
+      X.lineTo(p.x-4*z, p.y-7*z);
+      X.closePath(); X.fill();
+      X.strokeStyle='rgba(0,0,0,0.35)'; X.lineWidth=0.6*z; X.stroke();
+      // tiny base bar
+      X.strokeStyle='rgba(48,48,52,0.85)'; X.lineWidth=1.2*z;
+      X.beginPath(); X.moveTo(p.x-5*z, p.y); X.lineTo(p.x+6*z, p.y); X.stroke();
+    }
+    // Larger blue canopy (event-tent style) for the grass area.
+    function drawBlueCanopy(wx,wy){
+      // Compact ridge tent (slightly bigger than drawTent, blue, no flag).
+      var z=cam.z, wLong=0.55, wShort=0.35, h=10*z;
+      var bkL=iso(wx-wLong, wy-wShort), bkR=iso(wx+wLong, wy-wShort);
+      var frL=iso(wx-wLong, wy+wShort), frR=iso(wx+wLong, wy+wShort);
+      var rdL={ x:bkL.x, y:bkL.y - h };
+      var rdR={ x:bkR.x, y:bkR.y - h };
+      var cx=(bkL.x+frR.x)/2, cy=(bkL.y+frR.y)/2;
+      // ground shadow
+      X.fillStyle='rgba(0,0,0,0.32)';
+      X.beginPath(); X.ellipse(cx, cy + 2*z, wLong*TW*z*0.95, wShort*TH*z*2.2, 0, 0, 7); X.fill();
+      // stone apron
+      X.fillStyle='rgba(190,186,176,0.55)';
+      X.beginPath(); X.moveTo(bkL.x,bkL.y); X.lineTo(bkR.x,bkR.y); X.lineTo(frR.x,frR.y); X.lineTo(frL.x,frL.y); X.closePath(); X.fill();
+      X.strokeStyle='rgba(150,140,120,0.6)'; X.lineWidth=0.6*z;
+      X.beginPath(); X.moveTo(bkL.x,bkL.y); X.lineTo(bkR.x,bkR.y); X.lineTo(frR.x,frR.y); X.lineTo(frL.x,frL.y); X.closePath(); X.stroke();
+      // back roof panel (shaded blue)
+      X.fillStyle='rgba(58,104,176,0.97)';
+      X.beginPath(); X.moveTo(rdL.x,rdL.y); X.lineTo(rdR.x,rdR.y); X.lineTo(bkR.x,bkR.y); X.lineTo(bkL.x,bkL.y); X.closePath(); X.fill();
+      // front roof panel (lit blue)
+      X.fillStyle='rgba(132,184,240,0.98)';
+      X.beginPath(); X.moveTo(rdL.x,rdL.y); X.lineTo(rdR.x,rdR.y); X.lineTo(frR.x,frR.y); X.lineTo(frL.x,frL.y); X.closePath(); X.fill();
+      // ridge beam
+      X.strokeStyle='rgba(20,40,76,0.95)'; X.lineWidth=1.0*z;
+      X.beginPath(); X.moveTo(rdL.x,rdL.y); X.lineTo(rdR.x,rdR.y); X.stroke();
+      // 4 corner poles
+      X.strokeStyle='rgba(40,60,90,0.95)'; X.lineWidth=0.5*z;
+      X.beginPath(); X.moveTo(bkL.x,bkL.y); X.lineTo(rdL.x,rdL.y); X.stroke();
+      X.beginPath(); X.moveTo(bkR.x,bkR.y); X.lineTo(rdR.x,rdR.y); X.stroke();
+      X.strokeStyle='rgba(20,36,68,0.98)'; X.lineWidth=0.7*z;
+      X.beginPath(); X.moveTo(frL.x,frL.y); X.lineTo(rdL.x,rdL.y); X.stroke();
+      X.beginPath(); X.moveTo(frR.x,frR.y); X.lineTo(rdR.x,rdR.y); X.stroke();
+      // 2 mid poles on front edge
+      var midLF={ x:frL.x + (frR.x-frL.x)*0.33, y:frL.y + (frR.y-frL.y)*0.33 };
+      var midRF={ x:frL.x + (frR.x-frL.x)*0.66, y:frL.y + (frR.y-frL.y)*0.66 };
+      var midLT={ x:rdL.x + (rdR.x-rdL.x)*0.33, y:rdL.y + (rdR.y-rdL.y)*0.33 };
+      var midRT={ x:rdL.x + (rdR.x-rdL.x)*0.66, y:rdL.y + (rdR.y-rdL.y)*0.66 };
+      X.strokeStyle='rgba(20,36,68,0.95)'; X.lineWidth=0.5*z;
+      X.beginPath(); X.moveTo(midLF.x,midLF.y); X.lineTo(midLT.x,midLT.y); X.stroke();
+      X.beginPath(); X.moveTo(midRF.x,midRF.y); X.lineTo(midRT.x,midRT.y); X.stroke();
+      // fabric scallops on the front eave
+      X.strokeStyle='rgba(220,232,248,0.6)'; X.lineWidth=0.4*z;
+      function scallop(x1,y1,x2,y2,sag){
+        var mx=(x1+x2)/2, my=(y1+y2)/2 + sag;
+        X.beginPath(); X.moveTo(x1,y1); X.quadraticCurveTo(mx,my, x2,y2); X.stroke();
+      }
+      scallop(frL.x,frL.y, midLF.x,midLF.y, 1.0*z);
+      scallop(midLF.x,midLF.y, midRF.x,midRF.y, 1.0*z);
+      scallop(midRF.x,midRF.y, frR.x,frR.y, 1.0*z);
     }
     function drawPalm(wx,wy){
       var p=iso(wx,wy), z=cam.z;
-      X.fillStyle='rgba(0,0,0,0.26)'; X.beginPath(); X.ellipse(p.x,p.y,10*z,4.5*z,0,0,7); X.fill();
-      X.strokeStyle='#6b4a24'; X.lineWidth=3*z; X.beginPath(); X.moveTo(p.x,p.y); X.quadraticCurveTo(p.x+3*z,p.y-14*z,p.x+1*z,p.y-24*z); X.stroke();
-      var tx=p.x+1*z, ty=p.y-24*z; X.strokeStyle='#3f8f4a'; X.lineWidth=2.4*z;
-      for(var a=0;a<6;a++){ var ang=(-Math.PI/2)+(a-2.5)*0.52; X.beginPath(); X.moveTo(tx,ty); X.quadraticCurveTo(tx+Math.cos(ang)*10*z, ty+Math.sin(ang)*8*z-4*z, tx+Math.cos(ang)*20*z, ty+Math.sin(ang)*11*z+3*z); X.stroke(); }
-      X.fillStyle='#caa23a'; X.beginPath(); X.arc(tx,ty+1*z,2*z,0,7); X.fill();
+      // soft ground shadow
+      X.fillStyle='rgba(0,0,0,0.30)';
+      X.beginPath(); X.ellipse(p.x,p.y+3*z,14*z,5.5*z,0,0,7); X.fill();
+      // trunk: tapered curved column drawn as a filled quad, with a darker right side
+      var trunkH=46*z, trunkBaseW=4*z, trunkTopW=2.2*z;
+      // base point and apex (slight curve to the right)
+      var baseX=p.x, baseY=p.y;
+      var cpx=baseX+5*z, cpy=baseY-trunkH*0.5;
+      var apexX=baseX+2*z, apexY=baseY-trunkH;
+      // sample two intermediate points to build the curved silhouette
+      function curveAt(t){
+        // quadratic bezier
+        var u=1-t;
+        return {
+          x:u*u*baseX + 2*u*t*cpx + t*t*apexX,
+          y:u*u*baseY + 2*u*t*cpy + t*t*apexY
+        };
+      }
+      var sA=curveAt(0.0), sB=curveAt(0.33), sC=curveAt(0.66), sD=curveAt(1.0);
+      // right (shaded) side of trunk — offset outward at each sample
+      function off(px,py,t,w){
+        // normal-ish: lean to the right
+        return { x:px+w, y:py };
+      }
+      var rA=off(sA.x,sA.y,0,trunkBaseW), rB=off(sB.x,sB.y,0.33,trunkBaseW*0.78);
+      var rC=off(sC.x,sC.y,0.66,trunkBaseW*0.55), rD=off(sD.x,sD.y,1,trunkTopW);
+      // left (lit) side
+      function offL(px,py,t,w){ return { x:px-w, y:py }; }
+      var lA=offL(sA.x,sA.y,0,trunkBaseW), lB=offL(sB.x,sB.y,0.33,trunkBaseW*0.78);
+      var lC=offL(sC.x,sC.y,0.66,trunkBaseW*0.55), lD=offL(sD.x,sD.y,1,trunkTopW);
+      // shaded right half
+      X.fillStyle='rgba(82,52,28,0.95)';
+      X.beginPath();
+      X.moveTo(rA.x,rA.y);
+      X.quadraticCurveTo(cpx+trunkBaseW, cpy, rB.x,rB.y);
+      X.quadraticCurveTo(cpx+trunkBaseW*0.55, cpy*0.4+apexY*0.6, rC.x,rC.y);
+      X.lineTo(rD.x,rD.y);
+      X.lineTo(sD.x,sD.y);
+      X.lineTo(sC.x,sC.y);
+      X.quadraticCurveTo(cpx, cpy*0.4+apexY*0.6, sB.x,sB.y);
+      X.quadraticCurveTo(cpx, cpy, sA.x,sA.y);
+      X.closePath(); X.fill();
+      // lighter lit left edge of trunk
+      X.fillStyle='rgba(148,102,62,0.95)';
+      X.beginPath();
+      X.moveTo(lA.x,lA.y);
+      X.quadraticCurveTo(cpx-trunkBaseW, cpy, lB.x,lB.y);
+      X.quadraticCurveTo(cpx-trunkBaseW*0.55, cpy*0.4+apexY*0.6, lC.x,lC.y);
+      X.lineTo(sC.x,sC.y);
+      X.lineTo(sB.x,sB.y);
+      X.quadraticCurveTo(cpx, cpy*0.4+apexY*0.6, sB.x,sB.y);
+      X.quadraticCurveTo(cpx, cpy, sA.x,sA.y);
+      X.closePath(); X.fill();
+      // trunk segment rings (texture)
+      X.strokeStyle='rgba(48,28,14,0.55)'; X.lineWidth=0.8*z;
+      for(var ri=1;ri<6;ri++){
+        var tr=ri/6;
+        var tl=curveAt(tr-0.04), trr=curveAt(tr+0.04);
+        var tlW=(trunkBaseW*(1-tr)+trunkTopW*tr);
+        X.beginPath();
+        X.moveTo(tl.x-tlW,tl.y);
+        X.lineTo(tl.x+tlW,tl.y);
+        X.stroke();
+      }
+      // crown center
+      var tx=apexX, ty=apexY;
+      // coconuts near the crown
+      X.fillStyle='rgba(60,38,20,0.95)';
+      X.beginPath(); X.arc(tx-3*z,ty+2*z,2*z,0,7); X.fill();
+      X.beginPath(); X.arc(tx+3.5*z,ty+2.5*z,2.1*z,0,7); X.fill();
+      X.beginPath(); X.arc(tx+0.5*z,ty+4*z,1.8*z,0,7); X.fill();
+      // coconut highlights
+      X.fillStyle='rgba(180,140,90,0.6)';
+      X.beginPath(); X.arc(tx-3.6*z,ty+1.4*z,0.7*z,0,7); X.fill();
+      X.beginPath(); X.arc(tx+2.9*z,ty+1.9*z,0.7*z,0,7); X.fill();
+      // frond layer 1 — drooping down (8 fronds)
+      var frondCount=8;
+      for(var a=0;a<frondCount;a++){
+        var ang=(-Math.PI/2) + (a-(frondCount-1)/2)*(Math.PI*1.05/frondCount);
+        // drooping fronds have a downward bias
+        var droop=0.45;
+        var tipDx=Math.cos(ang)*22*z;
+        var tipDy=Math.sin(ang)*14*z + 6*z; // pull down
+        var ctlDx=Math.cos(ang)*8*z + Math.sin(ang)*4*z;
+        var ctlDy=Math.sin(ang)*4*z + 8*z;
+        // frond gradient from dark base to light tip
+        var fGrad=X.createLinearGradient(tx+ctlDx*0.2, ty+ctlDy*0.2, tx+tipDx, ty+tipDy);
+        fGrad.addColorStop(0,'rgba(34,90,46,0.95)');
+        fGrad.addColorStop(0.6,'rgba(60,140,68,0.92)');
+        fGrad.addColorStop(1,'rgba(130,200,110,0.88)');
+        X.fillStyle=fGrad;
+        X.beginPath();
+        X.moveTo(tx,ty);
+        X.quadraticCurveTo(tx+ctlDx, ty+ctlDy, tx+tipDx, ty+tipDy);
+        // tip point then back via a second control point that bows out
+        var backCtlX=tx+tipDx*0.7 - Math.sin(ang)*3*z;
+        var backCtlY=ty+tipDy*0.7 - Math.cos(ang)*2*z + 1*z;
+        X.quadraticCurveTo(backCtlX, backCtlY, tx, ty);
+        X.closePath(); X.fill();
+        // frond center vein
+        X.strokeStyle='rgba(28,70,36,0.6)'; X.lineWidth=0.7*z;
+        X.beginPath();
+        X.moveTo(tx,ty);
+        X.quadraticCurveTo(tx+ctlDx, ty+ctlDy, tx+tipDx, ty+tipDy);
+        X.stroke();
+      }
+      // frond layer 2 — pointing up (7 fronds, offset angles for fullness)
+      var frondCount2=7;
+      for(var a2=0;a2<frondCount2;a2++){
+        var ang2=(-Math.PI/2) + (a2-(frondCount2-1)/2)*(Math.PI*0.85/frondCount2) + 0.2;
+        var tipDx2=Math.cos(ang2)*20*z;
+        var tipDy2=Math.sin(ang2)*16*z - 6*z; // push up
+        var ctlDx2=Math.cos(ang2)*7*z - Math.sin(ang2)*3*z;
+        var ctlDy2=Math.sin(ang2)*6*z - 2*z;
+        var fGrad2=X.createLinearGradient(tx+ctlDx2*0.2, ty+ctlDy2*0.2, tx+tipDx2, ty+tipDy2);
+        fGrad2.addColorStop(0,'rgba(40,100,52,0.95)');
+        fGrad2.addColorStop(0.6,'rgba(70,150,76,0.92)');
+        fGrad2.addColorStop(1,'rgba(150,210,120,0.88)');
+        X.fillStyle=fGrad2;
+        X.beginPath();
+        X.moveTo(tx,ty);
+        X.quadraticCurveTo(tx+ctlDx2, ty+ctlDy2, tx+tipDx2, ty+tipDy2);
+        var backCtlX2=tx+tipDx2*0.7 + Math.sin(ang2)*3*z;
+        var backCtlY2=ty+tipDy2*0.7 + Math.cos(ang2)*1*z - 1*z;
+        X.quadraticCurveTo(backCtlX2, backCtlY2, tx, ty);
+        X.closePath(); X.fill();
+        // vein
+        X.strokeStyle='rgba(30,76,40,0.55)'; X.lineWidth=0.6*z;
+        X.beginPath();
+        X.moveTo(tx,ty);
+        X.quadraticCurveTo(tx+ctlDx2, ty+ctlDy2, tx+tipDx2, ty+tipDy2);
+        X.stroke();
+      }
+      // crown core highlight
+      X.fillStyle='rgba(200,220,160,0.45)';
+      X.beginPath(); X.arc(tx,ty,2.5*z,0,7); X.fill();
     }
     function ring(cx,cy,r,frac,color){
-      X.beginPath(); X.arc(cx,cy,r,0,Math.PI*2); X.strokeStyle='rgba(255,255,255,0.12)'; X.lineWidth=3*cam.z; X.stroke();
+      // No more raised stone base plate — the plaza chessboard tile shows
+      // through underneath. Just the soft gold glow + load arc.
+      X.save();
+      X.shadowColor=color; X.shadowBlur=14*cam.z;
+      X.fillStyle='rgba(232,200,120,0.18)';
+      X.beginPath(); X.ellipse(cx,cy, r+3*cam.z, (r+3*cam.z)*0.5, 0, 0, 7); X.fill();
+      X.restore();
+      X.beginPath(); X.arc(cx,cy,r,0,Math.PI*2); X.strokeStyle='rgba(255,255,255,0.14)'; X.lineWidth=3*cam.z; X.stroke();
       X.beginPath(); X.arc(cx,cy,r,-Math.PI/2,-Math.PI/2+Math.PI*2*Math.max(0,Math.min(1,frac))); X.strokeStyle=color; X.lineWidth=3*cam.z; X.stroke();
     }
     function label(cx,cy,txt,col,sub){
@@ -1527,44 +3914,505 @@ button.act:disabled{opacity:0.5;cursor:default;}
       X.font='700 '+(11*z)+'px '+mono(); X.fillStyle=col; X.fillText(txt,cx,cy);
       X.font=(8.5*z)+'px '+mono(); X.fillStyle='rgba(200,185,150,0.9)'; X.fillText(sub,cx,cy+11*z);
     }
-    function padMark(bx,by,z){ X.strokeStyle='rgba(255,255,255,0.10)'; X.lineWidth=1; X.beginPath(); X.ellipse(bx,by,15*z,7*z,0,0,7); X.stroke(); }
+    function padMark(bx,by,z){
+      // "Not joined" marker — soft crosshair on the bare plaza tile.
+      // No more raised stone platform; the chessboard shows through.
+      X.strokeStyle='rgba(232,200,120,0.6)'; X.lineWidth=1.4*z;
+      X.beginPath();
+      X.moveTo(bx-7*z,by-3*z); X.lineTo(bx+7*z,by+3*z);
+      X.moveTo(bx+7*z,by-3*z); X.lineTo(bx-7*z,by+3*z);
+      X.stroke();
+      // soft outer glow
+      X.strokeStyle='rgba(255,210,140,0.4)'; X.lineWidth=3*z;
+      X.beginPath();
+      X.moveTo(bx-7*z,by-3*z); X.lineTo(bx+7*z,by+3*z);
+      X.moveTo(bx+7*z,by-3*z); X.lineTo(bx-7*z,by+3*z);
+      X.stroke();
+    }
+    // Render a 3D-looking raised tile (top face + right side + front face) centered on (cx,cy)
+    function drawTileQuad(cx,cy,w,h,fillTop,fillSide){
+      var halfW=w*0.5, halfH=h*0.35;
+      var lift=3*cam.z;
+      // top face (diamond) — lit
+      X.fillStyle=fillTop;
+      X.beginPath();
+      X.moveTo(cx,cy-lift-halfH);
+      X.lineTo(cx+halfW,cy-lift);
+      X.lineTo(cx,cy-lift+halfH);
+      X.lineTo(cx-halfW,cy-lift);
+      X.closePath(); X.fill();
+      // top face bevel highlight (upper-left edges)
+      X.strokeStyle='rgba(255,255,255,0.18)'; X.lineWidth=0.9*cam.z;
+      X.beginPath();
+      X.moveTo(cx,cy-lift-halfH);
+      X.lineTo(cx-halfW,cy-lift);
+      X.stroke();
+      X.beginPath();
+      X.moveTo(cx-halfW,cy-lift);
+      X.lineTo(cx,cy-lift+halfH);
+      X.stroke();
+      // right side face (darker)
+      X.fillStyle=fillSide;
+      X.beginPath();
+      X.moveTo(cx,cy-lift+halfH);
+      X.lineTo(cx+halfW,cy-lift);
+      X.lineTo(cx+halfW,cy);
+      X.lineTo(cx,cy+halfH);
+      X.closePath(); X.fill();
+      // front face (darker)
+      X.fillStyle=fillSide;
+      X.beginPath();
+      X.moveTo(cx-halfW,cy-lift);
+      X.lineTo(cx,cy-lift+halfH);
+      X.lineTo(cx,cy+halfH);
+      X.lineTo(cx-halfW,cy);
+      X.closePath(); X.fill();
+      // outline
+      X.strokeStyle='rgba(0,0,0,0.45)'; X.lineWidth=0.8*cam.z;
+      X.beginPath();
+      X.moveTo(cx,cy-lift-halfH); X.lineTo(cx+halfW,cy-lift);
+      X.lineTo(cx+halfW,cy); X.lineTo(cx,cy+halfH);
+      X.lineTo(cx-halfW,cy); X.lineTo(cx-halfW,cy-lift);
+      X.closePath(); X.stroke();
+    }
     function drawHub(n){
-      var p=iso(n.wx,n.wy), z=cam.z, bob=Math.sin((performance.now()-t0)/700)*2*z, bx=p.x, by=p.y-6*z-bob;
-      X.fillStyle='rgba(0,0,0,0.3)'; X.beginPath(); X.ellipse(bx,p.y+2*z,16*z,7*z,0,0,7); X.fill();
-      X.fillStyle='rgba(40,34,58,0.92)'; X.strokeStyle=getVar('--gold-bright'); X.lineWidth=1.2;
-      X.beginPath(); X.rect(bx-16*z,by-40*z,32*z,44*z); X.fill(); X.stroke();
-      for(var i=0;i<4;i++){ X.fillStyle=i%2?getVar('--ok'):getVar('--gold-bright'); X.globalAlpha=0.4+0.6*Math.abs(Math.sin((performance.now()-t0)/300+i)); X.fillRect(bx-11*z,by-34*z+i*9*z,22*z,4*z); X.globalAlpha=1; }
-      X.strokeStyle=getVar('--gold'); X.beginPath(); X.moveTo(bx,by-40*z); X.lineTo(bx,by-52*z); X.stroke();
-      X.fillStyle=getVar('--gold-bright'); X.beginPath(); X.arc(bx,by-53*z,3*z,0,7); X.fill();
-      label(bx,p.y+16*z,n.name,getVar('--gold-bright'), (n.connected?'HUB · '+Math.round(n.load)+'%':'offline'));
-      n._hit={x:bx-20*z,y:by-54*z,w:40*z,h:80*z};
+      // Desktop PC / server workstation: a tower on the left, a monitor on the right,
+      // a keyboard in front and a mouse to the right. Centered on (n.wx, n.wy) on the iso ground.
+      var z=cam.z;
+      var bob=Math.sin((performance.now()-t0)/700)*1.2*z;
+      // base point on the iso ground (the workstation sits centered here, slightly raised by bob)
+      var p=iso(n.wx, n.wy);
+      var gx=p.x, gy=p.y - bob;  // ground reference
+      // soft floor shadow under the whole workstation
+      X.fillStyle='rgba(0,0,0,0.32)';
+      X.beginPath(); X.ellipse(gx, gy+3*z, 32*z, 12*z, 0, 0, 7); X.fill();
+      // (desk-mat removed — the bare plaza tile now shows under the workstation)
+
+      // ── PC TOWER (left of center, vertical box) ──
+      // tower footprint ~14*z wide x 10*z deep on the desk, height 26*z
+      var tx=gx-18*z, ty=gy-11*z;  // tower base x, y on desk top
+      var tw=14*z, td=10*z, th=26*z;
+      // right side face (darker)
+      X.fillStyle='rgba(36,32,48,0.97)';
+      X.beginPath();
+      X.moveTo(tx+tw, ty);
+      X.lineTo(tx+tw, ty-th);
+      X.lineTo(tx+tw+td*0.45, ty-th+td*0.35);
+      X.lineTo(tx+tw+td*0.45, ty+td*0.35);
+      X.closePath(); X.fill();
+      // front face (lit)
+      X.fillStyle='rgba(56,50,72,0.97)';
+      X.beginPath();
+      X.moveTo(tx, ty);
+      X.lineTo(tx, ty-th);
+      X.lineTo(tx+tw, ty-th);
+      X.lineTo(tx+tw, ty);
+      X.closePath(); X.fill();
+      // top face
+      X.fillStyle='rgba(78,70,96,0.97)';
+      X.beginPath();
+      X.moveTo(tx, ty);
+      X.lineTo(tx+tw, ty);
+      X.lineTo(tx+tw+td*0.45, ty+td*0.35);
+      X.lineTo(tx+td*0.45, ty+td*0.35);
+      X.closePath(); X.fill();
+      // tower outline
+      X.strokeStyle='rgba(12,8,18,0.95)'; X.lineWidth=0.7*z;
+      X.beginPath();
+      X.moveTo(tx, ty); X.lineTo(tx, ty-th); X.lineTo(tx+tw, ty-th); X.lineTo(tx+tw, ty); X.closePath(); X.stroke();
+      X.beginPath();
+      X.moveTo(tx, ty); X.lineTo(tx+tw, ty); X.lineTo(tx+tw+td*0.45, ty+td*0.35); X.lineTo(tx+td*0.45, ty+td*0.35); X.closePath(); X.stroke();
+      X.beginPath();
+      X.moveTo(tx, ty-th); X.lineTo(tx+td*0.45, ty-th+td*0.35); X.stroke();
+      X.beginPath();
+      X.moveTo(tx+tw, ty-th); X.lineTo(tx+tw+td*0.45, ty-th+td*0.35); X.stroke();
+      // front-face details: power button + drive bay slots + LED
+      X.fillStyle='rgba(255,214,112,0.95)';
+      X.beginPath(); X.arc(tx+3*z, ty-4*z, 1.4*z, 0, 7); X.fill();  // power LED
+      // drive bay slots
+      X.fillStyle='rgba(20,16,28,0.95)';
+      X.fillRect(tx+2*z, ty-9*z, 10*z, 2*z);
+      X.fillRect(tx+2*z, ty-13*z, 10*z, 2*z);
+      X.fillRect(tx+2*z, ty-17*z, 10*z, 2*z);
+      // blinking activity LED (green)
+      var blink=Math.abs(Math.sin((performance.now()-t0)/300));
+      X.fillStyle='rgba(110,224,166,'+(0.5+0.5*blink).toFixed(3)+')';
+      X.beginPath(); X.arc(tx+11*z, ty-4*z, 0.9*z, 0, 7); X.fill();
+      // mesh vent lines on right side (darker grooves)
+      X.strokeStyle='rgba(12,8,18,0.7)'; X.lineWidth=0.5*z;
+      for(var vi=0;vi<5;vi++){ X.beginPath(); X.moveTo(tx+tw+0.6*z, ty-2*z-vi*4*z); X.lineTo(tx+tw+td*0.45-0.6*z, ty-2*z-vi*4*z+td*0.35); X.stroke(); }
+
+      // ── MONITOR (right of center) ──
+      // stand base, neck, screen
+      var mx=gx+4*z, my=gy-11*z;  // monitor base on desk
+      var mw=18*z, mh=14*z;  // screen width / height
+      // monitor neck
+      X.fillStyle='rgba(50,44,68,0.95)';
+      X.beginPath(); X.moveTo(mx+5*z, my); X.lineTo(mx+13*z, my); X.lineTo(mx+12*z, my-3*z); X.lineTo(mx+6*z, my-3*z); X.closePath(); X.fill();
+      // monitor stand base (small ellipse)
+      X.fillStyle='rgba(40,34,52,0.95)';
+      X.beginPath(); X.ellipse(mx+9*z, my+0.5*z, 6*z, 1.4*z, 0, 0, 7); X.fill();
+      // monitor screen (lit, animated content)
+      var scrX=mx-2*z, scrY=my-3*z - mh;
+      // screen bezel
+      X.fillStyle='rgba(20,16,28,0.98)';
+      X.beginPath(); X.roundRect(scrX, scrY, mw, mh, 1.5*z); X.fill();
+      // screen surface — animated dashboard gradient
+      var scrGrad=X.createLinearGradient(scrX, scrY, scrX, scrY+mh);
+      scrGrad.addColorStop(0, n.connected?'rgba(36,76,108,0.95)':'rgba(48,30,30,0.95)');
+      scrGrad.addColorStop(1, n.connected?'rgba(20,40,64,0.95)':'rgba(28,18,18,0.95)');
+      X.fillStyle=scrGrad;
+      X.beginPath(); X.roundRect(scrX+1*z, scrY+1*z, mw-2*z, mh-3*z, 1*z); X.fill();
+      // screen content — animated bars (looks like a live dashboard)
+      X.fillStyle='rgba(110,224,166,0.85)';
+      for(var bi=0;bi<5;bi++){
+        var bw=2.5*z, bh=(3 + 4*Math.abs(Math.sin((performance.now()-t0)/400 + bi*0.7)))*z;
+        X.fillRect(scrX+2.5*z + bi*3*z, scrY+mh-3*z-bh, bw, bh);
+      }
+      // header bar (gold)
+      X.fillStyle='rgba(255,214,112,0.7)';
+      X.fillRect(scrX+1.5*z, scrY+2*z, mw-3*z, 1*z);
+      // tiny "REC" dot
+      X.fillStyle='rgba(255,90,90,0.95)';
+      X.beginPath(); X.arc(scrX+3*z, scrY+4*z, 0.7*z, 0, 7); X.fill();
+      // monitor bezel outline
+      X.strokeStyle='rgba(12,8,18,0.95)'; X.lineWidth=0.7*z;
+      X.beginPath(); X.roundRect(scrX, scrY, mw, mh, 1.5*z); X.stroke();
+      // brand bar at bottom of monitor
+      X.fillStyle='rgba(255,214,112,0.85)';
+      X.fillRect(scrX+mw*0.35, scrY+mh-1.4*z, mw*0.3, 0.6*z);
+
+      // ── KEYBOARD (in front of the monitor) ──
+      var kbX=mx-1*z, kbY=gy-2*z;
+      var kbW=18*z, kbH=4.5*z;
+      X.fillStyle='rgba(28,24,36,0.95)';
+      X.beginPath(); X.roundRect(kbX, kbY, kbW, kbH, 1*z); X.fill();
+      X.strokeStyle='rgba(12,8,18,0.9)'; X.lineWidth=0.5*z;
+      X.beginPath(); X.roundRect(kbX, kbY, kbW, kbH, 1*z); X.stroke();
+      // key rows
+      X.fillStyle='rgba(70,62,86,0.95)';
+      for(var kr=0;kr<3;kr++){
+        for(var kc=0;kc<10;kc++){
+          X.fillRect(kbX+1*z + kc*1.7*z, kbY+0.5*z + kr*1.3*z, 1.2*z, 1*z);
+        }
+      }
+      // spacebar
+      X.fillRect(kbX+5*z, kbY+0.5*z+3*1.3*z, 6*z, 1*z);
+
+      // ── MOUSE (right of keyboard) ──
+      var msX=kbX+kbW+1.5*z, msY=kbY+0.5*z;
+      X.fillStyle='rgba(28,24,36,0.95)';
+      X.beginPath(); X.ellipse(msX+1.5*z, msY+1.5*z, 2*z, 2.6*z, 0, 0, 7); X.fill();
+      X.strokeStyle='rgba(12,8,18,0.9)'; X.lineWidth=0.5*z;
+      X.beginPath(); X.ellipse(msX+1.5*z, msY+1.5*z, 2*z, 2.6*z, 0, 0, 7); X.stroke();
+      // scroll wheel
+      X.fillStyle='rgba(255,214,112,0.85)';
+      X.fillRect(msX+1.4*z, msY+0.5*z, 0.3*z, 0.8*z);
+
+      // ── glowing signal lines coming from the monitor (radio waves) ──
+      for(var ri=0;ri<3;ri++){
+        var rphase=((performance.now()-t0)/1100 + ri*0.33) % 1;
+        var rr=10*z + rphase*22*z;
+        var ralpha=(1-rphase)*0.5;
+        X.strokeStyle='rgba(255,214,112,'+ralpha.toFixed(3)+')';
+        X.lineWidth=0.8*z;
+        X.beginPath();
+        X.arc(scrX+mw*0.5, scrY+mh*0.5, rr, Math.PI*0.85, Math.PI*1.15);
+        X.stroke();
+      }
+
+      // ── label below the workstation ──
+      var labelX=gx;
+      var labelY=gy+10*z;
+      label(labelX, labelY, n.name, getVar('--gold-bright'), (n.connected?'HUB · '+Math.round(n.load)+'%':'offline'));
+      // hit-box covers the whole workstation footprint
+      n._hit={x:gx-32*z, y:scrY-3*z, w:64*z, h:(labelY+8*z)-(scrY-3*z)};
     }
     function drawRobot(n){
-      var p=iso(n.wx,n.wy), z=cam.z, bob=n.connected?Math.sin((performance.now()-t0)/500+n.wx)*2.3*z:0, bx=p.x, by=p.y-4*z-bob;
-      if(n.connected) ring(bx,p.y+3*z,18*z,n.load/100,loadColor(n.load)); else padMark(bx,p.y+3*z,z);
-      X.fillStyle='rgba(0,0,0,0.3)'; X.beginPath(); X.ellipse(bx,p.y+3*z,13*z,6*z,0,0,7); X.fill();
-      var col=n.connected?getVar('--gold-bright'):'rgba(150,143,120,0.5)';
-      X.globalAlpha=n.connected?1:0.7;
+      var p=iso(n.wx,n.wy), z=cam.z, now=performance.now();
+      // Slight bob varies by status: live/talking robots get a livelier
+      // bob, offline/ended ones stay still.
+      var bobAmp = (n.status==='live'||n.status==='talking') ? 2.6*z
+                 : (n.status==='ended') ? 0.4*z
+                 : (n.connected ? 1.6*z : 0);
+      var bob = bobAmp ? Math.sin(now/500 + (n.wx||0)) * bobAmp : 0;
+      var bx=p.x, by=p.y-4*z-bob;
+      var status = n.status || (n.connected ? 'ready' : 'offline');
+
+      // ── status-driven ground effect (drawn under the avatar) ──
+      // Each status has a distinct footprint so you can read what's
+      // happening from across the plaza: a green pulse for live, an
+      // expanding sound ring for talking, a slow blue breathing
+      // halo for ready/waiting, a fading grey ring for ended, and
+      // a dim grey halo for offline.
+      drawStatusGround(n, status, bx, p.y+3*z, z, now);
+
+      // Shadow under the avatar (kept subtle so the new ground effect
+      // is the visual focus).
+      X.fillStyle='rgba(0,0,0,0.28)';
+      X.beginPath(); X.ellipse(bx, p.y+3*z, 13*z, 5.5*z, 0, 0, Math.PI*2); X.fill();
+
+      // Status-colored rim under the avatar (thin ring, same hue as
+      // the status ground effect — binds the avatar to its footprint).
+      var rimColor = statusRimColor(status);
+      X.strokeStyle=rimColor; X.lineWidth=1.4*z;
+      X.beginPath(); X.ellipse(bx, p.y+3*z, 18*z, 8*z, 0, 0, Math.PI*2); X.stroke();
+
+      // Load arc (still useful — shows CPU pressure even on a live
+      // robot). Drawn at a slightly larger radius than the status rim
+      // so the two don't fight visually.
+      if(n.connected) ring(bx, p.y+3*z, 18*z, n.load/100, loadColor(n.load));
+      else padMark(bx, p.y+3*z, z);
+
+      var col = n.connected ? rimColor : 'rgba(150,143,120,0.5)';
+      X.globalAlpha = n.connected ? 1 : 0.7;
       var img = avatarImageForNode(n);
       if(img && img.complete && img.naturalWidth>0){
-        var iw=26*z, ih=26*z*img.naturalHeight/img.naturalWidth;
+        var iw=40*z, ih=40*z*img.naturalHeight/img.naturalWidth;
         X.save();
-        X.beginPath(); X.roundRect(bx-13*z,by-38*z,iw,ih+12*z,6*z); X.clip();
-        X.drawImage(img, bx-13*z, by-44*z, iw, ih+18*z);
+        X.beginPath(); X.roundRect(bx-20*z, by-54*z, iw, ih+12*z, 8*z); X.clip();
+        X.drawImage(img, bx-20*z, by-60*z, iw, ih+18*z);
         X.restore();
-        X.strokeStyle=col; X.lineWidth=1.6; X.beginPath(); X.roundRect(bx-13*z,by-38*z,iw,ih+12*z,6*z); X.stroke();
       } else {
-        X.fillStyle='rgba(24,20,38,0.92)'; X.strokeStyle=col; X.lineWidth=1.6;
-        X.beginPath(); X.roundRect(bx-11*z,by-24*z,22*z,25*z,5*z); X.fill(); X.stroke();
-        X.beginPath(); X.roundRect(bx-8*z,by-37*z,16*z,14*z,4*z); X.fillStyle='rgba(30,24,44,0.95)'; X.fill(); X.stroke();
-        X.fillStyle=n.connected?getVar('--ok'):'#655'; X.beginPath(); X.arc(bx-3.5*z,by-30*z,2*z,0,7); X.arc(bx+3.5*z,by-30*z,2*z,0,7); X.fill();
-        X.strokeStyle=col; X.beginPath(); X.moveTo(bx,by-37*z); X.lineTo(bx,by-44*z); X.stroke();
-        X.fillStyle=n.connected?'#FF5B4A':'#655'; X.beginPath(); X.arc(bx,by-45*z,2*z,0,7); X.fill();
+        X.fillStyle='rgba(24,20,38,0.92)';
+        X.beginPath(); X.roundRect(bx-17*z, by-36*z, 34*z, 36*z, 7*z); X.fill();
+        X.fillStyle='rgba(30,24,44,0.95)';
+        X.beginPath(); X.roundRect(bx-12*z, by-54*z, 24*z, 20*z, 5*z); X.fill();
+        // Mouth/eyes default to the live color; "talking" status will
+        // animate the mouth in drawStatusOverlays() below.
+        X.fillStyle = n.connected ? getVar('--ok') : '#655';
+        X.beginPath(); X.arc(bx-5*z, by-44*z, 3*z, 0, 7); X.arc(bx+5*z, by-44*z, 3*z, 0, 7); X.fill();
+        // mouth dot — gets animated when status==='talking'
+        X.fillStyle = (status==='talking') ? '#FF5B4A' : ((status==='ended') ? 'rgba(200,180,160,0.5)' : '#FF5B4A');
+        X.beginPath(); X.arc(bx, by-65*z, (status==='talking' ? 2.2 + 1.4*Math.abs(Math.sin(now/85)) : 2.4)*z, 0, 7); X.fill();
       }
       X.globalAlpha=1;
-      var sub=n.connected?((n.sub&&n.sub!==n.name?n.sub+' · ':'')+Math.round(n.load)+'%'):'not joined';
-      label(bx,p.y+17*z,n.label,col,sub);
-      n._hit={x:bx-15*z,y:by-47*z,w:30*z,h:60*z};
+
+      // status overlays: speech rings (talking), thought bubble
+      // (waiting/ready), a "👋 bye" mark (ended). Drawn ABOVE the
+      // avatar so they read at a glance from the rest of the plaza.
+      drawStatusOverlays(n, status, bx, by, z, now);
+
+      // sub-text under the avatar — show readiness + a short status word
+      var subBits = [];
+      if(n.sub && n.sub!==n.name) subBits.push(n.sub);
+      if(n.connected){
+        if(status==='talking') subBits.push('talking');
+        else if(status==='live') subBits.push('live');
+        else if(status==='ended') subBits.push('session ended');
+        else if(status==='ready') subBits.push('waiting');
+        subBits.push(Math.round(n.load||0)+'%');
+      } else {
+        subBits.push('not joined');
+      }
+      label(bx, p.y+17*z, n.label, col, subBits.join(' · '));
+      // ── holographic name callout pill above the avatar (status-colored border) ──
+      if(n.connected){
+        var pillW=Math.max(70*z, (n.label.length*7 + 18) * z);
+        var pillH=16*z;
+        var pillR=8*z;
+        var pillCx=bx;
+        var pillCy=by - 8*z - 54*z - pillH*0.5;
+        X.save();
+        X.fillStyle='rgba(20,16,32,0.85)';
+        X.beginPath();
+        if(X.roundRect){
+          X.roundRect(pillCx - pillW*0.5, pillCy - pillH*0.5, pillW, pillH, pillR);
+        } else {
+          X.rect(pillCx - pillW*0.5, pillCy - pillH*0.5, pillW, pillH);
+        }
+        X.fill();
+        // pill border uses the same status hue as the ground effect
+        X.strokeStyle = rimColor; X.lineWidth=1.0*z;
+        X.stroke();
+        X.fillStyle='rgba(255,232,160,0.95)';
+        X.font='700 '+(10*z)+'px '+mono();
+        X.textAlign='center'; X.textBaseline='middle';
+        X.fillText(n.label, pillCx, pillCy);
+        X.restore();
+        // ── pulsing status dot to the right of the pill (faster pulse for live, fastest for talking) ──
+        var dotCx=pillCx + pillW*0.5 + 4*z;
+        var dotCy=pillCy;
+        var dotPeriod = status==='talking' ? 110 : (status==='live' ? 230 : 400);
+        var dotAlpha=0.55+0.45*Math.abs(Math.sin(now/dotPeriod + (n.wx||0)));
+        X.save();
+        X.fillStyle=hexWithAlpha(rimColor, dotAlpha.toFixed(3));
+        X.shadowColor=rimColor; X.shadowBlur=6*z;
+        X.beginPath(); X.arc(dotCx, dotCy, 3*z, 0, Math.PI*2); X.fill();
+        X.restore();
+      }
+      n._hit={x:bx-25*z,y:by-67*z,w:50*z,h:80*z};
+    }
+
+    // Map status → rgb base color (used for ground effect, rim, dot).
+    // Kept in a small helper so all the status-driven effects stay in
+    // sync visually.
+    function statusRimColor(status){
+      switch(status){
+        case 'talking': return 'rgb(110,224,166)';   // bright green — voice is active
+        case 'live':    return 'rgb(255,214,112)';   // gold — session open, idle
+        case 'ended':   return 'rgb(180,170,160)';   // grey — session just ended, fading
+        case 'ready':   return 'rgb(110,180,255)';   // soft blue — waiting/ready
+        case 'offline': return 'rgba(150,143,120,0.5)';
+        default:        return 'rgb(255,214,112)';
+      }
+    }
+    // Build an rgba() string from an rgb() base + an alpha. Used so
+    // shadowColor / strokeStyle can blend nicely against the gold grid.
+    function hexWithAlpha(rgb, a){
+      // Accepts "rgb(r,g,b)" or "rgba(r,g,b,x)"; returns rgba(r,g,b,a).
+      // This file is embedded in a TypeScript template string, so regex
+      // backslashes must be doubled or the browser receives an invalid regex.
+      var m = /rgba?\\((\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)/.exec(rgb);
+      if(!m) return rgb;
+      return 'rgba('+m[1]+','+m[2]+','+m[3]+','+a+')';
+    }
+
+    // ── status-driven ground effect under the avatar ──
+    // Drawn before the avatar so the rim + ring sit on top. Each
+    // status reads as a distinct footprint color + animation so the
+    // plaza instantly tells you which robots are quiet, waiting,
+    // listening, talking, or just stopped.
+    function drawStatusGround(n, status, cx, cy, z, now){
+      if(status === 'offline'){
+        // dim grey aura (kept from the original)
+        var g = X.createRadialGradient(cx, cy, 2*z, cx, cy, 22*z);
+        g.addColorStop(0,'rgba(140,140,160,0.16)');
+        g.addColorStop(1,'rgba(140,140,160,0)');
+        X.fillStyle=g; X.beginPath(); X.ellipse(cx, cy, 22*z, 11*z, 0, 0, 7); X.fill();
+        return;
+      }
+      if(status === 'live'){
+        // breathing green pulse — small inner glow that throbs every
+        // ~0.7s, plus the load arc's gold ring already drawn above.
+        var beat = 0.5 + 0.5*Math.sin(now/350);
+        var g = X.createRadialGradient(cx, cy, 2*z, cx, cy, (18 + 6*beat)*z);
+        g.addColorStop(0, 'rgba(110,224,166,'+(0.45 + 0.25*beat).toFixed(3)+')');
+        g.addColorStop(0.6, 'rgba(110,224,166,0.12)');
+        g.addColorStop(1, 'rgba(110,224,166,0)');
+        X.fillStyle=g; X.beginPath(); X.ellipse(cx, cy, (18+6*beat)*z, (9+3*beat)*z, 0, 0, 7); X.fill();
+        return;
+      }
+      if(status === 'talking'){
+        // 2-3 expanding sound rings (like ⌒) — color bright green, very
+        // distinct from the gold "live" pulse so listeners know voice
+        // is actually flowing right now.
+        var ringCount = 2;
+        for(var ti=0; ti<ringCount; ti++){
+          var tphase = ((now/420) + ti*0.5) % 1;
+          var tr = (10 + tphase*22)*z;
+          var ta = (1 - tphase) * 0.7;
+          X.strokeStyle='rgba(110,224,166,'+ta.toFixed(3)+')';
+          X.lineWidth=1.6*z;
+          X.beginPath(); X.ellipse(cx, cy, tr, tr*0.5, 0, 0, Math.PI*2); X.stroke();
+        }
+        // solid inner glow so the "voice" footprint reads even when
+        // rings are between expansions.
+        var tg = X.createRadialGradient(cx, cy, 2*z, cx, cy, 14*z);
+        tg.addColorStop(0, 'rgba(110,224,166,0.45)');
+        tg.addColorStop(1, 'rgba(110,224,166,0)');
+        X.fillStyle=tg; X.beginPath(); X.ellipse(cx, cy, 14*z, 7*z, 0, 0, 7); X.fill();
+        return;
+      }
+      if(status === 'ready'){
+        // soft blue "waiting" halo — slow breath, calmer than live.
+        var breath = 0.5 + 0.5*Math.sin(now/900);
+        var rg = X.createRadialGradient(cx, cy, 2*z, cx, cy, 20*z);
+        rg.addColorStop(0, 'rgba(110,180,255,'+(0.18 + 0.10*breath).toFixed(3)+')');
+        rg.addColorStop(1, 'rgba(110,180,255,0)');
+        X.fillStyle=rg; X.beginPath(); X.ellipse(cx, cy, 20*z, 10*z, 0, 0, 7); X.fill();
+        return;
+      }
+      if(status === 'ended'){
+        // session just ended — fading grey ring expanding outward,
+        // like a sound ring dying down. Alpha drops to 0 over 4s.
+        var mem = _statusMem[n.id] || {};
+        var since = mem.lastEndedAt ? (now - mem.lastEndedAt) : 0;
+        if(since > 4000) return;
+        var ft = Math.min(1, since / 4000);
+        var fr = (16 + ft*30)*z;
+        var fa = (1 - ft) * 0.55;
+        X.strokeStyle='rgba(180,170,160,'+fa.toFixed(3)+')';
+        X.lineWidth=1.4*z;
+        X.beginPath(); X.ellipse(cx, cy, fr, fr*0.5, 0, 0, Math.PI*2); X.stroke();
+        return;
+      }
+    }
+
+    // ── status-driven overlays above the avatar ──
+    // Speech rings (talking), thought-bubble "?" (ready/waiting),
+    // fading "👋" (ended). Drawn on top of the avatar so they read
+    // at a glance.
+    function drawStatusOverlays(n, status, bx, by, z, now){
+      if(status === 'talking'){
+        // Speech ring: 3 expanding arcs above the avatar, like
+        // someone is mid-sentence. Color bright green to match the
+        // ground pulse.
+        for(var si=0; si<3; si++){
+          var sphase = ((now/260) + si*0.34) % 1;
+          var sa = (1 - sphase) * 0.85;
+          var sr = (4 + sphase*9)*z;
+          X.strokeStyle='rgba(110,224,166,'+sa.toFixed(3)+')';
+          X.lineWidth=1.4*z;
+          X.beginPath();
+          X.arc(bx, by-58*z - sphase*4*z, sr, Math.PI*1.15, Math.PI*1.85);
+          X.stroke();
+        }
+        return;
+      }
+      if(status === 'ready'){
+        // Thought bubble: small cloud (3 circles) with a "?" inside.
+        // Bobs gently so it reads as a thought, not a sticker.
+        var bob = Math.sin(now/700) * 1.4*z;
+        var bubbleX = bx + 20*z;
+        var bubbleY = by - 64*z + bob;
+        // tail circles
+        X.fillStyle='rgba(220,234,255,0.95)';
+        X.beginPath(); X.arc(bubbleX-7*z, bubbleY+8*z, 1.6*z, 0, Math.PI*2); X.fill();
+        X.beginPath(); X.arc(bubbleX-4*z, bubbleY+4*z, 2.2*z, 0, Math.PI*2); X.fill();
+        // main bubble
+        X.beginPath(); X.arc(bubbleX, bubbleY, 6*z, 0, Math.PI*2); X.fill();
+        X.strokeStyle='rgba(110,180,255,0.85)'; X.lineWidth=1.0*z; X.stroke();
+        // "?" text
+        X.fillStyle='rgba(60,90,140,0.95)';
+        X.font='700 '+(7*z)+'px '+mono();
+        X.textAlign='center'; X.textBaseline='middle';
+        X.fillText('?', bubbleX, bubbleY+0.5*z);
+        return;
+      }
+      if(status === 'ended'){
+        // Fading "bye" wave — a small waving-hand glyph that rises and
+        // fades out over 4s.
+        var mem = _statusMem[n.id] || {};
+        var since = mem.lastEndedAt ? (now - mem.lastEndedAt) : 0;
+        if(since > 4000) return;
+        var ft = since / 4000;
+        var a = (1 - ft) * 0.95;
+        var lift = ft * 14*z;
+        X.save();
+        X.globalAlpha = a;
+        // small bubble background for legibility
+        X.fillStyle='rgba(20,16,32,0.7)';
+        X.beginPath(); X.arc(bx, by - 60*z - lift, 8*z, 0, Math.PI*2); X.fill();
+        X.strokeStyle='rgba(180,170,160,0.9)'; X.lineWidth=0.8*z;
+        X.stroke();
+        // hand glyph (canvas-drawn, simpler than emoji so it always renders)
+        var hx = bx, hy = by - 60*z - lift;
+        X.fillStyle='rgba(255,214,112,0.95)';
+        // palm
+        X.beginPath(); X.arc(hx, hy + 0.5*z, 3.0*z, 0, Math.PI*2); X.fill();
+        // 4 fingers
+        for(var fi=-2; fi<=1; fi++){
+          X.fillRect(hx + fi*1.2*z - 0.4*z, hy - 3.6*z, 0.8*z, 2.6*z);
+        }
+        // thumb
+        X.beginPath(); X.arc(hx - 2.4*z, hy + 0.5*z, 0.9*z, 0, Math.PI*2); X.fill();
+        // tiny side-to-side wave wobble
+        var wobble = Math.sin(now/110) * 1.4*z;
+        X.translate(wobble, 0);
+        X.restore();
+        return;
+      }
     }
     function drawPeer(n){
       var p=iso(n.wx,n.wy), z=cam.z, bx=p.x, by=p.y-3*z;
@@ -1577,16 +4425,206 @@ button.act:disabled{opacity:0.5;cursor:default;}
       n._hit={x:bx-15*z,y:by-24*z,w:30*z,h:42*z};
     }
 
+    // ── Walker tick + draw ──
+    // Advances each walker along its path at a steady world-space speed
+    // (one segment in segDurMs ms). Frame-rate independent: every
+    // frame we move the walker by the elapsed time, not a per-tick
+    // constant. When a walker is within greet-distance of its next
+    // pauseAt waypoint, it pauses for 1.4s in a wave pose; the nearest
+    // connected robot pad fires a 👋 pulse while it pauses.
+    var _lastTickMs = 0;
+    function tickWalkers(now){
+      if(!_lastTickMs) _lastTickMs = now;
+      var dt = Math.min(64, now - _lastTickMs);  // clamp to avoid huge jumps on tab-switch
+      _lastTickMs = now;
+      for(var wi=0; wi<walkers.length; wi++){
+        var w = walkers[wi];
+        if(now < w.pauseUntil) continue;
+        // Distance per frame for this walker = total path length / (segDurMs / dt) segments.
+        // Convert to world units: distance = w.info.total * (dt / (w.path.length-1) / w.spec.segDurMs)
+        // Simplified: dDistance = w.info.total * dt / ((w.path.length-1) * segDurMs)
+        var stepDist = w.info.total * dt / ((w.path.length - 1) * w.spec.segDurMs);
+        w.distance += stepDist;
+        // Check whether we've crossed a pauseAt point during this tick.
+        // Sample the current and previous position and see if either
+        // got close to the next pending pauseAt waypoint. This is
+        // cheaper than walking the whole polyline and handles fast
+        // frame deltas.
+        for(var pi=0; pi<w.spec.pauseAt.length; pi++){
+          if(pi !== w.nextGreet % w.spec.pauseAt.length) continue;
+          var pp = w.spec.pauseAt[pi];
+          // current and previous world positions
+          var cur  = pathPosAt(w.info, w.distance);
+          var prev = pathPosAt(w.info, w.distance - stepDist);
+          var ca = w.path[cur.seg],  cb = w.path[cur.seg+1]  || w.path[0];
+          var pa = w.path[prev.seg], pb = w.path[prev.seg+1] || w.path[0];
+          var cwx = ca[0] + (cb[0]-ca[0])*cur.t,  cwy = ca[1] + (cb[1]-ca[1])*cur.t;
+          var pwx = pa[0] + (pb[0]-pa[0])*prev.t, pwy = pa[1] + (pb[1]-pa[1])*prev.t;
+          // Closest distance from the line segment prev→cur to the pause point.
+          var dx = cwx - pwx, dy = cwy - pwy;
+          var segLen2 = dx*dx + dy*dy;
+          var t = 0;
+          if(segLen2 > 1e-6){
+            t = ((pp[0]-pwx)*dx + (pp[1]-pwy)*dy) / segLen2;
+            if(t < 0) t = 0; else if(t > 1) t = 1;
+          }
+          var qx = pwx + dx*t, qy = pwy + dy*t;
+          var ddx = qx - pp[0], ddy = qy - pp[1];
+          if(ddx*ddx + ddy*ddy < 0.35*0.35){
+            w.pauseUntil = now + 1400;
+            w.nextGreet++;
+            // pulse the nearest connected robot pad so the interaction is visible
+            var best = null, bd = 4.0;
+            for(var ni=0; ni<nodes.length; ni++){
+              var nd = nodes[ni];
+              if(nd.kind !== 'robot' || !nd.connected) continue;
+              var nx = nd.wx - pp[0], ny = nd.wy - pp[1];
+              var dd = nx*nx + ny*ny;
+              if(dd < bd){ bd = dd; best = nd; }
+            }
+            if(best) pulse(best, '👋');
+            break;
+          }
+        }
+      }
+    }
+    function walkerPos(w){
+      // Decode w.distance (in units of "segments") into a (seg, t) so
+      // callers can project a real world point without re-walking the
+      // path each time. The 'seg' returned is a continuous float, so a
+      // walker mid-stride is at seg=1.6, for example — used by the
+      // depth sort to get a smooth iso-depth from the world point.
+      var path = w.path, info = w.info;
+      var d = ((w.distance % (path.length-1)) + (path.length-1)) % (path.length-1);
+      var segI = Math.floor(d);
+      var segT = d - segI;
+      var a = path[segI], b = path[segI+1] || path[0];
+      return [ a[0] + (b[0]-a[0])*segT, a[1] + (b[1]-a[1])*segT ];
+    }
+    function drawWalker(w, now){
+      var pos = walkerPos(w);
+      var p = iso(pos[0], pos[1]);
+      var z = cam.z;
+      // Direction along the path: average the next 0.5s of motion so the
+      // figure doesn't snap on segment turns.
+      var lookAhead = walkerPos({path:w.path, info:w.info, distance: w.distance + 0.5});
+      var lh = iso(lookAhead[0], lookAhead[1]);
+      var facingRight = (lh.x - p.x) >= 0;
+      // Gait cycle: tied to distance travelled (not wall clock) so the
+      // animation is smooth at any speed. ~1 step per 0.4 world units.
+      var phase = w.distance * 2.4;
+      // Use a cosine for the step so foot-down poses linger briefly at
+      // each extreme — reads as a real walk rather than a sine wobble.
+      var stepC = Math.cos(phase);
+      var stepS = Math.sin(phase);
+      // Bob: only on the up-phase of the step (plant foot + rise).
+      var bob = Math.max(0, stepC) * 1.0 * z;
+      // Body lean: very slight forward lean into the direction of travel.
+      var lean = 0.6 * z;
+      var greeting = now < w.pauseUntil;
+      // Anchor on the ground (shadow), body sits above.
+      var gx = p.x, gy = p.y + 2*z;
+      X.save();
+      if(!facingRight){ X.translate(gx, 0); X.scale(-1, 1); X.translate(-gx, 0); }
+      // shadow ellipse — softens and shrinks while in the air
+      X.fillStyle='rgba(0,0,0,0.28)';
+      X.beginPath(); X.ellipse(gx, gy, (4.6 - bob*0.5)*z, 1.8*z, 0, 0, Math.PI*2); X.fill();
+      // legs (two angled lines from the hip, swinging opposite with cosine)
+      var hipX = gx + lean, hipY = gy - 9*z + bob;
+      var legSpread = 2.6*z;
+      var legSwing = stepC * 3.0*z;
+      X.strokeStyle = w.spec.pants; X.lineWidth = 1.9*z; X.lineCap = 'round';
+      // Back leg (planted)
+      X.beginPath();
+      X.moveTo(hipX - legSpread*0.5, hipY);
+      X.lineTo(hipX - legSpread*0.5 - legSwing, gy);
+      X.stroke();
+      // Front leg (swinging forward)
+      X.beginPath();
+      X.moveTo(hipX + legSpread*0.5, hipY);
+      X.lineTo(hipX + legSpread*0.5 + legSwing, gy);
+      X.stroke();
+      // shoes — small dark caps at the foot so the step reads
+      X.fillStyle = '#1a1410';
+      X.beginPath(); X.ellipse(hipX - legSpread*0.5 - legSwing, gy, 1.1*z, 0.7*z, 0, 0, Math.PI*2); X.fill();
+      X.beginPath(); X.ellipse(hipX + legSpread*0.5 + legSwing, gy, 1.1*z, 0.7*z, 0, 0, Math.PI*2); X.fill();
+      // torso (shirt) — slightly tilted into the lean
+      X.save();
+      X.translate(hipX, hipY - 4*z);
+      X.rotate(lean / 10);
+      X.fillStyle = w.spec.shirt;
+      X.beginPath(); X.roundRect(-3.2*z, -3.6*z, 6.4*z, 7.2*z, 1.6*z); X.fill();
+      // belt
+      X.fillStyle = 'rgba(0,0,0,0.25)';
+      X.fillRect(-3.2*z, 2.4*z, 6.4*z, 0.9*z);
+      X.restore();
+      // arms (opposite-phase to the legs for a natural gait)
+      X.strokeStyle = w.spec.shirt; X.lineWidth = 1.6*z; X.lineCap = 'round';
+      var armSwing = stepC * 1.6*z;
+      if(greeting){
+        // waving arm: raised and gently flicking
+        var flick = Math.sin(now/85) * 1.2*z;
+        X.beginPath();
+        X.moveTo(hipX - 2.8*z, hipY - 6*z);
+        X.lineTo(hipX - 5*z + flick, hipY - 12*z);
+        X.stroke();
+        // resting arm — small bend so it doesn't look stiff
+        X.beginPath();
+        X.moveTo(hipX + 2.8*z, hipY - 6*z);
+        X.lineTo(hipX + 4.4*z, hipY - 1.4*z);
+        X.stroke();
+      } else {
+        X.beginPath();
+        X.moveTo(hipX - 2.8*z, hipY - 6*z);
+        X.lineTo(hipX - 4.2*z - armSwing, hipY - 0.6*z);
+        X.moveTo(hipX + 2.8*z, hipY - 6*z);
+        X.lineTo(hipX + 4.2*z + armSwing, hipY - 0.6*z);
+        X.stroke();
+      }
+      // head (skin tone circle) — slight up/down nod with the step
+      var headY = hipY - 11*z + bob*0.4;
+      X.fillStyle = '#e8c39a';
+      X.beginPath(); X.arc(hipX + lean*0.3, headY, 2.2*z, 0, Math.PI*2); X.fill();
+      // hair cap (slightly different for each walker for visual variety)
+      X.fillStyle = w.idx % 3 === 0 ? '#2a2018' : (w.idx % 3 === 1 ? '#4a2a18' : '#1a1810');
+      X.beginPath(); X.arc(hipX + lean*0.3, headY - 0.9*z, 2.2*z, Math.PI*1.05, Math.PI*1.95); X.fill();
+      // hat / accessory variant for walker 4 & 5 so they read as distinct characters
+      if(w.idx === 4 || w.idx === 5){
+        X.fillStyle = w.idx === 4 ? '#3a4a6a' : '#7a5a2a';
+        X.beginPath(); X.ellipse(hipX + lean*0.3, headY - 1.7*z, 2.6*z, 0.7*z, 0, 0, Math.PI*2); X.fill();
+      }
+      X.restore();
+    }
+
     function frame(){
       if(!running) return;
+      var now = performance.now();
       X.clearRect(0,0,W,H);
       drawGround();
-      // depth-sort palms + nodes so nearer objects overlap farther ones
+      // step the looping walkers along their fixed paths
+      tickWalkers(now);
+      // Re-derive status every frame so the "ended" countdown (a wall-
+      // clock timer) decrements smoothly between telemetry polls (3s).
+      for(var sni=0; sni<nodes.length; sni++){
+        var sn = nodes[sni];
+        if(sn.kind === 'robot'){
+          var st = computeStatus(sn.telemetry, sn);
+          sn.status = st.status;
+          sn.readiness = st.readiness;
+          sn.readinessMessage = st.readinessMessage;
+        }
+      }
+      // depth-sort palms + nodes + walkers so nearer objects overlap farther ones
       var objs=[];
       for(var pi=0;pi<PALMS.length;pi++){ var w=W2(PALMS[pi][0],PALMS[pi][1]); objs.push({wx:w[0],wy:w[1],palm:true}); }
       for(var ni=0;ni<nodes.length;ni++){ objs.push({wx:nodes[ni].wx,wy:nodes[ni].wy,n:nodes[ni]}); }
+      for(var wii=0; wii<walkers.length; wii++){ var wpos=walkerPos(walkers[wii]); objs.push({wx:wpos[0],wy:wpos[1],walker:walkers[wii]}); }
       objs.sort(function(a,b){ return (a.wx+a.wy)-(b.wx+b.wy); });
-      objs.forEach(function(o){ if(o.palm) drawPalm(o.wx,o.wy); else { var n=o.n; if(n.kind==='hub')drawHub(n); else if(n.kind==='robot')drawRobot(n); else drawPeer(n); } });
+      objs.forEach(function(o){
+        if(o.palm) drawPalm(o.wx,o.wy);
+        else if(o.walker) drawWalker(o.walker, now);
+        else { var n=o.n; if(n.kind==='hub')drawHub(n); else if(n.kind==='robot')drawRobot(n); else drawPeer(n); }
+      });
       for(var i=orbs.length-1;i>=0;i--){ var o2=orbs[i]; o2.t+=0.024; if(o2.t>=1){orbs.splice(i,1);continue;}
         var a=iso(o2.a.wx,o2.a.wy), b=iso(o2.b.wx,o2.b.wy), e=o2.t<.5?2*o2.t*o2.t:-1+(4-2*o2.t)*o2.t;
         var x=a.x+(b.x-a.x)*e, y=a.y+(b.y-a.y)*e-Math.sin(o2.t*Math.PI)*40*cam.z;
@@ -1662,7 +4700,7 @@ button.act:disabled{opacity:0.5;cursor:default;}
     // ── robot drawer ──
     function sect(title, inner){ return '<div class="pk-sect"><h4>'+title+'</h4>'+inner+'</div>'; }
     function openDrawer(id){
-      var n=byId[id]; if(!n) return; drawerId=id;
+      var n=byId[id]; if(!n) return; drawerId=id; deviceSelectorsReady=false;
       $('pk-drawer').classList.add('open');
       var av=$('pk-av'), avSrc=avatarSrcForNode(n), avImg=avatarImageForNode(n);
       if(av){
@@ -1687,11 +4725,33 @@ button.act:disabled{opacity:0.5;cursor:default;}
     // enrolled device's id is a generated dev_xxxx, distinct from its name).
     // Falls back to n.name if telemetry hasn't matched a row yet.
     function schedRow(n){
-      var row=roboparkByName[n.name];
-      if(!row){ var keys=n.telemKeys||[]; for(var rk in roboparkByName){ var lk=rk.toLowerCase(); for(var ki=0;ki<keys.length;ki++){ if(keys[ki] && (lk===keys[ki]||lk.indexOf(keys[ki])>-1)){ row=roboparkByName[rk]; break; } } if(row) break; } }
-      return row;
+      var row=roboparkByName[n.name], exact=row, keys=(n.telemKeys||[]).concat([String(n.name||'').toLowerCase()]);
+      var seen={}, candidates=[];
+      for(var rk in roboparkByName){
+        var candidate=roboparkByName[rk], cid=candidate&&(candidate.robot_id||candidate.id);
+        if(!candidate||!cid||seen[cid]) continue;
+        seen[cid]=true;
+        var label=String(candidate.name||'').toLowerCase(), idlabel=String(cid).toLowerCase(), matches=false;
+        for(var ki=0;ki<keys.length;ki++){ var key=String(keys[ki]||'').toLowerCase(); if(key&&(label===key||idlabel===key||label.indexOf(key)>-1||key.indexOf(label)>-1)){ matches=true; break; } }
+        if(matches) candidates.push(candidate);
+      }
+      function readyScore(candidate){
+        var device=schedulerDevicesById[candidate.robot_id||candidate.id]||{}, status=String(candidate.device_status||device.status||'').toLowerCase(), score=0;
+        if(candidate.production_mode===true||device.production_mode===true) score+=1000;
+        if(status==='online'||status==='running'||status==='detecting') score+=500;
+        if(candidate.readiness_code==='ready') score+=250;
+        if(candidate===exact) score+=10;
+        return score;
+      }
+      candidates.sort(function(a,b){ return readyScore(b)-readyScore(a); });
+      return candidates[0]||row;
+    }
+    function schedId(n){
+      var row=schedRow(n); if(row&&(row.id||row.robot_id)) return row.id||row.robot_id;
+      if(n.schedulerRobotId) return n.schedulerRobotId;
+      var byName=schedulerDevicesByName[n.name]; if(byName&&byName.id) return byName.id;
+      return n.name;
     }
-    function schedId(n){ var row=schedRow(n); return (row&&(row.id||row.robot_id))||n.name; }
     function closeDrawer(){
       // tell the scheduler to end any live preview so the robot stops its cam
       if(previewOn && drawerId){ var pn=byId[drawerId]; if(pn){ try{ fetch('/robopark/api/robots/'+encodeURIComponent(schedId(pn))+'/preview/stop'+QS,{method:'POST',keepalive:true}); }catch(e){} } }
@@ -1753,6 +4813,18 @@ button.act:disabled{opacity:0.5;cursor:default;}
       }).catch(function(e){ showOut('set config ('+robotId+'): '+e.message); });
     }
 
+    // Per-robot production mode: PATCHes the device row, then immediately
+    // arms/disarms this robot's continuous motion-triggered loop + always-on
+    // camera feed rather than waiting for the next poll cycle to notice.
+    function setProductionMode(n, on){
+      var device=schedulerDevice(n), id=device&&device.id; if(!id){ showOut('device inventory is not available yet'); return; }
+      rpAction('PATCH','/robopark/api/devices/'+encodeURIComponent(id),{production_mode:!!on}).then(function(){
+        showOut('production mode '+(on?'enabled':'disabled')+' for '+(device.name||id));
+        if(device) device.production_mode=!!on;
+        if(on && !previewOn && !lkRoom) startCam(n);
+        if(!on && previewOn) stopPreview(n);
+      }).catch(function(e){ var pm=$('pk-prodmode'); if(pm) pm.checked=!on; showOut('production mode ('+id+'): '+e.message); });
+    }
     // ── on-demand operator preview: open the robot's cam without a scene-detection session ──
     function updateGoLive(){ var b=$('pk-golive'); if(b){ b.textContent = previewOn?'■ Stop live':'▶ Go live'; b.classList.toggle('danger', previewOn); } }
     function goLive(n){ if(previewOn) stopPreview(n); else startPreview(n); }
@@ -1766,12 +4838,12 @@ button.act:disabled{opacity:0.5;cursor:default;}
         .then(function(info){
           if(!previewOn) return;   // stopped while awaiting
           if(info && info.active===false){ idleCam(info.reason||'idle'); if(note) note.textContent=(info.reason==='production_mode_off'?'production mode is off':'preview unavailable'); previewOn=false; updateGoLive(); return; }
-          if(info && info.url && info.token && window.LivekitClient){ attachLiveKit(info, n); if(note) note.textContent='live preview · robot opening camera…'; }
+          if(info && info.url && info.token && window.LivekitClient){ attachLiveKit(info, n); tryVisionOverlay(n); if(note) note.textContent='live preview · robot opening camera…'; }
           else { idleCam('no-sdk'); }
           if(previewTimer) clearInterval(previewTimer);
           previewTimer=setInterval(function(){ fetch('/robopark/api/robots/'+encodeURIComponent(schedId(n))+'/preview/keepalive'+QS, {method:'POST'}).catch(function(){}); }, 20000);
         })
-        .catch(function(){ idleCam('unreachable'); if(note) note.textContent='scheduler unreachable'; previewOn=false; updateGoLive(); });
+        .catch(function(e){ idleCam('unreachable'); if(note) note.textContent='preview request failed'; if(window.console) console.error('RoboPark preview request failed',e); previewOn=false; updateGoLive(); });
     }
     function stopPreview(n){
       previewOn=false; updateGoLive();
@@ -1784,22 +4856,21 @@ button.act:disabled{opacity:0.5;cursor:default;}
     // RoboVisionAI_PI serves its own MJPEG stream directly (not via LiveKit),
     // so the browser hits the robot's LAN IP straight on, no scheduler proxy.
     // The scheduler learns that IP from the device's own heartbeats.
-    function toggleVision(n){
-      var img=$('pk-vision-img'), note=$('pk-vision-note'), btn=$('pk-vision-toggle');
-      if(visionOn){
-        visionOn=false; if(img){ img.src=''; img.style.display='none'; }
-        if(btn) btn.textContent='🔍 Show overlay';
-        if(note) note.textContent="object/motion detection overlay from the robot's vision server (RoboVisionAI_PI)";
-        return;
+    // LiveKit is the authoritative camera feed. The standalone OpenCV MJPEG
+    // server is opt-in because running it beside preview_agent would open the
+    // same Windows camera twice and make both feeds unreliable.
+    function tryVisionOverlay(n){
+      var img=$('pk-vision-img'); if(!img) return;
+      if(String(window.localStorage.getItem('robopark.visionOverlay')||'').toLowerCase()!=='true'){
+        visionOn=false; img.src=''; img.style.display='none'; return;
       }
-      var row=schedRow(n);
-      var ip=row&&row.lan_ip;
-      if(!ip){ if(note) note.textContent='no known IP for this robot yet — waiting for a heartbeat with lan_ip'; return; }
+      var row=schedRow(n), ip=row&&row.lan_ip;
+      if(!ip){ visionOn=false; img.src=''; img.style.display='none'; return; }
       var port=(row&&row.vision_port)||5000;
       visionOn=true;
-      if(btn) btn.textContent='■ Hide overlay';
-      if(note) note.textContent='streaming from http://'+ip+':'+port+'/video_feed';
-      if(img){ img.src='http://'+ip+':'+port+'/video_feed'; img.style.display='block'; }
+      img.onerror=function(){ visionOn=false; img.style.display='none'; img.src=''; };
+      img.onload=function(){ img.style.display='block'; };
+      img.src='http://'+ip+':'+port+'/video_feed';
     }
     function stopVision(){
       visionOn=false;
@@ -1812,6 +4883,89 @@ button.act:disabled{opacity:0.5;cursor:default;}
         refreshDrawer();
       }).catch(function(){});
     }
+    function schedulerDevice(n){
+      var row=schedRow(n), id=row&&(row.robot_id||row.id);
+      return (id&&schedulerDevicesById[id]) || schedulerDevicesById[n.schedulerRobotId] || schedulerDevicesByName[n.name] || schedulerDevicesById[n.name] || null;
+    }
+    function deviceList(inv, key, fallback){
+      var list=inv&&Array.isArray(inv[key])?inv[key]:[];
+      return list.length?list:fallback.map(function(id){ return {id:id,name:id}; });
+    }
+    function hasRealInventory(inv){ return !!(inv && ((inv.video&&inv.video.length>2) || (inv.audio_input&&inv.audio_input.length>1) || (inv.audio_output&&inv.audio_output.length>1))); }
+    function refreshDeviceSelectors(n){
+      var device=schedulerDevice(n)||{}, inv=device.device_inventory||{};
+      if(hasRealInventory(inv)) deviceSelectorsReady=true;
+      var search=$('pk-device-search'), query=(search&&search.value||'').trim().toLowerCase();
+      var video=deviceList(inv,'video',['auto','none','picamera','/dev/video0','/dev/video1','/dev/video2']);
+      var input=deviceList(inv,'audio_input',['default','none']);
+      var output=deviceList(inv,'audio_output',['default','none']);
+      function fill(id, list, selected){
+        var el=$(id); if(!el) return;
+        el.innerHTML='';
+        list.filter(function(x){ return !query || String(x.name||x.id).toLowerCase().indexOf(query)>-1 || String(x.id).toLowerCase().indexOf(query)>-1; }).forEach(function(x){
+          var o=document.createElement('option'); o.value=String(x.id); o.textContent=String(x.name||x.id); if(String(x.id)===String(selected||'')) o.selected=true; el.appendChild(o);
+        });
+        if(!el.value && selected){ var o=document.createElement('option'); o.value=String(selected); o.textContent=String(selected)+' (saved)'; o.selected=true; el.appendChild(o); }
+      }
+      fill('pk-video-device', video, device.video_device||'auto');
+      fill('pk-audio-input', input, device.audio_device||'default');
+      fill('pk-audio-output', output, device.audio_output_device||'default');
+      var greetings=$('pk-greeting-phrases');
+      if(greetings && document.activeElement!==greetings) greetings.value=(device.greeting_phrases||[]).join(String.fromCharCode(10));
+      var note=$('pk-device-note'); if(note) note.textContent=(device.id?'inventory from '+(device.name||device.id):'waiting for robot heartbeat inventory');
+    }
+    function saveDeviceSelectors(n){
+      var device=schedulerDevice(n), id=device&&device.id; if(!id){ showOut('device inventory is not available yet'); return; }
+      var body={video_device:$('pk-video-device').value, audio_device:$('pk-audio-input').value, audio_output_device:$('pk-audio-output').value,
+        greeting_phrases:($('pk-greeting-phrases').value||'').split(String.fromCharCode(10)).map(function(x){return x.trim();}).filter(Boolean)};
+      rpAction('PATCH','/robopark/api/devices/'+encodeURIComponent(id),body).then(function(){
+        showOut('camera and microphone selection saved for '+(device.name||id));
+      }).catch(function(e){ showOut('device selection: '+e.message); });
+    }
+    function fmtUptime(secs){
+      if(secs==null) return '';
+      secs=Math.round(secs);
+      if(secs<60) return secs+'s';
+      if(secs<3600) return Math.round(secs/60)+'m';
+      return Math.round(secs/3600)+'h';
+    }
+    function restartService(n, svcName, btn){
+      var device=schedulerDevice(n), id=device&&device.id; if(!id){ showOut('device inventory is not available yet'); return; }
+      if(btn){ btn.disabled=true; btn.textContent='queuing…'; }
+      rpAction('POST','/robopark/api/devices/'+encodeURIComponent(id)+'/services/'+encodeURIComponent(svcName)+'/restart',{}).then(function(){
+        showOut('restart queued for '+svcName+' — picked up on the next robot check-in, up to about 10s');
+        if(btn){ btn.textContent='queued'; }
+      }).catch(function(e){
+        showOut('restart ('+svcName+'): '+e.message);
+        if(btn){ btn.disabled=false; btn.textContent='restart'; }
+      });
+    }
+    function refreshSupervisorPanel(n){
+      var list=$('pk-svc-list'), age=$('pk-svc-age'); if(!list) return;
+      var device=schedulerDevice(n);
+      var services=device&&device.supervisor_status;
+      var reportedAt=device&&device.supervisor_status_at;
+      if(!services || !services.length){
+        list.innerHTML='<div class="pk-note">no supervisor report yet — either robot_supervisor.py is not running on this robot, or it has not enrolled (no device_token) yet</div>';
+        if(age) age.textContent='';
+        return;
+      }
+      list.innerHTML=services.map(function(s){
+        var cls=!s.enabled?'disabled':(s.running?'up':'down');
+        var meta=!s.enabled?'disabled'
+          : s.running?('pid '+s.pid+' · up '+fmtUptime(s.uptime_seconds)+(s.failure_count?(' · '+s.failure_count+' restart'+(s.failure_count===1?'':'s')+' so far'):''))
+          : ('down'+(s.last_exit_code!=null?(' · exit '+s.last_exit_code):'')+(s.failure_count?(' · retry #'+s.failure_count):''));
+        var btn=s.enabled?('<button class="rp-btn pk-svc-restart-btn" data-svc="'+esc(s.name)+'">restart</button>'):'';
+        return '<div class="pk-svc-row '+cls+'"><span class="pk-svc-dot"></span><span class="pk-svc-name">'+esc(s.name)+'</span><span class="pk-svc-meta">'+esc(meta)+'</span>'+btn+'</div>';
+      }).join('');
+      if(age){
+        if(reportedAt){
+          var ageSec=(Date.now()-new Date(reportedAt+'Z').getTime())/1000;
+          age.textContent = ageSec>30 ? ('⚠ last report '+fmtUptime(ageSec)+' ago — supervisor may be down') : ('last report '+fmtUptime(ageSec)+' ago');
+          age.style.color = ageSec>30 ? 'var(--bad)' : '';
+        } else { age.textContent=''; }
+      }
+    }
     function buildDrawer(n){
       var b=$('pk-body');
       if(n.kind==='robot' && !n.connected){
@@ -1841,7 +4995,7 @@ button.act:disabled{opacity:0.5;cursor:default;}
           + '<div class="rp-field"><label>Voice stack override</label><select id="pk-setup-voice"><option value="">— from character preset —</option>'+voiceOptions+'</select></div>'
           + '</div></details>'
           + '</div>'
-          + '<div class="pk-sect" id="pk-setup-result" style="display:none;"><h4>Enrollment token (copy once)</h4><input id="pk-setup-token" class="rp-char" readonly style="margin-bottom:0.4rem;"><button class="rp-btn" id="pk-setup-copy">Copy</button></div>');
+          + '<div class="pk-sect" id="pk-setup-result" style="display:none;"><h4>Enrollment token (copy once)</h4><input id="pk-setup-token" readonly style="margin-bottom:0.4rem;"><button class="rp-btn" id="pk-setup-copy">Copy</button></div>');
         var setupBtn=$('pk-setup-btn'); if(setupBtn) setupBtn.addEventListener('click', function(){ submitPadSetup(n); });
         var copyBtn=$('pk-setup-copy'); if(copyBtn) copyBtn.addEventListener('click', function(){ var t=$('pk-setup-token'); if(t){ t.select(); try{document.execCommand('copy');}catch(e){} showOut('token copied'); } });
         function refreshPadCliCommand(){
@@ -1858,26 +5012,38 @@ button.act:disabled{opacity:0.5;cursor:default;}
         var effPresetOptions='', effVoiceOptions='';
         for(var ci=0;ci<characterPresets.length;ci++){ var cp=characterPresets[ci]; effPresetOptions += '<option value="'+esc(cp.id||'')+'"'+((cp.id===n.id)?' selected':'')+'>'+esc(cp.name||cp.id||'')+'</option>'; }
         for(var vi=0;vi<voiceStacks.length;vi++){ var vs=voiceStacks[vi]; effVoiceOptions += '<option value="'+esc(vs.id||'')+'">'+esc(vs.name||vs.id||'')+'</option>'; }
+        var devForPm=schedulerDevice(n)||{};
         b.innerHTML =
           sect('👁 camera feed',
             '<div class="pk-cam" id="pk-cam"><canvas id="pk-camcv" width="384" height="216"></canvas>'
+            +'<img id="pk-vision-img" style="width:100%;height:100%;object-fit:cover;position:absolute;inset:0;display:none;border-radius:inherit" alt="vision feed"/>'
             +'<div class="hud"><div class="rec"><i></i>REC · '+esc(n.name)+'</div><div class="tr" id="pk-camres">— · —</div><div class="br" id="pk-camts">--:--:--</div></div></div>'
-            +'<div class="pk-note" id="pk-camnote">seeking LiveKit track…</div>'
-            +'<div class="pk-ctl" style="margin-top:0.5rem"><button class="rp-btn" id="pk-golive" data-robot="'+esc(n.name)+'">▶ Go live</button><span class="pk-note" id="pk-golivenote" style="margin:0"></span></div>')
-        + sect('🔍 vision overlay',
-            '<div class="pk-cam" id="pk-vision-wrap"><img id="pk-vision-img" style="width:100%;display:none;border-radius:inherit" alt="vision feed"/></div>'
-            +'<div class="pk-note" id="pk-vision-note">object/motion detection overlay from the robot vision server (RoboVisionAI_PI)</div>'
-            +'<div class="pk-ctl" style="margin-top:0.5rem"><button class="rp-btn" id="pk-vision-toggle">🔍 Show overlay</button></div>')
+            +'<div class="pk-note" id="pk-camnote">seeking live feed…</div>'
+            +'<div class="pk-ctl" style="margin-top:0.5rem"><button class="rp-btn" id="pk-golive" data-robot="'+esc(n.name)+'">▶ Go live</button><span class="pk-note" id="pk-golivenote" style="margin:0"></span></div>'
+            +'<label class="pk-prodtoggle"><input type="checkbox" id="pk-prodmode"'+(devForPm.production_mode?' checked':'')+'><span>Production mode — continuous motion-triggered loop, camera always live</span></label>')
         + sect('🎙 microphone','<div class="pk-meter"><span class="lab">input</span><div class="pk-bars" id="pk-micbars"></div><span class="pk-val" id="pk-micval">—</span></div><div class="pk-note" id="pk-micstate">awaiting robot audio plugin</div>')
         + sect('🔊 speaker','<canvas class="pk-wave" id="pk-spkwave" width="360" height="32"></canvas><div class="pk-meter"><span class="lab">output</span><div class="pk-bars" id="pk-spkbars"></div><span class="pk-val" id="pk-spkval">—</span></div><div class="pk-note" id="pk-spkstate">awaiting robot audio plugin</div>')
         + sect('📊 hardware','<div class="pk-hwgrid"><div><div class="l">load</div><div class="track"><div class="fill" id="pk-hw-load"></div></div></div><div><div class="l">status</div><div class="track"><div class="fill" id="pk-hw-conn" style="background:'+(n.connected?'var(--ok)':'var(--muted)')+'"></div></div></div></div><div class="pk-note">remote node — full CPU/mem telemetry shows on the node itself</div>')
         + sect('🗓 session telemetry','<div class="pk-grid2"><div class="pk-kv"><div class="v" id="pk-tv-trig">—</div><div class="l">triggers</div></div><div class="pk-kv"><div class="v" id="pk-tv-sess">—</div><div class="l">sessions</div></div><div class="pk-kv"><div class="v" id="pk-tv-lat">—</div><div class="l">avg latency</div></div><div class="pk-kv"><div class="v" id="pk-tv-drop">—</div><div class="l">drop rate</div></div></div>')
         + sect('⚙ controls','<div class="pk-ctl"><button class="rp-btn danger" id="pk-end" data-robot="'+esc(n.name)+'">End session</button><button class="rp-btn" id="pk-follow">Follow run</button></div><div class="pk-note">end-session is live via the scheduler; cam/mic/speaker fill in as the robot plugin publishes them</div>')
+        + sect('🩺 robot services','<div id="pk-svc-list" class="pk-svc-list"><div class="pk-note">waiting for supervisor report…</div></div><div class="pk-note" id="pk-svc-age" style="margin-top:0.35rem;"></div><div class="rp-field" style="margin-top:0.55rem;"><label>Quick run (on the robot, from packages/robopark/scheduler)</label><input id="pk-svc-clicmd" readonly value="python robot_supervisor.py"></div><button class="rp-btn" id="pk-svc-clicmd-copy" style="margin-top:0.35rem;">📋 Copy command</button>')
         + sect('🎭 character / voice','<div class="pk-note" id="pk-eff-note" style="margin-bottom:0.45rem;">loading effective config…</div><div class="rp-field"><label>Character preset</label><select class="rp-char" id="pk-eff-char" data-robot="'+esc(schedId(n))+'">'+effPresetOptions+'</select></div><div class="rp-field"><label>Voice stack</label><select class="rp-voice" id="pk-eff-voice" data-robot="'+esc(schedId(n))+'">'+effVoiceOptions+'</select></div><button class="rp-btn" id="pk-eff-save" data-robot="'+esc(schedId(n))+'" style="margin-top:0.35rem;">Set up on this robot</button>');
-        startCam(n); startMeters(n); loadEffectiveConfig(schedId(n));
+         b.innerHTML += sect('Camera + audio devices','<div class="rp-field"><label>Search devices</label><input id="pk-device-search" placeholder="camera, USB, microphone, HDMI..." autocomplete="off"></div><div class="rp-field"><label>Camera input</label><select id="pk-video-device"></select></div><div class="rp-field"><label>Microphone input</label><select id="pk-audio-input"></select></div><div class="rp-field"><label>Speaker / output inventory</label><select id="pk-audio-output"></select></div><div class="rp-field"><label>Preset greeting phrases <span class="pk-note">one per line, cached per voice</span></label><textarea id="pk-greeting-phrases" rows="3" placeholder="Hi, I am Jaguar! / Welcome to RoboPark."></textarea></div><button class="rp-btn" id="pk-device-save" style="margin-top:0.35rem">Save device selection + greetings</button><div class="pk-note" id="pk-device-note">waiting for robot heartbeat inventory</div>');
+         refreshDeviceSelectors(n);
+         b.innerHTML += '<div class="pk-ctl" style="margin-top:0.5rem"><button class="rp-btn danger" id="pk-recover" data-robot="'+esc(n.name)+'">Recover robot</button><span class="pk-note" style="margin:0">clears stale sessions and queued triggers for this robot</span></div>';
+         var deviceSearch=$('pk-device-search'); if(deviceSearch) deviceSearch.addEventListener('input', function(){ refreshDeviceSelectors(n); });
+         var deviceSave=$('pk-device-save'); if(deviceSave) deviceSave.addEventListener('click', function(){ saveDeviceSelectors(n); });
+         startCam(n); startMeters(n); loadEffectiveConfig(schedId(n)); refreshSupervisorPanel(n);
         var gl=$('pk-golive'); if(gl) gl.addEventListener('click', function(){ if(rpReadOnly){ showOut('read-only node'); return; } goLive(n); });
-        var vt=$('pk-vision-toggle'); if(vt) vt.addEventListener('click', function(){ toggleVision(n); });
+        var pm=$('pk-prodmode'); if(pm) pm.addEventListener('change', function(){ if(rpReadOnly){ pm.checked=!pm.checked; showOut('read-only node'); return; } setProductionMode(n, pm.checked); });
+        var svcCopy=$('pk-svc-clicmd-copy'); if(svcCopy) svcCopy.addEventListener('click', function(){ var i=$('pk-svc-clicmd'); i.select(); try{document.execCommand('copy');}catch(e){} showOut('command copied — run it on the robot itself'); });
+        var svcList=$('pk-svc-list'); if(svcList) svcList.addEventListener('click', function(ev){
+          var btn=ev.target.closest('.pk-svc-restart-btn'); if(!btn) return;
+          if(rpReadOnly){ showOut('read-only node'); return; }
+          restartService(n, btn.dataset.svc, btn);
+        });
         var eb=$('pk-end'); if(eb) eb.addEventListener('click', function(){ if(rpReadOnly){ showOut('read-only node'); return; } endSession(schedId(n)); });
+        var rb=$('pk-recover'); if(rb) rb.addEventListener('click', function(){ if(rpReadOnly){ showOut('read-only node'); return; } recoverRobot(schedId(n)); });
         var fb=$('pk-follow'); if(fb) fb.addEventListener('click', function(){ selectTab('fleet'); $('cmdInput').value='/follow'; selectNode(n.id,n.name); showOut('type a runId after /follow, or run /status on '+n.name); });
       } else {
         b.innerHTML =
@@ -1890,16 +5056,31 @@ button.act:disabled{opacity:0.5;cursor:default;}
     }
     function refreshDrawer(){
       var n=drawerId?byId[drawerId]:null; if(!n) return;
+      if(n.kind==='robot' && !deviceSelectorsReady && $('pk-video-device')){
+        var devCheck=schedulerDevice(n);
+        if(devCheck && hasRealInventory(devCheck.device_inventory)) refreshDeviceSelectors(n);
+      }
+      if(n.kind==='robot' && $('pk-cam')){
+        var camDev=schedulerDevice(n);
+        // Self-heal: a production-mode robot's feed should never sit idle for
+        // long — if it's not currently live (no session, no preview running),
+        // re-arm it. Also keep retrying the opencv vision overlay in case the
+        // robot's lan_ip only became known after this panel was first drawn.
+        if(camDev && camDev.production_mode && !previewOn && !lkRoom) startCam(n);
+        if(!visionOn && lkRoom) tryVisionOverlay(n);
+      }
+      if(n.kind==='robot' && $('pk-svc-list')) refreshSupervisorPanel(n);
       setFill('pk-hw-load', n.load); setFill('pk-tv-load', null);
       var lv=$('pk-tv-load'); if(lv) lv.textContent=Math.round(n.load)+'%';
       var hc=$('pk-hw-conn'); if(hc) hc.style.width=n.connected?'100%':'12%';
       var row=schedRow(n);
+      var ready=$('pk-readiness'); if(ready && row){ ready.textContent=(row.readiness_code||'unknown').replace(/_/g,' ')+' / '+(row.readiness_message||'no readiness detail'); ready.style.color=(row.readiness_code==='ready'||row.readiness_code==='in_session')?'var(--ok)':'var(--bad)'; }
       if(row){
         set('pk-tv-trig', row.trigger_count!=null?row.trigger_count:0);
         set('pk-tv-sess', row.sessions_total!=null?row.sessions_total:0);
         set('pk-tv-lat', row.avg_latency_ms!=null?Math.round(row.avg_latency_ms)+'ms':'—');
         var dEl=$('pk-tv-drop'); if(dEl){ var d=row.drop_rate!=null?Math.round(row.drop_rate*100):null; dEl.textContent=d!=null?d+'%':'—'; dEl.className='v '+(d>=20?'bad':d>=5?'warn':'ok'); }
-        var active=row.active_session||row.in_session||row.session_active;
+        var active=row.active_session||row.in_session||row.session_active||row.current_session_id||row.status==='connecting'||row.status==='running';
         var st=$('pk-state'); if(st){ st.textContent=active?'in session':(n.connected?'live':'idle'); st.className='pk-pill '+(active?'live':(n.connected?'live':'idle')); }
       }
     }
@@ -1916,9 +5097,18 @@ button.act:disabled{opacity:0.5;cursor:default;}
       fetch('/robopark/api/robots/'+encodeURIComponent(schedId(n))+'/stream'+QS, {cache:'no-store', signal:camAbort?camAbort.signal:undefined})
         .then(function(r){ return r.json().catch(function(){ throw new Error('bad response'); }); })
         .then(function(info){
-          if(info && info.active===false){ idleCam(info.reason||'idle'); return; }
+          if(info && info.active===false){
+            // No real session running. If this robot is in production mode,
+            // keep its camera live via the same on-demand preview path "Go
+            // live" uses, instead of showing an idle placeholder — production
+            // mode means the feed should always be visible.
+            // Production mode leaves the idle camera with the robot's motion
+            // detector. Operator preview is started explicitly with Go live.
+            idleCam(info.reason||'idle');
+            return;
+          }
           if(info && info.url && info.token){
-            if(window.LivekitClient){ attachLiveKit(info, n); }
+            if(window.LivekitClient){ attachLiveKit(info, n); tryVisionOverlay(n); }
             else { idleCam('no-sdk'); }
           } else { idleCam('idle'); }
         })
@@ -1939,11 +5129,25 @@ button.act:disabled{opacity:0.5;cursor:default;}
             var el=track.attach(); el.setAttribute('playsinline',''); el.muted=true; el.autoplay=true;
             var cv=$('pk-camcv'); if(cv&&cv.parentNode) cv.parentNode.replaceChild(el, cv);
             if(res) res.textContent='LIVE'; if(note) note.textContent='live camera via LiveKit · '+esc(info.room);
-          } else if(track.kind==='audio'){ hookMicAnalyser(track); track.attach(); }
+          } else if(track.kind==='audio'){
+            hookMicAnalyser(track);
+            // Muted by default: this is the camera-preview panel, running on
+            // the SAME physical device as the robot in local testing. Auto-
+            // playing the subscribed track (robot mic, or later the agent's
+            // TTS) through the browser's speakers next to the robot's own
+            // mic closes an acoustic feedback loop — heard as a nonstop echo
+            // that drowns out the actual conversation. The VU meter above
+            // (hookMicAnalyser) taps the raw track directly and works fine
+            // muted.
+            var audio=track.attach(); audio.autoplay=true; audio.controls=false; audio.muted=true; audio.style.display='none'; document.body.appendChild(audio); lkAudioEls.push(audio);
+            audio.play().catch(function(){});
+          }
         });
         lkRoom.on(LK.RoomEvent.Disconnected, function(){ micAnalyser=null; if(note) note.textContent='session ended'; if(res) res.textContent='—'; });
-        lkRoom.connect(info.url, info.token).then(function(){ if(note) note.textContent='connected · waiting for camera track…'; })
-          .catch(function(){ idleCam('unreachable'); });
+        var livekitUrl=info.url;
+        if((location.hostname==='localhost'||location.hostname==='127.0.0.1') && /^ws:\\/\\/localhost(?::|\\/)/i.test(livekitUrl)) livekitUrl=livekitUrl.replace(/^ws:\\/\\/localhost/i,'ws://127.0.0.1');
+        lkRoom.connect(livekitUrl, info.token).then(function(){ if(note) note.textContent='connected · waiting for camera track…'; })
+          .catch(function(e){ idleCam('unreachable'); if(note) note.textContent='LiveKit connection failed'; if(window.console) console.error('RoboPark LiveKit connection failed',e); });
       }catch(e){ idleCam('no-sdk'); }
     }
     // Real mic level: tap the robot's subscribed 'mic' audio track with a Web
@@ -1951,7 +5155,7 @@ button.act:disabled{opacity:0.5;cursor:default;}
     function hookMicAnalyser(track){
       try{
         var AC=window.AudioContext||window.webkitAudioContext; if(!AC) return;
-        audioCtx=audioCtx||new AC();
+        audioCtx=audioCtx||new AC(); if(audioCtx.state==='suspended') audioCtx.resume().catch(function(){});
         var ms=track.mediaStreamTrack; if(!ms) return;
         var src=audioCtx.createMediaStreamSource(new MediaStream([ms]));
         var an=audioCtx.createAnalyser(); an.fftSize=256; src.connect(an); micAnalyser=an;
@@ -2004,13 +5208,18 @@ button.act:disabled{opacity:0.5;cursor:default;}
     }
 
     $('pk-close') && $('pk-close').addEventListener('click', closeDrawer);
-    return { onStatus:onStatus, activate:activate, deactivate:deactivate, refreshDrawer:refreshDrawer, openDrawerForRobot:openDrawerForRobot, updateSlots:updateSlots };
+    return { onStatus:onStatus, activate:activate, deactivate:deactivate, refreshDrawer:refreshDrawer, openDrawerForRobot:openDrawerForRobot, updateSlots:updateSlots, updateTelemetry:updateTelemetry };
   })();
 
   poll();
   setInterval(poll, 2000);
   setInterval(function(){ if (activeTab==='robopark') pollRobopark(); }, 3000);
   setInterval(loadParkSlots, 7000);
+  // Pre-load character presets and voice stacks on startup so the Park
+  // robot-detail drawer has populated dropdowns even if the user never visits the robopark tab.
+  loadCharacterPresets();
+  loadVoiceStacks();
+  setInterval(function(){ loadCharacterPresets(); loadVoiceStacks(); }, 12000);
   initTab();
 })();
 </script>