bosun 0.28.2 → 0.28.4

package/ui/tabs/settings.js

@@ -1028,6 +1028,9 @@ function ServerConfigMode() {
         ${activeCat?.description &&
         html`<div class="settings-cat-desc">${activeCat.description}</div>`}
 
+        <!-- GitHub Device Flow login card -->
+        ${activeCategory === "github" && html`<${GitHubDeviceFlowCard} config=${serverData} />`}
+
         <!-- Settings list for active category -->
         ${catDefs.length === 0
           ? html`
@@ -1567,6 +1570,210 @@ function AppPreferencesMode() {
   `;
 }
 
+/* ═══════════════════════════════════════════════════════════════
+ *  GitHubDeviceFlowCard — "Sign in with GitHub" (like VS Code / Roo Code)
+ *  Uses OAuth Device Flow: no public URL, no callback needed.
+ * ═══════════════════════════════════════════════════════════════ */
+function GitHubDeviceFlowCard({ config }) {
+  const [phase, setPhase] = useState("idle"); // idle | loading | code | polling | done | error
+  const [userCode, setUserCode] = useState("");
+  const [verificationUri, setVerificationUri] = useState("");
+  const [deviceCode, setDeviceCode] = useState("");
+  const [pollInterval, setPollInterval] = useState(5);
+  const [ghUser, setGhUser] = useState("");
+  const [error, setError] = useState("");
+  const pollRef = useRef(null);
+
+  // Check if already authenticated
+  const hasToken = Boolean(
+    config?.GH_TOKEN || config?.GITHUB_TOKEN
+  );
+
+  // Cleanup polling on unmount
+  useEffect(() => {
+    return () => { if (pollRef.current) clearTimeout(pollRef.current); };
+  }, []);
+
+  async function startFlow() {
+    setPhase("loading");
+    setError("");
+    try {
+      const res = await apiFetch("/api/github/device/start", { method: "POST" });
+      if (!res.ok) throw new Error(res.error || "Failed to start device flow");
+      const d = res.data;
+      setUserCode(d.userCode);
+      setVerificationUri(d.verificationUri);
+      setDeviceCode(d.deviceCode);
+      setPollInterval(d.interval || 5);
+      setPhase("code");
+
+      // Open GitHub in a new tab automatically
+      try {
+        window.open(d.verificationUri, "_blank");
+      } catch {
+        // may be blocked by popup blocker
+      }
+
+      // Start polling
+      startPolling(d.deviceCode, (d.interval || 5) * 1000);
+    } catch (err) {
+      setError(err.message);
+      setPhase("error");
+    }
+  }
+
+  function startPolling(dc, intervalMs) {
+    if (pollRef.current) clearTimeout(pollRef.current);
+    setPhase("polling");
+
+    async function tick() {
+      try {
+        const res = await apiFetch("/api/github/device/poll", {
+          method: "POST",
+          body: { deviceCode: dc },
+        });
+        if (!res.ok) {
+          pollRef.current = setTimeout(tick, intervalMs);
+          return;
+        }
+        const d = res.data;
+        if (d.status === "complete") {
+          pollRef.current = null;
+          setGhUser(d.login);
+          setPhase("done");
+          haptic("success");
+          showToast("success", `Signed in as ${d.login}`);
+          return;
+        } else if (d.status === "slow_down") {
+          // Increase interval as requested by GitHub
+          const newInterval = (d.interval || 10) * 1000;
+          setPollInterval(d.interval || 10);
+          intervalMs = newInterval;
+        } else if (d.status === "expired") {
+          pollRef.current = null;
+          setError("Code expired. Please try again.");
+          setPhase("error");
+          return;
+        } else if (d.status === "error") {
+          pollRef.current = null;
+          setError(d.description || d.error || "Authorization failed");
+          setPhase("error");
+          return;
+        }
+        // "pending" or "slow_down" → schedule next tick
+        pollRef.current = setTimeout(tick, intervalMs);
+      } catch {
+        // network error — keep polling, it may recover
+        pollRef.current = setTimeout(tick, intervalMs);
+      }
+    }
+
+    pollRef.current = setTimeout(tick, intervalMs);
+  }
+
+  function copyCode() {
+    try {
+      navigator.clipboard.writeText(userCode);
+      haptic("light");
+      showToast("info", "Code copied!");
+    } catch {
+      // clipboard not available
+    }
+  }
+
+  // Already authenticated — compact info
+  if (hasToken && phase !== "done") {
+    return html`
+      <${Card}>
+        <div style="display:flex;align-items:center;gap:10px;padding:4px 0">
+          <span style="font-size:20px">🐙</span>
+          <div style="flex:1;min-width:0">
+            <div style="font-size:13px;font-weight:600;color:var(--text-primary)">GitHub Connected</div>
+            <div style="font-size:12px;color:var(--text-secondary)">Token is configured. Re-authenticate below if needed.</div>
+          </div>
+          <button class="btn btn-sm btn-secondary" onClick=${startFlow}>
+            Re-auth
+          </button>
+        </div>
+      <//>
+    `;
+  }
+
+  // Done — just authorized
+  if (phase === "done") {
+    return html`
+      <${Card}>
+        <div style="text-align:center;padding:12px 0">
+          <div style="font-size:32px;margin-bottom:8px">✅</div>
+          <div style="font-size:15px;font-weight:600;color:var(--text-primary)">Signed in as ${ghUser}</div>
+          <div style="font-size:12px;color:var(--text-secondary);margin-top:4px">GitHub token saved to .env</div>
+        </div>
+      <//>
+    `;
+  }
+
+  // Show device code to enter
+  if (phase === "code" || phase === "polling") {
+    return html`
+      <${Card}>
+        <div style="text-align:center;padding:8px 0">
+          <div style="font-size:13px;color:var(--text-secondary);margin-bottom:12px">
+            Go to <a href=${verificationUri} target="_blank" rel="noopener"
+              style="color:var(--accent);font-weight:600;text-decoration:underline">${verificationUri}</a>
+            and enter this code:
+          </div>
+          <button onClick=${copyCode}
+            style="font-size:28px;font-weight:700;letter-spacing:0.15em;font-family:var(--font-mono,'SF Mono',monospace);
+              padding:12px 24px;border-radius:var(--radius-md);background:var(--surface-1);
+              border:2px dashed var(--accent);color:var(--text-primary);cursor:pointer;
+              transition:background 0.15s ease"
+            title="Click to copy">
+            ${userCode}
+          </button>
+          <div style="font-size:12px;color:var(--text-hint);margin-top:10px;display:flex;align-items:center;justify-content:center;gap:6px">
+            <span class="spinner" style="width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%"></span>
+            Waiting for authorization…
+          </div>
+        </div>
+      <//>
+    `;
+  }
+
+  // Error state
+  if (phase === "error") {
+    return html`
+      <${Card}>
+        <div style="text-align:center;padding:12px 0">
+          <div style="font-size:24px;margin-bottom:8px">⚠️</div>
+          <div style="font-size:13px;color:var(--color-error);margin-bottom:12px">${error}</div>
+          <button class="btn btn-sm btn-primary" onClick=${startFlow}>Try Again</button>
+        </div>
+      <//>
+    `;
+  }
+
+  // Idle — show sign-in button
+  return html`
+    <${Card}>
+      <div style="text-align:center;padding:16px 0">
+        <div style="font-size:32px;margin-bottom:8px">🐙</div>
+        <div style="font-size:15px;font-weight:600;margin-bottom:4px;color:var(--text-primary)">
+          Sign in with GitHub
+        </div>
+        <div style="font-size:12px;color:var(--text-secondary);margin-bottom:16px;max-width:280px;margin-inline:auto;line-height:1.5">
+          Authorize Bosun to manage repos and issues on your behalf.
+          No public URL needed — works entirely from your local machine.
+        </div>
+        <button class="btn btn-primary" onClick=${startFlow}
+          disabled=${phase === "loading"}
+          style="min-width:200px">
+          ${phase === "loading" ? html`<${Spinner} size=${14} /> Connecting…` : "Sign in with GitHub"}
+        </button>
+      </div>
+    <//>
+  `;
+}
+
 /* ═══════════════════════════════════════════════════════════════
  *  SettingsTab — Top-level with two-mode segmented control
  * ═══════════════════════════════════════════════════════════════ */

package/ui/tabs/tasks.js

@@ -89,6 +89,8 @@ const SORT_OPTIONS = [
   { value: "title", label: "Title" },
 ];
 
+const PRIORITY_ORDER = { critical: 0, high: 1, medium: 2, low: 3, "": 4 };
+
 const SYSTEM_TAGS = new Set([
   "draft",
   "todo",
@@ -760,6 +762,8 @@ export function TasksTab() {
   const [actionsOpen, setActionsOpen] = useState(false);
   const [exporting, setExporting] = useState(false);
   const [filtersOpen, setFiltersOpen] = useState(false);
+  const [listSortCol, setListSortCol] = useState("");   // active column sort in list mode
+  const [listSortDir, setListSortDir] = useState("desc"); // "asc" | "desc"
   const [isCompact, setIsCompact] = useState(() => {
     try { return globalThis.matchMedia?.("(max-width: 768px)")?.matches ?? false; }
     catch { return false; }
@@ -978,6 +982,31 @@ export function TasksTab() {
     ];
   }, [tasks]);
 
+  /* ── Client-side table sort (list mode) ── */
+  const sortedForTable = useMemo(() => {
+    if (!listSortCol) return visible;
+    return [...visible].sort((a, b) => {
+      let av, bv;
+      const dir = listSortDir === "asc" ? 1 : -1;
+      if (listSortCol === "priority") {
+        av = PRIORITY_ORDER[a.priority || ""] ?? 4;
+        bv = PRIORITY_ORDER[b.priority || ""] ?? 4;
+        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;
+        return dir * (av - bv);
+      }
+      if (listSortCol === "status") { av = a.status || ""; bv = b.status || ""; }
+      else if (listSortCol === "title") { av = (a.title || "").toLowerCase(); bv = (b.title || "").toLowerCase(); }
+      else if (listSortCol === "repo") { av = a.repository || a.workspace || ""; bv = b.repository || b.workspace || ""; }
+      else if (listSortCol === "branch") { av = getTaskBaseBranch(a); bv = getTaskBaseBranch(b); }
+      else { return 0; }
+      return dir * String(av).localeCompare(String(bv));
+    });
+  }, [visible, listSortCol, listSortDir]);
+
   /* ── Handlers ── */
   const handleFilter = async (s) => {
     haptic();
@@ -1578,23 +1607,16 @@ export function TasksTab() {
       `}
     </div>
 
-    <${Card}
-      title="Work Snapshot"
-      subtitle=${isKanban ? "Board view · showing all statuses" : "List view · filtered results"}
-      className="work-summary-card"
-    >
-      <div class="stat-strip">
-        ${summaryMetrics.map(
-          (metric) => html`
-            <${StatCard}
-              value=${metric.value}
-              label=${metric.label}
-              color=${metric.color}
-            />
-          `,
-        )}
-      </div>
-    <//>
+    <div class="snapshot-bar">
+      ${summaryMetrics.map((m) => html`
+        <span key=${m.label} class="snapshot-pill">
+          <span class="snapshot-dot" style="background:${m.color};" />
+          <strong class="snapshot-val">${m.value}</strong>
+          <span class="snapshot-lbl">${m.label}</span>
+        </span>
+      `)}
+      <span class="snapshot-view-tag">${isKanban ? "⬛ Board" : "☰ List"}</span>
+    </div>
 
     <style>
       .actions-btn { display:inline-flex; align-items:center; gap:4px; }
@@ -1617,119 +1639,84 @@ export function TasksTab() {
 
     ${isKanban && html`<${KanbanBoard} onOpenTask=${openDetail} />`}
 
-    ${!isKanban &&
-    visible.map((task) => {
-      const isManual = isTaskManual(task);
-      const descriptionLimit = isCompact ? 90 : 120;
-      const tags = getTaskTags(task);
-      const visibleTags = isCompact ? tags.slice(0, 3) : tags;
-      const extraTagCount = tags.length - visibleTags.length;
-      return html`
-        <div
-          key=${task.id}
-          class="task-card ${batchMode && selectedIds.has(task.id)
-            ? "task-card-selected"
-            : ""} task-card-enter"
-          data-status=${task.status || ""}
-          data-manual=${isManual ? "true" : "false"}
-          onClick=${() =>
-            batchMode ? toggleSelect(task.id) : openDetail(task.id)}
-        >
-          ${batchMode &&
-          html`
-            <input
-              type="checkbox"
-              checked=${selectedIds.has(task.id)}
-              class="task-checkbox"
-              onClick=${(e) => {
-                e.stopPropagation();
-                toggleSelect(task.id);
-              }}
-              style="accent-color:var(--accent)"
-            />
-          `}
-          <div class="task-card-header">
-            <div>
-              <div class="task-card-title">${task.title || "(untitled)"}</div>
-              <div class="task-card-meta">
-                ${task.id}${task.priority
-                  ? html` ·
-                      <${Badge}
-                        status=${task.priority}
-                        text=${task.priority}
-                      />`
-                  : ""}
-                ${task.updated_at
-                  ? html` · ${formatRelative(task.updated_at)}`
-                  : ""}
-              </div>
-            </div>
-            <div class="task-card-badges">
-              ${isManual && html`<${Badge} status="warning" text="manual" />`}
-              <${Badge} status=${task.status} text=${task.status} />
-            </div>
-          </div>
-          <div class="meta-text">
-            ${task.description
-              ? truncate(task.description, descriptionLimit)
-              : "No description."}
-          </div>
-          ${getTaskBaseBranch(task) &&
-          html`
-            <div class="meta-text">
-              Base: <code>${getTaskBaseBranch(task)}</code>
-            </div>
-          `}
-          ${(task.workspace || task.repository) &&
-          html`
-            <div class="meta-text" style="display:flex;gap:4px;align-items:center;flex-wrap:wrap">
-              ${task.workspace && html`<span class="pill" style="font-size:11px">📂 ${task.workspace}</span>`}
-              ${task.repository && html`<span class="pill" style="font-size:11px">📁 ${task.repository}</span>`}
-            </div>
-          `}
-          ${tags.length > 0 &&
-          html`
-            <div class="tag-row">
-              ${visibleTags.map(
-                (tag) => html`<span class="tag-chip">#${tag}</span>`,
-              )}
-              ${extraTagCount > 0 &&
-              html`
-                <span class="tag-chip tag-chip-muted">
-                  +${extraTagCount}
-                </span>
-              `}
-            </div>
-          `}
-          ${!batchMode &&
-          html`
-            <div class="btn-row mt-sm task-card-actions" onClick=${(e) => e.stopPropagation()}>
-              ${task.status === "todo" &&
-              html`
-                <button
-                  class="btn btn-primary btn-sm"
-                  onClick=${() => openStartModal(task)}
+    ${!isKanban && visible.length > 0 && html`
+      <div class="task-table-wrap">
+        <table class="task-table">
+          <thead>
+            <tr>
+              ${[
+                { col: "status", label: "Status" },
+                { col: "priority", label: "Pri" },
+                { col: "title", label: "Title", grow: true },
+                { col: "branch", label: "Branch" },
+                { col: "repo", label: "Repo" },
+                { col: "updated", label: "Updated" },
+              ].map(({ col, label, grow }) => {
+                const active = listSortCol === col;
+                const arrow = active ? (listSortDir === "asc" ? "▲" : "▼") : "⇅";
+                return html`
+                  <th
+                    key=${col}
+                    class="task-th ${active ? "task-th-active" : ""} ${grow ? "task-th-grow" : ""}"
+                    onClick=${() => {
+                      if (listSortCol === col) {
+                        setListSortDir(listSortDir === "asc" ? "desc" : "asc");
+                      } else {
+                        setListSortCol(col);
+                        setListSortDir("desc");
+                      }
+                    }}
+                  >${label} <span class="task-th-arrow">${arrow}</span></th>
+                `;
+              })}
+            </tr>
+          </thead>
+          <tbody>
+            ${sortedForTable.map((task) => {
+              const isManual = isTaskManual(task);
+              const branch = getTaskBaseBranch(task);
+              return html`
+                <tr
+                  key=${task.id}
+                  class="task-tr ${batchMode && selectedIds.has(task.id) ? "task-tr-selected" : ""}"
+                  data-status=${task.status || ""}
+                  onClick=${() => batchMode ? toggleSelect(task.id) : openDetail(task.id)}
                 >
-                  ▶ Start
-                </button>
-              `}
-              <button
-                class="btn btn-secondary btn-sm"
-                onClick=${() => handleStatusUpdate(task.id, "inreview")}
-              >
-                → Review
-              </button>
-              <button
-                class="btn btn-ghost btn-sm"
-                onClick=${() => handleStatusUpdate(task.id, "done")}
-              >
-                ✓ Done
-              </button>
-            </div>
-          `}
-        </div>
-      `;
-    })}
+                  <td class="task-td task-td-status">
+                    <${Badge} status=${task.status} text=${task.status} />
+                    ${isManual && html`<${Badge} status="warning" text="⚑" />`}
+                  </td>
+                  <td class="task-td task-td-pri">
+                    ${task.priority
+                      ? html`<${Badge} status=${task.priority} text=${task.priority} />`
+                      : html`<span class="task-td-empty">—</span>`}
+                  </td>
+                  <td class="task-td task-td-title">
+                    <div class="task-td-title-text">${task.title || "(untitled)"}</div>
+                    ${task.id && html`<div class="task-td-id">${task.id}</div>`}
+                  </td>
+                  <td class="task-td task-td-branch">
+                    ${branch
+                      ? html`<code class="task-td-code">${branch}</code>`
+                      : html`<span class="task-td-empty">—</span>`}
+                  </td>
+                  <td class="task-td task-td-repo">
+                    ${(task.repository || task.workspace)
+                      ? html`<span>${task.repository || task.workspace}</span>`
+                      : 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>`
+                      : html`<span class="task-td-empty">—</span>`}
+                  </td>
+                </tr>
+              `;
+            })}
+          </tbody>
+        </table>
+      </div>
+    `}
     ${!isKanban && !visible.length &&
     html`
       <${EmptyState}