codehere 0.6.0-alpha.1 → 0.6.0

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

@@ -1460,6 +1460,14 @@ ${AGENT_BADGE_JS}
     feed.insertBefore(li, feed.firstChild);
     applyFilterToRow(li);
     empty.style.display = 'none';
+    // v0.6 — cap DOM rows so a long-open /history tab doesn't accumulate
+    // thousands of <li>s (~50 events/min × hours = browser slowdown).
+    // Same cap-pattern as /threads (turns) and dashboard (sessions).
+    // Newest-first prepend means the OLDEST is the LAST child; trim that.
+    const MAX_FEED_ROWS = 500;
+    while (feed.children.length > MAX_FEED_ROWS) {
+      feed.removeChild(feed.lastChild);
+    }
   }
 
   // Bug A5 — filter state. Active outcome filter and active tool filter
@@ -1587,6 +1595,12 @@ ${AGENT_BADGE_JS}
       const entry = JSON.parse(ev.data);
       entry._ts = parseTs(entry);
       events.push(entry);
+      // v0.6 — paired with the DOM cap above. Stats only need recent
+      // events; trimming the head keeps recomputeStats O(MAX) not O(forever).
+      const MAX_EVENTS_IN_MEMORY = 500;
+      if (events.length > MAX_EVENTS_IN_MEMORY) {
+        events.splice(0, events.length - MAX_EVENTS_IN_MEMORY);
+      }
       render(entry);
       recomputeStats();
     } catch { /* skip malformed */ }
@@ -1831,6 +1845,33 @@ ${SHARED_STYLES}
   }
   .readiness .r-action button:hover { color: var(--fg); border-color: var(--fg-30); }
 
+  /* v0.6.x P0 — failover offer banner. Amber stripe: "Agent A rate-limited,
+     switch to Agent B?" with one-click dismiss + accept buttons. */
+  .failover-banner {
+    margin: 14px 0 0; padding: 14px 20px;
+    border: 1px solid rgba(254,188,46,0.3);
+    background: rgba(254,188,46,0.06);
+    border-radius: 10px;
+    font-size: 13px; line-height: 1.5;
+    display: flex; align-items: center; justify-content: space-between;
+    gap: 12px; flex-wrap: wrap;
+  }
+  .failover-banner .fb-msg { flex: 1; color: var(--fg-70); min-width: 200px; }
+  .failover-banner .fb-msg b { color: var(--fg); font-weight: 600; }
+  .failover-banner .fb-actions { display: flex; gap: 8px; flex-shrink: 0; }
+  .failover-banner .fb-actions button {
+    font-family: var(--mono); font-size: 11px;
+    padding: 5px 14px; border-radius: 6px; cursor: pointer;
+    border: 1px solid var(--border); background: transparent;
+    color: var(--fg-70); transition: color 0.15s, border-color 0.15s;
+  }
+  .failover-banner .fb-actions button:hover { color: var(--fg); border-color: var(--fg-30); }
+  .failover-banner .fb-actions button.fb-accept {
+    background: rgba(254,188,46,0.12); border-color: rgba(254,188,46,0.4);
+    color: var(--warn); font-weight: 600;
+  }
+  .failover-banner .fb-actions button.fb-accept:hover { background: rgba(254,188,46,0.2); }
+
   /* v0.6 S2 — first-time onboarding card. Quiet authority: peach
      accent border + subtle glass, doesn't compete with the textarea
      below. Removed once dismissed OR once any session exists. */
@@ -2171,18 +2212,23 @@ ${SHARED_STYLES}
   .session.observed { display: none; }
   body.advanced-on .session.observed { display: block; }
 
-  /* claim_user_persona — session list limit. Default shows the 5
-     most-recent cards; "Show all" reveals the rest. .show-all-on body
-     class lifts the cap. CSS-only via :nth-child so attachSession
-     prepend semantics stay simple. */
-  #sessions > .session:nth-child(n+6) { display: none; }
-  body.show-all-sessions #sessions > .session:nth-child(n+6) { display: block; }
+   /* claim_user_persona — session list limit. Default shows the 5
+      most-recent cards; "Show all" reveals the rest. .show-all-on body
+      class lifts the cap. CSS-only via :nth-child so attachSession
+      prepend semantics stay simple.
+      CRITICAL: running sessions are NEVER capped — a user must always
+      see their actively-working session, even if it's the 10th card. */
+   #sessions > .session:nth-child(n+6):not(.status-running) { display: none; }
+   body.show-all-sessions #sessions > .session:nth-child(n+6) { display: block; }
   /* When advanced is also off, observed rows beyond cap stay hidden. */
   body.show-all-sessions #sessions > .session.observed { display: none; }
   body.show-all-sessions.advanced-on #sessions > .session.observed { display: block; }
+  .sessions-actions {
+    display: flex; gap: 10px; justify-content: center; align-items: center;
+    margin: 14px 0 0;
+  }
   .show-more-sessions {
     display: none; /* shown via JS when count > 5 */
-    margin: 14px auto;
     padding: 8px 16px;
     background: transparent;
     color: var(--fg-50);
@@ -2194,6 +2240,17 @@ ${SHARED_STYLES}
   }
   .show-more-sessions:hover { color: var(--fg); border-color: var(--fg-30); }
   body.show-all-sessions .show-more-sessions { display: none; }
+  .stop-all-sessions {
+    padding: 8px 16px;
+    background: transparent;
+    color: var(--block);
+    border: 1px solid rgba(255,95,87,0.3);
+    border-radius: 999px;
+    font-family: var(--mono); font-size: 11px;
+    cursor: pointer;
+    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
+  }
+  .stop-all-sessions:hover { color: var(--fg); border-color: var(--block); background: rgba(255,95,87,0.08); }
 
   .session-controls { display: flex; gap: 8px; }
   .session-controls button {
@@ -2226,6 +2283,39 @@ ${SHARED_STYLES}
 
   .session-body { padding: 0 20px 16px; }
 
+  /* Session threading — visual link between original and failover sessions.
+     The original card shows "↻ continued as [agent]" with a link to the new card.
+     The new card shows "Continued from [agent]" at the top. */
+  .session-continued-as {
+    margin: 0 20px 12px;
+    padding: 8px 12px;
+    border: 1px dashed rgba(255,154,118,0.3);
+    border-radius: 8px;
+    background: rgba(255,154,118,0.04);
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--fg-70);
+  }
+  .session-continued-as a {
+    color: var(--accent);
+    text-decoration: none;
+    font-weight: 500;
+  }
+  .session-continued-as a:hover { text-decoration: underline; }
+  .session-continued-from {
+    margin: 0 0 8px;
+    padding: 6px 12px;
+    border-left: 2px solid rgba(255,154,118,0.3);
+    font-family: var(--mono);
+    font-size: 10.5px;
+    color: var(--fg-50);
+  }
+  .session-continued-from a {
+    color: var(--accent);
+    text-decoration: none;
+  }
+  .session-continued-from a:hover { text-decoration: underline; }
+
   /* P18 slice 4 — permission gate panel. Renders inside the session
      card when the per-tool hook blocked something. Per the dogfood-
      learning + overconfidence-guard: framed as "Codehere noticed",
@@ -2551,6 +2641,8 @@ ${SHARED_STYLES}
 </div>
 
 <div class="intake">
+  <h1>Delegate coding tasks to any AI agent.</h1>
+  <p class="sub">Type what needs doing — codehere picks the right agent, watches every action, and reports back.</p>
   <textarea id="prompt" placeholder="What needs doing? Describe a task — codehere picks the right agent."></textarea>
   <!-- Pattern 5 · Composer meta line. UX-simplification iter (May 7):
        dropped the cm-cwd pill — the cwd input below is the authoritative
@@ -2592,6 +2684,12 @@ ${SHARED_STYLES}
      Goal: textarea is the focal point above the fold; chrome subordinates. -->
 <div class="readiness" id="readiness" style="position:relative;z-index:1"></div>
 
+<!-- v0.6.x P0 — failover offer banner. Surfaces when an adapter hits
+     rate-limit / quota so the user can manually switch agents instead
+     of waiting for auto-failover. Hidden by default; shown via JS when
+     offers arrive from /api/failover-offers. -->
+<div class="failover-banner" id="failover-banner" style="display:none"></div>
+
 <!-- May 6 2026 design polish (Tier 1 #3) + dogfood Bug A3 fix:
      The prior 4-stat row mixed two definitions of "agents" (the AGENTS
      right-pane shows installed-and-ready agents; "agents on machine" stat
@@ -2611,9 +2709,12 @@ ${SHARED_STYLES}
      divider here. The .section-label "Sessions" below already provides
      visual separation; an extra 1px gradient line was decoration not
      information. -->
-<div class="section-label" style="position:relative;z-index:1">Sessions</div>
-<div id="sessions" style="position:relative;z-index:1"></div>
-<button class="show-more-sessions" id="show-more-sessions" type="button">Show all sessions</button>
+ <div class="section-label" style="position:relative;z-index:1">Sessions</div>
+ <div id="sessions" style="position:relative;z-index:1"></div>
+ <div class="sessions-actions" id="sessions-actions">
+   <button class="show-more-sessions" id="show-more-sessions" type="button">Show all sessions</button>
+   <button class="stop-all-sessions" id="stop-all-sessions" type="button" style="display:none">Stop all running</button>
+ </div>
 <div id="empty">
   <div class="pill">No sessions yet. Assign one above.</div>
 </div>
@@ -3468,6 +3569,7 @@ ${AGENT_BADGE_JS}
     const card = document.createElement('div');
     card.className = 'session';
     card.dataset.sessionId = session.sessionId;
+    card.dataset.status = session.status;
     // C3 · Persisted sessions are from a prior daemon run — no live stream, no
     // kill. Still useful: user sees their previous Final reports across restarts.
     const isPersisted = session.provenance === 'persisted';
@@ -3503,6 +3605,8 @@ ${AGENT_BADGE_JS}
         '</div>' +
       '</div>' +
       '<div class="session-body" data-view="thread">' +
+        // Session threading — "Continued from" indicator for failover sessions
+        (session.continuedFrom ? '<div class="session-continued-from">Continued from <a href="#' + escape(session.continuedFrom) + '">' + escape(agentLabel(session.agent)) + '</a> session</div>' : '') +
         // 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
@@ -3555,6 +3659,16 @@ ${AGENT_BADGE_JS}
     // storage, but for the typical flow this is "I'm using it now".
     dismissOnboarding();
 
+    // Session threading — "continued as" indicator for sessions that already
+    // have a failover successor (e.g., after page refresh).
+    if (session.continuedAs) {
+      var continuedAsEl = document.createElement('div');
+      continuedAsEl.className = 'session-continued-as';
+      continuedAsEl.innerHTML = '↻ Continued as <a href="#' + escape(session.continuedAs) + '">new session</a> · session ' + escape(session.continuedAs.slice(0, 8));
+      var headEl2 = card.querySelector('.session-head');
+      if (headEl2 && headEl2.parentNode) headEl2.parentNode.insertBefore(continuedAsEl, headEl2.nextSibling);
+    }
+
     const logEl = card.querySelector('.event-log');
     const pillEl = card.querySelector('.status-pill');
     const killBtn = card.querySelector('.kill');
@@ -3832,6 +3946,7 @@ ${AGENT_BADGE_JS}
     const replyStatusEl = card.querySelector('.reply-status');
     if (!session.canAppendMessage) {
       threadInputEl.classList.add('disabled');
+      threadInputEl.title = 'Replies require a live session — re-spawn to continue this thread';
       // 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
@@ -4100,21 +4215,28 @@ ${AGENT_BADGE_JS}
       // Pattern 13: tool-prefixed verb takes over while a step is active.
       // Most-recent active step's label becomes the micro-activity text;
       // when no step is active we fall back to whimsy rotation.
-      // Pattern 17: if the active step's elapsed > 5s, append a "· Ns"
-      // suffix so the user can see how long this single tool has been
-      // running. Simple slice — doesn't yet upgrade to the bar / ESC hint
-      // at 15-30s thresholds; that's deferred until the affordance
-      // demands it in real dogfood.
+      // Pattern 17: 3-bucket long-op indicator — 5s timer → 15s bar → 30s
+      // still-running + ESC hint.
       const active = steps.filter(s => String(s.state || '') === 'active').slice(-1)[0];
       if (active && session.status === 'running') {
         let label = String(active.label || 'Working on it…');
         const startedAt = Number(active.startedAt || 0);
         if (startedAt > 0) {
-          const elapsedSec = Math.floor((Date.now() - startedAt) / 1000);
+          const elapsedMs = Date.now() - startedAt;
+          const elapsedSec = Math.floor(elapsedMs / 1000);
           if (elapsedSec >= 5) {
-            // Use fmtElapsed for consistency with the chip's elapsed format.
-            label += '  ·  ' + fmtElapsed(Date.now() - startedAt);
-            if (elapsedSec >= 30) label += '  ·  ESC to cancel';
+            const timer = fmtElapsed(elapsedMs);
+            // 15s threshold: add indeterminate progress bar
+            if (elapsedSec >= 15) {
+              const barFill = Math.floor((elapsedSec % 15) / 15 * 8);
+              const barEmpty = 8 - barFill;
+              const bar = '▮'.repeat(barFill) + '░'.repeat(barEmpty);
+              label += '  ·  ' + timer + '  ' + bar;
+            } else {
+              // 5–15s: elapsed timer only
+              label += '  ·  ' + timer;
+            }
+            if (elapsedSec >= 30) label += '  ·  still running · ESC to cancel';
           }
         }
         setMicroState('tool', label);
@@ -4136,6 +4258,7 @@ ${AGENT_BADGE_JS}
       // completed task is still generating its report (placeholder state).
       const isCompleted = status === 'completed' || status === 'killed' || status === 'error';
       const hasContent = artifacts || finalReport;
+      const reportFailed = session.failedReport === true;
       // 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
@@ -4143,10 +4266,10 @@ ${AGENT_BADGE_JS}
       // 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 stillWaitingForReport = isCompleted && !finalReport && !reportFailed && sinceCompleted < REPORT_WAIT_BUDGET_MS;
+      const reportTimedOut = isCompleted && !finalReport && !reportFailed && sinceCompleted >= REPORT_WAIT_BUDGET_MS;
       const isAwaitingReport = stillWaitingForReport;
-      if (!hasContent && !isAwaitingReport && !reportTimedOut) { finalReportEl.style.display = 'none'; return; }
+      if (!hasContent && !isAwaitingReport && !reportTimedOut && !reportFailed) { finalReportEl.style.display = 'none'; return; }
       finalReportEl.style.display = 'block';
       const files = Array.isArray(artifacts?.files) ? artifacts.files : [];
       const tests = artifacts?.tests;
@@ -4162,6 +4285,8 @@ ${AGENT_BADGE_JS}
           '</div>';
       } else if (isAwaitingReport) {
         html += '<div class="fr-summary fr-summary-pending"><p>Generating report…</p></div>';
+      } else if (reportFailed) {
+        html += '<div class="fr-summary fr-summary-pending"><p>Final Report generation failed. The agent finished but the summary couldn\\'t be created. Re-spawn to get a fresh report.</p></div>';
       } else if (reportTimedOut) {
         // Honest message instead of perpetual "Generating report…". Most
         // common cause: daemon restarted (Final Report is in-memory only,
@@ -4265,29 +4390,39 @@ ${AGENT_BADGE_JS}
             });
             built.el.querySelector('.ra-primary').addEventListener('click', async function() {
               if (!built.copy.canFailover) {
-                // Auth/setup path — open the agents pane (already in DOM)
-                // instead of spawning a new session with the same broken auth.
                 built.el.remove();
                 return;
               }
               var primary = built.el.querySelector('.ra-primary');
               primary.disabled = true;
+              primary.textContent = 'Switching…';
               try {
-                await fetch('/api/task', {
+                var r = await fetch('/api/failover-accept', {
                   method: 'POST',
                   headers: { 'Content-Type': 'application/json' },
-                  body: JSON.stringify({
-                    prompt: session.prompt,
-                    agent: nextAgent,
-                    // Reuse the current intake cwd — the failover spawns
-                    // against whichever repo the user is currently scoped
-                    // to. Acceptable trade-off vs. a per-session lookup.
-                    cwd: (cwdInput && cwdInput.value && cwdInput.value.trim()) || ''
-                  })
+                  body: JSON.stringify({ sessionId: session.sessionId, targetAgent: nextAgent })
                 });
-                built.el.remove();
+                var d = await r.json();
+                if (d.error || (!d.ok || !d.newSessionId)) {
+                  built.el.querySelector('.ra-msg').innerHTML = '<b>Failover failed:</b> ' + escape(d.detail || 'Target agent not ready');
+                  primary.style.display = 'none';
+                  built.el.querySelector('.ra-secondary').textContent = 'Dismiss';
+                  return;
+                }
+                // Session threading: add "continued as" link on the original card
+                var continuedAsEl = document.createElement('div');
+                continuedAsEl.className = 'session-continued-as';
+                continuedAsEl.innerHTML = '↻ Continued as <a href="#' + escape(d.newSessionId) + '">' + escape(nextAgent) + '</a> · session ' + escape(d.newSessionId.slice(0, 8));
+                // Insert after session-head
+                var headEl = card.querySelector('.session-head');
+                if (headEl && headEl.parentNode) headEl.parentNode.insertBefore(continuedAsEl, headEl.nextSibling);
+                built.el.querySelector('.ra-msg').innerHTML = '↻ Continued as <b>' + escape(nextAgent) + '</b>';
+                primary.style.display = 'none';
+                built.el.querySelector('.ra-secondary').textContent = 'OK';
               } catch {
+                built.el.querySelector('.ra-msg').innerHTML = '<b>Failover failed:</b> Network error';
                 primary.disabled = false;
+                primary.textContent = 'Retry';
               }
             });
           }
@@ -4663,6 +4798,7 @@ ${AGENT_BADGE_JS}
       pruneStaleAgents(seen);
       updateBanner(d);
       updateShowMoreButton();
+      updateStopAllButton();
     }).catch(() => { /* fine */ });
   }
   // claim_user_persona — show "Show all sessions (N more)" button only
@@ -4684,6 +4820,24 @@ ${AGENT_BADGE_JS}
     document.body.classList.add('show-all-sessions');
     updateShowMoreButton();
   });
+
+  // Stop all running sessions — one click kills every active session.
+  const stopAllBtn = document.getElementById('stop-all-sessions');
+  function updateStopAllButton() {
+    if (!stopAllBtn) return;
+    const runningCards = sessionsEl.querySelectorAll('.session[data-status="running"]');
+    stopAllBtn.style.display = runningCards.length > 1 ? 'block' : 'none';
+    stopAllBtn.textContent = 'Stop all running (' + runningCards.length + ')';
+  }
+  if (stopAllBtn) stopAllBtn.addEventListener('click', function() {
+    if (!confirm('Stop all running sessions?')) return;
+    const runningCards = sessionsEl.querySelectorAll('.session[data-status="running"]');
+    runningCards.forEach(function(card) {
+      const killBtn = card.querySelector('.session-controls button.kill');
+      if (killBtn && !killBtn.disabled) killBtn.click();
+    });
+    updateStopAllButton();
+  });
   loadSessions();
   // Refresh detected-agents list + banner every 5s. Iter 12 — also patches
   // existing session cards with new finalReport prose when it arrives async.
@@ -4753,6 +4907,88 @@ ${AGENT_BADGE_JS}
   }
 
   checkReadiness();
+
+  // ── Failover offer banner (P0) ──────────────────────────────────
+  // Polls /api/failover-offers every 5s. When offers exist, shows a
+  // banner: "Claude rate-limited — switch to Codex?" with one-click
+  // accept (re-spawns on the target agent) and dismiss buttons.
+  const fbEl = document.getElementById('failover-banner');
+  let fbDismissed = false;
+
+  function renderFailoverOffers(offers) {
+    if (!offers || offers.length === 0 || fbDismissed) {
+      fbEl.style.display = 'none';
+      return;
+    }
+    fbEl.style.display = 'flex';
+    const parts = offers.map(function(o) {
+      var msg = '<b>' + escape(o.signal.fromAgent) + '</b> hit ' + escape(o.signal.errorCode) +
+        ' — switch to <b>' + escape(o.target) + '</b>?';
+      var actions = '<div class="fb-actions">' +
+        '<button class="fb-accept" data-session="' + escape(o.sessionId) + '" data-target="' + escape(o.target) + '">Switch</button>' +
+        '<button class="fb-dismiss" data-session="' + escape(o.sessionId) + '">Dismiss</button>' +
+        '</div>';
+      return '<div class="fb-msg">' + msg + '</div>' + actions;
+    });
+    fbEl.innerHTML = parts.join('');
+
+    // Wire accept buttons
+    fbEl.querySelectorAll('.fb-accept').forEach(function(btn) {
+      btn.addEventListener('click', function() {
+        var sessionId = btn.dataset.session;
+        var target = btn.dataset.target;
+        btn.disabled = true;
+        btn.textContent = 'Switching…';
+        fetch('/api/failover-accept', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ sessionId: sessionId, targetAgent: target }),
+        }).then(function(r) { return r.json(); }).then(function(d) {
+          if (d.error) {
+            fbEl.innerHTML = '<div class="fb-msg"><b>Failover failed:</b> ' + escape(d.error) + (d.detail ? ' — ' + escape(d.detail) : '') + '</div>';
+            return;
+          }
+          if (!d.ok || !d.newSessionId) {
+            fbEl.innerHTML = '<div class="fb-msg"><b>Failover unavailable:</b> ' + escape(d.detail || 'Target agent not ready') + '</div>';
+            return;
+          }
+          // Session threading: add "continued as" link on the original card
+          var origCard = document.querySelector('[data-session-id="' + escape(sessionId) + '"]');
+          if (origCard && !origCard.querySelector('.session-continued-as')) {
+            var headEl = origCard.querySelector('.session-head');
+            if (headEl && headEl.parentNode) {
+              var continuedAsEl = document.createElement('div');
+              continuedAsEl.className = 'session-continued-as';
+              continuedAsEl.innerHTML = '↻ Continued as <a href="#' + escape(d.newSessionId) + '">' + escape(target) + '</a> · session ' + escape(d.newSessionId.slice(0, 8));
+              headEl.parentNode.insertBefore(continuedAsEl, headEl.nextSibling);
+            }
+          }
+          fbEl.innerHTML = '<div class="fb-msg">↻ Switched to <b>' + escape(target) + '</b>. New session: <b>' + escape(d.newSessionId.slice(0, 8)) + '</b></div>' +
+            '<div class="fb-actions"><button class="fb-dismiss" id="fb-success-dismiss">OK</button></div>';
+          document.getElementById('fb-success-dismiss').addEventListener('click', function() {
+            fbDismissed = true;
+            fbEl.style.display = 'none';
+          });
+        }).catch(function() {
+          fbEl.innerHTML = '<div class="fb-msg"><b>Failover failed:</b> Network error. Check if the daemon is running.</div>';
+        });
+      });
+    });
+
+    // Wire dismiss buttons (initial render)
+    fbEl.querySelectorAll('.fb-dismiss').forEach(function(btn) {
+      btn.addEventListener('click', function() {
+        fbDismissed = true;
+        fbEl.style.display = 'none';
+      });
+    });
+  }
+
+  setInterval(function() {
+    fetch('/api/failover-offers').then(function(r) { return r.json(); }).then(function(d) {
+      renderFailoverOffers(d.offers);
+    }).catch(function() { /* fine */ });
+  }, 5000);
 })();
 </script>
 </body>
@@ -4948,6 +5184,26 @@ ${SHARED_STYLES}
   .task .steps .step { padding: 2px 0; }
   .task .steps .step.done::before { content: '✓ '; color: var(--allow); }
 
+  /* Pattern 21 · Buffered reveal — cascade animation for completed steps */
+  .task .steps.buffered-reveal .step {
+    opacity: 0;
+    transform: translateY(4px);
+    animation: br-cascade 80ms ease-out forwards;
+  }
+  .task .steps.buffered-reveal .step:nth-child(1) { animation-delay: 0ms; }
+  .task .steps.buffered-reveal .step:nth-child(2) { animation-delay: 80ms; }
+  .task .steps.buffered-reveal .step:nth-child(3) { animation-delay: 160ms; }
+  .task .steps.buffered-reveal .step:nth-child(4) { animation-delay: 240ms; }
+  .task .steps.buffered-reveal .step:nth-child(5) { animation-delay: 320ms; }
+  .task .steps.buffered-reveal .step:nth-child(6) { animation-delay: 400ms; }
+  .task .steps.buffered-reveal .step:nth-child(7) { animation-delay: 480ms; }
+  .task .steps.buffered-reveal .step:nth-child(8) { animation-delay: 560ms; }
+  .task .steps.buffered-reveal .step:nth-child(9) { animation-delay: 640ms; }
+  .task .steps.buffered-reveal .step:nth-child(10) { animation-delay: 720ms; }
+  @keyframes br-cascade {
+    to { opacity: 1; transform: translateY(0); }
+  }
+
   .empty {
     text-align: center; padding: 60px 24px; color: var(--fg-50); font-family: var(--mono); font-size: 13px;
   }
@@ -5192,9 +5448,19 @@ ${AGENT_BADGE_JS}
 
     for (const t of renderedTurns) {
       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>'
-        : '';
+      // v0.6 — cap per-task steps at last 5 (mirrors dashboard renderSteps
+      // tail-3 pattern). A long task with 100+ steps × 25 turns rendered
+      // = 2500 step DOM nodes. Show last 5 + "+N more" pill.
+      let stepsHtml = '';
+      if (t.steps && t.steps.length) {
+        const STEP_TAIL = 5;
+        const stepTail = t.steps.slice(-STEP_TAIL);
+        const stepHidden = t.steps.length - stepTail.length;
+        stepsHtml = '<div class="steps">' +
+          stepTail.map(s => '<div class="step ' + escapeHtml((s.state||'').toLowerCase()) + '">' + escapeHtml(s.label || '') + '</div>').join('') +
+          (stepHidden > 0 ? '<div class="step muted">+' + stepHidden + ' earlier step' + (stepHidden === 1 ? '' : 's') + '</div>' : '') +
+        '</div>';
+      }
       const durHtml = (t.durationMs != null)
         ? '<div class="duration">Duration: <b>' + fmtDuration(t.durationMs) + '</b></div>'
         : (status === 'running' ? '<div class="duration">Running…</div>' : '');

package/dist/infrastructure/storage/project-thread-mirror.js

@@ -478,21 +478,31 @@ export function mirrorCompletedToThread(rec) {
         artifacts: rec.artifacts,
     });
 }
-/**
- * v0.6.x — mirror a successful appendMessage() reply to the project thread.
- *
- * Pre-fix: only initial spawn + completion wrote to thread.jsonl. Reply turns
- * (the `/api/task/:id/message` endpoint, the dashboard reply box, and the new
- * /threads reply bar) updated only the in-memory session. Result: /threads
- * showed the original spawn but every follow-up turn was invisible. Founder
- * flagged it 2026-05-03 as a v0.6.x cleanup item.
- *
- * Schema choice: write a single complete `{type: 'task', sessionId: <new>,
- * parentSessionId: <orig>, ...}` entry rather than splitting spawn+complete.
- * appendMessage is synchronous-from-caller's-POV (no streaming), so the whole
- * turn is known when this fires. The reader's sessionId merge logic surfaces
- * each reply as its own chronological row on /threads.
- */
+/** Label map for raw error codes → user-facing text. */
+const FAILOVER_LABELS = {
+    rate_limit: 'hit a rate limit',
+    quota_exceeded: 'exhausted its quota',
+    credit_low: 'ran low on credits',
+    error: 'encountered an error',
+};
+export function mirrorFailoverToThread(rec) {
+    if (isTempDir(rec.cwd))
+        return;
+    const slug = slugForCwd(rec.cwd);
+    const reasonLabel = FAILOVER_LABELS[rec.reason] ?? 'became unavailable';
+    const fromLabel = rec.fromAgent;
+    const toLabel = rec.toAgent;
+    appendThreadEntry(slug, {
+        type: 'task',
+        sessionId: rec.sessionId,
+        agent: 'system',
+        prompt: `↻ Switched from ${fromLabel} to ${toLabel} (${reasonLabel})`,
+        status: 'completed',
+        startedAt: Date.now(),
+        completedAt: Date.now(),
+        durationMs: 0,
+    });
+}
 export function mirrorReplyToThread(rec) {
     if (isTempDir(rec.cwd))
         return;

package/dist/presentation/cli/repl.js

@@ -692,6 +692,35 @@ function renderEvent(event) {
                 colors.dim(' · ' + (data.reason ?? '')));
             return null;
         }
+        case 'codehere:steps': {
+            const data = event.data;
+            const steps = data?.steps;
+            if (!steps || steps.length === 0)
+                return null;
+            const lastStep = steps[steps.length - 1];
+            if (!lastStep)
+                return null;
+            const state = lastStep.state || 'pending';
+            const label = String(lastStep.label || '');
+            if (state === 'active') {
+                console.log(colors.dim('  │ ') + colors.cyan('●') + ' ' + label);
+                return label;
+            }
+            if (state === 'done' || state === 'failed') {
+                const icon = state === 'done' ? colors.green('✓') : colors.red('✗');
+                console.log(colors.dim('  │ ') + icon + ' ' + label);
+                // P22 / Track B #8 — render last 3 lines of step output for done/failed
+                if (lastStep.output && String(lastStep.output).trim()) {
+                    const outLines = String(lastStep.output).split(String.fromCharCode(10)).filter(l => l.trim());
+                    const preview = outLines.slice(-3);
+                    for (const ln of preview) {
+                        console.log(colors.dim('  │   ') + colors.gray(ln));
+                    }
+                }
+                return label;
+            }
+            return null;
+        }
         case 'stdout':
         case 'stderr': {
             const data = event.data;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codehere",
-  "version": "0.6.0-alpha.1",
+  "version": "0.6.0",
   "description": "A PM for your AI coding agents. Delegate, orchestrate, and audit Claude Code, Codex, Aider, OpenCode, Gemini, and any user-configured CLI agent from one local web UI — every AI action traced, every file scored, every spawn warmed with project memory.",
   "main": "dist/index.js",
   "type": "module",
@@ -59,6 +59,7 @@
   },
   "homepage": "https://codehere.uk",
   "dependencies": {
+    "@mohammednagy/graphify-ts": "^0.22.3",
     "boxen": "^8.0.1",
     "chalk": "^5.3.0",
     "cli-progress": "^3.12.0",