@vibecook/ghosttea-react 0.8.0 → 0.9.1

package/dist/renderers/webgpu-renderer.js

@@ -1,11 +1,22 @@
 /// <reference types="@webgpu/types" />
 import { CursorStyle, GlyphFormat } from "@vibecook/ghosttea-frame";
+import { emptyRenderMetrics } from "../performance.js";
 import { CELL_WIDTH, LINE_HEIGHT, ORIGIN_X, ORIGIN_Y, effectiveCursorStyle, renderedSizeChanged, } from "./types.js";
 import { graphemeCellWidth, splitGraphemes } from "../cell-width.js";
 import { rowsForDamage } from "./render-damage.js";
+import { SHADER_EFFECT_WGSL } from "./shader-effects.js";
 const ATLAS_SIZE = 2048;
 const GEOMETRY_CACHE_LIMIT = 8;
 const FONT_STACK = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace";
+const EFFECT_MODES = {
+    "ghosttea:better-crt": 1,
+    "ghosttea:crt": 2,
+    "ghosttea:vhs": 3,
+    "ghosttea:sparks-from-fire": 4,
+};
+export function effectIntermediateTextureCount(effectPassCount) {
+    return Math.min(2, Math.max(0, Math.trunc(effectPassCount) - 1));
+}
 const RECT_SHADER = /* wgsl */ `
 struct VertexOutput {
   @builtin(position) position: vec4f,
@@ -130,54 +141,13 @@ struct VertexOutput {
   return textureSample(atlas, atlas_sampler, input.uv);
 }
 `;
-// WebGPU port of ~/.config/ghostty/shaders/bettercrt.glsl. Ghostty applies
-// custom shaders to the completed terminal image, so this must remain a
-// separate pass rather than being approximated per glyph.
-const BETTER_CRT_SHADER = /* wgsl */ `
-@group(0) @binding(0) var terminal_image: texture_2d<f32>;
-@group(0) @binding(1) var terminal_sampler: sampler;
-struct PostProcessConfig {
-  // A vec4 keeps the WGSL uniform layout equal to the host's 16-byte buffer.
-  enabled: vec4u,
-}
-@group(0) @binding(2) var<uniform> post_process: PostProcessConfig;
-
-@vertex fn vertex_main(@builtin(vertex_index) vertex_index: u32) -> @builtin(position) vec4f {
-  let positions = array<vec2f, 3>(
-    vec2f(-1.0, -1.0),
-    vec2f(3.0, -1.0),
-    vec2f(-1.0, 3.0),
-  );
-  return vec4f(positions[vertex_index], 0.0, 1.0);
-}
-
-@fragment fn fragment_main(@builtin(position) position: vec4f) -> @location(0) vec4f {
-  let dimensions = vec2f(textureDimensions(terminal_image));
-  var uv = position.xy / dimensions;
-  if (post_process.enabled.x == 0u) {
-    return textureSample(terminal_image, terminal_sampler, uv);
-  }
-  var dc = abs(vec2f(0.5) - uv);
-  dc *= dc;
-
-  // These constants are the active Ghostty shader's warp = 0.25 and
-  // scan = 0.50 values.
-  uv.x -= 0.5;
-  uv.x *= 1.0 + dc.y * 0.075;
-  uv.x += 0.5;
-  uv.y -= 0.5;
-  uv.y *= 1.0 + dc.x * 0.10;
-  uv.y += 0.5;
-
-  let scanline = abs(sin(position.y) * 0.125);
-  let color = textureSample(terminal_image, terminal_sampler, uv).rgb;
-  return vec4f(mix(color, vec3f(0.0), scanline), 1.0);
-}
-`;
 const premultipliedBlend = {
     color: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
     alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
 };
+function premultipliedClear(color) {
+    return { r: color[0] * color[3], g: color[1] * color[3], b: color[2] * color[3], a: color[3] };
+}
 class DynamicVertexBuffer {
     device;
     label;
@@ -479,16 +449,20 @@ function geometryCacheKey(view, rows, hasNativeRows, atlasGenerations) {
         [
             ...view.theme.background,
             ...view.theme.foreground,
+            ...view.theme.cursor,
+            ...(view.theme.cursorText ?? view.theme.background),
             ...view.theme.selection,
             ...view.theme.selectionForeground,
         ].join(","),
+        view.theme.backgroundOpacityCells ? "opacity-cells" : "opaque-cells",
         selection,
+        effectiveCursorStyle(view) === CursorStyle.Block ? `${view.cursor.x},${view.cursor.y}` : "-",
         atlasGenerations.join(","),
     ].join("|");
 }
 function pushCursorVertices(vertices, view, renderRowSet, scale, viewportWidth, viewportHeight) {
     const cursorStyle = effectiveCursorStyle(view);
-    if (cursorStyle === null || !renderRowSet.has(view.cursor.y))
+    if (cursorStyle === null || cursorStyle === CursorStyle.Block || !renderRowSet.has(view.cursor.y))
         return;
     const x = (ORIGIN_X + view.cursor.x * CELL_WIDTH) * scale;
     const y = (ORIGIN_Y + view.cursor.y * LINE_HEIGHT) * scale;
@@ -672,6 +646,17 @@ function selectionContains(selection, row, column) {
     const last = row === end.row ? end.column : Number.MAX_SAFE_INTEGER;
     return column >= first && column <= last;
 }
+function blockCursorContains(view, row, column, span = 1) {
+    return (effectiveCursorStyle(view) === CursorStyle.Block &&
+        view.cursor.y === row &&
+        view.cursor.x >= column &&
+        view.cursor.x < column + Math.max(1, span));
+}
+function pushBlockCursorBackground(vertices, view, renderRows, scale, viewportWidth, viewportHeight) {
+    if (effectiveCursorStyle(view) !== CursorStyle.Block || !renderRows.includes(view.cursor.y))
+        return;
+    pushRectangle(vertices, (ORIGIN_X + view.cursor.x * CELL_WIDTH) * scale, (ORIGIN_Y + view.cursor.y * LINE_HEIGHT) * scale, CELL_WIDTH * scale, LINE_HEIGHT * scale, view.theme.cursor, viewportWidth, viewportHeight);
+}
 function resolveStyle(style, theme) {
     let foreground = style?.foreground ? rgb(style.foreground) : theme.foreground;
     let background = style?.background ? rgb(style.background) : null;
@@ -680,6 +665,9 @@ function resolveStyle(style, theme) {
         foreground = background ?? theme.background;
         background = originalForeground;
     }
+    if (background && theme.backgroundOpacityCells) {
+        background = [background[0], background[1], background[2], theme.background[3]];
+    }
     if (style?.faint)
         foreground = [foreground[0], foreground[1], foreground[2], foreground[3] * 0.55];
     return {
@@ -822,11 +810,12 @@ export class WebGpuTerminalRenderer {
     kind = "webgpu";
     #surfaces = new Map();
     #rectanglePipeline;
+    #rectangleOverwritePipeline;
     #glyphPipeline;
     #fallbackGlyphPipeline;
     #colorGlyphPipeline;
-    #postProcessPipeline;
-    #postProcessSampler;
+    #effectPipeline;
+    #effectSampler;
     #monoAtlas;
     #colorAtlas;
     #fallbackAtlas;
@@ -844,7 +833,10 @@ export class WebGpuTerminalRenderer {
             label: "terminal color glyph shader",
             code: COLOR_GLYPH_SHADER,
         });
-        const postProcessModule = device.createShaderModule({ label: "Ghostty bettercrt shader", code: BETTER_CRT_SHADER });
+        const effectModule = device.createShaderModule({
+            label: "Ghosttea shader effect registry",
+            code: SHADER_EFFECT_WGSL,
+        });
         this.#rectanglePipeline = device.createRenderPipeline({
             label: "terminal rectangle pipeline",
             layout: "auto",
@@ -871,6 +863,28 @@ export class WebGpuTerminalRenderer {
             },
             primitive: { topology: "triangle-list" },
         });
+        this.#rectangleOverwritePipeline = device.createRenderPipeline({
+            label: "terminal row-reset overwrite pipeline",
+            layout: "auto",
+            vertex: {
+                module: rectangleModule,
+                entryPoint: "vertex_main",
+                buffers: [
+                    {
+                        arrayStride: 40,
+                        stepMode: "instance",
+                        attributes: [
+                            { shaderLocation: 0, offset: 0, format: "float32x2" },
+                            { shaderLocation: 1, offset: 8, format: "float32x2" },
+                            { shaderLocation: 2, offset: 16, format: "float32x2" },
+                            { shaderLocation: 3, offset: 24, format: "float32x4" },
+                        ],
+                    },
+                ],
+            },
+            fragment: { module: rectangleModule, entryPoint: "fragment_main", targets: [{ format }] },
+            primitive: { topology: "triangle-list" },
+        });
         this.#glyphPipeline = device.createRenderPipeline({
             label: "terminal glyph pipeline",
             layout: "auto",
@@ -942,15 +956,15 @@ export class WebGpuTerminalRenderer {
             },
             primitive: { topology: "triangle-list" },
         });
-        this.#postProcessPipeline = device.createRenderPipeline({
-            label: "Ghostty custom shader pipeline",
+        this.#effectPipeline = device.createRenderPipeline({
+            label: "Ghosttea ordered shader effect pipeline",
             layout: "auto",
-            vertex: { module: postProcessModule, entryPoint: "vertex_main" },
-            fragment: { module: postProcessModule, entryPoint: "fragment_main", targets: [{ format }] },
+            vertex: { module: effectModule, entryPoint: "vertex_main" },
+            fragment: { module: effectModule, entryPoint: "fragment_main", targets: [{ format }] },
             primitive: { topology: "triangle-list" },
         });
-        this.#postProcessSampler = device.createSampler({
-            label: "Ghostty custom shader sampler",
+        this.#effectSampler = device.createSampler({
+            label: "Ghosttea shader effect sampler",
             addressModeU: "clamp-to-edge",
             addressModeV: "clamp-to-edge",
             minFilter: "linear",
@@ -984,18 +998,15 @@ export class WebGpuTerminalRenderer {
         if (!context)
             throw new Error("WebGPU canvas context unavailable");
         const sceneTexture = this.#createSceneTexture(canvas.width, canvas.height);
-        const postProcessConfigBuffer = this.device.createBuffer({
-            label: `Ghostty custom shader configuration ${id}`,
-            size: 16,
-            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-        });
         const surface = {
             canvas,
             context,
             sceneTexture,
-            postProcessConfigBuffer,
-            postProcessBindGroup: this.#createPostProcessBindGroup(sceneTexture, postProcessConfigBuffer),
-            postProcessEnabled: undefined,
+            effectTextures: [],
+            effectPasses: [],
+            effectSignature: "",
+            effectFrame: 0,
+            lastEffectTime: 0,
             width: 1,
             height: 1,
             dpr: 1,
@@ -1017,7 +1028,10 @@ export class WebGpuTerminalRenderer {
             return;
         surface.context.unconfigure();
         surface.sceneTexture.destroy();
-        surface.postProcessConfigBuffer.destroy();
+        for (const texture of surface.effectTextures)
+            texture.destroy();
+        for (const pass of surface.effectPasses)
+            pass.configBuffer.destroy();
         surface.rectangleBuffer.destroy();
         surface.glyphBuffer.destroy();
         surface.colorGlyphBuffer.destroy();
@@ -1041,8 +1055,14 @@ export class WebGpuTerminalRenderer {
     #configure(surface) {
         surface.context.configure({ device: this.device, format: this.format, alphaMode: "premultiplied" });
         surface.sceneTexture.destroy();
+        for (const texture of surface.effectTextures)
+            texture.destroy();
+        for (const pass of surface.effectPasses)
+            pass.configBuffer.destroy();
         surface.sceneTexture = this.#createSceneTexture(surface.canvas.width, surface.canvas.height);
-        surface.postProcessBindGroup = this.#createPostProcessBindGroup(surface.sceneTexture, surface.postProcessConfigBuffer);
+        surface.effectTextures = [];
+        surface.effectPasses = [];
+        surface.effectSignature = "";
         clearGeometryCache(surface);
         surface.sceneValid = false;
     }
@@ -1054,26 +1074,124 @@ export class WebGpuTerminalRenderer {
             usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
         });
     }
-    #createPostProcessBindGroup(texture, configBuffer) {
+    #createEffectTexture(width, height, suffix) {
+        return this.device.createTexture({
+            label: `terminal shader ping-pong ${suffix}`,
+            size: [Math.max(1, width), Math.max(1, height)],
+            format: this.format,
+            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+        });
+    }
+    #createEffectBindGroup(texture, configBuffer) {
         return this.device.createBindGroup({
-            label: "Ghostty custom shader bindings",
-            layout: this.#postProcessPipeline.getBindGroupLayout(0),
+            label: "Ghosttea shader effect bindings",
+            layout: this.#effectPipeline.getBindGroupLayout(0),
             entries: [
                 { binding: 0, resource: texture.createView() },
-                { binding: 1, resource: this.#postProcessSampler },
+                { binding: 1, resource: this.#effectSampler },
                 { binding: 2, resource: { buffer: configBuffer } },
             ],
         });
     }
+    #shaderStack(view) {
+        const configured = view.effects?.shaderEffects?.filter((id) => EFFECT_MODES[id] !== undefined) ?? [];
+        if (configured.length > 0)
+            return [...configured];
+        return view.effects?.postProcess === "better-crt" ? ["ghosttea:better-crt"] : [];
+    }
+    #ensureEffectPasses(surface, stack) {
+        const signature = stack.join("\0") || "ghosttea:blit";
+        if (surface.effectSignature === signature)
+            return;
+        for (const pass of surface.effectPasses)
+            pass.configBuffer.destroy();
+        const modes = stack.length > 0 ? stack.map((id) => EFFECT_MODES[id]) : [0];
+        const intermediateCount = effectIntermediateTextureCount(modes.length);
+        while (surface.effectTextures.length > intermediateCount)
+            surface.effectTextures.pop().destroy();
+        while (surface.effectTextures.length < intermediateCount) {
+            const suffix = surface.effectTextures.length === 0 ? "A" : "B";
+            surface.effectTextures.push(this.#createEffectTexture(surface.canvas.width, surface.canvas.height, suffix));
+        }
+        surface.effectPasses = modes.map((mode, index) => {
+            const configBuffer = this.device.createBuffer({
+                label: `Ghosttea shader effect configuration ${index}`,
+                size: 48,
+                usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+            });
+            const inputTexture = index === 0 ? surface.sceneTexture : surface.effectTextures[(index - 1) % 2];
+            return {
+                mode,
+                configBuffer,
+                bindGroup: this.#createEffectBindGroup(inputTexture, configBuffer),
+            };
+        });
+        surface.effectSignature = signature;
+        surface.effectFrame = 0;
+        surface.lastEffectTime = 0;
+    }
+    #encodeEffectStack(surface, view, encoder) {
+        const stack = this.#shaderStack(view);
+        this.#ensureEffectPasses(surface, stack);
+        const now = view.effects?.animate ? performance.now() / 1_000 : 0;
+        const delta = surface.lastEffectTime > 0 ? Math.min(0.1, Math.max(0, now - surface.lastEffectTime)) : 0;
+        surface.lastEffectTime = now;
+        const passCount = surface.effectPasses.length;
+        for (let index = 0; index < passCount; index += 1) {
+            const effectPass = surface.effectPasses[index];
+            const storage = new ArrayBuffer(48);
+            const values = new DataView(storage);
+            values.setUint32(0, effectPass.mode, true);
+            values.setUint32(4, surface.effectFrame, true);
+            values.setUint32(8, index, true);
+            values.setUint32(12, passCount, true);
+            values.setFloat32(16, surface.canvas.width, true);
+            values.setFloat32(20, surface.canvas.height, true);
+            values.setFloat32(24, now, true);
+            values.setFloat32(28, delta, true);
+            values.setFloat32(32, (ORIGIN_X + view.cursor.x * CELL_WIDTH) * surface.dpr, true);
+            values.setFloat32(36, (ORIGIN_Y + view.cursor.y * LINE_HEIGHT) * surface.dpr, true);
+            values.setFloat32(40, view.cursor.visible ? 1 : 0, true);
+            values.setFloat32(44, view.cursor.style, true);
+            this.device.queue.writeBuffer(effectPass.configBuffer, 0, storage);
+            const last = index === passCount - 1;
+            const output = last
+                ? surface.context.getCurrentTexture().createView()
+                : surface.effectTextures[index % 2].createView();
+            const pass = encoder.beginRenderPass({
+                label: `Ghosttea shader effect pass ${index + 1}/${passCount}`,
+                colorAttachments: [
+                    {
+                        view: output,
+                        clearValue: { r: 0, g: 0, b: 0, a: 0 },
+                        loadOp: "clear",
+                        storeOp: "store",
+                    },
+                ],
+            });
+            pass.setPipeline(this.#effectPipeline);
+            pass.setBindGroup(0, effectPass.bindGroup);
+            pass.draw(3);
+            pass.end();
+        }
+        surface.effectFrame += 1;
+        return passCount;
+    }
+    #encodeEffectsOnly(surface, view, encoder) {
+        const effectPassCount = this.#encodeEffectStack(surface, view, encoder);
+        if (!this.#performanceMeasurementEnabled)
+            return undefined;
+        return {
+            ...emptyRenderMetrics(),
+            canvasPixels: surface.canvas.width * surface.canvas.height,
+            renderPasses: effectPassCount,
+            drawCalls: effectPassCount,
+        };
+    }
     render(id, view) {
         const surface = this.#surfaces.get(id);
         if (!surface)
             return;
-        const postProcessEnabled = view.effects?.postProcess === "better-crt";
-        if (surface.postProcessEnabled !== postProcessEnabled) {
-            surface.postProcessEnabled = postProcessEnabled;
-            this.device.queue.writeBuffer(surface.postProcessConfigBuffer, 0, new Uint32Array([Number(postProcessEnabled), 0, 0, 0]));
-        }
         const encoder = this.device.createCommandEncoder({ label: `terminal frame ${id}` });
         const metrics = view.damage?.geometryChanged === false
             ? this.#encodeCachedRender(id, view, encoder)
@@ -1090,12 +1208,6 @@ export class WebGpuTerminalRenderer {
         const encoder = this.device.createCommandEncoder({ label: `terminal frame batch (${active.length} panes)` });
         const byId = new Map();
         for (const { id, view } of active) {
-            const surface = this.#surfaces.get(id);
-            const postProcessEnabled = view.effects?.postProcess === "better-crt";
-            if (surface.postProcessEnabled !== postProcessEnabled) {
-                surface.postProcessEnabled = postProcessEnabled;
-                this.device.queue.writeBuffer(surface.postProcessConfigBuffer, 0, new Uint32Array([Number(postProcessEnabled), 0, 0, 0]));
-            }
             byId.set(id, view.damage?.geometryChanged === false
                 ? this.#encodeCachedRender(id, view, encoder)
                 : this.#encodeRender(id, view, encoder));
@@ -1138,12 +1250,10 @@ export class WebGpuTerminalRenderer {
                 const bottom = row === rowCount - 1
                     ? viewportHeight
                     : Math.min(viewportHeight, (ORIGIN_Y + (row + 1) * LINE_HEIGHT) * scale);
-                pushRectangle(rectangleVertices, 0, top, viewportWidth, Math.max(0, bottom - top), 
-                // The rectangle pipeline blends. Force the row reset opaque so it
-                // replaces stale scene pixels even when a theme carries alpha.
-                [view.theme.background[0], view.theme.background[1], view.theme.background[2], 1], viewportWidth, viewportHeight);
+                pushRectangle(rectangleVertices, 0, top, viewportWidth, Math.max(0, bottom - top), view.theme.background, viewportWidth, viewportHeight);
             }
         }
+        const rowResetInstanceCount = rectangleVertices.length / 10;
         for (const row of renderRows) {
             for (const run of view.nativeStyleRows[row] ?? []) {
                 const style = styleFor(run.styleId);
@@ -1164,6 +1274,7 @@ export class WebGpuTerminalRenderer {
                 pushRectangle(rectangleVertices, (ORIGIN_X + first * CELL_WIDTH) * scale, (ORIGIN_Y + row * LINE_HEIGHT) * scale, Math.max(1, last - first + 1) * CELL_WIDTH * scale, LINE_HEIGHT * scale, view.theme.selection, viewportWidth, viewportHeight);
             }
         }
+        pushBlockCursorBackground(rectangleVertices, view, renderRows, scale, viewportWidth, viewportHeight);
         const selectionInstanceCount = rectangleVertices.length / 10 - backgroundInstanceCount;
         if (!hasNativeRows) {
             this.#fallbackAtlas.prepare(renderRows.flatMap((row) => splitGraphemes(view.rows[row] ?? "")), scale);
@@ -1179,7 +1290,11 @@ export class WebGpuTerminalRenderer {
                     if (style.invisible)
                         continue;
                     const isSelected = selectionContains(selection, row, instance.cellStart);
-                    const foreground = isSelected ? view.theme.selectionForeground : style.foreground;
+                    const foreground = blockCursorContains(view, row, instance.cellStart, instance.cellSpan)
+                        ? (view.theme.cursorText ?? view.theme.background)
+                        : isSelected
+                            ? view.theme.selectionForeground
+                            : style.foreground;
                     const boxDrawing = boxCells.get(instance.cellStart);
                     if (boxDrawing) {
                         let backdrop = style.background ?? view.theme.background;
@@ -1211,9 +1326,11 @@ export class WebGpuTerminalRenderer {
                     const glyph = this.#fallbackAtlas.glyph(grapheme, scale);
                     const cells = glyph?.cells ?? graphemeCellWidth(grapheme);
                     if (glyph) {
-                        const foreground = selectionContains(selection, row, column)
-                            ? view.theme.selectionForeground
-                            : view.theme.foreground;
+                        const foreground = blockCursorContains(view, row, column, cells)
+                            ? (view.theme.cursorText ?? view.theme.background)
+                            : selectionContains(selection, row, column)
+                                ? view.theme.selectionForeground
+                                : view.theme.foreground;
                         pushGlyph(fallbackGlyphVertices, (ORIGIN_X + column * CELL_WIDTH) * scale, (ORIGIN_Y + row * LINE_HEIGHT) * scale, CELL_WIDTH * cells * scale, LINE_HEIGHT * scale, glyph, foreground, viewportWidth, viewportHeight);
                     }
                     column += cells;
@@ -1244,6 +1361,7 @@ export class WebGpuTerminalRenderer {
             glyphData: new Float32Array(glyphVertices),
             colorGlyphData: new Float32Array(colorGlyphVertices),
             fallbackGlyphData: new Float32Array(fallbackGlyphVertices),
+            rowResetInstanceCount,
             backgroundInstanceCount,
             selectionInstanceCount,
             decorationInstanceStart,
@@ -1298,12 +1416,10 @@ export class WebGpuTerminalRenderer {
                 const bottom = row === rowCount - 1
                     ? viewportHeight
                     : Math.min(viewportHeight, (ORIGIN_Y + (row + 1) * LINE_HEIGHT) * scale);
-                pushRectangle(rectangleVertices, 0, top, viewportWidth, Math.max(0, bottom - top), 
-                // The rectangle pipeline blends. Force the row reset opaque so it
-                // replaces stale scene pixels even when a theme carries alpha.
-                [view.theme.background[0], view.theme.background[1], view.theme.background[2], 1], viewportWidth, viewportHeight);
+                pushRectangle(rectangleVertices, 0, top, viewportWidth, Math.max(0, bottom - top), view.theme.background, viewportWidth, viewportHeight);
             }
         }
+        const rowResetInstanceCount = rectangleVertices.length / 10;
         for (const row of renderRows) {
             for (const run of view.nativeStyleRows[row] ?? []) {
                 const style = styleFor(run.styleId);
@@ -1324,6 +1440,7 @@ export class WebGpuTerminalRenderer {
                 pushRectangle(rectangleVertices, (ORIGIN_X + first * CELL_WIDTH) * scale, (ORIGIN_Y + row * LINE_HEIGHT) * scale, Math.max(1, last - first + 1) * CELL_WIDTH * scale, LINE_HEIGHT * scale, view.theme.selection, viewportWidth, viewportHeight);
             }
         }
+        pushBlockCursorBackground(rectangleVertices, view, renderRows, scale, viewportWidth, viewportHeight);
         const selectionInstanceCount = rectangleVertices.length / 10 - backgroundInstanceCount;
         const hasNativeRows = view.nativeRows.some((row) => row.length > 0);
         if (!hasNativeRows) {
@@ -1340,7 +1457,11 @@ export class WebGpuTerminalRenderer {
                     if (style.invisible)
                         continue;
                     const isSelected = selectionContains(selection, row, instance.cellStart);
-                    const foreground = isSelected ? view.theme.selectionForeground : style.foreground;
+                    const foreground = blockCursorContains(view, row, instance.cellStart, instance.cellSpan)
+                        ? (view.theme.cursorText ?? view.theme.background)
+                        : isSelected
+                            ? view.theme.selectionForeground
+                            : style.foreground;
                     const boxDrawing = boxCells.get(instance.cellStart);
                     if (boxDrawing) {
                         let backdrop = style.background ?? view.theme.background;
@@ -1375,9 +1496,11 @@ export class WebGpuTerminalRenderer {
                     const glyph = this.#fallbackAtlas.glyph(grapheme, scale);
                     const cells = glyph?.cells ?? graphemeCellWidth(grapheme);
                     if (glyph) {
-                        const foreground = selectionContains(selection, row, column)
-                            ? view.theme.selectionForeground
-                            : view.theme.foreground;
+                        const foreground = blockCursorContains(view, row, column, cells)
+                            ? (view.theme.cursorText ?? view.theme.background)
+                            : selectionContains(selection, row, column)
+                                ? view.theme.selectionForeground
+                                : view.theme.foreground;
                         pushGlyph(fallbackGlyphVertices, (ORIGIN_X + column * CELL_WIDTH) * scale, (ORIGIN_Y + row * LINE_HEIGHT) * scale, CELL_WIDTH * cells * scale, LINE_HEIGHT * scale, glyph, foreground, viewportWidth, viewportHeight);
                     }
                     column += cells;
@@ -1426,7 +1549,7 @@ export class WebGpuTerminalRenderer {
                 pushRectangle(rectangleVertices, x, y + stroke, stroke, Math.max(0, height - stroke * 2), cursorColor, viewportWidth, viewportHeight);
                 pushRectangle(rectangleVertices, x + width - stroke, y + stroke, stroke, Math.max(0, height - stroke * 2), cursorColor, viewportWidth, viewportHeight);
             }
-            else {
+            else if (cursorStyle !== CursorStyle.Block) {
                 pushRectangle(rectangleVertices, x, y, width, height, cursorColor, viewportWidth, viewportHeight);
             }
         }
@@ -1445,21 +1568,21 @@ export class WebGpuTerminalRenderer {
             colorAttachments: [
                 {
                     view: surface.sceneTexture.createView(),
-                    clearValue: {
-                        r: view.theme.background[0],
-                        g: view.theme.background[1],
-                        b: view.theme.background[2],
-                        a: view.theme.background[3],
-                    },
+                    clearValue: premultipliedClear(view.theme.background),
                     loadOp: fullRedraw ? "clear" : "load",
                     storeOp: "store",
                 },
             ],
         });
-        if (rectangleBuffer && backgroundInstanceCount > 0) {
+        if (rectangleBuffer && rowResetInstanceCount > 0) {
+            pass.setPipeline(this.#rectangleOverwritePipeline);
+            pass.setVertexBuffer(0, rectangleBuffer);
+            pass.draw(6, rowResetInstanceCount);
+        }
+        if (rectangleBuffer && backgroundInstanceCount > rowResetInstanceCount) {
             pass.setPipeline(this.#rectanglePipeline);
             pass.setVertexBuffer(0, rectangleBuffer);
-            pass.draw(6, backgroundInstanceCount);
+            pass.draw(6, backgroundInstanceCount - rowResetInstanceCount, 0, rowResetInstanceCount);
         }
         if (rectangleBuffer && selectionInstanceCount > 0) {
             pass.setPipeline(this.#rectanglePipeline);
@@ -1495,26 +1618,7 @@ export class WebGpuTerminalRenderer {
             pass.draw(6, cursorInstanceCount, 0, cursorInstanceStart);
         }
         pass.end();
-        const postProcessPass = encoder.beginRenderPass({
-            label: `Ghostty custom shader pass ${id}`,
-            colorAttachments: [
-                {
-                    view: surface.context.getCurrentTexture().createView(),
-                    clearValue: {
-                        r: view.theme.background[0],
-                        g: view.theme.background[1],
-                        b: view.theme.background[2],
-                        a: 1,
-                    },
-                    loadOp: "clear",
-                    storeOp: "store",
-                },
-            ],
-        });
-        postProcessPass.setPipeline(this.#postProcessPipeline);
-        postProcessPass.setBindGroup(0, surface.postProcessBindGroup);
-        postProcessPass.draw(3);
-        postProcessPass.end();
+        const effectPassCount = this.#encodeEffectStack(surface, view, encoder);
         surface.sceneValid = true;
         if (!this.#performanceMeasurementEnabled)
             return undefined;
@@ -1529,15 +1633,16 @@ export class WebGpuTerminalRenderer {
             geometryCacheHits: 0,
             geometryCacheMisses: 0,
             canvasPixels: viewportWidth * viewportHeight,
-            renderPasses: 2,
-            drawCalls: Number(backgroundInstanceCount > 0) +
+            renderPasses: 1 + effectPassCount,
+            drawCalls: Number(rowResetInstanceCount > 0) +
+                Number(backgroundInstanceCount > rowResetInstanceCount) +
                 Number(selectionInstanceCount > 0) +
                 Number(glyphData.length > 0) +
                 Number(colorGlyphData.length > 0) +
                 Number(fallbackGlyphData.length > 0) +
                 Number(decorationInstanceCount > 0) +
                 Number(cursorInstanceCount > 0) +
-                1,
+                effectPassCount,
             rectangleVertices: (rectangleVertices.length / 10) * 6,
             monoGlyphVertices: (glyphVertices.length / 12) * 6,
             colorGlyphVertices: (colorGlyphVertices.length / 12) * 6,
@@ -1557,10 +1662,13 @@ export class WebGpuTerminalRenderer {
         const surface = this.#surfaces.get(id);
         if (!surface)
             return;
-        if (!surface.sceneValid || !view.damage || view.damage.full)
+        if (!surface.sceneValid || !view.damage || view.damage.full) {
             return this.#encodeRender(id, view, encoder);
+        }
         const rowCount = Math.max(view.rows.length, view.nativeRows.length, view.nativeStyleRows.length);
         const damage = rowsForDamage(rowCount, view.damage, surface.sceneValid);
+        if (damage.rows.length === 0)
+            return this.#encodeEffectsOnly(surface, view, encoder);
         const monoUploadsBefore = this.#performanceMeasurementEnabled ? this.#monoAtlas.uploadMetrics() : undefined;
         const colorUploadsBefore = this.#performanceMeasurementEnabled ? this.#colorAtlas.uploadMetrics() : undefined;
         const fallbackUploadsBefore = this.#performanceMeasurementEnabled ? this.#fallbackAtlas.uploadMetrics() : undefined;
@@ -1603,6 +1711,7 @@ export class WebGpuTerminalRenderer {
                 fallbackGlyphBuffer: promote
                     ? createCachedVertexBuffer(this.device, `cached fallback glyphs ${id}`, cpu.fallbackGlyphData)
                     : surface.fallbackGlyphBuffer.write(cpu.fallbackGlyphData),
+                rowResetInstanceCount: cpu.rowResetInstanceCount,
                 backgroundInstanceCount: cpu.backgroundInstanceCount,
                 selectionInstanceCount: cpu.selectionInstanceCount,
                 decorationInstanceStart: cpu.decorationInstanceStart,
@@ -1652,21 +1761,21 @@ export class WebGpuTerminalRenderer {
             colorAttachments: [
                 {
                     view: surface.sceneTexture.createView(),
-                    clearValue: {
-                        r: view.theme.background[0],
-                        g: view.theme.background[1],
-                        b: view.theme.background[2],
-                        a: view.theme.background[3],
-                    },
+                    clearValue: premultipliedClear(view.theme.background),
                     loadOp: "load",
                     storeOp: "store",
                 },
             ],
         });
-        if (geometry.rectangleBuffer && geometry.backgroundInstanceCount > 0) {
+        if (geometry.rectangleBuffer && geometry.rowResetInstanceCount > 0) {
+            pass.setPipeline(this.#rectangleOverwritePipeline);
+            pass.setVertexBuffer(0, geometry.rectangleBuffer);
+            pass.draw(6, geometry.rowResetInstanceCount);
+        }
+        if (geometry.rectangleBuffer && geometry.backgroundInstanceCount > geometry.rowResetInstanceCount) {
             pass.setPipeline(this.#rectanglePipeline);
             pass.setVertexBuffer(0, geometry.rectangleBuffer);
-            pass.draw(6, geometry.backgroundInstanceCount);
+            pass.draw(6, geometry.backgroundInstanceCount - geometry.rowResetInstanceCount, 0, geometry.rowResetInstanceCount);
         }
         if (geometry.rectangleBuffer && geometry.selectionInstanceCount > 0) {
             pass.setPipeline(this.#rectanglePipeline);
@@ -1702,26 +1811,7 @@ export class WebGpuTerminalRenderer {
             pass.draw(6, cursorInstanceCount, 0, cursorInstanceStart);
         }
         pass.end();
-        const postProcessPass = encoder.beginRenderPass({
-            label: `Ghostty custom shader pass ${id}`,
-            colorAttachments: [
-                {
-                    view: surface.context.getCurrentTexture().createView(),
-                    clearValue: {
-                        r: view.theme.background[0],
-                        g: view.theme.background[1],
-                        b: view.theme.background[2],
-                        a: 1,
-                    },
-                    loadOp: "clear",
-                    storeOp: "store",
-                },
-            ],
-        });
-        postProcessPass.setPipeline(this.#postProcessPipeline);
-        postProcessPass.setBindGroup(0, surface.postProcessBindGroup);
-        postProcessPass.draw(3);
-        postProcessPass.end();
+        const effectPassCount = this.#encodeEffectStack(surface, view, encoder);
         surface.sceneValid = true;
         if (!this.#performanceMeasurementEnabled)
             return undefined;
@@ -1736,15 +1826,16 @@ export class WebGpuTerminalRenderer {
             geometryCacheHits: Number(cacheHit),
             geometryCacheMisses: Number(!cacheHit),
             canvasPixels: viewportWidth * viewportHeight,
-            renderPasses: 2,
-            drawCalls: Number(geometry.backgroundInstanceCount > 0) +
+            renderPasses: 1 + effectPassCount,
+            drawCalls: Number(geometry.rowResetInstanceCount > 0) +
+                Number(geometry.backgroundInstanceCount > geometry.rowResetInstanceCount) +
                 Number(geometry.selectionInstanceCount > 0) +
                 Number(geometry.glyphInstanceCount > 0) +
                 Number(geometry.colorGlyphInstanceCount > 0) +
                 Number(geometry.fallbackGlyphInstanceCount > 0) +
                 Number(geometry.decorationInstanceCount > 0) +
                 Number(cursorInstanceCount > 0) +
-                1,
+                effectPassCount,
             rectangleVertices: (geometry.rectangleInstanceCount + cursorInstanceCount) * 6,
             monoGlyphVertices: geometry.glyphInstanceCount * 6,
             colorGlyphVertices: geometry.colorGlyphInstanceCount * 6,