{
event.stopPropagation()
diff --git a/apps/desktop/src/lib/katex-memo.ts b/apps/desktop/src/lib/katex-memo.ts
index 2f7b07ffb2b..7143fbff905 100644
--- a/apps/desktop/src/lib/katex-memo.ts
+++ b/apps/desktop/src/lib/katex-memo.ts
@@ -180,9 +180,7 @@ function createMemoizedRehypeKatex(options: KatexMemoOptions = {}): Pluggable {
return () =>
function transform(tree: Root, file: VFile): undefined {
visitParents(tree, 'element', (element, parents) => {
- const classes = Array.isArray(element.properties?.className)
- ? (element.properties.className as string[])
- : []
+ const classes = Array.isArray(element.properties?.className) ? (element.properties.className as string[]) : []
// Match the same class set rehype-katex looks for. `language-math`
// is the markdown ` ```math ` form, `math-inline` is what
@@ -201,12 +199,7 @@ function createMemoizedRehypeKatex(options: KatexMemoOptions = {}): Pluggable {
// For ` ```math ` the scope walks up to the wrapping and
// we treat it as display math. Same logic rehype-katex uses.
- if (
- languageMath &&
- parent &&
- parent.type === 'element' &&
- (parent as Element).tagName === 'pre'
- ) {
+ if (languageMath && parent && parent.type === 'element' && (parent as Element).tagName === 'pre') {
scope = parent as Element
parent = parents[parents.length - 2]
displayMode = true
@@ -253,10 +246,7 @@ function createMemoizedRehypeKatex(options: KatexMemoOptions = {}): Pluggable {
* wrapper. Drop-in for `@streamdown/math`'s `createMathPlugin`.
*/
export function createMemoizedMathPlugin(config: MathPluginConfig = {}) {
- const remarkPlugin: Pluggable = [
- remarkMath,
- { singleDollarTextMath: config.singleDollarTextMath ?? false }
- ]
+ const remarkPlugin: Pluggable = [remarkMath, { singleDollarTextMath: config.singleDollarTextMath ?? false }]
const rehypePlugin = createMemoizedRehypeKatex({ errorColor: config.errorColor })
diff --git a/apps/desktop/src/lib/markdown-preprocess.ts b/apps/desktop/src/lib/markdown-preprocess.ts
index bb85b22b0a2..c4d4637befa 100644
--- a/apps/desktop/src/lib/markdown-preprocess.ts
+++ b/apps/desktop/src/lib/markdown-preprocess.ts
@@ -310,7 +310,9 @@ const LATEX_INLINE_RE = /\\\(([^\n]+?)\\\)/g
const LATEX_DISPLAY_RE = /\\\[([\s\S]+?)\\\]/g
function rewriteLatexBracketDelimiters(text: string): string {
- return text.replace(LATEX_INLINE_RE, (_, body: string) => `$${body}$`).replace(LATEX_DISPLAY_RE, (_, body: string) => `$$${body}$$`)
+ return text
+ .replace(LATEX_INLINE_RE, (_, body: string) => `$${body}$`)
+ .replace(LATEX_DISPLAY_RE, (_, body: string) => `$$${body}$$`)
}
// Escape `$` patterns so they don't get eaten as math delimiters.
@@ -340,14 +342,19 @@ export function preprocessMarkdown(text: string): string {
.split(CODE_FENCE_SPLIT_RE)
.map(part => {
// Fence blocks pass through untouched.
- if (/^(?:```|~~~)/.test(part)) {return part}
+ if (/^(?:```|~~~)/.test(part)) {
+ return part
+ }
// Whitespace-only segments (e.g. the `\n\n` between two adjacent
// fences) must NOT go through stripPreviewTargets — its internal
// .trim() would collapse them to '' and glue the surrounding
// fences together, producing things like ``````math which the
// markdown parser then reads as a single 6-backtick block.
- if (!part.trim()) {return part}
+ if (!part.trim()) {
+ return part
+ }
+
// Preserve leading/trailing whitespace around the prose body so
// that fence-prose-fence sequences keep their blank-line gaps.
// stripPreviewTargets internally calls .trim() on its result for
diff --git a/apps/desktop/src/lib/provider-setup-errors.test.ts b/apps/desktop/src/lib/provider-setup-errors.test.ts
index 62f99e3a2df..e5a9dc65089 100644
--- a/apps/desktop/src/lib/provider-setup-errors.test.ts
+++ b/apps/desktop/src/lib/provider-setup-errors.test.ts
@@ -4,16 +4,16 @@ import { isProviderSetupErrorMessage } from './provider-setup-errors'
describe('isProviderSetupErrorMessage', () => {
it('matches generic missing-provider copy', () => {
- expect(isProviderSetupErrorMessage('No inference provider configured. Run `hermes model` to choose one.')).toBe(true)
+ expect(isProviderSetupErrorMessage('No inference provider configured. Run `hermes model` to choose one.')).toBe(
+ true
+ )
expect(isProviderSetupErrorMessage('No inference provider is configured.')).toBe(true)
expect(isProviderSetupErrorMessage('set an API key (OPENROUTER_API_KEY) in ~/.hermes/.env')).toBe(true)
})
it('does not match non-provider runtime failures', () => {
expect(
- isProviderSetupErrorMessage(
- 'Selected runtime is not available. setup.status reports configured credentials.'
- )
+ isProviderSetupErrorMessage('Selected runtime is not available. setup.status reports configured credentials.')
).toBe(false)
})
diff --git a/apps/desktop/src/lib/todos.ts b/apps/desktop/src/lib/todos.ts
index 01071a3f0e9..56f36b45c27 100644
--- a/apps/desktop/src/lib/todos.ts
+++ b/apps/desktop/src/lib/todos.ts
@@ -16,6 +16,7 @@ function parseArray(value: unknown[]): TodoItem[] {
if (!isRecord(item) || !isStatus(item.status)) {
return []
}
+
const id = String(item.id ?? '').trim()
const content = String(item.content ?? '').trim()
diff --git a/apps/desktop/src/lib/tool-result-summary.ts b/apps/desktop/src/lib/tool-result-summary.ts
index 615473568c3..22af5644452 100644
--- a/apps/desktop/src/lib/tool-result-summary.ts
+++ b/apps/desktop/src/lib/tool-result-summary.ts
@@ -2,6 +2,7 @@
// mode still gets the raw JSON section.
const WRAPPER_KEYS = ['data', 'result', 'output', 'response', 'payload'] as const
+
const PRIORITY_KEYS = [
'title',
'name',
@@ -17,6 +18,7 @@ const PRIORITY_KEYS = [
'summary',
'description'
] as const
+
const ERROR_KEYS = ['error', 'errors', 'failure', 'exception'] as const
const ERROR_MSG_KEYS = ['message', 'reason', 'detail', 'stderr'] as const
const NON_ERROR_TEXT = new Set(['', '0', 'false', 'none', 'null', 'nil', 'ok', 'success', 'n/a', 'na'])
@@ -66,6 +68,7 @@ function clipBlock(value: string, maxChars = 1800, maxLines = 18): string {
if (!t) {
return ''
}
+
const lines = t.split('\n')
let text = lines.slice(0, maxLines).join('\n')
const clipped = lines.length > maxLines || text.length > maxChars
@@ -187,11 +190,13 @@ function formatFieldValue(value: unknown, depth: number): string {
if (!v.length) {
return ''
}
+
const scalars = v.map(summarizeScalar).filter(Boolean)
if (scalars.length === v.length && v.length <= 4) {
return clipInline(scalars.join(', '))
}
+
const first = summarizeListItem(v[0], depth + 1)
return first ? `${pluralize(v.length, 'item')} (${first})` : pluralize(v.length, 'item')
@@ -207,16 +212,21 @@ function formatFieldValue(value: unknown, depth: number): string {
// "Returned N items" / "0 items" / "Returned an empty object" are all
// noise — better to render nothing and let the title carry the signal.
function formatArraySummary(value: unknown[], depth: number): string {
- if (!value.length) return ''
+ if (!value.length) {
+ return ''
+ }
const max = 6
+
const lines = value
.slice(0, max)
.map(item => summarizeListItem(item, depth + 1))
.filter(Boolean)
.map(l => `- ${l}`)
- if (!lines.length) return ''
+ if (!lines.length) {
+ return ''
+ }
if (value.length > max) {
const remaining = value.length - max
@@ -228,7 +238,10 @@ function formatArraySummary(value: unknown[], depth: number): string {
function formatRecordSummary(record: Json, depth: number): string {
const keys = Object.keys(record)
- if (!keys.length) return ''
+
+ if (!keys.length) {
+ return ''
+ }
if (depth <= 2) {
const direct = firstString(record, ['message', 'summary', 'description', 'preview', 'text', 'content'])
@@ -249,6 +262,7 @@ function formatRecordSummary(record: Json, depth: number): string {
if (!v) {
continue
}
+
lines.push(`- ${titleCase(k)}: ${v}`)
if (lines.length >= max) {
@@ -256,7 +270,9 @@ function formatRecordSummary(record: Json, depth: number): string {
}
}
- if (!lines.length) return ''
+ if (!lines.length) {
+ return ''
+ }
if (candidates.length > lines.length) {
const remaining = candidates.length - lines.length
@@ -270,6 +286,7 @@ function formatSummaryValue(value: unknown, depth: number): string {
if (depth > 4) {
return ''
}
+
const v = norm(value)
if (typeof v === 'string') {
@@ -383,11 +400,13 @@ function findNestedError(value: unknown, depth: number, seen: Set): str
if (depth > 5) {
return ''
}
+
const v = norm(value)
if (!v || typeof v !== 'object' || seen.has(v)) {
return ''
}
+
seen.add(v)
if (Array.isArray(v)) {
@@ -408,6 +427,7 @@ function findNestedError(value: unknown, depth: number, seen: Set): str
if (!hasMeaningfulErrorValue(record[k])) {
continue
}
+
const text = valueErrorText(record[k])
if (text) {
diff --git a/apps/desktop/src/store/composer-queue.ts b/apps/desktop/src/store/composer-queue.ts
index d2a3f228ff1..3f231fb7b2a 100644
--- a/apps/desktop/src/store/composer-queue.ts
+++ b/apps/desktop/src/store/composer-queue.ts
@@ -14,7 +14,10 @@ type QueueState = Record
const STORAGE_KEY = 'hermes.desktop.composerQueue.v1'
const load = (): QueueState => {
- if (typeof window === 'undefined') return {}
+ if (typeof window === 'undefined') {
+ return {}
+ }
+
try {
const raw = window.localStorage.getItem(STORAGE_KEY)
const parsed = raw ? JSON.parse(raw) : null
@@ -26,10 +29,16 @@ const load = (): QueueState => {
}
const save = (state: QueueState) => {
- if (typeof window === 'undefined') return
+ if (typeof window === 'undefined') {
+ return
+ }
+
try {
- if (Object.keys(state).length === 0) window.localStorage.removeItem(STORAGE_KEY)
- else window.localStorage.setItem(STORAGE_KEY, JSON.stringify(state))
+ if (Object.keys(state).length === 0) {
+ window.localStorage.removeItem(STORAGE_KEY)
+ } else {
+ window.localStorage.setItem(STORAGE_KEY, JSON.stringify(state))
+ }
} catch {
// best-effort: storage may be unavailable, queue still works in-memory
}
@@ -41,8 +50,11 @@ const writeSession = (sid: string, queue: QueuedPromptEntry[]) => {
const current = $queuedPromptsBySession.get()
const next = { ...current }
- if (queue.length === 0) delete next[sid]
- else next[sid] = queue
+ if (queue.length === 0) {
+ delete next[sid]
+ } else {
+ next[sid] = queue
+ }
$queuedPromptsBySession.set(next)
save(next)
@@ -72,7 +84,9 @@ export const enqueueQueuedPrompt = (
): null | QueuedPromptEntry => {
const sid = sidOf(key)
- if (!sid) return null
+ if (!sid) {
+ return null
+ }
const entry: QueuedPromptEntry = {
id: nextId(),
@@ -89,11 +103,15 @@ export const enqueueQueuedPrompt = (
export const dequeueQueuedPrompt = (key: string | null | undefined): null | QueuedPromptEntry => {
const sid = sidOf(key)
- if (!sid) return null
+ if (!sid) {
+ return null
+ }
const [head, ...rest] = queueFor(sid)
- if (!head) return null
+ if (!head) {
+ return null
+ }
writeSession(sid, rest)
@@ -103,12 +121,16 @@ export const dequeueQueuedPrompt = (key: string | null | undefined): null | Queu
export const removeQueuedPrompt = (key: string | null | undefined, id: string): boolean => {
const sid = sidOf(key)
- if (!sid) return false
+ if (!sid) {
+ return false
+ }
const queue = queueFor(sid)
const next = queue.filter(e => e.id !== id)
- if (next.length === queue.length) return false
+ if (next.length === queue.length) {
+ return false
+ }
writeSession(sid, next)
@@ -122,24 +144,32 @@ export const updateQueuedPrompt = (
): boolean => {
const sid = sidOf(key)
- if (!sid) return false
+ if (!sid) {
+ return false
+ }
const queue = queueFor(sid)
let changed = false
const next = queue.map(entry => {
- if (entry.id !== id) return entry
+ if (entry.id !== id) {
+ return entry
+ }
const attachments = update.attachments ? cloneAttachments(update.attachments) : entry.attachments
- if (entry.text === update.text && !update.attachments) return entry
+ if (entry.text === update.text && !update.attachments) {
+ return entry
+ }
changed = true
return { ...entry, text: update.text, attachments }
})
- if (!changed) return false
+ if (!changed) {
+ return false
+ }
writeSession(sid, next)
@@ -152,7 +182,9 @@ export const updateQueuedPromptText = (key: string | null | undefined, id: strin
export const clearQueuedPrompts = (key: string | null | undefined) => {
const sid = sidOf(key)
- if (!sid || !(sid in $queuedPromptsBySession.get())) return
+ if (!sid || !(sid in $queuedPromptsBySession.get())) {
+ return
+ }
writeSession(sid, [])
}
diff --git a/apps/desktop/src/store/layout.ts b/apps/desktop/src/store/layout.ts
index 74f4c38e679..a01e22961c3 100644
--- a/apps/desktop/src/store/layout.ts
+++ b/apps/desktop/src/store/layout.ts
@@ -1,6 +1,13 @@
import { atom, computed, type ReadableAtom } from 'nanostores'
-import { arraysEqual, insertUniqueId, persistBoolean, persistStringArray, storedBoolean, storedStringArray } from '@/lib/storage'
+import {
+ arraysEqual,
+ insertUniqueId,
+ persistBoolean,
+ persistStringArray,
+ storedBoolean,
+ storedStringArray
+} from '@/lib/storage'
import { $paneStates, ensurePaneRegistered, setPaneOpen, setPaneWidthOverride, togglePane } from './panes'
diff --git a/apps/desktop/src/store/onboarding.ts b/apps/desktop/src/store/onboarding.ts
index ae2b7e7a8cd..642ab13ab1d 100644
--- a/apps/desktop/src/store/onboarding.ts
+++ b/apps/desktop/src/store/onboarding.ts
@@ -164,7 +164,9 @@ async function fetchProviderDefaultModel(
// returned (model.options orders by recency / authenticated state, so
// the just-authenticated provider is usually first anyway).
const lower = preferredSlugs.map(s => s.toLowerCase())
- const matched = providers.find((p: ModelOptionProvider) => lower.includes(String(p.slug).toLowerCase())) ?? providers[0]
+
+ const matched =
+ providers.find((p: ModelOptionProvider) => lower.includes(String(p.slug).toLowerCase())) ?? providers[0]
const models = matched.models ?? []
diff --git a/apps/desktop/src/store/preview.ts b/apps/desktop/src/store/preview.ts
index 461cbc9a14d..3fff6a24086 100644
--- a/apps/desktop/src/store/preview.ts
+++ b/apps/desktop/src/store/preview.ts
@@ -400,6 +400,15 @@ export function closeRightRailTab(tabId: RightRailTabId) {
export const closeActiveRightRailTab = () => closeRightRailTab($rightRailActiveTabId.get())
+/** Dismisses the active preview + every file tab so the rail pane unmounts. */
+export function closeRightRail() {
+ if ($previewTarget.get()) {
+ dismissPreviewTarget()
+ }
+
+ $filePreviewTabs.set([])
+}
+
export function clearSessionPreviewRegistry() {
$sessionPreviewRegistry.set({})
setPreviewTarget(null)
diff --git a/apps/desktop/src/store/subagents.test.ts b/apps/desktop/src/store/subagents.test.ts
index 4d4d079aebe..6dee494e2ef 100644
--- a/apps/desktop/src/store/subagents.test.ts
+++ b/apps/desktop/src/store/subagents.test.ts
@@ -54,7 +54,13 @@ describe('subagent store', () => {
)
upsertSubagent(
's1',
- { status: 'running', subagent_id: 'a1', task_index: 0, tool_name: 'search_files', tool_preview: 'pattern=hermes' },
+ {
+ status: 'running',
+ subagent_id: 'a1',
+ task_index: 0,
+ tool_name: 'search_files',
+ tool_preview: 'pattern=hermes'
+ },
false,
'subagent.tool'
)
diff --git a/apps/desktop/src/store/subagents.ts b/apps/desktop/src/store/subagents.ts
index db01e2db35d..bc94794c0e0 100644
--- a/apps/desktop/src/store/subagents.ts
+++ b/apps/desktop/src/store/subagents.ts
@@ -56,15 +56,24 @@ const asStatus = (v: unknown): SubagentStatus =>
const compact = (text: string, max = PREVIEW_MAX) => {
const line = text.replace(/\s+/g, ' ').trim()
- if (!line) return ''
+
+ if (!line) {
+ return ''
+ }
+
return line.length > max ? `${line.slice(0, max - 1)}…` : line
}
const toolLabel = (name: string) =>
- name.split('_').filter(Boolean).map(p => p[0]!.toUpperCase() + p.slice(1)).join(' ') || name
+ name
+ .split('_')
+ .filter(Boolean)
+ .map(p => p[0]!.toUpperCase() + p.slice(1))
+ .join(' ') || name
const formatTool = (name: string, preview = '') => {
const snippet = compact(preview, TOOL_PREVIEW_MAX)
+
return snippet ? `${toolLabel(name)}("${snippet}")` : toolLabel(name)
}
@@ -90,7 +99,10 @@ const idOf = (p: SubagentPayload) =>
const appendStream = (stream: SubagentStreamEntry[], entry: SubagentStreamEntry) => {
const last = stream.at(-1)
- if (last?.kind === entry.kind && last.text === entry.text && last.isError === entry.isError) return stream
+
+ if (last?.kind === entry.kind && last.text === entry.text && last.isError === entry.isError) {
+ return stream
+ }
return [...stream, entry].slice(-MAX_STREAM)
}
@@ -108,19 +120,29 @@ function streamFromPayload(
for (const tail of asTail(payload.output_tail)) {
const line = tail.tool ? formatTool(tail.tool, tail.preview ?? '') : compact(tail.preview ?? '')
- if (line) out.push({ at, isError: tail.isError, kind: tail.tool ? 'tool' : 'progress', text: line })
+
+ if (line) {
+ out.push({ at, isError: tail.isError, kind: tail.tool ? 'tool' : 'progress', text: line })
+ }
}
- if (tool) out.push({ at, isError: !!payload.error, kind: 'tool', text: formatTool(tool, preview) })
+ if (tool) {
+ out.push({ at, isError: !!payload.error, kind: 'tool', text: formatTool(tool, preview) })
+ }
- if (eventType === 'subagent.progress' && text)
+ if (eventType === 'subagent.progress' && text) {
out.push({ at, isError: !!payload.error, kind: 'progress', text })
+ }
- if (eventType === 'subagent.thinking' && text) out.push({ at, kind: 'thinking', text })
+ if (eventType === 'subagent.thinking' && text) {
+ out.push({ at, kind: 'thinking', text })
+ }
const summary = compact(str(payload.summary) || str(payload.text))
- if (TERMINAL.has(status) && summary)
+
+ if (TERMINAL.has(status) && summary) {
out.push({ at, isError: status === 'failed', kind: 'summary', text: summary })
+ }
return out
}
@@ -158,7 +180,10 @@ function toProgress(payload: SubagentPayload, prev: SubagentProgress | undefined
export function clearSessionSubagents(sid: string) {
const map = $subagentsBySession.get()
- if (!(sid in map)) return
+
+ if (!(sid in map)) {
+ return
+ }
const { [sid]: _drop, ...rest } = map
$subagentsBySession.set(rest)
@@ -167,10 +192,16 @@ export function clearSessionSubagents(sid: string) {
export function pruneDelegateFallbackSubagents(sid: string) {
const map = $subagentsBySession.get()
const list = map[sid]
- if (!list?.length) return
+
+ if (!list?.length) {
+ return
+ }
const next = list.filter(item => !item.id.startsWith('delegate-tool:'))
- if (next.length === list.length) return
+
+ if (next.length === list.length) {
+ return
+ }
$subagentsBySession.set({ ...map, [sid]: next })
}
@@ -180,10 +211,16 @@ export function upsertSubagent(sid: string, payload: SubagentPayload, createIfMi
const list = map[sid] ?? []
const id = idOf(payload)
const idx = list.findIndex(item => item.id === id)
- if (idx < 0 && !createIfMissing) return
+
+ if (idx < 0 && !createIfMissing) {
+ return
+ }
const prev = idx >= 0 ? list[idx] : undefined
- if (prev && TERMINAL.has(prev.status)) return
+
+ if (prev && TERMINAL.has(prev.status)) {
+ return
+ }
const next = toProgress(payload, prev, eventType)
const nextList = idx >= 0 ? list.map(item => (item.id === id ? next : item)) : [...list, next]
@@ -193,17 +230,26 @@ export function upsertSubagent(sid: string, payload: SubagentPayload, createIfMi
export function buildSubagentTree(items: readonly SubagentProgress[]): SubagentNode[] {
const nodes = new Map()
- for (const item of items) nodes.set(item.id, { ...item, children: [] })
+
+ for (const item of items) {
+ nodes.set(item.id, { ...item, children: [] })
+ }
const roots: SubagentNode[] = []
+
for (const node of nodes.values()) {
const parent = node.parentId ? nodes.get(node.parentId) : null
- if (parent) parent.children.push(node)
- else roots.push(node)
+
+ if (parent) {
+ parent.children.push(node)
+ } else {
+ roots.push(node)
+ }
}
const sort = (a: SubagentNode, b: SubagentNode) =>
a.startedAt - b.startedAt || a.taskIndex - b.taskIndex || a.goal.localeCompare(b.goal)
+
const walk = (node: SubagentNode) => node.children.sort(sort).forEach(walk)
roots.sort(sort).forEach(walk)
diff --git a/apps/desktop/src/styles.css b/apps/desktop/src/styles.css
index fb9a8df2c01..33090db769d 100644
--- a/apps/desktop/src/styles.css
+++ b/apps/desktop/src/styles.css
@@ -103,11 +103,11 @@
--theme-neutral-chrome: #f3f3f3;
--theme-neutral-sidebar: #f3f3f3;
--theme-neutral-card: #fcfcfc;
- --theme-mix-chrome: 44%;
- --theme-mix-sidebar: 36%;
+ --theme-mix-chrome: 92%;
+ --theme-mix-sidebar: 100%;
--theme-mix-card: 22%;
--theme-mix-elevated: 28%;
- --theme-mix-bubble: 30%;
+ --theme-mix-bubble: 0%;
--theme-fill-primary-accent-mix: 16%;
--theme-fill-secondary-accent-mix: 11%;
--theme-fill-tertiary-accent-mix: 8%;
@@ -117,6 +117,10 @@
--theme-stroke-secondary-accent-mix: 16%;
--theme-stroke-tertiary-accent-mix: 10%;
--theme-stroke-quaternary-accent-mix: 6%;
+ --theme-row-hover-accent-mix: 4%;
+ --theme-row-active-accent-mix: 8%;
+ --theme-control-hover-accent-mix: 6%;
+ --theme-control-active-accent-mix: 8%;
--ui-base: var(--theme-foreground);
--ui-accent: var(--theme-midground);
@@ -164,6 +168,26 @@
var(--ui-accent) var(--theme-fill-quinary-accent-mix),
color-mix(in srgb, var(--ui-base) 3%, transparent)
);
+ --ui-row-hover-background: color-mix(
+ in srgb,
+ var(--ui-accent) var(--theme-row-hover-accent-mix),
+ color-mix(in srgb, var(--ui-base) 3%, transparent)
+ );
+ --ui-row-active-background: color-mix(
+ in srgb,
+ var(--ui-accent) var(--theme-row-active-accent-mix),
+ color-mix(in srgb, var(--ui-base) 5%, transparent)
+ );
+ --ui-control-hover-background: color-mix(
+ in srgb,
+ var(--ui-accent) var(--theme-control-hover-accent-mix),
+ color-mix(in srgb, var(--ui-base) 4%, transparent)
+ );
+ --ui-control-active-background: color-mix(
+ in srgb,
+ var(--ui-accent) var(--theme-control-active-accent-mix),
+ color-mix(in srgb, var(--ui-base) 5%, transparent)
+ );
--ui-text-primary: color-mix(in srgb, var(--ui-base) 94%, transparent);
--ui-text-secondary: color-mix(in srgb, var(--ui-base) 74%, transparent);
--ui-text-tertiary: color-mix(in srgb, var(--ui-base) 54%, transparent);
@@ -188,17 +212,18 @@
var(--ui-accent) var(--theme-stroke-quaternary-accent-mix),
color-mix(in srgb, var(--ui-base) 3%, transparent)
);
- --glass-sash-hover-border: color-mix(in srgb, var(--ui-accent) 18%, var(--ui-stroke-tertiary));
- --glass-sash-hover-background: color-mix(in srgb, var(--ui-accent) 6%, transparent);
- --glass-surface-background: var(--ui-bg-editor);
- --glass-sidebar-surface-background: var(--ui-bg-sidebar);
- --glass-chat-surface-background: var(--ui-bg-chrome);
- --glass-editor-surface-background: var(--ui-bg-chrome);
- --glass-chat-bubble-background: color-mix(in srgb, var(--theme-bubble-seed) var(--theme-mix-bubble), var(--theme-neutral-card));
- --glass-chat-bubble-opaque-background: var(--ui-bg-editor);
- --glass-inline-code-background: color-mix(in srgb, #141414 5%, transparent);
- --glass-inline-code-border: color-mix(in srgb, #141414 8%, transparent);
- --glass-inline-code-foreground: color-mix(in srgb, #141414 88%, transparent);
+ --ui-sash-hover-border: color-mix(in srgb, var(--ui-accent) 18%, var(--ui-stroke-tertiary));
+ --ui-sash-hover-background: color-mix(in srgb, var(--ui-accent) 6%, transparent);
+ --ui-surface-background: var(--ui-bg-editor);
+ --ui-sidebar-surface-background: var(--ui-bg-sidebar);
+ --ui-chat-surface-background: var(--ui-bg-chrome);
+ --ui-editor-surface-background: var(--ui-bg-chrome);
+ --ui-chat-bubble-background: color-mix(in srgb, var(--theme-bubble-seed) var(--theme-mix-bubble), var(--theme-neutral-card));
+ --ui-chat-bubble-opaque-background: var(--ui-bg-editor);
+ --ui-inline-code-background: color-mix(in srgb, #141414 5%, transparent);
+ --ui-inline-code-border: color-mix(in srgb, #141414 8%, transparent);
+ --ui-inline-code-foreground: color-mix(in srgb, #141414 88%, transparent);
+ --ui-selection-background: color-mix(in srgb, #ffd24a 55%, transparent);
--dt-background: var(--ui-bg-chrome);
--dt-foreground: var(--ui-text-primary);
@@ -217,12 +242,13 @@
--dt-border: var(--ui-stroke-secondary);
--dt-input: var(--ui-stroke-primary);
--dt-ring: var(--ui-stroke-primary);
+ --dt-midground: var(--theme-midground);
--dt-composer-ring: var(--ui-base);
--dt-destructive: #cf2d56;
--dt-destructive-foreground: #ffffff;
--dt-sidebar-bg: var(--ui-bg-sidebar);
--dt-sidebar-border: var(--ui-stroke-secondary);
- --dt-user-bubble: var(--ui-bg-editor);
+ --dt-user-bubble: var(--ui-chat-bubble-background);
--dt-user-bubble-border: var(--ui-stroke-tertiary);
--dt-font-sans: 'Segoe WPC', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
@@ -280,12 +306,12 @@
--sidebar-foreground: var(--dt-foreground);
--sidebar-primary: var(--dt-primary);
--sidebar-primary-foreground: var(--dt-primary-foreground);
- --sidebar-accent: var(--dt-accent);
+ --sidebar-accent: var(--ui-control-active-background);
--sidebar-accent-foreground: var(--dt-accent-foreground);
--sidebar-border: var(--dt-sidebar-border);
--sidebar-ring: var(--dt-ring);
--sidebar-edge-border: color-mix(in srgb, var(--ui-base) 7.5%, transparent);
- --chrome-action-hover: var(--ui-bg-tertiary);
+ --chrome-action-hover: var(--ui-control-hover-background);
--midground: var(--dt-midground);
--background: var(--dt-background);
@@ -298,50 +324,28 @@
}
:root.dark {
- --ui-base: #ffe6cb;
- --ui-accent: #0053fd;
- --ui-accent-secondary: #ffe6cb;
- --ui-warm: #ffe6cb;
+ /* Per-mode mix knobs — overridden inline by `applyTheme()` per skin. */
+ --theme-mix-chrome: 74%;
+ --theme-mix-card: 38%;
+ --theme-mix-elevated: 46%;
+ --theme-mix-bubble: 46%;
+ --theme-neutral-chrome: #0d0d0e;
+ --theme-neutral-sidebar: #0a0a0b;
+ --theme-neutral-card: #161618;
+
+ /* Dark-only accent palette overrides. */
--ui-red: #e75e78;
- --ui-orange: #db704b;
- --ui-yellow: #c08532;
--ui-green: #55a583;
--ui-cyan: #6f9ba6;
- --ui-blue: #0053fd;
- --ui-purple: #9e94d5;
- --ui-bg-chrome: #0d1d3a;
- --ui-bg-sidebar: #0a1833;
- --ui-bg-editor: #101827;
- --ui-bg-elevated: #121d32;
- --ui-bg-input: #131316;
- --dt-background: var(--ui-bg-chrome);
- --dt-foreground: var(--ui-text-primary);
- --dt-card: var(--ui-bg-elevated);
- --dt-card-foreground: var(--ui-text-primary);
- --dt-muted: var(--ui-bg-tertiary);
- --dt-muted-foreground: var(--ui-text-tertiary);
- --dt-popover: color-mix(in srgb, var(--ui-bg-elevated) 96%, transparent);
- --dt-popover-foreground: var(--ui-text-primary);
- --dt-primary: var(--ui-accent);
- --dt-primary-foreground: #0b0b0c;
- --dt-secondary: var(--ui-bg-secondary);
- --dt-secondary-foreground: var(--ui-text-secondary);
- --dt-accent: var(--ui-bg-tertiary);
- --dt-accent-foreground: var(--ui-text-primary);
- --dt-border: var(--ui-stroke-secondary);
- --dt-input: var(--ui-stroke-primary);
- --dt-ring: var(--ui-stroke-primary);
- --dt-composer-ring: var(--ui-base);
- --dt-sidebar-bg: var(--ui-bg-sidebar);
- --dt-sidebar-border: var(--ui-stroke-secondary);
- --dt-user-bubble: var(--ui-bg-elevated);
- --dt-user-bubble-border: var(--ui-stroke-tertiary);
+
--sidebar-edge-border: color-mix(in srgb, var(--ui-base) 12%, transparent);
--composer-ring-strength: 1.3;
--backdrop-invert-mul: 0;
- --glass-inline-code-background: color-mix(in srgb, #ffffff 7%, transparent);
- --glass-inline-code-border: color-mix(in srgb, #ffffff 10%, transparent);
- --glass-inline-code-foreground: color-mix(in srgb, #ffffff 88%, transparent);
+
+ --ui-inline-code-background: color-mix(in srgb, #ffffff 7%, transparent);
+ --ui-inline-code-border: color-mix(in srgb, #ffffff 10%, transparent);
+ --ui-inline-code-foreground: color-mix(in srgb, #ffffff 88%, transparent);
+ --ui-selection-background: color-mix(in srgb, #ffd24a 38%, transparent);
}
* {
@@ -361,7 +365,7 @@
body {
margin: 0;
- background: var(--glass-chat-surface-background);
+ background: var(--ui-chat-surface-background);
color: var(--dt-foreground);
font-family: var(--dt-font-sans);
font-size: 0.8125rem;
@@ -378,9 +382,22 @@
font: inherit;
}
+ :where(
+ a,
+ .underline,
+ [class~='hover:underline'],
+ [class~='focus:underline'],
+ [class~='focus-visible:underline'],
+ [class~='group-hover:underline'],
+ [class~='peer-hover:underline']
+ ) {
+ text-decoration-color: color-mix(in srgb, currentColor 20%, transparent);
+ text-underline-offset: 0.25rem;
+ }
+
*::selection {
- background: var(--dt-midground);
- color: var(--dt-midground-foreground);
+ background: var(--ui-selection-background);
+ color: inherit;
}
}
@@ -742,7 +759,7 @@ canvas {
background: linear-gradient(
to bottom,
transparent,
- color-mix(in srgb, var(--glass-chat-surface-background) 88%, transparent)
+ color-mix(in srgb, var(--ui-chat-surface-background) 88%, transparent)
) !important;
}
@@ -751,12 +768,6 @@ canvas {
box-shadow: var(--shadow-composer) !important;
}
-[data-slot='composer-surface'] > [aria-hidden='true'] {
- background: var(--glass-chat-bubble-background) !important;
- backdrop-filter: blur(0.75rem) saturate(1.08);
- -webkit-backdrop-filter: blur(0.75rem) saturate(1.08);
-}
-
[data-slot='composer-fade'] {
min-height: 2.375rem;
}
@@ -771,7 +782,7 @@ canvas {
}
[data-slot='composer-root']:focus-within [data-slot='composer-surface'] > [aria-hidden='true'] {
- background: var(--glass-chat-bubble-background) !important;
+ background: var(--ui-chat-bubble-background) !important;
}
/* Tool/thinking blocks now live at message-text alignment (no leading
@@ -818,9 +829,9 @@ canvas {
}
[data-slot='aui_assistant-message-content'] .aui-md :not(pre) > code {
- border: 0.0625rem solid var(--glass-inline-code-border);
- background: var(--glass-inline-code-background);
- color: var(--glass-inline-code-foreground);
+ border: 0.0625rem solid var(--ui-inline-code-border);
+ background: var(--ui-inline-code-background);
+ color: var(--ui-inline-code-foreground);
}
[data-slot='aui_assistant-message-content'] .aui-md :where(.aui-shiki, .aui-shiki > pre) {
@@ -843,18 +854,18 @@ canvas {
}
/* Tool / thinking blocks are scaffolding around the model's reply, so we
- fade them slightly. The reading column (prose) stays at full strength;
- scaffolding recedes and lifts back to full opacity on hover/focus so it
- stays legible when the user actually wants to read it. */
-[data-slot='aui_assistant-message-content']
- > :is([data-slot='tool-block'], [data-slot='aui_thinking-disclosure']) {
+ keep them transparent and fade them slightly. The reading column (prose)
+ stays at full strength; scaffolding lifts back to full opacity on
+ hover/focus so it stays legible when the user actually wants to read it. */
+[data-slot='tool-block'],
+[data-slot='aui_thinking-disclosure'] {
background: transparent !important;
- opacity: 0.67;
- transition: opacity 120ms ease-out;
}
-[data-slot='tool-block'] {
- background: transparent !important;
+[data-slot='aui_assistant-message-content']
+ > :is([data-slot='tool-block'], [data-slot='aui_thinking-disclosure']) {
+ opacity: 0.67;
+ transition: opacity 120ms ease-out;
}
[data-slot='aui_assistant-message-content']
@@ -909,10 +920,15 @@ canvas {
min-height: 0;
min-width: 0;
flex-shrink: 0;
+ cursor: pointer;
color: var(--color-muted-foreground);
opacity: 0.5;
}
+[data-slot='aui_msg-actions'] button:disabled {
+ cursor: default;
+}
+
[data-slot='aui_msg-actions'] button:hover {
background: transparent;
color: var(--color-foreground);
diff --git a/apps/desktop/src/themes/context.tsx b/apps/desktop/src/themes/context.tsx
index a198402a95b..4ee3282450f 100644
--- a/apps/desktop/src/themes/context.tsx
+++ b/apps/desktop/src/themes/context.tsx
@@ -148,6 +148,17 @@ function renderedModeFor(colors: DesktopThemeColors, mode: 'light' | 'dark'): 'l
// ─── CSS application ────────────────────────────────────────────────────────
+// Per-mode mix knobs. Light/dark fallbacks live in styles.css `:root` /
+// `:root.dark`; setting them inline keeps active-skin overrides surviving
+// the boot-time paint.
+const mixesFor = (isDark: boolean): Record => ({
+ '--theme-mix-chrome': isDark ? '74%' : '92%',
+ '--theme-mix-sidebar': '100%',
+ '--theme-mix-card': isDark ? '38%' : '22%',
+ '--theme-mix-elevated': isDark ? '46%' : '28%',
+ '--theme-mix-bubble': isDark ? '46%' : '0%'
+})
+
function applyTheme(theme: DesktopTheme, mode: 'light' | 'dark') {
if (typeof document === 'undefined') {
return
@@ -157,95 +168,54 @@ function applyTheme(theme: DesktopTheme, mode: 'light' | 'dark') {
const c = theme.colors
const typo = { ...DEFAULT_TYPOGRAPHY, ...nousTheme.typography, ...theme.typography }
const rendered = renderedModeFor(c, mode)
+ const isDark = rendered === 'dark'
const midground = c.midground ?? c.ring
const skinName = theme.name.endsWith(`-${mode}`) ? theme.name.slice(0, -mode.length - 1) : theme.name
- const neutralChrome = rendered === 'dark' ? '#0d0d0e' : '#f3f3f3'
- const neutralSidebar = rendered === 'dark' ? '#0a0a0b' : '#f3f3f3'
- const neutralCard = rendered === 'dark' ? '#161618' : '#fcfcfc'
- const chromeMix = rendered === 'dark' ? 36 : 44
- const sidebarMix = rendered === 'dark' ? 42 : 36
- const cardMix = rendered === 'dark' ? 38 : 22
- const elevatedMix = rendered === 'dark' ? 46 : 28
- const bubbleMix = rendered === 'dark' ? 48 : 30
root.style.setProperty('color-scheme', rendered)
root.dataset.hermesTheme = skinName
root.dataset.hermesMode = rendered
- root.classList.toggle('dark', rendered === 'dark')
+ root.classList.toggle('dark', isDark)
+
+ // Brand seeds feed every glass + shadcn token via `color-mix()` in styles.css.
+ const seeds: Record = {
+ '--theme-foreground': c.foreground,
+ '--theme-primary': c.primary,
+ '--theme-secondary': c.secondary,
+ '--theme-accent-soft': c.accent,
+ '--theme-midground': midground,
+ '--theme-warm': c.primary,
+ '--theme-background-seed': c.background,
+ '--theme-sidebar-seed': c.sidebarBackground ?? c.background,
+ '--theme-card-seed': c.card,
+ '--theme-elevated-seed': c.popover,
+ '--theme-bubble-seed': c.userBubble ?? c.popover
+ }
+
+ // shadcn/Tailwind tokens that aren't derived from the seed chain.
+ const palette: Record = {
+ '--dt-primary-foreground': c.primaryForeground,
+ '--dt-secondary-foreground': c.secondaryForeground,
+ '--dt-accent-foreground': c.accentForeground,
+ '--dt-border': c.border,
+ '--dt-input': c.input,
+ '--dt-ring': c.ring,
+ '--dt-muted': c.muted,
+ '--dt-midground-foreground': c.midgroundForeground ?? readableOn(midground),
+ '--dt-composer-ring': c.composerRing ?? midground,
+ '--dt-destructive': c.destructive,
+ '--dt-destructive-foreground': c.destructiveForeground,
+ '--dt-sidebar-border': c.sidebarBorder ?? c.border,
+ '--dt-user-bubble-border': c.userBubbleBorder ?? c.border,
+ '--dt-font-sans': typo.fontSans,
+ '--dt-font-mono': typo.fontMono,
+ '--noise-opacity-mul': isDark ? 'calc(0.04 / 0.21)' : 'calc(0.34 / 0.21)'
+ }
+
+ for (const [k, v] of Object.entries({ ...seeds, ...mixesFor(isDark), ...palette })) {
+ root.style.setProperty(k, v)
+ }
- const set = (k: string, v: string) => root.style.setProperty(k, v)
- set('--theme-foreground', c.foreground)
- set('--theme-primary', c.primary)
- set('--theme-secondary', c.secondary)
- set('--theme-accent-soft', c.accent)
- set('--theme-midground', midground)
- set('--theme-warm', c.primary)
- set('--theme-background-seed', c.background)
- set('--theme-sidebar-seed', c.sidebarBackground ?? c.background)
- set('--theme-card-seed', c.card)
- set('--theme-elevated-seed', c.popover)
- set('--theme-bubble-seed', c.userBubble ?? c.popover)
- set('--theme-neutral-chrome', neutralChrome)
- set('--theme-neutral-sidebar', neutralSidebar)
- set('--theme-neutral-card', neutralCard)
- set('--theme-mix-chrome', `${chromeMix}%`)
- set('--theme-mix-sidebar', `${sidebarMix}%`)
- set('--theme-mix-card', `${cardMix}%`)
- set('--theme-mix-elevated', `${elevatedMix}%`)
- set('--theme-mix-bubble', `${bubbleMix}%`)
- set('--theme-fill-primary-accent-mix', '16%')
- set('--theme-fill-secondary-accent-mix', '11%')
- set('--theme-fill-tertiary-accent-mix', '8%')
- set('--theme-fill-quaternary-accent-mix', '5%')
- set('--theme-fill-quinary-accent-mix', '3%')
- set('--theme-stroke-primary-accent-mix', '24%')
- set('--theme-stroke-secondary-accent-mix', '16%')
- set('--theme-stroke-tertiary-accent-mix', '10%')
- set('--theme-stroke-quaternary-accent-mix', '6%')
- set('--ui-base', 'var(--theme-foreground)')
- set('--ui-accent', 'var(--theme-midground)')
- set('--ui-accent-secondary', 'var(--theme-primary)')
- set('--ui-warm', 'var(--theme-warm)')
- set('--ui-bg-chrome', 'color-mix(in srgb, var(--theme-background-seed) var(--theme-mix-chrome), var(--theme-neutral-chrome))')
- set('--ui-bg-sidebar', 'color-mix(in srgb, var(--theme-sidebar-seed) var(--theme-mix-sidebar), var(--theme-neutral-sidebar))')
- set('--ui-bg-editor', 'color-mix(in srgb, var(--theme-card-seed) var(--theme-mix-card), var(--theme-neutral-card))')
- set('--ui-bg-elevated', 'color-mix(in srgb, var(--theme-elevated-seed) var(--theme-mix-elevated), var(--theme-neutral-card))')
- set('--ui-bg-input', 'var(--ui-bg-editor)')
- set('--glass-surface-background', 'var(--ui-bg-editor)')
- set('--glass-sidebar-surface-background', 'var(--ui-bg-sidebar)')
- set('--glass-chat-surface-background', 'var(--ui-bg-chrome)')
- set('--glass-editor-surface-background', 'var(--ui-bg-chrome)')
- set('--glass-chat-bubble-background', 'color-mix(in srgb, var(--theme-bubble-seed) var(--theme-mix-bubble), var(--theme-neutral-card))')
- set('--glass-chat-bubble-opaque-background', 'var(--ui-bg-editor)')
- set('--dt-background', 'var(--ui-bg-chrome)')
- set('--dt-foreground', 'var(--ui-text-primary)')
- set('--dt-card', 'var(--ui-bg-editor)')
- set('--dt-card-foreground', 'var(--ui-text-primary)')
- set('--dt-muted', c.muted)
- set('--dt-muted-foreground', 'var(--ui-text-tertiary)')
- set('--dt-popover', 'var(--ui-bg-elevated)')
- set('--dt-popover-foreground', 'var(--ui-text-primary)')
- set('--dt-primary', 'var(--theme-primary)')
- set('--dt-primary-foreground', c.primaryForeground)
- set('--dt-secondary', 'var(--theme-secondary)')
- set('--dt-secondary-foreground', c.secondaryForeground)
- set('--dt-accent', 'var(--theme-accent-soft)')
- set('--dt-accent-foreground', c.accentForeground)
- set('--dt-border', c.border)
- set('--dt-input', c.input)
- set('--dt-ring', c.ring)
- set('--dt-midground', 'var(--theme-midground)')
- set('--dt-midground-foreground', c.midgroundForeground ?? readableOn(midground))
- set('--dt-composer-ring', c.composerRing ?? midground)
- set('--dt-destructive', c.destructive)
- set('--dt-destructive-foreground', c.destructiveForeground)
- set('--dt-sidebar-bg', 'var(--ui-bg-sidebar)')
- set('--dt-sidebar-border', c.sidebarBorder ?? c.border)
- set('--dt-user-bubble', 'var(--glass-chat-bubble-background)')
- set('--dt-user-bubble-border', c.userBubbleBorder ?? c.border)
- set('--dt-font-sans', typo.fontSans)
- set('--dt-font-mono', typo.fontMono)
- set('--noise-opacity-mul', rendered === 'dark' ? 'calc(0.04 / 0.21)' : 'calc(0.34 / 0.21)')
window.hermesDesktop?.setTitleBarTheme?.({
background: c.background,
foreground: c.foreground
diff --git a/website/src/components/UserStoriesCollage/styles.module.css b/website/src/components/UserStoriesCollage/styles.module.css
index bc365e47b20..42b9e6c7f93 100644
--- a/website/src/components/UserStoriesCollage/styles.module.css
+++ b/website/src/components/UserStoriesCollage/styles.module.css
@@ -242,7 +242,11 @@
text-decoration: none;
font-weight: 600;
}
-.footer a:hover { text-decoration: underline; }
+.footer a:hover {
+ text-decoration: underline;
+ text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
+ text-underline-offset: 4px;
+}
.empty {
padding: 3rem 1rem;