hsync-cli 1.1.4 → 1.1.6

package/dist/web/index.html

@@ -208,45 +208,45 @@
       align-items: center;
     }
 
-    /* Cards */
+    /* Profile list */
     .grid-layout {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-      gap: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
     }
 
     .card {
       background: var(--surface);
       border: 1px solid var(--surface-border);
       border-radius: var(--radius);
-      padding: 20px;
-      backdrop-filter: blur(12px);
-      -webkit-backdrop-filter: blur(12px);
+      padding: 12px 16px;
       display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      transition: transform 0.2s ease, border-color 0.2s ease;
-      position: relative;
-      overflow: hidden;
+      align-items: center;
+      gap: 16px;
+      transition: border-color 0.2s ease;
     }
 
     .card:hover {
-      transform: translateY(-2px);
       border-color: rgba(255, 255, 255, 0.12);
     }
 
-    .card-header {
+    .card-name {
       display: flex;
-      justify-content: space-between;
+      flex-direction: column;
       align-items: flex-start;
-      margin-bottom: 16px;
+      gap: 6px;
+      width: 140px;
+      flex-shrink: 0;
     }
 
     .profile-title {
-      font-size: 1rem;
+      font-size: 0.95rem;
       font-weight: 700;
       color: #fff;
-      letter-spacing: -0.01em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 100%;
     }
 
     .status-badge {
@@ -296,16 +296,26 @@
     }
 
     .card-body {
+      flex: 1;
+      min-width: 0;
       display: flex;
       flex-direction: column;
-      gap: 12px;
-      margin-bottom: 20px;
+      gap: 4px;
     }
 
-    .path-group {
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
+    .path-value {
+      font-family: var(--font-mono);
+      font-size: 0.75rem;
+      color: #e2e8f0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .path-value .path-label {
+      display: inline-block;
+      width: 52px;
+      font-family: inherit;
     }
 
     .path-label {
@@ -316,53 +326,24 @@
       letter-spacing: 0.05em;
     }
 
-    .path-value {
-      font-family: var(--font-mono);
-      font-size: 0.75rem;
-      background: rgba(0, 0, 0, 0.25);
-      padding: 6px 10px;
-      border-radius: 8px;
-      border: 1px solid rgba(255, 255, 255, 0.03);
-      overflow-x: auto;
-      white-space: nowrap;
-      color: #e2e8f0;
-    }
-
     .meta-row {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 8px;
-      margin-top: 4px;
-    }
-
-    .meta-item {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      background: rgba(255, 255, 255, 0.02);
-      padding: 6px 8px;
-      border-radius: 8px;
-      border: 1px solid rgba(255, 255, 255, 0.02);
-      text-align: center;
+      font-size: 0.7rem;
+      color: var(--text-muted);
     }
 
-    .meta-val {
-      font-size: 0.7rem;
-      font-weight: 700;
+    .meta-row b {
       color: #fff;
     }
 
     .card-actions {
       display: flex;
-      justify-content: space-between;
-      align-items: center;
-      border-top: 1px solid var(--surface-border);
-      padding-top: 14px;
+      gap: 8px;
+      flex-shrink: 0;
     }
 
-    .card-actions-left {
-      display: flex;
-      gap: 8px;
+    @media (max-width: 720px) {
+      .card { flex-wrap: wrap; }
+      .card-name { width: 100%; flex-direction: row; justify-content: space-between; }
     }
 
     /* Toggle Switch */
@@ -639,6 +620,35 @@
       line-height: 1.6;
     }
 
+    .health-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--text-muted);
+      flex-shrink: 0;
+    }
+    .health-dot.ok { background: var(--success); }
+    .health-dot.warn { background: var(--warning); }
+    .health-dot.bad { background: var(--danger); }
+
+    .link-btn {
+      background: none;
+      border: none;
+      color: var(--accent);
+      font: inherit;
+      cursor: pointer;
+    }
+
+    .error-banner {
+      background: var(--danger-glow);
+      border: 1px solid rgba(244, 63, 94, 0.3);
+      color: var(--danger);
+      border-radius: 12px;
+      padding: 10px 14px;
+      font-size: 0.75rem;
+      margin-bottom: 16px;
+    }
+
     /* Autostart Card */
     .settings-card {
       background: var(--surface);
@@ -708,8 +718,10 @@
         <div class="brand-title">
           <h1>hsync Control Dashboard</h1>
           <div class="brand-server">
+            <span class="health-dot" id="healthDot" title="Checking server..."></span>
             <span>Server:</span>
             <span class="url" id="serverUrlText">Loading...</span>
+            <button class="link-btn" onclick="changeServer()">Change</button>
           </div>
         </div>
       </div>
@@ -736,6 +748,8 @@
       </div>
     </header>
 
+    <div class="error-banner" id="healthError" style="display: none;"></div>
+
     <div class="dashboard-grid">
       <!-- Profiles list -->
       <div class="profiles-section">
@@ -787,6 +801,20 @@
         </div>
       </div>
 
+      <div class="settings-card" style="flex-wrap: wrap; gap: 12px;">
+        <div class="settings-info">
+          <div class="settings-title">Account</div>
+          <div class="settings-desc" id="accountDesc">Checking login...</div>
+        </div>
+        <form id="loginForm" style="display: none; flex-wrap: wrap; gap: 8px; align-items: center;" onsubmit="event.preventDefault(); doLogin();">
+          <input class="form-input" id="loginEmail" type="email" placeholder="Email" autocomplete="username" required style="width: 190px;">
+          <input class="form-input" id="loginPassword" type="password" placeholder="Password" autocomplete="current-password" required style="width: 150px;">
+          <button class="btn btn-primary" type="submit">Login</button>
+          <button class="btn btn-secondary" type="button" onclick="doApiKeyLogin()">Use API Key</button>
+        </form>
+        <button class="btn btn-secondary" id="logoutBtn" style="display: none;" onclick="doLogout()">Logout</button>
+      </div>
+
       <!-- Logs -->
       <div class="terminal-section">
         <div class="console-header">
@@ -797,9 +825,14 @@
             </svg>
             <span>Sync Console Logs</span>
           </div>
-          <button class="btn btn-secondary btn-icon" onclick="clearLogs()" title="Clear Log Feed" style="padding: 6px 12px; font-size: 0.7rem;">
-            Clear Feed
-          </button>
+          <div style="display: flex; gap: 8px;">
+            <button class="btn btn-danger btn-icon" onclick="deleteLogFile()" title="Delete all lines from ~/.hsync/daemon.log to free disk space" style="padding: 6px 12px; font-size: 0.7rem;">
+              Delete Log File
+            </button>
+            <button class="btn btn-secondary btn-icon" onclick="clearLogs()" title="Clear Log Feed" style="padding: 6px 12px; font-size: 0.7rem;">
+              Clear Feed
+            </button>
+          </div>
         </div>
         <div class="console-window" id="consoleLogs">
           <div class="console-empty">
@@ -871,11 +904,27 @@
           </div>
         </div>
 
-        <div class="checkbox-group" onclick="toggleCheckboxValue(event)">
-          <input type="checkbox" id="jobConflictCopy" checked>
-          <label class="checkbox-label" for="jobConflictCopy">Create copy of conflicted files</label>
+        <div class="form-row">
+          <div class="form-group">
+            <label class="form-label" for="jobInclude">Include Globs (one per line)</label>
+            <textarea class="form-input" id="jobInclude" rows="3" placeholder="src/**&#10;*.md"></textarea>
+          </div>
+          <div class="form-group">
+            <label class="form-label" for="jobExclude">Exclude Globs (one per line)</label>
+            <textarea class="form-input" id="jobExclude" rows="3" placeholder="**/*.log&#10;dist/**"></textarea>
+          </div>
         </div>
 
+        <label class="checkbox-group">
+          <input type="checkbox" id="jobConflictCopy" checked>
+          <span class="checkbox-label">Create copy of conflicted files</span>
+        </label>
+
+        <label class="checkbox-group">
+          <input type="checkbox" id="jobGitignore" checked>
+          <span class="checkbox-label">Respect .gitignore files</span>
+        </label>
+
         <div class="modal-footer">
           <button type="button" class="btn btn-secondary" onclick="closeModal()">Cancel</button>
           <button type="submit" class="btn btn-primary" id="saveBtn">Register Profile</button>
@@ -901,8 +950,82 @@
       // Setup periodic polling
       pollIntervalId = setInterval(pollServiceState, 3000);
       logPollIntervalId = setInterval(pollLogs, 3000);
+      pollHealth();
+      setInterval(pollHealth, 15000);
     });
 
+    async function pollHealth() {
+      let health;
+      try {
+        health = await (await fetch('/api/local/status')).json();
+      } catch {
+        return;
+      }
+      const ok = health.serverUp && health.loggedIn;
+      document.getElementById('serverUrlText').textContent = health.serverUrl;
+      const dot = document.getElementById('healthDot');
+      dot.className = `health-dot ${ok ? 'ok' : health.serverUp ? 'warn' : 'bad'}`;
+      dot.title = ok ? `Server up, logged in as ${health.email}` : health.error;
+
+      const errorEl = document.getElementById('healthError');
+      errorEl.textContent = health.error || '';
+      errorEl.style.display = health.error ? 'block' : 'none';
+
+      document.getElementById('accountDesc').textContent = health.loggedIn
+        ? `Signed in as ${health.email} (${health.role})`
+        : health.serverUp ? 'Not logged in. Sync jobs cannot run until you log in.' : 'Server unreachable.';
+      document.getElementById('loginForm').style.display = health.loggedIn ? 'none' : 'flex';
+      document.getElementById('logoutBtn').style.display = health.loggedIn ? 'inline-flex' : 'none';
+    }
+
+    async function postLocal(url, body) {
+      const res = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body || {}) });
+      if (!res.ok) throw new Error((await res.json()).error || `Request failed (${res.status})`);
+    }
+
+    async function changeServer() {
+      const url = prompt('Server URL', document.getElementById('serverUrlText').textContent);
+      if (!url) return;
+      try {
+        await postLocal('/api/local/server', { url: url.trim() });
+      } catch (err) {
+        alert(err.message);
+      }
+      await pollHealth();
+    }
+
+    async function doLogin() {
+      const passwordEl = document.getElementById('loginPassword');
+      try {
+        await postLocal('/api/local/login', { email: document.getElementById('loginEmail').value.trim(), password: passwordEl.value });
+        passwordEl.value = '';
+      } catch (err) {
+        alert(`Login failed: ${err.message}`);
+      }
+      await pollHealth();
+    }
+
+    async function doApiKeyLogin() {
+      const apiKey = prompt('Paste an API key (create one in the web app under Settings)');
+      if (!apiKey) return;
+      try {
+        await postLocal('/api/local/login', { apiKey: apiKey.trim() });
+      } catch (err) {
+        alert(`Login failed: ${err.message}`);
+      }
+      await pollHealth();
+    }
+
+    async function doLogout() {
+      if (!confirm('Log out? Sync jobs will stop working until you log in again.')) return;
+      try {
+        await postLocal('/api/local/logout');
+      } catch (err) {
+        alert(err.message);
+      }
+      await pollHealth();
+    }
+
     async function loadDashboardData() {
       showLoading(true);
       try {
@@ -1043,7 +1166,7 @@
           // Parse timestamps [HH:MM:SS] if present
           let time = '';
           let text = line;
-          const match = line.match(/^(\[\d{1,2}:\d{2}:\d{2}\])\s*(.*)/);
+          const match = line.match(/^(\[\d{1,2}:\d{2}:\d{2}(?: [AP]M)?\])\s*(.*)/);
           if (match) {
             time = match[1];
             text = match[2];
@@ -1069,6 +1192,17 @@
       }
     }
 
+    async function deleteLogFile() {
+      if (!confirm('Delete all lines from the log file on disk? This cannot be undone.')) return;
+      try {
+        const res = await fetch('/api/local/logs/clear', { method: 'POST' });
+        if (!res.ok) throw new Error((await res.json()).error || 'Failed to clear log file.');
+        clearLogs();
+      } catch (err) {
+        alert(err.message);
+      }
+    }
+
     function clearLogs() {
       // Only hides the view; the log file on disk is untouched
       clearedThroughLine = lastLogLine;
@@ -1094,7 +1228,7 @@
         return;
       }
 
-      grid.style.display = 'grid';
+      grid.style.display = 'flex';
       empty.style.display = 'none';
       grid.innerHTML = '';
 
@@ -1105,60 +1239,37 @@
         
         // Setup card HTML structure
         card.innerHTML = `
-          <div>
-            <div class="card-header">
-              <span class="profile-title">${escapeHtml(job.name)}</span>
-              <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">${job.enabled ? 'Enabled' : 'Paused'}</span>
-              </button>
-            </div>
-            
-            <div class="card-body">
-              <div class="path-group">
-                <span class="path-label">Local Directory</span>
-                <span class="path-value">${escapeHtml(job.localPath)}</span>
-              </div>
-              <div class="path-group">
-                <span class="path-label">Remote Destination</span>
-                <span class="path-value">${escapeHtml(job.remoteBucket)}:${escapeHtml(job.remotePath || '')}</span>
-              </div>
-              
-              <div class="meta-row">
-                <div class="meta-item">
-                  <span class="path-label">Direction</span>
-                  <span class="meta-val">${capitalize(job.direction)}</span>
-                </div>
-                <div class="meta-item">
-                  <span class="path-label">Interval</span>
-                  <span class="meta-val">${job.intervalMs ? job.intervalMs / 1000 : 10}s</span>
-                </div>
-                <div class="meta-item">
-                  <span class="path-label">Conflict Copy</span>
-                  <span class="meta-val">${job.conflictCopy ? 'Yes' : 'No'}</span>
-                </div>
-              </div>
-            </div>
+          <div class="card-name">
+            <span class="profile-title" title="${escapeHtml(job.name)}">${escapeHtml(job.name)}</span>
+            <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">${job.enabled ? 'Enabled' : 'Paused'}</span>
+            </button>
+          </div>
+
+          <div class="card-body">
+            <span class="path-value" title="${escapeHtml(job.localPath)}"><span class="path-label">Local</span>${escapeHtml(job.localPath)}</span>
+            <span class="path-value" title="${escapeHtml(job.remoteBucket)}:${escapeHtml(job.remotePath || '')}"><span class="path-label">Remote</span>${escapeHtml(job.remoteBucket)}:${escapeHtml(job.remotePath || '')}</span>
+            <span class="meta-row">
+              <b>${capitalize(job.direction)}</b> · every <b>${job.intervalMs ? job.intervalMs / 1000 : 10}s</b>
+              · conflict copy <b>${job.conflictCopy ? 'Yes' : 'No'}</b>
+              · .gitignore <b>${job.respectGitignore !== false ? 'Yes' : 'No'}</b>
+            </span>
           </div>
 
           <div class="card-actions">
-            <div class="card-actions-left">
-              <button class="btn btn-secondary btn-icon" onclick="openEditModal('${job.id}')" title="Edit Profile">
-                <!-- Edit icon -->
-                <svg style="width: 14px; height: 14px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
-                  <path d="M18.5 2.5a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
-                </svg>
-              </button>
-              <button class="btn btn-danger btn-icon" onclick="deleteProfile('${job.id}', '${escapeJs(job.name)}')" title="Delete Profile">
-                <!-- Trash icon -->
-                <svg style="width: 14px; height: 14px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <polyline points="3 6 5 6 21 6"></polyline>
-                  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-                </svg>
-              </button>
-            </div>
-            
+            <button class="btn btn-secondary btn-icon" onclick="openEditModal('${job.id}')" title="Edit Profile">
+              <svg style="width: 14px; height: 14px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+                <path d="M18.5 2.5a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+              </svg>
+            </button>
+            <button class="btn btn-danger btn-icon" onclick="deleteProfile('${job.id}', '${escapeJs(job.name)}')" title="Delete Profile">
+              <svg style="width: 14px; height: 14px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="3 6 5 6 21 6"></polyline>
+                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+              </svg>
+            </button>
             <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>
@@ -1227,6 +1338,7 @@
       document.getElementById('jobForm').reset();
       document.getElementById('saveBtn').textContent = 'Register Profile';
       document.getElementById('jobConflictCopy').checked = true;
+      document.getElementById('jobGitignore').checked = true;
       
       document.getElementById('jobModalBackdrop').classList.add('open');
     }
@@ -1245,6 +1357,9 @@
       document.getElementById('jobStrategy').value = job.conflictStrategy || 'newer-wins';
       document.getElementById('jobInterval').value = job.intervalMs ? job.intervalMs / 1000 : 10;
       document.getElementById('jobConflictCopy').checked = !!job.conflictCopy;
+      document.getElementById('jobGitignore').checked = job.respectGitignore !== false;
+      document.getElementById('jobInclude').value = (job.filePatterns || []).join('\n');
+      document.getElementById('jobExclude').value = (job.excludePatterns || []).join('\n');
       document.getElementById('saveBtn').textContent = 'Save Changes';
 
       document.getElementById('jobModalBackdrop').classList.add('open');
@@ -1260,14 +1375,6 @@
       }
     }
 
-    function toggleCheckboxValue(e) {
-      // Allow clicking label/row to toggle the checkbox
-      if (e.target.id !== 'jobConflictCopy') {
-        const checkbox = document.getElementById('jobConflictCopy');
-        checkbox.checked = !checkbox.checked;
-      }
-    }
-
     async function saveJob(e) {
       e.preventDefault();
       
@@ -1279,6 +1386,9 @@
       const strategy = document.getElementById('jobStrategy').value;
       const intervalSec = parseInt(document.getElementById('jobInterval').value, 10);
       const conflictCopy = document.getElementById('jobConflictCopy').checked;
+      const gitignore = document.getElementById('jobGitignore').checked;
+      const include = document.getElementById('jobInclude').value.split('\n').map(s => s.trim()).filter(Boolean);
+      const exclude = document.getElementById('jobExclude').value.split('\n').map(s => s.trim()).filter(Boolean);
 
       // Sanitize name/ID to matching requirements: lowercased alphanumeric + hyphen + underscores
       const name = rawName.toLowerCase().replace(/[^a-z0-9_-]/g, '');
@@ -1300,7 +1410,10 @@
               direction,
               strategy,
               intervalSec,
-              noConflictCopy: !conflictCopy
+              noConflictCopy: !conflictCopy,
+              include,
+              exclude,
+              gitignore
             })
           });
           
@@ -1330,7 +1443,10 @@
             conflictStrategy: strategy,
             conflictCopy,
             intervalMs: intervalSec * 1000,
-            enabled: true
+            enabled: true,
+            filePatterns: include,
+            excludePatterns: exclude,
+            respectGitignore: gitignore
           };
 
           const configRes = await fetch('/api/local/config');

package/package.json

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