codehere 0.4.1 → 0.5.0-alpha.3

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

@@ -253,6 +253,31 @@ const SHARED_STYLES = `
     color: var(--fg-40); text-transform: uppercase; letter-spacing: 0.12em; font-size: 10px;
     margin-bottom: 8px;
   }
+  /* Iter 12 — prose summary block. Plain English for non-technical users.
+     Sans-serif breaks the monospace context so it reads as narrative, not data. */
+  .final-report .fr-summary {
+    font-family: var(--sans);
+    font-size: 13px;
+    line-height: 1.55;
+    color: var(--fg);
+    margin-bottom: 12px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--border-soft);
+  }
+  .final-report .fr-summary p {
+    margin: 0 0 10px 0;
+  }
+  .final-report .fr-summary p:last-child { margin-bottom: 0; }
+  .final-report .fr-summary-pending p {
+    color: var(--fg-50);
+    font-style: italic;
+    animation: shimmer 1.6s linear infinite;
+    background: linear-gradient(90deg, var(--fg-30) 0%, var(--fg-70) 50%, var(--fg-30) 100%);
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
   .final-report .fr-files { display: flex; flex-direction: column; gap: 3px; }
   .final-report .fr-file {
     display: grid;
@@ -696,6 +721,77 @@ ${SHARED_STYLES}
 
   .shell { max-width: 960px; margin: 0 auto; padding: 90px 24px 24px; position: relative; }
 
+  /* ── Apr 29 — Slack-shape 3-pane layout ──────────────────────────────────
+     The app surface restructures from single-column dashboard to
+     channels (left) + threads (center) + members (right). Single
+     channel = current cwd; members = available agents from readiness API.
+     Multi-channel + live presence dots from F1d detection are a later release. */
+  .shell.slack-shape {
+    max-width: 1440px;
+    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); }
+  .pane-add {
+    background: transparent; border: 1px dashed var(--border);
+    color: var(--fg-50); font-family: var(--mono); font-size: 10px;
+    padding: 4px 8px; border-radius: 6px; cursor: pointer;
+    width: 100%; margin-top: 8px;
+  }
+  .pane-add:hover { color: var(--fg); border-color: var(--fg-30); border-style: solid; }
+  .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;
+  }
+  .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;
+  }
+
   /* ── Readiness banner (F1a) ─────────────────────────────────────────── */
   .readiness {
     margin: 12px 0 0;
@@ -973,6 +1069,125 @@ ${SHARED_STYLES}
   .event-log .event.codehere-error .label { color: var(--block); display: block; margin-bottom: 4px; }
   .event-log .event.codehere-error .recovery { color: var(--fg-70); margin-top: 4px; display: block; }
 
+  /* Apr 29 — Slack-shape thread view.
+     Expanded session card defaults to thread view; raw event-log opt-in via
+     the Thread/Log toggle in the card head. Each event becomes a message:
+     user prompt seeds it; agent text/tool/hook events stream in as replies.
+     The reply input is a visual scaffold — wires up as a real follow-up
+     queue in a later release. */
+  .thread-messages {
+    margin: 10px 0 0;
+    display: flex; flex-direction: column; gap: 10px;
+    max-height: 420px; overflow-y: auto;
+    padding-right: 4px;
+  }
+  .thread-message { display: flex; gap: 10px; padding: 6px 0; }
+  .thread-message .avatar {
+    flex: 0 0 28px; height: 28px;
+    border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 13px;
+    background: rgba(255,255,255,0.04); border: 1px solid var(--border-soft);
+  }
+  .thread-message.user .avatar { background: rgba(74,144,226,0.18); border-color: rgba(74,144,226,0.45); }
+  .thread-message.agent .avatar { background: rgba(255,154,118,0.18); border-color: rgba(255,154,118,0.45); }
+  .thread-message.tool .avatar { background: rgba(255,154,118,0.08); }
+  .thread-message.hook .avatar { background: rgba(127,193,154,0.18); border-color: rgba(127,193,154,0.4); }
+  .thread-message.hook.blocked .avatar { background: rgba(255,95,87,0.18); border-color: rgba(255,95,87,0.45); }
+  .thread-message.error .avatar { background: rgba(255,95,87,0.18); border-color: rgba(255,95,87,0.45); }
+  .thread-message .body { flex: 1; min-width: 0; }
+  .thread-message .head { display: flex; gap: 8px; align-items: baseline; font-family: var(--mono); font-size: 10.5px; }
+  .thread-message .author { color: var(--fg); font-weight: 600; }
+  .thread-message .time { color: var(--fg-40); }
+  .thread-message .content {
+    color: var(--fg-80); font-family: var(--mono); font-size: 11.5px;
+    line-height: 1.55; margin-top: 3px; white-space: pre-wrap; word-break: break-word;
+  }
+  .thread-message.tool .content { color: var(--fg-60); }
+  .thread-message.hook .content { color: var(--allow); }
+  .thread-message.hook.blocked .content { color: var(--block); }
+  .thread-message.error .content { color: var(--block); }
+
+  .thread-input {
+    margin-top: 14px;
+    padding: 10px 12px;
+    background: rgba(255,255,255,0.02);
+    border: 1px solid var(--border-soft); border-radius: 8px;
+    color: var(--fg-50); font-size: 11px; font-family: var(--mono);
+    display: flex; align-items: center; gap: 8px;
+  }
+  /* Iter 12 — reply surface now functional. Wraps textarea + send button. */
+  .thread-input { padding: 8px; flex-direction: column; align-items: stretch; gap: 6px; }
+  .thread-input::before { display: none; }
+  .thread-input .reply-text {
+    width: 100%; min-height: 38px; resize: vertical;
+    background: transparent; border: 0; outline: none;
+    color: var(--fg); font-family: var(--sans); font-size: 12px; line-height: 1.5;
+    padding: 4px 0;
+  }
+  .thread-input .reply-text::placeholder { color: var(--fg-30); }
+  .thread-input .reply-send {
+    align-self: flex-end;
+    padding: 5px 14px; border-radius: 6px;
+    background: var(--accent-wash); color: var(--accent);
+    border: 1px solid rgba(255,154,118,0.25);
+    font-family: var(--sans); font-size: 11px; font-weight: 600;
+    cursor: pointer;
+  }
+  .thread-input .reply-send:hover { background: rgba(255,154,118,0.18); }
+  .thread-input .reply-send:disabled { opacity: 0.4; cursor: default; }
+  .thread-input .reply-status { color: var(--fg-50); font-size: 10px; font-family: var(--mono); }
+  .thread-input .reply-status.error { color: var(--block); }
+  .thread-input.disabled .reply-text,
+  .thread-input.disabled .reply-send { opacity: 0.5; cursor: not-allowed; }
+
+  .view-toggle {
+    display: inline-flex; gap: 0;
+    border: 1px solid var(--border-soft); border-radius: 6px;
+    overflow: hidden;
+    margin-right: 8px;
+  }
+  .view-toggle button {
+    background: transparent; border: 0;
+    color: var(--fg-60); padding: 3px 9px;
+    font-family: var(--mono); font-size: 10px;
+    cursor: pointer;
+  }
+  .view-toggle button.active { color: var(--fg); background: rgba(255,255,255,0.06); }
+  .view-toggle button:hover { color: var(--fg); }
+
+  /* Toggle visibility based on data-view attribute on session-body */
+  .session-body[data-view="thread"] .event-log { display: none; }
+  .session-body[data-view="raw"] .thread-messages { display: none; }
+  .session-body[data-view="raw"] .thread-input { display: none; }
+
+  /* Apr 29 — UX overhaul: collapsed single-line stats row (replaces stacked
+     audit-summary + status-banner). Sits BELOW the intake, not above. Muted
+     so it doesn't compete with the H1 / textarea for eye attention. */
+  .stats-line {
+    margin: 14px 0 0;
+    font-family: var(--mono); font-size: 10.5px; color: var(--fg-40);
+    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
+  }
+  .stats-line b { color: var(--fg-70); font-weight: 500; }
+  .stats-line .sep { color: var(--fg-20); }
+  .stats-line .blocked b { color: var(--block); }
+  .stats-line.empty { display: none; }
+
+  /* Apr 29 — UX overhaul: readiness banner is now compact + below intake.
+     Was: full-width yellow box with multi-line prose above the H1.
+     Is: tighter padding, single-line preferred, sits as a subtle hint below
+     the assign action. The detail text wraps when long but contrast is muted. */
+  .readiness { margin-top: 14px; padding: 10px 12px; }
+  .readiness .r-title { font-size: 11px; }
+  .readiness .r-detail { font-size: 10.5px; }
+  .readiness .r-action { margin-top: 6px; }
+
+  /* Apr 29 — UX overhaul: TRY chips fade out as soon as the user starts
+     typing. They're a discovery aid for first-visit users, not a permanent
+     fixture above an active textarea. */
+  .starter-prompts.dim { opacity: 0.35; pointer-events: none; transition: opacity 200ms ease; }
+
   #empty { padding: 48px 0; text-align: center; color: var(--fg-50); }
   #empty .pill { display: inline-block; padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,0.03); font-family: var(--mono); font-size: 11px; color: var(--fg-70); }
 </style>
@@ -984,62 +1199,80 @@ ${SHARED_STYLES}
   <a href="/history" class="nav-link">History</a>
 </nav>
 
-<div class="shell">
-
-<div class="hero-beam"></div>
-
-<div class="readiness" id="readiness" style="position:relative;z-index:1"></div>
+<div class="shell slack-shape">
+
+<aside class="channels-pane">
+  <div class="pane-head"><span>Projects</span><span class="pane-count" id="channels-count">1</span></div>
+  <div id="channels-list">
+    <div class="channel active" data-channel="current">
+      <span class="channel-glyph">#</span>
+      <div style="flex:1;min-width:0">
+        <div class="channel-name" id="current-channel-name">project</div>
+        <div class="channel-cwd-hint" id="current-channel-cwd">~</div>
+      </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>
+</aside>
 
-<div class="audit-summary empty" id="audit-summary" style="position:relative;z-index:1">
-  <span class="eyebrow">TODAY</span>
-  <span class="sep">·</span>
-  <span><b id="as-actions">0</b> actions</span>
-  <span class="sep">·</span>
-  <span class="blocked"><b id="as-blocked">0</b> blocked</span>
-  <span class="sep">·</span>
-  <span>avg trust <b id="as-trust">—</b></span>
-  <span class="sep">·</span>
-  <span><b id="as-agents">0</b> agents</span>
-</div>
+<section class="thread-pane">
 
-<div class="status-banner" id="status-banner" style="position:relative;z-index:1;display:none">
-  <div class="stat"><span class="label">Running</span><span class="value live" id="sb-running">0</span></div>
-  <span class="sep">·</span>
-  <div class="stat"><span class="label">On machine</span><span class="value" id="sb-detected">0</span></div>
-  <span class="sep">·</span>
-  <div class="stat blocked"><span class="label">Blocked</span><span class="value" id="sb-blocked">0</span></div>
-  <div class="edge"><span class="label">Last edit</span> <span class="value" id="sb-last">—</span></div>
-</div>
+<div class="hero-beam"></div>
 
 <div class="intake">
-  <h1>What do you need <span class="gradient-text-shimmer">built or fixed</span>?</h1>
-  <p class="sub">Describe a task. codehere delegates to Claude Code, wraps every action with the safety hook, streams it back here.</p>
-  <textarea id="prompt" placeholder="e.g. add a --verbose flag to the trust command and document it in the README"></textarea>
+  <h1>What needs <span class="gradient-text-shimmer">doing</span>?</h1>
+  <textarea id="prompt" placeholder="Describe a task. codehere picks the right agent and wraps it in a safety hook. Or pick one yourself below."></textarea>
   <div class="starter-prompts" id="starter-prompts">
     <span class="sp-label">TRY</span>
-    <button type="button" data-prompt="Read the README and summarize what this project is in 3 short bullets.">Summarize the project</button>
+    <button type="button" data-prompt="Read the README and summarize what this project is in 3 short bullets.">Summarize this repo</button>
     <button type="button" data-prompt="List the top-level files and give me a one-line note on what each is for.">Map the architecture</button>
     <button type="button" data-prompt="Run the tests and tell me what (if anything) is failing.">Run the tests</button>
   </div>
   <div class="intake-row">
-    <select id="agent"><option value="claude-code">Claude Code</option></select>
-    <input type="text" id="cwd" class="cwd" placeholder="working directory" spellcheck="false" />
-    <button class="spawn" id="spawn">Assign task</button>
+    <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>
   </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 to assign</span>
+    <span class="hint" style="margin-left:auto">⌘ + Enter</span>
   </div>
 </div>
 
+<!-- Apr 29 — UX overhaul: readiness banner + stats demoted below intake.
+     Single muted line of stats replaces the previous two stacked rows.
+     Goal: textarea is the focal point above the fold; chrome subordinates. -->
+<div class="readiness" id="readiness" style="position:relative;z-index:1"></div>
+
+<div class="stats-line empty" id="audit-summary" style="position:relative;z-index:1">
+  <span><b id="as-actions">0</b> actions today</span>
+  <span class="sep">·</span>
+  <span><b id="sb-detected">0</b> agents on machine</span>
+  <span class="sep">·</span>
+  <span class="blocked"><b id="as-blocked">0</b> blocked</span>
+  <span class="sep">·</span>
+  <span>avg trust <b id="as-trust">—</b></span>
+  <!-- Hidden but kept in DOM so existing JS that updates these IDs doesn't error -->
+  <span style="display:none"><span id="sb-running">0</span><span id="sb-blocked">0</span><span id="sb-last">—</span><span id="as-agents">0</span></span>
+</div>
+
 <div class="glow-line" style="position:relative;z-index:1"></div>
 
 <div class="section-label" style="position:relative;z-index:1">Sessions</div>
 <div id="sessions" style="position:relative;z-index:1"></div>
 <div id="empty">
-  <div class="pill">No sessions yet — assign a task above</div>
+  <div class="pill">No sessions yet. Assign one above.</div>
 </div>
 
+</section>
+
+<aside class="members-pane">
+  <div class="pane-head"><span>Agents</span><span class="pane-count" id="members-count">0</span></div>
+  <div id="members-list">
+    <div class="pane-empty">Loading agents…</div>
+  </div>
+</aside>
+
 </div>
 
 <script>
@@ -1066,24 +1299,39 @@ ${SHARED_STYLES}
     needs_install: '⤓',
   };
 
-  function renderAgentOptions(agents) {
+  // Apr 29: Conductor readiness state lives separately from the agents
+  // array (the dropdown shows specialists only). When auto.state is
+  // 'needs_install' (no specialists installed yet), we surface that on the
+  // Auto option AND in updateSetupPanel so a fresh-install user gets the
+  // setup prompt instead of a runtime spawn failure (codex Round 1 catch).
+  let autoReadiness = null;
+
+  function renderAgentOptions(agents, auto) {
     agentReadiness = agents || [];
-    if (agentReadiness.length === 0) return;
+    autoReadiness = auto || null;
+    if (agentReadiness.length === 0 && !autoReadiness) return;
     // Sort: ready first, then needs_auth/billed, then needs_install
     const weight = { ready: 0, billed_key_required: 1, needs_auth: 2, needs_install: 3 };
     const sorted = [...agentReadiness].sort((a, b) => (weight[a.state] ?? 99) - (weight[b.state] ?? 99));
-    agentSelect.innerHTML = sorted.map(a =>
+    const autoState = autoReadiness ? autoReadiness.state : 'ready';
+    const autoGlyph = autoState === 'ready' ? '⚡' : (STATE_GLYPH[autoState] || '⚠');
+    const autoLabel = autoState === 'ready' ? 'Auto · codehere routes' : 'Auto · install an agent first';
+    const autoOption = '<option value="" selected>' + autoGlyph + ' ' + autoLabel + '</option>';
+    const specialistOptions = sorted.map(a =>
       '<option value="' + escape(a.id) + '">' +
       (STATE_GLYPH[a.state] || '·') + ' ' + escape(a.label) +
       '</option>'
     ).join('');
+    agentSelect.innerHTML = autoOption + specialistOptions;
     // Trigger the panel render for whatever is selected first
     updateSetupPanel();
   }
 
   function updateSetupPanel() {
     const id = agentSelect.value;
-    const agent = agentReadiness.find(a => a.id === id);
+    // Apr 29: empty value = Auto option = use conductor's readiness (which
+    // says "install at least one specialist" when none are installed).
+    const agent = id === '' ? autoReadiness : agentReadiness.find(a => a.id === id);
     if (!agent || agent.state === 'ready') {
       setupPanel.style.display = 'none';
       setupPanel.removeAttribute('data-state');
@@ -1175,9 +1423,12 @@ ${SHARED_STYLES}
               if (evt.code === 0) {
                 btnEl.classList.add('done');
                 btnEl.textContent = '✓ Installed';
-                // Re-fetch readiness so the dropdown glyph updates
+                // Re-fetch readiness so the dropdown glyph updates.
+                // Apr 29 codex Round 2: pass d.auto too — otherwise the Auto
+                // option's readiness gets stale after install-success refresh
+                // (the new shape needs both fields preserved on every render).
                 fetch('/api/readiness/agents').then(r => r.json()).then(d => {
-                  renderAgentOptions(d.agents || []);
+                  renderAgentOptions(d.agents || [], d.auto);
                   // Select the now-installed agent so user can run the task immediately
                   if ([...agentSelect.options].some(o => o.value === agentId)) {
                     agentSelect.value = agentId;
@@ -1237,7 +1488,61 @@ ${SHARED_STYLES}
   });
   agentSelect.addEventListener('change', updateSetupPanel);
 
-  fetch('/api/readiness/agents').then(r => r.json()).then(d => renderAgentOptions(d.agents || [])).catch(() => { /* keep defaults */ });
+  // Apr 29 — Slack-shape: render the members pane (right) from the same
+  // /api/readiness/agents response that populates the override dropdown.
+  // Single fetch, two surfaces. A later release replaces this with live presence
+  // (F1d-detected agents + spawned-by-codehere sessions joined by id).
+  function renderMembersPane(agents, auto) {
+    const list = document.getElementById('members-list');
+    const count = document.getElementById('members-count');
+    if (!list || !count) return;
+    const all = [];
+    if (auto) all.push({ ...auto, id: 'conductor', label: 'codehere · watches the others' });
+    for (const a of (agents || [])) all.push(a);
+    count.textContent = String(all.length);
+    if (all.length === 0) { list.innerHTML = '<div class="pane-empty">No agents detected</div>'; return; }
+    const presenceCls = (s) => s === 'ready' ? 'ready' : (s === 'needs_install' ? 'offline' : 'warn');
+    const presenceGlyph = (s) => s === 'ready' ? '●' : (s === 'needs_install' ? '○' : '◐');
+    list.innerHTML = all.map((a) => {
+      const cls = presenceCls(a.state);
+      const glyph = presenceGlyph(a.state);
+      // Iter 12 — members are now clickable. Non-technical user expects
+      // clicking an agent in the right pane to pick that agent for the
+      // next task. Click handler below sets the agent <select> + scrolls
+      // intake into view + focuses the prompt textarea.
+      const stateTitle = a.state === 'ready' ? 'ready · click to select' :
+                         a.state === 'needs_install' ? 'needs install · click for setup' :
+                         a.state === 'needs_auth' ? 'needs auth · click for setup' :
+                         (a.state || 'unknown');
+      return '<div class="member" data-agent-id="' + escape(a.id) + '" title="' + escape(stateTitle) + '">' +
+        '<span class="member-presence ' + cls + '">' + glyph + '</span>' +
+        '<span class="member-label">' + escape(a.label || a.id) + '</span>' +
+      '</div>';
+    }).join('');
+    // Wire click → select-this-agent. One delegated handler is cheaper than
+    // attaching one per item, and survives re-renders without leak.
+    list.onclick = (ev) => {
+      const item = ev.target && ev.target.closest && ev.target.closest('.member');
+      if (!item) return;
+      const id = item.getAttribute('data-agent-id');
+      if (!id) return;
+      // Set the agent dropdown to this agent. Trigger 'change' so the
+      // updateSetupPanel code (existing) fires and shows install/auth help
+      // for needs_install / needs_auth states.
+      if (agentSelect) {
+        agentSelect.value = id;
+        try { agentSelect.dispatchEvent(new Event('change')); } catch { /* old browsers */ }
+      }
+      // Scroll intake into view + focus the prompt textarea.
+      try { promptEl && promptEl.scrollIntoView({ behavior: 'smooth', block: 'center' }); } catch { /* noop */ }
+      if (promptEl) promptEl.focus();
+    };
+  }
+
+  fetch('/api/readiness/agents').then(r => r.json()).then(d => {
+    renderAgentOptions(d.agents || [], d.auto);
+    renderMembersPane(d.agents || [], d.auto);
+  }).catch(() => { /* keep defaults */ });
 
   // Working directory: persist user's pick, auto-fill with daemon cwd on first run.
   // Gate A1: strangers shouldn't have to type a path just to hit "Assign"; the
@@ -1249,19 +1554,55 @@ ${SHARED_STYLES}
     if (daemonCwd) {
       cwdInput.placeholder = daemonCwd;
       if (!cwdInput.value.trim()) cwdInput.value = daemonCwd; // auto-fill when nothing saved
+      // Apr 29 — Slack-shape channels pane: surface the daemon cwd as the
+      // current "channel" name + path. Multi-project ships in a later release.
+      const nameEl = document.getElementById('current-channel-name');
+      const cwdEl = document.getElementById('current-channel-cwd');
+      if (nameEl) {
+        const parts = String(daemonCwd).split('/').filter(Boolean);
+        nameEl.textContent = parts[parts.length - 1] || 'project';
+      }
+      if (cwdEl) cwdEl.textContent = daemonCwd;
     }
   }).catch(() => { /* placeholder unchanged */ });
   cwdInput.addEventListener('change', () => {
     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();
+    });
+  }
+
   // Gate A1: starter-prompt chips prefill the textarea + focus it so the user
   // can edit or hit ⌘-Enter immediately. No scroll-jumping, no redirect.
-  document.getElementById('starter-prompts').addEventListener('click', (ev) => {
+  const starterPromptsEl = document.getElementById('starter-prompts');
+  starterPromptsEl.addEventListener('click', (ev) => {
     const btn = ev.target && ev.target.closest('button[data-prompt]');
     if (!btn) return;
     promptEl.value = btn.getAttribute('data-prompt') || '';
     promptEl.focus();
+    starterPromptsEl.classList.add('dim'); // user picked one; chips fade
+  });
+
+  // Apr 29 — UX overhaul: TRY chips fade out once the user starts typing.
+  // They serve as a discovery aid for first-visit users; a typing user has
+  // already committed to a task and doesn't need the chips above the page.
+  promptEl.addEventListener('input', () => {
+    if (promptEl.value.length > 0) starterPromptsEl.classList.add('dim');
+    else starterPromptsEl.classList.remove('dim');
   });
 
   function escape(s) {
@@ -1464,12 +1805,31 @@ ${SHARED_STYLES}
           '<div class="steps-mini"></div>' +
         '</div>' +
         '<div class="session-controls">' +
+          '<div class="view-toggle" title="Switch between thread view and raw event log">' +
+            '<button class="view-thread active" data-view="thread">Thread</button>' +
+            '<button class="view-raw" data-view="raw">Log</button>' +
+          '</div>' +
           '<span class="status-pill ' + session.status + runningClass + '">' + session.status + '</span>' +
           '<button class="kill">Kill</button>' +
         '</div>' +
       '</div>' +
-      '<div class="session-body">' +
+      '<div class="session-body" data-view="thread">' +
+        // Order: thread messages (chronological) → final report (closing
+        // summary, rendered as a block when artifacts arrive) → reply input.
+        // Apr 29 bug fix: previously final-report was BEFORE thread-messages
+        // so on completed sessions the Final Report appeared above the user's
+        // seed prompt, breaking chronological order in thread view.
+        '<div class="thread-messages"></div>' +
         '<div class="final-report" style="display:none"></div>' +
+        // Iter 12 — reply surface now functional; replaced the prior dead
+        // placeholder. Active for adapters with canAppendMessage=true
+        // (claude-code today); disabled state for adapters that don't yet
+        // implement appendMessage.
+        '<div class="thread-input">' +
+          '<textarea class="reply-text" placeholder="Reply to thread… (Cmd+Enter to send)" rows="2"></textarea>' +
+          '<button class="reply-send" type="button">Send</button>' +
+          '<div class="reply-status" style="display:none"></div>' +
+        '</div>' +
         '<div class="event-log"></div>' +
       '</div>';
 
@@ -1482,6 +1842,59 @@ ${SHARED_STYLES}
     const headEl = card.querySelector('.session-head');
     const stepsEl = card.querySelector('.steps-mini');
     const finalReportEl = card.querySelector('.final-report');
+    const threadEl = card.querySelector('.thread-messages');
+    const bodyEl = card.querySelector('.session-body');
+    // Iter 12 — reply-to-thread refs + handler.
+    const threadInputEl = card.querySelector('.thread-input');
+    const replyTextEl = card.querySelector('.reply-text');
+    const replySendBtn = card.querySelector('.reply-send');
+    const replyStatusEl = card.querySelector('.reply-status');
+    if (!session.canAppendMessage) {
+      threadInputEl.classList.add('disabled');
+      replyTextEl.placeholder = 'Reply unsupported for ' + agentLabel(session.agent) + ' yet';
+      replyTextEl.disabled = true;
+      replySendBtn.disabled = true;
+    } else {
+      const sendReply = async () => {
+        const text = (replyTextEl.value || '').trim();
+        if (!text) return;
+        replySendBtn.disabled = true;
+        replySendBtn.textContent = '...';
+        replyStatusEl.style.display = 'none';
+        replyStatusEl.classList.remove('error');
+        // Optimistic: render the user's message immediately in the thread.
+        appendThreadMessage(threadMessage({
+          cls: 'user', author: 'You', time: new Date(), content: text,
+        }));
+        replyTextEl.value = '';
+        try {
+          const r = await fetch('/api/task/' + session.sessionId + '/message', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ text }),
+          });
+          const data = await r.json();
+          if (!r.ok) throw new Error(data.error || ('HTTP ' + r.status));
+          // Render assistant response in the thread.
+          appendThreadMessage(threadMessage({
+            cls: 'agent', author: agentLabel(session.agent), time: new Date(),
+            content: String(data.result || '(empty response)'),
+          }));
+        } catch (err) {
+          replyStatusEl.textContent = 'Reply failed: ' + (err && err.message ? err.message : String(err));
+          replyStatusEl.classList.add('error');
+          replyStatusEl.style.display = 'block';
+        } finally {
+          replySendBtn.disabled = false;
+          replySendBtn.textContent = 'Send';
+          replyTextEl.focus();
+        }
+      };
+      replySendBtn.addEventListener('click', sendReply);
+      replyTextEl.addEventListener('keydown', (ev) => {
+        if ((ev.metaKey || ev.ctrlKey) && ev.key === 'Enter') { ev.preventDefault(); sendReply(); }
+      });
+    }
     const safetyPillEl = card.querySelector('.safety-pill');
     const safetySafeEl = safetyPillEl.querySelector('.safe');
     const safetyBlockedEl = safetyPillEl.querySelector('.blocked');
@@ -1511,6 +1924,146 @@ ${SHARED_STYLES}
       card.classList.toggle('expanded');
     });
 
+    // Apr 29 — Slack-shape thread view.
+    // Thread/Raw toggle in the card head. Default = thread; Raw stays available
+    // for power users who want the unfiltered event stream.
+    const viewBtns = card.querySelectorAll('.view-toggle button');
+    viewBtns.forEach((btn) => {
+      btn.addEventListener('click', (ev) => {
+        ev.stopPropagation(); // don't collapse the card
+        const view = btn.dataset.view;
+        bodyEl.dataset.view = view;
+        viewBtns.forEach((b) => b.classList.toggle('active', b === btn));
+      });
+    });
+
+    // Build a single thread message DOM string.
+    function threadMessage(opts) {
+      const cls = opts.cls || 'agent';
+      const av = opts.avatar || (cls === 'user' ? '👤' : (cls === 'tool' ? '⚙' : (cls === 'hook' ? '🛡' : (cls === 'error' ? '✗' : '🤖'))));
+      const time = opts.time || new Date();
+      return '<div class="thread-message ' + escape(cls) + (opts.modifier ? ' ' + escape(opts.modifier) : '') + '">' +
+        '<div class="avatar">' + escape(av) + '</div>' +
+        '<div class="body">' +
+          '<div class="head">' +
+            '<span class="author">' + escape(opts.author || 'agent') + '</span>' +
+            '<span class="time">' + time.toLocaleTimeString() + '</span>' +
+          '</div>' +
+          '<div class="content">' + escape(String(opts.content || '')) + '</div>' +
+        '</div>' +
+      '</div>';
+    }
+
+    function appendThreadMessage(html) {
+      if (!html) return;
+      threadEl.insertAdjacentHTML('beforeend', html);
+      // Auto-scroll to bottom of thread (within the card)
+      threadEl.scrollTop = threadEl.scrollHeight;
+    }
+
+    // Seed: user prompt as the first thread message
+    threadEl.innerHTML = threadMessage({
+      cls: 'user',
+      author: 'You',
+      time: new Date(session.startedAt),
+      content: session.prompt,
+    });
+
+    // Parallel event → thread renderer. Initial pass duplicates parts of
+    // renderEvent's branching; a follow-up refactor extracts a shared
+    // eventToLines() primitive feeding both renderers.
+    function renderEventToThread(event) {
+      const type = String(event.type || '');
+      const data = event.data ?? {};
+      const t = new Date(event.timestamp || Date.now());
+      const agent = agentLabel(session.agent);
+
+      if (type === 'stream_event') return;
+      if (type === 'system' && (data.subtype === 'init' || data.subtype === 'status' || data.subtype === 'hook_started')) return;
+      if (type === 'stdout' && !String(data.line || '').trim()) return;
+      if (type === 'thread.started' || type === 'turn.started') return;
+      if (type === 'item.started') return;
+
+      if (type === 'assistant' && data.message && Array.isArray(data.message.content)) {
+        for (const block of data.message.content) {
+          if (block.type === 'text') {
+            const txt = String(block.text || '').trim();
+            if (txt) appendThreadMessage(threadMessage({ cls: 'agent', author: agent, time: t, content: txt }));
+          } else if (block.type === 'tool_use') {
+            const name = String(block.name || 'tool');
+            const input = block.input && typeof block.input === 'object' ? JSON.stringify(block.input) : '';
+            const preview = input.length > 200 ? input.slice(0, 200) + '…' : input;
+            appendThreadMessage(threadMessage({ cls: 'tool', author: agent + ' · ' + name, time: t, content: preview, avatar: '⚙' }));
+          }
+        }
+      } else if (type === 'user' && data.message && Array.isArray(data.message.content)) {
+        for (const block of data.message.content) {
+          if (block.type === 'tool_result') {
+            const raw = Array.isArray(block.content) ? block.content.map((c) => c.text || '').join('') : String(block.content || '');
+            const txt = raw.replace(/\\s+/g, ' ').trim();
+            if (txt) {
+              const preview = txt.length > 240 ? txt.slice(0, 240) + '…' : txt;
+              const cls = block.is_error ? 'error' : 'tool';
+              const author = block.is_error ? agent + ' · error' : agent + ' · result';
+              appendThreadMessage(threadMessage({ cls, author, time: t, content: preview }));
+            }
+          }
+        }
+      } else if (type === 'system' && data.subtype === 'hook_response') {
+        const name = String(data.hook_name || 'hook');
+        const blocked = Number(data.exit_code ?? 0) !== 0;
+        const stderr = String(data.stderr || '').trim();
+        const content = blocked ? (stderr || 'blocked') : 'allowed';
+        appendThreadMessage(threadMessage({ cls: 'hook', modifier: blocked ? 'blocked' : '', author: 'codehere · ' + name, time: t, content }));
+      } else if (type === 'item.completed') {
+        const item = data.item && typeof data.item === 'object' ? data.item : {};
+        const itemType = String(item.type || 'item');
+        if (itemType === 'agent_message' && item.text) {
+          const txt = String(item.text).trim();
+          if (txt) appendThreadMessage(threadMessage({ cls: 'agent', author: agent, time: t, content: txt.slice(0, 320) }));
+        } else if (itemType === 'command_execution') {
+          const cmd = String(item.command || '').replace(/\\n/g, ' ').trim();
+          const cmdShort = cmd.length > 160 ? cmd.slice(0, 160) + '…' : cmd;
+          appendThreadMessage(threadMessage({ cls: 'tool', author: agent + ' · shell', time: t, content: cmdShort, avatar: '⚙' }));
+          const out = String(item.aggregated_output || '').trim();
+          if (out) {
+            const outShort = out.length > 200 ? out.slice(0, 200) + '…' : out;
+            const ok = item.exit_code === 0 || item.status === 'completed';
+            appendThreadMessage(threadMessage({
+              cls: ok ? 'tool' : 'error',
+              author: agent + ' · ' + (ok ? 'result' : 'exit ' + (item.exit_code ?? '?')),
+              time: t,
+              content: outShort,
+            }));
+          }
+        }
+      } else if (type === 'stdout') {
+        // Aider and generic CLI adapters stream via plain stdout. Codex
+        // Round 1 (Apr 29) caught: without this branch, those sessions
+        // showed only the seed prompt + exit marker in thread view.
+        const line = String(data.line || '').trim();
+        if (line) appendThreadMessage(threadMessage({ cls: 'agent', author: agent, time: t, content: line.length > 320 ? line.slice(0, 320) + '…' : line }));
+      } else if (type === 'stderr') {
+        const line = String(data.line || '').trim();
+        if (line) appendThreadMessage(threadMessage({ cls: 'tool', author: agent + ' · stderr', time: t, content: line.length > 240 ? line.slice(0, 240) + '…' : line, avatar: '⚠' }));
+      } else if (type === 'error') {
+        const msg = String(data.message || data.error || 'error');
+        appendThreadMessage(threadMessage({ cls: 'error', author: agent, time: t, content: msg }));
+      } else if (type === 'codehere:error') {
+        const msg = String(data.message || data.kind || 'error');
+        appendThreadMessage(threadMessage({ cls: 'error', author: 'codehere', time: t, content: msg }));
+      } else if (type === 'exit') {
+        const status = String(data.status || 'completed');
+        appendThreadMessage(threadMessage({
+          cls: status === 'error' ? 'error' : 'agent',
+          author: agent + ' · ' + status,
+          time: t,
+          content: 'session ended',
+          avatar: status === 'error' ? '✗' : '✓',
+        }));
+      }
+    }
+
     // Layer 2: render the semantic step list inside the collapsed card.
     // Principles #1 (web is not a terminal) + #2 (info density) — show last 3
     // steps with pass/active/fail glyphs; hide the rest behind "+ N more" so
@@ -1535,12 +2088,35 @@ ${SHARED_STYLES}
     // Layer 3: render the final report block when the task completes.
     // Principles #2 + #7 — density (files/tests/trust in one view) and
     // agent-provenance (the report attributes to a specific agent).
-    function renderArtifacts(artifacts) {
-      if (!artifacts) { finalReportEl.style.display = 'none'; return; }
+    // 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) {
+      // 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; }
       finalReportEl.style.display = 'block';
-      const files = Array.isArray(artifacts.files) ? artifacts.files : [];
-      const tests = artifacts.tests;
+      const files = Array.isArray(artifacts?.files) ? artifacts.files : [];
+      const tests = artifacts?.tests;
       let html = '<div class="fr-label">Final report · ' + escape(agentLabel(session.agent)) + '</div>';
+      if (finalReport && finalReport.summary) {
+        // Plain-English prose. Split paragraphs on blank lines, render each as <p>.
+        // NOTE: this code is inside a TS template literal — backslashes in
+        // regex literals must be doubled so the served JS gets the right
+        // sequence (test/cli/ui-served-html-syntax.test.ts guards this).
+        const paragraphs = String(finalReport.summary).split(/\\n\\s*\\n/).filter(p => p.trim());
+        html += '<div class="fr-summary">' +
+          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>';
+      }
       if (files.length > 0) {
         html += '<div class="fr-files">' + files.map(f => {
           const lines = '<span class="add">+' + (f.added || 0) + '</span> <span class="rem">−' + (f.removed || 0) + '</span>';
@@ -1574,7 +2150,11 @@ ${SHARED_STYLES}
 
     // Hydrate from initial snapshot (late-joiner support + persisted sessions)
     if (Array.isArray(session.steps) && session.steps.length) renderSteps(session.steps);
-    if (session.artifacts) renderArtifacts(session.artifacts);
+    // 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);
+    }
 
     // Persisted sessions have no live event stream and no subprocess to kill.
     if (isPersisted) {
@@ -1590,7 +2170,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); return; }
+        if (event.type === 'codehere:artifacts') { renderArtifacts(event.data, undefined, session.status); 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
@@ -1604,6 +2184,7 @@ ${SHARED_STYLES}
         bumpSafety(event);
 
         renderEvent(logEl, event);
+        renderEventToThread(event); // Apr 29 · Slack-shape thread v0 (Day 2)
         if (event.type === 'exit') {
           updateStatus(pillEl, event.data?.status || 'completed');
           killBtn.disabled = true; killBtn.style.opacity = '0.4';
@@ -1627,24 +2208,29 @@ ${SHARED_STYLES}
       killBtn.textContent = 'Kill';
     });
 
-    sessions.set(session.sessionId, { card, logEl, es });
+    // Iter 12 — expose renderArtifacts so the polling loop can refresh the
+    // Final Report block when the prose summary arrives async (~2-5s after
+    // task exit). Without this, non-technical users would have to refresh.
+    sessions.set(session.sessionId, { card, logEl, es, renderArtifacts });
   }
 
   async function assignTask() {
     const prompt = promptEl.value.trim();
     if (!prompt) return;
-    const agent = agentSelect.value || 'claude-code';
+    // Apr 29: empty value = "Auto" option = backend defaults to conductor
+    // (the supervisor routes). Specialists are explicit overrides.
+    const agent = agentSelect.value;
     const cwd = cwdInput.value.trim();
     spawnBtn.disabled = true; spawnBtn.textContent = '...';
     try {
       const res = await fetch('/api/task', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ prompt, agent, cwd: cwd || undefined }),
+        body: JSON.stringify({ prompt, agent: agent || undefined, cwd: cwd || undefined }),
       });
       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 });
+      attachSession({ sessionId: data.sessionId, prompt, startedAt: data.startedAt, status: data.status, agent: data.agent || agent || 'conductor' });
       promptEl.value = '';
     } catch (e) {
       alert('Network error: ' + (e && e.message ? e.message : e));
@@ -1725,9 +2311,10 @@ ${SHARED_STYLES}
   refreshAudit();
   setInterval(refreshAudit, 30000); // audit log isn't hot; 30s is plenty
 
-  // Layer 7: status-at-a-glance banner — one row answers "what's happening".
-  // Principles #3 (status at a glance) + #4 (multi-session default: one row scales from 1 to N sessions).
-  const banner = document.getElementById('status-banner');
+  // Apr 29 — UX overhaul: status-banner merged into the single stats-line
+  // (id="audit-summary"). updateBanner still updates the agents-on-machine
+  // count + hidden running/blocked/last-edit counters; updateAudit controls
+  // visibility of the whole row via the .empty class.
   let latestLastEditAt = null;
   function agoStr(ms) {
     if (!ms) return '—';
@@ -1742,19 +2329,20 @@ ${SHARED_STYLES}
     const running = spawned.filter(s => s.status === 'running').length;
     const blocked = spawned.filter(s => s.status === 'error').length;
     const detected = (d.activeAgents || []).length;
-    document.getElementById('sb-running').textContent = String(running);
-    document.getElementById('sb-detected').textContent = String(detected);
-    const blockedEl = document.getElementById('sb-blocked');
-    blockedEl.textContent = String(blocked);
-    blockedEl.classList.toggle('nonzero', blocked > 0);
+    const setText = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = String(val); };
+    setText('sb-running', running);
+    setText('sb-detected', detected);
+    setText('sb-blocked', blocked);
     latestLastEditAt = d.lastEditAt || null;
-    document.getElementById('sb-last').textContent = agoStr(latestLastEditAt);
-    // Show the banner once we have anything to show (sessions or detected agents)
-    banner.style.display = (running + detected + blocked + spawned.length > 0) ? 'flex' : 'none';
+    setText('sb-last', agoStr(latestLastEditAt));
+    // Reveal the unified stats-line once we have anything to show.
+    if (running + detected + blocked + spawned.length > 0) {
+      auditRow.classList.remove('empty');
+    }
   }
-  // Tick the "last edit" relative label every second even without a refetch
   setInterval(() => {
-    if (latestLastEditAt) document.getElementById('sb-last').textContent = agoStr(latestLastEditAt);
+    const el = document.getElementById('sb-last');
+    if (el && latestLastEditAt) el.textContent = agoStr(latestLastEditAt);
   }, 1000);
 
   function loadSessions() {
@@ -1772,7 +2360,10 @@ ${SHARED_STYLES}
     }).catch(() => { /* fine */ });
   }
   loadSessions();
-  // Refresh detected-agents list + banner every 5s
+  // Refresh detected-agents list + banner every 5s. Iter 12 — also patches
+  // existing session cards with new finalReport prose when it arrives async.
+  // Cheap re-render (innerHTML on a small div); non-technical user sees the
+  // report appear on its own, no manual refresh.
   setInterval(() => {
     fetch('/api/tasks').then(r => r.json()).then(d => {
       const seen = new Set();
@@ -1782,6 +2373,13 @@ ${SHARED_STYLES}
       }
       pruneStaleAgents(seen);
       updateBanner(d);
+      // Patch existing session cards with finalReport when it arrives.
+      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);
+        }
+      }
     }).catch(() => { /* fine */ });
   }, 5000);
 
@@ -1804,7 +2402,7 @@ ${SHARED_STYLES}
         actionHtml += ' <a href="' + escape(report.action.url) + '" target="_blank" rel="noreferrer">' + escape(report.action.label || 'Open') + ' →</a>';
       }
     }
-    actionHtml += ' <button id="readiness-refresh">Check again</button>';
+    actionHtml += ' <button id="readiness-refresh">Recheck</button>';
     readinessEl.innerHTML =
       '<div class="r-title">' + escape(report.title) + '</div>' +
       '<div class="r-detail">' + escape(report.detail) + '</div>' +