Merge pull request #23 from yugo-ibuki/claude/add-image-loading-nseoj

Add image attachment support to input area

Author: yugo-ibuki

src/main/index.ts

@@ -1,4 +1,4 @@
-import { app, BrowserWindow, globalShortcut, ipcMain, Menu } from 'electron'
+import { app, BrowserWindow, dialog, globalShortcut, ipcMain, Menu, protocol } from 'electron'
 import { join } from 'path'
 import { homedir } from 'os'
 import { readdir, readFile } from 'fs/promises'
@@ -136,16 +136,45 @@ function createWindow(): void {
     mainWindow!.show()
   })
 
+  // Relay image drops from preload to renderer
+  ipcMain.on('image-dropped-from-renderer', (_event, paths: string[]) => {
+    mainWindow?.webContents.send('image-dropped', paths)
+  })
+
   if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
     mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
   } else {
     mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
   }
 }
 
+// Register custom protocol to serve local files for image thumbnails
+protocol.registerSchemesAsPrivileged([
+  { scheme: 'local-image', privileges: { bypassCSP: true, supportFetchAPI: true } }
+])
+
 app.whenReady().then(() => {
   electronApp.setAppUserModelId('com.unitmux')
 
+  // Handle local-image:// requests by serving files from disk
+  protocol.handle('local-image', async (request) => {
+    const filePath = decodeURIComponent(new URL(request.url).pathname)
+    const ext = filePath.split('.').pop()?.toLowerCase() ?? ''
+    const mimeMap: Record<string, string> = {
+      png: 'image/png',
+      jpg: 'image/jpeg',
+      jpeg: 'image/jpeg',
+      gif: 'image/gif',
+      webp: 'image/webp',
+      svg: 'image/svg+xml',
+      bmp: 'image/bmp'
+    }
+    const data = await readFile(filePath)
+    return new Response(data, {
+      headers: { 'Content-Type': mimeMap[ext] ?? 'application/octet-stream' }
+    })
+  })
+
   // Custom menu: remove Cmd+H (Hide) accelerator to prevent conflict with Ctrl+Cmd+H
   const menu = Menu.buildFromTemplate([
     {
@@ -187,8 +216,25 @@ app.whenReady().then(() => {
     }
   })
 
-  ipcMain.handle('tmux:send-input', async (_event, { target, text, vimMode }) => {
-    return sendInput(target, text, vimMode)
+  ipcMain.handle('tmux:send-input', async (_event, { target, text, vimMode, images }) => {
+    return sendInput(target, text, vimMode, images)
+  })
+
+  ipcMain.handle('dialog:open-image', async () => {
+    const win = mainWindow
+    if (!win) return []
+    // Temporarily disable alwaysOnTop so the native dialog is visible on macOS
+    const wasOnTop = win.isAlwaysOnTop()
+    if (wasOnTop) win.setAlwaysOnTop(false)
+    try {
+      const result = await dialog.showOpenDialog(win, {
+        properties: ['openFile', 'multiSelections'],
+        filters: [{ name: 'Images', extensions: ['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'bmp'] }]
+      })
+      return result.canceled ? [] : result.filePaths
+    } finally {
+      if (wasOnTop) win.setAlwaysOnTop(true)
+    }
   })
 
   ipcMain.handle('tmux:capture-pane', async (_event, target: string) => {

src/main/tmux.ts

@@ -677,7 +677,8 @@ const TARGET_PATTERN = /^[a-zA-Z0-9_-]+:\d+\.\d+$/
 export async function sendInput(
   target: string,
   text: string,
-  vimMode = false
+  vimMode = false,
+  images: string[] = []
 ): Promise<{ success: boolean; error?: string }> {
   if (!TARGET_PATTERN.test(target)) {
     return { success: false, error: 'Invalid target format' }
@@ -708,13 +709,22 @@ export async function sendInput(
       await new Promise((r) => setTimeout(r, 100))
     }
 
+    // Send image paths as bracketed paste so Claude CLI detects them as images
+    if (images.length > 0) {
+      const imagePaths = images.join(' ')
+      await run(['send-keys', '-t', target, '\x1b[200~'])
+      await run(['send-keys', '-t', target, '-l', imagePaths])
+      await run(['send-keys', '-t', target, '\x1b[201~'])
+      await new Promise((r) => setTimeout(r, 500))
+    }
+
     const isCodex = command === 'codex'
     const hasNewlines = text.includes('\n')
 
     if (isCodex) {
       // Codex ignores Enter from external tmux clients. Use run-shell
       // to execute send-keys from within the tmux server process itself.
-      await run(['send-keys', '-t', target, '-l', text])
+      if (text) await run(['send-keys', '-t', target, '-l', text])
       await run(['run-shell', `${tmuxBin} send-keys -t ${target} Enter`])
     } else if (hasNewlines) {
       // Send bracketed paste escape sequences to preserve newlines
@@ -724,9 +734,12 @@ export async function sendInput(
       await run(['send-keys', '-t', target, '\x1b[201~'])
       await new Promise((r) => setTimeout(r, 300))
       await run(['send-keys', '-t', target, '', 'Enter'])
-    } else {
+    } else if (text) {
       await run(['send-keys', '-t', target, '-l', text])
       await run(['send-keys', '-t', target, 'Enter'])
+    } else {
+      // Images only, no text — just send Enter to submit
+      await run(['send-keys', '-t', target, 'Enter'])
     }
     return { success: true }
   } catch (e) {

src/preload/index.d.ts

@@ -56,7 +56,7 @@ interface TmuxAPI {
   killPane: (target: string) => Promise<SendResult>
   findShellPane: (session: string) => Promise<string | null>
   ensureShellPane: (session: string, cwd: string) => Promise<{ success: boolean; target?: string; error?: string }>
-  sendInput: (target: string, text: string, vimMode?: boolean) => Promise<SendResult>
+  sendInput: (target: string, text: string, vimMode?: boolean, images?: string[]) => Promise<SendResult>
   capturePane: (target: string) => Promise<string>
   getPaneDetail: (target: string) => Promise<PaneDetail | null>
   listTmuxSessions: () => Promise<string[]>
@@ -79,6 +79,8 @@ interface TmuxAPI {
   stopStream: () => Promise<boolean>
   onStreamData: (callback: (content: string) => void) => () => void
   onChatData: (callback: (messages: ChatMessage[]) => void) => () => void
+  selectImages: () => Promise<string[]>
+  onImageDropped: (callback: (paths: string[]) => void) => () => void
 }
 
 declare global {

src/preload/index.ts

@@ -1,4 +1,4 @@
-import { contextBridge, ipcRenderer } from 'electron'
+import { contextBridge, ipcRenderer, webUtils } from 'electron'
 
 export interface SkillEntry {
   name: string
@@ -42,8 +42,8 @@ export interface SendResult {
 
 const api = {
   listSessions: (): Promise<TmuxPane[]> => ipcRenderer.invoke('tmux:list-sessions'),
-  sendInput: (target: string, text: string, vimMode = false): Promise<SendResult> =>
-    ipcRenderer.invoke('tmux:send-input', { target, text, vimMode }),
+  sendInput: (target: string, text: string, vimMode = false, images: string[] = []): Promise<SendResult> =>
+    ipcRenderer.invoke('tmux:send-input', { target, text, vimMode, images }),
   capturePane: (target: string): Promise<string> => ipcRenderer.invoke('tmux:capture-pane', target),
   getPaneDetail: (target: string): Promise<PaneDetail | null> =>
     ipcRenderer.invoke('tmux:pane-detail', target),
@@ -95,6 +95,12 @@ const api = {
     const handler = (_event: unknown, messages: ChatMessage[]): void => callback(messages)
     ipcRenderer.on('tmux:chat-data', handler)
     return () => ipcRenderer.removeListener('tmux:chat-data', handler)
+  },
+  selectImages: (): Promise<string[]> => ipcRenderer.invoke('dialog:open-image'),
+  onImageDropped: (callback: (paths: string[]) => void): (() => void) => {
+    const handler = (_event: unknown, paths: string[]): void => callback(paths)
+    ipcRenderer.on('image-dropped', handler)
+    return () => ipcRenderer.removeListener('image-dropped', handler)
   }
 }
 
@@ -104,3 +110,30 @@ if (process.contextIsolated) {
   // @ts-ignore (define in dts)
   window.api = api
 }
+
+// Prevent Electron from navigating to dropped files & capture image drops
+window.addEventListener('DOMContentLoaded', () => {
+  const imageExt = /\.(png|jpe?g|gif|webp|svg|bmp)$/i
+
+  document.addEventListener('dragover', (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+  })
+
+  document.addEventListener('drop', (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    const paths: string[] = []
+    if (e.dataTransfer) {
+      for (const file of Array.from(e.dataTransfer.files)) {
+        const filePath = webUtils.getPathForFile(file)
+        if (filePath && imageExt.test(filePath)) {
+          paths.push(filePath)
+        }
+      }
+    }
+    if (paths.length > 0) {
+      ipcRenderer.send('image-dropped-from-renderer', paths)
+    }
+  })
+})

src/renderer/src/App.css

@@ -442,6 +442,89 @@
     inset 0 0 12px rgba(91, 141, 239, 0.03);
 }
 
+/* ── Image Attachments ── */
+.image-attachments {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  padding: 4px 0;
+  flex-shrink: 0;
+}
+
+.image-thumb {
+  position: relative;
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  overflow: hidden;
+  background: var(--bg-input);
+}
+
+.image-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.image-thumb-remove {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  font-size: 9px;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  opacity: 0;
+  transition: opacity var(--transition);
+}
+
+.image-thumb:hover .image-thumb-remove {
+  opacity: 1;
+}
+
+.image-thumb-name {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  font-size: 7px;
+  background: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  padding: 1px 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.attach-btn {
+  padding: 6px 10px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--text-dim);
+  font-size: 10px;
+  font-weight: 600;
+  font-family: var(--font-mono);
+  cursor: pointer;
+  transition: all var(--transition);
+}
+
+.attach-btn:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+}
+
 /* ── Footer ── */
 .footer {
   display: flex;