shell-mirror 1.5.33 → 1.5.35

package/README.md

@@ -146,12 +146,14 @@ Before you can run the application, you need to get a **Client ID** and **Client
 - Open your web browser and go to `https://shellmirror.app`
 - You will be prompted to log in with your Google account
 - Once authenticated, you will see your shell mirrored in the browser
+- **macOS users:** You may see a firewall dialog asking if Node.js can accept incoming connections - click "Allow" for full terminal functionality
 
 **For Local Development:**
 - Open your web browser and go to `http://localhost:3000`
 - Or access from another device on the same network: `http://<your-macs-ip-address>:3000`
 - You will be prompted to log in with your Google account
 - Once authenticated, you will see your shell mirrored in the browser
+- **macOS users:** You may see a firewall dialog asking if Node.js can accept incoming connections - click "Allow" for full terminal functionality
 
 ### 6. Deployment Notes
 

package/package.json

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

@@ -0,0 +1,558 @@
+/* Shell Mirror Dashboard Styles */
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    line-height: 1.6;
+    color: #333;
+    background: #f5f7fa;
+    min-height: 100vh;
+}
+
+/* Header */
+.dashboard-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 20px 0;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.header-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.logo h1 {
+    font-size: 1.8rem;
+    font-weight: 700;
+    margin-bottom: 2px;
+}
+
+.logo .subtitle {
+    font-size: 0.9rem;
+    opacity: 0.8;
+}
+
+.user-section {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+.user-info {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    position: relative;
+}
+
+.user-name {
+    font-weight: 500;
+}
+
+.user-dropdown {
+    position: relative;
+}
+
+.dropdown-btn {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 8px;
+    color: white;
+    padding: 8px 12px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.dropdown-btn:hover {
+    background: rgba(255, 255, 255, 0.3);
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    right: 0;
+    top: 100%;
+    background: white;
+    min-width: 150px;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    overflow: hidden;
+    z-index: 1000;
+}
+
+.dropdown-content a {
+    color: #333;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    transition: background 0.2s ease;
+}
+
+.dropdown-content a:hover {
+    background: #f8f9fa;
+}
+
+.user-dropdown:hover .dropdown-content {
+    display: block;
+}
+
+/* Buttons */
+.btn-primary {
+    background: #4285F4;
+    color: white;
+    padding: 12px 24px;
+    border: none;
+    border-radius: 8px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    text-decoration: none;
+}
+
+.btn-primary:hover {
+    background: #3367d6;
+    transform: translateY(-1px);
+}
+
+.btn-primary.small {
+    padding: 8px 16px;
+    font-size: 0.9rem;
+}
+
+/* Main Dashboard */
+.dashboard-main {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 40px 20px;
+}
+
+.dashboard-grid {
+    display: grid;
+    grid-template-columns: 1fr 300px;
+    gap: 30px;
+    margin-bottom: 30px;
+}
+
+.dashboard-card {
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+    padding: 24px;
+    transition: all 0.2s ease;
+}
+
+.dashboard-card:hover {
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+}
+
+.dashboard-card.full-width {
+    grid-column: 1 / -1;
+}
+
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.card-header h2 {
+    font-size: 1.3rem;
+    font-weight: 600;
+    color: #333;
+}
+
+.agent-count {
+    background: #e3f2fd;
+    color: #1976d2;
+    padding: 4px 8px;
+    border-radius: 12px;
+    font-size: 0.8rem;
+    font-weight: 500;
+}
+
+.card-content {
+    color: #666;
+}
+
+/* Agent Items */
+.agent-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 0;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.agent-item:last-child {
+    border-bottom: none;
+}
+
+.agent-info {
+    flex: 1;
+}
+
+.agent-name {
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 4px;
+}
+
+.agent-status {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 10px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-transform: uppercase;
+}
+
+.agent-status.online {
+    background: #e8f5e8;
+    color: #2e7d32;
+}
+
+.agent-status.offline {
+    background: #ffebee;
+    color: #c62828;
+}
+
+.agent-last-seen {
+    font-size: 0.8rem;
+    color: #999;
+    margin-top: 2px;
+}
+
+.btn-connect {
+    background: #4caf50;
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 6px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.btn-connect:hover {
+    background: #45a049;
+    transform: translateY(-1px);
+}
+
+/* Quick Actions */
+.action-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.action-btn {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px;
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-align: left;
+}
+
+.action-btn:hover {
+    background: #e9ecef;
+    border-color: #dee2e6;
+}
+
+.action-icon {
+    font-size: 1.2rem;
+}
+
+.action-text {
+    font-weight: 500;
+    color: #333;
+}
+
+/* Session Items */
+.session-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 0;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.session-item:last-child {
+    border-bottom: none;
+}
+
+.session-info {
+    flex: 1;
+}
+
+.session-agent {
+    font-weight: 500;
+    color: #333;
+    font-family: monospace;
+    font-size: 0.9rem;
+}
+
+.session-time {
+    font-size: 0.8rem;
+    color: #999;
+    margin-top: 2px;
+}
+
+.session-details {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 4px;
+}
+
+.session-duration {
+    font-size: 0.8rem;
+    color: #666;
+}
+
+.session-status {
+    padding: 2px 8px;
+    border-radius: 10px;
+    font-size: 0.7rem;
+    font-weight: 500;
+    text-transform: uppercase;
+}
+
+.session-status.completed {
+    background: #e8f5e8;
+    color: #2e7d32;
+}
+
+.session-status.active {
+    background: #fff3e0;
+    color: #f57c00;
+}
+
+/* Empty States */
+.no-data {
+    text-align: center;
+    color: #999;
+    font-style: italic;
+}
+
+.no-data a {
+    color: #4285F4;
+    text-decoration: none;
+}
+
+.no-data a:hover {
+    text-decoration: underline;
+}
+
+/* Login Overlay */
+.login-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.login-modal {
+    background: white;
+    border-radius: 16px;
+    padding: 40px;
+    max-width: 500px;
+    width: 90%;
+    text-align: center;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+}
+
+.login-content h2 {
+    margin-bottom: 12px;
+    color: #333;
+}
+
+.login-content p {
+    color: #666;
+    margin-bottom: 30px;
+}
+
+.dashboard-preview {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 20px;
+    margin: 30px 0;
+}
+
+.preview-section {
+    padding: 20px;
+    background: #f8f9fa;
+    border-radius: 8px;
+    text-align: center;
+}
+
+.preview-section h3 {
+    font-size: 1rem;
+    margin-bottom: 8px;
+    color: #333;
+}
+
+.preview-section p {
+    font-size: 0.8rem;
+    color: #666;
+    margin: 0;
+}
+
+.login-note {
+    margin-top: 20px;
+    font-size: 0.85rem;
+    color: #999;
+}
+
+/* Dashboard Skeleton (for unauthenticated preview) */
+.dashboard-skeleton .dashboard-card.blurred {
+    filter: blur(2px);
+    opacity: 0.6;
+    pointer-events: none;
+}
+
+.skeleton-content {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.skeleton-agent,
+.skeleton-action,
+.skeleton-session {
+    height: 60px;
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: loading 1.5s infinite;
+    border-radius: 8px;
+}
+
+.skeleton-action {
+    height: 50px;
+}
+
+.skeleton-session {
+    height: 40px;
+}
+
+@keyframes loading {
+    0% {
+        background-position: 200% 0;
+    }
+    100% {
+        background-position: -200% 0;
+    }
+}
+
+/* Loading Overlay */
+.loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.9);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 2000;
+}
+
+.loading-spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #4285F4;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 20px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Error State */
+.error-state {
+    text-align: center;
+    padding: 60px 20px;
+    color: #666;
+}
+
+.error-state h2 {
+    margin-bottom: 16px;
+    color: #333;
+}
+
+.error-state p {
+    margin-bottom: 24px;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .dashboard-grid {
+        grid-template-columns: 1fr;
+        gap: 20px;
+    }
+    
+    .header-content {
+        flex-direction: column;
+        gap: 15px;
+        text-align: center;
+    }
+    
+    .dashboard-main {
+        padding: 20px 15px;
+    }
+    
+    .dashboard-card {
+        padding: 20px;
+    }
+    
+    .login-modal {
+        padding: 30px 20px;
+    }
+    
+    .dashboard-preview {
+        grid-template-columns: 1fr;
+        gap: 15px;
+    }
+    
+    .agent-item,
+    .session-item {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 12px;
+    }
+    
+    .session-details {
+        align-items: flex-start;
+        flex-direction: row;
+        gap: 12px;
+    }
+}

package/public/app/dashboard.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Shell Mirror Dashboard</title>
+    <link rel="stylesheet" href="dashboard.css">
+</head>
+<body>
+    <!-- Header -->
+    <header class="dashboard-header">
+        <div class="header-content">
+            <div class="logo">
+                <h1>Shell Mirror</h1>
+                <span class="subtitle">Dashboard</span>
+            </div>
+            <div class="user-section" id="user-section">
+                <!-- Dynamic content based on auth status -->
+            </div>
+        </div>
+    </header>
+
+    <!-- Main Dashboard Content -->
+    <main class="dashboard-main" id="dashboard-main">
+        <!-- Will be populated by JavaScript based on auth status -->
+    </main>
+
+    <!-- Login Overlay (for unauthenticated users) -->
+    <div class="login-overlay" id="login-overlay" style="display: none;">
+        <div class="login-modal">
+            <div class="login-content">
+                <h2>Welcome to Shell Mirror</h2>
+                <p>Sign in to access your dashboard and manage your terminal sessions</p>
+                
+                <!-- Dashboard Preview -->
+                <div class="dashboard-preview">
+                    <div class="preview-section">
+                        <h3>🖥️ Active Agents</h3>
+                        <p>See and connect to your running Mac agents</p>
+                    </div>
+                    <div class="preview-section">
+                        <h3>📊 Session History</h3>
+                        <p>Track your past terminal sessions</p>
+                    </div>
+                    <div class="preview-section">
+                        <h3>⚙️ Quick Actions</h3>
+                        <p>Manage settings and download agents</p>
+                    </div>
+                </div>
+
+                <button class="btn-primary" onclick="handleLogin()">
+                    <svg width="20" height="20" viewBox="0 0 24 24" style="margin-right: 8px;">
+                        <path fill="white" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+                        <path fill="white" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+                        <path fill="white" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+                        <path fill="white" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+                    </svg>
+                    Sign in with Google
+                </button>
+                
+                <p class="login-note">
+                    Your credentials are secure and encrypted. We use Google OAuth 2.0 for authentication.
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Loading indicator -->
+    <div class="loading-overlay" id="loading-overlay">
+        <div class="loading-spinner"></div>
+        <p>Loading dashboard...</p>
+    </div>
+
+    <script src="dashboard.js"></script>
+</body>
+</html>

package/public/app/dashboard.js

@@ -0,0 +1,363 @@
+// Dashboard functionality for Shell Mirror
+class ShellMirrorDashboard {
+    constructor() {
+        this.isAuthenticated = false;
+        this.user = null;
+        this.agents = [];
+        this.sessions = [];
+        this.init();
+    }
+
+    async init() {
+        this.showLoading();
+        
+        try {
+            const authStatus = await this.checkAuthStatus();
+            
+            if (authStatus.isAuthenticated) {
+                this.isAuthenticated = true;
+                this.user = authStatus.user;
+                await this.loadDashboardData();
+                this.renderAuthenticatedDashboard();
+            } else {
+                this.renderUnauthenticatedDashboard();
+            }
+        } catch (error) {
+            console.error('Dashboard initialization failed:', error);
+            this.renderErrorState();
+        } finally {
+            this.hideLoading();
+        }
+    }
+
+    showLoading() {
+        document.getElementById('loading-overlay').style.display = 'flex';
+    }
+
+    hideLoading() {
+        document.getElementById('loading-overlay').style.display = 'none';
+    }
+
+    async checkAuthStatus() {
+        try {
+            const response = await fetch('/php-backend/api/auth-status.php');
+            const data = await response.json();
+            
+            if (data.success && data.data && data.data.authenticated) {
+                return { isAuthenticated: true, user: data.data };
+            }
+        } catch (error) {
+            console.log('Auth check failed:', error);
+        }
+        return { isAuthenticated: false, user: null };
+    }
+
+    async loadDashboardData() {
+        try {
+            // Load active agents
+            const agentsResponse = await fetch('/php-backend/api/agents-list.php');
+            const agentsData = await agentsResponse.json();
+            
+            if (agentsData.success && agentsData.data && agentsData.data.agents) {
+                this.agents = agentsData.data.agents;
+            }
+
+            // TODO: Load session history when API is available
+            this.sessions = [
+                {
+                    id: 1,
+                    agentId: 'local-MacBookPro-1755126622411',
+                    startTime: new Date('2025-08-13T22:10:00Z'),
+                    duration: '15 minutes',
+                    status: 'completed'
+                },
+                {
+                    id: 2,
+                    agentId: 'local-MacBookPro-1755123565749',
+                    startTime: new Date('2025-08-13T21:30:00Z'),
+                    duration: '45 minutes',
+                    status: 'completed'
+                }
+            ];
+            
+        } catch (error) {
+            console.error('Failed to load dashboard data:', error);
+        }
+    }
+
+    renderUnauthenticatedDashboard() {
+        // Update user section
+        document.getElementById('user-section').innerHTML = `
+            <button class="btn-primary small" onclick="handleLogin()">Sign In</button>
+        `;
+
+        // Show actual dashboard content but blurred
+        document.getElementById('dashboard-main').innerHTML = `
+            <div class="dashboard-skeleton">
+                <div class="dashboard-grid">
+                    <div class="dashboard-card blurred">
+                        ${this.renderActiveAgentsPreview()}
+                    </div>
+                    
+                    <div class="dashboard-card blurred">
+                        ${this.renderQuickActions()}
+                    </div>
+                    
+                    <div class="dashboard-card blurred full-width">
+                        ${this.renderRecentSessionsPreview()}
+                    </div>
+                </div>
+            </div>
+        `;
+
+        // Show login overlay
+        document.getElementById('login-overlay').style.display = 'flex';
+    }
+
+    renderAuthenticatedDashboard() {
+        // Update user section
+        document.getElementById('user-section').innerHTML = `
+            <div class="user-info">
+                <span class="user-name">${this.user.name || this.user.email}</span>
+                <div class="user-dropdown">
+                    <button class="dropdown-btn">⚙️</button>
+                    <div class="dropdown-content">
+                        <a href="#" onclick="dashboard.logout()">Logout</a>
+                        <a href="/">Home</a>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        // Render main dashboard content
+        document.getElementById('dashboard-main').innerHTML = `
+            <div class="dashboard-grid">
+                ${this.renderActiveAgents()}
+                ${this.renderQuickActions()}
+                ${this.renderRecentSessions()}
+            </div>
+        `;
+
+        // Hide login overlay
+        document.getElementById('login-overlay').style.display = 'none';
+    }
+
+    renderActiveAgents() {
+        const agentCount = this.agents.length;
+        const agentsHtml = this.agents.map(agent => `
+            <div class="agent-item">
+                <div class="agent-info">
+                    <div class="agent-name">${agent.machineName || agent.agentId}</div>
+                    <div class="agent-status ${agent.onlineStatus}">${agent.onlineStatus}</div>
+                    <div class="agent-last-seen">Last seen: ${this.formatLastSeen(agent.lastSeen)}</div>
+                </div>
+                <button class="btn-connect" onclick="dashboard.connectToAgent('${agent.agentId}')">
+                    Connect
+                </button>
+            </div>
+        `).join('');
+
+        return `
+            <div class="dashboard-card">
+                <div class="card-header">
+                    <h2>🖥️ Active Agents</h2>
+                    <span class="agent-count">${agentCount} agent${agentCount !== 1 ? 's' : ''}</span>
+                </div>
+                <div class="card-content">
+                    ${agentCount > 0 ? agentsHtml : '<p class="no-data">No active agents. <a href="#" onclick="dashboard.showAgentInstructions()">Set up an agent</a></p>'}
+                </div>
+            </div>
+        `;
+    }
+
+    renderQuickActions() {
+        return `
+            <div class="dashboard-card">
+                <h2>⚡ Quick Actions</h2>
+                <div class="card-content">
+                    <div class="action-buttons">
+                        <button class="action-btn" onclick="dashboard.startNewSession()">
+                            <span class="action-icon">🚀</span>
+                            <span class="action-text">New Terminal Session</span>
+                        </button>
+                        <button class="action-btn" onclick="dashboard.showAgentInstructions()">
+                            <span class="action-icon">📥</span>
+                            <span class="action-text">Download Agent</span>
+                        </button>
+                        <button class="action-btn" onclick="dashboard.showSettings()">
+                            <span class="action-icon">⚙️</span>
+                            <span class="action-text">Settings</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+
+    renderRecentSessions() {
+        const sessionsHtml = this.sessions.map(session => `
+            <div class="session-item">
+                <div class="session-info">
+                    <div class="session-agent">${session.agentId}</div>
+                    <div class="session-time">${this.formatDate(session.startTime)}</div>
+                </div>
+                <div class="session-details">
+                    <span class="session-duration">${session.duration}</span>
+                    <span class="session-status ${session.status}">${session.status}</span>
+                </div>
+            </div>
+        `).join('');
+
+        return `
+            <div class="dashboard-card full-width">
+                <h2>📊 Recent Sessions</h2>
+                <div class="card-content">
+                    ${this.sessions.length > 0 ? sessionsHtml : '<p class="no-data">No recent sessions</p>'}
+                </div>
+            </div>
+        `;
+    }
+
+    renderActiveAgentsPreview() {
+        // Show sample agent data for preview
+        const sampleAgents = [
+            { machineName: 'MacBook Pro', onlineStatus: 'online', lastSeen: Date.now() / 1000 - 60 },
+            { machineName: 'Mac Studio', onlineStatus: 'offline', lastSeen: Date.now() / 1000 - 3600 }
+        ];
+
+        const agentsHtml = sampleAgents.map(agent => `
+            <div class="agent-item">
+                <div class="agent-info">
+                    <div class="agent-name">${agent.machineName}</div>
+                    <div class="agent-status ${agent.onlineStatus}">${agent.onlineStatus}</div>
+                    <div class="agent-last-seen">Last seen: ${this.formatLastSeen(agent.lastSeen)}</div>
+                </div>
+                <button class="btn-connect" disabled>
+                    Connect
+                </button>
+            </div>
+        `).join('');
+
+        return `
+            <div class="card-header">
+                <h2>🖥️ Active Agents</h2>
+                <span class="agent-count">${sampleAgents.length} agents</span>
+            </div>
+            <div class="card-content">
+                ${agentsHtml}
+            </div>
+        `;
+    }
+
+    renderRecentSessionsPreview() {
+        // Show sample session data for preview
+        const sampleSessions = [
+            {
+                agentId: 'MacBook-Pro-xyz',
+                startTime: new Date(Date.now() - 86400000), // 1 day ago
+                duration: '45 minutes',
+                status: 'completed'
+            },
+            {
+                agentId: 'Mac-Studio-abc',
+                startTime: new Date(Date.now() - 3600000), // 1 hour ago
+                duration: '2 hours',
+                status: 'completed'
+            }
+        ];
+
+        const sessionsHtml = sampleSessions.map(session => `
+            <div class="session-item">
+                <div class="session-info">
+                    <div class="session-agent">${session.agentId}</div>
+                    <div class="session-time">${this.formatDate(session.startTime)}</div>
+                </div>
+                <div class="session-details">
+                    <span class="session-duration">${session.duration}</span>
+                    <span class="session-status ${session.status}">${session.status}</span>
+                </div>
+            </div>
+        `).join('');
+
+        return `
+            <h2>📊 Recent Sessions</h2>
+            <div class="card-content">
+                ${sessionsHtml}
+            </div>
+        `;
+    }
+
+    renderErrorState() {
+        document.getElementById('dashboard-main').innerHTML = `
+            <div class="error-state">
+                <h2>⚠️ Something went wrong</h2>
+                <p>Unable to load dashboard. Please try refreshing the page.</p>
+                <button class="btn-primary" onclick="location.reload()">Refresh</button>
+            </div>
+        `;
+    }
+
+    // Utility methods
+    formatLastSeen(lastSeen) {
+        if (!lastSeen) return 'Unknown';
+        
+        const now = Date.now() / 1000;
+        const diff = now - lastSeen;
+        
+        if (diff < 60) return 'Just now';
+        if (diff < 3600) return `${Math.floor(diff / 60)} minutes ago`;
+        if (diff < 86400) return `${Math.floor(diff / 3600)} hours ago`;
+        return `${Math.floor(diff / 86400)} days ago`;
+    }
+
+    formatDate(date) {
+        return new Intl.DateTimeFormat('en-US', {
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        }).format(date);
+    }
+
+    // Action handlers
+    async connectToAgent(agentId) {
+        window.location.href = `/app/terminal.html?agent=${agentId}`;
+    }
+
+    startNewSession() {
+        window.location.href = '/app/terminal.html';
+    }
+
+    showAgentInstructions() {
+        // TODO: Show modal with agent setup instructions
+        alert('Agent setup instructions coming soon!');
+    }
+
+    showSettings() {
+        // TODO: Implement settings modal
+        alert('Settings coming soon!');
+    }
+
+    async logout() {
+        try {
+            await fetch('/php-backend/api/auth-logout.php', { method: 'POST' });
+            window.location.href = '/';
+        } catch (error) {
+            console.error('Logout failed:', error);
+            // Fallback - redirect anyway
+            window.location.href = '/';
+        }
+    }
+}
+
+// Global functions
+function handleLogin() {
+    const returnUrl = encodeURIComponent(window.location.pathname);
+    window.location.href = `/php-backend/api/auth-login.php?return=${returnUrl}`;
+}
+
+// Initialize dashboard
+let dashboard;
+document.addEventListener('DOMContentLoaded', () => {
+    dashboard = new ShellMirrorDashboard();
+});

package/public/app/terminal.html

@@ -30,22 +30,43 @@
       #connect-container { padding: 2em; text-align: center; }
       #agent-id-input { font-size: 1.2em; padding: 8px; width: 400px; margin-bottom: 1em; }
       #connect-btn { font-size: 1.2em; padding: 10px 20px; }
+      
+      /* Back to Dashboard Button */
+      .back-to-dashboard {
+        position: fixed;
+        top: 20px;
+        left: 20px;
+        background: rgba(66, 133, 244, 0.9);
+        color: white;
+        border: none;
+        padding: 12px 20px;
+        border-radius: 8px;
+        font-weight: 500;
+        cursor: pointer;
+        z-index: 1000;
+        transition: all 0.2s ease;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        text-decoration: none;
+      }
+      
+      .back-to-dashboard:hover {
+        background: rgba(51, 103, 214, 0.9);
+        transform: translateY(-1px);
+      }
     </style>
   </head>
   <body>
+    <!-- Back to Dashboard Button -->
+    <a href="/app/dashboard.html" class="back-to-dashboard">
+        <span>←</span>
+        <span>Dashboard</span>
+    </a>
+    
     <div id="connect-container">
         <h2>Terminal Mirror</h2>
-        <div id="agent-discovery">
-            <p>Discovering available Mac agents...</p>
-            <div id="agent-list"></div>
-        </div>
-        <div id="manual-connect" style="display: none; margin-top: 20px;">
-            <p>Or manually enter Agent ID:</p>
-            <input type="text" id="agent-id-input" placeholder="e.g., agent-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx">
-            <br>
-            <button id="connect-btn">Connect</button>
-        </div>
-        <button id="show-manual" style="margin-top: 10px;">Manual Connect</button>
+        <p>Connecting to terminal...</p>
     </div>
     <div id="terminal-container">
         <div id="terminal"></div>

package/public/app/terminal.js

@@ -41,12 +41,6 @@ term.loadAddon(fitAddon);
 
 const connectContainer = document.getElementById('connect-container');
 const terminalContainer = document.getElementById('terminal-container');
-const agentIdInput = document.getElementById('agent-id-input');
-const connectBtn = document.getElementById('connect-btn');
-const showManualBtn = document.getElementById('show-manual');
-const manualConnect = document.getElementById('manual-connect');
-const agentDiscovery = document.getElementById('agent-discovery');
-const agentList = document.getElementById('agent-list');
 
 let ws;
 let peerConnection;
@@ -56,10 +50,24 @@ let AGENT_ID;
 let CLIENT_ID;
 let SELECTED_AGENT; // Store full agent data including WebSocket URL
 
-// Auto-discover agents on page load
+// Check for agent parameter and connect directly
 window.addEventListener('load', () => {
-    discoverAgents();
     loadVersionInfo();
+    
+    // Get agent ID from URL parameter
+    const urlParams = new URLSearchParams(window.location.search);
+    const agentId = urlParams.get('agent');
+    
+    if (agentId) {
+        AGENT_ID = agentId;
+        SELECTED_AGENT = { id: agentId, agentId: agentId };
+        console.log('[CLIENT] 🔗 Connecting directly to agent:', agentId);
+        startConnection();
+    } else {
+        // No agent specified, redirect to dashboard
+        console.log('[CLIENT] ❌ No agent specified, redirecting to dashboard');
+        window.location.href = '/app/dashboard.html';
+    }
 });
 
 // Load version info for footer
@@ -86,34 +94,7 @@ async function loadVersionInfo() {
     }
 }
 
-showManualBtn.onclick = () => {
-    agentDiscovery.style.display = 'none';
-    manualConnect.style.display = 'block';
-    showManualBtn.style.display = 'none';
-};
-
-connectBtn.onclick = () => {
-    AGENT_ID = agentIdInput.value.trim();
-    if (!AGENT_ID) {
-        alert('Please enter a valid Agent ID.');
-        return;
-    }
-    startConnection();
-};
 
-function connectToAgent(agent) {
-    if (typeof agent === 'string') {
-        // Fallback for manual connection - agent is just the ID
-        AGENT_ID = agent;
-        SELECTED_AGENT = { id: agent, websocketUrl: null };
-    } else {
-        // Full agent object from discovery
-        AGENT_ID = agent.id;
-        SELECTED_AGENT = agent;
-    }
-    console.log('[CLIENT] 🔗 Connecting to agent:', SELECTED_AGENT);
-    startConnection();
-}
 
 function startConnection() {
     connectContainer.style.display = 'none';
@@ -126,103 +107,6 @@ function startConnection() {
     initialize();
 }
 
-async function discoverAgents() {
-    console.log('[DISCOVERY] 🔍 Starting agent discovery via PHP backend...');
-    agentList.innerHTML = '<p style="color: #ccc;">Searching for Mac agents...</p>';
-    
-    try {
-        // Use PHP backend for agent discovery instead of WebSocket
-        const response = await fetch('/php-backend/api/list-agents.php', {
-            method: 'GET',
-            credentials: 'include', // Include session cookies for authentication
-            headers: {
-                'Accept': 'application/json',
-                'Content-Type': 'application/json'
-            }
-        });
-        
-        if (!response.ok) {
-            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-        }
-        
-        const data = await response.json();
-        console.log('[DISCOVERY] 📨 PHP Backend Response:', data);
-        
-        if (data.success && data.data && data.data.agents) {
-            displayAvailableAgents(data.data.agents);
-        } else {
-            console.log('[DISCOVERY] ⚠️ No agents found in response');
-            agentList.innerHTML = '<p style="color: #ff9800;">⚠️ No Mac agents found.<br><small>Make sure your Mac agent is running with: <code>shell-mirror</code></small></p>';
-            showManualBtn.style.display = 'block';
-        }
-        
-    } catch (error) {
-        console.error('[DISCOVERY] ❌ PHP Backend error:', error);
-        
-        if (error.message.includes('401')) {
-            agentList.innerHTML = '<p style="color: #f44336;">Authentication required. <a href="/php-backend/api/auth-login.php" style="color: #4CAF50;">Please log in</a></p>';
-        } else {
-            agentList.innerHTML = '<p style="color: #f44336;">Discovery failed. Check server connection.</p>';
-        }
-        
-        showManualBtn.style.display = 'block';
-    }
-}
-
-function displayAvailableAgents(agents) {
-    console.log('[DISCOVERY] 🖥️ Displaying agents:', agents);
-    agentList.innerHTML = '';
-    
-    if (agents.length === 0) {
-        agentList.innerHTML = '<p style="color: #ff9800;">❌ No Mac agents currently running.</p>';
-        showManualBtn.style.display = 'block';
-        return;
-    }
-    
-    console.log(`[DISCOVERY] ✅ Found ${agents.length} agent(s)`);
-    
-    agents.forEach(agent => {
-        const agentDiv = document.createElement('div');
-        agentDiv.style.cssText = 'margin: 10px 0; padding: 15px; background: #333; border-radius: 8px; cursor: pointer; border: 2px solid #555; transition: all 0.3s ease;';
-        agentDiv.innerHTML = `
-            <div style="display: flex; align-items: center; gap: 10px;">
-                <div style="width: 12px; height: 12px; background: #4CAF50; border-radius: 50%; animation: pulse 2s infinite;"></div>
-                <div>
-                    <strong style="color: #fff;">${agent.id}</strong><br>
-                    <small style="color: #aaa;">🖱️ Click to connect to Mac terminal</small>
-                </div>
-            </div>
-        `;
-        
-        agentDiv.onmouseover = () => {
-            agentDiv.style.borderColor = '#4CAF50';
-            agentDiv.style.background = '#444';
-        };
-        agentDiv.onmouseout = () => {
-            agentDiv.style.borderColor = '#555';
-            agentDiv.style.background = '#333';
-        };
-        agentDiv.onclick = () => {
-            console.log(`[DISCOVERY] 🖱️ User clicked on agent: ${agent.id}`, agent);
-            connectToAgent(agent);
-        };
-        
-        agentList.appendChild(agentDiv);
-    });
-    
-    showManualBtn.style.display = 'block';
-    
-    // Add CSS animation for pulse effect
-    const style = document.createElement('style');
-    style.textContent = `
-        @keyframes pulse {
-            0% { opacity: 1; }
-            50% { opacity: 0.5; }
-            100% { opacity: 1; }
-        }
-    `;
-    document.head.appendChild(style);
-}
 
 async function initialize() {
     console.log('[CLIENT] 🚀 Initializing WebRTC connection to agent:', AGENT_ID);

package/public/index.html

@@ -662,31 +662,30 @@
 
 
     <script>
-        // Check if user is already authenticated and redirect to terminal
-        async function checkAuthAndRedirect() {
+        // Check authentication status without auto-redirect
+        async function checkAuthStatus() {
             try {
                 const response = await fetch('/php-backend/api/auth-status.php');
                 const data = await response.json();
                 
                 if (data.success && data.data && data.data.authenticated) {
-                    // User is logged in, redirect to terminal
-                    window.location.href = '/app/terminal.html';
-                    return true;
+                    return { isAuthenticated: true, user: data.data };
                 }
             } catch (error) {
                 console.log('Auth check failed:', error);
             }
-            return false;
+            return { isAuthenticated: false, user: null };
         }
 
         // Handle Google login - direct web OAuth
         async function handleGoogleLogin() {
-            // Check if already logged in first
-            const isLoggedIn = await checkAuthAndRedirect();
-            if (isLoggedIn) return;
-            
             // Direct OAuth flow using the web backend
-            window.location.href = '/php-backend/api/auth-login.php';
+            window.location.href = '/php-backend/api/auth-login.php?return=' + encodeURIComponent('/app/dashboard');
+        }
+
+        // Handle dashboard navigation
+        async function openDashboard() {
+            window.location.href = '/app/dashboard.html';
         }
 
         // Load version info
@@ -712,12 +711,43 @@
             }
         }
 
-        // Check authentication status on page load
-        document.addEventListener('DOMContentLoaded', () => {
-            checkAuthAndRedirect();
+        // Initialize page on load
+        document.addEventListener('DOMContentLoaded', async () => {
+            await updateHeaderAndCTA();
             loadVersionInfo();
         });
 
+        // Update header and CTA based on auth status
+        async function updateHeaderAndCTA() {
+            const authStatus = await checkAuthStatus();
+            
+            // Update header navigation
+            const headerNav = document.querySelector('nav');
+            if (authStatus.isAuthenticated) {
+                // Show user info + dashboard link
+                headerNav.innerHTML = `
+                    <div class="logo">Shell Mirror</div>
+                    <div style="display: flex; align-items: center; gap: 15px;">
+                        <span style="color: white; opacity: 0.9;">Welcome, ${authStatus.user.name || authStatus.user.email}</span>
+                        <a href="/app/dashboard.html" class="cta-button">Dashboard</a>
+                    </div>
+                `;
+            } else {
+                // Show sign in option
+                headerNav.innerHTML = `
+                    <div class="logo">Shell Mirror</div>
+                    <button class="cta-button" onclick="handleGoogleLogin()">Sign In</button>
+                `;
+            }
+
+            // Update main CTA buttons
+            const primaryButtons = document.querySelectorAll('.btn-primary');
+            primaryButtons.forEach(button => {
+                button.textContent = 'Open Dashboard';
+                button.onclick = openDashboard;
+            });
+        }
+
         // Smooth scrolling for anchor links
         document.querySelectorAll('a[href^="#"]').forEach(anchor => {
             anchor.addEventListener('click', function (e) {