From 79821e11d5ee5af1828e9c408e2c670b69029ed3 Mon Sep 17 00:00:00 2001
From: xiaoxixi <xiaoski@qq.com>
Date: Fri, 24 Jul 2026 09:33:48 +0800
Subject: [PATCH] feat(webui): global activity spine

---
 webui/src/lib/components/ActivitySpine.svelte | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 webui/src/lib/components/ActivitySpine.svelte

diff --git a/webui/src/lib/components/ActivitySpine.svelte b/webui/src/lib/components/ActivitySpine.svelte
new file mode 100644
index 0000000..2d90273
--- /dev/null
+++ b/webui/src/lib/components/ActivitySpine.svelte
@@ -0,0 +1,54 @@
+<script>
+  import { chat } from "../chat.svelte.js";
+
+  let { version = "" } = $props();
+  let lastTokens = $state(null); // { at, completion }
+  let rate = $state(null);
+
+  $effect(() => {
+    const turn = chat.turn;
+    if (!turn || turn.status !== "running") { rate = null; return; }
+    const completion = turn.usage?.completion_tokens;
+    const now = Date.now();
+    if (completion != null && lastTokens && now > lastTokens.at) {
+      const delta = completion - lastTokens.completion;
+      const secs = (now - lastTokens.at) / 1000;
+      if (delta >= 0 && secs > 0) rate = Math.round(delta / secs);
+    }
+    if (completion != null) lastTokens = { at: now, completion };
+  });
+
+  const running = $derived(chat.turn?.status === "running");
+  const turnLabel = $derived(chat.turn ? `TURN ${String(chat.turn.id ?? "").slice(0, 6).toUpperCase()}` : "");
+  const ctx = $derived(chat.turn?.usage?.prompt_tokens != null
+    ? `${(chat.turn.usage.prompt_tokens / 1000).toFixed(1)}k` : null);
+</script>
+
+<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>
+    {#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>最近 {turnLabel}</span>
+  {:else}
+    <span class="spine-turn idle"><i class="pulse-dot" style="background:var(--signal);animation:none"></i>READY</span>
+  {/if}
+  <span class="spine-right">
+    <span class:spine-ok={chat.connected} class:spine-down={!chat.connected}>{chat.connected ? "已连接" : "重连中"}</span>
+    {#if version}<span>{version}</span>{/if}
+  </span>
+</div>
+
+<style>
+  .spine { display: flex; align-items: center; gap: 14px; font-size: 10.5px; color: var(--muted);
+    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); }
+</style>