bosun 0.29.2 → 0.29.4

package/ui/components/workspace-switcher.js

@@ -469,19 +469,30 @@ export function WorkspaceSwitcher() {
 
   const activeWs = workspaces.value.find((ws) => ws.id === activeWorkspaceId.value);
   const wsList = workspaces.value;
+  const isLoading = workspacesLoading.value;
 
-  if (!wsList.length && !managerOpen) return null;
+  // Always render — even with no workspaces, show a manage button so users can add one
 
   return html`
     <div class="ws-switcher">
       <button
-        class="ws-switcher-btn"
-        onClick=${(e) => { e.stopPropagation(); haptic("light"); setOpen(!open); }}
-        title="Switch workspace"
+        class="ws-switcher-btn ${!wsList.length ? 'ws-switcher-btn-empty' : ''}"
+        onClick=${(e) => {
+          e.stopPropagation();
+          haptic("light");
+          if (!wsList.length) {
+            setManagerOpen(true);
+          } else {
+            setOpen(!open);
+          }
+        }}
+        title=${wsList.length ? "Switch workspace" : "Set up a workspace"}
       >
         <span class="ws-switcher-icon">⬡</span>
-        <span class="ws-switcher-name">${activeWs?.name || "Select Workspace"}</span>
-        <span class="ws-switcher-chevron ${open ? "open" : ""}">${open ? "▴" : "▾"}</span>
+        <span class="ws-switcher-name">
+          ${isLoading ? "Loading…" : (activeWs?.name || (wsList.length ? "Select Workspace" : "Set up workspace"))}
+        </span>
+        ${wsList.length ? html`<span class="ws-switcher-chevron ${open ? "open" : ""}">${open ? "▴" : "▾"}</span>` : null}
       </button>
 
       ${open && html`

package/ui/demo.html

@@ -237,6 +237,24 @@
       version: '0.26.2',
       tasks: { completed: 13, failed: 1, retried: 2, active: 2, queued: 3 },
       prs: { created: 15, merged: 11, pending: 2, ciFailures: 1 },
+      // counts consumed by dashboard metrics
+      counts: {
+        running: 2,
+        inprogress: 2,
+        inreview: 1,
+        review: 1,
+        done: 2,
+        todo: 2,
+        draft: 1,
+        error: 0,
+      },
+      backlog_remaining: 2,
+      // consumed by dashboard quality section
+      success_metrics: {
+        first_shot_rate: 72,
+        needed_fix: 3,
+        failed: 1,
+      },
     };
 
     const SEED_EXECUTORS = [
@@ -668,7 +686,7 @@
       if (route === '/api/status')
         return { data: STATE.status };
       if (route === '/api/executor')
-        return { data: { ...STATE.status, maxParallel: STATE.maxParallel, paused: STATE.paused, executors: STATE.executors } };
+        return { data: { ...STATE.status, maxParallel: STATE.maxParallel, paused: STATE.paused, executors: STATE.executors, activeSlots: STATE.executors.filter(e => e.status === 'active').length, sdk: 'auto' } };
       if (route === '/api/telemetry/summary')
         return { data: { status: 'ok', updatedAt: Date.now(), totals: { tasks: STATE.tasks.length, executors: STATE.executors.length } } };
       if (route === '/api/telemetry/errors')

package/ui/styles/sessions.css

@@ -35,8 +35,9 @@
   background: rgba(5, 6, 8, 0.5);
   opacity: 0;
   pointer-events: none;
-  transition: opacity 0.2s ease;
+  transition: opacity 0.28s cubic-bezier(0.32, 0.72, 0, 1);
   z-index: 140;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .session-drawer-backdrop.open {
@@ -93,9 +94,11 @@
     bottom: calc(var(--nav-height) + var(--safe-bottom));
     width: min(88vw, 360px);
     transform: translateX(-100%);
-    transition: transform 0.24s ease;
+    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
+    will-change: transform;
     z-index: 160;
     box-shadow: 12px 0 40px rgba(0, 0, 0, 0.35);
+    background: var(--bg-secondary);
   }
   .session-split.drawer-open .session-pane {
     transform: translateX(0);
@@ -150,7 +153,7 @@
   display: flex;
   align-items: center;
   padding: 0;
-  border-bottom: 1px solid var(--border, var(--border));
+  border-bottom: 1px solid var(--border);
   background: var(--bg-primary);
   flex-shrink: 0;
 }
@@ -177,6 +180,7 @@
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
+  transition: color var(--transition-fast), border-color var(--transition-fast);
 }
 
 .session-drawer-btn:hover {
@@ -184,6 +188,17 @@
   border-color: var(--border-strong);
 }
 
+.session-drawer-btn:active {
+  transform: scale(0.96);
+}
+
+/* On tablet+, the session pane is inline — hide the hamburger drawer toggle */
+@media (min-width: 769px) {
+  .session-drawer-btn {
+    display: none;
+  }
+}
+
 .chat-shell-title {
   display: flex;
   flex-direction: column;
@@ -569,6 +584,12 @@
 .chat-stream-dot.executing,
 .chat-stream-dot.streaming {
   background: var(--accent);
+  animation: streamDotPulse 1.8s ease-in-out infinite;
+}
+
+@keyframes streamDotPulse {
+  0%, 100% { box-shadow: 0 0 0 4px rgba(218, 119, 86, 0.1); }
+  50% { box-shadow: 0 0 0 6px rgba(218, 119, 86, 0.25); }
 }
 
 .chat-stream-dot.paused {
@@ -749,7 +770,12 @@
   flex: 1;
   min-height: 0;
   overflow-y: auto;
+  overflow-x: hidden;
   -webkit-overflow-scrolling: touch;
+  overscroll-behavior-y: contain;
+  scroll-padding-bottom: 80px;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
   padding: 20px 16px 48px;
   display: flex;
   flex-direction: column;
@@ -757,6 +783,23 @@
   align-items: stretch;
 }
 
+.chat-messages::-webkit-scrollbar {
+  width: 6px;
+}
+
+.chat-messages::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chat-messages::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+}
+
+.chat-messages::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.18);
+}
+
 .chat-load-earlier {
   display: flex;
   align-items: center;
@@ -821,6 +864,11 @@
   background: var(--bg-card);
   align-self: flex-start;
   box-shadow: var(--shadow-sm);
+  /* CSS containment — tells the browser each bubble is layout-independent,
+     reducing style recalc and layout thrashing on long message lists */
+  content-visibility: auto;
+  contain-intrinsic-size: auto 80px;
+  contain: layout style;
 }
 
 .chat-bubble.user {
@@ -888,19 +936,50 @@
   margin-top: 4px;
 }
 
+/* Subtle entrance for bubbles — only the last few get the animation
+   (content-visibility: auto on older bubbles skips them for free) */
+.chat-bubble:last-child,
+.chat-bubble:nth-last-child(2),
+.chat-bubble:nth-last-child(3) {
+  animation: chatBubbleIn 0.18s ease-out;
+}
+
+@keyframes chatBubbleIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
 .chat-jump-latest {
   position: absolute;
   left: 0;
   right: 0;
-  bottom: 16px;
+  /* position above the input bar (~60px) + gap */
+  bottom: 72px;
   display: flex;
   justify-content: center;
   pointer-events: none;
   z-index: 6;
+  animation: fadeSlideUp 0.2s ease;
 }
 
 .chat-jump-latest .btn {
   pointer-events: auto;
+  border-radius: var(--radius-full);
+  padding: 6px 16px;
+  font-size: 12px;
+  font-weight: 600;
+  box-shadow: var(--shadow-md);
+  backdrop-filter: blur(8px);
+  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.chat-jump-latest .btn:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-lg);
+}
+
+.chat-jump-latest .btn:active {
+  transform: scale(0.96);
 }
 
 /* ─── Code blocks ─── */
@@ -1253,8 +1332,8 @@ ul.md-list li::before {
   right: 0;
   max-height: 240px;
   overflow-y: auto;
-  background: var(--bg-card, var(--bg-card));
-  border: 1px solid var(--border, var(--border));
+  background: var(--bg-card);
+  border: 1px solid var(--border);
   border-radius: var(--radius-lg) var(--radius-lg) 0 0;
   box-shadow: var(--shadow-lg, 0 4px 24px rgba(0,0,0,.35));
   z-index: 9999;
@@ -1345,7 +1424,7 @@ ul.md-list li::before {
 .chat-input-area {
   position: relative;
   padding: 16px 16px;
-  border-top: 1px solid var(--border, var(--border));
+  border-top: 1px solid var(--border);
   background: var(--bg-surface, var(--bg-card));
   flex-shrink: 0;
 }
@@ -1391,20 +1470,12 @@ ul.md-list li::before {
   padding: 0 0 calc(12px + var(--safe-bottom, 0px));
 }
 
-.app-shell[data-tab="chat"] .chat-view-embedded .chat-messages {
-  padding: 0 0 16px;
-}
-
-.app-shell[data-tab="chat"] .chat-input-area {
-  padding: 0 0 calc(12px + var(--safe-bottom, 0px));
-}
-
 .chat-input-wrapper {
   display: flex;
   align-items: flex-end;
   gap: 8px;
-  background: var(--bg-card, var(--bg-card));
-  border: 1px solid var(--border, var(--border));
+  background: var(--bg-card);
+  border: 1px solid var(--border);
   border-radius: 24px;
   padding: 8px 8px 8px 16px;
   transition: border-color 0.15s, box-shadow 0.15s;
@@ -1413,8 +1484,8 @@ ul.md-list li::before {
 }
 
 .chat-input-wrapper:focus-within {
-  border-color: var(--accent, var(--color-primary, #3b82f6));
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent-soft, rgba(218, 119, 86, 0.12));
 }
 
 .chat-textarea {
@@ -1430,6 +1501,7 @@ ul.md-list li::before {
   min-height: 24px;
   max-height: 120px;
   padding: 4px 0;
+  scrollbar-width: thin;
 }
 
 .chat-textarea::placeholder {
@@ -1514,8 +1586,8 @@ ul.md-list li::before {
   justify-content: center;
   border: none;
   cursor: pointer;
-  padding: 0 16px;
-  min-width: 60px;
+  padding: 0 10px;
+  min-width: 68px;
   font-size: 11px;
   font-family: inherit;
   gap: 2px;
@@ -1556,6 +1628,7 @@ ul.md-list li::before {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.3px;
+  white-space: nowrap;
 }
 
 @keyframes session-pulse {
@@ -1752,3 +1825,76 @@ ul.md-list li::before {
   background: rgba(245, 158, 11, 0.1);
   border-radius: 4px;
 }
+
+/* ═══ Mobile Chat Refinements ═══ */
+@media (max-width: 768px) {
+  .chat-shell-inner {
+    padding: 8px 10px;
+    gap: 8px;
+  }
+
+  .chat-shell-name {
+    font-size: 13px;
+  }
+
+  .chat-shell-meta {
+    font-size: 10px;
+  }
+
+  .chat-input-wrapper {
+    padding: 6px 6px 6px 12px;
+    border-radius: 20px;
+  }
+
+  .chat-textarea {
+    font-size: 16px; /* prevent iOS zoom on focus */
+    max-height: 100px;
+  }
+
+  .chat-input-area .chat-send-btn {
+    width: 34px;
+    height: 34px;
+    font-size: 15px;
+  }
+
+  .chat-input-hint {
+    font-size: 10px;
+    padding: 3px 2px 0;
+  }
+
+  .chat-bubble {
+    padding: 8px 12px;
+    font-size: 14px;
+  }
+
+  .chat-bubble.user {
+    max-width: min(85%, 480px);
+  }
+
+  .chat-messages {
+    padding: 12px 10px 40px;
+    gap: 8px;
+  }
+}
+
+/* ═══ Desktop Chat Refinements ═══ */
+@media (min-width: 1200px) {
+  .chat-messages {
+    padding: 24px 20px 48px;
+    gap: 10px;
+  }
+
+  .chat-shell-inner {
+    max-width: 1080px;
+    padding: 12px 16px;
+  }
+
+  /* Wider input area on large screens */
+  .chat-input-wrapper {
+    max-width: min(840px, 100%);
+  }
+
+  .chat-input-hint {
+    max-width: min(840px, 100%);
+  }
+}

package/ui/styles/workspace-switcher.css

@@ -27,6 +27,17 @@
   border-color: var(--color-primary, #10b981);
 }
 
+.ws-switcher-btn.ws-switcher-btn-empty {
+  border-style: dashed;
+  opacity: 0.8;
+  font-style: italic;
+}
+
+.ws-switcher-btn.ws-switcher-btn-empty:hover {
+  opacity: 1;
+  font-style: normal;
+}
+
 .ws-switcher-icon {
   font-size: 14px;
   opacity: 0.7;
@@ -660,6 +671,16 @@
   to { transform: rotate(360deg); }
 }
 
+/* ── Modal toolbar (inside shared Modal body) ──────────────── */
+.ws-manager-modal-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border);
+}
+
 /* ── Responsive ──────────────────────────────────────────── */
 @media (max-width: 540px) {
   .ws-manager-panel {

package/ui/tabs/chat.js

@@ -386,6 +386,16 @@ export function ChatTab() {
     } catch { /* signal read error - ignore */ }
   }, [isMobile]);
 
+  /* ── Auto-focus textarea when switching sessions (desktop only) ── */
+  useEffect(() => {
+    if (!sessionId || isMobile) return;
+    // Delay focus to let the ChatView mount first
+    const timer = setTimeout(() => {
+      if (textareaRef.current) textareaRef.current.focus();
+    }, 150);
+    return () => clearTimeout(timer);
+  }, [sessionId, isMobile]);
+
   /* ── Slash command filtering ──
      Use useMemo with no signal deps to avoid subscribing ChatTab to
      activeAgentInfo. The commands list only matters when the user is

package/ui/tabs/dashboard.js

@@ -521,39 +521,33 @@ export function DashboardTab() {
               `,
             )}
           </div>
-        <//>
-
-        <${Card}
-          title=${html`<span class="dashboard-card-title"
-            ><span class="dashboard-title-icon">${ICONS.check}</span>Active Work</span
-          >`}
-          className="dashboard-card dashboard-active"
-        >
-          <div class="dashboard-work-layout">
-            <div class="dashboard-work-list">
-              ${workItems.map(
-                (item) => html`
-                  <div class="dashboard-work-item">
-                    <div class="dashboard-work-left">
-                      <span
-                        class="dashboard-work-dot"
-                        style="background: ${item.color}"
-                      ></span>
-                      <span class="dashboard-work-label">${item.label}</span>
+          ${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">
+                ${workItems.map(
+                  (item) => html`
+                    <div class="dashboard-work-item">
+                      <div class="dashboard-work-left">
+                        <span
+                          class="dashboard-work-dot"
+                          style="background: ${item.color}"
+                        ></span>
+                        <span class="dashboard-work-label">${item.label}</span>
+                      </div>
+                      <span class="dashboard-work-value">${item.value}</span>
                     </div>
-                    <span class="dashboard-work-value">${item.value}</span>
-                  </div>
-                `,
-              )}
-            </div>
-            <div class="dashboard-work-chart">
-              <${DonutChart} segments=${segments} size=${110} strokeWidth=${10} />
-              <div class="dashboard-work-meta">
-                Active progress · ${progressPct}% engaged
+                  `,
+                )}
+              </div>
+              <div class="dashboard-work-chart">
+                <${DonutChart} segments=${segments} size=${90} strokeWidth=${9} />
+                <div class="dashboard-work-meta">
+                  ${progressPct}% engaged
+                </div>
+                <${ProgressBar} percent=${progressPct} />
               </div>
-              <${ProgressBar} percent=${progressPct} />
             </div>
-          </div>
+          `}
         <//>
 
         <${Card}
@@ -683,8 +677,8 @@ export function DashboardTab() {
                           ${truncate(task.title || "(untitled)", 50)}
                         </div>
                         <div class="meta-text">
-                          ${task.id}${task.updated_at
-                            ? ` · ${formatRelative(task.updated_at)}`
+                          ${task.id}${(task.updated_at || task.updated)
+                            ? ` · ${formatRelative(task.updated_at || task.updated)}`
                             : ""}
                         </div>
                       </div>

package/ui/tabs/tasks.js

@@ -89,6 +89,15 @@ const SORT_OPTIONS = [
   { value: "title", label: "Title" },
 ];
 
+/* Maps snapshot-bar labels → tasksFilter values */
+const SNAPSHOT_STATUS_MAP = {
+  Backlog: "todo",
+  Active: "inprogress",
+  Review: "inreview",
+  Done: "done",
+  Errors: "error",
+};
+
 const PRIORITY_ORDER = { critical: 0, high: 1, medium: 2, low: 3, "": 4 };
 
 const SYSTEM_TAGS = new Set([
@@ -994,8 +1003,10 @@ export function TasksTab() {
         return dir * (av - bv);
       }
       if (listSortCol === "updated") {
-        av = a.updated_at ? new Date(a.updated_at).getTime() : 0;
-        bv = b.updated_at ? new Date(b.updated_at).getTime() : 0;
+        const tsA = a.updated_at || a.updated;
+        const tsB = b.updated_at || b.updated;
+        av = tsA ? (typeof tsA === 'number' ? tsA : new Date(tsA).getTime()) : 0;
+        bv = tsB ? (typeof tsB === 'number' ? tsB : new Date(tsB).getTime()) : 0;
         return dir * (av - bv);
       }
       if (listSortCol === "status") { av = a.status || ""; bv = b.status || ""; }
@@ -1609,11 +1620,20 @@ export function TasksTab() {
 
     <div class="snapshot-bar">
       ${summaryMetrics.map((m) => html`
-        <span key=${m.label} class="snapshot-pill">
+        <button
+          key=${m.label}
+          class="snapshot-pill snapshot-pill-btn ${!isKanban && filterVal === SNAPSHOT_STATUS_MAP[m.label] ? 'snapshot-pill-active' : ''}"
+          onClick=${() => {
+            if (isKanban) return;
+            const statusVal = SNAPSHOT_STATUS_MAP[m.label];
+            if (statusVal !== undefined) handleFilter(filterVal === statusVal ? 'all' : statusVal);
+          }}
+          title=${isKanban ? m.label : `Filter by ${m.label}`}
+        >
           <span class="snapshot-dot" style="background:${m.color};" />
           <strong class="snapshot-val">${m.value}</strong>
           <span class="snapshot-lbl">${m.label}</span>
-        </span>
+        </button>
       `)}
       <span class="snapshot-view-tag">${isKanban ? "⬛ Board" : "☰ List"}</span>
     </div>
@@ -1632,6 +1652,23 @@ export function TasksTab() {
         cursor:pointer;
       }
       .actions-dropdown-item:hover { background:var(--hover-bg, rgba(255,255,255,.08)); }
+      .snapshot-pill-btn {
+        background: none;
+        border: 1px solid transparent;
+        border-radius: 999px;
+        cursor: pointer;
+        padding: 2px 8px;
+        transition: border-color 0.15s, background 0.15s;
+        font: inherit;
+      }
+      .snapshot-pill-btn:hover {
+        border-color: var(--border);
+        background: var(--bg-card-hover, rgba(255,255,255,0.05));
+      }
+      .snapshot-pill-active {
+        border-color: var(--accent) !important;
+        background: rgba(59,130,246,0.12) !important;
+      }
       @media (max-width: 640px) {
         .actions-label { display:none; }
       }
@@ -1706,8 +1743,8 @@ export function TasksTab() {
                       : html`<span class="task-td-empty">—</span>`}
                   </td>
                   <td class="task-td task-td-updated">
-                    ${task.updated_at
-                      ? html`<span class="task-td-date">${formatRelative(task.updated_at)}</span>`
+                    ${(task.updated_at || task.updated)
+                      ? html`<span class="task-td-date">${formatRelative(task.updated_at || task.updated)}</span>`
                       : html`<span class="task-td-empty">—</span>`}
                   </td>
                 </tr>

package/ui-server.mjs

@@ -3435,6 +3435,18 @@ async function handleApi(req, res, url) {
     return;
   }
 
+  if (path === "/api/workspace-health") {
+    try {
+      const { runWorkspaceHealthCheck } = await import("./config-doctor.mjs");
+      const configDir = resolveUiConfigDir();
+      const result = runWorkspaceHealthCheck({ configDir });
+      jsonResponse(res, 200, { ok: result.ok, data: result });
+    } catch (err) {
+      jsonResponse(res, 500, { ok: false, error: err.message });
+    }
+    return;
+  }
+
   if (path === "/api/worktrees") {
     try {
       const worktrees = listActiveWorktrees(repoRoot);

package/workspace-manager.mjs

@@ -26,6 +26,39 @@ import { execSync, spawnSync } from "node:child_process";
 
 const TAG = "[workspace-manager]";
 
+// Lazy-loaded reference to repo-config.mjs (resolved on first use)
+let _repoConfigModule = null;
+
+/**
+ * Ensure repo-level AI executor configs exist after clone/pull.
+ * Uses synchronous import cache — repo-config.mjs is pure sync.
+ * @param {string} repoPath  Absolute path to the repo directory
+ */
+function ensureRepoAIConfigs(repoPath) {
+  try {
+    if (!_repoConfigModule) {
+      // repo-config.mjs is ESM but fully synchronous internally.
+      // We pre-populate the cache via dynamic import at module init.
+      return; // Will be populated after first async import
+    }
+    const { ensureRepoConfigs, printRepoConfigSummary } = _repoConfigModule;
+    const result = ensureRepoConfigs(repoPath);
+    // Only log if something was created/updated
+    const anyChange = Object.values(result).some((r) => r.created || r.updated);
+    if (anyChange) {
+      console.log(TAG, `Repo-level AI configs for ${basename(repoPath)}:`);
+      printRepoConfigSummary(result, (msg) => console.log(TAG, msg));
+    }
+  } catch (err) {
+    console.warn(TAG, `Could not ensure repo AI configs: ${err.message}`);
+  }
+}
+
+// Pre-load repo-config.mjs asynchronously at module init time
+import("./repo-config.mjs")
+  .then((mod) => { _repoConfigModule = mod; })
+  .catch(() => { /* repo-config not available — skip */ });
+
 // ── Path Helpers ─────────────────────────────────────────────────────────────
 
 /**
@@ -313,8 +346,12 @@ export function addRepoToWorkspace(configDir, workspaceId, { url, name, branch,
     }
     cloned = true;
     console.log(TAG, `Cloned ${repoName} successfully`);
+    // Ensure repo-level AI executor configs exist after fresh clone
+    ensureRepoAIConfigs(repoPath);
   } else {
     console.log(TAG, `Repository ${repoName} already exists at ${repoPath}`);
+    // Ensure repo-level configs are up to date even for existing repos
+    ensureRepoAIConfigs(repoPath);
   }
 
   const slug = extractSlug(url);