shell-mirror 1.5.73 → 1.5.75

package/README.md

@@ -1,331 +1,346 @@
 # Shell Mirror
 
-A simple application to securely mirror your local computer's shell to a web browser on any device. It uses Google Authentication to ensure only you can access your shell session.
+**Access your Mac terminal from any device, securely.** Perfect for mobile coding with Claude Code CLI, Gemini CLI, and any shell tool.
 
-## 🎯 Project Goal
+---
+
+## What is Shell Mirror?
+
+Shell Mirror lets you access your Mac terminal from any web browser on any device (phone, tablet, laptop). It uses WebRTC for fast, peer-to-peer terminal mirroring with Google OAuth 2.0 authentication to keep your terminal secure.
+
+### Key Features
+
+✅ **Secure Access** - Google OAuth 2.0 authentication
+✅ **WebRTC Connection** - Fast, direct peer-to-peer terminal mirroring
+✅ **Multiple Sessions** - Create and manage multiple terminal sessions
+✅ **Dashboard** - Visual dashboard to manage connected agents and sessions
+✅ **Mobile-Friendly** - Optimized for mobile coding (perfect for AI coding tools)
+✅ **NPM Package** - Easy installation via `npm install -g shell-mirror`
+✅ **Auto-Start** - Mac agent auto-starts and registers with cloud server
+
+---
+
+## 🏗️ Architecture
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                      User's Browser                          │
+│              (https://shellmirror.app)                       │
+│         ┌──────────────────────────────────────┐            │
+│         │  Dashboard  │  Terminal Interface    │            │
+│         └──────────────────────────────────────┘            │
+└────────────────────┬────────────────────────────────────────┘
+                     │
+          Google OAuth 2.0 Authentication
+                     │
+    ┌────────────────▼────────────────────────────┐
+    │   Heroku WebSocket Signaling Server         │
+    │  (wss://shell-mirror-[...].herokuapp.com)   │
+    │                                              │
+    │  • WebRTC signaling (SDP/ICE exchange)      │
+    │  • Agent discovery & registration           │
+    │  • Dashboard real-time updates              │
+    └────────────────┬────────────────────────────┘
+                     │
+         WebSocket Connection (both ways)
+                     │
+    ┌────────────────▼────────────────────────────┐
+    │        Mac Agent (User's Computer)          │
+    │                                              │
+    │  • Auto-starts on login                     │
+    │  • Registers with cloud server              │
+    │  • Manages multiple terminal sessions       │
+    │  • WebRTC peer connection to browser        │
+    └─────────────────────────────────────────────┘
+                     │
+              Terminal Sessions
+                     │
+              ┌──────┴──────┐
+              │   Terminal   │
+              │   (node-pty) │
+              └─────────────┘
+```
+
+### Components
+
+1. **Frontend (TMDHosting)**: Static website at https://shellmirror.app
+2. **WebSocket Server (Heroku)**: Node.js signaling server for WebRTC
+3. **PHP Backend (TMDHosting)**: Agent registration and authentication APIs
+4. **Mac Agent**: Local terminal mirroring agent (npm package)
+5. **Dashboard**: Real-time agent and session management interface
+
+---
+
+## 🚀 Quick Start
+
+### For Users (NPM Package)
+
+```bash
+# Install globally
+npm install -g shell-mirror
+
+# Run setup wizard (configures Google OAuth)
+shell-mirror setup
+
+# Start the agent
+shell-mirror start
+
+# Access from browser
+# Visit: https://shellmirror.app
+```
+
+### For Developers (Local Development)
+
+```bash
+# Clone repository
+git clone https://github.com/karmalsky/shell-mirror.git
+cd terminal-mirror
 
-The primary goal is to allow a user to see their personal shell session (initially for macOS) running on their own computer, reflected in a web page accessible from their mobile phone or tablet. Access must be securely restricted to the user, leveraging a standard and robust authentication provider.
+# Install dependencies
+npm install
 
-Key objectives:
-- **Secure Mirroring**: Provide a real-time, read/write mirror of a user's shell.
-- **Robust Authentication**: Use Google OAuth 2.0 to ensure that only the owner can access the terminal session.
-- **Web-Based Access**: The web interface should allow a user to log in and connect to their running shell server.
-- **Simplicity**: The application should be a simple, standalone server that is easy to set up and run on a personal computer.
+# Configure environment
+cp .env.example .env
+# Edit .env with your Google OAuth credentials
+
+# Start local WebSocket server
+npm start
+
+# Access at http://localhost:3000
+```
 
 ---
 
-## 🗺️ Development Plan
+## 🔐 Google OAuth Setup
+
+Shell Mirror requires Google OAuth 2.0 credentials:
 
-To achieve this vision, the project will be pivoted from its original, more complex architecture to a streamlined solution.
+1. **Google Cloud Console**: https://console.cloud.google.com/
+2. **Create OAuth Client ID**:
+   - Application type: **Web application**
+   - Authorized JavaScript origins: `https://shellmirror.app`
+   - Authorized redirect URIs: `https://shellmirror.app/auth/google/callback`
+3. **Copy credentials** to your `.env` file or provide during `shell-mirror setup`
+
+For detailed OAuth setup instructions, see the old README in `old_md/README_old.md` (lines 66-98).
+
+---
 
-### High-Level Plan
+## 📱 Usage
 
-1.  **Simplify the Architecture:**
-    *   **Remove Docker:** Eliminate all Docker-related files (`Dockerfile`, `docker-compose.yml`, etc.) and scripts. The application will run directly on the host machine.
-    *   **Remove Connection Broker:** The `broker.js` service is overly complex for the new goal and will be removed.
+### Access Your Terminal
 
-2.  **Implement Robust Authentication:**
-    *   **Replace Custom Auth:** Swap the current manual token system (`auth.js`) with a standard, secure **Google OAuth 2.0** login flow using Passport.js.
+1. **Visit**: https://shellmirror.app
+2. **Login** with Google account
+3. **Dashboard** shows your connected Mac agents
+4. **Connect** to start a terminal session
 
-3.  **Refine the User Experience:**
-    *   **Login Page:** The web interface (`index.html`) will first present a "Login with Google" button.
-    *   **Secure Shell Access:** The shell view will only be loaded and connected *after* a successful login.
+### Multiple Terminal Sessions
+
+- **Create new session**: Click "New Terminal Session" in dashboard
+- **Resume session**: Select from existing sessions list
+- **Switch sessions**: Use session dropdown in terminal interface
+- **Manage sessions**: View active sessions, close inactive ones
+
+### Mac Agent Commands
+
+```bash
+shell-mirror start          # Start agent
+shell-mirror stop           # Stop agent
+shell-mirror restart        # Restart agent
+shell-mirror status         # Check status
+shell-mirror setup          # Run setup wizard
+```
 
 ---
 
-### Detailed Implementation Steps
+## 🛠️ Development & Deployment
+
+### Project Structure
 
-*   **Phase 1: Cleanup & Refactoring**
-    1.  Delete `Dockerfile`, `docker-compose.yml`, `docker-compose.override.yml`, and `.dockerignore`.
-    2.  Delete `broker.js`.
-    3.  Uninstall unused dependencies and remove Docker-related commands from `package.json`.
-    4.  Update `server.js` to remove all logic related to the broker and the old authentication system.
+```
+terminal-mirror/
+├── server.js              # WebSocket signaling server
+├── auth.js                # Google OAuth configuration
+├── lib/                   # CLI and agent management
+│   ├── auto-start.js      # Mac agent auto-start logic
+│   ├── setup-wizard.js    # Interactive setup
+│   └── ...
+├── mac-agent/             # Mac terminal mirroring agent
+│   ├── agent.js           # Main agent (WebRTC + sessions)
+│   └── http-agent.js      # HTTP polling fallback
+├── public/                # Frontend files
+│   ├── index.html         # Landing page
+│   └── app/               # Dashboard and terminal UI
+├── heroku/                # Heroku WebSocket server deployment
+└── php-backend/           # PHP APIs for agent registration
+```
 
-*   **Phase 2: Google Authentication**
-    1.  Add new dependencies: `passport`, `passport-google-oauth20`, and `express-session`.
-    2.  Create a new `auth.js` to configure Passport for the Google login flow.
-    3.  Add the necessary login (`/auth/google`) and callback (`/auth/google/callback`) routes to `server.js`.
-    4.  Secure the WebSocket connection by ensuring the user is authenticated via their session.
+### Deployment
 
-*   **Phase 3: Frontend UI**
-    1.  Modify `public/index.html` to conditionally show a "Login" button or the terminal.
-    2.  Add client-side logic to check the user's authentication status and initiate the WebSocket connection only when logged in.
+```bash
+# Deploy WebSocket server to Heroku
+./deploy-heroku.sh
 
-*   **Phase 4: Documentation**
-    1.  Update this `README.md` to reflect the new, simplified project goals, the plan outlined above, and provide clear instructions on how to set up and run the application, including how to generate Google OAuth credentials.
+# Deploy website/PHP backend to TMDHosting
+node deploy-php.cjs
+
+# Publish NPM package (user must run manually per CLAUDE.md)
+./publish.sh
+```
+
+For detailed deployment instructions, see `DEPLOYMENT-PUBLISHING-GUIDE.md`.
 
 ---
 
-## 🚀 Getting Started
-
-### 1. Prerequisites
-
-- **Node.js**: Make sure you have Node.js (version 18 or higher) installed on your Mac.
-- **Google Account**: You will need a Google account to generate authentication credentials.
-
-### 2. Configure Google OAuth 2.0 Credentials
-
-Before you can run the application, you need to get a **Client ID** and **Client Secret** from the Google Cloud Console.
-
-1.  **Go to the Google Cloud Console**: [https://console.cloud.google.com/](https://console.cloud.google.com/)
-
-2.  **Create a new project** (or select an existing one).
-
-3.  **Enable the "Google People API"**: In the navigation menu, go to **APIs & Services > Library**, search for "Google People API", and click **Enable**.
-
-4.  **Configure the OAuth Consent Screen**:
-    *   Go to **APIs & Services > OAuth consent screen**.
-    *   Choose **External** and click **Create**.
-    *   Fill in the required fields (app name, user support email, developer contact).
-    *   On the "Scopes" page, you can leave it blank.
-    *   On the "Test users" page, add the Google account email you intend to log in with.
-
-5.  **Create Credentials**:
-    *   Go to **APIs & Services > Credentials**.
-    *   Click **+ CREATE CREDENTIALS** and select **OAuth client ID**.
-    *   For **Application type**, select **Web application**.
-    
-    **For Production (shellmirror.app):**
-    *   Under **Authorized JavaScript origins**, add `https://shellmirror.app`.
-    *   Under **Authorized redirect URIs**, add `https://shellmirror.app/auth/google/callback`.
-    
-    **For Local Development:**
-    *   Under **Authorized JavaScript origins**, add `http://localhost:3000`.
-    *   Under **Authorized redirect URIs**, add `http://localhost:3000/auth/google/callback`.
-    
-    *Note: You can add both production and development URLs to the same OAuth client.*
-    
-    *   Click **Create**. You will be shown your **Client ID** and **Client Secret**. Copy these.
-
-### 3. Configure the Application
-
-1.  **Create a `.env` file** in the root of the project by copying the example:
-    ```bash
-    cp .env.example .env
-    ```
-
-2.  **Edit the `.env` file** and add the credentials you just created:
-    
-    **For Production (shellmirror.app):**
-    ```
-    BASE_URL=https://shellmirror.app
-    PORT=3000
-    HOST=0.0.0.0
-    GOOGLE_CLIENT_ID=YOUR_GOOGLE_CLIENT_ID
-    GOOGLE_CLIENT_SECRET=YOUR_GOOGLE_CLIENT_SECRET
-    SESSION_SECRET=a-very-strong-and-long-random-string
-    ```
-    
-    **For Local Development:**
-    ```
-    BASE_URL=http://localhost:3000
-    PORT=3000
-    HOST=0.0.0.0
-    GOOGLE_CLIENT_ID=YOUR_GOOGLE_CLIENT_ID
-    GOOGLE_CLIENT_SECRET=YOUR_GOOGLE_CLIENT_SECRET
-    SESSION_SECRET=a-very-strong-and-long-random-string
-    ```
-    
-    *Replace the placeholder values with your actual credentials. Use a long, random string for the `SESSION_SECRET`.* 
-
-### 4. Install & Run
-
-1.  **Install dependencies**:
-    ```bash
-    npm install
-    ```
-
-2.  **Start the server**:
-    ```bash
-    npm start
-    ```
-
-### 5. Access Your Terminal
-
-**For Production:**
-- 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
-
-**For Production Deployment:**
-- Ensure your server has SSL/TLS configured (required for HTTPS)
-- Set up proper firewall rules and security measures
-- Consider using a process manager like PM2 for production
-- Make sure the `BASE_URL` environment variable matches your actual domain
-
-**Environment Variables:**
-The application will validate that all required environment variables are set on startup and show helpful error messages if any are missing.
-
-### 7. Production Deployment
-
-**Automated Deployment to www.igori.eu:**
-
-The project includes an automated deployment script that uploads the application to the production server.
+## 📊 Monitoring & Logs
 
+### Check Status
 ```bash
-npm run deploy
+./status.sh     # Check all services
 ```
 
-**Deployment Process:**
-1. **Validation**: Checks that all required files exist and syntax is valid
-2. **Upload**: Securely uploads all application files via FTP
-3. **Verification**: Confirms all files were uploaded successfully
-4. **Instructions**: Displays post-deployment setup steps
+### View Logs
+```bash
+# Heroku WebSocket server
+heroku logs --tail -a shell-mirror
+
+# PHP backend (web)
+https://shellmirror.app/debug.html
+
+# Local logs
+tail -f server-debug.log
+```
+
+For complete operations guide, see `OPERATIONS.md`.
+
+---
 
-**Post-Deployment Setup:**
-After running the deployment script, you'll need to SSH into your server and:
+## 📚 Documentation
+
+- **README.md** (this file) - Overview and quick start
+- **OPERATIONS.md** - Monitoring, logs, troubleshooting
+- **QUICK-REFERENCE.md** - Fast command reference
+- **DEPLOYMENT-PUBLISHING-GUIDE.md** - Deployment procedures
+- **TECHNICAL-NOTES.md** - macOS firewall behavior notes
+- **ANALYTICS_SETUP.md** - Google Analytics and Clarity setup
+- **old_md/** - Archived planning documents and old README
+
+---
+
+## 🔍 Technical Details
+
+### Multiple Sessions Implementation
+
+Shell Mirror supports multiple persistent terminal sessions per user:
+
+- **SessionManager class** in `mac-agent/agent.js` (line 158)
+- **Dashboard UI** for creating/managing sessions
+- **Session persistence** across browser disconnects
+- **Resource limits**: Max 10 sessions per agent
+- **Auto-cleanup**: Sessions idle > 24 hours are terminated
+
+### WebRTC Connection
+
+- **Signaling**: Via Heroku WebSocket server
+- **Data Channel**: For terminal I/O (fast, low latency)
+- **ICE/STUN/TURN**: Automatic NAT traversal
+- **Fallback**: HTTP polling if WebRTC fails
+
+### Security
+
+- **Authentication**: Google OAuth 2.0
+- **Authorization**: Session-based access control
+- **Encryption**: WSS (WebSocket Secure) + HTTPS
+- **No credentials stored**: Secure token-based auth
+
+---
+
+## 🌐 Production URLs
+
+- **Website**: https://shellmirror.app
+- **WebSocket Server**: https://shell-mirror-30aa5479ceaf.herokuapp.com
+- **NPM Package**: https://www.npmjs.com/package/shell-mirror
+- **Debug Dashboard**: https://shellmirror.app/debug.html
+
+---
+
+## 📦 NPM Package
+
+**Current Version**: 1.5.74
+
+```bash
+# Install
+npm install -g shell-mirror
+
+# Usage
+shell-mirror --help
+```
+
+Package includes:
+- Mac agent with WebRTC support
+- Interactive setup wizard
+- Auto-start configuration
+- CLI for agent management
+
+---
+
+## 🐛 Troubleshooting
+
+### Agent Not Connecting
+
+```bash
+# Check agent status
+shell-mirror status
+
+# View logs
+tail -f ~/.shell-mirror/agent.log
+
+# Restart agent
+shell-mirror restart
+```
+
+### WebSocket Server Issues
+
+```bash
+# Check server health
+curl https://shell-mirror-30aa5479ceaf.herokuapp.com/health
+
+# View Heroku logs
+heroku logs --tail -a shell-mirror
+```
+
+### Browser Connection Issues
+
+- **Debug interface**: https://shellmirror.app/debug-connection.html
+- **Check browser console**: F12 → Console tab
+- **Verify authentication**: https://shellmirror.app/api/auth/status
+
+For detailed troubleshooting, see `OPERATIONS.md`.
+
+---
+
+## 🤝 Contributing
+
+This is currently a personal project. For bug reports or feature requests, please check the GitHub issues.
+
+---
+
+## 📄 License
+
+MIT
+
+---
 
-1. Install dependencies: `npm install`
-2. Configure environment: `cp .env.example .env` and edit with your Google OAuth credentials
-3. Start the server: `npm start` or `pm2 start server.js --name terminal-mirror`
-4. Set up reverse proxy (nginx) if needed for HTTPS
+## 🎯 Use Cases
 
-**Security Notes:**
-- Ensure `.env` file has proper permissions (600)
-- Use a strong `SESSION_SECRET` (generate with: `openssl rand -hex 32`)
-- Keep Google OAuth credentials secure
-- Set up proper firewall rules
+- **Mobile Coding**: Use Claude Code CLI or Gemini CLI from your phone
+- **Remote Access**: Access your development environment from anywhere
+- **Pair Programming**: Share terminal sessions with collaborators
+- **Quick Fixes**: Make quick changes on the go without VPN/SSH setup
+- **Multi-Device Workflow**: Seamlessly switch between devices
 
 ---
 
-## 🛠️ Development Roadmap
-
-### Current Status ✅
-The application now has a solid foundation with:
-- Google OAuth 2.0 authentication implemented
-- Environment-based configuration for production/development
-- Basic shell mirroring via WebSocket
-- Secure session management
-
-### Phase 5: WebRTC Terminal Mirroring (Current) 🚀
-**Priority: Critical - Active Development**
-
-**Current Status:** ✅ **BREAKTHROUGH ACHIEVED** - Complete WebRTC terminal mirroring working! ICE candidates generating/exchanging, data channel established, terminal spawning with PID, and resizing functional. **Next:** Terminal I/O testing and production readiness.
-
-#### Immediate Priority (✅ COMPLETED)
-- [x] **Debug ICE Candidate Exchange**
-  - ✅ Added comprehensive logging for ICE candidate generation and exchange
-  - ✅ Both client and agent properly send/receive ICE candidates
-  - ✅ ICE connection state progresses: new → gathering → checking → connected → completed
-
-- [x] **Fix Data Channel Establishment**  
-  - ✅ Fixed data channel creation sequence (agent creates, client receives)
-  - ✅ Data channel event handlers properly set up and working
-  - ✅ Complete connection state logging implemented
-
-- [x] **Complete Terminal Integration**
-  - ✅ Terminal spawns successfully when data channel opens (PID: confirmed)
-  - ✅ Bidirectional terminal I/O: WebRTC data channel established
-  - ✅ Terminal resizing functionality verified (152x24 resize logged)
-
-#### Next Phase: Terminal I/O & Functionality (Current Priority)
-- [ ] **Test Complete Terminal I/O**
-  - ✅ Data channel established - verify command input/output works
-  - Test typing commands and receiving terminal output
-  - Verify terminal colors, escape sequences, and formatting
-  - Test command history, tab completion, and terminal features
-
-- [ ] **Optimize Terminal Performance**
-  - Test terminal output streaming performance
-  - Verify efficient terminal resizing (confirmed working: 152x24)
-  - Add connection quality monitoring and latency measurement
-
-- [ ] **Handle Terminal Edge Cases**
-  - Test long-running commands and large output
-  - Verify proper handling of terminal interrupt (Ctrl+C)
-  - Test terminal state persistence and recovery
-
-#### Production Readiness
-- [ ] **Authentication & Security Integration**
-  - Verify Google OAuth integration works with WebRTC connections
-  - Test production build script (strips local testing code)
-  - Validate security measures and user session management
-
-- [ ] **Deployment & End-to-End Testing**
-  - Deploy to production environment
-  - Test from multiple devices (desktop, mobile)
-  - Validate complete functionality across network conditions
-
-**Success Criteria:** User connects via browser → discovers Mac agent → establishes WebRTC connection → sees live terminal → types commands → receives output → resizes terminal → maintains persistent session.
-
-**Architecture Notes:**
-- Uses WebRTC for peer-to-peer terminal mirroring (eliminates WebSocket polling)
-- Node.js signaling server for WebRTC negotiation
-- Mac agent with node-pty for terminal spawning
-- Browser client with xterm.js for terminal emulation
-
-### Next Development Phases
-
-#### Phase 1: Core Functionality Enhancement
-**Priority: High**
-- [ ] **WebSocket Authentication**: Secure WebSocket connections by validating user sessions
-- [ ] **Shell Session Management**: Implement proper shell session isolation per user
-- [ ] **Connection Resilience**: Add automatic reconnection logic for dropped WebSocket connections
-- [ ] **Error Handling**: Improve error handling for authentication failures and connection issues
-
-#### Phase 2: User Experience Improvements
-**Priority: Medium**
-- [ ] **Frontend UI Enhancement**: 
-  - Modernize the terminal interface (consider using xterm.js for better terminal emulation)
-  - Add login/logout UI states
-  - Implement loading states and connection indicators
-- [ ] **Shell Features**:
-  - Shell resizing support
-  - Copy/paste functionality
-  - Shell themes and customization
-- [ ] **Mobile Optimization**: Ensure the interface works well on mobile devices
-
-#### Phase 3: Security & Production Readiness
-**Priority: High for Production**
-- [ ] **Rate Limiting**: Add rate limiting for authentication and WebSocket connections
-- [ ] **Logging & Monitoring**: Implement structured logging and health check endpoints
-- [ ] **Session Security**: Add session timeout and secure session storage
-- [ ] **HTTPS/WSS**: Ensure all connections use secure protocols in production
-- [ ] **Environment Isolation**: Add development/staging/production environment configurations
-
-#### Phase 4: Advanced Features
-**Priority: Low (Future Enhancements)**
-- [ ] **Multi-Shell Support**: Allow multiple shell sessions per user
-- [ ] **File Upload/Download**: Add secure file transfer capabilities
-- [ ] **Shell Recording**: Save and replay shell sessions
-- [ ] **Collaboration Features**: Allow shared shell sessions (with proper security)
-- [ ] **Resource Monitoring**: Display system resource usage in the interface
-
-### Development Guidelines
-
-#### Code Structure
-- Keep `server.js` focused on server setup and routing
-- Use `auth.js` for all authentication logic
-- Create separate modules for shell management and WebSocket handling
-- Follow Node.js best practices for async/await and error handling
-
-#### Testing Strategy
-- Add unit tests for authentication logic
-- Implement integration tests for WebSocket functionality
-- Test OAuth flow in both development and production environments
-- Add automated security testing
-
-#### Deployment Considerations
-- Use PM2 or similar process manager for production
-- Implement proper logging with log rotation
-- Set up SSL/TLS certificates for HTTPS
-- Configure reverse proxy (nginx) if needed
-- Monitor application health and performance
-
-### Contributing
-When working on this project:
-1. Create feature branches for each development phase
-2. Test thoroughly in local environment before production
-3. Update this roadmap as features are completed
-4. Document any new environment variables in `.env.example`
-5. Keep security as the top priority for all changes
+*Last Updated: 2025-01-26*
+*Version: 1.5.74*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shell-mirror",
-  "version": "1.5.73",
+  "version": "1.5.75",
   "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/debug-connection.html

@@ -191,7 +191,11 @@
             showSolution(`
                 <strong>No Mac Agents:</strong><br>
                 No Mac agents are registered for your account.<br><br>
-                <strong>Solution:</strong> On your Mac, run: <code>npm install -g shell-mirror && shell-mirror</code>
+                <strong>Solution:</strong> On your Mac, run:<br><br>
+                <div style="background: #f8f9fa; border: 1px solid #e1e4e8; border-radius: 8px; padding: 12px 14px; display: inline-flex; align-items: center; gap: 12px; max-width: 100%;">
+                    <code style="font-family: 'Monaco', 'Menlo', 'Courier New', monospace; font-size: 0.9rem; color: #1a1a1a;">npm install -g shell-mirror && shell-mirror</code>
+                    <button onclick="copyToClipboard('npm install -g shell-mirror && shell-mirror', this)" style="background: #667eea; color: white; border: none; border-radius: 6px; padding: 6px 12px; font-size: 0.85rem; cursor: pointer; transition: all 0.2s ease; white-space: nowrap;">Copy</button>
+                </div>
             `);
         }
 
@@ -204,6 +208,22 @@
             document.getElementById('solution').style.display = 'none';
         }
 
+        function copyToClipboard(text, button) {
+            navigator.clipboard.writeText(text).then(() => {
+                const originalText = button.textContent;
+                button.textContent = 'Copied!';
+                setTimeout(() => {
+                    button.textContent = originalText;
+                }, 2000);
+            }).catch(err => {
+                console.error('Failed to copy:', err);
+                button.textContent = 'Failed';
+                setTimeout(() => {
+                    button.textContent = 'Copy';
+                }, 2000);
+            });
+        }
+
         function loginWithGoogle() {
             window.location.href = '/php-backend/api/auth-login.php';
         }

package/public/index.html

@@ -872,9 +872,24 @@
             // Update main CTA buttons
             const primaryButtons = document.querySelectorAll('.btn-primary');
             primaryButtons.forEach(button => {
-                button.textContent = 'Open Dashboard';
-                button.onclick = openDashboard;
+                if (authStatus.isAuthenticated) {
+                    button.textContent = 'Open Dashboard';
+                    button.onclick = openDashboard;
+                }
             });
+
+            // Update the Google login button in step 3 for authenticated users
+            const googleButton = document.querySelector('.btn-google');
+            if (googleButton && authStatus.isAuthenticated) {
+                googleButton.innerHTML = '📊 Enter Dashboard';
+                googleButton.onclick = (e) => {
+                    e.preventDefault();
+                    openDashboard();
+                };
+                googleButton.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
+                googleButton.style.color = 'white';
+                googleButton.style.border = 'none';
+            }
         }
 
         // Smooth scrolling for anchor links