feat: add context window usage bar to WebUI header

   - Add real-time segmented bar showing token usage by
   category:
     System / Rules / User / Thinking / ReadWrite / Edit /
     Shell / Skill / MCP / Other / Free
   - Extend ContextManager with getCategoryBreakdown() using
   raw
     agent.state.messages (handles system, user, assistant,
     toolResult roles with OpenAI-format array content)
   - Add context_window WebSocket event with throttled
   broadcast
     (throttled on tool_end, immediate on
   turn_end/connect/clear)
   - Classify tools by name prefix (read_file→ReadWrite,
     edit→Edit, bash→Shell, mcp__*→MCP) and skill list
   - Distinguish System (1st system msg) vs Rules (subsequent)
   - Render ContextWindowBar component in header center zone
     with hover tooltip, 22px bar, consistent k/M units

Author: 王璨

AGENTS.md

@@ -15,7 +15,7 @@
 
 ## Web 前端
 
-修改 Web UI 前必读 `openspec/specs/web-frontend/spec.md`，禁止引入第三方设计体系。
+修改 Web UI 前必读 `openspec/specs/web-frontend/spec.md` 和 taste-skill，禁止引入第三方设计体系。
 
 ## 运行
 

src/context/manager.ts

@@ -2,6 +2,18 @@ import type { ContextConfig } from "../core/types.js";
 import { estimateMessagesTokens, estimateTokens } from "./estimator.js";
 import { dropOldest, slidingWindow } from "./compaction.js";
 
+export type UsageCategory =
+  | "system"
+  | "rules"
+  | "user"
+  | "thinking"
+  | "readwrite"
+  | "edit"
+  | "shell"
+  | "skill"
+  | "mcp"
+  | "other";
+
 export class ContextManager {
   private config: ContextConfig;
   private contextWindow: number = 128000;
@@ -43,6 +55,127 @@ export class ContextManager {
     return this.contextWindow - this.maxTokens - reservedSystem - reservedTools;
   }
 
+  getContextWindow(): number {
+    return this.contextWindow;
+  }
+
+  classifyToolCategory(toolName: string, skillNames?: Set<string>): UsageCategory {
+    if (toolName.startsWith("mcp__")) return "mcp";
+    if (skillNames?.has(toolName)) return "skill";
+    if (
+      toolName === "read_file" ||
+      toolName === "list_files" ||
+      toolName === "grep" ||
+      toolName === "glob" ||
+      toolName === "write_file" ||
+      toolName === "overwrite_file"
+    )
+      return "readwrite";
+    if (toolName === "edit" || toolName === "edit_undo") return "edit";
+    if (toolName === "bash") return "shell";
+    return "other";
+  }
+
+  getCategoryBreakdown(
+    messages: unknown[],
+    tools: { name: string; result: string }[],
+    skillNames?: Set<string>,
+  ): {
+    total: number;
+    used: number;
+    free: number;
+    categories: Record<UsageCategory, number>;
+  } {
+    const categories: Record<UsageCategory, number> = {
+      system: 0,
+      rules: 0,
+      user: 0,
+      thinking: 0,
+      readwrite: 0,
+      edit: 0,
+      shell: 0,
+      skill: 0,
+      mcp: 0,
+      other: 0,
+    };
+
+    let systemMsgIndex = 0;
+
+    // Classify messages
+    for (const msg of messages) {
+      const m = msg as any;
+      const role = m?.role as string | undefined;
+      const content = m?.content;
+
+      if (role === "system") {
+        systemMsgIndex++;
+        const target = systemMsgIndex === 1 ? "system" : "rules";
+        if (typeof content === "string") {
+          categories[target] += estimateTokens(content);
+          categories[target] += 4; // framing
+        } else if (Array.isArray(content)) {
+          for (const block of content) {
+            if (block?.type === "text" && typeof block.text === "string") {
+              categories[target] += estimateTokens(block.text);
+            }
+          }
+          categories[target] += 4;
+        }
+      } else if (role === "user") {
+        if (typeof content === "string") {
+          categories.user += estimateTokens(content);
+        } else if (Array.isArray(content)) {
+          for (const block of content) {
+            if (block?.type === "text" && typeof block.text === "string") {
+              categories.user += estimateTokens(block.text);
+            }
+          }
+        }
+        categories.user += 4;
+      } else if (role === "assistant") {
+        // Raw agent messages use OpenAI format: content is an array of blocks
+        if (typeof content === "string") {
+          categories.thinking += estimateTokens(content);
+        } else if (Array.isArray(content)) {
+          for (const block of content) {
+            if (block?.type === "text" && typeof block.text === "string") {
+              categories.thinking += estimateTokens(block.text);
+            } else if (block?.type === "thinking" && typeof block.thinking === "string") {
+              categories.thinking += estimateTokens(block.thinking);
+            }
+          }
+        }
+        categories.thinking += 4;
+      } else if (role === "toolResult") {
+        const toolName = (m?.toolName as string) ?? "";
+        const cat = this.classifyToolCategory(toolName, skillNames);
+        if (Array.isArray(content)) {
+          for (const block of content) {
+            if (block?.type === "text" && typeof block.text === "string") {
+              categories[cat] += estimateTokens(block.text);
+            }
+          }
+        } else if (typeof content === "string") {
+          categories[cat] += estimateTokens(content);
+        }
+        categories[cat] += 20; // tool call structure overhead
+      }
+    }
+
+    // Classify tool calls
+    for (const tool of tools) {
+      const cat = this.classifyToolCategory(tool.name, skillNames);
+      const resultTokens = typeof tool.result === "string" ? estimateTokens(tool.result) : 0;
+      categories[cat] += resultTokens + 20; // ~20 tokens for tool call structure
+    }
+
+    const used = Object.values(categories).reduce((a, b) => a + b, 0);
+    const total = this.contextWindow;
+    const free = Math.max(0, total - used);
+
+    return { total, used, free, categories };
+  }
+
   getEstimatedTokens(messages: unknown[]): number {
     return estimateMessagesTokens(messages);
   }

src/ui/shared/types.ts

@@ -41,6 +41,26 @@ export interface McpAppInfo {
   resourceUri: string;
 }
 
+// ── Context window ──
+
+export interface ContextWindowData {
+  total: number;
+  used: number;
+  free: number;
+  categories: {
+    system: number;
+    rules: number;
+    user: number;
+    thinking: number;
+    readwrite: number;
+    edit: number;
+    shell: number;
+    skill: number;
+    mcp: number;
+    other: number;
+  };
+}
+
 // ── Config ──
 
 export interface ConfigData {
@@ -112,7 +132,6 @@ export interface UIMessage {
   isStreaming?: boolean;
   images?: (ImageAttachment | ImageRef)[];
 }
-
 // ── Permissions ──
 
 export type PermissionDecision = "allow" | "deny" | "ask";
@@ -161,6 +180,8 @@ export type ServerEvent =
   | { type: "thinking_delta"; delta: string }
   | { type: "text_delta"; delta: string }
   | { type: "tool_start"; name: string; args: unknown }
+  | { type: "context_window"; total: number; used: number; free: number; categories: { system: number; rules: number; user: number; thinking: number; readwrite: number; edit: number; shell: number; skill: number; mcp: number; other: number } }
+
   | { type: "tool_end"; name: string; result: string; isError: boolean; images?: ImageAttachment[] }
   | { type: "assistant_end" }
   | { type: "info"; text: string; display: "toast" | "panel" }

src/ui/web/protocol.ts

@@ -14,4 +14,5 @@ export type {
   FileListItem,
   ConversationMessage,
   ToolCallEntry,
+  ContextWindowData,
 } from "../../ui/shared/types.js";

src/ui/web/web-backend.ts

@@ -88,6 +88,11 @@ export class WebUiBackend implements UiBackend {
     tools: ToolCallEntry[];
   } | null = null;
 
+  // Context window broadcast throttling
+  private contextWindowThrottleTimer: ReturnType<typeof setTimeout> | null = null;
+  private contextWindowThrottlePending: boolean = false;
+  private isAssistantTurn: boolean = false;
+
   constructor(options: WebUiOptions) {
     this.port = options.port;
     this.harness = options.harness;
@@ -128,16 +133,19 @@ export class WebUiBackend implements UiBackend {
         this.currentAssistant.tools.push({ name: e.name, args: "", result: rs, isError: e.isError, images: imgs });
       }
       this.broadcast({ type: "tool_end", name: e.name, result: rs, isError: e.isError, images: imgs });
-    });
+      this.broadcastContextWindow(false);    });
     h.events.on("turn:streaming:start", () => {
       this.currentAssistant = { thinking: "", text: "", tools: [] };
       this.broadcast({ type: "assistant_start" });
       this.startSessionTimeBroadcast();
-    });
+      this.isAssistantTurn = true;    });
     h.events.on("turn:end", () => {
       this.broadcastSessionTime();
+      const toolsForBroadcast = this.currentAssistant?.tools ?? [];
       this.currentAssistant = null;
       this.broadcast({ type: "assistant_end" });
+      this.isAssistantTurn = false;
+      this.broadcastContextWindow(true, toolsForBroadcast);
       this.pushSessionListToAll();
     });
     h.events.on("turn:abort", () => { this.stopSessionTimeBroadcast(); this.broadcast({ type: "loader", state: "hide" }); });
@@ -149,7 +157,7 @@ export class WebUiBackend implements UiBackend {
     h.events.on("ui:error", (e) => { this.broadcast({ type: "error", text: e.text }); });
     h.events.on("ui:warning", (e) => { this.broadcast({ type: "warning", text: e.text }); });
     h.events.on("ui:image:pending", (e) => { this.pendingImages.push(e.image); });
-    h.events.on("ui:conversation:clear", () => { this.currentAssistant = null; this.pendingImages = []; this.broadcast({ type: "clear_conversation" }); });
+    h.events.on("ui:conversation:clear", () => { this.currentAssistant = null; this.pendingImages = []; this.broadcast({ type: "clear_conversation" }); this.broadcastContextWindow(true); });
     h.events.on("config:change", (e) => { this.broadcast({ type: "config", data: e.data }); });
     h.events.on("mcp:state", (e) => { this.broadcast({ type: "mcp_state", servers: e.servers }); });
     h.events.on("mcp:browser:open", () => { this.pushMcpState(); this.broadcast({ type: "mcp_open_browser" }); });
@@ -248,12 +256,15 @@ export class WebUiBackend implements UiBackend {
       });
     }
     this.broadcast({ type: "tool_end", name, result: resultStr, isError, images });
+    this.broadcastContextWindow(false);
   }
   finishAssistantMessage(): void {
     this.broadcastSessionTime();
     this.stopSessionTimeBroadcast();
+    const toolsForBroadcast2 = this.currentAssistant?.tools ?? [];
     this.currentAssistant = null;
     this.broadcast({ type: "assistant_end" });
+    this.broadcastContextWindow(true, toolsForBroadcast2);
 
     const sm2 = this.harness.sessionManager;
     if (sm2) {
@@ -376,9 +387,11 @@ export class WebUiBackend implements UiBackend {
   }
 
   clearConversationView(): void {
+    const toolsForBroadcast3 = this.currentAssistant?.tools ?? [];
     this.currentAssistant = null;
     this.pendingImages = [];
     this.broadcast({ type: "clear_conversation" });
+    this.broadcastContextWindow(true, toolsForBroadcast3);
   }
 
   // ── UiBackend Processing ──
@@ -435,7 +448,7 @@ export class WebUiBackend implements UiBackend {
       config: configData,
       messages,
     });
-
+    this.broadcastContextWindow(true);
     if (this.mcpManager) {
       this.pushMcpState();
     }
@@ -1156,6 +1169,51 @@ export class WebUiBackend implements UiBackend {
     return rebuildDisplayMessages(messages, vms) as any;
   }
 
+
+  private getSkillToolNames(): Set<string> {
+    const names = new Set<string>();
+    const sm = this.harness.skillManager;
+    if (sm) {
+      for (const name of sm.listAllSkillNames()) {
+        names.add(name);
+      }
+    }
+    return names;
+  }
+
+  private broadcastContextWindow(bypassThrottle: boolean, toolsOverride?: { name: string; result: string }[]): void {
+    const cm = this.harness.contextManager;
+    const cw = cm.getContextWindow();
+    if (cw <= 0) return;
+
+    if (!bypassThrottle) {
+      if (this.contextWindowThrottleTimer) {
+        this.contextWindowThrottlePending = true;
+        return;
+      }
+      this.contextWindowThrottleTimer = setTimeout(() => {
+        this.contextWindowThrottleTimer = null;
+        if (this.contextWindowThrottlePending) {
+          this.contextWindowThrottlePending = false;
+          this.broadcastContextWindow(true, toolsOverride);
+        }
+      }, 500);
+    }
+
+    const messages = this.harness.agent.state.messages as unknown[];
+    const tools = toolsOverride ?? this.currentAssistant?.tools ?? [];
+    const breakdown = cm.getCategoryBreakdown(messages, tools, this.getSkillToolNames());
+
+    this.broadcast({
+      type: "context_window",
+      total: breakdown.total,
+      used: breakdown.used,
+      free: breakdown.free,
+      categories: breakdown.categories,
+    });
+  }
+
+
   private broadcast(event: ServerEvent): void {
     this.wsServer.broadcast(event);
   }

web/src/components/App.tsx

@@ -1,12 +1,13 @@
 import { useState, useCallback, useRef, useEffect } from "react";
-import type { UIMessage, ServerEvent, ConfigData, SessionInfo, McpServerInfo, ImageAttachment, FileListItem } from "../types";
+import type { UIMessage, ServerEvent, ConfigData, SessionInfo, McpServerInfo, ImageAttachment, FileListItem, ContextWindowData } from "../types";
 import { conversationReducer } from "@dscode/shared/reducer";
 import { useWebSocket } from "../hooks/useWebSocket";
 import { ChatView } from "./ChatView";
 import { MessageInput } from "./MessageInput";
 import { Sidebar } from "./Sidebar";
 import { ToastContainer, useToasts } from "./Toast";
 import { CommandPanel } from "./CommandPanel";
+import { ContextWindowBar } from "./ContextWindowBar";
 import { List, Sun, Moon } from "@phosphor-icons/react";
 
 const SLASH_COMMANDS = [
@@ -53,6 +54,7 @@ export function App() {
   const [fileListItems, setFileListItems] = useState<FileListItem[]>([]);
   const [fileListPrefix, setFileListPrefix] = useState("");
   const [theme, setTheme] = useState<"light" | "dark">(getInitialTheme);
+  const [contextWindow, setContextWindow] = useState<ContextWindowData | null>(null);
   const [commandPanel, setCommandPanel] = useState<string | null>(null);
   const { toasts, addToast, removeToast } = useToasts();
   const turnStartRef = useRef<number>(0);
@@ -120,6 +122,7 @@ export function App() {
       case "mcp_state": setMcpServers(event.servers); break;
       case "mcp_open_browser": setSidebarOpen(true); setSidebarTab("mcp"); break;
       case "model": setModel(event.name); break;
+      case "context_window": setContextWindow(event); break;
       case "config": setConfig(event.data); break;
       case "file_list_result": setFileListItems(event.items); setFileListPrefix(event.prefix); break;
     }
@@ -161,14 +164,17 @@ export function App() {
 
   return (
     <div className="h-screen flex flex-col" style={{ backgroundColor: "var(--color-bg)" }}>
-      <header className="flex items-center justify-between px-4 py-2 shrink-0" style={{ backgroundColor: "var(--color-surface)", borderBottom: "1px solid var(--color-border)" }}>
+      <header className="flex items-center px-4 py-2 shrink-0" style={{ backgroundColor: "var(--color-surface)", borderBottom: "1px solid var(--color-border)" }}>
         <div className="flex items-center gap-3">
           <button onClick={() => setSidebarOpen(!sidebarOpen)} className="p-2 rounded-btn hover:brightness-95 transition-[filter] duration-200 md:hidden" style={{ backgroundColor: "var(--color-surface-hover)" }} aria-label="Toggle sidebar">
             <List size={20} weight="bold" style={{ color: "var(--color-text)" }} />
           </button>
           <h1 className="font-bold text-lg" style={{ color: "var(--color-accent)" }}>DSCode</h1>
           {model && <span className="text-sm hidden sm:inline" style={{ color: "var(--color-text-muted)" }}>{model}</span>}
         </div>
+        <div className="flex-1 flex justify-center hidden md:flex">
+          <ContextWindowBar data={contextWindow} />
+        </div>
         <div className="flex items-center gap-3">
           <button onClick={toggleTheme} className="p-2 rounded-btn hover:brightness-95 transition-[filter] duration-200" style={{ backgroundColor: "var(--color-surface-hover)" }} aria-label="Toggle theme">
             {theme === "light" ? <Moon size={18} weight="bold" style={{ color: "var(--color-text)" }} /> : <Sun size={18} weight="bold" style={{ color: "var(--color-text)" }} />}