{% extends 'base.html' %}
{% block title %}Brain{% endblock %}
{% block head %}
  <link rel="stylesheet" href="{{ asset('brain.css') }}">
{% endblock %}
{% block body_class %}wall-page{% endblock %}
{% block topbar_extra %}
  <span class="clock" id="clock">--:--</span>
  <button class="ghost" id="dim-toggle" type="button" title="Switch between the 3D web and the 2D brain"><span class="seg">2D</span><span class="seg active">3D</span></button>
  <button class="ghost" id="glow-toggle" type="button" title="Toggle 3D bloom glow (3D view only)" aria-pressed="false">○ Glow off</button>
  <button class="ghost" id="wall-toggle" type="button" title="Wall mode: hide navigation (key W)">Wall mode</button>
{% endblock %}
{% block main %}
<div class="status" id="status" data-state="connecting"><span class="dot"></span><span class="txt">connecting</span></div>
<button class="wall-exit" id="wall-exit" type="button" title="Leave wall mode (W or Esc)">☰ Menu</button>
<div class="wall-hint" id="wall-hint" hidden>W / Esc to exit wall mode</div>

<main class="wall">
  <section class="col col-left">
    <div class="panel panel-limits">
      <h3>Limits <span class="hint">% left</span></h3>
      <div class="gauges" id="gauges"></div>
    </div>
    <div class="panel panel-memory">
      <h3>Memory</h3>
      <div class="mem-total"><span id="mem-total">0</span><small>memories</small></div>
      <div class="kinds" id="kinds"></div>
    </div>
    <section class="panel panel-ado" id="ado-card" hidden>
      <h3 id="ado-heading"><a href="/ado">ADO</a></h3>
      <a class="ado-card-counts" id="ado-counts" href="/ado" aria-label="Open Azure DevOps summary"></a>
    </section>
  </section>

  <section class="col col-centre">
    <div class="centre-top">
      <div class="panel panel-reminders"><h3>Reminders <span class="hint" id="reminders-count"></span></h3><ul class="reminders" id="reminders"></ul></div>
      <div class="brain-wrap" id="brain-wrap">
        <canvas id="brain" aria-label="Live memory and agent network"></canvas>
        <div class="brain3d" id="brain3d" hidden aria-label="Live memory and agent network, 3D"></div>
        <div class="brain-tip" id="brain-tip" hidden></div>
        <div class="brain-legend">
        <span><i style="--c:var(--color-claude)"></i>Claude</span>
        <span><i style="--c:var(--color-subagent)"></i>subagent</span>
        <span><i style="--c:var(--color-codex)"></i>Codex</span>
        <span class="sep" aria-hidden="true"></span>
        <span><i style="--c:var(--kind-note)"></i>note</span>
        <span><i style="--c:var(--kind-decision)"></i>decision</span>
        <span><i style="--c:var(--kind-preference)"></i>preference</span>
        <span><i style="--c:var(--kind-snippet)"></i>snippet</span>
        <span><i style="--c:var(--kind-todo)"></i>todo</span>
        </div>
      </div>
    </div>
    <div class="panel panel-messages">
      <h3><a href="/messages" title="Open the chats">Messages</a> <span class="hint" id="msg-unread"></span></h3>
      <ul class="msgs" id="msgs"></ul>
    </div>
  </section>

  <section class="col col-right">
    <section class="card">
      <h3>Rules</h3>
      {% if rules.error %}<p class="muted">Rules unavailable: {{ rules.error }}</p>
      {% elif rules.rules or rules.text_rules %}
      <table><tbody>{% for rule in rules.rules %}<tr><td class="mono">#{{ rule.id }}</td><td><span class="badge">{{ rule.action }}</span></td><td class="mono">{{ rule.tool }} {{ rule.command or rule.path or '' }}</td></tr>{% endfor %}</tbody></table>
      {% for rule in rules.text_rules %}<p><span class="mono">#{{ rule.id }}</span> {{ rule.text }}</p>{% endfor %}
      {% else %}<p class="muted">No active rules.</p>{% endif %}
      {% for item in rules.invalid %}<p class="muted mono">#{{ item.id }} invalid: {{ item.reason }}</p>{% endfor %}
      {% for item in rules.notices %}<p class="muted mono">#{{ item.id }} notice: {{ item.reason }}</p>{% endfor %}
      <h4>Pending rules <a href="/rules">Open Rules tab</a></h4>
      {% if rules.pending %}
      {% for item in rules.pending %}
      <p><span class="mono">#{{ item.id }}</span> {{ item.title }}{% if item.invalid %}</p><p class="muted">Invalid: {{ item.invalid }}{% else %} — {{ 'NEVER' if item.guard.action == 'deny' else 'ASK the user before' }} run {{ item.guard.tool }}{% if item.guard.command %} commands matching <span class="mono">{{ item.guard.command }}</span>{% elif item.guard.path %} on paths matching <span class="mono">{{ item.guard.path }}</span>{% endif %}{% endif %}</p>
      {% if item.source %}<p class="muted">Source: “{{ item.source }}”</p>{% endif %}
      {% if not item.invalid %}<form method="post" action="/rules/{{ item.id }}/approve" style="display:inline"><input type="hidden" name="next" value="/"><button type="submit">Approve</button></form>{% endif %}
      <form method="post" action="/rules/{{ item.id }}/reject" style="display:inline"><input type="hidden" name="next" value="/"><button type="submit">Reject</button></form>
      {% endfor %}
      {% else %}<p class="muted">No pending rules.</p>{% endif %}
    </section>
    <section class="card">
      <h3>Skills</h3>
      {% if skills.skills %}
      <table><tbody>{% for skill in skills.skills %}<tr><td class="mono">{{ skill.name }}</td><td>{{ skill.description }}{% if skill.briefing %} <span class="badge">briefing</span>{% endif %}</td></tr>{% endfor %}</tbody></table>
      {% else %}<p class="muted">No skills found.</p>{% endif %}
      {% for item in skills.invalid %}<p class="muted mono">{{ item.path }} invalid: {{ item.reason }}</p>{% endfor %}
    </section>
    <div class="panel panel-agents">
      <h3>Agents <span class="hint" id="agents-hint"></span></h3>
      <ul class="agents" id="agents"></ul>
    </div>
    <div class="panel panel-feed">
      <h3>Live activity</h3>
      <ul class="feed" id="feed"></ul>
    </div>
  </section>
</main>
{% endblock %}
{% block scripts %}
  <!-- Two local loads: 3d-force-graph 1.73.3 and three 0.162.0 bloom; bloom failure only disables glow. -->
  <script src="{{ asset('vendor/3d-force-graph/3d-force-graph.min.js') }}"></script>
  <script src="{{ asset('brain3d.js') }}"></script>
  <script nonce="{{ csp_nonce }}" type="importmap">{"imports":{"three":"/static/vendor/three/build/three.module.min.js"}}</script>
  <script nonce="{{ csp_nonce }}" type="module">
    // Dynamic import so a load failure can be caught and signalled to brain3d.js.
    import("/static/vendor/three/examples/jsm/postprocessing/UnrealBloomPass.js")
      .then(function (m) { window.__devmemBloom = m.UnrealBloomPass; window.dispatchEvent(new Event("devmem-bloom")); })
      .catch(function (e) { window.__devmemBloomError = "bloom module failed to load: " + ((e && e.message) || e); window.dispatchEvent(new Event("devmem-bloom-failed")); });
  </script>
  <script src="{{ asset('brain.js') }}"></script>
{% endblock %}