{% extends "base.html" %}
{% block title %}Network · Harbormaster{% endblock %}
{% block page_title %}Network{% 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">
  <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>
</header>

{# v21.0.0a6: network tabs. The networkTabs() factory owns active/setTab
   and (for graph/chat/timeline) re-dispatches the legacy hm:network:view
   event consumed by networkPanel(); the stats tab toggles a sibling
   `data-network-stats` block. #}
<div x-data="networkTabs()" x-init="restoreFromHash()" class="mb-3">
  {% with tabs_id="network" %}{% include "_partials/_tabs.html" %}{% endwith %}
</div>

<!-- 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()"
         data-network-stats
         role="tabpanel"
         aria-label="Network stats"
         x-show="$store.hmNetTab.active === 'stats'"
         class="mb-4 border border-border rounded-md p-2 bg-surface-2/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>
  {# v21.0.9: when total_calls === 0, hide the 5-cell grid (whose
     "by tool / by source / top projects" cells render as empty
     unlabelled boxes) and show a clear empty-state instead. The
     window selector above still works so the operator can widen the
     range from here. #}
  <div x-show="stats && stats.total_calls === 0"
       role="status"
       data-empty-state="stats.no-traffic-in-window"
       class="border border-border-subtle bg-surface-2/40 text-foreground-dim rounded px-3 py-6 text-center text-xs leading-snug">
    <p class="text-foreground-muted font-semibold mb-1">
      No MCP calls in the
      <span x-text="window === 'all' ? 'recorded history' : 'last ' + window"></span>.
    </p>
    <p class="text-foreground-dim">
      Try a wider window using the selector above, or ask a project something
      via your MCP client to populate stats.
    </p>
  </div>
  <dl x-show="stats && stats.total_calls > 0"
      class="grid grid-cols-2 md:grid-cols-5 gap-2 text-xs">
    <div class="border border-border rounded p-2 bg-surface-1/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-surface-1/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-surface-1/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-surface-1/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-surface-1/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()"
         x-show="$store.hmNetTab.active !== 'stats'"
         role="tabpanel"
         aria-label="Network events"
         class="border border-border rounded-md p-2 bg-surface-2/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-2 text-xs"
       data-filter-controls
       data-tour-step="network-filter">
    <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>
  <div x-show="!error && events.length === 0" role="status"
       data-empty-state="network.no-events"
       class="border border-border-subtle bg-surface-2/40 text-foreground-dim rounded px-3 py-6 text-center text-xs leading-snug">
    <p class="text-foreground-muted font-semibold mb-1">No MCP traffic yet.</p>
    <p class="text-foreground-dim">
      Ask a project something via your MCP client and the call will appear here in real-time —
      including caller, target, timing, and result.
    </p>
  </div>

  <!-- Graph view -->
  <div x-show="view === 'graph' && events.length > 0"
       id="hm-network-graph"
       data-tour-step="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">
      {# v21.0.8: each row owns a tiny lazy-fetch state machine for
         the full request body. Clicking the toggle button transitions
         `open` to true and invokes loadFull(), which issues a single
         GET /api/network/events/{id}/full and caches the result. Rows
         without an id (legacy SSE pushes) or where the column is
         NULL keep showing the preview as the fallback. #}
      <li x-data="{
            open: false,
            full: null,
            loading: false,
            loadError: '',
            async loadFull() {
              if (this.full !== null || this.loading) return;
              if (typeof ev.id !== 'number') return;
              this.loading = true;
              this.loadError = '';
              try {
                const r = await hmFetch('/api/network/events/' + ev.id + '/full');
                if (!r.ok) throw new Error('HTTP ' + r.status);
                const d = await r.json();
                this.full = d.question_full ?? d.question_preview ?? '';
              } catch (e) {
                this.loadError = e.message || String(e);
              } finally {
                this.loading = false;
              }
            },
          }"
          class="px-3 py-1.5 text-xs hover:bg-surface-2/30">
        <button type="button"
                @click="open = !open; if (open) loadFull()"
                :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-accent">
          <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">
          <div x-show="loading" class="italic text-foreground-subtle">loading full request…</div>
          <div x-show="loadError" role="alert" class="text-danger"
               x-text="'failed to load: ' + loadError"></div>
          <div x-show="!loading && !loadError"
               class="whitespace-pre-wrap break-words"
               x-text="full !== null ? full : (ev.question_preview || '(no preview)')"></div>
          <div x-show="!loading && !loadError && full === null && ev.question_preview"
               class="mt-1 text-[10px] text-foreground-subtle italic">
            (showing preview — full body not stored for this older event)
          </div>
        </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-2"
       style="min-height: 60vh;">
    <div class="flex items-center justify-between gap-2 mb-2 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"
           data-tour-step="network-timeline">
        <button type="button"
                @click="timelineWindow = '1h'"
                :aria-pressed="timelineWindow === '1h'"
                :class="timelineWindow === '1h'
                        ? 'border-accent-strong text-accent bg-accent-soft/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-accent-soft/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>
    {# v21.0.9: nested empty-state for "events exist, but none in the
       selected window". Previously an empty-but-non-zero events array
       still rendered the SVG with all-zero bars — operators read this
       as "broken dashboard". Now the SVG is gated on
       timelineEventsTotal>0 and a clear empty-state with a CTA to
       switch the window takes over when the in-window count is 0. #}
    <div x-show="timelineEventsTotal === 0"
         role="status"
         data-empty-state="network.no-events-in-window"
         class="border border-border-subtle bg-surface-2/40 text-foreground-dim rounded px-3 py-6 text-center text-xs leading-snug">
      <p class="text-foreground-muted font-semibold mb-1">
        No events in the
        <span x-text="timelineWindow === '1h' ? 'last hour' : 'last 24h'"></span>.
      </p>
      <p class="text-foreground-dim mb-2"
         x-show="timelineWindow === '1h'">
        Switch to a wider window to see older traffic.
      </p>
      <p class="text-foreground-dim mb-2"
         x-show="timelineWindow !== '1h'">
        Run an MCP tool against a project to populate the timeline.
      </p>
      <button type="button"
              x-show="timelineWindow === '1h'"
              @click="timelineWindow = '24h'"
              class="text-xs px-3 py-1 rounded border border-accent-strong bg-accent-soft/30 hover:bg-accent-soft/50 text-accent transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1">
        Switch to 24h
      </button>
    </div>
    <svg x-show="timelineEventsTotal > 0"
         :viewBox="`0 0 ${timelineBuckets.length * 8} 100`"
         preserveAspectRatio="none"
         class="w-full h-32 bg-surface-1/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 x-show="timelineEventsTotal > 0"
       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,
      // v16.0.0a1: per-getter caches now live on `this._gc` managed by
      // the shared `cachedGetter` helper (see _partials/_cached_getter.html).
      // The previous _chatOrderCache / _timelineCache* slots were removed.
      // 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.
      // v16.0.0a1: routed through the shared cachedGetter helper.
      chatOrder() {
        return cachedGetter(this, 'chatOrder',
          { deps: [this.events.length] },
          () => [...this.events].reverse());
      },

      // 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.
      // v16.0.0a1: routed through the shared cachedGetter helper.
      // Invalidates when timelineWindow / events.length change OR the
      // 1s _timelineTick bumper fires AND the ttl elapsed.
      get timelineBuckets() {
        return cachedGetter(this, 'timelineBuckets',
          {
            deps: [this.timelineWindow, this.events.length, this._timelineTick],
            ttlMs: 1000,
          },
          () => this._buildTimelineBuckets());
      },

      _buildTimelineBuckets() {
        const now = Date.now();
        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++;
        }
        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 = '';
          // v16.0.0a1: events.length-keyed cachedGetter handles this
          // automatically; explicit invalidation no longer needed.
        } 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>

{# v16.0.0a3: network page tour wizard (carry-over #8). Three-step
   walkthrough on first /network visit, gated by localStorage
   `hm-network-tour-completed`. Anchors via `data-tour-step="network-*"`
   markup attrs (carry-over #6) — resilient to template refactors. #}
<div x-data="networkTour()"
     x-init="maybeStart()"
     x-show="active"
     x-cloak
     class="fixed inset-0 z-50 pointer-events-none"
     role="dialog"
     :aria-label="`Network tour step ${stepIndex + 1} of ${steps.length}`">
  <div class="absolute inset-0 bg-surface-1/40 pointer-events-auto"
       @click="next()"></div>
  <div x-show="anchorRect"
       :style="`top: ${popoverTop}px; left: ${popoverLeft}px;`"
       class="absolute pointer-events-auto bg-surface-2 border border-accent-strong rounded-md p-2.5 shadow-2xl max-w-sm">
    <header class="flex items-center justify-between mb-2 gap-2">
      <span class="text-[10px] uppercase tracking-wide text-accent"
            x-text="`Step ${stepIndex + 1} of ${steps.length}`"></span>
      <button type="button" @click="dismiss()"
              aria-label="Skip network tour"
              class="text-xs text-foreground-muted hover:text-danger focus-visible:ring-2 focus-visible:ring-accent">
        Skip
      </button>
    </header>
    <h3 class="text-sm font-bold text-foreground mb-1"
        x-text="currentStep().title"></h3>
    <p class="text-xs text-foreground-muted mb-2"
       x-text="currentStep().body"></p>
    <div class="flex items-center justify-between gap-2">
      <button type="button" @click="prev()"
              :disabled="stepIndex === 0"
              aria-label="Previous step"
              class="text-xs px-2 py-1 rounded border border-border text-foreground-muted hover:text-accent disabled:opacity-30 focus-visible:ring-2 focus-visible:ring-accent">
        Back
      </button>
      <button type="button" @click="next()"
              aria-label="Next step"
              class="text-xs px-3 py-1 rounded border border-accent-strong bg-accent-soft/30 hover:bg-accent-soft/50 text-accent focus-visible:ring-2 focus-visible:ring-accent">
        <span x-text="stepIndex === steps.length - 1 ? 'Done' : 'Next'"></span>
      </button>
    </div>
  </div>
</div>

<script>
  function networkTour() {
    return {
      active: false,
      stepIndex: 0,
      anchorRect: null,
      // 3 steps from the v16.0.0a3 brief.
      steps: [
        {
          tourStep: 'network-graph',
          title: 'Graph view',
          body: 'Cytoscape renders every observed MCP call between operator → harbormaster → backends → projects. Hover edges to see counts; the layout re-fits whenever you flip back to graph view.',
        },
        {
          tourStep: 'network-filter',
          title: 'Filter dropdown',
          body: 'Narrow the events table by tool, source, or time range. Filter state mirrors into the URL hash so you can share or bookmark a filtered view.',
        },
        {
          tourStep: 'network-timeline',
          title: 'Timeline toggle',
          body: 'Switch between 1-hour (1-min buckets) and 24-hour (1-hour buckets) windows for the event-density chart. SSE pushes refresh the chart at most once per second.',
        },
      ],
      currentStep() { return this.steps[this.stepIndex] || {}; },
      maybeStart() {
        try {
          const params = new URLSearchParams(location.search);
          const force = params.get('tour') === '1';
          const done = localStorage.getItem('hm-network-tour-completed') === '1';
          if (!force && done) return;
          requestAnimationFrame(() => this.start());
        } catch (_) { /* localStorage may be disabled */ }
      },
      start() {
        this.active = true;
        this.stepIndex = 0;
        this._positionPopover();
      },
      next() {
        if (this.stepIndex >= this.steps.length - 1) {
          this.complete();
          return;
        }
        this.stepIndex += 1;
        this._positionPopover();
      },
      prev() {
        if (this.stepIndex === 0) return;
        this.stepIndex -= 1;
        this._positionPopover();
      },
      dismiss() {
        this.active = false;
        // Don't mark "completed" on skip — operator may want to retry.
      },
      complete() {
        this.active = false;
        try { localStorage.setItem('hm-network-tour-completed', '1'); } catch (_) {}
      },
      _positionPopover() {
        const step = this.currentStep();
        if (!step.tourStep) { this.anchorRect = null; return; }
        const el = document.querySelector(`[data-tour-step="${step.tourStep}"]`);
        if (!el) { this.anchorRect = null; return; }
        const r = el.getBoundingClientRect();
        this.anchorRect = { top: r.top, left: r.left, width: r.width, height: r.height };
      },
      get popoverTop() {
        if (!this.anchorRect) return 0;
        const t = this.anchorRect.top + this.anchorRect.height + 12;
        return Math.max(12, Math.min(t, window.innerHeight - 200));
      },
      get popoverLeft() {
        if (!this.anchorRect) return 0;
        const w = 360;
        let l = this.anchorRect.left + (this.anchorRect.width / 2) - (w / 2);
        l = Math.max(12, Math.min(l, window.innerWidth - w - 12));
        return l;
      },
    };
  }

  // v21.0.0a6: networkTabs() controller — bridges the unified tab
  // strip (Graph/Chat/Timeline/Stats) to the existing networkPanel
  // which already listens to `hm:network:view` events. The Stats
  // branch toggles a sibling Alpine store consumed by both panels.
  document.addEventListener('alpine:init', () => {
    if (!window.Alpine.store('hmNetTab')) {
      window.Alpine.store('hmNetTab', { active: 'graph' });
    }
  });
  function networkTabs() {
    return {
      tabs: [
        { id: 'graph',    label: 'Graph',    shortcut: '1' },
        { id: 'chat',     label: 'Chat',     shortcut: '2' },
        { id: 'timeline', label: 'Timeline', shortcut: '3' },
        { id: 'stats',    label: 'Stats',    shortcut: '4' },
      ],
      active: 'graph',
      restoreFromHash() {
        const m = window.location.hash.match(/^#tab=([\w-]+)$/);
        if (m && this.tabs.find(t => t.id === m[1])) this.active = m[1];
        this._publish();
        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-4]$/.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);
        this._publish();
      },
      _publish() {
        // Mirror to Alpine store so the stats panel toggle works.
        try { window.Alpine.store('hmNetTab').active = this.active; } catch (_) {}
        // Re-dispatch as the legacy view event for networkPanel.
        if (this.active !== 'stats') {
          window.dispatchEvent(new CustomEvent('hm:network:view', { detail: this.active }));
        }
      },
    };
  }
</script>

{% endblock %}

{# v19.0.0a3: network inspector — compact 1h stats summary.
   The full stats panel (5-column grid, by-tool / by-source / top-projects
   breakdowns + filter controls) stays in the main column where it has
   room to breathe. The inspector mirrors the headline numbers
   (total_calls / error_rate / by_tool top entries) over the last 1h
   so the operator gets a glance at network health regardless of which
   view (graph / chat / timeline) is selected in main. #}
{% block inspector %}
<div class="p-2" x-data="networkInspector()" x-init="load(); start()"
     data-tour-step="inspector-content">
  {# v21.0.9: when the 1h window is genuinely empty (total_calls === 0)
     the previous version rendered three sections of zeros — operators
     read this as "broken dashboard" (literal report 2026-05-12). Now
     a single clear empty-state replaces the grid until traffic
     arrives, and the per-section breakdowns return automatically
     when the stats endpoint sees non-zero data. #}
  <div x-show="stats && stats.total_calls === 0"
       role="status"
       data-empty-state="inspector.no-recent-traffic"
       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-1">No MCP calls in the last hour.</p>
    <p class="text-foreground-dim">
      Inspector pins a 1h rolling window. Widen the main stats panel below
      (last 24h / 7d / all time) to see longer-range traffic, or run an
      MCP tool against a project to populate the feed.
    </p>
  </div>
  <template x-if="!stats || stats.total_calls > 0">
    <div>
      <section>
        <h3 class="text-xs uppercase tracking-wide text-foreground-subtle mb-2">Last 1h</h3>
        <dl class="grid grid-cols-2 gap-x-2 gap-y-1 text-xs mb-2">
          <dt class="text-foreground-muted">total calls</dt>
          <dd class="text-accent font-mono font-bold" x-text="stats?.total_calls ?? '—'"></dd>
          <dt class="text-foreground-muted">error rate</dt>
          <dd class="text-warning font-mono font-bold"
              x-text="((stats?.error_rate ?? 0) * 100).toFixed(1) + '%'"></dd>
        </dl>
      </section>
      <section class="border-t border-border pt-3 mb-2">
        <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="(count, tool) in (stats?.by_tool ?? {})" :key="'i-tool:' + tool">
            <li class="font-mono text-foreground-muted truncate">
              <span class="text-accent" x-text="tool"></span>
              <span class="text-foreground-subtle">×</span>
              <span x-text="count"></span>
            </li>
          </template>
          <li x-show="!stats || Object.keys(stats?.by_tool ?? {}).length === 0"
              class="text-foreground-subtle">no calls in window</li>
        </ul>
      </section>
      <section class="border-t border-border pt-3">
        <h3 class="text-xs uppercase tracking-wide text-foreground-subtle mb-2">Top projects</h3>
        <ul class="text-xs space-y-1">
          <template x-for="row in (stats?.top_projects_by_calls ?? []).slice(0, 5)" :key="'i-p:' + row.project">
            <li class="font-mono text-foreground-muted truncate">
              <span class="text-accent" x-text="row.project"></span>
              <span class="text-foreground-subtle ml-1" x-text="'×' + row.count"></span>
            </li>
          </template>
          <li x-show="(stats?.top_projects_by_calls ?? []).length === 0"
              class="text-foreground-subtle">no projects active</li>
        </ul>
      </section>
    </div>
  </template>
</div>
<script>
  // v19.0.0a3: networkInspector — compact /api/network/stats summary
  // pinned to the 1h window. Independent of the main panel's window
  // selector so the inspector stays consistent across views.
  function networkInspector() {
    return {
      stats: null,
      _interval: null,
      async load() {
        try {
          const r = await hmFetch('/api/network/stats?window=1h');
          if (!r.ok) return;
          this.stats = await r.json();
        } catch (_) { /* soft-fail */ }
      },
      start() {
        if (this._interval) return;
        this._interval = setInterval(() => this.load(), 10000);
      },
    };
  }
</script>
{% endblock %}