@cluesmith/codev 2.0.0-rc.64 → 2.0.0-rc.69

package/templates/tower.html

@@ -422,6 +422,11 @@
       gap: 24px;
     }
 
+    .new-shell-row {
+      margin-top: 8px;
+      padding-top: 8px;
+    }
+
     /* Recents section */
     .recents-section {
       margin-top: 32px;
@@ -637,6 +642,61 @@
       }
     }
 
+    /* Cloud status */
+    .cloud-status {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 14px;
+      color: var(--text-secondary);
+    }
+
+    .cloud-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      display: inline-block;
+    }
+
+    .cloud-dot--green { background: var(--status-running); }
+    .cloud-dot--yellow { background: #eab308; }
+    .cloud-dot--red { background: #ef4444; }
+    .cloud-dot--gray { background: var(--text-muted); }
+
+    .cloud-link {
+      color: var(--accent);
+      text-decoration: none;
+      font-size: 13px;
+    }
+
+    .cloud-link:hover {
+      text-decoration: underline;
+    }
+
+    .cloud-uptime {
+      color: var(--text-muted);
+      font-size: 12px;
+    }
+
+    .cloud-btn {
+      padding: 4px 10px;
+      border-radius: 4px;
+      border: 1px solid var(--border);
+      background: var(--bg-tertiary);
+      color: var(--text-secondary);
+      cursor: pointer;
+      font-size: 12px;
+    }
+
+    .cloud-btn:hover {
+      background: #333;
+    }
+
+    .cloud-btn:disabled {
+      opacity: 0.5;
+      cursor: default;
+    }
+
     /* Reduced motion */
     @media (prefers-reduced-motion: reduce) {
       .status-dot.running,
@@ -672,10 +732,24 @@
         justify-content: flex-end;
       }
 
+      /* 1. Hide Share button on mobile (tunnel is for reaching phone, not FROM phone) */
+      #share-btn {
+        display: none !important;
+      }
+
+      /* 7. Reduce section spacing */
       .main {
-        padding: 16px;
-        padding-left: calc(16px + env(safe-area-inset-left, 0));
-        padding-right: calc(16px + env(safe-area-inset-right, 0));
+        padding: 12px;
+        padding-left: calc(12px + env(safe-area-inset-left, 0));
+        padding-right: calc(12px + env(safe-area-inset-right, 0));
+      }
+
+      .section-header {
+        margin-bottom: 8px;
+      }
+
+      .instances {
+        gap: 10px;
       }
 
       .btn {
@@ -689,34 +763,78 @@
         padding: 10px 14px;
       }
 
+      /* 2. Keep project name + status badge + Restart/Stop on one line */
       .instance-header {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 12px;
-        padding: 16px;
+        flex-wrap: wrap;
+        gap: 8px;
+        padding: 12px 16px;
       }
 
       .instance-actions {
-        width: 100%;
-        justify-content: flex-end;
+        margin-left: auto;
       }
 
+      /* 3. Hide project path row on mobile */
+      .instance-path-row {
+        display: none;
+      }
+
+      /* 4. Compact terminal list (Overview, Architect, shells) */
       .port-item {
-        flex-direction: column;
-        align-items: flex-start;
+        flex-direction: row;
+        align-items: center;
+        padding: 8px 12px;
         gap: 8px;
       }
 
       .port-actions {
-        width: 100%;
+        width: auto;
       }
 
       .port-actions a {
-        min-height: 44px;
         display: flex;
         align-items: center;
         justify-content: center;
-        flex: 1;
+        padding: 6px 12px;
+        flex: 0;
+        /* min-height handled by @media (pointer: coarse) at 44px */
+      }
+
+      .instance-body {
+        padding: 12px;
+      }
+
+      /* 5. Compact New Shell row */
+      .new-shell-row {
+        margin-top: 4px;
+        padding-top: 4px;
+      }
+
+      /* 6. Compact Recent Projects */
+      .recent-item {
+        flex-direction: row;
+        align-items: center;
+        padding: 12px 16px;
+        gap: 8px;
+      }
+
+      .recent-path {
+        display: none;
+      }
+
+      .recent-time {
+        font-size: 12px;
+      }
+
+      /* 7. Reduce section spacing (continued) */
+      .recents-section {
+        margin-top: 16px;
+        padding-top: 16px;
+      }
+
+      .instance-meta {
+        margin-top: 8px;
+        padding-top: 8px;
       }
 
       .launch-section {
@@ -736,13 +854,6 @@
         min-height: 44px;
       }
 
-      .recent-item {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 12px;
-        padding: 16px;
-      }
-
       .dialog-box {
         min-width: auto;
         width: calc(100% - 32px);
@@ -840,6 +951,7 @@
       Agent Farm Control Tower
     </h1>
     <div class="header-actions">
+      <span id="cloud-status"></span>
       <button class="btn" onclick="refresh()">Refresh</button>
     </div>
   </header>
@@ -905,7 +1017,7 @@
 
     // Auth helper: get headers with auth token if available
     function getAuthHeaders() {
-      const key = localStorage.getItem('codev_web_key');
+      const key = localStorage.getItem('codev-web-key');
       return key ? { 'Authorization': `Bearer ${key}` } : {};
     }
 
@@ -916,7 +1028,7 @@
 
       // If 401, clear key and redirect to login
       if (response.status === 401) {
-        localStorage.removeItem('codev_web_key');
+        localStorage.removeItem('codev-web-key');
         location.reload();
         throw new Error('Unauthorized');
       }
@@ -925,8 +1037,8 @@
 
     // Logout function
     function logout() {
-      localStorage.removeItem('codev_web_key');
-      window.location.href = '/';
+      localStorage.removeItem('codev-web-key');
+      window.location.href = './';
     }
 
     // Initialize
@@ -961,7 +1073,7 @@
       sseController = new AbortController();
 
       try {
-        const response = await fetch('/api/events', {
+        const response = await fetch('./api/events', {
           headers: getAuthHeaders(),
           signal: sseController.signal,
         });
@@ -1038,13 +1150,18 @@
     // Refresh data from API
     async function refresh() {
       try {
-        const response = await authFetch('/api/status');
-        if (!response.ok) throw new Error('Failed to fetch status');
+        const [statusResponse, cloudStatus] = await Promise.all([
+          authFetch('./api/status'),
+          fetchCloudStatus(),
+        ]);
 
-        const data = await response.json();
+        if (!statusResponse.ok) throw new Error('Failed to fetch status');
+
+        const data = await statusResponse.json();
         runningInstances = (data.instances || []).filter(i => i.running);
         recentInstances = (data.instances || []).filter(i => !i.running);
         render();
+        renderCloudStatus(cloudStatus);
       } catch (err) {
         console.error('Refresh error:', err);
         showToast('Failed to refresh: ' + err.message, 'error');
@@ -1111,7 +1228,7 @@
               <span class="port-type">Overview</span>
             </div>
             <div class="port-actions">
-              <a href="${escapeHtml(instance.proxyUrl)}" target="_blank">Open</a>
+              <a href="${escapeHtml(relUrl(instance.proxyUrl))}" target="_blank">Open</a>
             </div>
           </div>
         `;
@@ -1125,7 +1242,7 @@
                 <span class="port-type">${escapeHtml(terminal.label)}</span>
               </div>
               <div class="port-actions">
-                <a href="${escapeHtml(terminal.url)}&fullscreen=1" target="_blank">Open</a>
+                <a href="${escapeHtml(relUrl(terminal.url))}&fullscreen=1" target="_blank">Open</a>
               </div>
             </div>
           `).join('');
@@ -1133,7 +1250,7 @@
 
         // Add "New Shell" button for this instance
         terminalsHtml += `
-          <div class="port-item" style="border-top: 1px dashed var(--border); margin-top: 8px; padding-top: 8px;">
+          <div class="port-item new-shell-row" style="border-top: 1px dashed var(--border);">
             <div class="port-info">
               <span class="port-status" style="background: var(--accent);"></span>
               <span class="port-type">New Shell</span>
@@ -1279,7 +1396,7 @@
       }
 
       try {
-        const response = await authFetch('/api/browse?path=' + encodeURIComponent(inputPath));
+        const response = await authFetch('./api/browse?path=' + encodeURIComponent(inputPath));
         const data = await response.json();
         suggestions = data.suggestions || [];
         selectedIndex = -1;
@@ -1334,7 +1451,7 @@
     // Launch a specific path (from recents)
     async function launchPath(projectPath) {
       try {
-        const response = await authFetch('/api/launch', {
+        const response = await authFetch('./api/launch', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ projectPath })
@@ -1360,7 +1477,7 @@
     // Stop an instance by project path
     async function stopInstance(projectPath) {
       try {
-        const response = await authFetch('/api/stop', {
+        const response = await authFetch('./api/stop', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ projectPath })
@@ -1383,7 +1500,7 @@
     async function restartInstance(projectPath) {
       try {
         // First stop
-        await authFetch('/api/stop', {
+        await authFetch('./api/stop', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ projectPath })
@@ -1393,7 +1510,7 @@
         await new Promise(r => setTimeout(r, 1000));
 
         // Then start
-        const response = await authFetch('/api/launch', {
+        const response = await authFetch('./api/launch', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ projectPath })
@@ -1423,7 +1540,7 @@
       }
 
       try {
-        const response = await authFetch('/api/launch', {
+        const response = await authFetch('./api/launch', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ projectPath })
@@ -1454,7 +1571,7 @@
       try {
         // Use tower proxy to route to the project's dashboard API
         const encodedPath = toBase64URL(projectPath);
-        const response = await authFetch(`/project/${encodedPath}/api/tabs/shell`, {
+        const response = await authFetch(`./project/${encodedPath}/api/tabs/shell`, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
         });
@@ -1514,6 +1631,13 @@
       }
     }
 
+    // Convert absolute paths to relative so links work behind reverse proxies.
+    // E.g. "/project/abc/" → "./project/abc/"
+    function relUrl(path) {
+      if (path && path.startsWith('/')) return '.' + path;
+      return path || '';
+    }
+
     // HTML escape
     function escapeHtml(str) {
       if (!str) return '';
@@ -1539,7 +1663,7 @@
     // The React dashboard handles tab selection internally
     function getProxyUrl(instance, portType) {
       const encodedPath = toBase64URL(instance.projectPath);
-      return `/project/${encodedPath}/`;
+      return `./project/${encodedPath}/`;
     }
 
     // Toast notifications
@@ -1591,7 +1715,7 @@
       hideCreateProjectDialog();
 
       try {
-        const response = await authFetch('/api/create', {
+        const response = await authFetch('./api/create', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ parent, name })
@@ -1624,6 +1748,116 @@
       }
     });
 
+    // Cloud status
+    let cloudLoading = false;
+
+    async function fetchCloudStatus() {
+      try {
+        const res = await authFetch('./api/tunnel/status');
+        if (res.status === 404) return null;
+        if (!res.ok) return { state: 'error' };
+        return await res.json();
+      } catch {
+        return null;
+      }
+    }
+
+    function formatUptime(ms) {
+      const s = Math.floor(ms / 1000);
+      if (s < 60) return s + 's';
+      if (s < 3600) return Math.floor(s / 60) + 'm ' + (s % 60) + 's';
+      const h = Math.floor(s / 3600);
+      const m = Math.floor((s % 3600) / 60);
+      return h + 'h ' + m + 'm';
+    }
+
+    function renderCloudStatus(status) {
+      const el = document.getElementById('cloud-status');
+      if (!status || status.state === 'error') {
+        el.innerHTML = `
+          <span class="cloud-status">
+            <span class="cloud-dot cloud-dot--gray"></span>
+            Cloud: not registered
+          </span>`;
+        return;
+      }
+
+      if (!status.registered) {
+        el.innerHTML = `
+          <span class="cloud-status">
+            <span class="cloud-dot cloud-dot--gray"></span>
+            Cloud: not registered
+          </span>`;
+        return;
+      }
+
+      if (status.state === 'auth_failed') {
+        el.innerHTML = `
+          <span class="cloud-status">
+            <span class="cloud-dot cloud-dot--red"></span>
+            Cloud: auth failed
+          </span>`;
+        return;
+      }
+
+      if (status.state === 'connecting') {
+        el.innerHTML = `
+          <span class="cloud-status">
+            <span class="cloud-dot cloud-dot--yellow"></span>
+            Cloud: connecting...
+          </span>`;
+        return;
+      }
+
+      if (status.state === 'connected') {
+        const uptimeStr = status.uptime != null ? ' <span class="cloud-uptime">' + formatUptime(status.uptime) + '</span>' : '';
+        const openLink = status.accessUrl ? ' <a href="' + escapeHtml(status.accessUrl) + '" target="_blank" rel="noopener" class="cloud-link">Open</a>' : '';
+        el.innerHTML = `
+          <span class="cloud-status">
+            <span class="cloud-dot cloud-dot--green"></span>
+            Cloud: ${escapeHtml(status.towerName || 'connected')}
+            ${uptimeStr}
+            ${openLink}
+            <button class="cloud-btn" onclick="cloudDisconnect()" ${cloudLoading ? 'disabled' : ''}>Disconnect</button>
+          </span>`;
+        return;
+      }
+
+      // Disconnected
+      el.innerHTML = `
+        <span class="cloud-status">
+          <span class="cloud-dot cloud-dot--gray"></span>
+          Cloud: disconnected
+          <button class="cloud-btn" onclick="cloudConnect()" ${cloudLoading ? 'disabled' : ''}>Connect</button>
+        </span>`;
+    }
+
+    async function cloudConnect() {
+      cloudLoading = true;
+      renderCloudStatus({ registered: true, state: 'connecting' });
+      try {
+        await authFetch('./api/tunnel/connect', { method: 'POST' });
+        showToast('Connecting to cloud...', 'success');
+      } catch (err) {
+        showToast('Connect failed: ' + err.message, 'error');
+      }
+      cloudLoading = false;
+      // Refresh will pick up new status
+      setTimeout(refresh, 2000);
+    }
+
+    async function cloudDisconnect() {
+      cloudLoading = true;
+      try {
+        await authFetch('./api/tunnel/disconnect', { method: 'POST' });
+        showToast('Disconnected from cloud', 'success');
+      } catch (err) {
+        showToast('Disconnect failed: ' + err.message, 'error');
+      }
+      cloudLoading = false;
+      setTimeout(refresh, 1000);
+    }
+
     // Initialize
     init();
   </script>