mirror of
https://github.com/getpaseo/paseo.git
synced 2026-10-31 13:42:50 +00:00
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Mohamed Boudra
|
bd1b491dcb |
@@ -6,25 +6,15 @@ Web and Electron draw terminals with xterm.js. iOS and Android keep an `@xterm/h
|
||||
|
||||
xterm decides which column every cell occupies. The native views never let text advance move a cell. Each row is shaped once, one run per font face, so Hangul jamo, ligatures, combining marks, conjuncts and fallback fonts see their neighbours. Each shaped cluster is then drawn at its first cell's column, centred in the columns it owns, and scaled down when its glyphs are wider. Cursor, selection, hit-testing and copy all use xterm's columns, so they stay correct whatever the font does.
|
||||
|
||||
A cluster is the run of cells the shaper merged, and it is drawn once from the shaped row. xterm usually keeps a conjunct in one cell (see [Character widths](#character-widths)), but a colour change inside it leaves `क्` and `ष` in separate cells that still shape together. Drawing part of a cluster on its own reshapes it: the conjunct comes apart into `क्` with a visible virama. So colour and selection never split a cluster. A cluster whose cells differ in colour is drawn once per colour, clipped to that colour's columns.
|
||||
A cluster is the run of cells the shaper merged, and it is drawn once from the shaped row. Drawing part of a cluster on its own reshapes it: a half-form conjunct such as `स्ते` comes apart into `स्` with a visible virama. So colour and selection never split a cluster. A cluster whose cells differ in colour is drawn once per colour, clipped to that colour's columns.
|
||||
|
||||
Android also groups cells with `android.icu.text.BreakIterator`, because Minikin's advances and cursor boundaries alone split some clusters that span cells. Grouping only merges whole cells, so a conjunct xterm keeps in one cell cannot be split by the OS. Grapheme rules follow the OS ICU version, and we accept that to avoid bundling approximately 14 MB of ICU4J data. Before the buffers used grapheme widths, Android 10 (API 29) split `स्ते` across its two cells. This renderer does not guarantee identical shaping across OS versions.
|
||||
Android also groups cells with `android.icu.text.BreakIterator`, because Minikin's advances and cursor boundaries alone split some conjuncts. Grapheme rules follow the OS ICU version. Android 10 (API 29) splits `स्ते` after the virama and renders it incorrectly. The tested corpus passed on API 33, 34 and 35; API 30–32 have not been tested. We accept that version-dependent limitation to avoid bundling approximately 14 MB of ICU4J data. CoreText keeps this conjunct together on iOS. This renderer does not guarantee identical shaping across OS versions.
|
||||
|
||||
`TerminalRowLayoutTest.kt` is the Android regression test. It draws the rows of `grapheme-rows.json` and compares each with its grapheme clusters drawn one at a time, and with a wrong clustering that must not match. `terminal-frame.test.ts` checks that those rows are what xterm produces and that the clusters are UAX #29 grapheme clusters. Run it with `./gradlew :paseo-terminal:connectedDebugAndroidTest` from `packages/app/android`, with `ANDROID_SERIAL` set.
|
||||
|
||||
The view reports ready only after it has measured its grid size. The pane attaches with that size, so the daemon replays the terminal at the client's size. Before this, the replay arrived at the PTY's old size, the resize came after it, and the shell's redraw landed on the wrong rows.
|
||||
|
||||
## Character widths
|
||||
|
||||
The daemon, native and web buffers all load `@xterm/addon-unicode-graphemes`: the daemon through `packages/server/src/terminal/headless-terminal.ts`, native in `createNativeHeadlessTerminal`, web in `terminal-emulator-runtime.ts`. Each emoji cluster takes one two-column cell, including VS16 (`❤️`), skin tones (`👋🏽`), flags (`🇰🇷`) and ZWJ sequences (`👨👩👧`). That is the width colour-emoji fonts draw at. Under xterm's default Unicode 6 table `😀` got one column, and the native views scaled it to half size to fit.
|
||||
|
||||
Every buffer must use the same table. The daemon answers cursor-position reports (`CSI 6n`) from its buffer, and a client re-parses the daemon's ANSI replay with its own table. A disagreement moves the cursor and the later cells of any row that holds a disputed cluster: after replay from a Unicode 6 daemon, the cursor that followed `A😀😀😀B` lands inside the third emoji.
|
||||
|
||||
Daemons that use grapheme widths advertise `server_info.features["terminal-grapheme-widths"]`. `terminal-pane.tsx` reads it once and passes `characterWidths` to the emulator. Against an older daemon the app keeps each renderer's previous table: xterm's default on native, Unicode 11 on web. An older app against a newer daemon cannot match it, because every client shares the daemon's one buffer. A terminal kept by a worker from an unreleased pre-grapheme build keeps that worker's table until it exits.
|
||||
|
||||
The table follows Unicode grapheme clusters, as Node's `string-width` does for Ink-based agent TUIs. Indic conjuncts follow the same rule: `क्ष` and `स्ते` take one column, and the native views scale them down to fit it. Shells measure with the C library's `wcwidth` instead. glibc counts `❤️` as one column, `👋🏽` as four and `क्ष` as two, so a line editor that measures those disagrees with the terminal.
|
||||
|
||||
Use `@xterm/addon-unicode-graphemes` 0.5.0-beta.330 or later. Earlier versions read their width table from the wrong offset when Node decodes it into a pooled `Buffer`, which gives wrong widths or a load error depending on earlier allocations. `headless-terminal.test.ts` forces that case in a fresh process.
|
||||
Emoji widths come from the headless buffer, which uses xterm's default Unicode 6 table. `👍` gets one column, and `👋🏽` and `🇰🇷` get two cells drawn as one cluster. Web loads the Unicode 11 addon, so the same output can wrap differently on web and native.
|
||||
|
||||
## Ink outside the row
|
||||
|
||||
|
||||
Generated
+45
-46
@@ -14740,52 +14740,16 @@
|
||||
"node": ">=10.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@xterm/addon-image": {
|
||||
"version": "0.10.0-beta.331",
|
||||
"resolved": "https://registry.npmjs.org/@xterm/addon-image/-/addon-image-0.10.0-beta.331.tgz",
|
||||
"integrity": "sha512-ShBTb3QF0ul/i55lfRdJpcu0hlA4aJdqRdzzHdOCws2WUzSsG0SCfMhLjzaoO1dVUGNj2Z7PNLqiXnlyqOinbg==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@xterm/xterm": "^6.1.0-beta.336"
|
||||
}
|
||||
},
|
||||
"node_modules/@xterm/addon-serialize": {
|
||||
"version": "0.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@xterm/addon-serialize/-/addon-serialize-0.14.0.tgz",
|
||||
"integrity": "sha512-uteyTU1EkrQa2Ux6P/uFl2fzmXI46jy5uoQMKEOM0fKTyiW7cSn0WrFenHm5vO5uEXX/GpwW/FgILvv3r0WbkA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@xterm/addon-unicode-graphemes": {
|
||||
"version": "0.5.0-beta.330",
|
||||
"resolved": "https://registry.npmjs.org/@xterm/addon-unicode-graphemes/-/addon-unicode-graphemes-0.5.0-beta.330.tgz",
|
||||
"integrity": "sha512-Zoiv/8tmku4LcU7bEL6zer+DNN6p6F8VCkyviSmbDxpA/W9zSnWDiD/ZpwFDQqegwjSptGzBNMhW2Os1sa+lUw==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@xterm/xterm": "^6.1.0-beta.336"
|
||||
}
|
||||
},
|
||||
"node_modules/@xterm/addon-webgl": {
|
||||
"version": "0.20.0-beta.329",
|
||||
"resolved": "https://registry.npmjs.org/@xterm/addon-webgl/-/addon-webgl-0.20.0-beta.329.tgz",
|
||||
"integrity": "sha512-bwqMma7X4cCBfwmWqKuhxNLkIXKW0lJTapaQ0g/9Kq7n6D6VCL4dYQCQ6DoeHv27ncJD4WzeoDTCEeSn0cspfg==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@xterm/xterm": "^6.1.0-beta.336"
|
||||
}
|
||||
},
|
||||
"node_modules/@xterm/headless": {
|
||||
"version": "6.1.0-beta.334",
|
||||
"resolved": "https://registry.npmjs.org/@xterm/headless/-/headless-6.1.0-beta.334.tgz",
|
||||
"integrity": "sha512-QkwuIeP9dXlk/eOsAbqX8AvtS/W8EhRo6dkl2YYZr+jWAWSfDDMi+zPlegWUflSdsRKMURMvzvvkVZr6GztK4g==",
|
||||
"license": "MIT",
|
||||
"workspaces": [
|
||||
"addons/*"
|
||||
]
|
||||
},
|
||||
"node_modules/@xterm/xterm": {
|
||||
"version": "6.1.0-beta.336",
|
||||
"resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-6.1.0-beta.336.tgz",
|
||||
"integrity": "sha512-QrvZZsffXsLW4Z3sba9GqimLvVwlb8b3W1NwZ+l6DdRnpH5pg5cFGWg2ceIburmfaGQ07YJHNekwxxlTcHZ3BA==",
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@xterm/headless/-/headless-6.0.0.tgz",
|
||||
"integrity": "sha512-5Yj1QINYCyzrZtf8OFIHi47iQtI+0qYFPHmouEfG8dHNxbZ9Tb9YGSuLcsEwj9Z+OL75GJqPyJbyoFer80a2Hw==",
|
||||
"license": "MIT",
|
||||
"workspaces": [
|
||||
"addons/*"
|
||||
@@ -37662,14 +37626,13 @@
|
||||
"@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.331",
|
||||
"@xterm/addon-image": "^0.10.0-beta.213",
|
||||
"@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.329",
|
||||
"@xterm/xterm": "6.1.0-beta.336",
|
||||
"@xterm/addon-webgl": "0.20.0-beta.291",
|
||||
"@xterm/xterm": "6.1.0-beta.292",
|
||||
"buffer": "^6.0.3",
|
||||
"expo": "~57.0.30",
|
||||
"expo-asset": "~57.0.20",
|
||||
@@ -37747,7 +37710,7 @@
|
||||
"@vitest/browser": "^4.1.7",
|
||||
"@vitest/browser-playwright": "^4.1.7",
|
||||
"@xterm/addon-serialize": "0.14.0",
|
||||
"@xterm/headless": "6.1.0-beta.334",
|
||||
"@xterm/headless": "^6.1.0-beta.213",
|
||||
"babel-preset-expo": "~57.0.16",
|
||||
"dotenv": "^17.2.3",
|
||||
"eas-cli": "^16.24.1",
|
||||
@@ -38526,6 +38489,15 @@
|
||||
"@xterm/xterm": "^6.1.0-beta.213"
|
||||
}
|
||||
},
|
||||
"packages/app/node_modules/@xterm/addon-image": {
|
||||
"version": "0.10.0-beta.213",
|
||||
"resolved": "https://registry.npmjs.org/@xterm/addon-image/-/addon-image-0.10.0-beta.213.tgz",
|
||||
"integrity": "sha512-L3QxLkj8g8TioVea9p1oVze52Jr75rRZPPLm1tgZl0X2EGJGFHnQzE3QRsgmYWI7R5j3kwwi3MRAkOAgvOK8uA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@xterm/xterm": "^6.1.0-beta.213"
|
||||
}
|
||||
},
|
||||
"packages/app/node_modules/@xterm/addon-ligatures": {
|
||||
"version": "0.11.0-beta.213",
|
||||
"resolved": "https://registry.npmjs.org/@xterm/addon-ligatures/-/addon-ligatures-0.11.0-beta.213.tgz",
|
||||
@@ -38569,6 +38541,34 @@
|
||||
"@xterm/xterm": "^6.1.0-beta.213"
|
||||
}
|
||||
},
|
||||
"packages/app/node_modules/@xterm/addon-webgl": {
|
||||
"version": "0.20.0-beta.291",
|
||||
"resolved": "https://registry.npmjs.org/@xterm/addon-webgl/-/addon-webgl-0.20.0-beta.291.tgz",
|
||||
"integrity": "sha512-gH7r5g8f2NWMhBtaeApuwLQTJmX4uq7zT0okjeNWkFAD0nxzbUPB+kt6sogZZ5K90XYPt2OLu/bhuvF6DmKqOQ==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@xterm/xterm": "^6.1.0-beta.292"
|
||||
}
|
||||
},
|
||||
"packages/app/node_modules/@xterm/headless": {
|
||||
"version": "6.1.0-beta.213",
|
||||
"resolved": "https://registry.npmjs.org/@xterm/headless/-/headless-6.1.0-beta.213.tgz",
|
||||
"integrity": "sha512-D08E4Bl0HRhYZRL2o5PxD4FNQN9qXpI8QSw3CkKrsym5dtTRAqsynVYE8V8echQrxfb+EpR0CB5reM7tEGZ/fA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"workspaces": [
|
||||
"addons/*"
|
||||
]
|
||||
},
|
||||
"packages/app/node_modules/@xterm/xterm": {
|
||||
"version": "6.1.0-beta.292",
|
||||
"resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-6.1.0-beta.292.tgz",
|
||||
"integrity": "sha512-17zqK5tM/l6qeD7McF42OrEJ6w3XqJ2vFVKdWqu0cYLzdFqMWAHp2oFNc8Fj5DmqDSl1E1FZEg6IFflDllTvLA==",
|
||||
"license": "MIT",
|
||||
"workspaces": [
|
||||
"addons/*"
|
||||
]
|
||||
},
|
||||
"packages/app/node_modules/babel-plugin-syntax-hermes-parser": {
|
||||
"version": "0.36.1",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-hermes-parser/-/babel-plugin-syntax-hermes-parser-0.36.1.tgz",
|
||||
@@ -40690,8 +40690,7 @@
|
||||
"@opencode-ai/sdk": "1.14.46",
|
||||
"@opencode/client": "2.0.10",
|
||||
"@xterm/addon-serialize": "0.14.0",
|
||||
"@xterm/addon-unicode-graphemes": "0.5.0-beta.330",
|
||||
"@xterm/headless": "6.1.0-beta.334",
|
||||
"@xterm/headless": "^6.0.0",
|
||||
"ai": "5.0.78",
|
||||
"ajv": "^8.20.0",
|
||||
"bcryptjs": "^3.0.3",
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
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";
|
||||
@@ -83,8 +82,6 @@ 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": "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]
|
||||
"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]
|
||||
},
|
||||
{
|
||||
"output": "क्ष",
|
||||
"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]
|
||||
"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]
|
||||
},
|
||||
{
|
||||
"output": "নক্ষত্র",
|
||||
"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]
|
||||
"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]
|
||||
},
|
||||
{
|
||||
"output": "क्अ",
|
||||
@@ -31,7 +31,7 @@
|
||||
},
|
||||
{
|
||||
"output": "अ्क",
|
||||
"row": "3,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1;8,4294638330,0,0;अ्क ",
|
||||
"row": "2,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,5 +1,6 @@
|
||||
package sh.paseo.terminal
|
||||
|
||||
import android.os.Build
|
||||
import android.graphics.Bitmap
|
||||
import android.graphics.Canvas
|
||||
import android.graphics.Paint
|
||||
@@ -43,6 +44,13 @@ 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,14 +71,13 @@
|
||||
"@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.331",
|
||||
"@xterm/addon-image": "^0.10.0-beta.213",
|
||||
"@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.329",
|
||||
"@xterm/xterm": "6.1.0-beta.336",
|
||||
"@xterm/addon-webgl": "0.20.0-beta.291",
|
||||
"@xterm/xterm": "6.1.0-beta.292",
|
||||
"buffer": "^6.0.3",
|
||||
"expo": "~57.0.30",
|
||||
"expo-asset": "~57.0.20",
|
||||
@@ -156,7 +155,7 @@
|
||||
"@vitest/browser": "^4.1.7",
|
||||
"@vitest/browser-playwright": "^4.1.7",
|
||||
"@xterm/addon-serialize": "0.14.0",
|
||||
"@xterm/headless": "6.1.0-beta.334",
|
||||
"@xterm/headless": "^6.1.0-beta.213",
|
||||
"babel-preset-expo": "~57.0.16",
|
||||
"dotenv": "^17.2.3",
|
||||
"eas-cli": "^16.24.1",
|
||||
|
||||
@@ -12,7 +12,6 @@ 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";
|
||||
|
||||
@@ -33,7 +32,6 @@ export interface TerminalEmulatorProps {
|
||||
ref: Ref<TerminalEmulatorHandle>;
|
||||
streamKey: string;
|
||||
supportsTerminalInputModeReplay: boolean;
|
||||
characterWidths: TerminalCharacterWidths;
|
||||
testId?: string;
|
||||
xtermTheme?: ITheme;
|
||||
scrollbackLines: number;
|
||||
|
||||
@@ -93,7 +93,6 @@ function NativeTerminalEmulator({
|
||||
testId = "terminal-surface",
|
||||
xtermTheme = DEFAULT_XTERM_THEME,
|
||||
scrollbackLines,
|
||||
characterWidths,
|
||||
fontFamily,
|
||||
fontSize,
|
||||
keyboardInset = 0,
|
||||
@@ -374,7 +373,6 @@ function NativeTerminalEmulator({
|
||||
rows: size.rows,
|
||||
cols: size.cols,
|
||||
scrollbackLines,
|
||||
characterWidths,
|
||||
});
|
||||
terminalRef.current = terminal;
|
||||
screenModelRef.current = createNativeTerminalScreenModel({ terminal });
|
||||
@@ -389,7 +387,6 @@ function NativeTerminalEmulator({
|
||||
resetInputModeTracker,
|
||||
resolveTerminalScreen,
|
||||
scrollbackLines,
|
||||
characterWidths,
|
||||
clearSelection,
|
||||
]);
|
||||
|
||||
|
||||
@@ -27,7 +27,6 @@ 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,
|
||||
@@ -97,7 +96,6 @@ interface TerminalEmulatorProps {
|
||||
ref: Ref<TerminalEmulatorHandle>;
|
||||
streamKey: string;
|
||||
supportsTerminalInputModeReplay: boolean;
|
||||
characterWidths: TerminalCharacterWidths;
|
||||
testId?: string;
|
||||
xtermTheme?: ITheme;
|
||||
scrollbackLines: number;
|
||||
@@ -156,7 +154,6 @@ export default function TerminalEmulator({
|
||||
cursor: "#e6e6e6",
|
||||
},
|
||||
scrollbackLines,
|
||||
characterWidths,
|
||||
fontFamily,
|
||||
fontSize,
|
||||
swipeGesturesEnabled = false,
|
||||
@@ -186,8 +183,6 @@ 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]);
|
||||
@@ -320,10 +315,6 @@ 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) {
|
||||
@@ -456,7 +447,6 @@ export default function TerminalEmulator({
|
||||
},
|
||||
});
|
||||
runtime.setPendingModifiers({ pendingModifiers: pendingModifiersRef.current });
|
||||
runtime.setCharacterWidths({ widths: characterWidthsRef.current });
|
||||
runtime.mount({
|
||||
root,
|
||||
host,
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
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";
|
||||
@@ -305,11 +304,6 @@ 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]);
|
||||
@@ -1177,7 +1171,6 @@ export function TerminalPane({
|
||||
dom={TERMINAL_EMULATOR_DOM_PROPS}
|
||||
streamKey={terminalStreamKey}
|
||||
supportsTerminalInputModeReplay={supportsTerminalInputModeReplay}
|
||||
characterWidths={characterWidths}
|
||||
testId="terminal-surface"
|
||||
xtermTheme={xtermTheme}
|
||||
scrollbackLines={settings.terminalScrollbackLines}
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
/**
|
||||
* 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,52 +159,4 @@ 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,5 +1,3 @@
|
||||
import { UnicodeGraphemesAddon } from "@xterm/addon-unicode-graphemes";
|
||||
import type { TerminalCharacterWidths } from "../character-widths";
|
||||
import {
|
||||
Terminal as HeadlessTerminal,
|
||||
type IBufferCell,
|
||||
@@ -19,8 +17,6 @@ export interface NativeHeadlessTerminalOptions {
|
||||
rows: number;
|
||||
cols: number;
|
||||
scrollbackLines?: number;
|
||||
/** Defaults to `graphemes`, the table current daemons use. */
|
||||
characterWidths?: TerminalCharacterWidths;
|
||||
}
|
||||
|
||||
export interface NativeHeadlessTerminal {
|
||||
@@ -301,12 +297,6 @@ 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,16 +90,18 @@ 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, 9)).toEqual([
|
||||
expect(cellLayout(frame.rows[0]).slice(0, 11)).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: 2 },
|
||||
{ text: " ", col: 10, 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 },
|
||||
]);
|
||||
});
|
||||
|
||||
@@ -235,7 +237,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([9, RED, 0, 0]);
|
||||
expect(frame.rows[0].styles.slice(0, 4)).toEqual([8, RED, 0, 0]);
|
||||
expect(encodeTerminalFrame(frame).rows[0]).toContain("LIVE-界🙂");
|
||||
} finally {
|
||||
drain.dispose();
|
||||
|
||||
@@ -821,67 +821,6 @@ 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,12 +36,6 @@ 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,12 +3,10 @@ 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,
|
||||
@@ -223,12 +221,6 @@ 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() },
|
||||
@@ -241,7 +233,6 @@ 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;
|
||||
@@ -329,16 +320,6 @@ 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);
|
||||
@@ -548,12 +529,11 @@ 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(new Unicode11Addon());
|
||||
terminal.loadAddon(new UnicodeGraphemesAddon());
|
||||
applyCharacterWidths(terminal, this.characterWidths);
|
||||
terminal.loadAddon(unicode11Addon);
|
||||
terminal.loadAddon(new WebLinksAddon(openExternalLink));
|
||||
const localFileLinkProvider = terminal.registerLinkProvider(
|
||||
createTerminalLocalFileLinkProvider(terminal, {
|
||||
@@ -588,6 +568,11 @@ 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,8 +3751,6 @@ 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,8 +117,7 @@
|
||||
"@opencode-ai/sdk": "1.14.46",
|
||||
"@opencode/client": "2.0.10",
|
||||
"@xterm/addon-serialize": "0.14.0",
|
||||
"@xterm/addon-unicode-graphemes": "0.5.0-beta.330",
|
||||
"@xterm/headless": "6.1.0-beta.334",
|
||||
"@xterm/headless": "^6.0.0",
|
||||
"ai": "5.0.78",
|
||||
"ajv": "^8.20.0",
|
||||
"bcryptjs": "^3.0.3",
|
||||
|
||||
@@ -1157,7 +1157,6 @@ 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,8 +2077,6 @@ 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,
|
||||
|
||||
@@ -1,60 +0,0 @@
|
||||
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));
|
||||
});
|
||||
});
|
||||
@@ -1,22 +0,0 @@
|
||||
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,71 +563,6 @@ 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 type { Terminal as TerminalType } from "@xterm/headless";
|
||||
import xterm, { type Terminal as TerminalType } from "@xterm/headless";
|
||||
import { randomUUID } from "crypto";
|
||||
import {
|
||||
accessSync,
|
||||
@@ -25,7 +25,6 @@ import {
|
||||
findExecutable,
|
||||
findExecutableWithoutProbing,
|
||||
} from "../executable-resolution/executable-resolution.js";
|
||||
import { createHeadlessTerminal } from "./headless-terminal.js";
|
||||
import { createTerminalSerializer } from "./terminal-serializer.js";
|
||||
import {
|
||||
captureTerminalLines,
|
||||
@@ -37,6 +36,7 @@ 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,7 +796,13 @@ export async function createTerminal(
|
||||
const activityChangeListeners = new Set<(transition: TerminalActivityTransition) => void>();
|
||||
let titleChangeSubscription: { dispose(): void } | null = null;
|
||||
|
||||
const terminal = createHeadlessTerminal({ rows, cols, scrollback: 10000 });
|
||||
// Create xterm.js headless terminal
|
||||
const terminal = new Terminal({
|
||||
rows,
|
||||
cols,
|
||||
scrollback: 10000,
|
||||
allowProposedApi: true,
|
||||
});
|
||||
|
||||
const serialize = createTerminalSerializer(terminal);
|
||||
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
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 = createHeadlessTerminal({
|
||||
const terminal = new xterm.Terminal({
|
||||
rows: metadata.rows,
|
||||
cols: metadata.cols,
|
||||
scrollback: 10000,
|
||||
allowProposedApi: true,
|
||||
});
|
||||
try {
|
||||
await new Promise<void>((resolve) => terminal.write(data, resolve));
|
||||
|
||||
@@ -1851,8 +1851,7 @@ 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");
|
||||
// Seeing the marker must mean no trailing newline can still add history.
|
||||
process.stdout.write("READY-WIDE");
|
||||
process.stdout.write("READY-WIDE\\r\\n");
|
||||
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);
|
||||
`),
|
||||
|
||||
@@ -705,3 +705,59 @@ index a9c1804..f5a3c20 100644
|
||||
|
||||
return Insets(
|
||||
this._insets.top / density,
|
||||
diff --git a/node_modules/react-native-unistyles/cxx/shadowTree/ShadowTreeManager.cpp b/node_modules/react-native-unistyles/cxx/shadowTree/ShadowTreeManager.cpp
|
||||
index 01026dc..3786ec4 100644
|
||||
--- a/node_modules/react-native-unistyles/cxx/shadowTree/ShadowTreeManager.cpp
|
||||
+++ b/node_modules/react-native-unistyles/cxx/shadowTree/ShadowTreeManager.cpp
|
||||
@@ -17,13 +17,16 @@ void shadow::ShadowTreeManager::updateShadowTree(jsi::Runtime& rt) {
|
||||
}
|
||||
|
||||
#if REACT_NATIVE_VERSION_MINOR >= 81
|
||||
- std::unordered_map<Tag, folly::dynamic> tagToProps;
|
||||
+ // Paseo backport of https://github.com/jpudysz/react-native-unistyles/pull/1357.
|
||||
+ // UIManager::updateShadowTree commits a root cloned before the commit, so when a
|
||||
+ // window-size commit (rotation, keyboard) lands in between, the retried Unistyles
|
||||
+ // commit puts the previous layout constraints back and the app stays laid out for
|
||||
+ // the old size. Commit here instead and clone from the root the commit hands us.
|
||||
+ std::unordered_set<SurfaceId> affectedSurfaces;
|
||||
|
||||
for (const auto& [family, props] : updates) {
|
||||
auto safeProps = props.isObject() ? props : folly::dynamic::object();
|
||||
|
||||
- tagToProps.insert({family->getTag(), safeProps});
|
||||
-
|
||||
auto* mutableFamily = const_cast<ShadowNodeFamily*>(family);
|
||||
|
||||
if (mutableFamily->nativeProps_DEPRECATED && mutableFamily->nativeProps_DEPRECATED->isObject()) {
|
||||
@@ -31,9 +34,30 @@ void shadow::ShadowTreeManager::updateShadowTree(jsi::Runtime& rt) {
|
||||
} else {
|
||||
mutableFamily->nativeProps_DEPRECATED = std::make_unique<folly::dynamic>(safeProps);
|
||||
}
|
||||
+
|
||||
+ affectedSurfaces.insert(family->getSurfaceId());
|
||||
}
|
||||
|
||||
- UIManagerBinding::getBinding(rt)->getUIManager().updateShadowTree(std::move(tagToProps));
|
||||
+ const auto& shadowTreeRegistry = UIManagerBinding::getBinding(rt)->getUIManager().getShadowTreeRegistry();
|
||||
+
|
||||
+ shadowTreeRegistry.enumerate([&updates, &affectedSurfaces](const ShadowTree& shadowTree, bool&){
|
||||
+ if (!affectedSurfaces.contains(shadowTree.getSurfaceId())) {
|
||||
+ return;
|
||||
+ }
|
||||
+
|
||||
+ auto transaction = [&updates](const RootShadowNode& oldRootShadowNode) -> RootShadowNode::Unshared {
|
||||
+ auto affectedNodes = shadow::ShadowTreeManager::findAffectedNodes(oldRootShadowNode, updates);
|
||||
+
|
||||
+ return std::static_pointer_cast<RootShadowNode>(shadow::ShadowTreeManager::cloneShadowTree(
|
||||
+ oldRootShadowNode,
|
||||
+ updates,
|
||||
+ affectedNodes
|
||||
+ ));
|
||||
+ };
|
||||
+
|
||||
+ // mountSynchronously: this is an update from C++, not React
|
||||
+ shadowTree.commit(transaction, {false, true});
|
||||
+ });
|
||||
#else
|
||||
const auto& shadowTreeRegistry = UIManagerBinding::getBinding(rt)->getUIManager().getShadowTreeRegistry();
|
||||
|
||||
|
||||
@@ -28,6 +28,9 @@ const patchedPackages = [
|
||||
// withUnistyles: also keep the uniProps filter until upstream consumes its control prop.
|
||||
// Android configuration: backport 3.5.3; remove the two NativePlatform hunks at >= 3.5.3.
|
||||
// https://github.com/jpudysz/react-native-unistyles/compare/v3.5.2...v3.5.3
|
||||
// Layout constraints: backport of https://github.com/jpudysz/react-native-unistyles/pull/1357
|
||||
// (commit from the root the commit hands us, so a concurrent window-size commit is kept).
|
||||
// Remove the ShadowTreeManager hunk when the installed release includes that PR.
|
||||
{
|
||||
nodeModulesPath: "node_modules/react-native-unistyles",
|
||||
patchPrefix: "react-native-unistyles+",
|
||||
|
||||
Reference in New Issue
Block a user