codehere 0.5.0-alpha.3 → 0.5.0-alpha.5

package/dist/infrastructure/protocols/ui-page.js

@@ -513,6 +513,7 @@ ${SHARED_STYLES}
 <nav class="floating-nav">
   <a href="/" class="logo">codehere</a>
   <a href="/" class="nav-link">Tasks</a>
+  <a href="/threads" class="nav-link">Threads</a>
   <a href="/history" class="nav-link active">History</a>
   <span style="color:var(--fg-40);font-family:var(--mono);font-size:11px;">
     <span id="live-dot" class="dot"></span><span id="conn">connecting</span>
@@ -1196,6 +1197,7 @@ ${SHARED_STYLES}
 <nav class="floating-nav">
   <a href="/" class="logo">codehere</a>
   <a href="/" class="nav-link active">Tasks</a>
+  <a href="/threads" class="nav-link">Threads</a>
   <a href="/history" class="nav-link">History</a>
 </nav>
 
@@ -1212,7 +1214,7 @@ ${SHARED_STYLES}
       </div>
     </div>
   </div>
-  <button class="pane-add" type="button" id="new-project-btn" title="Set a new working folder for the next task">+ New project</button>
+  <!-- intentionally empty: multi-project sidebar arrives in v0.6.x -->
 </aside>
 
 <section class="thread-pane">
@@ -1569,22 +1571,10 @@ ${SHARED_STYLES}
     localStorage.setItem('codehere:cwd', cwdInput.value.trim());
   });
 
-  // Iter 12 — "+ New project" button now wired. Previously dead chrome with
-  // title="Coming soon". Multi-project sidebar is iter 13+; for now the button
-  // does the simplest useful thing: clear the cwd input + scroll-and-focus
-  // so the user can type a new folder path. The intake form's existing Assign
-  // flow handles spawning the task in that path.
-  const newProjectBtn = document.getElementById('new-project-btn');
-  if (newProjectBtn) {
-    newProjectBtn.addEventListener('click', () => {
-      cwdInput.value = '';
-      localStorage.removeItem('codehere:cwd');
-      // Smooth-scroll the intake form into view (project sidebar is on the left,
-      // intake is on the right; on narrow screens the user might be scrolled).
-      try { cwdInput.scrollIntoView({ behavior: 'smooth', block: 'center' }); } catch { /* old browsers */ }
-      cwdInput.focus();
-    });
-  }
+  // Iter 13 — sidebar 'add project' button + handler removed (was iter 12 work).
+  // The handler cleared cwd input + scrolled + focused, but the label promised
+  // a new sidebar entry that we do not ship until v0.6.x multi-project work.
+  // Mismatch caused real founder confusion in iter-13 tasting. Removed cleanly.
 
   // Gate A1: starter-prompt chips prefill the textarea + focus it so the user
   // can edit or hit ⌘-Enter immediately. No scroll-jumping, no redirect.
@@ -1851,7 +1841,11 @@ ${SHARED_STYLES}
     const replyStatusEl = card.querySelector('.reply-status');
     if (!session.canAppendMessage) {
       threadInputEl.classList.add('disabled');
-      replyTextEl.placeholder = 'Reply unsupported for ' + agentLabel(session.agent) + ' yet';
+      // All adapters wire appendMessage as of v0.6.0 Slices 1-3. This branch
+      // now only fires for sessions evicted from in-memory tracking (the
+      // canAppendMessage flag persists from spawn but the API endpoint
+      // requires the session to still be live in SessionManager).
+      replyTextEl.placeholder = 'Replies require a live session — re-spawn to continue this thread';
       replyTextEl.disabled = true;
       replySendBtn.disabled = true;
     } else {
@@ -2230,7 +2224,7 @@ ${SHARED_STYLES}
       });
       const data = await res.json();
       if (!res.ok) { alert('Failed: ' + (data.error || res.status)); return; }
-      attachSession({ sessionId: data.sessionId, prompt, startedAt: data.startedAt, status: data.status, agent: data.agent || agent || 'conductor' });
+      attachSession({ sessionId: data.sessionId, prompt, startedAt: data.startedAt, status: data.status, agent: data.agent || agent || 'conductor', canAppendMessage: data.canAppendMessage === true });
       promptEl.value = '';
     } catch (e) {
       alert('Network error: ' + (e && e.message ? e.message : e));
@@ -2422,4 +2416,500 @@ ${SHARED_STYLES}
 </script>
 </body>
 </html>`;
+/**
+ * Project thread view — v0.6.0 M1 phase 1.
+ *
+ * Reads from /api/projects + /api/projects/:slug (shipped in 397a66a) and
+ * renders a single per-project thread instead of session-card-per-task.
+ * Phase 2 (next) promotes this to the dashboard default; this phase ships
+ * it as a navigable surface so it can be tasted without breaking the
+ * existing dashboard.
+ *
+ * Polling: 5s interval (matches existing /api/tasks polling cadence).
+ * SSE upgrade is a v0.6.x patch.
+ */
+export const THREAD_HTML = `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>codehere · Threads</title>
+<style>
+${SHARED_STYLES}
+  * { box-sizing: border-box; }
+  html, body { height: 100%; }
+  body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 13px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
+
+  /* ── Floating nav (matches dashboard exactly) ───────────────────────── */
+  .floating-nav {
+    position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
+    z-index: 100;
+    display: flex; align-items: center; gap: 4px;
+    padding: 6px 10px;
+    background: rgba(20,20,22,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    font-family: var(--mono); font-size: 11.5px;
+  }
+  .floating-nav .logo { color: var(--accent); padding: 4px 10px; text-decoration: none; }
+  .floating-nav .nav-link {
+    color: var(--fg-50); padding: 4px 10px; border-radius: 999px;
+    text-decoration: none;
+  }
+  .floating-nav .nav-link:hover { color: var(--fg); background: rgba(255,255,255,0.05); }
+  .floating-nav .nav-link.active { color: var(--fg); background: rgba(255,154,118,0.10); }
+
+  /* ── Slack-shape shell (3-column — channels | thread | members) ─────── */
+  .shell.slack-shape {
+    max-width: 1440px;
+    margin: 90px auto 24px;
+    padding: 0 24px;
+    display: grid;
+    grid-template-columns: 200px 1fr 220px;
+    gap: 16px;
+    align-items: start;
+  }
+  @media (max-width: 1100px) {
+    .shell.slack-shape { grid-template-columns: 1fr; }
+    .shell.slack-shape .channels-pane, .shell.slack-shape .members-pane {
+      position: static; order: 99;
+    }
+  }
+  .channels-pane, .members-pane {
+    background: rgba(255,255,255,0.025);
+    border: 1px solid var(--border-soft);
+    border-radius: 10px;
+    padding: 14px 12px;
+    position: sticky; top: 88px;
+    font-family: var(--mono);
+    z-index: 1;
+  }
+  .pane-head {
+    font-size: 9.5px; letter-spacing: 0.16em;
+    color: var(--fg-30); margin-bottom: 10px;
+    text-transform: uppercase;
+    display: flex; align-items: center; justify-content: space-between;
+  }
+  .pane-head .pane-count { color: var(--fg-50); }
+  .channel, .member {
+    display: flex; align-items: center; gap: 8px;
+    padding: 6px 8px; border-radius: 6px;
+    font-size: 11.5px;
+    cursor: pointer;
+    color: var(--fg-70);
+    border: 1px solid transparent;
+    margin-bottom: 2px;
+  }
+  .channel:hover, .member:hover { background: rgba(255,255,255,0.04); color: var(--fg); }
+  .channel.active { background: rgba(255,154,118,0.08); color: var(--fg); border-color: rgba(255,154,118,0.25); }
+  .channel-glyph, .member-presence {
+    color: var(--fg-40); flex: 0 0 14px; text-align: center;
+  }
+  .member-presence.ready { color: var(--allow); }
+  .member-presence.warn { color: var(--warn); }
+  .member-presence.offline { color: var(--fg-30); }
+  .channel-name, .member-label {
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    flex: 1; min-width: 0;
+  }
+  .member-cwd-hint, .channel-cwd-hint {
+    font-size: 9.5px; color: var(--fg-30);
+    margin-top: 4px; padding-left: 22px;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .pane-empty {
+    color: var(--fg-30); font-size: 10.5px;
+    padding: 8px; text-align: center;
+  }
+
+  /* ── Thread pane (center) ───────────────────────────────────────────── */
+  .thread-pane { min-width: 0; }
+
+  .meta-panel {
+    border: 1px solid var(--border); background: rgba(255,255,255,0.02);
+    border-radius: 10px; padding: 18px 20px; margin-bottom: 16px;
+  }
+  .meta-panel h1 {
+    font-size: 22px; font-weight: 600; color: var(--fg);
+    margin: 0 0 6px 0; line-height: 1.3;
+  }
+  .meta-panel h1.untitled { color: var(--fg-40); font-style: italic; font-weight: 400; }
+  .meta-panel .cwd {
+    font-family: var(--mono); font-size: 11px; color: var(--fg-50);
+    margin-bottom: 12px; word-break: break-all;
+  }
+  .meta-panel .stats {
+    display: flex; gap: 22px; font-family: var(--mono); font-size: 11px; color: var(--fg-50);
+    flex-wrap: wrap;
+  }
+  .meta-panel .stats .stat { display: flex; gap: 6px; }
+  .meta-panel .stats .stat .label { color: var(--fg-40); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; }
+  .meta-panel .stats .stat .val { color: var(--fg); font-weight: 600; }
+
+  .section-label {
+    padding: 8px 4px;
+    font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
+    color: var(--fg-40); text-transform: uppercase;
+  }
+
+  /* ── Task entries ───────────────────────────────────────────────────── */
+  .task {
+    border: 1px solid var(--border); background: rgba(255,255,255,0.015);
+    border-radius: 8px; padding: 14px 16px; margin-bottom: 10px;
+  }
+  .task .row1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
+  .task .agent {
+    font-family: var(--mono); font-size: 10px; padding: 2px 8px; border-radius: 10px;
+    background: rgba(120, 180, 255, 0.10); color: #9bbfff; border: 1px solid rgba(120, 180, 255, 0.18);
+  }
+  .task .status {
+    font-family: var(--mono); font-size: 10px; padding: 2px 8px; border-radius: 10px;
+    text-transform: uppercase; letter-spacing: 0.05em;
+  }
+  .task .status.completed { background: rgba(40, 200, 64, 0.10); color: var(--allow); border: 1px solid rgba(40, 200, 64, 0.18); }
+  .task .status.running { background: rgba(255, 200, 0, 0.10); color: var(--warn); border: 1px solid rgba(255, 200, 0, 0.18); }
+  .task .status.error, .task .status.failed { background: rgba(220, 60, 60, 0.10); color: var(--block); border: 1px solid rgba(220, 60, 60, 0.18); }
+  .task .status.abandoned { background: rgba(255,255,255,0.04); color: var(--fg-40); border: 1px solid var(--border); }
+  .task .ts { font-family: var(--mono); font-size: 11px; color: var(--fg-40); margin-left: auto; }
+  .task .prompt { color: var(--fg); font-size: 13px; line-height: 1.5; word-wrap: break-word; }
+  .task .duration { font-family: var(--mono); font-size: 11px; color: var(--fg-50); margin-top: 8px; }
+  .task .duration b { color: var(--fg-70); font-weight: 600; }
+  .task .steps { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--border); font-family: var(--mono); font-size: 11px; color: var(--fg-50); }
+  .task .steps .step { padding: 2px 0; }
+  .task .steps .step.done::before { content: '✓ '; color: var(--allow); }
+
+  .empty {
+    text-align: center; padding: 60px 24px; color: var(--fg-50); font-family: var(--mono); font-size: 13px;
+  }
+  .empty .pill {
+    display: inline-block; padding: 6px 12px; border: 1px solid var(--border); border-radius: 16px;
+    margin-bottom: 12px; font-size: 11px;
+  }
+  .empty .hint { font-size: 12px; color: var(--fg-40); }
+  .empty a { color: var(--accent); }
+
+  /* ── Reply bar at thread bottom (Slack-shape) ───────────────────────── */
+  .reply-bar {
+    margin-top: 16px;
+    border: 1px solid var(--border); background: rgba(255,255,255,0.02);
+    border-radius: 10px; padding: 12px 14px;
+  }
+  .reply-bar.disabled { opacity: 0.6; }
+  .reply-bar .reply-label {
+    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em;
+    color: var(--fg-40); text-transform: uppercase; margin-bottom: 8px;
+  }
+  .reply-bar textarea {
+    width: 100%; min-height: 60px; padding: 10px 12px;
+    background: var(--bg-2); color: var(--fg); border: 1px solid var(--border);
+    border-radius: 6px; font-family: var(--sans); font-size: 13px; line-height: 1.5;
+    resize: vertical; outline: none;
+  }
+  .reply-bar textarea:focus { border-color: var(--accent); }
+  .reply-bar textarea::placeholder { color: var(--fg-30); }
+  .reply-bar .row {
+    display: flex; align-items: center; justify-content: space-between; gap: 12px;
+    margin-top: 8px;
+  }
+  .reply-bar .hint { font-family: var(--mono); font-size: 11px; color: var(--fg-40); }
+  .reply-bar button {
+    background: rgba(255,154,118,0.10); color: var(--accent); border: 1px solid rgba(255,154,118,0.3);
+    padding: 6px 16px; border-radius: 6px; font-family: var(--mono); font-size: 12px; cursor: pointer;
+  }
+  .reply-bar button:hover { background: rgba(255,154,118,0.18); }
+  .reply-bar button:disabled { opacity: 0.4; cursor: default; }
+  .reply-bar .status { font-family: var(--mono); font-size: 11px; color: var(--fg-50); margin-top: 8px; }
+  .reply-bar .status.error { color: var(--block); }
+
+  code { font-family: var(--mono); background: rgba(255,255,255,0.05); padding: 1px 6px; border-radius: 4px; }
+</style>
+</head>
+<body>
+<nav class="floating-nav">
+  <a href="/" class="logo">codehere</a>
+  <a href="/" class="nav-link">Tasks</a>
+  <a href="/threads" class="nav-link active">Threads</a>
+  <a href="/history" class="nav-link">History</a>
+</nav>
+
+<div class="shell slack-shape">
+
+<aside class="channels-pane">
+  <div class="pane-head"><span>Projects</span><span class="pane-count" id="projects-count">0</span></div>
+  <div id="projects-list"><div class="pane-empty">Loading…</div></div>
+</aside>
+
+<section class="thread-pane">
+  <div id="thread-container"><div class="empty"><div class="pill">No project selected</div></div></div>
+
+  <!-- v0.6.0 Slice 4 — single reply input at thread bottom (Slack-shape).
+       Routes to the LAST task's session in the thread via POST /api/task/<lastSessionId>/message. -->
+  <div class="reply-bar disabled" id="reply-bar" style="display:none">
+    <div class="reply-label">Reply to thread</div>
+    <textarea id="reply-text" placeholder="Reply to this thread… (Cmd+Enter / Ctrl+Enter to send)" rows="2" disabled></textarea>
+    <div class="row">
+      <span class="hint" id="reply-hint">No active session — spawn a task first</span>
+      <button type="button" id="reply-send" disabled>Send</button>
+    </div>
+    <div class="status" id="reply-status" style="display:none"></div>
+  </div>
+</section>
+
+<aside class="members-pane">
+  <div class="pane-head"><span>Agents</span><span class="pane-count" id="agents-count">0</span></div>
+  <div id="agents-list"><div class="pane-empty">Loading…</div></div>
+</aside>
+
+</div>
+
+<script>
+(function () {
+  const projectsList = document.getElementById('projects-list');
+  const projectsCount = document.getElementById('projects-count');
+  const agentsList = document.getElementById('agents-list');
+  const agentsCount = document.getElementById('agents-count');
+  const container = document.getElementById('thread-container');
+  const replyBar = document.getElementById('reply-bar');
+  const replyText = document.getElementById('reply-text');
+  const replySend = document.getElementById('reply-send');
+  const replyHint = document.getElementById('reply-hint');
+  const replyStatus = document.getElementById('reply-status');
+
+  let currentSlug = null;
+  let lastSessionId = null;
+
+  function escapeHtml(s) {
+    return String(s == null ? '' : s)
+      .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+  }
+  function timeAgo(ts) {
+    if (!ts) return '';
+    const s = Math.max(0, Math.floor((Date.now() - ts) / 1000));
+    if (s < 60) return s + 's ago';
+    if (s < 3600) return Math.floor(s / 60) + 'm ago';
+    if (s < 86400) return Math.floor(s / 3600) + 'h ago';
+    return Math.floor(s / 86400) + 'd ago';
+  }
+  function fmtTime(ts) {
+    if (!ts) return '';
+    const d = new Date(ts);
+    return d.toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+  }
+  function fmtDuration(ms) {
+    if (ms == null) return '';
+    if (ms < 1000) return ms + 'ms';
+    if (ms < 60000) return (ms / 1000).toFixed(1) + 's';
+    return Math.floor(ms / 60000) + 'm ' + Math.floor((ms % 60000) / 1000) + 's';
+  }
+  function shortPath(p) {
+    if (!p) return '~';
+    const parts = p.split('/');
+    return parts.length <= 3 ? p : '…/' + parts.slice(-2).join('/');
+  }
+
+  function setReplyState(sessionId, agent) {
+    lastSessionId = sessionId;
+    if (sessionId) {
+      replyBar.style.display = 'block';
+      replyBar.classList.remove('disabled');
+      replyText.disabled = false;
+      replySend.disabled = false;
+      replyHint.textContent = 'Replying to last task (' + (agent || 'unknown') + ')';
+    } else {
+      replyBar.style.display = 'block';
+      replyBar.classList.add('disabled');
+      replyText.disabled = true;
+      replySend.disabled = true;
+      replyHint.textContent = 'No active session — spawn a task first';
+    }
+  }
+
+  async function sendReply() {
+    const text = (replyText.value || '').trim();
+    if (!text || !lastSessionId) return;
+    replySend.disabled = true;
+    replySend.textContent = '…';
+    replyStatus.style.display = 'none';
+    replyStatus.classList.remove('error');
+    try {
+      const r = await fetch('/api/task/' + encodeURIComponent(lastSessionId) + '/message', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text }),
+      });
+      if (!r.ok) {
+        const data = await r.json().catch(() => ({}));
+        throw new Error(data.error || ('HTTP ' + r.status));
+      }
+      const data = await r.json();
+      replyText.value = '';
+      replyStatus.style.display = 'block';
+      replyStatus.textContent = 'Reply sent in ' + fmtDuration(data.durationMs) + ' — refreshing thread…';
+      if (currentSlug) loadThread(currentSlug);
+    } catch (err) {
+      replyStatus.style.display = 'block';
+      replyStatus.classList.add('error');
+      replyStatus.textContent = 'Send failed: ' + (err && err.message ? err.message : err);
+    } finally {
+      replySend.disabled = false;
+      replySend.textContent = 'Send';
+    }
+  }
+
+  replySend.addEventListener('click', sendReply);
+  replyText.addEventListener('keydown', (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') { e.preventDefault(); sendReply(); }
+  });
+
+  function renderThread(thread) {
+    if (!thread) {
+      container.innerHTML = '<div class="empty"><div class="pill">Project not found</div></div>';
+      setReplyState(null, null);
+      return;
+    }
+    const titleHtml = thread.title
+      ? '<h1>' + escapeHtml(thread.title) + '</h1>'
+      : '<h1 class="untitled">(untitled — Title agent will name this on first new spawn)</h1>';
+    const cwdHtml = thread.cwd ? '<div class="cwd">' + escapeHtml(thread.cwd) + '</div>' : '';
+    const lastActivity = thread.lastActivityAt ? fmtTime(thread.lastActivityAt) + ' · ' + timeAgo(thread.lastActivityAt) : '—';
+
+    let html = '<div class="meta-panel">' +
+      titleHtml +
+      cwdHtml +
+      '<div class="stats">' +
+        '<div class="stat"><span class="label">Tasks</span> <span class="val">' + thread.taskCount + '</span></div>' +
+        '<div class="stat"><span class="label">Last activity</span> <span class="val">' + escapeHtml(lastActivity) + '</span></div>' +
+        '<div class="stat"><span class="label">Slug</span> <span class="val">' + escapeHtml(thread.slug) + '</span></div>' +
+      '</div>' +
+    '</div>';
+
+    if (!thread.tasks || thread.tasks.length === 0) {
+      html += '<div class="empty"><div class="pill">No tasks yet</div><div class="hint">Spawn one from the <a href="/">Tasks</a> page.</div></div>';
+      container.innerHTML = html;
+      setReplyState(null, null);
+      return;
+    }
+
+    html += '<div class="section-label">Thread · ' + thread.tasks.length + ' turn' + (thread.tasks.length === 1 ? '' : 's') + '</div>';
+
+    for (const t of thread.tasks) {
+      const status = (t.status || '').toLowerCase();
+      const stepsHtml = (t.steps && t.steps.length)
+        ? '<div class="steps">' + t.steps.map(s => '<div class="step ' + escapeHtml((s.state||'').toLowerCase()) + '">' + escapeHtml(s.label || '') + '</div>').join('') + '</div>'
+        : '';
+      const durHtml = (t.durationMs != null)
+        ? '<div class="duration">Duration: <b>' + fmtDuration(t.durationMs) + '</b></div>'
+        : (status === 'running' ? '<div class="duration">Running…</div>' : '');
+
+      html += '<div class="task">' +
+        '<div class="row1">' +
+          '<span class="agent">' + escapeHtml(t.agent || 'unknown') + '</span>' +
+          '<span class="status ' + escapeHtml(status) + '">' + escapeHtml(status || 'unknown') + '</span>' +
+          '<span class="ts">' + escapeHtml(fmtTime(t.startedAt)) + ' · ' + escapeHtml(timeAgo(t.startedAt)) + '</span>' +
+        '</div>' +
+        '<div class="prompt">' + escapeHtml(t.prompt || '(no prompt)') + '</div>' +
+        durHtml +
+        stepsHtml +
+      '</div>';
+    }
+    container.innerHTML = html;
+    const lastTask = thread.tasks[thread.tasks.length - 1];
+    setReplyState(lastTask.sessionId, lastTask.agent);
+  }
+
+  function renderProjects(list) {
+    projectsCount.textContent = String(list.length);
+    if (list.length === 0) {
+      projectsList.innerHTML = '<div class="pane-empty">No projects yet</div>';
+      return;
+    }
+    projectsList.innerHTML = list.map(p => {
+      const active = p.slug === currentSlug ? ' active' : '';
+      const name = escapeHtml(p.title || '(untitled)');
+      const cwdHint = escapeHtml(shortPath(p.cwd));
+      return '<div class="channel' + active + '" data-slug="' + escapeHtml(p.slug) + '">' +
+        '<span class="channel-glyph">#</span>' +
+        '<div style="flex:1;min-width:0">' +
+          '<div class="channel-name">' + name + '</div>' +
+          '<div class="channel-cwd-hint">' + cwdHint + '</div>' +
+        '</div>' +
+      '</div>';
+    }).join('');
+    projectsList.querySelectorAll('.channel').forEach(el => {
+      el.addEventListener('click', () => {
+        const slug = el.getAttribute('data-slug');
+        if (!slug || slug === currentSlug) return;
+        currentSlug = slug;
+        renderProjects(list); // re-highlight active
+        loadThread(slug);
+        const url = new URL(window.location.href);
+        url.searchParams.set('project', slug);
+        history.replaceState(null, '', url.toString());
+      });
+    });
+  }
+
+  function presenceClass(state) {
+    if (state === 'ready') return 'ready';
+    if (state === 'needs_install' || state === 'needs_auth' || state === 'billed_key_required') return 'warn';
+    return 'offline';
+  }
+
+  function renderAgents(adapters) {
+    agentsCount.textContent = String(adapters.length);
+    agentsList.innerHTML = adapters.map(a => {
+      const cls = presenceClass(a.state);
+      return '<div class="member">' +
+        '<span class="member-presence ' + cls + '">●</span>' +
+        '<span class="member-label">' + escapeHtml(a.label || a.id) + '</span>' +
+      '</div>';
+    }).join('');
+  }
+
+  function loadThread(slug) {
+    if (!slug) { container.innerHTML = '<div class="empty"><div class="pill">No project selected</div></div>'; setReplyState(null, null); return; }
+    fetch('/api/projects/' + encodeURIComponent(slug))
+      .then(r => r.ok ? r.json() : Promise.reject(r.status))
+      .then(data => renderThread(data.thread))
+      .catch(err => { container.innerHTML = '<div class="empty"><div class="pill">Load error: ' + escapeHtml(String(err)) + '</div></div>'; });
+  }
+
+  function loadProjects() {
+    fetch('/api/projects')
+      .then(r => r.ok ? r.json() : Promise.reject(r.status))
+      .then(data => {
+        const list = data.projects || [];
+        renderProjects(list);
+        if (list.length > 0 && !currentSlug) {
+          const urlSlug = new URLSearchParams(window.location.search).get('project');
+          const slugToUse = (urlSlug && list.some(p => p.slug === urlSlug)) ? urlSlug : list[0].slug;
+          currentSlug = slugToUse;
+          renderProjects(list);
+          loadThread(slugToUse);
+        } else if (list.length === 0) {
+          container.innerHTML = '<div class="empty"><div class="pill">No projects yet</div><div class="hint">Spawn a task from the <a href="/">Tasks</a> page — it will appear here as a project thread.</div></div>';
+          setReplyState(null, null);
+        }
+      })
+      .catch(() => {});
+  }
+
+  function loadAgents() {
+    fetch('/api/readiness/agents')
+      .then(r => r.ok ? r.json() : Promise.reject(r.status))
+      .then(data => renderAgents(data.agents || []))
+      .catch(() => {});
+  }
+
+  loadProjects();
+  loadAgents();
+  setInterval(() => {
+    if (currentSlug) loadThread(currentSlug);
+    if (Math.random() < 0.25) { loadProjects(); loadAgents(); }
+  }, 5000);
+})();
+</script>
+</body>
+</html>`;
 //# sourceMappingURL=ui-page.js.map