---
/**
 * Mission Control — terminal-style mock chat with simulated streaming.
 * Wires to /api/oracle if available, otherwise streams a canned response
 * from a small response table. Fully client-rendered, no JS frameworks.
 */
---
<section class="section" id="chat" aria-labelledby="chat-h">
  <div class="container">
    <div class="section-head">
      <span class="eyebrow">Live system · 02</span>
      <h2 id="chat-h" class="section-title">Mission <span class="accent">Control.</span></h2>
      <p class="section-sub">A working playground. Same MMVC controller — just with the dashboard turned on so you can see the modules light up.</p>
    </div>

    <div class="mc-frame" id="mcFrame">
      <div class="mc-header">
        <div class="mc-id"><span class="dot"></span><span>NIBIRU/MC · session 7c4a</span></div>
        <div class="mc-tele" id="mcTele">
          <span>MODEL <strong>nibiru-base-7B</strong></span>
          <span>LATENCY <strong id="mcLatency">—</strong></span>
          <span>TOKENS <strong id="mcTokens">0</strong></span>
        </div>
        <div class="mc-actions">
          <button title="Reset" id="mcReset" type="button" aria-label="Reset session">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
              <path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/>
            </svg>
          </button>
        </div>
      </div>
      <div class="mc-body" id="mcBody">
        <div class="mc-line sys">› establishing link to nibiru-base-7B …</div>
        <div class="mc-line sys">› controller online · 4 modules in orbit (Retriever, ReActPlanner, Greeter, ChatView)</div>
        <div class="mc-line sys">› ready. type a prompt below or pick a suggestion.</div>
      </div>
      <div class="mc-input">
        <span class="prompt">›</span>
        <input id="mcInput" type="text" placeholder="ask the agent…" autocomplete="off" />
        <button class="send" id="mcSend" type="button">Transmit</button>
      </div>
    </div>

    <div class="mc-suggestions">
      <button class="mc-suggestion" data-q="Explain MMVC" type="button">Explain MMVC</button>
      <button class="mc-suggestion" data-q="Build a RAG agent" type="button">Build a RAG agent</button>
      <button class="mc-suggestion" data-q="Add a tool to my Nibiru module" type="button">Add a tool</button>
      <button class="mc-suggestion" data-q="Write a haiku about modules" type="button">Write a haiku</button>
    </div>
  </div>
</section>

