feat(desktop): remote-mode image attach/display + per-profile gateway switching

apps/desktop/electron/preload.cjs

@@ -11,6 +11,17 @@ contextBridge.exposeInMainWorld('hermesDesktop', {
   probeConnectionConfig: remoteUrl => ipcRenderer.invoke('hermes:connection-config:probe', remoteUrl),
   oauthLoginConnectionConfig: remoteUrl => ipcRenderer.invoke('hermes:connection-config:oauth-login', remoteUrl),
   oauthLogoutConnectionConfig: remoteUrl => ipcRenderer.invoke('hermes:connection-config:oauth-logout', remoteUrl),
+  connections: {
+    get: () => ipcRenderer.invoke('hermes:connections:get'),
+    add: payload => ipcRenderer.invoke('hermes:connections:add', payload),
+    remove: id => ipcRenderer.invoke('hermes:connections:remove', id),
+    activate: id => ipcRenderer.invoke('hermes:connections:activate', id),
+    activateLocal: () => ipcRenderer.invoke('hermes:connections:activateLocal'),
+    test: payload => ipcRenderer.invoke('hermes:connections:test', payload),
+    probe: url => ipcRenderer.invoke('hermes:connection-config:probe', url),
+    oauthLogin: url => ipcRenderer.invoke('hermes:connection-config:oauth-login', url),
+    oauthLogout: url => ipcRenderer.invoke('hermes:connection-config:oauth-logout', url)
+  },
   api: request => ipcRenderer.invoke('hermes:api', request),
   notify: payload => ipcRenderer.invoke('hermes:notify', payload),
   requestMicrophoneAccess: () => ipcRenderer.invoke('hermes:requestMicrophoneAccess'),

apps/desktop/src/app/session/hooks/use-prompt-actions.ts

@@ -31,6 +31,7 @@ import { clearNotifications, notify, notifyError } from '@/store/notifications'
 import { requestDesktopOnboarding } from '@/store/onboarding'
 import {
   $busy,
+  $connection,
   $messages,
   $yoloActive,
   setAwaitingResponse,
@@ -69,6 +70,27 @@ function inlineErrorMessage(error: unknown, fallback: string): string {
   return (raw.match(/Error invoking remote method '[^']+': Error: (.+)$/)?.[1] ?? raw).replace(/^Error:\s*/, '').trim()
 }
 
+function base64FromDataUrl(dataUrl: string): string {
+  const comma = dataUrl.indexOf(',')
+
+  return comma >= 0 ? dataUrl.slice(comma + 1) : ''
+}
+
+function imageExtFromPath(filePath: string): string {
+  const match = /\.([a-z0-9]+)$/i.exec(filePath)
+
+  return match ? `.${match[1].toLowerCase()}` : '.png'
+}
+
+// Remote gateway: the local composer-images file does not exist on the gateway
+// machine, so read the bytes here and upload them via image.attach_bytes.
+async function readImageForRemoteAttach(filePath: string): Promise<{ data: string; ext: string } | null> {
+  const dataUrl = await window.hermesDesktop?.readFileDataUrl(filePath)
+  const data = dataUrl ? base64FromDataUrl(dataUrl) : ''
+
+  return data ? { data, ext: imageExtFromPath(filePath) } : null
+}
+
 interface PromptActionsOptions {
   activeSessionId: string | null
   activeSessionIdRef: MutableRefObject<string | null>
@@ -181,16 +203,34 @@ export function usePromptActions({
     ) => {
       const updateComposerAttachments = options.updateComposerAttachments ?? true
       const images = attachments.filter(attachment => attachment.kind === 'image' && attachment.path)
+      const remote = $connection.get()?.mode === 'remote'
 
       for (const attachment of images) {
         if (attachment.attachedSessionId === sessionId) {
           continue
         }
 
-        const result = await requestGateway<ImageAttachResponse>('image.attach', {
-          session_id: sessionId,
-          path: attachment.path
-        })
+        let result: ImageAttachResponse
+
+        if (remote) {
+          const payload = attachment.path ? await readImageForRemoteAttach(attachment.path) : null
+
+          if (!payload) {
+            const label = attachment.label || (attachment.path ? pathLabel(attachment.path) : 'image')
+            throw new Error(`Could not read ${label}`)
+          }
+
+          result = await requestGateway<ImageAttachResponse>('image.attach_bytes', {
+            session_id: sessionId,
+            data: payload.data,
+            ext: payload.ext
+          })
+        } else {
+          result = await requestGateway<ImageAttachResponse>('image.attach', {
+            session_id: sessionId,
+            path: attachment.path
+          })
+        }
 
         if (!result.attached) {
           const label = attachment.label || (attachment.path ? pathLabel(attachment.path) : 'image')