From 719f58690021f66be1b399cdbe78f2fa15852caa Mon Sep 17 00:00:00 2001
From: xiaoxixi <xiaoski@qq.com>
Date: Fri, 24 Jul 2026 11:06:25 +0800
Subject: [PATCH] fix(webui): activity spine bright in both themes and CSP-safe
 dots

---
 webui/src/lib/components/ActivitySpine.svelte | 20 +++++++++----------
 webui/src/styles.css                          |  6 ++++++
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/webui/src/lib/components/ActivitySpine.svelte b/webui/src/lib/components/ActivitySpine.svelte
index 191f10b..41ed2b6 100644
--- a/webui/src/lib/components/ActivitySpine.svelte
+++ b/webui/src/lib/components/ActivitySpine.svelte
@@ -26,14 +26,14 @@
 
 <div class="spine mono">
   {#if running}
-    <span class="spine-turn active"><i class="pulse-dot" style="background:var(--accent);box-shadow:0 0 10px var(--accent)"></i>{turnLabel} · STREAMING</span>
+    <span class="spine-turn active"><i class="pulse-dot active"></i>{turnLabel} · STREAMING</span>
     {#if rate != null}<span class="spine-rate">▲ {rate} tok/s</span>{/if}
     {#if ctx}<span>ctx {ctx}</span>{/if}
   {:else if chat.turn}
-    <span class="spine-turn idle"><i class="pulse-dot" style="background:var(--signal);animation:none"></i>IDLE</span>
+    <span class="spine-turn idle"><i class="pulse-dot idle"></i>IDLE</span>
     <span>最近 {turnLabel}</span>
   {:else}
-    <span class="spine-turn idle"><i class="pulse-dot" style="background:var(--signal);animation:none"></i>READY</span>
+    <span class="spine-turn idle"><i class="pulse-dot idle"></i>READY</span>
   {/if}
   <span class="spine-right">
     <span class:spine-ok={chat.connected} class:spine-down={!chat.connected}>{chat.connected ? "已连接" : "重连中"}</span>
@@ -42,13 +42,13 @@
 </div>
 
 <style>
-  .spine { display: flex; align-items: center; gap: 14px; font-size: 10.5px; color: var(--muted);
+  .spine { display: flex; align-items: center; gap: 14px; font-size: 10.5px; color: var(--spine-text);
     background: var(--spine-bg); border-bottom: 1px solid var(--line); padding: 8px 16px; }
   .spine-turn { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
-  .spine-turn.active { color: var(--accent); }
-  .spine-turn.idle { color: var(--signal); }
-  .spine-rate { color: var(--signal); }
-  .spine-right { margin-left: auto; display: inline-flex; gap: 14px; color: var(--faint); }
-  .spine-ok { color: var(--signal); }
-  .spine-down { color: var(--warning); }
+  .spine-turn.active { color: var(--spine-accent); }
+  .spine-turn.idle { color: var(--spine-signal); }
+  .spine-rate { color: var(--spine-signal); }
+  .spine-right { margin-left: auto; display: inline-flex; gap: 14px; color: var(--spine-faint); }
+  .spine-ok { color: var(--spine-signal); }
+  .spine-down { color: var(--spine-accent); }
 </style>
diff --git a/webui/src/styles.css b/webui/src/styles.css
index 89be664..8f6d56c 100644
--- a/webui/src/styles.css
+++ b/webui/src/styles.css
@@ -59,6 +59,10 @@
   --code-bg: #080c12;
   --user-bubble: #221d38;
   --spine-bg: #0e1520;
+  --spine-text: #b8c4d4;
+  --spine-signal: #2dd4bf;
+  --spine-accent: #ffb454;
+  --spine-faint: #8fa3b8;
   --shadow: 0 16px 45px rgb(0 0 0 / 35%);
   --radius: 11px;
 }
@@ -353,6 +357,8 @@ code { color: var(--accent); }
 .cap.info { color: var(--info); background: var(--info-soft); border: 1px solid var(--info-border); }
 @keyframes spine-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
 .pulse-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; animation: spine-pulse 1.6s ease-in-out infinite; }
+.pulse-dot.active { background: var(--spine-accent); box-shadow: 0 0 10px var(--spine-accent); }
+.pulse-dot.idle { background: var(--spine-signal); animation: none; }
 @media (prefers-reduced-motion: reduce) { .pulse-dot { animation: none; } }
 
 @media (max-width: 800px) {