hsync-cli 1.1.3 → 1.1.4

package/dist/web/index.html

@@ -714,6 +714,11 @@
         </div>
       </div>
       <div class="header-actions">
+        <span class="status-badge status-inactive" id="serviceBadge">
+          <span class="pulse-dot"></span>
+          <span class="badge-text">Service stopped</span>
+        </span>
+        <button class="btn btn-primary" id="serviceToggleBtn" onclick="toggleService()">Start Sync Service</button>
         <button class="btn btn-secondary btn-icon" onclick="loadDashboardData()" title="Reload Data">
           <!-- Refresh icon -->
           <svg style="width: 16px; height: 16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
@@ -881,17 +886,20 @@
 
   <script>
     let syncJobs = [];
-    let runningStates = {};
+    let serviceRunning = false;
+    // Log lines up to this one were cleared; the file still has them, so the poll would bring them back
+    let clearedThroughLine = null;
     let autostartConfigured = false;
     let pollIntervalId = null;
     let logPollIntervalId = null;
+    let lastLogLine = null;
 
     // Load everything when the DOM content loads
     document.addEventListener('DOMContentLoaded', () => {
       loadDashboardData();
       
       // Setup periodic polling
-      pollIntervalId = setInterval(pollRunningStates, 3000);
+      pollIntervalId = setInterval(pollServiceState, 3000);
       logPollIntervalId = setInterval(pollLogs, 3000);
     });
 
@@ -909,8 +917,8 @@
         // 2. Fetch Autostart status
         await checkAutostartStatus();
 
-        // 3. Fetch running statuses
-        await pollRunningStates();
+        // 3. Fetch service status
+        await pollServiceState();
 
         // 4. Load logs
         await pollLogs();
@@ -961,47 +969,58 @@
         const btn = document.getElementById('autostartToggleBtn');
         btn.disabled = true;
         
-        if (autostartConfigured) {
-          // Note: In the existing CLI logic, autostart is disabled by removing files, 
-          // but we only have a POST /api/local/autostart/enable endpoint. Let's see if it supports disabling?
-          // If the endpoint doesn't support disable, let's notify they can only configure it, or talk to CLI.
-          // Wait, the API endpoint is /api/local/autostart/enable. Let's send enable.
-          const res = await fetch('/api/local/autostart/enable', { method: 'POST' });
-          if (!res.ok) throw new Error('Failed to toggle autostart.');
-        } else {
-          const res = await fetch('/api/local/autostart/enable', { method: 'POST' });
-          if (!res.ok) throw new Error('Failed to enable autostart.');
-        }
+        const res = await fetch(`/api/local/autostart/${autostartConfigured ? 'disable' : 'enable'}`, { method: 'POST' });
+        if (!res.ok) throw new Error('Failed to update autostart.');
         await checkAutostartStatus();
       } catch (err) {
         alert(err.message);
       }
     }
 
-    async function pollRunningStates() {
-      if (syncJobs.length === 0) return;
-      
-      const states = {};
-      for (const job of syncJobs) {
-        try {
-          const res = await fetch(`/api/local/jobs/${encodeURIComponent(job.name)}/status`);
-          const data = await res.json();
-          states[job.id] = !!data.running;
-        } catch {
-          states[job.id] = false;
-        }
+    async function pollServiceState() {
+      try {
+        const res = await fetch('/api/local/service/status');
+        serviceRunning = !!(await res.json()).running;
+      } catch {
+        serviceRunning = false;
+      }
+
+      const badge = document.getElementById('serviceBadge');
+      badge.className = `status-badge ${serviceRunning ? 'status-active' : 'status-inactive'}`;
+      badge.querySelector('.badge-text').textContent = serviceRunning ? 'Service running' : 'Service stopped';
+
+      const btn = document.getElementById('serviceToggleBtn');
+      btn.className = `btn ${serviceRunning ? 'btn-danger' : 'btn-primary'}`;
+      btn.innerHTML = serviceRunning ? `<svg style="width: 12px; height: 12px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"/></svg> Stop Sync Service` : `<svg style="width: 12px; height: 12px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg> Start Sync Service`;
+    }
+
+    async function toggleService() {
+      const btn = document.getElementById('serviceToggleBtn');
+      btn.disabled = true;
+      try {
+        const res = await fetch(`/api/local/service/${serviceRunning ? 'stop' : 'start'}`, { method: 'POST' });
+        if (!res.ok) throw new Error((await res.json()).error || 'Failed to toggle sync service.');
+        // Give the daemon a moment to write its pid file
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      } catch (err) {
+        alert(err.message);
+      } finally {
+        await pollServiceState();
+        btn.disabled = false;
       }
-      runningStates = states;
-      updateUIStates();
     }
 
     async function pollLogs() {
       try {
         const res = await fetch('/api/local/logs');
         const data = await res.json();
-        const logs = data.logs || [];
+        let logs = data.logs || [];
+        if (clearedThroughLine !== null) {
+          logs = logs.slice(logs.lastIndexOf(clearedThroughLine) + 1);
+        }
         
         const consoleEl = document.getElementById('consoleLogs');
+        lastLogLine = (data.logs || []).at(-1) ?? null;
         if (logs.length === 0 || (logs.length === 1 && logs[0].includes('No active logs'))) {
           // Keep empty state
           return;
@@ -1051,7 +1070,8 @@
     }
 
     function clearLogs() {
-      // In web dashboard, we can just clear the local DOM view (polling will refill on next run if still on disk)
+      // Only hides the view; the log file on disk is untouched
+      clearedThroughLine = lastLogLine;
       const consoleEl = document.getElementById('consoleLogs');
       consoleEl.innerHTML = `
         <div class="console-empty">
@@ -1079,8 +1099,6 @@
       grid.innerHTML = '';
 
       syncJobs.forEach(job => {
-        const isRunning = !!runningStates[job.id];
-        
         const card = document.createElement('div');
         card.className = 'card';
         card.id = `card-${job.id}`;
@@ -1090,10 +1108,10 @@
           <div>
             <div class="card-header">
               <span class="profile-title">${escapeHtml(job.name)}</span>
-              <span class="status-badge ${isRunning ? 'status-active' : 'status-inactive'}" id="badge-${job.id}">
+              <button class="status-badge ${job.enabled ? 'status-active' : 'status-inactive'}" style="cursor: pointer;" onclick="toggleEnabled('${escapeJs(job.name)}')" title="${job.enabled ? 'Pause this job in the sync service' : 'Resume this job in the sync service'}">
                 <span class="pulse-dot"></span>
-                <span class="badge-text">${isRunning ? 'Active' : 'Stopped'}</span>
-              </span>
+                <span class="badge-text">${job.enabled ? 'Enabled' : 'Paused'}</span>
+              </button>
             </div>
             
             <div class="card-body">
@@ -1141,16 +1159,8 @@
               </button>
             </div>
             
-            <button class="btn ${isRunning ? 'btn-danger' : 'btn-primary'}" id="toggle-btn-${job.id}" onclick="toggleDaemon('${job.id}', '${escapeJs(job.name)}')">
-              ${isRunning ? `
-                <svg style="width: 12px; height: 12px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-                  <rect x="4" y="4" width="16" height="16" rx="2" ry="2"/>
-                </svg> Stop Daemon
-              ` : `
-                <svg style="width: 12px; height: 12px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-                  <polygon points="5 3 19 12 5 21 5 3"/>
-                </svg> Start Daemon
-              `}
+            <button class="btn btn-primary" id="run-btn-${job.id}" onclick="syncNow('${job.id}', '${escapeJs(job.name)}')" title="Run one sync pass now, even if paused">
+              <svg style="width: 12px; height: 12px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg> Sync now
             </button>
           </div>
         `;
@@ -1158,57 +1168,30 @@
       });
     }
 
-    function updateUIStates() {
-      syncJobs.forEach(job => {
-        const isRunning = !!runningStates[job.id];
-        
-        const badge = document.getElementById(`badge-${job.id}`);
-        const toggleBtn = document.getElementById(`toggle-btn-${job.id}`);
-        
-        if (badge) {
-          badge.className = `status-badge ${isRunning ? 'status-active' : 'status-inactive'}`;
-          badge.querySelector('.badge-text').textContent = isRunning ? 'Active' : 'Stopped';
-        }
-        
-        if (toggleBtn) {
-          toggleBtn.className = `btn ${isRunning ? 'btn-danger' : 'btn-primary'}`;
-          toggleBtn.innerHTML = isRunning ? `
-            <svg style="width: 12px; height: 12px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-              <rect x="4" y="4" width="16" height="16" rx="2" ry="2"/>
-            </svg> Stop Daemon
-          ` : `
-            <svg style="width: 12px; height: 12px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-              <polygon points="5 3 19 12 5 21 5 3"/>
-            </svg> Start Daemon
-          `;
-        }
-      });
+    async function toggleEnabled(jobName) {
+      try {
+        const res = await fetch(`/api/local/jobs/${encodeURIComponent(jobName)}/toggle`, { method: 'POST' });
+        if (!res.ok) throw new Error((await res.json()).error || 'Failed to update sync job.');
+        const enabled = (await res.json()).enabled;
+        syncJobs.find(j => j.name === jobName).enabled = enabled;
+        renderProfiles();
+      } catch (err) {
+        alert(err.message);
+      }
     }
 
-    async function toggleDaemon(jobId, jobName) {
-      const isRunning = !!runningStates[jobId];
-      const endpoint = isRunning ? 'stop' : 'start';
-      
+    async function syncNow(jobId, jobName) {
+      const btn = document.getElementById(`run-btn-${jobId}`);
+      btn.disabled = true;
+      btn.textContent = 'Syncing…';
       try {
-        const toggleBtn = document.getElementById(`toggle-btn-${jobId}`);
-        if (toggleBtn) toggleBtn.disabled = true;
-
-        const res = await fetch(`/api/local/jobs/${encodeURIComponent(jobName)}/${endpoint}`, {
-          method: 'POST'
-        });
-        if (!res.ok) {
-          const data = await res.json();
-          throw new Error(data.error || 'Failed to toggle daemon status.');
-        }
-
-        // Wait a small moment to let system process starting, then refresh
-        setTimeout(async () => {
-          await pollRunningStates();
-          if (toggleBtn) toggleBtn.disabled = false;
-        }, 1000);
+        const res = await fetch(`/api/local/jobs/${encodeURIComponent(jobName)}/run`, { method: 'POST' });
+        if (!res.ok) throw new Error((await res.json()).error || 'Sync run failed.');
       } catch (err) {
         alert(err.message);
-        await pollRunningStates();
+      } finally {
+        await pollLogs();
+        renderProfiles();
       }
     }
 
@@ -1216,11 +1199,6 @@
       if (!confirm(`Are you sure you want to delete the sync profile "${jobName}"?`)) return;
 
       try {
-        // Stop daemon first if running
-        if (runningStates[jobId]) {
-          await fetch(`/api/local/jobs/${encodeURIComponent(jobName)}/stop`, { method: 'POST' });
-        }
-
         // Filter out of config and save config back
         const configRes = await fetch('/api/local/config');
         const config = await configRes.json();
@@ -1386,9 +1364,10 @@
                 .replace(/'/g, '&#039;');
     }
 
+    // For JS string literals inside double-quoted onclick attributes: the browser HTML-decodes before running the JS
     function escapeJs(str) {
       if (!str) return '';
-      return str.replace(/\\/g, '\\\\').replace(/'/g, "\\'").replace(/"/g, '\\"');
+      return escapeHtml(str.replace(/\\/g, '\\\\').replace(/'/g, "\\'"));
     }
 
     function capitalize(str) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hsync-cli",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "hsync CLI for file sync operations",
   "bin": {
     "hsync": "./dist/bin.js"