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/components/hermes/models/ProviderCard.vue
+73 -182
View File
@@ -231,52 +231,62 @@ async function handleDelete() {
</script>
<template>
<div class="provider-card">
<div class="card-header">
<div class="cy-panel provider-card">
<div class="cy-panel-h">
<h3 class="provider-name">{{ displayName }}</h3>
<div class="provider-badges">
<span v-if="isDefaultProvider" class="type-badge default">{{ t('models.currentDefault') }}</span>
<span class="type-badge" :class="isCustom ? 'custom' : 'builtin'">
{{ isCustom ? t('models.customType') : t('models.builtIn') }}
</span>
<span class="cy-tag">{{ isCustom ? t('models.customType') : t('models.builtIn') }}</span>
<div class="cy-panel-actions card-header-actions">
<span v-if="isDefaultProvider" class="cy-tag acc">{{ t('models.currentDefault') }}</span>
<a-button
v-else
size="mini"
type="text"
:loading="defaultingProvider"
@click="handleSetDefaultProvider"
>
{{ t('models.setDefaultProvider') }}
</a-button>
</div>
</div>
<div class="card-body">
<div class="info-row">
<span class="info-label">{{ t('models.provider') }}</span>
<code class="info-value mono">{{ provider.provider }}</code>
</div>
<div class="info-row">
<span class="info-label">{{ t('models.baseUrl') }}</span>
<code class="info-value mono">{{ provider.base_url }}</code>
</div>
<div class="info-row models-row">
<span class="info-label">{{ t('models.models') }}</span>
<span class="info-value models-count">
{{ isFiltered ? visibleCountLabel : provider.models.length }} {{ t('models.count') }}
</span>
</div>
<div class="default-model-row">
<span class="info-label">{{ t('models.defaultModel') }}</span>
<a-select
class="default-model-select"
size="mini"
allow-search
:model-value="defaultModelSelectValue ?? undefined"
:options="defaultModelOptions"
:placeholder="t('models.selectModel')"
:disabled="provider.models.length === 0"
:loading="defaultingModel !== null"
@change="handleSetDefaultModel($event as string | null)"
/>
<div class="cy-panel-b">
<div class="cy-kv">
<div class="cy-kr">
<span class="cy-kk">{{ t('models.provider') }}</span>
<span class="cy-kv-v"><code class="cy-code">{{ provider.provider }}</code></span>
</div>
<div class="cy-kr">
<span class="cy-kk">{{ t('models.baseUrl') }}</span>
<span class="cy-kv-v"><code class="cy-code">{{ provider.base_url }}</code></span>
</div>
<div class="cy-kr">
<span class="cy-kk">{{ t('models.models') }}</span>
<span class="cy-kv-v">{{ isFiltered ? visibleCountLabel : provider.models.length }} {{ t('models.count') }}</span>
</div>
<div class="cy-kr">
<span class="cy-kk">{{ t('models.defaultModel') }}</span>
<span class="cy-kv-v">
<a-select
class="default-model-select"
size="mini"
allow-search
:model-value="defaultModelSelectValue ?? undefined"
:options="defaultModelOptions"
:placeholder="t('models.selectModel')"
:disabled="provider.models.length === 0"
:loading="defaultingModel !== null"
@change="handleSetDefaultModel($event as string | null)"
/>
</span>
</div>
</div>
<div class="models-list">
<button
v-for="model in previewModels"
:key="model"
class="model-tag model-tag-button"
:class="{ default: isDefaultModel(model) }"
class="cy-tag model-tag"
:class="{ acc: isDefaultModel(model) }"
type="button"
:title="t('models.aliasTitleFor', { model })"
@click="openAliasEditor(model)"
@@ -285,22 +295,13 @@ async function handleDelete() {
<span v-if="isDefaultModel(model)" class="model-tag-default">{{ t('models.defaultShort') }}</span>
<span v-if="modelAlias(model)" class="model-tag-id">{{ model }}</span>
</button>
<span v-if="hiddenModelCount > 0" class="model-tag model-tag-more">
<span v-if="hiddenModelCount > 0" class="cy-tag model-tag-more">
+{{ hiddenModelCount }} {{ t('models.more') }}
</span>
</div>
</div>
<div class="card-actions">
<a-button
size="mini"
type="text"
:disabled="isDefaultProvider"
:loading="defaultingProvider"
@click="handleSetDefaultProvider"
>
{{ isDefaultProvider ? t('models.currentDefault') : t('models.setDefaultProvider') }}
</a-button>
<div class="cy-panel-b card-actions">
<a-button size="mini" type="text" @click="showAliasListModal = true">{{ t('models.aliasManage') }}</a-button>
<a-button size="mini" type="text" @click="openVisibilityModal">{{ t('models.manageVisibleModels') }}</a-button>
<a-button size="mini" type="text" status="danger" :loading="deleting" @click="handleDelete">{{ destructiveActionLabel }}</a-button>
@@ -401,10 +402,6 @@ async function handleDelete() {
@use '@/styles/variables' as *;
.provider-card {
background-color: $bg-card;
border: 1px solid $border-color;
border-radius: $radius-md;
padding: 16px;
transition: border-color $transition-fast;
&:hover {
@@ -412,108 +409,11 @@ async function handleDelete() {
}
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.provider-name {
font-size: 15px;
font-weight: 600;
color: $text-primary;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 70%;
}
.provider-badges {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
min-width: 0;
}
.type-badge {
font-size: 11px;
padding: 2px 8px;
border-radius: 10px;
font-weight: 500;
white-space: nowrap;
&.builtin {
background: rgba(var(--accent-primary-rgb), 0.12);
color: $accent-primary;
}
&.custom {
background: rgba(var(--success-rgb), 0.12);
color: $success;
}
&.default {
background: rgba(var(--warning-rgb), 0.14);
color: $warning;
}
}
.card-body {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 14px;
}
.info-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.info-label {
font-size: 12px;
color: $text-muted;
}
.info-value {
font-size: 12px;
color: $text-secondary;
}
.mono {
font-family: $font-code;
font-size: 12px;
}
.models-row {
margin-top: 4px;
}
.models-count {
color: $text-muted;
font-size: 12px;
}
.models-list {
display: flex;
flex-wrap: wrap;
gap: 4px 6px;
margin-top: 6px;
height: 100px;
overflow-y: auto;
align-content: flex-start;
}
.default-model-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 2px;
min-width: 0;
max-width: 52%;
}
.default-model-select {
@@ -521,45 +421,36 @@ async function handleDelete() {
min-width: 0;
}
.model-tag {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 22px;
font-size: 10px;
font-family: $font-code;
padding: 2px 6px;
border-radius: 3px;
background: rgba(var(--accent-primary-rgb), 0.08);
color: $text-secondary;
white-space: nowrap;
max-width: 260px;
overflow: hidden;
text-overflow: ellipsis;
&-more {
background: rgba(var(--accent-primary-rgb), 0.15);
color: $accent-primary;
font-weight: 500;
}
&.default {
background: rgba(var(--warning-rgb), 0.14);
color: $text-primary;
}
.models-list {
display: flex;
flex-wrap: wrap;
gap: 4px 6px;
margin-top: 12px;
max-height: 100px;
overflow-y: auto;
align-content: flex-start;
}
.model-tag-button {
border: 0;
.model-tag {
max-width: 260px;
height: auto;
min-height: 20px;
padding: 2px 6px;
cursor: pointer;
text-align: left;
&:hover {
background: rgba(var(--accent-primary-rgb), 0.16);
color: $text-primary;
border-color: rgba(var(--accent-primary-rgb), 0.45);
}
}
.model-tag-more {
color: $accent-primary;
border-color: rgba(var(--accent-primary-rgb), 0.35);
background: var(--accent-soft);
}
.model-tag-name,
.model-tag-id {
overflow: hidden;
@@ -567,8 +458,8 @@ async function handleDelete() {
}
.model-tag-id {
color: $text-muted;
font-size: 9px;
color: $text-faint;
font-size: 9.5px;
}
.model-tag-default,
@@ -583,8 +474,8 @@ async function handleDelete() {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 9px 12px;
border-top: 1px solid $border-light;
padding-top: 10px;
}
.alias-list-hint,