From 158a7a74e7dc43df180bf6218cfbee7ae55ff9df Mon Sep 17 00:00:00 2001
From: npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w
 <52a228d6edf316ec6812ac3c9fc0d696ab59fc7954d77e7be31eedcddf91335b@sprout-oss.stage.blox.sqprod.co>
Date: Mon, 15 Jun 2026 22:27:43 -0700
Subject: [PATCH] debug(timeline): ring imeta-dim inline images to show the
 reservation split
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a debug-only red `outline` ring on exactly the inline images whose row
height we reserve up front from their imeta `dim` tag — the ones the
reservation fix catches. Lets tho SEE the split in the running app: ringed
= height-reserved, un-ringed = `dim`-less natural-load thrasher (the
residual-flicker caveat made visible).

Uses `outline` (zero layout impact), never `border`, so toggling it can't
shift a single pixel. Gated behind a trivially-flippable module const
(`DEBUG_RING_DIM_IMAGES`) with a ship-then-rip comment; the ring class
applies only when `DEBUG_RING_DIM_IMAGES && reserved`. Not for shipping
styling.

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 desktop/src/shared/ui/markdown.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/desktop/src/shared/ui/markdown.tsx b/desktop/src/shared/ui/markdown.tsx
index 2259d8f4c..48305780d 100644
--- a/desktop/src/shared/ui/markdown.tsx
+++ b/desktop/src/shared/ui/markdown.tsx
@@ -74,6 +74,17 @@ let shikiHighlighter: HighlighterGeneric<BundledLanguage, BundledTheme> | null =
 let shikiInitPromise: Promise<void> | null = null;
 const loadedLangs = new Set<string>();
 const loadedThemes = new Set<string>();
+// ─────────────────────────────────────────────────────────────────────────────
+// DEBUG diagnostic (Phase 2 virtualization). When true, inline images that
+// carry an imeta `dim` tag — the ones whose row height we reserve up front in
+// `ImageBlock` — get a red ring so you can SEE the dim-vs-dim-less split in the
+// running app: ringed = height-reserved, un-ringed = `dim`-less natural-load
+// thrasher. Uses `outline` (zero layout impact), never `border`, so toggling it
+// can't shift a single pixel. Flip to false (or delete the const + its one use
+// in `ImageBlock`) to remove. Not for shipping styling.
+const DEBUG_RING_DIM_IMAGES = true;
+const DEBUG_DIM_IMAGE_RING_CLASS = "outline outline-2 outline-red-500";
+
 const tokenCache = new Map<string, ThemedToken[][]>();
 const MAX_CACHE_ENTRIES = 100;
 const MAX_LOADED_LANGUAGES = 30;
@@ -309,7 +320,12 @@ function ImageBlock({
       {/* biome-ignore lint/a11y/useKeyWithClickEvents: image opens lightbox on click; keyboard equivalent handled by lightbox close button */}
       <img
         alt={alt}
-        className="mt-1 block h-auto max-h-64 max-w-sm cursor-pointer rounded-xl object-contain"
+        className={cn(
+          "mt-1 block h-auto max-h-64 max-w-sm cursor-pointer rounded-xl object-contain",
+          // DEBUG: ring the dim-reserved images so the dim-vs-dim-less split is
+          // visible in the running app. `outline` only — zero layout impact.
+          DEBUG_RING_DIM_IMAGES && reserved && DEBUG_DIM_IMAGE_RING_CLASS,
+        )}
         // Reserve the rendered box from imeta `dim` so the row's height is
         // stable BEFORE the image loads — no zero-then-grow reflow thrashing the
         // virtualized list. width/height stay within the max-h-64/max-w-sm caps