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

<!-- v6.0.0a4: keyboard shortcut help popover.
     Press ? to toggle; Escape dismisses. Header pill is the
     pointer-friendly entry point. The popover renders a single source
     of truth for shortcut docs — when v6.0.0a5+ adds more shortcuts,
     they go here. -->
<div x-data="helpPopover()"
     @keydown.window="onKeyDown($event)">
  <button type="button" @click="open = !open"
          class="fixed bottom-4 right-4 z-30 bg-surface-2/80 hover:bg-surface-3 border border-border text-accent w-9 h-9 rounded-full text-base font-bold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1"
          :title="open ? 'close help (Esc)' : 'keyboard shortcuts (?)'"
          :aria-label="open ? 'Close keyboard shortcuts help' : 'Open keyboard shortcuts help'"
          :aria-expanded="open"
          aria-controls="hm-help-popover">
    <span x-text="open ? '×' : '?'" aria-hidden="true"></span>
  </button>
  <div x-show="open" x-cloak
       id="hm-help-popover"
       role="dialog"
       aria-label="Keyboard shortcuts"
       :aria-hidden="!open"
       @click.away="open = false"
       class="fixed bottom-16 right-4 z-30 w-80 max-h-[70vh] overflow-y-auto bg-surface-1 border border-border rounded-md shadow-xl p-2.5">
    <header class="flex items-baseline justify-between mb-2">
      <h3 class="text-sm font-bold text-foreground">Keyboard shortcuts</h3>
      <button type="button" @click="open = false"
              aria-label="Close keyboard shortcuts help"
              class="text-foreground-muted hover:text-foreground text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1">close</button>
    </header>
    <template x-for="section in shortcuts" :key="section.scope">
      <div class="mb-2">
        <h4 class="text-[11px] uppercase tracking-wide text-foreground-subtle mb-1.5"
            x-text="section.scope"></h4>
        <ul class="space-y-1 text-xs">
          <template x-for="row in section.rows" :key="row.keys">
            <li class="flex items-baseline gap-2">
              <kbd class="bg-surface-3 border border-border rounded px-1.5 py-0.5 text-accent font-mono text-[10px] shrink-0"
                   x-text="row.keys"></kbd>
              <span class="text-foreground-muted" x-text="row.action"></span>
            </li>
          </template>
        </ul>
      </div>
    </template>
    <p class="mt-2 pt-3 border-t border-border text-[11px] text-foreground-subtle">
      Press <kbd class="bg-surface-3 border border-border rounded px-1 py-0 text-accent font-mono">Esc</kbd>
      or <kbd class="bg-surface-3 border border-border rounded px-1 py-0 text-accent font-mono">?</kbd>
      to dismiss.
    </p>
  </div>
</div>

{# v21.0.0a6: dashboard tab system. The Overview pane carries the
   existing dashboard (Quick Ask, KPI strip, card grid, project grid);
   Activity adds a larger recent-events feed; Plugins lifts the bridge
   + plugin status strip out for a dedicated surface. The dashboardTabs()
   factory owns active/setTab/tabs; the _tabs.html partial renders the
   strip. URL hash + 1-3 keyboard shortcuts wired in the factory. #}
<div x-data="dashboardTabs()" x-init="restoreFromHash()">
{% with tabs_id="dashboard" %}{% include "_partials/_tabs.html" %}{% endwith %}

<!-- Overview tab: full existing dashboard content. -->
<div x-show="active === 'overview'" x-transition role="tabpanel" aria-label="Overview">

<!-- v19.0.0a5: Quick Ask card. Prominent at top of dashboard so
     operators can fire a question without scrolling to the project grid.
     Pragmatic implementation: navigates to /projects/{name}?q=... — the
     project page already wires the askForm() partial (which honours
     the `?q=` pre-fill via askForm.init()). This avoids duplicating
     the SSE plumbing on the dashboard while keeping the entry point
     visible from the new shell layout. -->
<section x-data="quickAsk()" x-init="init()"
         aria-label="Quick ask"
         data-quick-ask
         class="mb-4 bg-surface-2 border border-border rounded-md p-2.5">
  <header class="flex items-center justify-between mb-2">
    <h2 class="text-sm font-bold text-foreground-muted">Quick ask</h2>
    <kbd class="text-[10px] text-foreground-subtle bg-surface-3 border border-border rounded px-1 py-0.5 font-mono">Cmd-K to expand</kbd>
  </header>
  <form @submit.prevent="ask()" class="flex flex-col md:flex-row gap-2">
    <select x-model="project"
            aria-label="Quick ask project"
            class="md:w-56 bg-surface-1 border border-border rounded px-2 py-1.5 text-sm focus:border-accent-strong focus:outline-none">
      <option value="">— pick project —</option>
      <template x-for="p in projects" :key="'qa:' + p">
        <option :value="p" x-text="p"></option>
      </template>
    </select>
    <input type="text" x-model="question"
           placeholder="What do you want to know?"
           aria-label="Quick ask question"
           class="flex-1 bg-surface-1 border border-border rounded px-2 py-1.5 text-sm focus:border-accent-strong focus:outline-none">
    {# v21.0.0a10: model alias picker. Empty = backend default — query
       string omits ?model= so the project page's askForm honours the
       backend's default_model. #}
    <select x-model="model"
            aria-label="Quick ask model"
            data-quick-ask-model
            class="md:w-32 bg-surface-1 border border-border rounded px-2 py-1.5 text-sm focus:border-accent-strong focus:outline-none">
      <option value="">auto</option>
      <option value="haiku">⚡ haiku</option>
      <option value="sonnet">⚖ sonnet</option>
      <option value="opus">🧠 opus</option>
    </select>
    <button type="submit"
            :disabled="!project || question.trim().length < 2"
            aria-label="Ask project"
            class="bg-accent-strong hover:bg-accent disabled:bg-surface-3 disabled:text-foreground-muted text-white font-bold px-3 py-1.5 rounded text-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1">
      Ask →
    </button>
  </form>
  <p x-show="error" :aria-hidden="!error" role="alert" class="mt-1 text-xs text-danger" x-text="error"></p>
</section>

<!-- v8.0.0a5: KPI strip. 5-cell at-a-glance summary atop the
     dashboard so operators see the project / embed / query / bridge
     / dispatcher state without scanning the body. Auto-refreshes
     every 30s; soft-fails per cell if the underlying source is
     missing.
     v19.0.0a5: kept atop card grid so the at-a-glance row stays
     above the fold. -->
<section x-data="kpiStrip()" x-init="loadKpi(); loadBudget(); loadHistory(); startPolling()"
         aria-label="Dashboard at-a-glance metrics"
         data-tour-step="kpi-strip"
         class="mb-4 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-2">
  <div class="border border-border rounded-md p-2 bg-surface-2/40"
       data-kpi-cell="projects"
       data-tour-step="kpi-strip">
    <p class="text-[10px] uppercase tracking-wide text-foreground-muted">Projects</p>
    <p class="text-2xl font-bold text-foreground"
       x-text="kpi.projects ?? '—'"
       :aria-label="`${kpi.projects ?? 0} projects discovered`"></p>
    <div class="mt-1 text-accent" data-kpi-sparkline="projects"
         x-html="historySparkline('projects')"></div>
  </div>
  <div class="border border-border rounded-md p-2 bg-surface-2/40"
       data-kpi-cell="active-embeds">
    <p class="text-[10px] uppercase tracking-wide text-foreground-muted">Active embeds</p>
    <p class="text-2xl font-bold"
       :class="activeEmbedsClass()"
       x-text="activeEmbedsLabel()"
       :aria-label="`Reembed phase ${kpi.active_embeds?.phase || 'unknown'}`"></p>
    <div class="mt-1 text-accent" data-kpi-sparkline="active-embeds"
         x-html="historySparkline('active_embeds')"></div>
  </div>
  <div class="border border-border rounded-md p-2 bg-surface-2/40"
       data-kpi-cell="recent-queries">
    <p class="text-[10px] uppercase tracking-wide text-foreground-muted">Recent queries (1h)</p>
    <p class="text-2xl font-bold text-foreground"
       x-text="kpi.recent_queries ?? '—'"
       :aria-label="`${kpi.recent_queries ?? 0} queries in the last hour`"></p>
    <div class="mt-1 text-accent" data-kpi-sparkline="recent-queries"
         x-html="historySparkline('recent_queries')"></div>
  </div>
  <div class="border border-border rounded-md p-2 bg-surface-2/40"
       data-kpi-cell="bridge">
    <p class="text-[10px] uppercase tracking-wide text-foreground-muted">Bridge</p>
    <p class="text-sm font-bold pt-1.5"
       :class="bridgeClass()"
       x-text="kpi.bridge ?? '—'"
       :aria-label="`Bridge ${kpi.bridge || 'unknown'}`"></p>
  </div>
  <div class="border border-border rounded-md p-2 bg-surface-2/40"
       data-kpi-cell="dispatcher">
    <p class="text-[10px] uppercase tracking-wide text-foreground-muted">Dispatcher</p>
    <p class="text-sm font-bold pt-1.5 text-success"
       x-text="kpi.dispatcher ?? '—'"
       :aria-label="`Dispatcher ${kpi.dispatcher || 'unknown'}`"></p>
  </div>
  <!-- v14.0.0a4: per-host call budget summary. Shows the worst-usage
       host's percentage; "—" if no hosts have a budget configured.
       Click cell-text to navigate to /network for the full breakdown.
       v15.0.0a4: hover reveals the per-tool budget breakdown beneath.
       The data is pulled lazily on first hover (loadToolsBudget), so
       operators that never hover pay zero cost. -->
  <div class="border border-border rounded-md p-2 bg-surface-2/40 relative"
       data-kpi-cell="hosts-budget"
       @mouseenter="showToolsBudget()"
       @mouseleave="toolsBudgetHover = false">
    <p class="text-[10px] uppercase tracking-wide text-foreground-muted">Host budget</p>
    <p class="text-2xl font-bold pt-0.5"
       :class="hostBudgetClass()"
       x-text="hostBudgetLabel()"
       :aria-label="hostBudgetAriaLabel()"></p>
    <div class="mt-1 text-accent" data-kpi-sparkline="host-budget"
         x-html="historySparkline('host_budget')"></div>
    <!-- v15.0.0a4: per-tool breakdown on hover.
         v17.0.0a4: also surface tightest-cap axis breakdown
         (per-host / per-tool / per-project) so operators see
         which axis is bottlenecking without opening the projects-
         budget endpoint. The tightest axis is highlighted. -->
    <div x-show="toolsBudgetHover && (toolsBudget.tools || []).length > 0"
         x-cloak
         data-kpi-tightest-tooltip
         class="absolute left-0 right-0 top-full mt-1 z-10 border border-border rounded bg-surface-1/95 p-2 text-[10px] space-y-0.5 shadow-lg">
      <!-- v17.0.0a4: tightest-cap breakdown for the worst-usage host. -->
      <p class="text-foreground-subtle uppercase tracking-wide"
         x-show="tightestBreakdown.host">
        Tightest cap
        <span class="text-foreground" x-text="tightestBreakdown.host || ''"></span>
      </p>
      <template x-for="row in tightestBreakdown.axes"
                :key="'ta:' + row.axis + ':' + (row.label || '')">
        <div class="flex items-baseline gap-2"
             data-tightest-axis-row
             :data-tightest-axis="row.axis"
             :data-tightest-axis-winner="row.is_tightest ? 'true' : 'false'"
             :class="row.is_tightest ? 'text-warning font-bold' : 'text-foreground-muted'">
          <span class="font-mono truncate" x-text="row.label"></span>
          <span x-text="row.usage_pct == null ? '—' : `${row.usage_pct}%`"></span>
        </div>
      </template>
      <p class="text-foreground-subtle uppercase tracking-wide pt-1">Per-tool · 24h</p>
      <template x-for="t in (toolsBudget.tools || [])" :key="'tb:' + t.tool">
        <div class="flex items-baseline gap-2">
          <span class="font-mono text-foreground-muted truncate" x-text="t.tool"></span>
          <span class="text-foreground-subtle"
                x-text="t.budget == null ? `${t.calls_24h} calls` : `${t.usage_pct}% (${t.calls_24h}/${t.budget})`"></span>
        </div>
      </template>
    </div>
  </div>
</section>

<!-- v19.0.0a5: card grid. The dashboard widgets below this point
     flow as cards in a 2-column responsive grid. Wide widgets
     (reembed table, recall search, graph) span both columns via
     `md:col-span-2`. -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-4" data-card-grid>

<!-- v19.0.0a5: Recent activity card. Mirrors the inspector activity
     feed for operators who keep the right pane collapsed. Reuses the
     existing /api/network/events endpoint (last 10 MCP calls). -->
<section x-data="recentActivityCard()" x-init="load(); start()"
         data-recent-activity-card
         class="bg-surface-2 border border-border rounded-md p-2.5">
  <header class="flex items-center justify-between mb-2">
    <h3 class="text-sm font-bold text-foreground-muted">Recent activity</h3>
    <a href="/network" class="text-xs text-accent hover:underline">view all →</a>
  </header>
  <ul class="text-xs space-y-1">
    <template x-for="ev in events" :key="'rac:' + ev.timestamp_ms + ':' + ev.tool + ':' + ev.target">
      <li class="font-mono text-foreground-muted truncate">
        <span class="text-foreground-subtle" x-text="ev.time"></span>
        <span class="text-accent ml-1" x-text="ev.tool"></span>
        <span class="text-foreground-muted ml-1" x-text="ev.target"></span>
      </li>
    </template>
    <li x-show="!events.length"
        class="text-foreground-dim text-[11px] leading-snug border border-border-subtle bg-surface-2/40 rounded p-2">
      <span class="block text-foreground-muted font-semibold mb-0.5">No recent activity.</span>
      Ask any project something via your MCP client and the call will appear here in real-time.
    </li>
  </ul>
</section>

<!-- v2.1.0a1: bridge + plugin status strip. Sticky on desktop,
     collapsible on mobile. Loads async, doesn't block project grid.
     v19.0.0a5: spans both columns inside the card grid (it has its
     own internal 2-col bridge/plugins layout). -->
<section x-data="statusStrip()" x-init="loadAll()"
         class="md:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-2">
  <article class="border border-border rounded-md p-2.5 bg-surface-2/40">
    <header class="flex items-center justify-between mb-2">
      <h3 class="text-sm font-bold text-foreground-muted">FleetQ Bridge</h3>
      <!-- v12.0.0a2: migrated from inline color/icon spans to the
           shared `stateBadgeHtml` helper. Visual output identical;
           `bridgeBadgeProps()` consolidates state, icon, color, and
           tooltip selection in one place. -->
      <span x-html="window.harbormaster.stateBadgeHtml(bridgeBadgeProps())"></span>
    </header>
    <dl class="text-xs space-y-1 text-foreground-muted" x-show="!bridgeError">
      <div><dt class="inline text-foreground-subtle">enabled:</dt>
        <dd class="inline ml-1" x-text="bridge.fleetq_enabled"></dd></div>
      <div><dt class="inline text-foreground-subtle">register_as_bridge:</dt>
        <dd class="inline ml-1" x-text="bridge.register_as_bridge"></dd></div>
      <div><dt class="inline text-foreground-subtle">base_url:</dt>
        <dd class="inline ml-1 text-accent" x-text="bridge.base_url"></dd></div>
      <div><dt class="inline text-foreground-subtle">token (env var):</dt>
        <dd class="inline ml-1"
            :class="bridge.api_token_present ? 'text-success' : 'text-warning'"
            x-text="bridge.api_token_present ? `${bridge.api_token_env} ✓` : `${bridge.api_token_env} (empty)`"></dd></div>
      <div><dt class="inline text-foreground-subtle">writeback:</dt>
        <dd class="inline ml-1"
            x-text="`trajectories=${bridge.write_trajectories}, kg=${bridge.write_kg} (${bridge.kg_extractor})`"></dd></div>
      <div x-show="bridge.runtime && bridge.runtime.available && bridge.runtime.state_file_present">
        <dt class="inline text-foreground-subtle">runtime:</dt>
        <dd class="inline ml-1"
            x-text="runtimeSummary()"
            :class="runtimeColorClass()"></dd>
      </div>
      <div x-show="bridge.runtime && bridge.runtime.last_error" class="text-danger">
        <dt class="inline text-foreground-subtle">last_error:</dt>
        <dd class="inline ml-1" x-text="bridge.runtime && bridge.runtime.last_error"></dd>
      </div>
    </dl>
    <p x-show="bridgeError" :aria-hidden="!bridgeError" role="alert" aria-live="assertive" class="text-xs text-danger" x-text="bridgeError"></p>
  </article>

  <article class="border border-border rounded-md p-2.5 bg-surface-2/40">
    <header class="flex items-center justify-between mb-2 gap-2 flex-wrap">
      <h3 class="text-sm font-bold text-foreground-muted">Plugins</h3>
      <div class="flex items-center gap-2">
        <!-- v14.0.0a6: host filter — defaults to "local". When set to a
             configured host name, the card refetches from
             /api/plugins?host=NAME (SSH-based remote discovery). -->
        <select x-model="pluginHost"
                @change="loadPlugins()"
                aria-label="Plugin host filter"
                x-show="(pluginHosts || []).length > 0"
                class="text-[10px] bg-surface-1 border border-border rounded px-1 py-0.5 text-foreground-muted">
          <option value="local">local</option>
          <!-- v15.0.0a2: "all" — concurrent fan-out across every host. -->
          <option value="all" x-show="(pluginHosts || []).length > 1">all</option>
          <template x-for="h in pluginHosts" :key="'ph:' + h">
            <option :value="h" x-text="h"></option>
          </template>
        </select>
        <!-- v15.0.0a2: "Compare config" button — shown when a remote host
             is selected. Opens an inline diff panel below the plugin
             rows showing the unified diff between local + remote
             harbormaster.toml. -->
        <button type="button"
                x-show="pluginHost && pluginHost !== 'local' && pluginHost !== 'all'"
                @click="loadConfigDiff()"
                aria-label="Compare config with remote host"
                class="text-[10px] px-1.5 py-0.5 rounded border border-border hover:border-accent-strong text-foreground-muted hover:text-accent focus-visible:ring-2 focus-visible:ring-accent">
          Compare config
        </button>
        <!-- v12.0.0a2: migrated to shared stateBadgeHtml helper. -->
        <span x-html="window.harbormaster.stateBadgeHtml(pluginsBadgeProps())"></span>
      </div>
    </header>
    <p x-show="plugins.error"
       class="text-xs text-warning mb-2"
       x-text="plugins.error"></p>
    <div x-show="!pluginsError" class="text-xs space-y-1">
      <div x-show="(plugins.plugins || []).length === 0"
           class="text-foreground-dim leading-snug border border-border-subtle bg-surface-2/40 rounded p-2"
           data-empty-state="plugins.none">
        <p class="text-foreground-muted font-semibold mb-0.5">No plugins installed.</p>
        <p class="text-foreground-dim">
          Plugins extend Harbormaster with new MCP tools. Install via
          <span class="font-mono text-accent">pip install harbormaster-plugin-&lt;name&gt;</span>
          then restart.
        </p>
      </div>
      <template x-for="row in (plugins.plugins || [])" :key="row.entry_point + ':' + row.dist_name">
        <div class="flex items-baseline gap-2">
          <!-- v12.0.0a2: per-plugin status badge migrated to shared
               stateBadgeHtml helper. -->
          <span x-html="window.harbormaster.stateBadgeHtml(pluginRowBadgeProps(row))"></span>
          <span class="text-foreground-muted truncate" x-text="row.dist_name || '<unknown>'"></span>
          <span class="text-foreground-subtle text-[10px]" x-show="row.entry_point" x-text="`(${row.entry_point})`"></span>
        </div>
      </template>
    </div>
    <p x-show="pluginsError" :aria-hidden="!pluginsError" role="alert" aria-live="assertive" class="text-xs text-danger" x-text="pluginsError"></p>
    <!-- v15.0.0a2: per-host fan-out summary. Only rendered when the
         host filter is set to "all"; populated from the
         /api/plugins?host=all envelope. -->
    <div x-show="pluginHost === 'all' && pluginsAllHosts"
         class="mt-2 border-t border-border pt-2 space-y-1 text-[10px]">
      <p class="text-foreground-subtle">Per-host summary:</p>
      <template x-for="(payload, name) in (pluginsAllHosts || {})" :key="'phost:' + name">
        <div class="flex items-baseline gap-2">
          <span class="font-mono text-foreground-muted" x-text="name"></span>
          <span x-show="payload.error" class="text-danger truncate"
                x-text="payload.error"></span>
          <span x-show="!payload.error"
                class="text-foreground-subtle"
                x-text="`enabled=${payload.enabled} · ${(payload.plugins || []).length} ep`"></span>
        </div>
      </template>
    </div>
    <!-- v15.0.0a2: cross-host config diff panel. -->
    <div x-show="configDiffOpen"
         class="mt-2 border border-accent-soft/40 rounded bg-surface-1 p-2">
      <div class="flex items-center justify-between mb-1 gap-2">
        <span class="text-xs text-accent">Config diff: local → <span x-text="pluginHost"></span></span>
        <button type="button" @click="configDiffOpen = false"
                aria-label="Close config diff"
                class="text-xs px-1.5 py-0 rounded border border-border hover:border-rose-700 text-foreground-muted hover:text-danger focus-visible:ring-2 focus-visible:ring-accent">
          ×
        </button>
      </div>
      <p x-show="configDiffError" role="alert" class="text-xs text-danger mb-2"
         x-text="configDiffError"></p>
      <p x-show="!configDiffError && !configDiff"
         class="text-xs text-foreground-subtle">(no differences)</p>
      <pre x-show="configDiff && !configDiffError"
           class="text-xs whitespace-pre text-foreground max-h-64 overflow-auto font-mono"
           x-text="configDiff"></pre>
    </div>
  </article>
</section>

<!-- v5.0.0a1: auto-reembed runner status. Polls /api/history/state
     every 3s while phase is "running"; idles otherwise.
     v19.0.0a5: spans both columns of the card grid — the runs table
     is too wide for a single column. -->
{% include "_partials/_reembed_panel.html" %}
<!-- v2.1.0a3: recall search. Hits /api/recall (which wraps the
     recall_qa MCP tool) and renders match cards inline.
     v19.0.0a5: spans both columns of the card grid. -->
<section x-data="recallPanel()" x-init="restoreFromUrl()"
         class="md:col-span-2 border border-border rounded-md p-2.5 bg-surface-2/40">
  <header class="mb-2 flex items-center justify-between gap-2 flex-wrap">
    <h2 class="text-lg font-bold">Recall Q&amp;A history</h2>
    <span class="text-xs text-foreground-subtle">
      semantic search over <code class="text-accent">recall_qa</code> store
    </span>
  </header>
  <form @submit.prevent="search()" class="flex flex-col md:flex-row gap-2 mb-2">
    <input type="text" x-model="question" required minlength="2"
           placeholder="e.g. how does authentication work?"
           class="flex-1 bg-surface-1 border border-border rounded px-3 py-2 text-sm focus:border-accent-strong focus:outline-none">
    <input type="text" x-model="project"
           placeholder="project filter (optional)"
           class="md:w-48 bg-surface-1 border border-border rounded px-3 py-2 text-sm focus:border-accent-strong focus:outline-none">
    <select x-model="host"
            class="md:w-32 bg-surface-1 border border-border rounded px-3 py-2 text-sm focus:border-accent-strong focus:outline-none">
      <option value="local">local</option>
      <option value="all">all hosts</option>
    </select>
    <button type="submit"
            :disabled="loading || question.trim().length < 2"
            :aria-busy="loading"
            class="bg-accent-strong hover:bg-accent disabled:bg-surface-3 disabled:text-foreground-muted text-white font-bold px-3 py-2 rounded text-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1">
      <span x-show="!loading">Search</span>
      <span x-show="loading" aria-hidden="true">…</span>
    </button>
  </form>
  <div x-show="message" :aria-hidden="!message" role="status" aria-live="polite" class="text-xs text-warning mb-2" x-text="message"></div>
  <div x-show="error" :aria-hidden="!error" role="alert" aria-live="assertive" class="text-xs text-danger mb-2" x-text="error"></div>
  <div x-show="hasResults">
    <p class="text-xs text-foreground-subtle mb-2"
       x-text="`${matches.length} match${matches.length === 1 ? '' : 'es'} (backend: ${backend})`"></p>
    <ul class="space-y-2">
      <template x-for="m in matches" :key="m.id + ':' + m.host">
        <li class="border border-border rounded p-2 bg-surface-1/50">
          <div class="flex items-baseline justify-between gap-2 flex-wrap text-xs">
            <a :href="`/projects/${encodeURIComponent(m.project)}${m.host && m.host !== 'local' ? '?host=' + encodeURIComponent(m.host) : ''}`"
               class="font-bold text-accent hover:underline" x-text="m.project"></a>
            <div class="flex items-center gap-2 text-foreground-subtle">
              <span x-text="`host: ${m.host}`"></span>
              <span x-text="`tool: ${m.tool}`"></span>
              <span x-text="`score: ${m.score.toFixed(3)}`"></span>
            </div>
          </div>
          <p class="text-sm text-foreground mt-1" x-text="m.question"></p>
          <p class="text-xs text-foreground-muted mt-1 line-clamp-3" x-text="m.answer"></p>
        </li>
      </template>
    </ul>
  </div>
  <!-- v8.0.0a3: canonical 3-part empty state for recall search. -->
  <div x-show="searched && matches.length === 0 && !error && !message"
       :aria-hidden="!(searched && matches.length === 0 && !error && !message)"
       role="status"
       data-empty-state="recall.no-matches"
       class="border border-border bg-surface-2/40 text-foreground-muted px-3 py-6 rounded text-center">
    <p class="text-sm font-bold text-foreground mb-1">No matches found</p>
    <p class="text-xs text-foreground-muted mb-2">
      Try broadening the question, removing the project filter,
      or selecting <code class="text-accent">all hosts</code>.
    </p>
    <button type="button"
            @click="question = ''; project = ''; host = 'local'; searched = false; persistToUrl()"
            aria-label="Clear recall filters"
            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">
      Clear filters
    </button>
  </div>
</section>

<!-- v2.1.0a1: project graph render. Mermaid markup comes from
     /api/graph; we re-render with mermaid.run() after the DOM has the
     fresh markup so the layout adapts to includeDevDeps / transitive.
     v19.0.0a5: spans both columns of the card grid.
     v21.0.0a9: Cytoscape default renderer (force-directed) with a
     "use Mermaid" fallback toggle. Cytoscape was already vendored
     in v10.0.0a7 for /network; reused here for the project-deps
     graph card. -->
<section x-data="graphPanel()" x-init="init(); loadGraph()"
         class="md:col-span-2 border border-border rounded-md p-2.5 bg-surface-2/40">
  <header class="flex items-center justify-between mb-2 gap-2 flex-wrap">
    <h2 class="text-lg font-bold">Project graph</h2>
    <div class="flex items-center gap-2 text-xs text-foreground-muted">
      <label class="flex items-center gap-1.5">
        <input type="checkbox" x-model="includeDevDeps" @change="loadGraph()" class="accent-accent">
        dev deps
      </label>
      <label class="flex items-center gap-1.5">
        <input type="checkbox" x-model="transitive" @change="loadGraph()" class="accent-accent">
        transitive (lockfiles)
      </label>
      <button type="button" @click="toggleRenderer()"
              class="text-xs bg-surface-2/80 hover:bg-surface-3 border border-border px-2 py-0.5 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
              x-text="renderer === 'cytoscape' ? 'use Mermaid' : 'use Cytoscape'"
              :aria-label="renderer === 'cytoscape' ? 'Switch to Mermaid renderer' : 'Switch to Cytoscape renderer'"
              :title="renderer === 'cytoscape' ? 'switch to static Mermaid layout' : 'switch to force-directed Cytoscape'"></button>
      <span x-show="graph.projects_discovered !== undefined"
            x-text="`${graph.projects_discovered} projects · ${(graph.graph?.edges?.length ?? 0)} edges${graph.projects_with_lockfile !== undefined ? ' · ' + graph.projects_with_lockfile + ' with lockfile' : ''}`"></span>
    </div>
  </header>
  <div x-show="graphError" :aria-hidden="!graphError" role="alert" aria-live="assertive" class="text-xs text-danger" x-text="graphError"></div>
  <div x-show="graphLoading" class="text-xs text-foreground-subtle">Rendering…</div>
  <div x-show="!graphLoading && (graph.graph?.edges?.length ?? 0) === 0"
       class="text-xs text-foreground-subtle">
    No edges yet — graph edges only appear when one project's dep matches
    another project's manifest name. Try enabling <code class="text-accent">transitive</code>
    to also consider lockfile-resolved deps.
  </div>

  <!-- v21.0.0a9: Cytoscape renderer (default).
       Fixed 280px height card — Cytoscape lays out internally via
       cose (force-directed); no manual pan/zoom layer needed
       (cytoscape ships its own). Click node → /projects/<name>. -->
  <div x-show="renderer === 'cytoscape' && !graphLoading"
       id="project-graph-cy"
       x-ref="cyContainer"
       class="border border-border-strong rounded bg-surface-1/40"
       style="height: 280px; width: 100%;"></div>

  <!-- v3.0.0a9: mobile-friendly graph viewport (Mermaid fallback).
       v4.0.0a3: pinch-zoom + drag-pan via graphZoom() Alpine scope.
       v21.0.0a9: now hidden behind the "use Mermaid" toggle. -->
  <div x-data="graphZoom()"
       x-show="renderer === 'mermaid' && !graphLoading"
       x-init="bindKeyboard()"
       @keydown.window="onKeyDown($event)"
       class="relative" tabindex="0">
    <div class="absolute top-2 right-2 z-10 flex gap-1">
      <button type="button" @click="reset()"
              aria-label="Reset graph zoom"
              class="text-xs bg-surface-2/80 hover:bg-surface-3 border border-border px-2 py-0.5 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1"
              :title="`reset zoom (current: ${scale.toFixed(2)}×) — press Esc or double-tap`">
        reset
      </button>
    </div>
    <div class="overflow-hidden max-h-[60vh] border border-border-strong rounded bg-surface-1/40 p-2 select-none"
         @wheel.prevent="onWheel($event)"
         @touchstart="onTouchStart($event)"
         @touchmove.prevent="onTouchMove($event)"
         @touchend="onTouchEnd($event)"
         @mousedown="onMouseDown($event)"
         @mousemove="onMouseMove($event)"
         @mouseup="onMouseUp($event)"
         @mouseleave="onMouseUp($event)">
      <div :style="`transform: translate(${tx}px, ${ty}px) scale(${scale}); transform-origin: 0 0; transition: ${transitioning ? 'transform 0.2s ease' : 'none'}; cursor: ${dragging ? 'grabbing' : 'grab'};`">
        <pre class="mermaid text-xs leading-tight" x-ref="diagram" x-text="mermaidMarkup"></pre>
      </div>
    </div>
  </div>
</section>

<!-- v21.0.0a9: load cytoscape (already vendored in v10.0.0a7). -->
<script src="/static/vendor/cytoscape.min.js"></script>

</div><!-- /card-grid (v19.0.0a5) -->

<!-- Project grid (carried forward from v2.0).
     v5.0.0a6: text-based filter input + URL state encoding.
     v6.0.0a3: sort dropdown + group toggle. -->
<section x-data="projectGrid()" x-init="init()">
  <header class="mb-4 flex items-baseline justify-between gap-2 flex-wrap">
    <h2 class="text-lg font-bold">Projects</h2>
    <div class="flex items-baseline gap-2 ml-auto flex-wrap">
      <select x-model="sort" @change="persistToUrl()"
              class="bg-surface-1 border border-border rounded px-2 py-1.5 text-xs focus:border-accent-strong focus:outline-none">
        <option value="last_commit">sort: recent</option>
        <option value="alpha">sort: alphabetical</option>
        <option value="language">sort: by language</option>
      </select>
      <select x-model="group" @change="persistToUrl()"
              class="bg-surface-1 border border-border rounded px-2 py-1.5 text-xs focus:border-accent-strong focus:outline-none">
        <option value="flat">group: flat</option>
        <option value="language">group: by language</option>
      </select>
      <input type="text" x-model="filter" @input.debounce.150ms="persistToUrl()"
             placeholder="filter by name / path / brief…"
             class="bg-surface-1 border border-border rounded px-3 py-1.5 text-sm focus:border-accent-strong focus:outline-none w-56">
      <span class="text-sm text-foreground-muted" x-show="!loading"
            x-text="filter
              ? `${visibleProjects().length} of ${projects.length} match`
              : `${projects.length} discovered`"></span>
    </div>
  </header>

  <div x-show="loading" class="text-foreground-muted">Loading projects…</div>

  <div x-show="error" :aria-hidden="!error" role="alert" aria-live="assertive" class="border border-red-800 bg-red-950/40 text-danger px-3 py-2 rounded">
    Error loading projects: <span x-text="error"></span>
  </div>

  <!-- v8.0.0a3: canonical 3-part empty state — headline + body + CTA. -->
  <div x-show="!loading && !error && projects.length === 0"
       :aria-hidden="!(!loading && !error && projects.length === 0)"
       role="status"
       data-empty-state="dashboard.no-projects"
       class="border border-border bg-surface-2/40 text-foreground-muted px-3 py-6 rounded text-center">
    <p class="text-sm font-bold text-foreground mb-1">No projects discovered</p>
    <p class="text-xs text-foreground-muted mb-2">
      Harbormaster scans <code class="text-accent">~/htdocs/*</code> by default.
      Add <code class="text-accent">[projects] glob</code> or <code class="text-accent">[hosts.*]</code>
      entries to <code class="text-accent">~/.config/harbormaster/config.toml</code>.
    </p>
    <a href="https://github.com/FleetQ/harbormaster/blob/main/docs/operator-guide.md"
       class="text-xs px-3 py-1 rounded border border-accent-strong bg-accent-soft/30 hover:bg-accent-soft/50 text-accent transition inline-block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1">
      Read the operator guide
    </a>
  </div>

  <div x-show="!loading && !error && filter && visibleProjects().length === 0"
       :aria-hidden="!(filter && visibleProjects().length === 0)"
       role="status"
       class="border border-border bg-surface-2/40 text-foreground-muted px-3 py-6 rounded">
    No projects match <code class="text-accent" x-text="filter"></code>.
    <button type="button" @click="filter = ''; persistToUrl()"
            aria-label="Clear project filter"
            class="ml-2 text-accent hover:text-accent underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1">clear</button>
  </div>

  <!-- v6.0.0a3: groupedProjects() returns one entry for flat mode
       (label empty) or one entry per language for grouped mode. The
       inner grid is identical; the outer wrapper renders the heading
       only when label is non-empty. -->
  <div x-show="!loading && !error && visibleProjects().length > 0">
    <template x-for="g in groupedProjects()" :key="g.label || '__flat__'">
      <div class="mb-4">
        <h3 x-show="g.label"
            class="text-sm font-bold text-foreground-muted uppercase tracking-wide mb-2 mt-2 border-b border-border pb-1"
            x-text="g.label"></h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
          <template x-for="(p, idx) in g.items" :key="p.path">
      <article x-data="{ askExpanded: false }"
               :data-tour-step="idx === 0 ? 'memories' : null"
               class="border border-border rounded-md p-2.5 hover:border-accent-strong transition bg-surface-2/40">
        <header class="flex items-baseline justify-between mb-2 gap-2">
          <h3 class="font-bold text-accent truncate">
            <a :href="`/projects/${encodeURIComponent(p.name)}`"
               class="hover:text-accent no-underline" x-text="p.name"></a>
          </h3>
          <span class="text-xs text-foreground-subtle shrink-0"
                x-text="p.last_commit ? p.last_commit.hash : '(no git)'"></span>
        </header>
        <p class="text-sm text-foreground-muted mb-2 line-clamp-2"
           x-text="p.brief || '(no description)'"></p>
        <footer class="flex flex-wrap gap-2 text-xs items-center">
          <!-- v7.0.0a6: language badge. Hidden when p.language is
               missing or 'unknown' so cards without detection stay
               quiet rather than displaying a placeholder. -->
          <span x-show="p.language && p.language !== 'unknown'"
                class="px-2 py-0.5 rounded border"
                :class="languageBadgeClass(p.language)"
                x-text="p.language"
                :title="`detected language: ${p.language}`"></span>
          <span x-show="p.has_serena"
                class="bg-purple-900/50 text-info px-2 py-0.5 rounded">serena</span>
          <span x-show="p.has_claude_md"
                class="bg-accent-soft/50 text-accent px-2 py-0.5 rounded">claude.md</span>
          <span class="text-foreground-subtle truncate font-mono flex-1" x-text="p.path"></span>
          <!-- v3.0.0a7: per-card inline ask form trigger -->
          <button type="button" @click="askExpanded = !askExpanded"
                  class="ml-auto bg-accent-soft/50 text-accent px-2 py-0.5 rounded hover:bg-accent-strong/60 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1"
                  :aria-expanded="askExpanded"
                  :aria-label="askExpanded ? 'Close inline ask form for ' + p.name : 'Open inline ask form for ' + p.name"
                  :title="askExpanded ? 'collapse ask form' : 'inline ask without leaving the dashboard'"
                  x-text="askExpanded ? 'close' : 'ask'"></button>
        </footer>
        <!-- Collapsible inline ask form. Uses the global askForm() Alpine
             component from project_detail.html so streaming + abort logic
             is identical between the two surfaces (v3.0.0a7). -->
        <section x-show="askExpanded" x-cloak
                 x-data="askForm({ project: p.name, host: 'local' })"
                 data-tour-step="ask-form"
                 class="mt-2 border-t border-border pt-3">
          <form @submit.prevent="ask()">
            <textarea x-model="question" rows="2" required minlength="3"
                      :disabled="loading"
                      placeholder="Ask this project a question…"
                      class="w-full bg-surface-1 border border-border rounded px-2 py-1.5 text-xs focus:border-accent-strong focus:outline-none resize-y"></textarea>
            <div class="mt-1.5 flex flex-wrap items-center gap-2 text-xs text-foreground-muted">
              <label class="flex items-center gap-1">
                turns
                <input type="number" min="1" max="10" x-model.number="maxTurns"
                       class="w-12 bg-surface-1 border border-border rounded px-1 py-0.5 text-center">
              </label>
              <span class="text-foreground-muted" x-show="loading">streaming…</span>
              <span class="text-foreground-muted ml-auto" x-show="!loading && hasResult"
                    x-text="`${chunks} chunks · ${(elapsedMs/1000).toFixed(1)}s`"></span>
              <button type="submit"
                      :disabled="loading || question.trim().length < 3"
                      :aria-busy="loading"
                      class="bg-accent-strong hover:bg-accent disabled:bg-surface-3 disabled:text-foreground-muted text-white font-bold px-2 py-0.5 rounded text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1">
                <span x-show="!loading">Ask</span>
                <span x-show="loading" aria-hidden="true">…</span>
              </button>
              <button type="button" x-show="loading" @click="abort()"
                      aria-label="Stop streaming"
                      :aria-hidden="!loading"
                      class="text-warning hover:text-warning underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1">stop</button>
            </div>
          </form>
          <div x-show="error" :aria-hidden="!error" role="alert" aria-live="assertive" class="mt-2 text-xs text-danger" x-text="error"></div>
          <pre x-show="streamText"
               :aria-hidden="!streamText"
               aria-live="polite"
               aria-atomic="false"
               aria-label="Streaming answer"
               class="mt-2 text-xs whitespace-pre-wrap break-words border border-border rounded p-2 bg-surface-1/50 text-foreground leading-relaxed max-h-48 overflow-y-auto"
               x-text="streamText"></pre>
        </section>
      </article>
          </template>
        </div>
      </div>
    </template>
  </div>
</section>

</div><!-- /Overview tab (v21.0.0a6) -->

<!-- Activity tab: larger recent-events feed (last 100 MCP calls). -->
<div x-show="active === 'activity'" x-transition role="tabpanel" aria-label="Recent activity">
  <section x-data="dashboardActivityFeed()" x-init="load(); start()"
           data-dashboard-activity-feed
           class="bg-surface-2 border border-border rounded-md p-2.5">
    <header class="flex items-center justify-between mb-2">
      <h3 class="text-sm font-bold text-foreground-muted">Recent activity</h3>
      <a href="/network" class="text-xs text-accent hover:underline">open network view →</a>
    </header>
    <p class="text-xs text-foreground-subtle mb-2"
       x-text="`${events.length} event${events.length === 1 ? '' : 's'} (last 100)`"></p>
    <ul class="text-xs space-y-1 max-h-[60vh] overflow-y-auto">
      <template x-for="ev in events" :key="'dafeed:' + ev.timestamp_ms + ':' + ev.tool + ':' + ev.target">
        <li class="font-mono text-foreground-muted truncate border-b border-border-subtle py-0.5">
          <span class="text-foreground-subtle" x-text="ev.time"></span>
          <span class="text-accent ml-1" x-text="ev.tool"></span>
          <span class="text-foreground-muted ml-1" x-text="ev.target"></span>
        </li>
      </template>
      <li x-show="!events.length"
          data-empty-state="dashboard.no-activity"
          class="text-foreground-dim text-[11px] leading-snug border border-border-subtle bg-surface-2/40 rounded p-2">
        <span class="block text-foreground-muted font-semibold mb-0.5">No recent activity.</span>
        Ask any project something via any MCP client (stdio, HTTP, SSE) —
        the call lands here in real-time.
      </li>
    </ul>
  </section>
</div>

<!-- Plugins tab: dedicated surface for the bridge + plugin status strip. -->
<div x-show="active === 'plugins'" x-transition role="tabpanel" aria-label="Plugins">
  <section x-data="statusStrip()" x-init="loadAll()"
           data-dashboard-plugins-tab
           class="grid grid-cols-1 md:grid-cols-2 gap-2">
    <article class="border border-border rounded-md p-2.5 bg-surface-2/40">
      <header class="flex items-center justify-between mb-2">
        <h3 class="text-sm font-bold text-foreground-muted">FleetQ Bridge</h3>
      </header>
      <p class="text-xs text-foreground-muted">
        <span x-text="bridge.host || '—'"></span>
        <span class="ml-2 text-foreground-subtle" x-text="bridge.status || ''"></span>
      </p>
    </article>
    <article class="border border-border rounded-md p-2.5 bg-surface-2/40">
      <header class="flex items-center justify-between mb-2">
        <h3 class="text-sm font-bold text-foreground-muted">Plugins</h3>
      </header>
      <p class="text-xs text-foreground-muted"
         x-text="`${(plugins.plugins || []).length} plugin${(plugins.plugins || []).length === 1 ? '' : 's'} discovered`"></p>
    </article>
  </section>
</div>

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

{# v3.0.0a7: per-card inline ask form needs the askForm() Alpine
   component. Dashboard owns its own card markup so the partial's
   form HTML isn't reused — only the script.
#}
{% include "_partials/_ask_form_script.html" %}

<script>
  // v21.0.0a6: dashboard tab controller. Mirrors projectTabs() shape
  // (tabs/active/restoreFromHash/setTab) so the _tabs.html partial
  // works without modification. Keys 1..3 cycle tabs (skipped when
  // typing or when modifier keys are held).
  function dashboardTabs() {
    return {
      tabs: [
        { id: 'overview', label: 'Overview',        shortcut: '1' },
        { id: 'activity', label: 'Recent activity', shortcut: '2' },
        { id: 'plugins',  label: 'Plugins',         shortcut: '3' },
      ],
      active: 'overview',
      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);
      },
    };
  }

  // v21.0.0a6: dashboardActivityFeed — larger sibling of the
  // recentActivityCard. Hits /api/network/events?limit=100; mirrors
  // the polling pattern so the implementation stays a single fetch
  // every 5s without an SSE subscription.
  function dashboardActivityFeed() {
    return {
      events: [],
      timer: null,
      async load() {
        try {
          const r = await hmFetch('/api/network/events?limit=100');
          if (!r || !r.ok) return;
          const data = await r.json();
          const items = data.events || data.items || [];
          this.events = items.map((ev) => ({
            ...ev,
            time: new Date(ev.timestamp_ms || Date.now()).toLocaleTimeString(),
          }));
        } catch (_) { /* swallow — empty list renders the empty state */ }
      },
      start() {
        this.timer = setInterval(() => this.load(), 5000);
      },
    };
  }
</script>

<script>
  // v8.0.0a5: KPI strip Alpine scope. Single /api/kpi fetch on
  // mount + every 30s. Per-cell helpers compute label + color so
  // the template is presentational only.
  function kpiStrip() {
    return {
      kpi: {},
      // v14.0.0a4: per-host call budget summary. Loaded separately so
      // the existing /api/kpi shape doesn't have to grow.
      hostBudget: { hosts: [] },
      // v15.0.0a4: per-tool budget breakdown — lazy-loaded on first
      // hover over the host-budget KPI cell. Operators that never
      // hover never trigger the fetch.
      toolsBudget: { tools: [] },
      toolsBudgetHover: false,
      _toolsBudgetLoaded: false,
      // v17.0.0a4: tightest-cap breakdown for the worst-usage host.
      // Lazy-loaded on first hover (mirrors the v15.a4 pattern).
      // Shape:
      //   { host: <name>,
      //     axes: [
      //       { axis: 'host', label: 'per-host', usage_pct, is_tightest },
      //       { axis: 'tool', label: 'per-tool ask_project', usage_pct, ... },
      //       { axis: 'project', label: 'per-project <name>', usage_pct, ... },
      //     ] }
      tightestBreakdown: { host: '', axes: [] },
      _tightestLoadedFor: null,
      _interval: null,

      async loadKpi() {
        try {
          const r = await hmFetch('/api/kpi');
          if (!r.ok) throw new Error('HTTP ' + r.status);
          this.kpi = await r.json();
        } catch (_) {
          // Soft-fail — leave kpi = {} so cells fall back to '—'.
        }
      },

      // v15.0.0a4: lazy fetch of the per-tool budget breakdown. Only
      // hits /api/tools/budget on first hover; subsequent hovers reuse
      // the cached result. Polls also refresh it (via the 30s tick)
      // so an idle hover keeps the data fresh.
      async loadToolsBudget() {
        try {
          const r = await hmFetch('/api/tools/budget');
          if (!r.ok) return;
          this.toolsBudget = await r.json();
          this._toolsBudgetLoaded = true;
        } catch (_) { /* soft-fail */ }
      },
      async showToolsBudget() {
        this.toolsBudgetHover = true;
        if (!this._toolsBudgetLoaded) {
          await this.loadToolsBudget();
        }
        // v17.0.0a4: lazy-load the tightest-cap breakdown for the
        // currently-worst host. Re-fetch when the worst host changes
        // (e.g. after a 30s poll bumps another host above the
        // previous worst).
        const worst = this._worstBudgetUsage();
        if (worst && this._tightestLoadedFor !== worst.host) {
          await this._loadTightestBreakdown(worst.host);
        }
      },

      // v17.0.0a4: build the per-axis breakdown for `host` from
      // existing kpiStrip state + a single /api/projects/budget
      // fetch. `tightest_cap_axis` is computed server-side per
      // project; we surface the project with the highest usage_pct
      // (the natural "what's at risk" pick) and pull the per-host
      // + per-tool axes from the data we already have.
      async _loadTightestBreakdown(host) {
        const axes = [];
        // Per-host axis — already in `hostBudget.hosts`.
        const hostRow = (this.hostBudget.hosts || [])
          .find(h => h.host === host);
        if (hostRow && hostRow.usage_pct != null) {
          axes.push({
            axis: 'host',
            label: 'per-host',
            usage_pct: hostRow.usage_pct,
            is_tightest: false,
          });
        }
        // Per-tool axis — `toolsBudget.tools` is already loaded.
        // The project-targeting tools are ask_project + delegate_task;
        // surface each with a usage percentage.
        const projectTools = (this.toolsBudget.tools || [])
          .filter(t => (t.tool === 'ask_project'
                     || t.tool === 'delegate_task')
                    && t.usage_pct != null);
        for (const t of projectTools) {
          axes.push({
            axis: 'tool',
            label: `per-tool ${t.tool}`,
            usage_pct: t.usage_pct,
            is_tightest: false,
          });
        }
        // Per-project axis — fetch /api/projects/budget for this host.
        try {
          const r = await hmFetch(
            `/api/projects/budget?host=${encodeURIComponent(host)}`
          );
          if (r.ok) {
            const body = await r.json();
            const projects = (body.projects || [])
              .filter(p => p.usage_pct != null);
            if (projects.length > 0) {
              // Worst-usage project is the natural pick to surface.
              let worstP = projects[0];
              for (const p of projects) {
                if (p.usage_pct > worstP.usage_pct) worstP = p;
              }
              axes.push({
                axis: 'project',
                label: `per-project ${worstP.project}`,
                usage_pct: worstP.usage_pct,
                is_tightest: false,
              });
            }
          }
        } catch (_) { /* soft-fail */ }
        // Mark the tightest axis (highest usage_pct = closest to cap).
        if (axes.length > 0) {
          let topIdx = 0;
          for (let i = 1; i < axes.length; i += 1) {
            if (axes[i].usage_pct > axes[topIdx].usage_pct) topIdx = i;
          }
          axes[topIdx].is_tightest = true;
        }
        this.tightestBreakdown = { host, axes };
        this._tightestLoadedFor = host;
      },

      // v14.0.0a4: hits /api/hosts/budget every 30s alongside the
      // KPI poll. Soft-fails (leaves hostBudget.hosts = []).
      async loadBudget() {
        try {
          const r = await hmFetch('/api/hosts/budget');
          if (!r.ok) throw new Error('HTTP ' + r.status);
          this.hostBudget = await r.json();
        } catch (_) { /* soft-fail */ }
      },

      // v21.0.0a7: 24-hour history for each numeric KPI cell. Wires
      // the v16.0.0a4 _tiny_sparkline.html helper onto the KPI strip
      // (and the host-budget cell). Soft-fails per series — a missing
      // /api/kpi/history endpoint just leaves `history.<key>` empty
      // and the sparkline renders as an empty string.
      history: { projects: [], active_embeds: [], recent_queries: [], host_budget: [] },
      // v21.0.0a7: explicit version counter. Alpine 3's x-html binding
      // reads scalar properties reliably; bumping `historyVersion`
      // after each successful fetch guarantees the per-cell sparkline
      // re-evaluates even if the proxy on `history` misses an in-place
      // mutation.
      historyVersion: 0,
      async loadHistory() {
        try {
          const r = await hmFetch('/api/kpi/history');
          if (!r.ok) throw new Error('HTTP ' + r.status);
          const body = await r.json();
          // Replace the whole `history` object — Alpine 3's reactive
          // proxy picks up the assignment. The `historyVersion` bump
          // below additionally forces any x-html binding that reads
          // it to re-evaluate (sibling-scope safety net).
          this.history = body;
          this.historyVersion += 1;
        } catch (e) {
          console.warn('loadHistory failed:', e);
        }
      },
      // Returns the SVG snippet for a given KPI key. Delegates to the
      // global `sparklineHtml` helper (defined in _tiny_sparkline.html,
      // loaded by base.html). Empty arrays render as ''.
      historySparkline(key) {
        const _v = this.historyVersion; // reactive dep — forces re-eval
        void _v;
        const values = (this.history && this.history[key]) || [];
        if (!Array.isArray(values) || values.length === 0) return '';
        if (typeof window.sparklineHtml !== 'function') return '';
        return window.sparklineHtml(values, { width: 80, height: 16, strokeW: 1.5 });
      },

      startPolling() {
        this._interval = setInterval(() => {
          this.loadKpi();
          this.loadBudget();
          this.loadHistory();
          // v15.0.0a4: keep the tool-breakdown current too — but only
          // after it's been loaded once (don't fetch on a never-hovered
          // dashboard).
          if (this._toolsBudgetLoaded) this.loadToolsBudget();
        }, 30000);
      },

      activeEmbedsLabel() {
        const ae = this.kpi.active_embeds || {};
        if (!ae.phase || ae.phase === 'idle') return 'idle';
        if (ae.phase === 'running') {
          const p = ae.processed ?? 0;
          const t = ae.total ?? 0;
          return t ? `${p}/${t}` : 'running';
        }
        return ae.phase;
      },

      activeEmbedsClass() {
        const phase = (this.kpi.active_embeds || {}).phase || 'idle';
        const map = {
          running: 'text-accent',
          done: 'text-success',
          failed: 'text-danger',
          cancelled: 'text-warning',
          idle: 'text-foreground-muted',
        };
        return map[phase] || 'text-foreground-muted';
      },

      bridgeClass() {
        const state = this.kpi.bridge;
        const map = {
          configured: 'text-success',
          'token missing': 'text-warning',
          disabled: 'text-foreground-muted',
          connected: 'text-success',
          stale: 'text-warning',
          disconnected: 'text-danger',
        };
        return map[state] || 'text-foreground-muted';
      },

      // v14.0.0a4: pick the worst-usage configured host for the cell.
      // Hosts without a budget set are filtered out.
      _worstBudgetUsage() {
        const tracked = (this.hostBudget.hosts || [])
          .filter(h => h.budget != null && h.usage_pct != null);
        if (tracked.length === 0) return null;
        let worst = tracked[0];
        for (const h of tracked) {
          if (h.usage_pct > worst.usage_pct) worst = h;
        }
        return worst;
      },

      hostBudgetLabel() {
        const w = this._worstBudgetUsage();
        if (!w) return '—';
        return `${w.usage_pct}%`;
      },

      hostBudgetClass() {
        const w = this._worstBudgetUsage();
        if (!w) return 'text-foreground-muted';
        if (w.usage_pct >= 100) return 'text-danger';
        if (w.usage_pct >= 80) return 'text-warning';
        return 'text-success';
      },

      hostBudgetAriaLabel() {
        const w = this._worstBudgetUsage();
        if (!w) return 'No host call budgets configured';
        return `Worst host budget: ${w.host} at ${w.usage_pct}% of ${w.budget} calls/24h`;
      },
    };
  }

  function statusStrip() {
    return {
      bridge: {}, bridgeError: null,
      plugins: {}, pluginsError: null,
      // v14.0.0a6: cross-host plugin discovery state. `pluginHost` is
      // either "local" (default) or a configured host name; loadPlugins
      // forwards it to /api/plugins?host=…. `pluginHosts` is populated
      // once from /api/hosts so the dropdown shows configured names.
      pluginHost: 'local',
      pluginHosts: [],
      // v15.0.0a2: per-host fan-out summary rendered when host=all.
      // Shape: {<name>: <per-host plugin payload>, ...}
      pluginsAllHosts: null,
      // v15.0.0a2: cross-host config diff state.
      configDiffOpen: false,
      configDiff: '',
      configDiffError: '',

      async loadAll() {
        await Promise.all([
          this.loadBridge(),
          this.loadPlugins(),
          this.loadPluginHosts(),
        ]);
      },
      async loadBridge() {
        try {
          const r = await hmFetch('/api/bridge/status');
          if (!r.ok) throw new Error('HTTP ' + r.status);
          this.bridge = await r.json();
        } catch (e) { this.bridgeError = e.message; }
      },
      async loadPlugins() {
        try {
          // v14.0.0a6: append host filter when not "local".
          const url = this.pluginHost && this.pluginHost !== 'local'
            ? `/api/plugins?host=${encodeURIComponent(this.pluginHost)}`
            : '/api/plugins';
          const r = await hmFetch(url);
          if (!r.ok) throw new Error('HTTP ' + r.status);
          const body = await r.json();
          // v15.0.0a2: when host=all, the envelope is {hosts: {...}}.
          // We keep `plugins` showing the local payload (the always-present
          // entry under "local"); pluginsAllHosts populates the per-host
          // summary panel below.
          if (this.pluginHost === 'all' && body && body.hosts) {
            this.pluginsAllHosts = body.hosts;
            this.plugins = body.hosts.local || {};
          } else {
            this.pluginsAllHosts = null;
            this.plugins = body;
          }
          this.pluginsError = null;
        } catch (e) { this.pluginsError = e.message; }
      },

      // v15.0.0a2: fetch the unified diff against a remote host's
      // harbormaster.toml. Opens the diff panel inline.
      async loadConfigDiff() {
        if (!this.pluginHost || this.pluginHost === 'local'
            || this.pluginHost === 'all') return;
        this.configDiffOpen = true;
        this.configDiff = '';
        this.configDiffError = '';
        try {
          const r = await hmFetch(
            `/api/config/diff?host=${encodeURIComponent(this.pluginHost)}`,
          );
          if (!r.ok) {
            let detail = 'HTTP ' + r.status;
            try { const j = await r.json(); detail = j.detail || detail; } catch (_) {}
            throw new Error(detail);
          }
          const body = await r.json();
          if (body.error) {
            this.configDiffError = body.error;
            return;
          }
          this.configDiff = body.diff || '';
        } catch (e) {
          this.configDiffError = 'failed to load diff: ' + e.message;
        }
      },
      // v14.0.0a6: populate the host filter dropdown from the v14.a4
      // /api/hosts/budget endpoint, which already returns the list of
      // configured hosts. Soft-fail — if the endpoint is unavailable
      // the dropdown stays hidden (only "local" path remains).
      async loadPluginHosts() {
        try {
          const r = await hmFetch('/api/hosts/budget');
          if (!r.ok) return;
          const body = await r.json();
          const hosts = (body.hosts || []).map(h => h.host).filter(Boolean);
          this.pluginHosts = hosts;
        } catch (_) { /* soft-fail */ }
      },
      bridgeStateLabel() {
        if (!this.bridge.fleetq_enabled) return 'disabled';
        if (!this.bridge.api_token_present) return 'token missing';
        const rt = this.bridge.runtime;
        if (rt && rt.available && rt.state_file_present) {
          if (rt.connected && !rt.stale && rt.subscribed) return 'connected';
          if (rt.connected && rt.stale) return 'stale';
          if (rt.connected) return 'connecting';
          return 'disconnected';
        }
        return 'configured';
      },
      bridgeBadgeClass() {
        if (!this.bridge.fleetq_enabled) return 'bg-surface-3 text-foreground-muted';
        if (!this.bridge.api_token_present) return 'bg-amber-900/50 text-warning';
        const rt = this.bridge.runtime;
        if (rt && rt.available && rt.state_file_present) {
          if (rt.connected && !rt.stale && rt.subscribed) return 'bg-emerald-900/50 text-success';
          if (rt.connected && rt.stale) return 'bg-amber-900/50 text-warning';
          if (rt.connected) return 'bg-accent-soft/50 text-accent';
          return 'bg-rose-900/50 text-danger';
        }
        return 'bg-emerald-900/50 text-success';
      },
      // v8.0.0a2: glyph per state. Icons reinforce color (color-blind
      // operators get the same affordance as colored badges).
      bridgeStateIcon() {
        const label = this.bridgeStateLabel();
        const map = {
          disabled: '⊘',
          'token missing': '⚠',
          connected: '✓',
          stale: '⚠',
          connecting: '⟳',
          disconnected: '✗',
          configured: '●',
        };
        return map[label] || '●';
      },
      pluginStatusIcon(status) {
        const map = {
          loaded: '✓',
          missing: '⚠',
          disabled: '⊘',
          'not-allowlisted': '⊘',
          'no-dist-name': '✗',
        };
        return map[status] || '●';
      },
      // v12.0.0a2: per-row plugin badge color name (passed to
      // stateBadgeHtml). Mirrors the previous inline `:class` map but
      // returns the color *name* the helper understands.
      pluginRowBadgeColor(status) {
        if (status === 'loaded') return 'emerald';
        if (status === 'missing') return 'amber';
        if (status === 'no-dist-name') return 'rose';
        return 'gray';  // disabled / not-allowlisted / unknown
      },
      pluginRowBadgeProps(row) {
        return {
          state: row.status,
          icon: this.pluginStatusIcon(row.status),
          color: this.pluginRowBadgeColor(row.status),
          label: row.status,
          ariaLabel: `Plugin status ${row.status}`,
        };
      },
      pluginsBadgeProps() {
        const enabled = this.plugins.enabled;
        const counts = this.pluginCounts();
        return {
          state: enabled ? 'enabled' : 'disabled',
          icon: enabled ? '✓' : '⊘',
          color: enabled ? 'emerald' : 'gray',
          label: enabled ? `enabled (${counts.loaded} loaded)` : 'disabled',
          ariaLabel: enabled
            ? `Plugins enabled, ${counts.loaded} loaded`
            : 'Plugins disabled',
        };
      },
      // v12.0.0a2: collapse bridgeBadgeClass + bridgeStateIcon +
      // bridgeStateLabel + bridgeBadgeTooltip into one props builder
      // so the template only contains the helper invocation. The
      // per-helper accessors stay (other UI elements still call
      // bridgeStateLabel for the runtime line).
      bridgeBadgeColor() {
        if (!this.bridge.fleetq_enabled) return 'gray';
        if (!this.bridge.api_token_present) return 'amber';
        const rt = this.bridge.runtime;
        if (rt && rt.available && rt.state_file_present) {
          if (rt.connected && !rt.stale && rt.subscribed) return 'emerald';
          if (rt.connected && rt.stale) return 'amber';
          if (rt.connected) return 'cyan';
          return 'rose';
        }
        return 'emerald';
      },
      bridgeBadgeProps() {
        const label = this.bridgeStateLabel();
        return {
          state: label,
          icon: this.bridgeStateIcon(),
          color: this.bridgeBadgeColor(),
          label: label,
          ariaLabel: `Bridge ${label}`,
          title: this.bridgeBadgeTooltip(),
        };
      },
      bridgeBadgeTooltip() {
        const rt = this.bridge.runtime;
        if (!rt || !rt.available || !rt.state_file_present) return 'config-derived state — runtime not yet observed';
        if (rt.last_heartbeat) {
          const age = rt.age_seconds != null ? `${rt.age_seconds.toFixed(1)}s ago` : '?';
          return `last_heartbeat: ${age} (writer pid ${rt.writer_pid || '?'})`;
        }
        return 'no heartbeat recorded yet';
      },
      runtimeSummary() {
        const rt = this.bridge.runtime || {};
        const parts = [];
        parts.push(rt.connected ? 'connected' : 'disconnected');
        if (rt.subscribed) parts.push('subscribed');
        if (rt.stale) parts.push('stale');
        if (rt.age_seconds != null) parts.push(`hb ${rt.age_seconds.toFixed(0)}s`);
        if (rt.team_id) parts.push(`team ${rt.team_id.slice(0, 8)}`);
        return parts.join(' · ');
      },
      runtimeColorClass() {
        const rt = this.bridge.runtime || {};
        if (rt.connected && !rt.stale) return 'text-success';
        if (rt.stale) return 'text-warning';
        return 'text-danger';
      },
      pluginCounts() {
        const rows = this.plugins.plugins || [];
        return {
          loaded: rows.filter(r => r.status === 'loaded').length,
          missing: rows.filter(r => r.status === 'missing').length,
        };
      },
    };
  }

  function recallPanel() {
    return {
      question: '', project: '', host: 'local',
      matches: [], backend: '', message: '', error: '',
      loading: false, searched: false,
      get hasResults() { return this.searched && this.matches.length > 0; },

      // v4.0.0a2: URL state — recall search is shareable.
      // Recognised params: recall_q, recall_project, recall_host.
      // Prefixed so they don't collide with /tools/fan-out's `q` etc.
      restoreFromUrl() {
        const p = new URLSearchParams(window.location.search);
        const q = p.get('recall_q'); if (q) this.question = q;
        const proj = p.get('recall_project'); if (proj) this.project = proj;
        const h = p.get('recall_host');
        if (h && (h === 'local' || h === 'all')) this.host = h;
        // Auto-search if a question was carried in via URL.
        if (q) this.search();
      },

      persistToUrl() {
        const p = new URLSearchParams(window.location.search);
        // Preserve foreign params (graph filters etc.) — only touch our keys.
        if (this.question.trim()) p.set('recall_q', this.question.trim());
        else p.delete('recall_q');
        if (this.project.trim()) p.set('recall_project', this.project.trim());
        else p.delete('recall_project');
        if (this.host && this.host !== 'local') p.set('recall_host', this.host);
        else p.delete('recall_host');
        const qs = p.toString();
        const url = qs ? `${window.location.pathname}?${qs}` : window.location.pathname;
        window.history.replaceState(null, '', url);
      },

      async search() {
        if (this.question.trim().length < 2) return;
        this.loading = true; this.error = ''; this.message = '';
        this.persistToUrl();
        try {
          const params = new URLSearchParams({ question: this.question.trim() });
          if (this.project.trim()) params.set('project', this.project.trim());
          if (this.host) params.set('host', this.host);
          const r = await hmFetch('/api/recall?' + params.toString());
          if (!r.ok) throw new Error('HTTP ' + r.status);
          const data = await r.json();
          this.backend = data.backend || '';
          this.matches = data.matches || [];
          this.message = data.message || '';
          this.searched = true;
        } catch (e) {
          this.error = e.message;
        } finally {
          this.loading = false;
        }
      },
    };
  }

  // v6.0.0a4: keyboard shortcut help popover. Single source of truth
  // for the cross-page shortcut map — graph zoom today, more shortcuts
  // as the UI grows. Listens on window so the toggle works no matter
  // where focus is (with the same form-field guard as graphZoom).
  function helpPopover() {
    return {
      open: false,
      shortcuts: [
        {
          scope: 'global',
          rows: [
            { keys: 'Cmd / Ctrl + K', action: 'open command palette' },
            { keys: '?', action: 'toggle keyboard help' },
            { keys: 'Esc', action: 'dismiss palette / popover' },
          ],
        },
        {
          scope: 'graph zoom (dashboard)',
          rows: [
            { keys: '+ / =', action: 'zoom in' },
            { keys: '- / _', action: 'zoom out' },
            { keys: '↑ ↓ ← →', action: 'pan' },
            { keys: 'Esc', action: 'reset zoom' },
            { keys: 'double-tap', action: 'reset zoom (touch)' },
          ],
        },
      ],

      onKeyDown(e) {
        // Same form-field guard as graphZoom — never hijack typing.
        const tag = (e.target && e.target.tagName) || '';
        if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
        if (e.key === '?') {
          this.open = !this.open;
          e.preventDefault();
        } else if (e.key === 'Escape' && this.open) {
          this.open = false;
          e.preventDefault();
        }
      },
    };
  }

  // v5.0.0a6: project grid + text filter + URL state.
  // v6.0.0a3: sort dropdown + group toggle.
  // v7.0.0a6: language → Tailwind class mapping for the dashboard
  // card badge. Mirrors LANGUAGE_BADGE_COLORS in
  // src/harbormaster/ui/manifest_cache.py (kept in sync by the
  // unit test test_language_badge_classes_match_python_table).
  const LANGUAGE_BADGE_CLASSES = {
    python: 'bg-blue-900/40 text-blue-300 border-blue-800',
    typescript: 'bg-yellow-900/40 text-yellow-200 border-yellow-800',
    javascript: 'bg-yellow-900/40 text-yellow-200 border-yellow-800',
    php: 'bg-purple-900/40 text-purple-200 border-purple-800',
    rust: 'bg-orange-900/40 text-orange-200 border-orange-800',
    go: 'bg-accent-soft/40 text-accent border-accent-strong',
    ruby: 'bg-rose-900/40 text-rose-200 border-rose-800',
    unknown: 'bg-surface-3 text-foreground-subtle border-border',
  };
  function languageBadgeClass(lang) {
    const key = (lang || 'unknown').toLowerCase();
    return LANGUAGE_BADGE_CLASSES[key] || LANGUAGE_BADGE_CLASSES.unknown;
  }

  function projectGrid() {
    return {
      projects: [], loading: true, error: null,
      filter: '', sort: 'last_commit', group: 'flat',
      // expose the helper to the template
      languageBadgeClass,

      async init() {
        // Pull state from URL on mount so a shared link pre-fills.
        const p = new URLSearchParams(window.location.search);
        const f = p.get('filter');
        if (f) this.filter = f;
        const s = p.get('sort');
        if (s && ['last_commit', 'alpha', 'language'].includes(s)) this.sort = s;
        const g = p.get('group');
        if (g && ['flat', 'language'].includes(g)) this.group = g;
        try {
          const r = await hmFetch('/api/projects');
          if (!r.ok) throw new Error('HTTP ' + r.status);
          this.projects = await r.json();
        } catch (e) {
          this.error = e.message;
        } finally {
          this.loading = false;
        }
      },

      visibleProjects() {
        const projects = (!this.filter || !this.filter.trim())
          ? this.projects
          : (() => {
              const needle = this.filter.trim().toLowerCase();
              return this.projects.filter((p) => {
                const name = (p.name || '').toLowerCase();
                const path = (p.path || '').toLowerCase();
                const brief = (p.brief || '').toLowerCase();
                return name.includes(needle) || path.includes(needle) || brief.includes(needle);
              });
            })();
        return this._sortProjects(projects);
      },

      _sortProjects(projects) {
        // Don't mutate the original array.
        const arr = [...projects];
        switch (this.sort) {
          case 'alpha':
            arr.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
            break;
          case 'language':
            arr.sort((a, b) => {
              const la = a.language || 'unknown';
              const lb = b.language || 'unknown';
              if (la !== lb) return la.localeCompare(lb);
              return (a.name || '').localeCompare(b.name || '');
            });
            break;
          case 'last_commit':
          default:
            arr.sort((a, b) => {
              const da = a.last_commit ? a.last_commit.date : '';
              const db = b.last_commit ? b.last_commit.date : '';
              return db.localeCompare(da);  // desc
            });
        }
        return arr;
      },

      // Returns [{label: '<heading>', items: [...]}] for either layout.
      // Flat: one entry with empty label.
      // By language: one entry per language (sorted), label = language name.
      groupedProjects() {
        const visible = this.visibleProjects();
        if (this.group !== 'language') {
          return [{ label: '', items: visible }];
        }
        // Group by language, preserving the visible order within each group.
        const groups = {};
        for (const p of visible) {
          const lang = p.language || 'unknown';
          if (!groups[lang]) groups[lang] = [];
          groups[lang].push(p);
        }
        return Object.keys(groups).sort().map((label) => ({
          label,
          items: groups[label],
        }));
      },

      persistToUrl() {
        // Same default-omit pattern as v3.0.0a9 fan-out + v4.0.0a2 recall.
        // Preserves any other URL params present (e.g. recall_q).
        const p = new URLSearchParams(window.location.search);
        if (this.filter && this.filter.trim()) {
          p.set('filter', this.filter.trim());
        } else {
          p.delete('filter');
        }
        if (this.sort && this.sort !== 'last_commit') p.set('sort', this.sort);
        else p.delete('sort');
        if (this.group && this.group !== 'flat') p.set('group', this.group);
        else p.delete('group');
        const qs = p.toString();
        const url = qs ? `${window.location.pathname}?${qs}` : window.location.pathname;
        window.history.replaceState(null, '', url);
      },
    };
  }

  // v5.0.0a1: auto-reembed status panel — polls /api/history/state.
  // v6.0.0a1: manual trigger button + ETA estimation.
  function reembedPanel() {
    return {
      state: { available: false, phase: 'idle', auto_reembed_enabled: false },
      error: '',
      triggering: false,
      cancelling: false,
      runs: [],          // v7.0.0a4: completed-run history
      runsLoading: false,
      _runsLoaded: false,
      _pollHandle: null,
      _lastTerminalSeen: null,  // tracks last terminal phase for runs refresh
      // v14.0.0a3: per-row diff panel state. `runDiff` holds the
      // raw payload from /api/history/reembed/runs/diff; `runDiffOpen`
      // gates the panel visibility. Only one diff is shown at a time.
      runDiff: { from_index: null, to_index: null, delta: null, from: null, to: null },
      runDiffError: '',
      runDiffOpen: false,
      // v17.0.0a3: N-way reembed compare state. selectedRunIndices is
      // stored as an array (not a Set) so Alpine reactivity tracks it
      // and the checkbox `:checked` bindings re-evaluate correctly.
      // The /api/history/reembed/runs/compare endpoint accepts up to
      // 4 absolute indices into `runs` (chronological list).
      selectedRunIndices: [],
      compareOpen: false,
      compareLoading: false,
      compareData: { indices: [], runs: [], fields: [] },
      compareError: '',

      async loadOnce() {
        await this.fetchState();
        this._maybeStartPolling();
      },

      async fetchState() {
        try {
          const r = await hmFetch('/api/history/state');
          if (!r.ok) throw new Error('HTTP ' + r.status);
          this.state = await r.json();
          this.error = '';
        } catch (e) {
          this.error = e.message;
        }
      },

      _maybeStartPolling() {
        // Poll every 3s while running; stop when we hit a terminal phase.
        if (this.state.phase === 'running' && !this._pollHandle) {
          this._pollHandle = setInterval(async () => {
            await this.fetchState();
            if (this.state.phase !== 'running') {
              clearInterval(this._pollHandle);
              this._pollHandle = null;
              // v7.0.0a4: when we exit running, the run history just
              // grew by one record. Refresh if the table was already
              // open (open === _runsLoaded after first toggle).
              if (this._runsLoaded) {
                this.loadRuns();
              }
            }
          }, 3000);
        }
      },

      // v7.0.0a4: lazy-load the run history table. Called from
      // <details>'s @toggle when the user opens it; subsequent
      // terminal-phase transitions refresh in place.
      async loadRuns() {
        this.runsLoading = !this._runsLoaded;
        try {
          const r = await hmFetch('/api/history/reembed/runs');
          if (!r.ok) throw new Error('HTTP ' + r.status);
          const body = await r.json();
          this.runs = body.runs || [];
          this._runsLoaded = true;
        } catch (e) {
          this.error = e.message;
        } finally {
          this.runsLoading = false;
        }
      },

      formatRelative(epochSeconds) {
        if (!epochSeconds) return '';
        const ageS = Math.max(0, (Date.now() / 1000) - epochSeconds);
        if (ageS < 60) return `${Math.round(ageS)}s ago`;
        if (ageS < 3600) return `${Math.round(ageS / 60)}m ago`;
        if (ageS < 86400) return `${Math.round(ageS / 3600)}h ago`;
        return `${Math.round(ageS / 86400)}d ago`;
      },

      // v14.0.0a3: Diff this run against the immediately-prior run
      // via the v13.a3 /api/history/reembed/runs/diff endpoint.
      // `runs` is in chronological-ascending order (oldest first);
      // diffing index N against index N-1 is the natural "what
      // changed since the previous run" view.
      async loadRunDiff(row) {
        const idx = this.runs.indexOf(row);
        if (idx <= 0) return;
        this.runDiffError = '';
        this.runDiffOpen = true;
        try {
          const url = `/api/history/reembed/runs/diff`
                    + `?from=${idx - 1}&to=${idx}`;
          const r = await hmFetch(url);
          if (!r.ok) {
            let detail = 'HTTP ' + r.status;
            try { const j = await r.json(); detail = j.detail || detail; } catch (_) {}
            throw new Error(detail);
          }
          this.runDiff = await r.json();
        } catch (e) {
          this.runDiffError = 'failed to load diff: ' + e.message;
        }
      },

      // v14.0.0a3: format a numeric delta with a leading sign.
      // Handles undefined / null gracefully (returns empty string).
      formatDelta(n) {
        if (n === undefined || n === null) return '';
        return (n > 0 ? '+' : '') + n;
      },

      // v17.0.0a3 — N-way compare helpers ----------------------------------

      // Toggle a run's absolute index in/out of the selection.
      // Cap at 4 (matches the /api/history/reembed/runs/compare
      // server-side limit). Adding when full is a silent no-op
      // because the checkbox is disabled at that point too.
      toggleCompareSelection(absIdx) {
        const i = this.selectedRunIndices.indexOf(absIdx);
        if (i >= 0) {
          // Splice (don't filter) so the same array reference stays
          // — Alpine's reactivity tracks the same proxy.
          this.selectedRunIndices.splice(i, 1);
          return;
        }
        if (this.selectedRunIndices.length >= 4) return;
        this.selectedRunIndices.push(absIdx);
      },

      clearCompareSelection() {
        this.selectedRunIndices.splice(0, this.selectedRunIndices.length);
        this.compareOpen = false;
      },

      // Fetch /api/history/reembed/runs/compare for the selected
      // indices. Endpoint already dedupes + caps server-side; we
      // sort here so the comparison columns render oldest-first
      // (matching the chronological `runs` order).
      async loadCompareSelected() {
        if (this.selectedRunIndices.length < 2) return;
        const sorted = [...this.selectedRunIndices].sort((a, b) => a - b);
        this.compareError = '';
        this.compareLoading = true;
        this.compareOpen = true;
        try {
          const url = `/api/history/reembed/runs/compare`
                    + `?indices=${sorted.join(',')}`;
          const r = await hmFetch(url);
          if (!r.ok) {
            let detail = 'HTTP ' + r.status;
            try { const j = await r.json(); detail = j.detail || detail; } catch (_) {}
            throw new Error(detail);
          }
          this.compareData = await r.json();
        } catch (e) {
          this.compareError = 'failed to load compare: ' + e.message;
        } finally {
          this.compareLoading = false;
        }
      },

      // Per-cell formatter — numeric fields keep precision sane,
      // string fields (model) pass through, undefined → '—'.
      formatCompareCell(field, value) {
        if (value === undefined || value === null || value === '') return '—';
        if (field === 'duration_seconds') {
          return Number(value).toFixed(1);
        }
        return value;
      },

      // Sparkline cell HTML — only numeric fields render a sparkline.
      // Returns an SVG snippet via the global sparklineHtml helper
      // (defined in _partials/_tiny_sparkline.html, loaded by
      // base.html). Non-numeric fields render an em-dash placeholder.
      sparklineCell(field) {
        if (!field || !Array.isArray(field.values)) return '—';
        const NUMERIC = new Set([
          'duration_seconds', 'total', 'succeeded', 'failed', 'cancelled',
        ]);
        if (!NUMERIC.has(field.name)) return '—';
        try {
          return window.sparklineHtml(field.values, { width: 60, height: 14 });
        } catch (_) { return '—'; }
      },

      async triggerManual() {
        this.triggering = true;
        this.error = '';
        try {
          const r = await hmFetch('/api/history/reembed', { method: 'POST' });
          if (r.status === 409) {
            this.error = 'already running — wait for current run to finish';
            return;
          }
          if (!r.ok) throw new Error('HTTP ' + r.status);
          await this.fetchState();
          this._maybeStartPolling();
        } catch (e) {
          this.error = e.message;
        } finally {
          this.triggering = false;
        }
      },

      // v7.0.0a3: signal the running reembed to stop after the
      // current host. The worker observes the flag between hosts;
      // it does NOT abort an in-flight host's reembed.
      async cancelRunning() {
        this.cancelling = true;
        this.error = '';
        try {
          const r = await hmFetch('/api/history/reembed/cancel', { method: 'POST' });
          if (!r.ok) throw new Error('HTTP ' + r.status);
          // Body: { running: bool, cancel_requested: bool }. When
          // running: false, the cancel was a no-op (already idle).
          await this.fetchState();
        } catch (e) {
          this.error = e.message;
        } finally {
          this.cancelling = false;
        }
      },

      progressLabel() {
        // "{processed} / {total}" baseline; appended " · ~{eta}s remaining"
        // when we have enough rate signal (>=1 host done, total > 1).
        const base = this.state.total
          ? `${this.state.processed} / ${this.state.total}`
          : '';
        const eta = this._etaSeconds();
        if (eta == null) return base;
        return `${base} · ~${this._formatEta(eta)} remaining`;
      },

      _etaSeconds() {
        const s = this.state;
        if (s.phase !== 'running') return null;
        if (!s.started_at || !s.processed || s.processed < 1) return null;
        if (!s.total || s.total <= s.processed) return null;
        const elapsed = (Date.now() / 1000) - s.started_at;
        const ratePerHost = elapsed / s.processed;
        return ratePerHost * (s.total - s.processed);
      },

      _formatEta(seconds) {
        if (seconds < 60) return `${seconds.toFixed(0)}s`;
        if (seconds < 3600) return `${(seconds / 60).toFixed(1)}m`;
        return `${(seconds / 3600).toFixed(1)}h`;
      },

      phaseLabel() {
        const labels = {
          idle: 'idle', running: 'running', done: 'completed', failed: 'failed',
          cancelled: 'cancelled',
        };
        // v7.0.0a3: while running with cancel pending, surface that
        // the user has clicked cancel even though phase is still 'running'.
        if (this.state.phase === 'running' && this.state.cancel_requested) {
          return 'cancelling…';
        }
        return labels[this.state.phase] || this.state.phase;
      },

      phaseBadgeClass() {
        const map = {
          running: 'bg-accent-soft/50 text-accent',
          done: 'bg-emerald-900/50 text-success',
          failed: 'bg-rose-900/50 text-danger',
          idle: 'bg-surface-3 text-foreground-muted',
          cancelled: 'bg-amber-900/50 text-warning',
        };
        // Same override as phaseLabel — show the amber badge while
        // the cancel is still in flight.
        if (this.state.phase === 'running' && this.state.cancel_requested) {
          return map.cancelled;
        }
        return map[this.state.phase] || map.idle;
      },

      // v8.0.0a2: phase icon. `running` returns an animated spinner
      // span; static phases return a glyph. Returned as raw HTML so
      // the spinner element is wired to the CSS animation class.
      phaseIconHtml() {
        const phase = this.state.phase;
        if (phase === 'running' && this.state.cancel_requested) return '⏳';
        if (phase === 'running') {
          return '<span class="inline-block w-2 h-2 border border-accent border-t-transparent rounded-full animate-spin"></span>';
        }
        const map = { idle: '⏸', done: '✓', failed: '✗', cancelled: '⚠' };
        return map[phase] || '●';
      },

      // v12.0.0a2: phase badge color name. Mirrors phaseBadgeClass()
      // but returns the color name the shared stateBadgeHtml helper
      // understands.
      phaseBadgeColor() {
        const map = {
          running: 'cyan',
          done: 'emerald',
          failed: 'rose',
          idle: 'gray',
          cancelled: 'amber',
        };
        if (this.state.phase === 'running' && this.state.cancel_requested) {
          return 'amber';
        }
        return map[this.state.phase] || 'gray';
      },
      phaseBadgeProps() {
        const phase = this.state.phase;
        // The `running` icon is a spinner span — pass iconHtml=true
        // so stateBadgeHtml inserts it raw. Other phases use a glyph
        // and run through the default text-escape path.
        const isRunning = phase === 'running' && !this.state.cancel_requested;
        return {
          state: phase,
          icon: this.phaseIconHtml(),
          iconHtml: isRunning,  // only the spinner is HTML; glyphs are text
          color: this.phaseBadgeColor(),
          label: this.phaseLabel(),
          ariaLabel: `Reembed ${this.phaseLabel()}`,
        };
      },

      formatDuration(start, end) {
        if (!start || !end) return '';
        const seconds = Math.max(0, end - start);
        if (seconds < 60) return `${seconds.toFixed(1)}s`;
        if (seconds < 3600) return `${(seconds / 60).toFixed(1)}m`;
        return `${(seconds / 3600).toFixed(1)}h`;
      },
    };
  }

  // v4.0.0a3: pan + zoom for the project graph.
  // Pure JS, no library — operates on a transform: translate() scale()
  // applied to the wrapper around the Mermaid <pre>/<svg>.
  function graphZoom() {
    return {
      scale: 1, tx: 0, ty: 0,
      dragging: false, _dragStartX: 0, _dragStartY: 0,
      _txStart: 0, _tyStart: 0,
      transitioning: false,
      // Pinch state
      _pinching: false, _pinchInitialDist: 0, _pinchInitialScale: 1,

      reset() {
        this.transitioning = true;
        this.scale = 1; this.tx = 0; this.ty = 0;
        // Disable transition after the animation so subsequent
        // pan/zoom feel direct.
        setTimeout(() => { this.transitioning = false; }, 220);
      },

      _clampScale(s) {
        return Math.max(0.25, Math.min(4, s));
      },

      onWheel(e) {
        // Wheel zoom (desktop). e.deltaY > 0 → zoom out.
        const delta = -e.deltaY * 0.001;
        const next = this._clampScale(this.scale * (1 + delta));
        // Anchor zoom on cursor position so it feels natural.
        const rect = e.currentTarget.getBoundingClientRect();
        const cx = e.clientX - rect.left;
        const cy = e.clientY - rect.top;
        const dx = (cx - this.tx) * (next / this.scale - 1);
        const dy = (cy - this.ty) * (next / this.scale - 1);
        this.tx -= dx; this.ty -= dy;
        this.scale = next;
      },

      onMouseDown(e) {
        if (e.button !== 0) return;
        this.dragging = true;
        this._dragStartX = e.clientX; this._dragStartY = e.clientY;
        this._txStart = this.tx; this._tyStart = this.ty;
      },
      onMouseMove(e) {
        if (!this.dragging) return;
        this.tx = this._txStart + (e.clientX - this._dragStartX);
        this.ty = this._tyStart + (e.clientY - this._dragStartY);
      },
      onMouseUp() {
        this.dragging = false;
      },

      // v5.0.0a5: double-tap timestamp tracking for tap-to-reset.
      _lastTapTime: 0,

      onTouchStart(e) {
        if (e.touches.length === 2) {
          // Pinch start.
          this._pinching = true;
          this._pinchInitialDist = this._touchDist(e);
          this._pinchInitialScale = this.scale;
        } else if (e.touches.length === 1) {
          // v5.0.0a5: double-tap-to-reset detection (within 300ms).
          const now = Date.now();
          if (now - this._lastTapTime < 300) {
            this.reset();
            this._lastTapTime = 0;
            return;
          }
          this._lastTapTime = now;
          // Single-finger pan start.
          this.dragging = true;
          this._dragStartX = e.touches[0].clientX;
          this._dragStartY = e.touches[0].clientY;
          this._txStart = this.tx; this._tyStart = this.ty;
        }
      },
      onTouchMove(e) {
        if (this._pinching && e.touches.length === 2) {
          const dist = this._touchDist(e);
          if (this._pinchInitialDist > 0) {
            const next = this._clampScale(
              this._pinchInitialScale * (dist / this._pinchInitialDist),
            );
            this.scale = next;
          }
        } else if (this.dragging && e.touches.length === 1) {
          this.tx = this._txStart + (e.touches[0].clientX - this._dragStartX);
          this.ty = this._tyStart + (e.touches[0].clientY - this._dragStartY);
        }
      },
      onTouchEnd(e) {
        if (e.touches.length === 0) {
          this._pinching = false;
          this.dragging = false;
        } else if (e.touches.length === 1 && this._pinching) {
          // Pinch ended but a finger is still down — switch to pan.
          this._pinching = false;
          this.dragging = true;
          this._dragStartX = e.touches[0].clientX;
          this._dragStartY = e.touches[0].clientY;
          this._txStart = this.tx; this._tyStart = this.ty;
        }
      },
      _touchDist(e) {
        const a = e.touches[0], b = e.touches[1];
        const dx = a.clientX - b.clientX, dy = a.clientY - b.clientY;
        return Math.hypot(dx, dy);
      },

      // v5.0.0a5: keyboard shortcuts on desktop. Only fire when no
      // input element has focus (so typing into the recall search box
      // doesn't accidentally pan the graph).
      bindKeyboard() {
        // bindKeyboard is intentionally a no-op marker — the actual
        // listener is wired via @keydown.window on the panel. This
        // method exists so the alpine x-init has a hook to call.
      },

      onKeyDown(e) {
        // Skip when typing into a form field.
        const tag = (e.target && e.target.tagName) || '';
        if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
        const PAN_STEP = 30;
        const ZOOM_STEP = 0.1;
        switch (e.key) {
          case '+':
          case '=':
            this.scale = this._clampScale(this.scale + ZOOM_STEP);
            e.preventDefault();
            break;
          case '-':
          case '_':
            this.scale = this._clampScale(this.scale - ZOOM_STEP);
            e.preventDefault();
            break;
          case 'ArrowLeft':
            this.tx += PAN_STEP; e.preventDefault(); break;
          case 'ArrowRight':
            this.tx -= PAN_STEP; e.preventDefault(); break;
          case 'ArrowUp':
            this.ty += PAN_STEP; e.preventDefault(); break;
          case 'ArrowDown':
            this.ty -= PAN_STEP; e.preventDefault(); break;
          case 'Escape':
            this.reset(); e.preventDefault(); break;
        }
      },
    };
  }

  function graphPanel() {
    return {
      includeDevDeps: false, transitive: false,
      graph: {}, mermaidMarkup: '', graphLoading: true, graphError: null,
      // v21.0.0a9: 'cytoscape' (default) or 'mermaid' fallback.
      // Persisted via localStorage so a refresh keeps the operator's
      // pick.
      renderer: 'cytoscape',
      cy: null,

      init() {
        try {
          const saved = localStorage.getItem('hm:graph:renderer');
          if (saved === 'cytoscape' || saved === 'mermaid') this.renderer = saved;
        } catch (_) { /* default cytoscape */ }
      },

      toggleRenderer() {
        this.renderer = (this.renderer === 'cytoscape') ? 'mermaid' : 'cytoscape';
        try { localStorage.setItem('hm:graph:renderer', this.renderer); } catch (_) {}
        // Re-render in the newly-selected mode using the cached data.
        if (this.renderer === 'cytoscape') {
          this._renderCytoscape();
        } else {
          this._renderMermaid();
        }
      },

      // v6.0.1: poll for window.__hmMermaid (loaded via async ESM in
      // base.html). Resolves true when ready, false on timeout.
      _waitForMermaid(maxMs) {
        return new Promise((resolve) => {
          const start = Date.now();
          const check = () => {
            if (window.__hmMermaid) return resolve(true);
            if (Date.now() - start > maxMs) return resolve(false);
            requestAnimationFrame(check);
          };
          check();
        });
      },

      async loadGraph() {
        this.graphLoading = true; this.graphError = null;
        try {
          const params = new URLSearchParams();
          if (this.includeDevDeps) params.set('include_dev_deps', 'true');
          if (this.transitive) params.set('transitive', 'true');
          // v21.0.0a9: always ask for Cytoscape format too — the
          // server emits both shapes in one round-trip so toggling
          // the renderer doesn't re-fetch.
          params.set('format', 'cytoscape');
          const url = '/api/graph' + (params.toString() ? '?' + params : '');
          const r = await hmFetch(url);
          if (!r.ok) throw new Error('HTTP ' + r.status);
          this.graph = await r.json();
          this.mermaidMarkup = this.graph.mermaid || 'graph LR\n  empty[No projects]';
          // v6.0.1 fixed two regressions (Alpine $refs scope leak +
          // async ESM race). v6.0.2 fixes a third: the section is
          // hidden via x-show while loadGraph runs, so the renderer
          // measures the still-hidden node at 0×0.
          //
          // Fix: flip graphLoading=false BEFORE rendering so the
          // viewport is laid out at its real dimensions.
          this.graphLoading = false;
          await new Promise((r) => requestAnimationFrame(r));
          if (this.renderer === 'cytoscape') {
            this._renderCytoscape();
          } else {
            await this._renderMermaid();
          }
        } catch (e) {
          this.graphError = e.message;
        } finally {
          // graphLoading was already flipped above when the fetch
          // succeeded; only flip here for the error path.
          this.graphLoading = false;
        }
      },

      async _renderMermaid() {
        await this._waitForMermaid(3000);
        await new Promise((r) => requestAnimationFrame(r));
        const node = document.querySelector('pre.mermaid');
        if (node && window.__hmMermaid) {
          node.removeAttribute('data-processed');
          try {
            await window.__hmMermaid.run({ nodes: [node] });
          } catch (e) { this.graphError = 'mermaid: ' + e.message; }
        } else if (!window.__hmMermaid) {
          this.graphError = 'mermaid bundle did not load within 3s';
        }
      },

      // v21.0.0a9: render the Cytoscape view.
      // Node colour by language: python=blue, javascript=yellow,
      // typescript=blue-cyan, php=purple, rust=orange, go=teal,
      // ruby=red, java=brown — matches the v6.0.0a3 sidebar palette.
      // Click node → /projects/<name>. cose layout = force-directed.
      _renderCytoscape() {
        if (!window.cytoscape) {
          this.graphError = 'cytoscape failed to load';
          return;
        }
        const container = document.getElementById('project-graph-cy');
        if (!container) {
          this.graphError = 'project-graph-cy container missing';
          return;
        }
        const cy_data = this.graph.cytoscape || { nodes: [], edges: [] };
        const elements = [...cy_data.nodes, ...cy_data.edges];
        if (this.cy) { this.cy.destroy(); this.cy = null; }
        if (elements.length === 0) return;
        const self = this;
        this.cy = window.cytoscape({
          container: container,
          elements: elements,
          style: [
            { selector: 'node',
              style: {
                'background-color': '#475569',
                'label': 'data(label)',
                'color': '#e2e8f0',
                'font-size': '10px',
                'text-valign': 'center',
                'text-halign': 'center',
                'text-outline-color': '#0f172a',
                'text-outline-width': 2,
                'width': 28, 'height': 28,
              } },
            { selector: 'node[language = "python"]',     style: { 'background-color': '#3b82f6' } },
            { selector: 'node[language = "javascript"]', style: { 'background-color': '#eab308' } },
            { selector: 'node[language = "typescript"]', style: { 'background-color': '#0ea5e9' } },
            { selector: 'node[language = "php"]',        style: { 'background-color': '#a855f7' } },
            { selector: 'node[language = "rust"]',       style: { 'background-color': '#f97316' } },
            { selector: 'node[language = "go"]',         style: { 'background-color': '#14b8a6' } },
            { selector: 'node[language = "ruby"]',       style: { 'background-color': '#ef4444' } },
            { selector: 'node[language = "java"]',       style: { 'background-color': '#b45309' } },
            { selector: 'edge',
              style: {
                'curve-style': 'bezier',
                'target-arrow-shape': 'triangle',
                'width': 1.5,
                'line-color': '#64748b',
                'target-arrow-color': '#64748b',
              } },
            { selector: 'edge[kind = "dev_dep"]',
              style: { 'line-style': 'dashed' } },
            { selector: 'edge[kind = "transitive"]',
              style: { 'line-color': '#0e7490', 'target-arrow-color': '#0e7490' } },
          ],
          layout: { name: 'cose', idealEdgeLength: 80, animate: false, fit: true, padding: 12 },
        });
        this.cy.on('tap', 'node', (evt) => {
          const id = evt.target.id();
          if (id) window.location.href = '/projects/' + encodeURIComponent(id);
        });
      },
    };
  }

  // v19.0.0a5: quickAsk — top-of-dashboard prompt entry point. Uses
  // the navigation-fallback strategy: the project page already wires
  // askForm() with a `?q=` pre-fill (see _ask_form_script.html init()),
  // so we just hand off the question via the URL. This avoids the
  // duplicate SSE plumbing that a fully inline implementation would
  // need on top of the dashboard's existing scope (kpiStrip, statusStrip,
  // recallPanel, graphPanel, projectGrid, reembedPanel — already heavy).
  function quickAsk() {
    return {
      projects: [],
      project: '',
      question: '',
      // v21.0.0a10: operator-picked model alias. '' = auto (backend
      // default). The project page's askForm() picks up `?model=` via
      // its init() (see _ask_form_script.html).
      model: '',
      error: '',
      async init() {
        try {
          const r = await hmFetch('/api/projects');
          if (!r.ok) return;
          const d = await r.json();
          const list = Array.isArray(d.projects) ? d.projects : [];
          this.projects = list.map(p => p.name);
        } catch (_) { /* soft-fail — empty dropdown */ }
      },
      ask() {
        if (!this.project || this.question.trim().length < 2) return;
        let url = '/projects/' + encodeURIComponent(this.project)
          + '?q=' + encodeURIComponent(this.question.trim());
        if (this.model) url += '&model=' + encodeURIComponent(this.model);
        window.location.href = url;
      },
    };
  }

  // v19.0.0a5: recentActivityCard — last 10 MCP calls in the dashboard
  // card grid. Mirrors the inspector's activityFeed() (same endpoint
  // + same shape) so operators who collapse the inspector still see
  // recent activity at a glance.
  function recentActivityCard() {
    return {
      events: [],
      _interval: null,
      async load() {
        try {
          const r = await hmFetch('/api/network/events?limit=10');
          if (!r.ok) return;
          const body = await r.json();
          const list = Array.isArray(body.events) ? body.events : [];
          this.events = list.map(e => ({
            timestamp_ms: e.timestamp_ms,
            tool: e.tool,
            target: e.target,
            time: new Date(e.timestamp_ms).toLocaleTimeString([], {
              hour: '2-digit', minute: '2-digit', second: '2-digit',
            }),
          }));
        } catch (_) { /* soft-fail */ }
      },
      start() {
        if (this._interval) return;
        this._interval = setInterval(() => this.load(), 10000);
      },
    };
  }
</script>

{# v15.0.0a6: dashboard tour wizard. 5-step interactive walkthrough on
   first dashboard load, gated by localStorage `hm-tour-completed`.
   Re-trigger via `?tour=1` query string. Steps anchor to existing
   selectors via querySelector — no markup changes to anchors. #}
<div x-data="dashboardTour()"
     x-init="maybeStart()"
     x-show="active"
     x-cloak
     class="fixed inset-0 z-50 pointer-events-none"
     role="dialog"
     :aria-label="`Tour step ${stepIndex + 1} of ${steps.length}`">
  <!-- Backdrop. Pointer-events on so clicks dismiss the highlight
       but not the underlying card (we keep operator interactivity). -->
  <div class="absolute inset-0 bg-surface-1/40 pointer-events-auto"
       @click="next()"></div>
  <!-- Popover, positioned by computed anchorRect coords. -->
  <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 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 dashboardTour() {
    return {
      active: false,
      stepIndex: 0,
      anchorRect: null,
      // v16.0.0a3: tour anchors moved to explicit `data-tour-step`
      // markup attrs (carry-over #6). Each step now lists the
      // tour-step name first; the v15.a6 fallback selector stays as
      // a `legacy` field so a template refactor that drops the
      // attr falls through to the old selector instead of silently
      // breaking the step. _findAnchor() picks the data-attr first.
      steps: [
        {
          tourStep: 'kpi-strip',
          legacy: '[data-kpi-cell="projects"]',
          title: 'KPI strip',
          body: 'The top strip surfaces the live operator KPIs — projects discovered, active embeds, recent queries, bridge state, and host budget usage.',
        },
        {
          tourStep: 'sidebar',
          legacy: '#hm-sidebar',
          title: 'Project sidebar',
          body: 'Every discovered project lives in the sidebar. Pin the ones you use most; collapsed state persists across reloads.',
        },
        {
          tourStep: 'ask-form',
          legacy: 'section[x-data^="askForm"]',
          title: 'Ask form',
          body: 'Send a question to any project (or host) without leaving the dashboard. Streams the answer back via SSE.',
        },
        {
          tourStep: 'palette',
          legacy: '[x-data="commandPalette()"]',
          title: 'Command palette',
          body: 'Press Cmd+K (Mac) or Ctrl+K (Linux/Win) to open the palette. Fuzzy-search every project, host, and dashboard view.',
        },
        {
          tourStep: 'memories',
          legacy: 'section[x-data^="memoriesPanel"], a[href*="/projects/"]',
          title: 'Memories',
          body: 'Each project carries its own CLAUDE.md + Serena memories. Click any project from the grid to open the per-project view, then edit memories inline.',
        },
      ],
      currentStep() { return this.steps[this.stepIndex] || {}; },
      // v15.0.0a6: gating logic.
      // - localStorage `hm-tour-completed` skips the tour.
      // - URL `?tour=1` always starts the tour (re-trigger after dismiss).
      maybeStart() {
        try {
          const params = new URLSearchParams(location.search);
          const force = params.get('tour') === '1';
          const done = localStorage.getItem('hm-tour-completed') === '1';
          if (!force && done) return;
          // Defer one paint so anchor elements have layout dimensions.
          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-tour-completed', '1'); } catch (_) {}
      },
      // v16.0.0a3: anchor lookup prefers `[data-tour-step="..."]`
      // (resilient to template refactors), falling back to the
      // pre-v16 querySelector when the step exposes a `legacy`
      // selector. Returns the first matched element, or null.
      _findAnchor(step) {
        if (step.tourStep) {
          const el = document.querySelector(`[data-tour-step="${step.tourStep}"]`);
          if (el) return el;
        }
        if (step.legacy) {
          const el = document.querySelector(step.legacy);
          if (el) return el;
        }
        return null;
      },
      _positionPopover() {
        const step = this.currentStep();
        const el = this._findAnchor(step);
        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;
        // Place 12px below the anchor, clamped to viewport.
        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;
        // Center on the anchor, clamped to viewport.
        const w = 360; // matches max-w-sm-ish
        let l = this.anchorRect.left + (this.anchorRect.width / 2) - (w / 2);
        l = Math.max(12, Math.min(l, window.innerWidth - w - 12));
        return l;
      },
    };
  }
</script>

{% endblock %}

{# v19.0.0a3: inspector pane — slim KPI summary + recent MCP activity.
   Mirrors the main strip's numbers in a vertical dl + tails the last 10
   network events. Auto-refreshes every 10s; soft-fails when /api/kpi or
   /api/network/events is unreachable so the inspector never blocks. #}
{% block inspector %}
<div class="p-2" data-tour-step="inspector-content">
  <section x-data="kpiInspector()" x-init="load(); start()" class="mb-4">
    <h3 class="text-xs uppercase tracking-wide text-foreground-subtle mb-2">Summary</h3>
    <dl class="grid grid-cols-2 gap-x-2 gap-y-1 text-xs">
      <dt class="text-foreground-muted">Projects</dt>
      <dd class="text-foreground font-mono" x-text="kpi.projects ?? '—'"></dd>
      <dt class="text-foreground-muted">Active embeds</dt>
      <dd class="text-foreground font-mono" x-text="embedsLabel()"></dd>
      <dt class="text-foreground-muted">1h queries</dt>
      <dd class="text-foreground font-mono" x-text="kpi.recent_queries ?? '—'"></dd>
      <dt class="text-foreground-muted">Bridge</dt>
      <dd class="text-foreground font-mono truncate" x-text="kpi.bridge ?? '—'"></dd>
    </dl>
  </section>
  <section x-data="activityFeed()" x-init="load(); start(); subscribe()"
           x-on:beforeunload.window="destroy()"
           class="border-t border-border pt-3">
    <h3 class="text-xs uppercase tracking-wide text-foreground-subtle mb-2 flex items-center gap-1">
      <span>Recent activity</span>
      {# v19.0.0a7: live indicator — green dot when SSE stream is open. #}
      <span x-show="connected"
            data-inspector-activity-live
            class="text-[10px] text-success leading-none"
            title="live stream connected">●</span>
    </h3>
    <ul class="text-xs space-y-1" data-inspector-activity>
      <template x-for="ev in events" :key="'ev:' + ev.timestamp_ms + ':' + ev.tool + ':' + ev.target">
        <li class="font-mono truncate"
            :class="ev._new ? 'animate-pulse text-accent' : 'text-foreground-muted'">
          <span class="text-foreground-subtle" x-text="ev.time"></span>
          <span class="text-accent" x-text="ev.tool"></span>
          <span class="text-foreground-muted" x-text="ev.target"></span>
        </li>
      </template>
      <li x-show="!events.length"
          class="text-foreground-dim text-[11px] leading-snug border border-border-subtle bg-surface-2/40 rounded p-2">
        <span class="block text-foreground-muted font-semibold mb-0.5">No recent activity.</span>
        Run <span class="font-mono text-accent">ask_project</span> or
        <span class="font-mono text-accent">delegate_task</span> from your
        MCP client and live calls will land here.
      </li>
    </ul>
    <a href="/network" class="text-xs text-accent block mt-2">view all →</a>
  </section>

  <!-- v21.0.0a3: operator-tunable accent picker.
       Persists to ~/.config/harbormaster/config.toml [ui] section via
       PUT /api/settings/accent. Live preview without page reload by
       injecting / updating the <style id="hm-custom-accent"> tag. -->
  <details class="mt-4 border-t border-border pt-3"
           data-tour-step="accent-picker"
           data-inspector-accent>
    <summary class="text-xs uppercase tracking-wide text-foreground-subtle cursor-pointer hover:text-accent">
      Accent color
    </summary>
    <div class="mt-2 space-y-2 text-xs"
         x-data="accentPicker()" x-init="load()">
      <div class="flex items-center gap-2">
        <label class="w-12 text-foreground-muted">Hue</label>
        <input type="range" min="0" max="360" step="1"
               x-model.number="hue" @input="preview()"
               aria-label="Accent hue (OKLCH degrees)"
               class="flex-1">
        <span class="font-mono w-10 text-right text-foreground-muted"
              x-text="hue + '°'"></span>
      </div>
      <div class="flex items-center gap-2">
        <label class="w-12 text-foreground-muted">Chroma</label>
        <input type="range" min="0" max="0.30" step="0.01"
               x-model.number="chroma" @input="preview()"
               aria-label="Accent chroma"
               class="flex-1">
        <span class="font-mono w-12 text-right text-foreground-muted"
              x-text="chroma.toFixed(2)"></span>
      </div>
      <div class="flex items-center gap-2">
        <div class="w-6 h-6 rounded border border-border-subtle"
             :style="`background: oklch(62% ${chroma} ${hue})`"
             aria-hidden="true"></div>
        <span class="text-foreground-subtle font-mono text-[10px]"
              x-text="`oklch(62% ${chroma.toFixed(2)} ${hue})`"></span>
      </div>
      <div class="flex gap-2">
        <button type="button" @click="save()"
                :disabled="saving"
                aria-label="Save accent color"
                data-accent-save
                class="px-2 py-1 rounded border border-accent-strong bg-accent-soft/30 text-accent hover:bg-accent-soft/50 disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-accent">
          <span x-text="saving ? 'Saving...' : 'Save'"></span>
        </button>
        <button type="button" @click="reset()"
                aria-label="Reset accent to violet default"
                data-accent-reset
                class="px-2 py-1 rounded border border-border text-foreground-muted hover:bg-surface-2 hover:text-foreground focus-visible:ring-2 focus-visible:ring-accent">
          Reset
        </button>
      </div>
      <p x-show="message" x-text="message"
         :class="messageClass"
         class="text-[11px] leading-tight"></p>
    </div>
  </details>
</div>
<script>
  // v19.0.0a3: kpiInspector — slim mirror of /api/kpi for the right pane.
  function kpiInspector() {
    return {
      kpi: {},
      _interval: null,
      async load() {
        try {
          const r = await hmFetch('/api/kpi');
          if (!r.ok) return;
          this.kpi = await r.json();
        } catch (_) { /* soft-fail */ }
      },
      start() {
        if (this._interval) return;
        this._interval = setInterval(() => this.load(), 10000);
      },
      embedsLabel() {
        const e = this.kpi.active_embeds;
        if (!e || !e.phase) return '—';
        if (e.processed != null && e.total != null) {
          return e.phase + ' ' + e.processed + '/' + e.total;
        }
        return e.phase;
      },
    };
  }
  // v19.0.0a3: activityFeed — last 10 MCP-call events from /api/network/events.
  // v19.0.0a7: extended with /api/network/stream SSE subscription. Initial
  // load + 10s poll remain as a fallback for environments where SSE is
  // proxy-blocked. Live updates from the stream are batched in 1s buckets
  // before flushing to the DOM (avoids reflow thrash during call bursts).
  // Newly-prepended rows wear `_new=true` for ~1.5s so the template can
  // pulse them via Tailwind's `animate-pulse` utility.
  function activityFeed() {
    return {
      events: [],
      _interval: null,
      _eventSource: null,
      _flushInterval: null,
      _clearFlashTimer: null,
      _buffered: [],
      _flushIntervalMs: 1000,
      _flashHoldMs: 1500,
      _maxEvents: 10,
      connected: false,
      _normalize(e) {
        return {
          timestamp_ms: e.timestamp_ms,
          tool: e.tool,
          target: e.target,
          time: new Date(e.timestamp_ms).toLocaleTimeString([], {
            hour: '2-digit', minute: '2-digit', second: '2-digit'
          }),
        };
      },
      async load() {
        try {
          const r = await hmFetch('/api/network/events?limit=10');
          if (!r.ok) return;
          const body = await r.json();
          const list = Array.isArray(body.events) ? body.events : [];
          this.events = list.map(e => this._normalize(e));
        } catch (_) { /* soft-fail */ }
      },
      start() {
        if (this._interval) return;
        this._interval = setInterval(() => this.load(), 10000);
      },
      subscribe() {
        // EventSource doesn't support custom headers — SSE is bearer-protected
        // via cookies/IP scope (same pattern as network.html).
        if (this._eventSource) return;
        try {
          this._eventSource = new EventSource('/api/network/stream');
          this._eventSource.addEventListener('open', () => {
            this.connected = true;
          });
          this._eventSource.addEventListener('error', () => {
            this.connected = false;
          });
          this._eventSource.addEventListener('event', (msg) => {
            try {
              const ev = JSON.parse(msg.data);
              this._buffered.push(ev);
            } catch (_) { /* drop malformed */ }
          });
        } catch (_) { /* soft-fail — poll fallback still active */ }
        if (this._flushInterval) return;
        this._flushInterval = setInterval(() => this._flush(), this._flushIntervalMs);
      },
      _flush() {
        if (this._buffered.length === 0) return;
        const drained = this._buffered.splice(0).map(e => {
          const n = this._normalize(e);
          n._new = true;
          return n;
        });
        // Prepend newest, dedupe against existing (timestamp_ms+tool+target),
        // cap at _maxEvents.
        const seen = new Set(drained.map(e => e.timestamp_ms + ':' + e.tool + ':' + e.target));
        const kept = this.events.filter(e => !seen.has(e.timestamp_ms + ':' + e.tool + ':' + e.target));
        this.events = [...drained, ...kept].slice(0, this._maxEvents);
        if (this._clearFlashTimer) clearTimeout(this._clearFlashTimer);
        this._clearFlashTimer = setTimeout(() => {
          this.events = this.events.map(e => ({ ...e, _new: false }));
        }, this._flashHoldMs);
      },
      destroy() {
        if (this._eventSource) { this._eventSource.close(); this._eventSource = null; }
        if (this._flushInterval) { clearInterval(this._flushInterval); this._flushInterval = null; }
        if (this._interval) { clearInterval(this._interval); this._interval = null; }
        if (this._clearFlashTimer) { clearTimeout(this._clearFlashTimer); this._clearFlashTimer = null; }
        this.connected = false;
      },
    };
  }

  // v21.0.0a3: accentPicker — inspector widget for OKLCH accent override.
  // GET /api/settings/accent on init, PUT on Save, live preview via
  // mutating the #hm-custom-accent <style> tag in <head>.
  function accentPicker() {
    return {
      hue: 290,
      chroma: 0.22,
      saving: false,
      message: '',
      messageClass: 'text-foreground-muted',
      async load() {
        try {
          const r = await hmFetch('/api/settings/accent');
          if (r.ok) {
            const d = await r.json();
            this.hue = (d.hue != null) ? d.hue : 290;
            this.chroma = (d.chroma != null) ? d.chroma : 0.22;
            this.applyToDOM();
          }
        } catch (_) { /* soft-fail — keep defaults */ }
      },
      preview() { this.applyToDOM(); },
      applyToDOM() {
        let s = document.getElementById('hm-custom-accent');
        if (!s) {
          s = document.createElement('style');
          s.id = 'hm-custom-accent';
          document.head.appendChild(s);
        }
        const c = Number(this.chroma) || 0;
        const h = Number(this.hue) || 0;
        const cSoft = (c * 0.6).toFixed(4);
        s.textContent =
          ':root { ' +
          `--color-accent-strong: oklch(62% ${c} ${h}); ` +
          `--color-accent: oklch(78% ${cSoft} ${h}); ` +
          `--hm-accent: oklch(78% ${cSoft} ${h}); ` +
          `--hm-accent-strong: oklch(62% ${c} ${h}); ` +
          '}';
      },
      async save() {
        this.saving = true;
        this.message = '';
        try {
          const body = JSON.stringify({hue: this.hue, chroma: this.chroma});
          const r = await hmFetch('/api/settings/accent', {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body,
          });
          this.message = r.ok ? 'Saved' : `Failed (${r.status})`;
          this.messageClass = r.ok ? 'text-success' : 'text-danger';
        } catch (e) {
          this.message = 'Save failed';
          this.messageClass = 'text-danger';
        } finally {
          this.saving = false;
          setTimeout(() => { this.message = ''; }, 2000);
        }
      },
      async reset() {
        try {
          this.hue = 290;
          this.chroma = 0.22;
          this.applyToDOM();
          await this.save();
        } catch (_) { /* swallowed — save() already records message */ }
      },
    };
  }
</script>
{% endblock %}