codehere 0.5.0-alpha.4 → 0.5.0-alpha.6

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

@@ -513,13 +513,16 @@ ${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>
-  </span>
 </nav>
 
-<div class="tagline" style="margin-top:90px">One feed. Every agent. Every action.</div>
+<div class="tagline" style="margin-top:90px">
+  One feed. Every agent. Every action.
+  <span class="conn-inline" style="margin-left:12px;font-family:var(--mono);font-size:10px;color:var(--fg-40);">
+    <span id="live-dot" class="dot"></span><span id="conn">connecting</span>
+  </span>
+</div>
 
 <div class="status">
   <div class="stat">
@@ -864,6 +867,17 @@ ${SHARED_STYLES}
   }
   .intake button.spawn:hover { filter: brightness(1.05); }
   .intake button.spawn[disabled] { opacity: 0.45; cursor: default; }
+  /* v0.6.x Slack-shape spike — alternative submit that routes the prompt as a
+     reply to the most-recent task in the current cwd, exercising the existing
+     appendMessage path. Lets a single intake feel like an ongoing conversation
+     when the user wants continuity, while preserving "Assign" as the explicit
+     new-task path. Disabled when no thread exists for the current cwd. */
+  .intake button.continue-thread {
+    background: rgba(255,154,118,0.10); color: var(--accent); font-weight: 600;
+    border-color: rgba(255,154,118,0.3);
+  }
+  .intake button.continue-thread:hover:not([disabled]) { background: rgba(255,154,118,0.18); }
+  .intake button.continue-thread[disabled] { opacity: 0.4; cursor: default; }
   .intake .hint { margin-left: auto; color: var(--fg-40); font-family: var(--mono); font-size: 11px; }
 
   /* ── Setup panel (onboarding — appears when a non-ready agent is picked) ───
@@ -1196,6 +1210,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>
 
@@ -1231,11 +1246,12 @@ ${SHARED_STYLES}
   <div class="intake-row">
     <select id="agent" title="Auto-pick agent · codehere routes. Override below."><option value="">Auto-pick agent</option></select>
     <input type="text" id="cwd" class="cwd" placeholder="folder" spellcheck="false" />
-    <button class="spawn" id="spawn">Assign</button>
+    <button class="continue-thread" id="continue-thread" type="button" disabled title="Send as a reply to the most recent task in this folder (Slack-shape spike)">Continue thread</button>
+    <button class="spawn" id="spawn">Assign new</button>
   </div>
   <div class="setup-panel" id="setup-panel" data-state=""></div>
   <div class="intake-row" style="margin-top:6px">
-    <span class="hint" style="margin-left:auto">⌘ + Enter</span>
+    <span class="hint" style="margin-left:auto">⌘+Enter = Assign new · ⌘+Shift+Enter = Continue thread</span>
   </div>
 </div>
 
@@ -1839,7 +1855,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 {
@@ -2079,13 +2099,22 @@ ${SHARED_STYLES}
     // Iter 12 — prose summary (3 paragraphs, plain English) prepended above
     // the artifact list. Non-technical users see prose first; raw artifact
     // detail (files/tests/tokens) below as supporting context.
-    function renderArtifacts(artifacts, finalReport, status) {
+    function renderArtifacts(artifacts, finalReport, status, completedAt) {
       // Show the block if either prose summary OR artifacts exist OR if a
       // completed task is still generating its report (placeholder state).
       const isCompleted = status === 'completed' || status === 'killed' || status === 'error';
       const hasContent = artifacts || finalReport;
-      const isAwaitingReport = isCompleted && !finalReport;
-      if (!hasContent && !isAwaitingReport) { finalReportEl.style.display = 'none'; return; }
+      // v0.6.x — bound the "Generating report…" placeholder to the actual
+      // generation window. Final Report typically returns within 30s; after
+      // 90s post-completion with no report, the report either failed silently
+      // or the daemon was restarted (in-memory finalReportBySession Map gets
+      // wiped). Either way, "Generating report…" forever is dishonest.
+      const REPORT_WAIT_BUDGET_MS = 90_000;
+      const sinceCompleted = completedAt ? Date.now() - completedAt : 0;
+      const stillWaitingForReport = isCompleted && !finalReport && sinceCompleted < REPORT_WAIT_BUDGET_MS;
+      const reportTimedOut = isCompleted && !finalReport && sinceCompleted >= REPORT_WAIT_BUDGET_MS;
+      const isAwaitingReport = stillWaitingForReport;
+      if (!hasContent && !isAwaitingReport && !reportTimedOut) { finalReportEl.style.display = 'none'; return; }
       finalReportEl.style.display = 'block';
       const files = Array.isArray(artifacts?.files) ? artifacts.files : [];
       const tests = artifacts?.tests;
@@ -2100,10 +2129,13 @@ ${SHARED_STYLES}
           paragraphs.map(p => '<p>' + escape(p.trim()) + '</p>').join('') +
           '</div>';
       } else if (isAwaitingReport) {
-        // Placeholder — task done, report still generating (or provider failed silently).
-        // After ~30s with no report, the placeholder persists. Iter 13 will replace
-        // with explicit "report unavailable — start FCC proxy or set ANTHROPIC_API_KEY".
         html += '<div class="fr-summary fr-summary-pending"><p>Generating report…</p></div>';
+      } else if (reportTimedOut) {
+        // Honest message instead of perpetual "Generating report…". Most
+        // common cause: daemon restarted (Final Report is in-memory only,
+        // doesn't persist to disk yet — v0.6.x cleanup item). Less common:
+        // the report provider (claude-free / claude) failed silently.
+        html += '<div class="fr-summary fr-summary-pending"><p>Final Report unavailable for this session. (Most often this means the daemon restarted — reports aren\\'t persisted yet. Re-spawn to get a fresh one.)</p></div>';
       }
       if (files.length > 0) {
         html += '<div class="fr-files">' + files.map(f => {
@@ -2141,7 +2173,7 @@ ${SHARED_STYLES}
     // Render Final Report block if there's anything to show (prose summary,
     // artifacts, or "generating…" placeholder for a freshly-completed session).
     if (session.artifacts || session.finalReport || session.status === 'completed' || session.status === 'killed' || session.status === 'error') {
-      renderArtifacts(session.artifacts, session.finalReport, session.status);
+      renderArtifacts(session.artifacts, session.finalReport, session.status, session.completedAt);
     }
 
     // Persisted sessions have no live event stream and no subprocess to kill.
@@ -2158,7 +2190,7 @@ ${SHARED_STYLES}
 
         // Layer 2/3 synthetic events — handle before renderEvent (so they don't leak into the raw log)
         if (event.type === 'codehere:steps') { renderSteps(event.data?.steps); return; }
-        if (event.type === 'codehere:artifacts') { renderArtifacts(event.data, undefined, session.status); return; }
+        if (event.type === 'codehere:artifacts') { renderArtifacts(event.data, undefined, session.status, session.completedAt); return; }
 
         // Any structured error flips the status pill immediately — don't wait for
         // the subprocess to exit. Many CLIs print a logical error to stdout and
@@ -2228,10 +2260,95 @@ ${SHARED_STYLES}
   }
 
   spawnBtn.addEventListener('click', assignTask);
+
+  // v0.6.x Slack-shape spike — Continue thread button + Cmd+Shift+Enter.
+  // Routes the prompt as a reply to the most recent in-memory session for
+  // the current cwd via the existing /api/task/:id/message endpoint.
+  // Disabled when no eligible session exists; auto-refresh state every 5s
+  // alongside the existing tasks polling.
+  const continueBtn = document.getElementById('continue-thread');
+  let continueTargetSessionId = null;
+
+  function findContinueTarget(spawnedList, cwd) {
+    if (!cwd) return null;
+    const eligible = (spawnedList || []).filter(s => s.cwd === cwd && s.canAppendMessage === true);
+    if (eligible.length === 0) return null;
+    eligible.sort((a, b) => b.startedAt - a.startedAt);
+    return eligible[0];
+  }
+
+  function refreshContinueAvailability() {
+    const cwd = cwdInput.value.trim();
+    if (!cwd) {
+      continueTargetSessionId = null;
+      continueBtn.disabled = true;
+      continueBtn.title = 'Set a folder first to continue its thread';
+      return;
+    }
+    fetch('/api/tasks').then(r => r.json()).then(d => {
+      const target = findContinueTarget(d.spawned, cwd);
+      if (target) {
+        continueTargetSessionId = target.sessionId;
+        continueBtn.disabled = false;
+        const promptPreview = (target.prompt || '').slice(0, 40);
+        continueBtn.title = 'Reply to last task in this folder: "' + promptPreview + (target.prompt && target.prompt.length > 40 ? '…' : '') + '" (' + target.agent + ')';
+      } else {
+        continueTargetSessionId = null;
+        continueBtn.disabled = true;
+        continueBtn.title = 'No live session for this folder. Use Assign new instead.';
+      }
+    }).catch(() => {});
+  }
+
+  async function continueThread() {
+    const prompt = promptEl.value.trim();
+    if (!prompt) return;
+    if (!continueTargetSessionId) { alert('No live session for this folder. Use Assign new instead.'); return; }
+    const targetId = continueTargetSessionId;
+    continueBtn.disabled = true;
+    const originalText = continueBtn.textContent;
+    continueBtn.textContent = '...';
+    try {
+      const res = await fetch('/api/task/' + encodeURIComponent(targetId) + '/message', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text: prompt }),
+      });
+      const data = await res.json();
+      if (!res.ok) { alert('Failed: ' + (data.error || res.status)); return; }
+      promptEl.value = '';
+      // Scroll the existing card into view; existing 5s polling refreshes content.
+      const card = document.querySelector('[data-session-id="' + targetId + '"]');
+      if (card) card.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    } catch (e) {
+      alert('Network error: ' + (e && e.message ? e.message : e));
+    } finally {
+      continueBtn.disabled = false;
+      continueBtn.textContent = originalText;
+      // Re-check availability (target may have settled differently)
+      refreshContinueAvailability();
+    }
+  }
+
+  continueBtn.addEventListener('click', continueThread);
+  cwdInput.addEventListener('input', refreshContinueAvailability);
+  cwdInput.addEventListener('change', refreshContinueAvailability);
+
   promptEl.addEventListener('keydown', (e) => {
-    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') { e.preventDefault(); assignTask(); }
+    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+      e.preventDefault();
+      if (e.shiftKey) {
+        continueThread();
+      } else {
+        assignTask();
+      }
+    }
   });
 
+  // Refresh continue-target availability alongside the existing tasks polling
+  setInterval(refreshContinueAvailability, 5000);
+  refreshContinueAvailability();
+
   // ── Observed sessions (F1d) ──────────────────────────────────────────
   function shortId(id) { return String(id || '').slice(0, 8); }
 
@@ -2365,7 +2482,7 @@ ${SHARED_STYLES}
       for (const s of (d.spawned || d.sessions || [])) {
         const entry = sessions.get(s.sessionId);
         if (entry && entry.renderArtifacts) {
-          entry.renderArtifacts(s.artifacts, s.finalReport, s.status);
+          entry.renderArtifacts(s.artifacts, s.finalReport, s.status, s.completedAt);
         }
       }
     }).catch(() => { /* fine */ });
@@ -2410,4 +2527,486 @@ ${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 inherits from SHARED_STYLES (no override here — keeps the
+     active-state look identical to / and /history. Founder caught
+     2026-05-03 that the local override gave /threads a different orange-bg
+     active state, fragmenting the design system across pages.) */
+
+  /* ── 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