bosun 0.40.3 → 0.40.4

package/ui/components/kanban-board.js

@@ -2,12 +2,13 @@
  *  Kanban Board Component — GitHub Projects-style task board
  * ────────────────────────────────────────────────────────────── */
 import { h } from "preact";
-import { useState, useCallback, useRef, useEffect, useMemo } from "preact/hooks";
+import { useState, useCallback, useRef, useEffect, useMemo, useLayoutEffect } from "preact/hooks";
 import htm from "htm";
 import { signal, computed } from "@preact/signals";
 import {
   tasksData,
   tasksLoaded,
+  tasksPage,
   showToast,
   runOptimistic,
   loadTasks,
@@ -97,6 +98,27 @@ function getTaskBaseBranch(task) {
   );
 }
 
+function getTaskRuntimeSnapshot(task) {
+  return task?.runtimeSnapshot || task?.meta?.runtimeSnapshot || null;
+}
+
+function getTaskEpic(task) {
+  return String(task?.epic || task?.epicName || task?.meta?.epic || task?.meta?.epicName || "").trim();
+}
+
+function getTaskSprint(task) {
+  return String(task?.sprintName || task?.sprint || task?.meta?.sprintName || task?.meta?.sprintId || "").trim();
+}
+
+function getTaskStoryPoints(task) {
+  const value = task?.storyPoints ?? task?.story_points ?? task?.points ?? task?.meta?.storyPoints;
+  return Number.isFinite(Number(value)) && String(value).trim() !== "" ? String(value) : "";
+}
+
+function getTaskDueDate(task) {
+  return String(task?.dueDate || task?.due_date || task?.meta?.dueDate || "").trim();
+}
+
 /* ─── Derived column data ─── */
 const columnData = computed(() => {
   const tasks = tasksData.value || [];
@@ -130,6 +152,14 @@ const TOUCH_DRAG_DELAY_MS = 180;
 const TOUCH_DRAG_START_PX = 6;
 const TOUCH_CANCEL_PX = 14;
 
+function queueBoardTasksRefresh() {
+  const page = Number(tasksPage?.value ?? 0);
+  const append = Number.isFinite(page) && page > 0;
+  setTimeout(() => {
+    void loadTasks({ append });
+  }, 500);
+}
+
 /* ─── Touch drag helpers ─── */
 
 function _createTouchClone(el) {
@@ -269,7 +299,7 @@ async function executeBoardTransition(task, newStatus, columnLabel) {
   );
 
   showToast(`Moved to ${columnLabel || "updated status"}`, "success");
-  setTimeout(() => loadTasks(), 500);
+  queueBoardTasksRefresh();
   return { ok: true, cancelled: false, action: decision.action, status: optimisticStatus };
 }
 
@@ -411,6 +441,11 @@ function KanbanCard({ task, onOpen }) {
   const priorityLabel = PRIORITY_LABELS[task.priority] || null;
   const tags = getTaskTags(task);
   const baseBranch = getTaskBaseBranch(task);
+  const runtime = getTaskRuntimeSnapshot(task);
+  const epic = getTaskEpic(task);
+  const sprint = getTaskSprint(task);
+  const storyPoints = getTaskStoryPoints(task);
+  const dueDate = getTaskDueDate(task);
   const repoName = task.repo || task.repository || "";
   const issueNum = task.issueNumber || task.issue_number || (typeof task.id === "string" && /^\d+$/.test(task.id) ? task.id : null);
   const hasAgent = Boolean(
@@ -459,11 +494,25 @@ function KanbanCard({ task, onOpen }) {
           ${priorityLabel && html`
             <${Chip} label=${priorityLabel} size="small" sx=${{ backgroundColor: priorityColor, color: '#fff', height: 18, fontSize: '0.65rem' }} />
           `}
+          ${runtime?.state === "running" && html`
+            <${Chip} label="LIVE" size="small" color="success" sx=${{ height: 18, fontSize: '0.65rem' }} />
+          `}
+          ${runtime?.state === "queued" && html`
+            <${Chip} label="QUEUED" size="small" color="warning" sx=${{ height: 18, fontSize: '0.65rem' }} />
+          `}
         </${Stack}>
         <${Typography} variant="body2" fontWeight=${500}>${truncate(task.title || "(untitled)", 80)}</${Typography}>
         ${task.description && html`
           <${Typography} variant="caption" color="text.secondary" sx=${{ display: 'block', mt: 0.5 }}>${truncate(task.description, 72)}</${Typography}>
         `}
+        ${(epic || sprint || storyPoints || dueDate) && html`
+          <${Stack} direction="row" spacing=${0.5} flexWrap="wrap" sx=${{ mt: 0.75 }}>
+            ${epic && html`<${Chip} label=${`Epic: ${truncate(epic, 18)}`} size="small" variant="outlined" sx=${{ height: 20, fontSize: '0.65rem' }} />`}
+            ${sprint && html`<${Chip} label=${`Sprint: ${truncate(sprint, 18)}`} size="small" variant="outlined" sx=${{ height: 20, fontSize: '0.65rem' }} />`}
+            ${storyPoints && html`<${Chip} label=${`${storyPoints} pts`} size="small" variant="outlined" sx=${{ height: 20, fontSize: '0.65rem' }} />`}
+            ${dueDate && html`<${Chip} label=${`Due: ${truncate(dueDate, 18)}`} size="small" variant="outlined" color="warning" sx=${{ height: 20, fontSize: '0.65rem' }} />`}
+          </${Stack}>
+        `}
         ${baseBranch && html`
           <${Typography} variant="caption" color="text.secondary" sx=${{ display: 'block', mt: 0.5 }}>Base: ${truncate(baseBranch, 24)}</${Typography}>
         `}
@@ -498,19 +547,80 @@ function KanbanColumn({
 }) {
   const [showCreate, setShowCreate] = useState(false);
   const inputRef = useRef(null);
+  const cardsRef = useRef(null);
+  const tailSentinelRef = useRef(null);
+  const lastAutoLoadCountRef = useRef(-1);
 
   useEffect(() => {
     if (showCreate && inputRef.current) inputRef.current.focus();
   }, [showCreate]);
 
+  const triggerLoadMore = useCallback(() => {
+    if (!hasMoreTasks || loadingMoreTasks || typeof onLoadMoreTasks !== "function") return false;
+    void onLoadMoreTasks();
+    return true;
+  }, [hasMoreTasks, loadingMoreTasks, onLoadMoreTasks]);
+
+  useEffect(() => {
+    if (!hasMoreTasks || typeof onLoadMoreTasks !== "function") {
+      lastAutoLoadCountRef.current = -1;
+      return;
+    }
+    const root = cardsRef.current;
+    const sentinel = tailSentinelRef.current;
+    if (!root || !sentinel || typeof IntersectionObserver !== "function") return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (!entry.isIntersecting) continue;
+          const key = tasks.length;
+          if (lastAutoLoadCountRef.current === key || loadingMoreTasks) continue;
+          lastAutoLoadCountRef.current = key;
+          void onLoadMoreTasks();
+        }
+      },
+      {
+        root,
+        rootMargin: "0px 0px 160px 0px",
+        threshold: 0,
+      },
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [hasMoreTasks, loadingMoreTasks, onLoadMoreTasks, tasks.length]);
+
+  useLayoutEffect(() => {
+    const root = cardsRef.current;
+    if (!root || !hasMoreTasks || loadingMoreTasks || typeof onLoadMoreTasks !== "function") return;
+    const remaining = root.scrollHeight - root.scrollTop - root.clientHeight;
+    const underfilled = root.scrollHeight <= root.clientHeight + LOAD_MORE_THRESHOLD_PX;
+    if (!underfilled && remaining > LOAD_MORE_THRESHOLD_PX) return;
+    const key = tasks.length;
+    if (lastAutoLoadCountRef.current === key) return;
+    lastAutoLoadCountRef.current = key;
+    void onLoadMoreTasks();
+  }, [hasMoreTasks, loadingMoreTasks, onLoadMoreTasks, tasks.length, showCreate]);
+
   const onCardsScroll = useCallback((event) => {
     const el = event?.currentTarget;
     if (!el) return;
     const remaining = el.scrollHeight - el.scrollTop - el.clientHeight;
     if (remaining > LOAD_MORE_THRESHOLD_PX) return;
-    if (!hasMoreTasks || loadingMoreTasks || typeof onLoadMoreTasks !== "function") return;
-    void onLoadMoreTasks();
-  }, [hasMoreTasks, loadingMoreTasks, onLoadMoreTasks]);
+    lastAutoLoadCountRef.current = tasks.length;
+    triggerLoadMore();
+  }, [tasks.length, triggerLoadMore]);
+
+  const onCardsWheel = useCallback((event) => {
+    const el = event?.currentTarget;
+    if (!el) return;
+    if (Math.abs(event.deltaY) < Math.abs(event.deltaX || 0)) return;
+    const canScroll = el.scrollHeight > el.clientHeight + 1;
+    if (!canScroll) return;
+    const atTop = el.scrollTop <= 0;
+    const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 1;
+    if ((event.deltaY < 0 && atTop) || (event.deltaY > 0 && atBottom)) return;
+    event.stopPropagation();
+  }, []);
 
   const onDragOver = useCallback((e) => {
     e.preventDefault();
@@ -562,7 +672,7 @@ function KanbanColumn({
         },
       );
       showToast(`Moved to ${col.title}`, "success");
-      setTimeout(() => loadTasks(), 500);
+      queueBoardTasksRefresh();
     } catch (err) {
       showToast(err?.message || "Failed to move task", "error");
     }
@@ -597,7 +707,12 @@ function KanbanColumn({
         <${Chip} label=${countLabel} size="small" />
         <${IconButton} size="small" onClick=${() => { setShowCreate(!showCreate); haptic(); }} title=${"Add task to " + col.title}>+</${IconButton}>
       </${Box}>
-      <div class="kanban-cards" onScroll=${onCardsScroll}>
+      <div
+        ref=${cardsRef}
+        class="kanban-cards"
+        onScroll=${onCardsScroll}
+        onWheel=${onCardsWheel}
+      >
         ${showCreate && html`
           <${TextField}
             inputRef=${inputRef}
@@ -616,10 +731,23 @@ function KanbanColumn({
           : html`<${Typography} variant="body2" color="text.secondary" sx=${{ textAlign: 'center', py: 2 }}>Drop tasks here</${Typography}>`
         }
         ${hasMoreTasks && html`
-          <div class="kanban-tail-sentinel"></div>
-          <div class="kanban-load-more">${loadingMoreTasks ? "Loading more tasks..." : "Scroll down to load more"}</div>
+          <div ref=${tailSentinelRef} class="kanban-tail-sentinel"></div>
         `}
       </div>
+      ${hasMoreTasks && html`
+        <div class="kanban-column-footer">
+          <button
+            type="button"
+            class="kanban-load-more"
+            onClick=${() => triggerLoadMore()}
+            disabled=${loadingMoreTasks}
+            aria-label=${loadingMoreTasks ? `Loading more ${col.title} tasks` : `Load more ${col.title} tasks`}
+          >
+            <span class="kanban-load-more-label">${loadingMoreTasks ? "Loading more tasks..." : `Load more ${col.title}`}</span>
+            <span class="kanban-load-more-icon" aria-hidden="true">⌄</span>
+          </button>
+        </div>
+      `}
       <div class="kanban-scroll-fade"></div>
     </div>
   `;

package/ui/components/shared.js

@@ -45,7 +45,6 @@ import {
   ListItemText,
   ListItemSecondaryAction,
   IconButton,
-  Fade,
 } from "@mui/material";
 
 import { ICONS } from "../modules/icons.js";
@@ -227,7 +226,13 @@ export function SkeletonCard({ height = "80px", className = "" }) {
  * onSaveBeforeClose?: (() => Promise<boolean|{closed?: boolean}|void>)|null,
  * onDiscardBeforeClose?: (() => Promise<boolean|{closed?: boolean}|void>)|null,
  * activeOperationLabel?: string,
- * closeGuard?: boolean
+ * closeGuard?: boolean,
+ * layout?: "sheet"|"side-sheet",
+ * resizable?: boolean,
+ * defaultWidth?: number,
+ * minWidth?: number,
+ * maxWidth?: number,
+ * widthStorageKey?: string
  * }} props
  */
 export function Modal({
@@ -242,6 +247,12 @@ export function Modal({
   onDiscardBeforeClose = null,
   activeOperationLabel = "",
   closeGuard = true,
+  layout = "sheet",
+  resizable = false,
+  defaultWidth = 760,
+  minWidth = 440,
+  maxWidth = 1120,
+  widthStorageKey = "",
 }) {
   const [visible, setVisible] = useState(false);
   const contentRef = useRef(null);
@@ -249,6 +260,13 @@ export function Modal({
   const [dragY, setDragY] = useState(0);
   const [closePromptOpen, setClosePromptOpen] = useState(false);
   const [closePromptSaving, setClosePromptSaving] = useState(false);
+  const isSideSheet = layout === "side-sheet";
+  const [sheetWidth, setSheetWidth] = useState(() => {
+    const fallback = Number.isFinite(Number(defaultWidth)) ? Number(defaultWidth) : 760;
+    if (!isSideSheet || !widthStorageKey || typeof localStorage === "undefined") return fallback;
+    const stored = Number(localStorage.getItem(widthStorageKey));
+    return Number.isFinite(stored) ? stored : fallback;
+  });
   const scopedUnsavedCount = Number.isFinite(Number(unsavedChanges))
     ? Math.max(0, Number(unsavedChanges))
     : 0;
@@ -346,8 +364,43 @@ export function Modal({
   }, []);
 
   const isDragHandleTarget = useCallback((target) => (
-    Boolean(target?.closest?.(".modal-handle, .modal-header"))
-  ), []);
+    !isSideSheet && Boolean(target?.closest?.(".modal-handle, .modal-header"))
+  ), [isSideSheet]);
+
+  const persistSheetWidth = useCallback((nextWidth) => {
+    if (!widthStorageKey || typeof localStorage === "undefined") return;
+    try {
+      localStorage.setItem(widthStorageKey, String(nextWidth));
+    } catch {
+      /* ignore width persistence failures */
+    }
+  }, [widthStorageKey]);
+
+  const handleSheetResizeStart = useCallback((event) => {
+    if (!isSideSheet || !resizable) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const startX = event.clientX;
+    const startWidth = sheetWidth;
+    const minAllowed = Math.max(320, Number.isFinite(Number(minWidth)) ? Number(minWidth) : 440);
+    const maxAllowedBase = Number.isFinite(Number(maxWidth)) ? Number(maxWidth) : 1120;
+    const maxAllowed = typeof window !== "undefined"
+      ? Math.min(maxAllowedBase, Math.max(minAllowed, window.innerWidth - 48))
+      : maxAllowedBase;
+    let latestWidth = startWidth;
+    const onMove = (moveEvent) => {
+      const delta = startX - moveEvent.clientX;
+      latestWidth = Math.max(minAllowed, Math.min(maxAllowed, startWidth + delta));
+      setSheetWidth(latestWidth);
+    };
+    const onUp = () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      persistSheetWidth(latestWidth);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  }, [isSideSheet, maxWidth, minWidth, persistSheetWidth, resizable, sheetWidth]);
 
   const handleTouchStart = useCallback((e) => {
     if (!isDragHandleTarget(e.target)) return;
@@ -530,53 +583,62 @@ export function Modal({
   const dragStyle = dragY > 0
     ? `transform: translateY(${dragY}px); opacity: ${Math.max(0.2, 1 - dragY / 400)}`
     : "";
+  const contentStyle = [
+    dragStyle,
+    isSideSheet ? `--modal-sheet-width:${sheetWidth}px` : "",
+  ].filter(Boolean).join("; ");
 
   const content = html`
-    <${Fade} in=${visible} timeout=${300}>
+    <div
+      class="modal-overlay ${visible ? "modal-overlay-visible" : ""}"
+      onClick=${(e) => {
+        if (e.target === e.currentTarget) requestClose();
+      }}
+    >
       <div
-        class="modal-overlay ${visible ? "modal-overlay-visible" : ""}"
-        onClick=${(e) => {
-          if (e.target === e.currentTarget) requestClose();
-        }}
+        ref=${contentRef}
+        class="modal-content ${isSideSheet ? "modal-side-sheet" : ""} ${contentClassName} ${visible ? "modal-content-visible" : ""} ${dragY > 0 ? "modal-dragging" : ""}"
+        style=${contentStyle}
+        onClick=${(e) => e.stopPropagation()}
+        onTouchStart=${handleTouchStart}
+        onTouchMove=${handleTouchMove}
+        onTouchEnd=${handleTouchEnd}
+        onTouchCancel=${handleTouchCancel}
+        onPointerDown=${handlePointerDown}
+        onPointerMove=${handlePointerMove}
+        onPointerUp=${handlePointerEnd}
+        onPointerCancel=${handlePointerCancel}
       >
-        <div
-          ref=${contentRef}
-          class="modal-content ${contentClassName} ${visible ? "modal-content-visible" : ""} ${dragY > 0 ? "modal-dragging" : ""}"
-          style=${dragStyle}
-          onClick=${(e) => e.stopPropagation()}
-          onTouchStart=${handleTouchStart}
-          onTouchMove=${handleTouchMove}
-          onTouchEnd=${handleTouchEnd}
-          onTouchCancel=${handleTouchCancel}
-          onPointerDown=${handlePointerDown}
-          onPointerMove=${handlePointerMove}
-          onPointerUp=${handlePointerEnd}
-          onPointerCancel=${handlePointerCancel}
-        >
-          <div class="modal-header">
-            <div class="modal-handle"></div>
-            ${title ? html`<div class="modal-title">${title}</div>` : null}
-            <${IconButton}
-              className="modal-close-btn"
-              size="small"
-              onTouchStart=${(e) => e.stopPropagation()}
-              onPointerDown=${(e) => e.stopPropagation()}
-              onPointerUp=${(e) => e.stopPropagation()}
-              onMouseDown=${(e) => e.stopPropagation()}
-              onClick=${requestClose}
-              aria-label="Close"
-              sx=${{ position: "absolute", right: 8, top: 8, zIndex: 8, pointerEvents: "auto" }}
-            >
-              ${ICONS.close}
-            <//>
-          </div>
-          <div class="modal-body" onTouchStart=${handleBodyTouchStart}>
-            ${children}
-          </div>
-          ${footer ? html`<div class="modal-footer">${footer}</div>` : null}
+        ${isSideSheet && resizable
+          ? html`<div
+              class="modal-sheet-resizer"
+              onPointerDown=${handleSheetResizeStart}
+              title="Resize panel"
+            ></div>`
+          : null}
+        <div class="modal-header">
+          <div class="modal-handle"></div>
+          ${title ? html`<div class="modal-title">${title}</div>` : null}
+          <${IconButton}
+            className="modal-close-btn"
+            size="small"
+            onTouchStart=${(e) => e.stopPropagation()}
+            onPointerDown=${(e) => e.stopPropagation()}
+            onPointerUp=${(e) => e.stopPropagation()}
+            onMouseDown=${(e) => e.stopPropagation()}
+            onClick=${requestClose}
+            aria-label="Close"
+            sx=${{ position: "absolute", right: 8, top: 8, zIndex: 8, pointerEvents: "auto" }}
+          >
+            ${ICONS.close}
+          <//>
+        </div>
+        <div class="modal-body" onTouchStart=${handleBodyTouchStart}>
+          ${children}
         </div>
+        ${footer ? html`<div class="modal-footer">${footer}</div>` : null}
       </div>
-    </${Fade}>
+    </div>
   `;
 
   const guard = closePromptOpen

package/ui/demo-defaults.js

@@ -13344,9 +13344,8 @@
       "edgeCount": 11,
       "recommended": false,
       "enabled": true,
-      "trigger": "trigger.task_low",
+      "trigger": "trigger.task_available",
       "variables": {
-        "backlogThreshold": 3,
         "maxConcurrent": 2,
         "pollStatus": "todo",
         "maxBatchSize": 5,
@@ -13370,10 +13369,11 @@
       "nodes": [
         {
           "id": "trigger",
-          "type": "trigger.task_low",
-          "label": "Backlog Low?",
+          "type": "trigger.task_available",
+          "label": "Tasks Available?",
           "config": {
-            "threshold": "{{backlogThreshold}}",
+            "maxParallel": "{{maxConcurrent}}",
+            "pollIntervalMs": 60000,
             "status": "{{pollStatus}}"
           },
           "position": {
@@ -13653,9 +13653,8 @@
       "edgeCount": 6,
       "recommended": true,
       "enabled": true,
-      "trigger": "trigger.task_low",
+      "trigger": "trigger.task_available",
       "variables": {
-        "backlogThreshold": 3,
         "maxConcurrent": 3,
         "pollStatus": "todo",
         "maxBatchSize": 10,
@@ -13678,10 +13677,11 @@
       "nodes": [
         {
           "id": "trigger",
-          "type": "trigger.task_low",
-          "label": "Backlog Low?",
+          "type": "trigger.task_available",
+          "label": "Tasks Available?",
           "config": {
-            "threshold": "{{backlogThreshold}}",
+            "maxParallel": "{{maxConcurrent}}",
+            "pollIntervalMs": 60000,
             "status": "{{pollStatus}}"
           },
           "position": {
@@ -28166,9 +28166,8 @@
       "category": "lifecycle",
       "enabled": true,
       "nodeCount": 11,
-      "trigger": "trigger.task_low",
+      "trigger": "trigger.task_available",
       "variables": {
-        "backlogThreshold": 3,
         "maxConcurrent": 2,
         "pollStatus": "todo",
         "maxBatchSize": 5,
@@ -28179,10 +28178,11 @@
       "nodes": [
         {
           "id": "trigger",
-          "type": "trigger.task_low",
-          "label": "Backlog Low?",
+          "type": "trigger.task_available",
+          "label": "Tasks Available?",
           "config": {
-            "threshold": "{{backlogThreshold}}",
+            "maxParallel": "{{maxConcurrent}}",
+            "pollIntervalMs": 60000,
             "status": "{{pollStatus}}"
           },
           "position": {
@@ -28463,9 +28463,8 @@
       "category": "lifecycle",
       "enabled": true,
       "nodeCount": 7,
-      "trigger": "trigger.task_low",
+      "trigger": "trigger.task_available",
       "variables": {
-        "backlogThreshold": 3,
         "maxConcurrent": 3,
         "pollStatus": "todo",
         "maxBatchSize": 10,
@@ -28475,10 +28474,11 @@
       "nodes": [
         {
           "id": "trigger",
-          "type": "trigger.task_low",
-          "label": "Backlog Low?",
+          "type": "trigger.task_available",
+          "label": "Tasks Available?",
           "config": {
-            "threshold": "{{backlogThreshold}}",
+            "maxParallel": "{{maxConcurrent}}",
+            "pollIntervalMs": 60000,
             "status": "{{pollStatus}}"
           },
           "position": {