+
+
+
+ Gateway Connection
+ {state.envOverride ?
env override : null}
+
+
+ Hermes Desktop starts its own local gateway by default. Use a remote gateway when you want this app to
+ control an already-running Hermes dashboard backend on another machine or behind a trusted proxy.
+
+
+
+ {state.envOverride ? (
+
+
+
+
Environment variables are controlling this desktop session.
+
+ Unset HERMES_DESKTOP_REMOTE_URL and HERMES_DESKTOP_REMOTE_TOKEN to use the saved
+ setting below.
+
+
+
+ ) : null}
+
+
+ setState(current => ({ ...current, mode: 'local' }))}
+ title="Local gateway"
+ />
+ setState(current => ({ ...current, mode: 'remote' }))}
+ title="Remote gateway"
+ />
+
+
+
+ setState(current => ({ ...current, remoteUrl: event.target.value }))}
+ placeholder="https://gateway.example.com/hermes"
+ value={state.remoteUrl}
+ />
+ }
+ description="Base URL for the remote dashboard backend. Path prefixes are supported, for example /hermes."
+ title="Remote URL"
+ />
+ setRemoteToken(event.target.value)}
+ placeholder={state.remoteTokenSet ? `Existing token ${state.remoteTokenPreview ?? 'saved'}` : 'Paste session token'}
+ type="password"
+ value={remoteToken}
+ />
+ }
+ description="The dashboard session token used for REST and WebSocket access. Leave blank to keep the saved token."
+ title="Session token"
+ />
+
+
+ {lastTest ? {lastTest}
: null}
+
+
+ void testRemote()} variant="outline">
+ {testing ? : null}
+ Test remote
+
+ void save(false)} variant="outline">
+ Save for next restart
+
+ void save(true)}>
+ {saving ? : null}
+ Save and reconnect
+
+
+
+ )
+}
diff --git a/apps/desktop/src/app/settings/index.tsx b/apps/desktop/src/app/settings/index.tsx
index 6104e86372c..a68dfa59c05 100644
--- a/apps/desktop/src/app/settings/index.tsx
+++ b/apps/desktop/src/app/settings/index.tsx
@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from 'react'
import { getHermesConfigDefaults, getHermesConfigRecord, saveHermesConfig } from '@/hermes'
import { triggerHaptic } from '@/lib/haptics'
-import { KeyRound, Package } from '@/lib/icons'
+import { Globe, KeyRound, Package } from '@/lib/icons'
import { notifyError } from '@/store/notifications'
import { OverlayIconButton } from '../overlays/overlay-chrome'
@@ -14,6 +14,7 @@ import { OverlayView } from '../overlays/overlay-view'
import { AppearanceSettings } from './appearance-settings'
import { ConfigSettings } from './config-settings'
import { SEARCH_PLACEHOLDER, SECTIONS } from './constants'
+import { GatewaySettings } from './gateway-settings'
import { KeysSettings } from './keys-settings'
import { ToolsSettings } from './tools-settings'
import type { SettingsPageProps, SettingsQueryKey, SettingsView as SettingsViewId } from './types'
@@ -23,6 +24,7 @@ export function SettingsView({ onClose, onConfigSaved }: SettingsPageProps) {
const [queries, setQueries] = useState