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

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

<header class="mb-6 border border-border 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-accent">{{ project_name }}</h2>
    {% if project %}
      <span class="text-xs text-foreground-subtle">
        last commit:
        {% if project.last_commit %}
          <code class="text-foreground-muted">{{ project.last_commit.hash }}</code>
        {% else %}
          <span class="text-foreground-subtle">(no git)</span>
        {% endif %}
      </span>
    {% endif %}
  </div>
  {% if project %}
    <p class="text-sm text-foreground-muted 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-info px-2 py-0.5 rounded">serena</span>
      {% endif %}
      {% if project.has_claude_md %}
        <span class="bg-cyan-900/50 text-accent px-2 py-0.5 rounded">claude.md</span>
      {% endif %}
      <span class="text-foreground-subtle 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-foreground-muted">Status</h3>
    <span class="text-xs text-foreground-subtle">
      sourced from <code class="text-accent">project_status</code>
    </span>
  </header>
  <pre class="text-sm whitespace-pre-wrap break-words border border-border rounded-lg p-4 bg-gray-900/40 text-foreground-muted leading-relaxed">{{ status_markdown }}</pre>
</section>

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

{# v10.0.0a5: per-project memories viewer (read-only). Lists
   CLAUDE.md + .serena/memories/*.md for the current project; click a
   file to render its markdown in-place. Uses vendored marked.min.js. #}
<section x-data="memoriesPanel({ project: {{ project_name | tojson }} })"
         x-init="load()"
         class="mb-6 border border-border 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-foreground-muted">Memories</h3>
    <span class="text-xs text-foreground-subtle"
          x-text="files.length === 0 ? 'no memories' : `${files.length} file${files.length === 1 ? '' : 's'}`"></span>
  </header>
  <p x-show="error" :aria-hidden="!error" role="alert" aria-live="assertive"
     class="text-xs text-danger" x-text="error"></p>
  <div x-show="!error && files.length === 0" role="status"
       data-empty-state="memories.no-files"
       class="border border-border bg-gray-900/40 text-foreground-muted px-4 py-6 rounded text-center">
    <p class="text-sm font-bold text-foreground mb-1">No memories found</p>
    <p class="text-xs text-foreground-muted">
      This project doesn't yet have a <code>CLAUDE.md</code> or any
      <code>.serena/memories/*.md</code> files.
    </p>
  </div>
  <div x-show="files.length > 0" class="grid grid-cols-1 md:grid-cols-3 gap-3">
    <div class="md:col-span-1">
      <!-- v14.0.0a5: tag filter input. Files are filtered by
           substring-match on the YAML-frontmatter tags array (see
           server-side _extract_memory_tags). Empty filter = show all. -->
      <input type="text"
             x-model="tagFilter"
             placeholder="filter by tag…"
             aria-label="Filter memories by tag"
             class="w-full mb-2 text-xs bg-surface-1 border border-border rounded px-2 py-1 text-foreground placeholder:text-foreground-subtle focus:border-accent-strong focus:outline-none">
      <ul class="space-y-1">
      <template x-for="f in filteredFiles()" :key="'mem:' + f.name">
        <li>
          <button type="button"
                  @click="select(f)"
                  :aria-current="selected && selected.name === f.name ? 'true' : 'false'"
                  :aria-label="`Open memory file ${f.name}`"
                  :class="selected && selected.name === f.name
                          ? 'bg-cyan-900/40 text-accent'
                          : 'text-foreground-muted hover:bg-gray-800/50 hover:text-accent'"
                  class="w-full text-left text-xs font-mono px-2 py-1.5 rounded truncate focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400">
            <span x-text="f.name"></span>
            <span class="text-[10px] text-foreground-subtle ml-1"
                  x-text="`${(f.size/1024).toFixed(1)}KB`"></span>
            <!-- v14.0.0a5: pill badges for each tag. -->
            <span class="block mt-0.5 flex flex-wrap gap-1"
                  x-show="(f.tags || []).length > 0">
              <template x-for="t in (f.tags || [])" :key="'tag:' + f.name + ':' + t">
                <span class="text-[9px] px-1.5 py-0 rounded bg-cyan-900/40 text-accent border border-cyan-900/60"
                      x-text="t"></span>
              </template>
            </span>
          </button>
        </li>
      </template>
      </ul>
    </div>
    <article class="md:col-span-2 border border-border rounded p-3 bg-gray-950/60 min-h-[8rem]">
      <p x-show="!selected" class="text-xs text-foreground-subtle">Select a file to view.</p>
      <!-- v10.0.0a6: edit toolbar -->
      <div x-show="selected" class="flex items-center justify-between gap-2 mb-2">
        <span class="text-xs font-mono text-foreground-subtle" x-text="selected ? selected.name : ''"></span>
        <div class="flex gap-1">
          <button type="button" x-show="!editing"
                  @click="startEdit()"
                  aria-label="Edit memory file"
                  class="text-xs px-2 py-0.5 rounded border border-border hover:border-accent-strong text-foreground-muted hover:text-accent">
            Edit
          </button>
          <button type="button" x-show="editing"
                  @click="cancelEdit()"
                  aria-label="Cancel edit"
                  class="text-xs px-2 py-0.5 rounded border border-border hover:border-rose-700 text-foreground-muted hover:text-danger">
            Cancel
          </button>
          <button type="button" x-show="editing"
                  @click="save()"
                  :disabled="saving"
                  aria-label="Save memory file"
                  class="text-xs px-2 py-0.5 rounded border border-accent-strong bg-cyan-900/30 hover:bg-cyan-900/50 text-accent disabled:opacity-50">
            <span x-text="saving ? 'Saving…' : 'Save'"></span>
          </button>
          <!-- v11.0.0a2: revision history toggle -->
          <button type="button" x-show="selected"
                  @click="toggleHistory()"
                  aria-label="Toggle revision history"
                  class="text-xs px-2 py-0.5 rounded border border-border hover:border-warning text-foreground-muted hover:text-warning">
            <span x-text="showHistory ? 'Hide history' : 'History'"></span>
          </button>
          <!-- v12.0.0a4: diff against revision. Visible when the
               history panel is open AND there's at least one revision
               on file. Picks revision `from_` from the dropdown and
               diffs against current. -->
          <select x-show="showHistory && revisions.length > 0"
                  x-model="diffFrom"
                  @change="loadDiff()"
                  aria-label="Diff against revision"
                  class="text-xs px-1 py-0.5 rounded border border-border bg-surface-1 text-foreground-muted">
            <option value="">Diff against…</option>
            <template x-for="r in revisions" :key="r.id">
              <option :value="r.id" x-text="`#${r.id} (${new Date(r.saved_at * 1000).toLocaleDateString()})`"></option>
            </template>
          </select>
        </div>
      </div>
      <p x-show="saveError" :aria-hidden="!saveError" role="alert"
         class="text-xs text-danger mb-2" x-text="saveError"></p>
      <div x-show="selected && !editing" class="prose prose-invert prose-sm max-w-none"
           x-html="rendered"></div>
      <!-- v11.0.0a3: split-pane editor with live (debounced) preview.
           Raw markdown left, sanitised HTML right. -->
      <div x-show="editing" class="grid grid-cols-1 md:grid-cols-2 gap-2">
        <!-- v14.0.0a5: Cmd/Ctrl+Z navigates back through revision
             history; Cmd/Ctrl+Shift+Z navigates forward. Falls
             through to native textarea undo when no revision exists
             in the requested direction. -->
        <textarea x-model="draft"
                  @input.debounce.300ms="updatePreview()"
                  @keydown.meta.z.prevent="navigateRevisions(-1)"
                  @keydown.ctrl.z.prevent="navigateRevisions(-1)"
                  @keydown.meta.shift.z.prevent="navigateRevisions(1)"
                  @keydown.ctrl.shift.z.prevent="navigateRevisions(1)"
                  aria-label="Memory file source — Cmd+Z navigates revision history"
                  class="w-full min-h-[20rem] bg-surface-1 border border-border rounded p-2 text-xs font-mono text-foreground"></textarea>
        <div class="prose prose-invert prose-sm max-w-none border border-border rounded p-2 bg-gray-950/40 min-h-[20rem] overflow-auto"
             aria-live="polite" aria-label="Live preview"
             x-html="previewHtml"></div>
      </div>
      <!-- v14.0.0a5: undo/redo status — shown only while editing AND
           there's at least one prior revision to navigate to. -->
      <p x-show="editing && (revisions.length > 0)"
         class="mt-1 text-[10px] text-foreground-subtle">
        Cmd+Z = previous revision · Cmd+Shift+Z = next revision ·
        position <span x-text="revisionCursor === null ? 'live' : `#${revisionCursor + 1} of ${revisions.length}`"></span>
      </p>
      <!-- v11.0.0a2: revision history panel -->
      <aside x-show="showHistory" class="mt-3 border-t border-border pt-3">
        <p class="text-xs text-foreground-muted mb-2">Revision history (newest first)</p>
        <p x-show="historyError" role="alert" class="text-xs text-danger mb-2"
           x-text="historyError"></p>
        <ul class="space-y-1 max-h-48 overflow-auto">
          <template x-for="r in revisions" :key="r.id">
            <li class="flex items-center gap-2 text-xs">
              <button type="button" @click="loadRevision(r.id)"
                      :aria-label="`Preview revision ${r.id}`"
                      class="text-accent hover:text-accent underline-offset-2 hover:underline font-mono">
                #<span x-text="r.id"></span>
              </button>
              <span class="text-foreground-subtle"
                    x-text="new Date(r.saved_at * 1000).toLocaleString()"></span>
              <span x-show="r.bytes_diff !== null && r.bytes_diff !== undefined"
                    class="text-foreground-subtle"
                    x-text="(r.bytes_diff >= 0 ? '+' : '') + r.bytes_diff + 'B'"></span>
            </li>
          </template>
          <li x-show="revisions.length === 0 && !historyError"
              class="text-xs text-foreground-subtle">No prior revisions on file.</li>
        </ul>
        <div x-show="revisionPreview" class="mt-3 border border-amber-900/40 rounded bg-surface-1 p-2">
          <div class="flex items-center justify-between mb-1">
            <span class="text-xs text-warning">Revision <span x-text="revisionPreviewId"></span> (read-only)</span>
            <button type="button" @click="copyRevisionToClipboard()"
                    class="text-xs px-2 py-0.5 rounded border border-border hover:border-accent-strong text-foreground-muted hover:text-accent">
              Copy
            </button>
          </div>
          <pre class="text-xs whitespace-pre-wrap text-foreground max-h-64 overflow-auto"
               x-text="revisionPreview"></pre>
        </div>
        <!-- v12.0.0a4: unified diff vs current. Shown when the
             "Diff against revision" dropdown has a selection.
             v14.0.0a3: format toggle (Unified / Side-by-side). -->
        <div x-show="diffOutput || diffError || diffHtml" class="mt-3 border border-cyan-900/40 rounded bg-surface-1 p-2">
          <div class="flex items-center justify-between mb-1 gap-2">
            <span class="text-xs text-accent">Diff: revision <span x-text="diffFrom"></span> → current</span>
            <div class="flex items-center gap-1 text-xs" role="group" aria-label="Diff format">
              <button type="button"
                      @click="diffFormat = 'unified'; loadDiff()"
                      :aria-pressed="diffFormat === 'unified'"
                      :class="diffFormat === 'unified'
                              ? 'border-accent-strong text-accent bg-cyan-900/30'
                              : 'border-border text-foreground-muted hover:text-accent'"
                      class="px-2 py-0.5 rounded border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent">
                Unified
              </button>
              <button type="button"
                      @click="diffFormat = 'html'; loadDiff()"
                      :aria-pressed="diffFormat === 'html'"
                      :class="diffFormat === 'html'
                              ? 'border-accent-strong text-accent bg-cyan-900/30'
                              : 'border-border text-foreground-muted hover:text-accent'"
                      class="px-2 py-0.5 rounded border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent">
                Side-by-side
              </button>
            </div>
          </div>
          <p x-show="diffError" role="alert" class="text-xs text-danger mb-2"
             x-text="diffError"></p>
          <pre x-show="diffFormat === 'unified' && diffOutput && !diffError"
               class="text-xs whitespace-pre text-foreground max-h-64 overflow-auto font-mono"
               x-text="diffOutput"></pre>
          <!-- v14.0.0a3: server returns sanitised difflib.HtmlDiff
               table; render via x-html. Server already sanitises but
               we additionally restrict the container max-height for
               UX consistency with the unified view. -->
          <div x-show="diffFormat === 'html' && diffHtml && !diffError"
               class="text-xs max-h-64 overflow-auto bg-gray-950/30 rounded p-1"
               x-html="diffHtml"></div>
        </div>
      </aside>
    </article>
  </div>

  <!-- v10.0.0a6: new-memory creation form -->
  <details class="mt-3 border border-border rounded p-2 bg-gray-950/40">
    <summary class="text-xs text-foreground-muted cursor-pointer">Create new memory…</summary>
    <form @submit.prevent="createNew()" class="mt-2 space-y-2">
      <label class="block text-xs text-foreground-muted">
        Filename
        <input type="text" x-model="newName"
               aria-label="New memory filename"
               placeholder="e.g. CLAUDE.md or .serena/memories/notes.md"
               class="block w-full bg-surface-1 border border-border rounded px-2 py-1 text-xs font-mono text-foreground mt-1">
      </label>
      <label class="block text-xs text-foreground-muted">
        Content
        <textarea x-model="newContent"
                  aria-label="New memory content"
                  class="block w-full min-h-[8rem] bg-surface-1 border border-border rounded p-2 text-xs font-mono text-foreground mt-1"></textarea>
      </label>
      <div class="flex items-center gap-2">
        <button type="submit"
                :disabled="creating || !newName"
                aria-label="Create new memory file"
                class="text-xs px-3 py-1 rounded border border-accent-strong bg-cyan-900/30 hover:bg-cyan-900/50 text-accent disabled:opacity-50">
          <span x-text="creating ? 'Creating…' : 'Create'"></span>
        </button>
        <span x-show="createError" role="alert"
              class="text-xs text-danger" x-text="createError"></span>
      </div>
    </form>
  </details>
</section>

<script src="/static/vendor/marked.min.js"></script>
<script>
  function memoriesPanel(initial) {
    return {
      project: initial.project,
      files: [],
      // v14.0.0a5: tag filter (substring match against any tag in the
      // file's YAML frontmatter `tags:` array). Empty = show all.
      tagFilter: '',
      selected: null,
      rendered: '',
      error: '',
      // v10.0.0a6: edit + create state
      editing: false,
      draft: '',          // textarea content while editing
      saving: false,
      saveError: '',
      newName: '',
      newContent: '',
      creating: false,
      createError: '',
      // v11.0.0a2: revision history state
      showHistory: false,
      revisions: [],
      // v14.0.0a5: undo/redo cursor into `revisions`. null = "live"
      // (showing the on-disk content); 0..N-1 = index into the
      // (newest-first) revisions array.
      revisionCursor: null,
      // v12.0.0a4: diff-against-revision state. `diffFrom` is the
      // revision id selected in the dropdown; `diffOutput` holds the
      // unified-diff text returned by the server.
      diffFrom: '',
      diffOutput: '',
      diffError: '',
      // v14.0.0a3: diff-format toggle (Unified / Side-by-side).
      // `diffHtml` holds the server-rendered difflib.HtmlDiff table
      // string (already sanitised server-side; we render via x-html
      // into the same diff panel).
      diffFormat: 'unified',
      diffHtml: '',
      historyError: '',
      revisionPreview: '',
      revisionPreviewId: null,
      // v11.0.0a3: live markdown preview state
      previewHtml: '',

      _fileUrl(filename) {
        return `/api/projects/${encodeURIComponent(this.project)}/memories/`
               + filename.split('/').map(encodeURIComponent).join('/');
      },

      async load() {
        try {
          const r = await hmFetch(`/api/projects/${encodeURIComponent(this.project)}/memories`);
          if (!r.ok) throw new Error('HTTP ' + r.status);
          const data = await r.json();
          this.files = Array.isArray(data.files) ? data.files : [];
        } catch (e) {
          this.error = 'failed to load: ' + e.message;
        }
      },

      // v14.0.0a5: client-side filter — substring match (case-insensitive)
      // against any tag in f.tags. Empty filter = identity.
      filteredFiles() {
        const q = (this.tagFilter || '').trim().toLowerCase();
        if (!q) return this.files;
        return this.files.filter(f =>
          (f.tags || []).some(t => t.toLowerCase().includes(q))
        );
      },

      async select(f) {
        this.selected = f;
        this.editing = false;
        this.saveError = '';
        // v14.0.0a5: reset undo/redo cursor when switching files.
        this.revisionCursor = null;
        this.rendered = '<p class="text-xs text-foreground-subtle">loading…</p>';
        // v11.0.0a3: prefer server-side bleach-sanitised HTML via
        // ?render=html. Falls back to the v10 client-side marked.js
        // path when the endpoint is unavailable (older deploys).
        try {
          const r = await hmFetch(this._fileUrl(f.name) + '?render=html');
          if (r.ok) {
            this.rendered = await r.text();
            // We still need raw text for the editor draft.
            const raw = await hmFetch(this._fileUrl(f.name));
            this.draft = raw.ok ? await raw.text() : '';
            return;
          }
          throw new Error('HTTP ' + r.status);
        } catch (e) {
          // Fallback: raw fetch + client-side render.
          try {
            const r = await hmFetch(this._fileUrl(f.name));
            if (!r.ok) throw new Error('HTTP ' + r.status);
            const text = await r.text();
            this.draft = text;
            if (window.marked && typeof window.marked.parse === 'function') {
              this.rendered = window.marked.parse(text);
            } else {
              const escaped = text
                .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
              this.rendered = `<pre class="whitespace-pre-wrap text-xs">${escaped}</pre>`;
            }
          } catch (e2) {
            this.rendered = `<p class="text-xs text-danger">failed: ${e2.message}</p>`;
          }
        }
      },

      startEdit() {
        if (!this.selected) return;
        this.editing = true;
        this.saveError = '';
        // v11.0.0a3: prime the preview pane with the current content
        // so the operator sees rendered output immediately, not a
        // blank pane until the first keystroke.
        this.updatePreview();
      },

      cancelEdit() {
        this.editing = false;
        this.saveError = '';
        // Re-render with the saved content (restored from this.draft
        // if changed locally; the next select() refreshes from disk).
        if (this.selected && window.marked) {
          this.rendered = window.marked.parse(this.draft || '');
        }
      },

      // v11.0.0a3: live preview — POST current draft to the
      // server-side render endpoint (bleach-sanitised HTML).
      async updatePreview() {
        if (!this.editing) return;
        try {
          const r = await hmFetch('/api/render-markdown', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ text: this.draft || '' }),
          });
          if (r.ok) {
            this.previewHtml = await r.text();
          }
        } catch (_) {
          // Best-effort; leave the previous preview in place.
        }
      },

      async save() {
        if (!this.selected) return;
        this.saving = true;
        this.saveError = '';
        try {
          const r = await hmFetch(this._fileUrl(this.selected.name), {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ content: this.draft }),
          });
          if (!r.ok) {
            let detail = 'HTTP ' + r.status;
            try { const j = await r.json(); detail = j.detail || detail; } catch (_) {}
            throw new Error(detail);
          }
          this.editing = false;
          // Refresh the file list to pick up new size/mtime.
          await this.load();
          // v11.0.0a3: re-render via server-side bleach-safe path so
          // the post-save view matches what other clients will see.
          await this.select(this.selected);
        } catch (e) {
          this.saveError = 'save failed: ' + e.message;
        } finally {
          this.saving = false;
        }
      },

      async createNew() {
        if (!this.newName.trim()) return;
        this.creating = true;
        this.createError = '';
        try {
          const r = await hmFetch(
            `/api/projects/${encodeURIComponent(this.project)}/memories`,
            {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({
                filename: this.newName.trim(),
                content: this.newContent,
              }),
            },
          );
          if (!r.ok) {
            let detail = 'HTTP ' + r.status;
            try { const j = await r.json(); detail = j.detail || detail; } catch (_) {}
            throw new Error(detail);
          }
          // Refresh + select the new file.
          const created = this.newName.trim();
          this.newName = '';
          this.newContent = '';
          await this.load();
          const newFile = this.files.find(f => f.name === created);
          if (newFile) await this.select(newFile);
        } catch (e) {
          this.createError = 'create failed: ' + e.message;
        } finally {
          this.creating = false;
        }
      },

      // v11.0.0a2: revision-history helpers.
      async toggleHistory() {
        this.showHistory = !this.showHistory;
        this.revisionPreview = '';
        this.revisionPreviewId = null;
        // v12.0.0a4: clear the diff dropdown + output when closing.
        this.diffFrom = '';
        this.diffOutput = '';
        this.diffError = '';
        // v14.0.0a3: clear html-mode buffer on history toggle too.
        this.diffHtml = '';
        if (!this.showHistory || !this.selected) return;
        await this.loadHistory();
      },

      async loadHistory() {
        this.historyError = '';
        this.revisions = [];
        if (!this.selected) return;
        try {
          const url = `/api/projects/${encodeURIComponent(this.project)}`
                      + `/memory-history?file=`
                      + encodeURIComponent(this.selected.name);
          const r = await hmFetch(url);
          if (!r.ok) throw new Error('HTTP ' + r.status);
          const data = await r.json();
          this.revisions = Array.isArray(data.revisions) ? data.revisions : [];
        } catch (e) {
          this.historyError = 'failed to load history: ' + e.message;
        }
      },

      async loadRevision(revId) {
        if (!this.selected) return;
        try {
          const url = `/api/projects/${encodeURIComponent(this.project)}`
                      + `/memory-revisions/${encodeURIComponent(revId)}`
                      + `?file=` + encodeURIComponent(this.selected.name);
          const r = await hmFetch(url);
          if (!r.ok) throw new Error('HTTP ' + r.status);
          const text = await r.text();
          this.revisionPreview = text;
          this.revisionPreviewId = revId;
        } catch (e) {
          this.historyError = 'failed to load revision: ' + e.message;
        }
      },

      async copyRevisionToClipboard() {
        if (!this.revisionPreview) return;
        try {
          await navigator.clipboard.writeText(this.revisionPreview);
        } catch (e) {
          this.historyError = 'clipboard error: ' + (e && e.message ? e.message : e);
        }
      },

      // v14.0.0a5: navigate the revision history with Cmd+Z / Cmd+Shift+Z.
      // direction: -1 = previous (older), +1 = next (newer / back to live).
      // `revisions` is newest-first; cursor=null means "live on-disk content".
      // Cursor cycle:
      //   null → 0 → 1 → 2 → ...      (Cmd+Z, going older)
      //   ... 1 → 0 → null            (Cmd+Shift+Z, going newer)
      // Auto-loads history on first nav if it hasn't been fetched yet.
      async navigateRevisions(direction) {
        if (!this.selected) return;
        if (this.revisions.length === 0) {
          await this.loadHistory();
          if (this.revisions.length === 0) return;
        }
        let next;
        if (direction < 0) {
          // Older: null → 0 → 1 → ...
          next = this.revisionCursor === null ? 0 : this.revisionCursor + 1;
          if (next >= this.revisions.length) next = this.revisions.length - 1;
        } else {
          // Newer: ... → 1 → 0 → null
          if (this.revisionCursor === null) return;
          next = this.revisionCursor - 1;
        }
        if (next === null || next < 0) {
          // Restore the live (on-disk) draft. Re-fetching ensures
          // we don't keep stale text if the file changed externally.
          this.revisionCursor = null;
          try {
            const r = await hmFetch(this._fileUrl(this.selected.name));
            if (r.ok) this.draft = await r.text();
          } catch (_) { /* leave draft as-is */ }
          this.updatePreview();
          return;
        }
        const rev = this.revisions[next];
        try {
          const url = `/api/projects/${encodeURIComponent(this.project)}`
                    + `/memory-revisions/${encodeURIComponent(rev.id)}`
                    + `?file=` + encodeURIComponent(this.selected.name);
          const r = await hmFetch(url);
          if (!r.ok) throw new Error('HTTP ' + r.status);
          this.draft = await r.text();
          this.revisionCursor = next;
          this.updatePreview();
        } catch (e) {
          this.saveError = 'failed to load revision: ' + e.message;
        }
      },

      // v12.0.0a4: diff against revision. `diffFrom` carries the
      // selected revision id from the dropdown; the diff is computed
      // server-side via difflib.unified_diff against the current
      // on-disk content.
      async loadDiff() {
        this.diffOutput = '';
        this.diffError = '';
        this.diffHtml = '';
        if (!this.diffFrom || !this.selected) return;
        try {
          // v14.0.0a3: format=html requests the v13.a3 side-by-side
          // difflib.HtmlDiff table; default (no param) returns text.
          const fmt = this.diffFormat === 'html' ? '&format=html' : '';
          const url = `/api/projects/${encodeURIComponent(this.project)}`
                      + `/memory-revisions/diff?from=${encodeURIComponent(this.diffFrom)}`
                      + `&file=` + encodeURIComponent(this.selected.name)
                      + fmt;
          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);
          }
          if (this.diffFormat === 'html') {
            this.diffHtml = await r.text();
            if (!this.diffHtml) this.diffHtml = '<em>(no differences)</em>';
          } else {
            this.diffOutput = await r.text();
            if (!this.diffOutput) this.diffOutput = '(no differences)';
          }
        } catch (e) {
          this.diffError = 'failed to load diff: ' + e.message;
        }
      },
    };
  }
</script>

<!-- 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-border 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-foreground-muted">Recent Q&amp;A</h3>
    <div class="flex items-center gap-3 text-xs text-foreground-subtle">
      <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-surface-1 border border-border 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" :aria-hidden="!message" role="status" aria-live="polite" class="text-xs text-warning" x-text="message"></p>
  <p x-show="error" :aria-hidden="!error" role="alert" aria-live="assertive" class="text-xs text-danger" x-text="error"></p>
  <!-- v8.0.0a3: canonical 3-part empty state for trajectory list. -->
  <div x-show="!message && !error && trajectories.length === 0"
       :aria-hidden="!(!message && !error && trajectories.length === 0)"
       role="status"
       data-empty-state="trajectory.no-entries"
       class="border border-border bg-gray-900/40 text-foreground-muted px-4 py-6 rounded text-center">
    <p class="text-sm font-bold text-foreground mb-1">No questions asked yet</p>
    <p class="text-xs text-foreground-muted mb-3">
      Use the <span class="text-accent">Ask</span> form above to query this project.
      Each question + answer pair lands here as a trajectory.
    </p>
    <button type="button"
            @click="document.querySelector(`section[x-data^='askForm'] textarea`)?.focus()"
            aria-label="Focus the ask textarea"
            class="text-xs px-3 py-1 rounded border border-accent-strong bg-cyan-900/30 hover:bg-cyan-900/50 text-accent transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-950">
      Focus ask form
    </button>
  </div>
  <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="optimisticBorderClass(t)">
        <button type="button" @click="open = !open"
                :aria-expanded="open"
                :aria-label="open ? 'Collapse trajectory details' : 'Expand trajectory details'"
                class="w-full text-left px-3 py-2 hover:bg-gray-900/50 transition flex items-baseline justify-between gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-950">
          <span class="text-sm text-foreground truncate" x-text="t.question"></span>
          <span class="text-xs text-foreground-subtle shrink-0 flex gap-2 items-center">
            <!-- v12.0.0a2: tier badges migrated to the shared
                 stateBadgeHtml helper. The "stale" tier remains a
                 pure-spinner element (intentionally label-less per
                 v6.0.0a2 design) — it doesn't fit the icon+label
                 badge shape. The "fresh" and "stuck" tiers share the
                 same shape as bridge / phase badges and route through
                 the helper for visual consistency. -->
            <span x-show="tier(t) === 'stale'"
                  :aria-hidden="tier(t) !== 'stale'"
                  role="status"
                  aria-label="Writing back to FleetQ"
                  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="tier(t) === 'stuck'"
                  :aria-hidden="tier(t) !== 'stuck'"
                  role="alert"
                  x-html="window.harbormaster.stateBadgeHtml(tierBadgeProps('stuck'))"></span>
            <span x-show="tier(t) === 'fresh'"
                  :aria-hidden="tier(t) !== 'fresh'"
                  x-html="window.harbormaster.stateBadgeHtml(tierBadgeProps('fresh'))"></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-foreground-subtle 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-foreground-muted mb-2 font-bold">Q:</p>
          <p class="text-sm text-foreground whitespace-pre-wrap break-words mb-2" x-text="t.question"></p>
          <p class="text-sm text-foreground-muted mb-2 font-bold">A:</p>
          <p class="text-sm text-foreground 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);
      },

      // v6.0.0a2: read configurable threshold from the meta tag emitted
      // by base.html. Falls back to 5s if the tag is missing (older
      // pages or unit tests).
      _staleThreshold() {
        const m = document.querySelector('meta[name="hm-optimistic-stale-seconds"]');
        const raw = m ? parseInt(m.getAttribute('content'), 10) : NaN;
        return Number.isFinite(raw) && raw > 0 ? raw : 5;
      },

      // Returns one of: "fresh" | "stale" | "stuck" | "" (non-optimistic).
      // The escalation tier is driven by age vs. configured threshold:
      //   age 0..N        → fresh
      //   age N..(N×6)    → stale
      //   age > N×6       → stuck
      // Default N=5 yields 0..5s fresh, 5..30s stale, >30s stuck.
      tier(entry) {
        if (!entry || !entry._optimistic) return '';
        const age = this.now - (entry.timestamp_s || 0);
        const threshold = this._staleThreshold();
        if (age <= threshold) return 'fresh';
        if (age <= threshold * 6) return 'stale';
        return 'stuck';
      },

      // Border + bg color class for a trajectory <li>. Non-optimistic
      // entries stay neutral; optimistic ones tint by tier.
      optimisticBorderClass(entry) {
        switch (this.tier(entry)) {
          case 'fresh':
          case 'stale':
            return 'border-cyan-700/40 bg-cyan-950/30';
          case 'stuck':
            return 'border-rose-700/50 bg-rose-950/30';
          default:
            return 'border-border bg-gray-950/50';
        }
      },

      // Kept for backward-compat with v5.0.0a4 callers; now derived
      // from tier(). Returns true when the entry is past the fresh
      // threshold (so spinner-or-stuck visual applies).
      isStale(entry) {
        const t = this.tier(entry);
        return t === 'stale' || t === 'stuck';
      },

      // v12.0.0a2: shared stateBadgeHtml helper props for the
      // fresh / stuck escalation tiers. The "stale" tier remains a
      // pure spinner (no label) per v6.0.0a2 design.
      tierBadgeProps(t) {
        if (t === 'fresh') {
          return {
            state: 'fresh', icon: '●', color: 'cyan', label: 'new',
            ariaLabel: 'New trajectory',
          };
        }
        if (t === 'stuck') {
          return {
            state: 'stuck', icon: '⚠', color: 'rose', label: 'stuck?',
            ariaLabel: 'Trajectory writeback stuck',
            title: "server hasn't confirmed this entry — writeback may be stuck",
          };
        }
        return { state: t, label: '', color: 'gray' };
      },

      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 %}