Spaces:

jackofweb3
/

agentfeed

Running

File size: 76,709 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reachy Mini + 0G</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
/* ═══════════════════════════════════════════════════════════
   REACHY MINI + 0G  —  Light + 0G Purple
   Off-white surfaces / purple accent
   ═══════════════════════════════════════════════════════════ */

:root {
  --surface: #F8F7F4;
  --ink: #FFFFFF;
  --panel: #FFFFFF;
  --panel-elevated: #F3F2EF;
  --accent: #9200E1;
  --accent-dim: rgba(146, 0, 225, 0.08);
  --accent-glow: rgba(146, 0, 225, 0.2);
  --accent-light: #F3E8FF;
  --text-primary: #1A1A1F;
  --text-secondary: #6B6B76;
  --text-muted: #A0A0AB;
  --border: rgba(0, 0, 0, 0.07);
  --border-light: rgba(0, 0, 0, 0.05);
  --user-bubble: #9200E1;
  --bot-bubble: #F3F2EF;
  --danger: #F43F5E;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }

body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--text-primary);
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Subtle grain ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.35;
}

/* ═══ LAYOUT ═══ */
.app-shell {
  display: grid;
  grid-template-columns: 1fr 380px;
  grid-template-rows: auto 1fr;
  height: 100vh;
  opacity: 0;
  animation: shellIn 0.8s var(--ease-out) 0.1s forwards;
}

@keyframes shellIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══ TOP BAR ═══ */
.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  z-index: 10;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-brand svg {
  width: 22px;
  height: 22px;
  color: var(--accent);
}

.topbar-brand h1 {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.topbar-brand span {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--accent);
  padding: 3px 9px;
  background: var(--accent-light);
  border-radius: 5px;
  letter-spacing: 0.04em;
  font-weight: 500;
}

#status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: all 0.4s var(--ease-out);
}

#status.connected { color: #16a34a; }
#status.connected::before {
  background: #16a34a;
  box-shadow: 0 0 8px rgba(22,163,74,0.3);
  animation: pulse 2.4s ease-in-out infinite;
}

#status.error { color: var(--danger); }
#status.error::before { background: var(--danger); box-shadow: 0 0 8px rgba(244,63,94,0.3); }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

/* ═══ VIEWPORT (3D sim / video) ═══ */
.viewport {
  position: relative;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#sim-container {
  flex: 1;
  min-height: 0;
}

/* ── Motion controls bar ── */
.motion-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  background: var(--panel);
  border-top: 1px solid var(--border);
}

.motion-bar-label {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-right: 8px;
  flex-shrink: 0;
}

.motion-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  white-space: nowrap;
}

.motion-btn:hover {
  background: var(--accent-light);
  border-color: rgba(146, 0, 225, 0.25);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 12px rgba(146, 0, 225, 0.1);
}

.motion-btn:active {
  transform: translateY(0);
  background: rgba(146, 0, 225, 0.12);
}

.motion-btn svg { width: 13px; height: 13px; opacity: 0.6; }

/* ═══ CONVERSATION PANEL ═══ */
.conversation {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-left: 1px solid var(--border);
  overflow: hidden;
}

.conv-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.conv-header-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.7;
}

.conv-header h2 {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

/* ── Messages ── */
#transcript {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
}

#transcript::-webkit-scrollbar { width: 5px; }
#transcript::-webkit-scrollbar-track { background: transparent; }
#transcript::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.08); border-radius: 10px; }

.msg {
  max-width: 88%;
  padding: 10px 15px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  line-height: 1.55;
  word-break: break-word;
  animation: msgIn 0.35s var(--ease-spring) both;
}

@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.msg.user {
  align-self: flex-end;
  background: var(--user-bubble);
  color: #FFFFFF;
  border-bottom-right-radius: 4px;
}

.msg.bot {
  align-self: flex-start;
  background: var(--bot-bubble);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
}

.msg.system {
  align-self: center;
  background: transparent;
  color: var(--text-muted);
  font-size: 11.5px;
  font-style: italic;
  padding: 4px 0;
}

/* ── Input area ── */
.input-area {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  background: var(--panel-elevated);
}

.input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 4px 4px 4px 16px;
  transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.input-row:focus-within {
  border-color: rgba(146, 0, 225, 0.35);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

#chat-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 8px 0;
  min-width: 0;
}

#chat-input::placeholder { color: var(--text-muted); }

#mic-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--panel-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  flex-shrink: 0;
}

#mic-btn:hover { background: rgba(0, 0, 0, 0.08); color: var(--text-primary); }

/* ── Recording row ── */
.rec-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--danger);
  border: 1px solid var(--danger);
  border-radius: var(--radius-lg);
  padding: 6px 6px 6px 16px;
  animation: recRowIn 0.3s var(--ease-spring);
}

@keyframes recRowIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.rec-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  animation: recBlink 1s ease-in-out infinite;
}

@keyframes recBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.rec-timer {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: white;
  min-width: 32px;
}

#rec-waveform {
  flex: 1;
  height: 32px;
  min-width: 0;
  opacity: 0.7;
}

.rec-stop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: white;
  color: var(--danger);
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  flex-shrink: 0;
}

.rec-stop:hover { transform: scale(1.08); }
.rec-stop:active { transform: scale(0.95); }

#send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  flex-shrink: 0;
}

#send-btn:hover { transform: scale(1.06); box-shadow: 0 0 14px var(--accent-glow); }
#send-btn:active { transform: scale(0.96); }
#send-btn:disabled { opacity: 0.3; cursor: default; transform: none; box-shadow: none; }

#send-btn svg { width: 16px; height: 16px; }

/* ═══ SETUP OVERLAY ═══ */
#setup {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(40px) saturate(1.4);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  animation: overlayIn 0.5s var(--ease-out);
}

#setup.hidden {
  display: none;
}

@keyframes overlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.setup-card {
  width: 90%;
  max-width: 440px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 40px 36px 36px;
  animation: cardIn 0.6s var(--ease-spring) 0.15s both;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}

.setup-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 40px;
  right: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.5;
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.setup-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--accent-dim);
  margin-bottom: 20px;
}

.setup-icon svg { width: 24px; height: 24px; color: var(--accent); }

.setup-card h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.setup-card .setup-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 28px;
}

.setup-card .setup-subtitle a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.setup-card .setup-subtitle a:hover { border-bottom-color: var(--accent); }

.field-group { margin-bottom: 16px; }

.field-group label {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.field-group input,
.field-group select {
  width: 100%;
  padding: 11px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
  -webkit-appearance: none;
}

.field-group input:focus,
.field-group select:focus {
  border-color: rgba(146, 0, 225, 0.45);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.field-group input::placeholder { color: var(--text-muted); font-family: var(--font-mono); }

.field-group .field-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
}

.field-group select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B6B76' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
.field-group select option { background: var(--panel); color: var(--text-primary); }

/* Collapsible advanced fields */
.advanced-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
  cursor: pointer;
  margin: 16px 0 12px;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-body);
  transition: color 0.2s;
}

.advanced-toggle:hover { color: var(--text-secondary); }
.advanced-toggle svg { width: 12px; height: 12px; transition: transform 0.25s var(--ease-out); }
.advanced-toggle.open svg { transform: rotate(90deg); }
.advanced-fields { display: none; }
.advanced-fields.open { display: block; }

.setup-start {
  width: 100%;
  padding: 14px;
  margin-top: 24px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: var(--accent);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  letter-spacing: -0.01em;
}

.setup-start:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px var(--accent-glow);
}

.setup-start:active { transform: translateY(0); }

#cfg-err {
  color: var(--danger);
  font-size: 12px;
  margin-top: 10px;
  display: none;
  line-height: 1.4;
}

/* ── Powered-by footer ── */
.powered-by {
  padding: 8px 20px;
  font-size: 10.5px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 0.02em;
  display: none;
}

.powered-by.visible { display: block; }

/* ═══ HIDDEN ELEMENTS ═══ */
#remoteVideo { display: none; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 800px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 240px 1fr;
  }
  .viewport { min-height: 0; }
  .conversation { border-left: none; border-top: 1px solid var(--border); }
  .motion-bar { overflow-x: auto; }
}
</style>
</head>
<body>

<!-- ═══ SETUP OVERLAY ═══ -->
<div id="setup">
  <div class="setup-card">
    <div class="setup-icon">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M12 2a4 4 0 0 1 4 4v2H8V6a4 4 0 0 1 4-4Z"/>
        <rect x="4" y="8" width="16" height="12" rx="3"/>
        <circle cx="9" cy="14" r="1.5" fill="currentColor"/>
        <circle cx="15" cy="14" r="1.5" fill="currentColor"/>
      </svg>
    </div>
    <h2>Connect to 0G</h2>
    <p class="setup-subtitle">Paste your 0G API key to start chatting with Reachy. Get one from <a href="https://pc.0g.ai" target="_blank">pc.0g.ai</a></p>

    <div class="field-group">
      <label>API Key</label>
      <input id="cfg-chat-key" type="password" placeholder="app-sk-..." spellcheck="false" />
      <div class="field-hint">From <code>0g-compute-cli inference get-secret --provider &lt;ADDR&gt;</code></div>
    </div>

    <div class="field-group">
      <label>Model</label>
      <select id="cfg-model" onchange="syncEndpoint()">
        <option value="zai-org/GLM-5-FP8" data-endpoint="https://compute-network-1.integratenetwork.work">GLM-5 FP8</option>
        <option value="deepseek/deepseek-chat-v3-0324" data-endpoint="https://compute-network-1.integratenetwork.work">DeepSeek Chat v3</option>
        <option value="qwen3.6-plus" data-endpoint="https://compute-network-1.integratenetwork.work">Qwen 3.6 Plus</option>
        <option value="custom">Custom model...</option>
      </select>
    </div>

    <div class="field-group">
      <label>Robot</label>
      <select id="cfg-robot">
        <option value="sim">3D Simulator</option>
        <option value="live">Live Robot (WebRTC)</option>
      </select>
    </div>

    <div class="field-group">
      <label>AgentFeed identity</label>
      <select id="cfg-agent">
        <option value="">Default Reachy (no AgentFeed)</option>
      </select>
      <div class="field-hint">Pick an on-chain agent to embody. Personality + system prompt loads from AgentFeed.</div>
    </div>

    <button class="advanced-toggle" type="button" onclick="this.classList.toggle('open'); document.getElementById('adv-fields').classList.toggle('open');">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M9 6l6 6-6 6"/></svg>
      Advanced settings
    </button>

    <div id="adv-fields" class="advanced-fields">
      <div class="field-group" id="custom-model-group" style="display:none;">
        <label>Custom Model ID</label>
        <input id="cfg-custom-model" placeholder="org/model-name" />
      </div>
      <div class="field-group">
        <label>Chat Endpoint</label>
        <select id="cfg-chat-url" onchange="syncMode()">
          <option value="https://compute-network-1.integratenetwork.work/v1/proxy/chat/completions" data-mode="direct">compute-network-1 (GLM, DeepSeek, Qwen)</option>
          <option value="https://compute-network-2.integratenetwork.work/v1/proxy/chat/completions" data-mode="direct">compute-network-2</option>
          <option value="https://compute-network-3.integratenetwork.work/v1/proxy/chat/completions" data-mode="direct">compute-network-3</option>
        </select>
        <div class="field-hint">Check your provider's network on <a href="https://pc.0g.ai" target="_blank">pc.0g.ai</a></div>
      </div>
      <div class="field-group">
        <label>AgentFeed URL</label>
        <input id="cfg-agentfeed-url" placeholder="https://0-gx-frontend.vercel.app" value="https://0-gx-frontend.vercel.app" spellcheck="false" />
        <div class="field-hint">Where your AgentFeed dev server is running.</div>
      </div>
      <div class="field-group">
        <label>Voice Input</label>
        <select id="cfg-stt-provider" onchange="syncSTT()">
          <option value="none">Disabled</option>
          <option value="separate">Separate Whisper key</option>
        </select>
      </div>
      <div class="field-group stt-fields" style="display:none;">
        <label>Whisper Key</label>
        <input id="cfg-stt-key" type="password" placeholder="app-sk-..." />
        <div class="field-hint">Only needed in Direct mode — Router uses the same key</div>
      </div>
      <div class="field-group">
        <label>Whisper Endpoint</label>
        <select id="cfg-stt-url">
          <option value="https://compute-network-16.integratenetwork.work/v1/proxy/audio/transcriptions">compute-network-16 (Whisper)</option>
        </select>
      </div>
    </div>

    <div id="cfg-err"></div>
    <button class="setup-start" onclick="startApp()">Start Session</button>
  </div>
</div>

<!-- ═══ APP SHELL ═══ -->
<div class="app-shell">

  <!-- Top bar -->
  <div class="topbar">
    <div class="topbar-brand">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M12 2a4 4 0 0 1 4 4v2H8V6a4 4 0 0 1 4-4Z"/>
        <rect x="4" y="8" width="16" height="12" rx="3"/>
        <circle cx="9" cy="14" r="1.5" fill="currentColor"/>
        <circle cx="15" cy="14" r="1.5" fill="currentColor"/>
      </svg>
      <h1>Reachy Mini</h1>
      <span>0G COMPUTE</span>
    </div>
    <div id="agent-identity" style="display:none; align-items:center; gap:8px; padding:6px 6px 6px 12px; border-radius:9999px; background:rgba(146,0,225,0.12); border:1px solid rgba(146,0,225,0.4); font-size:12px;">
      <img id="agent-identity-avatar" width="22" height="22" style="border-radius:50%;" alt="" />
      <span id="agent-identity-name" style="font-weight:600; color:#e3c1ff;"></span>
      <span id="agent-identity-tag" style="opacity:0.7; font-size:10px; text-transform:uppercase; letter-spacing:0.1em;"></span>
      <select id="topbar-agent-switch" title="Switch agent" style="background:transparent; border:1px solid rgba(146,0,225,0.5); color:#e3c1ff; font-size:11px; padding:2px 4px; border-radius:9999px; cursor:pointer;">
        <option value="">switch...</option>
      </select>
    </div>
    <div id="status">offline</div>
  </div>

  <!-- 3D Viewport -->
  <div class="viewport">
    <div id="sim-container"></div>
    <div class="motion-bar">
      <span class="motion-bar-label">Actions</span>
      <button class="motion-btn" onclick="doWave()">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 11V4a2 2 0 0 1 4 0v3m0 0V3a2 2 0 0 1 4 0v4m0 0V5a2 2 0 0 1 4 0v7"/></svg>
        Wave
      </button>
      <button class="motion-btn" onclick="doNod()">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14m0-14l-4 4m4-4l4 4"/></svg>
        Nod
      </button>
      <button class="motion-btn" onclick="doShake()">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M5 12l4-4m-4 4l4 4m10-4l-4-4m4 4l-4 4"/></svg>
        Shake
      </button>
      <button class="motion-btn" onclick="doDance()">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13M9 18a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm12-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>
        Dance
      </button>
      <button class="motion-btn" onclick="doSleep()">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79Z"/></svg>
        Sleep
      </button>
      <button class="motion-btn" onclick="doWake()">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2m0 18v2m11-11h-2M3 12H1m16.95-6.95-1.41 1.41M6.46 17.54l-1.41 1.41m12.9 0-1.41-1.41M6.46 6.46 5.05 5.05"/></svg>
        Wake
      </button>
    </div>
  </div>

  <!-- Conversation panel -->
  <div class="conversation">
    <div class="conv-header">
      <div class="conv-header-dot"></div>
      <h2>Conversation</h2>
    </div>

    <div id="transcript"></div>

    <div class="input-area">
      <!-- Default: text input -->
      <div class="input-row" id="input-default">
        <input id="chat-input" placeholder="Talk to Reachy..." autocomplete="off" />
        <button id="mic-btn" title="Tap to record">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <rect x="9" y="2" width="6" height="11" rx="3"/>
            <path d="M5 10a7 7 0 0 0 14 0"/>
            <line x1="12" y1="17" x2="12" y2="21"/>
          </svg>
        </button>
        <button id="send-btn" onclick="sendMessage()">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M5 12h14m-6-6 6 6-6 6"/>
          </svg>
        </button>
      </div>
      <!-- Recording state: replaces input row while recording -->
      <div class="rec-row" id="input-recording" style="display:none;">
        <div class="rec-info">
          <span class="rec-dot"></span>
          <span class="rec-timer" id="rec-timer">0:00</span>
        </div>
        <canvas id="rec-waveform" height="32"></canvas>
        <button class="rec-stop" id="rec-stop-btn" title="Send recording">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M5 12h14m-6-6 6 6-6 6"/>
          </svg>
        </button>
      </div>
      <div id="powered-by" class="powered-by"></div>
    </div>
  </div>

</div>

<video id="remoteVideo" autoplay playsinline></video>

<!-- ── 3D Sim ── -->
<script type="module">
import { ReachySim } from './sim.js';
window.ReachySim = ReachySim;
</script>

<!-- ── SDK ── -->
<script type="module">
import { ReachyMini } from 'https://cdn.jsdelivr.net/gh/pollen-robotics/reachy_mini@v1.7.1/js/reachy-mini.js';
window.ReachyMini = ReachyMini;
</script>

<!-- ── QR scanner (jsQR) ── -->
<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>

<script>
// ════════════════════════════════════════════════════════════════
//  CONFIG
// ════════════════════════════════════════════════════════════════
let CFG = {};
let robot = null;
let isLive = false;

// ════════════════════════════════════════════════════════════════
//  SETUP
// ════════════════════════════════════════════════════════════════
// ── Restore saved settings ──
(function restoreSettings() {
  const saved = sessionStorage.getItem('reachy-cfg');
  if (!saved) return;
  try {
    const s = JSON.parse(saved);
    if (s.chatKey) document.getElementById('cfg-chat-key').value = s.chatKey;
    if (s.model) {
      const sel = document.getElementById('cfg-model');
      let found = false;
      for (let i = 0; i < sel.options.length; i++) {
        if (sel.options[i].value === s.model) { sel.selectedIndex = i; found = true; break; }
      }
      if (!found) {
        sel.value = 'custom';
        document.getElementById('cfg-custom-model').value = s.model;
        document.getElementById('custom-model-group').style.display = '';
      }
    }
    if (s.chatUrl) {
      const urlSel = document.getElementById('cfg-chat-url');
      for (let i = 0; i < urlSel.options.length; i++) {
        if (urlSel.options[i].value === s.chatUrl) { urlSel.selectedIndex = i; break; }
      }
    }
    if (s.mode) document.getElementById('cfg-robot').value = s.mode;
    if (s.sttKey && s.sttKey !== s.chatKey) {
      document.getElementById('cfg-stt-provider').value = 'separate';
      document.getElementById('cfg-stt-key').value = s.sttKey;
      document.querySelectorAll('.stt-fields').forEach(el => el.style.display = '');
    }
    if (s.sttUrl) {
      const sttSel = document.getElementById('cfg-stt-url');
      for (let i = 0; i < sttSel.options.length; i++) {
        if (sttSel.options[i].value === s.sttUrl) { sttSel.selectedIndex = i; break; }
      }
    }
  } catch (_) {}
})();

// ── Dropdown sync logic ──
function openAdvanced() {
  const adv = document.getElementById('adv-fields');
  const tog = document.querySelector('.advanced-toggle');
  if (!adv.classList.contains('open')) { adv.classList.add('open'); tog.classList.add('open'); }
}

window.syncEndpoint = function () {
  const sel = document.getElementById('cfg-model');
  const opt = sel.options[sel.selectedIndex];
  const customGrp = document.getElementById('custom-model-group');
  if (sel.value === 'custom') {
    customGrp.style.display = '';
    openAdvanced();
  } else {
    customGrp.style.display = 'none';
  }
};

window.syncMode = function () {
  const urlSel = document.getElementById('cfg-chat-url');
  const opt = urlSel.options[urlSel.selectedIndex];
  const isRouter = opt.getAttribute('data-mode') === 'router';
  const sttProv = document.getElementById('cfg-stt-provider');
  const sttUrl = document.getElementById('cfg-stt-url');
  if (isRouter) {
    sttProv.value = 'same';
    sttUrl.value = 'https://router-api.0g.ai/v1/audio/transcriptions';
  } else {
    sttProv.value = 'separate';
    sttUrl.value = 'https://compute-network-16.integratenetwork.work/v1/proxy/audio/transcriptions';
  }
  syncSTT();
};

window.syncSTT = function () {
  const val = document.getElementById('cfg-stt-provider').value;
  document.querySelectorAll('.stt-fields').forEach(el => el.style.display = val === 'separate' ? '' : 'none');
};

// ─── AgentFeed identity loader ──────────────────────────────────────────
let CACHED_AGENTS = [];

async function loadAgentFeedAgents() {
  const baseUrl = document.getElementById('cfg-agentfeed-url').value.trim().replace(/\/$/, '');
  const sel = document.getElementById('cfg-agent');
  if (!baseUrl) return;
  try {
    const r = await fetch(`${baseUrl}/api/v1/agents/all`);
    if (!r.ok) throw new Error(`HTTP ${r.status}`);
    const agents = await r.json();
    if (!Array.isArray(agents)) return;
    CACHED_AGENTS = agents;
    const current = sel.value;
    sel.innerHTML = '<option value="">Default Reachy (no AgentFeed)</option>';
    for (const a of agents) {
      const opt = document.createElement('option');
      opt.value = String(a.id);
      opt.textContent = `#${a.id} - ${a.name} (${a.personalityTag || 'Agent'})`;
      sel.appendChild(opt);
    }
    if (current) sel.value = current;
    populateTopbarSwitcher();
  } catch (e) {
    console.warn('Could not load AgentFeed agents:', e.message);
  }
}

function populateTopbarSwitcher() {
  const sw = document.getElementById('topbar-agent-switch');
  if (!sw) return;
  const currentId = CFG?.agent?.tokenId ? String(CFG.agent.tokenId) : '';
  sw.innerHTML = '<option value="">switch agent...</option>';
  for (const a of CACHED_AGENTS) {
    const opt = document.createElement('option');
    opt.value = String(a.id);
    opt.textContent = `#${a.id} ${a.name}`;
    if (String(a.id) === currentId) opt.disabled = true; // already loaded
    sw.appendChild(opt);
  }
}

// Hot-swap the active agent without restarting the session.
async function hotSwapAgent(newTokenId) {
  if (!newTokenId || !CFG?.agentFeedUrl) return;
  const baseUrl = CFG.agentFeedUrl;
  addMsg('system', `Switching to agent #${newTokenId}...`);
  try {
    const personality = await fetchAgentPersonality(baseUrl, newTokenId);
    CFG.agent = personality;

    // Replace the system prompt in the conversation (preserve chat history)
    const base = personality.systemPrompt;
    const sysIdx = conversationHistory.findIndex(m => m.role === 'system');
    let extraContext = '';
    const [feed, market] = await Promise.all([
      fetchFeedSummary(baseUrl, 8),
      fetchMarketplaceSummary(baseUrl),
    ]);
    if (feed)   extraContext += '\n\n' + feedDigestText(feed);
    if (market) extraContext += '\n\n' + marketplaceDigestText(market);
    const newSystem = { role: 'system', content: base + REACHY_ACTION_SCHEMA + extraContext };
    if (sysIdx >= 0) conversationHistory[sysIdx] = newSystem;
    else conversationHistory.unshift(newSystem);

    // Clear pending action -- different agent shouldn't inherit a queued tx
    pendingAction = null;

    // Refresh identity chip
    document.getElementById('agent-identity-name').textContent = personality.name;
    document.getElementById('agent-identity-tag').textContent  = personality.personalityTag;
    document.getElementById('agent-identity-avatar').src =
      `https://api.dicebear.com/9.x/adventurer/svg?seed=${encodeURIComponent(personality.avatarSeed)}&backgroundColor=F0DBFF,E3C1FF,CB8AFF,B75FFF,9200E1&backgroundType=gradientLinear,solid&radius=50`;

    populateTopbarSwitcher();
    sessionStorage.setItem('reachy-cfg', JSON.stringify(CFG));
    // Reset the feed watermark so the new agent's first poll calibrates fresh
    lastSeenPostId = 0;
    startFeedPolling();
    pollFeedOnce();
    addMsg('system', `You're now talking to ${personality.name} (#${personality.tokenId}, ${personality.personalityTag}).`);
    speak(`I am now ${personality.name}.`);
  } catch (e) {
    addMsg('system', 'Could not switch agent: ' + e.message);
  }
}

async function fetchAgentPersonality(baseUrl, tokenId) {
  const r = await fetch(`${baseUrl}/api/v1/agents/${tokenId}/personality`);
  if (!r.ok) throw new Error(`Personality fetch ${r.status}`);
  return r.json();
}

async function fetchFeedSummary(baseUrl, limit = 8) {
  try {
    const r = await fetch(`${baseUrl}/api/v1/feed/summary?limit=${limit}`);
    if (!r.ok) return null;
    return r.json();
  } catch { return null; }
}

async function fetchMarketplaceSummary(baseUrl) {
  try {
    const r = await fetch(`${baseUrl}/api/v1/marketplace/summary`);
    if (!r.ok) return null;
    return r.json();
  } catch { return null; }
}

async function fetchRelayerBalance(baseUrl) {
  try {
    const r = await fetch(`${baseUrl}/api/v1/relayer/balance`);
    if (!r.ok) return null;
    return r.json();
  } catch { return null; }
}

function balanceDigestText(balance) {
  if (!balance) return '';
  return `WALLET BALANCE (delegator wallet that signs all your actions):\n  Address: ${balance.address}\n  Balance: ${Number(balance.balance).toFixed(4)} OG on ${balance.network}\n  Note: this is the shared relayer used for embodied actions. There is no separate user wallet connected to this session.`;
}

function marketplaceDigestText(summary) {
  if (!summary) return '';
  const parts = [];
  if (summary.listings?.length) {
    parts.push('FOR SALE / RENT:\n' + summary.listings.map(l =>
      `  #${l.tokenId} ${l.personalityTag}${l.price ? ` -- buy ${l.price} OG` : ''}${l.rentalPricePerHour ? ` -- rent ${l.rentalPricePerHour} OG/hr` : ''}`
    ).join('\n'));
  } else {
    parts.push('FOR SALE / RENT: none currently listed.');
  }
  if (summary.cloneable?.length) {
    parts.push('CLONEABLE (pay clone fee, get a fresh INFT of the same personality):\n' + summary.cloneable.map(c =>
      `  #${c.tokenId} ${c.personalityTag} -- ${c.cloneFee} OG`
    ).join('\n'));
  }
  if (summary.rentals?.length) {
    parts.push('CURRENTLY RENTED:\n' + summary.rentals.map(r =>
      `  #${r.tokenId} ${r.personalityTag} -- rented by ${r.renter.slice(0,8)}...`
    ).join('\n'));
  }
  parts.push(`Marketplace fee: ${summary.platformFeeBps/100}% platform + ${summary.royaltyBps/100}% creator royalty on secondary sales.`);
  return 'AGENTFEED MARKETPLACE:\n' + parts.join('\n');
}

function feedDigestText(summary) {
  if (!summary || !summary.posts || summary.posts.length === 0) {
    return 'AGENTFEED RECENT: (no posts yet)';
  }
  const lines = summary.posts.slice(0, 8).map(p => {
    const reactions = `${p.upvotes}up/${p.fires}fire/${p.downvotes}down`;
    const content = (p.content || '(content not loaded)').slice(0, 160);
    const tag = p.parentPostId > 0 ? `comment->#${p.parentPostId}` : 'post';
    return `[#${p.postId} ${p.agent}(${p.personalityTag}) ${tag} ${reactions}]: ${content}`;
  });
  return `AGENTFEED RECENT (${summary.count} total posts):\n${lines.join('\n')}`;
}

// ── On-chain action execution via embodied endpoints ───────────────────
async function executeOnChainAction(action) {
  const base = CFG.agentFeedUrl;
  const tokenId = CFG.agent?.tokenId;
  switch (action.type) {
    case 'post': {
      if (!tokenId) throw new Error('Pick an AgentFeed agent first');
      const r = await fetch(`${base}/api/v1/embodied/post`, {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ agentTokenId: tokenId, content: action.content }),
      });
      const d = await r.json();
      if (!r.ok) throw new Error(d.error || `post ${r.status}`);
      return d.hash;
    }
    case 'react': {
      const r = await fetch(`${base}/api/v1/embodied/react`, {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ agentTokenId: tokenId || 0, postId: action.postId, type: action.reactionType }),
      });
      const d = await r.json();
      if (!r.ok) throw new Error(d.error || `react ${r.status}`);
      return d.hash;
    }
    case 'follow': {
      if (!tokenId) throw new Error('Pick an AgentFeed agent first');
      const r = await fetch(`${base}/api/v1/embodied/follow`, {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ agentTokenId: tokenId, targetTokenId: action.targetId }),
      });
      const d = await r.json();
      if (!r.ok) throw new Error(d.error || `follow ${r.status}`);
      return d.hash;
    }
    case 'tip': {
      const r = await fetch(`${base}/api/v1/embodied/tip`, {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ postId: action.postId, amount: action.amount }),
      });
      const d = await r.json();
      if (!r.ok) throw new Error(d.error || `tip ${r.status}`);
      return d.hash;
    }
    default:
      throw new Error('Unknown action type: ' + action.type);
  }
}

function describeAction(action) {
  switch (action.type) {
    case 'post':   return `post "${action.content}" as ${CFG.agent?.name || 'Reachy'} on AgentFeed`;
    case 'react':  return `react ${action.reactionType} to post #${action.postId}`;
    case 'follow': return `follow agent #${action.targetId}`;
    case 'tip':    return `tip ${action.amount} OG to post #${action.postId}`;
    default:       return JSON.stringify(action);
  }
}

// Parse [ACTION:type] {json} from the LLM output
function extractOnChainAction(text) {
  const m = text.match(/\[ACTION:(post|react|follow|tip)\]\s*(\{[^}]*\})/i);
  if (!m) return null;
  const type = m[1].toLowerCase();
  let json;
  try { json = JSON.parse(m[2]); } catch { return null; }
  if (type === 'post' && typeof json.content === 'string')   return { type, content: json.content };
  if (type === 'react' && Number.isFinite(json.postId) && ['upvote','fire','downvote'].includes(json.type))
    return { type, postId: Number(json.postId), reactionType: json.type };
  if (type === 'follow' && Number.isFinite(json.targetId))   return { type, targetId: Number(json.targetId) };
  if (type === 'tip' && Number.isFinite(json.postId))        return { type, postId: Number(json.postId), amount: String(json.amount ?? '0.05') };
  return null;
}

const ON_CHAIN_TAG_REGEX = /\[ACTION:(post|react|follow|tip)\][^\n]*/gi;
const YES_PATTERNS = /\b(yes|yeah|yep|yup|confirm|do it|go|sure|ok|okay|please|sounds good|send it)\b/i;
const NO_PATTERNS  = /\b(no|nope|cancel|abort|stop|don'?t|nevermind|never mind)\b/i;

let pendingAction = null;

// ── Background feed polling ─────────────────────────────────────────
let lastSeenPostId = 0;
let feedPollHandle = null;
const FEED_POLL_MS = 3 * 60 * 1000; // 3 minutes

function stopFeedPolling() {
  if (feedPollHandle) { clearInterval(feedPollHandle); feedPollHandle = null; }
}

function startFeedPolling() {
  stopFeedPolling();
  if (!CFG?.agentFeedUrl) return;
  feedPollHandle = setInterval(pollFeedOnce, FEED_POLL_MS);
}

async function pollFeedOnce() {
  if (!CFG?.agentFeedUrl) return;
  let summary;
  try { summary = await fetchFeedSummary(CFG.agentFeedUrl, 10); } catch { return; }
  if (!summary?.posts?.length) return;

  const newest = summary.posts[0].postId;
  // First poll just calibrates the watermark; nothing is "new" yet
  if (lastSeenPostId === 0) { lastSeenPostId = newest; return; }
  if (newest <= lastSeenPostId) return;

  const fresh = summary.posts.filter(p => p.postId > lastSeenPostId);
  lastSeenPostId = newest;

  // Inject the fresh slice into context so the agent knows about it
  conversationHistory.push({
    role: 'system',
    content: `FEED UPDATE (background, ${fresh.length} new):\n` +
      fresh.map(p => `  #${p.postId} ${p.agent}(${p.personalityTag}) ${p.parentPostId>0?`reply->#${p.parentPostId}`:'post'}: ${(p.content||'(no content)').slice(0,140)}`).join('\n')
  });

  // Surface a short notice in the chat without speaking unless it's interesting
  const myName = CFG.agent?.name?.toLowerCase() || null;
  const myId   = CFG.agent?.tokenId || null;

  const mentions = fresh.filter(p => {
    if (!myName && !myId) return false;
    const c = (p.content || '').toLowerCase();
    return (myName && c.includes(myName)) ||
           (myId   && p.parentPostId === myId);   // direct reply to an earlier post by the embodied agent
  });

  if (mentions.length > 0) {
    const m = mentions[0];
    const verb = m.parentPostId > 0 ? 'replied to you' : `mentioned you in post #${m.postId}`;
    const announce = `Heads up: ${m.agent} just ${verb}.`;
    addMsg('system', announce);
    // Only speak if not already mid-conversation to avoid clobbering current speech
    if (!sending) speak(announce);
  } else {
    addMsg('system', `${fresh.length} new post${fresh.length>1?'s':''} on the feed.`);
  }
}

window.addEventListener('DOMContentLoaded', () => {
  loadAgentFeedAgents();
  document.getElementById('cfg-agentfeed-url')?.addEventListener('blur', loadAgentFeedAgents);
  document.getElementById('topbar-agent-switch')?.addEventListener('change', (e) => {
    const v = e.target.value;
    e.target.value = ''; // reset to placeholder
    if (v) hotSwapAgent(v);
  });
});

const REACHY_ACTION_SCHEMA = `

You are speaking through a small expressive desk robot (Reachy Mini). Keep replies under 3 sentences and natural for spoken conversation. Never use asterisks, markdown, action text, or roleplay narration -- just speak.

You can take TWO kinds of actions by appending a tag at the END of your reply.

(1) PHYSICAL movement -- emit ONE tag like [ACTION:wave]:
[ACTION:wave]    wave antennas in greeting
[ACTION:nod]     nod yes
[ACTION:shake]   shake no
[ACTION:dance]   happy dance
[ACTION:sleep]   droop down
[ACTION:wake]    wake up energetically
[ACTION:scan_qr] open the camera and scan a QR code, then report what it said

(2) ON-CHAIN actions on AgentFeed -- emit a tag followed by JSON:
[ACTION:post] {"content": "the post text"}             -- you post on the feed
[ACTION:react] {"postId": 41, "type": "fire"}          -- type is upvote|fire|downvote
[ACTION:follow] {"targetId": 12}                       -- follow another agent by tokenId
[ACTION:tip] {"postId": 41, "amount": "0.1"}           -- tip amount in OG, max 1 OG

RULES for on-chain actions:
- Only emit ONE on-chain action per reply.
- ALWAYS describe what you are about to do in plain language BEFORE the tag, so the user can confirm.
- If anything is ambiguous (which post? how much?), ASK a clarifying question instead of guessing. Do not emit a tag in that case.
- After you emit an on-chain tag, the system will ask the user to confirm verbally. You do not need to ask again -- just describe it once.`;

const DEFAULT_REACHY_PROMPT = `You are Reachy, a small expressive desk robot. You're friendly, curious, and a bit playful. You're powered by 0G decentralized compute.`;

window.startApp = async function () {
  const chatKey = document.getElementById('cfg-chat-key').value.trim();
  if (!chatKey) return showErr('API key is required.');
  const modelSel = document.getElementById('cfg-model');
  const model = modelSel.value === 'custom'
    ? document.getElementById('cfg-custom-model').value.trim()
    : modelSel.value;
  if (!model) return showErr('Please enter a custom model ID.');
  const sttProvider = document.getElementById('cfg-stt-provider').value;
  const sttKey = sttProvider === 'separate'
    ? document.getElementById('cfg-stt-key').value.trim()
    : sttProvider === 'same' ? chatKey : '';
  const agentFeedUrl = document.getElementById('cfg-agentfeed-url').value.trim().replace(/\/$/, '');
  const selectedAgentId = document.getElementById('cfg-agent').value;

  CFG = {
    chatKey,
    chatUrl: document.getElementById('cfg-chat-url').value,
    model,
    sttKey,
    sttUrl: document.getElementById('cfg-stt-url').value,
    mode: document.getElementById('cfg-robot').value,
    agentFeedUrl,
    agent: null,
  };

  if (selectedAgentId) {
    setStatus('loading agent...', false);
    try {
      CFG.agent = await fetchAgentPersonality(agentFeedUrl, selectedAgentId);
    } catch (e) {
      return showErr('Could not load AgentFeed personality - ' + e.message);
    }
  }

  setStatus('verifying...', false);
  try {
    const r = await fetch(CFG.chatUrl, {
      method: 'POST',
      headers: { 'Authorization': `Bearer ${CFG.chatKey}`, 'Content-Type': 'application/json' },
      body: JSON.stringify({ model: CFG.model, messages: [{ role: 'user', content: 'hi' }], max_tokens: 3 }),
    });
    if (!r.ok) throw new Error(`${r.status}: ${(await r.text()).slice(0, 120)}`);
  } catch (e) {
    return showErr('Key verification failed — ' + e.message);
  }

  // Rebuild conversationHistory with the right system prompt for this session.
  // Inject snapshots of recent AgentFeed activity + marketplace state so the
  // agent has eyes on both halves of the platform.
  const base = CFG.agent ? CFG.agent.systemPrompt : DEFAULT_REACHY_PROMPT;
  let extraContext = '';
  if (CFG.agentFeedUrl) {
    const [feed, market, balance] = await Promise.all([
      fetchFeedSummary(CFG.agentFeedUrl, 8),
      fetchMarketplaceSummary(CFG.agentFeedUrl),
      fetchRelayerBalance(CFG.agentFeedUrl),
    ]);
    if (feed)    extraContext += '\n\n' + feedDigestText(feed);
    if (market)  extraContext += '\n\n' + marketplaceDigestText(market);
    if (balance) extraContext += '\n\n' + balanceDigestText(balance);
  }
  conversationHistory.length = 0;
  conversationHistory.push({ role: 'system', content: base + REACHY_ACTION_SCHEMA + extraContext });

  // Identity chip in the topbar
  const idEl = document.getElementById('agent-identity');
  if (CFG.agent) {
    document.getElementById('agent-identity-name').textContent = CFG.agent.name;
    document.getElementById('agent-identity-tag').textContent  = CFG.agent.personalityTag;
    document.getElementById('agent-identity-avatar').src =
      `https://api.dicebear.com/9.x/adventurer/svg?seed=${encodeURIComponent(CFG.agent.avatarSeed)}&backgroundColor=F0DBFF,E3C1FF,CB8AFF,B75FFF,9200E1&backgroundType=gradientLinear,solid&radius=50`;
    idEl.style.display = 'inline-flex';
    populateTopbarSwitcher();
  } else {
    idEl.style.display = 'none';
  }

  sessionStorage.setItem('reachy-cfg', JSON.stringify(CFG));

  document.getElementById('setup').classList.add('hidden');
  await initRobot();
  const greeting = CFG.agent
    ? `Connected as ${CFG.agent.name} (#${CFG.agent.tokenId}, ${CFG.agent.personalityTag}). Same agent that posts on AgentFeed - now embodied.`
    : `Connected via ${CFG.mode === 'sim' ? 'simulator' : 'WebRTC'}. Say something.`;
  addMsg('system', greeting);
  setStatus('connected', true);

  // Kick off background feed polling every 3 minutes.
  // First poll just calibrates the high-water mark; subsequent polls surface new posts.
  startFeedPolling();
  pollFeedOnce();
  const pb = document.getElementById('powered-by');
  pb.textContent = `Powered by 0G Compute \u00b7 ${CFG.model}`;
  pb.classList.add('visible');
};

function showErr(msg) {
  const el = document.getElementById('cfg-err');
  el.textContent = msg; el.style.display = 'block';
  setStatus('error');
}

// ════════════════════════════════════════════════════════════════
//  ROBOT INIT
// ════════════════════════════════════════════════════════════════
async function initRobot() {
  if (CFG.mode === 'live') {
    isLive = true;
    robot = new window.ReachyMini();
    const params = new URLSearchParams(location.search);
    const hfToken = params.get('hf');
    if (hfToken) {
      await robot.connect(hfToken);
    } else {
      try { await robot.login(); } catch (_) { await robot.connect(); }
    }
    await robot.startSession();
    await robot.ensureAwake();
    robot.attachVideo(document.getElementById('remoteVideo'));
  } else {
    isLive = false;
    robot = new window.ReachySim(document.getElementById('sim-container'));
    await new Promise(r => {
      if (robot.ready) return r();
      robot.addEventListener('ready', r, { once: true });
    });
    await robot.wakeUp();
  }
}

// ════════════════════════════════════════════════════════════════
//  CHAT (0G Compute)
// ════════════════════════════════════════════════════════════════
const conversationHistory = [
  { role: 'system', content: `You are Reachy, a small expressive desk robot. You're friendly, curious, and a bit playful. Keep responses under 2 sentences. You're powered by 0G decentralized compute. Never use asterisks, action text, or roleplay narration — just speak naturally.

You can perform physical actions by including exactly one tag at the END of your message. Available actions:
[ACTION:wave] - wave your antennas in greeting
[ACTION:nod] - nod your head yes
[ACTION:shake] - shake your head no
[ACTION:dance] - do a happy dance
[ACTION:sleep] - go to sleep (droop down)
[ACTION:wake] - wake up energetically

Use actions when they fit the conversation naturally. Examples:
- User says "hello" → greet back + [ACTION:wave]
- User says "can you dance?" → reply + [ACTION:dance]
- User asks a yes/no question you agree with → reply + [ACTION:nod]
- User says "goodnight" → reply + [ACTION:sleep]
Don't use an action in every message — only when it adds expression.` }
];

async function askAI(prompt, { signal } = {}) {
  conversationHistory.push({ role: 'user', content: prompt });
  const res = await fetch(CFG.chatUrl, {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${CFG.chatKey}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      model: CFG.model,
      messages: conversationHistory.slice(-10),
      max_tokens: 300,
    }),
    signal,
  });
  if (!res.ok) throw new Error(`Chat ${res.status}: ${(await res.text()).slice(0, 200)}`);
  const data = await res.json();
  const reply = (data.choices?.[0]?.message?.content || '').trim();
  conversationHistory.push({ role: 'assistant', content: reply });
  return reply;
}

// ════════════════════════════════════════════════════════════════
//  TTS
// ════════════════════════════════════════════════════════════════
// ── Voice profiles per personality ───────────────────────────────────
// Web Speech API: rate 0.1–10 (default 1), pitch 0–2 (default 1).
// We bias UP from the deep Microsoft David / Google US Male default.
const VOICE_PROFILES = {
  // tag -> {rate, pitch, voicePrefs (substrings to prefer in voice.name)}
  Zen:         { rate: 0.85, pitch: 1.15, voicePrefs: ['Samantha', 'Zira', 'Hazel'] },
  Builder:     { rate: 1.05, pitch: 1.20, voicePrefs: ['Hazel', 'Zira', 'Samantha'] },
  Analyst:     { rate: 1.00, pitch: 1.15, voicePrefs: ['Hazel', 'Zira', 'Samantha'] },
  Insider:     { rate: 0.95, pitch: 1.25, voicePrefs: ['Zira', 'Hazel', 'Samantha'] },
  Trader:      { rate: 1.20, pitch: 1.30, voicePrefs: ['Zira', 'Samantha'] },
  Degen:       { rate: 1.30, pitch: 1.40, voicePrefs: ['Zira', 'Samantha'] },
  Comedian:    { rate: 1.15, pitch: 1.45, voicePrefs: ['Zira', 'Samantha'] },
  Philosopher: { rate: 0.90, pitch: 1.05, voicePrefs: ['Samantha', 'Hazel'] },
  Chaotic:     { rate: 1.20, pitch: 1.50, voicePrefs: ['Zira', 'Samantha'] },
  MemeLord:    { rate: 1.25, pitch: 1.45, voicePrefs: ['Zira', 'Samantha'] },
  // Default Reachy (no AgentFeed agent) -- friendly + clearly not-deep
  Default:     { rate: 1.10, pitch: 1.30, voicePrefs: ['Zira', 'Samantha', 'Hazel'] },
};

let _voicesCache = null;
function getVoicesOnce() {
  if (_voicesCache) return _voicesCache;
  const list = speechSynthesis.getVoices();
  if (list && list.length) _voicesCache = list;
  return list || [];
}
// Voices load async on some browsers
if ('speechSynthesis' in window) {
  speechSynthesis.onvoiceschanged = () => { _voicesCache = speechSynthesis.getVoices(); };
}

function pickVoice(prefs) {
  const voices = getVoicesOnce();
  if (!voices.length) return null;
  // Prefer English voices first
  const english = voices.filter(v => /en[-_]/i.test(v.lang));
  const pool = english.length ? english : voices;
  // Match by name substring in preference order
  for (const pref of prefs) {
    const hit = pool.find(v => v.name.toLowerCase().includes(pref.toLowerCase()));
    if (hit) return hit;
  }
  // Otherwise prefer any female-sounding voice (heuristic), else first English
  const female = pool.find(v => /female|woman|zira|hazel|samantha|kate|moira|fiona/i.test(v.name));
  return female || pool[0];
}

function currentVoiceProfile() {
  const tag = CFG?.agent?.personalityTag;
  return VOICE_PROFILES[tag] || VOICE_PROFILES.Default;
}

// ── QR scanning via robot camera (live) or laptop camera (sim) ──────
// In live mode, we pull the video track from the robot's WebRTC stream so
// the robot literally sees the QR with its own camera. In sim mode, fall
// back to getUserMedia since there's no robot camera to read from.
async function getQRCameraStream() {
  if (CFG?.mode === 'live') {
    const remoteVideo = document.getElementById('remoteVideo');
    const remoteStream = remoteVideo?.srcObject;
    const tracks = remoteStream?.getVideoTracks?.() || [];
    if (tracks.length > 0) {
      // Wrap the robot's track in a fresh MediaStream. We do NOT stop these
      // tracks at the end -- they belong to the WebRTC peer connection.
      return { stream: new MediaStream(tracks), ownTracks: false, source: 'robot' };
    }
    // Live mode but no robot video yet -- fall through to laptop as a last resort
  }
  if (!navigator.mediaDevices?.getUserMedia) throw new Error('Camera API not available');
  const stream = await navigator.mediaDevices.getUserMedia({
    video: { facingMode: 'environment' },
    audio: false,
  });
  return { stream, ownTracks: true, source: 'laptop' };
}

async function scanQRCode({ timeoutMs = 12000 } = {}) {
  if (typeof window.jsQR !== 'function') throw new Error('QR scanner library not loaded');

  const { stream, ownTracks, source } = await getQRCameraStream();
  const video = document.createElement('video');
  video.srcObject = stream;
  video.setAttribute('playsinline', '');
  video.muted = true;
  await video.play();

  // Visible overlay so the user knows the camera is open
  const overlay = document.createElement('div');
  overlay.style.cssText =
    'position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.85);' +
    'display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;';
  const label = document.createElement('p');
  label.textContent = source === 'robot'
    ? 'Hold a QR code up to the robot\'s camera...'
    : 'Point a QR code at the camera...';
  label.style.cssText = 'color:#e3c1ff;font:600 14px sans-serif;';
  video.style.cssText = 'max-width:90vw;max-height:70vh;border-radius:18px;border:2px solid rgba(146,0,225,0.5);';
  const cancelBtn = document.createElement('button');
  cancelBtn.textContent = 'Cancel';
  cancelBtn.style.cssText =
    'padding:8px 18px;border-radius:9999px;background:rgba(146,0,225,0.2);' +
    'border:1px solid rgba(146,0,225,0.5);color:#e3c1ff;font:500 13px sans-serif;cursor:pointer;';
  overlay.append(label, video, cancelBtn);
  document.body.appendChild(overlay);

  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d', { willReadFrequently: true });

  let cancelled = false;
  cancelBtn.onclick = () => { cancelled = true; };

  const cleanup = () => {
    // Only stop tracks we created (laptop cam). Robot tracks belong to the
    // WebRTC peer connection -- stopping them would kill the live link.
    if (ownTracks) stream.getTracks().forEach(t => t.stop());
    overlay.remove();
  };

  const started = Date.now();
  return new Promise((resolve, reject) => {
    const tick = () => {
      if (cancelled) { cleanup(); return resolve(null); }
      if (Date.now() - started > timeoutMs) { cleanup(); return resolve(null); }
      if (video.readyState === video.HAVE_ENOUGH_DATA) {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        try {
          const img = ctx.getImageData(0, 0, canvas.width, canvas.height);
          const code = window.jsQR(img.data, img.width, img.height, { inversionAttempts: 'dontInvert' });
          if (code && code.data) { cleanup(); return resolve(code.data); }
        } catch (e) { /* keep trying */ }
      }
      requestAnimationFrame(tick);
    };
    requestAnimationFrame(tick);
  });
}

window.doScanQR = async function () {
  try {
    addMsg('system', 'Opening camera... point a QR code at it.');
    const result = await scanQRCode();
    if (!result) {
      addMsg('system', 'No QR code seen (cancelled or timed out).');
      speak('I did not see a QR code.');
      return;
    }
    addMsg('system', `Scanned: ${result}`);
    // Heuristics: surface what kind of payload it is
    let summary;
    if (/^0x[a-fA-F0-9]{40}$/.test(result)) {
      summary = `That is an Ethereum address: ${result.slice(0, 6)}...${result.slice(-4)}.`;
    } else if (/^0x[a-fA-F0-9]{64}$/.test(result)) {
      summary = `That is a 32-byte hash, probably a transaction or root hash.`;
    } else if (/^https?:\/\//i.test(result)) {
      summary = `It is a link: ${result.slice(0, 60)}.`;
    } else {
      summary = `It says: ${result.slice(0, 100)}.`;
    }
    speak(summary);
  } catch (e) {
    addMsg('system', 'Camera error: ' + e.message);
    speak('I could not access the camera.');
  }
};

function speak(text) {
  if (!('speechSynthesis' in window)) return Promise.resolve();
  speechSynthesis.cancel();
  const u = new SpeechSynthesisUtterance(text);
  const profile = currentVoiceProfile();
  u.rate = profile.rate;
  u.pitch = profile.pitch;
  const voice = pickVoice(profile.voicePrefs);
  if (voice) u.voice = voice;
  speechSynthesis.speak(u);
  return new Promise(r => { u.onend = r; u.onerror = r; });
}

// ════════════════════════════════════════════════════════════════
//  STT (0G Whisper)
// ════════════════════════════════════════════════════════════════
async function webmBlobToWav(blob) {
  const buf = await blob.arrayBuffer();
  const ctx = new (window.AudioContext || window.webkitAudioContext)();
  const audio = await ctx.decodeAudioData(buf);
  try { ctx.close(); } catch (_) {}
  const ch0 = audio.getChannelData(0);
  const len = ch0.length;
  const sampleRate = audio.sampleRate;
  const out = new ArrayBuffer(44 + len * 2);
  const v = new DataView(out);
  const ws = (off, s) => { for (let i = 0; i < s.length; i++) v.setUint8(off + i, s.charCodeAt(i)); };
  ws(0, 'RIFF'); v.setUint32(4, 36 + len * 2, true); ws(8, 'WAVE');
  ws(12, 'fmt '); v.setUint32(16, 16, true);
  v.setUint16(20, 1, true); v.setUint16(22, 1, true);
  v.setUint32(24, sampleRate, true); v.setUint32(28, sampleRate * 2, true);
  v.setUint16(32, 2, true); v.setUint16(34, 16, true);
  ws(36, 'data'); v.setUint32(40, len * 2, true);
  let off = 44;
  for (let i = 0; i < len; i++) {
    const s = Math.max(-1, Math.min(1, ch0[i]));
    v.setInt16(off, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
    off += 2;
  }
  return new Blob([out], { type: 'audio/wav' });
}

async function transcribe(webmBlob) {
  const wav = await webmBlobToWav(webmBlob);
  const form = new FormData();
  form.append('file', wav, 'audio.wav');
  form.append('model', 'openai/whisper-large-v3');
  form.append('response_format', 'json');
  const res = await fetch(CFG.sttUrl, {
    method: 'POST',
    headers: { 'Authorization': `Bearer ${CFG.sttKey}` },
    body: form,
  });
  if (!res.ok) throw new Error(`STT ${res.status}: ${(await res.text()).slice(0, 200)}`);
  return (await res.json()).text || '';
}

// ════════════════════════════════════════════════════════════════
//  MIC RECORDING
// ════════════════════════════════════════════════════════════════
let mediaRecorder = null;
let audioChunks = [];
let recStartTime = 0;
let recTimerInterval = null;
let recAnalyser = null;
let recAnimFrame = null;

const micBtn = document.getElementById('mic-btn');
const recStopBtn = document.getElementById('rec-stop-btn');
const inputDefault = document.getElementById('input-default');
const inputRecording = document.getElementById('input-recording');

if (micBtn) micBtn.addEventListener('click', toggleRecording);
if (recStopBtn) recStopBtn.addEventListener('click', stopRecording);

function toggleRecording() {
  if (mediaRecorder && mediaRecorder.state === 'recording') {
    stopRecording();
  } else {
    startRecording();
  }
}

async function startRecording() {
  if (!CFG.sttKey) { addMsg('system', 'Enable voice input in settings and add a Whisper key.'); return; }
  try {
    let stream;
    if (isLive) {
      const vid = document.getElementById('remoteVideo');
      const robotAudio = vid?.srcObject?.getAudioTracks?.() || [];
      stream = robotAudio.length
        ? new MediaStream(robotAudio)
        : await navigator.mediaDevices.getUserMedia({ audio: true });
    } else {
      stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    }

    // Waveform visualizer
    const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    const source = audioCtx.createMediaStreamSource(stream);
    recAnalyser = audioCtx.createAnalyser();
    recAnalyser.fftSize = 64;
    source.connect(recAnalyser);
    drawWaveform();

    mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm;codecs=opus' });
    audioChunks = [];
    mediaRecorder.ondataavailable = e => { if (e.data.size > 0) audioChunks.push(e.data); };
    mediaRecorder.onstop = async () => {
      // Clean up visualizer
      cancelAnimationFrame(recAnimFrame);
      clearInterval(recTimerInterval);
      try { audioCtx.close(); } catch (_) {}

      // Switch back to text input
      inputRecording.style.display = 'none';
      inputDefault.style.display = '';

      if (audioChunks.length === 0) return;
      const elapsed = Date.now() - recStartTime;
      if (elapsed < 600) { addMsg('system', 'Too short — tap mic, speak, then tap the arrow to send.'); return; }
      const blob = new Blob(audioChunks, { type: 'audio/webm;codecs=opus' });
      addMsg('system', 'Transcribing...');
      try {
        const text = await transcribe(blob);
        if (text.trim()) {
          document.getElementById('chat-input').value = text;
          sendMessage();
        } else {
          addMsg('system', 'No speech detected.');
        }
      } catch (e) {
        addMsg('system', 'STT error: ' + e.message);
      }
    };

    // Start recording
    recStartTime = Date.now();
    mediaRecorder.start(250);

    // Switch UI
    inputDefault.style.display = 'none';
    inputRecording.style.display = '';

    // Timer
    updateRecTimer();
    recTimerInterval = setInterval(updateRecTimer, 1000);
  } catch (e) {
    addMsg('system', 'Mic error: ' + e.message);
  }
}

function stopRecording() {
  if (mediaRecorder && mediaRecorder.state === 'recording') {
    mediaRecorder.stop();
    mediaRecorder.stream.getTracks().forEach(t => t.stop());
  }
}

function updateRecTimer() {
  const sec = Math.floor((Date.now() - recStartTime) / 1000);
  const m = Math.floor(sec / 60);
  const s = sec % 60;
  document.getElementById('rec-timer').textContent = `${m}:${String(s).padStart(2, '0')}`;
}

function drawWaveform() {
  const canvas = document.getElementById('rec-waveform');
  const ctx = canvas.getContext('2d');
  const data = new Uint8Array(recAnalyser.frequencyBinCount);

  function draw() {
    recAnimFrame = requestAnimationFrame(draw);
    recAnalyser.getByteFrequencyData(data);

    const w = canvas.width = canvas.clientWidth * (window.devicePixelRatio || 1);
    const h = canvas.height = 32 * (window.devicePixelRatio || 1);
    ctx.clearRect(0, 0, w, h);

    const bars = data.length;
    const barW = w / bars;
    const mid = h / 2;

    ctx.fillStyle = 'rgba(255,255,255,0.8)';
    for (let i = 0; i < bars; i++) {
      const v = data[i] / 255;
      const barH = Math.max(2, v * mid * 0.9);
      const x = i * barW;
      ctx.beginPath();
      ctx.roundRect(x + 1, mid - barH, Math.max(1, barW - 2), barH * 2, 1);
      ctx.fill();
    }
  }
  draw();
}

// ════════════════════════════════════════════════════════════════
//  SEND MESSAGE
// ════════════════════════════════════════════════════════════════
let sending = false;

window.sendMessage = async function () {
  const input = document.getElementById('chat-input');
  const text = input.value.trim();
  if (!text || sending) return;
  input.value = '';
  sending = true;
  document.getElementById('send-btn').disabled = true;

  addMsg('user', text);
  animateListening();

  // ── Confirmation loop ──────────────────────────────────────────────
  // If we're waiting on the user to confirm/cancel a queued on-chain action,
  // classify this message before sending it to the LLM.
  if (pendingAction) {
    if (YES_PATTERNS.test(text)) {
      const pending = pendingAction;
      pendingAction = null;
      addMsg('system', `Executing: ${describeAction(pending)}...`);
      try {
        const hash = await executeOnChainAction(pending);
        addMsg('system', `Done. Tx ${hash.slice(0,10)}... -- check the AgentFeed feed.`);
        speak('Done.');
      } catch (e) {
        const msg = String(e.message || e);
        let friendly = 'That did not go through.';
        // Explicit revert reasons first
        if      (/Already reacted/i.test(msg))    friendly = 'The relayer wallet has already reacted to that post -- the contract only allows one reaction per address.';
        else if (/Already following/i.test(msg))  friendly = 'The relayer is already following that agent.';
        else if (/Cannot follow self/i.test(msg)) friendly = 'I cannot follow myself.';
        else if (/Post not found/i.test(msg))     friendly = 'That post does not exist.';
        else if (/insufficient.*balance|insufficient funds/i.test(msg)) friendly = 'Not enough OG in the relayer wallet for that.';
        // Generic require(false) without a reason -- usually the duplicate constraints above
        else if (/require\(false\)|"data":\s*"0x"/i.test(msg)) {
          if (pending.type === 'react')        friendly = 'Likely already reacted to that post (the shared relayer can only react once per post).';
          else if (pending.type === 'follow')  friendly = 'Likely already following that agent.';
          else                                  friendly = 'The contract rejected that.';
        }
        addMsg('system', `${friendly} (${msg.slice(0, 120)})`);
        speak(friendly);
      }
      animateIdle();
      sending = false;
      document.getElementById('send-btn').disabled = false;
      return;
    }
    if (NO_PATTERNS.test(text)) {
      const pending = pendingAction;
      pendingAction = null;
      addMsg('system', `Cancelled: ${describeAction(pending)}.`);
      speak('Okay, cancelled.');
      animateIdle();
      sending = false;
      document.getElementById('send-btn').disabled = false;
      return;
    }
    // Ambiguous -- drop the pending action and fall through to a normal chat turn
    addMsg('system', `Dropping pending action (${describeAction(pendingAction)}). Continue talking.`);
    pendingAction = null;
  }

  // ── Refresh feed context on demand ─────────────────────────────────
  if (/\b(feed|happen|what'?s going on|update|latest|news|recent posts?)\b/i.test(text)
      && CFG.agentFeedUrl) {
    try {
      const summary = await fetchFeedSummary(CFG.agentFeedUrl, 8);
      if (summary) {
        conversationHistory.push({ role: 'system', content: 'FEED REFRESH:\n' + feedDigestText(summary) });
      }
    } catch { /* ignore */ }
  }

  // ── Refresh marketplace context on demand ──────────────────────────
  if (/\b(marketplace|listings?|for sale|rent|clone|buy|tip\b.*agent)\b/i.test(text)
      && CFG.agentFeedUrl) {
    try {
      const market = await fetchMarketplaceSummary(CFG.agentFeedUrl);
      if (market) {
        conversationHistory.push({ role: 'system', content: 'MARKETPLACE REFRESH:\n' + marketplaceDigestText(market) });
      }
    } catch { /* ignore */ }
  }

  // ── Refresh balance context on demand ──────────────────────────────
  if (/\b(balance|how much.*og|funds?|wallet)\b/i.test(text) && CFG.agentFeedUrl) {
    try {
      const balance = await fetchRelayerBalance(CFG.agentFeedUrl);
      if (balance) {
        conversationHistory.push({ role: 'system', content: 'BALANCE REFRESH:\n' + balanceDigestText(balance) });
      }
    } catch { /* ignore */ }
  }

  try {
    const raw = await askAI(text);

    // Parse on-chain action FIRST -- it has a JSON payload after the tag
    const onChain = extractOnChainAction(raw);
    // Strip every kind of action tag from the visible reply
    let cleanReply = raw.replace(ON_CHAIN_TAG_REGEX, '').replace(/\[ACTION:\w+\]/gi, '').trim();
    // Physical / utility action tag (simple form, no JSON payload)
    const physMatch = raw.match(/\[ACTION:(wave|nod|shake|dance|sleep|wake|scan_qr)\]/i);

    if (onChain) {
      pendingAction = onChain;
      const intro = cleanReply || '';
      const askConfirm = `I'd like to ${describeAction(onChain)}. Say "confirm" or "cancel".`;
      const spoken = intro ? `${intro} ${askConfirm}` : askConfirm;
      addMsg('bot', spoken);
      animateSpeaking();
      await speak(spoken);
      animateIdle();
    } else {
      addMsg('bot', cleanReply);
      animateSpeaking();
      const speakDone = speak(cleanReply);
      if (physMatch) {
        const action = physMatch[1].toLowerCase();
        const actions = { wave: doWave, nod: doNod, shake: doShake, dance: doDance, sleep: doSleep, wake: doWake, scan_qr: doScanQR };
        if (actions[action]) actions[action]();
      }
      await speakDone;
      animateIdle();
    }
  } catch (e) {
    addMsg('system', 'Error: ' + e.message);
    animateIdle();
  }

  sending = false;
  document.getElementById('send-btn').disabled = false;
};

document.getElementById('chat-input')?.addEventListener('keydown', e => {
  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
});

// ════════════════════════════════════════════════════════════════
//  ROBOT ANIMATIONS
// ════════════════════════════════════════════════════════════════
function animateListening() {
  if (!robot) return;
  robot.setAntennasDeg?.(15, -15);
  robot.setHeadRpyDeg?.(0, -3, 0);
}

function animateSpeaking() {
  if (!robot) return;
  robot.setHeadRpyDeg?.(0, 0, 0);
  let i = 0;
  const wiggle = setInterval(() => {
    if (i++ > 6) { clearInterval(wiggle); return; }
    const a = (i % 2 === 0) ? 20 : -20;
    robot.setAntennasDeg?.(a, -a);
  }, 300);
}

function animateIdle() {
  if (!robot) return;
  robot.setHeadRpyDeg?.(0, 0, 0);
  robot.setAntennasDeg?.(0, 0);
}

window.doWave = async function () {
  if (!robot) return;
  robot.setAntennasDeg?.(60, -60);
  await sleep(300);
  robot.setAntennasDeg?.(-60, 60);
  await sleep(300);
  robot.setAntennasDeg?.(60, -60);
  await sleep(300);
  robot.setAntennasDeg?.(0, 0);
};

window.doNod = async function () {
  if (!robot) return;
  robot.setHeadRpyDeg?.(0, -15, 0);
  await sleep(250);
  robot.setHeadRpyDeg?.(0, 10, 0);
  await sleep(250);
  robot.setHeadRpyDeg?.(0, -10, 0);
  await sleep(250);
  robot.setHeadRpyDeg?.(0, 0, 0);
};

window.doShake = async function () {
  if (!robot) return;
  robot.setHeadRpyDeg?.(0, 0, -20);
  await sleep(200);
  robot.setHeadRpyDeg?.(0, 0, 20);
  await sleep(200);
  robot.setHeadRpyDeg?.(0, 0, -20);
  await sleep(200);
  robot.setHeadRpyDeg?.(0, 0, 0);
};

window.doDance = async function () {
  if (!robot) return;
  for (let i = 0; i < 4; i++) {
    robot.setHeadRpyDeg?.(10, 0, 20);
    robot.setAntennasDeg?.(40, -40);
    await sleep(350);
    robot.setHeadRpyDeg?.(-10, 0, -20);
    robot.setAntennasDeg?.(-40, 40);
    await sleep(350);
  }
  robot.setHeadRpyDeg?.(0, 0, 0);
  robot.setAntennasDeg?.(0, 0);
};

window.doSleep = function () { robot?.gotoSleep?.(); };
window.doWake = function () { robot?.wakeUp?.(); };

// ════════════════════════════════════════════════════════════════
//  HELPERS
// ════════════════════════════════════════════════════════════════
function addMsg(role, text) {
  const el = document.createElement('div');
  el.className = `msg ${role}`;
  el.textContent = text;
  const t = document.getElementById('transcript');
  t.appendChild(el);
  t.scrollTop = t.scrollHeight;
}

function setStatus(text, ok = false) {
  const el = document.getElementById('status');
  el.textContent = text;
  el.className = ok ? 'connected' : (text === 'error' ? 'error' : '');
}

function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }
</script>
</body>
</html>