{% extends "base.html" %}
{% block title %}Dispatcher · Harbormaster{% endblock %}
{% block page_title %}Dispatcher{% 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="`${traces.length} traces · ${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>

  <!-- Trace waterfall — grouped by trace_id, indented by depth -->
  <section aria-label="Trace waterfall">
    <h3 class="text-xs uppercase tracking-wide text-foreground-subtle mb-2">
      Recent traces
      <span class="text-foreground-subtle" x-text="`(${traces.length})`"></span>
    </h3>
    <div x-show="traces.length === 0" role="status" class="text-xs text-foreground-subtle">
      No completed traces yet. The ring buffer holds the last 100 spans —
      they'll appear here grouped by trace_id as tools finish.
    </div>
    <ul x-show="traces.length > 0" class="space-y-3"
        data-trace-waterfall-list>
      <template x-for="trace in traces" :key="'trace:' + trace.trace_id">
        <li class="border border-border rounded p-2 bg-surface-1"
            :data-trace-id="trace.trace_id">
          <!-- Trace header: clickable to collapse/expand -->
          <button type="button"
                  class="w-full flex items-center gap-2 text-xs text-left"
                  :aria-expanded="!trace.collapsed"
                  data-trace-toggle
                  @click="trace.collapsed = !trace.collapsed">
            <span class="w-3 text-foreground-subtle"
                  x-text="trace.collapsed ? '▶' : '▼'"></span>
            <span class="font-mono text-accent"
                  x-text="trace.root.tool"></span>
            <span class="text-foreground-muted"
                  x-text="trace.root.project || '—'"></span>
            <span class="text-foreground-subtle"
                  x-text="`(${trace.spans.length} span${trace.spans.length === 1 ? '' : 's'})`"></span>
            <span class="ml-auto text-foreground-subtle"
                  x-text="`${traceDurationMs(trace)}ms`"></span>
          </button>

          <!-- Span rows: nested via depth -->
          <ul x-show="!trace.collapsed"
              class="mt-2 space-y-1"
              data-trace-spans>
            <template x-for="span in trace.spans" :key="'span:' + span.span_id">
              <li class="flex items-start gap-2 text-xs group relative focus-within:z-10"
                  :data-span-id="span.span_id"
                  :data-depth="span.depth"
                  :aria-describedby="`span-tip-${span.span_id}`"
                  tabindex="0">
                <!-- Indent column scales with depth (1.25rem per level) -->
                <span class="block flex-shrink-0"
                      :style="`width: ${0.25 + span.depth * 1.25}rem`"
                      aria-hidden="true"></span>
                <!-- Expand/collapse for span attributes -->
                <button type="button"
                        class="w-3 text-foreground-subtle flex-shrink-0"
                        :aria-expanded="!!span.expanded"
                        :aria-label="span.expanded ? `Hide ${span.tool} attributes` : `Show ${span.tool} attributes`"
                        data-span-toggle
                        @click="span.expanded = !span.expanded"
                        x-text="span.expanded ? '−' : '+'"></button>
                <span class="flex-1 min-w-0">
                  <!-- Single-line summary -->
                  <span class="flex items-center gap-2">
                    <span class="font-mono truncate"
                          :class="span.ok ? 'text-success' : 'text-danger'"
                          x-text="`[${formatRel(trace, span, 'start')}—${formatRel(trace, span, 'end')}] ${span.tool}`">
                    </span>
                    <span class="text-foreground-subtle text-[10px] uppercase tracking-wide"
                          x-text="span.ok ? 'ok' : 'error'"></span>
                    <span class="ml-auto h-1.5 bg-surface-3 rounded overflow-hidden flex-1 max-w-[40%]">
                      <span class="block h-full"
                            :class="span.ok ? 'bg-emerald-700' : 'bg-rose-700'"
                            :style="`margin-left: ${barOffsetPct(trace, span)}%; width: ${barWidthPct(trace, span)}%`"
                            :aria-label="`${span.tool} took ${span.duration_ms}ms`"></span>
                    </span>
                    <span class="text-foreground-subtle w-16 text-right"
                          x-text="`${span.duration_ms}ms`"></span>
                  </span>
                  <!--
                    v18.0.0a2: hover/focus tooltip summary. Reveals on
                    pointer-hover OR keyboard-focus on the row (the row
                    is `tabindex=0` and the tooltip is the row's
                    aria-describedby target). No new tooltip library —
                    Tailwind `group-hover` + `group-focus-within`
                    handle reveal; `role=tooltip` + matching id deliver
                    a11y. Pre-built summary string lives in
                    spanTooltipSummary(span) so the JS factory
                    centralizes the format and tests can pin it.
                  -->
                  <span :id="`span-tip-${span.span_id}`"
                        role="tooltip"
                        data-span-tooltip
                        class="absolute left-8 top-full mt-1 z-20 hidden
                               group-hover:block group-focus-within:block
                               whitespace-pre rounded bg-surface-3 px-2 py-1
                               text-[11px] text-foreground shadow"
                        x-text="spanTooltipSummary(span)"></span>
                  <!-- Expanded attribute panel -->
                  <dl x-show="span.expanded"
                      class="mt-1 grid grid-cols-[max-content_1fr] gap-x-2 gap-y-0.5 text-[11px] text-foreground-muted"
                      data-span-attributes>
                    <dt>span_id</dt><dd class="font-mono" x-text="span.span_id"></dd>
                    <dt>parent</dt><dd class="font-mono"
                                       x-text="span.parent_span_id ?? '—'"></dd>
                    <dt>trace</dt><dd class="font-mono" x-text="span.trace_id"></dd>
                    <dt>project</dt><dd x-text="span.project || '—'"></dd>
                    <dt>started</dt><dd x-text="formatTime(span.started_at)"></dd>
                    <dt>ended</dt><dd x-text="formatTime(span.ended_at)"></dd>
                  </dl>
                </span>
              </li>
            </template>
          </ul>
        </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>
  // v17.0.0a1: dispatcher trace waterfall renderer.
  //
  // Consumes hierarchical SSE events from v16.a6 (span_start /
  // span_end, both carry parent_span_id + trace_id). Groups completed
  // spans by trace_id, sorts each group by started_at, computes depth
  // by walking parent links, then renders as a nested waterfall with
  // bars positioned and sized relative to the trace's start/end
  // window.
  //
  // First paint: GET /api/dispatcher/recent for the last-N completed
  // spans. Live: EventSource('/api/dispatcher/trace') receives
  // span_start / span_end events; span_end appends to the matching
  // trace and re-derives depth.
  //
  // The `traceWaterfall()` factory name is preserved (the dispatcher
  // page test pins it). The "active" / in-flight rendering also
  // preserved unchanged so the live indicator keeps working.
  function traceWaterfall() {
    return {
      active: [],   // span_start without matching span_end
      // traces: array of {trace_id, root, spans: [], collapsed}
      // — newest trace first. Each span carries depth + duration_ms.
      traces: [],
      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=100');
          if (!r.ok) throw new Error('HTTP ' + r.status);
          const data = await r.json();
          // Server returns newest last; group all into traces.
          const spans = data.spans || [];
          this.traces = this._groupIntoTraces(spans);
        } 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 = this._normalizeSpan(span);
          this._appendCompleted(completed);
        } catch (_) { /* malformed event ignored */ }
      },

      // Convert a server span dict into the renderer's row shape.
      _normalizeSpan(s) {
        return {
          span_id: s.span_id,
          parent_span_id: s.parent_span_id ?? null,
          trace_id: s.trace_id ?? s.span_id,
          tool: s.tool,
          project: s.project ?? null,
          started_at: s.started_at,
          ended_at: s.ended_at,
          duration_ms: typeof s.duration_ms === 'number'
            ? s.duration_ms
            : Math.max(0, Math.round((s.ended_at - s.started_at) * 1000)),
          ok: !!s.ok,
          depth: 0,        // recomputed by _rebuildTrace
          expanded: false, // attribute panel state
        };
      },

      // Group a flat span list into per-trace_id buckets, sorted by
      // root started_at desc (newest first).
      _groupIntoTraces(rawSpans) {
        const norm = rawSpans.map(s => this._normalizeSpan(s));
        const byTrace = new Map();
        for (const s of norm) {
          if (!byTrace.has(s.trace_id)) byTrace.set(s.trace_id, []);
          byTrace.get(s.trace_id).push(s);
        }
        const traces = [];
        for (const [trace_id, spans] of byTrace) {
          traces.push(this._buildTrace(trace_id, spans));
        }
        traces.sort((a, b) => b.root.started_at - a.root.started_at);
        return traces;
      },

      // Build one trace from its span list: pick root, compute depth,
      // sort spans by started_at.
      _buildTrace(trace_id, spans) {
        // Sort by start time so render order matches temporal order.
        spans.sort((a, b) => a.started_at - b.started_at);
        // Find root: parent_span_id is null, OR span_id == trace_id.
        let root = spans.find(s => s.parent_span_id === null
                                   || s.span_id === s.trace_id);
        if (!root) root = spans[0];
        // Compute depth via parent walk; cap at 8 to keep indent sane.
        const byId = new Map(spans.map(s => [s.span_id, s]));
        for (const s of spans) {
          let depth = 0;
          let cur = s;
          while (cur && cur.parent_span_id != null && byId.has(cur.parent_span_id)) {
            depth += 1;
            cur = byId.get(cur.parent_span_id);
            if (depth >= 8) break;
          }
          s.depth = depth;
        }
        return {
          trace_id,
          root,
          spans,
          collapsed: false,
        };
      },

      // Append a completed span to its trace (creating a new trace if
      // needed). Cap at 100 traces to mirror the server ring.
      _appendCompleted(span) {
        let trace = this.traces.find(t => t.trace_id === span.trace_id);
        if (!trace) {
          trace = this._buildTrace(span.trace_id, [span]);
          this.traces = [trace, ...this.traces].slice(0, 100);
          return;
        }
        // Avoid duplicate appends if the same span_id is already there
        // (e.g. SSE replay after reconnect).
        if (trace.spans.some(s => s.span_id === span.span_id)) return;
        trace.spans = [...trace.spans, span];
        // Re-build to recompute depth + sort order.
        const rebuilt = this._buildTrace(trace.trace_id, trace.spans);
        rebuilt.collapsed = trace.collapsed;
        const idx = this.traces.indexOf(trace);
        this.traces.splice(idx, 1, rebuilt);
      },

      // Trace total duration: from earliest start to latest end.
      _traceWindow(trace) {
        let start = Infinity, end = -Infinity;
        for (const s of trace.spans) {
          if (s.started_at < start) start = s.started_at;
          if (s.ended_at > end) end = s.ended_at;
        }
        if (!Number.isFinite(start) || !Number.isFinite(end) || end <= start) {
          return { start: trace.root.started_at, end: trace.root.ended_at, span: 1 };
        }
        return { start, end, span: end - start };
      },

      traceDurationMs(trace) {
        const w = this._traceWindow(trace);
        return Math.max(0, Math.round((w.end - w.start) * 1000));
      },

      // Bar offset = (span.start - trace.start) / trace.span * 100.
      barOffsetPct(trace, span) {
        const w = this._traceWindow(trace);
        if (w.span <= 0) return 0;
        return Math.max(0, Math.min(100, ((span.started_at - w.start) / w.span) * 100));
      },

      // Bar width = (span.end - span.start) / trace.span * 100.
      barWidthPct(trace, span) {
        const w = this._traceWindow(trace);
        if (w.span <= 0) return 100;
        const pct = ((span.ended_at - span.started_at) / w.span) * 100;
        return Math.max(1, Math.min(100, pct));
      },

      // [start_ms—end_ms] relative to the trace start.
      formatRel(trace, span, which) {
        const w = this._traceWindow(trace);
        const t = which === 'start' ? span.started_at : span.ended_at;
        return `${Math.max(0, Math.round((t - w.start) * 1000))}ms`;
      },

      formatTime(epoch) {
        if (!epoch) return '—';
        try {
          return new Date(epoch * 1000).toISOString().replace('T', ' ').slice(0, 19);
        } catch (_) { return String(epoch); }
      },

      // v18.0.0a2: hover/focus tooltip summary for a span row.
      // Format: "name | duration | status | k1=v1 | k2=v2"
      // The first two attribute key-value pairs come from the span's
      // own non-trivial fields (project + span_id) — the dispatcher
      // span shape doesn't carry a separate `attributes` map, and
      // these are the same first two fields the expanded panel
      // surfaces, just inlined for the hover summary.
      spanTooltipSummary(span) {
        const parts = [
          span.tool,
          `${span.duration_ms}ms`,
          span.ok ? 'ok' : 'error',
        ];
        const attrs = [
          ['project', span.project || '—'],
          ['span_id', span.span_id],
        ];
        for (const [k, v] of attrs.slice(0, 2)) {
          parts.push(`${k}=${v}`);
        }
        return parts.join(' | ');
      },

      // ---- Active span helpers (preserved from v9.0.0a3) -----------------

      _maxActiveMs() {
        let max = 1;
        for (const s of this.active) {
          const elapsed = (this._now - s.started_at) * 1000;
          if (elapsed > max) max = elapsed;
        }
        return max;
      },

      liveBarPct(span) {
        const elapsed = Math.max(0, (this._now - span.started_at) * 1000);
        const max = this._maxActiveMs();
        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 %}