{% extends "base.html" %}
{% block title %}{{ project_name }} · Harbormaster{% endblock %}
{% block page_title %}{{ project_name }}{% 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>

{# v19.0.0a2: tab system. Tabs live above main pane content; URL hash
   #tab=<id> persists active tab across reloads; keyboard shortcuts 1-5
   cycle tabs (skipped when typing in inputs/textareas). The Overview
   tab carries the existing project header + status; Trajectories tab
   wraps the existing trajectoryList component (relocated, not
   duplicated); Memories / Q&A History tabs are placeholders that land
   in v19.0.0a6 / v19.0.0a5; Settings shows read-only metadata until
   v19.0.0a4 adds per-project budget edit. #}
<div x-data="projectTabs()" x-init="restoreFromHash()">
  {# v21.0.0a6: tab strip extracted to shared partial. The
     projectTabs() factory continues to own state (tabs/active/setTab);
     the partial is presentation-only and reads from the parent scope. #}
  {% with tabs_id="project" %}
    {% include "_partials/_tabs.html" %}
  {% endwith %}

  <!-- Overview tab: existing project header + status. -->
  <section x-show="active === 'overview'" x-transition role="tabpanel" aria-label="Overview">
<header class="mb-4 border border-border rounded-md p-2.5 bg-surface-2/40">
  <div class="flex items-baseline justify-between gap-2 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-2 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-accent-soft/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-4">
  <header class="mb-2 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-md p-2.5 bg-surface-2/40 text-foreground-muted leading-relaxed">{{ status_markdown }}</pre>
</section>

{% include "_partials/ask_form.html" %}
{% include "_partials/delegate_form.html" %}
  </section>

  <!-- v19.0.0a6: Memories tab — split-pane editor (file list | textarea +
       live markdown preview), with revision dropdown for inline diff and
       a local undo/redo history stack. Replaces the v19.a2 placeholder
       banner and the legacy memoriesPanel viewer block (both removed). -->
  <section x-show="active === 'memories'"
           x-transition
           role="tabpanel"
           aria-label="Memories">
    <!-- v19.0.0a8: x-data lives on this inner wrapper, not on the
         section — Alpine's x-transition + x-show + x-data + x-init on
         the same element race and leave `display:none` stuck inline.
         The wrapper carries the editor state instead. -->
    <div x-data="memoriesEditor('{{ project_name | e }}')"
         x-init="loadFiles()"
         class="grid gap-3"
         style="grid-template-columns: 220px 1fr; min-height: calc(100vh - 16rem);">

      <!-- LEFT: file list -->
      <aside class="border border-border rounded-md bg-surface-2/40 p-2 overflow-y-auto">
        <header class="flex items-center justify-between mb-2">
          <h3 class="text-xs uppercase text-foreground-muted">Files</h3>
          <button type="button"
                  @click="newFile()"
                  class="text-xs text-accent hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent rounded px-1"
                  aria-label="New memory file">+ new</button>
        </header>
        <ul class="space-y-0.5" role="listbox" aria-label="Memory files">
          <template x-for="file in files" :key="'memfile:' + file.name">
            <li>
              <button type="button"
                      @click="select(file)"
                      :aria-current="active && active.name === file.name ? 'true' : 'false'"
                      :aria-label="`Open memory file ${file.name}`"
                      :class="active && active.name === file.name
                              ? 'bg-accent-soft/40 text-accent'
                              : 'text-foreground-muted hover:bg-surface-3/50 hover:text-accent'"
                      class="w-full text-left px-2 py-1 text-xs rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent">
                <span x-text="file.name" class="font-mono"></span>
                <span class="text-[10px] text-foreground-subtle ml-1"
                      x-text="formatSize(file.size)"></span>
                <span class="block mt-0.5 flex flex-wrap gap-1"
                      x-show="(file.tags || []).length > 0">
                  <template x-for="t in (file.tags || [])"
                            :key="'tag:' + file.name + ':' + t">
                    <span class="text-[9px] px-1.5 py-0 rounded bg-accent-soft/40 text-accent border border-accent-soft/60"
                          x-text="t"></span>
                  </template>
                </span>
              </button>
            </li>
          </template>
          <li x-show="!files.length"
              role="status"
              data-empty-state="memories.no-files"
              class="text-xs text-foreground-dim leading-snug border border-border-subtle bg-surface-2/40 rounded p-2 m-1">
            <span class="block text-foreground-muted font-semibold mb-0.5">No memory files yet.</span>
            Click <span class="font-mono text-accent">+ new</span> above to create one, or run
            <span class="font-mono text-accent">serena init</span> in the project directory.
          </li>
        </ul>
        <p x-show="loadError" role="alert" aria-live="assertive"
           class="mt-2 text-xs text-danger" x-text="loadError"></p>
      </aside>

      <!-- RIGHT: editor + preview, or empty state -->
      <div x-show="!active" class="text-foreground-muted text-sm flex items-center justify-center border border-border rounded-md bg-surface-2/40">
        <span>Select a memory file to edit, or click "+ new" to create one.</span>
      </div>

      <div x-show="active" class="grid gap-2 min-h-0" style="grid-template-rows: auto 1fr auto;">

        <!-- Toolbar -->
        <div class="flex items-center gap-2 text-xs flex-wrap">
          <span x-text="active && active.name" class="font-mono font-semibold flex-1 truncate"></span>
          <span x-show="dirty" class="text-warning text-[10px]" aria-live="polite">unsaved</span>
          <button type="button"
                  @click="save()"
                  :disabled="!dirty || saving"
                  class="bg-accent-soft/60 text-accent hover:bg-accent-soft px-2 py-1 rounded disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
                  aria-label="Save memory file">
            <span x-text="saving ? 'Saving…' : 'Save'"></span>
          </button>
          <button type="button"
                  @click="undo()"
                  :disabled="!canUndo()"
                  class="hover:bg-surface-3/50 px-2 py-1 rounded disabled:opacity-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
                  aria-label="Undo">↶ Undo</button>
          <button type="button"
                  @click="redo()"
                  :disabled="!canRedo()"
                  class="hover:bg-surface-3/50 px-2 py-1 rounded disabled:opacity-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
                  aria-label="Redo">↷ Redo</button>
          <label class="text-foreground-subtle">diff vs:
            <select x-model="diffAgainst"
                    @change="loadDiff()"
                    aria-label="Diff against revision"
                    class="bg-surface-1 border border-border rounded px-1 py-0.5 text-foreground">
              <option value="">none</option>
              <template x-for="r in revisions" :key="'rev:' + r.id">
                <option :value="r.id"
                        x-text="r.saved_at + ' (' + (r.bytes_diff > 0 ? '+' : '') + r.bytes_diff + 'B)'"></option>
              </template>
            </select>
          </label>
        </div>

        <!-- Split: textarea LEFT, preview RIGHT -->
        <div class="grid grid-cols-2 gap-2 min-h-0">
          <textarea x-model="content"
                    @input.debounce.300ms="onContentChange()"
                    @keydown.meta.z.prevent="undo()"
                    @keydown.ctrl.z.prevent="undo()"
                    @keydown.meta.shift.z.prevent="redo()"
                    @keydown.ctrl.shift.z.prevent="redo()"
                    aria-label="Memory file content"
                    class="bg-surface-1 border border-border rounded p-2 text-xs font-mono resize-none overflow-y-auto text-foreground focus:border-accent-strong focus:outline-none"
                    style="min-height: 24rem;"></textarea>
          <div class="bg-surface-1 border border-border rounded p-2 text-xs prose prose-invert max-w-none overflow-y-auto"
               style="min-height: 24rem;"
               aria-label="Live markdown preview"
               x-html="preview"></div>
        </div>

        <!-- Diff panel (only when a revision is selected) -->
        <div x-show="diffAgainst"
             aria-label="Diff against selected revision"
             class="border border-border rounded p-2 text-xs font-mono whitespace-pre overflow-auto bg-surface-2/40 max-h-64"
             x-html="diffHtml"></div>

        <p x-show="saveError" role="alert" aria-live="assertive"
           class="text-xs text-danger" x-text="saveError"></p>
      </div>
    </div>
  </section>

  <script src="/static/vendor/marked.min.js"></script>
  <script>
    // v19.0.0a6: split-pane Memories editor. Replaces the legacy
    // memoriesPanel viewer. Backed by the existing API surface
    // (/api/projects/{name}/memories, memory-history, memory-revisions/diff,
    // /api/render-markdown).
    function memoriesEditor(projectName) {
      return {
        project: projectName,
        files: [],
        active: null,
        content: '',
        preview: '',
        dirty: false,
        saving: false,
        saveError: '',
        loadError: '',
        diffAgainst: '',
        diffHtml: '',
        revisions: [],
        // Local undo/redo stack. Index 0 = newest. historyIndex points
        // at the current "live" entry; undo moves towards older snapshots.
        history: [],
        historyIndex: 0,
        // Snapshot of the on-disk content at the time of last load/save,
        // so dirty-flag toggles compare against persisted state — not the
        // first entry of the undo stack (which is the same value but
        // shifts as the user edits).
        savedContent: '',

        async loadFiles() {
          try {
            const r = await hmFetch(`/api/projects/${encodeURIComponent(this.project)}/memories`);
            if (!r.ok) {
              this.loadError = `failed to list memories (${r.status})`;
              return;
            }
            const d = await r.json();
            this.files = d.files || [];
            this.loadError = '';
            // Auto-select first file if nothing chosen yet.
            if (!this.active && this.files.length) {
              await this.select(this.files[0]);
            }
          } catch (e) {
            this.loadError = 'failed to list memories: ' + e.message;
          }
        },

        async select(file) {
          try {
            const r = await hmFetch(
              `/api/projects/${encodeURIComponent(this.project)}/memories/`
              + encodeURIComponent(file.name).replace(/%2F/g, '/')
            );
            if (!r.ok) {
              this.loadError = `failed to open ${file.name} (${r.status})`;
              return;
            }
            const text = await r.text();
            this.active = file;
            this.content = text;
            this.savedContent = text;
            this.dirty = false;
            this.history = [{ content: text, ts: Date.now() }];
            this.historyIndex = 0;
            this.diffAgainst = '';
            this.diffHtml = '';
            await this.loadRevisions();
            await this.renderPreview();
          } catch (e) {
            this.loadError = 'failed to open file: ' + e.message;
          }
        },

        async loadRevisions() {
          try {
            const r = await hmFetch(
              `/api/projects/${encodeURIComponent(this.project)}/memory-history`
              + `?file=${encodeURIComponent(this.active.name)}`
            );
            if (!r.ok) {
              this.revisions = [];
              return;
            }
            const d = await r.json();
            this.revisions = d.revisions || [];
          } catch (e) {
            this.revisions = [];
          }
        },

        onContentChange() {
          this.dirty = (this.content !== this.savedContent);
          // Push onto undo stack only when content differs from current
          // history head, so 300ms debounced typing produces sensible
          // checkpoints rather than per-keystroke spam.
          if (this.history[this.historyIndex]
              && this.history[this.historyIndex].content === this.content) {
            // No change since last snapshot — just refresh preview.
            this.renderPreview();
            return;
          }
          // Truncate any redo entries (newer than historyIndex) since the
          // user has diverged from that future timeline.
          if (this.historyIndex > 0) {
            this.history = this.history.slice(this.historyIndex);
            this.historyIndex = 0;
          }
          this.history.unshift({ content: this.content, ts: Date.now() });
          this.renderPreview();
        },

        async renderPreview() {
          try {
            const r = await hmFetch('/api/render-markdown', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({ text: this.content, project: this.project }),
            });
            this.preview = r.ok ? await r.text() : '';
          } catch (e) {
            this.preview = '';
          }
        },

        async save() {
          if (!this.active || this.saving) return;
          this.saving = true;
          this.saveError = '';
          try {
            const r = await hmFetch(
              `/api/projects/${encodeURIComponent(this.project)}/memories/`
              + encodeURIComponent(this.active.name).replace(/%2F/g, '/'),
              {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ content: this.content }),
              }
            );
            if (!r.ok) {
              this.saveError = `save failed (${r.status})`;
              return;
            }
            this.savedContent = this.content;
            this.dirty = false;
            await this.loadRevisions();
            await this.loadFiles();
          } catch (e) {
            this.saveError = 'save failed: ' + e.message;
          } finally {
            this.saving = false;
          }
        },

        canUndo() { return this.historyIndex < this.history.length - 1; },
        canRedo() { return this.historyIndex > 0; },

        undo() {
          if (!this.canUndo()) return;
          this.historyIndex += 1;
          this.content = this.history[this.historyIndex].content;
          this.dirty = (this.content !== this.savedContent);
          this.renderPreview();
        },

        redo() {
          if (!this.canRedo()) return;
          this.historyIndex -= 1;
          this.content = this.history[this.historyIndex].content;
          this.dirty = (this.content !== this.savedContent);
          this.renderPreview();
        },

        async loadDiff() {
          if (!this.diffAgainst || !this.active) {
            this.diffHtml = '';
            return;
          }
          try {
            const r = await hmFetch(
              `/api/projects/${encodeURIComponent(this.project)}/memory-revisions/diff`
              + `?file=${encodeURIComponent(this.active.name)}`
              + `&from=${encodeURIComponent(this.diffAgainst)}`
              + `&format=html`
            );
            this.diffHtml = r.ok ? await r.text() : '';
          } catch (e) {
            this.diffHtml = '';
          }
        },

        async newFile() {
          const name = window.prompt(
            'New memory file name (e.g. CLAUDE.md or .serena/memories/notes.md):'
          );
          if (!name) return;
          try {
            const r = await hmFetch(
              `/api/projects/${encodeURIComponent(this.project)}/memories`,
              {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                  filename: name,
                  content: '# ' + name + '\n\n',
                }),
              }
            );
            if (!r.ok) {
              this.saveError = `create failed (${r.status})`;
              return;
            }
            await this.loadFiles();
            // Auto-select the new file if it's now in the list.
            const created = this.files.find((f) => f.name === name);
            if (created) await this.select(created);
          } catch (e) {
            this.saveError = 'create failed: ' + e.message;
          }
        },

        formatSize(b) {
          if (typeof b !== 'number') return '';
          if (b < 1024) return b + 'B';
          return (b / 1024).toFixed(1) + 'KB';
        },
      };
    }
  </script>
{# v19.0.0a6: legacy memoriesPanel REMOVED.

   The v10.0.0a5 viewer + v11/v12/v13/v14/v15 editor stack (the entire
   `memoriesPanel` Alpine component, its file list, edit toolbar, tag
   chip editor, history aside, diff panel, new-file form, and the 535-
   line `function memoriesPanel(initial) { ... }` script) used to
   live below this comment. It has been replaced wholesale by the
   split-pane `memoriesEditor` Alpine component at the top of the
   Memories tab.

   The new editor reuses the same backend API surface
   (memory-history, memory-revisions/diff, render-markdown), so
   server-side bleach-sanitised preview, undo/redo (via local stack),
   and HTML diff still work — they're just driven by a simpler
   component with a fixed split-pane layout instead of toggling
   edit/preview modes inline.

   Wrapped in {%- if false -%} so Jinja never emits the legacy markup
   even if some downstream regex stumbles into a stray closing fence.
#}
{% if false %}
<section style="display:none" data-legacy-removed="memoriesPanel-v15">
  <header class="mb-2 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-surface-2/40 text-foreground-muted px-3 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-2">
    <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.
           v15.0.0a1: comma-separated tokens + AND/OR toggle. AND
           (intersection) is the default — operator wants narrow filtering
           by default; OR (union) widens. -->
      <input type="text"
             x-model="tagFilter"
             placeholder="filter by tag (comma for multi)…"
             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">
      <div class="flex items-center gap-1 mb-2 text-[10px]" role="group" aria-label="Tag filter mode">
        <span class="text-foreground-subtle">match</span>
        <button type="button"
                @click="tagFilterMode = 'and'"
                :aria-pressed="tagFilterMode === 'and'"
                aria-label="Match all tags (AND)"
                :class="tagFilterMode === 'and'
                        ? 'border-accent-strong text-accent bg-accent-soft/30'
                        : 'border-border text-foreground-muted hover:text-accent'"
                class="px-1.5 py-0 rounded border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent">
          AND
        </button>
        <button type="button"
                @click="tagFilterMode = 'or'"
                :aria-pressed="tagFilterMode === 'or'"
                aria-label="Match any tag (OR)"
                :class="tagFilterMode === 'or'
                        ? 'border-accent-strong text-accent bg-accent-soft/30'
                        : 'border-border text-foreground-muted hover:text-accent'"
                class="px-1.5 py-0 rounded border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent">
          OR
        </button>
      </div>
      <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-accent-soft/40 text-accent'
                          : 'text-foreground-muted hover:bg-surface-3/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-accent">
            <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-accent-soft/40 text-accent border border-accent-soft/60"
                      x-text="t"></span>
              </template>
            </span>
          </button>
        </li>
      </template>
      </ul>
    </div>
    <article class="md:col-span-2 border border-border rounded p-2 bg-surface-1/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 focus-visible:ring-2 focus-visible:ring-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 focus-visible:ring-2 focus-visible:ring-accent">
            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-accent-soft/30 hover:bg-accent-soft/50 text-accent disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-accent">
            <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 focus-visible:ring-2 focus-visible:ring-accent">
            <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>
      <!-- v15.0.0a1: chip-input tag editor. Renders the YAML-frontmatter
           tags as removable chips with an "add tag" input. Mutating
           chips rewrites this.draft so the existing PUT save flow stays
           intact. We treat chip-edit as the canonical UX — the operator
           can still type raw YAML in the textarea below; chips re-derive
           on every chip mutation. -->
      <div x-show="editing"
           class="mb-2 p-2 border border-border rounded bg-surface-1/40">
        <div class="flex items-center justify-between mb-1">
          <span class="text-[10px] text-foreground-subtle">Tags (frontmatter)</span>
          <span class="text-[10px] text-foreground-subtle"
                x-text="tagChips.length === 0 ? 'no tags' : `${tagChips.length} tag${tagChips.length === 1 ? '' : 's'}`"></span>
        </div>
        <div class="flex flex-wrap gap-1 items-center">
          <template x-for="(t, i) in tagChips" :key="'chip:' + i + ':' + t">
            <span class="inline-flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded bg-accent-soft/40 text-accent border border-accent-soft/60">
              <span x-text="t"></span>
              <button type="button"
                      @click="removeTagChip(i)"
                      :aria-label="`Remove tag ${t}`"
                      class="hover:text-danger focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-rose-400">
                ×
              </button>
            </span>
          </template>
          <input type="text"
                 x-model="newTagChip"
                 @keydown.enter.prevent="addTagChip()"
                 @keydown.comma.prevent="addTagChip()"
                 placeholder="add tag…"
                 aria-label="Add a new tag"
                 class="text-[10px] bg-surface-1 border border-border rounded px-1.5 py-0.5 text-foreground placeholder:text-foreground-subtle focus:border-accent-strong focus:outline-none w-24">
          <button type="button"
                  @click="addTagChip()"
                  :disabled="!newTagChip.trim()"
                  aria-label="Add tag"
                  class="text-[10px] px-1.5 py-0.5 rounded border border-border hover:border-accent-strong text-foreground-muted hover:text-accent disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-accent">
            +
          </button>
        </div>
      </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-surface-1/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-2 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 focus-visible:ring-2 focus-visible:ring-accent">
                #<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-2 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 focus-visible:ring-2 focus-visible:ring-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-2 border border-accent-soft/40 rounded bg-surface-1 p-2">
          <div class="flex items-center justify-between mb-1 gap-2">
            <span class="text-xs text-accent">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-accent-soft/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-accent-soft/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-surface-1/30 rounded p-1"
               x-html="diffHtml"></div>
        </div>
      </aside>
    </article>
  </div>

  <!-- v10.0.0a6: new-memory creation form -->
  <details class="mt-2 border border-border rounded p-2 bg-surface-1/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-accent-soft/30 hover:bg-accent-soft/50 text-accent disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-accent">
          <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.
      // v15.0.0a1: comma-separated tokens + AND/OR mode toggle.
      tagFilter: '',
      tagFilterMode: 'and',
      // v15.0.0a1: chip-input editor state. Derived from frontmatter on
      // startEdit(); writes back to draft on every mutation.
      tagChips: [],
      newTagChip: '',
      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.
      // v15.0.0a1: comma-splits the filter into tokens. AND mode requires
      // every token to match (each via substring against any tag); OR
      // mode requires at least one. Empty tokens are dropped.
      filteredFiles() {
        const raw = (this.tagFilter || '').toLowerCase();
        const tokens = raw.split(',').map(t => t.trim()).filter(Boolean);
        if (tokens.length === 0) return this.files;
        const matchToken = (tags, tok) =>
          (tags || []).some(t => t.toLowerCase().includes(tok));
        if (this.tagFilterMode === 'or') {
          return this.files.filter(f =>
            tokens.some(tok => matchToken(f.tags, tok))
          );
        }
        // AND (default): every token must match.
        return this.files.filter(f =>
          tokens.every(tok => matchToken(f.tags, tok))
        );
      },

      // v15.0.0a1: chip-input helpers. The "frontmatter" we write back
      // is the YAML block-list form — server _extract_memory_tags
      // accepts both inline-list and block-list forms (v15.0.0a1).
      _splitFrontmatter(text) {
        // Returns {frontLines, body}. frontLines is the *content* between
        // the leading `---` and the closing `---` (no fences). body is
        // everything after the closing fence (preserving leading newline).
        if (!text || !text.startsWith('---')) {
          return { frontLines: [], body: text || '' };
        }
        const after = text.slice(3);
        const idx = after.indexOf('\n---');
        if (idx === -1) {
          return { frontLines: [], body: text };
        }
        const front = after.slice(0, idx);
        // Skip past the closing `---` and a single trailing newline.
        let bodyStart = idx + 4; // past '\n---'
        if (after[bodyStart] === '\n') bodyStart += 1;
        return {
          frontLines: front.split('\n'),
          body: after.slice(bodyStart),
        };
      },
      _parseChipsFromDraft() {
        const { frontLines } = this._splitFrontmatter(this.draft || '');
        for (let i = 0; i < frontLines.length; i++) {
          const line = frontLines[i].trim();
          if (!line.toLowerCase().startsWith('tags:')) continue;
          const value = line.slice(5).trim();
          if (value.startsWith('[') && value.endsWith(']')) {
            return value.slice(1, -1).split(',')
              .map(t => t.trim().replace(/^["']|["']$/g, ''))
              .filter(Boolean);
          }
          if (value === '') {
            const out = [];
            for (let j = i + 1; j < frontLines.length; j++) {
              const s = frontLines[j].trim();
              if (!s) continue;
              if (!s.startsWith('-')) break;
              const item = s.slice(1).trim().replace(/^["']|["']$/g, '');
              if (item) out.push(item);
            }
            return out;
          }
          return [];
        }
        return [];
      },
      _writeChipsToDraft() {
        // Rebuild draft with the current chip set. Strategy: split off
        // the existing frontmatter, drop any existing tags: lines (and
        // their block-list children), prepend a fresh tags: block-list,
        // then re-stitch.
        const text = this.draft || '';
        const { frontLines, body } = this._splitFrontmatter(text);
        const out = [];
        let i = 0;
        let hadFrontmatter = text.startsWith('---');
        while (i < frontLines.length) {
          const line = frontLines[i];
          const stripped = line.trim();
          if (stripped.toLowerCase().startsWith('tags:')) {
            // Skip this line + any subsequent block-list children.
            const value = stripped.slice(5).trim();
            i += 1;
            if (value === '') {
              while (i < frontLines.length) {
                const s = frontLines[i].trim();
                if (s.startsWith('-')) { i += 1; continue; }
                if (s === '') { i += 1; continue; }
                break;
              }
            }
            continue;
          }
          out.push(line);
          i += 1;
        }
        // Build the new tags: section.
        const tagSection = [];
        if (this.tagChips.length > 0) {
          tagSection.push('tags:');
          for (const t of this.tagChips) {
            // Quote items containing spaces / special chars; bare otherwise.
            const needsQuote = /[\s,\[\]"']/.test(t);
            tagSection.push('  - ' + (needsQuote ? JSON.stringify(t) : t));
          }
        }
        const newFront = [...tagSection, ...out].filter((_, idx, arr) => {
          // Trim leading empty lines but keep internal/trailing.
          if (idx === 0) return arr[idx] !== '' || arr.some((v, k) => k > 0 && v !== '');
          return true;
        });
        // If we have any frontmatter content, wrap with --- fences.
        if (newFront.length > 0 || hadFrontmatter || this.tagChips.length > 0) {
          this.draft = '---\n' + newFront.join('\n') + '\n---\n' + body;
        } else {
          this.draft = body;
        }
      },
      addTagChip() {
        const t = (this.newTagChip || '').trim();
        if (!t) return;
        // Dedup (case-insensitive).
        if (this.tagChips.some(x => x.toLowerCase() === t.toLowerCase())) {
          this.newTagChip = '';
          return;
        }
        this.tagChips.push(t);
        this.newTagChip = '';
        this._writeChipsToDraft();
        this.updatePreview();
      },
      removeTagChip(idx) {
        if (idx < 0 || idx >= this.tagChips.length) return;
        this.tagChips.splice(idx, 1);
        this._writeChipsToDraft();
        this.updatePreview();
      },

      // v15.0.0a1: persistent undo/redo cursor. Keyed by project + file.
      _cursorKey() {
        if (!this.selected) return '';
        return `hm:revcursor:${this.project}:${this.selected.name}`;
      },
      _persistCursor() {
        try {
          const k = this._cursorKey();
          if (!k) return;
          if (this.revisionCursor === null) {
            window.localStorage.removeItem(k);
          } else {
            window.localStorage.setItem(k, String(this.revisionCursor));
          }
        } catch (_) { /* localStorage may be disabled */ }
      },
      _restoreCursor() {
        try {
          const k = this._cursorKey();
          if (!k) return;
          const v = window.localStorage.getItem(k);
          if (v === null) {
            this.revisionCursor = null;
            return;
          }
          const n = parseInt(v, 10);
          this.revisionCursor = isNaN(n) ? null : n;
        } catch (_) {
          this.revisionCursor = null;
        }
      },

      async select(f) {
        this.selected = f;
        this.editing = false;
        this.saveError = '';
        // v14.0.0a5: reset undo/redo cursor when switching files.
        // v15.0.0a1: restore from localStorage if a cursor is persisted
        // for this project/file. Falls back to null when nothing stored.
        this._restoreCursor();
        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 = '';
        // v15.0.0a1: derive chips from the current draft frontmatter so
        // the chip-input editor mirrors what's on disk.
        this.tagChips = this._parseChipsFromDraft();
        this.newTagChip = '';
        // 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;
          // v15.0.0a1: clear persisted cursor for this file.
          this._persistCursor();
          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;
          // v15.0.0a1: persist cursor across page reloads.
          this._persistCursor();
          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>
  </section>
{% endif %}

  <!-- Trajectories tab: relocated trajectoryList component (v19.0.0a2;
       previously rendered standalone below the memories panel). -->
  <section x-show="active === 'trajectories'" x-transition role="tabpanel" aria-label="Trajectories">
<!-- 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-4 border border-border rounded-md p-2.5 bg-surface-2/40">
  <header class="mb-2 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-2 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-surface-2/40 text-foreground-muted px-3 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-2">
      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-accent-soft/30 hover:bg-accent-soft/50 text-accent transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1">
      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-surface-2/50 transition flex items-baseline justify-between gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1">
          <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-accent-strong/40 bg-accent-soft/30';
          case 'stuck':
            return 'border-rose-700/50 bg-rose-950/30';
          default:
            return 'border-border bg-surface-1/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>
  </section>

  <!-- Q&A History tab: project-scoped recall (v21.0.0a2). Wraps the
       existing /api/recall endpoint with a search form + result list,
       loaded on first activation via $watch('active'). Single-quote
       factory-mount pattern avoids the v19.a9 attribute-escaping bug. -->
  <section x-show="active === 'qa-history'" x-transition role="tabpanel" aria-label="Q and A History"
           x-data="projectQaHistory('{{ project.name | e if project else '' }}')"
           x-init="$watch('$root.active', v => { if (v === 'qa-history' && !loaded) load(); })">
    <header class="flex items-center justify-between mb-3">
      <h3 class="text-sm font-semibold text-foreground">Q&amp;A history</h3>
      <span class="text-xs text-foreground-muted" x-text="count + ' entries'"></span>
    </header>
    <form @submit.prevent="search()" class="flex gap-2 mb-3">
      <input x-model="query" type="text" placeholder="semantic search…"
             class="bg-surface-1 border border-border rounded px-2 py-1 text-sm flex-1">
      <button type="submit" class="bg-accent text-foreground px-3 py-1 text-sm rounded focus-visible:ring-2 focus-visible:ring-accent">Search</button>
    </form>
    <ul class="space-y-2 text-sm" id="hm-qa-history-results">
      <template x-for="entry in results" :key="entry.id">
        <li class="border-l-2 border-accent pl-2">
          <div class="text-foreground-muted text-xs" x-text="entry.created_at + ' · ' + entry.tool"></div>
          <div class="font-semibold truncate text-foreground" x-text="entry.question"></div>
          <details class="text-xs text-foreground-muted">
            <summary class="cursor-pointer">answer ▾</summary>
            <pre class="whitespace-pre-wrap mt-1" x-text="entry.answer"></pre>
          </details>
        </li>
      </template>
      <li x-show="!results.length && loaded"
          data-empty-state="qa-history.empty"
          class="text-foreground-dim text-xs leading-snug border border-border-subtle bg-surface-2/40 rounded p-2">
        <span class="block text-foreground-muted font-semibold mb-0.5">No Q&amp;A history yet.</span>
        Use the <span class="font-mono text-accent">Ask</span> form above to query this project — saved questions appear here.
      </li>
    </ul>
  </section>

  <!-- Settings tab: metadata + editable per-project daily-call budget
       (v21.0.0a2). Budget writes to <project>/.harbormaster.toml under
       [budget] daily_call_budget. Renders nothing on remote-host views. -->
  <section x-show="active === 'settings'" x-transition role="tabpanel" aria-label="Settings"
           x-data="projectSettings('{{ project.name | e if project else '' }}')"
           x-init="loadBudget()">
    {% if project %}
      <h3 class="text-sm font-semibold mb-3 text-foreground">Metadata</h3>
      <dl class="grid grid-cols-2 gap-2 text-sm border border-border rounded-md p-2.5 bg-surface-2/40 mb-4">
        <dt class="text-foreground-muted">Project name</dt>
        <dd class="text-foreground">{{ project.name }}</dd>
        <dt class="text-foreground-muted">Path</dt>
        <dd class="font-mono text-xs text-foreground break-all">{{ project.path }}</dd>
        <dt class="text-foreground-muted">Last commit</dt>
        <dd class="font-mono text-xs text-foreground">
          {% if project.last_commit %}{{ project.last_commit.hash }}{% else %}(no git){% endif %}
        </dd>
        <dt class="text-foreground-muted">Language</dt>
        <dd class="text-foreground">{{ project.language or 'unknown' }}</dd>
      </dl>

      <h3 class="text-sm font-semibold mb-3 text-foreground">Daily call budget</h3>
      <form @submit.prevent="save()" class="space-y-2 text-sm" id="hm-project-budget-form">
        <label class="flex items-center gap-2">
          <input type="number" x-model="budget" min="1"
                 class="bg-surface-1 border border-border rounded px-2 py-1 w-32"
                 placeholder="inherit">
          <span class="text-foreground-muted text-xs">leave empty = inherit from per-host</span>
        </label>
        <div class="flex gap-2 items-center">
          <button type="submit" :disabled="saving"
                  class="bg-accent text-foreground px-3 py-1 rounded focus-visible:ring-2 focus-visible:ring-accent">Save</button>
          <span x-show="message" x-text="message" :class="messageClass" class="text-xs"></span>
        </div>
      </form>
      <p class="text-xs text-foreground-muted mt-3">
        Current effective cap (tightest wins):
        per-host <code x-text="effective.per_host ?? '—'"></code> ·
        per-tool <code x-text="effective.per_tool ?? '—'"></code> ·
        per-project <code x-text="effective.per_project ?? '—'"></code>
      </p>
    {% else %}
      <p class="text-sm text-foreground-muted p-2.5 text-center border border-border rounded bg-surface-2/40">
        Settings are unavailable for remote-host project views.
      </p>
    {% endif %}
  </section>
</div>

<script>
  // v21.0.0a2: Q&A history (project-scoped recall_qa wrapper).
  function projectQaHistory(projectName) {
    return {
      project: projectName,
      query: '',
      results: [],
      count: 0,
      loaded: false,
      async load() {
        try {
          const r = await hmFetch(
            `/api/recall?project=${encodeURIComponent(this.project)}&question=&top_k=20`,
          );
          const d = await r.json();
          this.results = (d.matches || []).map(m => ({
            id: m.id || m.rowid || (m.created_at + ':' + (m.question || '').slice(0, 32)),
            question: m.question,
            answer: m.answer,
            created_at: m.created_at
              ? new Date(m.created_at * 1000).toISOString().slice(0, 19).replace('T', ' ')
              : '',
            tool: m.tool || 'ask',
          }));
          this.count = this.results.length;
        } catch (e) { /* swallow — list stays empty */ }
        this.loaded = true;
      },
      async search() {
        if (!this.query) { return this.load(); }
        try {
          const r = await hmFetch(
            `/api/recall?project=${encodeURIComponent(this.project)}` +
            `&question=${encodeURIComponent(this.query)}&top_k=20`,
          );
          const d = await r.json();
          this.results = (d.matches || []).map(m => ({
            id: m.id || m.rowid || (m.created_at + ':' + (m.question || '').slice(0, 32)),
            question: m.question,
            answer: m.answer,
            created_at: m.created_at
              ? new Date(m.created_at * 1000).toISOString().slice(0, 19).replace('T', ' ')
              : '',
            tool: m.tool || 'ask',
          }));
          this.count = this.results.length;
          this.loaded = true;
        } catch (e) { /* swallow */ }
      },
    };
  }

  // v21.0.0a2: project settings — editable per-project daily-call budget.
  function projectSettings(projectName) {
    return {
      project: projectName,
      budget: '',
      saving: false,
      message: '',
      messageClass: 'text-foreground-muted',
      effective: {per_host: null, per_tool: null, per_project: null},
      async loadBudget() {
        if (!this.project) return;
        try {
          const r = await hmFetch(
            `/api/projects/${encodeURIComponent(this.project)}/budget`,
          );
          if (!r.ok) return;
          const d = await r.json();
          this.effective = d;
          this.budget = (d.per_project === null || d.per_project === undefined) ? '' : d.per_project;
        } catch (e) { /* silent */ }
      },
      async save() {
        if (!this.project) return;
        this.saving = true;
        this.message = 'Saving…';
        this.messageClass = 'text-foreground-muted';
        const parsed = this.budget === '' || this.budget === null ? null : parseInt(this.budget, 10);
        const body = JSON.stringify({daily_call_budget: parsed});
        try {
          const r = await hmFetch(
            `/api/projects/${encodeURIComponent(this.project)}/budget`,
            {method: 'PUT', headers: {'Content-Type': 'application/json'}, body},
          );
          this.saving = false;
          if (r.ok) {
            this.message = 'Saved';
            this.messageClass = 'text-foreground';
            await this.loadBudget();
            setTimeout(() => { this.message = ''; }, 2000);
          } else {
            this.message = 'Save failed: ' + r.status;
            this.messageClass = 'text-foreground';
          }
        } catch (e) {
          this.saving = false;
          this.message = 'Save failed';
          this.messageClass = 'text-foreground';
        }
      },
    };
  }
</script>

<script>
  // v19.0.0a2: tab system controller. URL hash (#tab=<id>) drives the
  // active tab so reloads + bookmarks are sticky; keyboard 1..5 cycles
  // tabs (skipped when typing in inputs/textareas, or when modifier
  // keys are held — those belong to the command palette / browser).
  function projectTabs() {
    return {
      tabs: [
        { id: 'overview',     label: 'Overview',     shortcut: '1' },
        { id: 'memories',     label: 'Memories',     shortcut: '2' },
        { id: 'trajectories', label: 'Trajectories', shortcut: '3' },
        { id: 'qa-history',   label: 'Q&A History',  shortcut: '4' },
        { id: 'settings',     label: 'Settings',     shortcut: '5' },
      ],
      active: 'overview',

      restoreFromHash() {
        const m = window.location.hash.match(/^#tab=([\w-]+)$/);
        if (m && this.tabs.find(t => t.id === m[1])) this.active = m[1];

        window.addEventListener('keydown', (e) => {
          if (['INPUT', 'TEXTAREA'].includes(e.target.tagName)) return;
          if (e.target.isContentEditable) return;
          if (e.metaKey || e.ctrlKey || e.altKey) return;
          if (/^[1-5]$/.test(e.key)) {
            const idx = parseInt(e.key, 10) - 1;
            if (this.tabs[idx]) this.setTab(this.tabs[idx].id);
          }
        });
      },

      setTab(id) {
        this.active = id;
        window.history.replaceState(null, '', '#tab=' + id);
      },
    };
  }
</script>

{% endblock %}

{# v19.0.0a3: project inspector — metadata pulled from the existing
   `project` context dict (last_commit, language, path) + a budget
   summary fetched from /api/projects/budget?host=<host>. No new
   endpoint; data the page already owns is rendered inline. #}
{% block inspector %}
<div class="p-2"
     x-data='projectInspector({
       project: {{ project | tojson if project else "null" }},
       host: {{ host | tojson }},
     })'
     x-init="loadBudget(); loadHistory()"
     data-tour-step="inspector-content">
  <section class="mb-4">
    <h3 class="text-xs uppercase tracking-wide text-foreground-subtle mb-2">Metadata</h3>
    <dl class="grid grid-cols-1 gap-y-1 text-xs">
      <div>
        <span class="text-foreground-muted">last commit:</span>
        <code class="text-accent" x-text="lastCommitShort()"></code>
        <span class="text-foreground-subtle" x-text="lastCommitAge()"></span>
      </div>
      <div>
        <span class="text-foreground-muted">language:</span>
        <code class="text-accent" x-text="meta.language || 'unknown'"></code>
      </div>
      <div>
        <span class="text-foreground-muted">host:</span>
        <code class="text-accent" x-text="meta.host || 'local'"></code>
      </div>
      <div class="truncate">
        <span class="text-foreground-muted">path:</span>
        <code class="text-foreground-subtle text-[10px]" x-text="meta.path || '—'"></code>
      </div>
      <div>
        <span class="text-foreground-muted">serena memories:</span>
        <code class="text-accent" x-text="meta.has_serena ? 'yes' : 'no'"></code>
      </div>
      <div>
        <span class="text-foreground-muted">CLAUDE.md:</span>
        <code class="text-accent" x-text="meta.has_claude_md ? 'yes' : 'no'"></code>
      </div>
    </dl>
  </section>
  <section class="border-t border-border pt-3">
    <h3 class="text-xs uppercase tracking-wide text-foreground-subtle mb-2">Budget (24h)</h3>
    <ul x-show="budget" class="text-xs space-y-1 text-foreground-muted">
      <li>
        <span>calls:</span>
        <code class="text-accent" x-text="(budget?.calls_24h ?? 0) + '/' + (budget?.budget ?? '∞')"></code>
      </li>
      <li x-show="budget?.usage_pct != null">
        <span>usage:</span>
        <code class="text-accent" x-text="(budget?.usage_pct ?? 0) + '%'"></code>
      </li>
      <li x-show="budget?.tightest_cap_axis">
        <span>tightest cap:</span>
        <code class="text-accent" x-text="budget?.tightest_cap_axis + ' (' + budget?.tightest_cap + ')'"></code>
      </li>
    </ul>
    <p x-show="!budget && !budgetError" class="text-[10px] text-foreground-subtle">
      no budget configured
    </p>
    <p x-show="budgetError" class="text-[10px] text-foreground-subtle mt-1"
       x-text="budgetError"></p>
    <!-- v21.0.0a7: 24-hour usage sparkline. Pulled from /api/kpi/history's
         `recent_queries` series (24 hourly buckets, oldest→newest). Renders
         only when at least one bucket is non-zero so a fresh install
         doesn't show a noisy flat line. -->
    <div x-show="usageHistory.length > 0"
         class="mt-2 text-accent" data-budget-sparkline
         x-html="budgetSparkline()"></div>
  </section>
</div>
<script>
  // v19.0.0a3: projectInspector — surfaces ProjectInfo + a single
  // /api/projects/budget call. `meta` is hydrated from the page's
  // own template context so first paint shows real data without a
  // round-trip; budget arrives shortly after.
  // v21.0.0a7: also pulls /api/kpi/history for a 24-hour usage line
  // beneath the budget block.
  function projectInspector(opts) {
    const project = opts.project || {};
    return {
      meta: {
        last_commit: project.last_commit || null,
        last_commit_age_days: project.last_commit_age_days,
        language: project.language || 'unknown',
        path: project.path || '',
        has_serena: !!project.has_serena,
        has_claude_md: !!project.has_claude_md,
        host: opts.host || 'local',
      },
      // budget — populated from /api/projects/budget for this host,
      // narrowed to this project's row. Shape:
      //   { calls_24h, budget, usage_pct, tightest_cap, tightest_cap_axis }
      budget: null,
      budgetError: '',
      // v21.0.0a7: 24h usage history (recent_queries series from
      // /api/kpi/history). Empty array = no sparkline shown.
      usageHistory: [],
      lastCommitShort() {
        const c = this.meta.last_commit;
        if (!c) return '—';
        // ProjectInfo's last_commit dict uses `hash` (short %h from git);
        // fall back to legacy `sha` in case anyone re-keys it later.
        const h = c.hash || c.sha || '';
        return h ? String(h).slice(0, 12) : '—';
      },
      lastCommitAge() {
        const d = this.meta.last_commit_age_days;
        if (d == null) return '';
        if (d === 0) return ' (today)';
        if (d === 1) return ' (1d ago)';
        return ' (' + d + 'd ago)';
      },
      async loadBudget() {
        const host = encodeURIComponent(this.meta.host);
        const projectName = (project && project.name) || '';
        if (!projectName) return;
        try {
          const r = await hmFetch('/api/projects/budget?host=' + host);
          if (r.status === 404) {
            this.budgetError = 'host not in [hosts.*]';
            return;
          }
          if (!r.ok) {
            this.budgetError = 'budget unavailable';
            return;
          }
          const body = await r.json();
          const row = (body.projects || []).find(p => p.project === projectName);
          if (row) {
            this.budget = row;
          }
        } catch (_) {
          this.budgetError = 'budget unavailable';
        }
      },
      // v21.0.0a7: 24h hourly recent-queries history. Soft-fails to
      // empty array so the sparkline stays hidden if /api/kpi/history
      // isn't available (e.g. older operator build).
      async loadHistory() {
        try {
          const r = await hmFetch('/api/kpi/history');
          if (!r.ok) return;
          const body = await r.json();
          const series = body.recent_queries || [];
          // Only show the sparkline when at least one bucket has data.
          if (Array.isArray(series) && series.some(v => +v > 0)) {
            this.usageHistory = series;
          }
        } catch (_) { /* soft-fail */ }
      },
      budgetSparkline() {
        if (typeof window.sparklineHtml !== 'function') return '';
        if (!this.usageHistory.length) return '';
        return window.sparklineHtml(
          this.usageHistory,
          { width: 160, height: 22, strokeW: 1.5, fillBelow: true }
        );
      },
    };
  }
</script>
{% endblock %}