From c892069ea175a2c6a739996caf9fe68892c61fb0 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Wed, 17 Dec 2025 17:59:40 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E4=BC=98=E5=8C=96=20Chat=20?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=20Header=20=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除左上角 "Chat" 标题
- Token 使用情况移至左侧
- 压缩按钮添加文字标签，更直观
- 工具栏按钮保持在右侧
---
 packages/ui/src/components/ContextUsage.tsx | 14 +++-
 packages/web/src/pages/Chat.tsx             | 83 ++++++++++-----------
 2 files changed, 51 insertions(+), 46 deletions(-)

diff --git a/packages/ui/src/components/ContextUsage.tsx b/packages/ui/src/components/ContextUsage.tsx
index 120f53d..c0e333b 100644
--- a/packages/ui/src/components/ContextUsage.tsx
+++ b/packages/ui/src/components/ContextUsage.tsx
@@ -158,19 +158,25 @@ export function ContextUsage({
             variant="ghost"
             size="sm"
             className={cn(
-              'h-5 px-1.5 text-xs',
+              'h-5 px-1.5 text-xs gap-1',
               shouldCompress
                 ? 'text-amber-500 hover:text-amber-400 hover:bg-amber-500/10'
                 : 'text-fg-muted hover:text-fg-secondary hover:bg-surface-muted'
             )}
             onClick={handleCompress}
             disabled={compressing}
-            title="压缩对话上下文"
+            title="压缩对话上下文以释放 token 空间"
           >
             {compressing ? (
-              <RefreshCw size={12} className="animate-spin" />
+              <>
+                <RefreshCw size={12} className="animate-spin" />
+                <span>压缩中</span>
+              </>
             ) : (
-              <Zap size={12} />
+              <>
+                <Zap size={12} />
+                <span>压缩</span>
+              </>
             )}
           </Button>
         )}
diff --git a/packages/web/src/pages/Chat.tsx b/packages/web/src/pages/Chat.tsx
index 7c1c2d1..5231168 100644
--- a/packages/web/src/pages/Chat.tsx
+++ b/packages/web/src/pages/Chat.tsx
@@ -134,9 +134,8 @@ export function ChatPage({
     <div className="flex-1 flex flex-col h-full">
       {/* Header */}
       <div className="flex items-center justify-between px-4 md:px-6 py-3 border-b border-line bg-surface-subtle">
-        <h1 className="text-lg font-medium text-fg">Chat</h1>
-        <div className="flex items-center gap-3 flex-shrink-0">
-          {/* 上下文使用情况 - 紧凑模式 */}
+        {/* 左侧：上下文使用情况 */}
+        <div className="flex items-center">
           {sessionId && (
             <ContextUsage
               sessionId={sessionId}
@@ -145,46 +144,46 @@ export function ChatPage({
               refreshInterval={30000}
             />
           )}
-
-          {/* 工具栏按钮 */}
-          {(onOpenCommands || onOpenMCP || onOpenHooks || onOpenAgents || onOpenCheckpoints || onOpenProviders || onOpenLSP || onOpenDiagnostics || onOpenSessions) && (
-            <div className="flex items-center gap-1.5 border-l border-line-muted pl-3">
-              {/* LSP 诊断指示器 */}
-              {(onOpenLSP || onOpenDiagnostics) && (
-                <DiagnosticsIndicator
-                  onClickDiagnostics={onOpenDiagnostics}
-                  onClickLSP={onOpenLSP}
-                  refreshInterval={30000}
-                />
-              )}
-
-              {/* Sessions 按钮 */}
-              {onOpenSessions && (
-                <motion.button
-                  whileHover={{ scale: 1.1 }}
-                  whileTap={{ scale: 0.9 }}
-                  onClick={onOpenSessions}
-                  className="p-1.5 rounded-lg text-fg-muted hover:text-fg-secondary hover:bg-surface-muted transition-colors"
-                  title="Sessions"
-                >
-                  <MessagesSquare size={20} />
-                </motion.button>
-              )}
-
-              {/* 设置菜单 - 齿轮图标，放在最右侧 */}
-              <ToolbarOverflowMenu
-                items={[
-                  { icon: History, label: 'Checkpoints', onClick: onOpenCheckpoints },
-                  { icon: Server, label: 'Model Providers', onClick: onOpenProviders },
-                  { icon: Bot, label: 'Agent Presets', onClick: onOpenAgents },
-                  { icon: Zap, label: 'Hooks', onClick: onOpenHooks },
-                  { icon: Plug, label: 'MCP Servers', onClick: onOpenMCP },
-                  { icon: Terminal, label: 'Commands', onClick: onOpenCommands },
-                ]}
-              />
-            </div>
-          )}
         </div>
+
+        {/* 右侧：工具栏按钮 */}
+        {(onOpenCommands || onOpenMCP || onOpenHooks || onOpenAgents || onOpenCheckpoints || onOpenProviders || onOpenLSP || onOpenDiagnostics || onOpenSessions) && (
+          <div className="flex items-center gap-1.5 flex-shrink-0">
+            {/* LSP 诊断指示器 */}
+            {(onOpenLSP || onOpenDiagnostics) && (
+              <DiagnosticsIndicator
+                onClickDiagnostics={onOpenDiagnostics}
+                onClickLSP={onOpenLSP}
+                refreshInterval={30000}
+              />
+            )}
+
+            {/* Sessions 按钮 */}
+            {onOpenSessions && (
+              <motion.button
+                whileHover={{ scale: 1.1 }}
+                whileTap={{ scale: 0.9 }}
+                onClick={onOpenSessions}
+                className="p-1.5 rounded-lg text-fg-muted hover:text-fg-secondary hover:bg-surface-muted transition-colors"
+                title="Sessions"
+              >
+                <MessagesSquare size={20} />
+              </motion.button>
+            )}
+
+            {/* 设置菜单 - 齿轮图标，放在最右侧 */}
+            <ToolbarOverflowMenu
+              items={[
+                { icon: History, label: 'Checkpoints', onClick: onOpenCheckpoints },
+                { icon: Server, label: 'Model Providers', onClick: onOpenProviders },
+                { icon: Bot, label: 'Agent Presets', onClick: onOpenAgents },
+                { icon: Zap, label: 'Hooks', onClick: onOpenHooks },
+                { icon: Plug, label: 'MCP Servers', onClick: onOpenMCP },
+                { icon: Terminal, label: 'Commands', onClick: onOpenCommands },
+              ]}
+            />
+          </div>
+        )}
       </div>
 
       {/* Messages */}