/** * @fileoverview CI-visible coverage for the manual mobile prompt composer. * * The Playwright mobile suite is excluded from the CI gate, so the behaviors * most likely to regress live here against the real browser module: native * textarea replacement, local-echo adoption, per-session drafts, bracketed * multiline delivery and image-path insertion. */ import { readFileSync } from 'node:fs'; import { resolve } from 'node:path'; import { JSDOM } from 'jsdom'; import { beforeEach, describe, expect, it, vi } from 'vitest'; const accessorySource = readFileSync(resolve('src/web/public/keyboard-accessory.js'), 'utf8'); const appSource = readFileSync(resolve('src/web/public/app.js'), 'utf8'); type Timer = { callback: () => void; delay: number }; function loadComposer(sessionId = 'session-1') { const dom = new JSDOM('', { url: 'https://localhost/' }); const window = dom.window; const timers: Timer[] = []; const localEcho = { pendingText: '', clear: vi.fn(() => { localEcho.pendingText = ''; }), suppressBufferDetection: vi.fn(), }; const app = { activeSessionId: sessionId, sessions: new Map([ ['session-1', { mode: 'claude' }], ['session-2', { mode: 'claude' }], ]), terminal: { paste: vi.fn(), focus: vi.fn(), modes: { bracketedPasteMode: true } }, _localEchoEnabled: true, _localEchoOverlay: localEcho, _flushedOffsets: new Map(), _flushedTexts: new Map(), _echoPassthroughSessions: new Set(), _predictiveEcho: { clearPredictions: vi.fn() }, _sendInputAsync: vi.fn(), _uploadAndInsertImages: vi.fn(async () => ['/tmp/image-one.png']), showToast: vi.fn(), }; const schedule = (callback: () => void, delay = 0) => { timers.push({ callback, delay }); return timers.length; }; const factory = new Function( 'window', 'document', 'Event', 'app', 'MobileDetection', 'URLSearchParams', 'fetch', 'setTimeout', 'clearTimeout', 'requestAnimationFrame', `${accessorySource}\nreturn KeyboardAccessoryBar;` ); const bar = factory( window, window.document, window.Event, app, { isTouchDevice: () => true }, window.URLSearchParams, vi.fn(), schedule, vi.fn(), (callback: FrameRequestCallback) => { callback(0); return 1; } ); return { app, bar, document: window.document, localEcho, timers, runTimers() { for (const timer of timers.splice(0)) timer.callback(); }, }; } function textarea(document: Document): HTMLTextAreaElement { return document.querySelector('.prompt-composer-textarea') as HTMLTextAreaElement; } function mountComposeButton(bar: any, document: Document): HTMLButtonElement { bar.element = document.createElement('div'); bar.element.innerHTML = bar._simpleButtons; document.body.appendChild(bar.element); bar._syncComposerDraftIndicator(); return bar.element.querySelector('[data-action="compose"]') as HTMLButtonElement; } describe('mobile prompt composer', () => { beforeEach(() => vi.restoreAllMocks()); it('replaces Paste with Compose on agent bars while shell keeps direct Paste', () => { const template = (name: string) => accessorySource.match(new RegExp(name + '\\s*:\\s*`([\\s\\S]*?)`'))?.[1] ?? ''; expect(template('_simpleButtons')).toContain('data-action="compose"'); expect(template('_simpleButtons')).not.toContain('data-action="paste"'); expect(template('_extendedButtons')).toContain('data-action="compose"'); expect(template('_extendedButtons')).not.toContain('data-action="paste"'); expect(template('_shellButtons')).toContain('data-action="paste"'); expect(template('_shellButtons')).not.toContain('data-action="compose"'); }); it('uses a compact accessible icon for Compose in both agent layouts', () => { const { bar, document } = loadComposer(); for (const markup of [bar._simpleButtons, bar._extendedButtons]) { const wrapper = document.createElement('div'); wrapper.innerHTML = markup; const button = wrapper.querySelector('[data-action="compose"]') as HTMLButtonElement; expect(button.getAttribute('aria-label')).toBe('Compose prompt'); expect(button.getAttribute('title')).toBe('Compose prompt'); expect(button.querySelector('svg[aria-hidden="true"]')).not.toBeNull(); expect(button.textContent?.trim()).toBe(''); } }); it('uses a native autocorrect-aware textarea and stores replacement text exactly once', () => { const { app, bar, document } = loadComposer(); bar.composePrompt(); const input = textarea(document); expect(input.getAttribute('autocorrect')).toBe('on'); expect(input.getAttribute('autocapitalize')).toBe('sentences'); expect(input.getAttribute('spellcheck')).toBe('true'); input.value = 'Please fix teh bug'; input.dispatchEvent(new document.defaultView!.Event('input', { bubbles: true })); input.value = 'Please fix the bug'; input.dispatchEvent(new document.defaultView!.Event('input', { bubbles: true })); (document.querySelector('.paste-cancel') as HTMLButtonElement).click(); bar.composePrompt(); expect(textarea(document).value).toBe('Please fix the bug'); expect(app.terminal.paste).not.toHaveBeenCalled(); expect(app._sendInputAsync).not.toHaveBeenCalled(); }); it('adopts and clears locally-buffered terminal input on open', () => { const { app, bar, document, localEcho } = loadComposer(); localEcho.pendingText = '-written prompt'; app._flushedOffsets.set('session-1', 4); app._flushedTexts.set('session-1', 'half'); bar.composePrompt(); expect(textarea(document).value).toBe('half-written prompt'); expect(app._sendInputAsync).toHaveBeenCalledWith('session-1', '\x7f'.repeat(4), { useMux: true }); expect(localEcho.clear).toHaveBeenCalledOnce(); expect(localEcho.suppressBufferDetection).toHaveBeenCalledOnce(); expect(app._flushedOffsets.has('session-1')).toBe(false); expect(app._flushedTexts.has('session-1')).toBe(false); }); it('uses Unicode code points when erasing flushed text', () => { const { app, bar, document } = loadComposer(); app._flushedOffsets.set('session-1', 3); app._flushedTexts.set('session-1', 'a😀'); bar.composePrompt(); expect(textarea(document).value).toBe('a😀'); expect(app._sendInputAsync).toHaveBeenCalledWith('session-1', '\x7f'.repeat(2), { useMux: true }); }); it('closes on tab switch and keeps drafts isolated by session', () => { const { app, bar, document } = loadComposer(); const composeButton = mountComposeButton(bar, document); bar.composePrompt(); textarea(document).value = 'first session draft'; textarea(document).dispatchEvent(new document.defaultView!.Event('input', { bubbles: true })); expect(composeButton.classList.contains('has-draft')).toBe(true); app.activeSessionId = 'session-2'; bar.refreshForActiveSession(); expect(document.querySelector('.prompt-composer-overlay')).toBeNull(); expect(composeButton.classList.contains('has-draft')).toBe(false); expect(() => bar.refreshForActiveSession()).not.toThrow(); bar.composePrompt(); expect(textarea(document).value).toBe(''); textarea(document).value = 'second session draft'; textarea(document).dispatchEvent(new document.defaultView!.Event('input', { bubbles: true })); (document.querySelector('.paste-cancel') as HTMLButtonElement).click(); app.activeSessionId = 'session-1'; bar.refreshForActiveSession(); expect(composeButton.classList.contains('has-draft')).toBe(true); expect(composeButton.getAttribute('aria-label')).toBe('Compose prompt, draft saved'); bar.composePrompt(); expect(textarea(document).value).toBe('first session draft'); }); it('drops a draft and closes its composer when the session is deleted', () => { const { bar, document } = loadComposer(); const composeButton = mountComposeButton(bar, document); bar.composePrompt(); textarea(document).value = 'temporary secret'; textarea(document).dispatchEvent(new document.defaultView!.Event('input', { bubbles: true })); expect(composeButton.classList.contains('has-draft')).toBe(true); bar.discardComposerDraft('session-1'); expect(document.querySelector('.prompt-composer-overlay')).toBeNull(); expect(composeButton.classList.contains('has-draft')).toBe(false); bar.composePrompt(); expect(textarea(document).value).toBe(''); }); it('wires session cleanup to composer draft cleanup', () => { const cleanupStart = appSource.indexOf(' _cleanupSessionData(sessionId) {'); expect(cleanupStart, '_cleanupSessionData not found — renamed?').toBeGreaterThan(-1); // The whole method, not a fixed byte window. A 1200-character slice made // this assertion depend on how much OTHER code sat above the line it cares // about, so an unrelated addition near the top of the method failed it. const cleanup = appSource.slice(cleanupStart, appSource.indexOf('\n }\n', cleanupStart)); expect(cleanup.length, 'method body did not terminate').toBeGreaterThan(0); expect(cleanup).toContain('KeyboardAccessoryBar.discardComposerDraft?.(sessionId)'); }); it('keeps Enter as a newline and sends multiline text once via bracketed paste plus delayed Enter', () => { const { app, bar, document, timers, runTimers } = loadComposer(); const composeButton = mountComposeButton(bar, document); bar.composePrompt(); const input = textarea(document); input.value = 'first line\nsecond line'; input.dispatchEvent(new document.defaultView!.Event('input', { bubbles: true })); input.dispatchEvent(new document.defaultView!.KeyboardEvent('keydown', { key: 'Enter', bubbles: true })); expect(app.terminal.paste).not.toHaveBeenCalled(); expect(app._sendInputAsync).not.toHaveBeenCalled(); (document.querySelector('.paste-send') as HTMLButtonElement).click(); expect(app.terminal.paste).not.toHaveBeenCalled(); expect(app._sendInputAsync).toHaveBeenCalledOnce(); expect(app._sendInputAsync).toHaveBeenNthCalledWith(1, 'session-1', '\x1b[200~first line\rsecond line\x1b[201~'); expect(composeButton.classList.contains('has-draft')).toBe(false); expect(timers).toContainEqual(expect.objectContaining({ delay: 120 })); runTimers(); expect(app._sendInputAsync).toHaveBeenNthCalledWith(2, 'session-1', '\r', { useMux: true }); expect(document.querySelector('.prompt-composer-overlay')).toBeNull(); bar.composePrompt(); expect(textarea(document).value).toBe(''); }); it('sends after replay resets xterm’s mirrored bracketed-paste mode', () => { const { app, bar, document, runTimers } = loadComposer(); app.terminal.modes.bracketedPasteMode = false; bar.composePrompt(); textarea(document).value = 'still\nmultiline'; textarea(document).dispatchEvent(new document.defaultView!.Event('input', { bubbles: true })); (document.querySelector('.paste-send') as HTMLButtonElement).click(); expect(app.terminal.paste).not.toHaveBeenCalled(); expect(app._sendInputAsync).toHaveBeenCalledWith('session-1', '\x1b[200~still\rmultiline\x1b[201~'); expect(document.querySelector('.prompt-composer-overlay')).toBeNull(); expect(app.showToast).not.toHaveBeenCalled(); runTimers(); expect(app._sendInputAsync).toHaveBeenLastCalledWith('session-1', '\r', { useMux: true }); }); it('releases echo passthrough after a composed prompt is queued', () => { const { app, bar, document } = loadComposer(); app._echoPassthroughSessions.add('session-1'); app._echoPassthroughSessions.add('session-2'); bar.composePrompt(); textarea(document).value = 'send from composer'; (document.querySelector('.paste-send') as HTMLButtonElement).click(); expect(app._echoPassthroughSessions.has('session-1')).toBe(false); expect(app._echoPassthroughSessions.has('session-2')).toBe(true); }); it('keeps an oversized prompt as a draft instead of queueing a rejected frame', () => { const { app, bar, document } = loadComposer(); bar.composePrompt(); const input = textarea(document); input.value = 'x'.repeat(65525); input.dispatchEvent(new document.defaultView!.Event('input', { bubbles: true })); (document.querySelector('.paste-send') as HTMLButtonElement).click(); expect(app._sendInputAsync).not.toHaveBeenCalled(); expect(app.showToast).toHaveBeenCalledWith(expect.stringContaining('too long'), 'error'); expect(document.querySelector('.prompt-composer-overlay')).not.toBeNull(); expect(bar._composerDrafts.get('session-1')).toHaveLength(65525); }); it('treats a whitespace-only draft as empty instead of submitting blank lines', () => { const { app, bar, document } = loadComposer(); bar.composePrompt(); textarea(document).value = ' \n\n '; (document.querySelector('.paste-send') as HTMLButtonElement).click(); expect(app._sendInputAsync).not.toHaveBeenCalled(); expect(document.querySelector('.prompt-composer-overlay')).not.toBeNull(); }); it('derives the prompt budget from the 64 KiB input frame minus both paste markers', () => { // ws-routes.ts drops a frame longer than MAX_INPUT_LENGTH without an ACK, // so a prompt of exactly the budget must produce a frame of exactly 64 KiB. const { app, bar, document } = loadComposer(); expect(bar._composerMaxLength).toBe(64 * 1024 - '\x1b[200~\x1b[201~'.length); bar.composePrompt(); textarea(document).value = 'y'.repeat(bar._composerMaxLength); (document.querySelector('.paste-send') as HTMLButtonElement).click(); expect(app._sendInputAsync).toHaveBeenCalledOnce(); expect((app._sendInputAsync.mock.calls[0][1] as string).length).toBe(64 * 1024); expect(app.showToast).not.toHaveBeenCalled(); }); it('preserves the draft and focuses xterm when Use terminal keyboard is chosen', () => { const { app, bar, document, localEcho, runTimers } = loadComposer(); const composeButton = mountComposeButton(bar, document); bar.composePrompt(); textarea(document).value = 'keep this'; textarea(document).dispatchEvent(new document.defaultView!.Event('input', { bubbles: true })); (document.querySelector('.prompt-composer-terminal') as HTMLButtonElement).click(); expect(app.terminal.focus).toHaveBeenCalledOnce(); expect(composeButton.classList.contains('has-draft')).toBe(true); expect(composeButton.title).toBe('Resume saved prompt draft'); runTimers(); localEcho.pendingText = '; then continue'; bar.composePrompt(); expect(textarea(document).value).toBe('keep this; then continue'); }); it('uploads images without writing into the PTY and inserts their paths into the draft', async () => { const { app, bar, document } = loadComposer(); let finishUpload!: (paths: string[]) => void; app._uploadAndInsertImages.mockImplementation( () => new Promise((resolveUpload) => (finishUpload = resolveUpload)) ); bar.composePrompt(); const input = textarea(document); input.value = 'review'; input.selectionStart = input.selectionEnd = input.value.length; input.dispatchEvent(new document.defaultView!.Event('input', { bubbles: true })); const fileInput = document.querySelector('.paste-file-input') as HTMLInputElement; const image = new document.defaultView!.File(['image'], 'shot.png', { type: 'image/png' }); Object.defineProperty(fileInput, 'files', { configurable: true, value: [image] }); fileInput.dispatchEvent(new document.defaultView!.Event('change', { bubbles: true })); expect((document.querySelector('.paste-image') as HTMLButtonElement).disabled).toBe(true); expect((document.querySelector('.paste-send') as HTMLButtonElement).disabled).toBe(true); finishUpload(['/tmp/image-one.png']); await vi.waitFor(() => expect(input.value).toBe('review /tmp/image-one.png')); expect(app._uploadAndInsertImages).toHaveBeenCalledWith([image], { insert: false }); expect((document.querySelector('.paste-send') as HTMLButtonElement).disabled).toBe(false); expect(app.terminal.paste).not.toHaveBeenCalled(); expect(app._sendInputAsync).not.toHaveBeenCalled(); }); it('finishes an upload into a reopened composer without restoring a deleted session draft', async () => { const { app, bar, document } = loadComposer(); let finishUpload!: (paths: string[]) => void; app._uploadAndInsertImages.mockImplementation( () => new Promise((resolveUpload) => (finishUpload = resolveUpload)) ); bar.composePrompt(); const fileInput = document.querySelector('.paste-file-input') as HTMLInputElement; const image = new document.defaultView!.File(['image'], 'shot.png', { type: 'image/png' }); Object.defineProperty(fileInput, 'files', { configurable: true, value: [image] }); fileInput.dispatchEvent(new document.defaultView!.Event('change', { bubbles: true })); (document.querySelector('.paste-cancel') as HTMLButtonElement).click(); bar.composePrompt(); expect((document.querySelector('.paste-send') as HTMLButtonElement).disabled).toBe(true); finishUpload(['/tmp/late-image.png']); await vi.waitFor(() => expect(textarea(document).value).toBe('/tmp/late-image.png')); expect((document.querySelector('.paste-send') as HTMLButtonElement).disabled).toBe(false); let finishDeletedUpload!: (paths: string[]) => void; app._uploadAndInsertImages.mockImplementation( () => new Promise((resolveUpload) => (finishDeletedUpload = resolveUpload)) ); const reopenedInput = document.querySelector('.paste-file-input') as HTMLInputElement; Object.defineProperty(reopenedInput, 'files', { configurable: true, value: [image] }); reopenedInput.dispatchEvent(new document.defaultView!.Event('change', { bubbles: true })); app.sessions.delete('session-1'); bar.discardComposerDraft('session-1'); finishDeletedUpload(['/tmp/deleted-session.png']); await Promise.resolve(); await Promise.resolve(); expect(bar._composerDrafts.has('session-1')).toBe(false); }); it('keeps Send disabled until every concurrent image upload finishes', async () => { const { app, bar, document } = loadComposer(); const finishUploads: Array<(paths: string[]) => void> = []; app._uploadAndInsertImages.mockImplementation( () => new Promise((resolveUpload) => finishUploads.push(resolveUpload)) ); bar.composePrompt(); const input = textarea(document); const image = new document.defaultView!.File(['image'], 'shot.png', { type: 'image/png' }); const pasteImage = () => { const item = { type: 'image/png', getAsFile: () => image }; const event = new document.defaultView!.Event('paste', { bubbles: true, cancelable: true }); Object.defineProperty(event, 'clipboardData', { value: { items: [item] } }); input.dispatchEvent(event); }; pasteImage(); pasteImage(); expect(finishUploads).toHaveLength(2); finishUploads[0](['/tmp/first.png']); await vi.waitFor(() => expect(input.value).toBe('/tmp/first.png')); expect((document.querySelector('.paste-send') as HTMLButtonElement).disabled).toBe(true); finishUploads[1](['/tmp/second.png']); await vi.waitFor(() => expect(input.value).toBe('/tmp/first.png /tmp/second.png')); expect((document.querySelector('.paste-send') as HTMLButtonElement).disabled).toBe(false); }); });