shell-mirror 1.5.100 → 1.5.106

package/mac-agent/agent.js

@@ -976,6 +976,20 @@ function setupDataChannel(clientId) {
           }));
           logToFile(`[AGENT] ❌ Failed to create session for client ${clientId}`);
         }
+      } else if (message.type === 'close_session') {
+        // Handle session closure request from client
+        logToFile(`[AGENT] Client ${clientId} closing session ${message.sessionId}`);
+
+        sessionManager.terminateSession(message.sessionId);
+
+        // Send confirmation with updated session list
+        dataChannel.send(JSON.stringify({
+          type: 'session-closed',
+          sessionId: message.sessionId,
+          availableSessions: sessionManager.getAllSessions()
+        }));
+
+        logToFile(`[AGENT] ✅ Session closed: ${message.sessionId}`);
       }
     } catch (err) {
       logToFile(`[AGENT] Error parsing data channel message: ${err.message}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shell-mirror",
-  "version": "1.5.100",
+  "version": "1.5.106",
   "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

@@ -268,6 +268,38 @@ body {
     margin-left: 8px;
 }
 
+/* Animated Loading Dots */
+.loading-dots {
+    display: inline-flex;
+    gap: 2px;
+}
+
+.loading-dots span {
+    animation: loadingDot 1.4s infinite;
+    opacity: 0.2;
+}
+
+.loading-dots span:nth-child(1) {
+    animation-delay: 0s;
+}
+
+.loading-dots span:nth-child(2) {
+    animation-delay: 0.2s;
+}
+
+.loading-dots span:nth-child(3) {
+    animation-delay: 0.4s;
+}
+
+@keyframes loadingDot {
+    0%, 80%, 100% {
+        opacity: 0.2;
+    }
+    40% {
+        opacity: 1;
+    }
+}
+
 .connection-status {
     font-size: 0.8rem;
     font-weight: 500;

package/public/app/dashboard.js

@@ -1,4 +1,15 @@
 // Dashboard functionality for Shell Mirror
+
+// Session color palette (matches terminal.js)
+const SESSION_COLORS = [
+    { border: '#2196f3', text: '#1565c0' },  // Blue
+    { border: '#4caf50', text: '#2e7d32' },  // Green
+    { border: '#ff9800', text: '#e65100' },  // Orange
+    { border: '#9c27b0', text: '#6a1b9a' },  // Purple
+    { border: '#00bcd4', text: '#00838f' },  // Teal
+    { border: '#e91e63', text: '#ad1457' },  // Pink
+];
+
 class ShellMirrorDashboard {
     constructor() {
         this.isAuthenticated = false;
@@ -575,16 +586,17 @@ class ShellMirrorDashboard {
                 ? this.formatPreciseLastSeen(agent.timeSinceLastSeen)
                 : this.formatLastSeen(agent.lastSeen);
             
-            // Build inline session list
-            const sessionsHtml = sessions.map(session => {
+            // Build inline session list with colors
+            const sessionsHtml = sessions.map((session, index) => {
                 const sessionStatus = session.status === 'active' ? 'active' : 'crashed';
                 const activityText = this.formatLastActivity(session.lastActivity);
+                const color = SESSION_COLORS[index % SESSION_COLORS.length];
                 return `
-                    <div class="inline-session-item">
-                        <span class="session-status-dot ${sessionStatus}"></span>
-                        <span class="session-name">${session.name}</span>
+                    <div class="inline-session-item" style="border-left: 3px solid ${color.border};">
+                        <span class="session-status-dot" style="background-color: ${color.border};"></span>
+                        <span class="session-name" style="color: ${color.text};">${session.name}</span>
                         <span class="session-activity">${activityText}</span>
-                        <button class="btn-session-connect" onclick="dashboard.connectToSession('${agent.agentId}', '${session.id}')">
+                        <button class="btn-session-connect" onclick="dashboard.connectToSession('${agent.agentId}', '${session.id}')" style="background-color: ${color.border};">
                             Connect
                         </button>
                     </div>
@@ -632,7 +644,9 @@ class ShellMirrorDashboard {
         const showCleanup = offlineAgents.length > 0;
         
         // Format last refresh time
-        const refreshTime = this.lastRefresh ? new Date(this.lastRefresh).toLocaleTimeString() : 'Loading...';
+        const refreshTime = this.lastRefresh
+            ? new Date(this.lastRefresh).toLocaleTimeString()
+            : '<span class="loading-dots"><span>.</span><span>.</span><span>.</span></span>';
 
         return `
             <div class="dashboard-card">
@@ -640,7 +654,7 @@ class ShellMirrorDashboard {
                     <div class="card-title-section">
                         <h2>Active Agents</h2>
                         <span class="agent-count">${agentCount}</span>
-                        <span class="refresh-time">Updated ${refreshTime}</span>
+                        <span class="refresh-time">${this.lastRefresh ? 'Updated ' : ''}${refreshTime}</span>
                     </div>
                     <div class="agent-actions-header">
                         <button id="refresh-btn" class="btn-text-action" onclick="dashboard.manualRefresh()" title="Refresh agents">

package/public/app/terminal.html

@@ -172,11 +172,8 @@
       }
 
       .session-tab.active {
-        color: #fff;
+        /* Colors set by inline styles from JavaScript */
         font-weight: 600;
-        border-bottom-color: #667eea;
-        background: #333;
-        box-shadow: inset 0 -3px 0 #667eea;
       }
 
       .session-tab-btn {
@@ -579,6 +576,6 @@
         }
     </script>
 
-    <script src="/app/terminal.js?v=1.5.89"></script>
+    <script src="/app/terminal.js?v=1.5.90"></script>
   </body>
 </html>

package/public/app/terminal.js

@@ -407,9 +407,10 @@ function setupDirectConnection(directWs) {
                     }
                 }
 
-                // Clear terminal and show success message
+                // Clear terminal and show success message with session color
                 term.clear();
-                term.write(`\r\n\x1b[36m✨ New session created: ${currentSession.name}\x1b[0m\r\n\r\n`);
+                const sessionColor = getSessionColor(currentSession.id);
+                term.write(`\r\n\x1b[38;2;${sessionColor.ansi}m✨ New session created: ${currentSession.name}\x1b[0m\r\n\r\n`);
 
                 // Update URL with session ID so refresh reconnects to same session
                 updateUrlWithSession(data.sessionId);
@@ -967,12 +968,12 @@ 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
+    { bg: '#e3f2fd', border: '#2196f3', text: '#1565c0', muted: '#5a9fd4', ansi: '33;150;243' },  // Blue
+    { bg: '#e8f5e9', border: '#4caf50', text: '#2e7d32', muted: '#6fbf73', ansi: '76;175;80' },   // Green
+    { bg: '#fff3e0', border: '#ff9800', text: '#e65100', muted: '#ffb74d', ansi: '255;152;0' },   // Orange
+    { bg: '#f3e5f5', border: '#9c27b0', text: '#6a1b9a', muted: '#ba68c8', ansi: '156;39;176' },  // Purple
+    { bg: '#e0f7fa', border: '#00bcd4', text: '#00838f', muted: '#4dd0e1', ansi: '0;188;212' },   // Teal
+    { bg: '#fce4ec', border: '#e91e63', text: '#ad1457', muted: '#f06292', ansi: '233;30;99' },   // Pink
 ];
 
 // Track color assignments by session ID (persists across renders)
@@ -1020,13 +1021,13 @@ function renderTabs() {
             const displayName = session.name || 'Terminal Session';
             const color = getSessionColor(session.id);
 
-            // Active tabs get full color, inactive tabs get muted version
+            // Active tabs get full color, inactive tabs get muted version of their color
             const tabStyle = isActive
                 ? `background: ${color.bg}; border-color: ${color.border}; border-bottom: 3px solid ${color.border};`
-                : `background: transparent; border-color: transparent; opacity: 0.7;`;
+                : `background: rgba(255,255,255,0.05); border-color: transparent; border-bottom: 3px solid ${color.muted}40;`;
             const textStyle = isActive
                 ? `color: ${color.text}; font-weight: 600;`
-                : `color: #888;`;
+                : `color: ${color.muted};`;
 
             return `
                 <div class="session-tab ${isActive ? 'active' : ''}" style="${tabStyle}" title="${displayName}" data-color-index="${sessionColorMap[session.id]}">
@@ -1035,7 +1036,7 @@ function renderTabs() {
                             style="${textStyle}">
                         <span class="session-tab-name">${displayName}</span>
                     </button>
-                    <button class="session-tab-close" onclick="closeSession('${session.id}', event)" title="Close session" style="color: ${isActive ? color.text : '#888'}">×</button>
+                    <button class="session-tab-close" onclick="closeSession('${session.id}', event)" title="Close session" style="color: ${isActive ? color.text : color.muted}">×</button>
                 </div>
             `;
         }).join('');
@@ -1211,9 +1212,10 @@ function handleSessionMessage(message) {
                 availableSessions.push(currentSession);
             }
 
-            // Clear terminal for new session
+            // Clear terminal for new session with session color
             term.clear();
-            term.write(`\r\n\x1b[36m✨ New session created: ${currentSession.name}\x1b[0m\r\n\r\n`);
+            const sessionColor = getSessionColor(currentSession.id);
+            term.write(`\r\n\x1b[38;2;${sessionColor.ansi}m✨ New session created: ${currentSession.name}\x1b[0m\r\n\r\n`);
 
             // Update URL with session ID so refresh reconnects to same session
             updateUrlWithSession(message.sessionId);