feat(ui): 添加工具栏溢出菜单优化响应式布局

- 新增 DropdownMenu 基础组件（基于 Radix UI）
- 新增 ToolbarOverflowMenu 组件（齿轮图标设置菜单）
- 将 Header 次要按钮收入溢出菜单
- 保留 Diagnostics 和 Sessions 按钮始终可见
- 溢出菜单放置在最右侧

packages/web/src/pages/Chat.tsx

@@ -15,6 +15,7 @@ import {
   ContextUsage,
   SubagentProgress,
   DiagnosticsIndicator,
+  ToolbarOverflowMenu,
 } from '@ai-assistant/ui';
 
 interface ChatPageProps {
@@ -157,84 +158,6 @@ export function ChatPage({
                 />
               )}
 
-              {/* Checkpoints 按钮 */}
-              {onOpenCheckpoints && (
-                <motion.button
-                  whileHover={{ scale: 1.1 }}
-                  whileTap={{ scale: 0.9 }}
-                  onClick={onOpenCheckpoints}
-                  className="p-1.5 rounded-lg text-fg-muted hover:text-fg-secondary hover:bg-surface-muted transition-colors"
-                  title="Checkpoints"
-                >
-                  <History size={20} />
-                </motion.button>
-              )}
-
-              {/* Providers 按钮 */}
-              {onOpenProviders && (
-                <motion.button
-                  whileHover={{ scale: 1.1 }}
-                  whileTap={{ scale: 0.9 }}
-                  onClick={onOpenProviders}
-                  className="p-1.5 rounded-lg text-fg-muted hover:text-fg-secondary hover:bg-surface-muted transition-colors"
-                  title="Model Providers"
-                >
-                  <Server size={20} />
-                </motion.button>
-              )}
-
-              {/* Agents 按钮 */}
-              {onOpenAgents && (
-                <motion.button
-                  whileHover={{ scale: 1.1 }}
-                  whileTap={{ scale: 0.9 }}
-                  onClick={onOpenAgents}
-                  className="p-1.5 rounded-lg text-fg-muted hover:text-fg-secondary hover:bg-surface-muted transition-colors"
-                  title="Agent Presets"
-                >
-                  <Bot size={20} />
-                </motion.button>
-              )}
-
-              {/* Hooks 按钮 */}
-              {onOpenHooks && (
-                <motion.button
-                  whileHover={{ scale: 1.1 }}
-                  whileTap={{ scale: 0.9 }}
-                  onClick={onOpenHooks}
-                  className="p-1.5 rounded-lg text-fg-muted hover:text-fg-secondary hover:bg-surface-muted transition-colors"
-                  title="Hooks"
-                >
-                  <Zap size={20} />
-                </motion.button>
-              )}
-
-              {/* MCP 按钮 */}
-              {onOpenMCP && (
-                <motion.button
-                  whileHover={{ scale: 1.1 }}
-                  whileTap={{ scale: 0.9 }}
-                  onClick={onOpenMCP}
-                  className="p-1.5 rounded-lg text-fg-muted hover:text-fg-secondary hover:bg-surface-muted transition-colors"
-                  title="MCP Servers"
-                >
-                  <Plug size={20} />
-                </motion.button>
-              )}
-
-              {/* 命令按钮 */}
-              {onOpenCommands && (
-                <motion.button
-                  whileHover={{ scale: 1.1 }}
-                  whileTap={{ scale: 0.9 }}
-                  onClick={onOpenCommands}
-                  className="p-1.5 rounded-lg text-fg-muted hover:text-fg-secondary hover:bg-surface-muted transition-colors"
-                  title="Commands"
-                >
-                  <Terminal size={20} />
-                </motion.button>
-              )}
-
               {/* Sessions 按钮 */}
               {onOpenSessions && (
                 <motion.button
@@ -247,6 +170,18 @@ export function ChatPage({
                   <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>