Scaffold GitManager multi-repo dashboard

Runnable skeleton per AGENT.md: Echo server (/, /help, /healthz, /api/repos), read-only repo scanner with in-memory index, the internal/git boundary, the <repo-list> web component with design tokens, and dev tooling (Dockerfile, docker-compose, air, .env.example). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-09-19 16:34:43 -04:00
parent c24604fe65
commit 1a2ad98c33
20 changed files with 1527 additions and 0 deletions
@@ -0,0 +1,115 @@
+// <repo-list> — the dashboard's list of discovered repositories.
+//
+// A self-contained control in the ActiveX spirit (AGENT.md §1.1): it lives in a
+// shadow root, fetches its own data from /api/repos on connect, renders itself,
+// and cleans up on disconnect. It talks to the rest of the app only via a
+// bubbling/composed `repo:select` CustomEvent — no shared globals.
+
+class RepoList extends HTMLElement {
+  #refreshMs = 15000;
+  #timer = null;
+  #controller = null;
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.#renderShell();
+    this.#load();
+    this.#timer = setInterval(() => this.#load(), this.#refreshMs);
+  }
+
+  disconnectedCallback() {
+    clearInterval(this.#timer);
+    this.#controller?.abort();
+  }
+
+  async #load() {
+    this.#controller?.abort();
+    this.#controller = new AbortController();
+    try {
+      const res = await fetch('/api/repos', { signal: this.#controller.signal });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      this.#renderRepos(await res.json());
+    } catch (err) {
+      if (err.name !== 'AbortError') this.#renderError(err);
+    }
+  }
+
+  #select(repo) {
+    // Cross-component communication is via events only (AGENT.md §1.1).
+    this.dispatchEvent(new CustomEvent('repo:select', {
+      detail: repo, bubbles: true, composed: true,
+    }));
+  }
+
+  #renderShell() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host { display: block; }
+        ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
+        li {
+          background: var(--surface-1);
+          border: 1px solid var(--border);
+          border-radius: var(--radius);
+          padding: 10px 14px;
+          cursor: pointer;
+          display: flex; align-items: center; gap: 12px;
+        }
+        li:hover { border-color: var(--border-strong); }
+        .name { font-weight: 600; }
+        .branch { color: var(--color-fg-muted); }
+        .spacer { margin-left: auto; }
+        .badge {
+          font-size: 12px; padding: 1px 8px; border-radius: var(--radius-sm);
+          border: 1px solid var(--border-strong);
+        }
+        .dirty { color: var(--git-dirty); border-color: var(--git-dirty); }
+        .clean { color: var(--git-clean); border-color: var(--git-clean); }
+        .ahead { color: var(--git-ahead); }
+        .behind { color: var(--git-behind); }
+        .empty, .error { color: var(--color-fg-muted); padding: 12px 0; }
+        .error { color: var(--color-danger); }
+      </style>
+      <div id="body"><p class="empty">Loading repositories…</p></div>
+    `;
+  }
+
+  #renderError(err) {
+    this.shadowRoot.getElementById('body').innerHTML =
+      `<p class="error">Could not load repositories: ${this.#esc(err.message)}</p>`;
+  }
+
+  #renderRepos(repos) {
+    const body = this.shadowRoot.getElementById('body');
+    if (!repos || repos.length === 0) {
+      body.innerHTML = `<p class="empty">No repositories found. Check GIT_REPO_ROOTS.</p>`;
+      return;
+    }
+    const ul = document.createElement('ul');
+    for (const r of repos) {
+      const li = document.createElement('li');
+      li.innerHTML = `
+        <span class="name">${this.#esc(r.name)}</span>
+        <span class="branch">${this.#esc(r.branch || '—')}</span>
+        <span class="spacer"></span>
+        ${r.ahead ? `<span class="badge ahead">↑${r.ahead}</span>` : ''}
+        ${r.behind ? `<span class="badge behind">↓${r.behind}</span>` : ''}
+        <span class="badge ${r.dirty ? 'dirty' : 'clean'}">${r.dirty ? 'dirty' : 'clean'}</span>
+      `;
+      li.addEventListener('click', () => this.#select(r));
+      ul.appendChild(li);
+    }
+    body.replaceChildren(ul);
+  }
+
+  #esc(s) {
+    return String(s ?? '').replace(/[&<>"']/g, (c) => (
+      { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]
+    ));
+  }
+}
+
+customElements.define('repo-list', RepoList);
@@ -0,0 +1,28 @@
+# repo-list
+
+## Intent
+The dashboard's list of every discovered repository. It is the first
+ActiveX-spirit control in the app (AGENT.md §1.1): a self-contained custom
+element that fetches its own data, renders inside its shadow root, and
+communicates outward only through events. It exists to prove and anchor the
+component pattern the rest of the UI follows.
+
+## Public surface
+- **Tag:** `<repo-list>`
+- **Attributes/properties:** none yet.
+- **Fetches:** `GET /api/repos` on connect and every 15s (in-flight request is
+  aborted on refresh and on disconnect).
+- **Emits:** `repo:select` — a `CustomEvent` (bubbles + composed) whose `detail`
+  is the clicked repo's state object. The detail panel (future) listens for this.
+
+## History
+- 2026-09-19: created — first component; renders name, branch, ahead/behind, and
+  a clean/dirty badge; establishes the shadow-DOM + self-fetch + event pattern.
+
+## Notes / gotchas
+- Uses shared design tokens (`--git-*`, `--surface-*`, `--radius*`) for all
+  colors and radii — no hardcoded hex (AGENT.md §1.1).
+- Server output is escaped before insertion (`#esc`); repo names come from the
+  filesystem, so treat them as untrusted.
+- Polling is a placeholder cadence; a push/SSE update channel can replace it
+  later without changing the public surface.