bosun 0.31.4 → 0.31.5

package/error-detector.mjs

@@ -240,6 +240,22 @@ export const PATTERN_SEVERITY = {
   unknown: "low",
 };
 
+// ── Remediation hints ──────────────────────────────────────────────────────
+
+/**
+ * Human-readable remediation hints for each error type.
+ * Surfaced in UI and Telegram notifications to guide users.
+ */
+const REMEDIATION_HINTS = {
+  rate_limit: "Wait a few minutes before retrying. Consider reducing MAX_PARALLEL.",
+  oom: "Reduce MAX_PARALLEL or increase available memory. Use --max-old-space-size.",
+  oom_kill: "Process was killed by the OS. Reduce memory usage or increase system RAM.",
+  git_conflict: "Manual conflict resolution required. Run: git mergetool",
+  push_failure: "Rebase failed or push rejected. Run: git rebase --abort then try again.",
+  auth_error: "Authentication failed. Check your API tokens and credentials.",
+  api_error: "Network connectivity issue. Check your internet connection.",
+};
+
 // ── Helpers ─────────────────────────────────────────────────────────────────
 
 /** Safely truncate a string for logging / details. */
@@ -364,6 +380,7 @@ export class ErrorDetector {
     return {
       ...result,
       severity: PATTERN_SEVERITY[result.pattern] ?? "low",
+      remediation: REMEDIATION_HINTS[result.pattern] || null,
     };
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bosun",
-  "version": "0.31.4",
+  "version": "0.31.5",
   "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, yieldToEventLoop } from "./utils.mjs";
+import { normalizeDedupKey, yieldToEventLoop, withRetry } from "./utils.mjs";
 import {
   resolveExecutorForTask,
   executorToSdk,
@@ -3169,10 +3169,20 @@ class TaskExecutor {
         return;
       }
 
-      // Fetch todo tasks
+      // Fetch todo tasks (with transient-error retry)
       let tasks;
       try {
-        tasks = await listTasks(projectId, { status: "todo" });
+        tasks = await withRetry(
+          () => listTasks(projectId, { status: "todo" }),
+          {
+            maxAttempts: 3,
+            baseMs: 2000,
+            retryIf: (err) => {
+              const cat = categorizeError(err);
+              return cat === "transient" || cat === "network";
+            },
+          },
+        );
         this._resetListTasksBackoff();
       } catch (err) {
         this._noteListTasksFailure(err);
@@ -3252,14 +3262,19 @@ class TaskExecutor {
       for (const task of toDispatch) {
         // Normalize task id
         task.id = task.id || task.task_id;
-        // Fire and forget — executeTask handles its own lifecycle
-        this.executeTask(task).catch((err) => {
-          console.error(
-            `${TAG} unhandled error in executeTask for "${task.title}": ${err.message}`,
-          );
-        });
-        // Yield between slot dispatches so WebSocket/HTTP work can proceed
-        await yieldToEventLoop();
+        try {
+          // Fire and forget — executeTask handles its own lifecycle
+          this.executeTask(task).catch((err) => {
+            console.error(
+              `${TAG} unhandled error in executeTask for "${task.title}": ${err.message}`,
+            );
+          });
+        } catch (err) {
+          console.warn(`${TAG} slot ${task.id} dispatch error: ${err.message}`);
+        } finally {
+          // ALWAYS yield, even on error, to prevent event loop starvation
+          await yieldToEventLoop();
+        }
       }
     } catch (err) {
       console.error(`${TAG} poll loop error: ${err.message}`);

package/ui/app.js

@@ -3,12 +3,28 @@
  *  Modular SPA for Telegram Mini App (no build step)
  * ────────────────────────────────────────────────────────────── */
 
+// ── Error telemetry ring buffer (max 50 entries, persisted to sessionStorage) ──
+const MAX_ERROR_LOG = 50;
+function getErrorLog() {
+  try { return JSON.parse(sessionStorage.getItem("ve_error_log") || "[]"); } catch { return []; }
+}
+function appendErrorLog(entry) {
+  try {
+    const log = getErrorLog();
+    log.unshift({ ...entry, ts: Date.now() });
+    if (log.length > MAX_ERROR_LOG) log.length = MAX_ERROR_LOG;
+    sessionStorage.setItem("ve_error_log", JSON.stringify(log));
+  } catch { /* quota exceeded */ }
+}
+
 /* ── Global error handlers — catch unhandled errors before they freeze the UI ── */
 globalThis.addEventListener?.("error", (e) => {
   console.error("[ve:global-error]", e.error || e.message);
+  appendErrorLog({ type: "global", message: e.message, stack: e.error?.stack });
 });
 globalThis.addEventListener?.("unhandledrejection", (e) => {
   console.error("[ve:unhandled-rejection]", e.reason);
+  appendErrorLog({ type: "rejection", message: String(e.reason?.message || e.reason) });
 });
 
 import { h, render as preactRender } from "preact";
@@ -47,6 +63,8 @@ import {
 } from "./modules/api.js";
 import {
   connected,
+  statusData,
+  executorData,
   refreshTab,
   toasts,
   initWsInvalidationListener,
@@ -108,6 +126,60 @@ try {
   if (stateMod.dataFreshness) dataFreshness = stateMod.dataFreshness;
 } catch { /* use placeholder signals */ }
 
+/* ── Shared components ── */
+
+/**
+ * AnimatedNumber — smoothly counts from previous to new value using rAF.
+ */
+function AnimatedNumber({ value, duration = 600, className = "" }) {
+  const displayRef = useRef(value);
+  const rafRef = useRef(null);
+  const [display, setDisplay] = useState(value);
+
+  useEffect(() => {
+    const from = displayRef.current;
+    const to = value;
+    if (from === to) return;
+    const start = performance.now();
+    const animate = (now) => {
+      const t = Math.min((now - start) / duration, 1);
+      const eased = 1 - Math.pow(1 - t, 3); // ease out cubic
+      const current = Math.round(from + (to - from) * eased);
+      displayRef.current = current;
+      setDisplay(current);
+      if (t < 1) rafRef.current = requestAnimationFrame(animate);
+    };
+    rafRef.current = requestAnimationFrame(animate);
+    return () => rafRef.current && cancelAnimationFrame(rafRef.current);
+  }, [value, duration]);
+
+  return html`<span class="${className}">${display}</span>`;
+}
+
+/**
+ * KeyboardShortcutsModal — shows available keyboard shortcuts.
+ */
+function KeyboardShortcutsModal({ onClose }) {
+  const shortcuts = [
+    { key: "1–8", desc: "Switch tabs" },
+    { key: "c",   desc: "Create task (on Dashboard)" },
+    { key: "?",   desc: "Show keyboard shortcuts" },
+    { key: "Esc", desc: "Close modal / palette" },
+  ];
+  return html`
+    <${Modal} title="Keyboard Shortcuts" onClose=${onClose}>
+      <div class="shortcuts-list">
+        ${shortcuts.map((s) => html`
+          <div class="shortcut-item" key=${s.key}>
+            <kbd class="shortcut-key">${s.key}</kbd>
+            <span class="shortcut-desc">${s.desc}</span>
+          </div>
+        `)}
+      </div>
+    <//>  
+  `;
+}
+
 /* ── Backend health helpers ── */
 
 function formatTimeAgo(ts) {
@@ -285,6 +357,7 @@ class TabErrorBoundary extends Component {
   }
   componentDidCatch(error, info) {
     console.error("[TabErrorBoundary] Caught error:", error, info);
+    appendErrorLog({ type: "render", tab: this.props.tabName, message: error?.message, stack: error?.stack });
   }
   render() {
     if (this.state.error) {
@@ -317,6 +390,11 @@ class TabErrorBoundary extends Component {
             ${stack ? html`<button class="btn btn-ghost btn-sm" onClick=${toggleStack}>
               ${this.state.showStack ? "Hide Stack" : "Stack Trace"}
             </button>` : null}
+            <button class="btn btn-ghost btn-sm" onClick=${() => {
+              console.group("[ve:error-log]");
+              getErrorLog().forEach((e, i) => console.log(i, e));
+              console.groupEnd();
+            }}>Error Log</button>
           </div>
           ${this.state.showStack && stack ? html`
             <div class="tab-error-stack">${stack}</div>
@@ -438,10 +516,18 @@ function SidebarNav() {
         ${TAB_CONFIG.map((tab) => {
           const isActive = activeTab.value === tab.id;
           const isHome = tab.id === "dashboard";
+          const sCounts = statusData.value?.counts || {};
+          const badge =
+            tab.id === "tasks"
+              ? Number(sCounts.running || sCounts.inprogress || 0) + Number(sCounts.inreview || sCounts.review || 0)
+              : tab.id === "agents"
+                ? Number(executorData.value?.data?.activeSlots || 0)
+                : 0;
           return html`
             <button
               key=${tab.id}
               class="sidebar-nav-item ${isActive ? "active" : ""}"
+              style="position:relative"
               aria-label=${tab.label}
               aria-current=${isActive ? "page" : null}
               onClick=${() =>
@@ -452,6 +538,7 @@ function SidebarNav() {
             >
               ${ICONS[tab.icon]}
               <span>${tab.label}</span>
+              ${badge > 0 ? html`<span class="nav-badge">${badge}</span>` : null}
             </button>
           `;
         })}
@@ -683,15 +770,20 @@ function getTabsById(ids) {
 
 function BottomNav({ compact, moreOpen, onToggleMore, onNavigate }) {
   const primaryTabs = getTabsById(PRIMARY_NAV_TABS);
+  const sCounts = statusData.value?.counts || {};
+  const tasksBadge = Number(sCounts.running || sCounts.inprogress || 0) + Number(sCounts.inreview || sCounts.review || 0);
+  const agentsBadge = Number(executorData.value?.data?.activeSlots || 0);
   return html`
     <nav class=${`bottom-nav ${compact ? "compact" : ""}`}>
       ${primaryTabs.map((tab) => {
         const isHome = tab.id === "dashboard";
         const isActive = activeTab.value === tab.id;
+        const badge = tab.id === "tasks" ? tasksBadge : tab.id === "agents" ? agentsBadge : 0;
         return html`
           <button
             key=${tab.id}
             class="nav-item ${isActive ? "active" : ""}"
+            style="position:relative"
             aria-label=${`Go to ${tab.label}`}
             type="button"
             onClick=${() =>
@@ -702,6 +794,7 @@ function BottomNav({ compact, moreOpen, onToggleMore, onNavigate }) {
           >
             ${ICONS[tab.icon]}
             <span class="nav-label">${tab.label}</span>
+            ${badge > 0 ? html`<span class="nav-badge">${badge}</span>` : null}
           </button>
         `;
       })}
@@ -783,6 +876,7 @@ function MoreSheet({ open, onClose, onNavigate }) {
 function App() {
   useBackendHealth();
   const { open: paletteOpen, onClose: paletteClose } = useCommandPalette();
+  const [showShortcuts, setShowShortcuts] = useState(false);
   const mainRef = useRef(null);
   const [showScrollTop, setShowScrollTop] = useState(false);
   const scrollVisibilityRef = useRef(false);
@@ -965,7 +1059,10 @@ function App() {
 
   useEffect(() => {
     if (typeof globalThis === "undefined") return;
-    const handler = () => setIsMoreOpen(false);
+    const handler = () => {
+      setIsMoreOpen(false);
+      setShowShortcuts(false);
+    };
     globalThis.addEventListener("ve:close-modals", handler);
     return () => globalThis.removeEventListener("ve:close-modals", handler);
   }, []);
@@ -1016,9 +1113,24 @@ function App() {
         return;
       }
 
+      // "c" to create task (when not in a form element)
+      if (e.key === "c") {
+        e.preventDefault();
+        globalThis.dispatchEvent(new CustomEvent("ve:create-task"));
+        return;
+      }
+
+      // "?" to toggle keyboard shortcuts help
+      if (e.key === "?") {
+        e.preventDefault();
+        setShowShortcuts((v) => !v);
+        return;
+      }
+
       // Escape to close modals/palette
       if (e.key === "Escape") {
         globalThis.dispatchEvent(new CustomEvent("ve:close-modals"));
+        setShowShortcuts(false);
       }
     }
     document.addEventListener("keydown", handleGlobalKeys);
@@ -1223,6 +1335,7 @@ function App() {
           ${backendDown.value ? html`<${OfflineBanner} />` : null}
           <${ToastContainer} />
           <${CommandPalette} open=${paletteOpen} onClose=${paletteClose} />
+          ${showShortcuts ? html`<${KeyboardShortcutsModal} onClose=${() => setShowShortcuts(false)} />` : null}
           <${PullToRefresh} onRefresh=${() => refreshTab(activeTab.value)}>
             <main class="main-content" ref=${mainRef}>
               <${TabErrorBoundary} key=${activeTab.value} tabName=${activeTab.value}>

package/ui/modules/api.js

@@ -6,6 +6,9 @@
 import { signal } from "@preact/signals";
 import { getInitData } from "./telegram.js";
 
+/** Map of in-flight GET request promises, keyed by path */
+const _inflight = new Map();
+
 /** Reactive signal: whether the WebSocket is currently connected */
 export const wsConnected = signal(false);
 /** Reactive signal: WebSocket round-trip latency in ms (null if unknown) */
@@ -27,7 +30,7 @@ export const loadingCount = signal(0);
  * @param {RequestInit & {_silent?: boolean}} options
  * @returns {Promise<any>} parsed JSON body
  */
-export async function apiFetch(path, options = {}) {
+export function apiFetch(path, options = {}) {
   const headers = { ...options.headers };
   headers["Content-Type"] = headers["Content-Type"] || "application/json";
 
@@ -39,30 +42,59 @@ 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) {
-      const text = await res.text().catch(() => "");
-      throw new Error(text || `Request failed (${res.status})`);
+  // Deduplicate concurrent identical GETs
+  const isGet = !options.method || options.method === "GET";
+  if (isGet && !options.body) {
+    if (_inflight.has(path)) {
+      return _inflight.get(path);
     }
-    return await res.json();
-  } catch (err) {
-    // Re-throw so callers can catch, but don't toast on silent requests
-    if (!silent) {
-      // Dispatch a custom event so the state layer can show a toast
-      try {
-        globalThis.dispatchEvent(
-          new CustomEvent("ve:api-error", { detail: { message: err.message } }),
-        );
-      } catch {
-        /* noop */
+  }
+
+  // Retry config for network-level failures only (not 4xx/5xx HTTP errors)
+  const MAX_FETCH_RETRIES = 2;
+  const FETCH_RETRY_BASE_MS = 800;
+
+  const promise = (async () => {
+    loadingCount.value += 1;
+    let res;
+    let fetchAttempt = 0;
+    try {
+      while (fetchAttempt <= MAX_FETCH_RETRIES) {
+        try {
+          res = await fetch(path, { ...options, headers });
+          break; // success — exit retry loop
+        } catch (networkErr) {
+          fetchAttempt++;
+          if (fetchAttempt > MAX_FETCH_RETRIES || silent) throw networkErr;
+          await new Promise((r) => setTimeout(r, FETCH_RETRY_BASE_MS * fetchAttempt));
+        }
+      }
+      if (!res.ok) {
+        const text = await res.text().catch(() => "");
+        throw new Error(text || `Request failed (${res.status})`);
       }
+      return await res.json();
+    } catch (err) {
+      // Re-throw so callers can catch, but don't toast on silent requests
+      if (!silent) {
+        // Dispatch a custom event so the state layer can show a toast
+        try {
+          globalThis.dispatchEvent(
+            new CustomEvent("ve:api-error", { detail: { message: err.message } }),
+          );
+        } catch {
+          /* noop */
+        }
+      }
+      throw err;
+    } finally {
+      loadingCount.value = Math.max(0, loadingCount.value - 1);
+      if (isGet && !options.body) _inflight.delete(path);
     }
-    throw err;
-  } finally {
-    loadingCount.value = Math.max(0, loadingCount.value - 1);
-  }
+  })();
+
+  if (isGet && !options.body) _inflight.set(path, promise);
+  return promise;
 }
 
 /* ─── Command Sending ─── */

package/ui/styles/components.css

@@ -4079,3 +4079,167 @@ select.input {
   max-width: 340px;
   line-height: 1.6;
 }
+
+/* ═══════════════════════════════════════════════
+ *  Nav Badges
+ * ═══════════════════════════════════════════════ */
+
+.nav-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 99px;
+  background: var(--accent);
+  color: var(--accent-text, #fff);
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1;
+  position: absolute;
+  top: 2px;
+  right: 2px;
+}
+
+/* ═══════════════════════════════════════════════
+ *  Dashboard Clock Chip
+ * ═══════════════════════════════════════════════ */
+
+.dashboard-chip-clock {
+  font-variant-numeric: tabular-nums;
+  font-family: var(--font-mono, monospace);
+}
+
+.dashboard-chip-tz {
+  font-size: 10px;
+  opacity: 0.7;
+  margin-left: 4px;
+}
+
+/* ═══════════════════════════════════════════════
+ *  Dashboard Health Score
+ * ═══════════════════════════════════════════════ */
+
+.dashboard-health-score {
+  text-align: center;
+  padding: 12px 0;
+}
+
+.health-score-value {
+  font-size: 48px;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -0.05em;
+  font-family: var(--font-mono, monospace);
+}
+
+.health-score-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-secondary);
+  margin-top: 4px;
+}
+
+/* ═══════════════════════════════════════════════
+ *  Dashboard Recent Commits
+ * ═══════════════════════════════════════════════ */
+
+.dashboard-commits {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.dashboard-commit-item {
+  display: grid;
+  grid-template-columns: 56px 1fr;
+  grid-template-rows: auto auto;
+  column-gap: 10px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: var(--surface-secondary, rgba(255,255,255,0.04));
+  border: 1px solid var(--border);
+}
+
+.dashboard-commit-hash {
+  grid-row: 1 / 3;
+  font-family: var(--font-mono, monospace);
+  font-size: 11px;
+  color: var(--accent);
+  font-weight: 600;
+  align-self: center;
+  letter-spacing: 0.03em;
+}
+
+.dashboard-commit-msg {
+  font-size: 13px;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dashboard-commit-meta {
+  font-size: 11px;
+  color: var(--text-secondary);
+  margin-top: 2px;
+}
+
+/* ═══════════════════════════════════════════════
+ *  Stat Flash Animation
+ * ═══════════════════════════════════════════════ */
+
+@keyframes statFlash {
+  0%   { background: rgba(59, 130, 246, 0.15); }
+  100% { background: transparent; }
+}
+
+.stat-flash {
+  animation: statFlash 0.4s ease;
+}
+
+/* ═══════════════════════════════════════════════
+ *  Keyboard Shortcuts Modal
+ * ═══════════════════════════════════════════════ */
+
+.shortcuts-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 4px 0;
+}
+
+.shortcut-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.shortcut-item:last-child {
+  border-bottom: none;
+}
+
+.shortcut-key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
+  padding: 3px 8px;
+  border-radius: 6px;
+  background: var(--surface-secondary, rgba(255,255,255,0.06));
+  border: 1px solid var(--border);
+  font-family: var(--font-mono, monospace);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+
+.shortcut-desc {
+  font-size: 13px;
+  color: var(--text-secondary);
+}

package/ui/tabs/dashboard.js

@@ -6,6 +6,7 @@ import {
   useState,
   useEffect,
   useCallback,
+  useRef,
 } from "preact/hooks";
 import htm from "htm";
 
@@ -96,6 +97,32 @@ const QUICK_ACTIONS = [
   },
 ];
 
+/* ─── AnimatedNumber ─── */
+function AnimatedNumber({ value, duration = 600, className = "" }) {
+  const displayRef = useRef(value);
+  const rafRef = useRef(null);
+  const [display, setDisplay] = useState(value);
+
+  useEffect(() => {
+    const from = displayRef.current;
+    const to = value;
+    if (from === to) return;
+    const start = performance.now();
+    const animate = (now) => {
+      const t = Math.min((now - start) / duration, 1);
+      const eased = 1 - Math.pow(1 - t, 3);
+      const current = Math.round(from + (to - from) * eased);
+      displayRef.current = current;
+      setDisplay(current);
+      if (t < 1) rafRef.current = requestAnimationFrame(animate);
+    };
+    rafRef.current = requestAnimationFrame(animate);
+    return () => rafRef.current && cancelAnimationFrame(rafRef.current);
+  }, [value, duration]);
+
+  return html`<span class="${className}">${display}</span>`;
+}
+
 /* ─── CreateTaskModal ─── */
 export function CreateTaskModal({ onClose }) {
   const [title, setTitle] = useState("");
@@ -190,6 +217,11 @@ export function DashboardTab() {
   const [showCreate, setShowCreate] = useState(false);
   const [showStartModal, setShowStartModal] = useState(false);
   const [uptime, setUptime] = useState(null);
+  // New state
+  const [now, setNow] = useState(() => new Date());
+  const [recentCommits, setRecentCommits] = useState([]);
+  const [flashKey, setFlashKey] = useState(0);
+  const prevCounts = useRef(null);
   const status = statusData.value;
   const executor = executorData.value;
   const project = projectSummary.value;
@@ -216,6 +248,19 @@ export function DashboardTab() {
   const slotPct = execData?.maxParallel
     ? ((execData.activeSlots || 0) / execData.maxParallel) * 100
     : 0;
+
+  // ── Health score (0–100) ──
+  let healthScore = 100;
+  if (executor?.paused) healthScore -= 20;
+  healthScore -= Math.min(40, errorRateValue * 2);
+  if ((execData?.activeSlots ?? 0) === 0 && backlog > 0) healthScore -= 10;
+  if (slotPct > 50 && blocked === 0) healthScore += 10;
+  healthScore = Math.min(100, Math.max(0, Math.round(healthScore)));
+
+  // ── Clock ──
+  const timeStr = now.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+  const tzStr = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
   const headerLine = `${totalActive} active · ${backlog} backlog · ${done} done${
     blocked ? ` · ${blocked} blocked` : ""
   }`;
@@ -258,6 +303,36 @@ export function DashboardTab() {
     return () => { active = false; };
   }, []);
 
+  // ── Listen for ve:create-task keyboard shortcut ──
+  useEffect(() => {
+    const handler = () => setShowCreate(true);
+    window.addEventListener("ve:create-task", handler);
+    return () => window.removeEventListener("ve:create-task", handler);
+  }, []);
+
+  // ── Real-time clock ──
+  useEffect(() => {
+    const t = setInterval(() => setNow(new Date()), 1000);
+    return () => clearInterval(t);
+  }, []);
+
+  // ── Recent commits (graceful 404) ──
+  useEffect(() => {
+    apiFetch("/api/recent-commits", { _silent: true })
+      .then((data) => { if (Array.isArray(data)) setRecentCommits(data.slice(0, 3)); })
+      .catch(() => {});
+  }, []);
+
+  // ── Flash metrics on counts change ──
+  useEffect(() => {
+    const current = JSON.stringify(counts);
+    const previous = JSON.stringify(prevCounts.current);
+    if (previous !== current) {
+      prevCounts.current = counts;
+      setFlashKey((k) => k + 1);
+    }
+  });
+
   const overviewMetrics = [
     {
       label: "Total tasks",
@@ -496,6 +571,9 @@ export function DashboardTab() {
           <span class="dashboard-chip">Mode ${mode}</span>
           <span class="dashboard-chip">SDK ${defaultSdk}</span>
           ${uptime ? html`<span class="dashboard-chip">${uptime}</span>` : null}
+          <span class="dashboard-chip dashboard-chip-clock">
+            ${timeStr} <span class="dashboard-chip-tz">${tzStr}</span>
+          </span>
           ${executor
             ? executor.paused
               ? html`<${Badge} status="error" text="Paused" />`
@@ -518,6 +596,10 @@ export function DashboardTab() {
               ${executor?.paused ? "Paused" : "Running"}
             </div>
           </div>
+          <div class="dashboard-health-score">
+            <div class="health-score-value" style="color: ${healthScore >= 80 ? 'var(--color-done)' : healthScore >= 50 ? 'var(--color-inreview)' : 'var(--color-error)'}">${healthScore}</div>
+            <div class="health-score-label">Health Score</div>
+          </div>
           <div class="dashboard-health-grid">
             <div class="dashboard-health-item">
               <div class="dashboard-health-label">Slots</div>
@@ -594,7 +676,7 @@ export function DashboardTab() {
               </div>
             `
             : html`
-              <div class="dashboard-metric-grid">
+              <div class="dashboard-metric-grid stat-flash" key=${flashKey}>
                 ${overviewMetrics.map(
                   (metric) => html`
                     <div
@@ -610,7 +692,9 @@ export function DashboardTab() {
                         class="dashboard-metric-value"
                         style="color: ${metric.color}"
                       >
-                        ${metric.value} ${trend(metric.trend)}
+                        ${typeof metric.value === "number"
+                          ? html`<${AnimatedNumber} value=${metric.value} />`
+                          : metric.value} ${trend(metric.trend)}
                       </div>
                       <div class="dashboard-metric-spark">
                         <${MiniSparkline}
@@ -798,6 +882,23 @@ export function DashboardTab() {
       ${showCreate &&
       html`<${CreateTaskModal} onClose=${() => setShowCreate(false)} />`}
 
+      ${recentCommits.length > 0 && html`
+        <${Card}
+          title=${html`<span class="dashboard-card-title"><span class="dashboard-title-icon">${ICONS.git || '🔀'}</span>Recent Commits</span>`}
+          className="dashboard-card dashboard-commits-card"
+        >
+          <div class="dashboard-commits">
+            ${recentCommits.map((c) => html`
+              <div class="dashboard-commit-item" key=${c.hash || c.message}>
+                <div class="dashboard-commit-hash">${(c.hash || '').slice(0, 7)}</div>
+                <div class="dashboard-commit-msg">${truncate(c.message || c.msg || '', 60)}</div>
+                <div class="dashboard-commit-meta">${c.author || ''} · ${formatRelative(c.date || c.timestamp)}</div>
+              </div>
+            `)}
+          </div>
+        <//>  
+      `}
+
       ${showStartModal &&
       html`
         <${StartTaskModal}

package/utils.mjs

@@ -217,3 +217,63 @@ export async function spawnAsync(cmd, args = [], options = {}) {
 export function yieldToEventLoop() {
   return new Promise((resolve) => setImmediate(resolve));
 }
+
+/**
+ * withRetry — run an async fn with exponential backoff on failure.
+ *
+ * @template T
+ * @param {() => Promise<T>} fn         — async operation to retry
+ * @param {object} [opts]
+ * @param {number} [opts.maxAttempts=3]  — total attempts
+ * @param {number} [opts.baseMs=1000]    — initial delay
+ * @param {number} [opts.maxMs=30000]    — cap delay
+ * @param {(err: Error, attempt: number) => boolean} [opts.retryIf] — optional guard
+ * @returns {Promise<T>}
+ */
+export async function withRetry(fn, opts = {}) {
+  const { maxAttempts = 3, baseMs = 1000, maxMs = 30000, retryIf } = opts;
+  let lastErr;
+  for (let attempt = 1; attempt <= maxAttempts; attempt++) {
+    try {
+      return await fn();
+    } catch (err) {
+      lastErr = err;
+      if (attempt >= maxAttempts) break;
+      if (retryIf && !retryIf(err, attempt)) break;
+      const jitter = Math.random() * 0.3 + 0.85; // 0.85–1.15x
+      const delay = Math.min(baseMs * Math.pow(2, attempt - 1) * jitter, maxMs);
+      await new Promise((r) => setTimeout(r, delay));
+    }
+  }
+  throw lastErr;
+}
+
+/**
+ * memoizeWithTtl — cache the result of a zero-args async factory for `ttlMs`.
+ * Returns a getter function that resolves the cached value or refreshes it.
+ *
+ * @template T
+ * @param {() => Promise<T>} factory
+ * @param {number} ttlMs
+ * @returns {() => Promise<T>}
+ */
+export function memoizeWithTtl(factory, ttlMs) {
+  let cache = null;
+  let expiry = 0;
+  let pending = null;
+  return async function get() {
+    const now = Date.now();
+    if (cache !== null && now < expiry) return cache;
+    if (pending) return pending;
+    pending = factory().then((v) => {
+      cache = v;
+      expiry = Date.now() + ttlMs;
+      pending = null;
+      return v;
+    }).catch((e) => {
+      pending = null;
+      throw e;
+    });
+    return pending;
+  };
+}