split one accent into three colours that each mean one thing

The app had a single cyan accent, so every emphasis in the chat chain
was a shade of the same hue. An approval waiting on the user, a tool
that had already run, a streaming response and an outright error all
looked equally urgent — the hue carried no information at all.

The colours are now split by meaning rather than by shade, and the rule
is documented at the top of variables.scss so it survives future edits:

  cyan   the system itself   brand, primary buttons, selection, user bubbles
  amber  needs you           approval cards, context about to fill
  lime   the machine works   tool execution, assistant output, streaming
  red    something failed    errors only — deliberately not a palette member

Red staying out is the load-bearing part: when failure reuses the accent
family the urgency signal disappears entirely.

`--warning` moves from yellow (hue 85) to amber (hue 68) and `--success`
from a muted green to fluorescent lime (hue 128). Because both are global
tokens, every page using them changes hue in the same pass; the Arco
`--green-*` / `--orange-*` bridges are updated with them so solid controls
follow instead of staying behind. Six translucent companions
(`--success-soft`, `--warning-line`, …) were added for fills and borders.

On the chat surface: the approval card goes amber with a slow pulse on
its icon — the only moving part in the chain, marking the one thing that
is genuinely waiting. Tool-change cards and assistant bubbles take a 2px
lime left edge meaning "already ran"; user bubbles get a cyan right edge
so the two sides read apart without labels. The context meter is green
under 60%, amber to 80%, red above; those thresholds already existed and
only the colours were wrong.

Rendering-layer only. No store logic, no /chat-run payload, no markup or
event wiring.

packages/client/src/components/hermes/chat/ChatInput.vue

@@ -1527,16 +1527,20 @@ function isImage(type: string): boolean {
 
 .context-bar-fill {
   height: 100%;
-  background: linear-gradient(90deg, rgba(var(--text-primary-rgb), 0.42), rgba(var(--text-primary-rgb), 0.72));
+  // 三段语义与全局一致：绿=余量充足，橙=快满了需要留意，红=真要满了。
+  background: linear-gradient(90deg, rgba(var(--success-rgb), 0.5), var(--success));
+  box-shadow: 0 0 8px rgba(var(--success-rgb), 0.5);
   border-radius: 2px;
-  transition: width 0.3s ease;
+  transition: width 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
 
   &.context-bar-warn {
     background: linear-gradient(90deg, rgba(var(--warning-rgb), 0.55), var(--warning));
+    box-shadow: 0 0 8px rgba(var(--warning-rgb), 0.55);
   }
 
   &.context-bar-danger {
     background: linear-gradient(90deg, rgba(var(--error-rgb), 0.55), var(--error));
+    box-shadow: 0 0 8px rgba(var(--error-rgb), 0.55);
   }
 }
 

packages/client/src/components/hermes/chat/MessageItem.vue

@@ -1306,6 +1306,8 @@ onBeforeUnmount(() => {
     .message-bubble {
       background-color: $msg-user-bg;
       border-radius: 10px;
+      // 青色 = 你在驱动这段会话。
+      border-right: 2px solid rgba(var(--accent-primary-rgb), 0.45);
     }
   }
 
@@ -1330,6 +1332,9 @@ onBeforeUnmount(() => {
     .message-bubble {
       background-color: $msg-assistant-bg;
       border-radius: 10px;
+      // 荧光绿 = 机器在动。助手气泡左边这道 2px 让"这段是机器产出的"一眼可辨，
+      // 与用户气泡（青色）、审批卡（橙色）互不重叠。
+      border-left: 2px solid var(--success-line);
     }
 
     .message-bubble.agent-error {
@@ -1857,7 +1862,10 @@ onBeforeUnmount(() => {
 
 .tool-change-card {
   background: $bg-secondary;
+  // 荧光绿 = 机器已执行。左侧这道 2px 是三色语义里"机器在动"的专属标记，
+  // 与审批卡的橙色底、助手气泡的绿色边互不重叠。
   border: 1px solid $border-light;
+  border-left: 2px solid var(--success-line);
   border-radius: 10px;
   color: $text-primary;
   display: grid;

packages/client/src/components/hermes/chat/MessageList.vue

@@ -921,8 +921,30 @@ defineExpose({
   backdrop-filter: blur(14px);
 }
 
+// 审批卡是橙色专属区：琥珀橙只表示「需要你介入」。
+// 这里不能用强调色——青色留给"系统本体"，混用就分不出紧急程度了。
 .approval-float-panel {
-  border-color: rgba(var(--accent-primary-rgb), 0.24);
+  border-color: var(--warning-line);
+  background: linear-gradient(var(--warning-soft), var(--warning-soft)), var(--bg-card);
+  box-shadow: inset 0 0 22px rgba(var(--warning-rgb), 0.06),
+              0 14px 40px rgba(0, 0, 0, 0.14),
+              0 0 20px rgba(var(--warning-rgb), 0.1);
+}
+
+.approval-float-panel .float-panel-header,
+.approval-float-panel .approval-float-icon {
+  color: var(--warning);
+}
+
+.approval-float-panel .approval-float-icon {
+  background: var(--warning-soft);
+  border-color: var(--warning-line);
+  animation: approval-pulse 1.8s ease-in-out infinite;
+}
+
+@keyframes approval-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--warning-rgb), 0.34); }
+  50% { box-shadow: 0 0 0 5px rgba(var(--warning-rgb), 0); }
 }
 
 .queue-float-panel {

packages/client/src/styles/global.scss

@@ -51,12 +51,16 @@ html[arco-theme='dark'],
   --arcoblue-9: 172, 246, 238;
   --arcoblue-10: 218, 250, 246;
 
-  --green-6: 47, 197, 138;
-  --green-5: 56, 184, 130;
-  --green-7: 38, 178, 122;
-  --orange-6: 226, 175, 32;
-  --orange-5: 214, 165, 34;
-  --orange-7: 236, 190, 44;
+  // 三色语义族，与 variables.scss 保持一致：
+  //   green  = 荧光绿 rgb(107,247,84)   机器在动
+  //   orange = 琥珀橙 rgb(233,148,22)   需要你介入
+  //   red    = 出错，唯一含义，不复用
+  --green-6: 107, 247, 84;
+  --green-5: 92, 232, 72;
+  --green-7: 124, 252, 104;
+  --orange-6: 233, 148, 22;
+  --orange-5: 221, 136, 18;
+  --orange-7: 242, 166, 34;
   --red-6: 232, 78, 61;
   --red-5: 222, 74, 58;
   --red-7: 240, 96, 78;

packages/client/src/styles/variables.scss

@@ -1,7 +1,13 @@
 // CYBER — 霓虹暗色单主题
 // 设计语言见 prototype_reference/hermes-ui-cyber-api.html 与 hermes-ui-cyber-login.html。
 // 暗色为唯一主题：亮度/风格切换器已移除，因此这里只有一组令牌，没有 .dark / .comic 变体。
-// 唯一强调色是霓虹青 oklch(0.805 0.148 188)，状态色仅用于语义，不参与装饰。
+//
+// 三色语义系统：每种颜色只承担一种含义，不得混用。
+//   青（--accent-primary）= 系统本体：品牌、主按钮、当前选中
+//   橙（--warning）        = 需要你介入：审批、等待确认、上下文将满
+//   绿（--success）        = 机器在动：工具成功、流式输出、连接健康
+// 失败时不要靠"加深强调色"表达，必须换到 --error —— 否则四个语义挤在同一色相里，
+// 紧急程度就读不出来了。这正是单一强调色版本的问题所在。
 
 // ─── CSS Custom Properties ─────────────────────────────────────
 
@@ -33,11 +39,21 @@
   --text-muted: oklch(0.705 0.014 230);
   --text-faint: oklch(0.520 0.014 236);   // 禁用态 / 极次要信息
 
-  // Status — 语义色，不用于装饰
-  --success: oklch(0.760 0.140 165);
-  --error: oklch(0.665 0.185 22);
-  --warning: oklch(0.810 0.145 85);
+  // Status — 语义色，不用于装饰。
+  // 语义分工（见 prototype_reference/hermes-ui-cyber-chat.html 顶部说明）：
+  //   --accent-primary 青 = 系统本体   --warning 橙 = 需要你介入   --success 绿 = 机器在动
+  // 三色各自只承担一种含义，不得混用；--error 只表示出错，不参与上面的分工。
+  --success: oklch(0.860 0.190 128);       // 荧光绿：工具成功 / 流式输出 / 连接健康
+  --error: oklch(0.665 0.185 22);          // 出错（唯一含义，不复用）
+  --warning: oklch(0.780 0.155 68);        // 琥珀橙：审批 / 等待确认 / 上下文将满
   --accent-info: oklch(0.700 0.110 245);
+  // 半透明语义底与边框，供 rgba() 拼接
+  --success-soft: oklch(0.860 0.190 128 / 0.12);
+  --success-line: oklch(0.860 0.190 128 / 0.40);
+  --warning-soft: oklch(0.780 0.155 68 / 0.12);
+  --warning-line: oklch(0.780 0.155 68 / 0.42);
+  --error-soft: oklch(0.665 0.185 22 / 0.11);
+  --error-line: oklch(0.665 0.185 22 / 0.42);
 
   // Message bubbles
   --msg-user-bg: oklch(0.225 0.016 246);
@@ -57,9 +73,11 @@
   --accent-hover-rgb: 74, 226, 205;
   --text-primary-rgb: 240, 246, 247;
   --text-muted-rgb: 168, 180, 187;
-  --success-rgb: 47, 197, 138;
+  // 荧光绿 oklch(0.860 0.190 128) ≈ rgb(107, 247, 84)
+  --success-rgb: 107, 247, 84;
   --error-rgb: 232, 78, 61;
-  --warning-rgb: 226, 175, 32;
+  // 琥珀橙 oklch(0.780 0.155 68) ≈ rgb(233, 148, 22)
+  --warning-rgb: 233, 148, 22;
   --accent-info-rgb: 105, 160, 232;
 }