feat(predictive-echo): PredictiveEchoAddon + Layers 1-3 test suites (0.2.0)

Mosh-style write-through prediction: the consumer sends every keystroke
unchanged; the addon paints predicted glyphs and reconciles against the
parsed buffer. Confirm = cell match + cursor advance (placeholder-safe,
repaint-safe); two-pass mismatch cascade with neutral blanks (measured:
codex clears its placeholder on first echo); TTL bound; baseY-based line
reads; scroll/resize/off-row clears. Zero edits to zerolag-input-addon.ts.

Tests: 30 addon-law specs + renderer geometry (fake performance clock for
TTL/grace), 6 replay suites running the real algorithm through a real
@xterm/headless parser fed by the recorded codex fixtures, and a
500-iteration seeded fuzz with per-op span/record + grid invariants.
227 total, the pre-existing 175 untouched.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Codeman maintainer
2026-08-09 04:25:24 +02:00
parent 5aa59c70cc
commit a30524060a
17 changed files with 2227 additions and 459 deletions
@@ -11,37 +11,36 @@ import type { XtermTerminal, CellDimensions } from './types.js';
* unavailable.
*/
export function getCellDimensions(terminal: XtermTerminal): CellDimensions | null {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const t = terminal as any;
const dpr = typeof devicePixelRatio === 'number' && devicePixelRatio > 0
? devicePixelRatio : 1;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const t = terminal as any;
const dpr = typeof devicePixelRatio === 'number' && devicePixelRatio > 0 ? devicePixelRatio : 1;
// Try v7+ public API first
if (t.dimensions?.css?.cell) {
const cellH = t.dimensions.css.cell.height;
return {
width: t.dimensions.css.cell.width,
height: cellH,
charTop: (t.dimensions?.device?.char?.top ?? 0) / dpr,
charHeight: (t.dimensions?.device?.char?.height ?? (cellH * dpr)) / dpr,
};
// Try v7+ public API first
if (t.dimensions?.css?.cell) {
const cellH = t.dimensions.css.cell.height;
return {
width: t.dimensions.css.cell.width,
height: cellH,
charTop: (t.dimensions?.device?.char?.top ?? 0) / dpr,
charHeight: (t.dimensions?.device?.char?.height ?? cellH * dpr) / dpr,
};
}
// Fall back to v5 private API
try {
const dims = t._core?._renderService?.dimensions;
if (dims?.css?.cell) {
const cellH = dims.css.cell.height;
return {
width: dims.css.cell.width,
height: cellH,
charTop: (dims.device?.char?.top ?? 0) / dpr,
charHeight: (dims.device?.char?.height ?? cellH * dpr) / dpr,
};
}
} catch {
// Private API may throw in some environments
}
// Fall back to v5 private API
try {
const dims = t._core?._renderService?.dimensions;
if (dims?.css?.cell) {
const cellH = dims.css.cell.height;
return {
width: dims.css.cell.width,
height: cellH,
charTop: (dims.device?.char?.top ?? 0) / dpr,
charHeight: (dims.device?.char?.height ?? (cellH * dpr)) / dpr,
};
}
} catch {
// Private API may throw in some environments
}
return null;
return null;
}
+10 -7
View File
@@ -1,10 +1,13 @@
export { ZerolagInputAddon } from './zerolag-input-addon.js';
export { PredictiveEchoAddon } from './predictive-echo-addon.js';
export { charCellWidth, stringCellWidth } from './overlay-renderer.js';
export type {
XtermTerminal,
XtermAddon,
ZerolagInputOptions,
ZerolagInputState,
PromptFinder,
PromptPosition,
CellDimensions,
XtermTerminal,
XtermAddon,
ZerolagInputOptions,
ZerolagInputState,
PromptFinder,
PromptPosition,
CellDimensions,
} from './types.js';
export type { PredictiveEchoOptions, PredictionState } from './predictive-echo-addon.js';
@@ -0,0 +1,460 @@
/**
* PredictiveEchoAddon: mosh-style write-through local echo.
*
* The consumer sends every keystroke to the PTY unchanged (write-through);
* this addon simultaneously paints the predicted glyph at the predicted cell.
* When the real echo lands, the prediction is confirmed and its span removed
* (an invisible swap: identical glyph beneath). Mispredictions self-heal via
* a mismatch cascade and a TTL. Everything here is visual-only: no method
* gates, delays, or rewrites what the consumer sends.
*
* Reconciliation reads the parsed terminal BUFFER (cells after xterm's parser
* ran), never the raw output stream. Full-line redraws, ECH-based gap
* painting, and tmux's in-place deltas all converge to the same cells; stream
* matching cannot survive them (see docs/local-echo-overlay-plan.md's
* "What NOT to Do" in the consuming repo).
*
* Coordinate base: xterm's `cursorY` is relative to `baseY`, so the absolute
* buffer line for a viewport row is `baseY + row`. `viewportY` would only
* coincide while scrolled to the bottom; this file never relies on that.
*/
import { getCellDimensions } from './cell-dimensions.js';
import { charCellWidth } from './overlay-renderer.js';
import { addPredictionSpan, clearAllSpans, removePredictionSpan } from './prediction-renderer.js';
import type { FontStyle, XtermAddon, XtermTerminal } from './types.js';
export interface PredictiveEchoOptions {
/** Z-index of the span container. @default 7 (same layer as the buffer overlay) */
zIndex?: number;
/** Render predicted glyphs underlined (visual hedge on unreliable links). @default false */
underlinePredictions?: boolean;
/** Predicted glyph color. @default theme foreground / computed .xterm-rows color */
foregroundColor?: string;
/** Predicted glyph background. @default theme background */
backgroundColor?: string;
/** Drop predictions older than this. @default 1000 */
ttlMs?: number;
/** Maximum outstanding predictions per run. @default 32 */
maxPending?: number;
/** How long the cursor may sit off the anchor row before predictions clear. @default 150 */
cursorGraceMs?: number;
/** Suppress predictions that would land within this many cells of the right edge. @default 4 */
edgeMarginCells?: number;
/** Gate: return false to suppress prediction (e.g. cursor not on a composer row). */
predictWhen?: (terminal: XtermTerminal) => boolean;
}
export interface PredictionState {
outstanding: number;
confirmedTotal: number;
droppedTotal: number;
anchor: { row: number; col: number } | null;
}
interface PredictionRecord {
seq: number;
char: string;
/** Cells this glyph occupies. */
width: 1 | 2;
/** Cumulative cell offset from the anchor column BEFORE this char. */
offsetCells: number;
/** Cell content at predict time, '' normalized to ' '. */
snapshot: string;
sentAt: number;
/** Consecutive reconcile passes that saw foreign non-blank content. */
mismatches: number;
}
const DEFAULT_OPTIONS = {
zIndex: 7,
underlinePredictions: false,
ttlMs: 1000,
maxPending: 32,
cursorGraceMs: 150,
edgeMarginCells: 4,
} as const;
const DEFAULT_BG = '#000000';
const DEFAULT_FG = '#ffffff';
export class PredictiveEchoAddon implements XtermAddon {
private _terminal: XtermTerminal | null = null;
private _container: HTMLDivElement | null = null;
private _spans = new Map<number, HTMLSpanElement>();
private _outstanding: PredictionRecord[] = [];
private _anchor: { row: number; col: number } | null = null;
private _cursorOffRowSince: number | null = null;
private _seq = 0;
private _confirmedTotal = 0;
private _droppedTotal = 0;
private _ttlTimer: ReturnType<typeof setTimeout> | null = null;
private _reconcileScheduled = false;
private _disposables: Array<{ dispose(): void }> = [];
private _predictWhen: ((terminal: XtermTerminal) => boolean) | null;
private _options: Required<Omit<PredictiveEchoOptions, 'foregroundColor' | 'backgroundColor' | 'predictWhen'>> &
Pick<PredictiveEchoOptions, 'foregroundColor' | 'backgroundColor'>;
private _font: FontStyle = {
fontFamily: 'monospace',
fontSize: '14px',
fontWeight: 'normal',
color: DEFAULT_FG,
backgroundColor: DEFAULT_BG,
letterSpacing: '',
};
constructor(options?: PredictiveEchoOptions) {
this._options = {
zIndex: options?.zIndex ?? DEFAULT_OPTIONS.zIndex,
underlinePredictions: options?.underlinePredictions ?? DEFAULT_OPTIONS.underlinePredictions,
ttlMs: options?.ttlMs ?? DEFAULT_OPTIONS.ttlMs,
maxPending: options?.maxPending ?? DEFAULT_OPTIONS.maxPending,
cursorGraceMs: options?.cursorGraceMs ?? DEFAULT_OPTIONS.cursorGraceMs,
edgeMarginCells: options?.edgeMarginCells ?? DEFAULT_OPTIONS.edgeMarginCells,
foregroundColor: options?.foregroundColor,
backgroundColor: options?.backgroundColor,
};
this._predictWhen = options?.predictWhen ?? null;
}
// ─── Lifecycle ────────────────────────────────────────────────────
/** Called by `terminal.loadAddon()`. Do not call directly. */
activate(terminal: XtermTerminal): void {
this._terminal = terminal;
this._container = document.createElement('div');
this._container.setAttribute('data-predictive-echo', '');
this._container.style.cssText = `position:absolute;left:0;top:0;z-index:${this._options.zIndex};pointer-events:none`;
const screen = terminal.element?.querySelector('.xterm-screen');
if (screen) screen.appendChild(this._container);
this._readFontStyle();
// Debounced post-parse reconcile: xterm fires onWriteParsed after the
// parser finishes a write chunk, so buffer reads see consistent state.
// The microtask coalesces multi-chunk bursts into one pass.
if (typeof terminal.onWriteParsed === 'function') {
try {
this._disposables.push(
terminal.onWriteParsed(() => {
if (this._reconcileScheduled) return;
this._reconcileScheduled = true;
queueMicrotask(() => {
this._reconcileScheduled = false;
this._safeReconcile();
});
})
);
} catch {
/* consumers without a working emitter fall back to manual reconcile() */
}
}
if (typeof terminal.onResize === 'function') {
try {
this._disposables.push(terminal.onResize(() => this.clearPredictions()));
} catch {
/* ignore */
}
}
}
dispose(): void {
this.clearPredictions();
for (const d of this._disposables) {
try {
d.dispose();
} catch {
/* ignore */
}
}
this._disposables = [];
this._container?.remove();
this._container = null;
this._terminal = null;
}
// ─── Public API ───────────────────────────────────────────────────
/**
* Predict a single typed character at the current insertion point.
* Returns false when suppressed; the consumer sends the keystroke to the
* PTY either way (the return value is informational, never a send gate).
*/
predictChar(ch: string): boolean {
try {
this._reconcile();
const t = this._terminal;
if (!t || !this._container) return false;
const dims = getCellDimensions(t);
if (!dims) return false;
const buf = t.buffer.active;
if (typeof buf.cursorX !== 'number' || typeof buf.cursorY !== 'number') return false;
if (buf.viewportY !== buf.baseY) return false;
if (this._predictWhen && this._predictWhen(t) === false) return false;
const cps = Array.from(ch);
if (cps.length !== 1) return false;
const cp = cps[0].codePointAt(0)!;
if (cp < 0x20 || cp === 0x7f) return false;
const w = charCellWidth(t, cps[0]);
if (w !== 1 && w !== 2) return false;
if (w === 2 && !this._hasGetCell()) return false; // ASCII fallback misaligns on wide cols
if (this._outstanding.length >= this._options.maxPending) return false;
if (this._outstanding.length === 0) {
this._anchor = { row: buf.cursorY, col: buf.cursorX };
this._cursorOffRowSince = null;
}
const anchor = this._anchor!;
const last = this._outstanding[this._outstanding.length - 1];
const offset = last ? last.offsetCells + last.width : 0;
const col = anchor.col + offset;
if (col + w > t.cols - this._options.edgeMarginCells) return false;
const rec: PredictionRecord = {
seq: this._seq++,
char: cps[0],
width: w,
offsetCells: offset,
snapshot: this._readCell(anchor.row, col),
sentAt: performance.now(),
mismatches: 0,
};
this._outstanding.push(rec);
addPredictionSpan(this._container, this._spans, {
seq: rec.seq,
row: anchor.row,
col,
char: rec.char,
width: w,
dims,
font: this._font,
underline: this._options.underlinePredictions,
});
this._armTtl();
return true;
} catch {
return false;
}
}
/**
* Pop the newest outstanding prediction (visual only). Returns false when
* none are outstanding. The consumer forwards \x7f UNCONDITIONALLY either
* way; deleting already-echoed text renders at RTT.
*/
predictBackspace(): boolean {
try {
const rec = this._outstanding.pop();
if (!rec) return false;
removePredictionSpan(this._spans, rec.seq);
if (this._outstanding.length === 0) this._resetRun();
return true;
} catch {
return false;
}
}
/** Drop every outstanding prediction and its spans. */
clearPredictions(): void {
try {
this._droppedTotal += this._outstanding.length;
this._outstanding = [];
clearAllSpans(this._spans);
this._resetRun();
} catch {
/* ignore */
}
}
/** Manual reconcile pass, for consumers without onWriteParsed. */
reconcile(): void {
this._safeReconcile();
}
/** Swap the prediction gate at runtime (mirrors the buffer addon's setPrompt). */
setPredictWhen(fn: ((terminal: XtermTerminal) => boolean) | null): void {
this._predictWhen = fn;
}
/** Re-read font/theme (call after skin or font-size changes). */
refreshFont(): void {
this._readFontStyle();
}
get hasPredictions(): boolean {
return this._outstanding.length > 0;
}
get state(): PredictionState {
return {
outstanding: this._outstanding.length,
confirmedTotal: this._confirmedTotal,
droppedTotal: this._droppedTotal,
anchor: this._anchor ? { ...this._anchor } : null,
};
}
// ─── Reconciliation ───────────────────────────────────────────────
private _safeReconcile(): void {
try {
this._reconcile();
} catch {
/* predictions may degrade, never break input */
}
}
private _reconcile(): void {
const t = this._terminal;
if (!t) return;
if (this._outstanding.length === 0) return; // streaming cost: one boolean
const buf = t.buffer.active;
if (buf.viewportY !== buf.baseY) {
this.clearPredictions(); // user scrolled up
return;
}
if (typeof buf.cursorX !== 'number' || typeof buf.cursorY !== 'number') return; // TTL will clean
const anchor = this._anchor!;
const now = performance.now();
// Off-row grace: transient cursor excursions (repaints park the cursor
// elsewhere mid-frame) are tolerated; a sustained move means the composer
// relocated or the user navigated, so predictions are stale.
if (buf.cursorY !== anchor.row) {
this._cursorOffRowSince ??= now;
if (now - this._cursorOffRowSince > this._options.cursorGraceMs) {
this.clearPredictions();
return;
}
} else {
this._cursorOffRowSince = null;
}
// Confirm loop: PREFIX-ONLY, and only with the cursor advanced past the
// record. Cell match alone is not enough: the predicted char may equal
// pre-existing content (placeholder glyphs), and an identical in-place
// tmux repaint must be a no-op (cells match snapshots, cursor unmoved).
while (this._outstanding.length > 0) {
const rec = this._outstanding[0];
const cell = this._readCell(anchor.row, anchor.col + rec.offsetCells);
if (cell === rec.char && buf.cursorY === anchor.row && buf.cursorX >= anchor.col + rec.offsetCells + rec.width) {
this._outstanding.shift();
removePredictionSpan(this._spans, rec.seq);
this._confirmedTotal++;
} else {
break;
}
}
// Mismatch scan (two-pass rule): a half-parsed row on pass N is fully
// redrawn a few ms later, so only content foreign on TWO consecutive
// passes cascades. Blank cells are NEUTRAL, not foreign: codex clears its
// placeholder on the first echo, and the blanks left under later
// predictions are what "not yet echoed" looks like, not evidence of a
// redraw (measured 2026-08-09; without this, fast typing over the
// placeholder cascades exactly when RTT is high). TTL still bounds them.
let dropFrom = -1;
for (let i = 0; i < this._outstanding.length; i++) {
const rec = this._outstanding[i];
const cell = this._readCell(anchor.row, anchor.col + rec.offsetCells);
if (cell !== rec.snapshot && cell !== rec.char && cell !== ' ') {
rec.mismatches++;
if (rec.mismatches >= 2) {
dropFrom = i;
break;
}
} else {
rec.mismatches = 0;
}
}
if (dropFrom !== -1) this._dropFrom(dropFrom);
// TTL: the first stale record drops itself and everything after it.
for (let i = 0; i < this._outstanding.length; i++) {
if (now - this._outstanding[i].sentAt > this._options.ttlMs) {
this._dropFrom(i);
break;
}
}
if (this._outstanding.length === 0) {
this._resetRun();
} else {
this._armTtl();
}
}
private _dropFrom(index: number): void {
const dropped = this._outstanding.splice(index);
for (const rec of dropped) removePredictionSpan(this._spans, rec.seq);
this._droppedTotal += dropped.length;
}
private _resetRun(): void {
this._anchor = null;
this._cursorOffRowSince = null;
if (this._ttlTimer !== null) {
clearTimeout(this._ttlTimer);
this._ttlTimer = null;
}
}
private _armTtl(): void {
if (this._ttlTimer !== null) return;
const oldest = this._outstanding[0];
if (!oldest) return;
const delay = Math.max(0, oldest.sentAt + this._options.ttlMs - performance.now()) + 1;
this._ttlTimer = setTimeout(() => {
this._ttlTimer = null;
this._safeReconcile();
this._armTtl();
}, delay);
}
// ─── Cell access ──────────────────────────────────────────────────
private _hasGetCell(): boolean {
const buf = this._terminal?.buffer.active;
if (!buf) return false;
const line = buf.getLine(buf.baseY + (buf.cursorY ?? 0));
return typeof line?.getCell === 'function';
}
/** Read one cell's chars at (viewport-relative row, col); '' -> ' '. */
private _readCell(row: number, col: number): string {
const buf = this._terminal!.buffer.active;
const line = buf.getLine(buf.baseY + row);
if (!line) return ' ';
if (typeof line.getCell === 'function') {
const chars = line.getCell(col)?.getChars() ?? '';
return chars === '' ? ' ' : chars;
}
// ASCII fallback: code-unit index, misaligns after wide columns, which is
// why width-2 predictions are suppressed without getCell.
const text = line.translateToString(true);
return text[col] ?? ' ';
}
// ─── Font ─────────────────────────────────────────────────────────
/** Same recipe as the buffer addon's _cacheFont (kept private on purpose:
* zerolag-input-addon.ts must stay untouched by this feature). */
private _readFontStyle(): void {
const t = this._terminal;
if (!t) return;
this._font.fontFamily = t.options.fontFamily || 'monospace';
this._font.fontSize = (t.options.fontSize || 14) + 'px';
this._font.fontWeight = String(t.options.fontWeight || 'normal');
this._font.backgroundColor = this._options.backgroundColor ?? t.options.theme?.background ?? DEFAULT_BG;
this._font.color = this._options.foregroundColor ?? t.options.theme?.foreground ?? DEFAULT_FG;
this._font.letterSpacing = '';
const rows = t.element?.querySelector('.xterm-rows');
if (rows) {
const cs = getComputedStyle(rows);
this._font.letterSpacing = cs.letterSpacing;
if (!this._options.foregroundColor && cs.color) this._font.color = cs.color;
}
}
}
@@ -6,55 +6,50 @@ import type { XtermTerminal, PromptFinder, PromptPosition } from './types.js';
*
* @returns The prompt position (viewport-relative), or `null` if not found.
*/
export function findPrompt(
terminal: XtermTerminal,
finder: PromptFinder,
): PromptPosition | null {
try {
const buffer = terminal.buffer.active;
const viewportTop = buffer.viewportY;
export function findPrompt(terminal: XtermTerminal, finder: PromptFinder): PromptPosition | null {
try {
const buffer = terminal.buffer.active;
const viewportTop = buffer.viewportY;
switch (finder.type) {
case 'character': {
for (let row = terminal.rows - 1; row >= 0; row--) {
const line = buffer.getLine(viewportTop + row);
if (!line) continue;
const text = line.translateToString(true);
const idx = text.lastIndexOf(finder.char);
if (idx >= 0) return { row, col: idx };
}
return null;
}
case 'regex': {
// Create a fresh non-global regex to avoid lastIndex mutation
// and ensure .match() returns a single result with .index
const pattern = finder.pattern;
const safePattern = pattern.global
? new RegExp(pattern.source, pattern.flags.replace('g', ''))
: pattern;
for (let row = terminal.rows - 1; row >= 0; row--) {
const line = buffer.getLine(viewportTop + row);
if (!line) continue;
const text = line.translateToString(true);
const match = text.match(safePattern);
if (match) {
const col = match.index ?? 0;
return { row, col };
}
}
return null;
}
case 'custom':
return finder.find(terminal);
default:
return null;
switch (finder.type) {
case 'character': {
for (let row = terminal.rows - 1; row >= 0; row--) {
const line = buffer.getLine(viewportTop + row);
if (!line) continue;
const text = line.translateToString(true);
const idx = text.lastIndexOf(finder.char);
if (idx >= 0) return { row, col: idx };
}
} catch {
return null;
}
case 'regex': {
// Create a fresh non-global regex to avoid lastIndex mutation
// and ensure .match() returns a single result with .index
const pattern = finder.pattern;
const safePattern = pattern.global ? new RegExp(pattern.source, pattern.flags.replace('g', '')) : pattern;
for (let row = terminal.rows - 1; row >= 0; row--) {
const line = buffer.getLine(viewportTop + row);
if (!line) continue;
const text = line.translateToString(true);
const match = text.match(safePattern);
if (match) {
const col = match.index ?? 0;
return { row, col };
}
}
return null;
}
case 'custom':
return finder.find(terminal);
default:
return null;
}
} catch {
return null;
}
}
/**
@@ -65,19 +60,15 @@ export function findPrompt(
* @param offset - Characters to skip after the prompt marker (e.g., 2 for "> ")
* @returns The text after the prompt, trimmed. Empty string if nothing found.
*/
export function readTextAfterPrompt(
terminal: XtermTerminal,
prompt: PromptPosition,
offset: number,
): string {
try {
const buffer = terminal.buffer.active;
const absRow = buffer.viewportY + prompt.row;
const line = buffer.getLine(absRow);
if (!line) return '';
const lineText = line.translateToString(true);
return lineText.slice(prompt.col + offset).trimEnd();
} catch {
return '';
}
export function readTextAfterPrompt(terminal: XtermTerminal, prompt: PromptPosition, offset: number): string {
try {
const buffer = terminal.buffer.active;
const absRow = buffer.viewportY + prompt.row;
const line = buffer.getLine(absRow);
if (!line) return '';
const lineText = line.translateToString(true);
return lineText.slice(prompt.col + offset).trimEnd();
} catch {
return '';
}
}