{% extends "base.html" %}
{% block title %}Dispatcher · Harbormaster{% endblock %}

{% block content %}
<section x-data="traceWaterfall()"
         x-init="init()"
         x-cloak
         class="bg-surface-2 border border-border rounded-lg p-4">
  <header class="flex items-center justify-between mb-4 gap-2 flex-wrap">
    <div class="flex items-baseline gap-3">
      <h2 class="text-lg font-bold">Dispatcher trace</h2>
      <a href="/" class="text-xs text-foreground-muted hover:text-accent">← Dashboard</a>
    </div>
    <div class="flex items-center gap-3 text-xs text-foreground-muted">
      <span :class="connected ? 'text-success' : 'text-warning'">
        <span aria-hidden="true">●</span>
        <span x-text="connected ? 'streaming' : 'reconnecting…'"></span>
      </span>
      <span x-text="`${recent.length} recent · ${active.length} active`"></span>
    </div>
  </header>

  <!-- Active (in-flight) spans -->
  <section class="mb-6" aria-label="Active spans">
    <h3 class="text-xs uppercase tracking-wide text-foreground-subtle mb-2">In-flight</h3>
    <div x-show="active.length === 0" role="status" class="text-xs text-foreground-subtle">
      No spans currently in flight. Run a tool to see spans appear here.
    </div>
    <ul x-show="active.length > 0" class="space-y-1">
      <template x-for="span in active" :key="'active:' + span.span_id">
        <li class="flex items-center gap-3 text-xs"
            :data-span-id="span.span_id">
          <span class="w-32 truncate text-accent font-mono"
                x-text="span.tool"></span>
          <span class="w-32 truncate text-foreground-muted"
                x-text="span.project || '—'"></span>
          <span class="flex-1 h-2 bg-surface-3 rounded overflow-hidden">
            <span class="block h-full bg-accent-strong animate-pulse"
                  :style="`width: ${liveBarPct(span)}%`"></span>
          </span>
          <span class="w-20 text-right text-foreground-subtle"
                x-text="liveDurationLabel(span)"></span>
        </li>
      </template>
    </ul>
  </section>

  <!-- Recent (completed) spans, newest first -->
  <section aria-label="Recent completed spans">
    <h3 class="text-xs uppercase tracking-wide text-foreground-subtle mb-2">
      Recent completed
      <span class="text-foreground-subtle" x-text="`(last ${recent.length})`"></span>
    </h3>
    <div x-show="recent.length === 0" role="status" class="text-xs text-foreground-subtle">
      No completed spans yet. The ring buffer holds the last 100 — they'll
      appear here as tools finish.
    </div>
    <ul x-show="recent.length > 0" class="space-y-1"
        data-trace-recent-list>
      <template x-for="span in recent" :key="'done:' + span.span_id">
        <li class="flex items-center gap-3 text-xs"
            :data-span-id="span.span_id"
            :class="span.ok ? '' : 'text-danger'">
          <span class="w-32 truncate font-mono"
                :class="span.ok ? 'text-success' : 'text-danger'"
                x-text="span.tool"></span>
          <span class="w-32 truncate text-foreground-muted"
                x-text="span.project || '—'"></span>
          <span class="flex-1 h-2 bg-surface-3 rounded overflow-hidden">
            <span class="block h-full"
                  :class="span.ok ? 'bg-emerald-700' : 'bg-rose-700'"
                  :style="`width: ${barPct(span)}%`"
                  :aria-label="`${span.tool} took ${span.duration_ms}ms`"></span>
          </span>
          <span class="w-20 text-right text-foreground-subtle"
                x-text="`${span.duration_ms}ms`"></span>
        </li>
      </template>
    </ul>
  </section>

  <p x-show="error" role="alert" aria-live="assertive"
     class="mt-3 text-xs text-danger" x-text="error"></p>
</section>

<script>
  // v9.0.0a3: dispatcher trace waterfall Alpine scope.
  //
  // First paint: GET /api/dispatcher/recent for the last-N completed spans.
  // Live: EventSource('/api/dispatcher/trace') receives span_start /
  //       span_end events.
  //
  // Bar widths are scaled against the longest span in the recent list;
  // active spans get their bar width from elapsed time vs. the same
  // baseline (so an in-flight tool grows visually as it runs).
  function traceWaterfall() {
    return {
      active: [],   // span_start without matching span_end
      recent: [],   // last-N completed spans, newest first
      connected: false,
      error: '',
      _es: null,
      _tickInterval: null,
      _now: Date.now() / 1000,

      async init() {
        await this._loadRecent();
        this._connectStream();
        // Re-render active-bar widths every 250ms while any are running.
        this._tickInterval = setInterval(() => {
          this._now = Date.now() / 1000;
        }, 250);
      },

      async _loadRecent() {
        try {
          const r = await hmFetch('/api/dispatcher/recent?limit=20');
          if (!r.ok) throw new Error('HTTP ' + r.status);
          const data = await r.json();
          // Newest last from server; reverse to show newest first in UI.
          this.recent = (data.spans || []).slice().reverse();
        } catch (e) {
          this.error = e.message;
        }
      },

      _connectStream() {
        try {
          this._es = new EventSource('/api/dispatcher/trace');
          this._es.addEventListener('ready', () => { this.connected = true; });
          this._es.addEventListener('heartbeat', () => { this.connected = true; });
          this._es.addEventListener('span_start', (e) => this._onSpanStart(e));
          this._es.addEventListener('span_end', (e) => this._onSpanEnd(e));
          this._es.onerror = () => { this.connected = false; };
        } catch (e) {
          this.error = e.message;
        }
      },

      _onSpanStart(e) {
        try {
          const span = JSON.parse(e.data);
          this.active = [...this.active, span];
        } catch (_) { /* malformed event ignored */ }
      },

      _onSpanEnd(e) {
        try {
          const span = JSON.parse(e.data);
          this.active = this.active.filter(s => s.span_id !== span.span_id);
          const completed = {
            span_id: span.span_id,
            tool: span.tool,
            project: span.project,
            started_at: span.started_at,
            ended_at: span.ended_at,
            duration_ms: Math.max(0, Math.round((span.ended_at - span.started_at) * 1000)),
            ok: span.ok,
          };
          // Newest first; cap at 100 to match server ring buffer.
          this.recent = [completed, ...this.recent].slice(0, 100);
        } catch (_) { /* malformed event ignored */ }
      },

      _maxDurationMs() {
        let max = 1; // avoid div-by-zero
        for (const s of this.recent) if (s.duration_ms > max) max = s.duration_ms;
        for (const s of this.active) {
          const elapsed = (this._now - s.started_at) * 1000;
          if (elapsed > max) max = elapsed;
        }
        return max;
      },

      barPct(span) {
        const max = this._maxDurationMs();
        return Math.max(2, Math.min(100, (span.duration_ms / max) * 100));
      },

      liveBarPct(span) {
        const elapsed = Math.max(0, (this._now - span.started_at) * 1000);
        const max = this._maxDurationMs();
        return Math.max(2, Math.min(100, (elapsed / max) * 100));
      },

      liveDurationLabel(span) {
        const elapsed = Math.max(0, (this._now - span.started_at) * 1000);
        return `${Math.round(elapsed)}ms`;
      },
    };
  }
</script>
{% endblock %}