{% extends "base.html" %}
{% block title %}Dashboard · Harbormaster{% 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-gray-900/80 hover:bg-gray-800 border border-gray-700 text-cyan-400 w-9 h-9 rounded-full text-base font-bold transition"
          :title="open ? 'close help (Esc)' : 'keyboard shortcuts (?)'">
    <span x-text="open ? '×' : '?'"></span>
  </button>
  <div x-show="open" x-cloak
       @click.away="open = false"
       class="fixed bottom-16 right-4 z-30 w-80 max-h-[70vh] overflow-y-auto bg-gray-950 border border-gray-700 rounded-lg shadow-xl p-4">
    <header class="flex items-baseline justify-between mb-3">
      <h3 class="text-sm font-bold text-gray-200">Keyboard shortcuts</h3>
      <button type="button" @click="open = false"
              class="text-gray-500 hover:text-gray-300 text-xs">close</button>
    </header>
    <template x-for="section in shortcuts" :key="section.scope">
      <div class="mb-3">
        <h4 class="text-[11px] uppercase tracking-wide text-gray-500 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-gray-800 border border-gray-700 rounded px-1.5 py-0.5 text-cyan-300 font-mono text-[10px] shrink-0"
                   x-text="row.keys"></kbd>
              <span class="text-gray-300" x-text="row.action"></span>
            </li>
          </template>
        </ul>
      </div>
    </template>
    <p class="mt-3 pt-3 border-t border-gray-800 text-[11px] text-gray-500">
      Press <kbd class="bg-gray-800 border border-gray-700 rounded px-1 py-0 text-cyan-300 font-mono">Esc</kbd>
      or <kbd class="bg-gray-800 border border-gray-700 rounded px-1 py-0 text-cyan-300 font-mono">?</kbd>
      to dismiss.
    </p>
  </div>
</div>

<!-- v2.1.0a1: bridge + plugin status strip. Sticky on desktop,
     collapsible on mobile. Loads async, doesn't block project grid. -->
<section x-data="statusStrip()" x-init="loadAll()"
         class="mb-6 grid grid-cols-1 md:grid-cols-2 gap-4">
  <article class="border border-gray-800 rounded-lg p-4 bg-gray-900/40">
    <header class="flex items-center justify-between mb-2">
      <h3 class="text-sm font-bold text-gray-300">FleetQ Bridge</h3>
      <span class="text-xs px-2 py-0.5 rounded"
            :class="bridgeBadgeClass()"
            x-text="bridgeStateLabel()"
            :title="bridgeBadgeTooltip()"></span>
    </header>
    <dl class="text-xs space-y-1 text-gray-400" x-show="!bridgeError">
      <div><dt class="inline text-gray-500">enabled:</dt>
        <dd class="inline ml-1" x-text="bridge.fleetq_enabled"></dd></div>
      <div><dt class="inline text-gray-500">register_as_bridge:</dt>
        <dd class="inline ml-1" x-text="bridge.register_as_bridge"></dd></div>
      <div><dt class="inline text-gray-500">base_url:</dt>
        <dd class="inline ml-1 text-cyan-400" x-text="bridge.base_url"></dd></div>
      <div><dt class="inline text-gray-500">token (env var):</dt>
        <dd class="inline ml-1"
            :class="bridge.api_token_present ? 'text-emerald-400' : 'text-amber-400'"
            x-text="bridge.api_token_present ? `${bridge.api_token_env} ✓` : `${bridge.api_token_env} (empty)`"></dd></div>
      <div><dt class="inline text-gray-500">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-gray-500">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-rose-400">
        <dt class="inline text-gray-500">last_error:</dt>
        <dd class="inline ml-1" x-text="bridge.runtime && bridge.runtime.last_error"></dd>
      </div>
    </dl>
    <p x-show="bridgeError" class="text-xs text-red-400" x-text="bridgeError"></p>
  </article>

  <article class="border border-gray-800 rounded-lg p-4 bg-gray-900/40">
    <header class="flex items-center justify-between mb-2">
      <h3 class="text-sm font-bold text-gray-300">Plugins</h3>
      <span class="text-xs px-2 py-0.5 rounded"
            :class="plugins.enabled ? 'bg-emerald-900/50 text-emerald-300'
                                    : 'bg-gray-800 text-gray-400'"
            x-text="plugins.enabled ? `enabled (${pluginCounts().loaded} loaded)` : 'disabled'"></span>
    </header>
    <div x-show="!pluginsError" class="text-xs space-y-1">
      <p class="text-gray-500" x-show="(plugins.plugins || []).length === 0">
        No entry points discovered.
      </p>
      <template x-for="row in (plugins.plugins || [])" :key="row.entry_point + ':' + row.dist_name">
        <div class="flex items-baseline gap-2">
          <span class="px-1.5 py-0.5 rounded text-[10px] font-bold uppercase tracking-wide"
                :class="{
                  'bg-emerald-900/50 text-emerald-300': row.status === 'loaded',
                  'bg-gray-800 text-gray-400': ['disabled','not-allowlisted'].includes(row.status),
                  'bg-amber-900/50 text-amber-300': row.status === 'missing',
                  'bg-rose-900/50 text-rose-300': row.status === 'no-dist-name',
                }"
                x-text="row.status"></span>
          <span class="text-gray-300 truncate" x-text="row.dist_name || '<unknown>'"></span>
          <span class="text-gray-500 text-[10px]" x-show="row.entry_point" x-text="`(${row.entry_point})`"></span>
        </div>
      </template>
    </div>
    <p x-show="pluginsError" class="text-xs text-red-400" x-text="pluginsError"></p>
  </article>
</section>

<!-- v5.0.0a1: auto-reembed runner status. Polls /api/history/state
     every 3s while phase is "running"; idles otherwise. -->
<section x-data="reembedPanel()" x-init="loadOnce()"
         class="mb-6 border border-gray-800 rounded-lg p-4 bg-gray-900/40"
         x-show="state.available && (state.phase !== 'idle' || state.auto_reembed_enabled)">
  <header class="flex items-center justify-between mb-2 gap-2 flex-wrap">
    <h3 class="text-sm font-bold text-gray-300">Auto-reembed</h3>
    <div class="flex items-center gap-2">
      <!-- v6.0.0a1: manual trigger button. Disabled while running. -->
      <button type="button" @click="triggerManual()"
              :disabled="state.phase === 'running' || triggering"
              class="text-xs px-2 py-0.5 rounded border border-gray-700 bg-gray-900/60 hover:bg-gray-800 disabled:bg-gray-900 disabled:text-gray-600 transition"
              title="run reembed now (skips the auto_reembed_on_drift gate)">
        <span x-show="!triggering">run now</span>
        <span x-show="triggering">starting…</span>
      </button>
      <span class="text-xs px-2 py-0.5 rounded" :class="phaseBadgeClass()"
            x-text="phaseLabel()"></span>
    </div>
  </header>
  <div x-show="state.phase === 'running'" class="text-xs text-gray-400">
    <div class="flex items-baseline justify-between gap-2 mb-1">
      <span x-text="state.current_host ? `processing host: ${state.current_host}` : 'preparing…'"></span>
      <span class="text-gray-500" x-text="progressLabel()"></span>
    </div>
    <div class="h-1.5 bg-gray-800 rounded overflow-hidden">
      <div class="h-full bg-cyan-600 transition-all"
           :style="`width: ${state.total ? (state.processed / state.total * 100) : 0}%`"></div>
    </div>
  </div>
  <div x-show="state.phase === 'done'" class="text-xs text-emerald-400">
    <span x-text="state.total ? `Completed ${state.total} host${state.total === 1 ? '' : 's'}` : 'Done'"></span>
    <span x-show="state.finished_at" class="text-gray-500"
          x-text="` · ${formatDuration(state.started_at, state.finished_at)}`"></span>
  </div>
  <div x-show="state.phase === 'failed'" class="text-xs">
    <p class="text-rose-400 mb-1">Auto-reembed failed.</p>
    <p class="text-gray-400 break-words" x-text="state.error"></p>
  </div>
  <div x-show="state.phase === 'idle' && state.auto_reembed_enabled"
       class="text-xs text-gray-500">
    Idle — no embedding drift detected. Auto-reembed runs on next startup
    if the configured embedding model changes.
  </div>
  <p x-show="error" class="text-xs text-red-400" x-text="error"></p>
</section>

<!-- v2.1.0a3: recall search. Hits /api/recall (which wraps the
     recall_qa MCP tool) and renders match cards inline. -->
<section x-data="recallPanel()" x-init="restoreFromUrl()"
         class="mb-6 border border-gray-800 rounded-lg p-4 bg-gray-900/40">
  <header class="mb-3 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-gray-500">
      semantic search over <code class="text-cyan-400">recall_qa</code> store
    </span>
  </header>
  <form @submit.prevent="search()" class="flex flex-col md:flex-row gap-2 mb-3">
    <input type="text" x-model="question" required minlength="2"
           placeholder="e.g. how does authentication work?"
           class="flex-1 bg-gray-950 border border-gray-800 rounded px-3 py-2 text-sm focus:border-cyan-700 focus:outline-none">
    <input type="text" x-model="project"
           placeholder="project filter (optional)"
           class="md:w-48 bg-gray-950 border border-gray-800 rounded px-3 py-2 text-sm focus:border-cyan-700 focus:outline-none">
    <select x-model="host"
            class="md:w-32 bg-gray-950 border border-gray-800 rounded px-3 py-2 text-sm focus:border-cyan-700 focus:outline-none">
      <option value="local">local</option>
      <option value="all">all hosts</option>
    </select>
    <button type="submit"
            :disabled="loading || question.trim().length < 2"
            class="bg-cyan-700 hover:bg-cyan-600 disabled:bg-gray-800 disabled:text-gray-500 text-white font-bold px-4 py-2 rounded text-sm transition">
      <span x-show="!loading">Search</span>
      <span x-show="loading">…</span>
    </button>
  </form>
  <div x-show="message" class="text-xs text-amber-400 mb-2" x-text="message"></div>
  <div x-show="error" class="text-xs text-red-400 mb-2" x-text="error"></div>
  <div x-show="hasResults">
    <p class="text-xs text-gray-500 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-gray-800 rounded p-3 bg-gray-950/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-cyan-400 hover:underline" x-text="m.project"></a>
            <div class="flex items-center gap-2 text-gray-500">
              <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-gray-200 mt-1" x-text="m.question"></p>
          <p class="text-xs text-gray-400 mt-1 line-clamp-3" x-text="m.answer"></p>
        </li>
      </template>
    </ul>
  </div>
  <div x-show="searched && matches.length === 0 && !error && !message"
       class="text-xs text-gray-500">
    No matches for that question yet.
  </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. -->
<section x-data="graphPanel()" x-init="loadGraph()"
         class="mb-6 border border-gray-800 rounded-lg p-4 bg-gray-900/40">
  <header class="flex items-center justify-between mb-3 gap-2 flex-wrap">
    <h2 class="text-lg font-bold">Project graph</h2>
    <div class="flex items-center gap-3 text-xs text-gray-400">
      <label class="flex items-center gap-1.5">
        <input type="checkbox" x-model="includeDevDeps" @change="loadGraph()" class="accent-cyan-500">
        dev deps
      </label>
      <label class="flex items-center gap-1.5">
        <input type="checkbox" x-model="transitive" @change="loadGraph()" class="accent-cyan-500">
        transitive (lockfiles)
      </label>
      <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" class="text-xs text-red-400" x-text="graphError"></div>
  <div x-show="graphLoading" class="text-xs text-gray-500">Rendering…</div>
  <div x-show="!graphLoading && (graph.graph?.edges?.length ?? 0) === 0"
       class="text-xs text-gray-500">
    No edges yet — graph edges only appear when one project's dep matches
    another project's manifest name. Try enabling <code class="text-cyan-400">transitive</code>
    to also consider lockfile-resolved deps.
  </div>
  <!-- v3.0.0a9: mobile-friendly graph viewport.
       v4.0.0a3: pinch-zoom + drag-pan via graphZoom() Alpine scope.
       The transform-target div carries the scale/translate; touch
       events on the outer container drive zoom; mouse wheel zooms
       on desktop; reset button returns to scale=1, translate=0,0. -->
  <div x-data="graphZoom()"
       x-show="!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()"
              class="text-xs bg-gray-900/80 hover:bg-gray-800 border border-gray-700 px-2 py-0.5 rounded"
              :title="`reset zoom (current: ${scale.toFixed(2)}×) — press Esc or double-tap`">
        reset
      </button>
    </div>
    <div class="overflow-hidden max-h-[60vh] border border-gray-900 rounded bg-gray-950/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>

<!-- 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-3 flex-wrap">
    <h2 class="text-lg font-bold">Projects</h2>
    <div class="flex items-baseline gap-3 ml-auto flex-wrap">
      <select x-model="sort" @change="persistToUrl()"
              class="bg-gray-950 border border-gray-800 rounded px-2 py-1.5 text-xs focus:border-cyan-700 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-gray-950 border border-gray-800 rounded px-2 py-1.5 text-xs focus:border-cyan-700 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-gray-950 border border-gray-800 rounded px-3 py-1.5 text-sm focus:border-cyan-700 focus:outline-none w-56">
      <span class="text-sm text-gray-400" x-show="!loading"
            x-text="filter
              ? `${visibleProjects().length} of ${projects.length} match`
              : `${projects.length} discovered`"></span>
    </div>
  </header>

  <div x-show="loading" class="text-gray-400">Loading projects…</div>

  <div x-show="error" class="border border-red-800 bg-red-950/40 text-red-300 px-4 py-3 rounded">
    Error loading projects: <span x-text="error"></span>
  </div>

  <div x-show="!loading && !error && projects.length === 0"
       class="border border-gray-800 bg-gray-900/40 text-gray-400 px-4 py-6 rounded">
    <p class="mb-2">No projects discovered yet.</p>
    <p class="text-sm">
      Configure <code class="text-cyan-400">[projects] glob</code> in
      <code class="text-cyan-400">~/.config/harbormaster/config.toml</code>.
      Default looks for <code class="text-cyan-400">~/htdocs/*</code>.
    </p>
  </div>

  <div x-show="!loading && !error && filter && visibleProjects().length === 0"
       class="border border-gray-800 bg-gray-900/40 text-gray-400 px-4 py-6 rounded">
    No projects match <code class="text-cyan-400" x-text="filter"></code>.
    <button type="button" @click="filter = ''; persistToUrl()"
            class="ml-2 text-cyan-400 hover:text-cyan-300 underline">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-gray-400 uppercase tracking-wide mb-2 mt-2 border-b border-gray-800 pb-1"
            x-text="g.label"></h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <template x-for="p in g.items" :key="p.path">
      <article x-data="{ askExpanded: false }"
               class="border border-gray-800 rounded-lg p-4 hover:border-cyan-700 transition bg-gray-900/40">
        <header class="flex items-baseline justify-between mb-2 gap-2">
          <h3 class="font-bold text-cyan-400 truncate">
            <a :href="`/projects/${encodeURIComponent(p.name)}`"
               class="hover:text-cyan-300 no-underline" x-text="p.name"></a>
          </h3>
          <span class="text-xs text-gray-500 shrink-0"
                x-text="p.last_commit ? p.last_commit.hash : '(no git)'"></span>
        </header>
        <p class="text-sm text-gray-300 mb-3 line-clamp-2"
           x-text="p.brief || '(no description)'"></p>
        <footer class="flex flex-wrap gap-2 text-xs items-center">
          <span x-show="p.has_serena"
                class="bg-purple-900/50 text-purple-300 px-2 py-0.5 rounded">serena</span>
          <span x-show="p.has_claude_md"
                class="bg-cyan-900/50 text-cyan-300 px-2 py-0.5 rounded">claude.md</span>
          <span class="text-gray-500 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-cyan-900/50 text-cyan-300 px-2 py-0.5 rounded hover:bg-cyan-800/60 transition"
                  :aria-expanded="askExpanded"
                  :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' })"
                 class="mt-3 border-t border-gray-800 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-gray-950 border border-gray-800 rounded px-2 py-1.5 text-xs focus:border-cyan-700 focus:outline-none resize-y"></textarea>
            <div class="mt-1.5 flex flex-wrap items-center gap-2 text-xs text-gray-400">
              <label class="flex items-center gap-1">
                turns
                <input type="number" min="1" max="10" x-model.number="maxTurns"
                       class="w-12 bg-gray-950 border border-gray-800 rounded px-1 py-0.5 text-center">
              </label>
              <span class="text-gray-600" x-show="loading">streaming…</span>
              <span class="text-gray-500 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"
                      class="bg-cyan-700 hover:bg-cyan-600 disabled:bg-gray-800 disabled:text-gray-500 text-white font-bold px-2 py-0.5 rounded text-xs">
                <span x-show="!loading">Ask</span>
                <span x-show="loading">…</span>
              </button>
              <button type="button" x-show="loading" @click="abort()"
                      class="text-amber-400 hover:text-amber-300 underline">stop</button>
            </div>
          </form>
          <div x-show="error" class="mt-2 text-xs text-red-400" x-text="error"></div>
          <pre x-show="streamText"
               class="mt-2 text-xs whitespace-pre-wrap break-words border border-gray-800 rounded p-2 bg-gray-950/50 text-gray-200 leading-relaxed max-h-48 overflow-y-auto"
               x-text="streamText"></pre>
        </section>
      </article>
          </template>
        </div>
      </div>
    </template>
  </div>
</section>

{# 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>
  function statusStrip() {
    return {
      bridge: {}, bridgeError: null,
      plugins: {}, pluginsError: null,

      async loadAll() {
        await Promise.all([this.loadBridge(), this.loadPlugins()]);
      },
      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 {
          const r = await hmFetch('/api/plugins');
          if (!r.ok) throw new Error('HTTP ' + r.status);
          this.plugins = await r.json();
        } catch (e) { this.pluginsError = e.message; }
      },
      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-gray-800 text-gray-400';
        if (!this.bridge.api_token_present) return 'bg-amber-900/50 text-amber-300';
        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-emerald-300';
          if (rt.connected && rt.stale) return 'bg-amber-900/50 text-amber-300';
          if (rt.connected) return 'bg-cyan-900/50 text-cyan-300';
          return 'bg-rose-900/50 text-rose-300';
        }
        return 'bg-emerald-900/50 text-emerald-300';
      },
      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-emerald-400';
        if (rt.stale) return 'text-amber-400';
        return 'text-rose-400';
      },
      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: '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)' },
          ],
        },
        {
          scope: 'this popover',
          rows: [
            { keys: '?', action: 'toggle keyboard help' },
            { keys: 'Esc', action: 'dismiss popover' },
          ],
        },
      ],

      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.
  function projectGrid() {
    return {
      projects: [], loading: true, error: null,
      filter: '', sort: 'last_commit', group: 'flat',

      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,
      _pollHandle: null,

      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;
            }
          }, 3000);
        }
      },

      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;
        }
      },

      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',
        };
        return labels[this.state.phase] || this.state.phase;
      },

      phaseBadgeClass() {
        const map = {
          running: 'bg-cyan-900/50 text-cyan-300',
          done: 'bg-emerald-900/50 text-emerald-300',
          failed: 'bg-rose-900/50 text-rose-300',
          idle: 'bg-gray-800 text-gray-400',
        };
        return map[this.state.phase] || map.idle;
      },

      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,

      // 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');
          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 fix: two regressions, fixed together.
          //   1) v4.0.0a3 wrapped the <pre> inside graphZoom()'s nested
          //      x-data scope, breaking the parent scope's ref lookup
          //      (Alpine refs are per-component). Replaced with a
          //      querySelector that bypasses scope nesting.
          //   2) The Mermaid ESM bundle is loaded async via <script
          //      type="module"> in base.html. When loadGraph fires on
          //      x-init, the global window.__hmMermaid may not exist
          //      yet; the previous rAF callback would silently no-op
          //      and leave the raw markup visible. Now we poll up to
          //      3s for mermaid to be ready before running.
          await this._waitForMermaid(3000);
          const node = document.querySelector('pre.mermaid');
          if (node && window.__hmMermaid) {
            // Force re-process: clear `data-processed` if mermaid set it.
            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';
          }
        } catch (e) {
          this.graphError = e.message;
        } finally {
          this.graphLoading = false;
        }
      },
    };
  }
</script>

{% endblock %}