claude-code-monitor 1.1.0 → 1.1.2

package/README.md

@@ -65,9 +65,11 @@ On first run, it automatically sets up hooks and launches the monitor.
 
 ### Mobile Access
 
-1. Press `h` to show QR code
+1. Press `h` to show QR code (default port: 3456)
 2. Scan with your smartphone (same Wi-Fi required)
 
+> If port 3456 is in use, an available port is automatically selected.
+
 ---
 
 ## 📖 Usage
@@ -114,13 +116,15 @@ Monitor and control Claude Code sessions from your smartphone.
 - Real-time session status via WebSocket
 - View latest Claude messages
 - Focus terminal sessions remotely
-- Send text messages to terminal
+- Send text messages to terminal (multi-line supported)
+- Swipe-to-close gesture on modal
+- Warning display for dangerous commands
 
 ### Security
 
 > **Important**: Your smartphone and Mac must be on the **same Wi-Fi network**.
 
-- **Token Authentication** - Each session generates a unique token
+- **Token Authentication** - A unique token is generated for authentication
 - **Local Network Only** - Not accessible from the internet
 - **Do not share the URL** - Treat it like a password
 
@@ -188,6 +192,18 @@ This is an unofficial community tool and is not affiliated with Anthropic.
 
 ---
 
+## 🐛 Issues
+
+Found a bug? [Open an issue](https://github.com/onikan27/claude-code-monitor/issues)
+
+---
+
+## 🤝 Contributing
+
+Contributions are welcome! Please open an issue or submit a PR.
+
+---
+
 ## 📝 Changelog
 
 See [CHANGELOG.md](./CHANGELOG.md) for details.

package/dist/hooks/useServer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useServer.d.ts","sourceRoot":"","sources":["../../src/hooks/useServer.ts"],"names":[],"mappings":"AAGA,UAAU,eAAe;IACvB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAID,wBAAgB,SAAS,CAAC,IAAI,SAAe,GAAG,eAAe,CAuC9D"}
+{"version":3,"file":"useServer.d.ts","sourceRoot":"","sources":["../../src/hooks/useServer.ts"],"names":[],"mappings":"AAGA,UAAU,eAAe;IACvB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAID,wBAAgB,SAAS,CAAC,IAAI,SAAe,GAAG,eAAe,CA6C9D"}

package/dist/hooks/useServer.js

@@ -8,17 +8,24 @@ export function useServer(port = DEFAULT_PORT) {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     useEffect(() => {
-        let serverInfo = null;
+        // Use a ref-like object to track server across async boundaries
+        // This prevents race condition where cleanup runs before async completes
+        const serverRef = { current: null };
         let isMounted = true;
         async function startServer() {
             try {
-                serverInfo = await createMobileServer(port);
+                const info = await createMobileServer(port);
                 if (isMounted) {
-                    setUrl(serverInfo.url);
-                    setQrCode(serverInfo.qrCode);
-                    setActualPort(serverInfo.port);
+                    serverRef.current = info;
+                    setUrl(info.url);
+                    setQrCode(info.qrCode);
+                    setActualPort(info.port);
                     setLoading(false);
                 }
+                else {
+                    // Component unmounted during async operation - stop server immediately
+                    info.stop();
+                }
             }
             catch (err) {
                 if (isMounted) {
@@ -30,8 +37,8 @@ export function useServer(port = DEFAULT_PORT) {
         startServer();
         return () => {
             isMounted = false;
-            if (serverInfo) {
-                serverInfo.stop();
+            if (serverRef.current) {
+                serverRef.current.stop();
             }
         };
     }, [port]);

package/dist/server/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/server/index.ts"],"names":[],"mappings":"AAkOA,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAED,wBAAgB,UAAU,IAAI,MAAM,CAOnC;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAM5D;AA0FD,wBAAsB,kBAAkB,CAAC,IAAI,SAAe,GAAG,OAAO,CAAC,UAAU,CAAC,CAoBjF;AAGD,wBAAsB,WAAW,CAAC,IAAI,SAAe,GAAG,OAAO,CAAC,IAAI,CAAC,CAwBpE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/server/index.ts"],"names":[],"mappings":"AAyOA,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAED,wBAAgB,UAAU,IAAI,MAAM,CAOnC;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAM5D;AAkGD,wBAAsB,kBAAkB,CAAC,IAAI,SAAe,GAAG,OAAO,CAAC,UAAU,CAAC,CAoBjF;AAGD,wBAAsB,WAAW,CAAC,IAAI,SAAe,GAAG,OAAO,CAAC,IAAI,CAAC,CA4BpE"}

package/dist/server/index.js

@@ -21,6 +21,7 @@ function isPortAvailable(port) {
     return new Promise((resolve) => {
         const server = createNetServer();
         server.once('error', () => {
+            server.close(); // Ensure server is closed on error
             resolve(false);
         });
         server.once('listening', () => {
@@ -175,6 +176,11 @@ function setupWebSocketHandlers(wss, validToken) {
         }
         sendSessionsToClient(ws);
         ws.on('message', (data) => handleWebSocketMessage(ws, data));
+        // Handle client connection errors to prevent process crashes
+        ws.on('error', (error) => {
+            // Log error but don't crash - client disconnections are expected
+            console.error('WebSocket client error:', error.message);
+        });
     });
 }
 export function getLocalIP() {
@@ -260,9 +266,15 @@ function createServerComponents(token) {
 }
 /**
  * Stop all server components.
+ * Terminates all WebSocket clients before closing to prevent hanging.
  */
 function stopServerComponents({ watcher, wss, server }) {
-    watcher.close();
+    // Close file watcher (async but we don't wait - acceptable for shutdown)
+    void watcher.close();
+    // Terminate all WebSocket clients before closing server
+    for (const client of wss.clients) {
+        client.terminate();
+    }
     wss.close();
     server.close();
 }
@@ -301,9 +313,12 @@ export async function startServer(port = DEFAULT_PORT) {
         qrcode.generate(url, { small: true });
         console.log('\n  Press Ctrl+C to stop the server.\n');
     });
-    process.on('SIGINT', () => {
+    // Graceful shutdown handler for both SIGINT (Ctrl+C) and SIGTERM (Docker/K8s)
+    const shutdown = () => {
         console.log('\n  Shutting down...');
         stopServerComponents(components);
         process.exit(0);
-    });
+    };
+    process.on('SIGINT', shutdown);
+    process.on('SIGTERM', shutdown);
 }

package/dist/utils/focus.d.ts

@@ -1,6 +1,6 @@
 /**
  * Sanitize a string for safe use in AppleScript.
- * Escapes backslashes, double quotes, and control characters to prevent injection.
+ * Escapes backslashes, double quotes, control characters, and AppleScript special chars.
  * @internal
  */
 export declare function sanitizeForAppleScript(str: string): string;

package/dist/utils/focus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focus.d.ts","sourceRoot":"","sources":["../../src/utils/focus.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAO1D;AAWD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAEnD;AAgED,wBAAgB,OAAO,IAAI,OAAO,CAEjC;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CASjD;AAED,wBAAgB,qBAAqB,IAAI,MAAM,EAAE,CAEhD"}
+{"version":3,"file":"focus.d.ts","sourceRoot":"","sources":["../../src/utils/focus.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAS1D;AAWD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAEnD;AAgED,wBAAgB,OAAO,IAAI,OAAO,CAEjC;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CASjD;AAED,wBAAgB,qBAAqB,IAAI,MAAM,EAAE,CAEhD"}

package/dist/utils/focus.js

@@ -2,16 +2,18 @@ import { executeAppleScript } from './applescript.js';
 import { executeWithTerminalFallback } from './terminal-strategy.js';
 /**
  * Sanitize a string for safe use in AppleScript.
- * Escapes backslashes, double quotes, and control characters to prevent injection.
+ * Escapes backslashes, double quotes, control characters, and AppleScript special chars.
  * @internal
  */
 export function sanitizeForAppleScript(str) {
     return str
-        .replace(/\\/g, '\\\\')
-        .replace(/"/g, '\\"')
-        .replace(/\n/g, '\\n')
-        .replace(/\r/g, '\\r')
-        .replace(/\t/g, '\\t');
+        .replace(/\\/g, '\\\\') // Backslash (must be first)
+        .replace(/"/g, '\\"') // Double quote
+        .replace(/\n/g, '\\n') // Newline
+        .replace(/\r/g, '\\r') // Carriage return
+        .replace(/\t/g, '\\t') // Tab
+        .replace(/\$/g, '\\$') // Dollar sign (variable reference in some contexts)
+        .replace(/`/g, '\\`'); // Backtick
 }
 /**
  * TTY path pattern for validation.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-monitor",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "CLI for monitoring multiple Claude Code sessions in real-time",
   "type": "module",
   "main": "dist/index.js",

package/public/index.html

@@ -890,6 +890,14 @@
     let pendingSend = null;
     let sessionsData = [];
 
+    // Event delegation for card clicks (safer than inline onclick)
+    $sessions.addEventListener('click', (e) => {
+      const card = e.target.closest('.card');
+      if (card && card.dataset.sessionId) {
+        openModal(card.dataset.sessionId);
+      }
+    });
+
     const STATUS = {
       running: 'Running',
       waiting_input: 'Waiting for Input',
@@ -960,6 +968,23 @@
       return clean.slice(0, maxLen) + '...';
     }
 
+    /**
+     * Escape HTML special characters to prevent XSS attacks.
+     */
+    function escapeHtml(text) {
+      if (!text) return '';
+      const div = document.createElement('div');
+      div.textContent = text;
+      return div.innerHTML;
+    }
+
+    /**
+     * Validate session ID format (alphanumeric, hyphens, underscores only).
+     */
+    function isValidSessionId(id) {
+      return /^[a-zA-Z0-9_-]+$/.test(id);
+    }
+
     function renderMarkdown(markdownText) {
       if (!markdownText) return '<span class="modal-message-empty">No messages yet</span>';
       if (typeof marked !== 'undefined') {
@@ -1118,13 +1143,18 @@
       }
 
       $sessions.innerHTML = list.map(session => {
-        const dirName = getDirName(session.cwd);
-        const shortPath = formatPath(session.cwd);
-        const statusLabel = STATUS[session.status];
-        const msgPreview = truncateMessage(session.lastMessage);
+        // Skip sessions with invalid IDs to prevent XSS
+        if (!isValidSessionId(session.session_id)) return '';
+
+        // Escape all user-provided content to prevent XSS
+        const dirName = escapeHtml(getDirName(session.cwd));
+        const shortPath = escapeHtml(formatPath(session.cwd));
+        const statusLabel = escapeHtml(STATUS[session.status]);
+        const msgPreview = escapeHtml(truncateMessage(session.lastMessage));
+        const safeStatus = escapeHtml(session.status);
 
         return `
-          <div class="card ${session.status}" onclick="openModal('${session.session_id}')">
+          <div class="card ${safeStatus}" data-session-id="${escapeHtml(session.session_id)}">
             <div class="card-status">
               <span class="card-status-dot"></span>
               <span>${statusLabel}</span>