shell-mirror 1.5.98 → 1.5.100

package/mac-agent/agent.js

@@ -169,11 +169,14 @@ class SessionManager {
     this.maxSessions = 10;
     this.defaultSessionTimeout = 24 * 60 * 60 * 1000; // 24 hours
     this.clientSessions = {}; // Maps clientId to sessionId
+    this.sessionCounter = 0; // Incrementing counter for unique session names (never resets)
   }
 
   createSession(sessionName = null, clientId = null) {
     const sessionId = `ses_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-    const name = sessionName || `Session ${Object.keys(this.sessions).length + 1}`;
+    // Use incrementing counter for unique names (doesn't reuse after deletion)
+    this.sessionCounter++;
+    const name = sessionName || `Session ${this.sessionCounter}`;
 
     logToFile(`[SESSION] Creating new session: ${sessionId} (${name})`);
 
@@ -423,10 +426,20 @@ let heartbeatInterval;
 
 async function sendHeartbeat() {
   try {
+    // Get full session list for dashboard display
+    const sessionList = sessionManager.getAllSessions().map(session => ({
+      id: session.id,
+      name: session.name,
+      lastActivity: session.lastActivity,
+      createdAt: session.createdAt,
+      status: session.status
+    }));
+
     const heartbeatData = JSON.stringify({
       agentId: AGENT_ID,
       timestamp: Date.now(),
-      activeSessions: Object.keys(sessionManager.sessions).length,
+      activeSessions: sessionList.length,
+      sessions: sessionList, // Full session list for dashboard
       localPort: process.env.LOCAL_PORT || 8080,
       capabilities: ['webrtc', 'direct_websocket']
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shell-mirror",
-  "version": "1.5.98",
+  "version": "1.5.100",
   "description": "Access your Mac shell from any device securely. Perfect for mobile coding with Claude Code CLI, Gemini CLI, and any shell tool.",
   "main": "server.js",
   "bin": {

package/public/app/dashboard.css

@@ -225,6 +225,49 @@ body {
     transform: scale(1.05);
 }
 
+/* Text Action Buttons (No Emoji) */
+.btn-text-action {
+    background: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 6px;
+    color: #495057;
+    padding: 6px 12px;
+    font-size: 0.8rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s ease;
+}
+
+.btn-text-action:hover:not(:disabled) {
+    background: #e9ecef;
+    border-color: #ced4da;
+    color: #212529;
+}
+
+.btn-text-action.loading {
+    opacity: 0.7;
+    cursor: not-allowed;
+}
+
+.btn-text-action.btn-cleanup {
+    background: #fff5f5;
+    border-color: #feb2b2;
+    color: #c53030;
+}
+
+.btn-text-action.btn-cleanup:hover:not(:disabled) {
+    background: #fed7d7;
+    border-color: #fc8181;
+}
+
+/* Refresh Time in Card Header */
+.refresh-time {
+    font-size: 0.75rem;
+    color: #718096;
+    font-weight: 400;
+    margin-left: 8px;
+}
+
 .connection-status {
     font-size: 0.8rem;
     font-weight: 500;

package/public/app/dashboard.js

@@ -422,11 +422,19 @@ class ShellMirrorDashboard {
             if (agentsData.success && agentsData.data && agentsData.data.agents) {
                 this.agents = agentsData.data.agents;
 
+                // Populate agentSessions from API response (sessions are sent via agent heartbeat)
+                this.agentSessions = {};
+                this.agents.forEach(agent => {
+                    if (agent.sessions && agent.sessions.length > 0) {
+                        this.agentSessions[agent.agentId] = agent.sessions;
+                    }
+                });
+
                 // Don't load stale sessions from localStorage - only show live sessions from agents
-                // Sessions will be populated via WebSocket updates from connected agents
                 localStorage.removeItem('shell-mirror-sessions'); // Clear any stale data
             } else {
                 this.agents = [];
+                this.agentSessions = {};
             }
 
             // TODO: Load session history when API is available
@@ -505,10 +513,9 @@ class ShellMirrorDashboard {
         document.getElementById('user-section').innerHTML = `
             <div class="dashboard-controls">
                 <span id="connection-status" class="connection-status" style="display: none;"></span>
-                <span id="refresh-status" class="refresh-status">Loading...</span>
             </div>
             <button class="help-button" onclick="dashboard.showAgentInstructions()" title="How to Use">
-                📖 How to Use
+                How to Use
             </button>
             <div class="user-info">
                 <span class="user-name">${this.user?.name || this.user?.email || 'User'}</span>
@@ -624,19 +631,23 @@ class ShellMirrorDashboard {
         const offlineAgents = this.agents.filter(agent => agent.status === 'offline');
         const showCleanup = offlineAgents.length > 0;
         
+        // Format last refresh time
+        const refreshTime = this.lastRefresh ? new Date(this.lastRefresh).toLocaleTimeString() : 'Loading...';
+
         return `
             <div class="dashboard-card">
                 <div class="card-header">
                     <div class="card-title-section">
-                        <h2>🖥️ Active Agents</h2>
-                        <span class="agent-count">${agentCount} agent${agentCount !== 1 ? 's' : ''}</span>
+                        <h2>Active Agents</h2>
+                        <span class="agent-count">${agentCount}</span>
+                        <span class="refresh-time">Updated ${refreshTime}</span>
                     </div>
                     <div class="agent-actions-header">
-                        <button id="refresh-btn" class="refresh-btn-inline" onclick="dashboard.manualRefresh()" title="Refresh agents">
-                            <span class="refresh-icon">🔄</span>
+                        <button id="refresh-btn" class="btn-text-action" onclick="dashboard.manualRefresh()" title="Refresh agents">
+                            Refresh
                         </button>
-                        ${showCleanup ? `<button class="cleanup-btn-inline" onclick="dashboard.cleanupOfflineAgents()" title="Remove offline agents">
-                            <span>🧹</span>
+                        ${showCleanup ? `<button class="btn-text-action btn-cleanup" onclick="dashboard.cleanupOfflineAgents()" title="Remove offline agents">
+                            Clean
                         </button>` : ''}
                     </div>
                 </div>
@@ -651,7 +662,7 @@ class ShellMirrorDashboard {
         return `
             <div class="empty-agent-state">
                 <div class="empty-state-header">
-                    <h3>🚀 Get Started with Shell Mirror</h3>
+                    <h3>Get Started with Shell Mirror</h3>
                     <p>Connect your Mac in 2 simple steps:</p>
                 </div>
 
@@ -680,7 +691,7 @@ class ShellMirrorDashboard {
                 </div>
 
                 <div class="empty-state-footer">
-                    <p>✨ Your agent will appear here once connected</p>
+                    <p>Your agent will appear here once connected</p>
                 </div>
             </div>
         `;

package/public/app/terminal.html

@@ -499,9 +499,86 @@
             if (event.target === modal) {
                 closeHelpModal();
             }
+            const closeModal = document.getElementById('close-session-modal');
+            if (event.target === closeModal) {
+                hideCloseSessionModal();
+            }
         });
     </script>
 
-    <script src="/app/terminal.js?v=1.5.88"></script>
+    <!-- Close Session Confirmation Modal -->
+    <div id="close-session-modal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.85); align-items: center; justify-content: center; z-index: 20000;">
+        <div style="background: #2a2a2a; border-radius: 12px; max-width: 400px; width: 90%; overflow: hidden; border: 1px solid #444; box-shadow: 0 10px 40px rgba(0,0,0,0.5);">
+            <!-- Header -->
+            <div style="padding: 20px 24px; border-bottom: 1px solid #444; display: flex; justify-content: space-between; align-items: center;">
+                <h3 style="margin: 0; font-size: 1.1rem; color: #fff;">Close Session?</h3>
+                <button onclick="hideCloseSessionModal()" style="background: none; border: none; font-size: 1.5rem; cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #888;">&times;</button>
+            </div>
+
+            <!-- Content -->
+            <div style="padding: 24px;">
+                <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 20px;">
+                    <div style="font-size: 2.5rem;">🗑️</div>
+                    <div>
+                        <div id="close-session-name" style="font-size: 1.1rem; color: #fff; font-weight: 500; margin-bottom: 4px;">Session 1</div>
+                        <div id="close-session-duration" style="font-size: 0.85rem; color: #888;">Duration: 5 minutes</div>
+                    </div>
+                </div>
+
+                <p style="color: #bbb; margin: 0 0 24px 0; font-size: 0.9rem; line-height: 1.5;">
+                    This will terminate the terminal session. Any running processes will be stopped.
+                </p>
+
+                <!-- Buttons -->
+                <div style="display: flex; gap: 12px; justify-content: flex-end;">
+                    <button onclick="hideCloseSessionModal()" style="padding: 10px 20px; background: #444; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 0.9rem; transition: background 0.2s;">Cancel</button>
+                    <button id="confirm-close-session-btn" onclick="confirmCloseSession()" style="padding: 10px 20px; background: #dc3545; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 0.9rem; font-weight: 500; transition: background 0.2s;">Close Session</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Close Session Modal Functions
+        let pendingCloseSessionId = null;
+
+        function showCloseSessionModal(sessionId, sessionName, createdAt) {
+            pendingCloseSessionId = sessionId;
+
+            // Calculate duration
+            const duration = createdAt ? formatDuration(Date.now() - createdAt) : 'Unknown';
+
+            document.getElementById('close-session-name').textContent = sessionName || 'Session';
+            document.getElementById('close-session-duration').textContent = `Duration: ${duration}`;
+            document.getElementById('close-session-modal').style.display = 'flex';
+        }
+
+        function hideCloseSessionModal() {
+            document.getElementById('close-session-modal').style.display = 'none';
+            pendingCloseSessionId = null;
+        }
+
+        function confirmCloseSession() {
+            if (pendingCloseSessionId) {
+                // Call the actual close function from terminal.js
+                doCloseSession(pendingCloseSessionId);
+            }
+            hideCloseSessionModal();
+        }
+
+        function formatDuration(ms) {
+            const seconds = Math.floor(ms / 1000);
+            const minutes = Math.floor(seconds / 60);
+            const hours = Math.floor(minutes / 60);
+            const days = Math.floor(hours / 24);
+
+            if (days > 0) return `${days}d ${hours % 24}h`;
+            if (hours > 0) return `${hours}h ${minutes % 60}m`;
+            if (minutes > 0) return `${minutes} minute${minutes !== 1 ? 's' : ''}`;
+            return `${seconds} second${seconds !== 1 ? 's' : ''}`;
+        }
+    </script>
+
+    <script src="/app/terminal.js?v=1.5.89"></script>
   </body>
 </html>

package/public/app/terminal.js

@@ -965,6 +965,28 @@ function updateSessionDisplay() {
     }
 }
 
+// Session tab color palette (fixed colors by creation order)
+const SESSION_TAB_COLORS = [
+    { bg: '#e3f2fd', border: '#2196f3', text: '#1565c0' },  // Blue
+    { bg: '#e8f5e9', border: '#4caf50', text: '#2e7d32' },  // Green
+    { bg: '#fff3e0', border: '#ff9800', text: '#e65100' },  // Orange
+    { bg: '#f3e5f5', border: '#9c27b0', text: '#6a1b9a' },  // Purple
+    { bg: '#e0f7fa', border: '#00bcd4', text: '#00838f' },  // Teal
+    { bg: '#fce4ec', border: '#e91e63', text: '#ad1457' },  // Pink
+];
+
+// Track color assignments by session ID (persists across renders)
+const sessionColorMap = {};
+let nextColorIndex = 0;
+
+function getSessionColor(sessionId) {
+    if (!sessionColorMap[sessionId]) {
+        sessionColorMap[sessionId] = nextColorIndex;
+        nextColorIndex = (nextColorIndex + 1) % SESSION_TAB_COLORS.length;
+    }
+    return SESSION_TAB_COLORS[sessionColorMap[sessionId]];
+}
+
 function renderTabs() {
     const tabBar = document.getElementById('session-tab-bar');
     if (!tabBar) {
@@ -996,15 +1018,24 @@ function renderTabs() {
         tabsHTML = sessionsToRender.map(session => {
             const isActive = currentSession && session.id === currentSession.id;
             const displayName = session.name || 'Terminal Session';
+            const color = getSessionColor(session.id);
+
+            // Active tabs get full color, inactive tabs get muted version
+            const tabStyle = isActive
+                ? `background: ${color.bg}; border-color: ${color.border}; border-bottom: 3px solid ${color.border};`
+                : `background: transparent; border-color: transparent; opacity: 0.7;`;
+            const textStyle = isActive
+                ? `color: ${color.text}; font-weight: 600;`
+                : `color: #888;`;
 
             return `
-                <div class="session-tab ${isActive ? 'active' : ''}" title="${displayName}">
+                <div class="session-tab ${isActive ? 'active' : ''}" style="${tabStyle}" title="${displayName}" data-color-index="${sessionColorMap[session.id]}">
                     <button class="session-tab-btn"
                             onclick="switchToSession('${session.id}')"
-                            ${isActive ? '' : ''}>
+                            style="${textStyle}">
                         <span class="session-tab-name">${displayName}</span>
                     </button>
-                    <button class="session-tab-close" onclick="closeSession('${session.id}', event)" title="Close session">×</button>
+                    <button class="session-tab-close" onclick="closeSession('${session.id}', event)" title="Close session" style="color: ${isActive ? color.text : '#888'}">×</button>
                 </div>
             `;
         }).join('');
@@ -1025,17 +1056,27 @@ function updateUrlWithSession(sessionId) {
     console.log('[CLIENT] 📍 URL updated with session:', sessionId);
 }
 
-// Close a session with confirmation
+// Close a session with confirmation - shows custom modal
 function closeSession(sessionId, event) {
     event.stopPropagation(); // Don't trigger tab switch
 
     const session = availableSessions.find(s => s.id === sessionId);
     const sessionName = session?.name || 'this session';
+    const createdAt = session?.createdAt || null;
 
-    if (!confirm(`Close "${sessionName}"?\n\nThis will terminate the terminal session.`)) {
-        return;
+    // Show custom modal instead of browser confirm()
+    if (typeof showCloseSessionModal === 'function') {
+        showCloseSessionModal(sessionId, sessionName, createdAt);
+    } else {
+        // Fallback to native confirm if modal not available
+        if (confirm(`Close "${sessionName}"?\n\nThis will terminate the terminal session.`)) {
+            doCloseSession(sessionId);
+        }
     }
+}
 
+// Actually close the session (called from modal confirmation)
+function doCloseSession(sessionId) {
     console.log('[CLIENT] 🗑️ Closing session:', sessionId);
 
     // Send close request to agent
@@ -1182,6 +1223,9 @@ function handleSessionMessage(message) {
 
             // Save to localStorage
             saveSessionToLocalStorage(AGENT_ID, currentSession);
+
+            // Focus terminal for keyboard input
+            term.focus();
             break;
 
         case 'session-switched':
@@ -1198,6 +1242,9 @@ function handleSessionMessage(message) {
 
             // Save updated session info
             saveSessionToLocalStorage(AGENT_ID, currentSession);
+
+            // Focus terminal for keyboard input
+            term.focus();
             break;
         case 'session-ended':
             term.write(`\r\n\x1b[31m❌ Session ended: ${message.reason}\x1b[0m\r\n`);