feat: integrate ink-picture rendering into ImageShowTool, remove InlineImage

- Delete InlineImage.tsx (passive Markdown inline image component)
- Remove InlineImage import and image token handling from Markdown.tsx
- Rewrite ImageShowTool.call() to render images directly via ink-picture
renderers with terminal protocol detection (kitty/sixel/iterm2/halfBlock/
braille/ascii)

Co-Authored-By: Claude Big Pickle <noreply@anthropic.com>

src/components/InlineImage.tsx

@@ -1,60 +0,0 @@
-import React from 'react'
-import Image, { InkPictureProvider } from 'src/ink-picture/index.ts'
-import Link from '../ink/components/Link.js'
-import { supportsHyperlinks } from '../ink/supports-hyperlinks.js'
-import { Box, Text } from '../ink.js'
-
-type Props = {
-  url: string
-  alt?: string
-}
-
-function filenameFromUrl(url: string): string {
-  try {
-    const pathname = new URL(url).pathname
-    const parts = pathname.split('/')
-    const last = parts[parts.length - 1]
-    return last || 'image'
-  } catch {
-    return 'image'
-  }
-}
-
-/**
- * Renders an inline image in the terminal using ink-picture, which
- * auto-detects the best available protocol (Kitty, Sixel, iTerm2,
- * HalfBlock, Braille, ASCII) and handles loading/error states.
- *
- * A clickable [image_name] link is shown below the image as a stable
- * fallback for screen readers and quick URL access.
- */
-export function InlineImage({ url, alt }: Props) {
-  const displayName = alt || filenameFromUrl(url)
-
-  const cols = process.stdout.columns ?? 80
-  const rows = process.stdout.rows ?? 40
-  const imgWidth = Math.floor(cols * 0.6)
-  const imgHeight = Math.floor(rows * 0.4)
-
-  const link = supportsHyperlinks() ? (
-    <Link url={url}>
-      <Text dimColor>{`[${displayName}]`}</Text>
-    </Link>
-  ) : (
-    <Text dimColor>{`[${displayName}: ${url}]`}</Text>
-  )
-
-  return (
-    <Box flexDirection="column">
-      <InkPictureProvider>
-        <Image
-          src={url}
-          width={imgWidth}
-          height={imgHeight}
-          alt={alt}
-        />
-      </InkPictureProvider>
-      {link}
-    </Box>
-  )
-}

src/components/Markdown.tsx

@@ -7,7 +7,6 @@ import { type CliHighlight, getCliHighlightPromise } from '../utils/cliHighlight
 import { hashContent } from '../utils/hash.js';
 import { configureMarked, formatToken } from '../utils/markdown.js';
 import { stripPromptXMLTags } from '../utils/messages.js';
-import { InlineImage } from './InlineImage.js';
 import { MarkdownTable } from './MarkdownTable.js';
 type Props = {
   children: string;
@@ -145,10 +144,6 @@ function MarkdownBody(t0) {
       if (token.type === "table") {
         flushNonTableContent();
         elements.push(<MarkdownTable key={elements.length} token={token as Tokens.Table} highlight={highlight} />);
-      } else if (token.type === "image") {
-        flushNonTableContent();
-        console.error(`[MarkdownBody] Found image token: href=${token.href} text=${token.text}`)
-        elements.push(<InlineImage key={elements.length} url={token.href} alt={token.text} />);
       } else {
         nonTableContent = nonTableContent + formatToken(token, theme, 0, null, null, highlight);
       }

src/tools/ImageShowTool/ImageShowTool.ts

@@ -10,6 +10,17 @@ import {
   renderToolResultMessage,
   renderToolUseMessage,
 } from './UI.js'
+import type { PixelData, PngData } from "../../ink-picture/renderers/types.js";
+import {
+  makeKittyTransmitChunks,
+  makeKittyPlacement,
+} from "../../ink-picture/renderers/kitty.js";
+import { renderSixel } from "../../ink-picture/renderers/sixel.js";
+import { renderITerm2 } from "../../ink-picture/renderers/iterm2.js";
+import { renderHalfBlock } from "../../ink-picture/renderers/halfBlock.js";
+import { renderBraille } from "../../ink-picture/renderers/braille.js";
+import { renderAscii } from "../../ink-picture/renderers/ascii.js";
+import generateKittyId from "../../ink-picture/utils/generateKittyId.js";
 
 // ── Utility functions (kept for standalone UI and external use) ──
 
@@ -59,6 +70,109 @@ export function calculateDimensions(
   };
 }
 
+// ── Protocol detection ──
+
+type Protocol = 'kitty' | 'sixel' | 'iterm2' | 'halfBlock' | 'braille' | 'ascii'
+
+function detectProtocol(): Protocol {
+  const termProgram = process.env.TERM_PROGRAM
+  const term = process.env.TERM
+
+  // Kitty protocol — stores image in terminal GPU memory, survives screen clears
+  if (termProgram === 'ghostty' || termProgram === 'kitty' || term?.includes('kitty')) {
+    return 'kitty'
+  }
+
+  // Sixel
+  if (term?.includes('sixel') || termProgram === 'ghostty' || termProgram === 'vscode') {
+    return 'sixel'
+  }
+
+  // iTerm2 inline images
+  if (termProgram === 'iTerm.app' || termProgram === 'WezTerm' || termProgram === 'WarpTerminal') {
+    return 'iterm2'
+  }
+
+  // Text-based fallback
+  const colorterm = process.env.COLORTERM
+  const supportsColor = colorterm === 'truecolor' || !!colorterm ||
+    term?.includes('truecolor') || term?.includes('256color')
+  const supportsUnicode = true // all modern terminals
+
+  if (supportsUnicode && supportsColor) return 'halfBlock'
+  if (supportsUnicode) return 'braille'
+  return 'ascii'
+}
+
+type JimpInstance = Awaited<ReturnType<typeof Jimp.read>>
+
+async function renderImage(image: JimpInstance, dims: ImageDimensions): Promise<void> {
+  const protocol = detectProtocol()
+
+  image.cover({ w: dims.pixelWidth, h: dims.pixelHeight })
+
+  const pixels: PixelData = {
+    data: image.bitmap.data,
+    info: { width: image.bitmap.width, height: image.bitmap.height, channels: 4 },
+  }
+
+  switch (protocol) {
+    case 'kitty': {
+      const pngBuf = await image.getBuffer("image/png")
+      const b64 = pngBuf.toString('base64')
+      const imgId = generateKittyId()
+      const chunks = makeKittyTransmitChunks(imgId, b64)
+      for (const chunk of chunks) {
+        process.stdout.write(chunk)
+      }
+      process.stdout.write('\n')
+      process.stdout.write(makeKittyPlacement(imgId, 1, dims.width, dims.height))
+      process.stdout.write('\n')
+      break
+    }
+    case 'sixel': {
+      const output = renderSixel(pixels)
+      process.stdout.write(output)
+      process.stdout.write('\n')
+      break
+    }
+    case 'iterm2': {
+      const pngBuf = await image.getBuffer("image/png")
+      const pngData: PngData = {
+        data: pngBuf,
+        info: { width: image.bitmap.width, height: image.bitmap.height },
+      }
+      const output = renderITerm2(pngData, { width: dims.pixelWidth, height: dims.pixelHeight })
+      process.stdout.write(output)
+      process.stdout.write('\n')
+      break
+    }
+    case 'halfBlock': {
+      const output = renderHalfBlock(pixels)
+      process.stdout.write('\n')
+      process.stdout.write(output)
+      process.stdout.write('\n')
+      break
+    }
+    case 'braille': {
+      const output = renderBraille(pixels)
+      process.stdout.write('\n')
+      process.stdout.write(output)
+      process.stdout.write('\n')
+      break
+    }
+    case 'ascii': {
+      const output = renderAscii(pixels, {
+        colored: !!(process.env.COLORTERM || process.env.TERM?.includes('truecolor')),
+      })
+      process.stdout.write('\n')
+      process.stdout.write(output)
+      process.stdout.write('\n')
+      break
+    }
+  }
+}
+
 // ── Tool definition ──
 
 const inputSchema = lazySchema(() =>
@@ -144,12 +258,16 @@ export const ImageShowTool = buildTool({
   async call({ src }) {
     try {
       const image = await loadImage(src)
+      const cols = process.stdout.columns ?? 80
       const dims = calculateDimensions(
         image.bitmap.width,
         image.bitmap.height,
-        80,
+        cols,
       )
-      void dims
+
+      // Render the image directly to terminal using ink-picture
+      await renderImage(image, dims)
+
       return {
         data: {
           src,
@@ -179,4 +297,4 @@ export const ImageShowTool = buildTool({
       ],
     }
   },
-} satisfies ToolDef<InputSchema, Output>)
+} satisfies ToolDef<InputSchema, Output>)