bosun 0.31.2 → 0.31.4

package/error-detector.mjs

@@ -132,6 +132,7 @@ const GIT_CONFLICT_PATTERNS = [
   /rebase.*conflict/i,
   /cannot.*merge|unable to merge/i,
   /both modified/i,
+  /cannot rebase|rebase failed/i,
 ];
 
 export const PUSH_FAILURE_PATTERNS = [
@@ -173,6 +174,20 @@ export const LINT_FAILURE_PATTERNS = [
   /gofmt.*differ|goimports.*differ/i,
 ];
 
+// ── OOM / SIGKILL patterns ──────────────────────────────────────────────────────
+
+export const OOM_KILL_PATTERNS = [
+  /SIGKILL/,
+  /killed.*out.?of.?memory|oom.?kill/i,
+  /out of memory: kill process/i,
+];
+
+export const OOM_PATTERNS = [
+  /heap out of memory|javascript heap/i,
+  /fatal error.*allocation failed|allocation failure/i,
+  /process out of memory/i,
+];
+
 /**
  * Ordered list of pattern groups to check. Earlier entries win on ties.
  * Each entry: [patternName, regexArray, baseConfidence]
@@ -187,6 +202,8 @@ const PATTERN_GROUPS = [
   ["request_error", REQUEST_ERROR_PATTERNS, 0.91], // Client errors (400/404/422) — needs prompt fix
   ["api_error", API_ERROR_PATTERNS, 0.9],
   ["session_expired", SESSION_EXPIRED_PATTERNS, 0.9],
+  ["oom_kill", OOM_KILL_PATTERNS, 0.97],           // SIGKILL / OS-level OOM kill — critical
+  ["oom", OOM_PATTERNS, 0.95],                     // JavaScript heap OOM — critical
   ["codex_sandbox", CODEX_SANDBOX_PATTERNS, 0.88], // Codex sandbox failures
   ["push_failure", PUSH_FAILURE_PATTERNS, 0.85],
   ["test_failure", TEST_FAILURE_PATTERNS, 0.83],
@@ -195,6 +212,34 @@ const PATTERN_GROUPS = [
   ["git_conflict", GIT_CONFLICT_PATTERNS, 0.85],
 ];
 
+/**
+ * Severity level for each error pattern type.
+ * 'low' | 'medium' | 'high' | 'critical'
+ * @type {Record<string, 'low'|'medium'|'high'|'critical'>}
+ */
+export const PATTERN_SEVERITY = {
+  auth_error: "high",
+  content_policy: "high",
+  plan_stuck: "low",
+  rate_limit: "medium",
+  token_overflow: "medium",
+  model_error: "high",
+  request_error: "medium",
+  api_error: "medium",
+  session_expired: "medium",
+  oom_kill: "critical",
+  oom: "critical",
+  codex_sandbox: "high",
+  push_failure: "medium",
+  test_failure: "medium",
+  lint_failure: "low",
+  build_failure: "medium",
+  git_conflict: "medium",
+  permission_wait: "low",
+  empty_response: "low",
+  unknown: "low",
+};
+
 // ── Helpers ─────────────────────────────────────────────────────────────────
 
 /** Safely truncate a string for logging / details. */
@@ -224,12 +269,14 @@ const PATTERN_DESCRIPTIONS = {
   test_failure: "Unit or integration test failure",
   lint_failure: "Lint or code formatting failure",
   push_failure: "Git push or pre-push hook failure",
-  git_conflict: "Git merge conflict detected",
+  git_conflict: "Git merge or rebase conflict detected",
   auth_error: "API key invalid, expired, or missing — NOT retryable",
   model_error: "Model not found, deprecated, or unavailable",
   request_error: "Bad request (400/404/422) — invalid payload or endpoint",
   content_policy: "Content policy / safety filter violation — NOT retryable",
   codex_sandbox: "Codex CLI sandbox or permission error",
+  oom_kill: "Process killed by OS due to out-of-memory (SIGKILL)",
+  oom: "JavaScript heap out-of-memory error",
   permission_wait: "Agent waiting for human input/permission",
   empty_response: "Agent produced no meaningful output",
   unknown: "Unclassified error",
@@ -271,7 +318,7 @@ export class ErrorDetector {
    *
    * @param {string} output  Agent stdout / response text
    * @param {string} [error] Agent stderr or error message
-   * @returns {{ pattern: string, confidence: number, details: string, rawMatch: string|null }}
+   * @returns {{ pattern: string, confidence: number, details: string, rawMatch: string|null, severity: 'low'|'medium'|'high'|'critical' }}
    */
   classify(output, error) {
     const combined = [output, error].filter(Boolean).join("\n");
@@ -281,6 +328,7 @@ export class ErrorDetector {
         confidence: 0,
         details: "No output to analyse",
         rawMatch: null,
+        severity: PATTERN_SEVERITY.unknown ?? "low",
       };
     }
 
@@ -307,14 +355,16 @@ export class ErrorDetector {
       }
     }
 
-    return (
-      best || {
-        pattern: "unknown",
-        confidence: 0.3,
-        details: PATTERN_DESCRIPTIONS.unknown,
-        rawMatch: null,
-      }
-    );
+    const result = best || {
+      pattern: "unknown",
+      confidence: 0.3,
+      details: PATTERN_DESCRIPTIONS.unknown,
+      rawMatch: null,
+    };
+    return {
+      ...result,
+      severity: PATTERN_SEVERITY[result.pattern] ?? "low",
+    };
   }
 
   // ── recordError ─────────────────────────────────────────────────────────

package/monitor.mjs

@@ -9372,6 +9372,7 @@ function formatCodexResult(result) {
   }
   if (typeof result === "object") {
     const candidates = [
+      result.finalResponse,
       result.output,
       result.text,
       result.message,
@@ -12748,6 +12749,8 @@ export {
   appendKnowledgeEntry,
   buildKnowledgeEntry,
   formatKnowledgeSummary,
+  extractPlannerTasksFromOutput,
+  formatCodexResult,
   // Container runner re-exports
   getContainerStatus,
   isContainerEnabled,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bosun",
-  "version": "0.31.2",
+  "version": "0.31.4",
   "description": "AI-powered orchestrator supervisor — manages AI agent executors with failover, auto-restarts on failure, analyzes crashes with Codex SDK, creates PRs via Vibe-Kanban API, and sends Telegram notifications. Supports N executors with weighted distribution, multi-repo projects, and auto-setup.",
   "type": "module",
   "license": "Apache 2.0",

package/task-executor.mjs

@@ -68,7 +68,7 @@ import {
   collectDiffStats,
 } from "./diff-stats.mjs";
 import { createAnomalyDetector } from "./anomaly-detector.mjs";
-import { normalizeDedupKey } from "./utils.mjs";
+import { normalizeDedupKey, yieldToEventLoop } from "./utils.mjs";
 import {
   resolveExecutorForTask,
   executorToSdk,
@@ -114,6 +114,23 @@ const CODEX_TASK_LABELS = (() => {
 /** Watchdog interval: how often to check for stalled agent slots */
 const WATCHDOG_INTERVAL_MS = 60_000; // 1 minute
 
+// ── Error categorization ───────────────────────────────────────────────────
+
+/**
+ * Categorize an error for smarter retry/backoff decisions.
+ * @param {unknown} err
+ * @returns {'transient'|'auth'|'network'|'conflict'|'permanent'|'unknown'}
+ */
+function categorizeError(err) {
+  const msg = (err?.message || err?.stderr || String(err ?? "")).toLowerCase();
+  if (/rate.?limit|too many requests|429/i.test(msg)) return "transient";
+  if (/auth|token|unauthorized|forbidden|403|401/i.test(msg)) return "auth";
+  if (/network|econnrefused|enotfound|etimedout|econnreset|socket/i.test(msg)) return "network";
+  if (/conflict|merge conflict|rebase conflict|CONFLICT/i.test(msg)) return "conflict";
+  if (/fatal|crash|exit code 1|exit code 127|SIGKILL/i.test(msg)) return "permanent";
+  return "unknown";
+}
+
 /**
  * Returns the Co-authored-by trailer for bosun-botswain[bot], or empty string
  * if the GitHub App ID is not configured. Used to attribute agent commits to
@@ -3241,6 +3258,8 @@ class TaskExecutor {
             `${TAG} unhandled error in executeTask for "${task.title}": ${err.message}`,
           );
         });
+        // Yield between slot dispatches so WebSocket/HTTP work can proceed
+        await yieldToEventLoop();
       }
     } catch (err) {
       console.error(`${TAG} poll loop error: ${err.message}`);
@@ -4795,6 +4814,15 @@ class TaskExecutor {
         /* best-effort */
       }
 
+      // Category-specific backoff to avoid hammering services under stress
+      const errCategory = categorizeError(result.error || "");
+      console.log(`${TAG} error category for "${task.title}": ${errCategory}`);
+      if (errCategory === "transient") {
+        await new Promise((r) => setTimeout(r, 5_000));
+      } else if (errCategory === "network") {
+        await new Promise((r) => setTimeout(r, 15_000));
+      }
+
       // If plan-stuck, use recovery prompt instead of generic retry
       if (
         classification.pattern === "plan_stuck" &&

package/ui/app.js

@@ -43,6 +43,7 @@ import {
   connectWebSocket,
   disconnectWebSocket,
   wsConnected,
+  loadingCount,
 } from "./modules/api.js";
 import {
   connected,
@@ -124,17 +125,48 @@ if (typeof document !== "undefined" && !document.getElementById("offline-banner-
   gap: 12px;
   padding: 12px 16px;
   margin: 8px 16px;
-  background: rgba(239, 68, 68, 0.08);
   border: 1px solid rgba(239, 68, 68, 0.2);
   border-radius: 14px;
   box-shadow: var(--shadow-sm);
   backdrop-filter: blur(6px);
   animation: slideDown 0.3s ease-out;
+  transition: background 0.4s ease, border-color 0.4s ease;
+}
+.offline-banner.tone-orange {
+  background: rgba(249, 115, 22, 0.08);
+  border-color: rgba(249, 115, 22, 0.25);
+}
+.offline-banner.tone-red {
+  background: rgba(239, 68, 68, 0.12);
+  border-color: rgba(239, 68, 68, 0.3);
 }
 .offline-banner-icon { font-size: 20px; }
 .offline-banner-content { flex: 1; }
-.offline-banner-title { font-weight: 600; font-size: 13px; color: #ef4444; }
+.offline-banner-title { font-weight: 600; font-size: 13px; }
+.tone-orange .offline-banner-title { color: #f97316; }
+.tone-red .offline-banner-title    { color: #ef4444; }
 .offline-banner-meta { font-size: 12px; opacity: 0.7; margin-top: 2px; }
+.offline-reconnect-bar {
+  height: 2px; border-radius: 2px; margin-top: 6px;
+  background: rgba(249,115,22,0.18);
+  overflow: hidden;
+}
+.offline-reconnect-fill {
+  height: 100%; border-radius: 2px;
+  background: #f97316;
+  transition: width 1s linear;
+}
+.tone-red .offline-reconnect-fill { background: #ef4444; }
+.offline-dot {
+  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
+  animation: offlinePulse 1.6s ease-in-out infinite;
+}
+.offline-dot.orange { background: #f97316; }
+.offline-dot.red    { background: #ef4444; }
+@keyframes offlinePulse {
+  0%,100% { opacity:1; transform:scale(1); }
+  50%     { opacity:0.5; transform:scale(1.3); }
+}
 `;
   document.head.appendChild(style);
 }
@@ -203,16 +235,38 @@ function OfflineBanner() {
       }
     } catch { /* handled by signal */ }
   }, []);
+
+  const retryCount = backendRetryCount.value;
+  const isPersistent = retryCount > 3;
+  const tone = isPersistent ? "red" : "orange";
+  const title = isPersistent
+    ? "Persistent connection failure"
+    : "Backend Unreachable";
+
+  // Reconnect countdown drives the progress bar
+  const countdown = wsReconnectIn.value;
+  const maxWait = 15; // max backoff seconds
+  const reconnectPct = countdown != null && countdown > 0
+    ? Math.round(((maxWait - Math.min(countdown, maxWait)) / maxWait) * 100)
+    : 100;
+
   return html`
-    <div class="offline-banner">
-      <div class="offline-banner-icon">⚠️</div>
+    <div class="offline-banner tone-${tone}">
+      <div class="offline-dot ${tone}"></div>
       <div class="offline-banner-content">
-        <div class="offline-banner-title">Backend Unreachable</div>
+        <div class="offline-banner-title">${title}</div>
         <div class="offline-banner-meta">${backendError.value || "Connection lost"}</div>
         ${backendLastSeen.value
           ? html`<div class="offline-banner-meta">Last connected: ${formatTimeAgo(backendLastSeen.value)}</div>`
           : null}
-        <div class="offline-banner-meta">Retry attempt #${backendRetryCount.value}</div>
+        <div class="offline-banner-meta">
+          ${countdown != null && countdown > 0
+            ? `Reconnecting in ${countdown}s…`
+            : `Retry attempt #${retryCount}`}
+        </div>
+        <div class="offline-reconnect-bar">
+          <div class="offline-reconnect-fill" style="width:${reconnectPct}%"></div>
+        </div>
       </div>
       <button class="btn btn-ghost btn-sm" onClick=${manualRetry}>Retry</button>
     </div>
@@ -224,7 +278,7 @@ import { Component } from "preact";
 class TabErrorBoundary extends Component {
   constructor(props) {
     super(props);
-    this.state = { error: null };
+    this.state = { error: null, showStack: false };
   }
   static getDerivedStateFromError(error) {
     return { error };
@@ -234,23 +288,43 @@ class TabErrorBoundary extends Component {
   }
   render() {
     if (this.state.error) {
-      const retry = () => this.setState({ error: null });
+      const retry = () => this.setState({ error: null, showStack: false });
+      const err = this.state.error;
+      const tabName = this.props.tabName || "";
+      const errorMsg = err?.message || "An unexpected error occurred while rendering this tab.";
+      const stack = err?.stack || "";
+      const copyError = () => {
+        const text = `${errorMsg}\n\n${stack}`;
+        navigator?.clipboard?.writeText(text).catch(() => {});
+      };
+      const toggleStack = () => this.setState((s) => ({ showStack: !s.showStack }));
       return html`
-        <div style="padding:24px;text-align:center;color:var(--text-secondary);">
-          <div style="font-size:32px;margin-bottom:12px;">⚠️</div>
-          <div style="font-size:14px;font-weight:600;margin-bottom:8px;">
-            Something went wrong
+        <div class="tab-error-boundary">
+          <div class="tab-error-pulse">
+            <span style="font-size:20px;color:#ef4444;">⚠</span>
           </div>
-          <div style="font-size:12px;opacity:0.7;margin-bottom:16px;max-width:400px;margin-left:auto;margin-right:auto;">
-            ${this.state.error?.message || "An unexpected error occurred while rendering this tab."}
+          <div>
+            <div style="font-size:14px;font-weight:600;margin-bottom:4px;color:var(--text-primary);">
+              Something went wrong${tabName ? ` in ${tabName}` : ""}
+            </div>
+            <div style="font-size:12px;color:var(--text-secondary);max-width:400px;">
+              ${errorMsg}
+            </div>
           </div>
-          <button class="btn btn-primary btn-sm" onClick=${retry}>
-            Retry
-          </button>
+          <div style="display:flex;gap:8px;flex-wrap:wrap;justify-content:center;">
+            <button class="btn btn-primary btn-sm" onClick=${retry}>Retry</button>
+            <button class="btn btn-ghost btn-sm" onClick=${copyError}>Copy Error</button>
+            ${stack ? html`<button class="btn btn-ghost btn-sm" onClick=${toggleStack}>
+              ${this.state.showStack ? "Hide Stack" : "Stack Trace"}
+            </button>` : null}
+          </div>
+          ${this.state.showStack && stack ? html`
+            <div class="tab-error-stack">${stack}</div>
+          ` : null}
         </div>
       `;
     }
-    return this.props.children;
+    return html`<div class="tab-content-enter">${this.props.children}</div>`;
   }
 }
 
@@ -712,6 +786,26 @@ function App() {
   const mainRef = useRef(null);
   const [showScrollTop, setShowScrollTop] = useState(false);
   const scrollVisibilityRef = useRef(false);
+
+  // ── Top loading bar state ──
+  const [loadingPct, setLoadingPct] = useState(0);
+  const [loadingVisible, setLoadingVisible] = useState(false);
+  const loadingTimerRef = useRef(null);
+  const isLoading = loadingCount.value > 0;
+  useEffect(() => {
+    if (isLoading) {
+      if (loadingTimerRef.current) clearTimeout(loadingTimerRef.current);
+      setLoadingVisible(true);
+      setLoadingPct(70);
+    } else {
+      setLoadingPct(100);
+      loadingTimerRef.current = setTimeout(() => {
+        setLoadingVisible(false);
+        setLoadingPct(0);
+      }, 500);
+    }
+    return () => {};
+  }, [isLoading]);
   const [isMoreOpen, setIsMoreOpen] = useState(false);
   const resizeRef = useRef(null);
   const [isCompactNav, setIsCompactNav] = useState(() => {
@@ -1055,6 +1149,7 @@ function App() {
   }, []);
 
   return html`
+    <div class="top-loading-bar" style="width: ${loadingPct}%; opacity: ${loadingVisible ? 1 : 0}"></div>
     <div
       class="app-shell"
       style=${shellStyle}
@@ -1130,7 +1225,7 @@ function App() {
           <${CommandPalette} open=${paletteOpen} onClose=${paletteClose} />
           <${PullToRefresh} onRefresh=${() => refreshTab(activeTab.value)}>
             <main class="main-content" ref=${mainRef}>
-              <${TabErrorBoundary} key=${activeTab.value}>
+              <${TabErrorBoundary} key=${activeTab.value} tabName=${activeTab.value}>
                 <${CurrentTab} />
               <//>
             </main>

package/ui/modules/api.js

@@ -14,6 +14,8 @@ export const wsLatency = signal(null);
 export const wsReconnectIn = signal(null);
 /** Reactive signal: number of reconnections since last user-initiated action */
 export const wsReconnectCount = signal(0);
+/** Reactive signal: count of in-flight apiFetch calls (drives top loading bar) */
+export const loadingCount = signal(0);
 
 /* ─── REST API Client ─── */
 
@@ -37,6 +39,7 @@ export async function apiFetch(path, options = {}) {
   const silent = options._silent;
   delete options._silent;
 
+  loadingCount.value += 1;
   try {
     const res = await fetch(path, { ...options, headers });
     if (!res.ok) {
@@ -57,6 +60,8 @@ export async function apiFetch(path, options = {}) {
       }
     }
     throw err;
+  } finally {
+    loadingCount.value = Math.max(0, loadingCount.value - 1);
   }
 }
 

package/ui/styles/components.css

@@ -3876,3 +3876,206 @@ select.input {
   vertical-align: baseline;
   font-size: inherit;
 }
+
+/* ═══════════════════════════════════════════════
+ *  Tab transition animations
+ * ═══════════════════════════════════════════════ */
+
+@keyframes tabFadeSlideIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.tab-content-enter {
+  animation: tabFadeSlideIn 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ═══════════════════════════════════════════════
+ *  Top loading bar
+ * ═══════════════════════════════════════════════ */
+
+.top-loading-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 3px;
+  z-index: 99999;
+  background: linear-gradient(90deg, var(--accent), #8b5cf6);
+  transition: width 0.3s ease, opacity 0.4s ease;
+  pointer-events: none;
+  border-radius: 0 2px 2px 0;
+}
+
+/* ═══════════════════════════════════════════════
+ *  Dashboard headline variants
+ * ═══════════════════════════════════════════════ */
+
+.dashboard-headline-ok    { color: var(--color-done); }
+.dashboard-headline-warn  { color: var(--color-inreview); }
+.dashboard-headline-error { color: var(--color-error); }
+.dashboard-headline-idle  { color: var(--text-secondary); }
+
+/* ═══════════════════════════════════════════════
+ *  Fleet ticker
+ * ═══════════════════════════════════════════════ */
+
+.fleet-ticker-wrap {
+  overflow: hidden;
+  position: relative;
+  height: 20px;
+}
+
+@keyframes tickerScroll {
+  0%   { transform: translateY(0);     }
+  33%  { transform: translateY(-20px); }
+  66%  { transform: translateY(-40px); }
+  100% { transform: translateY(0);     }
+}
+
+.fleet-ticker-inner {
+  display: flex;
+  flex-direction: column;
+  animation: tickerScroll 6s steps(1) infinite;
+}
+
+.fleet-ticker-item {
+  height: 20px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ═══════════════════════════════════════════════
+ *  Tab Error Boundary improvements
+ * ═══════════════════════════════════════════════ */
+
+.tab-error-boundary {
+  padding: 32px 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  text-align: center;
+}
+
+.tab-error-pulse {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: rgba(239, 68, 68, 0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: errorPulse 2s ease-in-out infinite;
+}
+
+@keyframes errorPulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3); }
+  50%       { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
+}
+
+.tab-error-stack {
+  max-height: 120px;
+  overflow-y: auto;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 8px;
+  padding: 8px 12px;
+  font-family: monospace;
+  font-size: 11px;
+  color: var(--text-secondary);
+  text-align: left;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* ═══════════════════════════════════════════════
+ *  Offline banner — pulsing reconnect dot
+ * ═══════════════════════════════════════════════ */
+
+.offline-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  animation: offlinePulse 1.6s ease-in-out infinite;
+}
+
+.offline-dot.orange { background: #f97316; }
+.offline-dot.red    { background: #ef4444; }
+
+@keyframes offlinePulse {
+  0%, 100% { opacity: 1; transform: scale(1);    }
+  50%       { opacity: 0.5; transform: scale(1.3); }
+}
+
+/* ═══════════════════════════════════════════════
+ *  Dashboard — hero "Fleet at rest" badge
+ * ═══════════════════════════════════════════════ */
+
+.fleet-rest-badge {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 20px 0 8px;
+  text-align: center;
+}
+
+.fleet-rest-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: rgba(34, 197, 94, 0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+  color: var(--color-done);
+}
+
+.fleet-rest-label {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--color-done);
+}
+
+.fleet-rest-sub {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+/* ═══════════════════════════════════════════════
+ *  Dashboard welcome card
+ * ═══════════════════════════════════════════════ */
+
+.dashboard-welcome-card {
+  text-align: center;
+  padding: 40px 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.dashboard-welcome-icon {
+  font-size: 52px;
+  margin-bottom: 8px;
+}
+
+.dashboard-welcome-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.dashboard-welcome-desc {
+  font-size: 14px;
+  color: var(--text-secondary);
+  max-width: 340px;
+  line-height: 1.6;
+}

package/ui/tabs/dashboard.js

@@ -189,6 +189,7 @@ export function CreateTaskModal({ onClose }) {
 export function DashboardTab() {
   const [showCreate, setShowCreate] = useState(false);
   const [showStartModal, setShowStartModal] = useState(false);
+  const [uptime, setUptime] = useState(null);
   const status = statusData.value;
   const executor = executorData.value;
   const project = projectSummary.value;
@@ -219,6 +220,44 @@ export function DashboardTab() {
     blocked ? ` · ${blocked} blocked` : ""
   }`;
 
+  // ── Dynamic headline ──
+  const headline =
+    totalActive === 0
+      ? "Fleet idle"
+      : blocked > 0
+        ? "Needs attention"
+        : "All systems running";
+  const headlineClass =
+    totalActive === 0
+      ? "dashboard-headline-idle"
+      : blocked > 0
+        ? "dashboard-headline-error"
+        : "dashboard-headline-ok";
+
+  // ── Hero badge: all tasks done and nothing pending ──
+  const fleetAtRest = totalTasks > 0 && done > 0 && backlog === 0 && totalActive === 0;
+
+  // ── Uptime fetch on mount ──
+  useEffect(() => {
+    let active = true;
+    apiFetch("/api/health", { _silent: true })
+      .then((res) => {
+        if (!active) return;
+        const secs = Number(res?.uptime || 0);
+        if (!secs) return;
+        const d = Math.floor(secs / 86400);
+        const h = Math.floor((secs % 86400) / 3600);
+        const m = Math.floor((secs % 3600) / 60);
+        const parts = [];
+        if (d > 0) parts.push(`${d}d`);
+        if (h > 0) parts.push(`${h}h`);
+        if (m > 0 && d === 0) parts.push(`${m}m`);
+        setUptime(parts.length ? `up ${parts.join(" ")}` : "up < 1m");
+      })
+      .catch(() => {});
+    return () => { active = false; };
+  }, []);
+
   const overviewMetrics = [
     {
       label: "Total tasks",
@@ -226,6 +265,7 @@ export function DashboardTab() {
       color: "var(--text-primary)",
       trend: getTrend("total"),
       spark: "total",
+      tab: "tasks",
     },
     {
       label: "In progress",
@@ -233,6 +273,7 @@ export function DashboardTab() {
       color: "var(--color-inprogress)",
       trend: getTrend("running"),
       spark: "running",
+      tab: "tasks",
     },
     {
       label: "Done",
@@ -240,6 +281,7 @@ export function DashboardTab() {
       color: "var(--color-done)",
       trend: getTrend("done"),
       spark: "done",
+      tab: "tasks",
     },
     {
       label: "Error rate",
@@ -247,9 +289,13 @@ export function DashboardTab() {
       color: "var(--color-error)",
       trend: -getTrend("errors"),
       spark: "errors",
+      tab: "tasks",
     },
   ];
 
+  // ── Live fleet ticker data (3 most recent tasks) ──
+  const tickerTasks = (tasksData.value || []).slice(0, 3);
+
   const workItems = [
     { label: "Running", value: running, color: "var(--color-inprogress)" },
     { label: "Review", value: review, color: "var(--color-inreview)" },
@@ -416,17 +462,40 @@ export function DashboardTab() {
   if (!status && !executor)
     return html`<${Card} title="Loading…"><${SkeletonCard} count=${4} /><//>`;
 
+  /* ── Welcome empty state ── */
+  if (totalTasks === 0 && !executor) {
+    return html`
+      <div class="dashboard-shell">
+        <${Card} className="dashboard-card">
+          <div class="dashboard-welcome-card">
+            <div class="dashboard-welcome-icon">🎛️</div>
+            <div class="dashboard-welcome-title">Welcome to VirtEngine Control Center</div>
+            <div class="dashboard-welcome-desc">
+              Your AI development fleet is ready. Create your first task to get started.
+            </div>
+            <button class="btn btn-primary" onClick=${() => setShowCreate(true)}>
+              ➕ Create your first task
+            </button>
+          </div>
+        <//>
+        ${showCreate &&
+          html`<${CreateTaskModal} onClose=${() => setShowCreate(false)} />`}
+      </div>
+    `;
+  }
+
   return html`
     <div class="dashboard-shell">
       <div class="dashboard-header">
         <div class="dashboard-header-text">
           <div class="dashboard-eyebrow">Pulse</div>
-          <div class="dashboard-title">Calm system overview</div>
+          <div class="dashboard-title ${headlineClass}">${headline}</div>
           <div class="dashboard-subtitle">${headerLine}</div>
         </div>
         <div class="dashboard-header-meta">
           <span class="dashboard-chip">Mode ${mode}</span>
           <span class="dashboard-chip">SDK ${defaultSdk}</span>
+          ${uptime ? html`<span class="dashboard-chip">${uptime}</span>` : null}
           ${executor
             ? executor.paused
               ? html`<${Badge} status="error" text="Paused" />`
@@ -490,6 +559,24 @@ export function DashboardTab() {
               Resume
             </button>
           </div>
+          ${tickerTasks.length > 0 ? html`
+            <div style="margin-top:12px;padding-top:10px;border-top:1px solid var(--border)">
+              <div style="font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:6px;display:flex;align-items:center;gap:5px;">
+                <span style="width:6px;height:6px;border-radius:50%;background:var(--color-done);animation:errorPulse 2s ease-in-out infinite;display:inline-block;"></span>
+                Live
+              </div>
+              <div class="fleet-ticker-wrap">
+                <div class="fleet-ticker-inner">
+                  ${tickerTasks.map((task) => html`
+                    <div class="fleet-ticker-item">
+                      <${Badge} status=${task.status} text=${task.status} />
+                      <span>${truncate(task.title || "(untitled)", 38)}</span>
+                    </div>
+                  `)}
+                </div>
+              </div>
+            </div>
+          ` : null}
         <//>
 
         <${Card}
@@ -498,29 +585,46 @@ export function DashboardTab() {
           >`}
           className="dashboard-card dashboard-overview"
         >
-          <div class="dashboard-metric-grid">
-            ${overviewMetrics.map(
-              (metric) => html`
-                <div class="dashboard-metric">
-                  <div class="dashboard-metric-label">${metric.label}</div>
-                  <div
-                    class="dashboard-metric-value"
-                    style="color: ${metric.color}"
-                  >
-                    ${metric.value} ${trend(metric.trend)}
-                  </div>
-                  <div class="dashboard-metric-spark">
-                    <${MiniSparkline}
-                      data=${sparkData(metric.spark)}
-                      color=${metric.color}
-                      height=${20}
-                      width=${90}
-                    />
-                  </div>
-                </div>
-              `,
-            )}
-          </div>
+          ${fleetAtRest
+            ? html`
+              <div class="fleet-rest-badge">
+                <div class="fleet-rest-icon">✓</div>
+                <div class="fleet-rest-label">Fleet at rest</div>
+                <div class="fleet-rest-sub">${done} task${done !== 1 ? "s" : ""} completed · zero pending</div>
+              </div>
+            `
+            : html`
+              <div class="dashboard-metric-grid">
+                ${overviewMetrics.map(
+                  (metric) => html`
+                    <div
+                      class="dashboard-metric"
+                      style="cursor:pointer;"
+                      role="button"
+                      tabindex="0"
+                      onClick=${() => navigateTo(metric.tab || "tasks")}
+                      onKeyDown=${(e) => e.key === "Enter" && navigateTo(metric.tab || "tasks")}
+                    >
+                      <div class="dashboard-metric-label">${metric.label}</div>
+                      <div
+                        class="dashboard-metric-value"
+                        style="color: ${metric.color}"
+                      >
+                        ${metric.value} ${trend(metric.trend)}
+                      </div>
+                      <div class="dashboard-metric-spark">
+                        <${MiniSparkline}
+                          data=${sparkData(metric.spark)}
+                          color=${metric.color}
+                          height=${20}
+                          width=${90}
+                        />
+                      </div>
+                    </div>
+                  `,
+                )}
+              </div>
+            `}
           ${segments.length > 0 && html`
             <div class="dashboard-work-layout" style="margin-top:12px;padding-top:12px;border-top:1px solid var(--border)">
               <div class="dashboard-work-list">

package/utils.mjs

@@ -170,3 +170,50 @@ export function parsePrNumberFromUrl(url) {
   const num = Number(match[1]);
   return Number.isFinite(num) ? num : null;
 }
+
+// ── Async process helpers ─────────────────────────────────────────────────
+
+/**
+ * spawnAsync — Promise-based alternative to spawnSync.
+ * Doesn't block the event loop. Resolves { stdout, stderr, status }
+ * or rejects with an Error enriched with those same properties.
+ *
+ * @param {string} cmd
+ * @param {string[]} args
+ * @param {import('node:child_process').SpawnOptions} options
+ * @returns {Promise<{ stdout: string, stderr: string, status: number }>}
+ */
+export async function spawnAsync(cmd, args = [], options = {}) {
+  const { spawn } = await import("node:child_process");
+  return new Promise((resolve, reject) => {
+    const stdoutChunks = [];
+    const stderrChunks = [];
+    const proc = spawn(cmd, args, { ...options, stdio: ["ignore", "pipe", "pipe"] });
+    proc.stdout.on("data", (d) => stdoutChunks.push(d));
+    proc.stderr.on("data", (d) => stderrChunks.push(d));
+    proc.on("close", (code) => {
+      const stdout = Buffer.concat(stdoutChunks).toString("utf8");
+      const stderr = Buffer.concat(stderrChunks).toString("utf8");
+      if (code !== 0) {
+        const err = Object.assign(
+          new Error(`spawnAsync: ${cmd} ${args.join(" ")} exited ${code}\n${stderr || stdout}`),
+          { stdout, stderr, status: code },
+        );
+        reject(err);
+      } else {
+        resolve({ stdout, stderr, status: code });
+      }
+    });
+    proc.on("error", reject);
+  });
+}
+
+/**
+ * yieldToEventLoop — allow other microtasks/macrotasks to proceed.
+ * Use between iterations of long synchronous-ish loops to prevent
+ * event loop starvation when many agent slots are active.
+ * @returns {Promise<void>}
+ */
+export function yieldToEventLoop() {
+  return new Promise((resolve) => setImmediate(resolve));
+}