fix(web): the terminal cursor no longer leaves faint lines when it blinks off#21641

Problem

At a fractional device pixel ratio the integrated terminal's cursor leaves two faint lines at the top and bottom of its cell when it blinks off (https://git.cafe/pingdotgg/t3code/issues/11402). On a Mac that happens after View > Zoom In in the desktop app (one step gives a ratio of about 2.19) or with browser zoom on web; elsewhere at a 125% or 150% display scale. Row edges then fall partway through device pixels, so the row's background repaint only partly covers the cursor's edge pixels and blends over them instead of replacing them.

Change

renderGhosttySnapshot in apps/web/src/terminal/ghostty/renderer.ts puts each row's top and bottom on whole device pixels, using the canvas transform's scale, and draws the row's background, selection, text clip, solid Powerline separators (https://git.cafe/pingdotgg/t3code/pulls/5607) and the cursor with that snapped height. Neighbouring rows share an exact edge, so repainting a row replaces every pixel it drew. At a whole-number ratio, such as the default 2 on a Retina display, nothing moves. The mocked context in surface.test.ts gets a getTransform stub.

Scope and approval

https://git.cafe/pingdotgg/t3code/issues/11402 is a triaged bug; the triage suggests "snap row/cursor Y to the device pixel grid" with an offscreen-canvas pixel test. When closing https://git.cafe/pingdotgg/t3code/pulls/11620, @juliusmarminge invited a smaller version: "If you want to send that smaller version with an offscreen-canvas pixel test at a fractional origin, that would be welcome." This rebuilds @Lucenx9's https://git.cafe/pingdotgg/t3code/pulls/11424 (the same snapping) on current main, as its closing comment suggested, with a real-canvas test in place of the mocked one.

One correction to the triage: on main the row origin is always a whole CSS pixel (clientHeight and the cell height are integers), so the fractional edges come from the device pixel ratio. Snapping only the origin in surface.ts would leave every later row between device pixels, which is why the snap is per row and why the test uses a fractional canvas transform. Web and desktop share this renderer; the triage notes mobile's native terminal does not use it.

Verification

• New renderer.browser.test.ts draws on a real Chromium canvas at 1.25x and 2.2x for the bar, block, underline and hollow cursors: cursor on, then off, then a count of the pixels that are not the background. On main all 8 fail, leaving 6 to 36 pixels (2.2x block: 36, an 18-pixel line at the top and the bottom of the cell); with the change all 8 pass with 0. A second case draws a separator, then repaints only its row without it: with https://git.cafe/pingdotgg/t3code/pulls/5607's unsnapped height it leaves 1 pixel below the row at both ratios, with the change 0. surface.test.ts: 28 passed. vp lint, vp fmt --check and the web typecheck are clean.

• Real app: the dev desktop app from this branch on a fresh .t3 with a throwaway project, light theme, terminal focused at an idle prompt. I set the ratio to 2.2 over CDP (Emulation.setDeviceMetricsOverride), close to the 2.19 one Zoom In step gives, since the menu's Zoom In can't be driven from the automation. The terminal canvas region was exported every 100 ms for 3 s (exact canvas pixels, not a screen capture):

  	blink-off frames	pixels left in the cursor cell, every off frame
  main	15	36 (device rows 8 and 48, 18 each)
  this branch	15	0

  At the default ratio of 2 this branch also leaves 0 in all 14 off frames.

  Cursor off at 2.2x, before (6x, nearest neighbour):

  Before: two faint lines stay where the cursor was

  After:

  After: the cell is clear

  Blinking, before on the left and after on the right (4x):

  Blinking, before left and after right

• Not checked: Windows or Linux at a fractional display scale (same renderer and arithmetic), and the Zoom In menu item itself. Not changed: horizontal edges, which only matter for a cursor or separator at either end of a row, where it meets the row repaint's own edge; the issue reports the top and bottom lines.

Claude Opus 5.5 via T3 Code

Fixes #11402 GitCafe: https://git.cafe/pingdotgg/t3code/issues/11402

Evidence

Maintainer captures of the real web app's integrated terminal. Before is main at 8d3b061121. After is this branch's head 2a5ca7fae5 with that main merged in locally (a1c2f1e5f3). The branch is on a fork, so that merge was not pushed: the branch still needs a merge of main (205 commits behind). Between before and after, only the three files in this PR differ.

Environment for every capture: chromium-headless-shell 148.0.7778.96 (Playwright 1.60.0), CSS viewport 1280×800, zoom 100%. The device pixel ratio is set with CDP Emulation.setDeviceMetricsOverride deviceScaleFactor, not browser zoom, so the layout is identical at every ratio. The terminal uses the default font family at 11 px (15 px rows, so row edges fall on fractional device pixels) and runs bash --norc --noprofile. Each dev server ran on its own isolated state.

The number in each row is how many pixels that differ from the background remain in the cursor cell (±1 device px) on a blink-off frame, read from the canvas right after an on→off transition. Each sheet shows the zoomed before and after cursor cell, a zero-threshold cell diff, and the whole panel before and after with a zero-threshold panel diff.

Cursor off at 2.2, dark (S5). Before leaves lines at the top and bottom of the cell; after leaves nothing:

S5: at DPR 2.2, before leaves two lines in the cursor cell when the cursor blinks off; after the cell is clear

Recordings are about 6 s each, roughly 6 blink cycles at 500 ms on and 500 ms off, with before on the left and after on the right. They are canvas frames copied on every animation frame and upscaled nearest-neighbour. The two halves come from separate sessions, so their blink phases are up to 0.5 s apart. In each off phase at 1.25 and 1.5, the left half keeps a one-device-pixel line at the bottom of the cell; at 2.2 it keeps lines at the top and bottom. The right half's cell is empty. At DPR 1 and 2 both halves stay clean.

• R1 DPR 1, dark, block
• R2 DPR 1.25, dark, block
• R3 DPR 1.5, dark, block
• R4 DPR 2, dark, block
• R5 DPR 2.2, dark, block
• R6 DPR 1.25, light, block
• R7 DPR 2.2, light, block
• R8 DPR 1.25, dark, bar
• P1 DPR 1.25, dark, cursor on a Powerline separator

What else changed:

• At DPR 1 and 2, no pixel in the whole panel differs.
• At fractional ratios on main, the dark theme shows faint full-width seams at row boundaries, 2/255 or less from the background. This branch removes them, which is why the whole-panel diffs there count 11k to 40k pixels.
• No glyph pixel differs in any row.
• The visible cursor block can move by up to 1 device px. At 2.2 it starts 1 px lower and is still solid.
• A handful of single pixels at the panel's edge or padding corner differ by 1 to 8 levels.

Driver: capture.mjs, compose.mjs, pair.mjs. Raw PNGs and JSON: raw-captures-21641.tar.gz. Fixture matrix: matrix.md.