image-peek

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Register } from 'claude-code'
3
4import type { Peek } from '../types'
5
6const images = atom({ plugin: 'image-peek', key: 'images' } as const, [])
7
8// 붙여 넣은 글에 들어 있는 이미지 파일 경로 (따옴표로 감싸였어도)
9const IMAGE_PATH = /[A-Za-z]:\\[^"'\r\n]*?\.(?:png|jpe?g|gif|webp|bmp)/i
10// Claude Code가 입력창에 넣는 자리표시자: [Image #1]
11const PLACEHOLDER = /\[Image #(\d+)\]/g
12// 자리표시자가 생긴 순간에 만들어진 파일로 볼 시간 범위
13const FRESH_MS = 15_000
14
15// PowerShell 작은따옴표 문자열 안에 넣을 수 있게 합니다.
16const quote = (s: string) => `'${s.replace(/'/g, "''")}'`
17
18const basename = (path: string) => path.slice(Math.max(path.lastIndexOf('\\'), path.lastIndexOf('/')) + 1)
19
20// 자리표시자 번호 → 원본 파일 경로 (못 찾으면 '')
21let sources = new Map<number, string>()
22
23// 붙여 넣은 직후 임시 폴더에 새로 생긴 이미지 파일을 찾습니다.
24async function freshTempImage($: EngineInterface) {
25  const temp = (await $.env.get('TEMP')) ?? (await $.env.get('TMP'))
26  if (!temp) return ''
27  const now = await $.clock.now()
28  const entries = await $.fs.list(temp).catch(() => [])
29  const newest = entries
30    .filter(f => f.kind === 'file' && /\.(?:png|jpe?g|gif|webp|bmp)$/i.test(f.name) && now - f.mtimeMs < FRESH_MS)
31    .sort((a, b) => b.mtimeMs - a.mtimeMs)[0]
32  return newest ? `${temp}\\${newest.name}` : ''
33}
34
35async function track($: EngineInterface, inputText: string, draft: string) {
36  const pasted = IMAGE_PATH.exec(inputText)?.[0] ?? ''
37
38  const list: Peek[] = []
39  for (const [, n] of draft.matchAll(PLACEHOLDER)) {
40    const num = Number(n)
41    if (!sources.has(num)) sources.set(num, pasted || (await freshTempImage($)))
42    list.push({ label: `Image ${num}`, path: sources.get(num) ?? '' })
43  }
44  // 터미널이 경로를 글자 그대로 넣은 경우도 목록에 올립니다.
45  const raw = IMAGE_PATH.exec(draft)?.[0]
46  if (raw) list.push({ label: basename(raw), path: raw })
47
48  const current = await read($, images)
49  if (JSON.stringify(current) !== JSON.stringify(list)) await update($, images, () => list)
50}
51
52async function openImage($: EngineInterface, path: string) {
53  if (!path) {
54    $.ui.toast('이 이미지의 원본 파일을 찾지 못했어요')
55    return
56  }
57  const { exitCode } = await $.process.run([
58    'powershell.exe', '-NoProfile', '-NonInteractive', '-Command', `Start-Process -FilePath ${quote(path)}`,
59  ])
60  if (exitCode !== 0) $.ui.toast('이미지를 열지 못했어요')
61}
62
63export const register: Register = on => {
64  sources = new Map()
65
66  // 입력창이 바뀔 때마다, 지금 들어 있는 이미지 자리표시자로 목록을 맞춥니다.
67  on('prompt.edit', async ($, e, next) => {
68    const ran = await next(e)
69    const isImageEdit = IMAGE_PATH.test(e.inputText) || e.inputText.includes('[Image') ||
70      e.text.includes('[Image') || ran.text.includes('[Image') || IMAGE_PATH.test(ran.text)
71    if (isImageEdit) await track($, e.inputText, ran.text)
72    return ran
73  }).catch(($, e, next) => next(e))
74
75  // 보내고 나면 입력창이 비므로 목록도 비웁니다.
76  on('prompt.submit', async ($, e, next) => {
77    const ran = await next(e)
78    await update($, images, () => [])
79    return ran
80  }).catch(($, e, next) => next(e))
81
82  // 아래 플러그인(예: total-stats)이 그린 줄을 감싸서 함께 보여줍니다.
83  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
84    const list = await read($, images)
85    if (e.props.hasSurvey || list.length === 0) return next(e)
86
87    const below = await next(e)
88    const { Box, Button, Text } = $.ui.resolve(e)
89    return (
90      <Box flexDirection="column">
91        <Box gap={1}>
92          <Text dimColor>📎</Text>
93          {list.map(img => (
94            <Button key={`${img.label}:${img.path}`} label={img.label} onPress={() => openImage($, img.path)} />
95          ))}
96        </Box>
97        {below}
98      </Box>
99    )
100  })
101}
102

1export type Peek = {
2  label: string
3  path: string
4}
5
6declare module 'claude-code' {
7  interface PluginState {
8    'image-peek': { images: Peek[] }
9  }
10}
11