refactor: simplify ImageShowTool with jimp/ink-picture and aspect-ratio-aware rendering

Replace manual fetch/read/detect helpers with Jimp + loadImageFromUrl,
delegating image loading to the same infrastructure used by ink-picture.
Return naturalWidth/naturalHeight from call() so renderToolResultMessage
can compute pixel dimensions from the original aspect ratio via the
pixelWidth/pixelHeight props now supported by the Image component.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/tools/ImageShowTool/ImageShowTool.tsx

@@ -1,11 +1,12 @@
-import { readFile } from 'fs/promises'
 import { homedir } from 'os'
 import React from 'react'
 import { z } from 'zod/v4'
+import { Jimp } from 'jimp'
 import { Text } from '../../ink.js'
 import { buildTool, type ToolDef } from '../../Tool.js'
 import { logForDebugging } from '../../utils/debug.js'
 import Image, { InkPictureProvider, type TerminalInfo } from 'src/ink-picture/index.ts'
+import { loadImageFromUrl } from 'src/ink-picture/utils/jimpURL.ts'
 
 const IMAGE_TOOL_NAME = 'ImageShow'
 
@@ -25,91 +26,9 @@ const inputSchema = () =>
 
 type Input = z.infer<ReturnType<typeof inputSchema>>
 
-/** Detect format from URL/file extension */
-function detectFormat(url: string): string {
-  const clean = url.split('?')[0]!.split('#')[0]!
-  const ext = clean.split('.').pop()?.toLowerCase() ?? ''
-  if (['png', 'jpg', 'jpeg', 'gif', 'webp'].includes(ext)) {
-    return ext === 'jpg' ? 'jpeg' : ext
-  }
-  return 'png'
-}
-
-/** Read a local file and return its buffer + detected format */
-async function readLocalImage(url: string): Promise<{ buffer: Buffer; format: string } | null> {
-  try {
-    const format = detectFormat(url)
-    const buffer = await readFile(url)
-    return { buffer, format }
-  } catch {
-    return null
-  }
-}
-
-/** Download an image from URL and return its buffer + detected format */
-async function fetchImage(url: string): Promise<{ buffer: Buffer; format: string } | null> {
-  try {
-    const response = await fetch(url, {
-      headers: {
-        'User-Agent': 'Mozilla/5.0 (compatible; Codev/1.0)',
-      },
-      redirect: 'follow',
-    })
-
-    if (!response.ok) {
-      logForDebugging(`ImageShow: HTTP ${response.status} for ${url}`)
-      return null
-    }
-
-    const contentType = response.headers.get('content-type') ?? ''
-    const format = detectFormat(url !== contentType ? url : contentType)
-
-    const reader = response.body?.getReader()
-    if (!reader) return null
-
-    const chunks: Uint8Array[] = []
-    let totalSize = 0
-    const MAX_SIZE = 10_000_000
-
-    while (true) {
-      const { done, value } = await reader.read()
-      if (done) break
-      totalSize += value.byteLength
-      if (totalSize > MAX_SIZE) {
-        logForDebugging(`ImageShow: image too large (${totalSize} bytes) for ${url}`)
-        reader.cancel()
-        return null
-      }
-      chunks.push(value)
-    }
-
-    const combinedLength = chunks.reduce((acc, c) => acc + c.byteLength, 0)
-    const combined = new Uint8Array(combinedLength)
-    let offset = 0
-    for (const chunk of chunks) {
-      combined.set(chunk, offset)
-      offset += chunk.byteLength
-    }
-
-    return { buffer: Buffer.from(combined.buffer), format }
-  } catch (err) {
-    logForDebugging(`ImageShow: fetch error ${err} for ${url}`)
-    return null
-  }
-}
-
-/** Load image: local file or remote URL */
-async function loadImage(url: string): Promise<{ buffer: Buffer; format: string } | null> {
-  // Expand ~ to home directory
-  const normalizedUrl = url.startsWith('~')
-    ? url.replace(/^~(?=$|\/)/, homedir())
-    : url
-  if (normalizedUrl.startsWith('file://') || normalizedUrl.startsWith('/') || normalizedUrl.startsWith('.')) {
-    const path = normalizedUrl.startsWith('file://') ? normalizedUrl.slice(7) : normalizedUrl
-    return readLocalImage(path)
-  }
-  return fetchImage(normalizedUrl)
-}
+/** Standard terminal cell size in pixels */
+const CELL_WIDTH = 8
+const CELL_HEIGHT = 16
 
 /**
  * Lightweight synchronous Kitty graphics protocol detection.
@@ -131,6 +50,26 @@ function getToolUseSummary(input: Partial<Input>): string | null {
   return input?.url ? `Show: ${input.url.split('/').pop() ?? input.url}` : null
 }
 
+/** Normalize image source path: expand ~, strip file:// */
+function normalizeSrc(url: string): string {
+  let src = url
+  if (src.startsWith('~')) {
+    src = src.replace(/^~(?=$|\/)/, homedir())
+  }
+  if (src.startsWith('file://')) {
+    src = src.slice(7)
+  }
+  return src
+}
+
+/** Load image from local path or URL, returning Jimp instance */
+async function loadImage(src: string): Promise<Jimp> {
+  if (src.startsWith('http://') || src.startsWith('https://')) {
+    return loadImageFromUrl(src)
+  }
+  return Jimp.read(src)
+}
+
 export const ImageShowTool = buildTool({
   name: IMAGE_TOOL_NAME,
   description:
@@ -216,6 +155,8 @@ export const ImageShowTool = buildTool({
       message: string
       src?: string
       alt?: string
+      naturalWidth?: number
+      naturalHeight?: number
     },
     _progressMessages,
     _options,
@@ -227,9 +168,27 @@ export const ImageShowTool = buildTool({
     if (content.src) {
       const cols = process.stdout.columns ?? 80
       const rows = process.stdout.rows ?? 40
-      // Reasonable image size: 60% of terminal width, 40% of terminal height
-      const imgWidth = Math.floor(cols * 0.6)
-      const imgHeight = Math.floor(rows * 0.4)
+
+      // Target: 60% of terminal width
+      const targetW_chars = Math.floor(cols * 0.6)
+      const targetW_pixels = targetW_chars * CELL_WIDTH
+
+      // Compute height from original aspect ratio if available
+      let pixelHeight: number
+      let imgHeight: number
+
+      if (content.naturalWidth && content.naturalHeight) {
+        const targetH_pixels = Math.floor(
+          targetW_pixels * (content.naturalHeight / content.naturalWidth),
+        )
+        const minH_pixels = 3 * CELL_HEIGHT
+        pixelHeight = Math.max(targetH_pixels, minH_pixels)
+        imgHeight = Math.ceil(pixelHeight / CELL_HEIGHT)
+      } else {
+        // Fallback: 40% of terminal height
+        imgHeight = Math.floor(rows * 0.4)
+        pixelHeight = imgHeight * CELL_HEIGHT
+      }
 
       // Sync terminal info prevents InkPictureProvider's async terminal
       // query from delaying the first render and ensures the correct
@@ -243,8 +202,10 @@ export const ImageShowTool = buildTool({
         <InkPictureProvider terminalInfo={terminalInfo}>
           <Image
             src={content.src}
-            width={imgWidth}
+            width={targetW_chars}
             height={imgHeight}
+            pixelWidth={targetW_pixels}
+            pixelHeight={pixelHeight}
             alt={content.alt}
           />
         </InkPictureProvider>
@@ -262,58 +223,58 @@ export const ImageShowTool = buildTool({
       base64?: string
       src?: string
       alt?: string
+      naturalWidth?: number
+      naturalHeight?: number
     }
   }> {
     const url = input.url
     const alt = input.alt ?? url.split('/').pop() ?? 'image'
 
-    // Normalize src for ink-picture rendering
-    let src = url
-    if (src.startsWith('~')) {
-      src = src.replace(/^~(?=$|\/)/, homedir())
-    }
-    if (src.startsWith('file://')) {
-      src = src.slice(7)
-    }
-
+    const src = normalizeSrc(url)
     logForDebugging(`ImageShow: loading ${url}`)
 
-    const result = await loadImage(url)
-
-    if (!result) {
-      return {
-        data: {
-          success: false,
-          message: `Failed to load image from: ${url}`,
-        },
-      }
-    }
+    try {
+      const image = await loadImage(src)
+      const naturalWidth = image.bitmap.width
+      const naturalHeight = image.bitmap.height
 
-    const { buffer, format } = result
+      const buffer = await image.getBuffer('image/png')
 
-    const mediaType =
-      format === 'jpeg'
-        ? 'image/jpeg'
-        : format === 'gif'
-          ? 'image/gif'
-          : format === 'webp'
-            ? 'image/webp'
-            : 'image/png'
+      if (buffer.length > 10_000_000) {
+        logForDebugging(`ImageShow: image too large (${buffer.length} bytes)`)
+        return {
+          data: {
+            success: false,
+            message: `Image too large (${(buffer.length / 1024 / 1024).toFixed(1)} MB). Max 10 MB.`,
+          },
+        }
+      }
 
-    logForDebugging(`ImageShow: loaded ${buffer.length} byte ${format} image`)
+      logForDebugging(`ImageShow: loaded ${buffer.length} byte PNG, ${naturalWidth}x${naturalHeight}`)
 
-    return {
-      data: {
-        success: true,
-        message: `Displayed: ${alt} (${buffer.length} bytes, ${format})`,
-        imageData: {
+      return {
+        data: {
+          success: true,
+          message: `Displayed: ${alt} (${buffer.length} bytes, PNG, ${naturalWidth}x${naturalHeight})`,
+          imageData: {
+            base64: buffer.toString('base64'),
+            mediaType: 'image/png',
+          },
           base64: buffer.toString('base64'),
-          mediaType,
+          src,
+          alt,
+          naturalWidth,
+          naturalHeight,
         },
-        base64: buffer.toString('base64'),
-        src,
-        alt,
-      },
+      }
+    } catch (err) {
+      logForDebugging(`ImageShow: load error ${err} for ${url}`)
+      return {
+        data: {
+          success: false,
+          message: `Failed to fetch: ${url}`,
+        },
+      }
     }
   },
 }) satisfies ToolDef<any, any>

src/tools/ImageShowTool/__tests__/ShowLocalImage.test.tsx

@@ -4,44 +4,65 @@
  *
  * Usage:
  *   bun run src/tools/ImageShowTool/__tests__/ShowLocalImage.test.tsx
+ *   Press Ctrl+C to exit
  */
 
-import React, { useEffect } from 'react'
+import { Jimp } from 'jimp'
+import React, { useEffect, useState } from 'react'
 import { render, Box, Text, useApp } from 'ink'
-import Image, { InkPictureProvider, type TerminalInfo } from 'src/ink-picture/index.ts'
+import Image, { InkPictureProvider } from 'src/ink-picture/index.ts'
 
 const IMAGE_PATH = '/home/yuki/Pictures/Wallpapers/3god.jpg'
 
-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 terminalInfo: Partial<TerminalInfo> = {
-  supportsKittyGraphics: !!(
-    process.env.TERM?.includes('kitty') ||
-    process.env.KITTY_WINDOW_ID ||
-    process.env.TERM_PROGRAM === 'kitty' ||
-    process.env.TERM_PROGRAM === 'ghostty' ||
-    process.env.TERM_PROGRAM === 'WezTerm' ||
-    process.env.TERM_PROGRAM === 'konsole' ||
-    process.env.TERM_PROGRAM === 'foot'
-  ),
-  supportsUnicode: true,
-}
+const CELL_WIDTH = 8
+const CELL_HEIGHT = 16
 
 function App() {
   const { exit } = useApp()
+  const [dims, setDims] = useState<{
+    width: number
+    height: number
+    pixelWidth: number
+    pixelHeight: number
+  } | null>(null)
+  const [err, setErr] = useState(false)
 
   useEffect(() => {
-    const timer = setTimeout(() => exit(), 3000)
-    return () => clearTimeout(timer)
+    (async () => {
+      try {
+        const image = await Jimp.read(IMAGE_PATH)
+        const origW = image.bitmap.width
+        const origH = image.bitmap.height
+        const cols = process.stdout.columns ?? 80
+
+        const targetW_chars = Math.floor(cols * 0.6)
+        const targetW_pixels = targetW_chars * CELL_WIDTH
+        const targetH_pixels = Math.floor(targetW_pixels * (origH / origW))
+        const minH_pixels = 3 * CELL_HEIGHT
+        const finalH_pixels = Math.max(targetH_pixels, minH_pixels)
+        const targetH_chars = Math.ceil(finalH_pixels / CELL_HEIGHT)
+
+        setDims({ width: targetW_chars, height: targetH_chars, pixelWidth: targetW_pixels, pixelHeight: finalH_pixels })
+      } catch {
+        setErr(true)
+        exit()
+      }
+    })()
   }, [exit])
 
+  useEffect(() => {
+    const handleSigint = () => exit()
+    process.on('SIGINT', handleSigint)
+    return () => process.off('SIGINT', handleSigint)
+  }, [exit])
+
+  if (err) return <Text color="red">Failed to load image</Text>
+  if (!dims) return <Text>Loading...</Text>
+
   return (
     <Box flexDirection="column">
-      <InkPictureProvider terminalInfo={terminalInfo}>
-        <Image src={IMAGE_PATH} width={imgWidth} height={imgHeight} alt="3god" />
+      <InkPictureProvider>
+        <Image src={IMAGE_PATH} width={dims.width} height={dims.height} pixelWidth={dims.pixelWidth} pixelHeight={dims.pixelHeight} alt="3god" />
       </InkPictureProvider>
     </Box>
   )

src/tools/ImageShowTool/__tests__/ShowUrlImage.test.tsx

@@ -4,46 +4,65 @@
  *
  * Usage:
  *   bun run src/tools/ImageShowTool/__tests__/ShowUrlImage.test.tsx
+ *   Press Ctrl+C to exit
  */
 
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { render, Box, Text, useApp } from 'ink'
-import Image, { InkPictureProvider, type TerminalInfo } from 'src/ink-picture/index.ts'
-
-const IMAGE_URL =
-  'https://kimi-web-img.moonshot.cn/img/images.pexels.com/8f909bffa5353ba43aac1db1f83b1bf5450a8cd5.jpeg'
-
-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 terminalInfo: Partial<TerminalInfo> = {
-  supportsKittyGraphics: !!(
-    process.env.TERM?.includes('kitty') ||
-    process.env.KITTY_WINDOW_ID ||
-    process.env.TERM_PROGRAM === 'kitty' ||
-    process.env.TERM_PROGRAM === 'ghostty' ||
-    process.env.TERM_PROGRAM === 'WezTerm' ||
-    process.env.TERM_PROGRAM === 'konsole' ||
-    process.env.TERM_PROGRAM === 'foot'
-  ),
-  supportsUnicode: true,
-}
+import Image, { InkPictureProvider } from 'src/ink-picture/index.ts'
+import { loadImageFromUrl } from 'src/ink-picture/utils/jimpURL.ts'
+
+const IMAGE_URL = 'https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png'
+
+const CELL_WIDTH = 8
+const CELL_HEIGHT = 16
 
 function App() {
   const { exit } = useApp()
+  const [dims, setDims] = useState<{
+    width: number
+    height: number
+    pixelWidth: number
+    pixelHeight: number
+  } | null>(null)
+  const [err, setErr] = useState(false)
 
   useEffect(() => {
-    // Longer timeout for remote image (network fetch)
-    const timer = setTimeout(() => exit(), 15000)
-    return () => clearTimeout(timer)
+    (async () => {
+      try {
+        const image = await loadImageFromUrl(IMAGE_URL)
+        const origW = image.bitmap.width
+        const origH = image.bitmap.height
+        const cols = process.stdout.columns ?? 80
+
+        const targetW_chars = Math.floor(cols * 0.6)
+        const targetW_pixels = targetW_chars * CELL_WIDTH
+        const targetH_pixels = Math.floor(targetW_pixels * (origH / origW))
+        const minH_pixels = 3 * CELL_HEIGHT
+        const finalH_pixels = Math.max(targetH_pixels, minH_pixels)
+        const targetH_chars = Math.ceil(finalH_pixels / CELL_HEIGHT)
+
+        setDims({ width: targetW_chars, height: targetH_chars, pixelWidth: targetW_pixels, pixelHeight: finalH_pixels })
+      } catch {
+        setErr(true)
+        exit()
+      }
+    })()
   }, [exit])
 
+  useEffect(() => {
+    const handleSigint = () => exit()
+    process.on('SIGINT', handleSigint)
+    return () => process.off('SIGINT', handleSigint)
+  }, [exit])
+
+  if (err) return <Text color="red">Failed to load image: {IMAGE_URL}</Text>
+  if (!dims) return <Text>Loading...</Text>
+
   return (
     <Box flexDirection="column">
-      <InkPictureProvider terminalInfo={terminalInfo}>
-        <Image src={IMAGE_URL} width={imgWidth} height={imgHeight} alt="remote" />
+      <InkPictureProvider>
+        <Image src={IMAGE_URL} width={dims.width} height={dims.height} pixelWidth={dims.pixelWidth} pixelHeight={dims.pixelHeight} alt="remote" />
       </InkPictureProvider>
     </Box>
   )