Slice 3: activity feed and active project (SSE + MCP tools)

Add internal/activity (thread-safe active project + bounded event feed with subscriber fan-out). Service exposes active-project/activity methods and takes the feed. New MCP tools get_active_project/set_active_project/get_activity and HTTP endpoints GET/POST /api/active-project, /api/activity, and /events (SSE). New <activity-feed> component updates live via EventSource; <repo-list> sets the active project on selection. Verified end-to-end in the running app: user actions push live events and set the active project (actor=user), all readable by Claude over MCP.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

components/activity-feed/activity-feed.js

@@ -0,0 +1,139 @@
+// <activity-feed> — shows the active project and a live feed of what happened
+// (user AND Claude actions). A self-contained control (AGENT.md §1.1): shadow
+// DOM, fetches its own initial data, subscribes to the /events SSE stream, and
+// cleans up on disconnect. It reflects the coordination state that Claude reads
+// over MCP (§8.2), so the user can see the two staying in sync.
+
+class ActivityFeed extends HTMLElement {
+  #es = null;
+  #controller = null;
+  #events = [];
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.#renderShell();
+    this.#loadInitial();
+    // Live updates. EventSource auto-reconnects if the stream drops.
+    this.#es = new EventSource('/events');
+    this.#es.addEventListener('activity', (e) => {
+      try { this.#onEvent(JSON.parse(e.data)); } catch { /* ignore malformed */ }
+    });
+  }
+
+  disconnectedCallback() {
+    this.#es?.close();
+    this.#controller?.abort();
+  }
+
+  async #loadInitial() {
+    this.#controller?.abort();
+    this.#controller = new AbortController();
+    try {
+      const [apRes, actRes] = await Promise.all([
+        fetch('/api/active-project', { signal: this.#controller.signal }),
+        fetch('/api/activity', { signal: this.#controller.signal }),
+      ]);
+      const ap = await apRes.json();
+      const events = await actRes.json();
+      this.#events = Array.isArray(events) ? events : [];
+      this.#renderActive(ap.path || '');
+      this.#renderFeed();
+    } catch (err) {
+      if (err.name !== 'AbortError') this.#renderError(err);
+    }
+  }
+
+  #onEvent(ev) {
+    this.#events.push(ev);
+    if (this.#events.length > 200) this.#events = this.#events.slice(-200);
+    if (ev.kind === 'active-project-changed') this.#renderActive(ev.repo || '');
+    this.#renderFeed();
+  }
+
+  #renderActive(path) {
+    const el = this.shadowRoot.getElementById('active');
+    el.textContent = path ? this.#base(path) : 'none';
+    el.title = path;
+  }
+
+  #renderFeed() {
+    const ul = this.shadowRoot.getElementById('feed');
+    // Newest first.
+    ul.replaceChildren(...[...this.#events].reverse().map((ev) => {
+      const li = document.createElement('li');
+      const repo = ev.repo ? this.#base(ev.repo) : '';
+      li.innerHTML = `
+        <span class="actor ${this.#esc(ev.actor)}">${this.#esc(ev.actor)}</span>
+        <span class="kind">${this.#esc(this.#label(ev.kind))}</span>
+        ${repo ? `<span class="repo">${this.#esc(repo)}</span>` : ''}
+        ${ev.detail ? `<span class="detail">${this.#esc(ev.detail)}</span>` : ''}
+        <span class="time">${this.#time(ev.time)}</span>`;
+      return li;
+    }));
+  }
+
+  #renderError(err) {
+    this.shadowRoot.getElementById('feed').innerHTML =
+      `<li class="error">Could not load activity: ${this.#esc(err.message)}</li>`;
+  }
+
+  #renderShell() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host { display: block; }
+        .box {
+          background: var(--surface-1);
+          border: 1px solid var(--border);
+          border-radius: var(--radius);
+          padding: 12px 16px;
+        }
+        .active { margin-bottom: 8px; color: var(--color-fg-muted); }
+        .active strong { color: var(--fill-accent); }
+        h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
+             color: var(--color-fg-muted); margin: 8px 0 6px; }
+        ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px;
+             max-height: 220px; overflow-y: auto; }
+        li { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
+        .actor { font-size: 11px; padding: 0 6px; border-radius: var(--radius-sm);
+                 border: 1px solid var(--border-strong); text-transform: uppercase; }
+        .actor.user { color: var(--git-ahead); border-color: var(--git-ahead); }
+        .actor.claude { color: var(--color-success); border-color: var(--color-success); }
+        .actor.system { color: var(--color-fg-muted); }
+        .repo { font-weight: 600; }
+        .detail { color: var(--color-fg-muted); }
+        .time { margin-left: auto; color: var(--color-fg-muted); font-size: 11px; white-space: nowrap; }
+        .error { color: var(--color-danger); }
+        .empty { color: var(--color-fg-muted); }
+      </style>
+      <div class="box">
+        <div class="active">Active project: <strong id="active">none</strong></div>
+        <h3>Activity</h3>
+        <ul id="feed"><li class="empty">No activity yet.</li></ul>
+      </div>`;
+  }
+
+  #base(p) {
+    return String(p).split(/[/\\]/).filter(Boolean).pop() || p;
+  }
+
+  #label(kind) {
+    return String(kind || '').replace(/-/g, ' ');
+  }
+
+  #time(t) {
+    const d = new Date(t);
+    return isNaN(d) ? '' : d.toLocaleTimeString();
+  }
+
+  #esc(s) {
+    return String(s ?? '').replace(/[&<>"']/g, (c) => (
+      { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]
+    ));
+  }
+}
+
+customElements.define('activity-feed', ActivityFeed);

components/activity-feed/activity-feed.md

@@ -0,0 +1,28 @@
+# activity-feed
+
+## Intent
+Shows the **active project** and a **live feed** of what happened — both user and
+Claude actions. It makes the coordination state visible (AGENT.md §8.2): the same
+active project and events Claude reads over MCP (`get_active_project`,
+`get_activity`), so the user can watch the two stay in sync. Groundwork for the
+graceful project handoff (§8.3).
+
+## Public surface
+- **Tag:** `<activity-feed>`
+- **Attributes/properties:** none.
+- **Fetches (initial):** `GET /api/active-project`, `GET /api/activity`.
+- **Subscribes:** `EventSource('/events')` — SSE stream; listens for `activity`
+  events (auto-reconnects if the stream drops). Closed on disconnect.
+- **Renders:** active project (basename, full path on hover) + newest-first list
+  of events, each with an actor badge (user/claude/system), a humanized kind,
+  the repo, optional detail, and a timestamp.
+
+## History
+- 2026-09-20: created — slice 3; live active-project + activity view over SSE.
+
+## Notes / gotchas
+- All server-derived text is escaped before insertion (repo paths, details,
+  kinds) — treat as untrusted (§1.1).
+- Uses shared design tokens for colors/radii — no hardcoded hex.
+- The feed is capped client-side at 200 events to mirror the server ring buffer;
+  it does not paginate history.

components/repo-list/repo-list.js

@@ -47,6 +47,13 @@ class RepoList extends HTMLElement {
     this.dispatchEvent(new CustomEvent('repo:select', {
       detail: repo, bubbles: true, composed: true,
     }));
+    // Selecting a repo makes it the active project (a user action, §8.2). Fire
+    // and forget — the SSE feed reflects the change; failure just skips it.
+    fetch('/api/active-project', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ path: repo.path }),
+    }).catch(() => {});
   }
 
   #renderShell() {

components/repo-list/repo-list.md

@@ -21,6 +21,9 @@ component pattern the rest of the UI follows.
 - 2026-09-19: added a selected-item highlight — the clicked repo keeps an
   accent border/background (the item that `<repo-detail>` is showing). Caches the
   last `/api/repos` payload so re-selecting re-renders without a refetch.
+- 2026-09-20: selecting a repo now also `POST`s `/api/active-project` to make it
+  the active project (a user action, §8.2) — surfaced in `<activity-feed>` and
+  readable by Claude via `get_active_project`. Fire-and-forget.
 
 ## Notes / gotchas
 - Uses shared design tokens (`--git-*`, `--surface-*`, `--radius*`) for all