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

<!-- 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>

<!-- v2.1.0a3: recall search. Hits /api/recall (which wraps the
     recall_qa MCP tool) and renders match cards inline. -->
<section x-data="recallPanel()"
         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>
  <div class="overflow-x-auto" x-show="!graphLoading">
    <pre class="mermaid text-xs leading-tight" x-ref="diagram" x-text="mermaidMarkup"></pre>
  </div>
</section>

<!-- Project grid (carried forward from v2.0). -->
<section x-data="{ projects: [], loading: true, error: null }"
         x-init="(async () => {
           try {
             const r = await fetch('/api/projects');
             if (!r.ok) throw new Error('HTTP ' + r.status);
             projects = await r.json();
           } catch (e) {
             error = e.message;
           } finally {
             loading = false;
           }
         })()">
  <header class="mb-4 flex items-baseline justify-between">
    <h2 class="text-lg font-bold">Projects</h2>
    <span class="text-sm text-gray-400"
          x-show="!loading"
          x-text="`${projects.length} discovered`"></span>
  </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 && projects.length > 0"
       class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <template x-for="p in projects" :key="p.path">
      <a :href="`/projects/${encodeURIComponent(p.name)}`"
         class="block border border-gray-800 rounded-lg p-4 hover:border-cyan-700 transition bg-gray-900/40 no-underline">
        <article>
          <header class="flex items-baseline justify-between mb-2 gap-2">
            <h3 class="font-bold text-cyan-400 truncate" x-text="p.name"></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" x-text="p.path"></span>
          </footer>
        </article>
      </a>
    </template>
  </div>
</section>

<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 fetch('/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 fetch('/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; },

      async search() {
        if (this.question.trim().length < 2) return;
        this.loading = true; this.error = ''; this.message = '';
        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 fetch('/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;
        }
      },
    };
  }

  function graphPanel() {
    return {
      includeDevDeps: false, transitive: false,
      graph: {}, mermaidMarkup: '', graphLoading: true, graphError: null,

      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 fetch(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]';
          // Wait for the next frame so the new markup is in the DOM
          // before mermaid runs over it.
          requestAnimationFrame(async () => {
            const node = this.$refs.diagram;
            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; }
            }
          });
        } catch (e) {
          this.graphError = e.message;
        } finally {
          this.graphLoading = false;
        }
      },
    };
  }
</script>

{% endblock %}