{% extends "base.html" %}

{% block title %}Constellation{% endblock %}

{% block head %}<script src="/radar/constellation.js" defer></script>{% endblock %}

{% block content %}

<h1>Constellation <span class="mute">· live</span></h1>

<p class="mute">Projects are prisms, linked by what depends on what. Agents orbit their project in the colour of their presence, and you are at the centre. Every message is a beam of light to its channel; tool calls pulse; a guard trip flares red.</p>

<div class="sky">

<svg id="sky" viewBox="0 0 900 640" role="img" aria-label="Projects, agents and messages, live">

<defs>

  <radialGradient id="core-glow"><stop offset="0" stop-color="#ffffff"/><stop offset=".45" stop-color="#9ecbff"/><stop offset="1" stop-color="#9ecbff" stop-opacity="0"/></radialGradient>

</defs>

{{ still|safe }}

</svg>

{% if empty %}<p class="sky-empty">No projects yet: add one, and it appears here.</p>{% endif %}

</div>

<ul class="legend">

  <li><span class="dot" data-p="online"></span> online</li>

  <li><span class="dot" data-p="busy"></span> busy</li>

  <li><span class="dot" data-p="idle"></span> idle</li>

  <li><span class="dot" data-p="blocked"></span> blocked</li>

  <li><span class="dot" data-p="offline"></span> offline</li>

</ul>

<script type="application/json" id="sky-data">{{ data|safe }}</script>

{% endblock %}