mirror of
https://github.com/getpaseo/paseo.git
synced 2026-11-01 06:02:56 +00:00
Fix terminal emoji size and alignment (#8375)
* fix(terminal): render emoji at their intended width The native grid scales glyphs to the columns assigned by the terminal buffer. Use grapheme widths across current hosts and clients so emoji fit their slots and replay preserves cursor positions. * fix(terminal): make width regression test portable * test(terminal): wait for replay fixture output to finish A trailing newline could arrive after the readiness marker and change the retained history between replay captures.
This commit is contained in:
Mohamed Boudra
@@ -1,5 +1,6 @@
|
||||
import assert from "node:assert/strict";
|
||||
import { writeFileSync } from "node:fs";
|
||||
import { UnicodeGraphemesAddon } from "@xterm/addon-unicode-graphemes";
|
||||
import xterm from "@xterm/headless";
|
||||
import { PNG } from "pngjs";
|
||||
import { ACCENT, fixtureLines, fixtureOutput, RULER_CELLS, SELECT_LINE } from "./fixture.mjs";
|
||||
@@ -82,6 +83,8 @@ async function fixtureTerminal(size) {
|
||||
rows: size.rows,
|
||||
allowProposedApi: true,
|
||||
});
|
||||
// The app's buffer uses grapheme widths; the expected cells must too.
|
||||
terminal.loadAddon(new UnicodeGraphemesAddon());
|
||||
await new Promise((done) =>
|
||||
terminal.write(fixtureOutput(size.columns).replaceAll("\n", "\r\n"), done),
|
||||
);
|
||||
|
||||
+10
-10
@@ -1,21 +1,21 @@
|
||||
[
|
||||
{
|
||||
"output": "स्ते",
|
||||
"row": "2,1,2,1,1,1,1,1,1,1,1,1,1,1,1,1;8,4294638330,0,0;स्ते ",
|
||||
"clusterStarts": [0, 2, 3, 4, 5, 6, 7],
|
||||
"contrastStarts": [0, 1, 2, 3, 4, 5, 6, 7]
|
||||
"row": "4,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1;8,4294638330,0,0;स्ते ",
|
||||
"clusterStarts": [0, 1, 2, 3, 4, 5, 6, 7],
|
||||
"contrastStarts": [0, 2, 3, 4, 5, 6, 7]
|
||||
},
|
||||
{
|
||||
"output": "क्ष",
|
||||
"row": "2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1;8,4294638330,0,0;क्ष ",
|
||||
"clusterStarts": [0, 2, 3, 4, 5, 6, 7],
|
||||
"contrastStarts": [0, 1, 2, 3, 4, 5, 6, 7]
|
||||
"row": "3,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1;8,4294638330,0,0;क्ष ",
|
||||
"clusterStarts": [0, 1, 2, 3, 4, 5, 6, 7],
|
||||
"contrastStarts": [0, 2, 3, 4, 5, 6, 7]
|
||||
},
|
||||
{
|
||||
"output": "নক্ষত্র",
|
||||
"row": "1,1,2,1,1,1,2,1,1,1,1,1,1,1,1,1;8,4294638330,0,0;নক্ষত্র ",
|
||||
"clusterStarts": [0, 1, 3, 5, 6, 7],
|
||||
"contrastStarts": [0, 1, 2, 3, 4, 5, 6, 7]
|
||||
"row": "1,1,3,1,3,1,1,1,1,1,1,1,1,1,1,1;8,4294638330,0,0;নক্ষত্র ",
|
||||
"clusterStarts": [0, 1, 2, 3, 4, 5, 6, 7],
|
||||
"contrastStarts": [0, 2, 3, 4, 5, 6, 7]
|
||||
},
|
||||
{
|
||||
"output": "क्अ",
|
||||
@@ -31,7 +31,7 @@
|
||||
},
|
||||
{
|
||||
"output": "अ्क",
|
||||
"row": "2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1;8,4294638330,0,0;अ्क ",
|
||||
"row": "3,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1;8,4294638330,0,0;अ्क ",
|
||||
"clusterStarts": [0, 1, 2, 3, 4, 5, 6, 7],
|
||||
"contrastStarts": [0, 2, 3, 4, 5, 6, 7]
|
||||
}
|
||||
|
||||
-8
@@ -1,6 +1,5 @@
|
||||
package sh.paseo.terminal
|
||||
|
||||
import android.os.Build
|
||||
import android.graphics.Bitmap
|
||||
import android.graphics.Canvas
|
||||
import android.graphics.Paint
|
||||
@@ -44,13 +43,6 @@ class TerminalRowLayoutTest {
|
||||
val output = row.getString("output")
|
||||
val (toExpected, toContrast) = difference(drawn, expected) to difference(drawn, contrast)
|
||||
Log.i("TerminalRowLayoutTest", "$output expected=$toExpected contrast=$toContrast")
|
||||
// Android 10's platform ICU splits this conjunct. Keep its observed raster baseline
|
||||
// explicit rather than claiming this supported OS passes the modern grapheme corpus.
|
||||
if (Build.VERSION.SDK_INT == 29 && output == "स्ते") {
|
||||
assertTrue("Android 10 unexpectedly matches modern conjunct clustering", toExpected > MATCH_TOLERANCE)
|
||||
assertTrue("Android 10 split-conjunct baseline changed", toContrast <= MATCH_TOLERANCE)
|
||||
continue
|
||||
}
|
||||
assertTrue("$output differs from its grapheme clusters by $toExpected", toExpected <= MATCH_TOLERANCE)
|
||||
assertTrue("$output also matches the wrong clusters", toContrast > MATCH_TOLERANCE)
|
||||
}
|
||||
|
||||
@@ -71,13 +71,14 @@
|
||||
"@tanstack/react-virtual": "^3.13.21",
|
||||
"@xterm/addon-clipboard": "^0.3.0-beta.213",
|
||||
"@xterm/addon-fit": "^0.12.0-beta.213",
|
||||
"@xterm/addon-image": "^0.10.0-beta.213",
|
||||
"@xterm/addon-image": "0.10.0-beta.331",
|
||||
"@xterm/addon-ligatures": "^0.11.0-beta.213",
|
||||
"@xterm/addon-search": "^0.17.0-beta.213",
|
||||
"@xterm/addon-unicode-graphemes": "0.5.0-beta.330",
|
||||
"@xterm/addon-unicode11": "^0.10.0-beta.213",
|
||||
"@xterm/addon-web-links": "^0.13.0-beta.213",
|
||||
"@xterm/addon-webgl": "0.20.0-beta.291",
|
||||
"@xterm/xterm": "6.1.0-beta.292",
|
||||
"@xterm/addon-webgl": "0.20.0-beta.329",
|
||||
"@xterm/xterm": "6.1.0-beta.336",
|
||||
"buffer": "^6.0.3",
|
||||
"expo": "~57.0.30",
|
||||
"expo-asset": "~57.0.20",
|
||||
@@ -155,7 +156,7 @@
|
||||
"@vitest/browser": "^4.1.7",
|
||||
"@vitest/browser-playwright": "^4.1.7",
|
||||
"@xterm/addon-serialize": "0.14.0",
|
||||
"@xterm/headless": "^6.1.0-beta.213",
|
||||
"@xterm/headless": "6.1.0-beta.334",
|
||||
"babel-preset-expo": "~57.0.16",
|
||||
"dotenv": "^17.2.3",
|
||||
"eas-cli": "^16.24.1",
|
||||
|
||||
@@ -12,6 +12,7 @@ import type {
|
||||
} from "../terminal/local-links/terminal-local-link-provider";
|
||||
import type { TerminalClipboardWriter } from "../terminal/native-renderer/terminal-selection";
|
||||
import type { TerminalFile } from "../terminal/file-paste";
|
||||
import type { TerminalCharacterWidths } from "../terminal/character-widths";
|
||||
import type { PendingTerminalModifiers } from "../utils/terminal-keys";
|
||||
import type { TerminalRendererReadyChange } from "../utils/terminal-renderer-readiness";
|
||||
|
||||
@@ -32,6 +33,7 @@ export interface TerminalEmulatorProps {
|
||||
ref: Ref<TerminalEmulatorHandle>;
|
||||
streamKey: string;
|
||||
supportsTerminalInputModeReplay: boolean;
|
||||
characterWidths: TerminalCharacterWidths;
|
||||
testId?: string;
|
||||
xtermTheme?: ITheme;
|
||||
scrollbackLines: number;
|
||||
|
||||
@@ -93,6 +93,7 @@ function NativeTerminalEmulator({
|
||||
testId = "terminal-surface",
|
||||
xtermTheme = DEFAULT_XTERM_THEME,
|
||||
scrollbackLines,
|
||||
characterWidths,
|
||||
fontFamily,
|
||||
fontSize,
|
||||
keyboardInset = 0,
|
||||
@@ -373,6 +374,7 @@ function NativeTerminalEmulator({
|
||||
rows: size.rows,
|
||||
cols: size.cols,
|
||||
scrollbackLines,
|
||||
characterWidths,
|
||||
});
|
||||
terminalRef.current = terminal;
|
||||
screenModelRef.current = createNativeTerminalScreenModel({ terminal });
|
||||
@@ -387,6 +389,7 @@ function NativeTerminalEmulator({
|
||||
resetInputModeTracker,
|
||||
resolveTerminalScreen,
|
||||
scrollbackLines,
|
||||
characterWidths,
|
||||
clearSelection,
|
||||
]);
|
||||
|
||||
|
||||
@@ -27,6 +27,7 @@ import {
|
||||
} from "../terminal/runtime/terminal-emulator-runtime";
|
||||
import { encodeTerminalPaste } from "../terminal/runtime/terminal-paste";
|
||||
import type { TerminalFile } from "../terminal/file-paste";
|
||||
import type { TerminalCharacterWidths } from "../terminal/character-widths";
|
||||
import type {
|
||||
TerminalLocalFileLinkSource,
|
||||
TerminalLocalFileLinkTarget,
|
||||
@@ -96,6 +97,7 @@ interface TerminalEmulatorProps {
|
||||
ref: Ref<TerminalEmulatorHandle>;
|
||||
streamKey: string;
|
||||
supportsTerminalInputModeReplay: boolean;
|
||||
characterWidths: TerminalCharacterWidths;
|
||||
testId?: string;
|
||||
xtermTheme?: ITheme;
|
||||
scrollbackLines: number;
|
||||
@@ -154,6 +156,7 @@ export default function TerminalEmulator({
|
||||
cursor: "#e6e6e6",
|
||||
},
|
||||
scrollbackLines,
|
||||
characterWidths,
|
||||
fontFamily,
|
||||
fontSize,
|
||||
swipeGesturesEnabled = false,
|
||||
@@ -183,6 +186,8 @@ export default function TerminalEmulator({
|
||||
const fontSizeRef = useRef(fontSize);
|
||||
const scrollbackLinesRef = useRef(scrollbackLines);
|
||||
scrollbackLinesRef.current = scrollbackLines;
|
||||
const characterWidthsRef = useRef(characterWidths);
|
||||
characterWidthsRef.current = characterWidths;
|
||||
fontFamilyRef.current = fontFamily;
|
||||
fontSizeRef.current = fontSize;
|
||||
const themeKey = useMemo(() => buildXtermThemeKey(xtermTheme), [xtermTheme]);
|
||||
@@ -315,6 +320,10 @@ export default function TerminalEmulator({
|
||||
runtimeRef.current?.setScrollback({ lines: scrollbackLines });
|
||||
}, [scrollbackLines]);
|
||||
|
||||
useEffect(() => {
|
||||
runtimeRef.current?.setCharacterWidths({ widths: characterWidths });
|
||||
}, [characterWidths]);
|
||||
|
||||
useEffect(() => {
|
||||
const root = rootRef.current;
|
||||
if (!root || !swipeGesturesEnabled) {
|
||||
@@ -447,6 +456,7 @@ export default function TerminalEmulator({
|
||||
},
|
||||
});
|
||||
runtime.setPendingModifiers({ pendingModifiers: pendingModifiersRef.current });
|
||||
runtime.setCharacterWidths({ widths: characterWidthsRef.current });
|
||||
runtime.mount({
|
||||
root,
|
||||
host,
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { TerminalFind, type TerminalPaneFindHandle } from "@/terminal/find";
|
||||
import type { TerminalFindResult } from "@/terminal/runtime/terminal-emulator-runtime";
|
||||
import type { TerminalCharacterWidths } from "@/terminal/character-widths";
|
||||
import { LoadingSpinner } from "@/components/ui/loading-spinner";
|
||||
import { useRetainedPanelActive } from "@/components/retained-panel";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
@@ -304,6 +305,11 @@ export function TerminalPane({
|
||||
const supportsTerminalSizeOwnership = useSessionStore(
|
||||
(state) => state.sessions[serverId]?.serverInfo?.features?.["terminal-size-ownership"] === true,
|
||||
);
|
||||
const characterWidths: TerminalCharacterWidths = useSessionStore((state) =>
|
||||
state.sessions[serverId]?.serverInfo?.features?.["terminal-grapheme-widths"] === true
|
||||
? "graphemes"
|
||||
: "legacy",
|
||||
);
|
||||
const setFocusedTerminalId = useSessionStore((state) => state.setFocusedTerminalId);
|
||||
|
||||
const scopeKey = useMemo(() => terminalScopeKey({ serverId, cwd }), [serverId, cwd]);
|
||||
@@ -1171,6 +1177,7 @@ export function TerminalPane({
|
||||
dom={TERMINAL_EMULATOR_DOM_PROPS}
|
||||
streamKey={terminalStreamKey}
|
||||
supportsTerminalInputModeReplay={supportsTerminalInputModeReplay}
|
||||
characterWidths={characterWidths}
|
||||
testId="terminal-surface"
|
||||
xtermTheme={xtermTheme}
|
||||
scrollbackLines={settings.terminalScrollbackLines}
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* The table a terminal buffer measures characters with.
|
||||
*
|
||||
* The daemon answers cursor reports and replays the screen from its own buffer,
|
||||
* so the app measures with the table the host advertises. `graphemes` gives each
|
||||
* emoji cluster one two-column cell. `legacy` is what each renderer used before
|
||||
* hosts advertised grapheme widths. See docs/terminal-rendering.md.
|
||||
*/
|
||||
export type TerminalCharacterWidths = "graphemes" | "legacy";
|
||||
@@ -159,4 +159,52 @@ describe("native headless terminal state", () => {
|
||||
{ char: "B", width: 1 },
|
||||
]);
|
||||
});
|
||||
|
||||
// Apple Color Emoji and Noto Color Emoji are two cells wide. The native
|
||||
// renderer scales a cluster to its column slot, so a one-column emoji
|
||||
// renders at half size. Each emoji cluster must occupy one wide cell.
|
||||
test.each([
|
||||
["presentation emoji", "😀"],
|
||||
["thumbs up", "👍"],
|
||||
["check mark", "✅"],
|
||||
["VS16 heart", "❤️"],
|
||||
["skin-tone modifier", "👋🏽"],
|
||||
["regional-indicator flag", "🇰🇷"],
|
||||
["ZWJ family", "👨👩👧"],
|
||||
["ZWJ technologist", "👩💻"],
|
||||
])("gives a %s cluster one two-column cell", async (_name, cluster) => {
|
||||
const terminal = createNativeHeadlessTerminal({ rows: 2, cols: 12 });
|
||||
|
||||
await terminal.write(`A${cluster}B`);
|
||||
const [row] = terminal.getBufferWindow({ startRow: 0, rowCount: 1 }).rows;
|
||||
|
||||
expect(row.slice(0, 4).map((cell) => ({ char: cell.char, width: cell.width }))).toEqual([
|
||||
{ char: "A", width: 1 },
|
||||
{ char: cluster, width: 2 },
|
||||
{ char: " ", width: 0 },
|
||||
{ char: "B", width: 1 },
|
||||
]);
|
||||
expect(terminal.getViewportState().cursor.col).toBe(4);
|
||||
});
|
||||
|
||||
// A host without grapheme widths answers cursor reports and replays with
|
||||
// xterm's default table. The native buffer matches it so the cursor lands
|
||||
// where the host put it.
|
||||
test("measures with xterm's default table for hosts without grapheme widths", async () => {
|
||||
const terminal = createNativeHeadlessTerminal({
|
||||
rows: 2,
|
||||
cols: 12,
|
||||
characterWidths: "legacy",
|
||||
});
|
||||
|
||||
await terminal.write("A😀B");
|
||||
const [row] = terminal.getBufferWindow({ startRow: 0, rowCount: 1 }).rows;
|
||||
|
||||
expect(row.slice(0, 3).map((cell) => ({ char: cell.char, width: cell.width }))).toEqual([
|
||||
{ char: "A", width: 1 },
|
||||
{ char: "😀", width: 1 },
|
||||
{ char: "B", width: 1 },
|
||||
]);
|
||||
expect(terminal.getViewportState().cursor.col).toBe(3);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { UnicodeGraphemesAddon } from "@xterm/addon-unicode-graphemes";
|
||||
import type { TerminalCharacterWidths } from "../character-widths";
|
||||
import {
|
||||
Terminal as HeadlessTerminal,
|
||||
type IBufferCell,
|
||||
@@ -17,6 +19,8 @@ export interface NativeHeadlessTerminalOptions {
|
||||
rows: number;
|
||||
cols: number;
|
||||
scrollbackLines?: number;
|
||||
/** Defaults to `graphemes`, the table current daemons use. */
|
||||
characterWidths?: TerminalCharacterWidths;
|
||||
}
|
||||
|
||||
export interface NativeHeadlessTerminal {
|
||||
@@ -297,6 +301,12 @@ export function createNativeHeadlessTerminal(
|
||||
scrollback: options.scrollbackLines ?? 1000,
|
||||
allowProposedApi: true,
|
||||
});
|
||||
// Grapheme widths give each emoji cluster one two-column cell, the width the
|
||||
// native renderer draws it at. Legacy hosts measure with xterm's default
|
||||
// table, so their cursor reports and replay stay consistent with it.
|
||||
if ((options.characterWidths ?? "graphemes") === "graphemes") {
|
||||
terminal.loadAddon(new UnicodeGraphemesAddon());
|
||||
}
|
||||
const decoder = new TextDecoder();
|
||||
let coordinateEpoch = 0;
|
||||
const coordinateStorage = new Map<object, TerminalCoordinateStorage>();
|
||||
|
||||
@@ -90,18 +90,16 @@ describe("native terminal frame", () => {
|
||||
test("keeps combining marks and joiners inside the cell xterm assigned them", async () => {
|
||||
const { frame } = await frameFor("éx̸ 각 क्ष 👩💻");
|
||||
|
||||
expect(cellLayout(frame.rows[0]).slice(0, 11)).toEqual([
|
||||
expect(cellLayout(frame.rows[0]).slice(0, 9)).toEqual([
|
||||
{ text: "é", col: 0, span: 1 },
|
||||
{ text: "x̸", col: 1, span: 1 },
|
||||
{ text: " ", col: 2, span: 1 },
|
||||
{ text: "각", col: 3, span: 2 },
|
||||
{ text: " ", col: 5, span: 1 },
|
||||
{ text: "क्", col: 6, span: 1 },
|
||||
{ text: "ष", col: 7, span: 1 },
|
||||
{ text: " ", col: 8, span: 1 },
|
||||
{ text: "👩", col: 9, span: 1 },
|
||||
{ text: "💻", col: 10, span: 1 },
|
||||
{ text: " ", col: 11, span: 1 },
|
||||
{ text: "क्ष", col: 6, span: 1 },
|
||||
{ text: " ", col: 7, span: 1 },
|
||||
{ text: "👩💻", col: 8, span: 2 },
|
||||
{ text: " ", col: 10, span: 1 },
|
||||
]);
|
||||
});
|
||||
|
||||
@@ -237,7 +235,7 @@ test("builds native frames after replay commits at captured geometry and the lat
|
||||
expect(frame.columns).toBe(50);
|
||||
expect(frame.rows).toHaveLength(10);
|
||||
expect(frame.rows[0].text.trimEnd()).toBe("LIVE-界🙂");
|
||||
expect(frame.rows[0].styles.slice(0, 4)).toEqual([8, RED, 0, 0]);
|
||||
expect(frame.rows[0].styles.slice(0, 4)).toEqual([9, RED, 0, 0]);
|
||||
expect(encodeTerminalFrame(frame).rows[0]).toContain("LIVE-界🙂");
|
||||
} finally {
|
||||
drain.dispose();
|
||||
|
||||
@@ -821,6 +821,67 @@ describe("incremental replay lifecycle", () => {
|
||||
expect(mounted.inputs).toHaveLength(1);
|
||||
expect(mounted.inputs[0]?.startsWith("\x1b]4;1;rgb:")).toBe(true);
|
||||
});
|
||||
|
||||
it("measures emoji clusters with the daemon's grapheme widths and copies them intact", async () => {
|
||||
const mounted = createTerminalHost({ width: 720, height: 360 });
|
||||
const text = "A😀B❤️C👋🏽D👨👩👧E";
|
||||
await new Promise<void>((resolve) =>
|
||||
mounted.runtime.write({ data: terminalOutput(text), onCommitted: resolve }),
|
||||
);
|
||||
|
||||
const terminal = window.__paseoTerminal;
|
||||
if (!terminal) {
|
||||
throw new Error("Expected the browser terminal to be mounted");
|
||||
}
|
||||
const line = terminal.buffer.active.getLine(terminal.buffer.active.cursorY);
|
||||
const cells = Array.from({ length: 13 }, (_, col) => {
|
||||
const cell = line?.getCell(col);
|
||||
return { chars: cell?.getChars(), width: cell?.getWidth() };
|
||||
});
|
||||
|
||||
expect(cells).toEqual([
|
||||
{ chars: "A", width: 1 },
|
||||
{ chars: "😀", width: 2 },
|
||||
{ chars: "", width: 0 },
|
||||
{ chars: "B", width: 1 },
|
||||
{ chars: "❤️", width: 2 },
|
||||
{ chars: "", width: 0 },
|
||||
{ chars: "C", width: 1 },
|
||||
{ chars: "👋🏽", width: 2 },
|
||||
{ chars: "", width: 0 },
|
||||
{ chars: "D", width: 1 },
|
||||
{ chars: "👨👩👧", width: 2 },
|
||||
{ chars: "", width: 0 },
|
||||
{ chars: "E", width: 1 },
|
||||
]);
|
||||
expect(terminal.buffer.active.cursorX).toBe(13);
|
||||
|
||||
terminal.select(0, terminal.buffer.active.cursorY, 13);
|
||||
expect(terminal.getSelection()).toBe(text);
|
||||
});
|
||||
|
||||
// A host without grapheme widths answers cursor reports and replays with its
|
||||
// own table. The web client keeps the Unicode 11 table it used before.
|
||||
it("measures with the legacy table for hosts without grapheme widths", async () => {
|
||||
const mounted = createTerminalHost({ width: 720, height: 360 });
|
||||
const terminal = window.__paseoTerminal;
|
||||
if (!terminal) {
|
||||
throw new Error("Expected the browser terminal to be mounted");
|
||||
}
|
||||
const buffer = terminal.buffer;
|
||||
async function cursorAfter(text: string): Promise<number> {
|
||||
await new Promise<void>((resolve) =>
|
||||
mounted.runtime.write({ data: terminalOutput(`\r\n${text}`), onCommitted: resolve }),
|
||||
);
|
||||
return buffer.active.cursorX;
|
||||
}
|
||||
|
||||
mounted.runtime.setCharacterWidths({ widths: "legacy" });
|
||||
expect([await cursorAfter("A😀B"), await cursorAfter("A❤️B")]).toEqual([4, 3]);
|
||||
|
||||
mounted.runtime.setCharacterWidths({ widths: "graphemes" });
|
||||
expect([await cursorAfter("A😀B"), await cursorAfter("A❤️B")]).toEqual([4, 4]);
|
||||
});
|
||||
});
|
||||
|
||||
it("restores fitted web geometry after replay before live output", async () => {
|
||||
|
||||
@@ -36,6 +36,12 @@ vi.mock("@xterm/addon-unicode11", () => ({
|
||||
},
|
||||
}));
|
||||
|
||||
vi.mock("@xterm/addon-unicode-graphemes", () => ({
|
||||
UnicodeGraphemesAddon: class UnicodeGraphemesAddon {
|
||||
dispose(): void {}
|
||||
},
|
||||
}));
|
||||
|
||||
vi.mock("@xterm/addon-web-links", () => ({
|
||||
WebLinksAddon: class WebLinksAddon {
|
||||
dispose(): void {}
|
||||
|
||||
@@ -3,10 +3,12 @@ import { FitAddon } from "@xterm/addon-fit";
|
||||
import { ImageAddon } from "@xterm/addon-image";
|
||||
import { SearchAddon } from "@xterm/addon-search";
|
||||
import { Unicode11Addon } from "@xterm/addon-unicode11";
|
||||
import { UnicodeGraphemesAddon } from "@xterm/addon-unicode-graphemes";
|
||||
import { WebLinksAddon } from "@xterm/addon-web-links";
|
||||
import { WebglAddon } from "@xterm/addon-webgl";
|
||||
import { LigaturesAddon } from "@xterm/addon-ligatures/lib/addon-ligatures.mjs";
|
||||
import { Terminal, type ITheme, type IMarker } from "@xterm/xterm";
|
||||
import type { TerminalCharacterWidths } from "../character-widths";
|
||||
import {
|
||||
type TerminalInputModeState,
|
||||
TerminalInputModeTracker,
|
||||
@@ -232,6 +234,12 @@ function findFileOnlyPaste(transfer: DataTransfer | null): File | null {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Grapheme widths match the daemon and native buffers. Legacy hosts keep the
|
||||
// Unicode 11 table web used before. See docs/terminal-rendering.md.
|
||||
function applyCharacterWidths(terminal: Terminal, widths: TerminalCharacterWidths): void {
|
||||
terminal.unicode.activeVersion = widths === "graphemes" ? "15-graphemes" : "11";
|
||||
}
|
||||
|
||||
export class TerminalEmulatorRuntime {
|
||||
constructor(
|
||||
private readonly options: FindShortcutPlatform = { isMac: isMacUserAgent() },
|
||||
@@ -244,6 +252,7 @@ export class TerminalEmulatorRuntime {
|
||||
shift: false,
|
||||
alt: false,
|
||||
};
|
||||
private characterWidths: TerminalCharacterWidths = "graphemes";
|
||||
private terminal: Terminal | null = null;
|
||||
private fitAddon: FitAddon | null = null;
|
||||
private searchAddon: SearchAddon | null = null;
|
||||
@@ -331,6 +340,16 @@ export class TerminalEmulatorRuntime {
|
||||
this.pendingModifiers = input.pendingModifiers;
|
||||
}
|
||||
|
||||
setCharacterWidths(input: { widths: TerminalCharacterWidths }): void {
|
||||
this.characterWidths = input.widths;
|
||||
const terminal = this.terminal;
|
||||
if (!terminal) {
|
||||
return;
|
||||
}
|
||||
applyCharacterWidths(terminal, input.widths);
|
||||
this.refreshVisibleRows();
|
||||
}
|
||||
|
||||
private loadSearchAddon(terminal: Terminal): void {
|
||||
const searchAddon = new SearchAddon({ highlightLimit: FIND_HIGHLIGHT_LIMIT });
|
||||
terminal.loadAddon(searchAddon);
|
||||
@@ -555,11 +574,12 @@ export class TerminalEmulatorRuntime {
|
||||
theme: withOverviewRulerBorderHidden(input.theme),
|
||||
});
|
||||
const fitAddon = new FitAddon();
|
||||
const unicode11Addon = new Unicode11Addon();
|
||||
let webglAddon: WebglAddon | null = null;
|
||||
let imageAddon: ImageAddon | null = null;
|
||||
terminal.loadAddon(fitAddon);
|
||||
terminal.loadAddon(unicode11Addon);
|
||||
terminal.loadAddon(new Unicode11Addon());
|
||||
terminal.loadAddon(new UnicodeGraphemesAddon());
|
||||
applyCharacterWidths(terminal, this.characterWidths);
|
||||
terminal.loadAddon(new WebLinksAddon(openExternalLink));
|
||||
const localFileLinkProvider = terminal.registerLinkProvider(
|
||||
createTerminalLocalFileLinkProvider(terminal, {
|
||||
@@ -594,11 +614,6 @@ export class TerminalEmulatorRuntime {
|
||||
terminal.open(input.host);
|
||||
this.themeBackgroundElements = this.collectThemeBackgroundElements(input);
|
||||
this.applyThemeBackground(input.theme);
|
||||
try {
|
||||
terminal.unicode.activeVersion = "11";
|
||||
} catch {
|
||||
// Ignore if unicode API isn't available in this build/runtime.
|
||||
}
|
||||
|
||||
const disposeImageAddon = (): void => {
|
||||
try {
|
||||
|
||||
@@ -3751,6 +3751,8 @@ export const ServerInfoStatusPayloadSchema = z
|
||||
"terminal-input-mode-replay": z.boolean().optional(),
|
||||
// COMPAT(terminalSizeOwnership): added in v0.2.6, remove gate after 2027-02-02.
|
||||
"terminal-size-ownership": z.boolean().optional(),
|
||||
// COMPAT(terminalGraphemeWidths): added in v0.15.0, remove gate after 2027-05-01.
|
||||
"terminal-grapheme-widths": z.boolean().optional(),
|
||||
// COMPAT(rewind): added in v0.1.X, drop the gate when floor >= v0.1.X.
|
||||
rewind: z.boolean().optional(),
|
||||
// COMPAT(agentTimelinePromptIndex): added in v0.2.X, drop the gate when floor >= v0.2.X.
|
||||
|
||||
@@ -117,7 +117,8 @@
|
||||
"@opencode-ai/sdk": "1.14.46",
|
||||
"@opencode/client": "2.0.10",
|
||||
"@xterm/addon-serialize": "0.14.0",
|
||||
"@xterm/headless": "^6.0.0",
|
||||
"@xterm/addon-unicode-graphemes": "0.5.0-beta.330",
|
||||
"@xterm/headless": "6.1.0-beta.334",
|
||||
"ai": "5.0.78",
|
||||
"ajv": "^8.20.0",
|
||||
"bcryptjs": "^3.0.3",
|
||||
|
||||
@@ -1157,6 +1157,7 @@ describe("relay external socket reconnect behavior", () => {
|
||||
expect(serverInfo.features?.workspaceMarkUnread).toBe(true);
|
||||
expect(serverInfo.features?.["terminal-input-mode-replay"]).toBe(true);
|
||||
expect(serverInfo.features?.["terminal-size-ownership"]).toBe(true);
|
||||
expect(serverInfo.features?.["terminal-grapheme-widths"]).toBe(true);
|
||||
expect(serverInfo.features?.agentTurnIdentity).toBeUndefined();
|
||||
expect(serverInfo.permissions).toEqual(DAEMON_PERMISSIONS);
|
||||
await server.close();
|
||||
|
||||
@@ -2077,6 +2077,8 @@ export class VoiceAssistantWebSocketServer {
|
||||
"terminal-input-mode-replay": true,
|
||||
// COMPAT(terminalSizeOwnership): added in v0.2.6, remove gate after 2027-02-02.
|
||||
"terminal-size-ownership": true,
|
||||
// COMPAT(terminalGraphemeWidths): added in v0.15.0, remove gate after 2027-05-01.
|
||||
"terminal-grapheme-widths": true,
|
||||
workspaceTerminals: true,
|
||||
// COMPAT(rewind): added in v0.1.X, drop the gate when floor >= v0.1.X.
|
||||
rewind: true,
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
import { spawnSync } from "node:child_process";
|
||||
import { fileURLToPath } from "node:url";
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { createHeadlessTerminal } from "./headless-terminal.js";
|
||||
|
||||
const EMOJI_ROW = "A😀👍❤️👋🏽🇰🇷👨👩👧B";
|
||||
// A, six two-column emoji clusters, B.
|
||||
const EMOJI_ROW_END_COL = 1 + 6 * 2 + 1;
|
||||
|
||||
async function cursorColAfter(text: string): Promise<number> {
|
||||
const terminal = createHeadlessTerminal({ rows: 2, cols: 40 });
|
||||
try {
|
||||
await new Promise<void>((resolve) => terminal.write(text, resolve));
|
||||
return terminal.buffer.active.cursorX;
|
||||
} finally {
|
||||
terminal.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
describe("createHeadlessTerminal", () => {
|
||||
it("gives each emoji cluster one two-column cell", async () => {
|
||||
expect(await cursorColAfter(EMOJI_ROW)).toBe(EMOJI_ROW_END_COL);
|
||||
});
|
||||
|
||||
it("keeps ASCII and CJK widths", async () => {
|
||||
expect(await cursorColAfter("ABC")).toBe(3);
|
||||
expect(await cursorColAfter("中文")).toBe(4);
|
||||
});
|
||||
|
||||
// The width table is decoded into a Node Buffer when the module loads. A
|
||||
// Buffer carved out of Node's shared pool starts at a non-zero byteOffset,
|
||||
// and an addon that reads the table header from offset 0 gets wrong widths
|
||||
// or fails to load. Whether the pool offset is zero depends on earlier
|
||||
// allocations, so the test forces a non-zero offset in a fresh process
|
||||
// before the module loads. Zero bytes in front of the table make the
|
||||
// misread header deterministic.
|
||||
it("decodes widths correctly when Node's buffer pool offset is non-zero", () => {
|
||||
const moduleUrl = new URL("./headless-terminal.ts", import.meta.url).href;
|
||||
const script = `
|
||||
Buffer.poolSize = 8 * 1024 * 1024;
|
||||
const occupied = Buffer.from(new Uint8Array(3 * 1024 * 1024));
|
||||
if (occupied.byteOffset !== 0 || occupied.buffer.byteLength !== Buffer.poolSize) {
|
||||
throw new Error("expected a fresh shared pool");
|
||||
}
|
||||
const { createHeadlessTerminal } = await import(${JSON.stringify(moduleUrl)});
|
||||
const terminal = createHeadlessTerminal({ rows: 2, cols: 40 });
|
||||
await new Promise((resolve) => terminal.write(${JSON.stringify(EMOJI_ROW)}, resolve));
|
||||
process.stdout.write(String(terminal.buffer.active.cursorX));
|
||||
terminal.dispose();
|
||||
`;
|
||||
const result = spawnSync(
|
||||
process.execPath,
|
||||
["--import", "tsx", "--input-type=module", "--eval", script],
|
||||
{ cwd: fileURLToPath(new URL(".", import.meta.url)), encoding: "utf8" },
|
||||
);
|
||||
|
||||
expect(result.status, result.stderr).toBe(0);
|
||||
expect(result.stdout).toBe(String(EMOJI_ROW_END_COL));
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,22 @@
|
||||
import { UnicodeGraphemesAddon } from "@xterm/addon-unicode-graphemes";
|
||||
import xterm, { type Terminal } from "@xterm/headless";
|
||||
|
||||
export interface HeadlessTerminalOptions {
|
||||
rows: number;
|
||||
cols: number;
|
||||
scrollback?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* A headless xterm that measures text the way Paseo clients render it.
|
||||
*
|
||||
* Grapheme-cluster widths give every emoji cluster (VS16, skin-tone, flags,
|
||||
* ZWJ sequences) one two-column cell, matching color-emoji fonts. Clients
|
||||
* replay this buffer's ANSI with the same table, so cells and the cursor line
|
||||
* up after reconnect. See docs/terminal-rendering.md.
|
||||
*/
|
||||
export function createHeadlessTerminal(options: HeadlessTerminalOptions): Terminal {
|
||||
const terminal = new xterm.Terminal({ ...options, allowProposedApi: true });
|
||||
terminal.loadAddon(new UnicodeGraphemesAddon());
|
||||
return terminal;
|
||||
}
|
||||
@@ -563,6 +563,71 @@ describe("createTerminal", () => {
|
||||
expect(state.grid[0][1].char).toBe("");
|
||||
});
|
||||
|
||||
it("reports the cursor column after an emoji cluster in DSR replies", async () => {
|
||||
// Programs that measure the cursor (prompts, TUIs) must see the same
|
||||
// column the client renders: an emoji occupies two cells.
|
||||
const program = `
|
||||
process.stdin.setRawMode(true);
|
||||
process.stdin.once("data", (reply) => {
|
||||
process.stdout.write("\\r\\nREPLY " + JSON.stringify(reply.toString()).slice(2, -1));
|
||||
});
|
||||
process.stdout.write("A😀\\x1b[6n");
|
||||
setInterval(() => {}, 100000);
|
||||
`;
|
||||
const session = trackSession(
|
||||
await createTerminal({
|
||||
workspaceId: "ws-test",
|
||||
cwd: realpathSync(tmpdir()),
|
||||
cols: 40,
|
||||
rows: 5,
|
||||
command: process.execPath,
|
||||
args: ["-e", program],
|
||||
}),
|
||||
);
|
||||
|
||||
const state = await waitForState(session, (current) =>
|
||||
getRowText(current, 1).startsWith("REPLY"),
|
||||
);
|
||||
|
||||
expect(getRowText(state, 1)).toBe("REPLY u001b[1;4R");
|
||||
});
|
||||
|
||||
it("replays emoji clusters at their columns with the cursor after them", async () => {
|
||||
const text = "A😀B❤️C👋🏽D👨👩👧E";
|
||||
const session = trackSession(
|
||||
await createTerminal({
|
||||
workspaceId: "ws-test",
|
||||
cwd: realpathSync(tmpdir()),
|
||||
cols: 40,
|
||||
rows: 5,
|
||||
command: process.execPath,
|
||||
args: [
|
||||
"-e",
|
||||
`process.stdout.write(${JSON.stringify(text)}); setInterval(() => {}, 100000);`,
|
||||
],
|
||||
}),
|
||||
);
|
||||
|
||||
const state = await waitForState(session, (current) => rowHasChar(current.grid[0], "E"));
|
||||
|
||||
expect(state.grid[0].slice(0, 13).map((cell) => cell.char)).toEqual([
|
||||
"A",
|
||||
"😀",
|
||||
"",
|
||||
"B",
|
||||
"❤️",
|
||||
"",
|
||||
"C",
|
||||
"👋🏽",
|
||||
"",
|
||||
"D",
|
||||
"👨👩👧",
|
||||
"",
|
||||
"E",
|
||||
]);
|
||||
expect(state.cursor).toEqual({ row: 0, col: 13 });
|
||||
});
|
||||
|
||||
it("captures exit diagnostics from the terminal buffer", async () => {
|
||||
const session = trackSession(
|
||||
await createTerminal({
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import * as pty from "node-pty";
|
||||
import xterm, { type Terminal as TerminalType } from "@xterm/headless";
|
||||
import type { Terminal as TerminalType } from "@xterm/headless";
|
||||
import { randomUUID } from "crypto";
|
||||
import {
|
||||
accessSync,
|
||||
@@ -25,6 +25,7 @@ import {
|
||||
findExecutable,
|
||||
findExecutableWithoutProbing,
|
||||
} from "../executable-resolution/executable-resolution.js";
|
||||
import { createHeadlessTerminal } from "./headless-terminal.js";
|
||||
import { createTerminalSerializer } from "./terminal-serializer.js";
|
||||
import {
|
||||
captureTerminalLines,
|
||||
@@ -36,7 +37,6 @@ import { TerminalInputModeTracker } from "@getpaseo/protocol/terminal-input-mode
|
||||
import { TerminalActivityTracker } from "./activity/terminal-activity-tracker.js";
|
||||
import type { TerminalActivity, TerminalActivityState } from "@getpaseo/protocol/terminal-activity";
|
||||
|
||||
const { Terminal } = xterm;
|
||||
const require = createRequire(import.meta.url);
|
||||
let nodePtySpawnHelperChecked = false;
|
||||
const TERMINAL_TITLE_DEBOUNCE_MS = 150;
|
||||
@@ -796,13 +796,7 @@ export async function createTerminal(
|
||||
const activityChangeListeners = new Set<(transition: TerminalActivityTransition) => void>();
|
||||
let titleChangeSubscription: { dispose(): void } | null = null;
|
||||
|
||||
// Create xterm.js headless terminal
|
||||
const terminal = new Terminal({
|
||||
rows,
|
||||
cols,
|
||||
scrollback: 10000,
|
||||
allowProposedApi: true,
|
||||
});
|
||||
const terminal = createHeadlessTerminal({ rows, cols, scrollback: 10000 });
|
||||
|
||||
const serialize = createTerminalSerializer(terminal);
|
||||
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
import xterm from "@xterm/headless";
|
||||
import type { TerminalState } from "@getpaseo/protocol/messages";
|
||||
import { createHeadlessTerminal } from "../headless-terminal.js";
|
||||
import type { LocalTerminalSession } from "../terminal.js";
|
||||
|
||||
/** Observe the public ANSI replay using a real receiver; no production cell extraction API. */
|
||||
export async function readTerminalState(session: LocalTerminalSession): Promise<TerminalState> {
|
||||
const { metadata, data } = session.serializeReplay();
|
||||
const terminal = new xterm.Terminal({
|
||||
const terminal = createHeadlessTerminal({
|
||||
rows: metadata.rows,
|
||||
cols: metadata.cols,
|
||||
scrollback: 10000,
|
||||
allowProposedApi: true,
|
||||
});
|
||||
try {
|
||||
await new Promise<void>((resolve) => terminal.write(data, resolve));
|
||||
|
||||
@@ -1863,7 +1863,8 @@ it("completes a replay larger than the socket budget while a sibling stays usabl
|
||||
...nodeTerminalCommand(`
|
||||
const row = Array.from({length: 1000}, (_, i) => "\\x1b[" + (31 + i % 2) + "mX").join("");
|
||||
for (let i = 0; i < 900; i++) process.stdout.write(row + "\\r\\n");
|
||||
process.stdout.write("READY-WIDE\\r\\n");
|
||||
// Seeing the marker must mean no trailing newline can still add history.
|
||||
process.stdout.write("READY-WIDE");
|
||||
process.stdin.on("data", data => { if (data.toString().includes("small")) { process.stdout.write("SAME-TERMINAL-LIVE\\r\\n"); return; } process.stdout.write("q".repeat(8 * 1024 * 1024) + "\\r\\nRECOVERED-LIVE\\r\\n", () => require("node:fs").writeFileSync(${JSON.stringify(overflowProgress)}, "done")); });
|
||||
setInterval(() => {}, 1000);
|
||||
`),
|
||||
|
||||
Reference in New Issue
Block a user