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.

packages/app/src/components/terminal-emulator-contract.ts

@@ -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;

packages/app/src/components/terminal-emulator-native-grid.native.tsx

@@ -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,
   ]);
 

packages/app/src/components/terminal-emulator.tsx

@@ -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,

packages/app/src/components/terminal-pane.tsx

@@ -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}

packages/app/src/terminal/character-widths.ts

@@ -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";

packages/app/src/terminal/native-renderer/headless-terminal-state.test.ts

@@ -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);
+  });
 });

packages/app/src/terminal/native-renderer/headless-terminal-state.ts

@@ -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>();

packages/app/src/terminal/native-renderer/terminal-frame.test.ts

@@ -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();

packages/app/src/terminal/runtime/terminal-emulator-runtime.browser.test.ts

@@ -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 () => {

packages/app/src/terminal/runtime/terminal-emulator-runtime.test.ts

@@ -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 {}

packages/app/src/terminal/runtime/terminal-emulator-runtime.ts

@@ -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 {