fix(frame): render diagonal quadrant blocks

.changeset/render-diagonal-blocks.md

@@ -0,0 +1,5 @@
+---
+"opencode-drive": patch
+---
+
+Render diagonal quadrant block glyphs as exact terminal cell geometry in screenshots, recordings, and catalog frames.

packages/drive/src/frame/index.ts

@@ -62,6 +62,17 @@ export const BlockGlyphs: Record<string, GlyphRect> = {
   "╹": { x: CellWidth / 2 - 1, y: 0, width: 2, height: CellHeight / 2, stretch: false },
 }
 
+const diagonalBlockGlyphs: Record<string, ReadonlyArray<Omit<GlyphRect, "stretch">>> = {
+  "▚": [
+    { x: 0, y: 0, width: CellWidth / 2, height: CellHeight / 2 },
+    { x: CellWidth / 2, y: CellHeight / 2, width: CellWidth / 2, height: CellHeight / 2 },
+  ],
+  "▞": [
+    { x: CellWidth / 2, y: 0, width: CellWidth / 2, height: CellHeight / 2 },
+    { x: 0, y: CellHeight / 2, width: CellWidth / 2, height: CellHeight / 2 },
+  ],
+}
+
 /**
  * Draws a block/bar glyph geometrically. Returns false when the character is
  * not a geometric primitive and must be drawn with fonts instead.
@@ -76,11 +87,17 @@ export const drawBlockGlyph = (
   cells = 1,
 ): boolean => {
   const glyph = BlockGlyphs[char]
-  if (glyph === undefined) return false
-  const width = glyph.stretch
-    ? glyph.width + (cells - 1) * CellWidth
-    : glyph.width
-  context.fillRect(x + glyph.x, y + glyph.y, width, glyph.height)
+  if (glyph !== undefined) {
+    const width = glyph.stretch
+      ? glyph.width + (cells - 1) * CellWidth
+      : glyph.width
+    context.fillRect(x + glyph.x, y + glyph.y, width, glyph.height)
+    return true
+  }
+  const quadrants = diagonalBlockGlyphs[char]
+  if (quadrants === undefined) return false
+  for (const quadrant of quadrants)
+    context.fillRect(x + quadrant.x, y + quadrant.y, quadrant.width, quadrant.height)
   return true
 }
 

packages/drive/test/frame.test.ts

@@ -35,6 +35,22 @@ describe("frame geometry", () => {
     ])
   })
 
+  it("draws diagonal quadrant blocks edge-to-edge", () => {
+    const rects: Array<readonly [number, number, number, number]> = []
+    const context = {
+      fillRect: (x: number, y: number, width: number, height: number) =>
+        void rects.push([x, y, width, height]),
+    }
+    expect(drawBlockGlyph(context, "▚", 0, 0)).toBe(true)
+    expect(drawBlockGlyph(context, "▞", CellWidth, 0)).toBe(true)
+    expect(rects).toEqual([
+      [0, 0, CellWidth / 2, CellHeight / 2],
+      [CellWidth / 2, CellHeight / 2, CellWidth / 2, CellHeight / 2],
+      [CellWidth + CellWidth / 2, 0, CellWidth / 2, CellHeight / 2],
+      [CellWidth, CellHeight / 2, CellWidth / 2, CellHeight / 2],
+    ])
+  })
+
   it("uses distinct attribute bits", () => {
     const bits = Object.values(TextStyle)
     expect(new Set(bits).size).toBe(bits.length)