@devness/useai 0.4.5 → 0.4.6

package/dist/index.js

@@ -112,7 +112,7 @@ var VERSION;
 var init_version = __esm({
   "../shared/dist/constants/version.js"() {
     "use strict";
-    VERSION = "0.4.5";
+    VERSION = "0.4.6";
   }
 });
 
@@ -2302,6 +2302,12 @@ function getDashboardHtml() {
     color: var(--muted);
     font-family: 'SF Mono', 'Fira Code', monospace;
   }
+  .milestone-duration {
+    font-size: 0.7rem;
+    color: var(--muted);
+    font-family: 'SF Mono', 'Fira Code', monospace;
+    white-space: nowrap;
+  }
   .milestone-date {
     font-size: 0.72rem;
     color: var(--muted);
@@ -2348,6 +2354,77 @@ function getDashboardHtml() {
     text-decoration: underline;
   }
 
+  /* Login form */
+  .login-form {
+    max-width: 320px;
+    margin: 0 auto;
+    text-align: center;
+  }
+  .login-form h3 {
+    font-size: 0.95rem;
+    color: var(--text);
+    margin-bottom: 4px;
+    font-weight: 600;
+  }
+  .login-form .login-sub {
+    font-size: 0.8rem;
+    color: var(--muted);
+    margin-bottom: 16px;
+  }
+  .login-input {
+    width: 100%;
+    padding: 10px 12px;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    color: var(--text);
+    font-size: 0.88rem;
+    font-family: system-ui, sans-serif;
+    outline: none;
+    margin-bottom: 10px;
+  }
+  .login-input:focus { border-color: var(--amber); }
+  .login-input::placeholder { color: #5a5248; }
+  .login-input.otp-input {
+    text-align: center;
+    font-family: 'SF Mono', 'Fira Code', monospace;
+    font-size: 1.2rem;
+    letter-spacing: 6px;
+  }
+  .login-btn {
+    width: 100%;
+    padding: 10px;
+    background: var(--amber);
+    color: var(--bg);
+    border: none;
+    border-radius: var(--radius);
+    font-weight: 600;
+    font-size: 0.88rem;
+    cursor: pointer;
+    font-family: system-ui, sans-serif;
+    transition: opacity 0.15s;
+  }
+  .login-btn:hover { opacity: 0.85; }
+  .login-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+  .login-msg {
+    margin-top: 10px;
+    font-size: 0.8rem;
+  }
+  .login-msg.error { color: var(--red); }
+  .login-msg.success { color: var(--green); }
+  .login-msg.dim { color: var(--muted); }
+  .login-link {
+    background: none;
+    border: none;
+    color: var(--amber);
+    cursor: pointer;
+    font-size: 0.8rem;
+    font-family: system-ui, sans-serif;
+    text-decoration: underline;
+    padding: 0;
+    margin-top: 6px;
+  }
+
   .empty {
     text-align: center;
     color: var(--muted);
@@ -2450,6 +2527,14 @@ function getDashboardHtml() {
     return d.innerHTML;
   }
 
+  function fmtDuration(mins) {
+    if (!mins || mins <= 0) return '';
+    if (mins < 60) return mins + 'm';
+    var h = Math.floor(mins / 60);
+    var m = mins % 60;
+    return m > 0 ? h + 'h ' + m + 'm' : h + 'h';
+  }
+
   function renderMilestones(milestones) {
     var section = document.getElementById('milestones-section');
     var list = document.getElementById('milestones-list');
@@ -2462,17 +2547,21 @@ function getDashboardHtml() {
     var recent = milestones.slice(-20).reverse();
     list.innerHTML = recent.map(function(m) {
       var date = m.created_at ? m.created_at.slice(0, 10) : '';
+      var dur = fmtDuration(m.duration_minutes);
       return '<div class="milestone-item">' +
         '<div class="milestone-title">' + escapeHtml(m.title) + '</div>' +
         '<div class="milestone-meta">' +
           '<span class="' + badgeClass(m.category) + '">' + escapeHtml(m.category) + '</span>' +
           (m.complexity ? '<span class="complexity">' + escapeHtml(m.complexity) + '</span>' : '') +
+          (dur ? '<span class="milestone-duration">' + dur + '</span>' : '') +
           '<span class="milestone-date">' + escapeHtml(date) + '</span>' +
         '</div>' +
       '</div>';
     }).join('');
   }
 
+  var loginEmail = '';
+
   function renderSync(config) {
     var section = document.getElementById('sync-section');
     if (!config) { section.style.display = 'none'; return; }
@@ -2482,20 +2571,134 @@ function getDashboardHtml() {
       var lastSync = config.last_sync_at ? 'Last sync: ' + config.last_sync_at : 'Never synced';
       section.innerHTML = '<div class="sync-section">' +
         '<h2 style="font-size:0.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:12px;font-weight:600;">Sync</h2>' +
+        '<div class="sync-status" id="sync-status" style="margin-bottom:12px;">Logged in as <strong>' + escapeHtml(config.email || '') + '</strong></div>' +
         '<button class="sync-btn" id="sync-btn">Sync to useai.dev</button>' +
-        '<div class="sync-status" id="sync-status">' + escapeHtml(lastSync) + '</div>' +
+        '<div class="sync-status" id="sync-time">' + escapeHtml(lastSync) + '</div>' +
         '<div class="sync-result" id="sync-result"></div>' +
       '</div>';
       document.getElementById('sync-btn').addEventListener('click', doSync);
     } else {
-      section.innerHTML = '<div class="setup-msg">Login at <a href="https://useai.dev" target="_blank">useai.dev</a> to sync your data across devices</div>';
+      renderLoginForm();
     }
   }
 
+  function renderLoginForm() {
+    var section = document.getElementById('sync-section');
+    section.innerHTML = '<div class="login-form" id="login-form">' +
+      '<h3>Sign in to sync</h3>' +
+      '<div class="login-sub">Sync sessions & milestones to useai.dev</div>' +
+      '<input class="login-input" id="login-email" type="email" placeholder="you@email.com" autocomplete="email">' +
+      '<button class="login-btn" id="login-send-btn">Send verification code</button>' +
+      '<div class="login-msg" id="login-msg"></div>' +
+    '</div>';
+    document.getElementById('login-send-btn').addEventListener('click', sendOtp);
+    document.getElementById('login-email').addEventListener('keydown', function(e) {
+      if (e.key === 'Enter') sendOtp();
+    });
+  }
+
+  function renderOtpForm() {
+    var section = document.getElementById('sync-section');
+    section.innerHTML = '<div class="login-form" id="otp-form">' +
+      '<h3>Check your email</h3>' +
+      '<div class="login-sub">Enter the 6-digit code sent to ' + escapeHtml(loginEmail) + '</div>' +
+      '<input class="login-input otp-input" id="login-otp" type="text" maxlength="6" placeholder="000000" inputmode="numeric" autocomplete="one-time-code">' +
+      '<button class="login-btn" id="login-verify-btn">Verify</button>' +
+      '<div class="login-msg" id="login-msg"></div>' +
+      '<button class="login-link" id="login-resend">Resend code</button>' +
+    '</div>';
+    document.getElementById('login-verify-btn').addEventListener('click', verifyOtp);
+    document.getElementById('login-resend').addEventListener('click', function() { sendOtp(); });
+    document.getElementById('login-otp').addEventListener('keydown', function(e) {
+      if (e.key === 'Enter') verifyOtp();
+    });
+    document.getElementById('login-otp').focus();
+  }
+
+  function sendOtp() {
+    var emailEl = document.getElementById('login-email');
+    var msg = document.getElementById('login-msg');
+    var btn = document.getElementById('login-send-btn') || document.getElementById('login-resend');
+    var email = emailEl ? emailEl.value.trim() : loginEmail;
+
+    if (!email || email.indexOf('@') === -1) {
+      msg.textContent = 'Please enter a valid email';
+      msg.className = 'login-msg error';
+      return;
+    }
+
+    loginEmail = email;
+    if (btn) { btn.disabled = true; btn.textContent = btn.id === 'login-resend' ? 'Sending...' : 'Sending code...'; }
+
+    fetch(API + '/api/local/auth/send-otp', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email: email }),
+    })
+      .then(function(r) { return r.json().then(function(d) { return { ok: r.ok, data: d }; }); })
+      .then(function(res) {
+        if (!res.ok) {
+          msg.textContent = res.data.message || 'Failed to send code';
+          msg.className = 'login-msg error';
+          if (btn) { btn.disabled = false; btn.textContent = 'Send verification code'; }
+          return;
+        }
+        renderOtpForm();
+      })
+      .catch(function(err) {
+        msg.textContent = 'Error: ' + err.message;
+        msg.className = 'login-msg error';
+        if (btn) { btn.disabled = false; btn.textContent = 'Send verification code'; }
+      });
+  }
+
+  function verifyOtp() {
+    var otpEl = document.getElementById('login-otp');
+    var msg = document.getElementById('login-msg');
+    var btn = document.getElementById('login-verify-btn');
+    var code = otpEl ? otpEl.value.trim() : '';
+
+    if (!/^d{6}$/.test(code)) {
+      msg.textContent = 'Please enter the 6-digit code';
+      msg.className = 'login-msg error';
+      return;
+    }
+
+    btn.disabled = true;
+    btn.textContent = 'Verifying...';
+    msg.textContent = '';
+
+    fetch(API + '/api/local/auth/verify-otp', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email: loginEmail, code: code }),
+    })
+      .then(function(r) { return r.json().then(function(d) { return { ok: r.ok, data: d }; }); })
+      .then(function(res) {
+        if (!res.ok) {
+          msg.textContent = res.data.message || 'Invalid code';
+          msg.className = 'login-msg error';
+          btn.disabled = false;
+          btn.textContent = 'Verify';
+          return;
+        }
+        // Success \u2014 reload config and re-render sync section
+        msg.textContent = 'Logged in!';
+        msg.className = 'login-msg success';
+        setTimeout(function() { loadAll(); }, 500);
+      })
+      .catch(function(err) {
+        msg.textContent = 'Error: ' + err.message;
+        msg.className = 'login-msg error';
+        btn.disabled = false;
+        btn.textContent = 'Verify';
+      });
+  }
+
   function doSync() {
     var btn = document.getElementById('sync-btn');
     var result = document.getElementById('sync-result');
-    var status = document.getElementById('sync-status');
+    var timeEl = document.getElementById('sync-time');
     btn.disabled = true;
     btn.textContent = 'Syncing...';
     result.textContent = '';
@@ -2509,7 +2712,7 @@ function getDashboardHtml() {
         if (data.success) {
           result.textContent = 'Synced successfully';
           result.className = 'sync-result success';
-          if (data.last_sync_at) status.textContent = 'Last sync: ' + data.last_sync_at;
+          if (data.last_sync_at && timeEl) timeEl.textContent = 'Last sync: ' + data.last_sync_at;
         } else {
           result.textContent = 'Sync failed: ' + (data.error || 'Unknown error');
           result.className = 'sync-result error';
@@ -2725,10 +2928,66 @@ async function handleLocalSync(req, res) {
     json(res, 500, { success: false, error: err2.message });
   }
 }
+async function handleLocalSendOtp(req, res) {
+  try {
+    const raw = await readBody(req);
+    const body = raw ? JSON.parse(raw) : {};
+    const apiRes = await fetch(`${USEAI_API}/api/auth/send-otp`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email: body.email })
+    });
+    const data = await apiRes.json();
+    if (!apiRes.ok) {
+      json(res, apiRes.status, data);
+      return;
+    }
+    json(res, 200, data);
+  } catch (err2) {
+    json(res, 500, { error: err2.message });
+  }
+}
+async function handleLocalVerifyOtp(req, res) {
+  try {
+    const raw = await readBody(req);
+    const body = raw ? JSON.parse(raw) : {};
+    const apiRes = await fetch(`${USEAI_API}/api/auth/verify-otp`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email: body.email, code: body.code })
+    });
+    const data = await apiRes.json();
+    if (!apiRes.ok) {
+      json(res, apiRes.status, data);
+      return;
+    }
+    if (data.token && data.user) {
+      const config = readJson(CONFIG_FILE, {
+        milestone_tracking: true,
+        auto_sync: true,
+        sync_interval_hours: 24
+      });
+      config.auth = {
+        token: data.token,
+        user: {
+          id: data.user.id,
+          email: data.user.email,
+          username: data.user.username
+        }
+      };
+      writeJson(CONFIG_FILE, config);
+    }
+    json(res, 200, { success: true, email: data.user?.email, username: data.user?.username });
+  } catch (err2) {
+    json(res, 500, { error: err2.message });
+  }
+}
+var USEAI_API;
 var init_local_api = __esm({
   "src/dashboard/local-api.ts"() {
     "use strict";
     init_dist();
+    USEAI_API = "https://api.useai.dev";
   }
 });
 
@@ -3017,6 +3276,14 @@ async function startDaemon(port) {
       await handleLocalSync(req, res);
       return;
     }
+    if (url.pathname === "/api/local/auth/send-otp" && req.method === "POST") {
+      await handleLocalSendOtp(req, res);
+      return;
+    }
+    if (url.pathname === "/api/local/auth/verify-otp" && req.method === "POST") {
+      await handleLocalVerifyOtp(req, res);
+      return;
+    }
     if (url.pathname === "/api/seal-active" && req.method === "POST") {
       const sids = [...sessions.keys()];
       for (const sid of sids) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devness/useai",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "description": "Track your AI-assisted development workflow. MCP server that records usage metrics across all your AI tools.",
   "keywords": [
     "mcp",