{% 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-md p-2.5">
  <header class="flex items-center justify-between mb-4 gap-2 flex-wrap">
    <div class="flex items-baseline gap-2">
      <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-2 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 · ${inflight.length} active`"></span>
    </div>
  </header>

  {# v21.0.0a6: dispatcher tabs. Existing In-flight + Recent sections
     stay where they are; the dispatcherTabs() factory toggles their
     visibility via a parent-scope `active` variable. Stats tab is a
     thin summary built from the existing traceWaterfall() state. #}
  <div x-data="dispatcherTabs()" x-init="restoreFromHash()">
  {% with tabs_id="dispatcher" %}{% include "_partials/_tabs.html" %}{% endwith %}

  <!-- Active (in-flight) spans -->
  <section x-show="active === 'in-flight'" x-transition role="tabpanel"
           class="mb-4" aria-label="Active spans">
    <h3 class="text-xs uppercase tracking-wide text-foreground-subtle mb-2">In-flight</h3>
    <div x-show="inflight.length === 0" role="status"
         data-empty-state="dispatcher.no-active"
         class="border border-border-subtle bg-surface-2/40 text-foreground-dim rounded px-3 py-4 text-xs leading-snug">
      <p class="text-foreground-muted font-semibold mb-0.5">No spans in flight.</p>
      <p class="text-foreground-dim">
        Live trace rows appear here as MCP tools start. Try
        <span class="font-mono text-accent">ask_project</span> from any client.
      </p>
    </div>
    <ul x-show="inflight.length > 0" class="space-y-1">
      <template x-for="span in inflight" :key="'active:' + span.span_id">
        <li class="flex items-center gap-2 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 x-show="active === 'recent'" x-transition role="tabpanel"
           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"
         data-empty-state="dispatcher.no-traces"
         class="border border-border-subtle bg-surface-2/40 text-foreground-dim rounded px-3 py-4 text-xs leading-snug">
      <p class="text-foreground-muted font-semibold mb-0.5">No completed traces yet.</p>
      <p class="text-foreground-dim">
        Traces appear here grouped by <span class="font-mono">trace_id</span> as tools finish.
        The ring buffer holds the last 100 spans.
      </p>
    </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 focus-visible:ring-2 focus-visible:ring-accent"
                  :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 focus-visible:ring-2 focus-visible:ring-accent"
                        :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>

  <!-- Stats tab — dispatcher status summary (v21.0.0a6). -->
  <section x-show="active === 'stats'" x-transition role="tabpanel"
           aria-label="Dispatcher stats"
           data-dispatcher-stats>
    <h3 class="text-xs uppercase tracking-wide text-foreground-subtle mb-2">Summary</h3>
    <dl class="grid grid-cols-2 md:grid-cols-4 gap-2 text-xs">
      <div class="border border-border rounded p-2 bg-surface-1/40">
        <dt class="text-foreground-subtle">in-flight spans</dt>
        <dd class="text-accent font-bold text-lg" x-text="inflight.length"></dd>
      </div>
      <div class="border border-border rounded p-2 bg-surface-1/40">
        <dt class="text-foreground-subtle">recent traces</dt>
        <dd class="text-accent font-bold text-lg" x-text="traces.length"></dd>
      </div>
      <div class="border border-border rounded p-2 bg-surface-1/40">
        <dt class="text-foreground-subtle">stream</dt>
        <dd :class="connected ? 'text-success' : 'text-warning'"
            class="font-bold text-lg"
            x-text="connected ? 'live' : 'reconnecting'"></dd>
      </div>
      <div class="border border-border rounded p-2 bg-surface-1/40">
        <dt class="text-foreground-subtle">total spans</dt>
        <dd class="text-accent font-bold text-lg"
            x-text="traces.reduce((n, t) => n + t.spans.length, 0)"></dd>
      </div>
    </dl>
  </section>

  </div><!-- /dispatcherTabs wrapper (v21.0.0a6) -->

  <p x-show="error" role="alert" aria-live="assertive"
     class="mt-2 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 {
      // v21.0.0a6: renamed from `active` to `inflight` so the
      // dispatcherTabs() nested scope can own its own `active`
      // (tab id) without shadowing the in-flight span array.
      inflight: [],   // 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.inflight = [...this.inflight, span];
        } catch (_) { /* malformed event ignored */ }
      },

      _onSpanEnd(e) {
        try {
          const span = JSON.parse(e.data);
          this.inflight = this.inflight.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.inflight) {
          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`;
      },
    };
  }

  // v21.0.0a6: dispatcherTabs() controller. Shape mirrors
  // projectTabs() / dashboardTabs() so the _tabs.html partial works
  // without modification. Keys 1..3 cycle tabs.
  function dispatcherTabs() {
    return {
      tabs: [
        { id: 'in-flight', label: 'In-flight', shortcut: '1' },
        { id: 'recent',    label: 'Recent',    shortcut: '2' },
        { id: 'stats',     label: 'Stats',     shortcut: '3' },
      ],
      active: 'in-flight',
      restoreFromHash() {
        const m = window.location.hash.match(/^#tab=([\w-]+)$/);
        if (m && this.tabs.find(t => t.id === m[1])) this.active = m[1];
        window.addEventListener('keydown', (e) => {
          if (['INPUT', 'TEXTAREA'].includes(e.target.tagName)) return;
          if (e.target.isContentEditable) return;
          if (e.metaKey || e.ctrlKey || e.altKey) return;
          if (/^[1-3]$/.test(e.key)) {
            const idx = parseInt(e.key, 10) - 1;
            if (this.tabs[idx]) this.setTab(this.tabs[idx].id);
          }
        });
      },
      setTab(id) {
        this.active = id;
        window.history.replaceState(null, '', '#tab=' + id);
      },
    };
  }
</script>
{% endblock %}

{# v19.0.0a3: dispatcher inspector — in-flight count + per-tool counter
   summary from /api/dispatcher/status. The full waterfall stays in main;
   the inspector mirrors the headline counters so the operator can see
   "is anything happening right now?" at a glance. #}
{% block inspector %}
<div class="p-2" x-data="dispatcherInspector()" x-init="load(); start()"
     data-tour-step="inspector-content">
  <section class="mb-4">
    <h3 class="text-xs uppercase tracking-wide text-foreground-subtle mb-2">In-flight</h3>
    <dl class="grid grid-cols-2 gap-x-2 gap-y-1 text-xs">
      <dt class="text-foreground-muted">active workers</dt>
      <dd class="text-accent font-mono font-bold" x-text="status?.active_workers ?? 0"></dd>
      <dt class="text-foreground-muted">queue depth</dt>
      <dd class="text-foreground font-mono" x-text="status?.queue_depth ?? 0"></dd>
      <dt class="text-foreground-muted">last dispatch</dt>
      <dd class="text-foreground-subtle font-mono text-[10px]" x-text="lastDispatchLabel()"></dd>
    </dl>
  </section>
  <section class="border-t border-border pt-3">
    <h3 class="text-xs uppercase tracking-wide text-foreground-subtle mb-2">By tool</h3>
    <ul class="text-xs space-y-1">
      <template x-for="row in toolRows()" :key="'i-d:' + row.tool">
        <li class="font-mono text-foreground-muted truncate">
          <span class="text-accent" x-text="row.tool"></span>
          <span class="text-foreground-subtle ml-1"
                x-text="'in_flight ' + row.in_flight + ' · done ' + row.total_completed + (row.total_failed ? ' · fail ' + row.total_failed : '')"></span>
        </li>
      </template>
      <li x-show="toolRows().length === 0" class="text-foreground-subtle">
        no tool activity yet
      </li>
    </ul>
  </section>
</div>
<script>
  // v19.0.0a3: dispatcherInspector — pulls /api/dispatcher/status every
  // 5s. Independent from the SSE waterfall in the main column so the
  // inspector stays populated even before the first span arrives.
  function dispatcherInspector() {
    return {
      status: null,
      _interval: null,
      async load() {
        try {
          const r = await hmFetch('/api/dispatcher/status');
          if (!r.ok) return;
          this.status = await r.json();
        } catch (_) { /* soft-fail */ }
      },
      start() {
        if (this._interval) return;
        this._interval = setInterval(() => this.load(), 5000);
      },
      toolRows() {
        const t = this.status?.tools || {};
        return Object.keys(t)
          .map(k => ({ tool: k, ...t[k] }))
          .sort((a, b) => b.in_flight - a.in_flight
            || b.total_completed - a.total_completed);
      },
      lastDispatchLabel() {
        const ts = this.status?.last_dispatched_at;
        if (!ts) return 'never';
        const ageS = Math.max(0, Date.now() / 1000 - ts);
        if (ageS < 60) return Math.round(ageS) + 's ago';
        if (ageS < 3600) return Math.round(ageS / 60) + 'm ago';
        return Math.round(ageS / 3600) + 'h ago';
      },
    };
  }
</script>
{% endblock %}