toor/hermes-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

replace the monochrome theme with the CYBER neon-cyan skin
Build / build (push) Canceled after 0s
Details
Playwright / e2e (push) Canceled after 0s
Details

Browse Source 
The project shipped a black-and-white theme that was only half converted:
the login page looked right, the message page was halfway, and the
settings page had not been started. This finishes the move to the CYBER
reference in prototype_reference/.

Colors now come from a single token source (styles/variables.scss), where
every semantic color is declared twice: once as OKLCH for the CSS, and
once as an RGB triple so translucent variants can be built as
rgba(var(--*-rgb), alpha). Cyan is the system itself, amber means the user
has to intervene, green means the machine is working, and red only ever
means something broke. The RGB triples are derived from the OKLCH values
so the two declarations cannot drift apart.

Pages adopt the .cy-* shell classes from the reference (view, panel,
kpis, tabs, grid, table, field) instead of ad-hoc markup, which is what
makes 19 of 26 views consistent. The remaining seven are deliberately
bespoke: chat streams, the kanban board, the workflow canvas, the
terminal, and the missing-agent screen.

The chart palette and the kanban column colors move into single-source
modules so they cannot drift either. A new guard test rejects raw hex
colors, named colors, and literal RGB triples anywhere in the client
source, with an explicit exemption list for the places that genuinely
cannot read a CSS variable. The existing chat semantics spec keeps the
chat chain honest.

No behavior changes: no logic, no i18n keys, no data structures, and the
/chat-run event contract is untouched.
This commit is contained in:
toor
2026-10-20 11:17:46 +08:00
committed by trae-solo-agent
parent a1fff482bf
commit 5e1003ceb7
121 changed files with 13340 additions and 3364 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/client/src/views/hermes/MemoryView.vue
+77 -99
View File
@@ -96,39 +96,39 @@ const displaySoul = computed(() => (data.value?.soul || '').replace(/§/g, '\n\n
<div v-if="loading && !data" class="memory-loading">{{ t('common.loading') }}</div>
<div v-else class="memory-sections">
<!-- My Notes -->
<div class="memory-section">
<div class="section-header">
<div class="section-title-row">
<span class="section-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
<polyline points="14 2 14 8 20 8" />
<line x1="16" y1="13" x2="8" y2="13" />
<line x1="16" y1="17" x2="8" y2="17" />
</svg>
</span>
<span class="section-title">{{ t('memory.myNotes') }}</span>
<span v-if="data?.memory_mtime" class="section-mtime">{{ formatTime(data.memory_mtime) }}</span>
<div class="memory-section cy-panel">
<div class="section-header cy-panel-h">
<span class="section-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
<polyline points="14 2 14 8 20 8" />
<line x1="16" y1="13" x2="8" y2="13" />
<line x1="16" y1="17" x2="8" y2="17" />
</svg>
</span>
<h3 class="section-title">{{ t('memory.myNotes') }}</h3>
<span v-if="data?.memory_mtime" class="cy-meta">{{ formatTime(data.memory_mtime) }}</span>
<div class="cy-panel-actions">
<a-button v-if="editingSection !== 'memory'" size="mini" type="text" @click="startEdit('memory')">
<template #icon>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
</svg>
</template>
{{ t('common.edit') }}
</a-button>
</div>
<a-button v-if="editingSection !== 'memory'" size="mini" type="text" @click="startEdit('memory')">
<template #icon>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
</svg>
</template>
{{ t('common.edit') }}
</a-button>
</div>
<!-- View mode -->
<div v-if="editingSection !== 'memory'" class="section-body">
<div v-if="editingSection !== 'memory'" class="section-body cy-panel-b">
<MarkdownRenderer v-if="!memoryEmpty" :content="displayMemory" />
<p v-else class="empty-text">{{ t('memory.noNotes') }}</p>
</div>
<!-- Edit mode -->
<div v-else class="section-edit">
<div v-else class="section-edit cy-panel-b">
<textarea
v-model="editContent"
class="edit-textarea"
@@ -143,37 +143,37 @@ const displaySoul = computed(() => (data.value?.soul || '').replace(/§/g, '\n\n
</div>
<!-- User Profile -->
<div class="memory-section">
<div class="section-header">
<div class="section-title-row">
<span class="section-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
<circle cx="12" cy="7" r="4" />
</svg>
</span>
<span class="section-title">{{ t('memory.userProfile') }}</span>
<span v-if="data?.user_mtime" class="section-mtime">{{ formatTime(data.user_mtime) }}</span>
<div class="memory-section cy-panel">
<div class="section-header cy-panel-h">
<span class="section-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
<circle cx="12" cy="7" r="4" />
</svg>
</span>
<h3 class="section-title">{{ t('memory.userProfile') }}</h3>
<span v-if="data?.user_mtime" class="cy-meta">{{ formatTime(data.user_mtime) }}</span>
<div class="cy-panel-actions">
<a-button v-if="editingSection !== 'user'" size="mini" type="text" @click="startEdit('user')">
<template #icon>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
</svg>
</template>
{{ t('common.edit') }}
</a-button>
</div>
<a-button v-if="editingSection !== 'user'" size="mini" type="text" @click="startEdit('user')">
<template #icon>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
</svg>
</template>
{{ t('common.edit') }}
</a-button>
</div>
<!-- View mode -->
<div v-if="editingSection !== 'user'" class="section-body">
<div v-if="editingSection !== 'user'" class="section-body cy-panel-b">
<MarkdownRenderer v-if="!userEmpty" :content="displayUser" />
<p v-else class="empty-text">{{ t('memory.noProfile') }}</p>
</div>
<!-- Edit mode -->
<div v-else class="section-edit">
<div v-else class="section-edit cy-panel-b">
<textarea
v-model="editContent"
class="edit-textarea"
@@ -188,39 +188,39 @@ const displaySoul = computed(() => (data.value?.soul || '').replace(/§/g, '\n\n
</div>
<!-- Soul -->
<div class="memory-section">
<div class="section-header">
<div class="section-title-row">
<span class="section-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" />
<path d="M8 14s1.5 2 4 2 4-2 4-2" />
<line x1="9" y1="9" x2="9.01" y2="9" />
<line x1="15" y1="9" x2="15.01" y2="9" />
</svg>
</span>
<span class="section-title">{{ t('memory.soul') }}</span>
<span v-if="data?.soul_mtime" class="section-mtime">{{ formatTime(data.soul_mtime) }}</span>
<div class="memory-section cy-panel">
<div class="section-header cy-panel-h">
<span class="section-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" />
<path d="M8 14s1.5 2 4 2 4-2 4-2" />
<line x1="9" y1="9" x2="9.01" y2="9" />
<line x1="15" y1="9" x2="15.01" y2="9" />
</svg>
</span>
<h3 class="section-title">{{ t('memory.soul') }}</h3>
<span v-if="data?.soul_mtime" class="cy-meta">{{ formatTime(data.soul_mtime) }}</span>
<div class="cy-panel-actions">
<a-button v-if="editingSection !== 'soul'" size="mini" type="text" @click="startEdit('soul')">
<template #icon>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
</svg>
</template>
{{ t('common.edit') }}
</a-button>
</div>
<a-button v-if="editingSection !== 'soul'" size="mini" type="text" @click="startEdit('soul')">
<template #icon>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
</svg>
</template>
{{ t('common.edit') }}
</a-button>
</div>
<!-- View mode -->
<div v-if="editingSection !== 'soul'" class="section-body">
<div v-if="editingSection !== 'soul'" class="section-body cy-panel-b">
<MarkdownRenderer v-if="!soulEmpty" :content="displaySoul" />
<p v-else class="empty-text">{{ t('memory.noSoul') }}</p>
</div>
<!-- Edit mode -->
<div v-else class="section-edit">
<div v-else class="section-edit cy-panel-b">
<textarea
v-model="editContent"
class="edit-textarea"
@@ -250,7 +250,7 @@ const displaySoul = computed(() => (data.value?.soul || '').replace(/§/g, '\n\n
.memory-content {
flex: 1;
overflow: hidden;
padding: 20px;
padding: 20px 22px 24px;
display: flex;
flex-direction: column;
}
@@ -278,49 +278,28 @@ const displaySoul = computed(() => (data.value?.soul || '').replace(/§/g, '\n\n
.memory-section {
flex: 1;
min-height: 0;
border: 1px solid $border-color;
border-radius: $radius-md;
overflow: hidden;
display: flex;
flex-direction: column;
// 三栏并排，不吃 .cy-panel 的纵向堆叠间距。
& + .memory-section {
margin-top: 0;
}
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
background: $bg-secondary;
border-bottom: 1px solid $border-color;
flex-shrink: 0;
}
.section-title-row {
display: flex;
align-items: center;
gap: 8px;
}
.section-icon {
color: $text-secondary;
color: $text-faint;
display: flex;
}
.section-title {
font-size: 14px;
font-weight: 600;
color: $text-primary;
}
.section-mtime {
font-size: 11px;
color: $text-muted;
}
.section-body {
flex: 1;
overflow-y: auto;
padding: 16px;
min-height: 0;
}
@@ -334,7 +313,6 @@ const displaySoul = computed(() => (data.value?.soul || '').replace(/§/g, '\n\n
flex: 1;
display: flex;
flex-direction: column;
padding: 12px 16px;
min-height: 0;
}