codehere 0.5.0-alpha.4 → 0.5.0-alpha.5

package/dist/infrastructure/protocols/mcp-server-impl.js

@@ -25,9 +25,11 @@ import { fileURLToPath } from 'url';
 import { collectFilesForMCP, scoreFileForMCP } from './mcp-helpers.js';
 import { scanPayload, calculateRiskScore, AUDIT_FILE } from '../hooks/claude-sdk-hook.js';
 import { getVersion } from '../../utils/version.js';
-import { TASK_HTML, HISTORY_HTML } from './ui-page.js';
+import { TASK_HTML, HISTORY_HTML, THREAD_HTML } from './ui-page.js';
 import { SessionManager, availableAgents, readinessForAllAgents, getAdapter, allAdapters, } from '../orchestration/session-manager.js';
 import { isAbsolute } from 'path';
+import { readCrossToolAgents } from '../storage/cross-tool-agents.js';
+import { listProjects, readProjectThread } from '../storage/project-thread-reader.js';
 import { installAgent } from '../orchestration/agent-installer.js';
 import { detectReadiness } from '../orchestration/readiness.js';
 // ── Tool definitions ─────────────────────────────────────────────────────────
@@ -81,6 +83,28 @@ const TOOLS = [
 // ── Tool handlers ────────────────────────────────────────────────────────────
 import { homedir } from 'os';
 const AUDIT_FILE_PATH = join(homedir(), '.codehere', 'audit', 'hook-events.jsonl');
+/**
+ * Dev-only behavior-observer injection (v0.6.0 — elu joined the team roster
+ * 2026-05-03 as behavior reviewer). Activated only when CODEHERE_DEV_ELU=1
+ * is set in the founder's local env; never in shipped releases. The script's
+ * public key is meant for client-side embedding (analytics tracking key, not
+ * a secret) so committing the URL is safe.
+ *
+ * Why runtime injection instead of editing TASK_HTML/HISTORY_HTML directly:
+ * the templates stay identical between dev and release builds. The only
+ * delta is the env var. This keeps the release surface clean (zero-telemetry
+ * value per PRD §1.5 #2 stays intact) while letting elu observe founder
+ * dogfood sessions.
+ *
+ * Removal trigger lives in team_roster.md memory: if elu produces zero
+ * unique findings within one month, remove this helper + roster entry.
+ */
+const ELU_DEV_SCRIPT = '<script async src="https://elu.dev/v1/elu_pk_live_HrKo9yFFLx03tz9xuSKFcE2Jpv.js"></script>';
+function withDevElu(html) {
+    if (process.env.CODEHERE_DEV_ELU !== '1')
+        return html;
+    return html.replace('</head>', `${ELU_DEV_SCRIPT}\n</head>`);
+}
 function handleTrust(params) {
     const { filepath, code, verbose } = params;
     let content;
@@ -270,13 +294,19 @@ export function startMCPServer(options = {}) {
         // v0.3 primary UI: task intake + active sessions
         if (req.method === 'GET' && (req.url === '/' || req.url === '/index.html')) {
             res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
-            res.end(TASK_HTML);
+            res.end(withDevElu(TASK_HTML));
             return;
         }
         // History / audit feed (what we built Day 0; now secondary)
         if (req.method === 'GET' && (req.url === '/history' || req.url === '/history/')) {
             res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
-            res.end(HISTORY_HTML);
+            res.end(withDevElu(HISTORY_HTML));
+            return;
+        }
+        // v0.6.0 M1 — project thread view; consumes /api/projects + /api/projects/:slug
+        if (req.method === 'GET' && (req.url === '/threads' || req.url === '/threads/' || req.url?.startsWith('/threads?'))) {
+            res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+            res.end(withDevElu(THREAD_HTML));
             return;
         }
         // Backwards-compat: /ui used to be the Mission Control audit view — now at /history
@@ -453,8 +483,28 @@ export function startMCPServer(options = {}) {
                 const all = readinessForAllAgents();
                 const auto = all.find((a) => a.id === 'conductor');
                 const agents = all.filter((a) => a.id !== 'conductor');
+                // v0.6.0 M8 — surface cross-tool agent definitions (.opencode/agents/,
+                // .claude/agents/, .codehere/agents/) alongside the built-in adapters.
+                // These don't have a `state` (ready/needs_install) — they're definitions
+                // not runtimes. UI can render them as "available specialists" tagged
+                // with their source format. Best-effort: failures fall back to no
+                // cross-tool agents listed.
+                let crossTool = [];
+                try {
+                    const result = readCrossToolAgents(process.cwd());
+                    crossTool = result.agents.map((a) => ({
+                        name: a.name,
+                        description: a.description.length > 240 ? a.description.slice(0, 237) + '…' : a.description,
+                        sourceFormat: a.sourceFormat,
+                        mode: a.mode,
+                        sourcePath: a.sourcePath,
+                    }));
+                }
+                catch {
+                    // best-effort; ignore parse failures
+                }
                 res.writeHead(200, { 'Content-Type': 'application/json' });
-                res.end(JSON.stringify({ agents, auto }));
+                res.end(JSON.stringify({ agents, auto, crossTool }));
             }
             catch (e) {
                 res.writeHead(500, { 'Content-Type': 'application/json' });
@@ -475,6 +525,49 @@ export function startMCPServer(options = {}) {
             }
             return;
         }
+        // ── v0.6.0 M1 project thread routes ──────────────────────────────────────
+        // GET /api/projects           — list all known projects (slug, cwd, title, taskCount, lastActivityAt)
+        // GET /api/projects/:slug     — single project thread (meta + tasks merged by sessionId)
+        // Reader source of truth: ~/.codehere/projects/<slug>/thread.jsonl (per-project append-only log
+        // populated by migration + forward-mirror). Drives the new thread-view UI.
+        if (req.method === 'GET' && req.url === '/api/projects') {
+            try {
+                const projects = listProjects();
+                res.writeHead(200, { 'Content-Type': 'application/json' });
+                res.end(JSON.stringify({ projects }));
+            }
+            catch (e) {
+                res.writeHead(500, { 'Content-Type': 'application/json' });
+                res.end(JSON.stringify({ error: 'list_projects_failed', detail: String(e) }));
+            }
+            return;
+        }
+        if (req.method === 'GET' && req.url?.startsWith('/api/projects/')) {
+            try {
+                // Slug is the segment after /api/projects/. Strip optional query string.
+                const slug = req.url.replace('/api/projects/', '').split('?')[0];
+                // Slug shape is sha1[:12] (12 hex chars) OR the literal 'unknown' bucket.
+                // Reject anything else to keep the surface tight (and stop ../ traversal).
+                if (!/^([a-f0-9]{12}|unknown)$/.test(slug)) {
+                    res.writeHead(400, { 'Content-Type': 'application/json' });
+                    res.end(JSON.stringify({ error: 'invalid_slug' }));
+                    return;
+                }
+                const thread = readProjectThread(slug);
+                if (!thread) {
+                    res.writeHead(404, { 'Content-Type': 'application/json' });
+                    res.end(JSON.stringify({ error: 'project_not_found', slug }));
+                    return;
+                }
+                res.writeHead(200, { 'Content-Type': 'application/json' });
+                res.end(JSON.stringify({ thread }));
+            }
+            catch (e) {
+                res.writeHead(500, { 'Content-Type': 'application/json' });
+                res.end(JSON.stringify({ error: 'read_project_failed', detail: String(e) }));
+            }
+            return;
+        }
         // ── F1 task orchestration routes ─────────────────────────────────────────
         // POST /api/task               — { prompt, cwd? } → { sessionId }
         // GET  /api/tasks              — list all sessions

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>
 
@@ -1839,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 {
@@ -2410,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