shell-mirror 1.5.110 → 1.5.112

package/public/app/dashboard.html

@@ -60,7 +60,6 @@
             <div class="logo">
                 <a href="/" style="text-decoration: none; color: inherit;">
                     <h1>Shell Mirror</h1>
-                    <span class="subtitle">Dashboard</span>
                 </a>
             </div>
             <div class="header-right">
@@ -98,10 +97,8 @@
     </div>
 
     <!-- Version Footer -->
-    <footer style="background: #ff6b35; color: white; text-align: center; padding: 10px 0; font-size: 0.8rem; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;">
-        <div style="max-width: 1200px; margin: 0 auto;">
-            <p id="dashboard-version-info">Shell Mirror Dashboard • Loading version...</p>
-        </div>
+    <footer id="version-footer" style="background: var(--bg-secondary, #141519); color: var(--text-secondary, #8a8f98); text-align: center; padding: 8px 0; font-size: 0.75rem; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; border-top: 1px solid var(--border, #2a2b30);">
+        <p id="dashboard-version-info" style="margin: 0;">Shell Mirror • Loading...</p>
     </footer>
 
     <script src="dashboard.js"></script>

package/public/app/dashboard.js

@@ -31,13 +31,13 @@ class ShellMirrorDashboard {
     async init() {
         this.showLoading();
         this.loadVersionInfo(); // Load version info immediately
-        
+
         // Wait for GA script to load and send page view
         setTimeout(() => {
             console.log('🔍 [DASHBOARD DEBUG] Checking Google Analytics setup...');
             console.log('🔍 [DASHBOARD DEBUG] gtag function type:', typeof gtag);
             console.log('🔍 [DASHBOARD DEBUG] gtagLoaded flag:', window.gtagLoaded);
-            
+
             // Send dashboard page view event
             if (typeof sendGAEvent === 'function') {
                 sendGAEvent('page_view', {
@@ -48,10 +48,10 @@ class ShellMirrorDashboard {
                 console.warn('❌ [DASHBOARD DEBUG] sendGAEvent function not available');
             }
         }, 1000);
-        
+
         try {
             const authStatus = await this.checkAuthStatus();
-            
+
             if (authStatus.isAuthenticated) {
                 this.isAuthenticated = true;
                 this.user = authStatus.user;
@@ -501,14 +501,6 @@ class ShellMirrorDashboard {
                 <div class="dashboard-card">
                     ${this.renderActiveAgentsPreview()}
                 </div>
-                
-                <div class="dashboard-card">
-                    ${this.renderQuickActions()}
-                </div>
-                
-                <div class="dashboard-card full-width">
-                    ${this.renderRecentSessionsPreview()}
-                </div>
             </div>
         `;
 
@@ -520,32 +512,26 @@ class ShellMirrorDashboard {
     }
 
     renderAuthenticatedDashboard() {
-        // Update user section - simplified without refresh button
+        // Update user section - minimal design
         document.getElementById('user-section').innerHTML = `
-            <div class="dashboard-controls">
-                <span id="connection-status" class="connection-status" style="display: none;"></span>
-            </div>
-            <button class="help-button" onclick="dashboard.showAgentInstructions()" title="How to Use">
-                How to Use
-            </button>
+            <span id="connection-status" class="connection-status" style="display: none;"></span>
             <div class="user-info">
                 <span class="user-name">${this.user?.name || this.user?.email || 'User'}</span>
                 <div class="user-dropdown">
                     <button class="dropdown-btn">⚙️</button>
                     <div class="dropdown-content">
-                        <a href="#" onclick="dashboard.logout()">Logout</a>
+                        <a href="#" onclick="dashboard.showAgentInstructions()">Help</a>
                         <a href="/">Home</a>
+                        <a href="#" onclick="dashboard.logout()">Logout</a>
                     </div>
                 </div>
             </div>
         `;
 
-        // Render main dashboard content
+        // Render main dashboard content - agents only
         document.getElementById('dashboard-main').innerHTML = `
             <div class="dashboard-grid">
                 ${this.renderActiveAgents()}
-                ${this.renderQuickActions()}
-                ${this.renderRecentSessions()}
             </div>
         `;
 
@@ -570,12 +556,6 @@ class ShellMirrorDashboard {
             const sessionCount = sessions.length;
             
             const isConnectable = agent.status === 'online' || agent.status === 'recent';
-            const statusIcon = {
-                'online': '🟢',
-                'recent': '🟡', 
-                'offline': '🔴'
-            }[agent.status] || '❓';
-            
             const statusText = {
                 'online': 'Live',
                 'recent': 'Recent',
@@ -588,14 +568,11 @@ class ShellMirrorDashboard {
             
             // 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" 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>
+                        <span class="session-name" style="color: ${color.border};">${session.name}</span>
                         <button class="btn-session-connect" onclick="dashboard.connectToSession('${agent.agentId}', '${session.id}')" style="background-color: ${color.border};">
                             Connect
                         </button>
@@ -614,16 +591,13 @@ class ShellMirrorDashboard {
                             </button>
                         </div>
                         <div class="agent-status ${agent.status}">
-                            ${statusIcon} ${statusText}
-                            ${sessionCount > 0 ? `<span class="agent-session-count">(${sessionCount} session${sessionCount !== 1 ? 's' : ''})</span>` : ''}
+                            ${statusText}${sessionCount > 0 ? ` · ${sessionCount} session${sessionCount !== 1 ? 's' : ''}` : ''}
                         </div>
-                        <div class="agent-last-seen">Last seen: ${lastSeenText}</div>
                     </div>
                 </div>
                 ${isConnectable ? `
                 <div class="agent-sessions-inline">
                     ${sessionCount > 0 ? `
-                        <div class="sessions-label">Active Sessions</div>
                         <div class="sessions-list">
                             ${sessionsHtml}
                         </div>
@@ -639,31 +613,11 @@ class ShellMirrorDashboard {
             `;
         }).join('');
 
-        // Check if there are any offline agents to show cleanup option
-        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()
-            : '<span class="loading-dots"><span>.</span><span>.</span><span>.</span></span>';
-
         return `
             <div class="dashboard-card">
                 <div class="card-header">
-                    <div class="card-title-section">
-                        <h2>Active Agents</h2>
-                        <span class="agent-count">${agentCount}</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">
-                            Refresh
-                        </button>
-                        ${showCleanup ? `<button class="btn-text-action btn-cleanup" onclick="dashboard.cleanupOfflineAgents()" title="Remove offline agents">
-                            Clean
-                        </button>` : ''}
-                    </div>
+                    <h2>Agents</h2>
+                    ${agentCount > 0 ? `<span class="agent-count">${agentCount}</span>` : ''}
                 </div>
                 <div class="card-content">
                     ${agentCount > 0 ? agentsHtml : this.renderEmptyAgentState()}
@@ -675,38 +629,23 @@ class ShellMirrorDashboard {
     renderEmptyAgentState() {
         return `
             <div class="empty-agent-state">
-                <div class="empty-state-header">
-                    <h3>Get Started with Shell Mirror</h3>
-                    <p>Connect your Mac in 2 simple steps:</p>
-                </div>
-
+                <p class="empty-state-title">No agents connected</p>
                 <div class="empty-state-steps">
-                    <div class="empty-state-step">
-                        <div class="empty-step-number">1</div>
-                        <div class="empty-step-content">
-                            <h4>Install the agent</h4>
-                            <div class="inline-command-box">
-                                <code>npm install -g shell-mirror</code>
-                                <button class="inline-copy-btn" onclick="navigator.clipboard.writeText('npm install -g shell-mirror'); this.textContent = 'Copied!'; setTimeout(() => this.textContent = 'Copy', 2000)">Copy</button>
-                            </div>
+                    <div class="command-step">
+                        <span class="step-label">1. Install</span>
+                        <div class="command-box">
+                            <code>npm install -g shell-mirror</code>
+                            <button class="copy-btn" onclick="navigator.clipboard.writeText('npm install -g shell-mirror'); this.textContent = '✓'; setTimeout(() => this.textContent = 'Copy', 1500)">Copy</button>
                         </div>
                     </div>
-
-                    <div class="empty-state-step">
-                        <div class="empty-step-number">2</div>
-                        <div class="empty-step-content">
-                            <h4>Run the agent</h4>
-                            <div class="inline-command-box">
-                                <code>shell-mirror</code>
-                                <button class="inline-copy-btn" onclick="navigator.clipboard.writeText('shell-mirror'); this.textContent = 'Copied!'; setTimeout(() => this.textContent = 'Copy', 2000)">Copy</button>
-                            </div>
+                    <div class="command-step">
+                        <span class="step-label">2. Run</span>
+                        <div class="command-box">
+                            <code>shell-mirror</code>
+                            <button class="copy-btn" onclick="navigator.clipboard.writeText('shell-mirror'); this.textContent = '✓'; setTimeout(() => this.textContent = 'Copy', 1500)">Copy</button>
                         </div>
                     </div>
                 </div>
-
-                <div class="empty-state-footer">
-                    <p>Your agent will appear here once connected</p>
-                </div>
             </div>
         `;
     }