feat: implement text selection for terminal (#14)

* feat: implement text selection for terminal

- Add SelectionManager class for mouse-based text selection
  * Click and drag to select text
  * Double-click to select word
  * Auto-copy to clipboard on selection
  * Visual selection overlay with semi-transparent highlight

- Integrate SelectionManager into Terminal class
  * Add getSelection(), hasSelection(), clearSelection(), selectAll() API
  * Add onSelectionChange event
  * Auto-clear selection when writing new data

- Update CanvasRenderer to draw selection overlay
  * Add setSelectionManager() and getCanvas() methods
  * Render semi-transparent selection highlight
Testing: Selection should now be semi-transparent blue overlay

* fix: selection clearing and clipboard feedback

Issues Fixed:
1. Selection highlight persists after clicking elsewhere
   - Now tracks previousSelection coordinates
   - Renderer redraws those lines to clear old overlay
   - Selection clears immediately on mousedown

2. No feedback for clipboard operations
   - Added console.log for successful copy
   - Added error messages with helpful hints
   - Shows if Clipboard API is unavailable

3. Improved mousedown behavior
   - Always clears selection on new click
   - Starts fresh selection from click point

Changes:
- Track previousSelection in SelectionManager
- Add getPreviousSelectionCoords() and clearPreviousSelection() methods
- Renderer checks previousSelection and redraws those lines
- Enhanced copyToClipboard() with success/error logging
- Simplified mousedown handler

Testing: Selection should now clear when clicking elsewhere

* fix: add clipboard fallback for non-secure contexts

Issue: Clipboard API requires HTTPS or specifically 'localhost' hostname.
Custom domains like 'mux.coder' are not considered secure contexts even
when they resolve to localhost.

Solution:
- Try modern navigator.clipboard API first (works on HTTPS/localhost)
- Fall back to document.execCommand('copy') for non-secure contexts
- execCommand works on custom domains and older browsers
- Provide clear console feedback about which method was used

This uses the "textarea trick":
1. Create hidden textarea with selected text
2. Select its content
3. Call document.execCommand('copy')
4. Remove textarea

Result: Copy works on mux.coder and similar custom domains.

Testing: Should now see '✅ Copied to clipboard (fallback)' message
and be able to paste the selected text.

* fix: restore keyboard input by focusing container on mousedown

CRITICAL BUG: Keyboard input stopped working after adding selection.

Root Cause:
- InputHandler attaches to container element (has tabindex, receives keys)
- SelectionManager adds mousedown listener to canvas element
- Clicks on canvas don't propagate focus to container
- Container loses focus → no keyboard events → no typing

Solution:
- On mousedown, explicitly focus the parent container
- This ensures keyboard events continue to work
- Selection still works as expected

Testing:
- Click on terminal → should be able to type
- Select text → should still be able to type afterward
- Focus is maintained on the container at all times

* fix: restore focus after clipboard copy and optimize selection rendering

Issue 1 - Can't type after copy:
- copyToClipboardFallback creates textarea and calls textarea.focus()
- This steals focus from terminal container
- User can't type because container doesn't have focus anymore

Fix:
- Save document.activeElement before copy
- Restore focus after copy completes
- Works even if copy fails (try/catch)

Issue 2 - Slow input:
- Selection lines were being redrawn EVERY frame (60fps)
- Even when selection was static and not changing
- Caused noticeable input lag

Fix:
- Only redraw selection lines when actively selecting (mouse is down)
- Or when clearing previous selection
- When typing, terminal.write() clears selection anyway
- This prevents unnecessary redraws during normal typing

Performance:
- Before: 24 lines redrawn every frame with selectAll()
- After: 0 lines redrawn when selection is static
- Result: Input is fast again!

Testing: Input should be responsive, paste should work repeatedly

* Fix: Selection continues after mouse release outside canvas

Problem: When dragging to select text and releasing mouse outside canvas
bounds, the selection would continue on mousemove because the canvas
mouseup event never fired.

Solution: Move mouseup listener from canvas to document to catch releases
anywhere on the page. This is the standard pattern for drag operations.

Changes:
- Move mouseup event listener to document scope
- Add mouseleave handler for better debugging
- Add console.log statements to track isSelecting state
- Store boundMouseUpHandler for proper cleanup in dispose()
- Update AGENTS.md to avoid committing summary markdown files

Test: Drag selection and release mouse outside terminal bounds - selection
should stop properly instead of continuing on hover.

* chore: remove temporary test and doc files

Remove agent-generated files that shouldn't be tracked:
- DEBUG_SELECTION.md
- IMPLEMENTATION_SUMMARY.md
- SELECTION_TESTING.md
- test-selection.html
- test-selection-alpha.html

These were used for debugging during development.

Author: sreya

AGENTS.md

@@ -529,6 +529,13 @@ bun test -t "test name pattern"
 
 **Best practices for agents:**
 
+0. **ALWAYS pull from main before starting work:**
+   ```bash
+   git fetch origin
+   git merge origin/main --no-edit
+   ```
+   This ensures you're working with the latest code and all features are available.
+
 1. **Always run tests after changes:**
    ```bash
    bun test lib/buffer.test.ts
@@ -553,3 +560,9 @@ bun test -t "test name pattern"
 5. **Iterate quickly:**
    - Vite has hot reload - save file, browser auto-updates
    - Keep console open to catch errors immediately
+
+6. **DO NOT commit summary markdown files:**
+   - Never commit `BUGFIX-*.md`, `SUMMARY-*.md`, or similar documentation files
+   - These are for immediate context only, not permanent documentation
+   - Add them to `.gitignore` if creating them frequently
+   - Commit messages should be comprehensive instead

demo/index.html

@@ -481,80 +481,14 @@ <h3>📚 Available Commands</h3>
     // =========================================================================
     // Text Selection Support
     // =========================================================================
-
-    function enableTextSelection() {
-      const canvas = term.element?.querySelector('canvas');
-      if (!canvas) {
-        console.warn('Canvas not found for selection');
-        return;
-      }
-
-      let isSelecting = false;
-      let selectionStart = null;
-
-      canvas.addEventListener('mousedown', (e) => {
-        // Only left click
-        if (e.button === 0) {
-          isSelecting = true;
-          selectionStart = { x: e.offsetX, y: e.offsetY };
-          
-          // Clear any existing selection
-          if (window.getSelection) {
-            window.getSelection().removeAllRanges();
-          }
-        }
-      });
-
-      canvas.addEventListener('mousemove', (e) => {
-        if (isSelecting) {
-          // Visual feedback that we're selecting
-          canvas.style.cursor = 'text';
-        }
-      });
-
-      canvas.addEventListener('mouseup', (e) => {
-        if (isSelecting) {
-          isSelecting = false;
-          canvas.style.cursor = 'default';
-          
-          // Get selected text from terminal buffer
-          const text = getSelectedText(selectionStart, { x: e.offsetX, y: e.offsetY });
-          if (text) {
-            copyToClipboard(text);
-            console.log('Selected text:', text);
-          }
-        }
-      });
-
-      // Also handle double-click to select word
-      canvas.addEventListener('dblclick', (e) => {
-        const text = getWordAtPosition(e.offsetX, e.offsetY);
-        if (text) {
-          copyToClipboard(text);
-          console.log('Selected word:', text);
-        }
-      });
-    }
-
-    function getSelectedText(start, end) {
-      // This is a simplified version - proper implementation would
-      // calculate character positions from pixel coordinates
-      // For now, we'll indicate selection is happening
-      return null; // Would need proper coordinate-to-cell conversion
-    }
-
-    function getWordAtPosition(x, y) {
-      // Simplified - would need proper implementation
-      return null;
-    }
-
-    function copyToClipboard(text) {
-      if (navigator.clipboard && text) {
-        navigator.clipboard.writeText(text)
-          .then(() => console.log('Copied to clipboard'))
-          .catch(err => console.error('Failed to copy:', err));
-      }
-    }
+    
+    // Text selection is now built-in to the Terminal library!
+    // Use term.getSelection() to access selected text programmatically.
+    // Features:
+    // - Click and drag to select text
+    // - Double-click to select a word
+    // - Auto-copy to clipboard on selection
+    // - Ctrl+C / Cmd+C to copy (via browser context menu)
 
     // =========================================================================
     // Initialization
@@ -624,8 +558,8 @@ <h3>📚 Available Commands</h3>
         // Handle input
         term.onData(handleInput);
 
-        // Enable text selection with mouse
-        enableTextSelection();
+        // Text selection is now built-in - no need to enable it!
+        // You can use term.getSelection(), term.selectAll(), etc.
 
         // Connect to WebSocket server
         connect();

lib/index.ts

@@ -37,6 +37,8 @@ export { CanvasRenderer } from './renderer';
 export type { RendererOptions, FontMetrics, IRenderable } from './renderer';
 export { InputHandler } from './input-handler';
 export { EventEmitter } from './event-emitter';
+export { SelectionManager } from './selection-manager';
+export type { SelectionCoordinates } from './selection-manager';
 
 // Addons
 export { FitAddon } from './addons/fit';

lib/renderer.ts

@@ -13,6 +13,7 @@
 import type { GhosttyCell } from './types';
 import { CellFlags } from './types';
 import type { ITheme } from './interfaces';
+import type { SelectionManager } from './selection-manager';
 
 // Interface for objects that can be rendered
 export interface IRenderable {
@@ -92,6 +93,9 @@ export class CanvasRenderer {
   private cursorBlinkInterval?: number;
   private lastCursorPosition: { x: number; y: number } = { x: 0, y: 0 };
 
+  // Selection manager (for rendering selection overlay)
+  private selectionManager?: SelectionManager;
+  
   constructor(canvas: HTMLCanvasElement, options: RendererOptions = {}) {
     this.canvas = canvas;
     const ctx = canvas.getContext('2d', { alpha: false });
@@ -253,19 +257,61 @@ export class CanvasRenderer {
       }
     }
 
+    // Check if we need to redraw selection-related lines
+    // Only force redraws when actively selecting or clearing selection
+    const hasSelection = this.selectionManager && this.selectionManager.hasSelection();
+    const isActivelySelecting = this.selectionManager && this.selectionManager.isActivelySelecting();
+    const selectionRows = new Set<number>();
+    
+    // Mark selection rows for redraw ONLY when actively selecting (mouse is down)
+    // This prevents slowdown when just typing with a static selection
+    if (hasSelection && isActivelySelecting) {
+      const coords = this.selectionManager!.getSelectionCoords();
+      if (coords) {
+        for (let row = coords.startRow; row <= coords.endRow; row++) {
+          selectionRows.add(row);
+        }
+      }
+    }
+    
+    // Always mark previous selection rows for redraw (to clear old overlay)
+    if (this.selectionManager) {
+      const prevCoords = this.selectionManager.getPreviousSelectionCoords();
+      if (prevCoords) {
+        for (let row = prevCoords.startRow; row <= prevCoords.endRow; row++) {
+          selectionRows.add(row);
+        }
+        // Clear the previous selection tracking after marking for redraw
+        this.selectionManager.clearPreviousSelection();
+      }
+    }
+    
+    // Track if anything was actually rendered
+    let anyLinesRendered = false;
+    
     // Render each line
     for (let y = 0; y < dims.rows; y++) {
-      // Only render dirty lines for performance (unless forcing all)
-      if (!forceAll && !buffer.isRowDirty(y)) {
+      // Render if forcing all, or if dirty, or if it has selection
+      const needsRender = forceAll || buffer.isRowDirty(y) || selectionRows.has(y);
+      
+      if (!needsRender) {
         continue;
       }
 
+      anyLinesRendered = true;
       const line = buffer.getLine(y);
       if (line) {
         this.renderLine(line, y, dims.cols);
       }
     }
 
+    // Render selection highlight AFTER all text (so it overlays)
+    // Only render if we actually rendered some lines
+    if (hasSelection && anyLinesRendered) {
+      // Draw selection overlay - only when we've redrawn the underlying text
+      this.renderSelection(dims.cols);
+    }
+    
     // Render cursor
     if (cursor.visible && this.cursorVisible) {
       this.renderCursor(cursor.x, cursor.y);
@@ -504,6 +550,20 @@ export class CanvasRenderer {
     return { ...this.metrics };
   }
 
+  /**
+   * Get canvas element (needed by SelectionManager)
+   */
+  public getCanvas(): HTMLCanvasElement {
+    return this.canvas;
+  }
+  
+  /**
+   * Set selection manager (for rendering selection overlay)
+   */
+  public setSelectionManager(manager: SelectionManager): void {
+    this.selectionManager = manager;
+  }
+  
   /**
    * Clear entire canvas
    */
@@ -512,6 +572,35 @@ export class CanvasRenderer {
     this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
   }
 
+  /**
+   * Render selection overlay
+   */
+  private renderSelection(cols: number): void {
+    const coords = this.selectionManager!.getSelectionCoords();
+    if (!coords) return;
+    
+    const { startCol, startRow, endCol, endRow } = coords;
+    
+    // Use semi-transparent fill for selection
+    this.ctx.save();
+    this.ctx.fillStyle = this.theme.selectionBackground;
+    this.ctx.globalAlpha = 0.5; // Make it semi-transparent so text is visible
+    
+    for (let row = startRow; row <= endRow; row++) {
+      const colStart = (row === startRow) ? startCol : 0;
+      const colEnd = (row === endRow) ? endCol : cols - 1;
+      
+      const x = colStart * this.metrics.width;
+      const y = row * this.metrics.height;
+      const width = (colEnd - colStart + 1) * this.metrics.width;
+      const height = this.metrics.height;
+      
+      this.ctx.fillRect(x, y, width, height);
+    }
+    
+    this.ctx.restore();
+  }
+  
   /**
    * Cleanup resources
    */

lib/selection-manager.test.ts

@@ -0,0 +1,34 @@
+import { describe, test, expect } from 'bun:test';
+import { SelectionManager } from './selection-manager';
+import { Terminal } from './terminal';
+
+describe('SelectionManager', () => {
+  describe('Construction', () => {
+    test('creates without errors', () => {
+      const term = new Terminal({ cols: 80, rows: 24 });
+      // Note: In real tests, you'd need to mock the renderer and wasmTerm
+      // For now, just verify the module can be imported
+      expect(SelectionManager).toBeDefined();
+    });
+  });
+
+  describe('API', () => {
+    test('has required public methods', () => {
+      expect(typeof SelectionManager.prototype.getSelection).toBe('function');
+      expect(typeof SelectionManager.prototype.hasSelection).toBe('function');
+      expect(typeof SelectionManager.prototype.clearSelection).toBe('function');
+      expect(typeof SelectionManager.prototype.selectAll).toBe('function');
+      expect(typeof SelectionManager.prototype.getSelectionCoords).toBe('function');
+      expect(typeof SelectionManager.prototype.dispose).toBe('function');
+    });
+  });
+
+  // Note: Full integration tests would require:
+  // 1. Creating a terminal with open()
+  // 2. Simulating mouse events on the canvas
+  // 3. Writing test data to the terminal
+  // 4. Verifying selected text extraction
+  // 
+  // These are better suited for browser-based integration tests
+  // since they require a real DOM canvas element.
+});