@feynmanzhang/open-party 0.1.3-beta.0 → 0.1.4

package/dist/party-server.js

@@ -28,6 +28,7 @@ var init_config = __esm({
 import { execFileSync, execSync } from "child_process";
 import { existsSync } from "fs";
 import { join } from "path";
+import { spawn as nodeSpawn } from "child_process";
 function parsePossiblyNoisyJson(raw2) {
   const trimmed = raw2.trim();
   const start = trimmed.indexOf("{");
@@ -192,6 +193,62 @@ function getTailscaleInstallationStatus() {
 function resetTailscaleBinaryCache() {
   cachedBinary = null;
 }
+function logoutTailscale(timeout = 15e3) {
+  const binary = getTailscaleBinary();
+  try {
+    const output = runExec([binary, "logout"], timeout);
+    resetTailscaleBinaryCache();
+    return { success: true, output: output.trim() };
+  } catch (e) {
+    const err = e;
+    return { success: false, output: (err.stderr ?? err.message ?? "").trim() };
+  }
+}
+function startInteractiveLogin() {
+  const binary = getTailscaleBinary();
+  const child = nodeSpawn(binary, ["login"], {
+    stdio: ["pipe", "pipe", "pipe"],
+    windowsHide: true
+  });
+  const urlRegex = /https:\/\/login\.tailscale\.com\/a\/[^\s]+/;
+  const promise = new Promise((resolve) => {
+    let stdout = "";
+    let resolved = false;
+    const done = (result) => {
+      if (resolved) return;
+      resolved = true;
+      resolve(result);
+    };
+    child.stdout?.on("data", (data) => {
+      stdout += data.toString();
+      const match2 = stdout.match(urlRegex);
+      if (match2) {
+        done({ success: true, url: match2[0], output: stdout.trim() });
+      }
+    });
+    child.stderr?.on("data", (data) => {
+      stdout += data.toString();
+    });
+    child.on("close", (code) => {
+      if (code === 0) {
+        done({ success: true, output: stdout.trim() });
+      } else {
+        done({ success: false, output: stdout.trim() || `Exited with code ${code}` });
+      }
+    });
+    child.on("error", (err) => {
+      done({ success: false, output: err.message });
+    });
+    setTimeout(() => {
+      done({ success: false, output: "Timeout waiting for login URL" });
+      try {
+        child.kill();
+      } catch {
+      }
+    }, 3e4);
+  });
+  return { promise, process: child };
+}
 function getInstallInstructions(platform) {
   switch (platform) {
     case "linux":
@@ -700,6 +757,58 @@ var init_state = __esm({
   }
 });
 
+// src/cli/tailscale-installer.ts
+var tailscale_installer_exports = {};
+__export(tailscale_installer_exports, {
+  installTailscale: () => installTailscale
+});
+import { spawn } from "child_process";
+async function installTailscale(platform) {
+  const entry = INSTALL_COMMANDS[platform];
+  if (!entry) {
+    return {
+      success: false,
+      output: `Unsupported platform: ${platform}. Please install manually from https://tailscale.com/download`
+    };
+  }
+  const cmd = entry.needsSudo ? "sudo" : entry.cmd;
+  const args = entry.needsSudo ? [entry.cmd, ...entry.args] : entry.args;
+  console.log(`Running: ${cmd} ${args.join(" ")}
+`);
+  return new Promise((resolve) => {
+    const child = spawn(cmd, args, {
+      stdio: "inherit",
+      windowsHide: true
+    });
+    let exited = false;
+    child.on("close", (code) => {
+      if (exited) return;
+      exited = true;
+      if (code === 0) {
+        resolve({ success: true, output: "Installation completed." });
+      } else {
+        resolve({ success: false, output: `Installation exited with code ${code}` });
+      }
+    });
+    child.on("error", (err) => {
+      if (exited) return;
+      exited = true;
+      resolve({ success: false, output: err.message });
+    });
+  });
+}
+var INSTALL_COMMANDS;
+var init_tailscale_installer = __esm({
+  "src/cli/tailscale-installer.ts"() {
+    "use strict";
+    INSTALL_COMMANDS = {
+      linux: { cmd: "bash", args: ["-c", "curl -fsSL https://tailscale.com/install.sh | sh"], needsSudo: true },
+      darwin: { cmd: "brew", args: ["install", "tailscale"], needsSudo: false },
+      win32: { cmd: "winget", args: ["install", "Tailscale.Tailscale", "--accept-source-agreements"], needsSudo: false }
+    };
+  }
+});
+
 // node_modules/hono/dist/compose.js
 var compose = (middleware, onError, onNotFound) => {
   return (context, next) => {
@@ -3869,7 +3978,21 @@ body::after{
 }
 .btn-join:hover{background:rgba(0,255,240,0.18);box-shadow:0 0 10px rgba(0,255,240,0.2)}
 .btn-join:active{transform:scale(0.97)}
-.btn-join.connected{border-color:var(--green);color:var(--green);background:rgba(0,255,136,0.08)}
+.btn-logout{border-color:var(--red);color:var(--red);background:rgba(255,51,102,0.08)}
+.btn-logout:hover{background:rgba(255,51,102,0.18);box-shadow:0 0 10px rgba(255,51,102,0.2)}
+.btn-install{border-color:var(--yellow);color:var(--yellow);background:rgba(255,170,0,0.08)}
+.btn-install:hover{background:rgba(255,170,0,0.18);box-shadow:0 0 10px rgba(255,170,0,0.2)}
+
+/* Tab bar inside modal */
+.tab-bar{display:flex;gap:0;margin-bottom:18px;border-bottom:1px solid var(--border)}
+.tab-bar .tab{
+  font-family:var(--font-mono);font-size:0.8rem;padding:8px 16px;cursor:pointer;
+  color:var(--muted);border-bottom:2px solid transparent;transition:all 0.2s;
+}
+.tab-bar .tab:hover{color:var(--text)}
+.tab-bar .tab.active{color:var(--cyan);border-bottom-color:var(--cyan)}
+.tab-content{display:none}
+.tab-content.active{display:block}
 
 /* Modal */
 .modal-overlay{
@@ -4042,16 +4165,47 @@ body::after{
 
   <div class="footer">OPEN PARTY v0.1 // DECENTRALIZED AGENT NETWORK</div>
 
-  <!-- Join Network Modal -->
+  <!-- Join Network / Login Modal (two tabs: Interactive + Auth Key) -->
   <div class="modal-overlay" id="joinModal">
     <div class="modal">
-      <div class="modal-title">JOIN TAILNET</div>
-      <div class="modal-desc">Enter your Tailscale auth key to join the network.<br>You can generate one from the Tailscale admin console.</div>
-      <input type="password" class="modal-input" id="authKeyInput" placeholder="tskey-auth-xxxxx..." autocomplete="off" spellcheck="false" />
-      <div class="modal-status" id="joinStatus"></div>
+      <div class="modal-title">CONNECT TO TAILNET</div>
+      <div class="tab-bar" id="joinTabs">
+        <div class="tab active" data-tab="interactive">Interactive</div>
+        <div class="tab" data-tab="authkey">Auth Key</div>
+      </div>
+
+      <!-- Interactive tab -->
+      <div class="tab-content active" id="tabInteractive">
+        <div class="modal-desc">Click the button below to open a browser authentication page.<br>Your Tailscale connection will be established once you authenticate.</div>
+        <div class="modal-status" id="interactiveStatus"></div>
+        <div class="modal-actions">
+          <button class="modal-btn modal-btn-cancel" id="btnCancelJoin">Cancel</button>
+          <button class="modal-btn modal-btn-submit" id="btnInteractiveLogin">Open Browser Login</button>
+        </div>
+      </div>
+
+      <!-- Auth Key tab -->
+      <div class="tab-content" id="tabAuthkey">
+        <div class="modal-desc">Enter your Tailscale auth key to join the network.<br>You can generate one from the Tailscale admin console.</div>
+        <input type="password" class="modal-input" id="authKeyInput" placeholder="tskey-auth-xxxxx..." autocomplete="off" spellcheck="false" />
+        <div class="modal-status" id="joinStatus"></div>
+        <div class="modal-actions">
+          <button class="modal-btn modal-btn-cancel" id="btnCancelAuthkey">Cancel</button>
+          <button class="modal-btn modal-btn-submit" id="btnSubmitJoin">Connect</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Logout Confirmation Modal -->
+  <div class="modal-overlay" id="logoutModal">
+    <div class="modal">
+      <div class="modal-title" style="color:var(--red)">LOG OUT OF TAILNET</div>
+      <div class="modal-desc">This will disconnect from Tailscale and remove your credentials.<br>You will need to re-authenticate to reconnect.</div>
+      <div class="modal-status" id="logoutStatus"></div>
       <div class="modal-actions">
-        <button class="modal-btn modal-btn-cancel" id="btnCancelJoin">Cancel</button>
-        <button class="modal-btn modal-btn-submit" id="btnSubmitJoin">Connect</button>
+        <button class="modal-btn modal-btn-cancel" id="btnCancelLogout">Cancel</button>
+        <button class="modal-btn modal-btn-submit" style="border-color:var(--red);color:var(--red);background:rgba(255,51,102,0.12)" id="btnConfirmLogout">Log Out</button>
       </div>
     </div>
   </div>
@@ -4351,28 +4505,63 @@ body::after{
     }
   }, 1000);
 
-  // ---- Join Network Modal ----
+  // ---- Join Modal Tabs ----
+  const joinTabs = $$('#joinTabs .tab');
+  joinTabs.forEach(function(tab) {
+    tab.addEventListener('click', function() {
+      joinTabs.forEach(function(t) { t.classList.remove('active'); });
+      tab.classList.add('active');
+      // Toggle tab contents
+      const target = tab.getAttribute('data-tab');
+      $$('.tab-content').forEach(function(tc) { tc.classList.remove('active'); });
+      if (target === 'interactive') {
+        $('#tabInteractive').classList.add('active');
+      } else {
+        $('#tabAuthkey').classList.add('active');
+      }
+    });
+  });
+
+  // ---- Join Network Modal (open/close) ----
   const joinModal = $('#joinModal');
   const btnJoin = $('#btnJoinNetwork');
   const btnCancel = $('#btnCancelJoin');
+  const btnCancelAuthkey = $('#btnCancelAuthkey');
   const btnSubmit = $('#btnSubmitJoin');
   const authKeyInput = $('#authKeyInput');
   const joinStatus = $('#joinStatus');
 
   function openJoinModal() {
+    // Reset both tabs
     joinStatus.className = 'modal-status';
     joinStatus.textContent = '';
     authKeyInput.value = '';
+    $('#interactiveStatus').className = 'modal-status';
+    $('#interactiveStatus').textContent = '';
+    // Default to Interactive tab
+    $$('#joinTabs .tab').forEach(function(t) { t.classList.remove('active'); });
+    $$('#joinTabs .tab')[0].classList.add('active');
+    $$('.tab-content').forEach(function(tc) { tc.classList.remove('active'); });
+    $('#tabInteractive').classList.add('active');
     joinModal.classList.add('open');
-    setTimeout(function() { authKeyInput.focus(); }, 100);
   }
 
   function closeJoinModal() {
     joinModal.classList.remove('open');
   }
 
-  btnJoin.addEventListener('click', openJoinModal);
+  btnJoin.addEventListener('click', function() {
+    // Decide action based on Tailscale state
+    if (tsState && tsState.state === 'connected') {
+      openLogoutModal();
+    } else if (tsState && tsState.state === 'not_installed') {
+      doInstallTailscale();
+    } else {
+      openJoinModal();
+    }
+  });
   btnCancel.addEventListener('click', closeJoinModal);
+  btnCancelAuthkey.addEventListener('click', closeJoinModal);
   joinModal.addEventListener('click', function(e) {
     if (e.target === joinModal) closeJoinModal();
   });
@@ -4381,6 +4570,7 @@ body::after{
     if (e.key === 'Escape') closeJoinModal();
   });
 
+  // ---- Auth Key submit ----
   btnSubmit.addEventListener('click', async function() {
     const key = authKeyInput.value.trim();
     if (!key) {
@@ -4402,9 +4592,9 @@ body::after{
       if (data.success) {
         joinStatus.className = 'modal-status success';
         joinStatus.textContent = 'Successfully joined network!';
-        btnJoin.textContent = 'Connected';
-        btnJoin.classList.add('connected');
-        setTimeout(function() { closeJoinModal(); fullRefresh(); }, 1500);
+        btnJoin.textContent = 'Logout';
+        btnJoin.className = 'btn-join btn-logout';
+        setTimeout(function() { closeJoinModal(); checkTailscaleStatus(); fullRefresh(); }, 1500);
       } else {
         joinStatus.className = 'modal-status error';
         joinStatus.textContent = data.output || 'Failed to join network';
@@ -4417,6 +4607,133 @@ body::after{
     btnSubmit.textContent = 'Connect';
   });
 
+  // ---- Interactive Login ----
+  const btnInteractiveLogin = $('#btnInteractiveLogin');
+  btnInteractiveLogin.addEventListener('click', async function() {
+    const statusEl = $('#interactiveStatus');
+    statusEl.className = 'modal-status';
+    statusEl.textContent = '';
+    btnInteractiveLogin.disabled = true;
+    btnInteractiveLogin.innerHTML = '<span class="spinner"></span>Opening browser...';
+
+    try {
+      const r = await fetch('/dashboard/api/tailscale-login', { method: 'POST' });
+      const data = await r.json();
+
+      if (data.success && data.url) {
+        // Open the auth URL in a new tab
+        window.open(data.url, '_blank');
+        statusEl.className = 'modal-status success';
+        statusEl.textContent = 'Authentication page opened in your browser. Waiting for connection...';
+
+        // Poll for connection
+        var pollCount = 0;
+        var pollInterval = setInterval(async function() {
+          pollCount++;
+          if (pollCount > 40) { // 2 minutes timeout
+            clearInterval(pollInterval);
+            statusEl.className = 'modal-status error';
+            statusEl.textContent = 'Timed out waiting for authentication. Please try again.';
+            btnInteractiveLogin.disabled = false;
+            btnInteractiveLogin.textContent = 'Open Browser Login';
+            return;
+          }
+          try {
+            var sr = await fetch('/dashboard/api/tailscale-status');
+            var sd = await sr.json();
+            if (sd.state === 'connected') {
+              clearInterval(pollInterval);
+              btnJoin.textContent = 'Logout';
+              btnJoin.className = 'btn-join btn-logout';
+              closeJoinModal();
+              checkTailscaleStatus();
+              fullRefresh();
+              return;
+            }
+          } catch { /* poll error, continue */ }
+        }, 3000);
+      } else {
+        statusEl.className = 'modal-status error';
+        statusEl.textContent = data.output || 'Failed to start interactive login';
+        btnInteractiveLogin.disabled = false;
+        btnInteractiveLogin.textContent = 'Open Browser Login';
+      }
+    } catch (e) {
+      statusEl.className = 'modal-status error';
+      statusEl.textContent = 'Network error: ' + (e.message || 'unknown');
+      btnInteractiveLogin.disabled = false;
+      btnInteractiveLogin.textContent = 'Open Browser Login';
+    }
+  });
+
+  // ---- Logout Modal ----
+  const logoutModal = $('#logoutModal');
+  const btnConfirmLogout = $('#btnConfirmLogout');
+  const btnCancelLogout = $('#btnCancelLogout');
+  const logoutStatus = $('#logoutStatus');
+
+  function openLogoutModal() {
+    logoutStatus.className = 'modal-status';
+    logoutStatus.textContent = '';
+    logoutModal.classList.add('open');
+  }
+
+  btnCancelLogout.addEventListener('click', function() { logoutModal.classList.remove('open'); });
+  logoutModal.addEventListener('click', function(e) { if (e.target === logoutModal) logoutModal.classList.remove('open'); });
+
+  btnConfirmLogout.addEventListener('click', async function() {
+    btnConfirmLogout.disabled = true;
+    btnConfirmLogout.innerHTML = '<span class="spinner"></span>Logging out...';
+    logoutStatus.className = 'modal-status';
+    logoutStatus.textContent = '';
+
+    try {
+      const r = await fetch('/dashboard/api/logout', { method: 'POST' });
+      const data = await r.json();
+      logoutModal.classList.remove('open');
+      if (data.success) {
+        checkTailscaleStatus();
+        fullRefresh();
+      } else {
+        alert('Logout failed: ' + (data.output || 'unknown error'));
+      }
+    } catch (e) {
+      logoutModal.classList.remove('open');
+      alert('Network error: ' + (e.message || 'unknown'));
+    }
+    btnConfirmLogout.disabled = false;
+    btnConfirmLogout.textContent = 'Log Out';
+  });
+
+  // ---- Install Tailscale ----
+  async function doInstallTailscale() {
+    if (!confirm('Install Tailscale on this machine?')) return;
+
+    btnJoin.disabled = true;
+    btnJoin.innerHTML = '<span class="spinner"></span>Installing...';
+
+    try {
+      const r = await fetch('/dashboard/api/install-tailscale', { method: 'POST' });
+      const data = await r.json();
+      if (data.success) {
+        btnJoin.textContent = 'Installed';
+        btnJoin.disabled = false;
+        checkTailscaleStatus();
+        fullRefresh();
+      } else {
+        alert('Installation failed: ' + (data.output || 'unknown error'));
+        btnJoin.textContent = 'Install Tailscale';
+        btnJoin.className = 'btn-join btn-install';
+        btnJoin.disabled = false;
+      }
+    } catch (e) {
+      alert('Network error: ' + (e.message || 'unknown'));
+      btnJoin.textContent = 'Install Tailscale';
+      btnJoin.className = 'btn-join btn-install';
+      btnJoin.disabled = false;
+    }
+  }
+
   // Check initial Tailscale status (tri-state)
   let tsState = null;
   let tsInstallInfo = null;
@@ -4435,17 +4752,23 @@ body::after{
     if (tsState.state === 'connected') {
       dot.className = 'status-dot';
       text.textContent = 'ONLINE';
-      btnJoin.textContent = 'Connected';
-      btnJoin.classList.add('connected');
+      btnJoin.textContent = 'Logout';
+      btnJoin.className = 'btn-join btn-logout';
+      btnJoin.style.display = '';
       panel.style.display = 'none';
     } else if (tsState.state === 'not_installed') {
       dot.className = 'status-dot not-installed';
       text.textContent = 'NOT INSTALLED';
-      btnJoin.style.display = 'none';
+      btnJoin.textContent = 'Install Tailscale';
+      btnJoin.className = 'btn-join btn-install';
+      btnJoin.style.display = '';
       await renderNotInstalledPanel();
     } else {
       dot.className = 'status-dot not-connected';
       text.textContent = 'NOT CONNECTED';
+      btnJoin.textContent = 'Join Network';
+      btnJoin.className = 'btn-join';
+      btnJoin.style.display = '';
       await renderNotConnectedPanel();
     }
   }
@@ -4479,7 +4802,7 @@ body::after{
       html += '</div>';
     }
 
-    html += '<div class="ts-setup-hint">Or run <code style="color:var(--cyan)">npx open-party setup</code> for guided installation</div>';
+    html += '<div class="ts-setup-hint">Or click the <strong>Install Tailscale</strong> button above, or run <code style="color:var(--cyan)">npx open-party setup</code></div>';
     html += '<button class="btn-redetect" onclick="window.__redetectTailscale()">Re-detect</button>';
     panel.innerHTML = html;
     panel.style.display = 'block';
@@ -4487,14 +4810,10 @@ body::after{
 
   async function renderNotConnectedPanel() {
     const panel = $('#tsPanel');
-    const btnJoin = $('#btnJoinNetwork');
-    btnJoin.style.display = '';
-    btnJoin.textContent = 'Join Network';
-    btnJoin.classList.remove('connected');
 
     let html = '<div class="ts-panel-title not-connected">Tailscale Not Connected</div>';
     html += '<div class="ts-info-row"><span class="label">Status:</span><span class="value" style="color:var(--yellow)">Installed but not authenticated</span></div>';
-    html += '<div class="ts-setup-hint">Run <code style="color:var(--cyan)">npx open-party setup</code> to log in, or use the Join Network button to enter an Auth Key</div>';
+    html += '<div class="ts-setup-hint">Use the <strong>Join Network</strong> button above to log in</div>';
     html += '<button class="btn-redetect" onclick="window.__redetectTailscale()">Re-detect</button>';
     panel.innerHTML = html;
     panel.style.display = 'block';
@@ -4617,6 +4936,37 @@ dashboardRoutes.post("/api/join-network", async (c) => {
     return c.json({ success: false, output: e.message }, 500);
   }
 });
+var activeLogin = null;
+dashboardRoutes.post("/api/logout", async (c) => {
+  const result = logoutTailscale();
+  if (result.success) {
+    resetTailscaleBinaryCache();
+    refreshSelfIp();
+  }
+  return c.json(result, result.success ? 200 : 500);
+});
+dashboardRoutes.post("/api/tailscale-login", async (c) => {
+  if (activeLogin?.url) {
+    return c.json({ success: true, url: activeLogin.url });
+  }
+  const { promise, process: process2 } = startInteractiveLogin();
+  activeLogin = { process: process2 };
+  const result = await promise;
+  if (result.success && result.url) {
+    activeLogin.url = result.url;
+    return c.json({ success: true, url: result.url });
+  }
+  activeLogin = null;
+  return c.json({ success: false, output: result.output }, 500);
+});
+dashboardRoutes.post("/api/install-tailscale", async (c) => {
+  const { installTailscale: installTailscale2 } = await Promise.resolve().then(() => (init_tailscale_installer(), tailscale_installer_exports));
+  const result = await installTailscale2(process.platform);
+  if (result.success) {
+    resetTailscaleBinaryCache();
+  }
+  return c.json(result, result.success ? 200 : 500);
+});
 
 // src/server/index.ts
 async function periodicCleanup() {