{% extends "base.html" %}
{% block content %}
<h1>Cognitive graph</h1>
<p class="lede">Live, polling <code>/api/graph</code> every 2s. A real node-link graph over ACR's own entities -- memory types, task classes, skills, models -- connected by real edges (which task class used which skill/model, and for how many tokens), not synthetic relationships. Hover a node to highlight its real connections and dim the rest; drag to pin, double-click to release. The timeline shows sequence and duration instead -- pick whichever question you're asking.</p>
<div class="theme-toggle" role="group" aria-label="Visualization view" style="max-width: 260px; margin: 0 0 0.85rem;">
  <button type="button" id="view-graph" aria-pressed="true">Graph</button>
  <button type="button" id="view-timeline" aria-pressed="false">Timeline</button>
</div>
<div class="legend" id="legend-graph">
  <span class="item"><span class="swatch circle" style="background:var(--accent); width:14px; height:14px; border:2px solid var(--accent)"></span>core (pulses on new events)</span>
  <span class="item"><span class="swatch circle" style="background:var(--wire)"></span>memory type (size = record count)</span>
  <span class="item"><span class="swatch circle" style="background:var(--info)"></span>task class (size = spawn count)</span>
  <span class="item"><span class="swatch circle" style="background:var(--ok)"></span>skill (size = times routed)</span>
  <span class="item"><span class="swatch circle" style="background:var(--accent)"></span>model / provider (size = call count)</span>
  <span class="item"><span class="swatch" style="background:var(--info)"></span>task (top strip, color = status)</span>
  <span class="item"><span class="swatch circle" style="background:var(--accent); width:6px; height:6px"></span>event flow (newest on the right)</span>
  <span class="item">line thickness = real token/cost weight of that edge</span>
</div>
<div class="legend" id="legend-timeline" style="display:none;">
  <span class="item"><span class="swatch" style="background:var(--ink-dim)"></span>created</span>
  <span class="item"><span class="swatch" style="background:var(--info)"></span>planning / executing / verifying</span>
  <span class="item"><span class="swatch" style="background:var(--ok)"></span>completed</span>
  <span class="item"><span class="swatch" style="background:var(--danger)"></span>failed</span>
  <span class="item">bar length = time from creation to last update (or now, if still running)</span>
</div>
<div class="table-wrap" style="padding: 0.5rem;">
<canvas id="graph" width="900" height="560" role="img" aria-label="Node-link graph of ACR's entities and their real connections" aria-describedby="graph-status" style="width:100%; max-width:900px; display:block; cursor:default;">Your browser doesn't support the canvas element needed to draw this graph. The legend above and the table views (Tasks, Memory, Tools) cover the same underlying data.</canvas>
<canvas id="timeline" width="900" height="420" role="img" aria-label="Timeline of task duration and status" aria-describedby="graph-status" style="width:100%; max-width:900px; display:none; cursor:default;">Your browser doesn't support the canvas element needed to draw this timeline. See the Tasks page for the same data in table form.</canvas>
</div>
<p id="graph-status" class="empty">connecting…</p>
<script src="/static/visualization.js"></script>
{% endblock %}