shell-mirror 1.5.87 → 1.5.89

package/package.json

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

@@ -349,12 +349,18 @@ body {
 /* Agent Items */
 .agent-item {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    flex-direction: column;
     padding: 16px 0;
     border-bottom: 1px solid #f0f0f0;
 }
 
+.agent-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
 .agent-item:last-child {
     border-bottom: none;
 }
@@ -406,6 +412,115 @@ body {
     font-weight: 500;
 }
 
+/* Inline Session List Styles */
+.agent-sessions-inline {
+    margin-top: 12px;
+    padding-top: 12px;
+    border-top: 1px solid #eee;
+    width: 100%;
+}
+
+.sessions-label {
+    font-size: 0.8rem;
+    color: #666;
+    font-weight: 500;
+    margin-bottom: 8px;
+}
+
+.sessions-list {
+    margin-bottom: 10px;
+}
+
+.inline-session-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 12px;
+    margin-bottom: 6px;
+    background: #f8f9fa;
+    border-radius: 8px;
+    border: 1px solid #eee;
+    transition: all 0.2s ease;
+}
+
+.inline-session-item:hover {
+    background: #fff;
+    border-color: #4285f4;
+}
+
+.session-status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+.session-status-dot.active {
+    background: #34a853;
+}
+
+.session-status-dot.crashed {
+    background: #ea4335;
+}
+
+.session-name {
+    font-weight: 500;
+    color: #333;
+    flex: 1;
+    font-size: 0.9rem;
+}
+
+.session-activity {
+    font-size: 0.75rem;
+    color: #888;
+    margin-right: 8px;
+}
+
+.btn-session-connect {
+    background: #4285f4;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    padding: 6px 14px;
+    font-size: 0.8rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.btn-session-connect:hover {
+    background: #3367d6;
+    transform: translateY(-1px);
+}
+
+.btn-new-session {
+    background: #fff;
+    color: #4285f4;
+    border: 1px dashed #4285f4;
+    border-radius: 8px;
+    padding: 10px 16px;
+    font-size: 0.85rem;
+    font-weight: 500;
+    cursor: pointer;
+    width: 100%;
+    transition: all 0.2s ease;
+}
+
+.btn-new-session:hover {
+    background: #f0f7ff;
+    border-style: solid;
+}
+
+.agent-offline-message {
+    margin-top: 12px;
+    padding: 10px;
+    background: #f5f5f5;
+    border-radius: 6px;
+    color: #999;
+    font-size: 0.85rem;
+    text-align: center;
+}
+
 .agent-actions {
     display: flex;
     gap: 8px;
@@ -751,12 +866,33 @@ body {
         align-items: flex-start;
         gap: 12px;
     }
-    
+
     .session-details {
         align-items: flex-start;
         flex-direction: row;
         gap: 12px;
     }
+
+    /* Mobile inline session styles */
+    .inline-session-item {
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    .session-name {
+        flex-basis: calc(100% - 30px);
+    }
+
+    .session-activity {
+        order: 3;
+        flex-basis: 50%;
+        margin-right: 0;
+    }
+
+    .btn-session-connect {
+        order: 4;
+        padding: 8px 16px;
+    }
 }
 
 /* Modal Styles */

package/public/app/dashboard.js

@@ -566,26 +566,48 @@ class ShellMirrorDashboard {
                 ? this.formatPreciseLastSeen(agent.timeSinceLastSeen)
                 : this.formatLastSeen(agent.lastSeen);
             
+            // Build inline session list
+            const sessionsHtml = sessions.map(session => {
+                const sessionStatus = session.status === 'active' ? 'active' : 'crashed';
+                const activityText = this.formatLastActivity(session.lastActivity);
+                return `
+                    <div class="inline-session-item">
+                        <span class="session-status-dot ${sessionStatus}"></span>
+                        <span class="session-name">${session.name}</span>
+                        <span class="session-activity">${activityText}</span>
+                        <button class="btn-session-connect" onclick="dashboard.connectToSession('${agent.agentId}', '${session.id}')">
+                            Connect
+                        </button>
+                    </div>
+                `;
+            }).join('');
+
             return `
             <div class="agent-item ${!isConnectable ? 'agent-offline' : ''}">
-                <div class="agent-info">
-                    <div class="agent-name">${agent.machineName || agent.agentId}</div>
-                    <div class="agent-status ${agent.status}">
-                        ${statusIcon} ${statusText}
+                <div class="agent-header">
+                    <div class="agent-info">
+                        <div class="agent-name">${agent.machineName || agent.agentId}</div>
+                        <div class="agent-status ${agent.status}">
+                            ${statusIcon} ${statusText}
+                        </div>
+                        <div class="agent-last-seen">Last seen: ${lastSeenText}</div>
                     </div>
-                    <div class="agent-last-seen">Last seen: ${lastSeenText}</div>
-                    ${sessionCount > 0 ? `<div class="agent-sessions">${sessionCount} active session${sessionCount !== 1 ? 's' : ''}</div>` : ''}
                 </div>
-                <div class="agent-actions">
-                    <button class="btn-connect ${!isConnectable ? 'btn-disabled' : ''}" 
-                            onclick="dashboard.connectToAgent('${agent.agentId}')"
-                            ${!isConnectable ? 'disabled' : ''}>
-                        ${!isConnectable ? 'Offline' : sessionCount > 0 ? 'Resume Session' : 'New Session'}
+                ${isConnectable ? `
+                <div class="agent-sessions-inline">
+                    ${sessionCount > 0 ? `
+                        <div class="sessions-label">Sessions (${sessionCount})</div>
+                        <div class="sessions-list">
+                            ${sessionsHtml}
+                        </div>
+                    ` : ''}
+                    <button class="btn-new-session" onclick="dashboard.createNewSession('${agent.agentId}')">
+                        + New Session
                     </button>
-                    ${sessionCount > 0 && isConnectable ? `<button class="btn-sessions" onclick="dashboard.showAgentSessions('${agent.agentId}')">
-                        All Sessions
-                    </button>` : ''}
                 </div>
+                ` : `
+                <div class="agent-offline-message">Agent offline</div>
+                `}
             </div>
             `;
         }).join('');
@@ -1052,46 +1074,6 @@ class ShellMirrorDashboard {
         }
     }
 
-    showAgentSessions(agentId) {
-        const sessions = this.agentSessions[agentId] || [];
-        const agent = this.agents.find(a => a.agentId === agentId);
-        const agentName = agent ? (agent.machineName || agent.agentId) : agentId;
-        
-        if (sessions.length === 0) {
-            alert(`No active sessions found for ${agentName}`);
-            return;
-        }
-
-        // Create session list modal
-        const sessionsList = sessions.map(session => `
-            <div class="session-list-item" onclick="dashboard.connectToSession('${agentId}', '${session.id}')">
-                <div class="session-list-info">
-                    <div class="session-list-name">${session.name}</div>
-                    <div class="session-list-details">
-                        <span class="session-list-id">${session.id.substring(0, 8)}...</span>
-                        <span class="session-list-activity">Last activity: ${this.formatLastActivity(session.lastActivity)}</span>
-                    </div>
-                </div>
-                <div class="session-list-status ${session.status}">${session.status}</div>
-            </div>
-        `).join('');
-
-        // Show modal with sessions
-        this.showModal(`Sessions on ${agentName}`, `
-            <div class="sessions-modal-content">
-                <p>Active terminal sessions (${sessions.length}):</p>
-                <div class="session-list">
-                    ${sessionsList}
-                </div>
-                <div class="sessions-modal-actions">
-                    <button class="btn-primary" onclick="dashboard.createNewSession('${agentId}')">
-                        + Create New Session
-                    </button>
-                </div>
-            </div>
-        `);
-    }
-
     showModal(title, content) {
         // Create modal overlay
         const modalOverlay = document.createElement('div');