conduit-mobile 0.1.2 → 0.1.3

package/package.json

@@ -1,44 +1,44 @@
-{
-  "name": "conduit-mobile",
-  "version": "0.1.2",
-  "description": "Run Claude Code from your phone. A secure terminal bridge with mobile web UI.",
-  "type": "module",
-  "main": "src/server/index.js",
-  "bin": {
-    "conduit-mobile": "src/server/index.js"
-  },
-  "files": [
-    "src/",
-    "README.md",
-    "LICENSE"
-  ],
-  "engines": {
-    "node": ">=18.0.0"
-  },
-  "scripts": {
-    "start": "node src/server/index.js",
-    "dev": "node --watch src/server/index.js"
-  },
-  "keywords": [
-    "claude",
-    "claude-code",
-    "terminal",
-    "mobile",
-    "bridge",
-    "remote-terminal",
-    "xterm"
-  ],
-  "author": "Arun <m.arunesh@gmail.com>",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Arun3sh/conduit.git"
-  },
-  "homepage": "https://github.com/Arun3sh/conduit#readme",
-  "dependencies": {
-    "express": "^4.19.2",
-    "node-pty": "^1.0.0",
-    "qrcode-terminal": "^0.12.0",
-    "ws": "^8.18.0"
-  }
-}
+{
+  "name": "conduit-mobile",
+  "version": "0.1.3",
+  "description": "Run Claude Code from your phone. A secure terminal bridge with mobile web UI.",
+  "type": "module",
+  "main": "src/server/index.js",
+  "bin": {
+    "conduit-mobile": "src/server/index.js"
+  },
+  "files": [
+    "src/",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "scripts": {
+    "start": "node src/server/index.js",
+    "dev": "node --watch src/server/index.js"
+  },
+  "keywords": [
+    "claude",
+    "claude-code",
+    "terminal",
+    "mobile",
+    "bridge",
+    "remote-terminal",
+    "xterm"
+  ],
+  "author": "Arun <m.arunesh@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Arun3sh/conduit.git"
+  },
+  "homepage": "https://github.com/Arun3sh/conduit#readme",
+  "dependencies": {
+    "express": "^4.19.2",
+    "node-pty": "^1.0.0",
+    "qrcode-terminal": "^0.12.0",
+    "ws": "^8.18.0"
+  }
+}

package/src/client/app.js

@@ -3,6 +3,9 @@ import { hasWebSpeech, startWebSpeech } from './speech.js';
 // ── State ─────────────────────────────────────────────────────────────────────
 let ws = null;
 let activeSessionId = null;
+let currentToken = null;
+let reconnectTimer = null;
+let reconnectAttempt = 0;
 
 // Map of sessionId -> { term: Terminal, fitAddon, container, tabEl }
 const sessions = new Map();
@@ -15,12 +18,64 @@ const connectBtn    = document.getElementById('connect-btn');
 const authError     = document.getElementById('auth-error');
 const tabsEl        = document.getElementById('tabs');
 const newTabBtn     = document.getElementById('new-tab-btn');
+const notifBtn      = document.getElementById('notif-btn');
 const viewport      = document.getElementById('terminal-viewport');
 const copyBtn       = document.getElementById('copy-btn');
 const msgInput      = document.getElementById('msg-input');
 const sendBtn       = document.getElementById('send-btn');
 const micBtn        = document.getElementById('mic-btn');
 
+// ── Notifications ─────────────────────────────────────────────────────────────
+const unreadSessions = new Set();
+let notificationsEnabled = localStorage.getItem('conduit_notifications') !== 'false';
+
+function updateNotifBtn() {
+  notifBtn.textContent = notificationsEnabled ? '🔔' : '🔕';
+  notifBtn.title = notificationsEnabled ? 'Notifications on – click to disable' : 'Notifications off – click to enable';
+  notifBtn.classList.toggle('notif-on', notificationsEnabled);
+}
+
+async function toggleNotifications() {
+  notificationsEnabled = !notificationsEnabled;
+  localStorage.setItem('conduit_notifications', notificationsEnabled);
+  if (notificationsEnabled && 'Notification' in window && Notification.permission === 'default') {
+    await Notification.requestPermission();
+  }
+  updateNotifBtn();
+}
+
+function markActivity(sessionId) {
+  if (!notificationsEnabled) return;
+  if (sessionId === activeSessionId && !document.hidden) return;
+  const s = sessions.get(sessionId);
+  if (!s || unreadSessions.has(sessionId)) return;
+  unreadSessions.add(sessionId);
+  s.tabEl.classList.add('has-activity');
+  updatePageTitle();
+  if (document.hidden && 'Notification' in window && Notification.permission === 'granted') {
+    new Notification('Conduit', {
+      body: `${s.label} has new activity`,
+      icon: '/icons/icon-192.png',
+      tag: `conduit-${sessionId}`,
+    });
+  }
+}
+
+function clearActivity(sessionId) {
+  if (!unreadSessions.has(sessionId)) return;
+  unreadSessions.delete(sessionId);
+  const s = sessions.get(sessionId);
+  if (s) s.tabEl.classList.remove('has-activity');
+  updatePageTitle();
+}
+
+function updatePageTitle() {
+  document.title = unreadSessions.size > 0 ? `(${unreadSessions.size}) Conduit` : 'Conduit';
+}
+
+notifBtn.addEventListener('click', toggleNotifications);
+updateNotifBtn();
+
 // ── Auto-fill token from URL param ────────────────────────────────────────────
 const urlToken = new URLSearchParams(location.search).get('token');
 if (urlToken) tokenInput.value = urlToken;
@@ -44,13 +99,15 @@ function connect(token) {
   };
 
   ws.onerror = () => {
-    setAuthError('Connection failed. Make sure the server is running.');
-    resetConnectBtn();
+    if (!appScreen.classList.contains('active')) {
+      setAuthError('Connection failed. Make sure the server is running.');
+      resetConnectBtn();
+    }
   };
 
   ws.onclose = () => {
     if (appScreen.classList.contains('active')) {
-      showOverlay('Disconnected. Reload to reconnect.');
+      scheduleReconnect();
     } else {
       setAuthError('Connection closed.');
       resetConnectBtn();
@@ -58,10 +115,45 @@ function connect(token) {
   };
 }
 
+function scheduleReconnect() {
+  clearTimeout(reconnectTimer);
+  const delay = Math.min(1000 * 2 ** reconnectAttempt, 30_000);
+  reconnectAttempt++;
+  showReconnectOverlay(reconnectAttempt === 1 ? 'Reconnecting…' : `Reconnecting… (attempt ${reconnectAttempt})`);
+  reconnectTimer = setTimeout(() => reconnect(), delay);
+}
+
+function reconnect() {
+  // Clear stale session UI without killing server-side processes
+  for (const [id, s] of sessions) {
+    s.term.dispose();
+    s.container.remove();
+    s.tabEl.remove();
+  }
+  sessions.clear();
+  activeSessionId = null;
+  removeReconnectOverlay();
+  connect(currentToken);
+}
+
+function showReconnectOverlay(msg) {
+  removeReconnectOverlay();
+  const el = document.createElement('div');
+  el.id = 'reconnect-overlay';
+  el.textContent = msg;
+  viewport.appendChild(el);
+}
+
+function removeReconnectOverlay() {
+  document.getElementById('reconnect-overlay')?.remove();
+}
+
 function handleMessage(msg) {
   switch (msg.type) {
 
     case 'auth_ok':
+      reconnectAttempt = 0;
+      removeReconnectOverlay();
       showApp();
       if (msg.sessions.length === 0) {
         requestNewSession();
@@ -91,6 +183,7 @@ function handleMessage(msg) {
       const s = sessions.get(msg.sessionId);
       if (s) {
         s.term.write(msg.data);
+        if (msg.type === 'output') markActivity(msg.sessionId);
       }
       break;
     }
@@ -99,6 +192,7 @@ function handleMessage(msg) {
       const s = sessions.get(msg.sessionId);
       if (s) {
         s.term.write(`\r\n\x1b[31m[process exited with code ${msg.exitCode}]\x1b[0m\r\n`);
+        markActivity(msg.sessionId);
       }
       break;
     }
@@ -162,7 +256,7 @@ function addTab(id, label, subscribe = true) {
     copyBtn.classList.toggle('hidden', !has);
   });
 
-  sessions.set(id, { term, fitAddon, container, tabEl });
+  sessions.set(id, { term, fitAddon, container, tabEl, label });
 
   if (subscribe) {
     ws.send(JSON.stringify({ type: 'subscribe', sessionId: id }));
@@ -180,6 +274,7 @@ function switchTo(id) {
   }
 
   activeSessionId = id;
+  clearActivity(id);
   const s = sessions.get(id);
   s.container.classList.add('active');
   s.tabEl.classList.add('active');
@@ -209,6 +304,7 @@ function syncTabs(serverSessions) {
 function removeTab(id) {
   const s = sessions.get(id);
   if (!s) return;
+  clearActivity(id);
   s.term.dispose();
   s.container.remove();
   s.tabEl.remove();
@@ -408,6 +504,7 @@ if (window.visualViewport) {
 connectBtn.addEventListener('click', () => {
   const token = tokenInput.value.trim();
   if (!token) { setAuthError('Please enter your token.'); return; }
+  currentToken = token;
   connect(token);
 });
 
@@ -416,4 +513,4 @@ tokenInput.addEventListener('keydown', (e) => {
 });
 
 // Auto-connect if token in URL
-if (urlToken) connectBtn.click();
+if (urlToken) { currentToken = urlToken; connectBtn.click(); }

package/src/client/index.html

@@ -36,6 +36,7 @@
   <!-- Tab bar -->
   <div id="tab-bar">
     <div id="tabs"></div>
+    <button id="notif-btn" title="Notifications off">🔕</button>
     <button id="new-tab-btn" title="New terminal">+</button>
   </div>
 

package/src/client/style.css

@@ -144,7 +144,7 @@ html, body {
 }
 .tab .close-tab:hover { background: #ff444444; color: #f87171; }
 
-#new-tab-btn {
+#new-tab-btn, #notif-btn {
   background: none;
   border: none;
   color: var(--text-dim);
@@ -159,7 +159,23 @@ html, body {
   justify-content: center;
   transition: background 0.1s;
 }
-#new-tab-btn:hover { background: var(--border); color: var(--text); }
+#new-tab-btn:hover, #notif-btn:hover { background: var(--border); color: var(--text); }
+#notif-btn { font-size: 1.1rem; }
+#notif-btn.notif-on { color: var(--accent); }
+
+/* Activity badge on tabs */
+.tab.has-activity { position: relative; }
+.tab.has-activity::after {
+  content: '';
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--accent);
+  box-shadow: 0 0 4px var(--accent);
+}
 
 /* ── Terminal viewport ────────────────────────────────────────────────────── */
 #terminal-viewport {
@@ -305,6 +321,19 @@ html, body {
 #send-btn:active { opacity: 0.8; }
 #send-btn:disabled { background: var(--accent-dim); cursor: not-allowed; }
 
+/* ── Reconnect overlay ────────────────────────────────────────────────────── */
+#reconnect-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(13,13,13,0.85);
+  color: var(--text-dim);
+  font-size: 0.9rem;
+  z-index: 10;
+}
+
 /* ── Empty state ──────────────────────────────────────────────────────────── */
 #empty-state {
   position: absolute;

package/src/server/index.js

@@ -29,8 +29,20 @@ const server = createServer(app);
 // ── WebSocket ─────────────────────────────────────────────────────────────────
 const wss = new WebSocketServer({ server });
 
+// ── Heartbeat – keeps idle connections alive through tunnels/proxies ───────────
+const heartbeatInterval = setInterval(() => {
+  for (const client of wss.clients) {
+    if (client.isAlive === false) { client.terminate(); continue; }
+    client.isAlive = false;
+    client.ping();
+  }
+}, 25_000);
+wss.on('close', () => clearInterval(heartbeatInterval));
+
 wss.on('connection', (ws, req) => {
   let authenticated = false;
+  ws.isAlive = true;
+  ws.on('pong', () => { ws.isAlive = true; });
 
   ws.on('message', (raw) => {
     let msg;