git-watchtower 1.10.2 → 1.10.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "git-watchtower",
-  "version": "1.10.2",
+  "version": "1.10.4",
   "description": "Terminal-based Git branch monitor with activity sparklines and optional dev server with live reload",
   "main": "bin/git-watchtower.js",
   "bin": {
@@ -8,13 +8,13 @@
   },
   "scripts": {
     "start": "node bin/git-watchtower.js",
-    "test": "node --require ./tests/setup.js --test tests/unit/**/*.test.js tests/integration/**/*.test.js",
-    "test:unit": "node --require ./tests/setup.js --test tests/unit/**/*.test.js",
+    "test": "node --require ./tests/setup.js --test tests/unit/**/*.test.js tests/unit/**/**/*.test.js tests/integration/**/*.test.js",
+    "test:unit": "node --require ./tests/setup.js --test tests/unit/**/*.test.js tests/unit/**/**/*.test.js",
     "test:integration": "node --require ./tests/setup.js --test tests/integration/**/*.test.js",
-    "test:watch": "node --require ./tests/setup.js --test --watch tests/unit/**/*.test.js",
-    "test:coverage": "c8 --reporter=text --reporter=html --reporter=lcov node --require ./tests/setup.js --test tests/unit/**/*.test.js tests/integration/**/*.test.js",
-    "test:coverage:text": "c8 --reporter=text node --require ./tests/setup.js --test tests/unit/**/*.test.js tests/integration/**/*.test.js",
-    "test:coverage:html": "c8 --reporter=html node --require ./tests/setup.js --test tests/unit/**/*.test.js tests/integration/**/*.test.js && echo 'Coverage report: coverage/index.html'",
+    "test:watch": "node --require ./tests/setup.js --test --watch tests/unit/**/*.test.js tests/unit/**/**/*.test.js",
+    "test:coverage": "c8 --reporter=text --reporter=html --reporter=lcov node --require ./tests/setup.js --test tests/unit/**/*.test.js tests/unit/**/**/*.test.js tests/integration/**/*.test.js",
+    "test:coverage:text": "c8 --reporter=text node --require ./tests/setup.js --test tests/unit/**/*.test.js tests/unit/**/**/*.test.js tests/integration/**/*.test.js",
+    "test:coverage:html": "c8 --reporter=html node --require ./tests/setup.js --test tests/unit/**/*.test.js tests/unit/**/**/*.test.js tests/integration/**/*.test.js && echo 'Coverage report: coverage/index.html'",
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
@@ -22,6 +22,7 @@
     "@semantic-release/git": "^10.0.1",
     "@types/node": "^22.0.0",
     "c8": "^10.1.2",
+    "jsdom": "^24.1.3",
     "semantic-release": "^25.0.3",
     "typescript": "^5.7.0"
   },
@@ -48,7 +49,7 @@
   },
   "homepage": "https://github.com/drummel/git-watchtower#readme",
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   },
   "files": [
     "bin/git-watchtower.js",

package/src/server/web-ui/js.js

@@ -2,14 +2,32 @@
  * Client-side JavaScript for the Git Watchtower web dashboard.
  * Contains all interactive behavior: SSE connection, rendering, keyboard
  * navigation, modals, notifications, and preferences.
+ *
+ * Pure utility functions (escHtml, timeAgo, etc.) live in pure.js and are
+ * inlined here at assembly time so they can be unit-tested in Node.
  * @module server/web-ui/js
  */
 
+const pureFns = require('./pure');
+
+/**
+ * Serialize pure functions into a block of JS source that can be embedded
+ * in a browser <script>.  Each function is emitted verbatim using
+ * Function.prototype.toString().
+ * @returns {string}
+ */
+function inlinePureFunctions() {
+  return Object.entries(pureFns)
+    .map(([name, fn]) => `  var ${name} = ${fn.toString()};`)
+    .join('\n\n');
+}
+
 /**
  * Get the dashboard client-side JavaScript.
  * @returns {string} JavaScript content (without script tags)
  */
 function getDashboardJs() {
+  const pureFnBlock = inlinePureFunctions();
   return `
 (function() {
   'use strict';
@@ -34,6 +52,7 @@ function getDashboardJs() {
   var stashMode = false;
   var pendingStashBranch = null;
   var updateNotificationShown = false;
+  var remoteTabPollTimer = null;
 
   // ── Persistent Preferences (localStorage) ─────────────────────
   var PREFS_KEY = 'git-watchtower-prefs';
@@ -187,14 +206,33 @@ function getDashboardJs() {
     evtSource.addEventListener('state', function(e) {
       try {
         var newState = JSON.parse(e.data);
-        // Diff branches for desktop notifications
-        if (state && state.branches) {
-          diffBranchesForNotifications(state.branches, newState.branches || []);
+        if (!activeTabId && newState.activeProjectId) {
+          activeTabId = newState.activeProjectId;
         }
-        prevBranches = state ? state.branches : null;
-        state = newState;
-        if (!activeTabId && state.activeProjectId) {
-          activeTabId = state.activeProjectId;
+        // SSE always pushes the local project's state.  When the user
+        // is viewing a different tab we must NOT overwrite the per-project
+        // data (branches, PRs, activity, etc.) — only update global
+        // metadata so the tab bar, connection status, and version info
+        // stay current.
+        var viewingLocalProject = !activeTabId || activeTabId === newState.activeProjectId;
+        if (viewingLocalProject) {
+          // Diff branches for desktop notifications
+          if (state && state.branches) {
+            diffBranchesForNotifications(state.branches, newState.branches || []);
+          }
+          prevBranches = state ? state.branches : null;
+          state = newState;
+        } else {
+          // Viewing a remote tab — preserve per-project fields, update globals only
+          if (state) {
+            state.projects = newState.projects;
+            state.version = newState.version;
+            state.updateAvailable = newState.updateAvailable;
+            state.updateInProgress = newState.updateInProgress;
+            state.clientCount = newState.clientCount;
+          } else {
+            state = newState;
+          }
         }
         renderTabs();
         render();
@@ -331,23 +369,17 @@ function getDashboardJs() {
     tabBar.innerHTML = html;
   }
 
-  function switchTab(projectId) {
-    if (projectId === activeTabId) return;
-    activeTabId = projectId;
-    selectedIndex = 0;
-    searchQuery = '';
-    searchMode = false;
-    document.getElementById('search-bar').className = 'search-bar';
-    document.getElementById('search-input').value = '';
-    renderTabs();
-    // Fetch the project's state
+  /**
+   * Fetch a project's state from the server and merge it into the
+   * current client-side state for rendering.
+   */
+  function fetchAndApplyProjectState(projectId) {
     var xhr = new XMLHttpRequest();
     xhr.open('GET', '/api/projects/' + projectId + '/state');
     xhr.onload = function() {
-      if (xhr.status === 200) {
+      if (xhr.status === 200 && activeTabId === projectId) {
         try {
           var pState = JSON.parse(xhr.responseText);
-          // Merge into current state for rendering
           state.branches = pState.branches || [];
           state.currentBranch = pState.currentBranch;
           state.activityLog = pState.activityLog || [];
@@ -359,6 +391,7 @@ function getDashboardJs() {
           state.pollingStatus = pState.pollingStatus || 'idle';
           state.isOffline = pState.isOffline || false;
           state.serverMode = pState.serverMode || 'none';
+          state.repoWebUrl = pState.repoWebUrl || null;
           render();
         } catch (err) { /* ignore */ }
       }
@@ -366,95 +399,43 @@ function getDashboardJs() {
     xhr.send();
   }
 
-  // ── Time Formatting ────────────────────────────────────────────
-  function timeAgo(dateStr) {
-    if (!dateStr) return '';
-    var ts = new Date(dateStr).getTime();
-    if (isNaN(ts)) return '';
-    var diff = Date.now() - ts;
-    if (diff < 0) return 'now';
-    var s = Math.floor(diff / 1000);
-    if (s < 60) return s + 's ago';
-    var m = Math.floor(s / 60);
-    if (m < 60) return m + 'm ago';
-    var h = Math.floor(m / 60);
-    if (h < 24) return h + 'h ago';
-    var d = Math.floor(h / 24);
-    return d + 'd ago';
-  }
-
-  // ── Sparkline Rendering ────────────────────────────────────────
-  function renderSparklineBars(sparkStr) {
-    if (!sparkStr) return '';
-    var chars = '\\u2581\\u2582\\u2583\\u2584\\u2585\\u2586\\u2587\\u2588';
-    var html = '<div class="sparkline-bar">';
-    for (var i = 0; i < sparkStr.length; i++) {
-      var ch = sparkStr[i];
-      var idx = chars.indexOf(ch);
-      if (idx < 0) {
-        html += '<div class="spark-bar" style="height:1px"></div>';
-      } else {
-        var pct = Math.round(((idx + 1) / 8) * 100);
-        html += '<div class="spark-bar" style="height:' + pct + '%"></div>';
-      }
+  function switchTab(projectId) {
+    if (projectId === activeTabId) return;
+    activeTabId = projectId;
+    selectedIndex = 0;
+    searchQuery = '';
+    searchMode = false;
+    document.getElementById('search-bar').className = 'search-bar';
+    document.getElementById('search-input').value = '';
+    renderTabs();
+    fetchAndApplyProjectState(projectId);
+
+    // For non-local tabs the SSE stream won't push per-project updates,
+    // so poll the server periodically to keep the view fresh.
+    clearInterval(remoteTabPollTimer);
+    remoteTabPollTimer = null;
+    if (state && projectId !== state.activeProjectId) {
+      remoteTabPollTimer = setInterval(function() {
+        fetchAndApplyProjectState(projectId);
+      }, 2000);
     }
-    html += '</div>';
-    return html;
   }
 
-  // ── Compact number ─────────────────────────────────────────────
-  function fmtCompact(n) {
-    if (n < 1000) return String(n);
-    if (n < 10000) return (n / 1000).toFixed(1) + 'k';
-    if (n < 1000000) return Math.round(n / 1000) + 'k';
-    return (n / 1000000).toFixed(1) + 'm';
-  }
+  // ── Pure Utility Functions (inlined from pure.js) ──────────────
+${pureFnBlock}
 
-  // ── Get Display Branches ───────────────────────────────────────
-  function getDisplayBranches() {
+  // ── Get Display Branches (wrapper) ─────────────────────────────
+  // The pure getDisplayBranches is inlined above as a var assignment.
+  // Wrap it to pass closure state as args, keeping the same call-site API.
+  var _pureGetDisplayBranches = getDisplayBranches;
+  getDisplayBranches = function() {
     if (!state || !state.branches) return [];
-    var branches = state.branches.slice();
-    if (searchQuery) {
-      var q = searchQuery.toLowerCase();
-      branches = branches.filter(function(b) {
-        return b.name.toLowerCase().indexOf(q) !== -1;
-      });
-    }
-    // Pin branches to top
-    if (pinnedBranches.length > 0) {
-      var pinSet = {};
-      for (var i = 0; i < pinnedBranches.length; i++) pinSet[pinnedBranches[i]] = true;
-      branches.sort(function(a, b) {
-        var aPin = pinSet[a.name] ? 1 : 0;
-        var bPin = pinSet[b.name] ? 1 : 0;
-        return bPin - aPin; // pinned first
-      });
-    }
-    // Sort
-    if (sortOrder === 'alpha') {
-      var pinSet2 = {};
-      for (var j = 0; j < pinnedBranches.length; j++) pinSet2[pinnedBranches[j]] = true;
-      branches.sort(function(a, b) {
-        // Pinned branches always first
-        var aPin = pinSet2[a.name] ? 1 : 0;
-        var bPin = pinSet2[b.name] ? 1 : 0;
-        if (aPin !== bPin) return bPin - aPin;
-        return a.name.localeCompare(b.name);
-      });
-    } else if (sortOrder === 'recent') {
-      var pinSet3 = {};
-      for (var k = 0; k < pinnedBranches.length; k++) pinSet3[pinnedBranches[k]] = true;
-      branches.sort(function(a, b) {
-        var aPin = pinSet3[a.name] ? 1 : 0;
-        var bPin = pinSet3[b.name] ? 1 : 0;
-        if (aPin !== bPin) return bPin - aPin;
-        var aDate = a.date ? new Date(a.date).getTime() : 0;
-        var bDate = b.date ? new Date(b.date).getTime() : 0;
-        return bDate - aDate;
-      });
-    }
-    return branches;
-  }
+    return _pureGetDisplayBranches(state.branches, {
+      searchQuery: searchQuery,
+      pinnedBranches: pinnedBranches,
+      sortOrder: sortOrder,
+    });
+  };
 
   // ── Render ─────────────────────────────────────────────────────
   function render() {
@@ -1431,12 +1412,6 @@ function getDashboardJs() {
     }
   });
 
-  // ── Utility ────────────────────────────────────────────────────
-  function escHtml(s) {
-    if (!s) return '';
-    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
-  }
-
   // ── Init ───────────────────────────────────────────────────────
   connect();
 })();

package/src/server/web-ui/pure.js

@@ -0,0 +1,137 @@
+/**
+ * Pure utility functions shared between Node (server) and the web dashboard.
+ *
+ * These are extracted so they can be unit-tested in Node while still being
+ * inlined into the browser bundle by the assembly step in js.js.
+ *
+ * Every function here MUST be self-contained (no closures over external
+ * state) so it can be serialised with Function.prototype.toString() and
+ * embedded in a <script> tag.
+ *
+ * @module server/web-ui/pure
+ */
+
+/**
+ * Escape a string for safe insertion into HTML.
+ * @param {string} s
+ * @returns {string}
+ */
+function escHtml(s) {
+  if (!s) return '';
+  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+}
+
+/**
+ * Format a date string as a relative time (e.g. "5m ago", "2d ago").
+ * @param {string} dateStr - ISO date string or any value accepted by `new Date()`
+ * @returns {string}
+ */
+function timeAgo(dateStr) {
+  if (!dateStr) return '';
+  var ts = new Date(dateStr).getTime();
+  if (isNaN(ts)) return '';
+  var diff = Date.now() - ts;
+  if (diff < 0) return 'now';
+  var s = Math.floor(diff / 1000);
+  if (s < 60) return s + 's ago';
+  var m = Math.floor(s / 60);
+  if (m < 60) return m + 'm ago';
+  var h = Math.floor(m / 60);
+  if (h < 24) return h + 'h ago';
+  var d = Math.floor(h / 24);
+  return d + 'd ago';
+}
+
+/**
+ * Render a sparkline Unicode string as HTML bar elements.
+ * @param {string} sparkStr - String of Unicode block characters (U+2581–U+2588)
+ * @returns {string} HTML string
+ */
+function renderSparklineBars(sparkStr) {
+  if (!sparkStr) return '';
+  var chars = '\u2581\u2582\u2583\u2584\u2585\u2586\u2587\u2588';
+  var html = '<div class="sparkline-bar">';
+  for (var i = 0; i < sparkStr.length; i++) {
+    var ch = sparkStr[i];
+    var idx = chars.indexOf(ch);
+    if (idx < 0) {
+      html += '<div class="spark-bar" style="height:1px"></div>';
+    } else {
+      var pct = Math.round(((idx + 1) / 8) * 100);
+      html += '<div class="spark-bar" style="height:' + pct + '%"></div>';
+    }
+  }
+  html += '</div>';
+  return html;
+}
+
+/**
+ * Format a number in compact notation (e.g. 1500 → "1.5k").
+ * @param {number} n
+ * @returns {string}
+ */
+function fmtCompact(n) {
+  if (n < 1000) return String(n);
+  if (n < 10000) return (n / 1000).toFixed(1) + 'k';
+  if (n < 1000000) return Math.round(n / 1000) + 'k';
+  return (n / 1000000).toFixed(1) + 'm';
+}
+
+/**
+ * Filter and sort branches for display.
+ * Pure function — all dependencies passed as arguments.
+ * @param {Array} branches - Full branch list from state
+ * @param {Object} options
+ * @param {string} [options.searchQuery=''] - Filter string
+ * @param {string[]} [options.pinnedBranches=[]] - Branch names pinned to top
+ * @param {string} [options.sortOrder='default'] - 'default' | 'alpha' | 'recent'
+ * @returns {Array} Filtered and sorted branch list
+ */
+function getDisplayBranches(branches, options) {
+  if (!branches) return [];
+  var searchQuery = (options && options.searchQuery) || '';
+  var pinnedBranches = (options && options.pinnedBranches) || [];
+  var sortOrder = (options && options.sortOrder) || 'default';
+
+  var result = branches.slice();
+
+  if (searchQuery) {
+    var q = searchQuery.toLowerCase();
+    result = result.filter(function(b) {
+      return b.name.toLowerCase().indexOf(q) !== -1;
+    });
+  }
+
+  // Build pin lookup once
+  var pinSet = {};
+  for (var i = 0; i < pinnedBranches.length; i++) pinSet[pinnedBranches[i]] = true;
+
+  if (sortOrder === 'alpha') {
+    result.sort(function(a, b) {
+      var aPin = pinSet[a.name] ? 1 : 0;
+      var bPin = pinSet[b.name] ? 1 : 0;
+      if (aPin !== bPin) return bPin - aPin;
+      return a.name.localeCompare(b.name);
+    });
+  } else if (sortOrder === 'recent') {
+    result.sort(function(a, b) {
+      var aPin = pinSet[a.name] ? 1 : 0;
+      var bPin = pinSet[b.name] ? 1 : 0;
+      if (aPin !== bPin) return bPin - aPin;
+      var aDate = a.date ? new Date(a.date).getTime() : 0;
+      var bDate = b.date ? new Date(b.date).getTime() : 0;
+      return bDate - aDate;
+    });
+  } else if (pinnedBranches.length > 0) {
+    // Default sort: only move pinned branches to top
+    result.sort(function(a, b) {
+      var aPin = pinSet[a.name] ? 1 : 0;
+      var bPin = pinSet[b.name] ? 1 : 0;
+      return bPin - aPin;
+    });
+  }
+
+  return result;
+}
+
+module.exports = { escHtml, timeAgo, renderSparklineBars, fmtCompact, getDisplayBranches };

package/src/server/web.js

@@ -429,7 +429,7 @@ class WebDashboardServer {
 
     // Keepalive heartbeat to prevent proxy/LB timeouts
     const keepalive = setInterval(() => {
-      try { res.write(': keepalive\\n\\n'); } catch (e) { clearInterval(keepalive); }
+      try { res.write(': keepalive\n\n'); } catch (e) { clearInterval(keepalive); }
     }, SSE_KEEPALIVE_INTERVAL);
 
     req.on('close', () => {