From e8bd3869735106598224d1d0a080b4a3a3c9f56c Mon Sep 17 00:00:00 2001
From: Kit Langton <kit.langton@gmail.com>
Date: Wed, 15 Jul 2026 11:26:16 -0400
Subject: [PATCH] fix(simulation): align vertical box drawing (#37137)

---
 packages/simulation/src/frontend/png.ts |  2 ++
 packages/simulation/test/png.test.ts    | 42 +++++++++++++++++++++++++
 2 files changed, 44 insertions(+)

diff --git a/packages/simulation/src/frontend/png.ts b/packages/simulation/src/frontend/png.ts
index cecbe4cb77..7022ee2272 100644
--- a/packages/simulation/src/frontend/png.ts
+++ b/packages/simulation/src/frontend/png.ts
@@ -90,6 +90,8 @@ function drawBlockElement(context: SKRSContext2D, char: string, x: number, y: nu
   if (char === "█") context.fillRect(x, y, width, CellHeight)
   else if (char === "▀") context.fillRect(x, y, width, CellHeight / 2)
   else if (char === "▄") context.fillRect(x, y + CellHeight / 2, width, CellHeight / 2)
+  else if (char === "┃") context.fillRect(x + CellWidth / 2 - 1, y, 2, CellHeight)
+  else if (char === "╹") context.fillRect(x + CellWidth / 2 - 1, y, 2, CellHeight / 2)
   else return false
   return true
 }
diff --git a/packages/simulation/test/png.test.ts b/packages/simulation/test/png.test.ts
index 4e420ebf16..af41e355d2 100644
--- a/packages/simulation/test/png.test.ts
+++ b/packages/simulation/test/png.test.ts
@@ -59,3 +59,45 @@ test("fills adjacent block elements without glyph gaps", async () => {
     Array.from({ length: image.width }, () => [0, 0, 0, 255]).flat(),
   )
 })
+
+test("draws heavy vertical box elements on cell boundaries", async () => {
+  const image = SimulationPng.screenshotFrame({
+    cols: 1,
+    rows: 2,
+    cursor: [0, 0],
+    lines: [
+      {
+        spans: [
+          {
+            text: "┃",
+            width: 1,
+            fg: RGBA.fromInts(255, 255, 255),
+            bg: RGBA.fromInts(0, 0, 0),
+            attributes: 0,
+          },
+        ],
+      },
+      {
+        spans: [
+          {
+            text: "╹",
+            width: 1,
+            fg: RGBA.fromInts(255, 255, 255),
+            bg: RGBA.fromInts(0, 0, 0),
+            attributes: 0,
+          },
+        ],
+      },
+    ],
+  })
+  const canvas = createCanvas(image.width, image.height)
+  const context = canvas.getContext("2d")
+  context.drawImage(await loadImage(image.data), 0, 0)
+
+  expect([...context.getImageData(4, 0, 2, 30).data]).toEqual(
+    Array.from({ length: 60 }, () => [255, 255, 255, 255]).flat(),
+  )
+  expect([...context.getImageData(4, 30, 2, 10).data]).toEqual(
+    Array.from({ length: 20 }, () => [0, 0, 0, 255]).flat(),
+  )
+})