From 10540d515c84315837c90b500657a25124589004 Mon Sep 17 00:00:00 2001 From: lior Date: Sat, 25 Jul 2026 22:22:18 +0300 Subject: [PATCH 01/49] fix(input): stop adopting stale terminal text --- docs/local-echo-overlay-plan.md | 4 +- packages/xterm-zerolag-input/README.md | 6 +-- .../src/zerolag-input-addon.ts | 17 ------- .../test/zerolag-input-addon.test.ts | 46 ++++++++++--------- 4 files changed, 30 insertions(+), 43 deletions(-) diff --git a/docs/local-echo-overlay-plan.md b/docs/local-echo-overlay-plan.md index 8abc2c34..92971266 100644 --- a/docs/local-echo-overlay-plan.md +++ b/docs/local-echo-overlay-plan.md @@ -1,6 +1,8 @@ # Local Echo Overlay — Implementation Plan -> **Status: SHIPPED.** Implementation lives in `packages/xterm-zerolag-input/src/` (overlay-renderer.ts, prompt-finder.ts, cell-dimensions.ts, zerolag-input-addon.ts) with the embedded copy in `src/web/public/app.js`. This document is retained as historical design context. +> **Status: SHIPPED.** Source lives in `packages/xterm-zerolag-input/src/` and is bundled into the gitignored public vendor asset by the package/build scripts. This document is retained as historical design context. + +> **Current input rule:** ordinary typing and Backspace never infer editable text from the rendered terminal buffer. Consumers explicitly call `detectBufferText()` after Tab completion or `setFlushed()` when restoring known input. Full-screen TUIs can render status text after a prompt glyph, so implicit buffer adoption causes ghost deletion and stale text submission. ## Context diff --git a/packages/xterm-zerolag-input/README.md b/packages/xterm-zerolag-input/README.md index ee511c17..84d9ecc7 100644 --- a/packages/xterm-zerolag-input/README.md +++ b/packages/xterm-zerolag-input/README.md @@ -162,7 +162,7 @@ Implements xterm.js `ITerminalAddon`. The addon does **not** hook `terminal.onDa | Method | Returns | Description | |--------|---------|-------------| -| `addChar(char)` | `void` | Add a single printable character. Auto-detects existing buffer text on first keystroke. | +| `addChar(char)` | `void` | Add a single printable character. | | `appendText(text)` | `void` | Append multiple characters (paste). | | `removeChar()` | `'pending'` \| `'flushed'` \| `false` | Remove last char. See [backspace handling](#backspace-handling). | | `clear()` | `void` | Clear all state, hide overlay. Call on Enter/Ctrl+C/Escape. | @@ -177,7 +177,7 @@ Implements xterm.js `ITerminalAddon`. The addon does **not** hook `terminal.onDa | `'flushed'` | Text already sent to PTY | Send `\x7f` backspace to PTY | | `false` | Nothing to remove | Do nothing | -The cascade: pending text first, then flushed text, then auto-detect buffer text (handles tab completion). This means backspace "just works" through any combination of typed, flushed, and tab-completed text. +The cascade is pending text first, then explicitly tracked flushed text. The addon never infers editable input during ordinary typing or Backspace because full-screen terminal UIs can render status text after a prompt glyph. For Tab completion, call `detectBufferText()` after the completion response is rendered; for session restoration, call `setFlushed()`. ### Flushed Text @@ -195,7 +195,7 @@ Scan the terminal for text that exists after the prompt but wasn't typed through | Method | Description | |--------|-------------| -| `detectBufferText()` | Scan and return detected text (or `null`). Sets it as flushed. Guarded: runs once per `clear()` cycle. | +| `detectBufferText()` | Explicitly scan and return detected text (or `null`). Sets it as flushed. Guarded: runs once per `clear()` cycle. | | `resetBufferDetection()` | Re-enable detection. | | `suppressBufferDetection()` | Block detection until next `clear()`. Use for sessions with UI framework text after the prompt. | | `undoDetection()` | Undo last detection — clears flushed state, re-enables detection. For tab completion retry. | diff --git a/packages/xterm-zerolag-input/src/zerolag-input-addon.ts b/packages/xterm-zerolag-input/src/zerolag-input-addon.ts index 5e201ba4..7e7eb4f1 100644 --- a/packages/xterm-zerolag-input/src/zerolag-input-addon.ts +++ b/packages/xterm-zerolag-input/src/zerolag-input-addon.ts @@ -176,7 +176,6 @@ export class ZerolagInputAddon implements XtermAddon { * Call this when the user types a character (charCode >= 32, length === 1). */ addChar(char: string): void { - if (!this._pendingText && !this._flushedOffset) this._detectBufferText(); this._pendingText += char; this._render(); } @@ -186,7 +185,6 @@ export class ZerolagInputAddon implements XtermAddon { */ appendText(text: string): void { if (!text) return; - if (!this._pendingText && !this._flushedOffset) this._detectBufferText(); this._pendingText += text; this._render(); } @@ -197,7 +195,6 @@ export class ZerolagInputAddon implements XtermAddon { * Cascade order: * 1. Remove from `pendingText` if non-empty → returns `'pending'` * 2. Decrement `flushedOffset` if pending is empty but flushed exists → returns `'flushed'` - * 3. Try `detectBufferText()` if both are empty, then decrement → returns `'flushed'` * * @returns The source of the removed character, or `false` if nothing to remove. * @@ -229,20 +226,6 @@ export class ZerolagInputAddon implements XtermAddon { return 'flushed'; } - // Both empty — try detecting text already on the prompt line - // (handles tab completion, arrow-key edits, etc.) - this._detectBufferText(); - if (this._flushedOffset > 0) { - this._flushedOffset--; - this._flushedText = this._flushedText.slice(0, -1); - if (this._flushedOffset > 0) { - this._render(); - } else { - this._hide(); - } - return 'flushed'; - } - return false; } diff --git a/packages/xterm-zerolag-input/test/zerolag-input-addon.test.ts b/packages/xterm-zerolag-input/test/zerolag-input-addon.test.ts index 74063761..b4683d2f 100644 --- a/packages/xterm-zerolag-input/test/zerolag-input-addon.test.ts +++ b/packages/xterm-zerolag-input/test/zerolag-input-addon.test.ts @@ -122,14 +122,21 @@ describe('ZerolagInputAddon', () => { expect(addon.hasPending).toBe(false); }); - it('detects buffer text and removes from it when both empty', () => { + it('does not infer editable text from the terminal buffer', () => { const { addon } = tracked(['$ hello']); - // Both pending and flushed are empty, but buffer has text + const source = addon.removeChar(); - expect(source).toBe('flushed'); - // "hello" (5 chars) detected, then one removed = 4 - expect(addon.getFlushed().count).toBe(4); - expect(addon.getFlushed().text).toBe('hell'); + + expect(source).toBe(false); + expect(addon.getFlushed()).toEqual({ count: 0, text: '' }); + }); + + it('removes explicitly detected completion text as flushed input', () => { + const { addon } = tracked(['$ hello']); + expect(addon.detectBufferText()).toBe('hello'); + + expect(addon.removeChar()).toBe('flushed'); + expect(addon.getFlushed()).toEqual({ count: 4, text: 'hell' }); }); it('returns false on empty prompt with no buffer text', () => { @@ -295,22 +302,19 @@ describe('ZerolagInputAddon', () => { expect(addon.getFlushed().count).toBe(0); }); - it('suppressBufferDetection also blocks implicit detection in addChar', () => { + it('suppressBufferDetection keeps explicit detection disabled while typing', () => { const { addon } = tracked(['$ ink status bar']); addon.suppressBufferDetection(); - // addChar calls _detectBufferText internally on first keystroke addon.addChar('x'); - // Should have only 'x' pending, NOT the buffer text as flushed expect(addon.pendingText).toBe('x'); expect(addon.getFlushed().count).toBe(0); }); - it('suppressBufferDetection also blocks detection in removeChar cascade', () => { + it('suppressBufferDetection keeps explicit detection disabled before backspace', () => { const { addon } = tracked(['$ buffer text']); addon.suppressBufferDetection(); - // removeChar step 3 calls _detectBufferText — should be blocked expect(addon.removeChar()).toBe(false); expect(addon.getFlushed().count).toBe(0); }); @@ -705,23 +709,21 @@ describe('ZerolagInputAddon', () => { }); }); - describe('addChar implicit buffer detection', () => { - it('first keystroke detects existing buffer text as flushed', () => { + describe('typing with pre-existing buffer content', () => { + it('does not adopt existing buffer text on the first keystroke', () => { const { addon } = tracked(['$ existing']); - // First addChar should trigger _detectBufferText + addon.addChar('!'); expect(addon.pendingText).toBe('!'); - expect(addon.getFlushed().count).toBe(8); // 'existing' - expect(addon.getFlushed().text).toBe('existing'); + expect(addon.getFlushed()).toEqual({ count: 0, text: '' }); }); - it('second keystroke does NOT re-detect', () => { + it('does not adopt existing buffer text on appendText', () => { const { addon } = tracked(['$ existing']); - addon.addChar('a'); - addon.addChar('b'); - // Should NOT detect again — flushed from first char remains - expect(addon.pendingText).toBe('ab'); - expect(addon.getFlushed().count).toBe(8); // still 'existing' + + addon.appendText('pasted'); + expect(addon.pendingText).toBe('pasted'); + expect(addon.getFlushed()).toEqual({ count: 0, text: '' }); }); }); }); From dafad2b6cfc47c843314505a52dc87677b80dc9f Mon Sep 17 00:00:00 2001 From: lior Date: Sat, 25 Jul 2026 22:26:05 +0300 Subject: [PATCH 02/49] fix(terminal): drain deferred output without a wake event --- docs/terminal-anti-flicker.md | 80 ++++++++++++------------------ src/web/public/terminal-ui.js | 47 ++++++++---------- test/terminal-flush-budget.test.ts | 20 ++++++++ 3 files changed, 73 insertions(+), 74 deletions(-) diff --git a/docs/terminal-anti-flicker.md b/docs/terminal-anti-flicker.md index 82f45b1b..06b52fe3 100644 --- a/docs/terminal-anti-flicker.md +++ b/docs/terminal-anti-flicker.md @@ -8,24 +8,24 @@ Claude Code uses [Ink](https://github.com/vadimdemedes/ink) (React for terminals PTY Output → Server Batching → DEC 2026 Wrap → SSE → Client rAF → Sync Parser → xterm.js ``` -| Layer | Location | Technique | Latency | -|-------|----------|-----------|---------| -| **1. Server Batching** | `server.ts:batchTerminalData()` | Adaptive 16-50ms collection window | 16-50ms | -| **2. DEC Mode 2026** | `server.ts:flushTerminalBatches()` | Wraps with `\x1b[?2026h`...`\x1b[?2026l` | 0ms | -| **3. SSE Broadcast** | `server.ts:broadcast()` | JSON serialize once, send to all clients | 0ms | -| **4. Client rAF** | `app.js:batchTerminalWrite()` | `requestAnimationFrame` batching | 0-16ms | -| **5. Sync Block Parser** | `app.js:extractSyncSegments()` | Strips DEC 2026 markers, waits for complete blocks | 0-50ms | -| **6. Chunked Loading** | `app.js:chunkedTerminalWrite()` | 64KB/frame for large buffers | variable | +| Layer | Location | Technique | Latency | +| ------------------------ | ---------------------------------- | -------------------------------------------------- | -------- | +| **1. Server Batching** | `server.ts:batchTerminalData()` | Adaptive 16-50ms collection window | 16-50ms | +| **2. DEC Mode 2026** | `server.ts:flushTerminalBatches()` | Wraps with `\x1b[?2026h`...`\x1b[?2026l` | 0ms | +| **3. SSE Broadcast** | `server.ts:broadcast()` | JSON serialize once, send to all clients | 0ms | +| **4. Client rAF** | `app.js:batchTerminalWrite()` | `requestAnimationFrame` batching | 0-16ms | +| **5. Sync Block Parser** | `app.js:extractSyncSegments()` | Strips DEC 2026 markers, waits for complete blocks | 0-50ms | +| **6. Chunked Loading** | `app.js:chunkedTerminalWrite()` | 64KB/frame for large buffers | variable | ## Server-Side Implementation (`server.ts`) ### Constants ```typescript -const TERMINAL_BATCH_INTERVAL = 16; // Base: 60fps +const TERMINAL_BATCH_INTERVAL = 16; // Base: 60fps const BATCH_FLUSH_THRESHOLD = 32 * 1024; // Flush immediately if >32KB -const DEC_SYNC_START = '\x1b[?2026h'; // Begin synchronized update -const DEC_SYNC_END = '\x1b[?2026l'; // End synchronized update +const DEC_SYNC_START = '\x1b[?2026h'; // Begin synchronized update +const DEC_SYNC_END = '\x1b[?2026l'; // End synchronized update ``` ### Adaptive Batching (`batchTerminalData()`) @@ -43,38 +43,22 @@ const syncData = DEC_SYNC_START + data + DEC_SYNC_END; this.broadcast('session:terminal', { id: sessionId, data: syncData }); ``` -## Client-Side Implementation (`app.js`) +## Client-Side Implementation (`terminal-ui.js`) ### `batchTerminalWrite(data)` 1. Checks if flicker filter is enabled (optional, per-session) 2. If flicker filter active: buffers screen-clear patterns (`ESC[2J`, `ESC[H ESC[J`, `ESC[nA`) 3. Accumulates data in `pendingWrites` -4. Schedules `requestAnimationFrame` if not already scheduled -5. On rAF callback: checks for incomplete sync blocks (start without end) -6. If incomplete: waits up to 50ms via `syncWaitTimeout` -7. Calls `flushPendingWrites()` when complete - -### `extractSyncSegments(data)` - -- Parses DEC 2026 markers, returns array of content segments -- Content before sync blocks returned as-is -- Content inside sync blocks returned without markers -- Incomplete blocks (start without end) returned with marker for next chunk +4. Calls `_scheduleTerminalWriteFlush()` if no flush is pending +5. The yielded callback clears its scheduled flag before calling `flushPendingWrites()` +6. Large batches schedule their own next chunk until the queue is empty ### `flushPendingWrites()` -```javascript -const segments = extractSyncSegments(this.pendingWrites); -this.pendingWrites = ''; // Clear before writing -for (const segment of segments) { - if (segment && !segment.startsWith(DEC_SYNC_START)) { - terminal.write(segment); // Skip incomplete blocks (start with marker) - } -} -``` - -Note: Segments starting with `DEC_SYNC_START` are incomplete blocks awaiting more data. These are skipped (discarded if timeout forces flush). +- Joins the queued terminal data and passes DEC 2026 markers through to xterm.js 6, which handles synchronized output natively. +- Writes at most 32KB per yield for Codex and 64KB for other modes. +- Requeues the remainder and immediately schedules another safe yield. A final large response therefore drains without waiting for another SSE event. ### `chunkedTerminalWrite(buffer, chunkSize=128KB)` @@ -104,35 +88,33 @@ When detected, buffers 50ms of subsequent output before flushing atomically. ## Latency Analysis -| Source | Best Case | Worst Case | Notes | -|--------|-----------|------------|-------| -| Server batching | 0ms (flush) | 50ms (rapid events) | Immediate flush if >32KB | -| Sync block wait | 0ms | 50ms | Only if marker split across packets | -| Flicker filter | 0ms (disabled) | 50ms (enabled) | Optional per-session | -| rAF scheduling | 0ms | 16ms | Display refresh sync | -| **Total** | **0ms** | **~115ms** | Worst case rare in practice | +| Source | Best Case | Worst Case | Notes | +| --------------- | -------------- | ------------------- | ----------------------------------- | +| Server batching | 0ms (flush) | 50ms (rapid events) | Immediate flush if >32KB | +| Sync block wait | 0ms | 50ms | Only if marker split across packets | +| Flicker filter | 0ms (disabled) | 50ms (enabled) | Optional per-session | +| rAF scheduling | 0ms | 16ms | Display refresh sync | +| **Total** | **0ms** | **~115ms** | Worst case rare in practice | **Typical latency:** 16-32ms (server batch + rAF) ## Edge Cases -- **Incomplete sync blocks**: 50ms timeout forces flush (content discarded to prevent freeze) +- **Incomplete sync blocks**: xterm.js retains synchronized output until its closing marker - **Large buffers**: Chunked writing prevents UI freeze - **Server shutdown**: Skips batching via `_isStopping` flag - **Session switch**: Clears flicker filter state, pending writes, and sync timeout (prevents cross-session data bleed) - **SSE reconnect**: `handleInit()` clears all pending write state -**Trade-off:** If a sync block is split across SSE packets and the end marker doesn't arrive within 50ms, the incomplete content is discarded. This prioritizes responsiveness over completeness. In practice this is rare since the server always sends complete `SYNC_START...SYNC_END` pairs and SSE typically delivers them atomically. - ## DEC Mode 2026 Compatibility -Terminals that natively support DEC 2026 will buffer and render atomically. Terminals that don't support it ignore the escape sequences harmlessly. xterm.js doesn't support DEC 2026 natively, so the client implements its own buffering by parsing the markers. +Terminals that natively support DEC 2026 buffer and render atomically. Codeman uses xterm.js 6, so the client passes the markers through instead of parsing or discarding partial blocks. **Supporting terminals:** WezTerm, Kitty, Ghostty, iTerm2 3.5+, Windows Terminal, VSCode terminal ## Files Involved -| File | Key Functions | -|------|---------------| -| `src/web/server.ts` | `batchTerminalData()`, `flushTerminalBatches()`, `broadcast()` | -| `src/web/public/app.js` | `batchTerminalWrite()`, `extractSyncSegments()`, `flushPendingWrites()`, `flushFlickerBuffer()`, `chunkedTerminalWrite()` | +| File | Key Functions | +| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | +| `src/web/server.ts` | `batchTerminalData()`, `flushTerminalBatches()`, `broadcast()` | +| `src/web/public/terminal-ui.js` | `batchTerminalWrite()`, `_scheduleTerminalWriteFlush()`, `flushPendingWrites()`, `flushFlickerBuffer()`, `chunkedTerminalWrite()` | diff --git a/src/web/public/terminal-ui.js b/src/web/public/terminal-ui.js index f309a31b..fb666a97 100644 --- a/src/web/public/terminal-ui.js +++ b/src/web/public/terminal-ui.js @@ -259,7 +259,7 @@ Object.assign(CodemanApp.prototype, { // WebGL renderer for GPU-accelerated terminal rendering. // Previously caused "page unresponsive" crashes from synchronous GPU stalls, - // but the 48KB/frame flush cap in flushPendingWrites() now prevents + // but the mode-aware 32/64KB frame cap in flushPendingWrites() now prevents // oversized terminal.write() calls that triggered the stalls. // Disable with ?nowebgl URL param if GPU issues return. // Auto-fallback: _initWebGL installs a long-task watchdog that disables @@ -1942,17 +1942,26 @@ Object.assign(CodemanApp.prototype, { // Accumulate raw data (may contain DEC 2026 markers) this.pendingWrites.push(data); + this._scheduleTerminalWriteFlush(); + }, - if (!this.writeFrameScheduled) { - this.writeFrameScheduled = true; - this._safeYield(() => { - // xterm.js 6.0 handles DEC 2026 sync markers natively — it buffers - // content between 2026h/2026l and renders atomically. No need for - // client-side incomplete-block detection; just flush every frame. - this.flushPendingWrites(); - this.writeFrameScheduled = false; - }); - } + /** + * Schedule one render-budgeted terminal flush. + * + * Clear the scheduled flag before flushing so flushPendingWrites() can queue + * another yield when a large final batch leaves bytes behind. Keeping the + * flag set through the flush stranded that remainder until unrelated output + * arrived, which looked like truncated responses and idle shell commands. + */ + _scheduleTerminalWriteFlush() { + if (this.writeFrameScheduled || this.pendingWrites.length === 0) return; + this.writeFrameScheduled = true; + this._safeYield(() => { + this.writeFrameScheduled = false; + // xterm.js 6.0 handles DEC 2026 sync markers natively — it buffers + // content between 2026h/2026l and renders atomically. + this.flushPendingWrites(); + }); }, /** @@ -1968,13 +1977,7 @@ Object.assign(CodemanApp.prototype, { this.flickerFilterActive = false; // Trigger a normal flush - if (!this.writeFrameScheduled) { - this.writeFrameScheduled = true; - this._safeYield(() => { - this.flushPendingWrites(); - this.writeFrameScheduled = false; - }); - } + this._scheduleTerminalWriteFlush(); }, /** @@ -2100,13 +2103,7 @@ Object.assign(CodemanApp.prototype, { this.terminal.write(joined.slice(0, MAX_FRAME_BYTES)); this.pendingWrites.push(joined.slice(MAX_FRAME_BYTES)); deferred = true; - if (!this.writeFrameScheduled) { - this.writeFrameScheduled = true; - this._safeYield(() => { - this.flushPendingWrites(); - this.writeFrameScheduled = false; - }); - } + this._scheduleTerminalWriteFlush(); } if ( preserveViewportY !== null && diff --git a/test/terminal-flush-budget.test.ts b/test/terminal-flush-budget.test.ts index 1af721ab..229cebff 100644 --- a/test/terminal-flush-budget.test.ts +++ b/test/terminal-flush-budget.test.ts @@ -47,6 +47,26 @@ function loadTerminalUiHarness(mode: string) { } describe('terminal flush budget', () => { + it('drains a large final batch without waiting for unrelated terminal output', () => { + const { app, writes } = loadTerminalUiHarness('codex'); + const scheduled: Array<() => void> = []; + app._safeYield = (callback: () => void) => { + scheduled.push(callback); + }; + app.isTerminalAtBottom = () => true; + + app.batchTerminalWrite('x'.repeat(96 * 1024)); + expect(scheduled).toHaveLength(1); + + while (scheduled.length > 0) { + scheduled.shift()?.(); + } + + expect(writes.map((write) => write.length)).toEqual([32 * 1024, 32 * 1024, 32 * 1024]); + expect(app.pendingWrites).toEqual([]); + expect(app.writeFrameScheduled).toBe(false); + }); + it('uses a smaller first-frame write budget for Codex output to reduce renderer stalls', () => { const { app, writes } = loadTerminalUiHarness('codex'); app.pendingWrites.push('x'.repeat(96 * 1024)); From 0736e1ae2f06febce08c2f1163011e11a2d83e28 Mon Sep 17 00:00:00 2001 From: lior Date: Sat, 25 Jul 2026 22:33:06 +0300 Subject: [PATCH 03/49] fix(input): preserve rapid submission boundaries --- src/web/public/keyboard-accessory.js | 7 +++--- src/web/public/terminal-ui.js | 11 +++++----- src/web/public/voice-input.js | 2 +- test/mobile/keyboard.test.ts | 32 ++++++++++++++++++++++++++++ 4 files changed, 41 insertions(+), 11 deletions(-) diff --git a/src/web/public/keyboard-accessory.js b/src/web/public/keyboard-accessory.js index 467a92ae..3d2167f8 100644 --- a/src/web/public/keyboard-accessory.js +++ b/src/web/public/keyboard-accessory.js @@ -247,10 +247,9 @@ const KeyboardAccessoryBar = { * Sends text and Enter separately so Ink processes them as distinct events. */ sendCommand(command) { if (!app.activeSessionId) return; - // Send command text first (without Enter) + // The durable input queue preserves these as two ordered records. app.sendInput(command); - // Send Enter separately after a brief delay so Ink has time to process the text. - setTimeout(() => app.sendInput('\r'), 120); + app.sendInput('\r'); }, /** Send a special key (arrow, escape, etc.) directly to the PTY. @@ -304,7 +303,7 @@ const KeyboardAccessoryBar = { close(); if (text) { app.sendInput(text); - setTimeout(() => app.sendInput('\r'), 80); + app.sendInput('\r'); } }; diff --git a/src/web/public/terminal-ui.js b/src/web/public/terminal-ui.js index fb666a97..a6307608 100644 --- a/src/web/public/terminal-ui.js +++ b/src/web/public/terminal-ui.js @@ -766,7 +766,7 @@ Object.assign(CodemanApp.prototype, { return; } if (/^[\r\n]+$/.test(data)) { - // Enter: send full buffered text + \r to PTY in one shot + // Enter: queue the buffered text followed by \r. const text = this._localEchoOverlay?.pendingText || ''; this._localEchoOverlay?.clear(); // Suppress detection so PTY-echoed text isn't re-detected as user input @@ -782,11 +782,10 @@ Object.assign(CodemanApp.prototype, { this._pendingInput += text; flushInput(); } - // Send \r after a short delay so text arrives first - setTimeout(() => { - this._pendingInput += '\r'; - flushInput(); - }, 80); + // The durable input queue preserves call order. Queue Enter + // immediately so another fast submission cannot interleave before it. + this._pendingInput += '\r'; + flushInput(); return; } if (data.length > 1 && data.charCodeAt(0) >= 32) { diff --git a/src/web/public/voice-input.js b/src/web/public/voice-input.js index 4f79d038..9bfb6b67 100644 --- a/src/web/public/voice-input.js +++ b/src/web/public/voice-input.js @@ -610,7 +610,7 @@ const VoiceInput = { app._localEchoOverlay.clear(); app._localEchoOverlay.suppressBufferDetection(); if (text) app.sendInput(text).catch(() => {}); - setTimeout(() => app.sendInput('\r').catch(() => {}), 80); + app.sendInput('\r').catch(() => {}); } else { app.sendInput('\r').catch(() => {}); } diff --git a/test/mobile/keyboard.test.ts b/test/mobile/keyboard.test.ts index 5032f653..f1499f64 100644 --- a/test/mobile/keyboard.test.ts +++ b/test/mobile/keyboard.test.ts @@ -742,6 +742,38 @@ describe('Virtual Keyboard', () => { expect(afterEnter.sentInputs.join('')).toBe('find bug\r'); }); + it('keeps back-to-back local echo submissions in text-then-Enter order', async () => { + await page.evaluate(() => { + window.__sentInputs = []; + app.activeSessionId = 'mobile-rapid-submit-test'; + app.sessions.set('mobile-rapid-submit-test', { + id: 'mobile-rapid-submit-test', + mode: 'codex', + status: 'running', + }); + app.hideWelcome(); + app._sendInputAsync = (_sessionId: string, input: string) => { + window.__sentInputs.push(input); + }; + const settings = app.loadAppSettingsFromStorage(); + settings.cjkInputEnabled = false; + settings.localEchoEnabled = true; + app.saveAppSettingsToStorage(settings); + app._updateCjkInputState(); + app._updateLocalEchoState(); + app.terminal.focus(); + }); + + await page.keyboard.type('first'); + await page.keyboard.press('Enter'); + await page.keyboard.type('second'); + await page.keyboard.press('Enter'); + + await expect + .poll(() => page.evaluate(() => window.__sentInputs)) + .toEqual(['first', '\r', 'second', '\r']); + }); + it('shows terminal local echo at the cursor when no prompt marker is visible', async () => { await page.evaluate(async () => { app.activeSessionId = 'mobile-cursor-fallback-test'; From c6afa9c0d5f82cac089466cc4bb860259d592a66 Mon Sep 17 00:00:00 2001 From: lior Date: Sat, 25 Jul 2026 22:41:02 +0300 Subject: [PATCH 04/49] fix(mobile): keep keyboard focus taps non-activating --- src/web/public/terminal-ui.js | 31 +++++++++++++++++++++++++++++-- test/mobile/keyboard.test.ts | 12 ++++++++++-- test/terminal-touch-tap.test.ts | 32 ++++++++++++++++++++++++++++++++ 3 files changed, 71 insertions(+), 4 deletions(-) diff --git a/src/web/public/terminal-ui.js b/src/web/public/terminal-ui.js index a6307608..7c3068c5 100644 --- a/src/web/public/terminal-ui.js +++ b/src/web/public/terminal-ui.js @@ -432,6 +432,7 @@ Object.assign(CodemanApp.prototype, { let didScroll = false; // track whether touchmove fired (tap vs scroll) let touchStartY = 0; + let tapCanActivateTerminal = false; const TAP_THRESHOLD = 8; // px — ignore micro-drift to distinguish tap from scroll container.addEventListener( 'touchstart', @@ -443,6 +444,7 @@ Object.assign(CodemanApp.prototype, { pixelAccum = 0; isTouching = true; didScroll = false; + tapCanActivateTerminal = this._shouldForwardMobileTapToApp(); lastTime = 0; if (scrollFrame) { cancelAnimationFrame(scrollFrame); @@ -510,9 +512,13 @@ Object.assign(CodemanApp.prototype, { if (touch) { this._suppressTrustedTapMouseEvents(); } - if (touch && mouseTrackingOn) { + if (touch && tapCanActivateTerminal && mouseTrackingOn) { this._dispatchSyntheticTerminalClick(touch.clientX, touch.clientY); - } else if (touch && this._sessionUsesServerMouseStrip()) { + } else if ( + touch && + tapCanActivateTerminal && + this._sessionUsesServerMouseStrip() + ) { // The server strips mouse-tracking DECSETs from claude/codex/gemini // output (isAltScreenStripMode, session.ts) so the wheel keeps // scrolling scrollback — which leaves THIS xterm permanently at @@ -532,6 +538,7 @@ Object.assign(CodemanApp.prototype, { this.terminal.focus(); } } + tapCanActivateTerminal = false; }, { passive: true } ); @@ -2493,6 +2500,26 @@ Object.assign(CodemanApp.prototype, { } catch {} }, + /** + * A tap that opens the phone keyboard is focus-only. Forwarding that same + * gesture as a mouse click would activate the highlighted CLI menu option. + * Once the keyboard and terminal input were already active at touchstart, + * later taps may intentionally position the cursor or select a TUI row. + */ + _shouldForwardMobileTapToApp() { + const keyboardVisible = + (typeof KeyboardHandler !== 'undefined' && KeyboardHandler.keyboardVisible) || + document.body?.classList?.contains('keyboard-visible'); + if (!keyboardVisible) return false; + + const active = document.activeElement; + return ( + active === this.terminal?.textarea || + active?.classList?.contains('xterm-helper-textarea') || + active?.id === 'cjkInput' + ); + }, + // ═══════════════════════════════════════════════════════════════ // Synthetic tap → mouse report // ═══════════════════════════════════════════════════════════════ diff --git a/test/mobile/keyboard.test.ts b/test/mobile/keyboard.test.ts index f1499f64..3d23e37b 100644 --- a/test/mobile/keyboard.test.ts +++ b/test/mobile/keyboard.test.ts @@ -607,12 +607,16 @@ describe('Virtual Keyboard', () => { it('focuses the terminal helper textarea when the terminal is tapped', async () => { await page.evaluate(() => { + window.__sentInputs = []; app.activeSessionId = 'mobile-focus-visible-input-test'; app.sessions.set('mobile-focus-visible-input-test', { id: 'mobile-focus-visible-input-test', mode: 'codex', status: 'running', }); + app._sendInputAsync = (_sessionId: string, input: string) => { + window.__sentInputs.push(input); + }; app.hideWelcome(); const settings = app.loadAppSettingsFromStorage(); settings.cjkInputEnabled = false; @@ -622,8 +626,12 @@ describe('Virtual Keyboard', () => { await page.locator('#terminalContainer').tap({ position: { x: 40, y: 40 } }); - const activeClass = await page.evaluate(() => document.activeElement?.className); - expect(activeClass).toContain('xterm-helper-textarea'); + const state = await page.evaluate(() => ({ + activeClass: document.activeElement?.className, + sentInputs: window.__sentInputs, + })); + expect(state.activeClass).toContain('xterm-helper-textarea'); + expect(state.sentInputs).toEqual([]); }); it('keeps terminal touch drag available for scrollback with the visible textarea enabled', async () => { diff --git a/test/terminal-touch-tap.test.ts b/test/terminal-touch-tap.test.ts index 7c4ad557..903b9a60 100644 --- a/test/terminal-touch-tap.test.ts +++ b/test/terminal-touch-tap.test.ts @@ -6,8 +6,16 @@ import { describe, expect, it, vi } from 'vitest'; function loadTerminalUiHarness() { const CodemanApp = function CodemanApp(this: any) {}; let now = 1_000; + let keyboardVisible = false; + let activeElement: unknown = null; const context = vm.createContext({ window: {}, + document: { + body: { classList: { contains: () => false } }, + get activeElement() { + return activeElement; + }, + }, CodemanApp, console: { warn: vi.fn(), log: vi.fn() }, _crashDiag: { log: vi.fn() }, @@ -25,6 +33,11 @@ function loadTerminalUiHarness() { MobileDetection: { isTouchDevice: () => true, }, + KeyboardHandler: { + get keyboardVisible() { + return keyboardVisible; + }, + }, DEC_SYNC_STRIP_RE: /\x1b\[\?2026[hl]/g, TERMINAL_CHUNK_SIZE: 32 * 1024, }); @@ -38,6 +51,12 @@ function loadTerminalUiHarness() { setNow: (value: number) => { now = value; }, + setKeyboardVisible: (visible: boolean) => { + keyboardVisible = visible; + }, + setActiveElement: (element: unknown) => { + activeElement = element; + }, }; } @@ -56,6 +75,19 @@ function createElementHarness() { } describe('terminal touch tap mouse guard', () => { + it('keeps the keyboard-opening tap focus-only', () => { + const { app, setActiveElement, setKeyboardVisible } = loadTerminalUiHarness(); + const textarea = { classList: { contains: () => true } }; + app.terminal = { textarea }; + setActiveElement(textarea); + + setKeyboardVisible(false); + expect(app._shouldForwardMobileTapToApp()).toBe(false); + + setKeyboardVisible(true); + expect(app._shouldForwardMobileTapToApp()).toBe(true); + }); + it('suppresses browser trusted compatibility mouse events during the tap window', () => { const { app } = loadTerminalUiHarness(); const { element, dispatch } = createElementHarness(); From 98136e59e70522e0b5ba47d5062bb37990f7f96e Mon Sep 17 00:00:00 2001 From: lior Date: Sat, 25 Jul 2026 23:15:15 +0300 Subject: [PATCH 05/49] feat(mobile): unify terminal navigation controls - Replace the split extended-keyboard option with responsive Esc, arrows, Enter, and Tab controls for keyboard-hidden and keyboard-open layouts. - Add swipe navigation, Up+Down Enter chords, best-effort volume-key input, and optional haptic/sound feedback. - Keep the accessory layout keyboard-safe, phone-width contained, and hidden behind application modals. Verified: 21 unit tests, 64 mobile browser tests, public asset/syntax checks, and npm run build. --- src/web/public/app.js | 12 +- src/web/public/i18n.js | 14 +- src/web/public/index.html | 42 +- src/web/public/keyboard-accessory.js | 683 +++++++++++++++++++++++---- src/web/public/mobile-handlers.js | 84 +++- src/web/public/mobile.css | 163 ++++++- src/web/public/settings-ui.js | 38 +- src/web/public/styles.css | 74 ++- src/web/public/terminal-ui.js | 10 + test/mobile-navigation-pad.test.ts | 379 +++++++++++++++ test/mobile/helpers/constants.ts | 3 + test/mobile/keyboard.test.ts | 183 ++++++- test/mobile/navigation-pad.test.ts | 517 ++++++++++++++++++++ test/mobile/settings.test.ts | 58 ++- 14 files changed, 2056 insertions(+), 204 deletions(-) create mode 100644 test/mobile-navigation-pad.test.ts create mode 100644 test/mobile/navigation-pad.test.ts diff --git a/src/web/public/app.js b/src/web/public/app.js index 314c08cb..1b1c6472 100644 --- a/src/web/public/app.js +++ b/src/web/public/app.js @@ -41,7 +41,7 @@ * @dependency mobile-handlers.js (MobileDetection, KeyboardHandler, SwipeHandler) * @dependency voice-input.js (VoiceInput, DeepgramProvider) * @dependency notification-manager.js (NotificationManager class) - * @dependency keyboard-accessory.js (KeyboardAccessoryBar, FocusTrap) + * @dependency keyboard-accessory.js (MobileTerminalControls, FocusTrap) * @dependency vendor/xterm.js, vendor/xterm-addon-fit.js, vendor/xterm-addon-webgl.js * @dependency vendor/xterm-zerolag-input.iife.js (LocalEchoOverlay) * @loadorder 6 of 15 — loaded after keyboard-accessory.js, before terminal-ui.js @@ -787,10 +787,14 @@ class CodemanApp { KeyboardHandler.init(); SwipeHandler.init(); VoiceInput.init(); - KeyboardAccessoryBar.init(); - // Apply keyboard bar mode from settings + // One setting controls both mobile terminal-control surfaces: the + // keyboard-hidden menu pad and the keyboard-open accessory bar. const _kbSettings = this.loadAppSettingsFromStorage(); - if (_kbSettings.extendedKeyboardBar) KeyboardAccessoryBar.setMode('extended'); + const _kbDefaults = this.getDefaultSettings(); + MobileTerminalControls.configureFeedback(_kbSettings, _kbDefaults); + MobileTerminalControls.init( + MobileTerminalControls.resolveEnabled(_kbSettings, _kbDefaults) + ); this.applyHeaderVisibilitySettings(); this.restorePlanUsageChip(); this.applySkin(); diff --git a/src/web/public/i18n.js b/src/web/public/i18n.js index 4ea11c50..0b35ef8e 100644 --- a/src/web/public/i18n.js +++ b/src/web/public/i18n.js @@ -281,12 +281,16 @@ Input: '输入', 'Local Echo': '本地回显', 'CJK Input': '中日韩输入', - 'Extended Keyboard Bar': '扩展键盘栏', + 'Mobile Terminal Controls': '移动终端控制', + 'Control Haptics': '控制振动', + 'Control Sounds': '控制音效', 'Gesture Control (beta)': '手势控制（测试版）', 'Wheel Scrolls Local History': '滚轮滚动本地历史', 'Instant typing feedback with local echo': '通过本地回显即时显示输入', 'Dedicated IME input field for CJK languages': '为中日韩语言提供专用输入法文本框', - 'Extra keys: Tab, Esc, arrows, Ctrl+O': '附加按键：Tab、Esc、方向键、Ctrl+O', + 'Esc, menu navigation, Tab, and keyboard-open shortcuts': 'Esc、菜单导航、Tab 和键盘打开时的快捷键', + 'Brief vibration on terminal controls': '操作终端控件时短暂振动', + 'Quiet tone on terminal controls': '操作终端控件时播放轻提示音', // CLI / model settings 'Startup Mode': '启动模式', @@ -665,8 +669,10 @@ '通过覆盖层即时显示输入，同时在后台把按键转发到服务器。支持 Tab 补全、切换标签时保留输入并防止会话崩溃丢字；推荐移动端和高延迟连接使用。', "Show a dedicated input field below the terminal for CJK (Chinese/Japanese/Korean) IME composition. Recommended for mobile devices with Chinese input methods where xterm's native input handling may drop characters.": '在终端下方显示中日韩输入法专用文本框。推荐在可能因 xterm 原生输入而丢字的移动端中文输入法中使用。', - 'Show additional buttons (Tab, Shift+Tab, Ctrl+O, Esc, Alt+Enter, left/right arrows) in the mobile keyboard accessory bar.': - '在移动端键盘工具栏显示附加按键（Tab、Shift+Tab、Ctrl+O、Esc、Alt+Enter、左右方向键）。', + 'Show Esc, Up, Enter, Down, and Tab controls while the mobile keyboard is hidden, plus the full terminal key bar while it is open. Hardware volume keys are used when the browser exposes them; press both directions together for Enter.': + '移动键盘隐藏时显示 Esc、上、Enter、下和 Tab 控件，键盘打开时显示完整终端按键栏。浏览器支持时可使用硬件音量键；同时按下两个方向键可发送 Enter。', + 'Vibrate briefly after a mobile terminal control is accepted.': '移动终端控件生效后短暂振动。', + 'Play a short, quiet tone after a mobile terminal control is accepted.': '移动终端控件生效后播放短促轻柔的提示音。', 'Scroll local history (when mouse passthrough is active)': '滚动本地历史（鼠标直通启用时）', 'Plain wheel/trackpad pages the terminal scrollback': '使用普通滚轮/触控板翻阅终端历史', 'Camera hand-tracking overlay (applied on reload)': '摄像头手势跟踪覆盖层（重新加载后生效）', diff --git a/src/web/public/index.html b/src/web/public/index.html index b51c96d1..13b444c9 100644 --- a/src/web/public/index.html +++ b/src/web/public/index.html @@ -6,7 +6,7 @@ served at /session/:id (detached single-session window) without 404ing on relative + diff --git a/src/web/public/input-cjk.js b/src/web/public/input-cjk.js index f35af9bd..616118a2 100644 --- a/src/web/public/input-cjk.js +++ b/src/web/public/input-cjk.js @@ -43,7 +43,7 @@ * * @dependency index.html (#cjkInput textarea) * @globals {object} CjkInput — window.cjkActive (boolean) signals app.js to block xterm onData - * @loadorder 5.5 of 15 — loaded after keyboard-accessory.js, before app.js + * @loadorder 5.5 of 16 — loaded after keyboard-accessory.js, before terminal-input-state.js */ // eslint-disable-next-line no-unused-vars @@ -51,6 +51,7 @@ const CjkInput = (() => { let _textarea = null; let _send = null; let _paste = null; + let _draftChanged = null; let _initialized = false; let _composing = false; let _flushTimer = null; @@ -139,6 +140,7 @@ const CjkInput = (() => { } _textarea.value = PHANTOM; _textarea.setSelectionRange(1, 1); + _draftChanged?.(); } function _isEffectivelyEmpty() { @@ -197,11 +199,12 @@ const CjkInput = (() => { } return { - init({ send, paste }) { + init({ send, paste, draftChanged }) { if (_initialized) this.destroy(); _send = send; _paste = typeof paste === 'function' ? paste : send; + _draftChanged = typeof draftChanged === 'function' ? draftChanged : null; _composing = false; _flushTimer = null; _textarea = document.getElementById('cjkInput'); @@ -370,6 +373,10 @@ const CjkInput = (() => { // ── Input event: primary path for virtual keyboards + dictation ── _listeners.input = (e) => { + // The DOM value has already changed by the time this event runs. Capture + // it before an immediate flush/reset so a lifecycle event in this turn + // cannot lose an unfinished IME or dictation update. + _draftChanged?.(); _t(`input ${e.inputType || '?'} ic=${e.isComposing} c=${_composing} ${_vdesc(_textarea.value)}`); // ── Stuck-composition recovery ── // Some IMEs (WeChat/Sogou keyboards) fire compositionstart without a @@ -467,6 +474,31 @@ const CjkInput = (() => { _resetToPhantom(); }, + /** Real editable text currently held behind the phantom character. */ + getPendingText() { + return _initialized && _textarea ? _strip(_textarea.value) : ''; + }, + + /** + * Restore committed draft text without trying to recreate an OS-level IME + * composition. The next input/Enter event treats it as ordinary text. + */ + restorePendingText(text) { + if (!_initialized || !_textarea) return; + _cancelDebouncedFlush(); + clearTimeout(_compositionFlushTimer); + _compositionFlushTimer = null; + _composing = false; + const restored = String(text || ''); + if (!restored) { + _resetToPhantom(); + return; + } + _textarea.value = PHANTOM + restored; + const end = _textarea.value.length; + _textarea.setSelectionRange(end, end); + }, + /** Diagnostic: recent IME event trace (ring buffer). */ getTrace() { return _trace.slice(); @@ -487,6 +519,7 @@ const CjkInput = (() => { _composing = false; _send = null; _paste = null; + _draftChanged = null; for (const key of Object.keys(_listeners)) delete _listeners[key]; _initialized = false; }, diff --git a/src/web/public/keyboard-accessory.js b/src/web/public/keyboard-accessory.js index c4b974fa..c8a44ead 100644 --- a/src/web/public/keyboard-accessory.js +++ b/src/web/public/keyboard-accessory.js @@ -16,8 +16,9 @@ * Only initializes on touch devices (MobileDetection.isTouchDevice guard). * * - MobileNavigationPad (singleton object) — Keyboard-hidden Esc/Up/Enter/Down/Tab controls - * for terminal menus. A simultaneous Up+Down press emits Enter, and vertical swipes on - * the surrounding bar emit arrow keys without focusing xterm or opening the keyboard. + * for terminal menus plus a contextual jump-to-latest action. A simultaneous Up+Down + * press emits Enter, and vertical swipes on the surrounding bar emit arrow keys without + * focusing xterm or opening the keyboard. * * - FocusTrap (class) — Traps Tab/Shift+Tab keyboard focus within a modal element. * Saves and restores previously focused element on deactivate. Used by Ralph wizard @@ -358,6 +359,16 @@ const MobileNavigationPad = { _swipeTime: 600, _buttons: ` + '; + body.appendChild(reply); + document.body.appendChild(body); + + const copied: string[] = []; + const originalCopy = app._copyText; + const originalToast = app.showToast; + const originalFeedback = MobileTerminalControls.feedback; + app._copyText = async (text: string) => { + copied.push(text); + return true; + }; + app.showToast = () => {}; + MobileTerminalControls.feedback = () => {}; + app._bindResponseViewerInteractions(body); + + const replyText = reply.querySelector('.rv-text')!; + const replyDispatchResult = replyText.dispatchEvent( + new MouseEvent('dblclick', { + bubbles: true, + cancelable: true, + detail: 2, + }) + ); + await Promise.resolve(); + + reply.querySelector('button')!.dispatchEvent( + new MouseEvent('dblclick', { + bubbles: true, + cancelable: true, + detail: 2, + }) + ); + await Promise.resolve(); + + const replyFeedback = reply.classList.contains('rv-copy-feedback'); + const touchAction = getComputedStyle(reply).touchAction; + if (reply._rvCopyFeedbackTimer) clearTimeout(reply._rvCopyFeedbackTimer); + + body.innerHTML = '

Rendered last response

'; + body._codemanCopyText = '# Raw last response'; + body.querySelector('p')!.dispatchEvent( + new MouseEvent('dblclick', { + bubbles: true, + cancelable: true, + detail: 2, + }) + ); + await Promise.resolve(); + + if (body._rvCopyFeedbackTimer) clearTimeout(body._rvCopyFeedbackTimer); + app._copyText = originalCopy; + app.showToast = originalToast; + MobileTerminalControls.feedback = originalFeedback; + body.remove(); + + return { + copied, + replyDefaultPrevented: !replyDispatchResult, + replyFeedback, + touchAction, + }; + }); + + expect(state).toEqual({ + copied: ['**Raw reply**\n\n```js\nconst answer = 42;\n```', '# Raw last response'], + replyDefaultPrevented: true, + replyFeedback: true, + touchAction: 'manipulation', + }); + }); + + it('copies a whole response chunk from two real mobile touch taps', async () => { + await page.evaluate(() => { + const testWindow = window as typeof window & { + __rvDoubleTapCopyTest?: { + copied: string[]; + originalCopy: typeof app._copyText; + originalToast: typeof app.showToast; + originalFeedback: typeof MobileTerminalControls.feedback; + }; + }; + const body = document.createElement('div'); + body.id = 'rv-double-tap-copy-test'; + body.className = 'response-viewer-body'; + body.style.cssText = + 'position:fixed;inset:16px auto auto 16px;width:280px;height:120px;z-index:2147483647;background:#111'; + + const reply = document.createElement('div') as HTMLDivElement & { + _codemanCopyText?: string; + }; + reply.className = 'rv-message rv-msg-assistant'; + reply._codemanCopyText = 'Raw touch reply'; + reply.innerHTML = '
Rendered touch reply
'; + body.appendChild(reply); + document.body.appendChild(body); + + testWindow.__rvDoubleTapCopyTest = { + copied: [], + originalCopy: app._copyText, + originalToast: app.showToast, + originalFeedback: MobileTerminalControls.feedback, + }; + app._copyText = async (text: string) => { + testWindow.__rvDoubleTapCopyTest!.copied.push(text); + return true; + }; + app.showToast = () => {}; + MobileTerminalControls.feedback = () => {}; + app._bindResponseViewerInteractions(body); + }); + + try { + const replyText = page.locator('#rv-double-tap-copy-test .rv-text'); + await replyText.tap(); + await page.waitForTimeout(80); + await replyText.tap(); + await page.waitForTimeout(50); + + const copied = await page.evaluate(() => { + const testWindow = window as typeof window & { + __rvDoubleTapCopyTest?: { copied: string[] }; + }; + return testWindow.__rvDoubleTapCopyTest?.copied ?? []; + }); + expect(copied).toEqual(['Raw touch reply']); + } finally { + await page.evaluate(() => { + const testWindow = window as typeof window & { + __rvDoubleTapCopyTest?: { + originalCopy: typeof app._copyText; + originalToast: typeof app.showToast; + originalFeedback: typeof MobileTerminalControls.feedback; + }; + }; + const state = testWindow.__rvDoubleTapCopyTest; + if (state) { + app._copyText = state.originalCopy; + app.showToast = state.originalToast; + MobileTerminalControls.feedback = state.originalFeedback; + } + document.getElementById('rv-double-tap-copy-test')?.remove(); + delete testWindow.__rvDoubleTapCopyTest; + }); + } + }); + it('clears main padding when the phone keyboard opens', async () => { const initialPadding = await page.evaluate(() => { const main = document.querySelector('.main') as HTMLElement | null; @@ -326,6 +490,36 @@ describe('Virtual Keyboard', () => { expect(newPx).toBe(0); }); + it('locks the handheld app as soon as terminal focus requests the keyboard', async () => { + const state = await page.evaluate(() => { + const focusTarget = document.createElement('button'); + document.body.appendChild(focusTarget); + focusTarget.focus(); + KeyboardHandler.keyboardVisible = false; + KeyboardHandler._terminalInputRequested = false; + document.body.classList.remove('keyboard-visible', 'keyboard-opening'); + + app.terminal.focus(); + + const appElement = document.querySelector('.app'); + const result = { + terminalRequested: KeyboardHandler._terminalInputRequested, + openingClass: document.body.classList.contains('keyboard-opening'), + appPosition: appElement ? getComputedStyle(appElement).position : '', + }; + clearTimeout(KeyboardHandler._keyboardOpeningTimer); + KeyboardHandler._keyboardOpeningTimer = null; + focusTarget.remove(); + return result; + }); + + expect(state).toEqual({ + terminalRequested: true, + openingClass: true, + appPosition: 'fixed', + }); + }); + it('marks keyboard-driven resizing as active viewport control', async () => { const call = await page.evaluate(`(async function() { var originalSendResize = app.sendResize; @@ -401,14 +595,59 @@ describe('Virtual Keyboard', () => { expect(mainPadding).toBe(''); }); + it('reveals and focuses the live terminal input as soon as its keyboard opens', async () => { + const state = await page.evaluate(() => { + const originalScrollToBottom = app.terminal.scrollToBottom.bind(app.terminal); + const originalFocusInput = app._focusMobileTerminalInput.bind(app); + let bottomRestores = 0; + let inputFocusRestores = 0; + app.terminal.scrollToBottom = () => { + bottomRestores++; + }; + app._focusMobileTerminalInput = () => { + inputFocusRestores++; + }; + app._terminalScrollLocked = true; + app._wasAtBottomBeforeWrite = false; + KeyboardHandler.keyboardVisible = true; + KeyboardHandler._terminalInputRequested = true; + document.body.classList.add('keyboard-visible'); + + KeyboardHandler.onKeyboardShow(); + const immediate = { + bottomRestores, + inputFocusRestores, + scrollLocked: app._terminalScrollLocked, + followsBottom: app._wasAtBottomBeforeWrite, + }; + + clearTimeout(KeyboardHandler._viewportSettleTimer); + KeyboardHandler._viewportSettleTimer = null; + KeyboardHandler._settleScrollToBottom = false; + KeyboardHandler._settleFocusInput = false; + app.terminal.scrollToBottom = originalScrollToBottom; + app._focusMobileTerminalInput = originalFocusInput; + return immediate; + }); + + expect(state).toEqual({ + bottomRestores: 1, + inputFocusRestores: 1, + scrollLocked: false, + followsBottom: true, + }); + }); + it('coalesces keyboard animation frames into one final terminal fit', async () => { const result = await page.evaluate(async () => { const originalFit = app.fitAddon.fit.bind(app.fitAddon); const originalSendResize = KeyboardHandler._sendTerminalResize.bind(KeyboardHandler); const originalScrollToBottom = app.terminal.scrollToBottom.bind(app.terminal); + const originalFocusInput = app._focusMobileTerminalInput.bind(app); let fits = 0; let resizes = 0; let bottomRestores = 0; + let inputFocusRestores = 0; app.fitAddon.fit = () => { fits++; }; @@ -418,25 +657,89 @@ describe('Virtual Keyboard', () => { app.terminal.scrollToBottom = () => { bottomRestores++; }; + app._focusMobileTerminalInput = () => { + inputFocusRestores++; + }; + app._terminalScrollLocked = true; + app._wasAtBottomBeforeWrite = false; + KeyboardHandler.keyboardVisible = true; + document.body.classList.add('keyboard-visible'); - KeyboardHandler._scheduleViewportSettle({ scrollToBottom: true }); + KeyboardHandler._scheduleViewportSettle({ scrollToBottom: true, focusInput: true }); await new Promise((resolve) => setTimeout(resolve, 30)); KeyboardHandler._scheduleViewportSettle(); await new Promise((resolve) => setTimeout(resolve, 30)); KeyboardHandler._scheduleViewportSettle(); await new Promise((resolve) => setTimeout(resolve, 50)); - const beforeFinalSettle = { fits, resizes, bottomRestores }; + const beforeFinalSettle = { fits, resizes, bottomRestores, inputFocusRestores }; await new Promise((resolve) => setTimeout(resolve, KeyboardHandler.VIEWPORT_SETTLE_MS)); - const afterFinalSettle = { fits, resizes, bottomRestores }; + const afterFinalSettle = { + fits, + resizes, + bottomRestores, + inputFocusRestores, + scrollLocked: app._terminalScrollLocked, + followsBottom: app._wasAtBottomBeforeWrite, + }; app.fitAddon.fit = originalFit; KeyboardHandler._sendTerminalResize = originalSendResize; app.terminal.scrollToBottom = originalScrollToBottom; + app._focusMobileTerminalInput = originalFocusInput; return { beforeFinalSettle, afterFinalSettle }; }); - expect(result.beforeFinalSettle).toEqual({ fits: 0, resizes: 0, bottomRestores: 0 }); - expect(result.afterFinalSettle).toEqual({ fits: 1, resizes: 1, bottomRestores: 1 }); + expect(result.beforeFinalSettle).toEqual({ + fits: 0, + resizes: 0, + bottomRestores: 0, + inputFocusRestores: 0, + }); + expect(result.afterFinalSettle).toEqual({ + fits: 1, + resizes: 1, + bottomRestores: 1, + inputFocusRestores: 1, + scrollLocked: false, + followsBottom: true, + }); + }); + + it('does not steal focus or resize the PTY when the keyboard belongs to a form field', async () => { + const state = await page.evaluate(async () => { + const originalFocusInput = app._focusMobileTerminalInput.bind(app); + const originalScrollToBottom = app.terminal.scrollToBottom.bind(app.terminal); + const originalSendResize = KeyboardHandler._sendTerminalResize.bind(KeyboardHandler); + let inputFocusRestores = 0; + let bottomRestores = 0; + let resizes = 0; + app._focusMobileTerminalInput = () => { + inputFocusRestores++; + }; + app.terminal.scrollToBottom = () => { + bottomRestores++; + }; + KeyboardHandler._sendTerminalResize = () => { + resizes++; + }; + KeyboardHandler.keyboardVisible = true; + KeyboardHandler._terminalInputRequested = false; + document.body.classList.add('keyboard-visible'); + + KeyboardHandler.onKeyboardShow(); + await new Promise((resolve) => setTimeout(resolve, KeyboardHandler.VIEWPORT_SETTLE_MS + 20)); + + app._focusMobileTerminalInput = originalFocusInput; + app.terminal.scrollToBottom = originalScrollToBottom; + KeyboardHandler._sendTerminalResize = originalSendResize; + return { inputFocusRestores, bottomRestores, resizes }; + }); + + expect(state).toEqual({ + inputFocusRestores: 0, + bottomRestores: 0, + resizes: 0, + }); }); it('accessory bar has the unified terminal-control action set', async () => { @@ -550,14 +853,16 @@ describe('Virtual Keyboard', () => { expect(activeTag).toBe('BODY'); }); - it('terminal fit called on keyboard toggle', async () => { + it('keeps keyboard fits inside the coalesced keyboard settle', async () => { // Inject spy on fitAddon.fit await page.evaluate(` if (typeof app !== 'undefined' && app.fitAddon) { window.__fitCallCount = 0; + window.__fitCallStacks = []; var orig = app.fitAddon.fit; app.fitAddon.fit = function () { window.__fitCallCount++; + window.__fitCallStacks.push(String(new Error().stack || '')); try { orig.call(this); } catch(e) {} }; } @@ -567,9 +872,14 @@ describe('Virtual Keyboard', () => { // Wait for the setTimeout(150) in onKeyboardShow await page.waitForTimeout(300); - const callCount = await page.evaluate(() => (window as any).__fitCallCount ?? 0); - // Soft assertion — fitAddon may not be initialized without real terminal - expect(callCount).toBeGreaterThanOrEqual(0); + const calls = await page.evaluate(() => ({ + count: (window as any).__fitCallCount ?? 0, + stacks: (window as any).__fitCallStacks ?? [], + })); + // One settled fit plus, when needed, one synchronous row-gap correction. + expect(calls.count).toBeGreaterThanOrEqual(1); + expect(calls.count).toBeLessThanOrEqual(2); + expect(calls.stacks.every((stack: string) => stack.includes('mobile-handlers.js'))).toBe(true); }); it('keeps xterm helper textarea focusable near the terminal cursor on touch devices', async () => { @@ -990,45 +1300,50 @@ describe('Virtual Keyboard', () => { expect(calls.some((lines) => lines !== 0)).toBe(true); }); - it('routes Claude touch drags to its transcript without moving local xterm history', async () => { + it('keeps a focused draft visible while a keyboard-open transcript drag reads history', async () => { const result = await page.evaluate(async () => { - app.activeSessionId = 'mobile-claude-scroll-test'; - app.sessions.set('mobile-claude-scroll-test', { - id: 'mobile-claude-scroll-test', - mode: 'claude', - cliVersion: '2.1.220', + app.activeSessionId = 'mobile-focused-draft-scroll-test'; + app.sessions.set('mobile-focused-draft-scroll-test', { + id: 'mobile-focused-draft-scroll-test', + mode: 'codex', status: 'running', }); app.hideWelcome(); - - const sgrCalls: number[] = []; - const localCalls: number[] = []; - app._sendSyntheticSgrWheel = (_x: number, _y: number, lines: number) => { - sgrCalls.push(lines); - }; - app.terminal.scrollLines = (lines: number) => { - localCalls.push(lines); - }; + const settings = app.loadAppSettingsFromStorage(); + settings.cjkInputEnabled = false; + settings.localEchoEnabled = true; + app.saveAppSettingsToStorage(settings); + app._updateCjkInputState(); + app._updateLocalEchoState(); + app.terminal.reset(); + const history = Array.from( + { length: app.terminal.rows + 20 }, + (_, index) => `conversation line ${index + 1}` + ).join('\r\n'); + await new Promise((resolve) => app.terminal.write(`${history}\r\n› `, resolve)); + app.terminal.focus(); + app._localEchoOverlay.appendText('draft remains visible'); + KeyboardHandler.keyboardVisible = true; + KeyboardHandler._terminalInputRequested = true; + document.body.classList.add('keyboard-visible'); const target = document.querySelector('#terminalContainer .xterm-screen') ?? document.getElementById('terminalContainer'); - if (!target) return { sgrCalls, localCalls }; + if (!target) return null; const rect = target.getBoundingClientRect(); const x = rect.left + rect.width / 2; - const startY = rect.top + Math.min(100, rect.height - 20); - const endY = startY + 100; + const startY = rect.top + Math.min(80, rect.height / 3); + const endY = Math.min(rect.bottom - 10, startY + 120); - function createTouch(y: number) { - return new Touch({ - identifier: 2, + const createTouch = (y: number) => + new Touch({ + identifier: 8, target, clientX: x, clientY: y, pageX: x, pageY: y, }); - } - target.dispatchEvent( new TouchEvent('touchstart', { touches: [createTouch(startY)], @@ -1054,120 +1369,819 @@ describe('Virtual Keyboard', () => { }) ); await new Promise((resolve) => setTimeout(resolve, 50)); - return { sgrCalls, localCalls }; + + return { + keyboardVisible: KeyboardHandler.keyboardVisible, + terminalFocused: document.activeElement === app.terminal.textarea, + viewportY: app.terminal.buffer.active.viewportY, + baseY: app.terminal.buffer.active.baseY, + pendingText: app._localEchoOverlay.pendingText, + draftVisible: app._localEchoOverlay.state.visible, + }; }); - expect(result.sgrCalls.some((lines) => lines < 0)).toBe(true); - expect(result.localCalls).toEqual([]); + expect(result).toEqual( + expect.objectContaining({ + keyboardVisible: true, + terminalFocused: true, + pendingText: 'draft remains visible', + draftVisible: true, + }) + ); + expect(result!.viewportY).toBeLessThan(result!.baseY); }); - it('keeps typed phone text in the terminal local echo path', async () => { - await page.evaluate(() => { - window.__sentInputs = []; - app.activeSessionId = 'mobile-visible-input-test'; - app.sessions.set('mobile-visible-input-test', { - id: 'mobile-visible-input-test', + it('keeps the previous terminal frame over a keyboard refit until nonblank output renders', async () => { + const state = await page.evaluate(async () => { + app.activeSessionId = 'mobile-keyboard-frame-cover-test'; + app.sessions.set('mobile-keyboard-frame-cover-test', { + id: 'mobile-keyboard-frame-cover-test', mode: 'codex', status: 'running', }); app.hideWelcome(); - app._sendInputAsync = (_sessionId: string, input: string) => { - window.__sentInputs.push(input); + app.terminal.reset(); + await new Promise((resolve) => app.terminal.write('frame before keyboard\r\n› ', resolve)); + await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve()))); + + KeyboardHandler._beginTerminalFrameCover(); + KeyboardHandler._armTerminalFrameCover(); + const cover = app.terminal.element?.querySelector('.terminal-resize-frame-cover'); + const before = { + exists: Boolean(cover), + text: cover?.textContent || '', }; - const settings = app.loadAppSettingsFromStorage(); - settings.cjkInputEnabled = false; - settings.localEchoEnabled = true; - app.saveAppSettingsToStorage(settings); - app._updateCjkInputState(); - app._updateLocalEchoState(); - app.terminal.focus(); - }); - - await page.locator('#terminalContainer').tap({ position: { x: 40, y: 40 } }); - // The tap itself emits a valid SGR mouse report. This assertion is about - // typed text, so discard pointer setup traffic before entering text. - await page.evaluate(() => { - window.__sentInputs = []; - }); - await page.keyboard.type('find bug'); - const beforeEnter = await page.evaluate(() => ({ - activeClass: document.activeElement?.className, - cjkDisplay: getComputedStyle(document.getElementById('cjkInput') as HTMLElement).display, - pendingText: app._localEchoOverlay?.pendingText, - sentInputs: window.__sentInputs, - })); - expect(beforeEnter.activeClass).toContain('xterm-helper-textarea'); - expect(beforeEnter.cjkDisplay).toBe('none'); - expect(beforeEnter.pendingText).toBe('find bug'); - expect(beforeEnter.sentInputs).toEqual([]); + await new Promise((resolve) => app.terminal.write('\x1b[2J\x1b[H', resolve)); + await new Promise((resolve) => setTimeout(resolve, KeyboardHandler.FRAME_COVER_MIN_MS + 30)); + const survivedBlank = Boolean(app.terminal.element?.querySelector('.terminal-resize-frame-cover')); - await page.keyboard.press('Enter'); - await page.waitForFunction(() => window.__sentInputs?.join('') === 'find bug\r'); + app.batchTerminalWrite('frame after keyboard\r\n› '); + await new Promise((resolve) => setTimeout(resolve, 100)); + return { + before, + survivedBlank, + removedAfterFrame: !app.terminal.element?.querySelector('.terminal-resize-frame-cover'), + }; + }); - const afterEnter = await page.evaluate(() => ({ - pendingText: app._localEchoOverlay?.pendingText, - sentInputs: window.__sentInputs, - })); - expect(afterEnter.pendingText).toBe(''); - expect(afterEnter.sentInputs.join('')).toBe('find bug\r'); + expect(state.before.exists).toBe(true); + expect(state.before.text).toContain('frame before keyboard'); + expect(state.survivedBlank).toBe(true); + expect(state.removedAfterFrame).toBe(true); }); - it('shows and commits each live Android composition after the first word', async () => { - const preview = await page.evaluate(async () => { - app.activeSessionId = 'mobile-composition-test'; - app.sessions.set('mobile-composition-test', { - id: 'mobile-composition-test', - mode: 'claude', + it('keeps the frame opaque through local resize renders and swaps only after terminal output paints', async () => { + const state = await page.evaluate(async () => { + app.activeSessionId = 'mobile-keyboard-atomic-frame-test'; + app.sessions.set('mobile-keyboard-atomic-frame-test', { + id: 'mobile-keyboard-atomic-frame-test', + mode: 'codex', status: 'running', }); app.hideWelcome(); - const settings = app.loadAppSettingsFromStorage(); - settings.cjkInputEnabled = false; - settings.localEchoEnabled = true; - app.saveAppSettingsToStorage(settings); - app._updateCjkInputState(); - app._updateLocalEchoState(); app.terminal.reset(); - await new Promise((resolve) => { - app.terminal.write('\x1b[2J\x1b[H\u276f ', resolve); - }); - app._localEchoOverlay.clear(); - app._localEchoOverlay.appendText('first '); + await new Promise((resolve) => app.terminal.write('old stable frame\r\n› ', resolve)); + await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve()))); + + KeyboardHandler._beginTerminalFrameCover(); + KeyboardHandler._armTerminalFrameCover(); + app.terminal.refresh(0, app.terminal.rows - 1); + await new Promise((resolve) => setTimeout(resolve, KeyboardHandler.FRAME_COVER_MIN_MS + 80)); + const survivedLocalRender = Boolean(app.terminal.element?.querySelector('.terminal-resize-frame-cover')); + + const opacitySamples: Array = []; + app.batchTerminalWrite('\x1b[2J\x1b[Hnew stable frame\r\n› '); + for (let frame = 0; frame < 12; frame++) { + await new Promise((resolve) => requestAnimationFrame(() => resolve())); + const cover = app.terminal.element?.querySelector('.terminal-resize-frame-cover') as HTMLElement | null; + opacitySamples.push(cover ? Number(getComputedStyle(cover).opacity) : null); + } - const textarea = app.terminal.textarea; - textarea.value = ''; - textarea.dispatchEvent(new CompositionEvent('compositionstart', { bubbles: true })); - textarea.value = 'sec'; - textarea.dispatchEvent( - new CompositionEvent('compositionupdate', { - bubbles: true, - data: 'sec', - }) - ); + return { + survivedLocalRender, + opacitySamples, + removedAfterOutput: !app.terminal.element?.querySelector('.terminal-resize-frame-cover'), + }; + }); - const overlay = Array.from(app.terminal.element.querySelector('.xterm-screen')?.children || []).find( - (element) => (element as HTMLElement).style.zIndex === '7' - ); + expect(state.survivedLocalRender).toBe(true); + expect(state.opacitySamples.every((opacity) => opacity === null || opacity === 1)).toBe(true); + expect(state.removedAfterOutput).toBe(true); + }); + + it('slides the captured frame during keyboard shrink instead of snapping its bottom edge', async () => { + const state = await page.evaluate(async () => { + app.activeSessionId = 'mobile-keyboard-frame-motion-test'; + app.sessions.set('mobile-keyboard-frame-motion-test', { + id: 'mobile-keyboard-frame-motion-test', + mode: 'codex', + status: 'running', + }); + app.hideWelcome(); + app.terminal.reset(); + await new Promise((resolve) => app.terminal.write('stable frame before keyboard\r\n› ', resolve)); + await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve()))); + + KeyboardHandler._beginTerminalFrameCover(); + const cover = app.terminal.element?.querySelector('.terminal-resize-frame-cover') as HTMLElement | null; + const frame = cover?.querySelector('.terminal-resize-frame') as HTMLElement | null; + if (!cover || !frame) return null; + const initialHeight = cover.getBoundingClientRect().height; + const nextHeight = Math.max(180, initialHeight - 180); + + KeyboardHandler.keyboardVisible = true; + document.body.classList.add('keyboard-visible'); + document.documentElement.style.setProperty('--app-height', `${nextHeight + 42}px`); + KeyboardHandler._updateTerminalFrameCoverGeometry(); + + const style = getComputedStyle(frame); return { - pendingText: app._localEchoOverlay.pendingText, - compositionText: app._localEchoOverlay.compositionText, - visibleText: overlay?.textContent, + shift: parseFloat(frame.style.getPropertyValue('--terminal-frame-shift') || '0'), + top: style.top, + bottom: style.bottom, + transitionProperty: style.transitionProperty, + transitionDuration: parseFloat(style.transitionDuration) || 0, }; }); - expect(preview).toEqual({ - pendingText: 'first ', - compositionText: 'sec', - visibleText: expect.stringContaining('first sec'), + expect(state).not.toBeNull(); + expect(state!.shift).toBeLessThan(-100); + expect(state!.top).toBe('0px'); + expect(state!.bottom).not.toBe('0px'); + expect(state!.transitionProperty).toContain('transform'); + expect(state!.transitionDuration).toBeGreaterThan(0); + }); + + it('holds the outgoing frame and avoids a second keyboard fit during a tab switch', async () => { + await page.route('**/api/sessions/*/terminal*', async (route) => { + const sessionId = new URL(route.request().url()).pathname.split('/')[3]; + if (sessionId === 'smooth-tab-b') { + await new Promise((resolve) => setTimeout(resolve, 140)); + } + await route.fulfill({ + status: 200, + contentType: 'application/json', + body: JSON.stringify({ + data: { + terminalBuffer: `${sessionId} stable frame\r\n${sessionId} prompt`, + truncated: false, + }, + }), + }); }); - await page.evaluate(() => { - const textarea = app.terminal.textarea; - textarea.value = 'second'; - textarea.dispatchEvent( - new CompositionEvent('compositionupdate', { - bubbles: true, + const state = await page.evaluate(async () => { + app._initialFullBufferLoad = false; + app.sessions.set('smooth-tab-a', { + id: 'smooth-tab-a', + name: 'Smooth A', + mode: 'codex', + status: 'idle', + pid: 1, + workingDir: '/tmp', + }); + app.sessions.set('smooth-tab-b', { + id: 'smooth-tab-b', + name: 'Smooth B', + mode: 'codex', + status: 'idle', + pid: 1, + workingDir: '/tmp', + }); + app.sessionOrder = ['smooth-tab-a', 'smooth-tab-b']; + app.renderSessionTabs(); + await app.selectSession('smooth-tab-a'); + await new Promise((resolve) => app.terminal.write('\r\nsmooth-tab-a outgoing frame\r\n', resolve)); + await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve()))); + + KeyboardHandler.keyboardVisible = true; + KeyboardHandler._terminalInputRequested = true; + document.body.classList.add('keyboard-visible'); + const originalFit = app.fitAddon.fit.bind(app.fitAddon); + const originalFrameCoverMax = KeyboardHandler.FRAME_COVER_MAX_MS; + KeyboardHandler.FRAME_COVER_MAX_MS = 60; + const fitStacks: string[] = []; + app.fitAddon.fit = () => { + fitStacks.push(String(new Error().stack || '')); + originalFit(); + }; + + const switching = app.selectSession('smooth-tab-b'); + await new Promise((resolve) => setTimeout(resolve, 90)); + const cover = app.terminal.element?.querySelector('.terminal-resize-frame-cover'); + const duringSwitch = { + coverVisible: Boolean(cover), + coverText: cover?.textContent || '', + }; + await switching; + await new Promise((resolve) => setTimeout(resolve, KeyboardHandler.FRAME_COVER_MIN_MS + 30)); + app.fitAddon.fit = originalFit; + KeyboardHandler.FRAME_COVER_MAX_MS = originalFrameCoverMax; + + return { + duringSwitch, + removedAfterTargetFrame: !app.terminal.element?.querySelector('.terminal-resize-frame-cover'), + keyboardFitCalls: fitStacks.filter((stack) => stack.includes('mobile-handlers.js')).length, + }; + }); + + expect(state.duringSwitch.coverVisible).toBe(true); + expect(state.duringSwitch.coverText).toContain('smooth-tab-a'); + expect(state.removedAfterTargetFrame).toBe(true); + expect(state.keyboardFitCalls).toBe(0); + }); + + it('shows the latest frame while a bounded history page downloads off-screen', async () => { + const state = await page.evaluate(async () => { + const sourceId = 'history-replay-source'; + const targetId = 'history-replay-target'; + const originalFetch = window.fetch; + const originalSendResize = app.sendResize; + const originalConnectWs = app._connectWs; + const streamHeaders = (end: number, extra: Record = {}) => ({ + 'content-type': 'text/plain; charset=utf-8', + 'x-codeman-terminal-format': 'stream-v1', + 'x-codeman-terminal-stream': 'history-replay-stream', + 'x-codeman-terminal-generation': '1', + 'x-codeman-terminal-start': '0', + 'x-codeman-terminal-end': String(end), + 'x-codeman-terminal-status': 'idle', + 'x-codeman-terminal-full-size': String(end), + 'x-codeman-terminal-truncated': '0', + 'x-codeman-terminal-source': 'mux-visible', + ...extra, + }); + const latestFrame = 'LATEST TARGET FRAME\r\n› current prompt'; + const historicalChunks = Array.from( + { length: 4 }, + (_, chunkIndex) => + Array.from( + { length: 90 }, + (_, lineIndex) => `HISTORY_${chunkIndex}_${String(lineIndex).padStart(3, '0')} background scrollback` + ).join('\r\n') + '\r\n' + ); + let historyChunksSent = 0; + + try { + app.sessions.set(sourceId, { + id: sourceId, + name: 'Replay source', + mode: 'codex', + status: 'idle', + pid: 1, + workingDir: '/tmp', + }); + app.sessions.set(targetId, { + id: targetId, + name: 'Replay target', + mode: 'codex', + status: 'idle', + pid: 1, + workingDir: '/tmp', + }); + app.sessionOrder = [sourceId, targetId]; + app.activeSessionId = sourceId; + app._initialFullBufferLoad = false; + app.terminalBufferCache.delete(targetId); + app._xtermSnapshots.delete(targetId); + app._warmTerminalCache.remove(targetId); + app.renderSessionTabs(); + app.hideWelcome(); + app.terminal.reset(); + await new Promise((resolve) => app.terminal.write('OUTGOING SOURCE FRAME\r\n› source prompt', resolve)); + await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve()))); + + app.sendResize = async () => false; + app._connectWs = () => {}; + window.fetch = (async (input: RequestInfo | URL, init?: RequestInit) => { + const url = String(input); + if (!url.includes(`/api/sessions/${targetId}/terminal`)) { + return originalFetch.call(window, input, init); + } + if (url.includes('latest=1')) { + return new Response(latestFrame, { + status: 200, + headers: streamHeaders(latestFrame.length), + }); + } + + const encoder = new TextEncoder(); + const body = new ReadableStream({ + start(controller) { + void (async () => { + for (const chunk of historicalChunks) { + await new Promise((resolve) => setTimeout(resolve, 70)); + controller.enqueue(encoder.encode(chunk)); + historyChunksSent += 1; + } + controller.close(); + })(); + }, + }); + const totalLength = historicalChunks.reduce((sum, chunk) => sum + chunk.length, 0); + return new Response(body, { + status: 200, + headers: streamHeaders(totalLength, { + 'x-codeman-terminal-source': 'mux-history-page', + 'x-codeman-history-start': '0', + 'x-codeman-history-end': '360', + 'x-codeman-history-total': '360', + 'x-codeman-history-more-before': '0', + 'x-codeman-history-more-after': '0', + 'x-codeman-history-origin': 'mobile-history-origin', + }), + }); + }) as typeof window.fetch; + + const switching = app.selectSession(targetId); + const samples: Array<{ + coverText: string; + baseY: number; + viewportY: number; + coverRight: number; + screenRight: number; + }> = []; + for (let attempt = 0; attempt < 40; attempt++) { + await new Promise((resolve) => setTimeout(resolve, 25)); + const cover = app.terminal.element?.querySelector('.terminal-history-replay-cover') as HTMLElement | null; + if (!cover || !cover.textContent?.includes('LATEST TARGET FRAME')) continue; + const screen = app.terminal.element?.querySelector('.xterm-screen') as HTMLElement | null; + const buffer = app.terminal.buffer.active; + const coverRect = cover.getBoundingClientRect(); + const screenRect = screen?.getBoundingClientRect(); + samples.push({ + coverText: cover.textContent || '', + baseY: buffer.baseY, + viewportY: buffer.viewportY, + coverRight: coverRect.right, + screenRight: screenRect?.right || 0, + }); + if (historyChunksSent >= historicalChunks.length - 1) break; + } + + await switching; + await new Promise((resolve) => setTimeout(resolve, 180)); + const buffer = app.terminal.buffer.active; + const visibleRows = Array.from( + { length: app.terminal.rows }, + (_, row) => buffer.getLine(buffer.viewportY + row)?.translateToString(true) || '' + ).join('\n'); + const paging = app._terminalHistoryPaging.get(targetId); + + return { + samples, + historyChunksSent, + finalBaseY: buffer.baseY, + finalViewportY: buffer.viewportY, + finalVisibleRows: visibleRows, + paging: paging + ? { + start: paging.start, + end: paging.end, + total: paging.total, + pages: paging.pages.length, + } + : null, + coverRemoved: !app.terminal.element?.querySelector('.terminal-history-replay-cover'), + }; + } finally { + window.fetch = originalFetch; + app.sendResize = originalSendResize; + app._connectWs = originalConnectWs; + } + }); + + expect(state.historyChunksSent).toBeGreaterThan(2); + expect(state.samples.length).toBeGreaterThan(2); + expect(state.samples.every((sample) => sample.coverText.includes('LATEST TARGET FRAME'))).toBe(true); + expect(state.samples.every((sample) => !sample.coverText.includes('HISTORY_'))).toBe(true); + expect(state.samples.every((sample) => sample.viewportY === sample.baseY)).toBe(true); + expect(Math.max(...state.samples.map((sample) => sample.baseY))).toBe( + Math.min(...state.samples.map((sample) => sample.baseY)) + ); + expect(state.samples.every((sample) => Math.abs(sample.coverRight - sample.screenRight) < 1)).toBe(true); + expect(state.finalBaseY).toBeGreaterThan(state.samples[0].baseY); + expect(state.finalViewportY).toBe(state.finalBaseY); + expect(state.finalVisibleRows).toContain('LATEST TARGET FRAME'); + expect(state.paging).toEqual({ start: 0, end: 360, total: 360, pages: 1 }); + expect(state.coverRemoved).toBe(true); + }); + + it('does not reset the shared terminal while the previous session is still parsing', async () => { + await page.route('**/api/sessions/parser-fence-target/terminal*', async (route) => { + const frame = '\x1b[2J\x1b[HDESTINATION FRAME\r\n› target prompt'; + const end = String(frame.length); + await route.fulfill({ + status: 200, + contentType: 'text/plain; charset=utf-8', + headers: { + 'x-codeman-terminal-format': 'stream-v1', + 'x-codeman-terminal-stream': 'parser-fence-stream', + 'x-codeman-terminal-generation': '1', + 'x-codeman-terminal-start': '0', + 'x-codeman-terminal-end': end, + 'x-codeman-terminal-status': 'idle', + 'x-codeman-terminal-full-size': end, + 'x-codeman-terminal-truncated': '0', + 'x-codeman-terminal-source': route.request().url().includes('historyPage=1') + ? 'mux-history-page' + : 'mux-visible', + ...(route.request().url().includes('historyPage=1') + ? { + 'x-codeman-history-start': '0', + 'x-codeman-history-end': '1', + 'x-codeman-history-total': '1', + 'x-codeman-history-more-before': '0', + 'x-codeman-history-more-after': '0', + 'x-codeman-history-origin': 'parser-fence-origin', + } + : {}), + }, + body: frame, + }); + }); + + const state = await page.evaluate(async () => { + const sourceId = 'parser-fence-source'; + const targetId = 'parser-fence-target'; + app.sessions.set(sourceId, { + id: sourceId, + name: 'Parser source', + mode: 'codex', + status: 'busy', + pid: 1, + workingDir: '/tmp', + }); + app.sessions.set(targetId, { + id: targetId, + name: 'Parser target', + mode: 'codex', + status: 'idle', + pid: 1, + workingDir: '/tmp', + }); + app.sessionOrder = [sourceId, targetId]; + app.activeSessionId = sourceId; + app._initialFullBufferLoad = false; + app._warmTerminalCache.remove(targetId); + app._xtermSnapshots.delete(targetId); + app.terminalBufferCache.delete(targetId); + app.sendResize = async () => false; + app._connectWs = () => {}; + app.hideWelcome(); + app.terminal.reset(); + await new Promise((resolve) => app.terminal.write('SOURCE FRAME\r\n', resolve)); + + let releaseParser: ((value: boolean) => void) | null = null; + let parserEnteredResolve: (() => void) | null = null; + const parserEntered = new Promise((resolve) => { + parserEnteredResolve = resolve; + }); + const parserBlock = new Promise((resolve) => { + releaseParser = resolve; + }); + const blocker = app.terminal.parser.registerOscHandler(777, () => { + parserEnteredResolve?.(); + return parserBlock; + }); + + const originalReset = app.terminal.reset.bind(app.terminal); + let resetCount = 0; + app.terminal.reset = () => { + resetCount += 1; + originalReset(); + }; + + try { + app.batchTerminalWrite('\x1b]777;hold\x07OLD SESSION DATA AFTER BLOCK'); + await parserEntered; + + const switching = app.selectSession(targetId, { takeControl: false }); + await new Promise((resolve) => setTimeout(resolve, 80)); + const resetBeforeRelease = resetCount; + + releaseParser?.(true); + await switching; + await new Promise((resolve) => app.terminal.write('', resolve)); + + const buffer = app.terminal.buffer.active; + const visibleRows = Array.from( + { length: app.terminal.rows }, + (_, row) => buffer.getLine(buffer.viewportY + row)?.translateToString(true) || '' + ).join('\n'); + return { + resetBeforeRelease, + visibleRows, + }; + } finally { + releaseParser?.(true); + blocker.dispose(); + app.terminal.reset = originalReset; + } + }); + + expect(state.resetBeforeRelease).toBe(0); + expect(state.visibleRows).toContain('DESTINATION FRAME'); + expect(state.visibleRows).not.toContain('OLD SESSION DATA AFTER BLOCK'); + }); + + it('routes Claude touch drags to its transcript without moving local xterm history', async () => { + const result = await page.evaluate(async () => { + app.activeSessionId = 'mobile-claude-scroll-test'; + app.sessions.set('mobile-claude-scroll-test', { + id: 'mobile-claude-scroll-test', + mode: 'claude', + cliVersion: '2.1.220', + status: 'running', + }); + app.hideWelcome(); + + const sgrCalls: number[] = []; + const localCalls: number[] = []; + app._sendSyntheticSgrWheel = (_x: number, _y: number, lines: number) => { + sgrCalls.push(lines); + }; + app.terminal.scrollLines = (lines: number) => { + localCalls.push(lines); + }; + + const target = + document.querySelector('#terminalContainer .xterm-screen') ?? document.getElementById('terminalContainer'); + if (!target) return { sgrCalls, localCalls }; + const rect = target.getBoundingClientRect(); + const x = rect.left + rect.width / 2; + const startY = rect.top + Math.min(100, rect.height - 20); + const endY = startY + 100; + + function createTouch(y: number) { + return new Touch({ + identifier: 2, + target, + clientX: x, + clientY: y, + pageX: x, + pageY: y, + }); + } + + target.dispatchEvent( + new TouchEvent('touchstart', { + touches: [createTouch(startY)], + changedTouches: [createTouch(startY)], + bubbles: true, + cancelable: true, + }) + ); + target.dispatchEvent( + new TouchEvent('touchmove', { + touches: [createTouch(endY)], + changedTouches: [createTouch(endY)], + bubbles: true, + cancelable: true, + }) + ); + target.dispatchEvent( + new TouchEvent('touchend', { + touches: [], + changedTouches: [createTouch(endY)], + bubbles: true, + cancelable: true, + }) + ); + await new Promise((resolve) => setTimeout(resolve, 50)); + return { sgrCalls, localCalls }; + }); + + expect(result.sgrCalls.some((lines) => lines < 0)).toBe(true); + expect(result.localCalls).toEqual([]); + }); + + it('keeps typed phone text in the terminal local echo path', async () => { + await page.evaluate(() => { + window.__sentInputs = []; + app.activeSessionId = 'mobile-visible-input-test'; + app.sessions.set('mobile-visible-input-test', { + id: 'mobile-visible-input-test', + mode: 'codex', + status: 'running', + }); + app.hideWelcome(); + app._sendInputAsync = (_sessionId: string, input: string) => { + window.__sentInputs.push(input); + }; + const settings = app.loadAppSettingsFromStorage(); + settings.cjkInputEnabled = false; + settings.localEchoEnabled = true; + app.saveAppSettingsToStorage(settings); + app._updateCjkInputState(); + app._updateLocalEchoState(); + app.terminal.focus(); + }); + + await page.locator('#terminalContainer').tap({ position: { x: 40, y: 40 } }); + // The tap itself emits a valid SGR mouse report. This assertion is about + // typed text, so discard pointer setup traffic before entering text. + await page.evaluate(() => { + window.__sentInputs = []; + }); + await page.keyboard.type('find bug'); + + const beforeEnter = await page.evaluate(() => ({ + activeClass: document.activeElement?.className, + cjkDisplay: getComputedStyle(document.getElementById('cjkInput') as HTMLElement).display, + pendingText: app._localEchoOverlay?.pendingText, + sentInputs: window.__sentInputs, + })); + expect(beforeEnter.activeClass).toContain('xterm-helper-textarea'); + expect(beforeEnter.cjkDisplay).toBe('none'); + expect(beforeEnter.pendingText).toBe('find bug'); + expect(beforeEnter.sentInputs).toEqual([]); + + await page.keyboard.press('Enter'); + await page.waitForFunction(() => window.__sentInputs?.join('') === 'find bug\r'); + + const afterEnter = await page.evaluate(() => ({ + pendingText: app._localEchoOverlay?.pendingText, + sentInputs: window.__sentInputs, + })); + expect(afterEnter.pendingText).toBe(''); + expect(afterEnter.sentInputs.join('')).toBe('find bug\r'); + }); + + it('rehydrates an unsent session draft after the page is backgrounded', async () => { + const state = await page.evaluate(() => { + const sessionId = 'mobile-durable-draft-test'; + localStorage.removeItem('codeman:sessionDrafts'); + app._inputState.clearAll({ persist: false }); + app.activeSessionId = sessionId; + app.sessions.set(sessionId, { + id: sessionId, + mode: 'codex', + status: 'running', + }); + app._localEchoOverlay.clear(); + app._localEchoOverlay.appendText('first paragraph\n\nsecond paragraph'); + + window.dispatchEvent(new PageTransitionEvent('pagehide')); + const persisted = JSON.parse(localStorage.getItem('codeman:sessionDrafts') || '{}'); + + // Simulate the in-memory state loss caused by a discarded mobile tab. + app._localEchoOverlay.clear(); + app._inputState.clearAll({ persist: false }); + app._inputState.load(); + app._restoreSessionDraft(sessionId, false); + + return { + persisted: persisted.drafts?.[sessionId], + restored: app._localEchoOverlay.state, + }; + }); + + expect(state.persisted).toMatchObject({ + pendingText: 'first paragraph\n\nsecond paragraph', + flushedText: '', + cjkText: '', + }); + expect(state.restored).toMatchObject({ + pendingText: 'first paragraph\n\nsecond paragraph', + flushedLength: 0, + flushedText: '', + }); + }); + + it('keeps a switched-away draft editable after browser state is reloaded', async () => { + const state = await page.evaluate(() => { + const firstId = 'mobile-draft-session-a'; + const secondId = 'mobile-draft-session-b'; + localStorage.removeItem('codeman:sessionDrafts'); + app._inputState.clearAll({ persist: false }); + app.sessions.set(firstId, { id: firstId, mode: 'codex', status: 'running' }); + app.sessions.set(secondId, { id: secondId, mode: 'codex', status: 'running' }); + app.activeSessionId = firstId; + app._localEchoEnabled = true; + app._localEchoOverlay.clear(); + app._localEchoOverlay.appendText('switch-safe draft'); + const sent: string[] = []; + app._sendInputAsync = (_sessionId: string, input: string) => sent.push(input); + + app._cleanupPreviousSession(secondId); + app._inputState.persistNow(); + + // Rehydrate the input store exactly as a fresh browser page does. + app._localEchoOverlay.clear(); + app._inputState.clearAll({ persist: false }); + app._inputState.load(); + app.activeSessionId = firstId; + app._restoreSessionDraft(firstId, false); + const restoredDraft = app._inputState.get(firstId); + + return { + sent, + restored: app._localEchoOverlay.state, + flushedOffset: restoredDraft?.flushedText.length, + flushedText: restoredDraft?.flushedText, + }; + }); + + expect(state).toMatchObject({ + sent: ['switch-safe draft'], + restored: { + pendingText: '', + flushedLength: 'switch-safe draft'.length, + flushedText: 'switch-safe draft', + }, + flushedOffset: 'switch-safe draft'.length, + flushedText: 'switch-safe draft', + }); + }); + + it('removes a persisted draft once Enter submits it', async () => { + const state = await page.evaluate(() => { + const sessionId = 'mobile-cleared-draft-test'; + localStorage.removeItem('codeman:sessionDrafts'); + app._inputState.clearAll({ persist: false }); + app.activeSessionId = sessionId; + app.sessions.set(sessionId, { id: sessionId, mode: 'codex', status: 'running' }); + app._localEchoEnabled = true; + app._localEchoOverlay.clear(); + app._localEchoOverlay.appendText('submit me'); + app._captureActiveSessionDraft(); + app._inputState.persistNow(); + const before = JSON.parse(localStorage.getItem('codeman:sessionDrafts') || '{}'); + + app._sendInputAsync = () => {}; + app.terminal.input('\r'); + app._inputState.persistNow(); + const after = JSON.parse(localStorage.getItem('codeman:sessionDrafts') || '{}'); + + return { + before: before.drafts?.[sessionId]?.pendingText, + after: after.drafts?.[sessionId] ?? null, + }; + }); + + expect(state).toEqual({ + before: 'submit me', + after: null, + }); + }); + + it('shows and commits each live Android composition after the first word', async () => { + const preview = await page.evaluate(async () => { + app.activeSessionId = 'mobile-composition-test'; + app.sessions.set('mobile-composition-test', { + id: 'mobile-composition-test', + mode: 'claude', + status: 'running', + }); + app.hideWelcome(); + const settings = app.loadAppSettingsFromStorage(); + settings.cjkInputEnabled = false; + settings.localEchoEnabled = true; + app.saveAppSettingsToStorage(settings); + app._updateCjkInputState(); + app._updateLocalEchoState(); + app.terminal.reset(); + await new Promise((resolve) => { + app.terminal.write('\x1b[2J\x1b[H\u276f ', resolve); + }); + app._localEchoOverlay.clear(); + app._localEchoOverlay.appendText('first '); + + const textarea = app.terminal.textarea; + textarea.value = ''; + textarea.dispatchEvent(new CompositionEvent('compositionstart', { bubbles: true })); + textarea.value = 'sec'; + textarea.dispatchEvent( + new CompositionEvent('compositionupdate', { + bubbles: true, + data: 'sec', + }) + ); + + const overlay = Array.from(app.terminal.element.querySelector('.xterm-screen')?.children || []).find( + (element) => (element as HTMLElement).style.zIndex === '7' + ); + return { + pendingText: app._localEchoOverlay.pendingText, + compositionText: app._localEchoOverlay.compositionText, + visibleText: overlay?.textContent, + }; + }); + + expect(preview).toEqual({ + pendingText: 'first ', + compositionText: 'sec', + visibleText: expect.stringContaining('first sec'), + }); + + await page.evaluate(() => { + const textarea = app.terminal.textarea; + textarea.value = 'second'; + textarea.dispatchEvent( + new CompositionEvent('compositionupdate', { + bubbles: true, data: 'second', }) ); @@ -1216,6 +2230,9 @@ describe('Virtual Keyboard', () => { compositionText: app._localEchoOverlay.compositionText, nativeCompositionActive: nativeComposition?.classList.contains('active'), nativeCompositionDisplay: nativeComposition ? getComputedStyle(nativeComposition).display : null, + nativeCompositionOpacity: nativeComposition ? getComputedStyle(nativeComposition).opacity : null, + nativeCompositionMeasurable: (nativeComposition?.getBoundingClientRect().height || 0) > 0, + helperLineHeightPositive: parseFloat(app.terminal.textarea.style.lineHeight || '0') > 0, localEchoClass: app.terminal.element.classList.contains('codeman-local-echo'), }; }); @@ -1224,7 +2241,10 @@ describe('Virtual Keyboard', () => { pendingText: 'first second', compositionText: 'third', nativeCompositionActive: true, - nativeCompositionDisplay: 'none', + nativeCompositionDisplay: 'block', + nativeCompositionOpacity: '0', + nativeCompositionMeasurable: true, + helperLineHeightPositive: true, localEchoClass: true, }); @@ -1260,6 +2280,68 @@ describe('Virtual Keyboard', () => { }); }); + it('commits an Android word once when a delayed insertText follows composition finalization', async () => { + const state = await page.evaluate(async () => { + app.activeSessionId = 'mobile-composition-late-input-test'; + app.sessions.set('mobile-composition-late-input-test', { + id: 'mobile-composition-late-input-test', + mode: 'claude', + status: 'running', + }); + app.hideWelcome(); + const settings = app.loadAppSettingsFromStorage(); + settings.cjkInputEnabled = false; + settings.localEchoEnabled = true; + app.saveAppSettingsToStorage(settings); + app._updateCjkInputState(); + app._updateLocalEchoState(); + app.terminal.reset(); + await new Promise((resolve) => app.terminal.write('\x1b[2J\x1b[H\u276f ', resolve)); + app._localEchoOverlay.clear(); + + const textarea = app.terminal.textarea; + textarea.value = ''; + textarea.dispatchEvent(new CompositionEvent('compositionstart', { bubbles: true })); + textarea.value = 'its'; + textarea.dispatchEvent( + new CompositionEvent('compositionupdate', { + bubbles: true, + data: 'its', + }) + ); + textarea.dispatchEvent( + new CompositionEvent('compositionend', { + bubbles: true, + data: 'its', + }) + ); + + // xterm finalizes composition in a zero-delay task. Some Android + // keyboards then emit the same committed word as a late insertText. + await new Promise((resolve) => setTimeout(resolve, 20)); + textarea.value = 'its'; + textarea.dispatchEvent( + new InputEvent('input', { + bubbles: true, + composed: false, + inputType: 'insertText', + data: 'its', + }) + ); + await new Promise((resolve) => setTimeout(resolve, 20)); + + return { + pendingText: app._localEchoOverlay.pendingText, + compositionText: app._localEchoOverlay.compositionText, + }; + }); + + expect(state).toEqual({ + pendingText: 'its', + compositionText: '', + }); + }); + it('keeps routing Android textarea text after an interrupted composition', async () => { const state = await page.evaluate(async () => { app.activeSessionId = 'mobile-null-input-data-test'; @@ -1328,6 +2410,111 @@ describe('Virtual Keyboard', () => { }); }); + it('applies only the new Android helper-textarea mutation from cumulative values', async () => { + const state = await page.evaluate(async () => { + app.activeSessionId = 'mobile-cumulative-input-test'; + app.sessions.set('mobile-cumulative-input-test', { + id: 'mobile-cumulative-input-test', + mode: 'claude', + status: 'running', + }); + app.hideWelcome(); + const settings = app.loadAppSettingsFromStorage(); + settings.cjkInputEnabled = false; + settings.localEchoEnabled = true; + app.saveAppSettingsToStorage(settings); + app._updateCjkInputState(); + app._updateLocalEchoState(); + app._localEchoOverlay.clear(); + app._localEchoOverlay.appendText('seed'); + + const textarea = app.terminal.textarea; + const beginMutation = (value: string) => { + textarea.value = value; + textarea.setSelectionRange(value.length, value.length); + textarea.dispatchEvent( + new KeyboardEvent('keydown', { + bubbles: true, + key: 'Process', + keyCode: 229, + }) + ); + textarea.dispatchEvent( + new InputEvent('beforeinput', { + bubbles: true, + cancelable: true, + inputType: 'insertText', + data: null, + }) + ); + }; + + beginMutation('seed'); + textarea.value = 'seed next'; + textarea.setSelectionRange(textarea.value.length, textarea.value.length); + textarea.dispatchEvent( + new InputEvent('input', { + bubbles: true, + composed: true, + inputType: 'insertText', + data: null, + }) + ); + await Promise.resolve(); + const afterNullData = app._localEchoOverlay.pendingText; + + beginMutation('seed next'); + textarea.value = 'seed next more'; + textarea.setSelectionRange(textarea.value.length, textarea.value.length); + textarea.dispatchEvent( + new InputEvent('input', { + bubbles: true, + composed: false, + inputType: 'insertText', + data: 'seed next more', + }) + ); + await Promise.resolve(); + + return { + afterNullData, + pendingText: app._localEchoOverlay.pendingText, + helperValue: textarea.value, + }; + }); + + expect(state).toEqual({ + afterNullData: 'seed next', + pendingText: 'seed next more', + helperValue: '', + }); + }); + + it('filters xterm status replies without swallowing user navigation keys', async () => { + const state = await page.evaluate(() => { + const suppress = window.CodemanTerminalInput.shouldSuppressTerminalQueryResponse; + return { + deviceAttributes: suppress('\x1b[>0;276;0c'), + modeReport: suppress('\x1b[?2026;1$y'), + windowReport: suppress('\x1b[8;24;80t'), + statusString: suppress('\x1bP1$r0m\x1b\\'), + oscColor: suppress('\x1b]10;rgb:ffff/ffff/ffff\x1b\\'), + arrowUp: suppress('\x1b[A'), + escape: suppress('\x1b'), + }; + }); + + expect(state).toEqual({ + deviceAttributes: true, + modeReport: true, + windowReport: true, + statusString: true, + oscColor: true, + arrowUp: false, + escape: false, + }); + }); + it('routes Backspace past a stale autocomplete textarea buffer', async () => { const state = await page.evaluate(() => { window.__sentInputs = []; @@ -1407,20 +2594,28 @@ describe('Virtual Keyboard', () => { app._updateCjkInputState(); app._updateLocalEchoState(); app.terminal.reset(); + window.__draftPromptRow = Math.max(2, app.terminal.rows - 5); await new Promise((resolve) => { - app.terminal.write('\x1b[2J\x1b[H\u276f ', resolve); + app.terminal.write(`\x1b[2J\x1b[H\x1b[${window.__draftPromptRow + 1};1H\u276f `, resolve); }); app.terminal.focus(); }); await page.keyboard.type('keep this draft'); - await expect.poll(() => page.evaluate(() => app._localEchoOverlay?.state.promptPosition?.row)).toBe(0); + await expect + .poll(() => page.evaluate(() => app._localEchoOverlay?.state.promptPosition?.row)) + .toBe(await page.evaluate(() => window.__draftPromptRow)); await page.evaluate(() => { - app.batchTerminalWrite('\x1b[2J\x1b[Hagent output\r\ncontinues here\r\n\u276f '); + window.__updatedDraftPromptRow = Math.max(2, app.terminal.rows - 4); + app.batchTerminalWrite( + `\x1b[2J\x1b[Hagent output\r\ncontinues here\x1b[${window.__updatedDraftPromptRow + 1};1H\u276f ` + ); }); - await expect.poll(() => page.evaluate(() => app._localEchoOverlay?.state.promptPosition?.row)).toBe(2); + await expect + .poll(() => page.evaluate(() => app._localEchoOverlay?.state.promptPosition?.row)) + .toBe(await page.evaluate(() => window.__updatedDraftPromptRow)); const state = await page.evaluate(() => ({ pendingText: app._localEchoOverlay?.pendingText, sentInputs: window.__sentInputs, @@ -1642,9 +2837,102 @@ describe('Virtual Keyboard', () => { it('keeps back-to-back local echo submissions in text-then-Enter order', async () => { await page.evaluate(() => { window.__sentInputs = []; - app.activeSessionId = 'mobile-rapid-submit-test'; - app.sessions.set('mobile-rapid-submit-test', { - id: 'mobile-rapid-submit-test', + app.activeSessionId = 'mobile-rapid-submit-test'; + app.sessions.set('mobile-rapid-submit-test', { + id: 'mobile-rapid-submit-test', + mode: 'codex', + status: 'running', + }); + app.hideWelcome(); + app._sendInputAsync = (_sessionId: string, input: string) => { + window.__sentInputs.push(input); + }; + const settings = app.loadAppSettingsFromStorage(); + settings.cjkInputEnabled = false; + settings.localEchoEnabled = true; + app.saveAppSettingsToStorage(settings); + app._updateCjkInputState(); + app._updateLocalEchoState(); + app.terminal.focus(); + }); + + await page.keyboard.type('first'); + await page.keyboard.press('Enter'); + await page.keyboard.type('second'); + await page.keyboard.press('Enter'); + + await expect.poll(() => page.evaluate(() => window.__sentInputs)).toEqual(['first', '\r', 'second', '\r']); + }); + + it('inserts Android keyCode 229 line-break input into the current draft', async () => { + const state = await page.evaluate(async () => { + window.__sentInputs = []; + app.activeSessionId = 'mobile-android-enter-test'; + app.sessions.set('mobile-android-enter-test', { + id: 'mobile-android-enter-test', + mode: 'codex', + status: 'running', + }); + app.hideWelcome(); + app._sendInputAsync = (_sessionId: string, input: string) => { + window.__sentInputs.push(input); + }; + const settings = app.loadAppSettingsFromStorage(); + settings.cjkInputEnabled = false; + settings.localEchoEnabled = true; + app.saveAppSettingsToStorage(settings); + app._updateCjkInputState(); + app._updateLocalEchoState(); + app.terminal.reset(); + await new Promise((resolve) => { + app.terminal.write('\x1b[2J\x1b[H\u276f ', resolve); + }); + app._localEchoOverlay.clear(); + + app.terminal._core.coreService.triggerDataEvent('stringA stringB', true); + const textarea = app.terminal.textarea; + textarea.dispatchEvent( + new KeyboardEvent('keydown', { + bubbles: true, + key: 'Enter', + code: 'Enter', + keyCode: 229, + }) + ); + textarea.dispatchEvent( + new InputEvent('beforeinput', { + bubbles: true, + cancelable: true, + inputType: 'insertLineBreak', + }) + ); + textarea.dispatchEvent( + new InputEvent('input', { + bubbles: true, + inputType: 'insertLineBreak', + }) + ); + app.terminal._core.coreService.triggerDataEvent('stringC', true); + await Promise.resolve(); + + return { + sentInputs: window.__sentInputs, + pendingText: app._localEchoOverlay.pendingText, + }; + }); + + expect(state).toEqual({ + sentInputs: [], + pendingText: 'stringA stringB\nstringC', + }); + }); + + it('inserts an Android line break when compositionend is omitted', async () => { + const state = await page.evaluate(async () => { + window.__sentInputs = []; + app.activeSessionId = 'mobile-android-composing-enter-test'; + app.sessions.set('mobile-android-composing-enter-test', { + id: 'mobile-android-composing-enter-test', mode: 'codex', status: 'running', }); @@ -1658,15 +2946,53 @@ describe('Virtual Keyboard', () => { app.saveAppSettingsToStorage(settings); app._updateCjkInputState(); app._updateLocalEchoState(); - app.terminal.focus(); - }); + app.terminal.reset(); + await new Promise((resolve) => { + app.terminal.write('\x1b[2J\x1b[H\u276f ', resolve); + }); + app._localEchoOverlay.clear(); - await page.keyboard.type('first'); - await page.keyboard.press('Enter'); - await page.keyboard.type('second'); - await page.keyboard.press('Enter'); + app.terminal._core.coreService.triggerDataEvent('stringA ', true); + const textarea = app.terminal.textarea; + textarea.dispatchEvent(new CompositionEvent('compositionstart', { bubbles: true })); + textarea.dispatchEvent( + new CompositionEvent('compositionupdate', { + bubbles: true, + data: 'stringB', + }) + ); + textarea.dispatchEvent( + new KeyboardEvent('keydown', { + bubbles: true, + key: 'Enter', + code: 'Enter', + keyCode: 229, + isComposing: true, + }) + ); + textarea.dispatchEvent( + new InputEvent('beforeinput', { + bubbles: true, + cancelable: true, + inputType: 'insertLineBreak', + isComposing: true, + }) + ); + await new Promise((resolve) => setTimeout(resolve, 100)); + app.terminal._core.coreService.triggerDataEvent('stringC', true); - await expect.poll(() => page.evaluate(() => window.__sentInputs)).toEqual(['first', '\r', 'second', '\r']); + return { + sentInputs: window.__sentInputs, + pendingText: app._localEchoOverlay.pendingText, + compositionText: app._localEchoOverlay.compositionText, + }; + }); + + expect(state).toEqual({ + sentInputs: [], + pendingText: 'stringA stringB\nstringC', + compositionText: '', + }); }); it('flushes local echo before mobile-control Enter and accepts the next draft', async () => { @@ -1756,13 +3082,19 @@ describe('Virtual Keyboard', () => { expect(loadingState.sentInputs).toEqual([]); await page.evaluate(async () => { + window.__loadedPromptRow = Math.max(2, app.terminal.rows - 5); await new Promise((resolve) => { - app.terminal.write('\x1b[2J\x1b[Hagent output\r\nready\r\n\u203a ', resolve); + app.terminal.write( + `\x1b[2J\x1b[Hagent output\r\nready\x1b[${window.__loadedPromptRow + 1};1H\u203a `, + resolve + ); }); app._finishBufferLoad('mobile-initial-draft-load'); }); - await expect.poll(() => page.evaluate(() => app._localEchoOverlay?.state.promptPosition?.row)).toBe(2); + await expect + .poll(() => page.evaluate(() => app._localEchoOverlay?.state.promptPosition?.row)) + .toBe(await page.evaluate(() => window.__loadedPromptRow)); const readyState = await page.evaluate(() => ({ pendingText: app._localEchoOverlay?.pendingText, visible: app._localEchoOverlay?.state.visible, @@ -1791,7 +3123,10 @@ describe('Virtual Keyboard', () => { app.terminal.reset(); window.__cursorFallbackRow = Math.max(0, app.terminal.rows - 2); await new Promise((resolve) => { - app.terminal.write(`\x1b[${window.__cursorFallbackRow + 1};1Hworking without prompt marker`, resolve); + app.terminal.write( + `\x1b[2J\x1b[Hworking without prompt marker\x1b[${window.__cursorFallbackRow + 1};1H`, + resolve + ); }); app.terminal.focus(); }); @@ -1810,6 +3145,313 @@ describe('Virtual Keyboard', () => { expect(state.overlayState?.visible).toBe(true); expect(state.overlayState?.promptPosition?.row).toBe(state.expectedRow); }); + + it('ignores a stale historical prompt above the live input cursor', async () => { + await page.evaluate(async () => { + app.activeSessionId = 'mobile-stale-prompt-test'; + app.sessions.set('mobile-stale-prompt-test', { + id: 'mobile-stale-prompt-test', + mode: 'codex', + status: 'running', + }); + app.hideWelcome(); + const settings = app.loadAppSettingsFromStorage(); + settings.cjkInputEnabled = false; + settings.localEchoEnabled = true; + app.saveAppSettingsToStorage(settings); + app._updateCjkInputState(); + app._updateLocalEchoState(); + app.terminal.reset(); + app._localEchoOverlay.clear(); + window.__liveInputRow = Math.max(2, app.terminal.rows - 2); + await new Promise((resolve) => { + app.terminal.write( + `\x1b[2J\x1b[H\u276f old submitted input\r\nagent output\r\nworking without prompt marker\x1b[${window.__liveInputRow + 1};1H`, + resolve + ); + }); + app.terminal.focus(); + }); + + await page.keyboard.type('abc'); + + const state = await page.evaluate(() => ({ + pendingText: app._localEchoOverlay?.pendingText, + promptRow: app._localEchoOverlay?.state.promptPosition?.row, + expectedRow: window.__liveInputRow, + })); + + expect(state.pendingText).toBe('abc'); + expect(state.promptRow).toBe(state.expectedRow); + }); + + it('prefers the live cursor when a short keyboard viewport makes a stale prompt look current', async () => { + await page.evaluate(async () => { + app.activeSessionId = 'mobile-short-viewport-prompt-test'; + app.sessions.set('mobile-short-viewport-prompt-test', { + id: 'mobile-short-viewport-prompt-test', + mode: 'codex', + status: 'running', + }); + app.hideWelcome(); + const settings = app.loadAppSettingsFromStorage(); + settings.cjkInputEnabled = false; + settings.localEchoEnabled = true; + app.saveAppSettingsToStorage(settings); + app._updateCjkInputState(); + app._updateLocalEchoState(); + app.terminal.resize(app.terminal.cols, 6); + app.terminal.reset(); + app._localEchoOverlay.clear(); + app._localEchoPromptAnchor = null; + await new Promise((resolve) => { + app.terminal.write('\x1b[2J\x1b[H\u276f old submitted input\x1b[6;3H', resolve); + }); + app.terminal.focus(); + }); + + await page.keyboard.type('abc'); + + const state = await page.evaluate(() => ({ + pendingText: app._localEchoOverlay?.pendingText, + promptRow: app._localEchoOverlay?.state.promptPosition?.row, + cursorRow: app.terminal.buffer.active.cursorY, + })); + + expect(state.pendingText).toBe('abc'); + expect(state.promptRow).toBe(state.cursorRow); + expect(state.cursorRow).toBe(5); + }); + + it('discards a remembered prompt anchor that no longer fits after keyboard shrink', async () => { + await page.evaluate(async () => { + app.activeSessionId = 'mobile-invalid-prompt-anchor-test'; + app.sessions.set('mobile-invalid-prompt-anchor-test', { + id: 'mobile-invalid-prompt-anchor-test', + mode: 'claude', + status: 'running', + }); + app.hideWelcome(); + const settings = app.loadAppSettingsFromStorage(); + settings.cjkInputEnabled = false; + settings.localEchoEnabled = true; + app.saveAppSettingsToStorage(settings); + app._updateCjkInputState(); + app._updateLocalEchoState(); + app.terminal.resize(app.terminal.cols, 6); + app.terminal.reset(); + app._localEchoOverlay.clear(); + app._localEchoPromptAnchor = { + sessionId: 'mobile-invalid-prompt-anchor-test', + rowsFromBottom: 7, + col: 2, + }; + await new Promise((resolve) => { + app.terminal.write('\x1b[2J\x1b[H\x1b[3;1Hagent output\x1b[6;3H', resolve); + }); + app.terminal.focus(); + }); + + await page.keyboard.type('abc'); + + const state = await page.evaluate(() => ({ + pendingText: app._localEchoOverlay?.pendingText, + promptRow: app._localEchoOverlay?.state.promptPosition?.row, + cursorRow: app.terminal.buffer.active.cursorY, + })); + + expect(state.pendingText).toBe('abc'); + expect(state.promptRow).toBe(state.cursorRow); + expect(state.cursorRow).toBe(5); + }); + + it('uses a bottom fallback for the first mobile draft when the replay prompt remains at row zero', async () => { + await page.evaluate(async () => { + app.activeSessionId = 'mobile-row-zero-prompt-test'; + app.sessions.set('mobile-row-zero-prompt-test', { + id: 'mobile-row-zero-prompt-test', + mode: 'codex', + status: 'running', + }); + app.hideWelcome(); + const settings = app.loadAppSettingsFromStorage(); + settings.cjkInputEnabled = false; + settings.localEchoEnabled = true; + app.saveAppSettingsToStorage(settings); + app._updateCjkInputState(); + app._updateLocalEchoState(); + app.terminal.reset(); + app._localEchoOverlay.clear(); + app._localEchoPromptAnchor = null; + window.__fallbackPromptRow = Math.max(0, app.terminal.rows - 5); + await new Promise((resolve) => { + app.terminal.write('\x1b[2J\x1b[H\u276f replayed prompt\x1b[H', resolve); + }); + app.terminal.focus(); + }); + + await page.keyboard.type('first draft'); + + const state = await page.evaluate(() => ({ + pendingText: app._localEchoOverlay?.pendingText, + promptRow: app._localEchoOverlay?.state.promptPosition?.row, + expectedRow: window.__fallbackPromptRow, + })); + + expect(state.pendingText).toBe('first draft'); + expect(state.promptRow).toBe(state.expectedRow); + }); + + it('keeps the first post-Enter draft at the remembered prompt while a resized frame is stale', async () => { + await page.evaluate(async () => { + window.__sentInputs = []; + app.activeSessionId = 'mobile-stale-resize-prompt-test'; + app.sessions.set('mobile-stale-resize-prompt-test', { + id: 'mobile-stale-resize-prompt-test', + mode: 'claude', + status: 'running', + }); + app.hideWelcome(); + app._sendInputAsync = (_sessionId: string, input: string) => { + window.__sentInputs.push(input); + }; + const settings = app.loadAppSettingsFromStorage(); + settings.cjkInputEnabled = false; + settings.localEchoEnabled = true; + app.saveAppSettingsToStorage(settings); + app._updateCjkInputState(); + app._updateLocalEchoState(); + app.terminal.reset(); + app._localEchoOverlay.clear(); + window.__rememberedPromptRow = Math.max(2, app.terminal.rows - 5); + await new Promise((resolve) => { + app.terminal.write(`\x1b[2J\x1b[H\x1b[${window.__rememberedPromptRow + 1};1H\u276f `, resolve); + }); + window.__promptAnchorCaptured = app._captureLocalEchoPromptAnchor?.(); + app.terminal._core.coreService.triggerDataEvent('stringA', true); + app.terminal._core.coreService.triggerDataEvent('\r', true); + + await new Promise((resolve) => { + app.terminal.write('\x1b[2J\x1b[H\u276f old submitted input\x1b[H', resolve); + }); + app.terminal.focus(); + }); + + await page.keyboard.type('first draft'); + + const state = await page.evaluate(() => ({ + pendingText: app._localEchoOverlay?.pendingText, + promptRow: app._localEchoOverlay?.state.promptPosition?.row, + expectedRow: window.__rememberedPromptRow, + captured: window.__promptAnchorCaptured, + sentInputs: window.__sentInputs, + })); + + expect(state).toMatchObject({ + pendingText: 'first draft', + captured: true, + promptRow: state.expectedRow, + sentInputs: ['stringA', '\r'], + }); + }); + + it('does not paint a mobile draft over output while the resized prompt frame is pending', async () => { + await page.evaluate(async () => { + app.activeSessionId = 'mobile-occupied-anchor-test'; + app.sessions.set('mobile-occupied-anchor-test', { + id: 'mobile-occupied-anchor-test', + mode: 'codex', + status: 'running', + }); + app.hideWelcome(); + const settings = app.loadAppSettingsFromStorage(); + settings.cjkInputEnabled = false; + settings.localEchoEnabled = true; + app.saveAppSettingsToStorage(settings); + app._updateCjkInputState(); + app._updateLocalEchoState(); + app.terminal.reset(); + app._localEchoOverlay.clear(); + window.__occupiedAnchorRow = Math.max(2, app.terminal.rows - 3); + await new Promise((resolve) => { + app.terminal.write(`\x1b[2J\x1b[H\x1b[${window.__occupiedAnchorRow + 1};1H\u276f `, resolve); + }); + window.__occupiedAnchorCaptured = app._captureLocalEchoPromptAnchor?.(); + await new Promise((resolve) => { + app.terminal.write(`\x1b[2J\x1b[Hagent output\x1b[${window.__occupiedAnchorRow + 1};1Hstill output`, resolve); + }); + app.terminal.focus(); + }); + + await page.keyboard.type('held draft'); + + const pendingFrame = await page.evaluate(() => ({ + captured: window.__occupiedAnchorCaptured, + pendingText: app._localEchoOverlay.pendingText, + visible: app._localEchoOverlay.state.visible, + promptRow: app._localEchoOverlay.state.promptPosition?.row ?? null, + })); + expect(pendingFrame).toEqual({ + captured: true, + pendingText: 'held draft', + visible: false, + promptRow: null, + }); + + await page.evaluate(async () => { + await new Promise((resolve) => { + app.terminal.write(`\x1b[2J\x1b[H\x1b[${window.__occupiedAnchorRow + 1};1H\u276f `, resolve); + }); + app._localEchoOverlay.rerender(); + }); + + await expect + .poll(() => page.evaluate(() => app._localEchoOverlay.state.promptPosition?.row)) + .toBe(await page.evaluate(() => window.__occupiedAnchorRow)); + await expect.poll(() => page.evaluate(() => app._localEchoOverlay.state.visible)).toBe(true); + }); + + it('follows the live mobile cursor when it diverges from a remembered anchor', async () => { + await page.evaluate(async () => { + app.activeSessionId = 'mobile-remembered-anchor-drift-test'; + app.sessions.set('mobile-remembered-anchor-drift-test', { + id: 'mobile-remembered-anchor-drift-test', + mode: 'claude', + status: 'running', + }); + app.hideWelcome(); + const settings = app.loadAppSettingsFromStorage(); + settings.cjkInputEnabled = false; + settings.localEchoEnabled = true; + app.saveAppSettingsToStorage(settings); + app._updateCjkInputState(); + app._updateLocalEchoState(); + app.terminal.reset(); + app._localEchoOverlay.clear(); + window.__stableAnchorRow = Math.max(2, app.terminal.rows - 3); + window.__driftCursorRow = Math.max(2, app.terminal.rows - 8); + await new Promise((resolve) => { + app.terminal.write(`\x1b[2J\x1b[H\x1b[${window.__stableAnchorRow + 1};1H\u276f `, resolve); + }); + window.__stableAnchorCaptured = app._captureLocalEchoPromptAnchor?.(); + await new Promise((resolve) => { + app.terminal.write(`\x1b[2J\x1b[Hagent output\x1b[${window.__driftCursorRow + 1};1H`, resolve); + }); + app.terminal.focus(); + }); + + await page.keyboard.type('stable draft'); + + const state = await page.evaluate(() => ({ + captured: window.__stableAnchorCaptured, + promptRow: app._localEchoOverlay.state.promptPosition?.row, + expectedRow: window.__driftCursorRow, + })); + expect(state).toMatchObject({ + captured: true, + promptRow: state.expectedRow, + }); + }); }); // ── Cross-device keyboard behavior ──────────────────────────────────── diff --git a/test/mobile/navigation-pad.test.ts b/test/mobile/navigation-pad.test.ts index 9c86957c..a930ea3d 100644 --- a/test/mobile/navigation-pad.test.ts +++ b/test/mobile/navigation-pad.test.ts @@ -48,8 +48,12 @@ describe('Mobile Navigation Pad', () => { resizeLog.length = 0; await page.evaluate(` document.getElementById('appSettingsModal')?.classList.remove('active'); - document.body.classList.remove('keyboard-visible'); + document.body.classList.remove('keyboard-visible', 'keyboard-opening'); KeyboardHandler.keyboardVisible = false; + KeyboardHandler._terminalInputRequested = false; + clearTimeout(KeyboardHandler._keyboardOpeningTimer); + KeyboardHandler._keyboardOpeningTimer = null; + KeyboardHandler._discardTerminalFrameCover?.(); app.sendResize = function(_sessionId, options = {}) { window.__recordMobileNavigationResize(options); return Promise.resolve(true); @@ -88,8 +92,9 @@ describe('Mobile Navigation Pad', () => { expect((navBox?.y ?? 0) + (navBox?.height ?? 0)).toBeLessThanOrEqual((toolbarBox?.y ?? 0) + 1); expect(navBox?.height).toBe(48); - const buttons = navigation.locator('button'); - expect(await buttons.count()).toBe(5); + expect(await navigation.locator('button').count()).toBe(6); + expect(await navigation.locator('[data-nav-key="jump-bottom"]').isHidden()).toBe(true); + const buttons = navigation.locator('button:not([data-nav-key="jump-bottom"])'); const buttonBoxes = []; for (let index = 0; index < 5; index++) { const box = await buttons.nth(index).boundingBox(); @@ -139,6 +144,44 @@ describe('Mobile Navigation Pad', () => { } }); + it('shows jump-to-latest above the three central controls only while reading history', async () => { + const navigation = page.locator(SELECTORS.MOBILE_NAVIGATION); + const jump = navigation.locator('[data-nav-key="jump-bottom"]'); + + await page.evaluate(async () => { + app.terminal.reset(); + const lines = Array.from({ length: app.terminal.rows + 24 }, (_, index) => `history line ${index + 1}`).join( + '\r\n' + ); + await new Promise((resolve) => app.terminal.write(lines, resolve)); + }); + expect(await jump.isHidden()).toBe(true); + + await page.evaluate(() => app._scrollTerminalLines(-8)); + await page.waitForFunction( + () => !(document.querySelector('[data-nav-key="jump-bottom"]') as HTMLButtonElement)?.hidden + ); + + const navBox = await navigation.boundingBox(); + const jumpBox = await jump.boundingBox(); + const upBox = await navigation.locator('[data-nav-key="up"]').boundingBox(); + const downBox = await navigation.locator('[data-nav-key="down"]').boundingBox(); + expect(navBox).not.toBeNull(); + expect(jumpBox).not.toBeNull(); + expect(jumpBox?.height).toBeGreaterThanOrEqual(44); + expect((jumpBox?.y ?? 0) + (jumpBox?.height ?? 0)).toBeLessThanOrEqual((navBox?.y ?? 0) - 4); + + const navigationCenter = (navBox?.x ?? 0) + (navBox?.width ?? 0) / 2; + const centralControlsCenter = (upBox?.x ?? 0) + ((downBox?.x ?? 0) + (downBox?.width ?? 0) - (upBox?.x ?? 0)) / 2; + const jumpCenter = (jumpBox?.x ?? 0) + (jumpBox?.width ?? 0) / 2; + expect(Math.abs(navigationCenter - centralControlsCenter)).toBeLessThanOrEqual(1); + expect(Math.abs(jumpCenter - centralControlsCenter)).toBeLessThanOrEqual(1); + + await jump.click(); + await page.waitForFunction(() => app.isTerminalAtBottom()); + expect(await jump.isHidden()).toBe(true); + }); + it('sends raw Up without focusing xterm or showing the keyboard', async () => { await page.evaluate(` app.terminal.focus(); @@ -361,6 +404,7 @@ describe('Mobile Navigation Pad', () => { const viewportHeight = await page.evaluate(() => window.visualViewport?.height); await page.evaluate(` KeyboardHandler.keyboardVisible = true; + KeyboardHandler._terminalInputRequested = true; document.body.classList.add('keyboard-visible'); KeyboardHandler.onKeyboardShow(); `); @@ -406,7 +450,12 @@ describe('Mobile Navigation Pad', () => { expect(keyboardLayout.primaryButtonsContained).toBe(true); await vi.waitFor(() => { - expect(resizeLog).toContainEqual({ takeControl: true, refit: false }); + expect(resizeLog).toContainEqual( + expect.objectContaining({ + takeControl: true, + refit: false, + }) + ); }); resizeLog.length = 0; inputLog.length = 0; diff --git a/test/mobile/vitest.config.ts b/test/mobile/vitest.config.ts index 7b5cfb8b..a5ed8e9e 100644 --- a/test/mobile/vitest.config.ts +++ b/test/mobile/vitest.config.ts @@ -12,6 +12,7 @@ export default defineConfig({ setupFiles: ['./test/setup.ts', './test/mobile/setup.ts'], fileParallelism: false, testTimeout: 60_000, + hookTimeout: 60_000, teardownTimeout: 60_000, }, }); diff --git a/test/server-init-lifecycle.test.ts b/test/server-init-lifecycle.test.ts new file mode 100644 index 00000000..02da7daa --- /dev/null +++ b/test/server-init-lifecycle.test.ts @@ -0,0 +1,144 @@ +/** + * @fileoverview Client init lifecycle regression tests. + * + * A same-process SSE reconnect must reconcile metadata without destroying and + * replaying the active terminal. A changed process epoch must persist input and + * reload once so an already-open browser does not keep running stale assets. + */ +import { readFileSync } from 'node:fs'; +import { performance } from 'node:perf_hooks'; +import { resolve } from 'node:path'; +import vm from 'node:vm'; +import { describe, expect, it, vi } from 'vitest'; + +type InitAction = 'legacy' | 'initial' | 'reconnect' | 'reload'; + +type InitApp = { + _serverStartedAt: number | null; + _serverReloadRequested: boolean; + _serverRestartRecovery: boolean; + _initGeneration: number; + _handleServerInitEpoch: (serverStartedAt: unknown) => InitAction; + _reconcileSameServerInit: (data: unknown) => void; + handleInit: (data: Record) => void; + _onSessionTerminal: (data: { id: string; data: string }) => void; + _clearTimer: ReturnType; + _captureActiveSessionDraft: ReturnType; + _persistReliableNow: ReturnType; + _releaseTerminalTransportFreeze: ReturnType; + batchTerminalWrite: ReturnType; + activeSessionId: string | null; + _inputState: { persistNow: ReturnType }; + _resetAllAppState: ReturnType; +}; + +function loadHarness() { + const reload = vi.fn(); + const sessionStorage = { + getItem: vi.fn(), + setItem: vi.fn(), + removeItem: vi.fn(), + }; + const constants = readFileSync(resolve(import.meta.dirname, '../src/web/public/constants.js'), 'utf8'); + const source = readFileSync(resolve(import.meta.dirname, '../src/web/public/app.js'), 'utf8'); + const context = vm.createContext({ + console, + performance, + setInterval: vi.fn(), + clearInterval: vi.fn(), + setTimeout: vi.fn(), + clearTimeout: vi.fn(), + requestAnimationFrame: vi.fn(), + HTMLCanvasElement: class HTMLCanvasElement {}, + location: { protocol: 'https:', host: 'test.local' }, + fetch: vi.fn(), + document: { addEventListener: vi.fn() }, + localStorage: { + length: 0, + key: vi.fn(), + getItem: vi.fn(), + setItem: vi.fn(), + removeItem: vi.fn(), + }, + sessionStorage, + window: { + addEventListener: vi.fn(), + removeEventListener: vi.fn(), + location: { reload }, + }, + MobileDetection: {}, + }); + vm.runInContext(`${constants}\n${source}\nglobalThis.__CodemanApp = CodemanApp;`, context); + const CodemanApp = (context as { __CodemanApp: new () => unknown }).__CodemanApp; + return { CodemanApp, reload, sessionStorage }; +} + +function makeApp(CodemanApp: new () => unknown): InitApp { + const app = Object.create((CodemanApp as { prototype: object }).prototype) as InitApp; + app._serverStartedAt = null; + app._serverReloadRequested = false; + app._serverRestartRecovery = false; + app._initGeneration = 1; + app._clearTimer = vi.fn(); + app._captureActiveSessionDraft = vi.fn(); + app._persistReliableNow = vi.fn(); + app._releaseTerminalTransportFreeze = vi.fn(); + app.batchTerminalWrite = vi.fn(); + app.activeSessionId = 'session-1'; + app._inputState = { persistNow: vi.fn() }; + app._resetAllAppState = vi.fn(); + return app; +} + +describe('client server-init lifecycle', () => { + it('distinguishes initial load and same-process reconnect by server epoch', () => { + const { CodemanApp } = loadHarness(); + const app = makeApp(CodemanApp); + + expect(app._handleServerInitEpoch(undefined)).toBe('legacy'); + expect(app._handleServerInitEpoch(100)).toBe('initial'); + expect(app._handleServerInitEpoch(100)).toBe('reconnect'); + }); + + it('persists editable and queued input before reloading stale assets once', () => { + const { CodemanApp, reload, sessionStorage } = loadHarness(); + const app = makeApp(CodemanApp); + app._serverStartedAt = 100; + + expect(app._handleServerInitEpoch(200)).toBe('reload'); + expect(app._captureActiveSessionDraft).toHaveBeenCalledOnce(); + expect(app._inputState.persistNow).toHaveBeenCalledOnce(); + expect(app._persistReliableNow).toHaveBeenCalledOnce(); + expect(sessionStorage.setItem).toHaveBeenCalledWith('codeman-server-restart-recovery', '1'); + expect(reload).toHaveBeenCalledOnce(); + + expect(app._handleServerInitEpoch(300)).toBe('reload'); + expect(reload).toHaveBeenCalledOnce(); + }); + + it('routes a same-process init through metadata reconciliation without terminal reset', () => { + const { CodemanApp } = loadHarness(); + const app = makeApp(CodemanApp); + const reconcile = vi.fn(); + app._serverStartedAt = 100; + app._reconcileSameServerInit = reconcile; + + const snapshot = { serverStartedAt: 100, sessions: [] }; + app.handleInit(snapshot); + + expect(reconcile).toHaveBeenCalledWith(snapshot); + expect(app._releaseTerminalTransportFreeze).toHaveBeenCalledWith('session-1'); + expect(app._resetAllAppState).not.toHaveBeenCalled(); + expect(app._initGeneration).toBe(1); + }); + + it('drops terminal output after a replacement page has been requested', () => { + const { CodemanApp } = loadHarness(); + const app = makeApp(CodemanApp); + app._serverReloadRequested = true; + + app._onSessionTerminal({ id: 'session-1', data: 'stale reconnect redraw' }); + + expect(app.batchTerminalWrite).not.toHaveBeenCalled(); + }); +}); diff --git a/test/terminal-buffer-flush.test.ts b/test/terminal-buffer-flush.test.ts index c620fa3f..6f6e243c 100644 --- a/test/terminal-buffer-flush.test.ts +++ b/test/terminal-buffer-flush.test.ts @@ -41,6 +41,8 @@ function loadTerminalMixin(): Record { setInterval: vi.fn(), clearInterval: vi.fn(), requestAnimationFrame: vi.fn(), + TextDecoder, + TERMINAL_CHUNK_SIZE: 32 * 1024, CodemanApp: FakeCodemanApp, // terminal-ui.js IIFE is invoked with `window`; it reads/writes a few globals. window: { addEventListener: vi.fn(), removeEventListener: vi.fn() }, @@ -56,10 +58,48 @@ type BufferLoadApp = { _bufferLoadSeq: number; _bufferLoadOwner: string | null; _isLoadingBuffer: boolean; - _loadBufferQueue: string[] | null; - batchTerminalWrite: (data: string) => void; + _loadBufferQueue: Array | null; + batchTerminalWrite: (data: string, cursor?: TerminalCursor) => void; _beginBufferLoad: (owner?: string) => string; - _finishBufferLoad: (owner?: string, opts?: { flushQueued?: boolean }) => boolean; + _finishBufferLoad: (owner?: string, opts?: { flushQueued?: boolean; snapshotCursor?: TerminalCursor }) => boolean; + _isTerminalCursor: (cursor: unknown) => boolean; + _terminalEventAfterSnapshot: ( + item: { data: string; cursor: TerminalCursor }, + snapshotCursor: TerminalCursor + ) => { data: string; cursor: TerminalCursor } | null; + _terminalSnapshotCursorFromHeaders: (headers: Headers) => TerminalCursor | null; + _terminalHistoryPageFromHeaders: (headers: Headers) => { + start: number; + end: number; + total: number; + hasMoreBefore: boolean; + hasMoreAfter: boolean; + origin: string; + } | null; + _readTerminalSnapshotResponse: ( + response: Response, + options?: { + paint?: boolean; + loadOwner?: string; + chunkSize?: number; + beforePaint?: () => void; + isCancelled?: () => boolean; + followBottom?: boolean; + } + ) => Promise<{ + terminalBuffer: string; + cursor?: TerminalCursor; + streamed: boolean; + painted: boolean; + aborted: boolean; + }>; +}; + +type TerminalCursor = { + stream: string; + generation: number; + start: number; + end: number; }; /** @@ -80,14 +120,24 @@ function makeApp() { }), _beginBufferLoad: mixin._beginBufferLoad as BufferLoadApp['_beginBufferLoad'], _finishBufferLoad: mixin._finishBufferLoad as BufferLoadApp['_finishBufferLoad'], + _isTerminalCursor: mixin._isTerminalCursor as BufferLoadApp['_isTerminalCursor'], + _terminalEventAfterSnapshot: mixin._terminalEventAfterSnapshot as BufferLoadApp['_terminalEventAfterSnapshot'], + _terminalSnapshotCursorFromHeaders: + mixin._terminalSnapshotCursorFromHeaders as BufferLoadApp['_terminalSnapshotCursorFromHeaders'], + _terminalHistoryPageFromHeaders: + mixin._terminalHistoryPageFromHeaders as BufferLoadApp['_terminalHistoryPageFromHeaders'], + _readTerminalSnapshotResponse: + mixin._readTerminalSnapshotResponse as BufferLoadApp['_readTerminalSnapshotResponse'], }; return { app, writes }; } /** Simulate live SSE events arriving while a buffer load is in progress (the queue path). */ -function pushWhileLoading(app: BufferLoadApp, data: string) { +function pushWhileLoading(app: BufferLoadApp, data: string, cursor?: TerminalCursor) { // Mirrors batchTerminalWrite's queue branch: if loading, push to the queue. - if (app._isLoadingBuffer && app._loadBufferQueue) app._loadBufferQueue.push(data); + if (app._isLoadingBuffer && app._loadBufferQueue) { + app._loadBufferQueue.push(cursor ? { data, cursor } : data); + } } describe('buffer-load flush (COD-144)', () => { @@ -170,6 +220,167 @@ describe('buffer-load flush (COD-144)', () => { expect(writes).toEqual([]); }); + it('discards cursor-covered events and replays only a batch suffix beyond the snapshot', () => { + const { app, writes } = makeApp(); + const owner = app._beginBufferLoad('cursor-overlap'); + pushWhileLoading(app, 'covered', { stream: 'stream-a', generation: 1, start: 0, end: 7 }); + pushWhileLoading(app, 'abcdefgh', { stream: 'stream-a', generation: 1, start: 7, end: 15 }); + pushWhileLoading(app, 'after', { stream: 'stream-a', generation: 1, start: 15, end: 20 }); + + expect( + app._finishBufferLoad(owner, { + snapshotCursor: { stream: 'stream-a', generation: 1, start: 0, end: 10 }, + }) + ).toBe(true); + + expect(writes).toEqual(['defgh', 'after']); + expect(app.batchTerminalWrite).toHaveBeenNthCalledWith(1, 'defgh', { + stream: 'stream-a', + generation: 1, + start: 10, + end: 15, + }); + expect(app.batchTerminalWrite).toHaveBeenNthCalledWith(2, 'after', { + stream: 'stream-a', + generation: 1, + start: 15, + end: 20, + }); + }); + + it('drops stale stream/generation events and preserves output from a newer generation', () => { + const { app, writes } = makeApp(); + const owner = app._beginBufferLoad('cursor-generation'); + pushWhileLoading(app, 'old stream', { stream: 'old-stream', generation: 9, start: 0, end: 10 }); + pushWhileLoading(app, 'old generation', { stream: 'stream-a', generation: 1, start: 0, end: 14 }); + pushWhileLoading(app, 'new generation', { stream: 'stream-a', generation: 3, start: 0, end: 14 }); + + app._finishBufferLoad(owner, { + snapshotCursor: { stream: 'stream-a', generation: 2, start: 0, end: 5 }, + }); + + expect(writes).toEqual(['new generation']); + }); + + it('slices overlap inside the SSE synchronized-output wrapper', () => { + const { app, writes } = makeApp(); + const owner = app._beginBufferLoad('cursor-sync-overlap'); + pushWhileLoading(app, '\x1b[?2026habcdefgh\x1b[?2026l', { + stream: 'stream-a', + generation: 1, + start: 7, + end: 15, + }); + + app._finishBufferLoad(owner, { + snapshotCursor: { stream: 'stream-a', generation: 1, start: 0, end: 10 }, + }); + + expect(writes).toEqual(['\x1b[?2026hdefgh\x1b[?2026l']); + }); + + it('decodes a streamed snapshot losslessly across UTF-8 chunk boundaries while painting', async () => { + const { app } = makeApp(); + const text = 'alpha \u05e9\u05dc\u05d5\u05dd \ud83d\ude80 omega'; + const bytes = new TextEncoder().encode(text); + const wireChunks = [bytes.slice(0, 8), bytes.slice(8, 13), bytes.slice(13)]; + let index = 0; + const headers = new Headers({ + 'x-codeman-terminal-format': 'stream-v1', + 'x-codeman-terminal-stream': 'stream-a', + 'x-codeman-terminal-generation': '4', + 'x-codeman-terminal-start': '0', + 'x-codeman-terminal-end': String(text.length), + 'x-codeman-terminal-truncated': '0', + }); + const response = { + ok: true, + headers, + body: { + getReader: () => ({ + read: async () => + index < wireChunks.length ? { done: false, value: wireChunks[index++] } : { done: true, value: undefined }, + cancel: async () => {}, + }), + }, + } as unknown as Response; + const painted: string[] = []; + const beforePaint = vi.fn(); + Object.assign(app, { + chunkedTerminalWrite: vi.fn(async (chunk: string) => { + painted.push(chunk); + }), + }); + + const result = await app._readTerminalSnapshotResponse(response, { + paint: true, + loadOwner: 'stream-load', + beforePaint, + followBottom: true, + }); + + expect(result.terminalBuffer).toBe(text); + expect(painted.join('')).toBe(text); + expect(beforePaint).toHaveBeenCalledOnce(); + expect(app.chunkedTerminalWrite).toHaveBeenCalledWith(expect.any(String), 32 * 1024, 'stream-load', { + followBottom: true, + }); + expect(result).toMatchObject({ + streamed: true, + painted: true, + aborted: false, + cursor: { stream: 'stream-a', generation: 4, start: 0, end: text.length }, + }); + }); + + it('exposes bounded history-page coordinates from streamed response headers', async () => { + const { app } = makeApp(); + const response = new Response('bounded history page', { + status: 200, + headers: { + 'x-codeman-terminal-format': 'stream-v1', + 'x-codeman-terminal-stream': 'stream-a', + 'x-codeman-terminal-generation': '2', + 'x-codeman-terminal-start': '100', + 'x-codeman-terminal-end': '120', + 'x-codeman-history-start': '3000', + 'x-codeman-history-end': '4000', + 'x-codeman-history-total': '9000', + 'x-codeman-history-more-before': '1', + 'x-codeman-history-more-after': '1', + 'x-codeman-history-origin': 'pane-1:origin', + }, + }); + + await expect(app._readTerminalSnapshotResponse(response)).resolves.toMatchObject({ + terminalBuffer: 'bounded history page', + historyPage: { + start: 3000, + end: 4000, + total: 9000, + hasMoreBefore: true, + hasMoreAfter: true, + origin: 'pane-1:origin', + }, + }); + }); + + it('keeps the JSON terminal response as a non-streaming fallback', async () => { + const { app } = makeApp(); + const response = { + ok: true, + headers: new Headers({ 'content-type': 'application/json' }), + json: async () => ({ data: { terminalBuffer: 'legacy snapshot', truncated: false } }), + } as unknown as Response; + + await expect(app._readTerminalSnapshotResponse(response, { paint: true })).resolves.toMatchObject({ + terminalBuffer: 'legacy snapshot', + truncated: false, + streamed: false, + painted: false, + }); + }); + it('repositions a pending local draft after the loaded frame becomes authoritative', () => { const { app } = makeApp(); const rerender = vi.fn(); diff --git a/test/terminal-flush-budget.test.ts b/test/terminal-flush-budget.test.ts index 54910730..7553024f 100644 --- a/test/terminal-flush-budget.test.ts +++ b/test/terminal-flush-budget.test.ts @@ -3,16 +3,32 @@ import { resolve } from 'node:path'; import vm from 'node:vm'; import { describe, expect, it, vi } from 'vitest'; -function loadTerminalUiHarness(mode: string) { +function loadTerminalUiHarness( + mode: string, + { + deviceType = 'desktop', + visibilityState = 'visible', + }: { deviceType?: 'mobile' | 'tablet' | 'desktop'; visibilityState?: 'visible' | 'hidden' } = {} +) { const CodemanApp = function CodemanApp(this: any) {}; + const frameCallbacks: Array<() => void> = []; + const timeoutCallbacks: Array<() => void> = []; const context = vm.createContext({ window: {}, + document: { visibilityState }, CodemanApp, console: { warn: vi.fn(), log: vi.fn() }, _crashDiag: { log: vi.fn() }, performance: { now: () => 0 }, - requestAnimationFrame: (_fn: () => void) => 1, - setTimeout: (_fn: () => void) => 1, + MobileDetection: { getDeviceType: () => deviceType }, + requestAnimationFrame: (fn: () => void) => { + frameCallbacks.push(fn); + return 1; + }, + setTimeout: (fn: () => void) => { + timeoutCallbacks.push(fn); + return 1; + }, Blob: function Blob() {}, URL: { createObjectURL: () => 'blob:yield', @@ -23,6 +39,8 @@ function loadTerminalUiHarness(mode: string) { }, DEC_SYNC_STRIP_RE: /\x1b\[\?2026[hl]/g, TERMINAL_CHUNK_SIZE: 32 * 1024, + CODEX_POST_SWITCH_MAX_HOLD_MS: 1500, + CODEX_RESTART_RECOVERY_MAX_HOLD_MS: 3000, }); const code = readFileSync(resolve(import.meta.dirname, '../src/web/public/terminal-ui.js'), 'utf8'); @@ -38,12 +56,15 @@ function loadTerminalUiHarness(mode: string) { app._workerYield = () => {}; app._chunkedWriteGen = 0; app.terminal = { - write: (data: string) => writes.push(data), + write: (data: string, callback?: () => void) => { + writes.push(data); + callback?.(); + }, scrollToBottom: () => {}, scrollToLine: () => {}, }; - return { app, writes }; + return { app, writes, frameCallbacks, timeoutCallbacks }; } describe('terminal flush budget', () => { @@ -89,6 +110,199 @@ describe('terminal flush budget', () => { expect(app.pendingWrites.join('')).toHaveLength(32 * 1024); }); + it('uses a display-frame-sized budget for Claude output on mobile', () => { + const { app, writes } = loadTerminalUiHarness('claude', { deviceType: 'mobile' }); + app.pendingWrites.push('x'.repeat(96 * 1024)); + + app.flushPendingWrites(); + + expect(writes).toHaveLength(1); + expect(writes[0]).toHaveLength(16 * 1024); + expect(app.pendingWrites.join('')).toHaveLength(80 * 1024); + }); + + it('publishes mobile output on complete synchronized-update boundaries', () => { + const { app, writes } = loadTerminalUiHarness('claude', { deviceType: 'mobile' }); + const block = (char: string) => `\x1b[?2026h${char.repeat(8 * 1024)}\x1b[?2026l`; + const first = block('a'); + const second = block('b'); + app.pendingWrites.push(first + second); + + app.flushPendingWrites(); + + expect(writes).toEqual([first]); + expect(app.pendingWrites).toEqual([second]); + }); + + it('does not schedule the next live chunk until xterm parses the current one', () => { + const { app, writes } = loadTerminalUiHarness('codex'); + const scheduled: Array<() => void> = []; + let writeDone: (() => void) | undefined; + app._safeYield = (callback: () => void) => { + scheduled.push(callback); + }; + app.terminal.write = (data: string, callback?: () => void) => { + writes.push(data); + writeDone = callback; + }; + app.pendingWrites.push('x'.repeat(64 * 1024)); + + app.flushPendingWrites(); + + expect(writes.map((write) => write.length)).toEqual([32 * 1024]); + expect(app.pendingWrites.join('')).toHaveLength(32 * 1024); + expect(scheduled).toEqual([]); + + writeDone?.(); + + expect(scheduled).toHaveLength(1); + }); + + it('keeps the Codex switch cover until post-attach redraw output becomes quiet', () => { + const { app } = loadTerminalUiHarness('codex'); + const scheduled: Array<() => void> = []; + const remove = vi.fn(); + app._safeYield = (callback: () => void) => { + scheduled.push(callback); + }; + app._terminalHistoryReplayCover = { remove }; + app._terminalHistoryReplayCoverOwner = 7; + app._terminalHistoryReplayCoverVersion = 1; + app._terminalHistoryReplayCoverComplete = true; + app._terminalHistoryReplayCoverCompleteAt = Date.now(); + app._terminalHistoryReplayCoverCheckScheduled = false; + app._terminalHistoryReplayFencePending = false; + app._terminalHistoryReplayQuietUntil = 0; + app._wsState = 'connected'; + app._isLoadingBuffer = false; + app._terminalWriteInFlight = null; + app.writeFrameScheduled = false; + app.pendingWrites = []; + + app._deferTerminalHistoryReplayCover('session-1', 500); + app._tryFinishTerminalHistoryReplayCover(); + + expect(app._terminalHistoryReplayQuietUntil).toBeGreaterThan(Date.now()); + expect(remove).not.toHaveBeenCalled(); + expect(scheduled).toHaveLength(1); + + // Once the quiet barrier expires, the existing xterm paint fence owns the + // final removal. Every redraw byte was parsed while the cover stayed opaque. + app._terminalHistoryReplayQuietUntil = 0; + while (scheduled.length > 0) scheduled.shift()?.(); + + expect(remove).toHaveBeenCalledOnce(); + expect(app._terminalHistoryReplayCover).toBeNull(); + }); + + it('invalidates an armed cover-removal fence when later Codex output arrives', () => { + const { app } = loadTerminalUiHarness('codex'); + let paintFence: (() => void) | undefined; + app.terminal.write = (_data: string, callback?: () => void) => { + paintFence = callback; + }; + app._terminalHistoryReplayCover = { remove: vi.fn() }; + app._terminalHistoryReplayCoverOwner = 7; + app._terminalHistoryReplayCoverVersion = 4; + app._terminalHistoryReplayCoverComplete = true; + app._terminalHistoryReplayCoverCompleteAt = Date.now(); + app._terminalHistoryReplayCoverCheckScheduled = false; + app._terminalHistoryReplayFencePending = false; + app._terminalHistoryReplayQuietUntil = 0; + app._wsState = 'connected'; + app._isLoadingBuffer = false; + app._terminalWriteInFlight = null; + app.writeFrameScheduled = false; + app.pendingWrites = []; + + app._tryFinishTerminalHistoryReplayCover(); + expect(paintFence).toBeTypeOf('function'); + expect(app._terminalHistoryReplayFencePending).toBe(true); + const armedVersion = app._terminalHistoryReplayCoverVersion; + + app._deferTerminalHistoryReplayCover('session-1', 500); + + expect(app._terminalHistoryReplayFencePending).toBe(false); + expect(app._terminalHistoryReplayCoverVersion).toBeGreaterThan(armedVersion); + }); + + it('allows restart recovery to hold a stable frame beyond the normal switch cap', () => { + const { app } = loadTerminalUiHarness('codex'); + const writes = vi.fn(); + app.terminal.write = writes; + app._serverRestartRecovery = true; + app._terminalHistoryReplayCover = { remove: vi.fn() }; + app._terminalHistoryReplayCoverOwner = 7; + app._terminalHistoryReplayCoverVersion = 1; + app._terminalHistoryReplayCoverComplete = true; + app._terminalHistoryReplayCoverCompleteAt = Date.now() - 2000; + app._terminalHistoryReplayCoverCheckScheduled = false; + app._terminalHistoryReplayFencePending = false; + app._terminalHistoryReplayQuietUntil = Date.now() + 500; + app._wsState = 'connected'; + app._isLoadingBuffer = false; + app._terminalWriteInFlight = null; + app.writeFrameScheduled = false; + app.pendingWrites = []; + + app._tryFinishTerminalHistoryReplayCover(); + + expect(writes).not.toHaveBeenCalled(); + }); + + it('holds a transport-loss cover until server init releases it', () => { + const { app } = loadTerminalUiHarness('codex'); + const remove = vi.fn(); + app._captureTerminalHistoryReplayCover = () => { + app._terminalHistoryReplayCover = { remove }; + app._terminalHistoryReplayCoverVersion += 1; + return true; + }; + app._terminalHistoryReplayCover = null; + app._terminalHistoryReplayCoverVersion = 0; + app._terminalHistoryReplayCoverCheckScheduled = false; + app._terminalHistoryReplayFencePending = false; + app._terminalHistoryReplayQuietUntil = 0; + + expect(app._freezeTerminalForTransportLoss('session-1')).toBe(true); + expect(app._terminalTransportFreezeSessionId).toBe('session-1'); + expect(app._terminalHistoryReplayCoverComplete).toBe(false); + + expect(app._releaseTerminalTransportFreeze('session-1', 500)).toBe(true); + expect(app._terminalTransportFreezeSessionId).toBeNull(); + expect(app._terminalHistoryReplayCoverComplete).toBe(true); + expect(app._terminalHistoryReplayQuietUntil).toBeGreaterThan(Date.now()); + expect(remove).not.toHaveBeenCalled(); + }); + + it('does not delay the history cover for Claude output', () => { + const { app } = loadTerminalUiHarness('claude'); + app._terminalHistoryReplayCover = { remove: vi.fn() }; + app._terminalHistoryReplayQuietUntil = 0; + + app._deferTerminalHistoryReplayCover('session-1', 500); + + expect(app._terminalHistoryReplayQuietUntil).toBe(0); + }); + + it('invalidates a stale live-write callback when a buffer replay takes ownership', () => { + const { app } = loadTerminalUiHarness('claude'); + let writeDone: (() => void) | undefined; + const rerender = vi.fn(); + app._localEchoOverlay = { hasPending: true, rerender }; + app.terminal.write = (_data: string, callback?: () => void) => { + writeDone = callback; + }; + app.pendingWrites.push('old session output'); + + app.flushPendingWrites(); + app._beginBufferLoad('new-session-replay'); + writeDone?.(); + + expect(app._terminalWriteInFlight).toBeNull(); + expect(rerender).not.toHaveBeenCalled(); + }); + it('repositions a pending local draft only after xterm applies agent output', () => { const { app, writes } = loadTerminalUiHarness('claude'); let writeDone: (() => void) | undefined; @@ -140,6 +354,87 @@ describe('terminal flush budget', () => { expect(finishBufferLoad).toHaveBeenCalledOnce(); }); + it('waits for each replay chunk to parse before yielding the next one', async () => { + const { app, writes } = loadTerminalUiHarness('codex'); + const scheduled: Array<() => void> = []; + const writeCallbacks: Array<() => void> = []; + app._safeYield = (callback: () => void) => { + scheduled.push(callback); + }; + app.terminal.write = (data: string, callback?: () => void) => { + writes.push(data); + if (callback) writeCallbacks.push(callback); + }; + + const promise = app.chunkedTerminalWrite('x'.repeat(64 * 1024), 32 * 1024); + expect(scheduled).toHaveLength(1); + + scheduled.shift()?.(); + expect(writes.map((write) => write.length)).toEqual([32 * 1024]); + expect(scheduled).toHaveLength(0); + + writeCallbacks.shift()?.(); + expect(scheduled).toHaveLength(1); + + scheduled.shift()?.(); + expect(writes.map((write) => write.length)).toEqual([32 * 1024, 32 * 1024]); + + writeCallbacks.shift()?.(); + scheduled.shift()?.(); + scheduled.shift()?.(); + await promise; + }); + + it('keeps the viewport at the bottom after every parsed history chunk', async () => { + const { app, writes } = loadTerminalUiHarness('codex'); + const scheduled: Array<() => void> = []; + const scrollToBottom = vi.fn(); + app._safeYield = (callback: () => void) => { + scheduled.push(callback); + }; + app.terminal.scrollToBottom = scrollToBottom; + + const promise = app.chunkedTerminalWrite('x'.repeat(64 * 1024), 32 * 1024, 'history-load', { followBottom: true }); + while (scheduled.length > 0) { + scheduled.shift()?.(); + } + await promise; + + expect(writes.map((write) => write.length)).toEqual([32 * 1024, 32 * 1024]); + expect(scrollToBottom).toHaveBeenCalledTimes(2); + }); + + it('uses animation frames instead of the Worker while the page is visible', () => { + const { app, frameCallbacks, timeoutCallbacks } = loadTerminalUiHarness('claude'); + const callback = vi.fn(); + app._workerYield = vi.fn(); + + app._safeYield(callback); + + expect(frameCallbacks).toHaveLength(1); + expect(timeoutCallbacks).toHaveLength(1); + expect(app._workerYield).not.toHaveBeenCalled(); + + frameCallbacks.shift()?.(); + timeoutCallbacks.shift()?.(); + + expect(callback).toHaveBeenCalledOnce(); + }); + + it('uses the Worker wake-up path while the page is hidden', () => { + const { app, frameCallbacks, timeoutCallbacks } = loadTerminalUiHarness('claude', { + visibilityState: 'hidden', + }); + const callback = vi.fn(); + app._workerYield = vi.fn(); + + app._safeYield(callback); + + expect(frameCallbacks).toHaveLength(0); + expect(timeoutCallbacks).toHaveLength(1); + expect(app._workerYield).toHaveBeenCalledOnce(); + }); + it('leaves a caller-owned buffer load open after replaying a chunk', async () => { const { app } = loadTerminalUiHarness('codex'); const beginBufferLoad = vi.fn(() => 'nested-owner'); @@ -185,9 +480,11 @@ describe('terminal flush budget', () => { it('restores the user scroll position when Codex Working redraws move the viewport', () => { const { app } = loadTerminalUiHarness('codex'); const buffer = { viewportY: 40, baseY: 100 }; + let writeDone: (() => void) | undefined; app.terminal.buffer = { active: buffer }; - app.terminal.write = vi.fn(() => { + app.terminal.write = vi.fn((_data: string, callback?: () => void) => { buffer.viewportY = buffer.baseY; + writeDone = callback; }); app.terminal.scrollToLine = vi.fn((line: number) => { buffer.viewportY = line; @@ -198,6 +495,10 @@ describe('terminal flush budget', () => { app.flushPendingWrites(); + expect(buffer.viewportY).toBe(100); + + writeDone?.(); + expect(buffer.viewportY).toBe(40); }); diff --git a/test/terminal-history-paging.test.ts b/test/terminal-history-paging.test.ts new file mode 100644 index 00000000..83152101 --- /dev/null +++ b/test/terminal-history-paging.test.ts @@ -0,0 +1,48 @@ +import { readFileSync } from 'node:fs'; +import { resolve } from 'node:path'; +import { describe, expect, it } from 'vitest'; + +describe('client terminal history paging', () => { + const appSource = readFileSync(resolve(import.meta.dirname, '../src/web/public/app.js'), 'utf8'); + const terminalSource = readFileSync(resolve(import.meta.dirname, '../src/web/public/terminal-ui.js'), 'utf8'); + const constantsSource = readFileSync(resolve(import.meta.dirname, '../src/web/public/constants.js'), 'utf8'); + + it('uses a bounded history page for cold selection instead of full history', () => { + const start = appSource.indexOf('async selectSession(sessionId'); + const body = appSource.slice(start, start + 18_000); + + expect(body).toContain('historyPage=1'); + expect(body).toContain('TERMINAL_HISTORY_PAGE_LINES'); + expect(body).not.toContain('terminal?full=1'); + expect(constantsSource).toContain('const TERMINAL_HISTORY_PAGE_LINES = 400;'); + }); + + it('loads older pages from terminal scroll events and keeps a bounded client window', () => { + expect(terminalSource).toContain('_maybeLoadTerminalHistoryPage'); + expect(terminalSource).toContain('_loadTerminalHistoryPage'); + expect(terminalSource).toContain('TERMINAL_HISTORY_WINDOW_PAGES'); + expect(terminalSource).toContain('historyPage=1'); + expect(terminalSource).toContain('const threshold = rows * 3;'); + expect(terminalSource).toContain('state.invalidated = true'); + expect(terminalSource).not.toContain('state.start = 0;\n state.end = state.total;'); + }); + + it('reconciles live output against the latest-frame cursor after a page rebuild', () => { + const start = terminalSource.indexOf('async _loadTerminalHistoryPage'); + const body = terminalSource.slice(start, start + 10_000); + + expect(start).toBeGreaterThan(-1); + expect(body).toContain('_beginBufferLoad'); + expect(body).toContain('snapshotCursor: latest.cursor'); + expect(body).toContain('flushQueued: true'); + }); + + it('uses a bounded tail and discards page coordinates when latest-frame composition fails', () => { + const start = appSource.indexOf('if (data.historyPage && !latestFrame?.terminalBuffer)'); + const body = appSource.slice(start, start + 1_800); + + expect(start).toBeGreaterThan(-1); + expect(body).toContain('tail=${TERMINAL_TAIL_SIZE}'); + expect(body).toContain('this._terminalHistoryPaging.delete(sessionId)'); + }); +}); diff --git a/test/terminal-touch-tap.test.ts b/test/terminal-touch-tap.test.ts index 7ed22bce..eb159913 100644 --- a/test/terminal-touch-tap.test.ts +++ b/test/terminal-touch-tap.test.ts @@ -126,6 +126,56 @@ function createTerminalGrid(lines: string[], cursorY: number, wrappedRows = new } describe('terminal touch tap mouse guard', () => { + it('returns local scrollback to the bottom and unlocks live-output following', () => { + const { app } = loadTerminalUiHarness(); + const scrollToBottom = vi.fn(); + app.activeSessionId = 'sess-1'; + app.sessions = new Map([['sess-1', { mode: 'codex', cliVersion: '1.0.0' }]]); + app.terminal = { scrollToBottom }; + app._terminalScrollLocked = true; + app._wasAtBottomBeforeWrite = false; + app.sendTerminalKey = vi.fn(); + + app.jumpTerminalToLatest(); + + expect(scrollToBottom).toHaveBeenCalledOnce(); + expect(app._terminalScrollLocked).toBe(false); + expect(app._wasAtBottomBeforeWrite).toBe(true); + expect(app.sendTerminalKey).not.toHaveBeenCalled(); + }); + + it('also asks Claude fullscreen history to jump to its latest message', () => { + const { app } = loadTerminalUiHarness(); + app.activeSessionId = 'sess-1'; + app.sessions = new Map([['sess-1', { mode: 'claude', cliVersion: '2.1.220' }]]); + app.terminal = { scrollToBottom: vi.fn() }; + app.sendTerminalKey = vi.fn(); + + app.jumpTerminalToLatest(); + + expect(app.sendTerminalKey).toHaveBeenCalledWith('\x1b[1;5F'); + }); + + it('tracks Claude-owned transcript history until jump-to-latest clears it', () => { + const { app } = loadTerminalUiHarness(); + app.activeSessionId = 'sess-1'; + app.sessions = new Map([['sess-1', { mode: 'claude', cliVersion: '2.1.220' }]]); + app.terminal = { + rows: 10, + buffer: { active: { viewportY: 20, baseY: 20 } }, + scrollToBottom: vi.fn(), + }; + app._clientPointToCell = () => ({ col: 1, row: 1 }); + app.sendTerminalKey = vi.fn(); + + app._sendSyntheticSgrWheel(8, 8, -3); + expect(app.isTerminalAtBottom()).toBe(true); + expect(app.isTerminalReadingHistory()).toBe(true); + + app.jumpTerminalToLatest(); + expect(app.isTerminalReadingHistory()).toBe(false); + }); + it('recognizes focus only when a terminal input owns the active element', () => { const { app, setActiveElement } = loadTerminalUiHarness(); const textarea = { classList: { contains: () => true } }; @@ -686,6 +736,30 @@ describe('terminal viewport sizing claims', () => { }); }); + it('does not force a second redraw when the trusted pointer selects a session tab', () => { + const { app, runFrame } = loadTerminalUiHarness(); + app.activeSessionId = 'sess-1'; + app.fitAddon = {}; + app.sendResize = vi.fn(() => Promise.resolve(true)); + + app._handleTerminalSizingPointerDown({ + isTrusted: true, + button: 0, + isPrimary: true, + target: { + closest: (selector: string) => + selector === '#terminalContainer, .session-tab' ? { className: 'session-tab' } : null, + }, + }); + runFrame(); + + expect(app.sendResize).toHaveBeenCalledOnce(); + expect(app.sendResize).toHaveBeenCalledWith('sess-1', { + takeControl: true, + refit: true, + }); + }); + it('sends a keyboard-open control key with one no-refit takeover', () => { const { app, setKeyboardVisible, cancelAnimationFrame } = loadTerminalUiHarness(); app.activeSessionId = 'sess-1'; diff --git a/test/terminal-viewport-resize.test.ts b/test/terminal-viewport-resize.test.ts index cd5a01e6..6715fc8c 100644 --- a/test/terminal-viewport-resize.test.ts +++ b/test/terminal-viewport-resize.test.ts @@ -36,7 +36,7 @@ async function freshPage(): Promise<{ context: BrowserContext; page: Page }> { } async function navigateAndWait(page: Page): Promise { - await page.goto(BASE_URL, { waitUntil: 'domcontentloaded' }); + await page.goto(`${BASE_URL}?nowebgl`, { waitUntil: 'domcontentloaded' }); await page.waitForFunction(() => document.body.classList.contains('app-loaded'), { timeout: 5000, }); @@ -387,6 +387,114 @@ describe('Session initialization and viewport resize', () => { }, sessionId); }); + it('restores a recent busy session from its snapshot and streamed delta without refetching', async () => { + ({ context, page } = await freshPage()); + await navigateAndWait(page); + + const terminalRequests: string[] = []; + await page.route('**/api/sessions/*/terminal*', async (route) => { + const url = new URL(route.request().url()); + const sessionId = url.pathname.split('/')[3]; + terminalRequests.push(sessionId); + await route.fulfill({ + status: 200, + contentType: 'application/json', + body: JSON.stringify({ + data: { + terminalBuffer: `${sessionId} initial history\r\n${sessionId} prompt`, + truncated: false, + }, + }), + }); + }); + + await page.evaluate(async () => { + const app = ( + window as unknown as { + app: { + sessions: Map; + sessionOrder: string[]; + renderSessionTabs: () => void; + selectSession: (id: string) => Promise; + _onSessionTerminal: (data: { id: string; data: string }) => void; + }; + } + ).app; + app.sessions.set('warm-a', { + id: 'warm-a', + name: 'Warm A', + mode: 'codex', + status: 'working', + pid: 1, + workingDir: '/tmp', + }); + app.sessions.set('warm-b', { + id: 'warm-b', + name: 'Warm B', + mode: 'codex', + status: 'working', + pid: 1, + workingDir: '/tmp', + }); + app.sessionOrder = ['warm-a', 'warm-b']; + app.renderSessionTabs(); + + await app.selectSession('warm-a'); + await app.selectSession('warm-b'); + app._onSessionTerminal({ id: 'warm-a', data: '\r\nwarm-a streamed while away\r\n' }); + }); + + const requestsBeforeReturn = terminalRequests.length; + const restored = await page.evaluate(async () => { + const app = ( + window as unknown as { + app: { + selectSession: (id: string) => Promise; + terminal: { + buffer: { + active: { + length: number; + getLine: (index: number) => { translateToString: (trimRight: boolean) => string } | undefined; + }; + }; + }; + _warmTerminalCache: { ids: () => string[] }; + _terminalSseSubscriptionIds: () => string[]; + _wsReady: boolean; + _wsSessionId: string | null; + }; + } + ).app; + await app.selectSession('warm-a'); + const buffer = app.terminal.buffer.active; + const lines: string[] = []; + for (let index = 0; index < buffer.length; index++) { + lines.push(buffer.getLine(index)?.translateToString(true) || ''); + } + const previousWsReady = app._wsReady; + const previousWsSessionId = app._wsSessionId; + app._wsReady = true; + app._wsSessionId = 'warm-a'; + const sseIdsWithActiveWs = app._terminalSseSubscriptionIds(); + app._wsReady = previousWsReady; + app._wsSessionId = previousWsSessionId; + return { + text: lines.join('\n'), + warmIds: app._warmTerminalCache.ids(), + sseIdsWithActiveWs, + }; + }); + + expect(terminalRequests).toHaveLength(requestsBeforeReturn); + expect(terminalRequests).toEqual(['warm-a', 'warm-a', 'warm-b', 'warm-b']); + expect(restored.text).toContain('warm-a initial history'); + expect(restored.text).toContain('warm-a streamed while away'); + expect(restored.warmIds).toEqual(expect.arrayContaining(['warm-a', 'warm-b'])); + // The desired SSE filter keeps both sessions. The server suppresses warm-a + // while its WebSocket owns output and resumes it atomically on handoff. + expect(restored.sseIdsWithActiveWs).toEqual(expect.arrayContaining(['warm-a', 'warm-b'])); + }); + it('needsRefresh handler sends resize after restoring buffered output', async () => { ({ context, page } = await freshPage()); await navigateAndWait(page); @@ -439,6 +547,156 @@ describe('Session initialization and viewport resize', () => { expect(resizeCalls).toEqual([sessionId]); console.log(`[terminal-viewport-resize] needsRefresh triggered ${resizeCalls.length} resize call(s)`); }); + + it('cold-loads bounded history and preserves the reader anchor when prepending a page', async () => { + ({ context, page } = await freshPage()); + await navigateAndWait(page); + + const result = await page.evaluate(async () => { + const app = (window as unknown as { app: any }).app; + const sessionId = 'paged-history-browser-test'; + const originalFetch = window.fetch; + const originalSendResize = app.sendResize; + const originalConnectWs = app._connectWs; + const requested: string[] = []; + const latestFrame = '\x1b[1;1HLATEST PAGED FRAME' + '\x1b[2;1H› current prompt' + '\x1b[2;17H'; + const rows = (prefix: string, start: number, end: number) => + Array.from({ length: end - start }, (_, offset) => `${prefix}_${String(start + offset).padStart(4, '0')}`).join( + '\r\n' + ); + const recentPage = rows('RECENT', 800, 1200); + const olderPage = rows('OLDER', 400, 800); + const streamHeaders = (body: string, extra: Record = {}): Record => ({ + 'content-type': 'text/plain; charset=utf-8', + 'x-codeman-terminal-format': 'stream-v1', + 'x-codeman-terminal-stream': 'paged-browser-stream', + 'x-codeman-terminal-generation': '1', + 'x-codeman-terminal-start': '0', + 'x-codeman-terminal-end': String(body.length), + 'x-codeman-terminal-status': 'idle', + 'x-codeman-terminal-full-size': String(body.length), + 'x-codeman-terminal-truncated': '0', + 'x-codeman-terminal-source': 'mux-history-page', + ...extra, + }); + const pageHeaders = (body: string, start: number, end: number): Record => + streamHeaders(body, { + 'x-codeman-history-start': String(start), + 'x-codeman-history-end': String(end), + 'x-codeman-history-total': '1200', + 'x-codeman-history-more-before': start > 0 ? '1' : '0', + 'x-codeman-history-more-after': end < 1200 ? '1' : '0', + 'x-codeman-history-origin': 'stable-browser-origin', + }); + const visibleText = () => { + const buffer = app.terminal.buffer.active; + return Array.from( + { length: app.terminal.rows }, + (_, row) => buffer.getLine(buffer.viewportY + row)?.translateToString(true) || '' + ).join('\n'); + }; + + try { + app.sessions.set(sessionId, { + id: sessionId, + name: 'Paged browser history', + mode: 'codex', + status: 'idle', + pid: 1, + workingDir: '/tmp', + }); + app.sessionOrder = [sessionId]; + app.activeSessionId = null; + app.terminalBufferCache.delete(sessionId); + app._xtermSnapshots.delete(sessionId); + app._warmTerminalCache.remove(sessionId); + app._terminalHistoryPaging.delete(sessionId); + app.renderSessionTabs(); + + app.sendResize = async () => false; + app._connectWs = () => {}; + window.fetch = (async (input: RequestInfo | URL, init?: RequestInit) => { + const url = String(input); + if (!url.includes(`/api/sessions/${sessionId}/terminal`)) { + return originalFetch.call(window, input, init); + } + requested.push(url); + if (url.includes('latest=1')) { + return new Response(latestFrame, { + status: 200, + headers: streamHeaders(latestFrame, { + 'x-codeman-terminal-source': 'mux-visible', + }), + }); + } + if (url.includes('before=800')) { + return new Response(olderPage, { + status: 200, + headers: pageHeaders(olderPage, 400, 800), + }); + } + return new Response(recentPage, { + status: 200, + headers: pageHeaders(recentPage, 800, 1200), + }); + }) as typeof window.fetch; + + await app.selectSession(sessionId); + const initialState = app._terminalHistoryPaging.get(sessionId); + const initialStart = initialState.start; + initialState.loading = true; + const buffer = app.terminal.buffer.active; + let markerRow = -1; + for (let row = 0; row < buffer.length; row++) { + if (buffer.getLine(row)?.translateToString(true).includes('RECENT_0800')) { + markerRow = row; + break; + } + } + if (markerRow >= 0) app.terminal.scrollToLine(markerRow); + await new Promise((resolve) => app.terminal.write('', resolve)); + const beforeText = visibleText(); + initialState.loading = false; + + const loaded = await app._loadTerminalHistoryPage('older'); + const afterState = app._terminalHistoryPaging.get(sessionId); + const afterText = visibleText(); + app.terminal.scrollToBottom(); + const latestText = visibleText(); + + return { + loaded, + requested, + initialStart, + markerRow, + afterStart: afterState.start, + afterEnd: afterState.end, + pageCount: afterState.pages.length, + beforeText, + afterText, + latestText, + }; + } finally { + window.fetch = originalFetch; + app.sendResize = originalSendResize; + app._connectWs = originalConnectWs; + app.sessions.delete(sessionId); + app._terminalHistoryPaging.delete(sessionId); + } + }); + + expect(result.loaded).toBe(true); + expect(result.requested.some((url: string) => url.includes('historyPage=1'))).toBe(true); + expect(result.requested.every((url: string) => !url.includes('full=1'))).toBe(true); + expect(result.initialStart).toBe(800); + expect(result.markerRow).toBeGreaterThanOrEqual(0); + expect(result.afterStart).toBe(400); + expect(result.afterEnd).toBe(1200); + expect(result.pageCount).toBe(2); + expect(result.beforeText).toContain('RECENT_0800'); + expect(result.afterText).toContain('RECENT_0800'); + expect(result.latestText).toContain('LATEST PAGED FRAME'); + }); }); describe('OpenCode close modal text', () => { diff --git a/test/warm-terminal-cache.test.ts b/test/warm-terminal-cache.test.ts new file mode 100644 index 00000000..afe2f119 --- /dev/null +++ b/test/warm-terminal-cache.test.ts @@ -0,0 +1,104 @@ +import { readFileSync } from 'node:fs'; +import { resolve } from 'node:path'; +import vm from 'node:vm'; +import { describe, expect, it } from 'vitest'; + +type WarmTerminalCache = { + activate: (sessionId: string, now?: number) => void; + append: (sessionId: string, data: string, now?: number) => boolean; + consume: (sessionId: string, now?: number) => string | null; + ids: (now?: number) => string[]; + isWarm: (sessionId: string, now?: number) => boolean; + nextExpiryDelay: (now?: number) => number | null; + remove: (sessionId: string) => void; +}; + +type WarmTerminalCacheConstructor = new (options?: { + limit?: number; + ttlMs?: number; + maxDeltaBytes?: number; +}) => WarmTerminalCache; + +function loadWarmTerminalCache(): WarmTerminalCacheConstructor { + const source = readFileSync(resolve(import.meta.dirname, '../src/web/public/constants.js'), 'utf8'); + const context = vm.createContext({ + console, + setTimeout, + clearTimeout, + }); + vm.runInContext(source, context, { filename: 'constants.js' }); + return (context as unknown as { WarmTerminalCache: WarmTerminalCacheConstructor }).WarmTerminalCache; +} + +describe('WarmTerminalCache', () => { + it('keeps the active session and a bounded recent-session range', () => { + const WarmTerminalCache = loadWarmTerminalCache(); + const cache = new WarmTerminalCache({ limit: 3, ttlMs: 30_000 }); + + cache.activate('a', 0); + cache.activate('b', 1_000); + cache.activate('c', 2_000); + cache.activate('d', 3_000); + + expect(cache.ids(3_000)).toEqual(['b', 'c', 'd']); + expect(cache.isWarm('a', 3_000)).toBe(false); + expect(cache.isWarm('d', 60_000)).toBe(true); + }); + + it('expires inactive sessions without expiring the active session', () => { + const WarmTerminalCache = loadWarmTerminalCache(); + const cache = new WarmTerminalCache({ ttlMs: 30_000 }); + + cache.activate('a', 10_000); + cache.activate('b', 20_000); + + expect(cache.nextExpiryDelay(20_000)).toBe(30_000); + expect(cache.ids(49_999)).toEqual(['a', 'b']); + expect(cache.ids(50_000)).toEqual(['b']); + expect(cache.nextExpiryDelay(50_000)).toBeNull(); + }); + + it('replays inactive deltas once and in arrival order', () => { + const WarmTerminalCache = loadWarmTerminalCache(); + const cache = new WarmTerminalCache({ maxDeltaBytes: 32 }); + + cache.activate('a', 0); + cache.activate('b', 1); + + expect(cache.append('a', 'first-', 2)).toBe(true); + expect(cache.append('a', 'second', 3)).toBe(true); + expect(cache.consume('a', 4)).toBe('first-second'); + expect(cache.consume('a', 5)).toBe(''); + }); + + it('invalidates an overflowing delta so the caller can fetch canonically', () => { + const WarmTerminalCache = loadWarmTerminalCache(); + const cache = new WarmTerminalCache({ maxDeltaBytes: 8 }); + + cache.activate('a', 0); + cache.activate('b', 1); + + expect(cache.append('a', '1234', 2)).toBe(true); + expect(cache.append('a', '56789', 3)).toBe(false); + expect(cache.isWarm('a', 3)).toBe(false); + expect(cache.consume('a', 3)).toBeNull(); + + cache.remove('a'); + expect(cache.ids(3)).toEqual(['b']); + }); + + it('is wired into inactive terminal delivery and session selection', () => { + const source = readFileSync(resolve(import.meta.dirname, '../src/web/public/app.js'), 'utf8'); + const inactiveDelivery = source.indexOf('else if (this._warmTerminalCache.isWarm(data.id))'); + const targetCheck = source.indexOf('const targetWasWarm = this._warmTerminalCache.isWarm(sessionId);'); + const deltaReplay = source.indexOf('const warmDelta = this._warmTerminalCache.consume(sessionId);', targetCheck); + const fetchGate = source.indexOf('if (!usedWarmRestore)', deltaReplay); + const fetchStart = source.indexOf("FETCH_START'", fetchGate); + + expect(inactiveDelivery).toBeGreaterThan(-1); + expect(targetCheck).toBeGreaterThan(-1); + expect(deltaReplay).toBeGreaterThan(targetCheck); + expect(fetchGate).toBeGreaterThan(deltaReplay); + expect(fetchStart).toBeGreaterThan(fetchGate); + }); +}); diff --git a/test/ws-state-lifecycle.test.ts b/test/ws-state-lifecycle.test.ts index 39923f3e..835b7a86 100644 --- a/test/ws-state-lifecycle.test.ts +++ b/test/ws-state-lifecycle.test.ts @@ -106,6 +106,7 @@ type LifecycleApp = { _wsReady: boolean; _wsReconnectAttempts: number | undefined; _ws: FakeWebSocket | null; + _freezeTerminalForTransportLoss: ReturnType; activeSessionId: string | null; }; @@ -134,6 +135,7 @@ function makeApp( app.isOnline = true; app.sendResize = vi.fn(); app._onWsReady = vi.fn(); + app._freezeTerminalForTransportLoss = vi.fn(); Object.assign(app, overrides); return { app: app as LifecycleApp, els }; } @@ -257,6 +259,25 @@ describe('WS reconnect backoff — attempts survive the _connectWs → _disconne }); }); +describe('WS reconnect frame ownership', () => { + it('freezes the active Codex frame before a transient reconnect can deliver output', () => { + const { CodemanApp } = loadHarness(); + const freeze = vi.fn(); + const { app } = makeApp(CodemanApp, { + _freezeTerminalForTransportLoss: freeze, + }); + + app._connectWs('s1'); + const ws = FakeWebSocket.instances[0]; + ws.readyState = 1; + ws.onopen?.(); + ws.onclose?.({ code: 1006, reason: '' }); + + expect(freeze).toHaveBeenCalledOnce(); + expect(freeze).toHaveBeenCalledWith('s1'); + }); +}); + describe('WS upgrade cid — per-TAB identity (clientId:tabNonce)', () => { it('sends the composite cid on the upgrade URL, keeping the bare clientId for input frames', () => { const { CodemanApp } = loadHarness(); From 0511be34f531594822cf2a90cfa2a5c4778493d6 Mon Sep 17 00:00:00 2001 From: lior Date: Tue, 28 Jul 2026 05:02:37 +0300 Subject: [PATCH 33/49] feat(viewer): add repository and response inspection --- src/web/public/i18n.js | 11 + src/web/public/index.html | 54 ++- src/web/public/panels-ui.js | 746 ++++++++++++++++++++++++++++++-- test/mobile/file-viewer.test.ts | 575 ++++++++++++++++++++++++ test/response-viewer.test.ts | 84 ++++ 5 files changed, 1429 insertions(+), 41 deletions(-) create mode 100644 test/mobile/file-viewer.test.ts create mode 100644 test/response-viewer.test.ts diff --git a/src/web/public/i18n.js b/src/web/public/i18n.js index 0b35ef8e..48bd7c01 100644 --- a/src/web/public/i18n.js +++ b/src/web/public/i18n.js @@ -68,6 +68,17 @@ 'Open attachment history': '打开附件历史', 'File Viewer': '文件查看器', 'Open file viewer': '打开文件查看器', + Repository: '代码仓库', + 'Refresh repository': '刷新代码仓库', + 'Expand or collapse all directories': '展开或折叠所有目录', + 'Close file viewer': '关闭文件查看器', + 'Repository view': '代码仓库视图', + 'Repository worktree': '代码仓库工作树', + Changes: '更改', + 'Diff view': '差异视图', + Compact: '紧凑', + Full: '完整', + 'Close preview': '关闭预览', 'Open Codeman across all displays': '在所有显示器上打开 {name}', 'Ultracode / Workflow agents': 'Ultracode / Workflow 智能体', 'Open ultracode workflow agents': '打开 Ultracode 工作流智能体', diff --git a/src/web/public/index.html b/src/web/public/index.html index c81f3dfd..9b07a63c 100644 --- a/src/web/public/index.html +++ b/src/web/public/index.html @@ -134,7 +134,7 @@ - +
—
@@ -392,14 +392,24 @@

Resume Conversation

- Files + Repository
- - - + + + +
-
+
+ + + +
+ +
@@ -408,14 +418,38 @@

Resume Conversation

+ + + -
-
+
+ `; } diff --git a/test/run-mode-ui.test.ts b/test/run-mode-ui.test.ts index 0c5b25af..33e2234e 100644 --- a/test/run-mode-ui.test.ts +++ b/test/run-mode-ui.test.ts @@ -6,7 +6,7 @@ import { readFileSync } from 'node:fs'; import { resolve } from 'node:path'; import vm from 'node:vm'; -import { describe, expect, it } from 'vitest'; +import { describe, expect, it, vi } from 'vitest'; function loadRunModeHarness() { const elements: Record = {}; @@ -365,6 +365,69 @@ describe('case selector refresh', () => { expect(app.run).toHaveBeenCalledTimes(1); }); + it('renders distinct edit and delete actions beside every case option', () => { + const elements: Record = { + quickStartCaseSearch: { + setAttribute: vi.fn(), + removeAttribute: vi.fn(), + }, + quickStartCaseList: { + innerHTML: '', + classList: { remove: vi.fn() }, + }, + quickStartCase: { value: 'Alpha' }, + }; + const CodemanApp = function CodemanApp(this: any) {}; + const context = vm.createContext({ + CodemanApp, + localStorage: { getItem: () => null, setItem: () => {} }, + document: { getElementById: (id: string) => elements[id] ?? null }, + console, + escapeHtml: (value: string) => value, + }); + const sessionUi = readFileSync(resolve(import.meta.dirname, '../src/web/public/session-ui.js'), 'utf8'); + vm.runInContext(sessionUi, context, { filename: 'session-ui.js' }); + + const app = new (CodemanApp as any)(); + app.cases = [{ name: 'Alpha' }, { name: 'Beta' }]; + app.renderCasePickerList(); + + expect(elements.quickStartCaseList.innerHTML.match(/data-case-action="edit"/g)).toHaveLength(3); + expect(elements.quickStartCaseList.innerHTML.match(/data-case-action="delete"/g)).toHaveLength(3); + }); + + it('opens the selected case settings directly from an inline edit action', () => { + const elements: Record = { + quickStartCase: { value: 'Alpha' }, + caseSettingsPopover: { + classList: { + add: vi.fn(), + contains: vi.fn(() => true), + remove: vi.fn(), + }, + }, + }; + const CodemanApp = function CodemanApp(this: any) {}; + const context = vm.createContext({ + CodemanApp, + localStorage: { getItem: () => null, setItem: () => {} }, + document: { getElementById: (id: string) => elements[id] ?? null }, + console, + }); + const sessionUi = readFileSync(resolve(import.meta.dirname, '../src/web/public/session-ui.js'), 'utf8'); + vm.runInContext(sessionUi, context, { filename: 'session-ui.js' }); + + const app = new (CodemanApp as any)(); + app.selectQuickStartCase = vi.fn(); + app.toggleCaseSettings = vi.fn(); + + app.editCaseFromPicker('Beta'); + + expect(app.selectQuickStartCase).toHaveBeenCalledWith('Beta'); + expect(elements.caseSettingsPopover.classList.add).toHaveBeenCalledWith('hidden'); + expect(app.toggleCaseSettings).toHaveBeenCalledOnce(); + }); + it('creates remote shell sessions by caseName instead of remote display path', async () => { const elements: Record = { quickStartCase: { value: 'gpu-work' }, From 7b07365bf508d6c62e8e7c706c7589f329e09082 Mon Sep 17 00:00:00 2001 From: lior Date: Tue, 28 Jul 2026 05:07:38 +0300 Subject: [PATCH 35/49] fix(sessions): preserve active terminal during launches --- src/web/public/session-ui.js | 91 ++++++++++++++++++++++++------------ test/run-mode-ui.test.ts | 30 ++++++++++++ 2 files changed, 91 insertions(+), 30 deletions(-) diff --git a/src/web/public/session-ui.js b/src/web/public/session-ui.js index 771abf06..897fcec6 100644 --- a/src/web/public/session-ui.js +++ b/src/web/public/session-ui.js @@ -585,13 +585,43 @@ Object.assign(CodemanApp.prototype, { return startNumber; }, + /** + * Launch progress may use the terminal only on the session-less home screen. + * When another session is active, mutating the shared xterm would serialize + * launch chrome into that session's snapshot during the subsequent switch. + */ + _beginSessionLaunchStatus(message, ansiColor = '1;32') { + const ownsTerminal = !this.activeSessionId; + if (ownsTerminal) { + this.terminal.clear(); + this.terminal.writeln(`\x1b[${ansiColor}m ${message}\x1b[0m`); + this.terminal.writeln(''); + } else { + this.showToast?.(message, 'info'); + } + return ownsTerminal; + }, + + _appendSessionLaunchStatus(ownsTerminal, message, ansiColor = '90') { + if (!ownsTerminal || this.activeSessionId) return; + this.terminal.writeln(`\x1b[${ansiColor}m ${message}\x1b[0m`); + }, + + _reportSessionLaunchError(ownsTerminal, message) { + if (ownsTerminal && !this.activeSessionId) { + this.terminal.writeln(`\x1b[1;31m Error: ${message}\x1b[0m`); + } else { + this.showToast?.(message, 'error'); + } + }, + async runClaude() { const caseName = document.getElementById('quickStartCase').value || 'testcase'; const tabCount = Math.min(20, Math.max(1, parseInt(document.getElementById('tabCount').value) || 1)); - this.terminal.clear(); - this.terminal.writeln(`\x1b[1;32m Starting ${tabCount} Claude session(s) in ${caseName}...\x1b[0m`); - this.terminal.writeln(''); + const ownsLaunchTerminal = this._beginSessionLaunchStatus( + `Starting ${tabCount} Claude session(s) in ${caseName}...` + ); // Focus terminal NOW, in the synchronous user-gesture context (button click). // iOS Safari ignores programmatic focus() after any await, so this must happen // before the first async call. The keyboard opens here and stays open through @@ -674,7 +704,7 @@ Object.assign(CodemanApp.prototype, { await this._ensureCreatedSessionVisible(data.data.sessionId, data.data.session); remoteIds.push(data.data.sessionId); } - this.terminal.writeln(`\x1b[90m All ${tabCount} remote session(s) ready\x1b[0m`); + this._appendSessionLaunchStatus(ownsLaunchTerminal, `All ${tabCount} remote session(s) ready`); if (remoteIds[0]) { await this.selectSession(remoteIds[0]); this.loadQuickStartCases(); @@ -709,7 +739,7 @@ Object.assign(CodemanApp.prototype, { const modelOverride = globalSettings.claudeModel || (useOpus1m ? 'opus[1m]' : ''); // Step 1: Create all sessions in parallel - this.terminal.writeln(`\x1b[90m Creating ${tabCount} session(s)...\x1b[0m`); + this._appendSessionLaunchStatus(ownsLaunchTerminal, `Creating ${tabCount} session(s)...`); const createPromises = sessionNames.map(name => fetch('/api/sessions', { method: 'POST', @@ -750,12 +780,12 @@ Object.assign(CodemanApp.prototype, { )); // Step 3: Start all sessions in parallel (biggest speedup) - this.terminal.writeln(`\x1b[90m Starting ${tabCount} session(s) in parallel...\x1b[0m`); + this._appendSessionLaunchStatus(ownsLaunchTerminal, `Starting ${tabCount} session(s) in parallel...`); await Promise.all(sessionIds.map(id => fetch(`/api/sessions/${id}/interactive`, { method: 'POST' }) )); - this.terminal.writeln(`\x1b[90m All ${tabCount} sessions ready\x1b[0m`); + this._appendSessionLaunchStatus(ownsLaunchTerminal, `All ${tabCount} sessions ready`); // Auto-switch to the new session using selectSession (does proper refresh) if (firstSessionId) { @@ -765,7 +795,7 @@ Object.assign(CodemanApp.prototype, { this.terminal.focus(); } catch (err) { - this.terminal.writeln(`\x1b[1;31m Error: ${err.message}\x1b[0m`); + this._reportSessionLaunchError(ownsLaunchTerminal, err.message); } }, @@ -808,9 +838,10 @@ Object.assign(CodemanApp.prototype, { const caseName = document.getElementById('quickStartCase').value || 'testcase'; const shellCount = Math.min(20, Math.max(1, parseInt(document.getElementById('shellCount').value) || 1)); - this.terminal.clear(); - this.terminal.writeln(`\x1b[1;33m Starting ${shellCount} Shell session(s) in ${caseName}...\x1b[0m`); - this.terminal.writeln(''); + const ownsLaunchTerminal = this._beginSessionLaunchStatus( + `Starting ${shellCount} Shell session(s) in ${caseName}...`, + '1;33' + ); try { // Get the case path @@ -916,7 +947,7 @@ Object.assign(CodemanApp.prototype, { this.terminal.focus(); } catch (err) { - this.terminal.writeln(`\x1b[1;31m Error: ${err.message}\x1b[0m`); + this._reportSessionLaunchError(ownsLaunchTerminal, err.message); } }, @@ -927,9 +958,7 @@ Object.assign(CodemanApp.prototype, { const _runLoc = (this.cases || []).find(c => c.name === caseName)?.location; const isRemote = _runLoc === 'remote' || _runLoc === 'docker'; - this.terminal.clear(); - this.terminal.writeln(`\x1b[1;32m Starting OpenCode session in ${caseName}...\x1b[0m`); - this.terminal.writeln(''); + const ownsLaunchTerminal = this._beginSessionLaunchStatus(`Starting OpenCode session in ${caseName}...`); // Focus in sync gesture context (see runClaude comment) this.terminal.focus(); @@ -939,8 +968,10 @@ Object.assign(CodemanApp.prototype, { const statusRes = await fetch('/api/opencode/status'); const status = (await statusRes.json()).data; if (!status.available) { - this.terminal.writeln('\x1b[1;31m OpenCode CLI not found.\x1b[0m'); - this.terminal.writeln('\x1b[90m Install with: curl -fsSL https://opencode.ai/install | bash\x1b[0m'); + this._reportSessionLaunchError( + ownsLaunchTerminal, + 'OpenCode CLI not found. Install with: curl -fsSL https://opencode.ai/install | bash' + ); return; } } @@ -973,7 +1004,7 @@ Object.assign(CodemanApp.prototype, { this.terminal.focus(); } catch (err) { - this.terminal.writeln(`\x1b[1;31m Error: ${err.message}\x1b[0m`); + this._reportSessionLaunchError(ownsLaunchTerminal, err.message); } }, @@ -984,9 +1015,7 @@ Object.assign(CodemanApp.prototype, { const _runLoc = (this.cases || []).find(c => c.name === caseName)?.location; const isRemote = _runLoc === 'remote' || _runLoc === 'docker'; - this.terminal.clear(); - this.terminal.writeln(`\x1b[1;32m Starting Codex session in ${caseName}...\x1b[0m`); - this.terminal.writeln(''); + const ownsLaunchTerminal = this._beginSessionLaunchStatus(`Starting Codex session in ${caseName}...`); this.terminal.focus(); try { @@ -994,8 +1023,10 @@ Object.assign(CodemanApp.prototype, { const statusRes = await fetch('/api/codex/status'); const status = (await statusRes.json()).data; if (!status.available) { - this.terminal.writeln('\x1b[1;31m Codex CLI not found.\x1b[0m'); - this.terminal.writeln('\x1b[90m Install with: npm install -g @openai/codex\x1b[0m'); + this._reportSessionLaunchError( + ownsLaunchTerminal, + 'Codex CLI not found. Install with: npm install -g @openai/codex' + ); return; } } @@ -1030,7 +1061,7 @@ Object.assign(CodemanApp.prototype, { this.terminal.focus(); } catch (err) { - this.terminal.writeln(`\x1b[1;31m Error: ${err.message}\x1b[0m`); + this._reportSessionLaunchError(ownsLaunchTerminal, err.message); } }, @@ -1041,9 +1072,7 @@ Object.assign(CodemanApp.prototype, { const _runLoc = (this.cases || []).find(c => c.name === caseName)?.location; const isRemote = _runLoc === 'remote' || _runLoc === 'docker'; - this.terminal.clear(); - this.terminal.writeln(`\x1b[1;32m Starting Gemini session in ${caseName}...\x1b[0m`); - this.terminal.writeln(''); + const ownsLaunchTerminal = this._beginSessionLaunchStatus(`Starting Gemini session in ${caseName}...`); this.terminal.focus(); try { @@ -1051,8 +1080,10 @@ Object.assign(CodemanApp.prototype, { const statusRes = await fetch('/api/gemini/status'); const status = (await statusRes.json()).data; if (!status.available) { - this.terminal.writeln('\x1b[1;31m Gemini CLI not found.\x1b[0m'); - this.terminal.writeln('\x1b[90m Install with: npm install -g @google/gemini-cli\x1b[0m'); + this._reportSessionLaunchError( + ownsLaunchTerminal, + 'Gemini CLI not found. Install with: npm install -g @google/gemini-cli' + ); return; } } @@ -1081,7 +1112,7 @@ Object.assign(CodemanApp.prototype, { this.terminal.focus(); } catch (err) { - this.terminal.writeln(`\x1b[1;31m Error: ${err.message}\x1b[0m`); + this._reportSessionLaunchError(ownsLaunchTerminal, err.message); } }, diff --git a/test/run-mode-ui.test.ts b/test/run-mode-ui.test.ts index 33e2234e..2a95a5b5 100644 --- a/test/run-mode-ui.test.ts +++ b/test/run-mode-ui.test.ts @@ -74,6 +74,36 @@ describe('run mode UI', () => { }); describe('Run launch synchronization', () => { + it('keeps launch progress out of an active session terminal', () => { + const CodemanApp = function CodemanApp(this: any) {}; + const context = vm.createContext({ + CodemanApp, + localStorage: { getItem: () => null, setItem: () => {} }, + document: { getElementById: () => null }, + console, + }); + const sessionUi = readFileSync(resolve(import.meta.dirname, '../src/web/public/session-ui.js'), 'utf8'); + vm.runInContext(sessionUi, context, { filename: 'session-ui.js' }); + + const app = new (CodemanApp as any)(); + app.activeSessionId = 'existing-session'; + app.terminal = { + clear: vi.fn(), + writeln: vi.fn(), + }; + app.showToast = vi.fn(); + + const ownsTerminal = app._beginSessionLaunchStatus('Starting Codex session', '1;32'); + app._appendSessionLaunchStatus(ownsTerminal, 'Creating session'); + app._reportSessionLaunchError(ownsTerminal, 'Launch failed'); + + expect(ownsTerminal).toBe(false); + expect(app.terminal.clear).not.toHaveBeenCalled(); + expect(app.terminal.writeln).not.toHaveBeenCalled(); + expect(app.showToast).toHaveBeenNthCalledWith(1, 'Starting Codex session', 'info'); + expect(app.showToast).toHaveBeenNthCalledWith(2, 'Launch failed', 'error'); + }); + it('coalesces overlapping Run activations and disables the button while the request is active', async () => { const runBtn = { disabled: false, From acb1b986a6fc060649fccefb77a34b8b64544326 Mon Sep 17 00:00:00 2001 From: lior Date: Tue, 28 Jul 2026 05:08:43 +0300 Subject: [PATCH 36/49] feat(codex): make terminal animations configurable --- src/web/public/index.html | 8 ++++++++ src/web/public/session-ui.js | 1 + src/web/public/settings-ui.js | 3 +++ test/run-mode-ui.test.ts | 5 ++++- 4 files changed, 16 insertions(+), 1 deletion(-) diff --git a/src/web/public/index.html b/src/web/public/index.html index 9b07a63c..62bac7f0 100644 --- a/src/web/public/index.html +++ b/src/web/public/index.html @@ -1650,6 +1650,14 @@

App Settings

Start new Codex sessions with --dangerously-bypass-approvals-and-sandbox
+
+ + + Decorative Codex TUI motion for new local sessions. Leave off to reduce remote and mobile redraws. +
@@ -2698,6 +2698,7 @@

Save Respawn Preset

+ diff --git a/src/web/public/keyboard-accessory.js b/src/web/public/keyboard-accessory.js index 4b0c5998..3d2b71ed 100644 --- a/src/web/public/keyboard-accessory.js +++ b/src/web/public/keyboard-accessory.js @@ -593,9 +593,7 @@ const KeyboardAccessoryBar = { * Sends text and Enter separately so Ink processes them as distinct events. */ sendCommand(command) { if (!app.activeSessionId) return; - // The durable input queue preserves these as two ordered records. - app.sendInput(command); - app.sendInput('\r'); + app.sendTerminalCommand(command); }, /** Browse the active session's workspace and insert a selected path without Enter. */ @@ -1090,7 +1088,8 @@ const MobileTerminalControls = { /** * Resolve the canonical per-device setting while preserving both shipped * legacy formats. The old extendedKeyboardBar=false selected a smaller bar; - * it never disabled mobile controls, so touch devices still default on. + * it never disabled mobile controls. Only explicit canonical or legacy + * enablement turns the consolidated controls on. */ resolveEnabled(settings = {}, defaults = {}, isTouchDevice = null) { if (typeof settings?.mobileTerminalControlsEnabled === 'boolean') { @@ -1105,11 +1104,7 @@ const MobileTerminalControls = { if (settings?.extendedKeyboardBar === true || defaults?.extendedKeyboardBar === true) { return true; } - const touchDevice = - typeof isTouchDevice === 'boolean' - ? isTouchDevice - : typeof MobileDetection !== 'undefined' && MobileDetection.isTouchDevice(); - return touchDevice; + return false; }, init(enabled = false) { diff --git a/src/web/public/session-ui.js b/src/web/public/session-ui.js index 62f1f976..e0f729e9 100644 --- a/src/web/public/session-ui.js +++ b/src/web/public/session-ui.js @@ -541,26 +541,10 @@ Object.assign(CodemanApp.prototype, { } }, - /** Send Enter to the active session (phone toolbar button). - * - * MUST go through xterm's onData path, NOT straight to sendInput()/the API. - * With local echo on (the mobile default) the characters you typed are still - * buffered in the LocalEchoOverlay and have NEVER reached the PTY. The onData - * Enter branch (terminal-ui.js) is what flushes that pending text and only - * then sends \r. Send a bare \r instead and you submit an empty line while the - * typed text stays stranded on screen — which reads as "the button does - * nothing". triggerDataEvent replays it exactly as if the key were pressed, - * so overlay flush, flushed-offset cleanup and ordering are all reused. */ + /** Send Enter through the controller-owned draft and delivery path. */ sendEnterKey() { if (!this.activeSessionId) return; - const coreService = this.terminal?._core?.coreService; - if (coreService && typeof coreService.triggerDataEvent === 'function') { - coreService.triggerDataEvent('\r', true); - return; - } - // Fallback only if xterm's private core API moves: correct when local echo - // is off, and still better than doing nothing. - this.sendInput('\r'); + this._terminalInputController?.sendControl('\r'); }, _initRunMode() { diff --git a/src/web/public/terminal-input-controller.js b/src/web/public/terminal-input-controller.js new file mode 100644 index 00000000..3a90162e --- /dev/null +++ b/src/web/public/terminal-input-controller.js @@ -0,0 +1,1025 @@ +/** + * @fileoverview Single pre-delivery controller for terminal text input. + * + * Browser/xterm/CJK/accessory adapters feed semantic input into this class. + * It owns transient composition state, alternate-path deduplication, local + * echo mutations, helper-textarea lifecycle, and final delivery ordering. + * Durable draft persistence and exactly-once transport remain injected ports. + * + * @globals {TerminalInputController} + * @dependency None + * @loadorder 5.58 of 16 - loaded after terminal-input-state.js, before app.js + */ + +class TerminalInputController { + constructor(options = {}) { + this._textarea = options.textarea || null; + this._terminal = options.terminal || null; + this._overlay = options.overlay || null; + this._getOverlay = typeof options.getOverlay === 'function' ? options.getOverlay : () => this._overlay; + this._getSessionId = typeof options.getSessionId === 'function' ? options.getSessionId : () => ''; + this._getSessionMode = typeof options.getSessionMode === 'function' ? options.getSessionMode : () => ''; + this._isLocalEchoEnabled = + typeof options.isLocalEchoEnabled === 'function' ? options.isLocalEchoEnabled : () => false; + this._isRestoringDraft = typeof options.isRestoringDraft === 'function' ? options.isRestoringDraft : () => false; + this._captureDraft = typeof options.captureDraft === 'function' ? options.captureDraft : () => {}; + this._setDraft = typeof options.setDraft === 'function' ? options.setDraft : () => {}; + this._clearDraft = typeof options.clearDraft === 'function' ? options.clearDraft : () => {}; + this._deliver = typeof options.deliver === 'function' ? options.deliver : () => {}; + this._preparePaste = typeof options.preparePaste === 'function' ? options.preparePaste : (text) => text; + this._sendNamedKey = typeof options.sendNamedKey === 'function' ? options.sendNamedKey : () => {}; + this._trace = typeof options.trace === 'function' ? options.trace : () => {}; + this._log = typeof options.log === 'function' ? options.log : () => {}; + this._setTimer = + typeof options.setTimer === 'function' + ? options.setTimer + : (callback, delay) => globalThis.setTimeout(callback, delay); + this._clearTimer = + typeof options.clearTimer === 'function' ? options.clearTimer : (timer) => globalThis.clearTimeout(timer); + this._now = typeof options.now === 'function' ? options.now : () => globalThis.performance?.now?.() ?? Date.now(); + this._commitTimeoutMs = Number.isFinite(options.commitTimeoutMs) ? options.commitTimeoutMs : 80; + this._onTab = typeof options.onTab === 'function' ? options.onTab : null; + + this._compositionActive = false; + this._compositionPending = false; + this._compositionEpoch = 0; + this._expectedCommit = null; + this._fallbackCommit = null; + this._fallbackSessionId = null; + this._compositionCommitTimer = null; + this._pendingDelivery = ''; + this._pendingDeliverySessionId = null; + this._deliveryFlushTimer = null; + this._lastKeystrokeTime = 0; + this._compositionInputCommittedEpoch = -1; + this._ignoredCompositionEndEpoch = -1; + this._helperMutationSnapshot = null; + this._lastKeydownHandledAt = -Infinity; + this._lastBackspaceKeydownAt = -Infinity; + this._lastMobileEnterKeydownAt = -Infinity; + this._mobileLineBreakPending = false; + this._mobileLineBreakFallbackTimer = null; + this._textareaListeners = []; + this._lastRoutedPaste = ''; + this._lastRoutedPasteAt = 0; + this._lastRoutedPasteSource = ''; + this._multipartPasteUntil = 0; + this._multipartPasteCandidateUntil = 0; + } + + get state() { + return { + compositionActive: this._compositionActive, + compositionPending: this._compositionPending, + compositionEpoch: this._compositionEpoch, + expectedCommit: this._expectedCommit, + fallbackCommit: this._fallbackCommit, + fallbackSessionId: this._fallbackSessionId, + pendingDelivery: this._pendingDelivery, + }; + } + + beginComposition() { + this._clearMobileLineBreakTimer(); + this._mobileLineBreakPending = false; + this._compositionActive = true; + this._compositionEpoch += 1; + this._compositionInputCommittedEpoch = -1; + this._helperMutationSnapshot = null; + this._compositionPending = false; + this._expectedCommit = null; + this.clearCompositionDelivery(); + this._clearCompositionTimer(); + const overlay = this._getOverlay(); + if (this._isLocalEchoEnabled()) { + overlay?.setCompositionText?.(''); + this._captureDraft(); + } + this._trace('compositionstart', { + epoch: this._compositionEpoch, + helperLen: this._textarea?.value?.length || 0, + pendingLen: overlay?.pendingText?.length || 0, + local: !!this._isLocalEchoEnabled(), + }); + } + + updateComposition(text) { + if (!this._isLocalEchoEnabled()) return; + this._getOverlay()?.setCompositionText?.(typeof text === 'string' ? text : ''); + this._captureDraft(); + } + + endComposition(text) { + const belongsToKnownComposition = + this._compositionActive || + this._compositionInputCommittedEpoch === this._compositionEpoch || + this._ignoredCompositionEndEpoch === this._compositionEpoch || + this._mobileLineBreakPending; + if (!belongsToKnownComposition) { + this._trace('compositionend-orphan-drop', { + epoch: this._compositionEpoch, + dataLen: typeof text === 'string' ? text.length : 0, + }); + this._resetHelperTextarea(); + return; + } + this._compositionActive = false; + const overlay = this._getOverlay(); + const fallbackText = (typeof text === 'string' && text) || overlay?.compositionText || ''; + this._expectedCommit = this._isLocalEchoEnabled() && fallbackText ? fallbackText : null; + this._compositionPending = true; + this._clearCompositionTimer(); + this._trace('compositionend', { + epoch: this._compositionEpoch, + dataLen: typeof text === 'string' ? text.length : 0, + helperLen: this._textarea?.value?.length || 0, + pendingLen: overlay?.pendingText?.length || 0, + local: !!this._isLocalEchoEnabled(), + }); + if (this._ignoredCompositionEndEpoch === this._compositionEpoch) { + this._ignoredCompositionEndEpoch = -1; + this._compositionPending = false; + this._expectedCommit = null; + return; + } + if (this._compositionInputCommittedEpoch === this._compositionEpoch) { + this._compositionInputCommittedEpoch = -1; + this._compositionPending = false; + this._expectedCommit = null; + this._clearCompositionTimer(); + return; + } + + const endedEpoch = this._compositionEpoch; + if (!this._isLocalEchoEnabled()) { + this._compositionCommitTimer = this._setTimer(() => { + this._compositionCommitTimer = null; + if (endedEpoch === this._compositionEpoch) { + this._compositionPending = false; + } + }, this._commitTimeoutMs); + return; + } + + if (this._mobileLineBreakPending) { + this._mobileLineBreakPending = false; + this._clearMobileLineBreakTimer(); + this.insertDraftLineBreak(fallbackText); + return; + } + + this._compositionCommitTimer = this._setTimer(() => { + this._compositionCommitTimer = null; + if (!this._compositionPending || endedEpoch !== this._compositionEpoch) { + return; + } + this.commitCompositionFallback(fallbackText); + }, this._commitTimeoutMs); + } + + setCompositionPending(value, expectedText = null) { + this._compositionPending = value === true; + this._expectedCommit = + this._compositionPending && typeof expectedText === 'string' && expectedText ? expectedText : null; + if (!this._compositionPending) this._clearCompositionTimer(); + } + + commitCompositionFallback(text) { + if (!this._compositionPending) return false; + const overlay = this._getOverlay(); + const finalText = (typeof text === 'string' && text) || overlay?.compositionText || ''; + if (!finalText) { + this._compositionPending = false; + this._expectedCommit = null; + overlay?.clearComposition?.(); + this._resetHelperTextarea(); + this._captureDraft(); + return false; + } + this._acceptComposition(finalText); + return true; + } + + handleTerminalData(data, source = null) { + const sessionId = this._getSessionId(); + if (!sessionId || !data) return false; + const localEcho = !!this._isLocalEchoEnabled(); + const firstCode = data.charCodeAt(0); + const isCompositionText = data !== '\x7f' && firstCode >= 32; + const inputKind = this._classifyData(data); + const actualSource = source || 'xterm'; + + this._trace('ondata', { + source: actualSource, + kind: inputKind, + len: data.length, + local: localEcho, + pendingLen: this._getOverlay()?.pendingText?.length || 0, + markerLen: this._fallbackCommit?.length || 0, + markerEq: data === this._fallbackCommit, + compositionPending: this._compositionPending, + expectedLen: this._expectedCommit?.length || 0, + }); + + if (this._fallbackCommit !== null && this._fallbackSessionId !== sessionId) { + this._trace('marker-clear', { reason: 'session' }); + this.clearCompositionDelivery(); + } + + if (localEcho && this._compositionPending && data === '\x7f') { + this._compositionPending = false; + this._compositionActive = false; + this._expectedCommit = null; + this._clearCompositionTimer(); + this._getOverlay()?.clearComposition?.(); + this.clearCompositionDelivery(); + this._resetHelperTextarea(); + this._trace('composition-cancel', { reason: 'delete' }); + } + + if (localEcho && this._compositionActive && isCompositionText) { + this._trace('composition-interim-drop', { + source: actualSource, + len: data.length, + }); + return true; + } + + const fallbackCommit = this._fallbackCommit; + if (fallbackCommit !== null && data === fallbackCommit) { + this._trace('marker-drop', { + reason: 'match', + len: data.length, + }); + this.clearCompositionDelivery(); + return true; + } + + if (fallbackCommit !== null) { + const acceptsComposition = + data.length === 1 && data !== '\x7f' && (/\s/.test(data) || (firstCode >= 32 && !/[\p{L}\p{N}]/u.test(data))); + if (!acceptsComposition) { + this._trace('marker-clear', { + reason: 'substantive', + len: data.length, + kind: inputKind, + }); + this.clearCompositionDelivery(); + } else { + this._trace('marker-keep', { + reason: 'boundary', + kind: inputKind, + }); + } + } + + if (!localEcho && this._compositionPending && isCompositionText) { + this._compositionPending = false; + this._clearCompositionTimer(); + this._rememberCompositionDelivery(data); + this._resetHelperTextarea(); + this._trace('marker-remember', { + source: 'shell', + len: data.length, + }); + } + + if (localEcho) { + return this._handleLocalEchoData(data, isCompositionText, actualSource, sessionId); + } + + this._queueNormalDelivery(data, sessionId); + return true; + } + + sendControl(data) { + if (!data || !this._getSessionId()) return; + if (this._isLocalEchoEnabled()) { + const compositionText = this._getOverlay()?.compositionText || ''; + if (compositionText) { + this.setCompositionPending(true, compositionText); + this.commitCompositionFallback(compositionText); + } + if (this._terminal?.input) { + this._terminal.input(data); + } else { + this.handleTerminalData(data, 'terminal-control'); + } + return; + } + this._flushDelivery(); + this._deliver(this._getSessionId(), data); + } + + insertText(text) { + const sessionId = this._getSessionId(); + if (!sessionId || !text) return; + if (this._isLocalEchoEnabled()) { + this._getOverlay()?.appendText?.(text); + this._captureDraft(); + return; + } + this._flushDelivery(); + this._deliver(sessionId, text); + } + + sendExternalText(text, options = {}) { + const sessionId = this._getSessionId(); + if (!sessionId || !text) return; + this._flushDelivery(); + this.clearCompositionDelivery(); + this._deliver(sessionId, text, { + useMux: options.useMux !== false, + }); + } + + sendCommand(command) { + if (!command || !this._getSessionId()) return; + this.insertText(command); + this.sendControl('\r'); + } + + sendPaste(text, options = {}) { + const sessionId = this._getSessionId(); + if (!sessionId || !text) return; + const mode = this._getSessionMode(); + const input = this._preparePaste(String(text), mode !== 'shell'); + this._flushDelivery(); + this._deliver(sessionId, input, { useMux: false }); + if (options.submit) { + this._deliver(sessionId, '\r', { useMux: false }); + } + } + + sendModifiedEnter(keyName) { + const sessionId = this._getSessionId(); + if (!sessionId || !keyName) return; + const overlay = this._getOverlay(); + if (!this._isLocalEchoEnabled()) { + this._flushDelivery(); + this._sendNamedKey(sessionId, keyName, 0); + return; + } + + const compositionText = overlay?.compositionText || ''; + if (compositionText) { + this.setCompositionPending(true, compositionText); + this.commitCompositionFallback(compositionText); + } + const text = overlay?.pendingText || ''; + overlay?.clear?.(); + overlay?.suppressBufferDetection?.(); + this._setDraft(sessionId, { + pendingText: '', + flushedText: text + '\n', + cjkText: '', + updatedAt: Date.now(), + }); + if (text) this._deliver(sessionId, text); + this._sendNamedKey(sessionId, keyName, text ? 80 : 0); + this._resetHelperTextarea(); + } + + insertDraftLineBreak(fallbackText = '') { + const sessionId = this._getSessionId(); + if (!sessionId) return; + const overlay = this._getOverlay(); + if (!this._isLocalEchoEnabled()) { + this._resetHelperTextarea(); + this.sendControl('\r'); + return; + } + const compositionText = fallbackText || overlay?.compositionText || ''; + if (compositionText) { + this.setCompositionPending(true, compositionText); + this.commitCompositionFallback(compositionText); + } else { + overlay?.clearComposition?.(); + } + overlay?.appendText?.('\n'); + this._captureDraft(); + this._resetHelperTextarea(); + } + + clearInput() { + const sessionId = this._getSessionId(); + if (!sessionId) return; + this.clearDeliveryBuffer(); + this._resetCompositionState(); + + const overlay = this._getOverlay(); + if (this._isLocalEchoEnabled() && overlay) { + const flushed = overlay.getFlushed?.() || { + count: 0, + text: '', + }; + overlay.clear?.(); + overlay.suppressBufferDetection?.(); + this._clearDraft(sessionId); + if (flushed.count > 0) { + this._deliver(sessionId, '\x7f'.repeat(flushed.count), { useMux: true }); + } + } else { + this._deliver(sessionId, '\x15', { useMux: true }); + } + this._resetHelperTextarea(); + } + + clearDeliveryBuffer() { + this._pendingDelivery = ''; + this._pendingDeliverySessionId = null; + if (this._deliveryFlushTimer !== null) { + this._clearTimer(this._deliveryFlushTimer); + this._deliveryFlushTimer = null; + } + } + + clearCompositionDelivery() { + this._fallbackCommit = null; + this._fallbackSessionId = null; + } + + reset(options = {}) { + if (options.flushDelivery !== false) { + this._cancelDeliveryFlush(); + this._flushDelivery(); + } else { + this.clearDeliveryBuffer(); + } + this._resetCompositionState(); + this._lastRoutedPaste = ''; + this._lastRoutedPasteAt = 0; + this._lastRoutedPasteSource = ''; + this._multipartPasteUntil = 0; + this._multipartPasteCandidateUntil = 0; + this._resetHelperTextarea(); + } + + attachTextarea(container, options = {}) { + if (!this._textarea || !container || this._textareaListeners.length) { + return false; + } + const mobile = options.mobile === true; + const on = (target, type, handler, listenerOptions) => { + target.addEventListener(type, handler, listenerOptions); + this._textareaListeners.push({ + target, + type, + handler, + listenerOptions, + }); + }; + + if (mobile) { + this._attachMobileCompositionListeners(container, on); + } + this._attachPasteListeners(on, { + segmentedFallback: mobile, + }); + return true; + } + + detachTextarea() { + for (const { target, type, handler, listenerOptions } of this._textareaListeners) { + target.removeEventListener(type, handler, listenerOptions); + } + this._textareaListeners = []; + this._clearMobileLineBreakTimer(); + } + + destroy() { + this.detachTextarea(); + this.reset(); + } + + _attachMobileCompositionListeners(container, on) { + const textarea = this._textarea; + + on(textarea, 'compositionstart', () => { + this.beginComposition(); + }); + on(textarea, 'compositionupdate', (event) => { + this.updateComposition(event.data || ''); + }); + on(textarea, 'compositionend', (event) => { + this.endComposition(event.data || ''); + }); + on(textarea, 'keydown', (event) => { + if (event.key === 'Enter') { + this._lastMobileEnterKeydownAt = this._now(); + } + if (!event.isComposing && event.keyCode === 229) { + this._helperMutationSnapshot = this._captureHelperMutationSnapshot(); + } + if (!event.isComposing && event.keyCode !== 229) { + this._lastKeydownHandledAt = this._now(); + if (event.key === 'Backspace') { + this._lastBackspaceKeydownAt = this._now(); + } + } + }); + on( + textarea, + 'beforeinput', + (event) => { + if (!event.isComposing && (event.inputType === 'insertText' || event.inputType === 'insertReplacementText')) { + this._helperMutationSnapshot = this._captureHelperMutationSnapshot(); + } + + const isLineBreak = event.inputType === 'insertLineBreak' || event.inputType === 'insertParagraph'; + const followsMobileEnter = isLineBreak && this._now() - this._lastMobileEnterKeydownAt < 500; + if (followsMobileEnter && this._getSessionId()) { + event.preventDefault(); + event.stopImmediatePropagation(); + this._lastMobileEnterKeydownAt = -Infinity; + if (!this._isLocalEchoEnabled()) { + this.insertDraftLineBreak(); + return; + } + if (this._compositionActive || event.isComposing) { + this._mobileLineBreakPending = true; + const lineBreakEpoch = this._compositionEpoch; + const fallbackText = this._getOverlay()?.compositionText || ''; + this._clearMobileLineBreakTimer(); + this._mobileLineBreakFallbackTimer = this._setTimer(() => { + this._mobileLineBreakFallbackTimer = null; + if (!this._mobileLineBreakPending || lineBreakEpoch !== this._compositionEpoch) { + return; + } + this._mobileLineBreakPending = false; + this._ignoredCompositionEndEpoch = lineBreakEpoch; + this._compositionActive = false; + this.insertDraftLineBreak(fallbackText); + }, this._commitTimeoutMs); + } else { + this.insertDraftLineBreak(); + } + return; + } + + if ( + this._compositionActive || + event.isComposing || + !this._getSessionId() || + (event.inputType !== 'deleteContentBackward' && event.inputType !== 'deleteWordBackward') + ) { + return; + } + event.preventDefault(); + event.stopImmediatePropagation(); + this._resetHelperTextarea(); + if (this._now() - this._lastBackspaceKeydownAt < 50) { + return; + } + this.handleTerminalData('\x7f', 'beforeinput-delete'); + }, + true + ); + on( + container, + 'input', + (event) => { + if ( + event.target !== textarea || + (event.inputType !== 'insertText' && event.inputType !== 'insertReplacementText') + ) { + return; + } + + event.stopPropagation(); + this._trace('input-capture', { + type: event.inputType || 'none', + eventComp: !!event.isComposing, + stateComp: this._compositionActive, + eventLen: typeof event.data === 'string' ? event.data.length : -1, + helperLen: textarea.value.length, + snapshotLen: this._helperMutationSnapshot?.value?.length ?? -1, + pendingLen: this._getOverlay()?.pendingText?.length || 0, + markerLen: this._fallbackCommit?.length || 0, + }); + if (event.isComposing) return; + + const snapshot = this._helperMutationSnapshot; + this._helperMutationSnapshot = null; + const mutation = this._deriveTextareaMutation(snapshot, textarea.value); + const eventData = typeof event.data === 'string' ? event.data : ''; + const data = snapshot + ? mutation.insertedText || eventData + : eventData || mutation.insertedText || textarea.value; + this._trace('input-route', { + eventLen: eventData.length, + insertedLen: mutation.insertedText.length, + removedLen: mutation.removedText.length, + routeLen: data.length, + markerLen: this._fallbackCommit?.length || 0, + markerEq: data === this._fallbackCommit, + pendingLen: this._getOverlay()?.pendingText?.length || 0, + }); + if (!data && !mutation.removedText) return; + + const finalizingComposition = this._compositionActive; + if (finalizingComposition) { + this._compositionActive = false; + this._compositionInputCommittedEpoch = this._compositionEpoch; + this._compositionPending = true; + this._expectedCommit = this._getOverlay()?.compositionText || null; + this._clearCompositionTimer(); + } + + if (!finalizingComposition && this._now() - this._lastKeydownHandledAt < 50) { + this._resetHelperTextarea(); + return; + } + + const pendingText = this._getOverlay()?.pendingText || ''; + const shouldApplyReplacement = + mutation.removedText && (!this._isLocalEchoEnabled() || pendingText.endsWith(mutation.removedText)); + + this._resetHelperTextarea(); + if (shouldApplyReplacement) { + for (const _char of mutation.removedText) { + this.handleTerminalData('\x7f', 'capture-replacement'); + } + } + if (data) { + this.handleTerminalData(data, 'capture-input'); + } + }, + true + ); + } + + _attachPasteListeners(on, options) { + const textarea = this._textarea; + const multipartGapMs = 40; + const readPasteText = (event) => { + const candidates = [ + event.clipboardData?.getData?.('text/plain'), + event.dataTransfer?.getData?.('text/plain'), + typeof event.data === 'string' ? event.data : '', + textarea.value, + ]; + return candidates.reduce( + (longest, value) => (typeof value === 'string' && value.length > longest.length ? value : longest), + '' + ); + }; + const routeTextPaste = (event, source, explicitText) => { + const sessionId = this._getSessionId(); + if (!sessionId || this._getSessionMode() === 'shell') { + return false; + } + const text = explicitText ?? readPasteText(event); + if (!text) return false; + event.preventDefault(); + event.stopImmediatePropagation(); + this._resetHelperTextarea(); + const now = this._now(); + const duplicateInputAfterCapture = + text === this._lastRoutedPaste && + now - this._lastRoutedPasteAt < 100 && + source.startsWith('input:') && + (this._lastRoutedPasteSource === 'clipboard' || this._lastRoutedPasteSource.startsWith('beforeinput:')); + if (duplicateInputAfterCapture) return true; + + this._lastRoutedPaste = text; + this._lastRoutedPasteAt = now; + this._lastRoutedPasteSource = source; + const lineBreaks = text.match(/\r\n|\r|\n/g)?.length || 0; + this._log(`XTERM_PASTE source=${source} len=${text.length} breaks=${lineBreaks}`); + if (this._isLocalEchoEnabled()) { + this.insertText(text); + } else { + this.sendPaste(text); + } + return true; + }; + const routeInputPasteMutation = (event, phase) => { + const inputType = event.inputType || ''; + const mutationText = typeof event.data === 'string' ? event.data : ''; + const now = this._now(); + const continuesMultipartPaste = now <= this._multipartPasteUntil; + + if (inputType === 'insertFromPaste') { + if (routeTextPaste(event, `${phase}:paste`)) { + this._multipartPasteCandidateUntil = 0; + this._multipartPasteUntil = now + multipartGapMs; + } + return; + } + + if (options.segmentedFallback && inputType === 'insertText' && mutationText) { + if (!continuesMultipartPaste) { + this._multipartPasteCandidateUntil = mutationText.length > 1 ? now + multipartGapMs : 0; + return; + } + if (routeTextPaste(event, `${phase}:text`, mutationText)) { + this._multipartPasteUntil = now + multipartGapMs; + } + return; + } + if ( + options.segmentedFallback && + (continuesMultipartPaste || now <= this._multipartPasteCandidateUntil) && + (inputType === 'insertLineBreak' || inputType === 'insertParagraph') + ) { + if (routeTextPaste(event, `${phase}:break`, '\n')) { + this._multipartPasteCandidateUntil = 0; + this._multipartPasteUntil = now + multipartGapMs; + } + return; + } + this._multipartPasteCandidateUntil = 0; + }; + + on( + textarea, + 'paste', + (event) => { + routeTextPaste(event, 'clipboard'); + }, + true + ); + on( + textarea, + 'beforeinput', + (event) => { + routeInputPasteMutation(event, 'beforeinput'); + }, + true + ); + on( + textarea, + 'input', + (event) => { + routeInputPasteMutation(event, 'input'); + }, + true + ); + } + + _captureHelperMutationSnapshot() { + const value = this._textarea?.value || ''; + const start = this._textarea?.selectionStart ?? value.length; + return { + value, + start, + end: this._textarea?.selectionEnd ?? this._textarea?.selectionStart ?? value.length, + }; + } + + _deriveTextareaMutation(snapshot, currentValue) { + const current = String(currentValue ?? ''); + if (!snapshot) { + return { + insertedText: current, + removedText: '', + }; + } + const previous = String(snapshot.value ?? ''); + const start = Math.max(0, Math.min(previous.length, snapshot.start ?? previous.length)); + const end = Math.max(start, Math.min(previous.length, snapshot.end ?? start)); + const prefix = previous.slice(0, start); + const suffix = previous.slice(end); + if (current.startsWith(prefix) && current.endsWith(suffix) && current.length >= prefix.length + suffix.length) { + return { + insertedText: current.slice(prefix.length, current.length - suffix.length), + removedText: previous.slice(start, end), + }; + } + + let commonPrefix = 0; + while ( + commonPrefix < previous.length && + commonPrefix < current.length && + previous[commonPrefix] === current[commonPrefix] + ) { + commonPrefix += 1; + } + let commonSuffix = 0; + while ( + commonSuffix < previous.length - commonPrefix && + commonSuffix < current.length - commonPrefix && + previous[previous.length - 1 - commonSuffix] === current[current.length - 1 - commonSuffix] + ) { + commonSuffix += 1; + } + return { + insertedText: current.slice(commonPrefix, current.length - commonSuffix), + removedText: previous.slice(commonPrefix, previous.length - commonSuffix), + }; + } + + _handleLocalEchoData(data, isCompositionText, source, sessionId) { + const overlay = this._getOverlay(); + + if (this._compositionPending && isCompositionText) { + const expectedCommit = this._expectedCommit; + const hasStaleHelperPrefix = + expectedCommit && data.length > expectedCommit.length && data.endsWith(expectedCommit); + const finalText = hasStaleHelperPrefix ? expectedCommit : data; + if (hasStaleHelperPrefix) { + this._trace('composition-strip-stale-prefix', { + payloadLen: data.length, + finalLen: finalText.length, + }); + } + this._trace('composition-accept', { + source, + len: finalText.length, + }); + this._acceptComposition(finalText); + return true; + } + + if (data === '\x7f') { + const removedFrom = overlay?.removeChar?.(); + if (removedFrom !== 'pending') { + this._deliver(sessionId, data); + } + this._captureDraft(); + return true; + } + + if (/^[\r\n]+$/.test(data)) { + const text = overlay?.pendingText || ''; + if (text) { + const lineBreaks = text.match(/\r\n|\r|\n/g)?.length || 0; + this._log(`LOCAL_ECHO_SUBMIT len=${text.length} breaks=${lineBreaks}`); + } + overlay?.clear?.(); + overlay?.suppressBufferDetection?.(); + this._clearDraft(sessionId); + this.clearDeliveryBuffer(); + if (text) { + const mode = this._getSessionMode(); + const input = /[\r\n]/.test(text) && mode !== 'shell' ? this._preparePaste(text, true) : text; + this._deliver(sessionId, input); + } + this._deliver(sessionId, '\r'); + this._resetHelperTextarea(); + return true; + } + + if (data.length > 1 && data.charCodeAt(0) >= 32) { + overlay?.appendText?.(data); + this._captureDraft(); + return true; + } + + if (data.charCodeAt(0) < 32) { + if (data.length > 1 && data.charCodeAt(0) === 27) { + this._deliver(sessionId, data); + return true; + } + if (this._isRestoringDraft()) { + this._deliver(sessionId, data); + return true; + } + if (data === '\t' && this._onTab) { + const handled = + this._onTab({ + controller: this, + overlay, + sessionId, + text: overlay?.pendingText || '', + }) !== false; + if (handled) this._resetHelperTextarea(); + return handled; + } + const text = overlay?.pendingText || ''; + overlay?.clear?.(); + overlay?.suppressBufferDetection?.(); + this._clearDraft(sessionId); + if (text) this._deliver(sessionId, text); + this._deliver(sessionId, data); + this._resetHelperTextarea(); + return true; + } + + if (data.length === 1 && data.charCodeAt(0) >= 32) { + overlay?.addChar?.(data); + this._captureDraft(); + return true; + } + + return false; + } + + _queueNormalDelivery(data, sessionId) { + if (this._pendingDeliverySessionId && this._pendingDeliverySessionId !== sessionId) { + this._flushDelivery(); + } + this._pendingDeliverySessionId = sessionId; + this._pendingDelivery += data; + + if (data.charCodeAt(0) < 32 || data.length > 1) { + this._cancelDeliveryFlush(); + this._flushDelivery(); + return; + } + + const now = this._now(); + if (now - this._lastKeystrokeTime > 50) { + this._cancelDeliveryFlush(); + this._lastKeystrokeTime = now; + this._flushDelivery(); + return; + } + + this._lastKeystrokeTime = now; + if (this._deliveryFlushTimer === null) { + this._deliveryFlushTimer = this._setTimer(() => { + this._deliveryFlushTimer = null; + this._flushDelivery(); + }, 0); + } + } + + _flushDelivery() { + if (!this._pendingDelivery) return; + const sessionId = this._pendingDeliverySessionId || this._getSessionId(); + const data = this._pendingDelivery; + this._pendingDelivery = ''; + this._pendingDeliverySessionId = null; + if (sessionId) this._deliver(sessionId, data); + } + + _cancelDeliveryFlush() { + if (this._deliveryFlushTimer === null) return; + this._clearTimer(this._deliveryFlushTimer); + this._deliveryFlushTimer = null; + } + + _acceptComposition(finalText) { + this._compositionPending = false; + this._expectedCommit = null; + this._clearCompositionTimer(); + this._getOverlay()?.commitComposition?.(finalText); + this._resetHelperTextarea(); + this._captureDraft(); + this._rememberCompositionDelivery(finalText); + } + + _rememberCompositionDelivery(finalText) { + this._fallbackCommit = finalText; + this._fallbackSessionId = this._getSessionId(); + } + + _resetHelperTextarea() { + if (!this._textarea) return; + if (this._textarea.value !== '') { + this._textarea.value = ''; + } + try { + this._textarea.setSelectionRange?.(0, 0); + } catch { + /* hidden textarea may be detached during terminal teardown */ + } + } + + _clearCompositionTimer() { + if (this._compositionCommitTimer === null) return; + this._clearTimer(this._compositionCommitTimer); + this._compositionCommitTimer = null; + } + + _clearMobileLineBreakTimer() { + if (this._mobileLineBreakFallbackTimer === null) { + return; + } + this._clearTimer(this._mobileLineBreakFallbackTimer); + this._mobileLineBreakFallbackTimer = null; + } + + _resetCompositionState() { + this._compositionActive = false; + this._compositionPending = false; + this._expectedCommit = null; + this.clearCompositionDelivery(); + this._clearCompositionTimer(); + this._clearMobileLineBreakTimer(); + this._mobileLineBreakPending = false; + this._compositionInputCommittedEpoch = -1; + this._ignoredCompositionEndEpoch = -1; + this._helperMutationSnapshot = null; + this._lastKeydownHandledAt = -Infinity; + this._lastBackspaceKeydownAt = -Infinity; + this._lastMobileEnterKeydownAt = -Infinity; + this._compositionEpoch += 1; + this._getOverlay()?.clearComposition?.(); + } + + _classifyData(data) { + const firstCode = data.charCodeAt(0); + if (data.length === 1) { + if (firstCode === 127) return 'delete'; + if (firstCode < 32) return 'control'; + if (/\s/.test(data)) return 'boundary'; + return 'printable'; + } + return firstCode === 27 ? 'escape' : 'text'; + } +} + +globalThis.TerminalInputController = TerminalInputController; diff --git a/src/web/public/terminal-ui.js b/src/web/public/terminal-ui.js index ed2477f5..f0f044e9 100644 --- a/src/web/public/terminal-ui.js +++ b/src/web/public/terminal-ui.js @@ -7,6 +7,7 @@ * @dependency app.js (CodemanApp class, this.terminal, this.fitAddon, this.sessions) * @dependency constants.js (DEC_SYNC_STRIP_RE, TIMING constants) * @dependency mobile-handlers.js (MobileDetection) + * @dependency terminal-input-controller.js (TerminalInputController) * @dependency vendor/xterm.js, vendor/xterm-addon-fit.js, vendor/xterm-addon-webgl.js * @dependency vendor/xterm-zerolag-input.js (LocalEchoOverlay) * @loadorder 7 of 15 — loaded after app.js, before respawn-ui.js @@ -21,9 +22,6 @@ // short window, only the app's synthetic tap-to-position mouse event should // reach xterm. const TOUCH_COMPAT_MOUSE_SUPPRESS_MS = 450; - const MOBILE_COMPOSITION_COMMIT_TIMEOUT_MS = 80; - const MOBILE_COMPOSITION_DEDUPE_TIMEOUT_MS = 1000; - const MOBILE_ENTER_KEYDOWN_WINDOW_MS = 500; const TUI_PROMPT_BOTTOM_BAND_ROWS = 8; const TUI_PROMPT_DEFAULT_ROWS_FROM_BOTTOM = 4; @@ -39,57 +37,6 @@ return isTerminalQueryResponse(data); } - function deriveMobileTextareaMutation(snapshot, currentValue) { - const current = String(currentValue ?? ''); - if (!snapshot) { - return { insertedText: current, removedText: '' }; - } - - const previous = String(snapshot.value ?? ''); - const start = Math.max(0, Math.min(previous.length, snapshot.start ?? previous.length)); - const end = Math.max(start, Math.min(previous.length, snapshot.end ?? start)); - const prefix = previous.slice(0, start); - const suffix = previous.slice(end); - if ( - current.startsWith(prefix) && - current.endsWith(suffix) && - current.length >= prefix.length + suffix.length - ) { - return { - insertedText: current.slice(prefix.length, current.length - suffix.length), - removedText: previous.slice(start, end), - }; - } - - let commonPrefix = 0; - while ( - commonPrefix < previous.length && - commonPrefix < current.length && - previous[commonPrefix] === current[commonPrefix] - ) { - commonPrefix += 1; - } - let commonSuffix = 0; - while ( - commonSuffix < previous.length - commonPrefix && - commonSuffix < current.length - commonPrefix && - previous[previous.length - 1 - commonSuffix] === - current[current.length - 1 - commonSuffix] - ) { - commonSuffix += 1; - } - return { - insertedText: current.slice( - commonPrefix, - current.length - commonSuffix - ), - removedText: previous.slice( - commonPrefix, - previous.length - commonSuffix - ), - }; - } - // Per-skin xterm.js palettes. The 'daylight-blue' object equals the legacy hardcoded // theme, so default behavior is unchanged. Shared at module scope and exported on the // global so both terminal-ui.js (main terminal) and panels-ui.js (teammate terminals, @@ -118,11 +65,7 @@ global.CodemanTerminalInput = { isTerminalQueryResponse, shouldSuppressTerminalQueryResponse, - deriveMobileTextareaMutation, TOUCH_COMPAT_MOUSE_SUPPRESS_MS, - MOBILE_COMPOSITION_COMMIT_TIMEOUT_MS, - MOBILE_COMPOSITION_DEDUPE_TIMEOUT_MS, - MOBILE_ENTER_KEYDOWN_WINDOW_MS, TUI_PROMPT_BOTTOM_BAND_ROWS, TUI_PROMPT_DEFAULT_ROWS_FROM_BOTTOM, }; @@ -189,6 +132,47 @@ Object.assign(CodemanApp.prototype, { const container = document.getElementById('terminalContainer'); this.terminal.open(container); this._installMobileTapMouseGuard(); + this._terminalInputController?.destroy?.(); + this._terminalInputController = new TerminalInputController({ + textarea: this.terminal.textarea, + terminal: this.terminal, + getOverlay: () => this._localEchoOverlay, + getSessionId: () => this.activeSessionId, + getSessionMode: () => + this.activeSessionId + ? this.sessions?.get(this.activeSessionId)?.mode || '' + : '', + isLocalEchoEnabled: () => this._localEchoEnabled, + isRestoringDraft: () => this._restoringFlushedState, + captureDraft: () => this._captureActiveSessionDraft(), + setDraft: (sessionId, draft) => + this._setSessionDraft(sessionId, draft), + clearDraft: (sessionId) => + this._clearSessionDraft(sessionId), + deliver: (sessionId, data, options) => + this._sendInputAsync(sessionId, data, options), + preparePaste: (text, bracketed) => + this._prepareTerminalPaste(text, bracketed), + sendNamedKey: (sessionId, key, delay) => { + const send = () => + fetch(`/api/sessions/${sessionId}/send-key`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ key }), + }).catch(() => {}); + if (delay > 0) { + setTimeout(send, delay); + } else { + send(); + } + }, + onTab: (context) => + this._handleTerminalInputTab(context), + log: (message) => _crashDiag.log(message), + }); + this._terminalInputController.attachTextarea(container, { + mobile: MobileDetection.isTouchDevice(), + }); // Suppress xterm key handling during CJK IME composition. // Without this, xterm processes raw keyDown events (e.g., "Process" key) @@ -235,439 +219,19 @@ Object.assign(CodemanApp.prototype, { // distinguish them. We use tmux send-keys -H to send a line feed byte (0x0a) // which the inner application recognizes as "insert newline" vs carriage return. if (ev.key === 'Enter' && (ev.shiftKey || ev.ctrlKey) && ev.type === 'keydown') { - if (this.activeSessionId) { - if (this._localEchoEnabled) { - const text = this._localEchoOverlay?.pendingText || ''; - this._localEchoOverlay?.clear(); - this._localEchoOverlay?.suppressBufferDetection(); - this._setSessionDraft(this.activeSessionId, { - pendingText: '', - flushedText: text + '\n', - cjkText: '', - updatedAt: Date.now(), - }); - if (text) { - this._pendingInput += text; - flushInput(); - } - setTimeout(() => { - fetch(`/api/sessions/${this.activeSessionId}/send-key`, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ key: ev.ctrlKey ? 'C-Enter' : 'S-Enter' }), - }); - }, text ? 80 : 0); - } else { - fetch(`/api/sessions/${this.activeSessionId}/send-key`, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ key: ev.ctrlKey ? 'C-Enter' : 'S-Enter' }), - }); - } - } + this._terminalInputController.sendModifiedEnter( + ev.ctrlKey ? 'C-Enter' : 'S-Enter' + ); return false; } return true; }); - // Android virtual keyboard fix: catch non-composition input events. - // On Android Chrome, typing symbols (e.g., "/" from Gboard's symbol keyboard) - // sends keyCode 229 + input event WITHOUT compositionstart/end wrapping. - // The custom key handler above returns false for keyCode 229, telling xterm - // to ignore the keydown. xterm.js expects the character to arrive via - // composition events, but since there's no composition, the character is lost. - // This listener catches those orphaned input events and forwards them to onData. - { - const xtermTextarea = container.querySelector('.xterm-helper-textarea'); - if (xtermTextarea && MobileDetection.isTouchDevice()) { - let composing = false; - let compositionEpoch = 0; - let lastKeydownHandled = 0; - let lastBackspaceKeydownAt = -Infinity; - let lastMobileEnterKeydownAt = -Infinity; - let mobileLineBreakPending = false; - let mobileLineBreakFallbackTimer = null; - let ignoredCompositionEndEpoch = -1; - let helperMutationSnapshot = null; - const captureHelperMutationSnapshot = () => ({ - value: xtermTextarea.value, - start: xtermTextarea.selectionStart ?? xtermTextarea.value.length, - end: xtermTextarea.selectionEnd ?? xtermTextarea.selectionStart ?? xtermTextarea.value.length, - pendingText: this._localEchoOverlay?.pendingText || '', - }); - const insertMobileDraftLineBreak = (fallbackText = '') => { - if (!this._localEchoEnabled) { - xtermTextarea.value = ''; - this.sendTerminalKey('\r'); - return; - } - const compositionText = - fallbackText || this._localEchoOverlay?.compositionText || ''; - if (compositionText) { - this._mobileCompositionPending = true; - this._commitMobileCompositionFallback(compositionText); - } else { - this._localEchoOverlay?.clearComposition(); - } - this._localEchoOverlay?.appendText('\n'); - this._captureActiveSessionDraft(); - xtermTextarea.value = ''; - }; - this._mobileCompositionPending = false; - this._mobileCompositionFallbackCommit = null; - xtermTextarea.addEventListener('compositionstart', () => { - composing = true; - compositionEpoch += 1; - helperMutationSnapshot = null; - this._mobileCompositionPending = false; - this._mobileCompositionFallbackCommit = null; - this._clearTimer('_mobileCompositionCommitTimer'); - this._clearTimer('_mobileCompositionFallbackTimer'); - if (this._localEchoEnabled) { - this._localEchoOverlay?.setCompositionText(''); - this._captureActiveSessionDraft(); - } - }); - xtermTextarea.addEventListener('compositionupdate', (event) => { - if (!this._localEchoEnabled) return; - this._localEchoOverlay?.setCompositionText(event.data || ''); - this._captureActiveSessionDraft(); - }); - xtermTextarea.addEventListener('compositionend', (event) => { - composing = false; - if (ignoredCompositionEndEpoch === compositionEpoch) { - ignoredCompositionEndEpoch = -1; - return; - } - if (!this._localEchoEnabled) return; - const endedEpoch = compositionEpoch; - const fallbackText = event.data || this._localEchoOverlay?.compositionText || ''; - this._mobileCompositionPending = true; - this._clearTimer('_mobileCompositionCommitTimer'); - if (mobileLineBreakPending) { - mobileLineBreakPending = false; - if (mobileLineBreakFallbackTimer) { - clearTimeout(mobileLineBreakFallbackTimer); - mobileLineBreakFallbackTimer = null; - } - insertMobileDraftLineBreak(fallbackText); - return; - } - // xterm reads the finalized textarea value in a zero-delay task. - // Keep its preview visible until onData atomically commits that text. - this._mobileCompositionCommitTimer = setTimeout(() => { - this._mobileCompositionCommitTimer = null; - if (!this._mobileCompositionPending || endedEpoch !== compositionEpoch) return; - this._commitMobileCompositionFallback(fallbackText); - }, window.CodemanTerminalInput.MOBILE_COMPOSITION_COMMIT_TIMEOUT_MS); - }); - // Track when xterm handles a keydown normally (non-229 keyCode). - // If xterm processed the keydown, it will emit onData itself -- - // the input event handler below must NOT re-send the character. - xtermTextarea.addEventListener('keydown', (e) => { - if (e.key === 'Enter') { - lastMobileEnterKeydownAt = performance.now(); - } - if (!e.isComposing && e.keyCode === 229) { - helperMutationSnapshot = captureHelperMutationSnapshot(); - } - if (!e.isComposing && e.keyCode !== 229) { - lastKeydownHandled = Date.now(); - if (e.key === 'Backspace') { - lastBackspaceKeydownAt = performance.now(); - } - } - }); - xtermTextarea.addEventListener( - 'beforeinput', - (e) => { - if ( - !e.isComposing && - (e.inputType === 'insertText' || e.inputType === 'insertReplacementText') - ) { - helperMutationSnapshot = captureHelperMutationSnapshot(); - } - const isLineBreak = - e.inputType === 'insertLineBreak' || e.inputType === 'insertParagraph'; - const followsMobileEnter = - isLineBreak && - performance.now() - lastMobileEnterKeydownAt < - window.CodemanTerminalInput.MOBILE_ENTER_KEYDOWN_WINDOW_MS; - if (followsMobileEnter && this.activeSessionId) { - e.preventDefault(); - e.stopImmediatePropagation(); - lastMobileEnterKeydownAt = -Infinity; - if (!this._localEchoEnabled) { - insertMobileDraftLineBreak(); - return; - } - if (composing || e.isComposing) { - mobileLineBreakPending = true; - const lineBreakEpoch = compositionEpoch; - const fallbackText = this._localEchoOverlay?.compositionText || ''; - if (mobileLineBreakFallbackTimer) clearTimeout(mobileLineBreakFallbackTimer); - mobileLineBreakFallbackTimer = setTimeout(() => { - mobileLineBreakFallbackTimer = null; - if (!mobileLineBreakPending || lineBreakEpoch !== compositionEpoch) return; - mobileLineBreakPending = false; - ignoredCompositionEndEpoch = lineBreakEpoch; - composing = false; - insertMobileDraftLineBreak(fallbackText); - }, window.CodemanTerminalInput.MOBILE_COMPOSITION_COMMIT_TIMEOUT_MS); - } else { - insertMobileDraftLineBreak(); - } - return; - } - if ( - composing || - e.isComposing || - !this.activeSessionId || - (e.inputType !== 'deleteContentBackward' && e.inputType !== 'deleteWordBackward') - ) { - return; - } - e.preventDefault(); - e.stopImmediatePropagation(); - xtermTextarea.value = ''; - // A physical Backspace was already handled by xterm's keydown - // path. Android keyCode 229 skips that path and reaches here. - if (performance.now() - lastBackspaceKeydownAt < 50) return; - this.terminal._core.coreService.triggerDataEvent('\x7f', true); - }, - true - ); - xtermTextarea.addEventListener('input', (e) => { - // Only handle insertText events outside of composition -- these are - // the ones xterm.js misses on Android virtual keyboards. - if (e.isComposing) return; - if (e.inputType !== 'insertText' && e.inputType !== 'insertReplacementText') return; - const snapshot = helperMutationSnapshot; - helperMutationSnapshot = null; - // Some Android keyboards expose the inserted text only through the - // helper textarea while InputEvent.data is null. - const mutation = window.CodemanTerminalInput.deriveMobileTextareaMutation( - snapshot, - xtermTextarea.value - ); - const data = - mutation.insertedText || - (typeof e.data === 'string' ? e.data : '') || - (!snapshot ? xtermTextarea.value : ''); - if (!data && !mutation.removedText) return; - const recoveringInterruptedComposition = composing; - if (recoveringInterruptedComposition) { - // Android can omit compositionend after Enter or a focus change. - // A later explicitly non-composing mutation is authoritative. - composing = false; - compositionEpoch += 1; - this._mobileCompositionPending = false; - this._mobileCompositionFallbackCommit = null; - this._clearTimer('_mobileCompositionCommitTimer'); - this._clearTimer('_mobileCompositionFallbackTimer'); - this._localEchoOverlay?.clearComposition(); - } - // If xterm just handled a keydown (within 50ms), it already sent the - // char via onData. Skip to avoid double-send (e.g., Shift+A => AA). - if (!recoveringInterruptedComposition && Date.now() - lastKeydownHandled < 50) { - xtermTextarea.value = ''; - return; - } - // xterm.js may have already processed this via its own input handler. - // Check if the textarea was cleared by xterm (value is empty or just - // whitespace) -- if so, xterm handled it and we should not double-send. - // Use a microtask to check after xterm's own handlers have run. - const pendingBefore = - snapshot?.pendingText ?? this._localEchoOverlay?.pendingText ?? ''; - Promise.resolve().then(() => { - const recentTerminalData = - performance.now() - (this._lastTerminalData?.time ?? -Infinity) < 100 - ? this._lastTerminalData?.data - : null; - if ( - recentTerminalData === data - ) { - xtermTextarea.value = ''; - return; - } - const pendingAfter = this._localEchoOverlay?.pendingText || ''; - if ( - snapshot && - this._localEchoEnabled && - recentTerminalData && - recentTerminalData !== data && - recentTerminalData.charCodeAt(0) >= 32 && - pendingAfter === pendingBefore + recentTerminalData - ) { - for (const _char of recentTerminalData) { - this.terminal._core.coreService.triggerDataEvent('\x7f', true); - } - } else if ( - !mutation.removedText && - this._localEchoEnabled && - pendingAfter.length > pendingBefore.length && - pendingAfter.endsWith(data) - ) { - xtermTextarea.value = ''; - return; - } - // If xterm cleared the textarea, it processed the input -- skip. - const val = xtermTextarea.value; - if (!val || (val.trim() === '' && data !== ' ')) return; - // xterm didn't process it -- forward to terminal as if typed. - // Apply a replacement only when its removed suffix is still the - // locally buffered draft; otherwise another event already handled - // that deletion and repeating it would erase unrelated text. - const pendingText = this._localEchoOverlay?.pendingText || ''; - if ( - mutation.removedText && - pendingText.endsWith(mutation.removedText) - ) { - for (const _char of mutation.removedText) { - this.terminal._core.coreService.triggerDataEvent('\x7f', true); - } - } - if (data) { - // Emit via onData path by writing to terminal's input handler. - this.terminal._core.coreService.triggerDataEvent(data, true); - } - // Clear the textarea to prevent xterm from processing it later. - xtermTextarea.value = ''; - }); - }); - } - } - - // xterm's browser-side bracketedPasteMode can be false after a session - // replay because the CLI enabled DECSET 2004 before the retained tail. - // Intercept textual paste for TUI sessions so blank lines cannot degrade - // into separate Enter keys. Shells keep xterm's native paste semantics. - { - const xtermTextarea = container.querySelector('.xterm-helper-textarea'); - let lastRoutedPaste = ''; - let lastRoutedPasteAt = 0; - let lastRoutedPasteSource = ''; - let multipartPasteUntil = 0; - let multipartPasteCandidateUntil = 0; - const MULTIPART_PASTE_GAP_MS = 40; - const supportsSegmentedPasteFallback = MobileDetection.isTouchDevice(); - const readInputPasteText = (event) => { - const candidates = [ - event.clipboardData?.getData?.('text/plain'), - event.dataTransfer?.getData?.('text/plain'), - typeof event.data === 'string' ? event.data : '', - xtermTextarea?.value, - ]; - return candidates.reduce( - (longest, value) => (typeof value === 'string' && value.length > longest.length ? value : longest), - '' - ); - }; - const routeTextPaste = (event, source, explicitText) => { - const mode = this.activeSessionId - ? this.sessions?.get(this.activeSessionId)?.mode - : null; - if (!this.activeSessionId || mode === 'shell') return false; - const text = explicitText ?? readInputPasteText(event); - if (!text) return false; - event.preventDefault(); - event.stopImmediatePropagation(); - if (xtermTextarea) xtermTextarea.value = ''; - const now = performance.now(); - const duplicateInputAfterCapture = - text === lastRoutedPaste && - now - lastRoutedPasteAt < 100 && - source.startsWith('input:') && - (lastRoutedPasteSource === 'clipboard' || lastRoutedPasteSource.startsWith('beforeinput:')); - if (duplicateInputAfterCapture) { - return true; - } - lastRoutedPaste = text; - lastRoutedPasteAt = now; - lastRoutedPasteSource = source; - const lineBreaks = text.match(/\r\n|\r|\n/g)?.length || 0; - _crashDiag.log(`XTERM_PASTE source=${source} len=${text.length} breaks=${lineBreaks}`); - if (this._localEchoEnabled && this._localEchoOverlay) { - this._localEchoOverlay.appendText(text); - this._captureActiveSessionDraft(); - } else { - this.sendPastedText(text); - } - return true; - }; - const routeInputPasteMutation = (event, phase) => { - const inputType = event.inputType || ''; - const mutationText = typeof event.data === 'string' ? event.data : ''; - const now = performance.now(); - const continuesMultipartPaste = now <= multipartPasteUntil; - - if (inputType === 'insertFromPaste') { - const routed = routeTextPaste(event, `${phase}:paste`); - if (routed) { - multipartPasteCandidateUntil = 0; - multipartPasteUntil = now + MULTIPART_PASTE_GAP_MS; - } - return; - } - - // Some Android clipboard providers expose a paste as a synchronous - // burst of ordinary insertText + insertLineBreak mutations. Keep the - // first multi-character segment on xterm's normal path, then confirm - // the paste only if an immediate line break follows. Gboard also emits - // whole-word insertText events during ordinary typing, so the first - // segment alone is not enough evidence of a paste. - if (supportsSegmentedPasteFallback && inputType === 'insertText' && mutationText) { - if (!continuesMultipartPaste) { - multipartPasteCandidateUntil = - mutationText.length > 1 ? now + MULTIPART_PASTE_GAP_MS : 0; - return; - } - // The helper textarea may retain whitespace from ordinary typing. - // event.data is the current mutation and cannot include that stale - // value, so use it exclusively for segmented insertText events. - const routed = routeTextPaste(event, `${phase}:text`, mutationText); - if (routed) multipartPasteUntil = now + MULTIPART_PASTE_GAP_MS; - return; - } - if ( - supportsSegmentedPasteFallback && - (continuesMultipartPaste || now <= multipartPasteCandidateUntil) && - (inputType === 'insertLineBreak' || inputType === 'insertParagraph') - ) { - const routed = routeTextPaste(event, `${phase}:break`, '\n'); - if (routed) { - multipartPasteCandidateUntil = 0; - multipartPasteUntil = now + MULTIPART_PASTE_GAP_MS; - } - return; - } - multipartPasteCandidateUntil = 0; - }; - - xtermTextarea?.addEventListener( - 'paste', - (event) => { - routeTextPaste(event, 'clipboard'); - }, - true - ); - xtermTextarea?.addEventListener( - 'beforeinput', - (event) => { - routeInputPasteMutation(event, 'beforeinput'); - }, - true - ); - xtermTextarea?.addEventListener( - 'input', - (event) => { - routeInputPasteMutation(event, 'input'); - }, - true - ); - } - + // Android IME, helper-textarea mutation, and composition arbitration + // are installed by TerminalInputController.attachTextarea() above. + // Paste capture and Android segmented-paste fallback use the same + // controller so clipboard mutations cannot race ordinary IME input. // WebGL renderer for GPU-accelerated terminal rendering. // Previously caused "page unresponsive" crashes from synchronous GPU stalls, // but the mode-aware 32/64KB frame cap in flushPendingWrites() now prevents @@ -1111,285 +675,42 @@ Object.assign(CodemanApp.prototype, { this.terminalResizeObserver = new ResizeObserver(throttledResize); this.terminalResizeObserver.observe(container); - // Handle keyboard input — send to PTY immediately, no local echo. - // PTY/Ink handles all character echoing to avoid desync ("typing visible below" bug). - this._pendingInput = ''; - this._inputFlushTimeout = null; - this._lastKeystrokeTime = 0; - - const flushInput = () => { - this._inputFlushTimeout = null; - if (this._pendingInput && this.activeSessionId) { - const input = this._pendingInput; - const sessionId = this.activeSessionId; - this._pendingInput = ''; - this._sendInputAsync(sessionId, input); - } - }; - - // Local echo mode: buffer keystrokes locally (shown in overlay) and only - // send to PTY on Enter. Avoids out-of-order delivery on high-latency - // mobile connections. The overlay + localStorage persistence ensure input - // survives tab switches and reconnects. - + // xterm is an adapter only. The controller owns semantic input state, + // local echo, batching, control ordering, and IME deduplication. this.terminal.onData((data) => { - // Mouse SGR reports (tap-to-position) are NOT IME input — they must reach - // the PTY even while the CJK input field owns focus. Without this exception - // tapping to move the cursor silently does nothing whenever Chinese input - // is on, because cjkActive stays true the whole time the field is visible. const isMouseReport = /^\x1b\[<\d+;\d+;\d+[Mm]$/.test(data); - // CJK input has focus — block xterm from sending keystrokes to PTY - if (!isMouseReport && (window.cjkActive || document.activeElement?.id === 'cjkInput')) { - // Self-heal: if the CJK field is visible but focus drifted to xterm's - // hidden textarea (e.g. something called terminal.focus()), everything - // typed lands HERE and is swallowed — keyboard shows the IME composing - // while both the CJK field and the terminal stay empty. Route focus - // back so the very next keystroke lands in the CJK field again. - // Only GENUINE typed input qualifies: onData also fires for xterm's - // self-generated query replies (DA/DSR/CPR/OSC during Ink redraws), - // which arrive no matter what has focus — so require focus to be on - // xterm's own textarea and bail on query replies, or this would steal - // focus from the rename/search/settings inputs while output streams. + if ( + !isMouseReport && + (window.cjkActive || + document.activeElement?.id === 'cjkInput') + ) { const cjkEl = document.getElementById('cjkInput'); if ( cjkEl?.classList.contains('cjk-input-visible') && document.activeElement === this.terminal.textarea && - !window.CodemanTerminalInput?.shouldSuppressTerminalQueryResponse(data) + !window.CodemanTerminalInput?.shouldSuppressTerminalQueryResponse( + data + ) ) { - _crashDiag.log('CJK regain-focus (onData swallowed input)'); + _crashDiag.log( + 'CJK regain-focus (onData swallowed input)' + ); cjkEl.focus(); } return; } - if (this.activeSessionId) { - // Filter terminal query replies generated by xterm.js itself. - // Forwarding them through the WebSocket injects DA/DSR/CPR replies - // into the foreground process as typed input (for example "0;276;0c"). - if ( - window.CodemanTerminalInput?.shouldSuppressTerminalQueryResponse(data) - ) { - return; - } - this._lastTerminalData = { data, time: performance.now() }; - - // ── Local Echo Mode ── - // When enabled, keystrokes are buffered locally in the overlay for - // instant visual feedback. Nothing is sent to the PTY until Enter - // (or a control char) is pressed — avoids out-of-order char delivery. - if (this._localEchoEnabled) { - const fallbackCommit = this._mobileCompositionFallbackCommit; - if (fallbackCommit !== null && data === fallbackCommit) { - this._mobileCompositionFallbackCommit = null; - this._clearTimer('_mobileCompositionFallbackTimer'); - return; - } - if ( - this._mobileCompositionPending && - data && - data.charCodeAt(0) >= 32 - ) { - this._acceptMobileCompositionCommit(data); - return; - } - if (data === '\x7f') { - const source = this._localEchoOverlay?.removeChar(); - if (source !== 'pending') { - // No locally buffered character means the editable text may - // already live in the PTY (for example, typed from desktop). - // Forward one Backspace instead of swallowing it. - this._pendingInput += data; - flushInput(); - } - this._captureActiveSessionDraft(); - // 'pending' = removed unsent text (no PTY backspace needed) - // 'flushed'/false = text may already be in the PTY - return; - } - if (/^[\r\n]+$/.test(data)) { - // Enter: queue the buffered text followed by \r. - const text = this._localEchoOverlay?.pendingText || ''; - if (text) { - const lineBreaks = text.match(/\r\n|\r|\n/g)?.length || 0; - _crashDiag.log(`LOCAL_ECHO_SUBMIT len=${text.length} breaks=${lineBreaks}`); - } - this._localEchoOverlay?.clear(); - // Suppress detection so PTY-echoed text isn't re-detected as user input - this._localEchoOverlay?.suppressBufferDetection(); - // Enter commits all editable and flushed draft text. - this._clearSessionDraft(this.activeSessionId); - if (this._inputFlushTimeout) { - clearTimeout(this._inputFlushTimeout); - this._inputFlushTimeout = null; - } - if (text) { - const mode = this.sessions?.get(this.activeSessionId)?.mode; - this._pendingInput += /[\r\n]/.test(text) && mode !== 'shell' - ? this._prepareTerminalPaste(text, true) - : text; - flushInput(); - } - // The durable input queue preserves call order. Queue Enter - // immediately so another fast submission cannot interleave before it. - this._pendingInput += '\r'; - flushInput(); - return; - } - if (data.length > 1 && data.charCodeAt(0) >= 32) { - // Paste: append to overlay only (sent on Enter) - this._localEchoOverlay?.appendText(data); - this._captureActiveSessionDraft(); - return; - } - if (data.charCodeAt(0) < 32) { - // Skip xterm-generated terminal responses. - // These arrive via triggerDataEvent when the terminal processes - // buffer data (DA responses, OSC color queries, mode reports, etc.). - // They are NOT user input and must not clear flushed text state. - // Covers: CSI (\x1b[), OSC (\x1b]), DCS (\x1bP), APC (\x1b_), - // PM (\x1b^), SOS (\x1bX), and any other multi-byte ESC sequence. - // Single-byte ESC (user pressing Escape) still falls through to - // the control char handler below. - if (data.length > 1 && data.charCodeAt(0) === 27) { - // Multi-byte escape sequence — forward to PTY without clearing - // overlay/flushed state (terminal response, not user input) - this._pendingInput += data; - flushInput(); - return; - } - // During buffer load (tab switch), stray control chars from - // terminal response processing must not wipe the flushed state - // that selectSession() is actively restoring. - if (this._restoringFlushedState) { - this._pendingInput += data; - flushInput(); - return; - } - // Tab key: send pending text + Tab to PTY for tab completion. - // Set a flag so flushPendingWrites() re-detects buffer text when - // the PTY response arrives (event-driven, no fixed timer). - if (data === '\t') { - const text = this._localEchoOverlay?.pendingText || ''; - this._localEchoOverlay?.clear(); - if (text) { - this._pendingInput += text; - this._setSessionDraft(this.activeSessionId, { - pendingText: '', - flushedText: text, - cjkText: '', - updatedAt: Date.now(), - }); - } else { - this._clearSessionDraft(this.activeSessionId); - } - this._pendingInput += data; - if (this._inputFlushTimeout) { - clearTimeout(this._inputFlushTimeout); - this._inputFlushTimeout = null; - } - // Snapshot prompt line text BEFORE flushing — used to distinguish - // real Tab completions from pre-existing Claude UI text. - let baseText = ''; - try { - const p = this._localEchoOverlay?.findPrompt?.(); - if (p) { - const buf = this.terminal.buffer.active; - const line = buf.getLine(buf.viewportY + p.row); - if (line) - baseText = line - .translateToString(true) - .slice(p.col + 2) - .trimEnd(); - } - } catch {} - this._tabCompletionBaseText = baseText; - flushInput(); - this._tabCompletionSessionId = this.activeSessionId; - this._tabCompletionRetries = 0; - // Fallback: if flushPendingWrites() detection misses the completion - // (e.g., flicker filter delays data, or xterm hasn't processed writes - // by the time the callback fires), retry detection after a delay. - // This ensures the overlay renders even without further terminal data. - if (this._tabCompletionFallback) clearTimeout(this._tabCompletionFallback); - const selfTab = this; - this._tabCompletionFallback = setTimeout(() => { - selfTab._tabCompletionFallback = null; - if (!selfTab._tabCompletionSessionId || selfTab._tabCompletionSessionId !== selfTab.activeSessionId) - return; - const ov = selfTab._localEchoOverlay; - if (!ov || ov.pendingText) return; - selfTab.terminal.write('', () => { - if (!selfTab._tabCompletionSessionId) return; - ov.resetBufferDetection(); - const detected = ov.detectBufferText(); - if (detected && detected !== selfTab._tabCompletionBaseText) { - selfTab._tabCompletionSessionId = null; - selfTab._tabCompletionRetries = 0; - selfTab._tabCompletionBaseText = null; - ov.rerender(); - selfTab._captureActiveSessionDraft(); - } - }); - }, 300); - return; - } - // Control chars (Ctrl+C, single ESC): send buffered text + control char immediately - const text = this._localEchoOverlay?.pendingText || ''; - this._localEchoOverlay?.clear(); - // Suppress detection so PTY-echoed text isn't re-detected as user input - this._localEchoOverlay?.suppressBufferDetection(); - // Control chars (Ctrl+C, Escape) invalidate the complete draft. - this._clearSessionDraft(this.activeSessionId); - if (text) { - this._pendingInput += text; - } - this._pendingInput += data; - if (this._inputFlushTimeout) { - clearTimeout(this._inputFlushTimeout); - this._inputFlushTimeout = null; - } - flushInput(); - return; - } - if (data.length === 1 && data.charCodeAt(0) >= 32) { - // Printable char: add to overlay only (sent on Enter) - this._localEchoOverlay?.addChar(data); - this._captureActiveSessionDraft(); - return; - } - } - - // ── Normal Mode (echo disabled) ── - this._pendingInput += data; - - // Control chars (Enter, Ctrl+C, escape sequences) — flush immediately - if (data.charCodeAt(0) < 32 || data.length > 1) { - if (this._inputFlushTimeout) { - clearTimeout(this._inputFlushTimeout); - this._inputFlushTimeout = null; - } - flushInput(); - return; - } - - // Regular chars — flush immediately if typed after a gap (>50ms), - // otherwise batch via microtask to coalesce rapid keystrokes (paste). - const now = performance.now(); - if (now - this._lastKeystrokeTime > 50) { - // Single char after a gap — send immediately, no setTimeout latency - if (this._inputFlushTimeout) { - clearTimeout(this._inputFlushTimeout); - this._inputFlushTimeout = null; - } - this._lastKeystrokeTime = now; - flushInput(); - } else { - // Rapid sequence (paste or fast typing) — coalesce via microtask - this._lastKeystrokeTime = now; - if (!this._inputFlushTimeout) { - this._inputFlushTimeout = setTimeout(flushInput, 0); - } - } + if (!this.activeSessionId) return; + if ( + window.CodemanTerminalInput?.shouldSuppressTerminalQueryResponse( + data + ) + ) { + return; } + this._terminalInputController.handleTerminalData( + data, + 'xterm' + ); }); }, @@ -2841,7 +2162,7 @@ Object.assign(CodemanApp.prototype, { const settings = this.loadAppSettingsFromStorage(); const session = this.activeSessionId ? this.sessions.get(this.activeSessionId) : null; const echoEnabled = settings.localEchoEnabled ?? MobileDetection.isTouchDevice(); - const shouldEnable = !!(echoEnabled && session); + const shouldEnable = !!(echoEnabled && session && session.mode !== 'shell'); if (this._localEchoEnabled && !shouldEnable) { this._localEchoOverlay?.clear(); } @@ -3014,7 +2335,7 @@ Object.assign(CodemanApp.prototype, { return; } _crashDiag.log(`CJK send→${this.activeSessionId.slice(0, 8)} len=${text.length}`); - this._sendInputAsync(this.activeSessionId, text); + this._terminalInputController.sendExternalText(text); }, /** @@ -3181,39 +2502,69 @@ Object.assign(CodemanApp.prototype, { } }, - _commitMobileCompositionFallback(text) { - if (!this._mobileCompositionPending) return false; - const finalText = - typeof text === 'string' && text.length > 0 - ? text - : this._localEchoOverlay?.compositionText || ''; - if (!finalText) { - this._mobileCompositionPending = false; - this._localEchoOverlay?.clearComposition(); - this._captureActiveSessionDraft(); - return false; + _handleTerminalInputTab({ overlay, sessionId, text }) { + overlay?.clear?.(); + if (text) { + this._setSessionDraft(sessionId, { + pendingText: '', + flushedText: text, + cjkText: '', + updatedAt: Date.now(), + }); + } else { + this._clearSessionDraft(sessionId); } - this._acceptMobileCompositionCommit(finalText); - return true; - }, - /** - * Commit one IME result and remember it until xterm's alternate Android - * input path either repeats that same result or the next composition starts. - */ - _acceptMobileCompositionCommit(finalText) { - this._mobileCompositionPending = false; - this._clearTimer('_mobileCompositionCommitTimer'); - this._localEchoOverlay?.commitComposition(finalText); - this._captureActiveSessionDraft(); - this._mobileCompositionFallbackCommit = finalText; - this._clearTimer('_mobileCompositionFallbackTimer'); - this._mobileCompositionFallbackTimer = setTimeout(() => { - this._mobileCompositionFallbackTimer = null; - if (this._mobileCompositionFallbackCommit === finalText) { - this._mobileCompositionFallbackCommit = null; + let baseText = ''; + try { + const prompt = overlay?.findPrompt?.(); + if (prompt) { + const buffer = this.terminal.buffer.active; + const line = buffer.getLine( + buffer.viewportY + prompt.row + ); + if (line) { + baseText = line + .translateToString(true) + .slice(prompt.col + 2) + .trimEnd(); + } } - }, window.CodemanTerminalInput.MOBILE_COMPOSITION_DEDUPE_TIMEOUT_MS); + } catch {} + this._tabCompletionBaseText = baseText; + this._sendInputAsync(sessionId, text + '\t'); + this._tabCompletionSessionId = sessionId; + this._tabCompletionRetries = 0; + + this._clearTimer('_tabCompletionFallback'); + this._tabCompletionFallback = setTimeout(() => { + this._tabCompletionFallback = null; + if ( + !this._tabCompletionSessionId || + this._tabCompletionSessionId !== + this.activeSessionId + ) { + return; + } + const liveOverlay = this._localEchoOverlay; + if (!liveOverlay || liveOverlay.pendingText) return; + this.terminal.write('', () => { + if (!this._tabCompletionSessionId) return; + liveOverlay.resetBufferDetection(); + const detected = liveOverlay.detectBufferText(); + if ( + detected && + detected !== this._tabCompletionBaseText + ) { + this._tabCompletionSessionId = null; + this._tabCompletionRetries = 0; + this._tabCompletionBaseText = null; + liveOverlay.rerender(); + this._captureActiveSessionDraft(); + } + }); + }, 300); + return true; }, /** @@ -4135,11 +3486,7 @@ Object.assign(CodemanApp.prototype, { /** Insert editable text at the active prompt without pressing Enter. */ insertTerminalText(text) { if (!this.activeSessionId || !text) return; - if (this._localEchoEnabled && this._localEchoOverlay) { - this._localEchoOverlay.appendText(text); - } else { - this.sendInput(text).catch(() => {}); - } + this._terminalInputController.insertText(text); this.terminal?.focus(); }, @@ -4151,27 +3498,9 @@ Object.assign(CodemanApp.prototype, { if (!this.activeSessionId) return; if (typeof CjkInput !== 'undefined') CjkInput.clear(); - if (this._inputFlushTimeout) { - clearTimeout(this._inputFlushTimeout); - this._inputFlushTimeout = null; - } - this._pendingInput = ''; - - if (this._localEchoEnabled && this._localEchoOverlay) { - const flushed = this._localEchoOverlay.getFlushed?.() || { count: 0, text: '' }; - this._localEchoOverlay.clear(); - this._localEchoOverlay.suppressBufferDetection(); - this._flushedOffsets?.delete(this.activeSessionId); - this._flushedTexts?.delete(this.activeSessionId); - if (flushed.count > 0) { - this.sendInput('\x7f'.repeat(flushed.count)).catch(() => {}); - } - } else { - // In non-local-echo mode the TUI already owns the editable buffer. Ctrl+U - // is the conventional kill-line key supported by shells and agent TUIs. - this.sendInput('\x15').catch(() => {}); - } - + this._terminalInputController.clearInput(); + this._flushedOffsets?.delete(this.activeSessionId); + this._flushedTexts?.delete(this.activeSessionId); this.showToast?.('Input cleared', 'success'); this.terminal?.focus(); }, @@ -4340,10 +3669,20 @@ Object.assign(CodemanApp.prototype, { if (promptRow >= 0) { const inputEnd = cursorRow >= promptRow ? cursorRow : promptRow; if (tappedRow >= promptRow && tappedRow <= inputEnd) return 'input'; - } else if (tappedRow === cursorRow && cursorRow >= rows - 3) { - // During redraws a CLI can temporarily omit its prompt marker. Keep the - // live cursor row usable without turning arbitrary transcript rows into - // keyboard targets. + } else if ( + tappedRow === cursorRow || + tappedRow >= + Math.max( + 0, + rows - + window.CodemanTerminalInput + .TUI_PROMPT_DEFAULT_ROWS_FROM_BOTTOM + ) + ) { + // During redraws a CLI can temporarily omit its prompt marker or place + // the cursor above a status footer. Keep the live cursor and a stable + // lower-screen focus band usable without turning transcript rows above + // that band into keyboard targets. return 'input'; } @@ -4668,18 +4007,7 @@ Object.assign(CodemanApp.prototype, { takeControl: true, refit: !keyboardVisible, }).catch(() => {}); - // Mobile-control Enter must pass through local echo so buffered text is - // delivered before the control byte and the next draft starts cleanly. - if (input === '\r' && this._localEchoEnabled && this.terminal) { - const compositionText = this._localEchoOverlay?.compositionText || ''; - if (compositionText) { - this._mobileCompositionPending = true; - this._commitMobileCompositionFallback(compositionText); - } - this.terminal.input(input); - return; - } - this._sendInputAsync(sessionId, input); + this._terminalInputController.sendControl(input); }, _installMobileTapMouseGuard() { @@ -4816,10 +4144,12 @@ Object.assign(CodemanApp.prototype, { */ async sendInput(input) { if (!this.activeSessionId || !input) return; - // Route through the durable, exactly-once delivery layer (useMux for the - // POST fallback) so voice / keyboard-accessory / paste input also survives a - // dropped link instead of being lost in a single best-effort fetch. - this._sendInputAsync(this.activeSessionId, input, { useMux: true }); + this._terminalInputController.sendExternalText(input); + }, + + /** Submit a command through the same draft and Enter ordering as typed input. */ + sendTerminalCommand(command) { + this._terminalInputController?.sendCommand(command); }, /** @@ -4846,16 +4176,7 @@ Object.assign(CodemanApp.prototype, { const mode = this.sessions?.get(sessionId)?.mode; const lineBreaks = String(text).match(/\r\n|\r|\n/g)?.length || 0; _crashDiag.log(`PASTE_SEND mode=${mode || 'unknown'} len=${String(text).length} breaks=${lineBreaks}`); - const input = this._prepareTerminalPaste(text, mode !== 'shell'); - // The HTTP fallback must write directly to the PTY. TmuxManager.sendInput() - // intentionally strips CR/LF for ordinary one-line prompts, which corrupts - // bracketed multiline paste whenever the WebSocket is reconnecting. - this._sendInputAsync(sessionId, input, { useMux: false }); - if (options.submit) { - // A separate reliable record preserves paste-before-submit ordering on - // both WebSocket and serialized POST fallback transports. - this._sendInputAsync(sessionId, '\r', { useMux: false }); - } + this._terminalInputController.sendPaste(text, options); }, // ═══════════════════════════════════════════════════════════════ diff --git a/src/web/public/voice-input.js b/src/web/public/voice-input.js index 0d7b6537..e75ad9a2 100644 --- a/src/web/public/voice-input.js +++ b/src/web/public/voice-input.js @@ -569,13 +569,9 @@ const VoiceInput = { this._showComposeOverlay(trimmed); } } else { - // Direct mode: inject into local echo overlay if available, else send to PTY - if (app._localEchoEnabled && app._localEchoOverlay) { - app._localEchoOverlay.appendText(trimmed); - app._captureActiveSessionDraft(); - } else { - app.sendInput(trimmed).catch(() => {}); - } + // Direct mode still enters the controller so draft state and transport + // ordering stay coherent with keyboard input. + app.insertTerminalText(trimmed); this._showVoiceSendBtn(); setTimeout(() => { if (app.terminal) app.terminal.focus(); }, 150); } @@ -604,21 +600,7 @@ const VoiceInput = { // Click handler this._voiceSendHandler = () => { if (!app.activeSessionId) return; - // Simulate Enter key: if local echo is active, flush its buffer + send \r; - // otherwise just send \r directly to the PTY - if (app._localEchoEnabled && app._localEchoOverlay) { - const text = app._localEchoOverlay.pendingText || ''; - app._localEchoOverlay.clear(); - app._localEchoOverlay.suppressBufferDetection(); - app._clearSessionDraft(app.activeSessionId); - if (text) { - app.sendPastedText(text, { submit: true }).catch(() => {}); - } else { - app.sendInput('\r').catch(() => {}); - } - } else { - app.sendInput('\r').catch(() => {}); - } + app.sendEnterKey(); // Blink then restore gear.classList.add('voice-send-blink'); setTimeout(() => this._hideVoiceSendBtn(), 400); diff --git a/test/frontend-public-tooling.test.ts b/test/frontend-public-tooling.test.ts index 4d069d14..0303d933 100644 --- a/test/frontend-public-tooling.test.ts +++ b/test/frontend-public-tooling.test.ts @@ -30,7 +30,25 @@ describe('frontend public asset tooling', () => { .map((file) => relative(repoRoot, file)); expect(files).toContain('src/web/public/terminal-input-state.js'); + expect(files).toContain('src/web/public/terminal-input-controller.js'); expect(checker.findNullByte(Buffer.from('valid source'))).toBe(-1); expect(checker.findNullByte(Buffer.from([0x61, 0, 0x62]))).toBe(1); }); + + it('routes interactive producers through the terminal input facade', () => { + const producerPaths = [ + 'src/web/public/image-input.js', + 'src/web/public/keyboard-accessory.js', + 'src/web/public/session-ui.js', + 'src/web/public/voice-input.js', + ]; + + for (const path of producerPaths) { + const source = readFileSync(resolve(repoRoot, path), 'utf8'); + expect(source, `${path} bypasses TerminalInputController via sendInput()`).not.toMatch( + /\b(?:app|this)\.sendInput\(/ + ); + expect(source, `${path} bypasses TerminalInputController transport`).not.toContain('._sendInputAsync('); + } + }); }); diff --git a/test/input-cjk.test.ts b/test/input-cjk.test.ts index ac3a36fd..70afe6c2 100644 --- a/test/input-cjk.test.ts +++ b/test/input-cjk.test.ts @@ -349,9 +349,9 @@ describe('CJK input module', () => { // redraws), which arrive while e.g. the rename input or search box has // focus — refocusing on those steals focus mid-typing. Guard: focus must // be on xterm's own textarea AND the data must not be a query reply. - const selfHeal = src.slice(src.indexOf('Self-heal'), src.indexOf('CJK regain-focus')); - expect(selfHeal).toContain('document.activeElement === this.terminal.textarea'); - expect(selfHeal).toContain('shouldSuppressTerminalQueryResponse(data)'); + expect(src).toMatch( + /document\.activeElement === this\.terminal\.textarea[\s\S]*?!window\.CodemanTerminalInput\?\.shouldSuppressTerminalQueryResponse\([\s\S]*?data[\s\S]*?\)[\s\S]*?CJK regain-focus \(onData swallowed input\)/ + ); }); it('sends text plus carriage return on Enter', () => { diff --git a/test/mobile/keyboard.test.ts b/test/mobile/keyboard.test.ts index 6cb61a64..920ecc5f 100644 --- a/test/mobile/keyboard.test.ts +++ b/test/mobile/keyboard.test.ts @@ -1233,6 +1233,44 @@ describe('Virtual Keyboard', () => { expect(state.sentInputs).toEqual([]); }); + it('focuses the live Claude cursor when a redraw omits the prompt glyph', async () => { + const point = await page.evaluate(async () => { + window.__sentInputs = []; + app.activeSessionId = 'mobile-focus-promptless-claude-test'; + app.sessions.set('mobile-focus-promptless-claude-test', { + id: 'mobile-focus-promptless-claude-test', + mode: 'claude', + status: 'running', + }); + app._sendInputAsync = (_sessionId: string, input: string) => { + window.__sentInputs.push(input); + }; + app.hideWelcome(); + app.terminal.reset(); + await new Promise((resolve) => app.terminal.write('Claude response\r\nready for input', resolve)); + (document.activeElement as HTMLElement | null)?.blur?.(); + + const screen = app.terminal.element?.querySelector('.xterm-screen'); + const cell = app.terminal._core?._renderService?.dimensions?.css?.cell; + const rect = screen?.getBoundingClientRect(); + if (!rect || !cell?.width || !cell?.height) return null; + return { + x: rect.left + cell.width * 2, + y: rect.top + cell.height * (app.terminal.buffer.active.cursorY + 0.5), + }; + }); + expect(point).not.toBeNull(); + + await page.touchscreen.tap(point!.x, point!.y); + + const state = await page.evaluate(() => ({ + activeClass: document.activeElement?.className, + sentInputs: window.__sentInputs, + })); + expect(state.activeClass).toContain('xterm-helper-textarea'); + expect(state.sentInputs).toEqual([]); + }); + it('keeps terminal touch drag available for scrollback with the visible textarea enabled', async () => { const calls = await page.evaluate(async () => { app.activeSessionId = 'mobile-touch-scroll-test'; @@ -2432,6 +2470,178 @@ describe('Virtual Keyboard', () => { }); }); + it('preserves a live composition when session replay finishes late', async () => { + const state = await page.evaluate(() => { + const sessionId = 'mobile-replay-composition-race-test'; + app.activeSessionId = sessionId; + app.sessions.set(sessionId, { + id: sessionId, + mode: 'codex', + status: 'running', + }); + app._localEchoEnabled = true; + app._localEchoOverlay.clear(); + app._localEchoOverlay.appendText('cd hom'); + app._localEchoOverlay.setCompositionText('e cd hom'); + + // Crash recovery deliberately folds the visible composition into its + // persisted snapshot. A late session replay must not feed that folded + // snapshot back into the still-live overlay. + app._captureActiveSessionDraft(); + const persisted = app._inputState.get(sessionId); + const restored = app._restoreSessionDraft(sessionId, false, { + preserveLiveComposition: true, + }); + + return { + persisted, + restored, + overlay: app._localEchoOverlay.state, + }; + }); + + expect(state).toMatchObject({ + persisted: { + pendingText: 'cd home cd hom', + }, + restored: true, + overlay: { + pendingText: 'cd hom', + compositionText: 'e cd hom', + }, + }); + }); + + it('does not commit Android DEL as finalized composition text', async () => { + const state = await page.evaluate(() => { + const sessionId = 'mobile-composition-delete-test'; + app.activeSessionId = sessionId; + app.sessions.set(sessionId, { + id: sessionId, + mode: 'codex', + status: 'running', + }); + app._localEchoEnabled = true; + app._localEchoOverlay.clear(); + app._localEchoOverlay.appendText('cd'); + app._localEchoOverlay.setCompositionText('candidate'); + app._terminalInputController.clearCompositionDelivery(); + app._terminalInputController.setCompositionPending(true, 'candidate'); + + app.terminal._core.coreService.triggerDataEvent('\x7f', true); + + return { + pendingText: app._localEchoOverlay.pendingText, + compositionText: app._localEchoOverlay.compositionText, + compositionPending: app._terminalInputController.state.compositionPending, + fallbackCommit: app._terminalInputController.state.fallbackCommit, + }; + }); + + expect(state).toEqual({ + pendingText: 'c', + compositionText: '', + compositionPending: false, + fallbackCommit: null, + }); + }); + + it('does not append interim xterm data during an active composition', async () => { + const state = await page.evaluate(async () => { + const sessionId = 'mobile-active-composition-data-test'; + app.activeSessionId = sessionId; + app.sessions.set(sessionId, { + id: sessionId, + mode: 'codex', + status: 'running', + }); + app._localEchoEnabled = true; + app._localEchoOverlay.clear(); + app._terminalInputController.clearCompositionDelivery(); + app._terminalInputController.setCompositionPending(false); + + const textarea = app.terminal.textarea; + textarea.value = ''; + textarea.dispatchEvent(new CompositionEvent('compositionstart', { bubbles: true })); + textarea.value = 'home'; + textarea.dispatchEvent( + new CompositionEvent('compositionupdate', { + bubbles: true, + data: 'home', + }) + ); + app.terminal._core.coreService.triggerDataEvent('home', true); + const duringComposition = app._localEchoOverlay.pendingText; + + textarea.dispatchEvent( + new CompositionEvent('compositionend', { + bubbles: true, + data: 'home', + }) + ); + await new Promise((resolve) => setTimeout(resolve, 100)); + + return { + duringComposition, + pendingText: app._localEchoOverlay.pendingText, + compositionText: app._localEchoOverlay.compositionText, + }; + }); + + expect(state).toEqual({ + duringComposition: '', + pendingText: 'home', + compositionText: '', + }); + }); + + it('strips a stale helper prefix from finalized Android composition data', async () => { + const state = await page.evaluate(async () => { + const sessionId = 'mobile-stale-composition-prefix-test'; + app.activeSessionId = sessionId; + app.sessions.set(sessionId, { + id: sessionId, + mode: 'codex', + status: 'running', + }); + app._localEchoEnabled = true; + app._localEchoOverlay.clear(); + app._localEchoOverlay.appendText('cd'); + app._terminalInputController.clearCompositionDelivery(); + app._terminalInputController.setCompositionPending(false); + + const textarea = app.terminal.textarea; + textarea.value = ''; + textarea.dispatchEvent(new CompositionEvent('compositionstart', { bubbles: true })); + textarea.value = 'hcd home'; + textarea.dispatchEvent( + new CompositionEvent('compositionupdate', { + bubbles: true, + data: ' home', + }) + ); + textarea.dispatchEvent( + new CompositionEvent('compositionend', { + bubbles: true, + data: ' home', + }) + ); + await new Promise((resolve) => setTimeout(resolve, 100)); + + return { + pendingText: app._localEchoOverlay.pendingText, + compositionText: app._localEchoOverlay.compositionText, + helperValue: textarea.value, + }; + }); + + expect(state).toEqual({ + pendingText: 'cd home', + compositionText: '', + helperValue: '', + }); + }); + it('keeps a switched-away draft editable after browser state is reloaded', async () => { const state = await page.evaluate(() => { const firstId = 'mobile-draft-session-a'; @@ -2651,7 +2861,7 @@ describe('Virtual Keyboard', () => { return { pendingText: app._localEchoOverlay.pendingText, compositionText: app._localEchoOverlay.compositionText, - fallbackCommit: app._mobileCompositionFallbackCommit, + fallbackCommit: app._terminalInputController.state.fallbackCommit, }; }); @@ -2724,6 +2934,314 @@ describe('Virtual Keyboard', () => { }); }); + it('dedupes Android suggestion acceptance after the user pauses before Space', async () => { + const state = await page.evaluate(async () => { + app.activeSessionId = 'mobile-composition-paused-space-test'; + app.sessions.set('mobile-composition-paused-space-test', { + id: 'mobile-composition-paused-space-test', + mode: 'codex', + status: 'running', + }); + app.hideWelcome(); + const settings = app.loadAppSettingsFromStorage(); + settings.cjkInputEnabled = false; + settings.localEchoEnabled = true; + app.saveAppSettingsToStorage(settings); + app._updateCjkInputState(); + app._updateLocalEchoState(); + app._localEchoOverlay.clear(); + + const textarea = app.terminal.textarea; + textarea.value = ''; + textarea.dispatchEvent(new CompositionEvent('compositionstart', { bubbles: true })); + textarea.value = 'cd'; + textarea.dispatchEvent( + new CompositionEvent('compositionupdate', { + bubbles: true, + data: 'cd', + }) + ); + textarea.dispatchEvent( + new CompositionEvent('compositionend', { + bubbles: true, + data: 'cd', + }) + ); + await new Promise((resolve) => setTimeout(resolve, 100)); + const afterComposition = app._localEchoOverlay.pendingText; + + // The user can pause on a completed Gboard suggestion for any length of + // time. Pressing Space later may replay that finalized word as insertText. + await new Promise((resolve) => setTimeout(resolve, 1100)); + app.terminal.input(' '); + textarea.value = 'cd'; + textarea.dispatchEvent( + new InputEvent('input', { + bubbles: true, + composed: false, + inputType: 'insertText', + data: 'cd', + }) + ); + await new Promise((resolve) => setTimeout(resolve, 20)); + + return { + afterComposition, + pendingText: app._localEchoOverlay.pendingText, + }; + }); + + expect(state).toEqual({ + afterComposition: 'cd', + pendingText: 'cd ', + }); + }); + + it('dedupes an Android replay delayed after the accepting Space', async () => { + const state = await page.evaluate(async () => { + app.activeSessionId = 'mobile-composition-delayed-replay-test'; + app.sessions.set('mobile-composition-delayed-replay-test', { + id: 'mobile-composition-delayed-replay-test', + mode: 'codex', + status: 'running', + }); + app.hideWelcome(); + const settings = app.loadAppSettingsFromStorage(); + settings.cjkInputEnabled = false; + settings.localEchoEnabled = true; + app.saveAppSettingsToStorage(settings); + app._updateCjkInputState(); + app._updateLocalEchoState(); + app._localEchoOverlay.clear(); + + const textarea = app.terminal.textarea; + textarea.value = ''; + textarea.dispatchEvent(new CompositionEvent('compositionstart', { bubbles: true })); + textarea.value = 'cd'; + textarea.dispatchEvent( + new CompositionEvent('compositionupdate', { + bubbles: true, + data: 'cd', + }) + ); + textarea.dispatchEvent( + new CompositionEvent('compositionend', { + bubbles: true, + data: 'cd', + }) + ); + await new Promise((resolve) => setTimeout(resolve, 100)); + app.terminal.input(' '); + + // Browser/IME scheduling can defer the alternate callback even after + // Space. Elapsed time must not turn the same finalized word into input. + await new Promise((resolve) => setTimeout(resolve, 1100)); + textarea.value = 'cd'; + textarea.dispatchEvent( + new InputEvent('input', { + bubbles: true, + composed: false, + inputType: 'insertText', + data: 'cd', + }) + ); + await new Promise((resolve) => setTimeout(resolve, 20)); + + return { + pendingText: app._localEchoOverlay.pendingText, + }; + }); + + expect(state).toEqual({ + pendingText: 'cd ', + }); + }); + + it('does not recommit Android final input when compositionend arrives afterward', async () => { + const state = await page.evaluate(async () => { + app.activeSessionId = 'mobile-input-before-compositionend-test'; + app.sessions.set('mobile-input-before-compositionend-test', { + id: 'mobile-input-before-compositionend-test', + mode: 'codex', + status: 'running', + }); + app.hideWelcome(); + const settings = app.loadAppSettingsFromStorage(); + settings.cjkInputEnabled = false; + settings.localEchoEnabled = true; + app.saveAppSettingsToStorage(settings); + app._updateCjkInputState(); + app._updateLocalEchoState(); + app._localEchoOverlay.clear(); + + const textarea = app.terminal.textarea; + textarea.value = ''; + textarea.dispatchEvent(new CompositionEvent('compositionstart', { bubbles: true })); + textarea.value = 'cd'; + textarea.dispatchEvent( + new CompositionEvent('compositionupdate', { + bubbles: true, + data: 'cd', + }) + ); + + // Some Android keyboards expose the finalized word as a non-composing + // input mutation before they dispatch compositionend. + textarea.dispatchEvent( + new InputEvent('input', { + bubbles: true, + composed: false, + inputType: 'insertText', + data: 'cd', + }) + ); + const afterInput = app._localEchoOverlay.pendingText; + textarea.dispatchEvent( + new CompositionEvent('compositionend', { + bubbles: true, + data: 'cd', + }) + ); + await new Promise((resolve) => setTimeout(resolve, 100)); + + return { + afterInput, + pendingText: app._localEchoOverlay.pendingText, + compositionText: app._localEchoOverlay.compositionText, + }; + }); + + expect(state).toEqual({ + afterInput: 'cd', + pendingText: 'cd', + compositionText: '', + }); + }); + + it('delivers an Android composition once to an immediate-echo shell', async () => { + const state = await page.evaluate(async () => { + window.__sentInputs = []; + app.activeSessionId = 'mobile-shell-composition-test'; + app.sessions.set('mobile-shell-composition-test', { + id: 'mobile-shell-composition-test', + mode: 'shell', + status: 'running', + }); + app.hideWelcome(); + app._sendInputAsync = (_sessionId: string, input: string) => { + window.__sentInputs.push(input); + }; + const settings = app.loadAppSettingsFromStorage(); + settings.cjkInputEnabled = false; + settings.localEchoEnabled = true; + app.saveAppSettingsToStorage(settings); + app._updateCjkInputState(); + app._updateLocalEchoState(); + + const textarea = app.terminal.textarea; + textarea.value = ''; + textarea.dispatchEvent(new CompositionEvent('compositionstart', { bubbles: true })); + textarea.value = 'cd'; + textarea.dispatchEvent( + new CompositionEvent('compositionupdate', { + bubbles: true, + data: 'cd', + }) + ); + await new Promise((resolve) => setTimeout(resolve, 0)); + textarea.dispatchEvent( + new CompositionEvent('compositionend', { + bubbles: true, + data: 'cd', + }) + ); + await new Promise((resolve) => setTimeout(resolve, 20)); + + // Gboard can repeat the finalized word as a non-composing input event + // when the following space accepts its suggestion. + textarea.value = 'cd'; + textarea.dispatchEvent( + new InputEvent('input', { + bubbles: true, + composed: false, + inputType: 'insertText', + data: 'cd', + }) + ); + await new Promise((resolve) => setTimeout(resolve, 20)); + app.terminal.input(' '); + await new Promise((resolve) => setTimeout(resolve, 20)); + + // xterm's helper textarea is an IME scratch buffer and may retain the + // earlier command prefix. InputEvent.data still identifies the newly + // inserted word; routing the whole textarea would resend "cd ". + textarea.value = 'cd home'; + textarea.dispatchEvent( + new InputEvent('input', { + bubbles: true, + composed: false, + inputType: 'insertText', + data: 'home', + }) + ); + await new Promise((resolve) => setTimeout(resolve, 20)); + + return { + sentInputs: window.__sentInputs, + localEchoEnabled: app._localEchoEnabled, + localEchoClass: app.terminal.element?.classList.contains('codeman-local-echo'), + }; + }); + + expect(state).toEqual({ + sentInputs: ['cd', ' ', 'home'], + localEchoEnabled: false, + localEchoClass: false, + }); + }); + + it('routes retained Android helper text once for a local-echo agent', async () => { + const state = await page.evaluate(async () => { + app.activeSessionId = 'mobile-agent-retained-helper-test'; + app.sessions.set('mobile-agent-retained-helper-test', { + id: 'mobile-agent-retained-helper-test', + mode: 'codex', + status: 'running', + }); + app.hideWelcome(); + const settings = app.loadAppSettingsFromStorage(); + settings.cjkInputEnabled = false; + settings.localEchoEnabled = true; + app.saveAppSettingsToStorage(settings); + app._updateCjkInputState(); + app._updateLocalEchoState(); + app._localEchoOverlay.clear(); + app._localEchoOverlay.appendText('cd '); + + const textarea = app.terminal.textarea; + textarea.value = 'cd home'; + textarea.dispatchEvent( + new InputEvent('input', { + bubbles: true, + composed: false, + inputType: 'insertText', + data: 'home', + }) + ); + await Promise.resolve(); + + return { + pendingText: app._localEchoOverlay.pendingText, + helperValue: textarea.value, + }; + }); + + expect(state).toEqual({ + pendingText: 'cd home', + helperValue: '', + }); + }); + it('keeps routing Android textarea text after an interrupted composition', async () => { const state = await page.evaluate(async () => { app.activeSessionId = 'mobile-null-input-data-test'; @@ -2856,10 +3374,12 @@ describe('Virtual Keyboard', () => { data: 'seed next more', }) ); + const immediateAfterCumulative = app._localEchoOverlay.pendingText; await Promise.resolve(); return { afterNullData, + immediateAfterCumulative, pendingText: app._localEchoOverlay.pendingText, helperValue: textarea.value, }; @@ -2867,6 +3387,7 @@ describe('Virtual Keyboard', () => { expect(state).toEqual({ afterNullData: 'seed next', + immediateAfterCumulative: 'seed next more', pendingText: 'seed next more', helperValue: '', }); diff --git a/test/mobile/tabs.test.ts b/test/mobile/tabs.test.ts index 82aba528..5de434ca 100644 --- a/test/mobile/tabs.test.ts +++ b/test/mobile/tabs.test.ts @@ -556,7 +556,7 @@ describe('Tab Navigation', () => { if (typeof KeyboardHandler !== 'undefined') KeyboardHandler.keyboardVisible = false; let selected: string | null = null; - let selectedOptions: { preserveKeyboard?: boolean } | null = null; + let selectedOptions: { forceReload?: boolean; preserveKeyboard?: boolean } | null = null; const originalSelect = app.selectSession; app.selectSession = function (id, options) { selected = id; @@ -573,6 +573,7 @@ describe('Tab Navigation', () => { return { hasHandler: typeof app.handleSessionTabClick === 'function', selected: selected, + forceReload: selectedOptions ? selectedOptions.forceReload : undefined, preserveKeyboard: selectedOptions ? selectedOptions.preserveKeyboard : undefined, activeIsTextarea: activeIsTextarea, }; @@ -580,7 +581,8 @@ describe('Tab Navigation', () => { expect(result.hasHandler).toBe(true); expect(result.selected).toBe('mock-session-2'); - expect(result.preserveKeyboard).toBe(false); + expect(result.forceReload).toBe(true); + expect(result.preserveKeyboard).toBeUndefined(); expect(result.activeIsTextarea).toBe(false); } finally { await context.close(); diff --git a/test/path-picker-ui.test.ts b/test/path-picker-ui.test.ts index b64633e6..fc3b083d 100644 --- a/test/path-picker-ui.test.ts +++ b/test/path-picker-ui.test.ts @@ -114,54 +114,36 @@ describe('mobile filesystem picker actions', () => { }); it('inserts a selected path into the editable local-echo prompt without sending it', () => { - const appendText = vi.fn(); - const sendInput = vi.fn(); + const insertText = vi.fn(); const focus = vi.fn(); const app = { activeSessionId: 'session-1', - _localEchoEnabled: true, - _localEchoOverlay: { appendText }, + _terminalInputController: { insertText }, terminal: { focus }, - sendInput, }; terminalHarness.mixin.insertTerminalText.call(app, '/mnt/d/AI/project'); - expect(appendText).toHaveBeenCalledWith('/mnt/d/AI/project'); - expect(sendInput).not.toHaveBeenCalled(); + expect(insertText).toHaveBeenCalledWith('/mnt/d/AI/project'); expect(focus).toHaveBeenCalledOnce(); }); it('clears pending and already-flushed prompt text without invoking /clear', () => { - const clear = vi.fn(); - const suppressBufferDetection = vi.fn(); - const sendInput = vi.fn(() => Promise.resolve()); + const clearInput = vi.fn(); const showToast = vi.fn(); const focus = vi.fn(); const app = { activeSessionId: 'session-1', - _inputFlushTimeout: null, - _pendingInput: 'pending text', - _localEchoEnabled: true, - _localEchoOverlay: { - getFlushed: () => ({ count: 4, text: 'sent' }), - clear, - suppressBufferDetection, - }, + _terminalInputController: { clearInput }, _flushedOffsets: new Map([['session-1', 4]]), _flushedTexts: new Map([['session-1', 'sent']]), - sendInput, showToast, terminal: { focus }, }; terminalHarness.mixin.clearTerminalInput.call(app); - expect(app._pendingInput).toBe(''); - expect(clear).toHaveBeenCalledOnce(); - expect(suppressBufferDetection).toHaveBeenCalledOnce(); - expect(sendInput).toHaveBeenCalledWith('\x7f'.repeat(4)); - expect(sendInput).not.toHaveBeenCalledWith('/clear'); + expect(clearInput).toHaveBeenCalledOnce(); expect(app._flushedOffsets.size).toBe(0); expect(app._flushedTexts.size).toBe(0); expect(showToast).toHaveBeenCalledWith('Input cleared', 'success'); @@ -169,21 +151,19 @@ describe('mobile filesystem picker actions', () => { expect(terminalHarness.cjkClear).toHaveBeenCalled(); }); - it('uses Ctrl+U to clear the TUI-owned prompt when local echo is disabled', () => { - const sendInput = vi.fn(() => Promise.resolve()); + it('delegates non-local prompt clearing to the controller', () => { + const clearInput = vi.fn(); const app = { activeSessionId: 'session-1', - _inputFlushTimeout: null, - _pendingInput: '', - _localEchoEnabled: false, - _localEchoOverlay: null, - sendInput, + _terminalInputController: { clearInput }, + _flushedOffsets: new Map(), + _flushedTexts: new Map(), showToast: vi.fn(), terminal: { focus: vi.fn() }, }; terminalHarness.mixin.clearTerminalInput.call(app); - expect(sendInput).toHaveBeenCalledWith('\x15'); + expect(clearInput).toHaveBeenCalledOnce(); }); }); diff --git a/test/terminal-input-controller.test.ts b/test/terminal-input-controller.test.ts new file mode 100644 index 00000000..3a002204 --- /dev/null +++ b/test/terminal-input-controller.test.ts @@ -0,0 +1,438 @@ +import { readFileSync } from 'node:fs'; +import { resolve } from 'node:path'; +import vm from 'node:vm'; +import { describe, expect, it, vi } from 'vitest'; + +type ControllerOptions = { + textarea: FakeTextarea; + terminal: { input: (data: string) => void }; + overlay: FakeOverlay; + getSessionId: () => string; + getSessionMode: () => string; + isLocalEchoEnabled: () => boolean; + isRestoringDraft: () => boolean; + captureDraft: () => void; + setDraft: (sessionId: string, draft: Record) => void; + clearDraft: (sessionId: string) => void; + deliver: (sessionId: string, data: string) => void; + preparePaste: (text: string, bracketed: boolean) => string; + sendNamedKey: (sessionId: string, key: string, delay: number) => void; + trace: (stage: string, fields?: Record) => void; + log: (message: string) => void; + setTimer: (callback: () => void, delay: number) => number; + clearTimer: (timer: number) => void; + now: () => number; +}; + +type TerminalInputController = { + beginComposition: () => void; + updateComposition: (text: string) => void; + endComposition: (text: string) => void; + handleTerminalData: (data: string, source?: string) => boolean; + sendControl: (data: string) => void; + sendExternalText: (text: string) => void; + sendCommand: (command: string) => void; + sendPaste: (text: string, options?: { submit?: boolean }) => void; + sendModifiedEnter: (key: string) => void; + clearInput: () => void; + attachTextarea: (container: FakeEventTarget, options?: { mobile?: boolean }) => boolean; + reset: (options?: { flushDelivery?: boolean }) => void; + state: { + compositionActive: boolean; + compositionPending: boolean; + expectedCommit: string | null; + fallbackCommit: string | null; + }; +}; + +type TerminalInputControllerConstructor = new (options: ControllerOptions) => TerminalInputController; + +type FakeListener = (event: Record) => void; + +class FakeEventTarget { + private listeners = new Map(); + + addEventListener(type: string, listener: FakeListener): void { + this.listeners.set(type, [...(this.listeners.get(type) ?? []), listener]); + } + + removeEventListener(type: string, listener: FakeListener): void { + this.listeners.set( + type, + (this.listeners.get(type) ?? []).filter((candidate) => candidate !== listener) + ); + } + + fire(type: string, fields: Record = {}) { + const event = { + target: this, + preventDefault: vi.fn(), + stopPropagation: vi.fn(), + stopImmediatePropagation: vi.fn(), + ...fields, + }; + for (const listener of this.listeners.get(type) ?? []) { + listener(event); + } + return event; + } +} + +class FakeTextarea extends FakeEventTarget { + value = ''; + selectionStart = 0; + selectionEnd = 0; + + setSelectionRange(start: number, end: number): void { + this.selectionStart = start; + this.selectionEnd = end; + } +} + +class FakeOverlay { + pendingText = ''; + compositionText = ''; + flushedText = ''; + + addChar(char: string): void { + this.pendingText += char; + } + + appendText(text: string): void { + this.pendingText += text; + } + + setCompositionText(text: string): void { + this.compositionText = text; + } + + commitComposition(text: string): void { + this.compositionText = ''; + this.pendingText += text; + } + + clearComposition(): void { + this.compositionText = ''; + } + + removeChar(): 'pending' | 'flushed' | false { + if (this.pendingText) { + this.pendingText = this.pendingText.slice(0, -1); + return 'pending'; + } + if (this.flushedText) { + this.flushedText = this.flushedText.slice(0, -1); + return 'flushed'; + } + return false; + } + + getFlushed(): { count: number; text: string } { + return { + count: this.flushedText.length, + text: this.flushedText, + }; + } + + clear(): void { + this.pendingText = ''; + this.compositionText = ''; + this.flushedText = ''; + } + + suppressBufferDetection(): void {} +} + +function loadController(): TerminalInputControllerConstructor { + const source = readFileSync(resolve(import.meta.dirname, '../src/web/public/terminal-input-controller.js'), 'utf8'); + const context = vm.createContext({ + console, + globalThis: {}, + }); + vm.runInContext(source, context, { filename: 'terminal-input-controller.js' }); + return ( + context.globalThis as { + TerminalInputController: TerminalInputControllerConstructor; + } + ).TerminalInputController; +} + +function createHarness(localEcho = true) { + const Controller = loadController(); + const textarea = new FakeTextarea(); + const overlay = new FakeOverlay(); + const deliveries: string[] = []; + const drafts: Array> = []; + const namedKeys: Array<{ + sessionId: string; + key: string; + delay: number; + }> = []; + const traces: string[] = []; + const timers = new Map void>(); + let timerId = 0; + let controller: TerminalInputController; + const terminal = { + input(data: string) { + controller.handleTerminalData(data, 'terminal-control'); + }, + }; + controller = new Controller({ + textarea, + terminal, + overlay, + getSessionId: () => 'session-a', + getSessionMode: () => (localEcho ? 'codex' : 'shell'), + isLocalEchoEnabled: () => localEcho, + isRestoringDraft: () => false, + captureDraft: () => {}, + setDraft: (_sessionId, draft) => drafts.push(draft), + clearDraft: () => {}, + deliver: (_sessionId, data) => deliveries.push(data), + preparePaste: (text, bracketed) => (bracketed ? `${text}` : text), + sendNamedKey: (sessionId, key, delay) => { + namedKeys.push({ sessionId, key, delay }); + }, + trace: (stage) => traces.push(stage), + log: () => {}, + setTimer: (callback) => { + timerId += 1; + timers.set(timerId, callback); + return timerId; + }, + clearTimer: (id) => { + timers.delete(id); + }, + now: () => 1000, + }); + return { + controller, + textarea, + overlay, + deliveries, + drafts, + namedKeys, + traces, + timers, + }; +} + +describe('TerminalInputController', () => { + it('owns finalized composition reconciliation and clears retained helper context', () => { + const { controller, textarea, overlay, traces } = createHarness(); + overlay.appendText('cd'); + + controller.beginComposition(); + textarea.value = 'hcd home'; + controller.updateComposition(' home'); + controller.endComposition(' home'); + const handled = controller.handleTerminalData('hcd home', 'xterm'); + + expect(handled).toBe(true); + expect(overlay.pendingText).toBe('cd home'); + expect(overlay.compositionText).toBe(''); + expect(textarea.value).toBe(''); + expect(controller.state).toMatchObject({ + compositionActive: false, + compositionPending: false, + expectedCommit: null, + fallbackCommit: ' home', + }); + expect(traces).toContain('composition-strip-stale-prefix'); + }); + + it('keeps repeated composition epochs independent of retained textarea values', () => { + const { controller, textarea, overlay } = createHarness(); + + for (const text of ['cd', ' home', ' cd', ' home']) { + controller.beginComposition(); + textarea.value = `stale${text}`; + controller.updateComposition(text); + controller.endComposition(text); + controller.handleTerminalData(`stale${text}`, 'xterm'); + expect(textarea.value).toBe(''); + } + + expect(overlay.pendingText).toBe('cd home cd home'); + }); + + it('cancels an unfinished composition before applying one local Backspace', () => { + const { controller, overlay } = createHarness(); + overlay.appendText('cd'); + controller.beginComposition(); + controller.updateComposition('candidate'); + controller.endComposition('candidate'); + + controller.handleTerminalData('\x7f', 'beforeinput-delete'); + + expect(overlay.pendingText).toBe('c'); + expect(overlay.compositionText).toBe(''); + expect(controller.state).toMatchObject({ + compositionActive: false, + compositionPending: false, + expectedCommit: null, + fallbackCommit: null, + }); + }); + + it('routes ordinary text and Enter through one local-echo submission path', () => { + const { controller, overlay, deliveries } = createHarness(); + + controller.handleTerminalData('cd home', 'xterm'); + controller.sendControl('\r'); + + expect(overlay.pendingText).toBe(''); + expect(deliveries).toEqual(['cd home', '\r']); + }); + + it('retains a composition marker across a boundary and drops its delayed replay', () => { + const { controller, overlay } = createHarness(); + controller.beginComposition(); + controller.updateComposition('home'); + controller.endComposition('home'); + controller.handleTerminalData('home', 'xterm'); + + controller.handleTerminalData(' ', 'capture-input'); + controller.handleTerminalData('home', 'capture-input'); + + expect(overlay.pendingText).toBe('home '); + expect(controller.state.fallbackCommit).toBeNull(); + }); + + it('delivers immediate-echo composition data only once', () => { + const { controller, deliveries } = createHarness(false); + controller.beginComposition(); + controller.updateComposition('home'); + controller.endComposition('home'); + + controller.handleTerminalData('home', 'xterm'); + controller.handleTerminalData('home', 'capture-input'); + + expect(deliveries).toEqual(['home']); + }); + + it('flushes the editable draft before a modified Enter key', () => { + const { controller, overlay, deliveries, drafts, namedKeys } = createHarness(); + overlay.appendText('first\nsecond'); + + controller.sendModifiedEnter('S-Enter'); + + expect(deliveries).toEqual(['first\nsecond']); + expect(namedKeys).toEqual([ + { + sessionId: 'session-a', + key: 'S-Enter', + delay: 80, + }, + ]); + expect(drafts.at(-1)).toMatchObject({ + pendingText: '', + flushedText: 'first\nsecond\n', + }); + }); + + it('routes multiline paste and submit as two ordered records', () => { + const { controller, deliveries } = createHarness(); + + controller.sendPaste('first\n\nsecond', { + submit: true, + }); + + expect(deliveries).toEqual(['first\n\nsecond', '\r']); + }); + + it('clears flushed local text with one Backspace per character', () => { + const { controller, overlay, deliveries } = createHarness(); + overlay.flushedText = 'abc'; + + controller.clearInput(); + + expect(overlay.flushedText).toBe(''); + expect(deliveries).toEqual(['\x7f\x7f\x7f']); + }); + + it('flushes a queued normal-mode character before session reset', () => { + const { controller, deliveries } = createHarness(false); + + controller.handleTerminalData('a'); + controller.handleTerminalData('b'); + controller.reset(); + + expect(deliveries).toEqual(['a', 'b']); + }); + + it('keeps external input on the immediate reliable-delivery path', () => { + const { controller, deliveries } = createHarness(); + + controller.sendExternalText('voice or CJK text'); + + expect(deliveries).toEqual(['voice or CJK text']); + }); + + it('submits accessory commands through the current editable draft', () => { + const { controller, overlay, deliveries } = createHarness(); + overlay.appendText('prefix '); + + controller.sendCommand('/help'); + + expect(deliveries).toEqual(['prefix /help', '\r']); + }); + + it('routes real composition events through the attached DOM adapter', () => { + const { controller, textarea, overlay } = createHarness(); + const container = new FakeEventTarget(); + expect(controller.attachTextarea(container, { mobile: true })).toBe(true); + + textarea.fire('compositionstart'); + textarea.fire('compositionupdate', { data: 'home' }); + textarea.value = 'home'; + container.fire('input', { + target: textarea, + inputType: 'insertText', + data: 'home', + isComposing: false, + }); + textarea.fire('compositionend', { data: 'home' }); + + expect(overlay.pendingText).toBe('home'); + expect(overlay.compositionText).toBe(''); + expect(textarea.value).toBe(''); + }); + + it('routes attached delete and multiline paste events exactly once', () => { + const { controller, textarea, overlay } = createHarness(); + const container = new FakeEventTarget(); + controller.attachTextarea(container, { mobile: true }); + overlay.appendText('abc'); + + const deletion = textarea.fire('beforeinput', { + inputType: 'deleteContentBackward', + isComposing: false, + }); + const paste = textarea.fire('paste', { + clipboardData: { + getData: () => 'first\n\nsecond', + }, + }); + + expect(deletion.preventDefault).toHaveBeenCalledOnce(); + expect(paste.preventDefault).toHaveBeenCalledOnce(); + expect(overlay.pendingText).toBe('abfirst\n\nsecond'); + }); + + it('drops a compositionend that arrives after session state was reset', () => { + const { controller, overlay, textarea, timers } = createHarness(); + controller.beginComposition(); + controller.updateComposition('outgoing'); + + controller.reset({ flushDelivery: false }); + textarea.value = 'outgoing'; + controller.endComposition('outgoing'); + for (const timer of timers.values()) timer(); + + expect(overlay.pendingText).toBe(''); + expect(overlay.compositionText).toBe(''); + expect(textarea.value).toBe(''); + expect(controller.state.compositionPending).toBe(false); + }); +}); diff --git a/test/terminal-touch-tap.test.ts b/test/terminal-touch-tap.test.ts index eb159913..13c77199 100644 --- a/test/terminal-touch-tap.test.ts +++ b/test/terminal-touch-tap.test.ts @@ -216,6 +216,16 @@ describe('terminal touch tap mouse guard', () => { expect(app._classifyMobileTerminalTap(9, 65)).toBe('content'); }); + it('keeps the live cursor focusable when Claude temporarily omits its prompt glyph', () => { + const { app } = loadTerminalUiHarness(); + app.activeSessionId = 'sess-1'; + app.sessions = new Map([['sess-1', { mode: 'claude' }]]); + app.terminal = createTerminalGrid(['Prior response', '', 'ready for input', '', 'status footer', ''], 2); + + expect(app._classifyMobileTerminalTap(9, 33)).toBe('input'); + expect(app._classifyMobileTerminalTap(9, 1)).toBe('content'); + }); + it('treats a highlighted numbered choice as TUI content, not an input prompt', () => { const { app } = loadTerminalUiHarness(); app.activeSessionId = 'sess-1'; @@ -764,7 +774,7 @@ describe('terminal viewport sizing claims', () => { const { app, setKeyboardVisible, cancelAnimationFrame } = loadTerminalUiHarness(); app.activeSessionId = 'sess-1'; app.sendResize = vi.fn(() => Promise.resolve(true)); - app._sendInputAsync = vi.fn(); + app._terminalInputController = { sendControl: vi.fn() }; app._terminalSizingClaimFrame = 7; setKeyboardVisible(true); @@ -776,6 +786,6 @@ describe('terminal viewport sizing claims', () => { takeControl: true, refit: false, }); - expect(app._sendInputAsync).toHaveBeenCalledWith('sess-1', '\x1b[A'); + expect(app._terminalInputController.sendControl).toHaveBeenCalledWith('\x1b[A'); }); }); From 092f1a304c24973a35142f43f8c4225b9219579f Mon Sep 17 00:00:00 2001 From: lior Date: Tue, 28 Jul 2026 23:05:29 +0300 Subject: [PATCH 47/49] fix(mobile): make terminal controls opt in --- src/web/public/settings-ui.js | 8 +++---- test/mobile-navigation-pad.test.ts | 2 +- test/mobile/navigation-pad.test.ts | 34 +++++++++++++++--------------- test/mobile/settings.test.ts | 17 +++++++++------ 4 files changed, 32 insertions(+), 29 deletions(-) diff --git a/src/web/public/settings-ui.js b/src/web/public/settings-ui.js index 0fbda074..5f393dab 100644 --- a/src/web/public/settings-ui.js +++ b/src/web/public/settings-ui.js @@ -2003,8 +2003,8 @@ Object.assign(CodemanApp.prototype, { remoteAutoReconnect: true, // Input gestureControlEnabled: false, - mobileTerminalControlsEnabled: true, - mobileControlHaptics: true, + mobileTerminalControlsEnabled: false, + mobileControlHaptics: false, mobileControlSound: false, // Feature toggles - keep tracking on even on mobile subagentTrackingEnabled: true, @@ -2136,8 +2136,8 @@ Object.assign(CodemanApp.prototype, { } // File Viewer header button — opt-in, default OFF. Marker class (base is - // display:inline-flex !important); clicking it toggles the repository panel. - // Phones allow the enabled button because the panel has a dedicated mobile layout. + // display:inline-flex !important); phone-width touch layouts keep the header + // action hidden because the repository panel is launched from mobile options. const showFileViewerButton = settings.showFileViewerButton ?? defaults.showFileViewerButton ?? true; const fileViewerBtn = document.querySelector('.btn-file-viewer'); if (fileViewerBtn) { diff --git a/test/mobile-navigation-pad.test.ts b/test/mobile-navigation-pad.test.ts index 568cb032..00f9fd12 100644 --- a/test/mobile-navigation-pad.test.ts +++ b/test/mobile-navigation-pad.test.ts @@ -135,7 +135,7 @@ describe('MobileTerminalControls settings migration', () => { [{ mobileNavigationPadEnabled: true }, {}, true, true], [{ mobileNavigationPadEnabled: false }, { mobileTerminalControlsEnabled: true }, true, false], [{ extendedKeyboardBar: true }, {}, false, true], - [{ extendedKeyboardBar: false }, {}, true, true], + [{ extendedKeyboardBar: false }, {}, true, false], [{ extendedKeyboardBar: false }, {}, false, false], [{}, { mobileTerminalControlsEnabled: true }, false, true], ])( diff --git a/test/mobile/navigation-pad.test.ts b/test/mobile/navigation-pad.test.ts index d24e7f1f..452b2ea2 100644 --- a/test/mobile/navigation-pad.test.ts +++ b/test/mobile/navigation-pad.test.ts @@ -389,10 +389,10 @@ describe('Mobile Navigation Pad', () => { expect(await page.locator(SELECTORS.MOBILE_NAVIGATION).isVisible()).toBe(false); expect(await settingRow.isVisible()).toBe(true); expect(await settingSlider.isVisible()).toBe(true); - expect(await setting.isChecked()).toBe(true); + expect(await setting.isChecked()).toBe(false); expect(await hapticsRow.isVisible()).toBe(true); expect(await hapticsRow.locator('.slider').isVisible()).toBe(true); - expect(await haptics.isChecked()).toBe(true); + expect(await haptics.isChecked()).toBe(false); expect(await soundRow.isVisible()).toBe(true); expect(await soundRow.locator('.slider').isVisible()).toBe(true); expect(await sound.isChecked()).toBe(false); @@ -403,40 +403,40 @@ describe('Mobile Navigation Pad', () => { } await settingSlider.click(); - expect(await setting.isChecked()).toBe(false); + expect(await setting.isChecked()).toBe(true); await page.evaluate(`app.saveAppSettings()`); await page.waitForFunction(() => { const saved = JSON.parse(localStorage.getItem('codeman-app-settings-mobile') || '{}'); - return saved.mobileTerminalControlsEnabled === false; + return saved.mobileTerminalControlsEnabled === true; }); expect( await page.evaluate( - `MobileTerminalControls.enabled === false && - MobileNavigationPad.enabled === false && - KeyboardAccessoryBar.enabled === false` + `MobileTerminalControls.enabled === true && + MobileNavigationPad.enabled === true && + KeyboardAccessoryBar.enabled === true` ) ).toBe(true); - expect(await page.locator(SELECTORS.MOBILE_NAVIGATION).isVisible()).toBe(false); - expect(await page.locator('.btn-toolbar.btn-enter').isVisible()).toBe(true); + expect(await page.locator(SELECTORS.MOBILE_NAVIGATION).isVisible()).toBe(true); + expect(await page.locator('.btn-toolbar.btn-enter').isVisible()).toBe(false); await page.evaluate(`app.openAppSettings()`); - expect(await setting.isChecked()).toBe(false); - await settingSlider.click(); expect(await setting.isChecked()).toBe(true); + await settingSlider.click(); + expect(await setting.isChecked()).toBe(false); await page.evaluate(`app.saveAppSettings()`); await page.waitForFunction(() => { const saved = JSON.parse(localStorage.getItem('codeman-app-settings-mobile') || '{}'); - return saved.mobileTerminalControlsEnabled === true; + return saved.mobileTerminalControlsEnabled === false; }); expect( await page.evaluate( - `MobileTerminalControls.enabled === true && - MobileNavigationPad.enabled === true && - KeyboardAccessoryBar.enabled === true` + `MobileTerminalControls.enabled === false && + MobileNavigationPad.enabled === false && + KeyboardAccessoryBar.enabled === false` ) ).toBe(true); - expect(await page.locator(SELECTORS.MOBILE_NAVIGATION).isVisible()).toBe(true); - expect(await page.locator('.btn-toolbar.btn-enter').isVisible()).toBe(false); + expect(await page.locator(SELECTORS.MOBILE_NAVIGATION).isVisible()).toBe(false); + expect(await page.locator('.btn-toolbar.btn-enter').isVisible()).toBe(true); }); it('switches to the extended accessory bar while the phone keyboard is visible', async () => { diff --git a/test/mobile/settings.test.ts b/test/mobile/settings.test.ts index 1f5f06ef..856933b6 100644 --- a/test/mobile/settings.test.ts +++ b/test/mobile/settings.test.ts @@ -78,8 +78,8 @@ describe('Settings Modal', () => { expect(defaults.showSubagents).toBe(false); expect(defaults.subagentTrackingEnabled).toBe(true); expect(defaults.ralphTrackerEnabled).toBe(false); - expect(defaults.mobileTerminalControlsEnabled).toBe(true); - expect(defaults.mobileControlHaptics).toBe(true); + expect(defaults.mobileTerminalControlsEnabled).toBe(false); + expect(defaults.mobileControlHaptics).toBe(false); expect(defaults.mobileControlSound).toBe(false); } }); @@ -459,8 +459,7 @@ describe('Settings Modal', () => { key, JSON.stringify({ showResponseViewer: true, - // Legacy false meant the compact accessory layout, not disabled. - extendedKeyboardBar: false, + mobileTerminalControlsEnabled: true, }) ); }, STORAGE_KEYS.SETTINGS_MOBILE); @@ -512,19 +511,23 @@ describe('Settings Modal', () => { } }); - it('enables the unified controls by default on touch tablets', async () => { + it('keeps unified controls opt-in on touch tablets', async () => { const device = REPRESENTATIVE_DEVICES['standard-tablet']; const { page, context } = await createDevicePage(device, BASE_URL, 'chromium'); try { - expect(await page.evaluate('MobileTerminalControls.enabled')).toBe(true); + expect(await page.evaluate('MobileTerminalControls.enabled')).toBe(false); await page.evaluate(() => (window as any).app.openAppSettings()); await assertVisible(page, '#appSettingsMobileTerminalControlsItem'); - expect(await page.locator('#appSettingsMobileTerminalControls').isChecked()).toBe(true); + expect(await page.locator('#appSettingsMobileTerminalControls').isChecked()).toBe(false); await page.evaluate(() => (window as any).app.closeAppSettings()); await page.evaluate(` + const settings = app.loadAppSettingsFromStorage(); + settings.mobileTerminalControlsEnabled = true; + app.saveAppSettingsToStorage(settings); + MobileTerminalControls.setEnabled(true); app.activeSessionId = 'tablet-controls-test'; app.hideWelcome(); MobileTerminalControls.syncVisibility(); From b8d7c343714d332ba963a7e8ce74163b7c128733 Mon Sep 17 00:00:00 2001 From: lior Date: Tue, 28 Jul 2026 23:05:45 +0300 Subject: [PATCH 48/49] docs: record mobile experience PR split audit --- ...-07-28-mobile-experience-pr-split-audit.md | 164 ++++++++++++++++++ 1 file changed, 164 insertions(+) create mode 100644 docs/audits/2026-07-28-mobile-experience-pr-split-audit.md diff --git a/docs/audits/2026-07-28-mobile-experience-pr-split-audit.md b/docs/audits/2026-07-28-mobile-experience-pr-split-audit.md new file mode 100644 index 00000000..ce9ec6f9 --- /dev/null +++ b/docs/audits/2026-07-28-mobile-experience-pr-split-audit.md @@ -0,0 +1,164 @@ +# Mobile Experience Change-Set Audit + +**Date:** 2026-07-28 +**Scope:** `origin/master..agent/mobile-terminal-experience` plus the pending terminal input controller extraction +**Mode:** Full, with architecture, code-quality, and test specialists +**Size:** 112 tracked and pending files, 43 existing commits, approximately 21,000 added lines before audit commits + +## Assessment + +The combined branch is not reviewable as one pull request. It mixes terminal +transport, mobile controls, destructive instance management, Git-backed file +browsing, hook configuration, case management, and unrelated settings. The +features should be rebuilt from `origin/master` and published as independent +draft pull requests. + +| Severity | Count | Status | +| --- | ---: | --- | +| Critical | 4 | Fixed in the audited working tree | +| High | 5 | Four fixed; CI coverage split remains follow-up work | +| Medium | 6 | Three fixed; remaining gaps are documented per PR | + +## Blocking Findings + +### Passwordless remote shutdown + +`src/web/routes/system-routes.ts:144` relied on `requireAdmin`, while +`src/web/route-helpers.ts:185` treats passwordless single-user mode as admin. +Any network client reaching Codeman could therefore schedule a persistent +service shutdown. + +**Resolution:** passwordless single-user shutdown now returns `403`; authenticated +single-user installs and multi-user admins retain access. Route tests cover +passwordless and non-admin denial. + +### Self-deleting quick-start fixture + +`test/quick-start.test.ts` used the real `~/codeman-cases` directory and removed +the default `testcase` recursively during cleanup. Running CI from a checkout at +`~/codeman-cases/testcase/Codeman` therefore deleted the repository, its Git +metadata, and `node_modules` while Vitest was still running. + +**Resolution:** the test now assigns a unique temporary home before dynamically +importing `WebServer`, so its module-level `CASES_DIR` resolves inside the +fixture. The test restores the environment and removes only that temporary home. + +### Cross-user repository worktrees + +`src/web/routes/file-routes.ts:462` accepted a linked-worktree root returned by +Git without reapplying `isWorkingDirAllowed`. A regular multi-user session in +one allowed worktree could select and read a sibling worktree outside its user +space. + +**Resolution:** every repository scope transition is authorized, overview +metadata filters disallowed worktrees, and commit, diff, tree, content, raw, +preview, and thumbnail routes share the same check. Tests cover a linked +worktree outside the user's case space. + +### Mixed hook configuration loss + +`src/hooks-config.ts:354` identified the entire hooks object as Codeman-owned +when any command referenced `/api/hook-event`, then replaced the full object. +Mixed Codeman and user hooks lost user handlers during self-healing. + +**Resolution:** ownership is now determined per command handler. Installation +and refresh replace only Codeman handlers and preserve user events, matchers, +and handlers sharing a matcher. + +### Mobile terminal could become unfocusable + +`src/web/public/terminal-ui.js:3602` recognized only a narrow set of prompt +glyphs and otherwise classified live Claude rows as content. Touch handling +prevented the browser compatibility focus event, leaving no way to open the +keyboard on promptless redraws. + +**Resolution:** known menus, working indicators, and transcript rows remain TUI +content; the live cursor and a lower-screen fallback band remain focusable. +The Playwright regression asserts the helper textarea becomes +`document.activeElement` and no mouse report is sent. + +### Input ownership invariant was false + +Voice input, image paths, accessory commands, and fallback Enter called +`sendInput` directly despite the documented controller-only boundary. +The pending controller extraction also left three path-picker tests bound to +the deleted implementation. + +**Resolution:** all interactive producers now enter semantic +`TerminalInputController` methods. A static producer boundary test rejects +future direct transport calls, DOM-adapter tests dispatch real composition, +delete, and paste events, and the path-picker harness asserts delegation. + +### Controls were not opt-in + +`src/web/public/settings-ui.js:2006` and the corresponding HTML controls enabled +mobile controls and haptics by default despite the feature description calling +them optional. + +**Resolution:** canonical defaults are off. Explicit canonical and legacy true +values still migrate to enabled; device detection alone no longer enables the +feature. + +### Phone header policy was weakened + +`test/mobile-header-buttons-policy.test.ts:32` allowlisted File Viewer and +instance shutdown on the phone header. + +**Resolution:** the allowlist is empty again and CSS explicitly hides both +buttons on phone widths. + +## Remaining Test Gaps + +- The main CI config excludes the Playwright mobile suites. Each frontend PR + must report its focused Playwright command until a stable browser smoke job + is added. +- The broad mobile browser run still carries unrelated baseline debt: 24 visual + snapshots need an intentional refresh, while 23 structural assertions already + disagree with `origin/master` behavior such as disabled pinch zoom and the + legacy 430px phone breakpoint. These should be repaired separately instead of + weakening feature-specific gates. +- Terminal history paging and warm-cache tests still lean heavily on source + assertions. The streaming PR should add executable state-machine coverage. +- `Session.setWorkingDir` needs a focused collaborator synchronization test. +- Instance shutdown orchestration needs injected timer/process ports before its + idempotency and supervisor rollback paths can be unit tested safely. +- Volume-key support is progressive enhancement only. Browser tests can verify + DOM key mapping, not whether Android or iOS exposes physical volume keys. + +## Pull Request Slices + +1. Self-contained quick-start test fixture. +2. Mobile terminal controls and opt-in settings. +3. Mobile terminal tap routing. +4. Persistent terminal draft state and the centralized input controller. +5. PTY viewport sizing ownership. +6. Terminal history streaming, cache, and frame reconciliation. +7. Background-command reawake hooks. +8. Transcript tool-result completion. +9. Lifecycle notification noise reduction. +10. Repository/worktree browser and file diff UI. +11. Response viewer. +12. Secure instance shutdown. +13. Inline case edit/delete actions. +14. Active-session launch preservation. +15. Codex animation preference. + +Backend terminal protocol changes should precede frontend replay/cache changes. +The draft store should precede the controller adapter if those input changes are +published as stacked PRs. All other slices can target `master` independently. + +## Validation Recorded During Audit + +- Controller/input focused unit tests: passed. +- Shutdown and header policy tests: passed. +- Hook configuration and self-heal tests: passed. +- Repository scope, symlink, binary, and size-limit tests: passed. +- Promptless mobile focus Playwright regression: passed. +- Focused keyboard, controls, header, tabs, settings, and repository Playwright + suites: 160 passed. +- Full CI: 200 files passed, 3,977 tests passed, 12 skipped. +- Self-contained quick-start regression: 15 passed and the checkout remained + intact. +- TypeScript typecheck: passed. +- Frontend syntax and public asset checks: passed. +- `git diff --check`: passed. From 4b3f4a799d5cac95cf531481dc2ea5f11bcbebb4 Mon Sep 17 00:00:00 2001 From: lior Date: Tue, 28 Jul 2026 23:06:39 +0300 Subject: [PATCH 49/49] docs: normalize audit formatting --- docs/audits/2026-07-28-mobile-experience-pr-split-audit.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/audits/2026-07-28-mobile-experience-pr-split-audit.md b/docs/audits/2026-07-28-mobile-experience-pr-split-audit.md index ce9ec6f9..9362c4a9 100644 --- a/docs/audits/2026-07-28-mobile-experience-pr-split-audit.md +++ b/docs/audits/2026-07-28-mobile-experience-pr-split-audit.md @@ -1,8 +1,8 @@ # Mobile Experience Change-Set Audit -**Date:** 2026-07-28 -**Scope:** `origin/master..agent/mobile-terminal-experience` plus the pending terminal input controller extraction -**Mode:** Full, with architecture, code-quality, and test specialists +**Date:** 2026-07-28 +**Scope:** `origin/master..agent/mobile-terminal-experience` plus the pending terminal input controller extraction +**Mode:** Full, with architecture, code-quality, and test specialists **Size:** 112 tracked and pending files, 43 existing commits, approximately 21,000 added lines before audit commits ## Assessment