aigo 1.0.1 → 1.1.0

package/Makefile

@@ -0,0 +1,4 @@
+.PHONY: publish-minor
+publish-minor:
+	npm version minor
+	npm publish

package/README.md

@@ -29,7 +29,8 @@ aigo --tunnel none claude
 - **tmux** installed and in PATH
 - **Claude Code CLI** installed (`claude` command) - for Claude Code support
 - **Cursor Agent CLI** installed (`agent` command) - for Cursor support
-- **ngrok** (required for default remote access) - sign up at [ngrok.com](https://ngrok.com)
+- **ngrok** (default for remote access) - sign up at [ngrok.com](https://ngrok.com)
+- **cloudflared** (alternative to ngrok) - free, no signup required
 
 ### Installing tmux
 
@@ -56,6 +57,23 @@ brew install ngrok
 ngrok config add-authtoken YOUR_TOKEN
 ```
 
+### Installing cloudflared
+
+cloudflared is a free alternative to ngrok that doesn't require signup:
+
+```bash
+# macOS
+brew install cloudflared
+
+# Ubuntu/Debian
+curl -L https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.deb -o cloudflared.deb
+sudo dpkg -i cloudflared.deb
+
+# Or download from https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/downloads/
+```
+
+No authentication required for quick tunnels (trycloudflare.com).
+
 ### Installing Cursor Agent CLI
 
 ```bash
@@ -144,13 +162,38 @@ export const config = {
 };
 ```
 
+## Tunnel Options
+
+aigo supports two tunnel providers for remote access:
+
+| Feature | ngrok | cloudflared |
+|---------|-------|-------------|
+| Signup required | Yes | No |
+| Free tier limits | 1 tunnel, rate limits | Unlimited quick tunnels |
+| Custom domains | Paid plans | Requires Cloudflare account |
+| URL format | `*.ngrok-free.app` | `*.trycloudflare.com` |
+| Authentication | Required (authtoken) | Not required |
+
+**Recommendation:** Use cloudflared for quick testing (no signup needed). Use ngrok if you need stable URLs or have an existing account.
+
+```bash
+# Use cloudflared (no signup required)
+aigo --tunnel cloudflared claude
+
+# Use ngrok (default, requires signup)
+aigo claude
+
+# Local only (no tunnel)
+aigo --tunnel none claude
+```
+
 ## How It Works
 
 1. **aigo** creates a tmux session and runs `claude` or `agent` inside it
 2. A local web server starts, serving an xterm.js terminal
 3. The server attaches to the tmux session via node-pty
 4. Your browser connects via WebSocket for real-time terminal streaming
-5. ngrok creates a public HTTPS tunnel for remote access (default)
+5. A tunnel (ngrok or cloudflared) creates a public HTTPS URL for remote access
 
 ```
 ┌────────────────────────────────────────┐
@@ -194,10 +237,10 @@ aigo uses multiple layers of security:
 - Password uses unambiguous characters (no 0/O, 1/l/I)
 - Lock screen requires re-entering password after inactivity (when enabled)
 - Session auto-terminates and kills tmux after extended inactivity (when enabled)
-- HTTPS via ngrok (encrypted in transit)
+- HTTPS via tunnel (encrypted in transit)
 
 **Recommendations:**
-- Use HTTPS (ngrok provides this automatically)
+- Use HTTPS (both ngrok and cloudflared provide this automatically)
 - Don't share your access URL or password publicly
 - Use strong custom passwords for sensitive sessions
 - Enable timeouts (`-T 15 -E 30`) for shared or sensitive environments
@@ -231,6 +274,7 @@ When accessing aigo from a mobile device (phone or tablet), control buttons appe
 
 | Button | Action | Description |
 |--------|--------|-------------|
+| **History** | View Buffer | Opens a fullscreen modal showing the terminal scrollback buffer (useful when TUI scrolling doesn't work on mobile) |
 | **Mode** | `Shift+Tab` | Toggle between chat/edit modes in Claude Code or switch modes in Cursor Agent |
 | **Enter** | `Enter` | Send Enter key to confirm prompts or submit input |
 | **Stop** | `Ctrl+C` | Interrupt the current operation (stop running commands or cancel AI responses) |
@@ -238,6 +282,17 @@ When accessing aigo from a mobile device (phone or tablet), control buttons appe
 
 These buttons are useful because mobile keyboards don't easily support modifier key combinations like Ctrl+C or Shift+Tab.
 
+### History Button
+
+The **History** button is particularly useful on mobile devices where terminal scrolling often doesn't work properly with TUI applications like Claude Code or Cursor Agent. When pressed:
+
+1. Opens a fullscreen modal overlay
+2. Captures the entire terminal scrollback buffer from tmux
+3. Displays the content in a scrollable view with ANSI codes stripped for readability
+4. Press **Close** or the **ESC** key to return to the terminal
+
+This provides an alternative way to review previous AI responses and conversation history without relying on terminal scrolling.
+
 The buttons are automatically shown based on:
 - Touch screen capability
 - Mobile user agent detection
@@ -259,7 +314,7 @@ tmux attach -t aigo-server
 pm2 start "aigo claude" --name aigo-session
 ```
 
-When the aigo server stays running, your ngrok URL remains stable and you can return to the same URL anytime.
+When the aigo server stays running, your tunnel URL remains stable and you can return to the same URL anytime. Note: cloudflared quick tunnel URLs change on restart, while ngrok URLs persist within a session.
 
 ## Auto Port Selection
 
@@ -427,6 +482,21 @@ kill <pid>
 pkill -f "ngrok http"
 ```
 
+### cloudflared connection issues
+
+If cloudflared fails to connect:
+
+```bash
+# Check if cloudflared is installed
+which cloudflared
+
+# Test a quick tunnel manually
+cloudflared tunnel --url http://localhost:3000
+
+# Check for firewall issues (verbose output)
+cloudflared tunnel --url http://localhost:3000 --loglevel debug
+```
+
 ### WebSocket connection fails
 
 - Check that the server is running
@@ -448,6 +518,16 @@ node bin/aigo.js cursor
 npx nodemon bin/aigo.js claude
 ```
 
+### Publishing
+
+Bump the minor version and publish to npm:
+
+```bash
+make publish-minor
+```
+
+This runs `npm version minor` (updates `package.json` and creates a git commit/tag) then `npm publish`.
+
 ## License
 
 MIT

package/lib/server.js

@@ -3,6 +3,7 @@ import { createServer } from 'http';
 import { WebSocketServer } from 'ws';
 import path from 'path';
 import { fileURLToPath } from 'url';
+import { execSync } from 'child_process';
 import pty from 'node-pty';
 import { getTmuxPath, killSession } from './tmux.js';
 
@@ -234,6 +235,31 @@ export function startServer({ port, token, password, session, lockTimeout, exitT
             }, 500);
             return;
           }
+          
+          // Handle history capture request
+          if (parsed.type === 'capture_history') {
+            updateActivity();
+            try {
+              const tmuxBin = getTmuxPath() || 'tmux';
+              // Capture entire scrollback buffer from tmux session
+              // -p: print to stdout, -S -: start from beginning, -E -: end at bottom
+              const historyData = execSync(
+                `${tmuxBin} capture-pane -t "${session}:0" -p -S - -E -`,
+                { encoding: 'utf-8', maxBuffer: 10 * 1024 * 1024 } // 10MB max
+              );
+              ws.send(JSON.stringify({ 
+                type: 'history_data', 
+                data: historyData 
+              }));
+            } catch (err) {
+              console.error('Failed to capture history:', err.message);
+              ws.send(JSON.stringify({ 
+                type: 'history_error', 
+                error: 'Failed to capture terminal history' 
+              }));
+            }
+            return;
+          }
         } catch {
           // Not JSON - treat as terminal input
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aigo",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Stream Claude Code to the web - run Claude remotely from any device",
   "type": "module",
   "bin": {

package/public/index.html

@@ -478,6 +478,120 @@
       background: #ff5555;
       color: white;
     }
+    
+    /* History button */
+    #mobile-history-btn {
+      color: #00ffff;
+      border-color: #00ffff;
+    }
+    
+    #mobile-history-btn:hover,
+    #mobile-history-btn:active {
+      background: #00ffff;
+      color: var(--bg-primary);
+    }
+    
+    /* History modal overlay */
+    #history-overlay {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: var(--bg-primary);
+      z-index: 300;
+      flex-direction: column;
+    }
+    
+    #history-overlay.visible {
+      display: flex;
+    }
+    
+    .history-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 16px;
+      background: var(--bg-secondary);
+      border-bottom: 1px solid var(--border);
+      flex-shrink: 0;
+    }
+    
+    .history-title {
+      color: #00ffff;
+      font-size: 16px;
+      font-weight: 600;
+    }
+    
+    .history-close-btn {
+      padding: 8px 16px;
+      background: transparent;
+      color: var(--text-secondary);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      font-family: inherit;
+      font-size: 13px;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    
+    .history-close-btn:hover {
+      color: var(--text-primary);
+      border-color: var(--text-primary);
+    }
+    
+    .history-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+      -webkit-overflow-scrolling: touch;
+    }
+    
+    .history-text {
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
+      font-size: 13px;
+      line-height: 1.5;
+      color: var(--text-primary);
+    }
+    
+    .history-loading {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+      color: var(--text-secondary);
+    }
+    
+    .history-loading .spinner {
+      width: 24px;
+      height: 24px;
+      border: 2px solid var(--border);
+      border-top-color: #00ffff;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin-right: 12px;
+    }
+    
+    /* Custom scrollbar for history */
+    .history-content::-webkit-scrollbar {
+      width: 8px;
+    }
+    
+    .history-content::-webkit-scrollbar-track {
+      background: var(--bg-primary);
+    }
+    
+    .history-content::-webkit-scrollbar-thumb {
+      background: var(--border);
+      border-radius: 4px;
+    }
+    
+    .history-content::-webkit-scrollbar-thumb:hover {
+      background: #2a2a35;
+    }
   </style>
 </head>
 <body>
@@ -528,11 +642,27 @@
     
     <!-- Mobile control buttons -->
     <div id="mobile-controls">
+      <button id="mobile-history-btn" class="mobile-btn" title="View terminal history">History</button>
       <button id="mobile-mode-toggle" class="mobile-btn" title="Switch mode (Shift+Tab)">Mode</button>
       <button id="mobile-enter-btn" class="mobile-btn" title="Send Enter key">Enter</button>
       <button id="mobile-stop-btn" class="mobile-btn" title="Stop (Ctrl+C)">Stop</button>
       <button id="mobile-exit-btn" class="mobile-btn" title="Exit session">Exit</button>
     </div>
+    
+    <!-- History modal overlay -->
+    <div id="history-overlay">
+      <div class="history-header">
+        <div class="history-title">Terminal History</div>
+        <button id="history-close-btn" class="history-close-btn">Close</button>
+      </div>
+      <div class="history-content">
+        <div class="history-loading">
+          <div class="spinner"></div>
+          <span>Loading history...</span>
+        </div>
+        <pre class="history-text" style="display: none;"></pre>
+      </div>
+    </div>
   </div>
   
   <!-- xterm.js scripts from CDN (non-scoped package names for UMD globals) -->

package/public/terminal.js

@@ -52,6 +52,12 @@
     const mobileEnterBtn = document.getElementById('mobile-enter-btn');
     const mobileStopBtn = document.getElementById('mobile-stop-btn');
     const mobileExitBtn = document.getElementById('mobile-exit-btn');
+    const mobileHistoryBtn = document.getElementById('mobile-history-btn');
+    const historyOverlay = document.getElementById('history-overlay');
+    const historyCloseBtn = document.getElementById('history-close-btn');
+    const historyContent = historyOverlay.querySelector('.history-content');
+    const historyLoading = historyOverlay.querySelector('.history-loading');
+    const historyText = historyOverlay.querySelector('.history-text');
     
     // Terminal setup
     const terminal = new Terminal({
@@ -453,10 +459,70 @@
       }
     });
     
-    // ESC to close exit confirm
+    // Strip ANSI escape codes from text for clean display
+    function stripAnsiCodes(text) {
+      // Remove ANSI escape sequences (colors, cursor movement, etc.)
+      return text.replace(/\x1b\[[0-9;]*[a-zA-Z]/g, '')
+                 .replace(/\x1b\][^\x07]*\x07/g, '')  // OSC sequences
+                 .replace(/\x1b[PX^_].*?\x1b\\/g, '') // DCS, SOS, PM, APC sequences
+                 .replace(/\x1b./g, '');              // Other escape sequences
+    }
+    
+    // Show history modal
+    function showHistoryModal() {
+      historyOverlay.classList.add('visible');
+      historyLoading.style.display = 'flex';
+      historyText.style.display = 'none';
+      historyText.textContent = '';
+      
+      // Request history from server
+      if (ws && ws.readyState === WebSocket.OPEN && authenticated) {
+        ws.send(JSON.stringify({ type: 'capture_history' }));
+      }
+    }
+    
+    // Hide history modal
+    function hideHistoryModal() {
+      historyOverlay.classList.remove('visible');
+      terminal.focus();
+    }
+    
+    // Display history data in the modal
+    function displayHistoryData(data) {
+      historyLoading.style.display = 'none';
+      historyText.style.display = 'block';
+      // Strip ANSI codes for clean, readable text
+      historyText.textContent = stripAnsiCodes(data);
+      // Scroll to bottom to show most recent content
+      historyContent.scrollTop = historyContent.scrollHeight;
+    }
+    
+    // Display history error
+    function displayHistoryError(error) {
+      historyLoading.style.display = 'none';
+      historyText.style.display = 'block';
+      historyText.textContent = `Error: ${error}`;
+    }
+    
+    // Mobile history button handler
+    mobileHistoryBtn.addEventListener('click', () => {
+      if (ws && ws.readyState === WebSocket.OPEN && authenticated && !isLocked) {
+        mobileButtonFeedback(mobileHistoryBtn);
+        showHistoryModal();
+      }
+    });
+    
+    // History close button handler
+    historyCloseBtn.addEventListener('click', hideHistoryModal);
+    
+    // ESC to close exit confirm or history
     document.addEventListener('keydown', (e) => {
-      if (e.key === 'Escape' && exitOverlay.classList.contains('visible')) {
-        hideExitConfirm();
+      if (e.key === 'Escape') {
+        if (historyOverlay.classList.contains('visible')) {
+          hideHistoryModal();
+        } else if (exitOverlay.classList.contains('visible')) {
+          hideExitConfirm();
+        }
       }
     });
     
@@ -606,6 +672,16 @@
               showCleanupComplete();
               return;
             }
+            
+            if (msg.type === 'history_data') {
+              displayHistoryData(msg.data);
+              return;
+            }
+            
+            if (msg.type === 'history_error') {
+              displayHistoryError(msg.error);
+              return;
+            }
           } catch {
             // Not JSON, treat as terminal data
           }

package/specs/history-view-button.md

@@ -0,0 +1,64 @@
+# History View Button for Mobile
+
+## Problem
+Terminal scrolling doesn't work well on mobile devices with TUI applications like Claude Code and Cursor Agent, making it difficult to view previous messages.
+
+## Solution
+Add a "History" button that opens a modal overlay displaying the terminal scrollback buffer captured directly from tmux using `tmux capture-pane`.
+
+## Architecture
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Frontend as WebClient
+    participant Server as Node Server
+    participant Tmux
+
+    User->>Frontend: Clicks History button
+    Frontend->>Server: WebSocket message type: "capture_history"
+    Server->>Tmux: capture-pane -t session:0 -p -S - -E -
+    Tmux-->>Server: Scrollback buffer text
+    Server-->>Frontend: WebSocket message type: "history_data"
+    Frontend->>User: Shows modal with scrollable history
+```
+
+## Implementation
+
+### 1. Backend - Add history capture endpoint ([lib/server.js](lib/server.js))
+
+Add a new WebSocket message handler for `capture_history` that runs:
+```bash
+tmux capture-pane -t <session>:0 -p -S - -E -
+```
+
+This captures the entire scrollback buffer (tested and confirmed working - returns all terminal output including Claude/Cursor responses).
+
+### 2. Frontend - Add History button ([public/index.html](public/index.html))
+
+Add a new mobile button styled like the existing controls:
+- Button label: "History"
+- Color: Use a distinct color (cyan `#00ffff`)
+- Position: Add to the existing mobile controls row
+
+### 3. Frontend - Add modal overlay ([public/index.html](public/index.html))
+
+Create a fullscreen modal that:
+- Has a dark background matching the terminal theme
+- Contains a scrollable text area with monospace font
+- Has a "Close" button at the top
+- Strips ANSI escape codes for clean display
+
+### 4. Frontend - Handle history messages ([public/terminal.js](public/terminal.js))
+
+- Send `capture_history` request when History button is clicked
+- Receive `history_data` response and display in modal
+- Strip ANSI escape codes for readable plain text display
+
+## Key Files Modified
+- [lib/server.js](lib/server.js) - Add tmux capture-pane handler
+- [public/index.html](public/index.html) - Add History button and modal HTML/CSS
+- [public/terminal.js](public/terminal.js) - Add click handler and modal logic
+- [README.md](README.md) - Document the new History feature
+
+## Status: Completed