refactor: move ink-picture rendering from call() to UI React tree

- Remove direct stdout ANSI rendering from ImageShowTool.call() (protocol
detection, renderImage, etc.)
- Simplify call() to only load image and return dimensions
- Add ImageDisplay component in UI.tsx using InkPictureProvider + Image
from ink-picture, mounted in Codev's React tree
- Image component reserves a TUI placeholder and renders the actual
image directly to the terminal framebuffer via Kitty/Sixel protocol
(bypassing Ink render cycle)
- Merge standalone.tsx to use ImageDisplay from UI.tsx

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

src/tools/ImageShowTool/ImageShowTool.ts

@@ -10,23 +10,14 @@ 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) ──
+// ── Constants ──
 
 export const CELL_WIDTH = 8;
 export const CELL_HEIGHT = 16;
 
+// ── Types ──
+
 export interface ImageDimensions {
   width: number;        // 字符宽度
   height: number;       // 字符高度
@@ -34,6 +25,17 @@ export interface ImageDimensions {
   pixelHeight: number;  // 像素高度
 }
 
+export interface ImageShowOutput {
+  src: string
+  success: boolean
+  width?: number
+  height?: number
+  pixelWidth?: number
+  pixelHeight?: number
+}
+
+// ── Utilities ──
+
 export function getImagePath(args: string[]): string {
   return args[0] || "/home/yuki/Pictures/Wallpapers/3god.jpg";
 }
@@ -70,109 +72,6 @@ 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(() =>
@@ -184,8 +83,12 @@ type InputSchema = ReturnType<typeof inputSchema>
 
 const outputSchema = lazySchema(() =>
   z.object({
-    src: z.string().describe('The image source that was displayed'),
-    success: z.boolean().describe('Whether the image was displayed successfully'),
+    src: z.string(),
+    success: z.boolean(),
+    width: z.number().optional(),
+    height: z.number().optional(),
+    pixelWidth: z.number().optional(),
+    pixelHeight: z.number().optional(),
   }),
 )
 type OutputSchema = ReturnType<typeof outputSchema>
@@ -265,25 +168,24 @@ export const ImageShowTool = buildTool({
         cols,
       )
 
-      // Render the image directly to terminal using ink-picture
-      await renderImage(image, dims)
-
       return {
         data: {
           src,
           success: true,
-        } satisfies Output,
+          ...dims,
+        } satisfies ImageShowOutput,
       }
     } catch (error) {
+      console.error(`[ImageShowTool] Failed to display ${src}:`, error)
       return {
         data: {
           src,
           success: false,
-        } satisfies Output,
+        } satisfies ImageShowOutput,
       }
     }
   },
-  mapToolResultToToolResultBlockParam(output, toolUseID) {
+  mapToolResultToToolResultBlockParam(output: ImageShowOutput, toolUseID: string) {
     return {
       tool_use_id: toolUseID,
       type: 'tool_result',
@@ -297,4 +199,4 @@ export const ImageShowTool = buildTool({
       ],
     }
   },
-} satisfies ToolDef<InputSchema, Output>)
+} satisfies ToolDef<InputSchema, ImageShowOutput>)

src/tools/ImageShowTool/UI.tsx

@@ -1,6 +1,40 @@
 import React from 'react'
-import { MessageResponse } from '../../components/MessageResponse.js'
+import Image, { InkPictureProvider } from '../../ink-picture/index.js'
 import { Box, Text } from '../../ink.js'
+import { MessageResponse } from '../../components/MessageResponse.js'
+import type { ImageShowOutput } from './ImageShowTool.js'
+
+// ── Image display component ──
+// Renders a placeholder in Ink's TUI and uses Kitty/Sixel protocol to draw
+// the full-resolution image directly on the terminal framebuffer (bypassing
+// the Ink render cycle). The placeholder reserves character cells so the TUI
+// layout isn't broken; ink-picture's useDirectRenderer repositions the image
+// after each Ink screen refresh.
+
+export function ImageDisplay({ src, width, height, pixelWidth, pixelHeight }: {
+  src: string
+  width: number
+  height: number
+  pixelWidth: number
+  pixelHeight: number
+}) {
+  return (
+    <Box flexDirection="column">
+      <InkPictureProvider>
+        <Image
+          src={src}
+          width={width}
+          height={height}
+          pixelWidth={pixelWidth}
+          pixelHeight={pixelHeight}
+          alt={typeof src === 'string' ? src : 'image'}
+        />
+      </InkPictureProvider>
+    </Box>
+  )
+}
+
+// ── Tool rendering functions ──
 
 export function renderToolUseMessage(
   { src }: { src?: string },
@@ -20,10 +54,12 @@ export function renderToolUseProgressMessage(): React.ReactNode {
 }
 
 export function renderToolResultMessage(
-  { src, success }: { src: string; success: boolean },
+  output: ImageShowOutput,
   _progressMessages: unknown[],
   { verbose }: { verbose: boolean },
 ): React.ReactNode {
+  const { src, success, width, height, pixelWidth, pixelHeight } = output
+
   if (!success) {
     return (
       <MessageResponse height={1}>
@@ -31,17 +67,21 @@ export function renderToolResultMessage(
       </MessageResponse>
     )
   }
-  if (verbose) {
+
+  // Render the image via ink-picture when we have dimension data
+  if (width && height && pixelWidth && pixelHeight) {
     return (
-      <Box flexDirection="column">
-        <MessageResponse height={1}>
-          <Text>
-            Image displayed: <Text bold>{src}</Text>
-          </Text>
-        </MessageResponse>
-      </Box>
+      <ImageDisplay
+        src={src}
+        width={width}
+        height={height}
+        pixelWidth={pixelWidth}
+        pixelHeight={pixelHeight}
+      />
     )
   }
+
+  // Fallback: text-only summary
   return (
     <MessageResponse height={1}>
       <Text>
@@ -54,4 +94,4 @@ export function renderToolResultMessage(
 export function getToolUseSummary(input: { src?: string } | undefined): string | null {
   if (!input?.src) return null
   return input.src.length > 80 ? input.src.slice(0, 77) + '...' : input.src
-}
+}

src/tools/ImageShowTool/standalone.tsx

@@ -12,7 +12,6 @@
 
 import { useEffect, useState } from "react";
 import { render, Box, Text, useApp } from "ink";
-import Image, { InkPictureProvider } from "../../ink-picture/index.ts";
 import {
   getImagePath,
   isUrl,
@@ -20,6 +19,7 @@ import {
   calculateDimensions,
   type ImageDimensions,
 } from "./ImageShowTool.ts";
+import { ImageDisplay } from "./UI.js";
 
 const args = process.argv.slice(2);
 const IMAGE_PATH = getImagePath(args);
@@ -36,7 +36,7 @@ function App() {
         const dims = calculateDimensions(
           image.bitmap.width,
           image.bitmap.height,
-          process.stdout.columns ?? 80
+          process.stdout.columns ?? 80,
         );
         setDimensions(dims);
       } catch (e) {
@@ -65,19 +65,16 @@ function App() {
 
   return (
     <Box flexDirection="column">
-      <InkPictureProvider>
-        <Image
-          src={IMAGE_PATH}
-          width={dimensions.width}
-          height={dimensions.height}
-          pixelWidth={dimensions.pixelWidth}
-          pixelHeight={dimensions.pixelHeight}
-          alt={isUrl(IMAGE_PATH) ? "url-image" : "local-image"}
-        />
-      </InkPictureProvider>
+      <ImageDisplay
+        src={IMAGE_PATH}
+        width={dimensions.width}
+        height={dimensions.height}
+        pixelWidth={dimensions.pixelWidth}
+        pixelHeight={dimensions.pixelHeight}
+      />
     </Box>
   );
 }
 
 const { waitUntilExit } = render(<App />);
-await waitUntilExit();
+await waitUntilExit();