refactor: extract UI from ImageShowTool into separate component

Split ImageShowTool.ts into utility functions (ImageShowTool.ts) and
React component (UI.tsx), enabling reuse of load/calculate logic.

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

bun.lock

@@ -117,6 +117,8 @@
       },
       "devDependencies": {
         "@types/bun": "^1.3.11",
+        "@types/react": "^19.2.17",
+        "@types/react-dom": "^19.2.3",
         "typescript": "^6.0.2",
         "vitest": "^4.1.10",
       },
@@ -612,6 +614,8 @@
 
     "@types/react": ["@types/react@19.2.17", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw=="],
 
+    "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
+
     "@types/wrap-ansi": ["@types/wrap-ansi@3.0.0", "", {}, "sha512-ltIpx+kM7g/MLRZfkbL7EsCEjfzCcScLpkg37eXEtx5kmrAKBkTJwd1GIAjDSL8wTpM6Hzn5YO4pSb91BEwu1g=="],
 
     "@typespec/ts-http-runtime": ["@typespec/ts-http-runtime@0.3.6", "", { "dependencies": { "http-proxy-agent": "^7.0.0", "https-proxy-agent": "^7.0.0", "tslib": "^2.6.2" } }, "sha512-jIXhD0eWQ1JA6ln/5Dltyx22UxWNrw0hZmhy2rlv6m6KgF7kplHx3g0fzi09lNmTJQRR91OlemYp3xFnvDK9og=="],

package.json

@@ -134,6 +134,8 @@
   },
   "devDependencies": {
     "@types/bun": "^1.3.11",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
     "typescript": "^6.0.2",
     "vitest": "^4.1.10"
   },

src/ink-picture/__tests__/LocalPicture.test.tsx

@@ -11,7 +11,7 @@
  */
 
 import { Jimp } from "jimp";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { render, Box, Text, useApp } from "ink";
 import Image, { InkPictureProvider } from "../index.ts";
 import { loadImageFromUrl } from "../utils/jimpURL.ts";
@@ -78,7 +78,6 @@ function App() {
   useEffect(() => {
     const handleSigint = () => exit();
     process.on("SIGINT", handleSigint);
-    return () => process.off("SIGINT", handleSigint);
   }, [exit]);
 
   if (err) {

src/tools/ImageShowTool/ImageShowTool.ts

@@ -11,10 +11,10 @@
  */
 
 import { Jimp } from "jimp";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { render, Box, Text, useApp } from "ink";
-import Image, { InkPictureProvider } from "../../ink-picture/index.ts";
-import { loadImageFromUrl } from "../../ink-picture/utils/jimpURL.ts";
+import Image, { InkPictureProvider } from "../index.ts";
+import { loadImageFromUrl } from "../utils/jimpURL.ts";
 
 // 终端字符尺寸（像素）
 const CELL_WIDTH = 8;
@@ -78,7 +78,6 @@ function App() {
   useEffect(() => {
     const handleSigint = () => exit();
     process.on("SIGINT", handleSigint);
-    return () => process.off("SIGINT", handleSigint);
   }, [exit]);
 
   if (err) {

src/tools/ImageShowTool/UI.tsx

@@ -0,0 +1,76 @@
+#!/usr/bin/env bun
+/**
+ * Visual test: display a local image or URL using ink-picture + Ink.
+ */
+
+import { useEffect, useState } from "react";
+import { render, Box, Text, useApp } from "ink";
+import Image, { InkPictureProvider } from "../../ink-picture/index.ts";
+import {
+  getImagePath,
+  isUrl,
+  loadImage,
+  calculateDimensions,
+  type ImageDimensions,
+} from "./ImageShowTool.ts";
+
+const args = process.argv.slice(2);
+const IMAGE_PATH = getImagePath(args);
+
+function App() {
+  const { exit } = useApp();
+  const [dimensions, setDimensions] = useState<ImageDimensions | null>(null);
+  const [err, setErr] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const image = await loadImage(IMAGE_PATH);
+        const dims = calculateDimensions(
+          image.bitmap.width,
+          image.bitmap.height,
+          process.stdout.columns ?? 80
+        );
+        setDimensions(dims);
+      } catch (e) {
+        console.error(e);
+        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 fetch: {IMAGE_PATH}</Text>;
+  }
+
+  if (!dimensions) {
+    return <Text>Loading...</Text>;
+  }
+
+  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>
+    </Box>
+  );
+}
+
+const { waitUntilExit } = render(<App />);
+await waitUntilExit();