mirror of
https://github.com/Ark0N/Codeman.git
synced 2026-09-30 12:39:42 +02:00
Codeman maintainer
d8e85285c9
- styles.css: restate the composer overlay's own bottom gutter after the fold rules (the generic .paste-overlay longhand erased it: 0px flat, hinge strip replacing it folded) and subtract the fold strip from the dialog's max-height - test/foldable-layout.test.ts: simulate the cascade for .paste-overlay.prompt-composer-overlay (fails without the CSS fix); pin the palette anchor by name instead of ELEMENTS.at(-1) - keyboard-accessory.js: guard the app global in refreshForActiveSession() like the rest of the file - keyboard-accessory.js: a whitespace-only draft is empty (Send no longer submits blank lines); the text still goes out untrimmed - keyboard-accessory.js: derive _composerMaxLength and the frame refusal from one 64 KiB frame limit minus both bracketed-paste markers so they cannot drift - keyboard-accessory.js: translate the textarea placeholder and label at build time, since the DOM translator skips <textarea> subtrees - i18n.js: zh-CN entries for the composer dialog copy - docs/wiki/Mobile-Guide.md: describe the Compose key instead of a clipboard key - CLAUDE.md: a "Mobile prompt composer" paragraph after the accessory bar one - test/mobile-prompt-composer.test.ts: pin the whitespace rule and the derived budget Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> (cherry picked from commit f6725ba52da17b0bdbee8be3b5011e7cae514f69)
435 lines
19 KiB
TypeScript
435 lines
19 KiB
TypeScript
/**
|
||
* @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('<!DOCTYPE html><html><body></body></html>', { 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<string, number>(),
|
||
_flushedTexts: new Map<string, string>(),
|
||
_echoPassthroughSessions: new Set<string>(),
|
||
_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) {');
|
||
const cleanup = appSource.slice(cleanupStart, cleanupStart + 1200);
|
||
|
||
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<string[]>((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<string[]>((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<string[]>((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<string[]>((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);
|
||
});
|
||
});
|