{# Observability panel — launcher-side health of the 5 native sidecar
   services plus direct links into the telemetry web UIs. Renders on the
   Monitoring tab (and Overview). Hidden entirely when the operator opted
   out via CYMATIX_OBSERVABILITY=0. #}

<section class="panel panel--observability">
  <h2 class="panel-title">Observability</h2>

  {% if state.observability.install_pending %}
    <div class="diagnostics-warn">
      <strong>Sidecar not installed.</strong>
      <span class="muted">
        Run <code>scripts/install-native-observability.ps1</code>
        (or <code>scripts/setup-grafana-telem.sh</code>) then restart the tray.
      </span>
    </div>
  {% endif %}

  {# Only the desktop app's launcher can start/stop the sidecar from here. #}
  {% set ctl = state.observability.control %}
  {% if ctl %}
    <div class="obs-control">
      <span class="muted">
        {% if ctl.status == "running" %}Running. The backend is exporting traces, metrics and logs to it.
        {% elif ctl.status == "starting" %}Starting. The backend restarts once the stack is up.
        {% elif ctl.status == "error" %}Could not start.
        {% elif ctl.status == "not_installed" %}Not installed on this machine.
        {% else %}Not running. Charts use this launcher's recent packets only.{% endif %}
      </span>
      {% if ctl.status == "running" %}
        <button type="button" class="btn btn--mini" data-action="obs-disable">Stop observability</button>
      {% elif ctl.status == "starting" %}
        <button type="button" class="btn btn--mini" disabled>Starting&hellip;</button>
      {% elif ctl.status in ("stopped", "error") %}
        <button type="button" class="btn btn--mini" data-action="obs-enable">Enable observability</button>
      {% endif %}
    </div>
    {% if ctl.error %}
      <div class="diagnostics-error"><strong>Observability error:</strong>
        <span class="muted">{{ ctl.error }}</span></div>
    {% endif %}
  {% endif %}

  {% if state.observability.services %}
    <ul class="obs-grid">
      {% for svc in state.observability.services %}
        <li class="obs-service" title="{{ svc.status }}">
          <span class="obs-dot obs-dot--{{ svc.status }}" aria-hidden="true"></span>
          <span class="obs-service__name">{{ svc.name }}</span>
        </li>
      {% endfor %}
    </ul>
  {% endif %}

  <div class="telem-links">
    {% for d in state.observability.links.dashboards %}
      <a class="telem-link" href="{{ d.url }}" target="_blank" rel="noopener">{{ d.title }}</a>
    {% endfor %}
    <a class="telem-link telem-link--alt" href="{{ state.observability.links.prometheus }}" target="_blank" rel="noopener">Prometheus</a>
  </div>
</section>