feat: image in ui

src/ink/log-update.ts

@@ -302,10 +302,22 @@ 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
@@ -400,8 +412,14 @@ export class LogUpdate {
       undefined,
     )
 
-    // Handle growth: render new rows directly (they naturally scroll the terminal)
+    // Handle growth: emit raw writes for new rows, then render cells
     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,

src/ink/output.ts

@@ -705,53 +705,43 @@ function writeLineToScreen(
             }
           }
         } else if (nextChar === '_') {
-          // APC (Application Program Command): pass through to screen
-          // buffer. Terminal receives the raw \x1b_G...\x1b\\ sequence
-          // and interprets it as a Kitty graphics protocol command,
-          // rendering the native image at this position within Ink's
-          // layout — no \x1b[H or writeRaw positioning needed.
-          setCellAt(screen, offsetX, y, {
-            char: '\x1b',
-            styleId: stylePool.none,
-            width: CellWidth.Narrow,
-            hyperlink: undefined,
-          })
-          offsetX++
-          setCellAt(screen, offsetX, y, {
-            char: '_',
-            styleId: stylePool.none,
-            width: CellWidth.Narrow,
-            hyperlink: undefined,
-          })
-          offsetX++
+          // APC (Application Program Command): store in screen.rawWritesAtRow
+          // for emission by log-update.ts before the row's cell content.
+          // This avoids the screen buffer width limit — APC payloads (e.g.
+          // Kitty base64 images) can be hundreds of KB, but screen rows are
+          // only ~80 columns wide.
+          const apcStartIdx = charIdx
           charIdx++ // skip past ESC
           while (charIdx < characters.length - 1) {
             charIdx++
             const c = characters[charIdx]?.value
-            if (c === undefined) break
-            setCellAt(screen, offsetX, y, {
-              char: c,
-              styleId: stylePool.none,
-              width: CellWidth.Narrow,
-              hyperlink: undefined,
-            })
-            offsetX++
             if (c === '\x07') break
             if (c === '\x1b') {
               const nextC = characters[charIdx + 1]?.value
               if (nextC === '\\') {
-                charIdx++
-                setCellAt(screen, offsetX, y, {
-                  char: '\\',
-                  styleId: stylePool.none,
-                  width: CellWidth.Narrow,
-                  hyperlink: undefined,
-                })
-                offsetX++
+                charIdx++ // skip backslash
                 break
               }
             }
           }
+          // Reconstruct the full APC sequence from char tokens
+          let apc = ''
+          for (let i = apcStartIdx; i <= charIdx; i++) {
+            const ci = characters[i]
+            if (ci) apc += ci.value
+          }
+          // Append to existing entry (multi-chunk APC) or create new one.
+          // First chunk includes CUP positioning; subsequent chunks append
+          // the next \x1b_G...\x1b\\ without redundant cursor movement.
+          const existing = screen.rawWritesAtRow.get(y)
+          if (existing) {
+            screen.rawWritesAtRow.set(y, existing + apc)
+          } else {
+            screen.rawWritesAtRow.set(
+              y,
+              `\x1b[${y + 1};${offsetX + 1}H${apc}`,
+            )
+          }
         } else if (
           nextChar === ']' ||
           nextChar === 'P' ||
@@ -760,6 +750,7 @@ function writeLineToScreen(
         ) {
           // String-based sequences (OSC, DCS, PM, SOS) terminated by
           // BEL (0x07) or ST (ESC \): skip as before.
+          const seqStartIdx = charIdx
           charIdx++ // skip the introducer char
           while (charIdx < characters.length - 1) {
             charIdx++
@@ -773,6 +764,34 @@ function writeLineToScreen(
               }
             }
           }
+
+          // Tmux DCS passthrough (\x1bPtmux;...\x1b\\): store the entire
+          // DCS sequence in rawWritesAtRow so tmux forwards the inner APC
+          // to the terminal for native Kitty image rendering.
+          if (
+            nextChar === 'P' &&
+            charIdx + 2 < characters.length &&
+            characters[seqStartIdx + 2]?.value === 't' &&
+            characters[seqStartIdx + 3]?.value === 'm' &&
+            characters[seqStartIdx + 4]?.value === 'u' &&
+            characters[seqStartIdx + 5]?.value === 'x' &&
+            characters[seqStartIdx + 6]?.value === ';' &&
+            characters[charIdx + 1]?.value === '\x1b' &&
+            characters[charIdx + 2]?.value === '\\'
+          ) {
+            // Extend to include outer DCS terminator (\x1b\\)
+            const dcsEnd = charIdx + 2
+            let dcs = ''
+            for (let i = seqStartIdx; i <= dcsEnd; i++) {
+              const ci = characters[i]
+              if (ci) dcs += ci.value
+            }
+            screen.rawWritesAtRow.set(
+              y,
+              `\x1b[${y + 1};${offsetX + 1}H${dcs}`,
+            )
+            charIdx = dcsEnd
+          }
         } else if (
           nextCode !== undefined &&
           nextCode >= 0x30 &&

src/ink/screen.ts

@@ -391,6 +391,15 @@ export type Screen = Size & {
    */
   noSelect: Uint8Array
 
+  /**
+   * Per-row raw escape sequences (e.g. Kitty protocol APC) that must be
+   * emitted before the row's cell content. Populated by writeLineToScreen
+   * in output.ts when a RawAnsi line starts with \x1b_ (APC). Each entry
+   * already includes CUP positioning: \x1b[row;colH + raw-sequence.
+   * log-update.ts emits these before diffing cells in a row.
+   */
+  rawWritesAtRow: Map<number, string>
+
   /**
    * Per-ROW soft-wrap continuation marker. softWrap[r]=N>0 means row r
    * is a word-wrap continuation of row r-1 (the `\n` before it was
@@ -487,6 +496,7 @@ export function createScreen(
     emptyStyleId: styles.none,
     damage: undefined,
     noSelect: new Uint8Array(size),
+    rawWritesAtRow: new Map(),
     softWrap: new Int32Array(height),
   }
 }
@@ -539,8 +549,9 @@ export function resetScreen(
 
   // Shared pools accumulate — no clearing needed. Unique char/hyperlink sets are bounded.
 
-  // Clear damage tracking
+  // Clear damage tracking and per-row raw writes
   screen.damage = undefined
+  screen.rawWritesAtRow.clear()
 }
 
 /**