bosun 0.40.2 → 0.40.4

package/ui/styles/components.css

@@ -5461,14 +5461,49 @@ select.input {
     radial-gradient(circle at 10% 20%, rgba(249, 115, 22, 0.12), transparent 40%),
     radial-gradient(circle at 85% 80%, rgba(56, 189, 248, 0.08), transparent 40%),
     var(--bg-card);
-  overflow: auto;
-  padding: 10px;
+  overflow: hidden;
+  padding: 8px;
+  min-height: 460px;
+  touch-action: none;
+  cursor: grab;
+}
+
+.task-dag-canvas-wrap.is-panning {
+  cursor: grabbing;
 }
 
 .task-dag-canvas {
   width: 100%;
   min-width: 680px;
-  height: 420px;
+  height: 460px;
+}
+
+.task-dag-header-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.task-dag-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.task-dag-zoom-pill,
+.task-dag-wire-pill {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--bg-card-hover);
+  padding: 3px 8px;
+  font-size: 11px;
+  color: var(--text-secondary);
 }
 
 .dag-node rect {
@@ -5480,6 +5515,11 @@ select.input {
   filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
 }
 
+.dag-node-selected rect {
+  stroke: var(--accent);
+  filter: drop-shadow(0 0 0 2px rgba(56, 189, 248, 0.25));
+}
+
 @media (max-width: 900px) {
   .task-comment-composer {
     grid-template-columns: 1fr;

package/ui/styles/kanban.css

@@ -195,9 +195,12 @@ body.kanban-dragging .kanban-card {
   background: var(--bg-card);
   border-radius: var(--radius-lg, 12px);
   padding: 14px;
-  /* Use the Telegram stable viewport height, not raw 100vh which Telegram
-     overrides — prevents columns being too short or clipped on the web app */
-  max-height: calc(var(--viewport-stable-height, 100vh) - 180px);
+  overflow: hidden;
+  /* Use the stable viewport height so each column keeps its own scroll area
+     without feeling too tall on desktop or cramped on mobile. */
+  height: clamp(360px, calc(var(--viewport-stable-height, 100vh) - 220px), 760px);
+  max-height: clamp(360px, calc(var(--viewport-stable-height, 100vh) - 220px), 760px);
+  min-height: 360px;
   position: relative;
   border: 1px solid var(--border);
   /* Limit layout recalculations to within the column — columns don't affect
@@ -289,13 +292,27 @@ body.kanban-dragging .kanban-card {
   flex-direction: column;
   gap: 8px;
   overflow-y: auto;
-  flex: 1;
-  padding: 4px;
+  overflow-x: hidden;
+  flex: 1 1 auto;
+  padding: 4px 4px 0;
   min-height: 0;
+  scrollbar-gutter: stable;
+  -webkit-overflow-scrolling: touch;
   touch-action: pan-y;
   overscroll-behavior-y: contain;
 }
 
+.kanban-column-footer {
+  position: sticky;
+  bottom: 0;
+  flex-shrink: 0;
+  z-index: 2;
+  margin: 0 -14px -14px;
+  padding: 6px 14px 12px;
+  background: linear-gradient(to top, var(--bg-card) 72%, rgba(0, 0, 0, 0));
+  border-radius: 0 0 var(--radius-lg, 12px) var(--radius-lg, 12px);
+}
+
 .kanban-cards > * {
   flex-shrink: 0;
 }
@@ -484,9 +501,9 @@ body.kanban-dragging .kanban-card {
 }
 
 .kanban-scroll-fade {
-  height: 16px;
+  height: 10px;
   flex-shrink: 0;
-  background: linear-gradient(to top, var(--bg-card), transparent);
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.08), transparent);
   border-radius: 0 0 var(--radius-lg, 12px) var(--radius-lg, 12px);
   pointer-events: none;
   margin: 0 -12px -12px;
@@ -506,7 +523,8 @@ body.kanban-dragging .kanban-card {
 
   .kanban-column {
     min-width: 280px;
-    max-height: none;
+    height: clamp(420px, calc(var(--viewport-stable-height, 100vh) - 210px), 840px);
+    max-height: clamp(420px, calc(var(--viewport-stable-height, 100vh) - 210px), 840px);
   }
 }
 
@@ -523,6 +541,8 @@ body.kanban-dragging .kanban-card {
     flex: 0 0 85%;
     min-width: 260px;
     max-width: 85%;
+    height: clamp(380px, calc(var(--viewport-stable-height, 100vh) - 190px), 680px);
+    max-height: clamp(380px, calc(var(--viewport-stable-height, 100vh) - 190px), 680px);
     scroll-snap-align: start;
     scroll-snap-stop: always;
   }
@@ -539,6 +559,8 @@ body.kanban-dragging .kanban-card {
   .kanban-column {
     min-width: 86vw;
     max-width: 86vw;
+    height: clamp(360px, calc(var(--viewport-stable-height, 100vh) - 170px), 620px);
+    max-height: clamp(360px, calc(var(--viewport-stable-height, 100vh) - 170px), 620px);
     scroll-snap-align: start;
     padding: 12px;
   }
@@ -548,9 +570,12 @@ body.kanban-dragging .kanban-card {
   flex-direction: column;
   gap: 8px;
   overflow-y: auto;
-  flex: 1;
+  overflow-x: hidden;
+  flex: 1 1 auto;
   padding: 4px;
   min-height: 0;
+  scrollbar-gutter: stable;
+  -webkit-overflow-scrolling: touch;
   touch-action: pan-y;
   overscroll-behavior-y: contain;
 }
@@ -582,6 +607,9 @@ body.kanban-dragging .kanban-card {
 }
 
 .kanban-column-head {
+  flex-shrink: 0;
+  position: relative;
+  z-index: 2;
   border-radius: calc(var(--radius-md, 8px) - 2px);
   background:
     linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)),
@@ -595,12 +623,39 @@ body.kanban-dragging .kanban-card {
 }
 
 .kanban-load-more {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 34px;
   text-align: center;
   font-size: 12px;
   color: var(--text-secondary);
-  opacity: 0.8;
-  padding: 8px 6px 12px;
+  opacity: 0.94;
+  padding: 8px 10px;
   letter-spacing: 0.01em;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  cursor: pointer;
+  font-family: inherit;
+  backdrop-filter: blur(10px);
+}
+
+.kanban-load-more:hover,
+.kanban-load-more:focus-visible {
+  color: var(--text-primary);
+}
+
+.kanban-load-more:disabled {
+  cursor: progress;
+  opacity: 0.7;
+}
+
+.kanban-load-more-icon {
+  font-size: 15px;
+  line-height: 1;
 }
 
 

package/ui/styles.monolith.css

@@ -710,6 +710,75 @@ select.input {
   animation: slideUp 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
+.modal-content.modal-side-sheet {
+  width: min(100vw, var(--modal-sheet-width, 760px));
+  max-width: min(100vw, var(--modal-sheet-width, 760px));
+  height: 100dvh;
+  max-height: 100dvh;
+  margin: 0 0 0 auto;
+  border-radius: 24px 0 0 24px;
+  padding: 0;
+  overflow: hidden;
+  animation: slideInRight 0.24s ease;
+  position: relative;
+}
+
+.modal-side-sheet .modal-header {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  margin: 0;
+  padding: 18px 20px 14px;
+  border-bottom: 1px solid var(--border);
+  background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
+  backdrop-filter: blur(10px);
+}
+
+.modal-side-sheet .modal-title {
+  margin-bottom: 0;
+  padding-right: 36px;
+}
+
+.modal-side-sheet .modal-handle {
+  display: none;
+}
+
+.modal-side-sheet .modal-body {
+  height: calc(100dvh - 72px);
+  overflow: auto;
+  padding: 18px 20px calc(24px + var(--safe-bottom));
+}
+
+.modal-sheet-resizer {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 12px;
+  cursor: ew-resize;
+  z-index: 4;
+}
+
+.modal-sheet-resizer::after {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 18px;
+  bottom: 18px;
+  width: 2px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, transparent, var(--border-strong), transparent);
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(24px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
 .modal-handle {
   width: 36px;
   height: 4px;
@@ -1058,4 +1127,24 @@ select.input {
   .modal-overlay {
     align-items: center;
   }
+
+  .modal-content.modal-side-sheet {
+    margin-bottom: 0;
+  }
+}
+
+@media (max-width: 900px) {
+  .modal-content.modal-side-sheet {
+    width: 100vw;
+    max-width: 100vw;
+    border-radius: 0;
+  }
+
+  .modal-side-sheet .modal-body {
+    height: calc(100dvh - 68px);
+  }
+
+  .modal-sheet-resizer {
+    display: none;
+  }
 }

package/ui/tabs/agents.js

@@ -126,6 +126,89 @@ function fleetThreadKey(thread, index) {
   return `thread-${index}:${taskKey}:${id}`;
 }
 
+function buildSessionLogQueryParts(values = []) {
+  return Array.from(
+    new Set(
+      values
+        .map((value) => String(value || "").trim())
+        .filter(Boolean),
+    ),
+  );
+}
+
+function buildSessionLogQuery(values = []) {
+  return buildSessionLogQueryParts(values).join(" ");
+}
+
+function isSessionSignalAction(action = {}) {
+  const level = String(action?.level || "").toLowerCase();
+  const label = String(action?.label || "");
+  return (
+    level === "error"
+    || /(warn|error|failed|exception|timeout|anomal|retry|blocked|fatal)/i.test(label)
+  );
+}
+
+function buildSessionFocusedLogText(entry, rawLogText = "") {
+  const lines = [];
+  const session = entry?.session || null;
+  const insights = session?.insights || null;
+  const totals = insights?.totals || null;
+  const recentActions = Array.isArray(insights?.recentActions) ? insights.recentActions : [];
+  const signalActions = recentActions.filter(isSessionSignalAction);
+  const editedFiles = Array.isArray(insights?.activityDiff?.files) ? insights.activityDiff.files : [];
+  const queryParts = buildSessionLogQueryParts([
+    entry?.slot?.taskId,
+    entry?.session?.taskId,
+    entry?.session?.id,
+    entry?.slot?.branch,
+    entry?.session?.branch,
+  ]);
+
+  lines.push("Session-focused signals");
+  lines.push("=====================");
+  lines.push(
+    `Session: ${session?.title || session?.taskTitle || entry?.slot?.taskTitle || entry?.slot?.taskId || entry?.session?.id || "unknown"}`,
+  );
+  if (queryParts.length) {
+    lines.push(`Keys: ${queryParts.join(" | ")}`);
+  }
+  if (totals) {
+    lines.push(
+      `Totals: ${totals.messages || 0} messages, ${totals.toolCalls || 0} tool calls, ${totals.errors || 0} errors`,
+    );
+  }
+  if (signalActions.length) {
+    lines.push("");
+    lines.push("Warnings / errors");
+    lines.push("-----------------");
+    signalActions.slice(0, 8).forEach((action) => {
+      lines.push(`- [${String(action.timestamp || "").replace("T", " ").replace("Z", "")}] ${action.label}`);
+    });
+  }
+  if (editedFiles.length) {
+    lines.push("");
+    lines.push("Touched files");
+    lines.push("-------------");
+    editedFiles.slice(0, 8).forEach((file) => {
+      lines.push(`- ${file.path} (${file.edits || 0} edits)`);
+    });
+  }
+
+  const raw = String(rawLogText || "").trim();
+  if (raw) {
+    lines.push("");
+    lines.push("Raw focused log lines");
+    lines.push("---------------------");
+    lines.push(raw);
+  } else if (!signalActions.length) {
+    lines.push("");
+    lines.push("No session-specific warnings or log lines found yet.");
+  }
+
+  return lines.join("\n");
+}
+
 /* ─── Workspace Viewer Modal ─── */
 function WorkspaceViewer({ agent, onClose }) {
   const [logText, setLogText] = useState("Loading…");
@@ -147,7 +230,11 @@ function WorkspaceViewer({ agent, onClose }) {
   const [expandedModelResponse, setExpandedModelResponse] = useState(false);
   const logRef = useRef(null);
 
-  const query = agent.branch || agent.taskId || agent.sessionId || "";
+  const query = buildSessionLogQuery([
+    agent.sessionId,
+    agent.taskId,
+    agent.branch,
+  ]);
   const linkedSession =
     (sessionsData.value || []).find((s) => {
       if (!s) return false;
@@ -1146,7 +1233,7 @@ export function AgentsTab() {
     let active = true;
     const refreshTaskSessions = () => {
       if (!active) return;
-      loadSessions({ type: "task" });
+      loadSessions({ type: "task", workspace: "all" });
     };
     refreshTaskSessions();
     const interval = setInterval(refreshTaskSessions, 5000);
@@ -1790,7 +1877,7 @@ function ContextViewer({ sessionId }) {
 }
 
 /* ─── Fleet Full Session View ─── */
-function FleetSessionsPanel({ slots, onOpenWorkspace, onForceStop }) {
+function FleetSessionsPanel({ slots, taskFallbackEntries = [], onOpenWorkspace, onForceStop }) {
   const [detailTab, setDetailTab] = useState("stream");
   const [sessionScope, setSessionScope] = useState("active");
   const [selectedEntryKey, setSelectedEntryKey] = useState(null);
@@ -1802,7 +1889,7 @@ function FleetSessionsPanel({ slots, onOpenWorkspace, onForceStop }) {
      underlying data actually changes – prevents infinite render loops that
      previously caused "insertBefore" DOM errors. */
   const entries = useMemo(() => {
-    return (slots || [])
+    const slotEntries = (slots || [])
       .map((slot, index) => {
         const session =
           allSessions.find((s) => s?.id && slot?.sessionId && s.id === slot.sessionId) ||
@@ -1819,7 +1906,51 @@ function FleetSessionsPanel({ slots, onOpenWorkspace, onForceStop }) {
         const bScore = new Date(b.slot?.startedAt || 0).getTime() || 0;
         return bScore - aScore;
       });
-  }, [slots, allSessions]);
+
+    const activeSessionIds = new Set(
+      slotEntries.map((entry) => String(entry?.session?.id || "").trim()).filter(Boolean),
+    );
+    const activeTaskIds = new Set(
+      slotEntries.map((entry) => String(entry?.slot?.taskId || entry?.session?.taskId || "").trim()).filter(Boolean),
+    );
+    const fallbackEntries = (taskFallbackEntries || [])
+      .filter((task) => {
+        const taskId = String(task?.id || task?.taskId || "").trim();
+        if (!taskId) return false;
+        if (activeTaskIds.has(taskId) || activeSessionIds.has(taskId)) return false;
+        return true;
+      })
+      .map((task, index) => ({
+        key: `task-${String(task?.id || task?.taskId || index).trim()}`,
+        slot: {
+          taskId: String(task?.id || task?.taskId || "").trim(),
+          taskTitle: task?.title || task?.taskTitle || "(untitled task)",
+          branch: task?.branchName || task?.branch || task?.meta?.branchName || "",
+          baseBranch: task?.baseBranch || task?.meta?.baseBranch || null,
+          status: task?.status || task?.runtimeSnapshot?.state || "idle",
+          sessionId: String(task?.id || task?.taskId || "").trim(),
+          startedAt:
+            task?.lastActivityAt ||
+            task?.updatedAt ||
+            task?.createdAt ||
+            null,
+          synthetic: true,
+        },
+        index: (slots || []).length + index,
+        session:
+          allSessions.find((session) => {
+            const sessionTaskId = String(session?.taskId || session?.id || "").trim();
+            return sessionTaskId === String(task?.id || task?.taskId || "").trim();
+          }) || null,
+        isTaskFallback: true,
+      }));
+
+    return [...slotEntries, ...fallbackEntries].sort((a, b) => {
+      const aScore = new Date(a.slot?.startedAt || a.session?.lastActiveAt || 0).getTime() || 0;
+      const bScore = new Date(b.slot?.startedAt || b.session?.lastActiveAt || 0).getTime() || 0;
+      return bScore - aScore;
+    });
+  }, [slots, allSessions, taskFallbackEntries]);
 
   const historyEntries = useMemo(() => {
     const activeSessionIds = new Set(
@@ -1886,7 +2017,11 @@ function FleetSessionsPanel({ slots, onOpenWorkspace, onForceStop }) {
     visibleEntries.find((entry) => entry.key === selectedEntryKey)
     || visibleEntries[0]
     || null;
-  const sessionId = selectedEntry?.session?.id || null;
+  const sessionId =
+    selectedEntry?.session?.id
+    || selectedEntry?.slot?.sessionId
+    || selectedEntry?.slot?.taskId
+    || null;
   const contextId = sessionId || selectedEntry?.slot?.taskId || null;
 
   useEffect(() => {
@@ -1894,12 +2029,14 @@ function FleetSessionsPanel({ slots, onOpenWorkspace, onForceStop }) {
   }, [sessionId]);
 
   useEffect(() => {
-    const query =
-      selectedEntry?.slot?.branch ||
-      selectedEntry?.slot?.taskId ||
-      selectedEntry?.session?.taskId ||
-      selectedEntry?.session?.id ||
-      "";
+    const query = buildSessionLogQuery([
+      selectedEntry?.session?.id,
+      selectedEntry?.slot?.sessionId,
+      selectedEntry?.slot?.taskId,
+      selectedEntry?.session?.taskId,
+      selectedEntry?.slot?.branch,
+      selectedEntry?.session?.branch,
+    ]);
     if (!query) {
       setLogText("(no logs yet)");
       return undefined;
@@ -1930,6 +2067,8 @@ function FleetSessionsPanel({ slots, onOpenWorkspace, onForceStop }) {
     };
   }, [selectedEntry?.key]);
 
+  const focusedLogText = buildSessionFocusedLogText(selectedEntry, logText);
+
   return html`
     <${Card}
       title="Fleet Session View"
@@ -1985,7 +2124,9 @@ function FleetSessionsPanel({ slots, onOpenWorkspace, onForceStop }) {
                   <div class="fleet-slot-item-meta">
                     ${entry.isHistory
                       ? `Session ${entry.session?.id || "unknown"} · ${entry.session?.status || "unknown"}`
-                      : `Slot ${(entry.index ?? 0) + 1} · ${entry.slot?.taskId || "no-task-id"}`}
+                      : entry.isTaskFallback
+                        ? `Task only · ${entry.slot?.status || "unknown"} · ${entry.slot?.taskId || "no-task-id"}`
+                        : `Slot ${(entry.index ?? 0) + 1} · ${entry.slot?.taskId || "no-task-id"}`}
                     ${entry.isHistory && (entry.session?.lastActiveAt || entry.session?.updatedAt || entry.session?.createdAt)
                       ? ` · ${formatRelative(entry.session?.lastActiveAt || entry.session?.updatedAt || entry.session?.createdAt)}`
                       : ""}
@@ -2008,9 +2149,11 @@ function FleetSessionsPanel({ slots, onOpenWorkspace, onForceStop }) {
                     </div>
                     <div class="task-card-meta">
                       ${selectedEntry.slot?.taskId || selectedEntry.session?.taskId || selectedEntry.session?.id || "?"}
-                      ${selectedEntry.slot
-                        ? ` · Slot ${(selectedEntry.index ?? 0) + 1}`
-                        : ` · ${selectedEntry.session?.status || "history"}`}
+                      ${selectedEntry.isTaskFallback
+                        ? ` · ${selectedEntry.slot?.status || "task"}`
+                        : selectedEntry.slot
+                          ? ` · Slot ${(selectedEntry.index ?? 0) + 1}`
+                          : ` · ${selectedEntry.session?.status || "history"}`}
                       ${selectedEntry.slot?.branch
                         ? ` · ${selectedEntry.slot.branch}`
                         : selectedEntry.session?.branch
@@ -2018,7 +2161,7 @@ function FleetSessionsPanel({ slots, onOpenWorkspace, onForceStop }) {
                           : ""}
                     </div>
                   </div>
-                  ${selectedEntry.slot && html`
+                  ${selectedEntry.slot && !selectedEntry.isTaskFallback && html`
                     <div class="btn-row">
                       <${Button} variant="text" size="small" onClick=${() => onOpenWorkspace(selectedEntry.slot, selectedEntry.index)}>
                         ${iconText(":search: Workspace")}
@@ -2068,7 +2211,10 @@ function FleetSessionsPanel({ slots, onOpenWorkspace, onForceStop }) {
                           `
                       : detailTab === "diff"
                         ? sessionId
-                          ? html`<${DiffViewer} sessionId=${sessionId} />`
+                          ? html`<${DiffViewer}
+                              sessionId=${sessionId}
+                              activitySummary=${selectedEntry?.session?.insights?.activityDiff || null}
+                            />`
                           : html`
                               <div class="chat-view chat-empty-state">
                                 <div class="session-empty-icon">${resolveIcon(":edit:")}</div>
@@ -2076,7 +2222,7 @@ function FleetSessionsPanel({ slots, onOpenWorkspace, onForceStop }) {
                               </div>
                             `
                         : detailTab === "logs"
-                          ? html`<div class="workspace-log fleet-session-log" ref=${logRef}>${logText}</div>`
+                          ? html`<div class="workspace-log fleet-session-log" ref=${logRef}>${focusedLogText}</div>`
                           : null}
                 </div>
               `
@@ -2097,12 +2243,13 @@ export function FleetSessionsTab() {
   const executor = executorData.value;
   const execData = executor?.data;
   const slots = execData?.slots || [];
+  const [taskFallbackEntries, setTaskFallbackEntries] = useState([]);
 
   useEffect(() => {
     let active = true;
     const refreshTaskSessions = () => {
       if (!active) return;
-      loadSessions({ type: "task" });
+      loadSessions({ type: "task", workspace: "all" });
     };
     refreshTaskSessions();
     const interval = setInterval(refreshTaskSessions, 5000);
@@ -2112,6 +2259,32 @@ export function FleetSessionsTab() {
     };
   }, []);
 
+  useEffect(() => {
+    let active = true;
+    const loadFallbackTasks = () => {
+      if (!active) return;
+      apiFetch("/api/tasks?limit=1000", { _silent: true })
+        .then((res) => {
+          if (!active) return;
+          const rows = Array.isArray(res?.data) ? res.data : [];
+          const filtered = rows.filter((task) => {
+            const status = String(task?.status || "").trim().toLowerCase();
+            return status === "inprogress" || status === "inreview";
+          });
+          setTaskFallbackEntries(filtered);
+        })
+        .catch(() => {
+          if (active) setTaskFallbackEntries([]);
+        });
+    };
+    loadFallbackTasks();
+    const interval = setInterval(loadFallbackTasks, 5000);
+    return () => {
+      active = false;
+      clearInterval(interval);
+    };
+  }, []);
+
   /* Force stop a specific agent slot */
   const handleForceStop = async (slot) => {
     const ok = await showConfirm(
@@ -2143,6 +2316,7 @@ export function FleetSessionsTab() {
       <div class="fleet-span">
         <${FleetSessionsPanel}
           slots=${slots}
+          taskFallbackEntries=${taskFallbackEntries}
           onOpenWorkspace=${openWorkspace}
           onForceStop=${handleForceStop}
         />