Merge remote-tracking branch 'origin/main' into bb/remove-composer-message-shadows

# Conflicts:
#	apps/desktop/src/components/assistant-ui/tool-fallback.tsx
This commit is contained in:
Brooklyn Nicholson
2026-06-06 10:47:42 -05:00
95 changed files with 9454 additions and 1437 deletions
@@ -2,11 +2,12 @@ import { useRef } from 'react'
import type { DragKind } from '@/app/chat/hooks/use-file-drop-zone'
import { Codicon } from '@/components/ui/codicon'
import { useI18n } from '@/i18n'
import { cn } from '@/lib/utils'
const COPY: Record<'files' | 'session', { icon: string; label: string }> = {
files: { icon: 'cloud-upload', label: 'Drop files to attach' },
session: { icon: 'comment-discussion', label: 'Drop to link this chat' }
const ICONS: Record<'files' | 'session', string> = {
files: 'cloud-upload',
session: 'comment-discussion'
}
/**
@@ -17,13 +18,16 @@ const COPY: Record<'files' | 'session', { icon: string; label: string }> = {
* fade-out so the label doesn't blank.
*/
export function ChatDropOverlay({ kind }: { kind: DragKind }) {
const { t } = useI18n()
const lastKind = useRef<'files' | 'session'>('files')
if (kind) {
lastKind.current = kind
}
const { icon, label } = COPY[kind ?? lastKind.current]
const resolvedKind = kind ?? lastKind.current
const icon = ICONS[resolvedKind]
const label = resolvedKind === 'files' ? t.composer.dropFiles : t.composer.dropSession
return (
<div
@@ -1,5 +1,6 @@
import { useEffect, useState } from 'react'
import { useI18n } from '@/i18n'
import { cn } from '@/lib/utils'
// Braille spinner frames — reads as a tiny ASCII loader in monospace.
@@ -9,6 +10,7 @@ const FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '
// backend (lazily spawned). Keeps the last profile name through the fade-out so
// the label doesn't blank. Purely visual — pointer-events-none.
export function ChatSwapOverlay({ profile }: { profile: string | null }) {
const { t } = useI18n()
const [frame, setFrame] = useState(0)
const [label, setLabel] = useState<null | string>(profile)
@@ -38,7 +40,7 @@ export function ChatSwapOverlay({ profile }: { profile: string | null }) {
>
<div className="flex items-center gap-2 bg-[color-mix(in_srgb,var(--dt-card)_92%,transparent)] px-4 py-2 font-mono text-[0.8125rem] text-foreground shadow-composer">
<span className="w-3 text-(--ui-accent)">{FRAMES[frame]}</span>
Waking up {label}
{t.composer.wakingProfile(label ?? '')}
</div>
</div>
)
@@ -17,39 +17,49 @@ export interface MicRecording {
heardSpeech: boolean
}
export interface MicRecorderErrorCopy {
microphoneAccessDenied: string
microphoneConstraintsUnsupported: string
microphoneInUse: string
microphonePermissionDenied: string
microphoneStartFailed: string
microphoneUnsupported: string
noMicrophone: string
}
interface MicRecorderHandle {
start: (options?: MicRecorderOptions) => Promise<void>
stop: () => Promise<MicRecording | null>
cancel: () => void
}
function micError(error: unknown): Error {
function micError(error: unknown, copy: MicRecorderErrorCopy): Error {
const name = error instanceof DOMException ? error.name : ''
if (name === 'NotAllowedError' || name === 'SecurityError') {
return new Error('Microphone permission was denied.')
return new Error(copy.microphonePermissionDenied)
}
if (name === 'NotFoundError' || name === 'DevicesNotFoundError') {
return new Error('No microphone was found.')
return new Error(copy.noMicrophone)
}
if (name === 'NotReadableError' || name === 'TrackStartError') {
return new Error('Microphone is already in use by another app.')
return new Error(copy.microphoneInUse)
}
if (name === 'OverconstrainedError') {
return new Error('Microphone constraints are not supported by this device.')
return new Error(copy.microphoneConstraintsUnsupported)
}
if (error instanceof Error) {
return error
}
return new Error('Could not start microphone recording.')
return new Error(copy.microphoneStartFailed)
}
export function useMicRecorder(): { handle: MicRecorderHandle; level: number; recording: boolean } {
export function useMicRecorder(copy: MicRecorderErrorCopy): { handle: MicRecorderHandle; level: number; recording: boolean } {
const [level, setLevel] = useState(0)
const [recording, setRecording] = useState(false)
@@ -158,13 +168,13 @@ export function useMicRecorder(): { handle: MicRecorderHandle; level: number; re
}
if (!navigator.mediaDevices?.getUserMedia || typeof MediaRecorder === 'undefined') {
throw new Error('This runtime does not support microphone recording.')
throw new Error(copy.microphoneUnsupported)
}
const permitted = await window.hermesDesktop?.requestMicrophoneAccess?.()
if (permitted === false) {
throw new Error('Microphone access denied.')
throw new Error(copy.microphoneAccessDenied)
}
let stream: MediaStream
@@ -174,7 +184,7 @@ export function useMicRecorder(): { handle: MicRecorderHandle; level: number; re
audio: { echoCancellation: true, noiseSuppression: true }
})
} catch (error) {
throw micError(error)
throw micError(error, copy)
}
const mimeType =
@@ -188,7 +198,7 @@ export function useMicRecorder(): { handle: MicRecorderHandle; level: number; re
recorder = new MediaRecorder(stream, mimeType ? { mimeType } : undefined)
} catch (error) {
stream.getTracks().forEach(track => track.stop())
throw micError(error)
throw micError(error, copy)
}
chunksRef.current = []
@@ -231,7 +241,7 @@ export function useMicRecorder(): { handle: MicRecorderHandle; level: number; re
}
recorder.onerror = event => {
const error = micError((event as Event & { error?: unknown }).error)
const error = micError((event as Event & { error?: unknown }).error, copy)
const resolver = stopResolverRef.current
stopResolverRef.current = null
cleanup()
@@ -1,5 +1,6 @@
import { useCallback, useEffect, useRef, useState } from 'react'
import { useI18n } from '@/i18n'
import { playSpeechText, stopVoicePlayback } from '@/lib/voice-playback'
import { notify, notifyError } from '@/store/notifications'
@@ -32,7 +33,9 @@ export function useVoiceConversation({
pendingResponse,
consumePendingResponse
}: VoiceConversationOptions) {
const { handle, level } = useMicRecorder()
const { t } = useI18n()
const voiceCopy = t.notifications.voice
const { handle, level } = useMicRecorder(voiceCopy)
const [status, setStatus] = useState<ConversationStatus>('idle')
const [muted, setMuted] = useState(false)
const turnTimeoutRef = useRef<number | null>(null)
@@ -168,7 +171,7 @@ export function useVoiceConversation({
await onSubmit(transcript)
setStatus('thinking')
} catch (error) {
notifyError(error, 'Voice transcription failed')
notifyError(error, voiceCopy.transcriptionFailed)
if (enabledRef.current && !mutedRef.current && !busyRef.current) {
pendingStartRef.current = true
@@ -180,7 +183,7 @@ export function useVoiceConversation({
turnClosingRef.current = false
}
},
[handle, onSubmit, onTranscribeAudio]
[handle, onSubmit, onTranscribeAudio, voiceCopy.transcriptionFailed]
)
const startListening = useCallback(async () => {
@@ -201,7 +204,7 @@ export function useVoiceConversation({
silenceMs: 1_250,
idleSilenceMs: 12_000,
onError: error => {
notifyError(error, 'Microphone failed')
notifyError(error, voiceCopy.microphoneFailed)
pendingStartRef.current = false
onFatalError?.()
},
@@ -210,12 +213,12 @@ export function useVoiceConversation({
setStatus('listening')
turnTimeoutRef.current = window.setTimeout(() => void handleTurn(), 60_000)
} catch (error) {
notifyError(error, 'Could not start voice session')
notifyError(error, voiceCopy.couldNotStartSession)
pendingStartRef.current = false
setStatus('idle')
onFatalError?.()
}
}, [handle, handleTurn, onFatalError])
}, [handle, handleTurn, onFatalError, voiceCopy.couldNotStartSession, voiceCopy.microphoneFailed])
const speak = useCallback(async (text: string) => {
setStatus('speaking')
@@ -223,7 +226,7 @@ export function useVoiceConversation({
try {
await playSpeechText(text, { source: 'voice-conversation' })
} catch (error) {
notifyError(error, 'Voice playback failed')
notifyError(error, voiceCopy.playbackFailed)
} finally {
if (enabledRef.current) {
pendingStartRef.current = true
@@ -232,14 +235,14 @@ export function useVoiceConversation({
setStatus('idle')
}
}
}, [])
}, [voiceCopy.playbackFailed])
const start = useCallback(async () => {
if (!onTranscribeAudio) {
notify({
kind: 'warning',
title: 'Voice unavailable',
message: 'Configure speech-to-text to use voice mode.'
title: voiceCopy.unavailable,
message: voiceCopy.configureSpeechToText
})
onFatalError?.()
@@ -252,7 +255,7 @@ export function useVoiceConversation({
consumePendingResponse()
pendingStartRef.current = true
await startListening()
}, [consumePendingResponse, onFatalError, onTranscribeAudio, startListening])
}, [consumePendingResponse, onFatalError, onTranscribeAudio, startListening, voiceCopy.configureSpeechToText, voiceCopy.unavailable])
const end = useCallback(async () => {
pendingStartRef.current = false
@@ -1,5 +1,6 @@
import { useEffect, useRef, useState } from 'react'
import { useI18n } from '@/i18n'
import { notify, notifyError } from '@/store/notifications'
import type { VoiceActivityState, VoiceStatus } from '../types'
@@ -19,7 +20,9 @@ export function useVoiceRecorder({
focusInput,
onTranscript
}: VoiceRecorderOptions) {
const { handle, level, recording } = useMicRecorder()
const { t } = useI18n()
const voiceCopy = t.notifications.voice
const { handle, level, recording } = useMicRecorder(voiceCopy)
const [voiceStatus, setVoiceStatus] = useState<VoiceStatus>('idle')
const [elapsedSeconds, setElapsedSeconds] = useState(0)
const startedAtRef = useRef(0)
@@ -62,12 +65,12 @@ export function useVoiceRecorder({
const transcript = (await onTranscribeAudio(result.audio)).trim()
if (!transcript) {
notify({ kind: 'warning', title: 'No speech detected', message: 'Try recording again.' })
notify({ kind: 'warning', title: voiceCopy.noSpeechDetected, message: voiceCopy.tryRecordingAgain })
} else {
onTranscript(transcript)
}
} catch (error) {
notifyError(error, 'Voice transcription failed')
notifyError(error, voiceCopy.transcriptionFailed)
} finally {
setVoiceStatus('idle')
focusInput()
@@ -76,13 +79,13 @@ export function useVoiceRecorder({
const start = async () => {
if (!onTranscribeAudio) {
notify({ kind: 'warning', title: 'Voice unavailable', message: 'Voice transcription is not available yet.' })
notify({ kind: 'warning', title: voiceCopy.unavailable, message: voiceCopy.transcriptionUnavailable })
return
}
try {
await handle.start({ onError: error => notifyError(error, 'Voice recording failed') })
await handle.start({ onError: error => notifyError(error, voiceCopy.recordingFailed) })
startedAtRef.current = Date.now()
setElapsedSeconds(0)
setVoiceStatus('recording')
@@ -91,7 +94,7 @@ export function useVoiceRecorder({
timeoutRef.current = window.setTimeout(() => void stop(), cap * 1000)
} catch (error) {
setVoiceStatus('idle')
notifyError(error, 'Voice recording failed')
notifyError(error, voiceCopy.recordingFailed)
}
}
+3 -3
View File
@@ -1531,7 +1531,7 @@ export function ChatBar({
{queueEdit && editingQueuedPrompt && (
<div className="flex items-center justify-between gap-2 rounded-lg border border-[color-mix(in_srgb,var(--dt-composer-ring)_32%,transparent)] bg-accent/18 px-2 py-1">
<div className="min-w-0 text-[0.7rem] text-muted-foreground/88">
Editing queued turn in composer
{t.composer.editingQueuedInComposer}
</div>
<div className="flex shrink-0 items-center gap-1">
<Button
@@ -1540,14 +1540,14 @@ export function ChatBar({
type="button"
variant="ghost"
>
Cancel
{t.common.cancel}
</Button>
<Button
className="h-6 rounded-md px-2 text-[0.68rem]"
onClick={() => exitQueuedEdit('save')}
type="button"
>
Save
{t.common.save}
</Button>
</div>
</div>
@@ -0,0 +1,42 @@
import { cleanup, render, screen } from '@testing-library/react'
import { afterEach, describe, expect, it, vi } from 'vitest'
import { I18nProvider } from '@/i18n'
import { ComposerTriggerPopover } from './trigger-popover'
function renderPopover(kind: '@' | '/', loading = false) {
const onHover = vi.fn()
const onPick = vi.fn()
const rendered = render(
<I18nProvider configClient={null} initialLocale="zh">
<ComposerTriggerPopover activeIndex={0} items={[]} kind={kind} loading={loading} onHover={onHover} onPick={onPick} />
</I18nProvider>
)
return { ...rendered, onHover, onPick }
}
describe('ComposerTriggerPopover i18n', () => {
afterEach(() => {
cleanup()
})
it('renders localized empty lookup copy for @ references', () => {
const { container } = renderPopover('@')
expect(screen.getByText('没有匹配项。')).toBeTruthy()
expect(container.textContent).toContain('试试')
expect(container.textContent).toContain('@file:')
expect(container.textContent).toContain('或')
expect(container.textContent).toContain('@folder:')
})
it('renders localized loading copy for slash commands', () => {
const { container } = renderPopover('/', true)
expect(screen.getByText('查找中…')).toBeTruthy()
expect(container.textContent).toContain('/help')
})
})
@@ -1,6 +1,7 @@
import type { Unstable_TriggerItem } from '@assistant-ui/core'
import { Codicon } from '@/components/ui/codicon'
import { useI18n } from '@/i18n'
import { cn } from '@/lib/utils'
import {
@@ -60,6 +61,9 @@ export function ComposerTriggerPopover({
onPick,
placement = 'top'
}: ComposerTriggerPopoverProps) {
const { t } = useI18n()
const copy = t.composer
return (
<div
className={placement === 'bottom' ? COMPLETION_DRAWER_BELOW_CLASS : COMPLETION_DRAWER_CLASS}
@@ -69,15 +73,15 @@ export function ComposerTriggerPopover({
role="listbox"
>
{items.length === 0 ? (
<CompletionDrawerEmpty title={loading ? 'Looking up…' : 'No matches.'}>
<CompletionDrawerEmpty title={loading ? copy.lookupLoading : copy.lookupNoMatches}>
{kind === '@' ? (
<>
Try <span className="font-mono text-foreground/80">@file:</span> or{' '}
{copy.lookupTry} <span className="font-mono text-foreground/80">@file:</span> {copy.lookupOr}{' '}
<span className="font-mono text-foreground/80">@folder:</span>.
</>
) : (
<>
Try <span className="font-mono text-foreground/80">/help</span>.
{copy.lookupTry} <span className="font-mono text-foreground/80">/help</span>.
</>
)}
</CompletionDrawerEmpty>
@@ -2,6 +2,7 @@ import { useCallback } from 'react'
import { requestComposerFocus, requestComposerInsert } from '@/app/chat/composer/focus'
import { formatRefValue } from '@/components/assistant-ui/directive-text'
import { useI18n } from '@/i18n'
import { attachmentId, contextPath, pathLabel } from '@/lib/chat-runtime'
import {
addComposerAttachment,
@@ -193,9 +194,11 @@ const attachToMain = (attachment: ComposerAttachment) => {
}
export function useComposerActions({ activeSessionId, currentCwd, requestGateway }: ComposerActionsOptions) {
const { t } = useI18n()
const copy = t.desktop
const addTextToDraft = useCallback((text: string) => {
requestComposerInsert(text, { mode: 'block' })
}, [])
}, [copy.imagePreviewFailed])
const addTerminalSelectionAttachment = useCallback((text: string, label = 'selection') => {
const trimmed = text.trim()
@@ -300,7 +303,7 @@ export function useComposerActions({ activeSessionId, currentCwd, requestGateway
return true
} catch (err) {
notifyError(err, 'Image preview failed')
notifyError(err, copy.imagePreviewFailed)
return true
}
@@ -322,28 +325,28 @@ export function useComposerActions({ activeSessionId, currentCwd, requestGateway
const savedPath = await window.hermesDesktop?.saveImageBuffer(data, blobExtension(blob))
if (!savedPath) {
notify({ kind: 'error', title: 'Image attach', message: 'Failed to write image to disk.' })
notify({ kind: 'error', title: copy.imageAttach, message: copy.imageWriteFailed })
return false
}
return attachImagePath(savedPath)
} catch (err) {
notifyError(err, 'Image attach failed')
notifyError(err, copy.imageAttachFailed)
return false
}
},
[attachImagePath]
[attachImagePath, copy.imageAttach, copy.imageAttachFailed, copy.imageWriteFailed]
)
const pickImages = useCallback(async () => {
const paths = await window.hermesDesktop?.selectPaths({
title: 'Attach images',
title: copy.attachImages,
defaultPath: currentCwd || undefined,
filters: [
{
name: 'Images',
name: t.composer.images,
extensions: ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp', 'tiff']
}
]
@@ -356,7 +359,7 @@ export function useComposerActions({ activeSessionId, currentCwd, requestGateway
for (const path of paths) {
await attachImagePath(path)
}
}, [attachImagePath, currentCwd])
}, [attachImagePath, copy.attachImages, currentCwd, t.composer.images])
const pasteClipboardImage = useCallback(async () => {
try {
@@ -365,8 +368,8 @@ export function useComposerActions({ activeSessionId, currentCwd, requestGateway
if (!path) {
notify({
kind: 'warning',
title: 'Clipboard',
message: 'No image found in clipboard'
title: copy.clipboard,
message: copy.noClipboardImage
})
return
@@ -374,9 +377,9 @@ export function useComposerActions({ activeSessionId, currentCwd, requestGateway
await attachImagePath(path)
} catch (err) {
notifyError(err, 'Clipboard paste failed')
notifyError(err, copy.clipboardPasteFailed)
}
}, [attachImagePath])
}, [attachImagePath, copy.clipboard, copy.clipboardPasteFailed, copy.noClipboardImage])
const attachContextFolderPath = useCallback(
(folderPath: string) => {
@@ -477,12 +480,12 @@ export function useComposerActions({ activeSessionId, currentCwd, requestGateway
}
if (!attached && lastFailure) {
notify({ kind: 'warning', title: 'Drop files', message: lastFailure })
notify({ kind: 'warning', title: copy.dropFiles, message: lastFailure })
}
return attached
},
[attachContextFilePath, attachContextFolderPath, attachImageBlob, attachImagePath]
[attachContextFilePath, attachContextFolderPath, attachImageBlob, attachImagePath, copy.dropFiles]
)
const removeAttachment = useCallback(
@@ -5,6 +5,7 @@ import { useEffect, useMemo, useRef } from 'react'
import { requestComposerInsert } from '@/app/chat/composer/focus'
import { CopyButton } from '@/components/ui/copy-button'
import { Tip } from '@/components/ui/tooltip'
import { useI18n } from '@/i18n'
import { PanelBottom, Send, Trash2 } from '@/lib/icons'
import { cn } from '@/lib/utils'
import { notify } from '@/store/notifications'
@@ -74,6 +75,9 @@ interface ConsoleRowProps {
}
function ConsoleRow({ copyText, log, onSend, onToggleSelect, selected }: ConsoleRowProps) {
const { t } = useI18n()
const copy = t.preview.console
return (
<div
className={cn(
@@ -81,7 +85,7 @@ function ConsoleRow({ copyText, log, onSend, onToggleSelect, selected }: Console
selected && 'border-border/60 bg-accent/40'
)}
>
<Tip label={selected ? 'Deselect entry' : 'Select entry'}>
<Tip label={selected ? copy.deselect : copy.select}>
<button
className={cn(
'mt-0.5 text-left uppercase opacity-70 transition-colors hover:opacity-100',
@@ -108,13 +112,13 @@ function ConsoleRow({ copyText, log, onSend, onToggleSelect, selected }: Console
<CopyButton
appearance="inline"
className="rounded-md p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
errorMessage="Could not copy console output"
errorMessage={copy.copyFailed}
iconClassName="size-3"
label="Copy this entry"
label={copy.copyEntry}
showLabel={false}
text={copyText}
/>
<Tip label="Send this entry to chat">
<Tip label={copy.sendEntry}>
<button
className="rounded-md p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
onClick={onSend}
@@ -129,12 +133,13 @@ function ConsoleRow({ copyText, log, onSend, onToggleSelect, selected }: Console
}
export function PreviewConsoleTitlebarIcon({ consoleState }: { consoleState: PreviewConsoleState }) {
const { t } = useI18n()
const logCount = useStore(consoleState.$logCount)
return (
<>
<PanelBottom />
{logCount > 0 && <span className="sr-only">{logCount} console messages</span>}
{logCount > 0 && <span className="sr-only">{t.preview.console.messages(logCount)}</span>}
</>
)
}
@@ -152,6 +157,8 @@ export function PreviewConsolePanel({
consoleState,
startConsoleResize
}: PreviewConsolePanelProps) {
const { t } = useI18n()
const copy = t.preview.console
const consoleHeight = useStore(consoleState.$height)
const logs = useStore(consoleState.$logs)
const selectedLogIds = useStore(consoleState.$selectedLogIds)
@@ -188,14 +195,14 @@ export function PreviewConsolePanel({
return
}
const block = ['Preview console:', '```', ...entries.map(formatLogLine), '```'].join('\n')
const block = [copy.promptHeader, '```', ...entries.map(formatLogLine), '```'].join('\n')
requestComposerInsert(block, { mode: 'block', target: 'main' })
consoleState.clearSelection()
notify({
kind: 'success',
title: 'Sent to chat',
message: `${entries.length} log entr${entries.length === 1 ? 'y' : 'ies'} added to composer`
title: copy.sentTitle,
message: copy.sentMessage(entries.length)
})
}
@@ -205,7 +212,7 @@ export function PreviewConsolePanel({
style={{ '--preview-console-height': `${consoleHeight}px` } as CSSProperties}
>
<div
aria-label="Resize preview console"
aria-label={copy.resize}
className="group absolute inset-x-0 -top-1 z-1 h-2 cursor-row-resize"
onDoubleClick={() => consoleState.setHeight(CONSOLE_HEADER_HEIGHT)}
onPointerDown={startConsoleResize}
@@ -216,10 +223,10 @@ export function PreviewConsolePanel({
<div className="flex h-8 shrink-0 items-center justify-between border-b border-border/50 px-2">
<div className="flex items-center gap-2 text-[0.6875rem] font-medium text-muted-foreground">
<PanelBottom className="size-3.5" />
Preview Console
{copy.title}
{selectedLogIds.size > 0 && (
<span className="rounded-full bg-muted px-1.5 py-px text-[0.5625rem] text-muted-foreground">
{selectedLogIds.size} selected
{copy.selected(selectedLogIds.size)}
</span>
)}
</div>
@@ -231,18 +238,18 @@ export function PreviewConsolePanel({
type="button"
>
<Send className="size-3" />
Send to chat
{copy.sendToChat}
</button>
<CopyButton
appearance="inline"
className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[0.625rem] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-40"
disabled={sendableLogs.length === 0}
errorMessage="Could not copy console output"
errorMessage={copy.copyFailed}
iconClassName="size-3"
label={visibleSelection.length > 0 ? 'Copy selected to clipboard' : 'Copy all to clipboard'}
label={visibleSelection.length > 0 ? copy.copySelected : copy.copyAll}
text={() => formatConsoleEntries(sendableLogs)}
>
Copy
{copy.copy}
</CopyButton>
<button
className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[0.625rem] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-40"
@@ -251,7 +258,7 @@ export function PreviewConsolePanel({
type="button"
>
<Trash2 className="size-3" />
Clear
{copy.clear}
</button>
</div>
</div>
@@ -275,7 +282,7 @@ export function PreviewConsolePanel({
)
})
) : (
<div className="py-2 text-muted-foreground/70">No console messages yet.</div>
<div className="py-2 text-muted-foreground/70">{copy.empty}</div>
)}
</div>
</div>
@@ -12,6 +12,7 @@ import { Streamdown } from 'streamdown'
import { HERMES_PATHS_MIME } from '@/app/chat/hooks/use-composer-actions'
import { PageLoader } from '@/components/page-loader'
import { translateNow, useI18n } from '@/i18n'
import { cn } from '@/lib/utils'
import type { PreviewTarget } from '@/store/preview'
@@ -143,7 +144,7 @@ function filePathForTarget(target: PreviewTarget) {
function formatBytes(bytes: number | undefined) {
if (!bytes) {
return 'unknown size'
return translateNow('preview.unknownSize')
}
const units = ['B', 'KB', 'MB', 'GB']
@@ -296,6 +297,8 @@ function MarkdownPreview({ text }: { text: string }) {
}
function PreviewToggle({ asSource, onToggle }: { asSource: boolean; onToggle: () => void }) {
const { t } = useI18n()
return (
<div className="sticky top-0 z-10 flex justify-end border-b border-border/40 bg-transparent px-3 py-1 backdrop-blur">
<button
@@ -303,7 +306,7 @@ function PreviewToggle({ asSource, onToggle }: { asSource: boolean; onToggle: ()
onClick={onToggle}
type="button"
>
{asSource ? 'PREVIEW' : 'SOURCE'}
{asSource ? t.preview.renderedPreview : t.preview.source}
</button>
</div>
)
@@ -330,6 +333,7 @@ function startLineDrag(event: ReactDragEvent<HTMLElement>, filePath: string, { e
}
function SourceView({ filePath, language, text }: { filePath: string; language: string; text: string }) {
const { t } = useI18n()
const lineCount = useMemo(() => Math.max(1, text.split('\n').length), [text])
const [selection, setSelection] = useState<LineSelection | null>(null)
const inSelection = (line: number) => selection != null && line >= selection.start && line <= selection.end
@@ -373,7 +377,7 @@ function SourceView({ filePath, language, text }: { filePath: string; language:
key={line}
onClick={event => handleLineClick(event, line)}
onDragStart={event => handleDragStart(event, line)}
title="Click to select · shift-click to extend · drag to composer"
title={t.preview.sourceLineTitle}
>
{line}
</div>
@@ -408,6 +412,7 @@ function SourceView({ filePath, language, text }: { filePath: string; language:
}
export function LocalFilePreview({ reloadKey, target }: { reloadKey: number; target: PreviewTarget }) {
const { t } = useI18n()
const [state, setState] = useState<LocalPreviewState>({ loading: true })
const [forcePreview, setForcePreview] = useState(false)
const [renderMarkdownAsSource, setRenderMarkdownAsSource] = useState(false)
@@ -482,11 +487,11 @@ export function LocalFilePreview({ reloadKey, target }: { reloadKey: number; tar
}, [blockedByTarget, filePath, forcePreview, isImage, isText, reloadKey, target.language])
if (state.loading) {
return <PageLoader label="Loading preview" />
return <PageLoader label={t.preview.loading} />
}
if (state.error) {
return <PreviewEmptyState body={state.error} title="Preview unavailable" />
return <PreviewEmptyState body={state.error} title={t.preview.unavailable} />
}
if (
@@ -501,11 +506,11 @@ export function LocalFilePreview({ reloadKey, target }: { reloadKey: number; tar
<PreviewEmptyState
body={
binary
? `Previewing ${target.label} may show unreadable text.`
: `${target.label} is ${formatBytes(size)}. Hermes will only show the first 512 KB.`
? t.preview.binaryBody(target.label)
: t.preview.largeBody(target.label, formatBytes(size))
}
primaryAction={{ label: 'Preview anyway', onClick: () => setForcePreview(true) }}
title={binary ? 'This looks like a binary file' : 'This file is large'}
primaryAction={{ label: t.preview.previewAnyway, onClick: () => setForcePreview(true) }}
title={binary ? t.preview.binaryTitle : t.preview.largeTitle}
tone="warning"
/>
)
@@ -532,7 +537,7 @@ export function LocalFilePreview({ reloadKey, target }: { reloadKey: number; tar
<div className="h-full overflow-auto bg-transparent">
{state.truncated && (
<div className="border-b border-border/60 bg-muted/35 px-3 py-1.5 text-[0.68rem] text-muted-foreground">
Showing first 512 KB.
{t.preview.truncated}
</div>
)}
{isMarkdown && <PreviewToggle asSource={!showRendered} onToggle={() => setRenderMarkdownAsSource(s => !s)} />}
@@ -547,8 +552,8 @@ export function LocalFilePreview({ reloadKey, target }: { reloadKey: number; tar
return (
<PreviewEmptyState
body={`${target.mimeType || 'This file type'} can still be attached as context.`}
title="No inline preview"
body={t.preview.noInlineBody(target.mimeType || '')}
title={t.preview.noInlineTitle}
/>
)
}
@@ -4,6 +4,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
import type { SetTitlebarToolGroup, TitlebarTool } from '@/app/shell/titlebar-controls'
import { Tip } from '@/components/ui/tooltip'
import { type Translations, useI18n } from '@/i18n'
import { Bug } from '@/lib/icons'
import { cn } from '@/lib/utils'
import { notify, notifyError } from '@/store/notifications'
@@ -46,18 +47,18 @@ interface PreviewLoadErrorState {
const FILE_RELOAD_DEBOUNCE_MS = 200
const SERVER_RESTART_TIMEOUT_MS = 45_000
function loadErrorTitle(error: PreviewLoadErrorState): string {
function loadErrorTitle(error: PreviewLoadErrorState, copy: Translations['preview']['web']): string {
const description = error.description.toLowerCase()
if (description.includes('module script') || description.includes('mime type')) {
return 'Preview app failed to boot'
return copy.appFailedToBoot
}
if (description.includes('connection') || description.includes('refused') || description.includes('not found')) {
return 'Server not found'
return copy.serverNotFound
}
return 'Preview failed to load'
return copy.failedToLoad
}
function isModuleMimeError(message: string): boolean {
@@ -79,6 +80,9 @@ function PreviewLoadError({
onRetry: () => void
restarting?: boolean
}) {
const { t } = useI18n()
const copy = t.preview.web
return (
<PreviewEmptyState
body={
@@ -98,17 +102,17 @@ function PreviewLoadError({
</>
}
consoleHeight={consoleHeight}
primaryAction={{ label: 'Try again', onClick: onRetry }}
primaryAction={{ label: copy.tryAgain, onClick: onRetry }}
secondaryAction={
onRestartServer
? {
disabled: restarting,
label: restarting ? 'Hermes is restarting...' : 'Ask Hermes to restart the server',
label: restarting ? copy.restarting : copy.askRestart,
onClick: onRestartServer
}
: undefined
}
title={loadErrorTitle(error)}
title={loadErrorTitle(error, copy)}
/>
)
}
@@ -122,6 +126,8 @@ export function PreviewPane({
setTitlebarToolGroup,
target
}: PreviewPaneProps) {
const { t } = useI18n()
const copy = t.preview.web
const [consoleState] = useState(() => createPreviewConsoleState())
const consoleBodyRef = useRef<HTMLDivElement | null>(null)
const consoleShouldStickRef = useRef(true)
@@ -239,23 +245,23 @@ export function PreviewPane({
appendConsoleEntry({
level: 1,
message: `Hermes is looking for a preview server to restart (${taskId})`
message: copy.lookingRestart(taskId)
})
notify({
kind: 'info',
title: 'Restarting preview server',
message: 'Hermes is working in the background. Watch the preview console for progress.',
title: copy.restartingTitle,
message: copy.restartingMessage,
durationMs: 4000
})
} catch (error) {
appendConsoleEntry({
level: 2,
message: `Could not start server restart: ${error instanceof Error ? error.message : String(error)}`
message: copy.startRestartFailed(error instanceof Error ? error.message : String(error))
})
notifyError(error, 'Server restart failed')
notifyError(error, copy.restartFailed)
}
}, [appendConsoleEntry, consoleState, currentUrl, onRestartServer])
}, [appendConsoleEntry, consoleState, copy, currentUrl, onRestartServer])
const toggleDevTools = useCallback(() => {
const webview = webviewRef.current
@@ -287,14 +293,14 @@ export function PreviewPane({
active: consoleOpen,
icon: <PreviewConsoleTitlebarIcon consoleState={consoleState} />,
id: `${TITLEBAR_GROUP_ID}-console`,
label: consoleOpen ? 'Hide preview console' : 'Show preview console',
label: consoleOpen ? copy.hideConsole : copy.showConsole,
onSelect: () => consoleState.setOpen(open => !open)
},
{
active: devtoolsOpen,
icon: <Bug />,
id: `${TITLEBAR_GROUP_ID}-devtools`,
label: devtoolsOpen ? 'Hide preview DevTools' : 'Open preview DevTools',
label: devtoolsOpen ? copy.hideDevTools : copy.openDevTools,
onSelect: toggleDevTools
}
]
@@ -304,7 +310,7 @@ export function PreviewPane({
setTitlebarToolGroup(TITLEBAR_GROUP_ID, tools)
return () => setTitlebarToolGroup(TITLEBAR_GROUP_ID, [])
}, [consoleOpen, consoleState, devtoolsOpen, isWebPreview, setTitlebarToolGroup, toggleDevTools])
}, [consoleOpen, consoleState, copy, devtoolsOpen, isWebPreview, setTitlebarToolGroup, toggleDevTools])
useEffect(() => {
if (!consoleOpen) {
@@ -343,29 +349,27 @@ export function PreviewPane({
previewServerRestart.status === 'running'
? previewServerRestart.message
: previewServerRestart.status === 'complete'
? `Hermes finished restarting the preview server${
previewServerRestart.message ? `: ${previewServerRestart.message}` : ''
}`
: `Server restart failed: ${previewServerRestart.message || 'unknown error'}`
? copy.finishedRestarting(previewServerRestart.message)
: copy.failedRestarting(previewServerRestart.message || copy.unknownError)
})
if (previewServerRestart.status === 'complete') {
reloadPreview()
notify({
kind: 'success',
title: 'Preview server restarted',
message: previewServerRestart.message?.slice(0, 160) || 'Reloading the preview now.',
title: copy.restartedTitle,
message: previewServerRestart.message?.slice(0, 160) || copy.reloadingNow,
durationMs: 3500
})
} else if (previewServerRestart.status === 'error') {
notify({
kind: 'warning',
title: 'Preview restart failed',
message: previewServerRestart.message?.slice(0, 200) || 'Hermes could not restart the server.',
title: copy.restartFailedTitle,
message: previewServerRestart.message?.slice(0, 200) || copy.restartFailedMessage,
durationMs: 6000
})
}
}, [appendConsoleEntry, currentUrl, previewServerRestart, reloadPreview, target.url])
}, [appendConsoleEntry, copy, currentUrl, previewServerRestart, reloadPreview, target.url])
useEffect(() => {
if (!restartingServer || !previewServerRestart) {
@@ -375,14 +379,11 @@ export function PreviewPane({
const taskId = previewServerRestart.taskId
const timer = window.setTimeout(() => {
failPreviewServerRestart(
taskId,
'Hermes is still working, but no restart result has arrived yet. The server command may be running in the foreground.'
)
failPreviewServerRestart(taskId, copy.stillWorking)
}, SERVER_RESTART_TIMEOUT_MS)
return () => window.clearTimeout(timer)
}, [previewServerRestart, restartingServer])
}, [copy.stillWorking, previewServerRestart, restartingServer])
useEffect(() => {
if (reloadRequest === lastReloadRequestRef.current) {
@@ -397,10 +398,10 @@ export function PreviewPane({
appendConsoleEntry({
level: 1,
message: 'Workspace changed, reloading preview'
message: copy.workspaceReloading
})
reloadPreview()
}, [appendConsoleEntry, reloadPreview, reloadRequest, target.kind])
}, [appendConsoleEntry, copy.workspaceReloading, reloadPreview, reloadRequest, target.kind])
useEffect(() => {
if (
@@ -432,8 +433,8 @@ export function PreviewPane({
level: 1,
message:
changedCount === 1
? `File changed, reloading preview: ${compactUrl(changedUrl)}`
: `${changedCount} file changes, reloading preview: ${compactUrl(changedUrl)}`
? copy.fileChanged(compactUrl(changedUrl))
: copy.filesChanged(changedCount, compactUrl(changedUrl))
})
reloadPreview()
@@ -471,7 +472,7 @@ export function PreviewPane({
.catch(error => {
appendConsoleEntry({
level: 2,
message: `Could not watch preview file: ${error instanceof Error ? error.message : String(error)}`
message: copy.watchFailed(error instanceof Error ? error.message : String(error))
})
})
@@ -487,7 +488,7 @@ export function PreviewPane({
void window.hermesDesktop?.stopPreviewFileWatch?.(watchId)
}
}
}, [appendConsoleEntry, reloadPreview, target.kind, target.url])
}, [appendConsoleEntry, copy, reloadPreview, target.kind, target.url])
useEffect(() => {
const host = hostRef.current
@@ -535,8 +536,7 @@ export function PreviewPane({
if ((detail.level ?? 0) >= 3 && isModuleMimeError(message)) {
setLoadError({
description:
'Module scripts are being served with the wrong MIME type. This usually means a static file server is serving a Vite/React app instead of the project dev server.',
description: copy.moduleMimeDescription,
url: webview.getURL?.() || target.url
})
setLoading(false)
@@ -567,13 +567,11 @@ export function PreviewPane({
appendConsoleEntry({
level: 3,
message: `Load failed${errorCode ? ` (${errorCode})` : ''}: ${
detail.errorDescription || detail.validatedURL || 'unknown error'
}`
message: copy.loadFailedConsole(errorCode, detail.errorDescription || detail.validatedURL || copy.unknownError)
})
setLoadError({
code: errorCode,
description: detail.errorDescription || 'The preview page could not be reached.',
description: detail.errorDescription || copy.unreachableDescription,
url: detail.validatedURL || webview.getURL?.() || target.url
})
setLoading(false)
@@ -600,7 +598,7 @@ export function PreviewPane({
webview.removeEventListener('did-stop-loading', onStop)
webview.remove()
}
}, [appendConsoleEntry, consoleState, isWebPreview, target.url])
}, [appendConsoleEntry, consoleState, copy, isWebPreview, target.url])
return (
<aside className="relative flex h-full w-full min-w-0 flex-col overflow-hidden bg-transparent text-muted-foreground">
@@ -608,14 +606,14 @@ export function PreviewPane({
{!embedded && (
<div className="pointer-events-none flex min-h-(--titlebar-height) items-center gap-1.5 border-b border-border/60 bg-background px-2 py-1">
<div className="min-w-0 flex-1">
<Tip label={`Open ${currentUrl}`}>
<Tip label={copy.openTarget(currentUrl)}>
<a
className="pointer-events-auto inline max-w-full truncate text-left text-xs font-medium text-foreground underline-offset-4 decoration-current/20 transition-colors hover:text-primary hover:underline"
href={currentUrl}
rel="noreferrer"
target="_blank"
>
{previewLabel || 'Preview'}
{previewLabel || copy.fallbackTitle}
</a>
</Tip>
</div>
@@ -4,6 +4,7 @@ import { useEffect, useMemo } from 'react'
import type { SetTitlebarToolGroup } from '@/app/shell/titlebar-controls'
import { Codicon } from '@/components/ui/codicon'
import { Tip } from '@/components/ui/tooltip'
import { translateNow, useI18n } from '@/i18n'
import { cn } from '@/lib/utils'
import {
$rightRailActiveTabId,
@@ -48,10 +49,11 @@ function tabLabelFor(target: PreviewTarget): string {
const value = target.label || target.path || target.source || target.url
const tail = value.split(/[\\/]/).filter(Boolean).at(-1)
return tail || value || 'Preview'
return tail || value || translateNow('preview.tab')
}
export function ChatPreviewRail({ onRestartServer, setTitlebarToolGroup }: ChatPreviewRailProps) {
const { t } = useI18n()
const previewReloadRequest = useStore($previewReloadRequest)
const activeTabId = useStore($rightRailActiveTabId)
const filePreviewTabs = useStore($filePreviewTabs)
@@ -59,10 +61,10 @@ export function ChatPreviewRail({ onRestartServer, setTitlebarToolGroup }: ChatP
const tabs = useMemo<readonly RailTab[]>(
() => [
...(previewTarget ? [{ id: RIGHT_RAIL_PREVIEW_TAB_ID, label: 'Preview', target: previewTarget } as RailTab] : []),
...(previewTarget ? [{ id: RIGHT_RAIL_PREVIEW_TAB_ID, label: t.preview.tab, target: previewTarget } as RailTab] : []),
...filePreviewTabs.map(({ id, target }) => ({ id, label: tabLabelFor(target), target }) as RailTab)
],
[filePreviewTabs, previewTarget]
[filePreviewTabs, previewTarget, t.preview.tab]
)
const activeTab = tabs.find(tab => tab.id === activeTabId) ?? tabs[0]
@@ -134,7 +136,7 @@ export function ChatPreviewRail({ onRestartServer, setTitlebarToolGroup }: ChatP
className="pointer-events-none absolute inset-y-0 right-0 w-9 bg-[linear-gradient(to_right,transparent,var(--tab-bg)_55%)] opacity-0 transition-opacity group-hover/tab:opacity-100 group-focus-within/tab:opacity-100"
/>
<button
aria-label={`Close ${tab.label}`}
aria-label={t.preview.closeTab(tab.label)}
className="pointer-events-none absolute right-1.5 top-1/2 grid size-4 -translate-y-1/2 place-items-center rounded-sm text-(--ui-text-tertiary) opacity-0 transition-[background-color,color,opacity] hover:bg-(--ui-bg-secondary) hover:text-foreground focus-visible:pointer-events-auto focus-visible:opacity-100 group-hover/tab:pointer-events-auto group-hover/tab:opacity-100 group-focus-within/tab:pointer-events-auto group-focus-within/tab:opacity-100"
onClick={() => closeRightRailTab(tab.id)}
type="button"
@@ -146,7 +148,7 @@ export function ChatPreviewRail({ onRestartServer, setTitlebarToolGroup }: ChatP
})}
</div>
<button
aria-label="Close preview pane"
aria-label={t.preview.closePane}
className="mr-1.5 grid size-6 shrink-0 self-center place-items-center rounded-md text-(--ui-text-tertiary) opacity-0 transition-opacity hover:bg-(--ui-control-hover-background) hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring group-hover/rail-tabs:opacity-100 [-webkit-app-region:no-drag]"
onClick={closeRightRail}
type="button"
+4 -4
View File
@@ -92,18 +92,18 @@ const NEW_SESSION_KBD: readonly string[] =
const SIDEBAR_NAV: SidebarNavItem[] = [
{
id: 'new-session',
label: 'New session',
label: '',
icon: props => <Codicon name="robot" {...props} />,
action: 'new-session'
},
{
id: 'skills',
label: 'Skills & Tools',
label: '',
icon: props => <Codicon name="symbol-misc" {...props} />,
route: SKILLS_ROUTE
},
{ id: 'messaging', label: 'Messaging', icon: props => <Codicon name="comment" {...props} />, route: MESSAGING_ROUTE },
{ id: 'artifacts', label: 'Artifacts', icon: props => <Codicon name="files" {...props} />, route: ARTIFACTS_ROUTE }
{ id: 'messaging', label: '', icon: props => <Codicon name="comment" {...props} />, route: MESSAGING_ROUTE },
{ id: 'artifacts', label: '', icon: props => <Codicon name="files" {...props} />, route: ARTIFACTS_ROUTE }
]
const WORKSPACE_PAGE = 5
@@ -27,6 +27,7 @@ import { Codicon } from '@/components/ui/codicon'
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu'
import { Popover, PopoverAnchor, PopoverContent } from '@/components/ui/popover'
import { Tip, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { useI18n } from '@/i18n'
import { triggerHaptic } from '@/lib/haptics'
import { PROFILE_SWATCHES, profileColorSoft, resolveProfileColor } from '@/lib/profile-color'
import { cn } from '@/lib/utils'
@@ -84,6 +85,8 @@ const stepThroughCells: Modifier = ({ containerNodeRect, draggingNodeRect, trans
// profile users see only the "+" (create their first profile); everything else
// appears once a second profile exists.
export function ProfileRail() {
const { t } = useI18n()
const p = t.profiles
const profiles = useStore($profiles)
const scope = useStore($profileScope)
const gatewayProfile = useStore($activeGatewayProfile)
@@ -187,11 +190,11 @@ export function ProfileRail() {
<ProfilePill
active={isAll || onDefault}
glyph={isAll ? 'layers' : 'home'}
label={onDefault ? 'Show all profiles' : `Switch to ${defaultProfile.name}`}
label={onDefault ? p.showAllProfiles : p.switchToProfile(defaultProfile.name)}
onSelect={() => (onDefault ? setShowAllProfiles(true) : selectProfile(defaultProfile.name))}
/>
) : (
<ProfilePill active={isAll} glyph="layers" label="All profiles" onSelect={() => setShowAllProfiles(true)} />
<ProfilePill active={isAll} glyph="layers" label={p.allProfiles} onSelect={() => setShowAllProfiles(true)} />
))}
{/* Single-profile: the active default's home icon next to the create +. */}
@@ -233,9 +236,9 @@ export function ProfileRail() {
</DndContext>
)}
<Tip label="New profile">
<Tip label={p.newProfile}>
<button
aria-label="New profile"
aria-label={p.newProfile}
className="grid size-5 shrink-0 place-items-center rounded-[3px] text-(--ui-text-tertiary) opacity-55 transition hover:bg-(--ui-control-hover-background) hover:text-foreground hover:opacity-100"
onClick={() => setCreateOpen(true)}
type="button"
@@ -246,7 +249,7 @@ export function ProfileRail() {
</div>
{multiProfile && (
<ProfilePill active={false} glyph="ellipsis" label="Manage profiles…" onSelect={() => navigate(PROFILES_ROUTE)} />
<ProfilePill active={false} glyph="ellipsis" label={p.manageProfiles} onSelect={() => navigate(PROFILES_ROUTE)} />
)}
{/* Land in the new profile on a fresh chat (selectProfile triggers the
@@ -328,6 +331,8 @@ const LONG_PRESS_MS = 450
// context-menu triggers via nested asChild Slots, so a single element keeps the
// dnd listeners, hover tip, and right-click menu.
function ProfileSquare({ active, color, label, onDelete, onRecolor, onRename, onSelect }: ProfileSquareProps) {
const { t } = useI18n()
const p = t.profiles
const hue = color ?? 'var(--ui-text-quaternary)'
const [pickerOpen, setPickerOpen] = useState(false)
const pressTimer = useRef<null | number>(null)
@@ -436,27 +441,27 @@ function ProfileSquare({ active, color, label, onDelete, onRecolor, onRename, on
{/* The rail sits at the very bottom, so pad off the chrome (esp. the
statusbar) — Radix then flips the menu up instead of squishing it. */}
<ContextMenuContent
aria-label={`Actions for ${label}`}
aria-label={p.actionsFor(label)}
className="w-40"
collisionPadding={{ bottom: 44, left: 8, right: 8, top: 8 }}
>
<ContextMenuItem onSelect={() => setPickerOpen(true)}>
<Codicon name="symbol-color" size="0.875rem" />
<span>Color</span>
<span>{p.color}</span>
</ContextMenuItem>
<ContextMenuItem onSelect={onRename}>
<Codicon name="edit" size="0.875rem" />
<span>Rename</span>
<span>{p.rename}</span>
</ContextMenuItem>
<ContextMenuItem className="text-destructive focus:text-destructive" onSelect={onDelete} variant="destructive">
<Codicon name="trash" size="0.875rem" />
<span>Delete</span>
<span>{t.common.delete}</span>
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
<PopoverContent
aria-label={`Color for ${label}`}
aria-label={p.colorFor(label)}
className="w-auto p-2"
collisionPadding={{ bottom: 44, left: 8, right: 8, top: 8 }}
side="top"
@@ -464,7 +469,7 @@ function ProfileSquare({ active, color, label, onDelete, onRecolor, onRename, on
<div className="grid grid-cols-6 gap-1.5">
{PROFILE_SWATCHES.map(swatch => (
<button
aria-label={`Set color ${swatch}`}
aria-label={p.setColor(swatch)}
className="size-5 rounded-full transition-transform hover:scale-110"
key={swatch}
onClick={() => pickColor(swatch)}
@@ -483,7 +488,7 @@ function ProfileSquare({ active, color, label, onDelete, onRecolor, onRename, on
type="button"
>
<Codicon name="sync" size="0.75rem" />
Auto
{p.autoColor}
</button>
</PopoverContent>
</Popover>
+84 -58
View File
@@ -6,6 +6,7 @@ import { useNavigate } from 'react-router-dom'
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
import { getHermesConfigRecord, listSessions } from '@/hermes'
import { useI18n } from '@/i18n'
import { sessionTitle } from '@/lib/chat-runtime'
import {
Activity,
@@ -50,6 +51,7 @@ import {
SKILLS_ROUTE
} from '../routes'
import { FIELD_LABELS, SECTIONS } from '../settings/constants'
import { fieldCopyForSchemaKey } from '../settings/field-copy'
import { prettyName } from '../settings/helpers'
interface PaletteItem {
@@ -92,48 +94,60 @@ const toSessionEntry = (session: SessionRow): SessionEntry => ({
title: sessionTitle(session)
})
const NON_CONFIG_SETTINGS: ReadonlyArray<{ icon: IconComponent; keywords?: string[]; label: string; tab: string }> = [
type NonConfigSettingsLabel =
| 'about'
| 'archivedChats'
| 'gateway'
| 'keysSettings'
| 'keysTools'
| 'mcp'
| 'providerAccounts'
| 'providerApiKeys'
const NON_CONFIG_SETTINGS: ReadonlyArray<{
icon: IconComponent
keywords?: string[]
labelKey: NonConfigSettingsLabel
tab: string
}> = [
{
icon: Zap,
keywords: ['accounts', 'sign in', 'oauth', 'login', 'subscription', 'models', 'anthropic', 'openai'],
label: 'Providers',
labelKey: 'providerAccounts',
tab: 'providers&pview=accounts'
},
{
icon: KeyRound,
keywords: ['providers', 'api key', 'keys', 'secrets', 'tokens'],
label: 'Provider API keys',
labelKey: 'providerApiKeys',
tab: 'providers&pview=keys'
},
{ icon: Globe, keywords: ['connection', 'messaging'], label: 'Gateway', tab: 'gateway' },
{ icon: Globe, keywords: ['connection', 'messaging'], labelKey: 'gateway', tab: 'gateway' },
{
icon: KeyRound,
keywords: ['api', 'secrets', 'tokens', 'credentials', 'browser', 'search'],
label: 'Tools & Keys',
labelKey: 'keysTools',
tab: 'keys&kview=tools'
},
{
icon: Settings2,
keywords: ['gateway', 'proxy', 'server', 'webhook', 'env'],
label: 'Tools & Keys settings',
labelKey: 'keysSettings',
tab: 'keys&kview=settings'
},
{ icon: Wrench, keywords: ['servers', 'tools'], label: 'MCP', tab: 'mcp' },
{ icon: Archive, keywords: ['history', 'archived'], label: 'Archived Chats', tab: 'sessions' },
{ icon: Info, keywords: ['version', 'about'], label: 'About', tab: 'about' }
{ icon: Wrench, keywords: ['servers', 'tools'], labelKey: 'mcp', tab: 'mcp' },
{ icon: Archive, keywords: ['history', 'archived'], labelKey: 'archivedChats', tab: 'sessions' },
{ icon: Info, keywords: ['version', 'about'], labelKey: 'about', tab: 'about' }
]
const THEME_MODES: ReadonlyArray<{ icon: IconComponent; label: string; mode: ThemeMode }> = [
{ icon: Sun, label: 'Light', mode: 'light' },
{ icon: Moon, label: 'Dark', mode: 'dark' },
{ icon: Monitor, label: 'System', mode: 'system' }
const THEME_MODES: ReadonlyArray<{ icon: IconComponent; mode: ThemeMode }> = [
{ icon: Sun, mode: 'light' },
{ icon: Moon, mode: 'dark' },
{ icon: Monitor, mode: 'system' }
]
function fieldLabel(key: string): string {
return FIELD_LABELS[key] ?? prettyName(key.split('.').pop() ?? key)
}
export function CommandPalette() {
const { t } = useI18n()
const open = useStore($commandPaletteOpen)
const navigate = useNavigate()
const { availableThemes, mode, resolvedMode, setMode, setTheme, themeName } = useTheme()
@@ -180,52 +194,64 @@ export function CommandPalette() {
}, [open])
const go = useCallback((path: string) => () => navigate(path), [navigate])
const settingsSectionLabel = useCallback(
(section: (typeof SECTIONS)[number]) => t.settings.sections[section.id] ?? section.label,
[t.settings.sections]
)
const configFieldLabel = useCallback(
(key: string) =>
fieldCopyForSchemaKey(t.settings.fieldLabels, key) ??
fieldCopyForSchemaKey(FIELD_LABELS, key) ??
prettyName(key.split('.').pop() ?? key),
[t.settings.fieldLabels]
)
const baseGroups = useMemo<PaletteGroup[]>(() => {
const settingsTab = (tab: string) => `${SETTINGS_ROUTE}?tab=${tab}`
const cc = t.commandCenter
return [
{
heading: 'Go to',
heading: cc.goTo,
items: [
{ icon: Plus, id: 'nav-new', keywords: ['chat', 'create'], label: 'New session', run: go(NEW_CHAT_ROUTE) },
{ icon: Settings, id: 'nav-settings', label: 'Settings', run: go(SETTINGS_ROUTE) },
{ icon: Plus, id: 'nav-new', keywords: ['chat', 'create'], label: cc.nav.newChat.title, run: go(NEW_CHAT_ROUTE) },
{ icon: Settings, id: 'nav-settings', label: cc.nav.settings.title, run: go(SETTINGS_ROUTE) },
{
icon: Wrench,
id: 'nav-skills',
keywords: ['tools', 'toolsets'],
label: 'Skills & Tools',
label: cc.nav.skills.title,
run: go(SKILLS_ROUTE)
},
{ icon: MessageCircle, id: 'nav-messaging', label: 'Messaging', run: go(MESSAGING_ROUTE) },
{ icon: Package, id: 'nav-artifacts', label: 'Artifacts', run: go(ARTIFACTS_ROUTE) },
{ icon: Clock, id: 'nav-cron', keywords: ['schedule', 'jobs'], label: 'Cron', run: go(CRON_ROUTE) },
{ icon: Users, id: 'nav-profiles', label: 'Profiles', run: go(PROFILES_ROUTE) },
{ icon: Cpu, id: 'nav-agents', label: 'Agents', run: go(AGENTS_ROUTE) }
{ icon: MessageCircle, id: 'nav-messaging', label: cc.nav.messaging.title, run: go(MESSAGING_ROUTE) },
{ icon: Package, id: 'nav-artifacts', label: cc.nav.artifacts.title, run: go(ARTIFACTS_ROUTE) },
{ icon: Clock, id: 'nav-cron', keywords: ['schedule', 'jobs'], label: t.shell.statusbar.cron, run: go(CRON_ROUTE) },
{ icon: Users, id: 'nav-profiles', label: t.profiles.title, run: go(PROFILES_ROUTE) },
{ icon: Cpu, id: 'nav-agents', label: t.agents.title, run: go(AGENTS_ROUTE) }
]
},
{
heading: 'Command Center',
heading: cc.commandCenter,
items: [
{
icon: Archive,
id: 'cc-sessions',
keywords: ['command center', 'sessions', 'pin'],
label: 'Sessions',
label: cc.sections.sessions,
run: go(`${COMMAND_CENTER_ROUTE}?section=sessions`)
},
{
icon: Activity,
id: 'cc-system',
keywords: ['command center', 'system', 'status', 'logs'],
label: 'System',
label: cc.sections.system,
run: go(`${COMMAND_CENTER_ROUTE}?section=system`)
},
{
icon: BarChart3,
id: 'cc-usage',
keywords: ['command center', 'usage', 'tokens', 'cost'],
label: 'Usage',
label: cc.sections.usage,
run: go(`${COMMAND_CENTER_ROUTE}?section=usage`)
}
]
@@ -234,45 +260,45 @@ export function CommandPalette() {
// Declared before Settings: cmdk keeps group order, so this keeps the
// theme/mode pickers on top for "theme"/"color" queries instead of
// buried under a fuzzy Settings match.
heading: 'Appearance',
heading: cc.appearance,
items: [
{
icon: Palette,
id: 'appearance-theme',
keywords: ['theme', 'appearance', 'color', 'palette', 'skin', 'dark', 'light', 'look'],
label: 'Change theme…',
label: cc.changeTheme,
to: 'theme'
},
{
icon: Sun,
id: 'appearance-mode',
keywords: ['appearance', 'color mode', 'brightness', 'dark', 'light', 'system'],
label: 'Change color mode…',
label: cc.changeColorMode,
to: 'color-mode'
}
]
},
{
heading: 'Settings',
heading: cc.settings,
items: [
...SECTIONS.map(section => ({
icon: section.icon,
id: `set-config-${section.id}`,
keywords: ['settings', section.label],
label: section.label,
keywords: ['settings', section.label, settingsSectionLabel(section)],
label: settingsSectionLabel(section),
run: go(settingsTab(`config:${section.id}`))
})),
...NON_CONFIG_SETTINGS.map(entry => ({
icon: entry.icon,
id: `set-${entry.tab}`,
keywords: ['settings', ...(entry.keywords ?? [])],
label: entry.label,
label: t.settings.nav[entry.labelKey],
run: go(settingsTab(entry.tab))
}))
]
}
]
}, [go])
}, [go, settingsSectionLabel, t])
// The long, granular lists (settings fields, API keys, MCP servers, archived
// chats) only surface once the user types — otherwise they'd bury the
@@ -286,7 +312,7 @@ export function CommandPalette() {
if (sessions.length > 0) {
result.push({
heading: 'Sessions',
heading: t.commandCenter.sections.sessions,
items: sessions.map(session => ({
icon: MessageCircle,
id: `session-${session.id}`,
@@ -301,17 +327,17 @@ export function CommandPalette() {
section.keys.map(key => ({
icon: section.icon,
id: `field-${key}`,
keywords: ['settings', key, section.label],
label: `${section.label}: ${fieldLabel(key)}`,
keywords: ['settings', key, section.label, settingsSectionLabel(section)],
label: `${settingsSectionLabel(section)}: ${configFieldLabel(key)}`,
run: go(`${SETTINGS_ROUTE}?tab=config:${section.id}&field=${encodeURIComponent(key)}`)
}))
)
result.push({ heading: 'Settings fields', items: fieldItems })
result.push({ heading: t.commandCenter.settingsFields, items: fieldItems })
if (mcpServers.length > 0) {
result.push({
heading: 'MCP servers',
heading: t.commandCenter.mcpServers,
items: mcpServers.map(name => ({
icon: Wrench,
id: `mcp-${name}`,
@@ -324,7 +350,7 @@ export function CommandPalette() {
if (archivedSessions.length > 0) {
result.push({
heading: 'Archived chats',
heading: t.commandCenter.archivedChats,
items: archivedSessions.map(session => ({
icon: Archive,
id: `archived-${session.id}`,
@@ -336,7 +362,7 @@ export function CommandPalette() {
}
return result
}, [archivedSessions, go, mcpServers, search, sessions])
}, [archivedSessions, configFieldLabel, go, mcpServers, search, sessions, settingsSectionLabel, t])
const groups = useMemo(() => [...baseGroups, ...searchGroups], [baseGroups, searchGroups])
@@ -345,13 +371,13 @@ export function CommandPalette() {
const subPages = useMemo<Record<string, PalettePage>>(
() => ({
theme: {
title: 'Theme',
placeholder: 'Choose a theme…',
title: t.settings.appearance.themeTitle,
placeholder: t.settings.appearance.themeDesc,
// Skins aren't inherently light/dark — the same skin renders in either
// mode. Group by appearance so picking an entry sets skin + mode at
// once, and keep the palette open so each pick previews live.
groups: (['light', 'dark'] as const).map(groupMode => ({
heading: groupMode === 'light' ? 'Light' : 'Dark',
heading: groupMode === 'light' ? t.settings.modeOptions.light.label : t.settings.modeOptions.dark.label,
items: availableThemes.map(theme => ({
active: themeName === theme.name && resolvedMode === groupMode,
icon: groupMode === 'light' ? Sun : Moon,
@@ -367,30 +393,30 @@ export function CommandPalette() {
}))
},
'color-mode': {
title: 'Color mode',
placeholder: 'Choose color mode…',
title: t.settings.appearance.colorMode,
placeholder: t.settings.appearance.colorModeDesc,
groups: [
{
heading: 'Color mode',
heading: t.settings.appearance.colorMode,
items: THEME_MODES.map(entry => ({
active: mode === entry.mode,
icon: entry.icon,
id: `mode-${entry.mode}`,
keepOpen: true,
keywords: ['appearance', 'brightness', entry.label],
label: entry.label,
keywords: ['appearance', 'brightness', t.settings.modeOptions[entry.mode].label],
label: t.settings.modeOptions[entry.mode].label,
run: () => setMode(entry.mode)
}))
}
]
}
}),
[availableThemes, mode, resolvedMode, setMode, setTheme, themeName]
[availableThemes, mode, resolvedMode, setMode, setTheme, t, themeName]
)
const activePage = page ? subPages[page] : null
const visibleGroups = activePage ? activePage.groups : groups
const placeholder = activePage ? activePage.placeholder : 'Search commands and settings...'
const placeholder = activePage ? activePage.placeholder : t.commandCenter.searchPlaceholder
const handleSelect = (item: PaletteItem) => {
if (item.to) {
@@ -415,7 +441,7 @@ export function CommandPalette() {
aria-describedby={undefined}
className="fixed left-1/2 top-[14vh] z-[210] w-[min(40rem,calc(100vw-2rem))] -translate-x-1/2 overflow-hidden rounded-xl border border-(--ui-stroke-secondary) bg-(--ui-chat-bubble-background) shadow-lg duration-150 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-top-2 data-[state=open]:zoom-in-95"
>
<DialogPrimitive.Title className="sr-only">Command palette</DialogPrimitive.Title>
<DialogPrimitive.Title className="sr-only">{t.commandCenter.paletteTitle}</DialogPrimitive.Title>
<Command className="bg-transparent" loop>
{activePage && (
<button
@@ -424,7 +450,7 @@ export function CommandPalette() {
type="button"
>
<ChevronLeft className="size-3.5" />
<span>Back</span>
<span>{t.commandCenter.back}</span>
<span className="text-muted-foreground/50">/</span>
<span className="font-medium text-foreground">{activePage.title}</span>
</button>
@@ -448,7 +474,7 @@ export function CommandPalette() {
value={search}
/>
<CommandList className="max-h-[min(24rem,60vh)]">
<CommandEmpty>No results found.</CommandEmpty>
<CommandEmpty>{t.commandCenter.noResults}</CommandEmpty>
{visibleGroups.map(group => (
<CommandGroup
className="**:[[cmdk-group-heading]]:uppercase **:[[cmdk-group-heading]]:tracking-wider **:[[cmdk-group-heading]]:text-[0.6875rem] **:[[cmdk-group-heading]]:text-muted-foreground/70"
@@ -199,7 +199,7 @@ export function useGatewayBoot({
setDesktopBootStep({
phase: 'renderer.boot',
message: 'Starting desktop connection',
message: translateNow('boot.steps.startingDesktopConnection'),
progress: 6
})
@@ -280,13 +280,13 @@ export function useGatewayBoot({
const offExit = desktop.onBackendExit(() => {
if ($desktopBoot.get().running || $desktopBoot.get().visible) {
failDesktopBoot('Hermes background process exited during startup.')
failDesktopBoot(translateNow('boot.errors.backgroundExitedDuringStartup'))
}
notify({
kind: 'error',
title: 'Backend stopped',
message: 'Hermes background process exited.',
title: translateNow('boot.errors.backendStopped'),
message: translateNow('boot.errors.backgroundExited'),
durationMs: 0
})
})
@@ -301,7 +301,7 @@ export function useGatewayBoot({
setDesktopBootStep({
phase: 'renderer.gateway.connect',
message: 'Connecting live desktop gateway',
message: translateNow('boot.steps.connectingGateway'),
progress: 95
})
publish(conn)
@@ -332,7 +332,7 @@ export function useGatewayBoot({
setDesktopBootStep({
phase: 'renderer.config',
message: 'Loading Hermes settings',
message: translateNow('boot.steps.loadingSettings'),
progress: 97
})
await callbacksRef.current.refreshHermesConfig()
@@ -343,7 +343,7 @@ export function useGatewayBoot({
setDesktopBootStep({
phase: 'renderer.sessions',
message: 'Loading recent sessions',
message: translateNow('boot.steps.loadingSessions'),
progress: 99
})
await callbacksRef.current.refreshSessions()
@@ -353,7 +353,7 @@ export function useGatewayBoot({
if (!cancelled) {
const message = err instanceof Error ? err.message : String(err)
failDesktopBoot(message)
notifyError(err, 'Desktop boot failed')
notifyError(err, translateNow('boot.errors.desktopBootFailed'))
setSessionsLoading(false)
}
}
+17 -138
View File
@@ -66,141 +66,20 @@ const trimEdits = (edits: Record<string, string>): Record<string, string> =>
.filter(([, v]) => v)
)
const FIELD_COPY: Record<string, { advanced?: boolean; help?: string; label: string; placeholder?: string }> = {
TELEGRAM_BOT_TOKEN: {
label: 'Bot token',
help: 'Create a bot with @BotFather, then paste the token it gives you.',
placeholder: 'Paste Telegram bot token'
},
TELEGRAM_ALLOWED_USERS: {
label: 'Allowed Telegram user IDs',
help: 'Recommended. Comma-separated numeric IDs from @userinfobot. Without this, anyone can DM your bot.'
},
TELEGRAM_PROXY: {
label: 'Proxy URL',
help: 'Only needed on networks where Telegram is blocked.',
advanced: true
},
DISCORD_BOT_TOKEN: {
label: 'Bot token',
help: 'Create an application in the Discord Developer Portal, add a bot, then paste its token.'
},
DISCORD_ALLOWED_USERS: {
label: 'Allowed Discord user IDs',
help: 'Recommended. Comma-separated Discord user IDs.'
},
DISCORD_REPLY_TO_MODE: {
label: 'Reply style',
help: 'first, all, or off.',
advanced: true
},
DISCORD_ALLOW_ALL_USERS: {
label: 'Allow all Discord users',
help: 'Development only. When true, anyone can DM the bot without an allowlist.',
advanced: true
},
DISCORD_HOME_CHANNEL: {
label: 'Home channel ID',
help: 'Channel where the bot sends proactive messages (cron output, reminders).',
advanced: true
},
DISCORD_HOME_CHANNEL_NAME: {
label: 'Home channel name',
help: 'Display name for the home channel in logs and status output.',
advanced: true
},
BLUEBUBBLES_ALLOW_ALL_USERS: {
label: 'Allow all iMessage users',
help: 'When true, skip the BlueBubbles allowlist.',
advanced: true
},
MATTERMOST_ALLOW_ALL_USERS: {
label: 'Allow all Mattermost users',
advanced: true
},
MATTERMOST_HOME_CHANNEL: {
label: 'Home channel',
advanced: true
},
QQ_ALLOW_ALL_USERS: {
label: 'Allow all QQ users',
advanced: true
},
QQBOT_HOME_CHANNEL: {
label: 'QQ home channel',
help: 'Default channel or group for cron delivery.',
advanced: true
},
QQBOT_HOME_CHANNEL_NAME: {
label: 'QQ home channel name',
advanced: true
},
SLACK_BOT_TOKEN: {
label: 'Slack bot token',
help: 'Use the bot token from OAuth & Permissions after installing your Slack app.',
placeholder: 'Paste Slack bot token'
},
SLACK_APP_TOKEN: {
label: 'Slack app token',
help: 'Use the app-level token required for Socket Mode.',
placeholder: 'Paste Slack app token'
},
SLACK_ALLOWED_USERS: {
label: 'Allowed Slack user IDs',
help: 'Recommended. Comma-separated Slack user IDs.'
},
MATTERMOST_URL: {
label: 'Server URL',
placeholder: 'https://mattermost.example.com'
},
MATTERMOST_TOKEN: {
label: 'Bot token'
},
MATTERMOST_ALLOWED_USERS: {
label: 'Allowed user IDs',
help: 'Recommended. Comma-separated Mattermost user IDs.'
},
MATRIX_HOMESERVER: {
label: 'Homeserver URL',
placeholder: 'https://matrix.org'
},
MATRIX_ACCESS_TOKEN: {
label: 'Access token'
},
MATRIX_USER_ID: {
label: 'Bot user ID',
placeholder: '@hermes:example.org'
},
MATRIX_ALLOWED_USERS: {
label: 'Allowed Matrix user IDs',
help: 'Recommended. Comma-separated user IDs in @user:server format.'
},
SIGNAL_HTTP_URL: {
label: 'Signal bridge URL',
placeholder: 'http://127.0.0.1:8080',
help: 'URL of a running signal-cli REST bridge.'
},
SIGNAL_ACCOUNT: {
label: 'Phone number',
help: 'The number registered with your signal-cli bridge.'
},
SIGNAL_ALLOWED_USERS: {
label: 'Allowed Signal users',
help: 'Recommended. Comma-separated Signal identifiers.'
},
WHATSAPP_ENABLED: {
label: 'Enable WhatsApp bridge',
help: 'Set automatically by the toggle below. Leave alone unless you know you need it.',
advanced: true
},
WHATSAPP_MODE: {
label: 'Bridge mode',
advanced: true
},
WHATSAPP_ALLOWED_USERS: {
label: 'Allowed WhatsApp users',
help: 'Recommended. Comma-separated phone numbers or WhatsApp IDs.'
}
const FIELD_COPY: Record<string, { advanced?: boolean }> = {
TELEGRAM_PROXY: { advanced: true },
DISCORD_REPLY_TO_MODE: { advanced: true },
DISCORD_ALLOW_ALL_USERS: { advanced: true },
DISCORD_HOME_CHANNEL: { advanced: true },
DISCORD_HOME_CHANNEL_NAME: { advanced: true },
BLUEBUBBLES_ALLOW_ALL_USERS: { advanced: true },
MATTERMOST_ALLOW_ALL_USERS: { advanced: true },
MATTERMOST_HOME_CHANNEL: { advanced: true },
QQ_ALLOW_ALL_USERS: { advanced: true },
QQBOT_HOME_CHANNEL: { advanced: true },
QQBOT_HOME_CHANNEL_NAME: { advanced: true },
WHATSAPP_ENABLED: { advanced: true },
WHATSAPP_MODE: { advanced: true }
}
function fieldCopy(field: MessagingEnvVarInfo, m: Translations['messaging']) {
@@ -208,9 +87,9 @@ function fieldCopy(field: MessagingEnvVarInfo, m: Translations['messaging']) {
const localized = m.fieldCopy[field.key] || {}
return {
label: localized.label || copy.label || field.prompt || field.key,
help: localized.help || copy.help || field.description,
placeholder: localized.placeholder || copy.placeholder || field.prompt,
label: localized.label || field.prompt || field.key,
help: localized.help || field.description,
placeholder: localized.placeholder || field.prompt,
advanced: Boolean(copy.advanced || field.advanced)
}
}
@@ -2,6 +2,7 @@ import { type ReactNode, useEffect } from 'react'
import { Button } from '@/components/ui/button'
import { Codicon } from '@/components/ui/codicon'
import { translateNow } from '@/i18n'
import { triggerHaptic } from '@/lib/haptics'
import { cn } from '@/lib/utils'
@@ -17,7 +18,7 @@ interface OverlayViewProps {
export function OverlayView({
children,
onClose,
closeLabel = 'Close',
closeLabel = translateNow('common.close'),
contentClassName,
headerContent,
rootClassName
@@ -7,14 +7,12 @@ import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, D
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { createProfile, updateProfileSoul } from '@/hermes'
import { useI18n } from '@/i18n'
import { AlertTriangle } from '@/lib/icons'
import { cn } from '@/lib/utils'
const PROFILE_NAME_RE = /^[a-z0-9][a-z0-9_-]{0,63}$/
export const PROFILE_NAME_HINT =
'Lowercase letters, digits, hyphens, and underscores. Must start with a letter or digit.'
export function isValidProfileName(name: string): boolean {
return PROFILE_NAME_RE.test(name.trim())
}
@@ -31,6 +29,8 @@ export function CreateProfileDialog({
onCreated?: (name: string) => Promise<void> | void
open: boolean
}) {
const { t } = useI18n()
const p = t.profiles
const [name, setName] = useState('')
const [cloneFromDefault, setCloneFromDefault] = useState(true)
const [soul, setSoul] = useState('')
@@ -57,7 +57,7 @@ export function CreateProfileDialog({
event.preventDefault()
if (!trimmed || invalid) {
setError(invalid ? `Invalid name. ${PROFILE_NAME_HINT}` : 'Name is required.')
setError(invalid ? p.invalidName(p.nameHint) : p.nameRequired)
return
}
@@ -77,7 +77,7 @@ export function CreateProfileDialog({
window.setTimeout(onClose, 800)
} catch (err) {
setStatus('idle')
setError(err instanceof Error ? err.message : 'Failed to create profile')
setError(err instanceof Error ? err.message : p.failedCreate)
}
}
@@ -85,16 +85,14 @@ export function CreateProfileDialog({
<Dialog onOpenChange={value => !value && !busy && onClose()} open={open}>
<DialogContent className="max-w-md">
<DialogHeader>
<DialogTitle>New profile</DialogTitle>
<DialogDescription>
Profiles are independent Hermes environments: separate config, skills, and SOUL.md.
</DialogDescription>
<DialogTitle>{p.newProfile}</DialogTitle>
<DialogDescription>{p.createDesc}</DialogDescription>
</DialogHeader>
<form className="grid gap-4" onSubmit={handleSubmit}>
<div className="grid gap-1.5">
<label className="text-xs font-medium" htmlFor="new-profile-name">
Name
{p.nameLabel}
</label>
<Input
aria-invalid={invalid}
@@ -105,7 +103,7 @@ export function CreateProfileDialog({
value={name}
/>
<p className={cn('text-[0.66rem] leading-4', invalid ? 'text-destructive' : 'text-muted-foreground')}>
{PROFILE_NAME_HINT}
{p.nameHint}
</p>
</div>
@@ -116,22 +114,20 @@ export function CreateProfileDialog({
onCheckedChange={checked => setCloneFromDefault(checked === true)}
/>
<span className="grid gap-0.5 leading-snug">
<span className="text-sm font-medium">Clone from default</span>
<span className="text-xs text-muted-foreground">
Copy config, skills, and SOUL.md from your default profile.
</span>
<span className="text-sm font-medium">{p.cloneFromDefault}</span>
<span className="text-xs text-muted-foreground">{p.cloneFromDefaultDesc}</span>
</span>
</label>
<div className="grid gap-1.5">
<label className="text-xs font-medium" htmlFor="new-profile-soul">
SOUL.md <span className="font-normal text-muted-foreground"> optional</span>
SOUL.md <span className="font-normal text-muted-foreground">- {p.soulOptional}</span>
</label>
<Textarea
className="min-h-28 font-mono text-xs leading-5"
id="new-profile-soul"
onChange={event => setSoul(event.target.value)}
placeholder={`The system prompt / persona for this profile.\nLeave blank to keep the ${cloneFromDefault ? 'cloned' : 'empty'} default.`}
placeholder={p.soulPlaceholder(cloneFromDefault ? p.soulPlaceholderCloned : p.soulPlaceholderEmpty)}
value={soul}
/>
</div>
@@ -145,10 +141,10 @@ export function CreateProfileDialog({
<DialogFooter>
<Button disabled={busy} onClick={onClose} type="button" variant="ghost">
Cancel
{t.common.cancel}
</Button>
<Button disabled={busy || !trimmed || invalid} type="submit">
<ActionStatus busy="Creating…" done="Created" idle="Create profile" state={status} />
<ActionStatus busy={p.creating} done={p.created} idle={p.createAction} state={status} />
</Button>
</DialogFooter>
</form>
@@ -1,5 +1,6 @@
import { ConfirmDialog } from '@/components/ui/confirm-dialog'
import { deleteProfile } from '@/hermes'
import { useI18n } from '@/i18n'
import { $activeGatewayProfile, normalizeProfileKey, selectProfile, setActiveProfile } from '@/store/profile'
// Thin wrapper over ConfirmDialog: owns the deleteProfile call, inherits
@@ -16,20 +17,26 @@ export function DeleteProfileDialog({
onDeleted?: () => Promise<void> | void
open: boolean
}) {
const { t } = useI18n()
const p = t.profiles
return (
<ConfirmDialog
busyLabel="Deleting…"
confirmLabel="Delete"
busyLabel={p.deleting}
confirmLabel={t.common.delete}
description={
profile ? (
<>
This will delete <span className="font-medium text-foreground">{profile.name}</span> and remove its{' '}
<span className="font-mono text-xs">{profile.path}</span> directory. This cannot be undone.
{p.deleteDescPrefix}
<span className="font-medium text-foreground">{profile.name}</span>
{p.deleteDescMid}
<span className="font-mono text-xs">{profile.path}</span>
{p.deleteDescSuffix}
</>
) : null
}
destructive
doneLabel="Deleted"
doneLabel={p.deleted}
onClose={onClose}
onConfirm={async () => {
if (!profile) {
@@ -52,7 +59,7 @@ export function DeleteProfileDialog({
}
}}
open={open}
title="Delete profile?"
title={p.deleteTitle}
/>
)
}
@@ -5,10 +5,11 @@ import { Button } from '@/components/ui/button'
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { renameProfile } from '@/hermes'
import { useI18n } from '@/i18n'
import { AlertTriangle } from '@/lib/icons'
import { cn } from '@/lib/utils'
import { isValidProfileName, PROFILE_NAME_HINT } from './create-profile-dialog'
import { isValidProfileName } from './create-profile-dialog'
// Self-contained rename (owns the renameProfile call) so every caller just
// reacts via onRenamed. Unchanged name is a no-op close.
@@ -23,6 +24,8 @@ export function RenameProfileDialog({
onRenamed?: (name: string) => Promise<void> | void
open: boolean
}) {
const { t } = useI18n()
const p = t.profiles
const [name, setName] = useState(currentName)
const [status, setStatus] = useState<'done' | 'idle' | 'saving'>('idle')
const [error, setError] = useState<null | string>(null)
@@ -52,7 +55,7 @@ export function RenameProfileDialog({
}
if (!trimmed || invalid) {
setError(invalid ? `Invalid name. ${PROFILE_NAME_HINT}` : 'Name is required.')
setError(invalid ? p.invalidName(p.nameHint) : p.nameRequired)
return
}
@@ -67,7 +70,7 @@ export function RenameProfileDialog({
window.setTimeout(onClose, 800)
} catch (err) {
setStatus('idle')
setError(err instanceof Error ? err.message : 'Failed to rename profile')
setError(err instanceof Error ? err.message : p.failedRename)
}
}
@@ -75,17 +78,18 @@ export function RenameProfileDialog({
<Dialog onOpenChange={value => !value && !busy && onClose()} open={open}>
<DialogContent className="max-w-md">
<DialogHeader>
<DialogTitle>Rename profile</DialogTitle>
<DialogTitle>{p.renameTitle}</DialogTitle>
<DialogDescription>
Renaming updates the profile directory and any wrapper scripts in{' '}
<span className="font-mono">~/.local/bin</span>.
{p.renameDescPrefix}
<span className="font-mono">~/.local/bin</span>
{p.renameDescSuffix}
</DialogDescription>
</DialogHeader>
<form className="grid gap-3" onSubmit={handleSubmit}>
<div className="grid gap-1.5">
<label className="text-xs font-medium" htmlFor="rename-profile-name">
New name
{p.newNameLabel}
</label>
<Input
aria-invalid={invalid}
@@ -95,7 +99,7 @@ export function RenameProfileDialog({
value={name}
/>
<p className={cn('text-[0.66rem] leading-4', invalid ? 'text-destructive' : 'text-muted-foreground')}>
{PROFILE_NAME_HINT}
{p.nameHint}
</p>
</div>
@@ -108,10 +112,10 @@ export function RenameProfileDialog({
<DialogFooter>
<Button disabled={busy} onClick={onClose} type="button" variant="ghost">
Cancel
{t.common.cancel}
</Button>
<Button disabled={busy || invalid || unchanged} type="submit">
<ActionStatus busy="Renaming…" done="Renamed" idle="Rename" state={status} />
<ActionStatus busy={p.renaming} done={p.renamed} idle={p.rename} state={status} />
</Button>
</DialogFooter>
</form>
@@ -4,6 +4,7 @@ import { type NodeApi, type NodeRendererProps, Tree, type TreeApi } from 'react-
import { PageLoader } from '@/components/page-loader'
import { Codicon } from '@/components/ui/codicon'
import { useResizeObserver } from '@/hooks/use-resize-observer'
import { useI18n } from '@/i18n'
import { cn } from '@/lib/utils'
import type { TreeNode } from './use-project-tree'
@@ -122,7 +123,9 @@ export function ProjectTree({
}
function TreeSizingState() {
return <PageLoader aria-label="Loading files" className="min-h-24 px-3" />
const { t } = useI18n()
return <PageLoader aria-label={t.rightSidebar.loadingFiles} className="min-h-24 px-3" />
}
function ProjectTreeRow({
+54 -36
View File
@@ -4,6 +4,7 @@ import type { ReactNode } from 'react'
import { ErrorBoundary } from '@/components/error-boundary'
import { Button } from '@/components/ui/button'
import { Codicon } from '@/components/ui/codicon'
import { useI18n } from '@/i18n'
import { Loader } from '@/components/ui/loader'
import { Tip } from '@/components/ui/tooltip'
import { normalizeOrLocalPreviewTarget } from '@/lib/local-preview'
@@ -29,15 +30,17 @@ interface RightSidebarPaneProps {
interface RightSidebarTab {
icon: string
id: RightSidebarTabId
label: string
labelKey: 'files' | 'terminal'
}
const RIGHT_SIDEBAR_TABS: readonly RightSidebarTab[] = [
{ id: 'files', label: 'File system', icon: 'list-tree' },
{ id: 'terminal', label: 'Terminal', icon: 'terminal' }
{ id: 'files', labelKey: 'files', icon: 'list-tree' },
{ id: 'terminal', labelKey: 'terminal', icon: 'terminal' }
]
export function RightSidebarPane({ onActivateFile, onActivateFolder, onChangeCwd }: RightSidebarPaneProps) {
const { t } = useI18n()
const r = t.rightSidebar
const activeTab = useStore($rightSidebarTab)
const terminalTakeover = useStore($terminalTakeover)
const panesFlipped = useStore($panesFlipped)
@@ -50,7 +53,7 @@ export function RightSidebarPane({ onActivateFile, onActivateFolder, onChangeCwd
.split(/[\\/]+/)
.filter(Boolean)
.pop() ?? currentCwd)
: 'No folder selected'
: r.noFolderSelected
const {
collapseAll,
@@ -72,7 +75,7 @@ export function RightSidebarPane({ onActivateFile, onActivateFolder, onChangeCwd
defaultPath: hasCwd ? currentCwd : undefined,
directories: true,
multiple: false,
title: 'Change working directory'
title: r.changeCwdTitle
})
if (selected?.[0]) {
@@ -85,12 +88,12 @@ export function RightSidebarPane({ onActivateFile, onActivateFolder, onChangeCwd
const preview = await normalizeOrLocalPreviewTarget(path, currentCwd || undefined)
if (!preview) {
throw new Error(`Could not preview ${path}`)
throw new Error(r.couldNotPreview(path))
}
setCurrentSessionPreviewTarget(preview, 'file-browser', path)
} catch (error) {
notifyError(error, 'Preview unavailable')
notifyError(error, r.previewUnavailable)
}
}
@@ -98,7 +101,7 @@ export function RightSidebarPane({ onActivateFile, onActivateFolder, onChangeCwd
return (
<aside
aria-label="Right sidebar"
aria-label={r.aria}
className={cn(
'before:pointer-events-none relative flex h-full w-full min-w-0 flex-col overflow-hidden border-(--ui-stroke-secondary) bg-(--ui-sidebar-surface-background) pt-(--titlebar-height) text-(--ui-text-tertiary)',
panesFlipped
@@ -144,27 +147,34 @@ function RightSidebarChrome({
branch: string
tabs: readonly RightSidebarTab[]
}) {
const { t } = useI18n()
const r = t.rightSidebar
return (
<header className="shrink-0 bg-transparent text-[0.75rem]">
<div className="flex items-center gap-2 px-2.5 py-1">
<nav aria-label="Right sidebar panels" className="flex min-w-0 items-center gap-1">
{tabs.map(tab => (
<Tip key={tab.id} label={tab.label}>
<Button
aria-label={tab.label}
aria-pressed={tab.id === activeTab}
className={cn(
'text-(--ui-text-tertiary) hover:bg-(--ui-control-hover-background) hover:text-foreground',
tab.id === activeTab && 'bg-(--ui-control-active-background) text-foreground'
)}
onClick={() => setRightSidebarTab(tab.id)}
size="icon-xs"
variant="ghost"
>
<Codicon name={tab.icon} size="0.875rem" />
</Button>
</Tip>
))}
<nav aria-label={r.panelsAria} className="flex min-w-0 items-center gap-1">
{tabs.map(tab => {
const label = r[tab.labelKey]
return (
<Tip key={tab.id} label={label}>
<Button
aria-label={label}
aria-pressed={tab.id === activeTab}
className={cn(
'text-(--ui-text-tertiary) hover:bg-(--ui-control-hover-background) hover:text-foreground',
tab.id === activeTab && 'bg-(--ui-control-active-background) text-foreground'
)}
onClick={() => setRightSidebarTab(tab.id)}
size="icon-xs"
variant="ghost"
>
<Codicon name={tab.icon} size="0.875rem" />
</Button>
</Tip>
)
})}
</nav>
{branch && (
@@ -214,10 +224,13 @@ function FilesystemTab({
onRefresh,
openState
}: FilesystemTabProps) {
const { t } = useI18n()
const r = t.rightSidebar
return (
<div className="group/project-header flex min-h-0 flex-1 flex-col">
<RightSidebarSectionHeader>
<Tip label={hasCwd ? `${cwd} — click to change folder` : 'Open a folder'}>
<Tip label={hasCwd ? r.folderTip(cwd) : r.openFolder}>
<button
className="flex min-w-0 flex-1 items-center rounded-md text-left hover:text-(--ui-text-secondary)"
onClick={() => void onChangeFolder()}
@@ -227,7 +240,7 @@ function FilesystemTab({
</button>
</Tip>
<Button
aria-label="Refresh tree"
aria-label={r.refreshTree}
className={HEADER_ACTION_CLASS}
disabled={!hasCwd || loading}
onClick={onRefresh}
@@ -237,7 +250,7 @@ function FilesystemTab({
<Codicon name="refresh" size="0.8125rem" spinning={loading} />
</Button>
<Button
aria-label="Open folder"
aria-label={r.openFolder}
className={HEADER_ACTION_CLASS}
onClick={() => void onChangeFolder()}
size="icon-xs"
@@ -246,7 +259,7 @@ function FilesystemTab({
<Codicon name="folder-opened" size="0.8125rem" />
</Button>
<Button
aria-label="Collapse all folders"
aria-label={r.collapseAll}
className={HEADER_ACTION_REVEAL_CLASS}
disabled={!hasCwd || !canCollapse}
onClick={onCollapseAll}
@@ -304,12 +317,15 @@ function FileTreeBody({
onPreviewFile,
openState
}: FileTreeBodyProps) {
const { t } = useI18n()
const r = t.rightSidebar
if (!cwd) {
return <EmptyState body="Set a working directory from the status bar to browse files." title="No project" />
return <EmptyState body={r.noProjectBody} title={r.noProjectTitle} />
}
if (error) {
return <EmptyState body={`Could not read this folder (${error}).`} title="Unreadable" />
return <EmptyState body={r.unreadableBody(error)} title={r.unreadableTitle} />
}
if (loading && data.length === 0) {
@@ -317,20 +333,20 @@ function FileTreeBody({
}
if (data.length === 0) {
return <EmptyState body="This folder is empty." title="Empty" />
return <EmptyState body={r.emptyBody} title={r.emptyTitle} />
}
return (
<ErrorBoundary
fallback={({ reset }) => (
<div className="flex min-h-0 flex-1 flex-col items-center justify-center gap-2 px-4 text-center">
<EmptyState body="The file tree hit an error rendering this folder." title="Tree error" />
<EmptyState body={r.treeErrorBody} title={r.treeErrorTitle} />
<button
className="text-[0.68rem] font-medium text-muted-foreground transition hover:text-foreground"
onClick={reset}
type="button"
>
Try again
{r.tryAgain}
</button>
</div>
)}
@@ -353,8 +369,10 @@ function FileTreeBody({
}
function FileTreeLoadingState() {
const { t } = useI18n()
return (
<div aria-label="Loading file tree" className="grid min-h-0 flex-1 place-items-center px-3" role="status">
<div aria-label={t.rightSidebar.loadingTree} className="grid min-h-0 flex-1 place-items-center px-3" role="status">
<Loader
aria-hidden="true"
className="size-8 text-(--ui-text-tertiary)"
@@ -6,6 +6,7 @@ import { Button } from '@/components/ui/button'
import { Codicon } from '@/components/ui/codicon'
import { Loader } from '@/components/ui/loader'
import { Tip } from '@/components/ui/tooltip'
import { useI18n } from '@/i18n'
import { SidebarPanelLabel } from '../../shell/sidebar-label'
import { $terminalTakeover, setRightSidebarTab, setTerminalTakeover } from '../store'
@@ -19,13 +20,14 @@ interface TerminalTabProps {
}
export function TerminalTab({ cwd, onAddSelectionToChat }: TerminalTabProps) {
const { t } = useI18n()
const { addSelectionToChat, hostRef, selection, selectionStyle, shellName, status } = useTerminalSession({
cwd,
onAddSelectionToChat
})
const takeover = useStore($terminalTakeover)
const label = takeover ? 'Return to split view' : 'Focus terminal view'
const label = takeover ? t.rightSidebar.terminalSplit : t.rightSidebar.terminalFocus
const toggleTakeover = () => {
// Pre-select the Terminal tab so the slot is ready to host us on return.
@@ -77,7 +79,7 @@ export function TerminalTab({ cwd, onAddSelectionToChat }: TerminalTabProps) {
type="button"
variant="secondary"
>
Add to chat
{t.rightSidebar.addToChat}
<span className="ml-1 text-[0.6rem] text-(--ui-text-tertiary)">{addSelectionShortcutLabel()}</span>
</Button>
</div>
@@ -1,5 +1,6 @@
import { type MutableRefObject, useCallback } from 'react'
import { useI18n } from '@/i18n'
import { notify, notifyError } from '@/store/notifications'
import { $currentCwd, setCurrentBranch, setCurrentCwd } from '@/store/session'
import type { SessionRuntimeInfo } from '@/types/hermes'
@@ -17,6 +18,8 @@ export function useCwdActions({
onSessionRuntimeInfo,
requestGateway
}: CwdActionsOptions) {
const { t } = useI18n()
const copy = t.desktop
const refreshProjectBranch = useCallback(
async (cwd: string) => {
const target = cwd.trim()
@@ -85,7 +88,7 @@ export function useCwdActions({
const message = err instanceof Error ? err.message : String(err)
if (!message.includes('unknown method')) {
notifyError(err, 'Working directory change failed')
notifyError(err, copy.cwdChangeFailed)
return
}
@@ -94,12 +97,12 @@ export function useCwdActions({
setCurrentBranch('')
notify({
kind: 'warning',
title: 'Working directory staged',
message: 'Restart the desktop backend to apply cwd changes to this active session.'
title: copy.cwdStagedTitle,
message: copy.cwdStagedMessage
})
}
},
[activeSessionId, onSessionRuntimeInfo, requestGateway]
[activeSessionId, copy, onSessionRuntimeInfo, requestGateway]
)
return { changeSessionCwd, refreshProjectBranch }
@@ -2,6 +2,7 @@ import { type QueryClient } from '@tanstack/react-query'
import { useCallback } from 'react'
import { getGlobalModelInfo, setGlobalModel } from '@/hermes'
import { useI18n } from '@/i18n'
import { notifyError } from '@/store/notifications'
import { $currentModel, $currentProvider, setCurrentModel, setCurrentProvider } from '@/store/session'
import type { ModelOptionsResponse } from '@/types/hermes'
@@ -19,6 +20,8 @@ interface ModelControlsOptions {
}
export function useModelControls({ activeSessionId, queryClient, requestGateway }: ModelControlsOptions) {
const { t } = useI18n()
const copy = t.desktop
const updateModelOptionsCache = useCallback(
(provider: string, model: string, includeGlobal: boolean) => {
const patch = (prev: ModelOptionsResponse | undefined) => ({ ...(prev ?? {}), provider, model })
@@ -91,12 +94,12 @@ export function useModelControls({ activeSessionId, queryClient, requestGateway
setCurrentModel(prevModel)
setCurrentProvider(prevProvider)
updateModelOptionsCache(prevProvider, prevModel, includeGlobal)
notifyError(err, 'Model switch failed')
notifyError(err, copy.modelSwitchFailed)
return false
}
},
[activeSessionId, queryClient, refreshCurrentModel, requestGateway, updateModelOptionsCache]
[activeSessionId, copy.modelSwitchFailed, queryClient, refreshCurrentModel, requestGateway, updateModelOptionsCache]
)
return { refreshCurrentModel, selectModel, updateModelOptionsCache }
@@ -2,7 +2,8 @@ import type { AppendMessage, ThreadMessage } from '@assistant-ui/react'
import { type MutableRefObject, useCallback } from 'react'
import { getProfiles, transcribeAudio } from '@/hermes'
import { branchGroupForUser, type ChatMessage, chatMessageText, textPart } from '@/lib/chat-messages'
import { type Translations, translateNow, useI18n } from '@/i18n'
import { appendTextPart, branchGroupForUser, type ChatMessage, chatMessageText, textPart } from '@/lib/chat-messages'
import {
attachmentDisplayText,
parseCommandDispatch,
@@ -57,10 +58,10 @@ function blobToDataUrl(blob: Blob): Promise<string> {
if (typeof reader.result === 'string') {
resolve(reader.result)
} else {
reject(new Error('Could not read recorded audio'))
reject(new Error(translateNow('desktop.audioReadFailed')))
}
})
reader.addEventListener('error', () => reject(reader.error || new Error('Could not read recorded audio')))
reader.addEventListener('error', () => reject(reader.error || new Error(translateNow('desktop.audioReadFailed'))))
reader.readAsDataURL(blob)
})
}
@@ -101,12 +102,12 @@ interface SubmitTextOptions {
fromQueue?: boolean
}
function renderCommandsCatalog(catalog: CommandsCatalogLike): string {
function renderCommandsCatalog(catalog: CommandsCatalogLike, copy: Translations['desktop']): string {
const desktopCatalog = filterDesktopCommandsCatalog(catalog)
const sections = desktopCatalog.categories?.length
? desktopCatalog.categories
: [{ name: 'Desktop commands', pairs: desktopCatalog.pairs ?? [] }]
: [{ name: copy.desktopCommands, pairs: desktopCatalog.pairs ?? [] }]
const body = sections
.filter(section => section.pairs.length > 0)
@@ -118,8 +119,8 @@ function renderCommandsCatalog(catalog: CommandsCatalogLike): string {
.join('\n\n')
const tail = [
desktopCatalog.skill_count ? `${desktopCatalog.skill_count} skill commands available.` : '',
desktopCatalog.warning ? `warning: ${desktopCatalog.warning}` : ''
desktopCatalog.skill_count ? copy.skillCommandsAvailable(desktopCatalog.skill_count) : '',
desktopCatalog.warning ? copy.warningLine(desktopCatalog.warning) : ''
]
.filter(Boolean)
.join('\n')
@@ -156,6 +157,8 @@ export function usePromptActions({
sttEnabled,
updateSessionState
}: PromptActionsOptions) {
const { t } = useI18n()
const copy = t.desktop
const appendSessionTextMessage = useCallback(
(sessionId: string, role: ChatMessage['role'], text: string) => {
const body = text.trim()
@@ -326,7 +329,7 @@ export function usePromptActions({
} catch (err) {
dropOptimistic(null)
releaseBusy()
notifyError(err, 'Session unavailable')
notifyError(err, copy.sessionUnavailable)
return false
}
@@ -334,7 +337,7 @@ export function usePromptActions({
if (!sessionId) {
dropOptimistic(null)
releaseBusy()
notify({ kind: 'error', title: 'Session unavailable', message: 'Could not create a new session' })
notify({ kind: 'error', title: copy.sessionUnavailable, message: copy.createSessionFailed })
return false
}
@@ -354,7 +357,7 @@ export function usePromptActions({
return true
} catch (err) {
const message = inlineErrorMessage(err, 'Prompt failed')
const message = inlineErrorMessage(err, copy.promptFailed)
releaseBusy()
updateSessionState(sessionId, state => ({
@@ -365,7 +368,7 @@ export function usePromptActions({
id: `assistant-error-${Date.now()}`,
role: 'assistant',
parts: [],
error: message || 'Prompt failed',
error: message || copy.promptFailed,
branchGroupId: state.pendingBranchGroup ?? undefined
}
],
@@ -376,12 +379,12 @@ export function usePromptActions({
}))
if (isProviderSetupError(err)) {
requestDesktopOnboarding('Add a provider credential before sending your first message.')
requestDesktopOnboarding(copy.providerCredentialRequired)
return false
}
notifyError(err, 'Prompt failed')
notifyError(err, copy.promptFailed)
return false
}
@@ -389,6 +392,7 @@ export function usePromptActions({
[
activeSessionId,
busyRef,
copy,
createBackendSessionForSend,
requestGateway,
selectedStoredSessionIdRef,
@@ -408,7 +412,7 @@ export function usePromptActions({
const sessionId = sessionHint || activeSessionIdRef.current || (await createBackendSessionForSend())
if (sessionId) {
appendSessionTextMessage(sessionId, 'system', 'empty slash command')
appendSessionTextMessage(sessionId, 'system', copy.emptySlashCommand)
}
return
@@ -435,16 +439,16 @@ export function usePromptActions({
if (!sid) {
setYoloActive(next)
notify({ kind: 'success', message: next ? 'YOLO armed for this chat' : 'YOLO off' })
notify({ kind: 'success', message: next ? copy.yoloArmed : copy.yoloOff })
return
}
try {
const active = await setSessionYolo(requestGateway, sid, next)
appendSessionTextMessage(sid, 'system', `YOLO ${active ? 'on' : 'off'} for this session`)
appendSessionTextMessage(sid, 'system', copy.yoloSystem(active))
} catch {
notify({ kind: 'error', title: 'YOLO', message: 'Could not toggle YOLO' })
notify({ kind: 'error', title: copy.yoloTitle, message: copy.yoloToggleFailed })
}
return
@@ -467,7 +471,7 @@ export function usePromptActions({
if (!target) {
notify({
kind: 'success',
message: `Profile: ${current}. Use /profile <name> or the "New session" picker to start a chat in another profile.`
message: copy.profileStatus(current)
})
return
@@ -480,8 +484,8 @@ export function usePromptActions({
if (!match) {
notify({
kind: 'error',
title: 'Unknown profile',
message: `No profile named "${target}". Available: ${profiles.map(profile => profile.name).join(', ')}`
title: copy.unknownProfile,
message: copy.noProfileNamed(target, profiles.map(profile => profile.name).join(', '))
})
return
@@ -493,9 +497,9 @@ export function usePromptActions({
// Swap the live gateway now so an empty draft sends into this
// profile immediately; an existing thread keeps its own profile.
await ensureGatewayProfile(key)
notify({ kind: 'success', message: `New chats will use profile ${match.name}.` })
notify({ kind: 'success', message: copy.newChatsProfile(match.name) })
} catch (err) {
notifyError(err, 'Failed to set profile')
notifyError(err, copy.setProfileFailed)
}
return
@@ -506,8 +510,8 @@ export function usePromptActions({
if (!sessionId) {
notify({
kind: 'error',
title: 'Session unavailable',
message: 'Could not create a new session'
title: copy.sessionUnavailable,
message: copy.createSessionFailed
})
return
@@ -570,7 +574,7 @@ export function usePromptActions({
try {
const catalog = await requestGateway<CommandsCatalogLike>('commands.catalog', { session_id: sessionId })
renderSlashOutput(renderCommandsCatalog(catalog))
renderSlashOutput(renderCommandsCatalog(catalog, copy))
} catch (err) {
renderSlashOutput(`error: ${err instanceof Error ? err.message : String(err)}`)
}
@@ -658,6 +662,7 @@ export function usePromptActions({
appendSessionTextMessage,
branchCurrentSession,
busyRef,
copy,
createBackendSessionForSend,
handleSkinCommand,
refreshSessions,
@@ -687,7 +692,7 @@ export function usePromptActions({
const transcribeVoiceAudio = useCallback(
async (audio: Blob) => {
if (!sttEnabled) {
throw new Error('Speech-to-text is disabled in settings.')
throw new Error(copy.sttDisabled)
}
const dataUrl = await blobToDataUrl(audio)
@@ -695,7 +700,7 @@ export function usePromptActions({
return result.transcript
},
[sttEnabled]
[copy.sttDisabled, sttEnabled]
)
const cancelRun = useCallback(async () => {
@@ -745,9 +750,9 @@ export function usePromptActions({
} catch (err) {
setMutableRef(busyRef, false)
setBusy(false)
notifyError(err, 'Stop failed')
notifyError(err, copy.stopFailed)
}
}, [activeSessionId, activeSessionIdRef, busyRef, requestGateway, updateSessionState])
}, [activeSessionId, activeSessionIdRef, busyRef, copy.stopFailed, requestGateway, updateSessionState])
// Steer = nudge the live turn without interrupting: the gateway appends the
// text to the next tool result so the model reads it on its next iteration
@@ -853,10 +858,10 @@ export function usePromptActions({
busy: false,
awaitingResponse: false
}))
notifyError(err, 'Regenerate failed')
notifyError(err, copy.regenerateFailed)
}
},
[activeSessionId, requestGateway, updateSessionState]
[activeSessionId, copy.regenerateFailed, requestGateway, updateSessionState]
)
const editMessage = useCallback(
@@ -926,10 +931,10 @@ export function usePromptActions({
setBusy(false)
setAwaitingResponse(false)
updateSessionState(sessionId, state => ({ ...state, busy: false, awaitingResponse: false }))
notifyError(surfaced, 'Edit failed')
notifyError(surfaced, copy.editFailed)
}
},
[activeSessionId, activeSessionIdRef, busyRef, requestGateway, updateSessionState]
[activeSessionId, activeSessionIdRef, busyRef, copy.editFailed, requestGateway, updateSessionState]
)
const handleThreadMessagesChange = useCallback(
@@ -3,6 +3,7 @@ import { useCallback, useRef } from 'react'
import type { NavigateFunction } from 'react-router-dom'
import { deleteSession, getSessionMessages, setSessionArchived } from '@/hermes'
import { useI18n } from '@/i18n'
import { type ChatMessage, chatMessageText, preserveLocalAssistantErrors, toChatMessages } from '@/lib/chat-messages'
import { normalizePersonalityValue } from '@/lib/chat-runtime'
import { embeddedImageUrls, textWithoutEmbeddedImages } from '@/lib/embedded-images'
@@ -285,6 +286,8 @@ export function useSessionActions({
syncSessionStateToView,
updateSessionState
}: SessionActionsOptions) {
const { t } = useI18n()
const copy = t.desktop
const resumeRequestRef = useRef(0)
const startFreshSessionDraft = useCallback(
@@ -602,7 +605,7 @@ export function useSessionActions({
}
setMessages(preserveLocalAssistantErrors(toChatMessages(fallback.messages), $messages.get()))
notifyError(err, 'Resume failed')
notifyError(err, copy.resumeFailed)
} finally {
if (isCurrentResume()) {
busyRef.current = false
@@ -614,6 +617,7 @@ export function useSessionActions({
[
activeSessionIdRef,
busyRef,
copy,
requestGateway,
runtimeIdByStoredSessionIdRef,
selectedStoredSessionIdRef,
@@ -630,8 +634,8 @@ export function useSessionActions({
if (!sourceSessionId) {
notify({
kind: 'warning',
title: 'Nothing to branch',
message: 'Start or resume a chat before branching.'
title: copy.nothingToBranch,
message: copy.branchNeedsChat
})
return false
@@ -640,8 +644,8 @@ export function useSessionActions({
if (busyRef.current) {
notify({
kind: 'warning',
title: 'Session busy',
message: 'Stop the current turn before branching this chat.'
title: copy.sessionBusy,
message: copy.branchStopCurrent
})
return false
@@ -671,8 +675,8 @@ export function useSessionActions({
if (!branchMessages.length) {
notify({
kind: 'warning',
title: 'Nothing to branch',
message: 'This message has no text to branch from.'
title: copy.nothingToBranch,
message: copy.branchNoText
})
return false
@@ -686,14 +690,14 @@ export function useSessionActions({
cols: 96,
...(cwd && { cwd }),
messages: branchMessages.map(({ content, role }) => ({ content, role })),
title: 'Branch'
title: copy.branchTitle
})
const routedSessionId = branched.stored_session_id ?? branched.session_id
const preview = branchMessages.map(({ content }) => content).find(Boolean) ?? null
setFreshDraftReady(false)
upsertOptimisticSession(branched, routedSessionId, 'Branch', preview)
upsertOptimisticSession(branched, routedSessionId, copy.branchTitle, preview)
ensureSessionState(branched.session_id, routedSessionId)
setActiveSessionId(branched.session_id)
activeSessionIdRef.current = branched.session_id
@@ -723,7 +727,7 @@ export function useSessionActions({
return true
} catch (err) {
notifyError(err, 'Branch failed')
notifyError(err, copy.branchFailed)
return false
} finally {
@@ -735,6 +739,7 @@ export function useSessionActions({
[
activeSessionIdRef,
busyRef,
copy,
creatingSessionRef,
ensureSessionState,
navigate,
@@ -812,12 +817,13 @@ export function useSessionActions({
}
}
notifyError(err, 'Delete failed')
notifyError(err, copy.deleteFailed)
}
},
[
activeSessionId,
activeSessionIdRef,
copy,
navigate,
requestGateway,
selectedStoredSessionId,
@@ -851,7 +857,7 @@ export function useSessionActions({
try {
await setSessionArchived(storedSessionId, true, archived?.profile)
notify({ durationMs: 2_000, kind: 'success', message: 'Archived' })
notify({ durationMs: 2_000, kind: 'success', message: copy.archived })
} catch (err) {
if (archived) {
setSessions(prev => [archived, ...prev.filter(s => s.id !== storedSessionId)])
@@ -859,10 +865,10 @@ export function useSessionActions({
}
$pinnedSessionIds.set(previousPinned)
notifyError(err, 'Archive failed')
notifyError(err, copy.archiveFailed)
}
},
[selectedStoredSessionId, startFreshSessionDraft]
[copy, selectedStoredSessionId, startFreshSessionDraft]
)
return {
@@ -1,10 +1,10 @@
import { useStore } from '@nanostores/react'
import { type Locale, LOCALE_META, useI18n } from '@/i18n'
import { LanguageSwitcher } from '@/components/language-switcher'
import { useI18n } from '@/i18n'
import { triggerHaptic } from '@/lib/haptics'
import { Check, Palette } from '@/lib/icons'
import { cn } from '@/lib/utils'
import { notifyError } from '@/store/notifications'
import { $toolViewMode, setToolViewMode } from '@/store/tool-view'
import { useTheme } from '@/themes/context'
import { BUILTIN_THEMES } from '@/themes/presets'
@@ -53,27 +53,11 @@ function ThemePreview({ name }: { name: string }) {
}
export function AppearanceSettings() {
const { t, isSavingLocale, locale, setLocale } = useI18n()
const { t, isSavingLocale } = useI18n()
const { themeName, mode, availableThemes, setTheme, setMode } = useTheme()
const toolViewMode = useStore($toolViewMode)
const activeTheme = availableThemes.find(theme => theme.name === themeName)
const a = t.settings.appearance
const locales = Object.keys(LOCALE_META) as Locale[]
const selectLocale = async (code: Locale) => {
if (code === locale || isSavingLocale) {
return
}
triggerHaptic('selection')
try {
await setLocale(code)
triggerHaptic('success')
} catch (error) {
notifyError(error, t.language.saveError)
}
}
return (
<SettingsContent>
@@ -86,45 +70,13 @@ export function AppearanceSettings() {
</div>
<section className="rounded-xl border border-(--ui-stroke-tertiary) bg-(--ui-chat-bubble-background) p-3 shadow-sm">
<div className="mb-3 flex items-center justify-between gap-3">
<div>
<div className="flex items-center justify-between gap-3">
<div className="min-w-0">
<div className="text-sm font-medium">{t.language.label}</div>
<div className="mt-1 text-xs text-muted-foreground">{t.language.description}</div>
{isSavingLocale && <div className="mt-1 text-xs text-muted-foreground">{t.language.saving}</div>}
</div>
<Pill>{LOCALE_META[locale].name}</Pill>
</div>
<div className="grid gap-2 sm:grid-cols-3">
{locales.map(code => {
const active = locale === code
return (
<button
className={cn(
'group rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) p-2.5 text-left transition hover:bg-(--chrome-action-hover)',
active && 'border-(--ui-stroke-secondary) bg-(--ui-bg-tertiary)'
)}
disabled={isSavingLocale}
key={code}
onClick={() => void selectLocale(code)}
type="button"
>
<div className="flex items-start justify-between gap-3">
<div className="text-[length:var(--conversation-text-font-size)] font-medium">
{LOCALE_META[code].name}
</div>
{active && (
<span className="grid size-5 place-items-center rounded-full bg-primary text-primary-foreground">
<Check className="size-3.5" />
</span>
)}
</div>
<div className="mt-1 text-[length:var(--conversation-caption-font-size)] uppercase tracking-wide text-(--ui-text-tertiary)">
{code}
</div>
</button>
)
})}
<LanguageSwitcher />
</div>
</section>
@@ -19,6 +19,7 @@ import { notify, notifyError } from '@/store/notifications'
import type { ConfigFieldSchema, HermesConfigRecord } from '@/types/hermes'
import { CONTROL_TEXT, EMPTY_SELECT_VALUE, FIELD_DESCRIPTIONS, FIELD_LABELS, SECTIONS } from './constants'
import { fieldCopyForSchemaKey } from './field-copy'
import { enumOptionsFor, getNested, prettyName, setNested } from './helpers'
import { ModelSettings } from './model-settings'
import { EmptyState, ListRow, LoadingState, SettingsContent } from './primitives'
@@ -39,15 +40,18 @@ function ConfigField({
onChange: (value: unknown) => void
}) {
const { t } = useI18n()
const c = t.settings.config
const label =
t.settings.fieldLabels[schemaKey] ?? FIELD_LABELS[schemaKey] ?? prettyName(schemaKey.split('.').pop() ?? schemaKey)
fieldCopyForSchemaKey(t.settings.fieldLabels, schemaKey) ??
fieldCopyForSchemaKey(FIELD_LABELS, schemaKey) ??
prettyName(schemaKey.split('.').pop() ?? schemaKey)
const normalize = (v: string) => v.toLowerCase().replace(/[^a-z0-9]+/g, '')
const rawDescription = (
t.settings.fieldDescriptions[schemaKey] ??
FIELD_DESCRIPTIONS[schemaKey] ??
fieldCopyForSchemaKey(t.settings.fieldDescriptions, schemaKey) ??
fieldCopyForSchemaKey(FIELD_DESCRIPTIONS, schemaKey) ??
schema.description ??
''
).trim()
@@ -88,8 +92,8 @@ function ConfigField({
{option
? (optionLabels?.[option] ?? prettyName(option))
: schemaKey === 'display.personality'
? 'None'
: '(none)'}
? c.none
: c.noneParen}
</SelectItem>
))}
</SelectContent>
@@ -109,7 +113,7 @@ function ConfigField({
onChange(n)
}
}}
placeholder="Not set"
placeholder={c.notSet}
type="number"
value={value === undefined || value === null ? '' : String(value)}
/>
@@ -128,7 +132,7 @@ function ConfigField({
.filter(Boolean)
)
}
placeholder="comma-separated values"
placeholder={c.commaSeparated}
value={Array.isArray(value) ? value.join(', ') : String(value ?? '')}
/>
)
@@ -145,7 +149,7 @@ function ConfigField({
/* keep last valid */
}
}}
placeholder="Not set"
placeholder={c.notSet}
spellCheck={false}
value={JSON.stringify(value, null, 2)}
/>,
@@ -160,14 +164,14 @@ function ConfigField({
<Textarea
className={cn('min-h-24 resize-y bg-background', CONTROL_TEXT)}
onChange={e => onChange(e.target.value)}
placeholder="Not set"
placeholder={c.notSet}
value={String(value ?? '')}
/>
) : (
<Input
className={CONTROL_TEXT}
onChange={e => onChange(e.target.value)}
placeholder="Not set"
placeholder={c.notSet}
value={String(value ?? '')}
/>
),
@@ -186,6 +190,8 @@ export function ConfigSettings({
onMainModelChanged?: (provider: string, model: string) => void
importInputRef: React.RefObject<HTMLInputElement | null>
}) {
const { t } = useI18n()
const c = t.settings.config
const [config, setConfig] = useState<HermesConfigRecord | null>(null)
const [_defaults, setDefaults] = useState<HermesConfigRecord | null>(null)
const [schema, setSchema] = useState<Record<string, ConfigFieldSchema> | null>(null)
@@ -206,7 +212,7 @@ export function ConfigSettings({
setDefaults(d)
setSchema(s.fields)
})
.catch(err => notifyError(err, 'Settings failed to load'))
.catch(err => notifyError(err, c.failedLoad))
return () => void (cancelled = true)
}, [])
@@ -250,7 +256,7 @@ export function ConfigSettings({
}
} catch (err) {
if (saveVersionRef.current === v) {
notifyError(err, 'Autosave failed')
notifyError(err, c.autosaveFailed)
}
}
})()
@@ -323,9 +329,9 @@ export function ConfigSettings({
reader.onload = () => {
try {
updateConfig(JSON.parse(String(reader.result)))
notify({ kind: 'success', title: 'Config imported', message: 'Saving…' })
notify({ kind: 'success', title: c.imported, message: t.common.saving })
} catch (err) {
notifyError(err, 'Invalid config JSON')
notifyError(err, c.invalidJson)
}
}
@@ -334,7 +340,7 @@ export function ConfigSettings({
}
if (!config || !schema) {
return <LoadingState label="Loading Hermes configuration..." />
return <LoadingState label={c.loading} />
}
return (
@@ -345,7 +351,7 @@ export function ConfigSettings({
</div>
)}
{fields.length === 0 ? (
<EmptyState description="This section has no adjustable settings." title="Nothing to configure" />
<EmptyState description={c.emptyDesc} title={c.emptyTitle} />
) : (
<div className="grid gap-1">
{fields.map(([key, field]) => (
+164 -91
View File
@@ -14,6 +14,7 @@ import {
import type { ThemeMode } from '@/themes/context'
import type { DesktopConfigSection } from './types'
import { defineFieldCopy } from './field-copy'
// Provider group definitions used to fold raw env-var names like
// ``XAI_API_KEY`` into a single "xAI" card with a friendly label, short
@@ -245,103 +246,175 @@ export const ENUM_OPTIONS: Record<string, string[]> = {
'updates.non_interactive_local_changes': ['stash', 'discard']
}
export const FIELD_LABELS: Record<string, string> = {
export const FIELD_LABELS: Record<string, string> = defineFieldCopy({
model: 'Default Model',
model_context_length: 'Context Window',
fallback_providers: 'Fallback Models',
modelContextLength: 'Context Window',
fallbackProviders: 'Fallback Models',
toolsets: 'Enabled Toolsets',
timezone: 'Timezone',
'display.personality': 'Personality',
'display.show_reasoning': 'Reasoning Blocks',
'agent.max_turns': 'Max Agent Steps',
'agent.image_input_mode': 'Image Attachments',
'terminal.cwd': 'Working Directory',
'terminal.backend': 'Execution Backend',
'terminal.timeout': 'Command Timeout',
'terminal.persistent_shell': 'Persistent Shell',
'terminal.env_passthrough': 'Environment Passthrough',
file_read_max_chars: 'File Read Limit',
'tool_output.max_bytes': 'Terminal Output Limit',
'tool_output.max_lines': 'File Page Limit',
'tool_output.max_line_length': 'Line Length Limit',
'code_execution.mode': 'Code Execution Mode',
'approvals.mode': 'Approval Mode',
'approvals.timeout': 'Approval Timeout',
'approvals.mcp_reload_confirm': 'Confirm MCP Reloads',
command_allowlist: 'Command Allowlist',
'security.redact_secrets': 'Redact Secrets',
'security.allow_private_urls': 'Allow Private URLs',
'browser.allow_private_urls': 'Browser Private URLs',
'browser.auto_local_for_private_urls': 'Local Browser For Private URLs',
'checkpoints.enabled': 'File Checkpoints',
'checkpoints.max_snapshots': 'Checkpoint Limit',
'voice.record_key': 'Voice Shortcut',
'voice.max_recording_seconds': 'Max Recording Length',
'voice.auto_tts': 'Read Responses Aloud',
'stt.enabled': 'Speech To Text',
'stt.provider': 'Speech-To-Text Provider',
'stt.local.model': 'Local Transcription Model',
'stt.local.language': 'Transcription Language',
'stt.elevenlabs.model_id': 'ElevenLabs STT Model',
'stt.elevenlabs.language_code': 'ElevenLabs Language',
'stt.elevenlabs.tag_audio_events': 'Tag Audio Events',
'stt.elevenlabs.diarize': 'Speaker Diarization',
'tts.provider': 'Text-To-Speech Provider',
'tts.edge.voice': 'Edge Voice',
'tts.openai.model': 'OpenAI TTS Model',
'tts.openai.voice': 'OpenAI Voice',
'tts.elevenlabs.voice_id': 'ElevenLabs Voice',
'tts.elevenlabs.model_id': 'ElevenLabs Model',
'memory.memory_enabled': 'Persistent Memory',
'memory.user_profile_enabled': 'User Profile',
'memory.memory_char_limit': 'Memory Budget',
'memory.user_char_limit': 'Profile Budget',
'memory.provider': 'Memory Provider',
'context.engine': 'Context Engine',
'compression.enabled': 'Auto-Compression',
'compression.threshold': 'Compression Threshold',
'compression.target_ratio': 'Compression Target',
'compression.protect_last_n': 'Protected Recent Messages',
'agent.api_max_retries': 'API Retries',
'agent.service_tier': 'Service Tier',
'agent.tool_use_enforcement': 'Tool-Use Enforcement',
'delegation.model': 'Subagent Model',
'delegation.provider': 'Subagent Provider',
'delegation.max_iterations': 'Subagent Turn Limit',
'delegation.max_concurrent_children': 'Parallel Subagents',
'delegation.child_timeout_seconds': 'Subagent Timeout',
'delegation.reasoning_effort': 'Subagent Reasoning Effort',
'updates.non_interactive_local_changes': 'In-App Update Local Changes'
}
display: {
personality: 'Personality',
showReasoning: 'Reasoning Blocks'
},
agent: {
maxTurns: 'Max Agent Steps',
imageInputMode: 'Image Attachments',
apiMaxRetries: 'API Retries',
serviceTier: 'Service Tier',
toolUseEnforcement: 'Tool-Use Enforcement'
},
terminal: {
cwd: 'Working Directory',
backend: 'Execution Backend',
timeout: 'Command Timeout',
persistentShell: 'Persistent Shell',
envPassthrough: 'Environment Passthrough'
},
fileReadMaxChars: 'File Read Limit',
toolOutput: {
maxBytes: 'Terminal Output Limit',
maxLines: 'File Page Limit',
maxLineLength: 'Line Length Limit'
},
codeExecution: {
mode: 'Code Execution Mode'
},
approvals: {
mode: 'Approval Mode',
timeout: 'Approval Timeout',
mcpReloadConfirm: 'Confirm MCP Reloads'
},
commandAllowlist: 'Command Allowlist',
security: {
redactSecrets: 'Redact Secrets',
allowPrivateUrls: 'Allow Private URLs'
},
browser: {
allowPrivateUrls: 'Browser Private URLs',
autoLocalForPrivateUrls: 'Local Browser For Private URLs'
},
checkpoints: {
enabled: 'File Checkpoints',
maxSnapshots: 'Checkpoint Limit'
},
voice: {
recordKey: 'Voice Shortcut',
maxRecordingSeconds: 'Max Recording Length',
autoTts: 'Read Responses Aloud'
},
stt: {
enabled: 'Speech To Text',
provider: 'Speech-To-Text Provider',
local: {
model: 'Local Transcription Model',
language: 'Transcription Language'
},
elevenlabs: {
modelId: 'ElevenLabs STT Model',
languageCode: 'ElevenLabs Language',
tagAudioEvents: 'Tag Audio Events',
diarize: 'Speaker Diarization'
}
},
tts: {
provider: 'Text-To-Speech Provider',
edge: {
voice: 'Edge Voice'
},
openai: {
model: 'OpenAI TTS Model',
voice: 'OpenAI Voice'
},
elevenlabs: {
voiceId: 'ElevenLabs Voice',
modelId: 'ElevenLabs Model'
}
},
memory: {
memoryEnabled: 'Persistent Memory',
userProfileEnabled: 'User Profile',
memoryCharLimit: 'Memory Budget',
userCharLimit: 'Profile Budget',
provider: 'Memory Provider'
},
context: {
engine: 'Context Engine'
},
compression: {
enabled: 'Auto-Compression',
threshold: 'Compression Threshold',
targetRatio: 'Compression Target',
protectLastN: 'Protected Recent Messages'
},
delegation: {
model: 'Subagent Model',
provider: 'Subagent Provider',
maxIterations: 'Subagent Turn Limit',
maxConcurrentChildren: 'Parallel Subagents',
childTimeoutSeconds: 'Subagent Timeout',
reasoningEffort: 'Subagent Reasoning Effort'
},
updates: {
nonInteractiveLocalChanges: 'In-App Update Local Changes'
}
})
export const FIELD_DESCRIPTIONS: Record<string, string> = {
export const FIELD_DESCRIPTIONS: Record<string, string> = defineFieldCopy({
model: 'Used for new chats unless you pick a different model in the composer.',
model_context_length: "Leave at 0 to use the selected model's detected context window.",
fallback_providers: 'Backup provider:model entries to try if the default model fails.',
'display.personality': 'Default assistant style for new sessions.',
modelContextLength: "Leave at 0 to use the selected model's detected context window.",
fallbackProviders: 'Backup provider:model entries to try if the default model fails.',
display: {
personality: 'Default assistant style for new sessions.',
showReasoning: 'Show reasoning sections when the backend provides them.'
},
timezone: 'Used when Hermes needs local time context. Blank uses the system timezone.',
'display.show_reasoning': 'Show reasoning sections when the backend provides them.',
'agent.image_input_mode': 'Controls how image attachments are sent to the model.',
'terminal.cwd': 'Default project folder for tool and terminal work.',
'code_execution.mode': 'How strictly code execution is scoped to the current project.',
'terminal.persistent_shell': 'Keep shell state between commands when the backend supports it.',
'terminal.env_passthrough': 'Environment variables to pass into tool execution.',
file_read_max_chars: 'Maximum characters Hermes can read from one file request.',
'approvals.mode': 'How Hermes handles commands that need explicit approval.',
'approvals.timeout': 'How long approval prompts wait before timing out.',
'security.redact_secrets': 'Hide detected secrets from model-visible content when possible.',
'checkpoints.enabled': 'Create rollback snapshots before file edits.',
'memory.memory_enabled': 'Save durable memories that can help future sessions.',
'memory.user_profile_enabled': 'Maintain a compact profile of user preferences.',
'context.engine': 'Strategy for managing long conversations near the context limit.',
'compression.enabled': 'Summarize older context when conversations get large.',
'voice.auto_tts': 'Automatically speak assistant responses.',
'stt.enabled': 'Enable local or provider-backed speech transcription.',
'stt.elevenlabs.language_code': 'Optional ISO-639-3 language code. Blank lets ElevenLabs auto-detect.',
'agent.max_turns': 'Upper bound for tool-calling turns before Hermes stops a run.',
'updates.non_interactive_local_changes':
'When Hermes updates itself from the app (no terminal prompt), keep local source edits (stash) or throw them away (discard). Terminal updates always ask.'
}
agent: {
imageInputMode: 'Controls how image attachments are sent to the model.',
maxTurns: 'Upper bound for tool-calling turns before Hermes stops a run.'
},
terminal: {
cwd: 'Default project folder for tool and terminal work.',
persistentShell: 'Keep shell state between commands when the backend supports it.',
envPassthrough: 'Environment variables to pass into tool execution.'
},
codeExecution: {
mode: 'How strictly code execution is scoped to the current project.'
},
fileReadMaxChars: 'Maximum characters Hermes can read from one file request.',
approvals: {
mode: 'How Hermes handles commands that need explicit approval.',
timeout: 'How long approval prompts wait before timing out.'
},
security: {
redactSecrets: 'Hide detected secrets from model-visible content when possible.'
},
checkpoints: {
enabled: 'Create rollback snapshots before file edits.'
},
memory: {
memoryEnabled: 'Save durable memories that can help future sessions.',
userProfileEnabled: 'Maintain a compact profile of user preferences.'
},
context: {
engine: 'Strategy for managing long conversations near the context limit.'
},
compression: {
enabled: 'Summarize older context when conversations get large.'
},
voice: {
autoTts: 'Automatically speak assistant responses.'
},
stt: {
enabled: 'Enable local or provider-backed speech transcription.',
elevenlabs: {
languageCode: 'Optional ISO-639-3 language code. Blank lets ElevenLabs auto-detect.'
}
},
updates: {
nonInteractiveLocalChanges:
'When Hermes updates itself from the app (no terminal prompt), keep local source edits (stash) or throw them away (discard). Terminal updates always ask.'
}
})
// Curated desktop config surface: only fields a user might tune from the app.
export const SECTIONS: DesktopConfigSection[] = [
@@ -2,6 +2,7 @@ import { type ChangeEvent, type KeyboardEvent } from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { translateNow, useI18n } from '@/i18n'
import { ChevronDown, ExternalLink, Loader2, Save } from '@/lib/icons'
import { cn } from '@/lib/utils'
import type { EnvVarInfo } from '@/types/hermes'
@@ -27,7 +28,11 @@ export const friendlyFieldLabel = (key: string, info: EnvVarInfo) =>
.replace(/\b\w/g, c => c.toUpperCase())
export const credentialPlaceholder = (key: string, info: EnvVarInfo, label: string): string =>
isKeyVar(key, info) ? `Paste ${label} key` : /URL$/i.test(key) ? 'https://…' : 'Optional'
isKeyVar(key, info)
? translateNow('settings.credentials.pasteLabelKey', label)
: /URL$/i.test(key)
? 'https://…'
: translateNow('settings.credentials.optional')
// A single credential field: a set key shows as a filled read-only input
// (redacted value) that edits in place on click. Save appears once typed; a set
@@ -43,6 +48,7 @@ export function KeyField({
rowProps: KeyRowProps
varKey: string
}) {
const { t } = useI18n()
const { edits, onClear, onSave, saving, setEdits } = rowProps
const editing = edits[varKey] !== undefined
const draft = edits[varKey] ?? ''
@@ -84,14 +90,14 @@ export function KeyField({
className={cn(CREDENTIAL_CONTROL_CLASS, 'min-w-0 flex-1')}
onChange={update}
onKeyDown={keydown}
placeholder={placeholder ?? 'Paste key'}
placeholder={placeholder ?? t.settings.credentials.pasteKey}
type={editType}
value={draft}
/>
{dirty && (
<Button className="h-8 shrink-0" disabled={busy} onClick={() => void onSave(varKey)} size="sm">
{busy ? <Loader2 className="size-4 animate-spin" /> : <Save />}
{busy ? 'Saving' : 'Save'}
{busy ? t.settings.credentials.saving : t.common.save}
</Button>
)}
</div>
@@ -106,12 +112,12 @@ export function KeyField({
type="button"
variant="text"
>
Remove
{t.settings.credentials.remove}
</Button>
<span className="text-muted-foreground">or</span>
<span className="text-muted-foreground">{t.settings.credentials.or}</span>
</>
)}
<span className="text-muted-foreground">esc to cancel</span>
<span className="text-muted-foreground">{t.settings.credentials.escToCancel}</span>
</div>
)}
</div>
@@ -119,6 +125,8 @@ export function KeyField({
}
function CredentialDocsLink({ href }: { href: string }) {
const { t } = useI18n()
return (
<a
className="inline-flex w-fit items-center gap-1 text-[length:var(--conversation-caption-font-size)] text-(--ui-text-tertiary) underline-offset-4 transition-colors hover:text-foreground hover:underline"
@@ -127,7 +135,7 @@ function CredentialDocsLink({ href }: { href: string }) {
rel="noreferrer"
target="_blank"
>
Get a key
{t.settings.credentials.getKey}
<ExternalLink className="size-3" />
</a>
)
@@ -223,6 +231,7 @@ export function CredentialKeyCard({
/** Provider API key group — collapsible card; description, docs link, and advanced fields expand on click. */
export function ProviderKeyRows({ expanded, group, onExpand, onToggle, rowProps }: ProviderKeyRowsProps) {
const { t } = useI18n()
const docsUrl = group.docsUrl?.trim()
const description = group.description?.trim()
const expandable = Boolean(description || docsUrl || group.advanced.length > 0)
@@ -283,7 +292,7 @@ export function ProviderKeyRows({ expanded, group, onExpand, onToggle, rowProps
>
<KeyField
info={group.primary[1]}
placeholder={`Paste ${group.name} key`}
placeholder={t.settings.credentials.pasteLabelKey(group.name)}
rowProps={rowProps}
varKey={group.primary[0]}
/>
@@ -1,6 +1,7 @@
import { useEffect, useState } from 'react'
import { deleteEnvVar, getEnvVars, revealEnvVar, setEnvVar } from '@/hermes'
import { useI18n } from '@/i18n'
import { type IconComponent } from '@/lib/icons'
import { notify, notifyError } from '@/store/notifications'
import type { EnvVarInfo } from '@/types/hermes'
@@ -41,6 +42,9 @@ export function SettingsCategoryHeading({ count, icon: Icon, title }: CategoryHe
// credential pages (Providers, Keys) share one source of truth and one set of
// mutation handlers instead of duplicating the plumbing.
export function useEnvCredentials(): UseEnvCredentials {
const { t } = useI18n()
const credentials = t.settings.credentials
const toolsets = t.settings.toolsets
const [vars, setVars] = useState<Record<string, EnvVarInfo> | null>(null)
const [edits, setEdits] = useState<Record<string, string>>({})
const [revealed, setRevealed] = useState<Record<string, string>>({})
@@ -67,7 +71,7 @@ export function useEnvCredentials(): UseEnvCredentials {
setVars(next)
}
} catch (err) {
notifyError(err, 'API keys failed to load')
notifyError(err, t.settings.keys.failedLoad)
}
})()
@@ -96,9 +100,9 @@ export function useEnvCredentials(): UseEnvCredentials {
await setEnvVar(key, value)
patchVar(key, { is_set: true, redacted_value: redactedValue(value) })
clearLocalState(key)
notify({ kind: 'success', title: 'Credential saved', message: `${key} updated.` })
notify({ kind: 'success', title: toolsets.savedTitle, message: toolsets.savedMessage(key) })
} catch (err) {
notifyError(err, `Failed to save ${key}`)
notifyError(err, toolsets.failedSave(key))
} finally {
setSaving(null)
}
@@ -111,7 +115,7 @@ export function useEnvCredentials(): UseEnvCredentials {
const trimmed = value.trim()
if (!trimmed) {
return { message: 'Enter a value first.', ok: false }
return { message: credentials.enterValueFirst, ok: false }
}
setSaving(key)
@@ -120,20 +124,20 @@ export function useEnvCredentials(): UseEnvCredentials {
await setEnvVar(key, trimmed)
patchVar(key, { is_set: true, redacted_value: redactedValue(trimmed) })
clearLocalState(key)
notify({ kind: 'success', message: `${key} updated.`, title: 'Credential saved' })
notify({ kind: 'success', message: toolsets.savedMessage(key), title: toolsets.savedTitle })
return { ok: true }
} catch (err) {
notifyError(err, `Failed to save ${key}`)
notifyError(err, toolsets.failedSave(key))
return { message: err instanceof Error ? err.message : 'Could not save credential.', ok: false }
return { message: err instanceof Error ? err.message : credentials.couldNotSave, ok: false }
} finally {
setSaving(null)
}
}
async function handleClear(key: string) {
if (!window.confirm(`Remove ${key} from .env?`)) {
if (!window.confirm(toolsets.removeConfirm(key))) {
return
}
@@ -143,9 +147,9 @@ export function useEnvCredentials(): UseEnvCredentials {
await deleteEnvVar(key)
patchVar(key, { is_set: false, redacted_value: null })
clearLocalState(key)
notify({ kind: 'success', title: 'Credential removed', message: `${key} removed.` })
notify({ kind: 'success', title: toolsets.removedTitle, message: toolsets.removedMessage(key) })
} catch (err) {
notifyError(err, `Failed to remove ${key}`)
notifyError(err, toolsets.failedRemove(key))
} finally {
setSaving(null)
}
@@ -162,7 +166,7 @@ export function useEnvCredentials(): UseEnvCredentials {
const result = await revealEnvVar(key)
setRevealed(c => ({ ...c, [key]: result.value }))
} catch (err) {
notifyError(err, `Failed to reveal ${key}`)
notifyError(err, toolsets.failedReveal(key))
}
}
@@ -9,6 +9,7 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger
} from '@/components/ui/dropdown-menu'
import { useI18n } from '@/i18n'
import { Eye, EyeOff, ExternalLink, Trash2 } from '@/lib/icons'
import { triggerHaptic } from '@/lib/haptics'
import { cn } from '@/lib/utils'
@@ -41,6 +42,8 @@ export function EnvVarActionsMenu({
showReveal = true,
sideOffset = 6
}: EnvVarActionsMenuProps) {
const { t } = useI18n()
const copy = t.settings.envActions
const hasClear = isSet && onClear
const hasReveal = isSet && showReveal && onReveal
const hasDocs = Boolean(docsUrl?.trim())
@@ -50,7 +53,7 @@ export function EnvVarActionsMenu({
<DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
<DropdownMenuContent
align={align}
aria-label={`Actions for ${label}`}
aria-label={copy.actionsFor(label)}
className="w-44"
sideOffset={sideOffset}
>
@@ -63,7 +66,7 @@ export function EnvVarActionsMenu({
}}
>
<ExternalLink className="size-3.5" />
<span>Docs</span>
<span>{copy.docs}</span>
</DropdownMenuItem>
)}
@@ -75,7 +78,7 @@ export function EnvVarActionsMenu({
}}
>
{isRevealed ? <EyeOff className="size-3.5" /> : <Eye className="size-3.5" />}
<span>{isRevealed ? 'Hide value' : 'Reveal value'}</span>
<span>{isRevealed ? copy.hideValue : copy.revealValue}</span>
</DropdownMenuItem>
)}
@@ -86,7 +89,7 @@ export function EnvVarActionsMenu({
}}
>
<Codicon name="edit" size="0.875rem" />
<span>{isSet ? 'Replace' : 'Set'}</span>
<span>{isSet ? copy.replace : copy.set}</span>
</DropdownMenuItem>
{hasClear && (
@@ -101,7 +104,7 @@ export function EnvVarActionsMenu({
variant="destructive"
>
<Trash2 className="size-3.5" />
<span>Clear</span>
<span>{copy.clear}</span>
</DropdownMenuItem>
</>
)}
@@ -115,12 +118,15 @@ interface EnvVarActionsTriggerProps extends Omit<React.ComponentProps<typeof But
}
export function EnvVarActionsTrigger({ className, label, ...props }: EnvVarActionsTriggerProps) {
const { t } = useI18n()
const copy = t.settings.envActions
return (
<Button
aria-label={`Actions for ${label}`}
aria-label={copy.actionsFor(label)}
className={cn('text-muted-foreground hover:text-foreground', className)}
size="icon-sm"
title="Credential actions"
title={copy.credentialActions}
variant="ghost"
{...props}
>
@@ -0,0 +1,56 @@
export interface FieldCopyTree {
[key: string]: string | FieldCopyTree
}
function schemaSegmentToFieldCopySegment(segment: string): string {
return segment.replace(/_([a-z0-9])/g, (_, char: string) => char.toUpperCase())
}
function isFieldCopyTree(value: unknown): value is FieldCopyTree {
return typeof value === 'object' && value !== null && !Array.isArray(value)
}
export function schemaKeyToFieldCopyKey(schemaKey: string): string {
return schemaKey.split('.').map(schemaSegmentToFieldCopySegment).join('.')
}
export function fieldCopyForSchemaKey(copy: Record<string, string>, schemaKey: string): string | undefined {
return copy[schemaKeyToFieldCopyKey(schemaKey)] ?? copy[schemaKey]
}
export function defineFieldCopy(copy: FieldCopyTree): Record<string, string> {
const result: Record<string, string> = {}
const visit = (node: FieldCopyTree, prefix: string[] = []) => {
for (const [key, value] of Object.entries(node)) {
const parts = key.split('.')
if (parts.some(part => part.length === 0)) {
throw new Error(`Invalid field copy key: ${[...prefix, key].join('.')}`)
}
const path = [...prefix, ...parts]
if (typeof value === 'string') {
const flatKey = path.join('.')
if (Object.prototype.hasOwnProperty.call(result, flatKey)) {
throw new Error(`Duplicate field copy key: ${flatKey}`)
}
result[flatKey] = value
continue
}
if (!isFieldCopyTree(value)) {
throw new Error(`Invalid field copy value for key: ${path.join('.')}`)
}
visit(value, path)
}
}
visit(copy)
return result
}
@@ -4,6 +4,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import type { DesktopAuthProvider, DesktopConnectionProbeResult } from '@/global'
import { useI18n } from '@/i18n'
import { AlertCircle, Check, FileText, Globe, Loader2, LogIn, Monitor } from '@/lib/icons'
import { cn } from '@/lib/utils'
import { notify, notifyError } from '@/store/notifications'
@@ -94,6 +95,8 @@ function ScopeChip({ active, label, onSelect }: { active: boolean; label: string
}
export function GatewaySettings() {
const { t } = useI18n()
const g = t.settings.gateway
const [loading, setLoading] = useState(true)
const [saving, setSaving] = useState(false)
const [testing, setTesting] = useState(false)
@@ -144,7 +147,7 @@ export function GatewaySettings() {
setState(config)
})
.catch(err => notifyError(err, 'Gateway settings failed to load'))
.catch(err => notifyError(err, g.failedLoad))
.finally(() => {
if (!cancelled) {
setLoading(false)
@@ -242,8 +245,8 @@ export function GatewaySettings() {
return providers.map(p => p.displayName || p.name).join(' / ')
}
return 'your identity provider'
}, [probe])
return t.boot.failure.identityProvider
}, [probe, t.boot.failure.identityProvider])
// A username/password gateway authenticates through a credential form on the
// gateway's /login page (POST /auth/password-login) rather than an OAuth
@@ -288,11 +291,11 @@ export function GatewaySettings() {
if (state.mode === 'remote' && !canUseRemote) {
notify({
kind: 'warning',
title: 'Remote gateway incomplete',
title: g.incompleteTitle,
message:
authMode === 'oauth'
? 'Enter a remote URL and sign in before switching to remote.'
: 'Enter a remote URL and session token before switching to remote.'
? g.incompleteSignIn
: g.incompleteToken
})
return
@@ -309,11 +312,11 @@ export function GatewaySettings() {
setRemoteToken('')
notify({
kind: 'success',
title: apply ? 'Gateway connection restarting' : 'Gateway settings saved',
message: apply ? 'Hermes Desktop will reconnect using the saved settings.' : 'Saved for the next restart.'
title: apply ? g.restartingTitle : g.savedTitle,
message: apply ? g.restartingMessage : g.savedMessage
})
} catch (err) {
notifyError(err, apply ? 'Could not apply gateway settings' : 'Could not save gateway settings')
notifyError(err, apply ? g.applyFailed : g.saveFailed)
} finally {
setSaving(false)
}
@@ -324,7 +327,7 @@ export function GatewaySettings() {
// refresh the connection status from the saved config once it completes.
const signIn = async () => {
if (!trimmedUrl) {
notify({ kind: 'warning', title: 'Remote gateway incomplete', message: 'Enter a remote URL first.' })
notify({ kind: 'warning', title: g.incompleteTitle, message: g.enterUrlFirst })
return
}
@@ -348,16 +351,16 @@ export function GatewaySettings() {
if (result.connected) {
const refreshed = await window.hermesDesktop.getConnectionConfig(scope)
setState(refreshed)
notify({ kind: 'success', title: 'Signed in', message: `Connected to ${providerLabel}.` })
notify({ kind: 'success', title: g.signedIn, message: g.connectedTo(providerLabel) })
} else {
notify({
kind: 'warning',
title: 'Sign-in incomplete',
message: 'The login window closed before authentication finished.'
title: t.boot.failure.signInIncompleteTitle,
message: t.boot.failure.signInIncompleteMessage
})
}
} catch (err) {
notifyError(err, 'Sign-in failed')
notifyError(err, g.signInFailed)
} finally {
setSigningIn(false)
}
@@ -370,9 +373,9 @@ export function GatewaySettings() {
await window.hermesDesktop.oauthLogoutConnectionConfig(trimmedUrl || undefined)
const refreshed = await window.hermesDesktop.getConnectionConfig(scope)
setState(refreshed)
notify({ kind: 'success', title: 'Signed out', message: 'Cleared the remote gateway session.' })
notify({ kind: 'success', title: g.signedOutTitle, message: g.signedOutMessage })
} catch (err) {
notifyError(err, 'Sign-out failed')
notifyError(err, g.signOutFailed)
} finally {
setSigningIn(false)
}
@@ -382,11 +385,11 @@ export function GatewaySettings() {
if (!canUseRemote) {
notify({
kind: 'warning',
title: 'Remote gateway incomplete',
title: g.incompleteTitle,
message:
authMode === 'oauth'
? 'Enter a remote URL and sign in before testing.'
: 'Enter a remote URL and session token before testing.'
? g.incompleteSignInTest
: g.incompleteTokenTest
})
return
@@ -404,25 +407,25 @@ export function GatewaySettings() {
remoteUrl: trimmedUrl
})
const message = `Connected to ${result.baseUrl}${result.version ? ` · Hermes ${result.version}` : ''}`
const message = g.connectedTo(result.baseUrl, result.version ?? undefined)
setLastTest(message)
notify({ kind: 'success', title: 'Remote gateway reachable', message })
notify({ kind: 'success', title: g.reachableTitle, message })
} catch (err) {
notifyError(err, 'Remote gateway test failed')
notifyError(err, g.testFailed)
} finally {
setTesting(false)
}
}
if (loading) {
return <LoadingState label="Loading gateway settings..." />
return <LoadingState label={g.loading} />
}
if (!window.hermesDesktop?.getConnectionConfig) {
return (
<EmptyState
description="The desktop IPC bridge does not expose gateway settings."
title="Gateway settings unavailable"
description={g.unavailableDesc}
title={g.unavailableTitle}
/>
)
}
@@ -432,23 +435,21 @@ export function GatewaySettings() {
<div className="mb-5">
<div className="flex items-center gap-2 text-[length:var(--conversation-text-font-size)] font-medium">
<Globe className="size-4 text-muted-foreground" />
Gateway Connection
{state.envOverride ? <Pill tone="primary">env override</Pill> : null}
{g.title}
{state.envOverride ? <Pill tone="primary">{g.envOverride}</Pill> : null}
</div>
<p className="mt-2 max-w-2xl text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
Hermes Desktop starts its own local gateway by default. Use a remote gateway when you want this app to control
an already-running Hermes backend on another machine or behind a trusted proxy. Pick a profile below to give it
its own remote host.
{g.intro}
</p>
</div>
{namedProfiles.length > 0 ? (
<div className="mb-5 grid gap-2">
<div className="text-[length:var(--conversation-caption-font-size)] font-medium text-(--ui-text-secondary)">
Applies to
{g.appliesTo}
</div>
<div className="flex flex-wrap gap-1.5">
<ScopeChip active={scope === null} label="All profiles" onSelect={() => setScope(null)} />
<ScopeChip active={scope === null} label={g.allProfiles} onSelect={() => setScope(null)} />
{namedProfiles.map(profile => (
<ScopeChip
active={scope === profile.name}
@@ -459,9 +460,7 @@ export function GatewaySettings() {
))}
</div>
<p className="text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
{scope === null
? 'Default connection for every profile that has no override of its own.'
: `Connection used only when “${scope}” is the active profile. Set it to Local to inherit the default.`}
{scope === null ? g.defaultConnection : g.profileConnection(scope)}
</p>
</div>
) : null}
@@ -470,10 +469,9 @@ export function GatewaySettings() {
<div className="mb-5 flex items-start gap-2 rounded-xl border border-destructive/30 bg-destructive/10 px-3 py-2.5 text-[length:var(--conversation-caption-font-size)] text-destructive">
<AlertCircle className="mt-0.5 size-4 shrink-0" />
<div>
<div className="font-medium">Environment variables are controlling this desktop session.</div>
<div className="font-medium">{g.envOverrideTitle}</div>
<div className="mt-1 leading-5">
Unset <code>HERMES_DESKTOP_REMOTE_URL</code> and <code>HERMES_DESKTOP_REMOTE_TOKEN</code> to use the saved
setting below.
{g.envOverrideDesc}
</div>
</div>
</div>
@@ -482,19 +480,19 @@ export function GatewaySettings() {
<div className="grid gap-3 sm:grid-cols-2">
<ModeCard
active={state.mode === 'local'}
description="Start a private Hermes backend on localhost. This is the default and works offline."
description={g.localDesc}
disabled={state.envOverride}
icon={Monitor}
onSelect={() => setState(current => ({ ...current, mode: 'local' }))}
title="Local gateway"
title={g.localTitle}
/>
<ModeCard
active={state.mode === 'remote'}
description="Connect this desktop shell to a remote Hermes backend. Hosted gateways use OAuth or a username and password; self-hosted ones may use a session token."
description={g.remoteDesc}
disabled={state.envOverride}
icon={Globe}
onSelect={() => setState(current => ({ ...current, mode: 'remote' }))}
title="Remote gateway"
title={g.remoteTitle}
/>
</div>
@@ -509,21 +507,21 @@ export function GatewaySettings() {
value={state.remoteUrl}
/>
}
description="Base URL for the remote dashboard backend. Path prefixes are supported, for example /hermes."
title="Remote URL"
description={g.remoteUrlDesc}
title={g.remoteUrlTitle}
/>
{state.mode === 'remote' && probeStatus === 'probing' ? (
<div className="flex items-center gap-2 py-3 text-[length:var(--conversation-caption-font-size)] text-(--ui-text-tertiary)">
<Loader2 className="size-4 animate-spin" />
Checking how this gateway authenticates
{g.probing}
</div>
) : null}
{state.mode === 'remote' && probeStatus === 'error' ? (
<div className="flex items-start gap-2 py-3 text-[length:var(--conversation-caption-font-size)] text-(--ui-text-tertiary)">
<AlertCircle className="mt-0.5 size-4 shrink-0" />
Could not reach this gateway yet. Check the URL the auth method will appear once it responds.
{g.probeError}
</div>
) : null}
@@ -534,30 +532,30 @@ export function GatewaySettings() {
oauthConnected ? (
<div className="flex items-center gap-2">
<Pill tone="primary">
<Check className="size-3" /> Signed in
<Check className="size-3" /> {g.signedIn}
</Pill>
<Button disabled={signingIn || state.envOverride} onClick={() => void signOut()} variant="outline">
{signingIn ? <Loader2 className="size-4 animate-spin" /> : null}
Sign out
{g.signOut}
</Button>
</div>
) : (
<Button disabled={signingIn || state.envOverride || !trimmedUrl} onClick={() => void signIn()}>
{signingIn ? <Loader2 className="size-4 animate-spin" /> : <LogIn className="size-4" />}
{isPasswordProvider ? 'Sign in' : `Sign in with ${providerLabel}`}
{isPasswordProvider ? g.signIn : g.signInWith(providerLabel)}
</Button>
)
}
description={
oauthConnected
? isPasswordProvider
? 'This gateway uses a username and password. You are signed in; the session refreshes automatically.'
: 'This gateway uses OAuth. You are signed in; the session refreshes automatically.'
? g.authSignedInPassword
: g.authSignedInOauth
: isPasswordProvider
? 'This gateway uses a username and password. Sign in to authorize this desktop app.'
: `This gateway uses OAuth. Sign in with ${providerLabel} to authorize this desktop app.`
? g.authNeedsPassword
: g.authNeedsOauth(providerLabel)
}
title="Authentication"
title={g.authTitle}
/>
) : null}
@@ -571,14 +569,14 @@ export function GatewaySettings() {
disabled={state.envOverride}
onChange={event => setRemoteToken(event.target.value)}
placeholder={
state.remoteTokenSet ? `Existing token ${state.remoteTokenPreview ?? 'saved'}` : 'Paste session token'
state.remoteTokenSet ? g.existingToken(state.remoteTokenPreview ?? g.savedToken) : g.pasteSessionToken
}
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"
description={g.tokenDesc}
title={g.tokenTitle}
/>
) : null}
</div>
@@ -594,14 +592,14 @@ export function GatewaySettings() {
variant="text"
>
{testing ? <Loader2 className="size-4 animate-spin" /> : null}
Test remote
{g.testRemote}
</Button>
<Button disabled={state.envOverride || saving} onClick={() => void save(false)} size="sm" variant="textStrong">
Save for next restart
{g.saveForRestart}
</Button>
<Button disabled={state.envOverride || saving} onClick={() => void save(true)} size="sm">
{saving ? <Loader2 className="size-4 animate-spin" /> : null}
Save and reconnect
{g.saveAndReconnect}
</Button>
</div>
@@ -610,11 +608,11 @@ export function GatewaySettings() {
action={
<Button onClick={() => void window.hermesDesktop?.revealLogs()} size="sm" variant="textStrong">
<FileText className="size-4" />
Open logs
{g.openLogs}
</Button>
}
description="Reveal desktop.log in your file manager — useful when the gateway fails to start."
title="Diagnostics"
description={g.diagnosticsDesc}
title={g.diagnostics}
/>
</div>
</SettingsContent>
@@ -2,9 +2,80 @@ import { describe, expect, it } from 'vitest'
import type { HermesConfigRecord } from '@/types/hermes'
import { defineFieldCopy, fieldCopyForSchemaKey, schemaKeyToFieldCopyKey } from './field-copy'
import { getNested, providerGroup, setNested, stripToolsetLabel, toolsetDisplayLabel } from './helpers'
describe('settings helpers', () => {
describe('defineFieldCopy', () => {
it('flattens nested field copy paths', () => {
const copy = defineFieldCopy({
display: {
personality: 'Personality'
},
stt: {
elevenlabs: {
language_code: 'Language'
}
}
})
expect(copy[['display', 'personality'].join('.')]).toBe('Personality')
expect(copy[['stt', 'elevenlabs', 'language_code'].join('.')]).toBe('Language')
})
it('keeps top-level flat field keys', () => {
expect(
defineFieldCopy({
model_context_length: 'Context Window',
file_read_max_chars: 'File Read Limit'
})
).toEqual({
model_context_length: 'Context Window',
file_read_max_chars: 'File Read Limit'
})
})
it('maps schema keys to camelCase translation keys', () => {
expect(schemaKeyToFieldCopyKey('model_context_length')).toBe('modelContextLength')
expect(schemaKeyToFieldCopyKey('display.show_reasoning')).toBe('display.showReasoning')
expect(schemaKeyToFieldCopyKey('tool_output.max_line_length')).toBe('toolOutput.maxLineLength')
expect(schemaKeyToFieldCopyKey('updates.non_interactive_local_changes')).toBe(
'updates.nonInteractiveLocalChanges'
)
})
it('looks up camelCase field copy by schema key with legacy fallback', () => {
const copy = defineFieldCopy({
display: {
showReasoning: 'Reasoning Blocks'
},
file_read_max_chars: 'Legacy File Read Limit',
modelContextLength: 'Context Window',
toolOutput: {
maxLineLength: 'Line Length Limit'
}
})
expect(fieldCopyForSchemaKey(copy, 'model_context_length')).toBe('Context Window')
expect(fieldCopyForSchemaKey(copy, 'display.show_reasoning')).toBe('Reasoning Blocks')
expect(fieldCopyForSchemaKey(copy, 'tool_output.max_line_length')).toBe('Line Length Limit')
expect(fieldCopyForSchemaKey(copy, 'file_read_max_chars')).toBe('Legacy File Read Limit')
})
it('rejects duplicate flattened paths', () => {
const duplicateKey = ['display', 'personality'].join('.')
expect(() =>
defineFieldCopy({
display: {
personality: 'Personality'
},
[duplicateKey]: 'Duplicate'
})
).toThrow('Duplicate field copy key: display.personality')
})
})
it('reads and writes nested config paths', () => {
const config: HermesConfigRecord = { display: { theme: 'mono' } }
const next = setNested(config, 'display.theme', 'slate')
+5 -5
View File
@@ -105,7 +105,7 @@ export function SettingsView({ gateway, onClose, onConfigSaved, onMainModelChang
<OverlayNavItem
active={activeView === 'providers'}
icon={Zap}
label="Providers"
label={t.settings.nav.providers}
onClick={() => setActiveView('providers')}
/>
{activeView === 'providers' && (
@@ -113,14 +113,14 @@ export function SettingsView({ gateway, onClose, onConfigSaved, onMainModelChang
<OverlayNavItem
active={providerView === 'accounts'}
icon={Sparkles}
label="Accounts"
label={t.settings.nav.providerAccounts}
nested
onClick={() => openProviderView('accounts')}
/>
<OverlayNavItem
active={providerView === 'keys'}
icon={KeyRound}
label="API keys"
label={t.settings.nav.providerApiKeys}
nested
onClick={() => openProviderView('keys')}
/>
@@ -143,14 +143,14 @@ export function SettingsView({ gateway, onClose, onConfigSaved, onMainModelChang
<OverlayNavItem
active={keysView === 'tools'}
icon={Wrench}
label="Tools"
label={t.settings.nav.keysTools}
nested
onClick={() => openKeysView('tools')}
/>
<OverlayNavItem
active={keysView === 'settings'}
icon={Settings2}
label="Settings"
label={t.settings.nav.keysSettings}
nested
onClick={() => openKeysView('settings')}
/>
@@ -1,5 +1,6 @@
import { useEffect, useMemo, useState } from 'react'
import { useI18n } from '@/i18n'
import type { EnvVarInfo } from '@/types/hermes'
import { CredentialKeyCard, credentialPlaceholder, credentialRowLabel } from './credential-key-ui'
@@ -27,6 +28,7 @@ const VIEW_CATEGORIES: Record<KeysView, readonly string[]> = {
}
export function KeysSettings({ view }: KeysSettingsProps) {
const { t } = useI18n()
const { rowProps, vars } = useEnvCredentials()
const [openKey, setOpenKey] = useState<null | string>(null)
@@ -51,7 +53,7 @@ export function KeysSettings({ view }: KeysSettingsProps) {
}, [vars])
if (!vars) {
return <LoadingState label="Loading API keys and credentials..." />
return <LoadingState label={t.settings.keys.loading} />
}
const visible = groups.filter(g => g.category === view)
@@ -82,7 +84,7 @@ export function KeysSettings({ view }: KeysSettingsProps) {
{visible.length === 0 && (
<div className="rounded-lg border border-dashed border-(--ui-stroke-tertiary) px-4 py-8 text-center text-[length:var(--conversation-caption-font-size)] text-muted-foreground">
Nothing configured in this category yet.
{t.settings.keys.empty}
</div>
)}
</SettingsContent>
+23 -20
View File
@@ -5,6 +5,7 @@ import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { getHermesConfigRecord, type HermesGateway, saveHermesConfig } from '@/hermes'
import { useI18n } from '@/i18n'
import { Wrench } from '@/lib/icons'
import { cn } from '@/lib/utils'
import { notify, notifyError } from '@/store/notifications'
@@ -43,6 +44,8 @@ const transportLabel = (server: Record<string, unknown>) =>
: 'custom'
export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
const { t } = useI18n()
const m = t.settings.mcp
const activeSessionId = useStore($activeSessionId)
const [config, setConfig] = useState<HermesConfigRecord | null>(null)
const [selected, setSelected] = useState<string | null>(null)
@@ -64,7 +67,7 @@ export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
const first = Object.keys(getServers(next)).sort()[0] ?? null
setSelected(first)
})
.catch(err => notifyError(err, 'MCP config failed to load'))
.catch(err => notifyError(err, m.failedLoad))
return () => void (cancelled = true)
}, [])
@@ -88,14 +91,14 @@ export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
}, [selected, servers])
if (!config) {
return <LoadingState label="Loading MCP servers..." />
return <LoadingState label={m.loading} />
}
const saveServer = async () => {
const nextName = name.trim()
if (!nextName) {
notify({ kind: 'error', title: 'Name required', message: 'Give this MCP server a config key.' })
notify({ kind: 'error', title: m.nameRequiredTitle, message: m.nameRequiredMessage })
return
}
@@ -106,12 +109,12 @@ export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
const raw = JSON.parse(body)
if (!raw || typeof raw !== 'object' || Array.isArray(raw)) {
throw new Error('Server config must be a JSON object')
throw new Error(m.objectRequired)
}
parsed = raw as Record<string, unknown>
} catch (err) {
notifyError(err, 'Invalid MCP JSON')
notifyError(err, m.invalidJson)
return
}
@@ -132,9 +135,9 @@ export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
setConfig(nextConfig)
setSelected(nextName)
onConfigSaved?.()
notify({ kind: 'success', title: 'MCP server saved', message: `${nextName} applies after MCP reload.` })
notify({ kind: 'success', title: m.savedTitle, message: m.savedMessage(nextName) })
} catch (err) {
notifyError(err, 'Save failed')
notifyError(err, m.saveFailed)
} finally {
setSaving(false)
}
@@ -153,7 +156,7 @@ export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
setSelected(Object.keys(nextServers).sort()[0] ?? null)
onConfigSaved?.()
} catch (err) {
notifyError(err, 'Remove failed')
notifyError(err, m.removeFailed)
} finally {
setSaving(false)
}
@@ -161,7 +164,7 @@ export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
const reloadMcp = async () => {
if (!gateway) {
notify({ kind: 'warning', title: 'Gateway unavailable', message: 'Reconnect the gateway before reloading MCP.' })
notify({ kind: 'warning', title: m.gatewayUnavailableTitle, message: m.gatewayUnavailableMessage })
return
}
@@ -173,9 +176,9 @@ export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
confirm: true,
session_id: activeSessionId ?? undefined
})
notify({ kind: 'success', title: 'MCP tools reloaded', message: 'New tool schemas apply to fresh turns.' })
notify({ kind: 'success', title: m.reloadedTitle, message: m.reloadedMessage })
} catch (err) {
notifyError(err, 'MCP reload failed')
notifyError(err, m.reloadFailed)
} finally {
setReloading(false)
}
@@ -185,17 +188,17 @@ export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
<SettingsContent>
<div className="mb-4 flex items-center justify-end gap-4">
<Button onClick={() => setSelected(null)} size="xs" variant="text">
New server
{m.newServer}
</Button>
<Button disabled={reloading} onClick={() => void reloadMcp()} size="xs" variant="text">
{reloading ? 'Reloading...' : 'Reload MCP'}
{reloading ? m.reloading : m.reload}
</Button>
</div>
<div className="grid min-h-0 gap-6 lg:grid-cols-[16rem_minmax(0,1fr)]">
<div className="min-h-64">
{names.length === 0 ? (
<EmptyState description="Add a stdio or HTTP server to expose MCP tools." title="No MCP servers" />
<EmptyState description={m.emptyDesc} title={m.emptyTitle} />
) : (
<div className="grid gap-0.5">
{names.map(serverName => {
@@ -216,7 +219,7 @@ export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
<div className="truncate text-sm font-medium">{serverName}</div>
<div className="mt-1 flex items-center gap-1.5">
<Pill>{transportLabel(server)}</Pill>
{server.disabled === true && <Pill>disabled</Pill>}
{server.disabled === true && <Pill>{m.disabled}</Pill>}
</div>
</button>
)
@@ -228,14 +231,14 @@ export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
<div className="grid content-start gap-3">
<div className="flex items-center gap-2 text-sm font-medium">
<Wrench className="size-4 text-muted-foreground" />
{selected ? 'Edit server' : 'New server'}
{selected ? m.editServer : m.newServer}
</div>
<label className="grid gap-1.5">
<span className="text-xs text-muted-foreground">Name</span>
<span className="text-xs text-muted-foreground">{m.name}</span>
<Input onChange={event => setName(event.currentTarget.value)} placeholder="filesystem" value={name} />
</label>
<label className="grid gap-1.5">
<span className="text-xs text-muted-foreground">Server JSON</span>
<span className="text-xs text-muted-foreground">{m.serverJson}</span>
<Textarea
className="min-h-80 font-mono text-xs"
onChange={event => setBody(event.currentTarget.value)}
@@ -252,13 +255,13 @@ export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
size="xs"
variant="text"
>
Remove
{m.remove}
</Button>
) : (
<span />
)}
<Button disabled={saving} onClick={() => void saveServer()} size="sm">
{saving ? 'Saving...' : 'Save server'}
{saving ? t.common.saving : m.saveServer}
</Button>
</div>
</div>
@@ -4,6 +4,7 @@ import { Button } from '@/components/ui/button'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { getAuxiliaryModels, getGlobalModelInfo, getGlobalModelOptions, setModelAssignment } from '@/hermes'
import type { AuxiliaryModelsResponse, ModelOptionProvider, StaleAuxAssignment } from '@/hermes'
import { useI18n } from '@/i18n'
import { AlertTriangle, Cpu, Loader2 } from '@/lib/icons'
import { cn } from '@/lib/utils'
@@ -14,43 +15,34 @@ import { ListRow, LoadingState, Pill, SectionHeading } from './primitives'
// hints make the assignments readable; raw task keys (vision, mcp, …) are
// opaque to most users.
interface AuxTaskMeta {
hint: string
key: string
label: string
}
const AUX_TASKS: readonly AuxTaskMeta[] = [
{ key: 'vision', label: 'Vision', hint: 'Image analysis' },
{ key: 'web_extract', label: 'Web extract', hint: 'Page summarization' },
{ key: 'compression', label: 'Compression', hint: 'Context compaction' },
{ key: 'skills_hub', label: 'Skills hub', hint: 'Skill search' },
{ key: 'approval', label: 'Approval', hint: 'Smart auto-approve' },
{ key: 'mcp', label: 'MCP', hint: 'MCP tool routing' },
{ key: 'title_generation', label: 'Title gen', hint: 'Session titles' },
{ key: 'curator', label: 'Curator', hint: 'Skill-usage review' }
{ key: 'vision' },
{ key: 'web_extract' },
{ key: 'compression' },
{ key: 'skills_hub' },
{ key: 'approval' },
{ key: 'mcp' },
{ key: 'title_generation' },
{ key: 'curator' }
]
const NO_PROVIDERS: readonly ModelOptionProvider[] = [{ name: '—', slug: '', models: [] }]
const AUX_TASK_LABELS: Record<string, string> = Object.fromEntries(
AUX_TASKS.map(meta => [meta.key, meta.label])
)
function taskLabel(key: string): string {
return AUX_TASK_LABELS[key] ?? key
}
interface StaleAuxWarningProps {
applying: boolean
onReset: () => void
slots: readonly StaleAuxAssignment[]
taskLabel: (key: string) => string
}
// Shared notice: auxiliary tasks still pinned to a provider that isn't the
// current main. Surfaces the silent credit-burn path (e.g. aux pinned to a
// $0-balance provider after switching main away from it) and offers the
// existing one-click reset rather than auto-clearing legitimate pins.
function StaleAuxWarning({ applying, onReset, slots }: StaleAuxWarningProps) {
function StaleAuxWarning({ applying, onReset, slots, taskLabel }: StaleAuxWarningProps) {
if (!slots.length) {
return null
}
@@ -79,6 +71,8 @@ interface ModelSettingsProps {
}
export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
const { t } = useI18n()
const m = t.settings.model
const [loading, setLoading] = useState(true)
const [error, setError] = useState('')
const [mainModel, setMainModel] = useState<{ model: string; provider: string } | null>(null)
@@ -132,6 +126,8 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
[auxDraft.provider, providers]
)
const auxiliaryTaskLabel = useCallback((key: string) => m.tasks[key]?.label ?? key, [m.tasks])
// Persistent mismatch: any aux slot pinned to a provider different from the
// current main, regardless of whether the user just switched. Catches the
// "I pinned aux months ago and forgot, now it bills a dead provider" case.
@@ -253,19 +249,19 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
}, [mainModel, refresh])
if (loading && !mainModel) {
return <LoadingState label="Loading model configuration..." />
return <LoadingState label={m.loading} />
}
return (
<div className="grid gap-6">
<section>
<p className="mb-3 text-xs text-muted-foreground">
Applies to new sessions. Use the model picker in the composer to hot-swap the active chat.
{m.appliesDesc}
</p>
<div className="flex flex-wrap items-center gap-2">
<Select onValueChange={setSelectedProvider} value={selectedProvider}>
<SelectTrigger className={cn('min-w-40', CONTROL_TEXT)}>
<SelectValue placeholder="Provider" />
<SelectValue placeholder={m.provider} />
</SelectTrigger>
<SelectContent>
{providerOptions.map(provider => (
@@ -277,7 +273,7 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
</Select>
<Select onValueChange={setSelectedModel} value={selectedModel}>
<SelectTrigger className={cn('min-w-60', CONTROL_TEXT)}>
<SelectValue placeholder="Model" />
<SelectValue placeholder={m.model} />
</SelectTrigger>
<SelectContent>
{(selectedProviderModels.length ? selectedProviderModels : []).map(model => (
@@ -293,39 +289,50 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
size="sm"
>
{applying && <Loader2 className="size-3.5 animate-spin" />}
{applying ? 'Applying...' : 'Apply'}
{applying ? m.applying : t.common.apply}
</Button>
</div>
{error && <div className="mt-2 text-xs text-destructive">{error}</div>}
{switchStaleAux.length > 0 && (
<div className="mt-2">
<StaleAuxWarning applying={applying} onReset={() => void resetAuxiliaryModels()} slots={switchStaleAux} />
<StaleAuxWarning
applying={applying}
onReset={() => void resetAuxiliaryModels()}
slots={switchStaleAux}
taskLabel={auxiliaryTaskLabel}
/>
</div>
)}
</section>
<section>
<div className="mb-2.5 flex items-center justify-between">
<SectionHeading icon={Cpu} title="Auxiliary models" />
<SectionHeading icon={Cpu} title={m.auxiliaryTitle} />
<Button
disabled={!mainModel || applying}
onClick={() => void resetAuxiliaryModels()}
size="sm"
variant="textStrong"
>
Reset all to main
{m.resetAllToMain}
</Button>
</div>
<p className="mb-2 text-xs text-muted-foreground">
Helper tasks run on the main model by default. Assign a dedicated model to any task to override.
{m.auxiliaryDesc}
</p>
{switchStaleAux.length === 0 && persistentStaleAux.length > 0 && (
<div className="mb-2.5">
<StaleAuxWarning applying={applying} onReset={() => void resetAuxiliaryModels()} slots={persistentStaleAux} />
<StaleAuxWarning
applying={applying}
onReset={() => void resetAuxiliaryModels()}
slots={persistentStaleAux}
taskLabel={auxiliaryTaskLabel}
/>
</div>
)}
<div className="grid gap-1">
{AUX_TASKS.map(meta => {
const copy = m.tasks[meta.key] ?? { label: meta.key, hint: meta.key }
const current = auxiliary?.tasks.find(entry => entry.task === meta.key)
const isAuto = !current || !current.provider || current.provider === 'auto'
const isEditing = editingAuxTask === meta.key
@@ -341,7 +348,7 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
size="sm"
variant="text"
>
Set to main
{m.setToMain}
</Button>
<Button
disabled={!providers.length || applying}
@@ -349,7 +356,7 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
size="sm"
variant="textStrong"
>
Change
{m.change}
</Button>
</div>
)
@@ -362,7 +369,7 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
value={auxDraft.provider}
>
<SelectTrigger className={cn('min-w-32', CONTROL_TEXT)}>
<SelectValue placeholder="Provider" />
<SelectValue placeholder={m.provider} />
</SelectTrigger>
<SelectContent>
{providerOptions.map(provider => (
@@ -377,7 +384,7 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
value={auxDraft.model}
>
<SelectTrigger className={cn('min-w-48', CONTROL_TEXT)}>
<SelectValue placeholder="Model" />
<SelectValue placeholder={m.model} />
</SelectTrigger>
<SelectContent>
{(auxDraftProviderModels.length ? auxDraftProviderModels : []).map(model => (
@@ -392,10 +399,10 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
onClick={() => void applyAuxiliaryDraft(meta.key)}
size="sm"
>
{applying ? 'Applying...' : 'Apply'}
{applying ? m.applying : t.common.apply}
</Button>
<Button onClick={() => setEditingAuxTask(null)} size="sm" variant="ghost">
Cancel
{t.common.cancel}
</Button>
</div>
)
@@ -403,15 +410,15 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
description={
<span className="font-mono text-[0.68rem]">
{isAuto
? 'auto · use main model'
: `${current.provider} · ${current.model || '(provider default)'}`}
? m.autoUseMain
: `${current.provider} · ${current.model || m.providerDefault}`}
</span>
}
key={meta.key}
title={
<span className="flex items-baseline gap-2">
{meta.label}
<Pill>{meta.hint}</Pill>
{copy.label}
<Pill>{copy.hint}</Pill>
</span>
}
/>
@@ -10,6 +10,7 @@ import {
} from '@/components/desktop-onboarding-overlay'
import { Button } from '@/components/ui/button'
import { listOAuthProviders } from '@/hermes'
import { useI18n } from '@/i18n'
import { ChevronDown, KeyRound } from '@/lib/icons'
import { cn } from '@/lib/utils'
import { $desktopOnboarding, startManualProviderOAuth } from '@/store/onboarding'
@@ -85,6 +86,8 @@ function buildProviderKeyGroups(vars: Record<string, EnvVarInfo>): ProviderKeyGr
// that provider's real sign-in flow; the key affordances open the API-key
// catalog below.
function OAuthPicker({ onWantApiKey, providers }: { onWantApiKey: () => void; providers: OAuthProvider[] }) {
const { t } = useI18n()
const p = t.settings.providers
const [showAll, setShowAll] = useState(false)
const ordered = useMemo(() => sortProviders(providers), [providers])
@@ -106,25 +109,24 @@ function OAuthPicker({ onWantApiKey, providers }: { onWantApiKey: () => void; pr
return (
<section className="mb-5 grid gap-2">
<div className="flex flex-wrap items-baseline justify-between gap-x-3">
<SettingsCategoryHeading icon={KeyRound} title="Connect an account" />
<SettingsCategoryHeading icon={KeyRound} title={p.connectAccount} />
<Button
className="h-auto px-0 py-0 text-[length:var(--conversation-caption-font-size)]"
onClick={onWantApiKey}
type="button"
variant="textStrong"
>
Have an API key instead?
{p.haveApiKey}
</Button>
</div>
<p className="-mt-2 mb-1 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
Sign in with a subscription no API key to copy. Hermes runs the browser sign-in for you, right here in the
app.
{p.intro}
</p>
{featured && <FeaturedProviderRow onSelect={select} provider={featured} />}
{connected.length > 0 && (
<>
<p className="mt-1 px-0.5 text-[length:var(--conversation-caption-font-size)] font-medium text-(--ui-text-tertiary)">
Connected
{p.connected}
</p>
{connected.map(p => (
<ProviderRow key={p.id} onSelect={select} provider={p} />
@@ -146,7 +148,7 @@ function OAuthPicker({ onWantApiKey, providers }: { onWantApiKey: () => void; pr
type="button"
variant="text"
>
{showAll ? 'Collapse' : connected.length > 0 ? 'Connect another provider' : 'Other providers'}
{showAll ? p.collapse : connected.length > 0 ? p.connectAnother : p.otherProviders}
<ChevronDown className={cn('size-3.5 transition', showAll && 'rotate-180')} />
</Button>
)}
@@ -155,14 +157,17 @@ function OAuthPicker({ onWantApiKey, providers }: { onWantApiKey: () => void; pr
}
function NoProviderKeys() {
const { t } = useI18n()
return (
<div className="grid min-h-32 place-items-center px-4 py-8 text-center text-[length:var(--conversation-caption-font-size)] text-muted-foreground">
No provider API keys available.
{t.settings.providers.noProviderKeys}
</div>
)
}
export function ProvidersSettings({ onViewChange, view }: ProvidersSettingsProps) {
const { t } = useI18n()
const { rowProps, vars } = useEnvCredentials()
const [oauthProviders, setOauthProviders] = useState<OAuthProvider[]>([])
const [openProvider, setOpenProvider] = useState<null | string>(null)
@@ -195,7 +200,7 @@ export function ProvidersSettings({ onViewChange, view }: ProvidersSettingsProps
}, [onboardingActive])
if (!vars) {
return <LoadingState label="Loading providers..." />
return <LoadingState label={t.settings.providers.loading} />
}
const hasOauth = oauthProviders.length > 0
@@ -3,6 +3,7 @@ import { useCallback, useEffect, useState } from 'react'
import { Button } from '@/components/ui/button'
import { Tip } from '@/components/ui/tooltip'
import { deleteSession, listSessions, setSessionArchived } from '@/hermes'
import { useI18n } from '@/i18n'
import { sessionTitle } from '@/lib/chat-runtime'
import { triggerHaptic } from '@/lib/haptics'
import { Archive, ArchiveOff, FolderOpen, Loader2, Trash2 } from '@/lib/icons'
@@ -32,6 +33,8 @@ function workspaceLabel(cwd: null | string | undefined): string {
}
export function SessionsSettings() {
const { t } = useI18n()
const s = t.settings.sessions
const [sessions, setLocalSessions] = useState<SessionInfo[]>([])
const [loading, setLoading] = useState(true)
const [busyId, setBusyId] = useState<string | null>(null)
@@ -43,7 +46,7 @@ export function SessionsSettings() {
const result = await listSessions(ARCHIVED_FETCH_LIMIT, 0, 'only')
setLocalSessions(result.sessions)
} catch (err) {
notifyError(err, 'Could not load archived sessions')
notifyError(err, s.failedLoad)
} finally {
setLoading(false)
}
@@ -62,16 +65,16 @@ export function SessionsSettings() {
// Surface it again in the sidebar without waiting for a full refresh.
setSessions(prev => [{ ...session, archived: false }, ...prev.filter(s => s.id !== session.id)])
triggerHaptic('selection')
notify({ durationMs: 2_000, kind: 'success', message: 'Restored' })
notify({ durationMs: 2_000, kind: 'success', message: s.restored })
} catch (err) {
notifyError(err, 'Unarchive failed')
notifyError(err, s.unarchiveFailed)
} finally {
setBusyId(null)
}
}, [])
}, [s])
const remove = useCallback(async (session: SessionInfo) => {
if (!window.confirm(`Permanently delete "${sessionTitle(session)}"? This cannot be undone.`)) {
if (!window.confirm(s.deleteConfirm(sessionTitle(session)))) {
return
}
@@ -82,11 +85,11 @@ export function SessionsSettings() {
setLocalSessions(prev => prev.filter(s => s.id !== session.id))
triggerHaptic('warning')
} catch (err) {
notifyError(err, 'Delete failed')
notifyError(err, s.deleteFailed)
} finally {
setBusyId(null)
}
}, [])
}, [s])
useDeepLinkHighlight({
elementId: id => `archived-session-${id}`,
@@ -95,7 +98,7 @@ export function SessionsSettings() {
})
if (loading) {
return <LoadingState label="Loading archived sessions…" />
return <LoadingState label={s.loading} />
}
return (
@@ -105,15 +108,14 @@ export function SessionsSettings() {
<SectionHeading
icon={Archive}
meta={sessions.length ? String(sessions.length) : undefined}
title="Archived sessions"
title={s.archivedTitle}
/>
<p className="mb-2 text-[length:var(--conversation-caption-font-size)] text-(--ui-text-tertiary)">
Archived chats are hidden from the sidebar but keep all their messages. Ctrl/-click a chat in the sidebar to
archive it.
{s.archivedIntro}
</p>
{sessions.length === 0 ? (
<EmptyState description="Archive a chat to hide it here." title="Nothing archived" />
<EmptyState description={s.emptyArchivedDesc} title={s.emptyArchivedTitle} />
) : (
<div className="grid gap-1">
{sessions.map(session => {
@@ -133,11 +135,11 @@ export function SessionsSettings() {
variant="textStrong"
>
{busy ? <Loader2 className="size-3.5 animate-spin" /> : <ArchiveOff className="size-3.5" />}
<span>Unarchive</span>
<span>{s.unarchive}</span>
</Button>
<Tip label="Delete permanently">
<Tip label={s.deletePermanently}>
<Button
aria-label="Delete permanently"
aria-label={s.deletePermanently}
className="text-muted-foreground hover:text-destructive"
disabled={busy}
onClick={() => void remove(session)}
@@ -151,7 +153,7 @@ export function SessionsSettings() {
</div>
}
description={session.preview || undefined}
hint={label ? `${label} · ${session.message_count} messages` : `${session.message_count} messages`}
hint={label ? `${label} · ${s.messages(session.message_count)}` : s.messages(session.message_count)}
title={sessionTitle(session)}
/>
</div>
@@ -167,6 +169,8 @@ export function SessionsSettings() {
// builds on Windows used to spawn sessions in the install dir (`win-unpacked`
// / Program Files), which buried any files Hermes wrote there.
function DefaultProjectDirSetting() {
const { t } = useI18n()
const s = t.settings.sessions
const [dir, setDir] = useState<null | string>(null)
const [fallback, setFallback] = useState<string>('')
const [busy, setBusy] = useState(false)
@@ -217,13 +221,13 @@ function DefaultProjectDirSetting() {
const result = await settings.setDefaultProjectDir(picked.dir)
setDir(result.dir)
notify({ durationMs: 2_000, kind: 'success', message: 'Default project directory updated' })
notify({ durationMs: 2_000, kind: 'success', message: s.defaultDirUpdated })
} catch (err) {
notifyError(err, 'Could not update default directory')
notifyError(err, s.updateDirFailed)
} finally {
setBusy(false)
}
}, [])
}, [s])
const clear = useCallback(async () => {
const settings = window.hermesDesktop?.settings
@@ -238,34 +242,34 @@ function DefaultProjectDirSetting() {
await settings.setDefaultProjectDir(null)
setDir(null)
} catch (err) {
notifyError(err, 'Could not clear default directory')
notifyError(err, s.clearDirFailed)
} finally {
setBusy(false)
}
}, [])
}, [s])
return (
<div className="mb-6">
<SectionHeading icon={FolderOpen} title="Default project directory" />
<SectionHeading icon={FolderOpen} title={s.defaultDirTitle} />
<p className="mb-2 text-[length:var(--conversation-caption-font-size)] text-(--ui-text-tertiary)">
New sessions start in this folder unless you pick another. Leave it unset to use your home directory.
{s.defaultDirDesc}
</p>
<ListRow
action={
<div className="flex items-center gap-3">
<Button disabled={busy} onClick={() => void choose()} size="sm" type="button" variant="textStrong">
<FolderOpen className="size-3.5" />
<span>{dir ? 'Change' : 'Choose'}</span>
<span>{dir ? s.change : s.choose}</span>
</Button>
{dir && (
<Button disabled={busy} onClick={() => void clear()} size="sm" type="button" variant="text">
Clear
{s.clear}
</Button>
)}
</div>
}
description={dir || `Defaults to ${fallback || '~/hermes-projects'}.`}
title={dir ? dir : 'Not set'}
description={dir || s.defaultsTo(fallback || '~/hermes-projects')}
title={dir ? dir : s.notSet}
/>
</div>
)
@@ -4,6 +4,7 @@ import { PageLoader } from '@/components/page-loader'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { deleteEnvVar, getToolsetConfig, revealEnvVar, selectToolsetProvider, setEnvVar } from '@/hermes'
import { useI18n } from '@/i18n'
import { Check, Loader2, Save } from '@/lib/icons'
import { cn } from '@/lib/utils'
import { notify, notifyError } from '@/store/notifications'
@@ -35,6 +36,8 @@ interface EnvVarFieldProps {
}
function EnvVarField({ envVar, isSet, onSaved, onCleared }: EnvVarFieldProps) {
const { t } = useI18n()
const copy = t.settings.toolsets
const [editing, setEditing] = useState(false)
const [value, setValue] = useState('')
const [revealed, setRevealed] = useState<string | null>(null)
@@ -52,16 +55,16 @@ function EnvVarField({ envVar, isSet, onSaved, onCleared }: EnvVarFieldProps) {
setEditing(false)
setValue('')
onSaved(envVar.key)
notify({ kind: 'success', title: 'Credential saved', message: `${envVar.key} updated.` })
notify({ kind: 'success', title: copy.savedTitle, message: copy.savedMessage(envVar.key) })
} catch (err) {
notifyError(err, `Failed to save ${envVar.key}`)
notifyError(err, copy.failedSave(envVar.key))
} finally {
setBusy(false)
}
}
async function handleClear() {
if (!window.confirm(`Remove ${envVar.key} from .env?`)) {
if (!window.confirm(copy.removeConfirm(envVar.key))) {
return
}
@@ -71,9 +74,9 @@ function EnvVarField({ envVar, isSet, onSaved, onCleared }: EnvVarFieldProps) {
await deleteEnvVar(envVar.key)
setRevealed(null)
onCleared(envVar.key)
notify({ kind: 'success', title: 'Credential removed', message: `${envVar.key} removed.` })
notify({ kind: 'success', title: copy.removedTitle, message: copy.removedMessage(envVar.key) })
} catch (err) {
notifyError(err, `Failed to remove ${envVar.key}`)
notifyError(err, copy.failedRemove(envVar.key))
} finally {
setBusy(false)
}
@@ -90,7 +93,7 @@ function EnvVarField({ envVar, isSet, onSaved, onCleared }: EnvVarFieldProps) {
const result = await revealEnvVar(envVar.key)
setRevealed(result.value)
} catch (err) {
notifyError(err, `Failed to reveal ${envVar.key}`)
notifyError(err, copy.failedReveal(envVar.key))
}
}
@@ -102,7 +105,7 @@ function EnvVarField({ envVar, isSet, onSaved, onCleared }: EnvVarFieldProps) {
<span className="font-mono text-xs font-medium">{envVar.key}</span>
<Pill tone={isSet ? 'primary' : 'muted'}>
{isSet && <Check className="size-3" />}
{isSet ? 'Set' : 'Not set'}
{isSet ? copy.set : copy.notSet}
</Pill>
</div>
{envVar.prompt && envVar.prompt !== envVar.key && (
@@ -143,10 +146,10 @@ function EnvVarField({ envVar, isSet, onSaved, onCleared }: EnvVarFieldProps) {
/>
<Button disabled={busy || !value} onClick={() => void handleSave()} size="sm">
{busy ? <Loader2 className="size-3.5 animate-spin" /> : <Save />}
Save
{t.common.save}
</Button>
<Button onClick={() => setEditing(false)} size="sm" variant="text">
Cancel
{t.common.cancel}
</Button>
</div>
)}
@@ -155,6 +158,8 @@ function EnvVarField({ envVar, isSet, onSaved, onCleared }: EnvVarFieldProps) {
}
export function ToolsetConfigPanel({ toolset, onConfiguredChange }: ToolsetConfigPanelProps) {
const { t } = useI18n()
const copy = t.settings.toolsets
const [cfg, setCfg] = useState<ToolsetConfig | null>(null)
const [loading, setLoading] = useState(true)
const [selecting, setSelecting] = useState<string | null>(null)
@@ -178,7 +183,7 @@ export function ToolsetConfigPanel({ toolset, onConfiguredChange }: ToolsetConfi
setEnvState(seeded)
} catch (err) {
notifyError(err, 'Tool configuration failed to load')
notifyError(err, copy.failedLoad)
} finally {
setLoading(false)
}
@@ -215,10 +220,10 @@ export function ToolsetConfigPanel({ toolset, onConfiguredChange }: ToolsetConfi
try {
await selectToolsetProvider(toolset, provider.name)
notify({ kind: 'success', title: 'Provider selected', message: `${provider.name} is now active.` })
notify({ kind: 'success', title: copy.selectedTitle, message: copy.selectedMessage(provider.name) })
onConfiguredChange?.()
} catch (err) {
notifyError(err, `Failed to select ${provider.name}`)
notifyError(err, copy.failedSelect(provider.name))
} finally {
setSelecting(null)
}
@@ -235,18 +240,18 @@ export function ToolsetConfigPanel({ toolset, onConfiguredChange }: ToolsetConfi
}
if (!cfg.has_category) {
return 'This toolset has no provider options — enable it and it works with your current setup.'
return copy.noProviderOptions
}
if (providers.length === 0) {
return 'No providers are available for this toolset right now.'
return copy.noProviders
}
return null
}, [cfg, loading, providers.length])
}, [cfg, copy, loading, providers.length])
if (loading) {
return <PageLoader className="min-h-32" label="Loading configuration" />
return <PageLoader className="min-h-32" label={copy.loadingConfig} />
}
if (emptyMessage) {
@@ -276,7 +281,7 @@ export function ToolsetConfigPanel({ toolset, onConfiguredChange }: ToolsetConfi
{configured && (
<Pill tone="primary">
<Check className="size-3" />
Ready
{copy.ready}
</Pill>
)}
</span>
@@ -288,11 +293,11 @@ export function ToolsetConfigPanel({ toolset, onConfiguredChange }: ToolsetConfi
{provider.tag && <p className="text-[0.72rem] text-muted-foreground">{provider.tag}</p>}
{provider.requires_nous_auth && (
<p className="text-[0.72rem] text-muted-foreground">
Included with a Nous subscription sign in to Nous Portal to activate.
{copy.nousIncluded}
</p>
)}
{provider.env_vars.length === 0 ? (
<p className="text-[0.72rem] text-muted-foreground">No API key required.</p>
<p className="text-[0.72rem] text-muted-foreground">{copy.noApiKeyRequired}</p>
) : (
provider.env_vars.map(ev => (
<EnvVarField
@@ -306,8 +311,7 @@ export function ToolsetConfigPanel({ toolset, onConfiguredChange }: ToolsetConfi
)}
{provider.post_setup && (
<p className="text-[0.72rem] text-muted-foreground">
This provider needs an extra setup step ({provider.post_setup}). Run it from the CLI with{' '}
<code className="font-mono">hermes tools</code> for now.
{copy.postSetup(provider.post_setup)}
</p>
)}
</div>
@@ -3,6 +3,7 @@ import { IconLayoutDashboard } from '@tabler/icons-react'
import { StatusDot, type StatusTone } from '@/components/status-dot'
import { Button } from '@/components/ui/button'
import { Tip } from '@/components/ui/tooltip'
import { useI18n } from '@/i18n'
import { Activity, AlertCircle } from '@/lib/icons'
import type { RuntimeReadinessResult } from '@/lib/runtime-readiness'
import { cn } from '@/lib/utils'
@@ -40,23 +41,25 @@ export function GatewayMenuPanel({
onOpenSystem,
statusSnapshot
}: GatewayMenuPanelProps) {
const { t } = useI18n()
const copy = t.shell.gatewayMenu
const gatewayOpen = gatewayState === 'open'
const gatewayConnecting = gatewayState === 'connecting'
const inferenceReady = gatewayOpen && inferenceStatus?.ready === true
const connectionLabel = gatewayOpen
? 'Connected'
? copy.connected
: gatewayConnecting
? 'Connecting'
: prettyState(gatewayState || 'offline')
? copy.connecting
: prettyState(gatewayState || copy.offline)
const inferenceLabel = gatewayOpen
? inferenceStatus?.ready
? 'Inference ready'
? copy.inferenceReady
: inferenceStatus
? 'Inference not ready'
: 'Checking inference'
: 'Disconnected'
? copy.inferenceNotReady
: copy.checkingInference
: copy.disconnected
const platforms = Object.entries(statusSnapshot?.gateway_platforms || {}).sort(([l], [r]) => l.localeCompare(r))
const recentLogs = logLines.slice(-5)
@@ -70,16 +73,16 @@ export function GatewayMenuPanel({
) : (
<AlertCircle className={cn('size-3.5', gatewayOpen ? 'text-amber-600' : 'text-destructive')} />
)}
<span className="font-medium">Gateway</span>
<span className="font-medium">{copy.gateway}</span>
<span className="flex items-center gap-1.5 text-xs text-muted-foreground">
<StatusDot tone={inferenceReady ? 'good' : gatewayOpen ? 'warn' : 'bad'} />
{inferenceLabel}
</span>
</div>
<div className="flex items-center">
<Tip label="Open system panel">
<Tip label={copy.openSystem}>
<Button
aria-label="Open system panel"
aria-label={copy.openSystem}
className="text-muted-foreground hover:text-foreground"
onClick={onOpenSystem}
size="icon-sm"
@@ -92,13 +95,13 @@ export function GatewayMenuPanel({
</div>
<div className="border-t border-border/50 px-3 py-2 text-xs text-muted-foreground">
<div>Connection: {connectionLabel}</div>
<div>{copy.connection(connectionLabel)}</div>
{inferenceStatus?.reason && <div className="mt-1 line-clamp-3">{inferenceStatus.reason}</div>}
</div>
{recentLogs.length > 0 && (
<div className="border-t border-border/50 px-3 py-2">
<SectionLabel>Recent activity</SectionLabel>
<SectionLabel>{copy.recentActivity}</SectionLabel>
<ul className="mt-1.5 space-y-0.5">
{recentLogs.map((line, index) => (
<Tip key={`${index}:${line}`} label={line.trim()}>
@@ -113,14 +116,14 @@ export function GatewayMenuPanel({
onClick={onOpenSystem}
type="button"
>
View all logs
{copy.viewAllLogs}
</button>
</div>
)}
{platforms.length > 0 && (
<div className="border-t border-border/50 px-3 py-2">
<SectionLabel>Messaging platforms</SectionLabel>
<SectionLabel>{copy.messagingPlatforms}</SectionLabel>
<ul className="mt-1.5 space-y-1">
{platforms.map(([name, platform]) => (
<li className="flex items-center justify-between gap-2 text-xs" key={name}>
@@ -16,6 +16,7 @@ import {
Zap,
ZapFilled
} from '@/lib/icons'
import { useI18n } from '@/i18n'
import { formatModelStatusLabel } from '@/lib/model-status-label'
import type { RuntimeReadinessResult } from '@/lib/runtime-readiness'
import { contextBarLabel, LiveDuration, usageContextLabel } from '@/lib/statusbar'
@@ -78,6 +79,8 @@ export function useStatusbarItems({
statusSnapshot,
toggleCommandCenter
}: StatusbarItemsOptions) {
const { t } = useI18n()
const copy = t.shell.statusbar
const activeSessionId = useStore($activeSessionId)
const yoloActive = useStore($yoloActive)
const busy = useStore($busy)
@@ -160,13 +163,13 @@ export function useStatusbarItems({
const gatewayDetail = gatewayOpen
? inferenceStatus?.ready
? 'ready'
? copy.gatewayReady
: inferenceStatus
? 'needs setup'
: 'checking'
? copy.gatewayNeedsSetup
: copy.gatewayChecking
: gatewayConnecting
? 'connecting'
: 'offline'
? copy.gatewayConnecting
: copy.gatewayOffline
const gatewayClassName = inferenceReady
? undefined
@@ -179,21 +182,21 @@ export function useStatusbarItems({
const sha = updateStatus?.currentSha?.slice(0, 7) ?? null
const behind = updateStatus?.behind ?? 0
const applying = updateApply.applying || updateApply.stage === 'restart'
const base = appVersion ? `v${appVersion}` : (sha ?? 'unknown')
const base = appVersion ? `v${appVersion}` : (sha ?? copy.unknown)
const behindHint = !applying && behind > 0 ? ` (+${behind})` : ''
const label = applying
? updateApply.stage === 'restart'
? `${base} · restart`
: `${base} · update`
? `${base} · ${copy.restart}`
: `${base} · ${copy.update}`
: `${base}${behindHint}`
const tooltip = [
applying ? updateApply.message || 'Update in progress' : null,
!applying && behind > 0 && `${behind} commit${behind === 1 ? '' : 's'} behind ${updateStatus?.branch ?? '…'}`,
appVersion && `Hermes Desktop v${appVersion}`,
sha && `commit ${sha}`,
updateStatus?.branch && `branch ${updateStatus.branch}`
applying ? updateApply.message || copy.updateInProgress : null,
!applying && behind > 0 && copy.commitsBehind(behind, updateStatus?.branch ?? '...'),
appVersion && copy.desktopVersion(appVersion),
sha && copy.commit(sha),
updateStatus?.branch && copy.branch(updateStatus.branch)
]
.filter(Boolean)
.join(' · ')
@@ -211,6 +214,7 @@ export function useStatusbarItems({
}
}, [
desktopVersion?.appVersion,
copy,
updateApply.applying,
updateApply.message,
updateApply.stage,
@@ -226,7 +230,7 @@ export function useStatusbarItems({
icon: <Command className="size-3.5" />,
id: 'command-center',
onSelect: toggleCommandCenter,
title: commandCenterOpen ? 'Close Command Center' : 'Open Command Center',
title: commandCenterOpen ? copy.closeCommandCenter : copy.openCommandCenter,
variant: 'action'
},
{
@@ -234,10 +238,10 @@ export function useStatusbarItems({
detail: gatewayDetail,
icon: inferenceReady ? <Activity className="size-3" /> : <AlertCircle className="size-3" />,
id: 'gateway-health',
label: 'Gateway',
label: copy.gateway,
menuClassName: 'w-72',
menuContent: gatewayMenuContent,
title: inferenceStatus?.reason || 'Hermes inference gateway status',
title: inferenceStatus?.reason || copy.gatewayTitle,
variant: 'menu'
},
{
@@ -247,11 +251,11 @@ export function useStatusbarItems({
),
detail:
subagentsRunning > 0
? `${subagentsRunning} subagent${subagentsRunning === 1 ? '' : 's'}`
? copy.subagents(subagentsRunning)
: bgFailed > 0
? `${bgFailed} failed`
? copy.failed(bgFailed)
: bgRunning > 0
? `${bgRunning} running`
? copy.running(bgRunning)
: undefined,
icon:
bgFailed > 0 ? (
@@ -262,16 +266,16 @@ export function useStatusbarItems({
<Sparkles className="size-3" />
),
id: 'agents',
label: 'Agents',
label: copy.agents,
onSelect: openAgents,
title: agentsOpen ? 'Close agents' : 'Open agents',
title: agentsOpen ? copy.closeAgents : copy.openAgents,
variant: 'action'
},
{
icon: <Clock className="size-3" />,
id: 'cron',
label: 'Cron',
title: 'Open cron jobs',
label: copy.cron,
title: copy.openCron,
to: CRON_ROUTE,
variant: 'action'
}
@@ -281,6 +285,7 @@ export function useStatusbarItems({
bgFailed,
bgRunning,
commandCenterOpen,
copy,
gatewayMenuContent,
gatewayClassName,
gatewayDetail,
@@ -299,8 +304,8 @@ export function useStatusbarItems({
hidden: !busy || !turnStartedAt,
icon: <Loader2 className="size-3 animate-spin" />,
id: 'running-timer',
label: 'Running',
title: 'Current turn elapsed',
label: copy.turnRunning,
title: copy.currentTurnElapsed,
variant: 'text'
},
{
@@ -308,15 +313,15 @@ export function useStatusbarItems({
hidden: !contextUsage,
id: 'context-usage',
label: contextUsage,
title: 'Context usage',
title: copy.contextUsage,
variant: 'text'
},
{
detail: <LiveDuration since={sessionStartedAt} />,
hidden: !sessionStartedAt,
id: 'session-timer',
label: 'Session',
title: 'Runtime session elapsed',
label: copy.session,
title: copy.runtimeSessionElapsed,
variant: 'text'
},
{
@@ -329,9 +334,7 @@ export function useStatusbarItems({
),
id: 'yolo',
onSelect: () => void toggleYolo(),
title: yoloActive
? 'YOLO on — auto-approving dangerous commands. Click to turn off.'
: 'YOLO off — click to auto-approve dangerous commands.',
title: yoloActive ? copy.yoloOn : copy.yoloOff,
variant: 'action'
},
{
@@ -352,12 +355,16 @@ export function useStatusbarItems({
menuAlign: 'end' as const,
menuClassName: 'w-64',
menuContent: modelMenuContent,
title: currentProvider ? `Model · ${currentProvider}: ${currentModel || 'none'}` : 'Switch model',
title: currentProvider
? copy.modelTitle(currentProvider, currentModel || copy.modelNone)
: copy.switchModel,
variant: 'menu' as const
}
: {
onSelect: () => setModelPickerOpen(true),
title: currentProvider ? `${currentProvider} · ${currentModel || 'no model'}` : 'Open model picker',
title: currentProvider
? copy.providerModelTitle(currentProvider, currentModel || copy.noModel)
: copy.openModelPicker,
variant: 'action' as const
})
},
@@ -367,6 +374,7 @@ export function useStatusbarItems({
busy,
contextBar,
contextUsage,
copy,
currentFastMode,
currentModel,
currentProvider,
@@ -11,6 +11,7 @@ import {
DropdownMenuSubContent
} from '@/components/ui/dropdown-menu'
import { Switch } from '@/components/ui/switch'
import { useI18n } from '@/i18n'
import { notifyError } from '@/store/notifications'
import {
$activeSessionId,
@@ -22,11 +23,11 @@ import {
// Hermes' real reasoning levels (see VALID_REASONING_EFFORTS); `none` is owned
// by the Thinking toggle, not the radio.
const EFFORT_OPTIONS = [
{ value: 'minimal', label: 'Minimal' },
{ value: 'low', label: 'Low' },
{ value: 'medium', label: 'Medium' },
{ value: 'high', label: 'High' },
{ value: 'xhigh', label: 'Max' }
{ value: 'minimal', labelKey: 'minimal' },
{ value: 'low', labelKey: 'low' },
{ value: 'medium', labelKey: 'medium' },
{ value: 'high', labelKey: 'high' },
{ value: 'xhigh', labelKey: 'max' }
] as const
/** How "fast" is achieved for a given model two different mechanisms:
@@ -97,6 +98,8 @@ export function ModelEditSubmenu({
reasoning,
requestGateway
}: ModelEditSubmenuProps) {
const { t } = useI18n()
const copy = t.shell.modelOptions
// Reactive session state comes straight from the stores rather than being
// drilled through the panel, so editing it re-renders only this submenu.
const activeSessionId = useStore($activeSessionId)
@@ -133,7 +136,7 @@ export function ModelEditSubmenu({
})
} catch (err) {
setCurrentReasoningEffort(rollback)
notifyError(err, 'Model option update failed')
notifyError(err, copy.updateFailed)
}
}
@@ -163,7 +166,7 @@ export function ModelEditSubmenu({
})
} catch (err) {
setCurrentFastMode(!enabled)
notifyError(err, 'Fast mode update failed')
notifyError(err, copy.fastFailed)
}
})()
}
@@ -175,13 +178,13 @@ export function ModelEditSubmenu({
return (
<DropdownMenuSubContent className="w-52 p-0" sideOffset={4}>
{!hasFast && !reasoning ? (
<div className="px-2.5 py-3 text-xs text-(--ui-text-tertiary)">No options for this model</div>
<div className="px-2.5 py-3 text-xs text-(--ui-text-tertiary)">{copy.noOptions}</div>
) : (
<>
<DropdownMenuLabel className={dropdownMenuSectionLabel}>Options</DropdownMenuLabel>
<DropdownMenuLabel className={dropdownMenuSectionLabel}>{copy.options}</DropdownMenuLabel>
{reasoning ? (
<DropdownMenuItem className={dropdownMenuRow} onSelect={event => event.preventDefault()}>
Thinking
{copy.thinking}
<Switch
checked={thinkingOn}
className="ml-auto"
@@ -194,14 +197,14 @@ export function ModelEditSubmenu({
) : null}
{hasFast ? (
<DropdownMenuItem className={dropdownMenuRow} onSelect={event => event.preventDefault()}>
Fast
{copy.fast}
<Switch checked={fastOn} className="ml-auto" onCheckedChange={toggleFast} size="xs" />
</DropdownMenuItem>
) : null}
{reasoning ? (
<>
<DropdownMenuSeparator className="mx-0" />
<DropdownMenuLabel className={dropdownMenuSectionLabel}>Effort</DropdownMenuLabel>
<DropdownMenuLabel className={dropdownMenuSectionLabel}>{copy.effort}</DropdownMenuLabel>
<DropdownMenuRadioGroup
onValueChange={value => void patchReasoning(value, currentReasoningEffort)}
value={effort}
@@ -213,7 +216,7 @@ export function ModelEditSubmenu({
onSelect={event => event.preventDefault()}
value={option.value}
>
{option.label}
{copy[option.labelKey]}
</DropdownMenuRadioItem>
))}
</DropdownMenuRadioGroup>
@@ -17,6 +17,7 @@ import {
import { Skeleton } from '@/components/ui/skeleton'
import type { HermesGateway } from '@/hermes'
import { getGlobalModelOptions } from '@/hermes'
import { useI18n } from '@/i18n'
import { displayModelName, modelDisplayParts, reasoningEffortLabel } from '@/lib/model-status-label'
import { cn } from '@/lib/utils'
import {
@@ -50,6 +51,8 @@ interface ProviderGroup {
}
export function ModelMenuPanel({ gateway, onSelectModel, requestGateway }: ModelMenuPanelProps) {
const { t } = useI18n()
const copy = t.shell.modelMenu
const [search, setSearch] = useState('')
// Reactive session state is read from the stores here (not drilled in), so
// toggling effort/fast/model re-renders this panel in place without forcing
@@ -95,9 +98,9 @@ export function ModelMenuPanel({ gateway, onSelectModel, requestGateway }: Model
return (
<>
<DropdownMenuSearch
aria-label="Search models"
aria-label={copy.search}
onValueChange={setSearch}
placeholder="Search models"
placeholder={copy.search}
value={search}
/>
@@ -122,7 +125,7 @@ export function ModelMenuPanel({ gateway, onSelectModel, requestGateway }: Model
</DropdownMenuItem>
) : groups.length === 0 ? (
<DropdownMenuItem className={dropdownMenuRow} disabled>
No models found
{copy.noModels}
</DropdownMenuItem>
) : (
<div className="max-h-80 overflow-y-auto py-0.5">
@@ -158,13 +161,13 @@ export function ModelMenuPanel({ gateway, onSelectModel, requestGateway }: Model
// others show a fast-capability hint.
const meta = isCurrent
? [
fastControl.kind !== 'none' && fastControl.on ? 'Fast' : null,
reasoningEffortLabel(currentReasoningEffort) || 'Med'
fastControl.kind !== 'none' && fastControl.on ? copy.fast : null,
reasoningEffortLabel(currentReasoningEffort) || copy.medium
]
.filter(Boolean)
.join(' ')
: caps?.fast || family.fastId
? 'Fast'
? copy.fast
: ''
// Every row is a hover-Edit submenu trigger. Activating it
@@ -218,7 +221,7 @@ export function ModelMenuPanel({ gateway, onSelectModel, requestGateway }: Model
className={cn(dropdownMenuRow, 'text-(--ui-text-tertiary)')}
onSelect={() => setModelVisibilityOpen(true)}
>
Edit Models
{copy.editModels}
</DropdownMenuItem>
</>
)
@@ -143,7 +143,7 @@ export function TitlebarControls({ leftTools = [], tools = [], onOpenSettings }:
return (
<>
<div
aria-label="Window controls"
aria-label={t.shell.windowControls}
className="fixed left-(--titlebar-controls-left) top-(--titlebar-controls-top) z-70 flex translate-y-0.5 flex-row items-center gap-x-1 pointer-events-auto select-none [-webkit-app-region:no-drag]"
>
{leftToolbarTools
@@ -163,7 +163,7 @@ export function TitlebarControls({ leftTools = [], tools = [], onOpenSettings }:
*/}
{visiblePaneTools.length > 0 && (
<div
aria-label="Pane controls"
aria-label={t.shell.paneControls}
className="fixed top-(--titlebar-controls-top) right-[calc(var(--titlebar-tools-right)+var(--shell-preview-toolbar-gap,0))] z-70 flex flex-row items-center gap-x-1 pointer-events-auto select-none [-webkit-app-region:no-drag]"
>
{visiblePaneTools.map(tool => (
@@ -173,7 +173,7 @@ export function TitlebarControls({ leftTools = [], tools = [], onOpenSettings }:
)}
<div
aria-label="App controls"
aria-label={t.shell.appControls}
className="fixed right-(--titlebar-tools-right) top-(--titlebar-controls-top) z-70 flex flex-row items-center justify-end gap-x-1 pointer-events-auto select-none [-webkit-app-region:no-drag]"
>
{visibleSystemToolsBeforeSettings.map(tool => (
+39 -39
View File
@@ -6,6 +6,7 @@ import { writeClipboardText } from '@/components/ui/copy-button'
import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/components/ui/dialog'
import { ErrorState } from '@/components/ui/error-state'
import type { DesktopUpdateCommit, DesktopUpdateStage, DesktopUpdateStatus } from '@/global'
import { useI18n } from '@/i18n'
import { buildCommitChangelog, type CommitGroup } from '@/lib/commit-changelog'
import { AlertCircle, Check, CheckCircle2, Copy, Loader2, Sparkles, Terminal } from '@/lib/icons'
import { cn } from '@/lib/utils'
@@ -21,17 +22,6 @@ import {
type UpdateApplyState
} from '@/store/updates'
const STAGE_LABELS: Record<DesktopUpdateStage, string> = {
idle: 'Getting ready…',
prepare: 'Getting ready…',
fetch: 'Downloading…',
pull: 'Almost there…',
pydeps: 'Finishing up…',
restart: 'Restarting Hermes…',
manual: 'Update from your terminal',
error: 'Update paused'
}
function totalItems(groups: readonly CommitGroup[]) {
return groups.reduce((sum, g) => sum + g.items.length, 0)
}
@@ -124,9 +114,12 @@ function IdleView({
onRetryCheck: () => void
status: DesktopUpdateStatus | null
}) {
const { t } = useI18n()
const u = t.updates
if (!status && checking) {
return (
<CenteredStatus icon={<Loader2 className="size-6 animate-spin text-primary" />} title="Looking for updates…" />
<CenteredStatus icon={<Loader2 className="size-6 animate-spin text-primary" />} title={u.checking} />
)
}
@@ -135,11 +128,11 @@ function IdleView({
<CenteredStatus
action={
<Button onClick={onRetryCheck} size="sm">
Try again
{u.tryAgain}
</Button>
}
icon={<AlertCircle className="size-6 text-muted-foreground" />}
title="Couldnt check for updates"
title={u.checkFailedTitle}
/>
)
}
@@ -147,9 +140,9 @@ function IdleView({
if (!status.supported) {
return (
<CenteredStatus
body={status.message ?? 'This version of Hermes cant update itself from inside the app.'}
body={status.message ?? u.unsupportedMessage}
icon={<AlertCircle className="size-6 text-muted-foreground" />}
title="Update not available"
title={u.notAvailableTitle}
/>
)
}
@@ -159,12 +152,12 @@ function IdleView({
<CenteredStatus
action={
<Button disabled={checking} onClick={onRetryCheck} size="sm">
Try again
{u.tryAgain}
</Button>
}
body="Check your connection and try again."
body={u.connectionRetry}
icon={<AlertCircle className="size-6 text-muted-foreground" />}
title="Couldnt check for updates"
title={u.checkFailedTitle}
/>
)
}
@@ -172,9 +165,9 @@ function IdleView({
if (behind === 0) {
return (
<CenteredStatus
body="Youre running the latest version."
body={u.latestBody}
icon={<CheckCircle2 className="size-7 text-emerald-600 dark:text-emerald-400" />}
title="Youre all set"
title={u.allSetTitle}
/>
)
}
@@ -190,9 +183,9 @@ function IdleView({
<Sparkles className="size-7" />
</span>
<DialogTitle className="text-center text-xl">New update available</DialogTitle>
<DialogTitle className="text-center text-xl">{u.availableTitle}</DialogTitle>
<DialogDescription className="text-center text-sm">
A new version of Hermes is ready to install.
{u.availableBody}
</DialogDescription>
</div>
@@ -214,20 +207,20 @@ function IdleView({
<div className="grid gap-2">
<Button className="font-semibold" onClick={onInstall} size="lg">
Update now
{u.updateNow}
</Button>
<button
className="text-center text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
onClick={onLater}
type="button"
>
Maybe later
{u.maybeLater}
</button>
</div>
{remaining > 0 && (
<p className="text-center text-xs text-muted-foreground">
+ {remaining} more change{remaining === 1 ? '' : 's'} included.
{u.moreChanges(remaining)}
</p>
)}
</div>
@@ -235,6 +228,8 @@ function IdleView({
}
function ManualView({ command, onDone }: { command: string; onDone: () => void }) {
const { t } = useI18n()
const u = t.updates
const [copied, setCopied] = useState(false)
const handleCopy = () => {
@@ -251,9 +246,9 @@ function ManualView({ command, onDone }: { command: string; onDone: () => void }
<Terminal className="size-7" />
</span>
<DialogTitle className="text-center text-xl">Update from your terminal</DialogTitle>
<DialogTitle className="text-center text-xl">{u.manualTitle}</DialogTitle>
<DialogDescription className="text-center text-sm">
You installed Hermes from the command line, so updates run there too. Paste this into your terminal:
{u.manualBody}
</DialogDescription>
</div>
@@ -270,30 +265,32 @@ function ManualView({ command, onDone }: { command: string; onDone: () => void }
{copied ? (
<>
<Check className="size-3.5 text-emerald-600 dark:text-emerald-400" />
Copied
{u.copied}
</>
) : (
<>
<Copy className="size-3.5" />
Copy
{u.copy}
</>
)}
</span>
</button>
<p className="text-center text-xs text-muted-foreground">
Hermes will pick up the new version next time you launch it.
{u.manualPickedUp}
</p>
<Button className="font-semibold" onClick={onDone} size="lg" variant="outline">
Done
{u.done}
</Button>
</div>
)
}
function ApplyingView({ apply }: { apply: UpdateApplyState }) {
const label = STAGE_LABELS[apply.stage] ?? 'Updating Hermes…'
const { t } = useI18n()
const u = t.updates
const label = u.stages[apply.stage as DesktopUpdateStage] ?? u.stages.idle
const percent =
typeof apply.percent === 'number' && Number.isFinite(apply.percent)
@@ -309,7 +306,7 @@ function ApplyingView({ apply }: { apply: UpdateApplyState }) {
<DialogTitle className="text-center text-xl">{label}</DialogTitle>
<DialogDescription className="text-center text-sm">
The Hermes updater will take over in its own window and reopen Hermes when it&rsquo;s done.
{u.applyingBody}
</DialogDescription>
</div>
@@ -323,29 +320,32 @@ function ApplyingView({ apply }: { apply: UpdateApplyState }) {
/>
</div>
<p className="text-center text-xs text-muted-foreground">Hermes will close to apply the update.</p>
<p className="text-center text-xs text-muted-foreground">{u.applyingClose}</p>
</div>
)
}
function ErrorView({ message, onDismiss, onRetry }: { message: string; onDismiss: () => void; onRetry: () => void }) {
const { t } = useI18n()
const u = t.updates
return (
<ErrorState
className="px-6 pb-6 pt-7 pr-8"
description={
<DialogDescription className="max-w-prose text-center text-sm leading-5 text-muted-foreground">
{message || 'No worries — nothing was lost. You can try again now.'}
{message || u.errorBody}
</DialogDescription>
}
title={
<DialogTitle className="text-center text-xl font-semibold tracking-tight">Update didnt finish</DialogTitle>
<DialogTitle className="text-center text-xl font-semibold tracking-tight">{u.errorTitle}</DialogTitle>
}
>
<Button className="font-semibold" onClick={onRetry} size="lg">
Try again
{u.tryAgain}
</Button>
<Button onClick={onDismiss} variant="text">
Not now
{u.notNow}
</Button>
</ErrorState>
)