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

<nav class="mb-4 text-sm text-foreground-muted">
  <a href="/" class="hover:text-accent">← Dashboard</a>
  <span class="mx-2 text-foreground-subtle">/</span>
  <span class="text-foreground-muted">Network</span>
</nav>

<header class="mb-4 flex items-center justify-between gap-3 flex-wrap">
  <div>
    <h2 class="text-xl font-bold text-accent">Inter-project network</h2>
    <p class="text-xs text-foreground-subtle mt-1">
      Live MCP-call events. Edges thicken with call frequency.
    </p>
  </div>
  <div class="flex items-center gap-2 text-xs">
    <span class="text-foreground-subtle">view:</span>
    <button type="button" id="hm-network-view-graph"
            x-data
            @click="$dispatch('hm:network:view', 'graph')"
            aria-label="Switch to graph view"
            class="px-2 py-0.5 rounded border border-border hover:border-accent-strong text-foreground-muted hover:text-accent">
      Graph
    </button>
    <button type="button" id="hm-network-view-chat"
            x-data
            @click="$dispatch('hm:network:view', 'chat')"
            aria-label="Switch to chat view"
            class="px-2 py-0.5 rounded border border-border hover:border-accent-strong text-foreground-muted hover:text-accent">
      Chat
    </button>
    <!-- v14.0.0a4: timeline view — horizontal-bar event density -->
    <button type="button" id="hm-network-view-timeline"
            x-data
            @click="$dispatch('hm:network:view', 'timeline')"
            aria-label="Switch to timeline view"
            class="px-2 py-0.5 rounded border border-border hover:border-accent-strong text-foreground-muted hover:text-accent">
      Timeline
    </button>
  </div>
</header>

<!-- v11.0.0a6: aggregate metrics over the last 1h / 24h / 7d.
     Polls /api/network/stats; the window dropdown re-fetches. -->
<section x-data="networkStats()" x-init="loadStats()"
         class="mb-4 border border-border rounded-lg p-3 bg-gray-900/40">
  <header class="flex items-center justify-between gap-2 mb-2 flex-wrap">
    <h3 class="text-sm font-bold text-foreground-muted">Network stats</h3>
    <select x-model="window" @change="loadStats()"
            aria-label="Stats window"
            class="text-xs bg-surface-1 border border-border rounded px-2 py-0.5 text-foreground-muted">
      <option value="1h">last 1h</option>
      <option value="24h">last 24h</option>
      <option value="7d">last 7d</option>
      <option value="all">all time</option>
    </select>
  </header>
  <p x-show="error" role="alert" class="text-xs text-danger" x-text="error"></p>
  <dl x-show="stats" class="grid grid-cols-2 md:grid-cols-5 gap-2 text-xs">
    <div class="border border-border rounded p-2 bg-gray-950/40">
      <dt class="text-foreground-subtle">total calls</dt>
      <dd class="text-accent font-bold text-lg" x-text="stats?.total_calls ?? 0"></dd>
    </div>
    <div class="border border-border rounded p-2 bg-gray-950/40">
      <dt class="text-foreground-subtle">error rate</dt>
      <dd class="text-warning font-bold text-lg"
          x-text="((stats?.error_rate ?? 0) * 100).toFixed(1) + '%'"></dd>
    </div>
    <div class="border border-border rounded p-2 bg-gray-950/40">
      <dt class="text-foreground-subtle mb-1">by tool</dt>
      <dd class="text-foreground-muted text-[11px]">
        <template x-for="(count, tool) in stats?.by_tool ?? {}" :key="'tool:' + tool">
          <span class="block">
            <span class="text-accent" x-text="tool"></span>
            <span class="text-foreground-subtle">×</span>
            <span x-text="count"></span>
          </span>
        </template>
      </dd>
    </div>
    <!-- v12.0.0a5: per-source breakdown — call counts + per-source
         error rate. Operators can spot a misbehaving project quickly. -->
    <div class="border border-border rounded p-2 bg-gray-950/40">
      <dt class="text-foreground-subtle mb-1">by source</dt>
      <dd class="text-foreground-muted text-[11px]">
        {# v13.0.0a4: each source row is a button that dispatches the
           hm:network:filter event so the events panel below can apply
           the filter without re-rendering the whole stats panel. #}
        <template x-for="(row, source) in stats?.by_source ?? {}" :key="'src:' + source">
          <button type="button"
                  @click="window.dispatchEvent(new CustomEvent('hm:network:filter', { detail: { source } }))"
                  class="block w-full text-left rounded px-1 hover:bg-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
                  :aria-label="'Filter events to source ' + source">
            <span class="text-accent font-mono" x-text="source"></span>
            <span class="text-foreground-subtle ml-1" x-text="'×' + row.calls"></span>
            <span x-show="row.error_rate > 0" class="text-warning ml-1"
                  x-text="'(' + (row.error_rate * 100).toFixed(0) + '% err)'"></span>
          </button>
        </template>
      </dd>
    </div>
    <div class="border border-border rounded p-2 bg-gray-950/40">
      <dt class="text-foreground-subtle mb-1">top projects</dt>
      <dd class="text-foreground-muted text-[11px]">
        <template x-for="row in stats?.top_projects_by_calls ?? []" :key="'p:' + row.project">
          <span class="block">
            <span class="text-accent font-mono" x-text="row.project"></span>
            <span class="text-foreground-subtle ml-1" x-text="'×' + row.count"></span>
          </span>
        </template>
      </dd>
    </div>
  </dl>
</section>

<section x-data="networkPanel()" x-init="init()"
         class="border border-border rounded-lg p-3 bg-gray-900/40">
  {# v13.0.0a4: server-side filter controls. Tool + source dropdowns
     are derived from the stats panel above (auto-refresh every 30s);
     the date inputs accept HTML5 datetime-local strings (operator's
     local TZ, converted to unix ms before being sent to the API).
     Filter state is mirrored to the URL so an operator can share /
     bookmark a filtered view. #}
  <div class="flex flex-wrap items-end gap-2 mb-3 text-xs"
       data-filter-controls>
    <div class="flex flex-col gap-0.5">
      <label class="text-foreground-subtle" :for="$id('hm-net-filter-tool')">tool</label>
      <select :id="$id('hm-net-filter-tool')" x-model="filters.tool"
              @change="applyFilters()"
              class="bg-surface-2 border border-border rounded px-1 py-0.5 text-foreground">
        <option value="">(any)</option>
        <template x-for="t in toolOptions" :key="'t:' + t">
          <option :value="t" x-text="t"></option>
        </template>
      </select>
    </div>
    <div class="flex flex-col gap-0.5">
      <label class="text-foreground-subtle" :for="$id('hm-net-filter-source')">source</label>
      <select :id="$id('hm-net-filter-source')" x-model="filters.source"
              @change="applyFilters()"
              class="bg-surface-2 border border-border rounded px-1 py-0.5 text-foreground">
        <option value="">(any)</option>
        <template x-for="s in sourceOptions" :key="'s:' + s">
          <option :value="s" x-text="s"></option>
        </template>
      </select>
    </div>
    <div class="flex flex-col gap-0.5">
      <label class="text-foreground-subtle" :for="$id('hm-net-filter-from')">from</label>
      <input type="datetime-local" :id="$id('hm-net-filter-from')"
             x-model="filters.fromLocal" @change="applyFilters()"
             class="bg-surface-2 border border-border rounded px-1 py-0.5 text-foreground">
    </div>
    <div class="flex flex-col gap-0.5">
      <label class="text-foreground-subtle" :for="$id('hm-net-filter-to')">to</label>
      <input type="datetime-local" :id="$id('hm-net-filter-to')"
             x-model="filters.toLocal" @change="applyFilters()"
             class="bg-surface-2 border border-border rounded px-1 py-0.5 text-foreground">
    </div>
    <button type="button" @click="clearFilters()"
            x-show="hasFilters()"
            class="text-foreground-muted hover:text-accent border border-border rounded px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent">
      clear
    </button>
  </div>
  <div class="flex items-baseline justify-between gap-2 mb-2 text-xs">
    <span class="text-foreground-subtle" x-text="`${events.length} event${events.length === 1 ? '' : 's'} recorded`"></span>
    {# v11.0.0a4: stateBadge unification — replaces two inline color-
       only spans with the shared icon+label badge component. #}
    <span x-show="connected"
          x-html="window.harbormaster.stateBadgeHtml({
            state: 'live', icon: '●', color: 'emerald', label: 'live',
          })"></span>
    <span x-show="!connected && initialized"
          x-html="window.harbormaster.stateBadgeHtml({
            state: 'offline', icon: '⊘', color: 'amber', label: 'offline',
          })"></span>
  </div>
  <p x-show="error" :aria-hidden="!error" role="alert"
     class="text-xs text-danger mb-2" x-text="error"></p>
  <p x-show="!error && events.length === 0" role="status"
     data-empty-state="network.no-events"
     class="text-xs text-foreground-muted px-4 py-6 text-center">
    No MCP calls recorded yet — ask a project something and watch this fill in.
  </p>

  <!-- Graph view -->
  <div x-show="view === 'graph' && events.length > 0"
       id="hm-network-graph"
       class="border border-border rounded bg-surface-1"
       style="width: 100%; height: 60vh;"></div>

  <!-- v10.0.0a8: chat view (chronological event log).
       Each row: [time] caller → tool(target) "<truncated question>"
       Click a row to expand to the full preview text. -->
  <ul x-show="view === 'chat' && events.length > 0"
      id="hm-network-chat"
      class="border border-border rounded bg-surface-1 divide-y divide-gray-900 overflow-y-auto"
      style="max-height: 60vh;">
    <template x-for="(ev, i) in chatOrder()" :key="'ce:' + i + ':' + ev.timestamp_ms">
      <li x-data="{ open: false }"
          class="px-3 py-1.5 text-xs hover:bg-gray-900/30">
        <button type="button"
                @click="open = !open"
                :aria-expanded="open"
                aria-label="Toggle event details"
                class="w-full text-left flex items-baseline gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400">
          <span class="font-mono text-foreground-subtle shrink-0"
                x-text="new Date(ev.timestamp_ms).toLocaleTimeString()"></span>
          <span class="text-foreground-muted" x-text="ev.caller"></span>
          <span class="text-foreground-subtle" aria-hidden="true">→</span>
          <span :class="{
                  'text-accent': ev.tool === 'ask_project',
                  'text-info': ev.tool === 'delegate_task',
                  'text-accent': ev.tool === 'fan_out_ask',
                  'text-success': ev.tool === 'recall_qa',
                }"
                class="text-foreground-muted font-mono"
                x-text="ev.tool"></span>
          <span class="text-foreground-subtle" aria-hidden="true">(</span>
          <span class="text-accent" x-text="ev.target"></span>
          <span class="text-foreground-subtle" aria-hidden="true">)</span>
          <span class="truncate text-foreground-muted italic"
                x-show="!open"
                x-text="ev.question_preview ? `“${ev.question_preview.slice(0, 80)}${ev.question_preview.length > 80 ? '…' : ''}”` : ''"></span>
          <span x-show="ev.status === 'error'"
                class="ml-auto text-danger shrink-0">err</span>
        </button>
        <div x-show="open" class="mt-1 ml-12 text-[11px] text-foreground-muted whitespace-pre-wrap"
             x-text="ev.question_preview || '(no preview)'"></div>
      </li>
    </template>
  </ul>

  <!-- v14.0.0a4: timeline view — horizontal-bar event-density chart.
       Pure inline SVG (no new vendor deps). 1h window uses 1-min
       buckets (60 bars); 24h uses 1-hour buckets (24 bars). Each
       bar's height is proportional to event count in that bucket. -->
  <div x-show="view === 'timeline' && events.length > 0"
       id="hm-network-timeline"
       class="border border-border rounded bg-surface-1 p-3"
       style="min-height: 60vh;">
    <div class="flex items-center justify-between gap-2 mb-3 text-xs">
      <span class="text-foreground-muted">
        Event density —
        <span x-text="timelineWindow === '1h' ? 'last hour (1-min buckets)' : 'last 24h (1-hour buckets)'"></span>
      </span>
      <div class="flex items-center gap-1" role="group" aria-label="Timeline window">
        <button type="button"
                @click="timelineWindow = '1h'"
                :aria-pressed="timelineWindow === '1h'"
                :class="timelineWindow === '1h'
                        ? 'border-accent-strong text-accent bg-cyan-900/30'
                        : 'border-border text-foreground-muted hover:text-accent'"
                class="px-2 py-0.5 rounded border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent">
          1h
        </button>
        <button type="button"
                @click="timelineWindow = '24h'"
                :aria-pressed="timelineWindow === '24h'"
                :class="timelineWindow === '24h'
                        ? 'border-accent-strong text-accent bg-cyan-900/30'
                        : 'border-border text-foreground-muted hover:text-accent'"
                class="px-2 py-0.5 rounded border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent">
          24h
        </button>
      </div>
    </div>
    <svg :viewBox="`0 0 ${timelineBuckets.length * 8} 100`"
         preserveAspectRatio="none"
         class="w-full h-32 bg-gray-950/40 rounded"
         role="img"
         :aria-label="`${timelineEventsTotal} events over the last ${timelineWindow}`">
      <template x-for="(b, i) in timelineBuckets" :key="'tb:' + i">
        <rect :x="i * 8"
              :y="100 - (timelineMaxBucket > 0 ? (b.count / timelineMaxBucket) * 100 : 0)"
              width="7"
              :height="timelineMaxBucket > 0 ? (b.count / timelineMaxBucket) * 100 : 0"
              :class="b.count > 0 ? 'fill-accent' : 'fill-transparent'">
          <title x-text="`${b.label}: ${b.count} events`"></title>
        </rect>
      </template>
    </svg>
    <p class="text-[11px] text-foreground-subtle mt-2">
      <span x-text="timelineEventsTotal"></span> events ·
      peak bucket: <span x-text="timelineMaxBucket"></span>
    </p>
  </div>
</section>

<script src="/static/vendor/cytoscape.min.js"></script>
<script>
  function networkPanel() {
    return {
      // v10.0.0a8: localStorage-backed view preference. Defaults
      // to 'graph' on first visit; subsequent loads pick up the
      // operator's last toggle.
      view: 'graph',          // toggled by hm:network:view dispatch from header
      // v14.0.0a4: timeline view state. Default 1h; switch to 24h
      // when the operator wants the bigger picture.
      timelineWindow: '1h',
      events: [],
      cy: null,
      connected: false,
      initialized: false,
      error: '',
      _eventSource: null,
      // v11.0.0a6: chatOrder() reverse-cache. The chat view re-runs
      // chatOrder on every Alpine paint; recomputing [...events]
      // .reverse() each time is wasteful when no new events arrived.
      _chatOrderCache: null,
      _chatOrderEventsLen: -1,
      // v15.0.0a3: timeline bucket cache. SSE bursts can fire many
      // events per second; without throttling the getter recomputes
      // all 60 buckets each push. We cache buckets and invalidate at
      // most once per second (the smallest visible bucket width).
      _timelineCache: null,
      _timelineCacheStamp: 0,
      _timelineCacheWindow: '',
      _timelineCacheLen: -1,
      // v15.0.0a3: 1s interval handle for throttle tick.
      _timelineThrottleTimer: null,
      // v15.0.0a3: timeline reactivity bumper. Reading this in the
      // getter creates an Alpine dep so the SVG re-paints when the
      // throttle timer fires. We bump it every 1s when there are
      // pending events; the getter re-runs and the cache is rebuilt.
      _timelineTick: 0,
      // v13.0.0a4: server-side filters. `fromLocal` / `toLocal` hold
      // the datetime-local input strings ("YYYY-MM-DDTHH:MM"); they're
      // converted to unix-ms before being sent to the API. URL state
      // is mirrored on every applyFilters() call.
      filters: { tool: '', source: '', fromLocal: '', toLocal: '' },
      toolOptions: ['ask_project', 'delegate_task', 'fan_out_ask',
                    'recall_qa', 'project_status', 'list_projects',
                    'list_hosts', 'project_graph'],
      sourceOptions: [],

      hasFilters() {
        return Boolean(this.filters.tool || this.filters.source
                       || this.filters.fromLocal || this.filters.toLocal);
      },

      // v13.0.0a4: build the events query string from the filters
      // object. Date inputs in HTML5 datetime-local format are local
      // time; the API expects unix ms.
      _buildQuery(limit) {
        const params = new URLSearchParams();
        params.set('limit', String(limit));
        if (this.filters.tool) params.set('tool', this.filters.tool);
        if (this.filters.source) params.set('source', this.filters.source);
        if (this.filters.fromLocal) {
          const t = Date.parse(this.filters.fromLocal);
          if (!isNaN(t)) params.set('from', String(t));
        }
        if (this.filters.toLocal) {
          const t = Date.parse(this.filters.toLocal);
          if (!isNaN(t)) params.set('to', String(t));
        }
        return params.toString();
      },

      // v13.0.0a4: mirror filter state into the URL hash so an
      // operator can share a filtered view. Use the hash (not the
      // query string) so the SSR side ignores it — same convention
      // as v3.0.0a9's other filterable surfaces.
      _writeFilterUrl() {
        const params = new URLSearchParams();
        if (this.filters.tool) params.set('tool', this.filters.tool);
        if (this.filters.source) params.set('source', this.filters.source);
        if (this.filters.fromLocal) params.set('from', this.filters.fromLocal);
        if (this.filters.toLocal) params.set('to', this.filters.toLocal);
        const next = params.toString() ? '#' + params.toString() : '';
        if (location.hash !== next) {
          history.replaceState(null, '', location.pathname + location.search + next);
        }
      },

      _readFilterUrl() {
        if (!location.hash) return;
        const params = new URLSearchParams(location.hash.slice(1));
        for (const k of ['tool', 'source']) {
          if (params.has(k)) this.filters[k] = params.get(k) || '';
        }
        if (params.has('from')) this.filters.fromLocal = params.get('from') || '';
        if (params.has('to')) this.filters.toLocal = params.get('to') || '';
      },

      async applyFilters() {
        this._writeFilterUrl();
        await this._loadInitial();
      },

      clearFilters() {
        this.filters = { tool: '', source: '', fromLocal: '', toLocal: '' };
        this.applyFilters();
      },

      async init() {
        // v10.0.0a8: restore the last-used view.
        try {
          const saved = localStorage.getItem('hm:network:view');
          // v14.0.0a4: 'timeline' is now an accepted persisted view.
          if (saved === 'chat' || saved === 'graph' || saved === 'timeline') this.view = saved;
        } catch (_) { /* default 'graph' */ }
        // Listen for the header view-toggle. Persist on change.
        window.addEventListener('hm:network:view', (e) => {
          this.view = e.detail || 'graph';
          try { localStorage.setItem('hm:network:view', this.view); } catch (_) {}
          if (this.view === 'graph' && this.events.length > 0) {
            // Re-render after a tick — the container becomes visible
            // again and Cytoscape needs the layout pass to re-fit.
            requestAnimationFrame(() => this._renderGraph());
          }
        });
        // v13.0.0a4: cross-section filter dispatch from the by-source
        // stats panel ("click a source to filter the events table").
        window.addEventListener('hm:network:filter', (e) => {
          const detail = e.detail || {};
          if (detail.source !== undefined) this.filters.source = detail.source;
          if (detail.tool !== undefined) this.filters.tool = detail.tool;
          this.applyFilters();
        });
        this._readFilterUrl();
        // v14.0.0a2: derive source dropdown from real distinct values.
        await this._loadSourceOptions();
        await this._loadInitial();
        this._subscribe();
        // v15.0.0a3: start the timeline throttle tick so SSE-driven
        // bucket counts re-render at most once per second.
        this._startTimelineThrottle();
        if (this.view === 'graph' && this.events.length > 0) this._renderGraph();
        this.initialized = true;
      },

      // v14.0.0a2: GET /api/network/sources returns distinct caller
      // values from the most recent 1000 events. Replaces the empty /
      // hardcoded sourceOptions list. Failure is non-fatal — the
      // dropdown just stays empty (the "(any)" option still works).
      async _loadSourceOptions() {
        try {
          const r = await hmFetch('/api/network/sources?scan_limit=1000');
          if (!r.ok) return;
          const data = await r.json();
          if (Array.isArray(data.sources)) this.sourceOptions = data.sources;
        } catch (_) { /* non-fatal */ }
      },

      // v15.0.0a3: live-add an event's caller (source) to the
      // dropdown if it's not already there. Set-based dedup. Used
      // by the SSE handler so newly-active sources appear without a
      // page reload — closes the v14.a2 staleness gap.
      _maybeAppendSourceOption(ev) {
        const src = ev && ev.caller;
        if (!src) return;
        // sourceOptions is small (typically <50); a Set conversion
        // here is cheap and avoids missing a fresh source under
        // back-to-back SSE events.
        if (!(this._sourceOptionsSet)) {
          this._sourceOptionsSet = new Set(this.sourceOptions || []);
        }
        if (this._sourceOptionsSet.has(src)) return;
        this._sourceOptionsSet.add(src);
        this.sourceOptions = [...this.sourceOptions, src].sort();
      },

      // v10.0.0a8: chat view shows newest-first so the latest
      // activity is at the top without scrolling.
      // v11.0.0a6: cached. Invalidated when events.length changes
      // (push from SSE) — events are append-only modulo the FIFO
      // shift at cap, so length is a sufficient invalidation key.
      chatOrder() {
        if (this._chatOrderEventsLen === this.events.length
            && this._chatOrderCache !== null) {
          return this._chatOrderCache;
        }
        this._chatOrderCache = [...this.events].reverse();
        this._chatOrderEventsLen = this.events.length;
        return this._chatOrderCache;
      },

      // v14.0.0a4: bucket events into per-minute (1h window) or
      // per-hour (24h window) bins. Pure client-side — operates on
      // the same `events` array the chat view uses, so no extra
      // network round-trip. Returns array of {label, count} ascending
      // chronologically (oldest left, newest right).
      // v15.0.0a3: cached + 1s-throttled. SSE bursts no longer cause
      // an O(N×60) recompute per event push. We invalidate when:
      //   - the timeline window changed (1h ↔ 24h),
      //   - the events.length changed AND the cached stamp is >1s old,
      //   - or the periodic 1s _timelineTick bumper fired.
      get timelineBuckets() {
        // Touch reactive deps so Alpine re-runs us on tick / event push.
        // (Reading is enough — Alpine tracks the get.)
        // eslint-disable-next-line no-unused-expressions
        this._timelineTick;
        const now = Date.now();
        const sameWindow = this._timelineCacheWindow === this.timelineWindow;
        const sameLen = this._timelineCacheLen === this.events.length;
        const cacheFresh = (now - this._timelineCacheStamp) < 1000;
        if (this._timelineCache && sameWindow && sameLen && cacheFresh) {
          return this._timelineCache;
        }
        const isHour = this.timelineWindow === '24h';
        const bucketCount = isHour ? 24 : 60;
        const bucketMs = isHour ? (60 * 60 * 1000) : (60 * 1000);
        const start = now - bucketCount * bucketMs;
        const buckets = [];
        for (let i = 0; i < bucketCount; i++) {
          const t = start + i * bucketMs;
          const d = new Date(t);
          const label = isHour
            ? `${d.getHours().toString().padStart(2, '0')}:00`
            : `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`;
          buckets.push({ label, count: 0 });
        }
        for (const ev of this.events) {
          if (!ev.timestamp_ms || ev.timestamp_ms < start || ev.timestamp_ms > now) continue;
          const idx = Math.min(
            bucketCount - 1,
            Math.floor((ev.timestamp_ms - start) / bucketMs),
          );
          buckets[idx].count++;
        }
        this._timelineCache = buckets;
        this._timelineCacheStamp = now;
        this._timelineCacheWindow = this.timelineWindow;
        this._timelineCacheLen = this.events.length;
        return buckets;
      },

      // v15.0.0a3: start the 1s throttle timer. Bumping
      // `_timelineTick` triggers Alpine to re-evaluate the getter,
      // which then sees the cache as stale (>1s) and rebuilds.
      _startTimelineThrottle() {
        if (this._timelineThrottleTimer) return;
        this._timelineThrottleTimer = setInterval(() => {
          this._timelineTick = (this._timelineTick + 1) % 1_000_000;
        }, 1000);
      },

      get timelineMaxBucket() {
        let m = 0;
        for (const b of this.timelineBuckets) if (b.count > m) m = b.count;
        return m;
      },

      get timelineEventsTotal() {
        let n = 0;
        for (const b of this.timelineBuckets) n += b.count;
        return n;
      },

      async _loadInitial() {
        try {
          const r = await hmFetch('/api/network/events?' + this._buildQuery(500));
          if (!r.ok) throw new Error('HTTP ' + r.status);
          const data = await r.json();
          this.events = Array.isArray(data.events) ? data.events : [];
          this.error = '';
          // Invalidate the chat-order cache; events array was replaced.
          this._chatOrderEventsLen = -1;
        } catch (e) {
          this.error = 'failed to load: ' + e.message;
        }
      },

      _subscribe() {
        // EventSource doesn't support custom headers, so the SSE
        // stream is bearer-protected via cookies/IP scope rather than
        // the bearer-token header. Acceptable for v10 (operator
        // reachable on loopback / private network).
        try {
          this._eventSource = new EventSource('/api/network/stream');
          this._eventSource.addEventListener('event', (msg) => {
            try {
              const ev = JSON.parse(msg.data);
              this.events.push(ev);
              if (this.events.length > 500) this.events.shift();
              if (this.view === 'graph' && this.cy) this._addEventToGraph(ev);
              // v15.0.0a3: live-add the source into the filter dropdown.
              // Set-based dedup — appending an already-present option
              // would duplicate the visible row.
              this._maybeAppendSourceOption(ev);
            } catch (_) { /* drop malformed */ }
          });
          this._eventSource.addEventListener('open', () => {
            this.connected = true;
          });
          this._eventSource.addEventListener('error', () => {
            this.connected = false;
          });
        } catch (e) {
          this.error = 'stream subscribe failed: ' + e.message;
        }
      },

      _renderGraph() {
        if (!window.cytoscape) {
          this.error = 'cytoscape failed to load';
          return;
        }
        // Aggregate events into nodes + weighted edges.
        const nodes = new Map();   // id → {data:{id,label}}
        const edges = new Map();   // edgeKey → {data:{source,target,tool,weight}}
        for (const ev of this.events) {
          for (const n of [ev.caller, ev.target]) {
            if (!nodes.has(n)) nodes.set(n, { data: { id: n, label: n } });
          }
          const key = ev.caller + '|' + ev.target + '|' + ev.tool;
          const existing = edges.get(key);
          if (existing) {
            existing.data.weight += 1;
          } else {
            edges.set(key, {
              data: {
                source: ev.caller,
                target: ev.target,
                tool: ev.tool,
                weight: 1,
              },
            });
          }
        }
        const elements = [...nodes.values(), ...edges.values()];
        if (this.cy) this.cy.destroy();
        this.cy = window.cytoscape({
          container: document.getElementById('hm-network-graph'),
          elements: elements,
          style: [
            {
              selector: 'node',
              style: {
                'background-color': '#0e7490',
                'label': 'data(label)',
                'color': '#e2e8f0',
                'font-size': '11px',
                'text-valign': 'center',
                'text-halign': 'center',
                'text-outline-color': '#0f172a',
                'text-outline-width': 2,
              },
            },
            {
              selector: 'edge',
              style: {
                'curve-style': 'bezier',
                'target-arrow-shape': 'triangle',
                'width': 'mapData(weight, 1, 20, 1, 8)',
                'line-color': '#475569',
                'target-arrow-color': '#475569',
              },
            },
            // v10.0.0a7: tool-color edges.
            { selector: 'edge[tool = "ask_project"]',
              style: { 'line-color': '#22d3ee', 'target-arrow-color': '#22d3ee' } },
            { selector: 'edge[tool = "delegate_task"]',
              style: { 'line-color': '#a78bfa', 'target-arrow-color': '#a78bfa' } },
            { selector: 'edge[tool = "fan_out_ask"]',
              style: { 'line-color': '#67e8f9', 'target-arrow-color': '#67e8f9' } },
            { selector: 'edge[tool = "recall_qa"]',
              style: { 'line-color': '#34d399', 'target-arrow-color': '#34d399' } },
          ],
          layout: { name: 'cose', idealEdgeLength: 100, animate: false },
        });
      },

      _addEventToGraph(ev) {
        // Cheap incremental update: bump or create the edge, add new
        // nodes, then run a quick layout step. Full re-render is
        // reserved for the initial mount.
        if (!this.cy) return;
        for (const n of [ev.caller, ev.target]) {
          if (!this.cy.getElementById(n).length) {
            this.cy.add({ data: { id: n, label: n } });
          }
        }
        const id = `${ev.caller}__${ev.target}__${ev.tool}`;
        const existing = this.cy.getElementById(id);
        if (existing.length) {
          existing.data('weight', (existing.data('weight') || 1) + 1);
        } else {
          this.cy.add({
            data: {
              id,
              source: ev.caller,
              target: ev.target,
              tool: ev.tool,
              weight: 1,
            },
          });
        }
      },
    };
  }

  // v11.0.0a6: aggregate metrics. Polls /api/network/stats on init
  // + on window-dropdown change. No live re-poll loop — operator
  // refreshes by re-selecting the window or reloading the page.
  function networkStats() {
    return {
      window: '24h',
      stats: null,
      error: '',
      async loadStats() {
        this.error = '';
        try {
          const r = await hmFetch(
            '/api/network/stats?window=' + encodeURIComponent(this.window),
          );
          if (!r.ok) throw new Error('HTTP ' + r.status);
          this.stats = await r.json();
        } catch (e) {
          this.error = 'failed to load stats: ' + e.message;
        }
      },
    };
  }
</script>
{% endblock %}