raw two image

src/ink/log-update.ts

@@ -302,22 +302,10 @@ export class LogUpdate {
     let currentStyleId = stylePool.none
     let currentHyperlink: Hyperlink = undefined
 
-    // Emit per-row raw writes (APC, Kitty protocol) before cell diff loop.
-    // Track which rows have been emitted to avoid duplicates across damage regions.
-    const emittedRawRows = new Set<number>()
-
     // First pass: render changes to existing rows (rows < prev.screen.height)
     let needsFullReset = false
     let resetTriggerY = -1
     diffEach(prev.screen, next.screen, (x, y, removed, added) => {
-      // Emit raw write (e.g. Kitty APC) for this row if not yet emitted
-      if (!emittedRawRows.has(y)) {
-        emittedRawRows.add(y)
-        const rawWrite = next.screen.rawWritesAtRow.get(y)
-        if (rawWrite) {
-          screen.diff.push({ type: 'stdout', content: rawWrite })
-        }
-      }
       // Skip new rows - we'll render them directly after
       if (growing && y >= prev.screen.height) {
         return
@@ -412,14 +400,8 @@ export class LogUpdate {
       undefined,
     )
 
-    // Handle growth: emit raw writes for new rows, then render cells
+    // Handle growth: render new rows directly (they naturally scroll the terminal)
     if (growing) {
-      for (let y = prev.screen.height; y < next.screen.height; y++) {
-        const rawWrite = next.screen.rawWritesAtRow.get(y)
-        if (rawWrite) {
-          screen.diff.push({ type: 'stdout', content: rawWrite })
-        }
-      }
       renderFrameSlice(
         screen,
         next,
@@ -429,6 +411,20 @@ export class LogUpdate {
       )
     }
 
+    // Emit raw writes (APC/DCS) at viewport-adjusted positions so native
+    // images appear at the correct scroll position every frame, even when
+    // the diff loop skips unchanged rows. The CUP is rewritten to target
+    // a viewport-relative row instead of an absolute screen-buffer row.
+    for (const [row, rawWrite] of next.screen.rawWritesAtRow) {
+      if (row < viewportY) continue
+      const vpRow = row - viewportY
+      const adjusted = rawWrite.replace(
+        /^\x1b\[(\d+);(\d+)H/,
+        (_, __, col) => `\x1b[${vpRow + 1};${col}H`,
+      )
+      screen.diff.push({ type: 'stdout', content: adjusted })
+    }
+
     // Restore cursor. Skipped in alt-screen: the cursor is hidden, its
     // position only matters as the starting point for the NEXT frame's
     // relative moves, and in alt-screen the next frame always begins with
@@ -536,6 +532,12 @@ function renderFrame(
   stylePool: StylePool,
 ): void {
   renderFrameSlice(screen, frame, 0, frame.screen.height, stylePool)
+  // Emit raw writes (APC/DCS) after cells so native images are drawn at
+  // the correct viewport position. Full reset always starts from (0,0),
+  // so the original CUP row (screen-buffer row + 1) is already correct.
+  for (const [, rawWrite] of frame.screen.rawWritesAtRow) {
+    screen.diff.push({ type: 'stdout', content: rawWrite })
+  }
 }
 
 /**
@@ -576,6 +578,7 @@ function renderFrameSlice(
         return [patches, { dx: -prev.x, dy: rowsToAdvance }]
       })
     }
+
     // Reset at start of each line — no cell rendered yet
     lastRenderedStyleId = -1
 

src/tools/ImageShowTool/ImageShowTool.tsx

@@ -139,19 +139,27 @@ export const ImageShowTool = buildTool({
     }
 
     // Block-mode placeholder rendered in-band via RawAnsi so Ink knows the
-    // image dimensions and its virtual cursor stays in sync. The Kitty protocol
-    // APC escape sequence (when available) is prepended to the first block-mode
-    // line; output.ts's writeLineToScreen passes APC through to the screen
-    // buffer, so the terminal receives the native image at this position.
+    // image dimensions and its virtual cursor stays in sync. When Kitty
+    // protocol is available, visible block characters are replaced with
+    // spaces so the native image shows through transparently, while the
+    // line structure (row count, per-row visual width) is preserved for
+    // Ink DOM cursor tracking.
     if (content.timgOutput) {
       const cleaned = content.timgOutput.replace(/\x1b\[\?25[hl]/g, '')
-      const lines = cleaned.split('\n').filter(l => l.length > 0)
+      let lines = cleaned.split('\n').filter(l => l.length > 0)
       if (lines.length > 0) {
-        const ansiStrip = (s: string) => s.replace(/\x1b\[[0-9;?]*[a-zA-Z]/g, '')
-        const width = Math.max(...lines.map(l => ansiStrip(l).length))
         if (content.kittyOutput) {
+          // Strip ANSI SGR codes and replace non-space visible chars with
+          // spaces. The native Kitty image will show through these spaces.
+          lines = lines.map(l =>
+            l.replace(/\x1b\[[0-9;?]*[a-zA-Z]/g, '').replace(/[^\s]/g, ' '),
+          )
+          const width = Math.max(...lines.map(l => l.length))
           lines[0] = content.kittyOutput + lines[0]
+          return <RawAnsi lines={lines} width={width} />
         }
+        const ansiStrip = (s: string) => s.replace(/\x1b\[[0-9;?]*[a-zA-Z]/g, '')
+        const width = Math.max(...lines.map(l => ansiStrip(l).length))
         return <RawAnsi lines={lines} width={width} />
       }
     }