bosun 0.31.3 → 0.31.5

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,50 @@ 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",
+};
+
+// ── 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. */
@@ -224,12 +285,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 +334,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 +344,7 @@ export class ErrorDetector {
         confidence: 0,
         details: "No output to analyse",
         rawMatch: null,
+        severity: PATTERN_SEVERITY.unknown ?? "low",
       };
     }
 
@@ -307,14 +371,17 @@ 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",
+      remediation: REMEDIATION_HINTS[result.pattern] || null,
+    };
   }
 
   // ── recordError ─────────────────────────────────────────────────────────

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bosun",
-  "version": "0.31.3",
+  "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 } from "./utils.mjs";
+import { normalizeDedupKey, yieldToEventLoop, withRetry } 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
@@ -3152,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);
@@ -3235,12 +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}`,
-          );
-        });
+        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}`);
@@ -4795,6 +4829,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

@@ -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";
@@ -43,9 +59,12 @@ import {
   connectWebSocket,
   disconnectWebSocket,
   wsConnected,
+  loadingCount,
 } from "./modules/api.js";
 import {
   connected,
+  statusData,
+  executorData,
   refreshTab,
   toasts,
   initWsInvalidationListener,
@@ -107,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) {
@@ -124,17 +197,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 +307,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,33 +350,59 @@ 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 };
   }
   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) {
-      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}
+            <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>
+          ` : null}
         </div>
       `;
     }
-    return this.props.children;
+    return html`<div class="tab-content-enter">${this.props.children}</div>`;
   }
 }
 
@@ -364,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=${() =>
@@ -378,6 +538,7 @@ function SidebarNav() {
             >
               ${ICONS[tab.icon]}
               <span>${tab.label}</span>
+              ${badge > 0 ? html`<span class="nav-badge">${badge}</span>` : null}
             </button>
           `;
         })}
@@ -609,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=${() =>
@@ -628,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>
         `;
       })}
@@ -709,9 +876,30 @@ 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);
+
+  // ── 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(() => {
@@ -871,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);
   }, []);
@@ -922,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);
@@ -1055,6 +1261,7 @@ function App() {
   }, []);
 
   return html`
+    <div class="top-loading-bar" style="width: ${loadingPct}%; opacity: ${loadingVisible ? 1 : 0}"></div>
     <div
       class="app-shell"
       style=${shellStyle}
@@ -1128,9 +1335,10 @@ 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}>
+              <${TabErrorBoundary} key=${activeTab.value} tabName=${activeTab.value}>
                 <${CurrentTab} />
               <//>
             </main>