Add inline image utilities and integrate image handling into Location, WebFetch, and WebSearch tools.

src/tools/LocationTool/LocationTool.ts

@@ -9,6 +9,7 @@ import {
   renderToolUseMessage,
   renderToolUseProgressMessage,
 } from './UI.js'
+import { fetchImagesAsInline } from '../../utils/inlineImageUtils.js'
 
 // ── Region detection ────────────────────────────────────────────────────────
 
@@ -365,6 +366,7 @@ type Output = {
   error?: string
   rawData?: unknown
   ipGeo?: IpGeoInfo
+  images?: Array<{ url: string; base64: string; mediaType: string }>
 }
 
 // ── Amap API helpers ─────────────────────────────────────────────────────────
@@ -912,6 +914,7 @@ export const LocationTool = buildTool({
       let geocoding: LocationResult | undefined
       let places: PlaceResult[] | undefined
       let directions: DirectionsResult | undefined
+      let images: Output['images']
 
       switch (action) {
         case 'geocode':
@@ -995,6 +998,15 @@ export const LocationTool = buildTool({
         })
       }
 
+      if (places && places.length > 0) {
+        const photoUrls = places
+          .flatMap((p) => p.photos ?? [])
+          .slice(0, 6)
+        if (photoUrls.length > 0) {
+          images = await fetchImagesAsInline(photoUrls, 6)
+        }
+      }
+
       return {
         data: {
           action,
@@ -1003,6 +1015,7 @@ export const LocationTool = buildTool({
           places,
           directions,
           ipGeo,
+          images,
         } satisfies Output,
       }
     } catch (error) {
@@ -1094,7 +1107,17 @@ export const LocationTool = buildTool({
     return {
       tool_use_id: toolUseID,
       type: 'tool_result',
-      content: lines.join('\n'),
+      content: [
+        { type: 'text', text: lines.join('\n') },
+        ...(output.images?.map((img) => ({
+          type: 'image' as const,
+          source: {
+            type: 'base64' as const,
+            data: img.base64,
+            media_type: img.mediaType as 'image/png' | 'image/jpeg' | 'image/gif' | 'image/webp',
+          },
+        })) ?? []),
+      ],
     }
   },
 }) satisfies ToolDef<ReturnType<typeof inputSchema>, Output, LocationToolProgress>

src/tools/LocationTool/prompt.ts

@@ -24,7 +24,12 @@ This tool provides location-based services using two map providers:
 **Combining with other tools:**
 - After getting place/POI results from LocationTool, you can use **WebSearchTool** to search for travel guides, reviews, or additional information about specific places
 - Use **WebFetchTool** to fetch detailed information from URLs found in search results (e.g., attraction pages, hotel booking sites, travel blog posts)
-- Example: Search places → WebSearch for reviews → WebFetch for detailed info
+- **ImageShowTool**: When place results include photo URLs, the tool will automatically display images inline in the terminal. You can also explicitly call ImageShowTool with any image URL (local path or https:// URL) to display images.
+- **Google Street View**: For any location (lat,lng), you can directly call ImageShowTool with a Google Street View Static API URL to display a street view panorama:
+  - URL format: \`https://maps.googleapis.com/maps/api/streetview?size=800x400&location=<lat>,<lng>&heading=0&pitch=0&key=<YOUR_API_KEY>\`
+  - Note: The free tier of Google Street View Static API requires an API key but has generous quotas
+  - Use this when users ask for "street view" or "街景" of a location
+- Example: Search places → WebSearch for reviews → WebFetch for detailed info → ImageShow for photos → ImageShow with Google Street View URL for street panoramas
 
 **Transport modes for directions:**
 - For China (Amap): "driving", "walking", "transit" (公交/地铁)

src/tools/WebFetchTool/WebFetchTool.ts

@@ -14,6 +14,7 @@ import {
   type FetchedContent,
   getURLMarkdownContent,
 } from './utils.js' // 抓网页, 处理 markdown
+import { fetchImagesAsInline } from '../../utils/inlineImageUtils.js'
 
 const inputSchema = lazySchema(() =>
   z.strictObject({ // 严格对象 不允许多字段
@@ -40,7 +41,9 @@ const outputSchema = lazySchema(() =>
 )
 type OutputSchema = ReturnType<typeof outputSchema>
 
-export type Output = z.infer<OutputSchema> // 输出类型推导
+export type Output = z.infer<OutputSchema> & {
+  images?: Array<{ url: string; base64: string; mediaType: string }>
+}
 
 // Tool 定义开始
 export const WebFetchTool = buildTool({
@@ -180,6 +183,13 @@ To complete your request, I need to fetch content from the redirected URL. Pleas
         result += `\n\n[Binary content also saved to ${persistedPath}]`
       }
 
+      const imageUrls = result
+        ? result.match(/!\[.*?\]\((https?:\/\/[^)\s]+)\)/g)?.map((m) => m.match(/!\[[^\]]*\]\(([^)]+)\)/)?.[1] ?? []) ?? []
+        : []
+
+      const images =
+        imageUrls.length > 0 ? await fetchImagesAsInline(imageUrls.slice(0, 4), 4) : undefined
+
       const output: Output = {
         bytes,
         code,
@@ -187,6 +197,7 @@ To complete your request, I need to fetch content from the redirected URL. Pleas
         result,
         durationMs: Date.now() - start,
         url,
+        images,
       }
 
       return {
@@ -210,11 +221,21 @@ To complete your request, I need to fetch content from the redirected URL. Pleas
       }
     }
   },
-  mapToolResultToToolResultBlockParam({ result }, toolUseID) {
+  mapToolResultToToolResultBlockParam(output, toolUseID) {
     return {
       tool_use_id: toolUseID,
       type: 'tool_result',
-      content: result,
+      content: [
+        { type: 'text', text: output.result },
+        ...(output.images?.map((img) => ({
+          type: 'image' as const,
+          source: {
+            type: 'base64' as const,
+            data: img.base64,
+            media_type: img.mediaType as 'image/png' | 'image/jpeg' | 'image/gif' | 'image/webp',
+          },
+        })) ?? []),
+      ],
     }
   },
 } satisfies ToolDef<InputSchema, Output>)

src/tools/WebFetchTool/prompt.ts

@@ -18,6 +18,7 @@ Usage notes:
   - Includes a self-cleaning 15-minute cache for faster responses when repeatedly accessing the same URL
   - When a URL redirects to a different host, the tool will inform you and provide the redirect URL in a special format. You should then make a new WebFetch request with the redirect URL to fetch the content.
   - For GitHub URLs, prefer using the gh CLI via Bash instead (e.g., gh pr view, gh issue view, gh api).
+  - **ImageShowTool**: When fetched content contains image URLs (e.g., from a wiki page or travel blog), images will be automatically displayed inline in the terminal. You can also explicitly call ImageShowTool with any image URL to display it.
 `
 
 export function makeSecondaryModelPrompt(

src/tools/WebSearchTool/WebSearchTool.ts

@@ -11,6 +11,7 @@ import {
   renderToolUseMessage,
   renderToolUseProgressMessage,
 } from './UI.js'
+import { fetchImagesAsInline } from '../../utils/inlineImageUtils.js'
 
 const inputSchema = lazySchema(() =>
   z.strictObject({
@@ -44,7 +45,9 @@ const outputSchema = lazySchema(() =>
   }),
 )
 
-export type Output = z.infer<ReturnType<typeof outputSchema>>
+export type Output = z.infer<ReturnType<typeof outputSchema>> & {
+  images?: Array<{ url: string; base64: string; mediaType: string }>
+}
 
 export type { WebSearchProgress } from '../../types/tools.js'
 import type { WebSearchProgress } from '../../types/tools.js'
@@ -257,6 +260,14 @@ export const WebSearchTool = buildTool({
               },
             ]
 
+      const imageUrls = cleaned
+        .map((r) => r.image)
+        .filter((url): url is string => !!url)
+        .slice(0, 4)
+
+      const images =
+        imageUrls.length > 0 ? await fetchImagesAsInline(imageUrls, 4) : undefined
+
       const duration = (performance.now() - start) / 1000
 
       return {
@@ -264,6 +275,7 @@ export const WebSearchTool = buildTool({
           query: input.query,
           results: output,
           durationSeconds: duration,
+          images,
         },
       }
     } catch (error) {
@@ -298,8 +310,7 @@ export const WebSearchTool = buildTool({
         text += r + '\n\n'
       } else {
         r.content.forEach((item: any, i: number) => {
-          const imgLine = item.image ? `\n![${item.title}](${item.image})\n` : ''
-          text += `${i + 1}. ${item.title}\n${item.url}\n${item.snippet || ''}${imgLine}\n`
+          text += `${i + 1}. ${item.title}\n${item.url}\n${item.snippet || ''}\n`
         })
       }
     }
@@ -307,7 +318,17 @@ export const WebSearchTool = buildTool({
     return {
       tool_use_id: toolUseID,
       type: 'tool_result',
-      content: text,
+      content: [
+        { type: 'text', text },
+        ...(output.images?.map((img) => ({
+          type: 'image' as const,
+          source: {
+            type: 'base64' as const,
+            data: img.base64,
+            media_type: img.mediaType as 'image/png' | 'image/jpeg' | 'image/gif' | 'image/webp',
+          },
+        })) ?? []),
+      ],
     }
   },
 }) satisfies ToolDef<any, Output, WebSearchProgress>

src/tools/WebSearchTool/prompt.ts

@@ -21,9 +21,8 @@ Search Strategy:
 
 Search Result Format:
   - Each search result includes: title, URL, snippet, and optionally an image URL (thumbnail)
-  - You can use images in your response via markdown syntax: ![alt text](image_url)
-  - When search results include images, incorporate them into your answer for a richer,图文混排 experience
-  - Images make responses much more readable — use them whenever available
+  - **Images are automatically displayed inline in the terminal** when search results include image thumbnails — no need to manually call ImageShowTool for search result images
+  - You can also explicitly call ImageShowTool with any image URL (https://... or local path) to display images
 
 CRITICAL REQUIREMENT - You MUST follow this:
   - After answering the user's question, you MUST include a "Sources:" section at the end of your response

src/utils/inlineImageUtils.ts

@@ -0,0 +1,53 @@
+import { downloadImage } from './imageUrlCache.js'
+import { logForDebugging } from './debug.js'
+
+const IMAGE_URL_PATTERNS = [
+  /https?:\/\/[^\s<>\"')\]]+\.(?:jpg|jpeg|png|gif|webp)(?:[^\s<>\"'\]]*)/gi,
+  /https?:\/\/[^\s<>\"')\]]+(?:store\.is\.autonavi\.com|maps\.google\.com|upload\.wikimedia\.org)[^\s<>\"'\]]*/gi,
+]
+
+export interface InlineImage {
+  url: string
+  base64: string
+  mediaType: string
+}
+
+export function detectImageUrls(text: string): string[] {
+  const urls = new Set<string>()
+  for (const pattern of IMAGE_URL_PATTERNS) {
+    const matches = text.matchAll(pattern)
+    for (const match of matches) {
+      if (match[0]) {
+        urls.add(match[0])
+      }
+    }
+  }
+  return Array.from(urls)
+}
+
+export async function fetchImagesAsInline(
+  urls: string[],
+  maxImages = 4,
+): Promise<InlineImage[]> {
+  const uniqueUrls = [...new Set(urls)].slice(0, maxImages)
+  const results: InlineImage[] = []
+
+  await Promise.all(
+    uniqueUrls.map(async (url) => {
+      try {
+        const cached = await downloadImage(url)
+        if (cached) {
+          results.push({
+            url,
+            base64: cached.buffer.toString('base64'),
+            mediaType: cached.mediaType,
+          })
+        }
+      } catch (err) {
+        logForDebugging(`fetchImagesAsInline: failed to fetch ${url}: ${err}`)
+      }
+    }),
+  )
+
+  return results
+}