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

<nav class="mb-4 text-sm text-gray-400">
  <a href="/" class="hover:text-cyan-400">← Dashboard</a>
  <span class="mx-2 text-gray-700">/</span>
  <span class="text-gray-300">{{ project_name }}</span>
  {% if host != "local" %}
    <span class="ml-2 text-xs px-2 py-0.5 bg-amber-900/40 text-amber-300 rounded">host: {{ host }}</span>
  {% endif %}
</nav>

<header class="mb-6 border border-gray-800 rounded-lg p-4 bg-gray-900/40">
  <div class="flex items-baseline justify-between gap-4 flex-wrap">
    <h2 class="text-xl font-bold text-cyan-400">{{ project_name }}</h2>
    {% if project %}
      <span class="text-xs text-gray-500">
        last commit:
        {% if project.last_commit %}
          <code class="text-gray-300">{{ project.last_commit.hash }}</code>
        {% else %}
          <span class="text-gray-600">(no git)</span>
        {% endif %}
      </span>
    {% endif %}
  </div>
  {% if project %}
    <p class="text-sm text-gray-300 mt-2">{{ project.brief or "(no description)" }}</p>
    <footer class="mt-3 flex flex-wrap gap-2 text-xs items-center">
      {% if project.has_serena %}
        <span class="bg-purple-900/50 text-purple-300 px-2 py-0.5 rounded">serena</span>
      {% endif %}
      {% if project.has_claude_md %}
        <span class="bg-cyan-900/50 text-cyan-300 px-2 py-0.5 rounded">claude.md</span>
      {% endif %}
      <span class="text-gray-500 truncate font-mono">{{ project.path }}</span>
    </footer>
  {% endif %}
</header>

<section class="mb-6">
  <header class="mb-3 flex items-baseline justify-between">
    <h3 class="text-base font-bold text-gray-300">Status</h3>
    <span class="text-xs text-gray-500">
      sourced from <code class="text-cyan-400">project_status</code>
    </span>
  </header>
  <pre class="text-sm whitespace-pre-wrap break-words border border-gray-800 rounded-lg p-4 bg-gray-900/40 text-gray-300 leading-relaxed">{{ status_markdown }}</pre>
</section>

{% include "_partials/ask_form.html" %}
{% include "_partials/delegate_form.html" %}

<!-- v2.1.0a6: trajectory history. Pulls from /api/trajectories
     filtered by this project. Each row is a collapsible Q&A pair. -->
<!-- v3.0.0a8: cross-section refresh — listen for hm:trajectory:dirty
     events dispatched on stream completion by ask/delegate forms,
     and reload trajectories when the dispatched project matches.
     v4.0.0a4: hm:trajectory:append prepends the just-streamed Q&A
     synthetically (instant feedback) before the dirty reload runs. -->
<section x-data="trajectoryList({
           project: {{ project_name | tojson }},
           host: {{ host | tojson }},
         })"
         x-init="load()"
         x-on:hm:trajectory:dirty.window="if ($event.detail && $event.detail.project === project) load()"
         x-on:hm:trajectory:append.window="if ($event.detail && $event.detail.project === project) prepend($event.detail.entry)"
         class="mb-6 border border-gray-800 rounded-lg p-4 bg-gray-900/40">
  <header class="mb-3 flex items-baseline justify-between gap-2 flex-wrap">
    <h3 class="text-base font-bold text-gray-300">Recent Q&amp;A</h3>
    <div class="flex items-center gap-3 text-xs text-gray-500">
      <label class="flex items-center gap-1.5">
        limit
        <input type="number" min="1" max="200" x-model.number="limit" @change="load()"
               class="w-16 bg-gray-950 border border-gray-800 rounded px-2 py-0.5">
      </label>
      <span x-show="trajectories.length > 0"
            x-text="`${trajectories.length} record${trajectories.length === 1 ? '' : 's'}`"></span>
    </div>
  </header>
  <p x-show="message" class="text-xs text-amber-400" x-text="message"></p>
  <p x-show="error" class="text-xs text-red-400" x-text="error"></p>
  <p x-show="!message && !error && trajectories.length === 0"
     class="text-xs text-gray-500">
    No prior trajectories yet — ask or delegate something above and it will record here.
  </p>
  <ul class="space-y-2">
    <!-- v5.0.0a4: keyed by content tuple instead of t.id so the
         optimistic→real reconciliation preserves the DOM node and the
         CSS transition can cross-fade the border / bg colour cleanly. -->
    <template x-for="t in trajectories"
              :key="t.project + ':' + t.tool + ':' + t.question">
      <li x-data="{ open: false }"
          class="rounded border transition-colors duration-200"
          :class="t._optimistic
            ? 'border-cyan-700/40 bg-cyan-950/30'
            : 'border-gray-800 bg-gray-950/50'">
        <button type="button" @click="open = !open"
                class="w-full text-left px-3 py-2 hover:bg-gray-900/50 transition flex items-baseline justify-between gap-2">
          <span class="text-sm text-gray-200 truncate" x-text="t.question"></span>
          <span class="text-xs text-gray-500 shrink-0 flex gap-2 items-center">
            <!-- v5.0.0a4: writing-back spinner shows on optimistics
                 older than 5s — signals "writeback might be slow".
                 The "● new" badge stays for fresh optimistics. -->
            <span x-show="t._optimistic && isStale(t)"
                  class="inline-block w-2 h-2 border border-amber-400 border-t-transparent rounded-full animate-spin"
                  title="writing back…"></span>
            <span x-show="t._optimistic && !isStale(t)" class="text-cyan-400 font-bold">●&nbsp;new</span>
            <span x-text="t.tool"></span>
            <span x-text="formatDate(t.created_at || t.timestamp_s)"></span>
            <span x-text="open ? '▾' : '▸'"></span>
          </span>
        </button>
        <div x-show="open" class="px-3 pb-3">
          <div class="text-xs text-gray-500 mb-1 flex gap-2">
            <span x-text="`host: ${t.host}`"></span>
            <span x-show="t.recall_count > 0" x-text="`recalled: ${t.recall_count}×`"></span>
          </div>
          <p class="text-sm text-gray-300 mb-2 font-bold">Q:</p>
          <p class="text-sm text-gray-200 whitespace-pre-wrap break-words mb-2" x-text="t.question"></p>
          <p class="text-sm text-gray-300 mb-2 font-bold">A:</p>
          <p class="text-sm text-gray-200 whitespace-pre-wrap break-words" x-text="t.answer"></p>
        </div>
      </li>
    </template>
  </ul>
</section>

<script>
  function trajectoryList(initial) {
    return {
      project: initial.project, host: initial.host,
      trajectories: [], message: '', error: '', limit: 20,
      // v5.0.0a4: tick used to flag stale optimistics; updated every
      // 1s. Bound to isStale() so the spinner appears live without a
      // full reload.
      now: Date.now() / 1000,
      _tickHandle: null,

      init() {
        this._tickHandle = setInterval(() => {
          this.now = Date.now() / 1000;
        }, 1000);
      },

      destroy() {
        if (this._tickHandle) clearInterval(this._tickHandle);
      },

      isStale(entry) {
        // True when an optimistic entry is older than 5s — signals
        // "writeback might be slow"; renders the spinner instead of
        // the "● new" badge.
        if (!entry || !entry._optimistic) return false;
        const age = this.now - (entry.timestamp_s || 0);
        return age > 5;
      },

      async load() {
        this.message = ''; this.error = '';
        try {
          const params = new URLSearchParams({
            project: this.project,
            limit: String(this.limit),
          });
          if (this.host && this.host !== 'local') params.set('host', this.host);
          const r = await hmFetch('/api/trajectories?' + params.toString());
          if (!r.ok) throw new Error('HTTP ' + r.status);
          const data = await r.json();
          // v4.0.0a4 → v5.0.0a4: reconcile in-place when possible.
          // The DOM keys on (project, tool, question) so an optimistic
          // entry that gets a server match keeps its <li> mounted —
          // only the _optimistic flag flips, and Tailwind's
          // transition-colors animates the border / bg cross-fade.
          const fresh = data.trajectories || [];
          const optimistics = (this.trajectories || []).filter(t => t._optimistic);
          const reconciled = fresh.map((s) => {
            const match = optimistics.find(o =>
              o.project === s.project &&
              o.tool === s.tool &&
              o.question === s.question
            );
            if (match) {
              // In-place upgrade: keep DOM, drop the optimistic flag.
              return { ...match, ...s, _optimistic: false };
            }
            return s;
          });
          // Orphans (writeback in flight) bubble to the top.
          const orphans = optimistics.filter(o =>
            !fresh.some(s =>
              s.project === o.project &&
              s.tool === o.tool &&
              s.question === o.question
            )
          );
          this.trajectories = [...orphans, ...reconciled];
          if (data.message) this.message = data.message;
        } catch (e) {
          this.error = e.message;
        }
      },

      // v4.0.0a4: prepend an optimistic Q&A entry without a round-trip.
      // The next load() will reconcile (matching server entry replaces it).
      prepend(entry) {
        if (!entry) return;
        // Avoid duplicates if the same id is dispatched twice rapidly.
        const exists = this.trajectories.some(t => t.id === entry.id);
        if (exists) return;
        this.trajectories = [entry, ...this.trajectories];
      },

      formatDate(epoch_s) {
        const d = new Date(epoch_s * 1000);
        const now = new Date();
        if (now - d < 24 * 3600 * 1000) {
          return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        }
        return d.toLocaleDateString([], { month: 'short', day: 'numeric' });
      },
    };
  }
</script>

{% endblock %}