diff --git a/desktop/src-tauri/Cargo.lock b/desktop/src-tauri/Cargo.lock
index 843f694..97fe206 100644
--- a/desktop/src-tauri/Cargo.lock
+++ b/desktop/src-tauri/Cargo.lock
@@ -735,6 +735,7 @@ dependencies = [
  "dirs 5.0.1",
  "fantoccini",
  "futures",
+ "keyring",
  "regex",
  "reqwest 0.11.27",
  "serde",
@@ -2117,6 +2118,16 @@ dependencies = [
  "unicode-segmentation",
 ]
 
+[[package]]
+name = "keyring"
+version = "3.6.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "eebcc3aff044e5944a8fbaf69eb277d11986064cba30c468730e8b9909fb551c"
+dependencies = [
+ "log",
+ "zeroize",
+]
+
 [[package]]
 name = "kuchikiki"
 version = "0.8.8-speedreader"
@@ -5913,6 +5924,12 @@ dependencies = [
  "synstructure",
 ]
 
+[[package]]
+name = "zeroize"
+version = "1.8.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b97154e67e32c85465826e8bcc1c59429aaaf107c1e4a9e53c8d8ccd5eff88d0"
+
 [[package]]
 name = "zerotrie"
 version = "0.2.3"
diff --git a/desktop/src-tauri/Cargo.toml b/desktop/src-tauri/Cargo.toml
index 3551ace..06f1b74 100644
--- a/desktop/src-tauri/Cargo.toml
+++ b/desktop/src-tauri/Cargo.toml
@@ -35,3 +35,6 @@ base64 = "0.22"
 thiserror = "2"
 uuid = { version = "1", features = ["v4", "serde"] }
 
+# Secure storage (OS keyring/keychain)
+keyring = "3"
+
diff --git a/desktop/src-tauri/src/lib.rs b/desktop/src-tauri/src/lib.rs
index e8e761f..7b276b0 100644
--- a/desktop/src-tauri/src/lib.rs
+++ b/desktop/src-tauri/src/lib.rs
@@ -15,6 +15,9 @@ mod llm;
 // Browser automation module (Fantoccini-based Browser Hand)
 mod browser;
 
+// Secure storage module for OS keyring/keychain
+mod secure_storage;
+
 use serde::Serialize;
 use serde_json::{json, Value};
 use std::fs;
@@ -1066,7 +1069,12 @@ pub fn run() {
             browser::commands::browser_element_screenshot,
             browser::commands::browser_get_source,
             browser::commands::browser_scrape_page,
-            browser::commands::browser_fill_form
+            browser::commands::browser_fill_form,
+            // Secure storage commands (OS keyring/keychain)
+            secure_storage::secure_store_set,
+            secure_storage::secure_store_get,
+            secure_storage::secure_store_delete,
+            secure_storage::secure_store_is_available
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
diff --git a/desktop/src/App.tsx b/desktop/src/App.tsx
index 4920ad9..0835b17 100644
--- a/desktop/src/App.tsx
+++ b/desktop/src/App.tsx
@@ -5,19 +5,21 @@ import { Sidebar, MainViewType } from './components/Sidebar';
 import { ChatArea } from './components/ChatArea';
 import { RightPanel } from './components/RightPanel';
 import { SettingsLayout } from './components/Settings/SettingsLayout';
-import { HandTaskPanel } from './components/HandTaskPanel';
-import { SchedulerPanel } from './components/SchedulerPanel';
+import { AutomationPanel } from './components/Automation';
 import { TeamCollaborationView } from './components/TeamCollaborationView';
+import { TeamOrchestrator } from './components/TeamOrchestrator';
 import { SwarmDashboard } from './components/SwarmDashboard';
 import { SkillMarket } from './components/SkillMarket';
 import { AgentOnboardingWizard } from './components/AgentOnboardingWizard';
 import { HandApprovalModal } from './components/HandApprovalModal';
+import { TopBar } from './components/TopBar';
+import { DetailDrawer } from './components/DetailDrawer';
 import { useGatewayStore, type HandRun } from './store/gatewayStore';
 import { useTeamStore } from './store/teamStore';
 import { useChatStore } from './store/chatStore';
 import { getStoredGatewayToken } from './lib/gateway-client';
 import { pageVariants, defaultTransition, fadeInVariants } from './lib/animations';
-import { Bot, Users, Loader2 } from 'lucide-react';
+import { Users, Loader2, Settings } from 'lucide-react';
 import { EmptyState } from './components/ui';
 import { isTauriRuntime, getLocalGatewayStatus, startLocalGateway } from './lib/tauri-gateway';
 import { useOnboarding } from './lib/use-onboarding';
@@ -40,15 +42,16 @@ function BootstrapScreen({ status }: { status: string }) {
 function App() {
   const [view, setView] = useState<View>('main');
   const [mainContentView, setMainContentView] = useState<MainViewType>('chat');
-  const [selectedHandId, setSelectedHandId] = useState<string | undefined>(undefined);
   const [selectedTeamId, setSelectedTeamId] = useState<string | undefined>(undefined);
   const [bootstrapping, setBootstrapping] = useState(true);
   const [bootstrapStatus, setBootstrapStatus] = useState('Initializing...');
   const [showOnboarding, setShowOnboarding] = useState(false);
+  const [showDetailDrawer, setShowDetailDrawer] = useState(false);
 
   // Hand Approval state
   const [pendingApprovalRun, setPendingApprovalRun] = useState<HandRun | null>(null);
   const [showApprovalModal, setShowApprovalModal] = useState(false);
+  const [teamViewMode, setTeamViewMode] = useState<'collaboration' | 'orchestrator'>('collaboration');
 
   const { connect, hands, approveHand, loadHands } = useGatewayStore();
   const { activeTeam, setActiveTeam, teams } = useTeamStore();
@@ -182,13 +185,9 @@ function App() {
     setShowOnboarding(false);
   };
 
-  // 当切换到非 hands 视图时清除选中的 Hand
+  // 处理主视图切换
   const handleMainViewChange = (view: MainViewType) => {
     setMainContentView(view);
-    if (view !== 'hands') {
-      // 可选：清除选中的 Hand
-      // setSelectedHandId(undefined);
-    }
   };
 
   const handleSelectTeam = (teamId: string) => {
@@ -227,84 +226,120 @@ function App() {
   }
 
   return (
-    <div className="h-screen flex overflow-hidden text-gray-800 text-sm">
+    <div className="h-screen flex overflow-hidden text-gray-800 text-sm bg-white dark:bg-gray-950">
       {/* 左侧边栏 */}
       <Sidebar
         onOpenSettings={() => setView('settings')}
         onMainViewChange={handleMainViewChange}
-        selectedHandId={selectedHandId}
-        onSelectHand={setSelectedHandId}
         selectedTeamId={selectedTeamId}
         onSelectTeam={handleSelectTeam}
       />
 
-      {/* 中间区域 */}
-      <AnimatePresence mode="wait">
-        <motion.main
-          key={mainContentView}
-          variants={pageVariants}
-          initial="initial"
-          animate="animate"
-          exit="exit"
-          transition={defaultTransition}
-          className="flex-1 flex flex-col bg-white relative overflow-hidden"
-        >
-          {mainContentView === 'hands' && selectedHandId ? (
-            <HandTaskPanel
-              handId={selectedHandId}
-              onBack={() => setSelectedHandId(undefined)}
-            />
-          ) : mainContentView === 'hands' ? (
-            <EmptyState
-              icon={<Bot className="w-8 h-8" />}
-              title="Select a Hand"
-              description="Choose an autonomous capability package from the list on the left to view its task list and execution results."
-            />
-          ) : mainContentView === 'workflow' ? (
-            <motion.div
-              variants={fadeInVariants}
-              initial="initial"
-              animate="animate"
-              className="flex-1 overflow-y-auto"
-            >
-              <SchedulerPanel />
-            </motion.div>
-          ) : mainContentView === 'team' ? (
-            activeTeam ? (
-              <TeamCollaborationView teamId={activeTeam.id} />
-            ) : (
-              <EmptyState
-                icon={<Users className="w-8 h-8" />}
-                title="Select or Create a Team"
-                description="Choose a team from the list on the left, or click + to create a new multi-Agent collaboration team."
-              />
-            )
-          ) : mainContentView === 'swarm' ? (
-            <motion.div
-              variants={fadeInVariants}
-              initial="initial"
-              animate="animate"
-              className="flex-1 overflow-hidden"
-            >
-              <SwarmDashboard />
-            </motion.div>
-          ) : mainContentView === 'skills' ? (
-            <motion.div
-              variants={fadeInVariants}
-              initial="initial"
-              animate="animate"
-              className="flex-1 overflow-hidden"
-            >
-              <SkillMarket />
-            </motion.div>
-          ) : (
-            <ChatArea />
-          )}
-        </motion.main>
-      </AnimatePresence>
+      {/* 主内容区 */}
+      <div className="flex-1 flex flex-col overflow-hidden">
+        {/* 顶部工具栏 */}
+        <TopBar
+          title="ZCLAW"
+          onOpenDetail={() => setShowDetailDrawer(true)}
+        />
 
-      {/* 右侧边栏 */}
-      <RightPanel />
+        {/* 内容区域 */}
+        <AnimatePresence mode="wait">
+          <motion.main
+            key={mainContentView}
+            variants={pageVariants}
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            transition={defaultTransition}
+            className="flex-1 overflow-hidden relative"
+          >
+            {mainContentView === 'automation' ? (
+              <motion.div
+                variants={fadeInVariants}
+                initial="initial"
+                animate="animate"
+                className="h-full overflow-y-auto"
+              >
+                <AutomationPanel />
+              </motion.div>
+            ) : mainContentView === 'team' ? (
+              activeTeam ? (
+                <div className="h-full flex flex-col">
+                  {/* Team View Tabs */}
+                  <div className="flex border-b border-gray-200 dark:border-gray-700 px-4">
+                    <button
+                      onClick={() => setTeamViewMode('collaboration')}
+                      className={`flex items-center gap-1.5 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors ${
+                        teamViewMode === 'collaboration'
+                          ? 'text-orange-600 dark:text-orange-400 border-orange-500'
+                          : 'text-gray-500 dark:text-gray-400 border-transparent hover:text-gray-700 dark:hover:text-gray-300'
+                      }`}
+                    >
+                      <Users className="w-4 h-4" />
+                      协作视图
+                    </button>
+                    <button
+                      onClick={() => setTeamViewMode('orchestrator')}
+                      className={`flex items-center gap-1.5 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors ${
+                        teamViewMode === 'orchestrator'
+                          ? 'text-orange-600 dark:text-orange-400 border-orange-500'
+                          : 'text-gray-500 dark:text-gray-400 border-transparent hover:text-gray-700 dark:hover:text-gray-300'
+                      }`}
+                    >
+                      <Settings className="w-4 h-4" />
+                      编排管理
+                    </button>
+                  </div>
+                  {/* Tab Content */}
+                  <div className="flex-1 overflow-hidden">
+                    {teamViewMode === 'orchestrator' ? (
+                      <TeamOrchestrator isOpen={true} onClose={() => setTeamViewMode('collaboration')} />
+                    ) : (
+                      <TeamCollaborationView teamId={activeTeam.id} />
+                    )}
+                  </div>
+                </div>
+              ) : (
+                <EmptyState
+                  icon={<Users className="w-8 h-8" />}
+                  title="选择或创建团队"
+                  description="从左侧列表中选择一个团队，或点击 + 创建新的多 Agent 协作团队。"
+                />
+              )
+            ) : mainContentView === 'swarm' ? (
+              <motion.div
+                variants={fadeInVariants}
+                initial="initial"
+                animate="animate"
+                className="h-full overflow-hidden"
+              >
+                <SwarmDashboard />
+              </motion.div>
+            ) : mainContentView === 'skills' ? (
+              <motion.div
+                variants={fadeInVariants}
+                initial="initial"
+                animate="animate"
+                className="h-full overflow-hidden"
+              >
+                <SkillMarket />
+              </motion.div>
+            ) : (
+              <ChatArea />
+            )}
+          </motion.main>
+        </AnimatePresence>
+      </div>
+
+      {/* 详情抽屉 - 按需显示 */}
+      <DetailDrawer
+        open={showDetailDrawer}
+        onClose={() => setShowDetailDrawer(false)}
+        title="详情"
+      >
+        <RightPanel />
+      </DetailDrawer>
 
       {/* Hand Approval Modal (global) */}
       <HandApprovalModal
diff --git a/desktop/src/components/ActiveLearningPanel.tsx b/desktop/src/components/ActiveLearningPanel.tsx
index 1c22d34..ac76c57 100644
--- a/desktop/src/components/ActiveLearningPanel.tsx
+++ b/desktop/src/components/ActiveLearningPanel.tsx
@@ -14,8 +14,9 @@ import {
   X,
   Download,
   Clock,
+  BarChart3,
 } from 'lucide-react';
-import { Button, EmptyState } from './ui';
+import { Button, EmptyState, Badge } from './ui';
 import { useActiveLearningStore } from '../store/activeLearningStore';
 import {
   type LearningEvent,
@@ -23,6 +24,7 @@ import {
   type LearningEventType,
 } from '../types/active-learning';
 import { useChatStore } from '../store/chatStore';
+import { cardHover, defaultTransition } from '../lib/animations';
 
 // === Constants ===
 
@@ -58,10 +60,12 @@ function EventItem({ event, onAcknowledge }: EventItemProps) {
       initial={{ opacity: 0, y: 10 }}
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: -10 }}
+      whileHover={cardHover}
+      transition={defaultTransition}
       className={`p-3 rounded-lg border ${
         event.acknowledged
-          ? 'bg-gray-800/30 border-gray-700'
-          : 'bg-blue-900/20 border-blue-700'
+          ? 'bg-gray-50 dark:bg-gray-800 border-gray-100 dark:border-gray-700'
+          : 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-700'
       }`}
     >
       <div className="flex items-start justify-between gap-2">
@@ -70,11 +74,11 @@ function EventItem({ event, onAcknowledge }: EventItemProps) {
             <span className={`text-xs px-2 py-0.5 rounded ${typeInfo.color}`}>
               {typeInfo.label}
             </span>
-            <span className="text-xs text-gray-500">{timeAgo}</span>
+            <span className="text-xs text-gray-500 dark:text-gray-400">{timeAgo}</span>
           </div>
-          <p className="text-sm text-gray-300 truncate">{event.observation}</p>
+          <p className="text-sm text-gray-700 dark:text-gray-300 truncate">{event.observation}</p>
           {event.inferredPreference && (
-            <p className="text-xs text-gray-500 mt-1">→ {event.inferredPreference}</p>
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">→ {event.inferredPreference}</p>
           )}
         </div>
 
@@ -85,7 +89,7 @@ function EventItem({ event, onAcknowledge }: EventItemProps) {
         )}
       </div>
 
-      <div className="flex items-center gap-2 mt-2 text-xs text-gray-500">
+      <div className="flex items-center gap-2 mt-2 text-xs text-gray-500 dark:text-gray-400">
         <span>置信度: {(event.confidence * 100).toFixed(0)}%</span>
         {event.appliedCount > 0 && (
           <span>• 应用 {event.appliedCount} 次</span>
@@ -111,13 +115,15 @@ function SuggestionCard({ suggestion, onApply, onDismiss }: SuggestionCardProps)
       initial={{ opacity: 0, scale: 0.95 }}
       animate={{ opacity: 1, scale: 1 }}
       exit={{ opacity: 0, scale: 0.95 }}
-      className="p-4 bg-gradient-to-r from-amber-900/20 to-transparent rounded-lg border border-amber-700/50"
+      whileHover={cardHover}
+      transition={defaultTransition}
+      className="p-4 bg-gradient-to-r from-amber-50 to-transparent dark:from-amber-900/20 dark:to-transparent rounded-lg border border-amber-200 dark:border-amber-700/50"
     >
       <div className="flex items-start gap-3">
-        <Lightbulb className="w-5 h-5 text-amber-400 flex-shrink-0 mt-0.5" />
+        <Lightbulb className="w-5 h-5 text-amber-500 flex-shrink-0 mt-0.5" />
         <div className="flex-1 min-w-0">
-          <p className="text-sm text-gray-200">{suggestion.suggestion}</p>
-          <div className="flex items-center gap-2 mt-2 text-xs text-gray-500">
+          <p className="text-sm text-gray-700 dark:text-gray-200">{suggestion.suggestion}</p>
+          <div className="flex items-center gap-2 mt-2 text-xs text-gray-500 dark:text-gray-400">
             <span>置信度: {(suggestion.confidence * 100).toFixed(0)}%</span>
             {daysLeft > 0 && <span>• {daysLeft} 天后过期</span>}
           </div>
@@ -204,63 +210,77 @@ export function ActiveLearningPanel({ className = '' }: ActiveLearningPanelProps
   }, [agentId, clearEvents]);
 
   return (
-    <div className={`flex flex-col h-full bg-gray-900 ${className}`}>
-      {/* 夨览栏 */}
-      <div className="flex items-center justify-between p-4 border-b border-gray-800">
-        <div className="flex items-center gap-2">
-          <Brain className="w-5 h-5 text-blue-400" />
-          <h2 className="text-lg font-semibold text-white">主动学习</h2>
-        </div>
-
-        <div className="flex items-center gap-2">
-          <label className="flex items-center gap-2 text-sm text-gray-400">
+    <div className={`space-y-4 ${className}`}>
+      {/* 启用开关和导出 */}
+      <motion.div
+        whileHover={cardHover}
+        transition={defaultTransition}
+        className="bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 p-3"
+      >
+        <div className="flex items-center justify-between">
+          <label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
+            <Brain className="w-4 h-4 text-blue-500" />
+            <span>主动学习</span>
+            <Badge variant={config.enabled ? 'success' : 'default'} className="ml-1">
+              {config.enabled ? '已启用' : '已禁用'}
+            </Badge>
+          </label>
+          <div className="flex items-center gap-2">
             <input
               type="checkbox"
               checked={config.enabled}
               onChange={(e) => setConfig({ enabled: e.target.checked })}
-              className="rounded"
+              className="rounded border-gray-300 dark:border-gray-600"
             />
-            启用
-          </label>
-
-          <Button variant="ghost" size="sm" onClick={handleExport}>
-            <Download className="w-4 h-4" />
-          </Button>
+            <Button variant="ghost" size="sm" onClick={handleExport} title="导出数据">
+              <Download className="w-4 h-4" />
+            </Button>
+          </div>
         </div>
-      </div>
+      </motion.div>
 
       {/* 统计概览 */}
-      <div className="grid grid-cols-4 gap-2 p-3 bg-gray-800/30">
-        <div className="text-center">
-          <div className="text-2xl font-bold text-blue-400">{stats.totalEvents}</div>
-          <div className="text-xs text-gray-500">学习事件</div>
-        </div>
-        <div className="text-center">
-          <div className="text-2xl font-bold text-green-400">{stats.totalPatterns}</div>
-          <div className="text-xs text-gray-500">学习模式</div>
-        </div>
-        <div className="text-center">
-          <div className="text-2xl font-bold text-amber-400">{agentSuggestions.length}</div>
-          <div className="text-xs text-gray-500">待处理建议</div>
-        </div>
-        <div className="text-center">
-          <div className="text-2xl font-bold text-purple-400">
-            {(stats.avgConfidence * 100).toFixed(0)}%
+      <motion.div
+        whileHover={cardHover}
+        transition={defaultTransition}
+        className="bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 p-3"
+      >
+        <h3 className="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-2 flex items-center gap-1.5">
+          <BarChart3 className="w-3.5 h-3.5" />
+          学习统计
+        </h3>
+        <div className="grid grid-cols-4 gap-2">
+          <div className="text-center">
+            <div className="text-lg font-bold text-blue-500">{stats.totalEvents}</div>
+            <div className="text-xs text-gray-500 dark:text-gray-400">事件</div>
+          </div>
+          <div className="text-center">
+            <div className="text-lg font-bold text-green-500">{stats.totalPatterns}</div>
+            <div className="text-xs text-gray-500 dark:text-gray-400">模式</div>
+          </div>
+          <div className="text-center">
+            <div className="text-lg font-bold text-amber-500">{agentSuggestions.length}</div>
+            <div className="text-xs text-gray-500 dark:text-gray-400">建议</div>
+          </div>
+          <div className="text-center">
+            <div className="text-lg font-bold text-purple-500">
+              {(stats.avgConfidence * 100).toFixed(0)}%
+            </div>
+            <div className="text-xs text-gray-500 dark:text-gray-400">置信度</div>
           </div>
-          <div className="text-xs text-gray-500">平均置信度</div>
         </div>
-      </div>
+      </motion.div>
 
       {/* Tab 切换 */}
-      <div className="flex border-b border-gray-800">
+      <div className="flex border-b border-gray-200 dark:border-gray-700">
         {(['suggestions', 'events', 'patterns'] as const).map(tab => (
           <button
             key={tab}
             onClick={() => setActiveTab(tab)}
             className={`flex-1 py-2 text-sm font-medium transition-colors ${
               activeTab === tab
-                ? 'text-blue-400 border-b-2 border-blue-400'
-                : 'text-gray-500 hover:text-gray-300'
+                ? 'text-emerald-600 dark:text-emerald-400 border-b-2 border-emerald-500'
+                : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
             }`}
           >
             {tab === 'suggestions' && '建议'}
@@ -271,7 +291,7 @@ export function ActiveLearningPanel({ className = '' }: ActiveLearningPanelProps
       </div>
 
       {/* 内容区域 */}
-      <div className="flex-1 overflow-y-auto p-3">
+      <div className="space-y-3">
         <AnimatePresence mode="wait">
           {activeTab === 'suggestions' && (
             <motion.div
@@ -283,9 +303,10 @@ export function ActiveLearningPanel({ className = '' }: ActiveLearningPanelProps
             >
               {agentSuggestions.length === 0 ? (
                 <EmptyState
-                  icon={<Lightbulb className="w-12 h-12" />}
+                  icon={<Lightbulb className="w-8 h-8" />}
                   title="暂无学习建议"
                   description="系统会根据您的反馈自动生成改进建议"
+                  className="py-4"
                 />
               ) : (
                 agentSuggestions.map(suggestion => (
@@ -310,9 +331,10 @@ export function ActiveLearningPanel({ className = '' }: ActiveLearningPanelProps
             >
               {agentEvents.length === 0 ? (
                 <EmptyState
-                  icon={<Clock className="w-12 h-12" />}
+                  icon={<Clock className="w-8 h-8" />}
                   title="暂无学习事件"
                   description="开始对话后，系统会自动记录学习事件"
+                  className="py-4"
                 />
               ) : (
                 agentEvents.map(event => (
@@ -336,32 +358,35 @@ export function ActiveLearningPanel({ className = '' }: ActiveLearningPanelProps
             >
               {agentPatterns.length === 0 ? (
                 <EmptyState
-                  icon={<TrendingUp className="w-12 h-12" />}
+                  icon={<TrendingUp className="w-8 h-8" />}
                   title="暂无学习模式"
                   description="积累更多反馈后，系统会识别出行为模式"
+                  className="py-4"
                 />
               ) : (
                 agentPatterns.map(pattern => {
                   const typeInfo = PATTERN_TYPE_LABELS[pattern.type] || { label: pattern.type, icon: '📊' };
                   return (
-                    <div
+                    <motion.div
                       key={`${pattern.agentId}-${pattern.pattern}`}
-                      className="p-3 bg-gray-800/50 rounded-lg border border-gray-700"
+                      whileHover={cardHover}
+                      transition={defaultTransition}
+                      className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700"
                     >
                       <div className="flex items-center justify-between mb-2">
                         <div className="flex items-center gap-2">
                           <span>{typeInfo.icon}</span>
-                          <span className="text-sm font-medium text-white">{typeInfo.label}</span>
+                          <span className="text-sm font-medium text-gray-800 dark:text-gray-200">{typeInfo.label}</span>
                         </div>
-                        <span className="text-xs px-2 py-0.5 rounded bg-gray-700 text-gray-300">
+                        <span className="text-xs px-2 py-0.5 rounded bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300">
                           {(pattern.confidence * 100).toFixed(0)}%
                         </span>
                       </div>
-                      <p className="text-sm text-gray-400">{pattern.description}</p>
-                      <div className="mt-2 text-xs text-gray-500">
+                      <p className="text-sm text-gray-600 dark:text-gray-400">{pattern.description}</p>
+                      <div className="mt-2 text-xs text-gray-500 dark:text-gray-400">
                         {pattern.examples.length} 个示例
                       </div>
-                    </div>
+                    </motion.div>
                   );
                 })
               )}
@@ -371,13 +396,13 @@ export function ActiveLearningPanel({ className = '' }: ActiveLearningPanelProps
       </div>
 
       {/* 底部操作栏 */}
-      <div className="flex items-center justify-between p-3 border-t border-gray-800">
-        <div className="text-xs text-gray-500">
+      <div className="flex items-center justify-between pt-2 border-t border-gray-100 dark:border-gray-700">
+        <div className="text-xs text-gray-500 dark:text-gray-400">
           上次更新: {agentEvents[0] ? getTimeAgo(agentEvents[0].timestamp) : '无'}
         </div>
-        <Button variant="ghost" size="sm" onClick={handleClear} className="text-red-400">
+        <Button variant="ghost" size="sm" onClick={handleClear} className="text-red-500 hover:text-red-600">
           <X className="w-3 h-3 mr-1" />
-          清除数据
+          清除
         </Button>
       </div>
     </div>
diff --git a/desktop/src/components/Automation/ApprovalQueue.tsx b/desktop/src/components/Automation/ApprovalQueue.tsx
new file mode 100644
index 0000000..5b8c9bd
--- /dev/null
+++ b/desktop/src/components/Automation/ApprovalQueue.tsx
@@ -0,0 +1,352 @@
+/**
+ * ApprovalQueue - Approval Management Component
+ *
+ * Displays pending approvals for hand executions that require
+ * human approval, with approve/reject actions.
+ *
+ * @module components/Automation/ApprovalQueue
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { useHandStore } from '../../store/handStore';
+import type { Approval, ApprovalStatus } from '../../store/handStore';
+import {
+  Clock,
+  CheckCircle,
+  XCircle,
+  AlertTriangle,
+  RefreshCw,
+} from 'lucide-react';
+import { useToast } from '../ui/Toast';
+
+// === Status Config ===
+
+const STATUS_CONFIG: Record<ApprovalStatus, {
+  label: string;
+  className: string;
+  icon: typeof CheckCircle;
+}> = {
+  pending: {
+    label: '待处理',
+    className: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
+    icon: Clock,
+  },
+  approved: {
+    label: '已批准',
+    className: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
+    icon: CheckCircle,
+  },
+  rejected: {
+    label: '已拒绝',
+    className: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
+    icon: XCircle,
+  },
+  expired: {
+    label: '已过期',
+    className: 'bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400',
+    icon: AlertTriangle,
+  },
+};
+
+// === Component Props ===
+
+interface ApprovalQueueProps {
+  showFilters?: boolean;
+  maxHeight?: string;
+  onApprove?: (approval: Approval) => void;
+  onReject?: (approval: Approval) => void;
+}
+
+// === Approval Card Component ===
+
+interface ApprovalCardProps {
+  approval: Approval;
+  onApprove: () => Promise<void>;
+  onReject: (reason: string) => Promise<void>;
+  isProcessing: boolean;
+}
+
+function ApprovalCard({ approval, onApprove, onReject, isProcessing }: ApprovalCardProps) {
+  const [showRejectInput, setShowRejectInput] = useState(false);
+  const [rejectReason, setRejectReason] = useState('');
+  const StatusIcon = STATUS_CONFIG[approval.status].icon;
+
+  const handleReject = useCallback(async () => {
+    if (!rejectReason.trim()) {
+      setShowRejectInput(true);
+      return;
+    }
+    await onReject(rejectReason);
+    setShowRejectInput(false);
+    setRejectReason('');
+  }, [rejectReason, onReject]);
+
+  const timeAgo = useCallback((dateStr: string) => {
+    const date = new Date(dateStr);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMins / 60);
+    const diffDays = Math.floor(diffHours / 24);
+
+    if (diffMins < 1) return '刚刚';
+    if (diffMins < 60) return `${diffMins} 分钟前`;
+    if (diffHours < 24) return `${diffHours} 小时前`;
+    return `${diffDays} 天前`;
+  }, []);
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+      {/* Header */}
+      <div className="flex items-start justify-between gap-3 mb-3">
+        <div className="flex items-center gap-2">
+          <span className={`px-2 py-0.5 rounded text-xs ${STATUS_CONFIG[approval.status].className}`}>
+            <StatusIcon className="w-3 h-3 inline mr-1" />
+            {STATUS_CONFIG[approval.status].label}
+          </span>
+          <span className="text-xs text-gray-500 dark:text-gray-400">
+            {timeAgo(approval.requestedAt)}
+          </span>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="mb-3">
+        <h4 className="font-medium text-gray-900 dark:text-white mb-1">
+          {approval.handName}
+        </h4>
+        {approval.reason && (
+          <p className="text-sm text-gray-600 dark:text-gray-400">{approval.reason}</p>
+        )}
+        {approval.action && (
+          <p className="text-xs text-gray-500 dark:text-gray-500 mt-1">
+            操作: {approval.action}
+          </p>
+        )}
+      </div>
+
+      {/* Params Preview */}
+      {approval.params && Object.keys(approval.params).length > 0 && (
+        <div className="mb-3 p-2 bg-gray-50 dark:bg-gray-900 rounded text-xs">
+          <p className="text-gray-500 dark:text-gray-400 mb-1">参数:</p>
+          <pre className="text-gray-700 dark:text-gray-300 overflow-x-auto">
+            {JSON.stringify(approval.params, null, 2)}
+          </pre>
+        </div>
+      )}
+
+      {/* Reject Input */}
+      {showRejectInput && (
+        <div className="mb-3">
+          <textarea
+            value={rejectReason}
+            onChange={(e) => setRejectReason(e.target.value)}
+            placeholder="请输入拒绝原因..."
+            className="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white resize-none"
+            rows={2}
+          />
+        </div>
+      )}
+
+      {/* Actions */}
+      {approval.status === 'pending' && (
+        <div className="flex items-center gap-2">
+          <button
+            onClick={onApprove}
+            disabled={isProcessing}
+            className="flex-1 px-3 py-1.5 text-sm bg-green-500 text-white rounded-md hover:bg-green-600 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-1"
+          >
+            {isProcessing ? (
+              <RefreshCw className="w-3.5 h-3.5 animate-spin" />
+            ) : (
+              <CheckCircle className="w-3.5 h-3.5" />
+            )}
+            批准
+          </button>
+          <button
+            onClick={handleReject}
+            disabled={isProcessing}
+            className="flex-1 px-3 py-1.5 text-sm bg-red-500 text-white rounded-md hover:bg-red-600 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-1"
+          >
+            {isProcessing ? (
+              <RefreshCw className="w-3.5 h-3.5 animate-spin" />
+            ) : (
+              <XCircle className="w-3.5 h-3.5" />
+            )}
+            拒绝
+          </button>
+        </div>
+      )}
+
+      {/* Response Info */}
+      {approval.status !== 'pending' && approval.respondedAt && (
+        <div className="text-xs text-gray-500 dark:text-gray-400">
+          {approval.respondedBy && `由 ${approval.respondedBy} `}
+          {STATUS_CONFIG[approval.status].label}
+          {approval.responseReason && ` - ${approval.responseReason}`}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// === Main Component ===
+
+export function ApprovalQueue({
+  showFilters = true,
+  maxHeight = '400px',
+  onApprove,
+  onReject,
+}: ApprovalQueueProps) {
+  const { toast } = useToast();
+
+  // Store state
+  const approvals = useHandStore(s => s.approvals);
+  const loadApprovals = useHandStore(s => s.loadApprovals);
+  const respondToApproval = useHandStore(s => s.respondToApproval);
+  const isLoading = useHandStore(s => s.isLoading);
+
+  // Local state
+  const [statusFilter, setStatusFilter] = useState<ApprovalStatus | 'all'>('pending');
+  const [processingIds, setProcessingIds] = useState<Set<string>>(new Set());
+
+  // Load approvals on mount
+  useEffect(() => {
+    loadApprovals(statusFilter === 'all' ? undefined : statusFilter);
+  }, [loadApprovals, statusFilter]);
+
+  // Handle approve
+  const handleApprove = useCallback(async (approval: Approval) => {
+    setProcessingIds(prev => new Set(prev).add(approval.id));
+    try {
+      await respondToApproval(approval.id, true);
+      toast(`已批准: ${approval.handName}`, 'success');
+      onApprove?.(approval);
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      toast(`批准失败: ${errorMsg}`, 'error');
+    } finally {
+      setProcessingIds(prev => {
+        const next = new Set(prev);
+        next.delete(approval.id);
+        return next;
+      });
+    }
+  }, [respondToApproval, toast, onApprove]);
+
+  // Handle reject
+  const handleReject = useCallback(async (approval: Approval, reason: string) => {
+    setProcessingIds(prev => new Set(prev).add(approval.id));
+    try {
+      await respondToApproval(approval.id, false, reason);
+      toast(`已拒绝: ${approval.handName}`, 'success');
+      onReject?.(approval);
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      toast(`拒绝失败: ${errorMsg}`, 'error');
+    } finally {
+      setProcessingIds(prev => {
+        const next = new Set(prev);
+        next.delete(approval.id);
+        return next;
+      });
+    }
+  }, [respondToApproval, toast, onReject]);
+
+  // Filter approvals
+  const filteredApprovals = statusFilter === 'all'
+    ? approvals
+    : approvals.filter(a => a.status === statusFilter);
+
+  // Stats
+  const stats = {
+    pending: approvals.filter(a => a.status === 'pending').length,
+    approved: approvals.filter(a => a.status === 'approved').length,
+    rejected: approvals.filter(a => a.status === 'rejected').length,
+    expired: approvals.filter(a => a.status === 'expired').length,
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+        <div className="flex items-center gap-2">
+          <Clock className="w-5 h-5 text-orange-500" />
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+            审批队列
+          </h2>
+          {stats.pending > 0 && (
+            <span className="px-2 py-0.5 text-xs font-medium bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400 rounded-full">
+              {stats.pending} 待处理
+            </span>
+          )}
+        </div>
+        <button
+          onClick={() => loadApprovals(statusFilter === 'all' ? undefined : statusFilter)}
+          disabled={isLoading}
+          className="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 disabled:opacity-50"
+          title="刷新"
+        >
+          <RefreshCw className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
+        </button>
+      </div>
+
+      {/* Filters */}
+      {showFilters && (
+        <div className="flex items-center gap-2 px-4 py-2 border-b border-gray-200 dark:border-gray-700 overflow-x-auto">
+          {[
+            { value: 'pending', label: '待处理', count: stats.pending },
+            { value: 'approved', label: '已批准', count: stats.approved },
+            { value: 'rejected', label: '已拒绝', count: stats.rejected },
+            { value: 'all', label: '全部', count: approvals.length },
+          ].map(option => (
+            <button
+              key={option.value}
+              onClick={() => setStatusFilter(option.value as ApprovalStatus | 'all')}
+              className={`flex items-center gap-1 px-3 py-1 text-sm rounded-full whitespace-nowrap transition-colors ${
+                statusFilter === option.value
+                  ? 'bg-orange-500 text-white'
+                  : 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
+              }`}
+            >
+              {option.label}
+              <span className={`text-xs ${statusFilter === option.value ? 'text-white/80' : 'text-gray-500 dark:text-gray-400'}`}>
+                ({option.count})
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-4" style={{ maxHeight }}>
+        {isLoading && approvals.length === 0 ? (
+          <div className="flex items-center justify-center h-32">
+            <RefreshCw className="w-6 h-6 animate-spin text-gray-400" />
+          </div>
+        ) : filteredApprovals.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-32 text-center">
+            <Clock className="w-8 h-8 text-gray-400 mb-2" />
+            <p className="text-sm text-gray-500 dark:text-gray-400">
+              {statusFilter === 'pending' ? '暂无待处理的审批' : '暂无审批记录'}
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {filteredApprovals.map(approval => (
+              <ApprovalCard
+                key={approval.id}
+                approval={approval}
+                onApprove={() => handleApprove(approval)}
+                onReject={(reason) => handleReject(approval, reason)}
+                isProcessing={processingIds.has(approval.id)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default ApprovalQueue;
diff --git a/desktop/src/components/Automation/ExecutionResult.tsx b/desktop/src/components/Automation/ExecutionResult.tsx
new file mode 100644
index 0000000..dec5a3c
--- /dev/null
+++ b/desktop/src/components/Automation/ExecutionResult.tsx
@@ -0,0 +1,395 @@
+/**
+ * ExecutionResult - Execution Result Display Component
+ *
+ * Displays the result of hand or workflow executions with
+ * status, output, and error information.
+ *
+ * @module components/Automation/ExecutionResult
+ */
+
+import { useState, useCallback, useMemo } from 'react';
+import type { RunInfo } from '../../types/automation';
+import {
+  CheckCircle,
+  XCircle,
+  Clock,
+  AlertTriangle,
+  ChevronDown,
+  ChevronUp,
+  Copy,
+  Download,
+  RefreshCw,
+  ExternalLink,
+  FileText,
+  Code,
+  Image,
+  FileSpreadsheet,
+} from 'lucide-react';
+import { useToast } from '../ui/Toast';
+
+// === Status Config ===
+
+const STATUS_CONFIG = {
+  completed: {
+    label: '完成',
+    icon: CheckCircle,
+    className: 'text-green-500',
+    bgClass: 'bg-green-50 dark:bg-green-900/20',
+  },
+  failed: {
+    label: '失败',
+    icon: XCircle,
+    className: 'text-red-500',
+    bgClass: 'bg-red-50 dark:bg-red-900/20',
+  },
+  running: {
+    label: '运行中',
+    icon: RefreshCw,
+    className: 'text-blue-500 animate-spin',
+    bgClass: 'bg-blue-50 dark:bg-blue-900/20',
+  },
+  needs_approval: {
+    label: '待审批',
+    icon: AlertTriangle,
+    className: 'text-yellow-500',
+    bgClass: 'bg-yellow-50 dark:bg-yellow-900/20',
+  },
+  cancelled: {
+    label: '已取消',
+    icon: XCircle,
+    className: 'text-gray-500',
+    bgClass: 'bg-gray-50 dark:bg-gray-900/20',
+  },
+};
+
+// === Component Props ===
+
+interface ExecutionResultProps {
+  run: RunInfo;
+  itemType: 'hand' | 'workflow';
+  itemName: string;
+  onRerun?: () => void;
+  onViewDetails?: () => void;
+  compact?: boolean;
+}
+
+// === Helper Functions ===
+
+function formatDuration(startedAt: string, completedAt?: string): string {
+  const start = new Date(startedAt).getTime();
+  const end = completedAt ? new Date(completedAt).getTime() : Date.now();
+  const diffMs = end - start;
+
+  const seconds = Math.floor(diffMs / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+
+  if (hours > 0) {
+    return `${hours}h ${minutes % 60}m`;
+  }
+  if (minutes > 0) {
+    return `${minutes}m ${seconds % 60}s`;
+  }
+  return `${seconds}s`;
+}
+
+function detectOutputType(output: unknown): 'text' | 'json' | 'markdown' | 'code' | 'image' | 'data' {
+  if (!output) return 'text';
+
+  if (typeof output === 'string') {
+    // Check for image URL
+    if (output.match(/\.(png|jpg|jpeg|gif|webp|svg)$/i)) {
+      return 'image';
+    }
+    // Check for markdown
+    if (output.includes('#') || output.includes('**') || output.includes('```')) {
+      return 'markdown';
+    }
+    // Check for code
+    if (output.includes('function ') || output.includes('import ') || output.includes('class ')) {
+      return 'code';
+    }
+    // Try to parse as JSON
+    try {
+      JSON.parse(output);
+      return 'json';
+    } catch {
+      return 'text';
+    }
+  }
+
+  // Object/array types
+  if (typeof output === 'object') {
+    return 'json';
+  }
+
+  return 'text';
+}
+
+function formatOutput(output: unknown, type: string): string {
+  if (!output) return '无输出';
+
+  if (type === 'json') {
+    try {
+      return JSON.stringify(output, null, 2);
+    } catch {
+      return String(output);
+    }
+  }
+
+  return String(output);
+}
+
+// === Output Viewer Component ===
+
+interface OutputViewerProps {
+  output: unknown;
+  type: string;
+}
+
+function OutputViewer({ output, type }: OutputViewerProps) {
+  const [copied, setCopied] = useState(false);
+  const { toast } = useToast();
+
+  const handleCopy = useCallback(async () => {
+    const text = formatOutput(output, type);
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    toast('已复制到剪贴板', 'success');
+    setTimeout(() => setCopied(false), 2000);
+  }, [output, type, toast]);
+
+  const handleDownload = useCallback(() => {
+    const text = formatOutput(output, type);
+    const blob = new Blob([text], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `output-${Date.now()}.${type === 'json' ? 'json' : 'txt'}`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }, [output, type]);
+
+  // Image preview
+  if (type === 'image' && typeof output === 'string') {
+    return (
+      <div className="relative">
+        <img
+          src={output}
+          alt="Output"
+          className="max-w-full rounded-lg"
+        />
+        <div className="absolute top-2 right-2 flex gap-1">
+          <button
+            onClick={() => window.open(output, '_blank')}
+            className="p-1.5 bg-black/50 rounded hover:bg-black/70 text-white"
+          >
+            <ExternalLink className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  // Text/JSON/Code output
+  const content = formatOutput(output, type);
+
+  return (
+    <div className="relative">
+      <pre className="p-3 bg-gray-900 dark:bg-gray-950 rounded-lg text-sm text-gray-100 overflow-x-auto max-h-64 overflow-y-auto">
+        {content}
+      </pre>
+      <div className="absolute top-2 right-2 flex gap-1">
+        <button
+          onClick={handleCopy}
+          className="p-1.5 bg-gray-700 rounded hover:bg-gray-600 text-gray-300"
+          title="复制"
+        >
+          {copied ? <CheckCircle className="w-4 h-4 text-green-400" /> : <Copy className="w-4 h-4" />}
+        </button>
+        <button
+          onClick={handleDownload}
+          className="p-1.5 bg-gray-700 rounded hover:bg-gray-600 text-gray-300"
+          title="下载"
+        >
+          <Download className="w-4 h-4" />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// === Main Component ===
+
+export function ExecutionResult({
+  run,
+  itemType,
+  itemName,
+  onRerun,
+  onViewDetails,
+  compact = false,
+}: ExecutionResultProps) {
+  const [expanded, setExpanded] = useState(!compact);
+
+  const statusConfig = STATUS_CONFIG[run.status as keyof typeof STATUS_CONFIG] || STATUS_CONFIG.completed;
+  const StatusIcon = statusConfig.icon;
+
+  // Safely extract error message as string
+  const getErrorMessage = (): string | null => {
+    if (typeof run.error === 'string' && run.error.length > 0) {
+      return run.error;
+    }
+    return null;
+  };
+  const errorMessage = getErrorMessage();
+
+  const outputType = useMemo(() => detectOutputType(run.output), [run.output]);
+  const duration = useMemo(() => {
+    if (run.duration) return `${run.duration}s`;
+    if (run.completedAt && run.startedAt) {
+      return formatDuration(run.startedAt, run.completedAt);
+    }
+    return null;
+  }, [run.duration, run.startedAt, run.completedAt]);
+
+  // Compact mode
+  if (compact && !expanded) {
+    return (
+      <div
+        className={`flex items-center gap-3 p-3 rounded-lg ${statusConfig.bgClass} cursor-pointer`}
+        onClick={() => setExpanded(true)}
+      >
+        <StatusIcon className={`w-5 h-5 ${statusConfig.className}`} />
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="font-medium text-gray-900 dark:text-white truncate">
+              {itemName}
+            </span>
+            <span className={`text-xs ${statusConfig.className}`}>
+              {statusConfig.label}
+            </span>
+          </div>
+          {duration && (
+            <span className="text-xs text-gray-500 dark:text-gray-400">
+              耗时: {duration}
+            </span>
+          )}
+        </div>
+        <ChevronDown className="w-4 h-4 text-gray-400" />
+      </div>
+    );
+  }
+
+  return (
+    <div className={`rounded-lg border ${statusConfig.bgClass} border-gray-200 dark:border-gray-700 overflow-hidden`}>
+      {/* Header */}
+      <div
+        className="flex items-center justify-between px-4 py-3 cursor-pointer"
+        onClick={compact ? () => setExpanded(false) : undefined}
+      >
+        <div className="flex items-center gap-3">
+          <StatusIcon className={`w-5 h-5 ${statusConfig.className}`} />
+          <div>
+            <div className="flex items-center gap-2">
+              <span className="font-medium text-gray-900 dark:text-white">
+                {itemName}
+              </span>
+              <span className={`text-xs px-2 py-0.5 rounded-full ${statusConfig.className} ${statusConfig.bgClass}`}>
+                {statusConfig.label}
+              </span>
+              <span className="text-xs text-gray-500 dark:text-gray-400">
+                {itemType === 'hand' ? 'Hand' : '工作流'}
+              </span>
+            </div>
+            {run.runId && (
+              <span className="text-xs text-gray-400 dark:text-gray-500">
+                Run ID: {run.runId}
+              </span>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {duration && (
+            <span className="text-xs text-gray-500 dark:text-gray-400">
+              耗时: {duration}
+            </span>
+          )}
+          {compact && (
+            <ChevronUp className="w-4 h-4 text-gray-400" />
+          )}
+        </div>
+      </div>
+
+      {/* Body */}
+      {expanded && (
+        <div className="px-4 pb-4 space-y-3">
+          {/* Error */}
+          {(() => {
+            if (!errorMessage) return null;
+            return (
+              <div className="p-3 bg-red-50 dark:bg-red-900/20 rounded-lg">
+                <p className="text-sm font-medium text-red-700 dark:text-red-400 mb-1">错误信息</p>
+                <p className="text-sm text-red-600 dark:text-red-300">{errorMessage}</p>
+              </div>
+            );
+          })()}
+
+          {/* Output */}
+          {run.output !== undefined && run.output !== null && (
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <p className="text-sm font-medium text-gray-700 dark:text-gray-300">输出结果</p>
+                <span className="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1">
+                  {outputType === 'json' && <Code className="w-3 h-3" />}
+                  {outputType === 'markdown' && <FileText className="w-3 h-3" />}
+                  {outputType === 'image' && <Image className="w-3 h-3" />}
+                  {outputType === 'data' && <FileSpreadsheet className="w-3 h-3" />}
+                  {outputType.toUpperCase()}
+                </span>
+              </div>
+              <OutputViewer output={run.output} type={outputType} />
+            </div>
+          )}
+
+          {/* Timestamps */}
+          <div className="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
+            <span className="flex items-center gap-1">
+              <Clock className="w-3 h-3" />
+              开始: {new Date(run.startedAt).toLocaleString('zh-CN')}
+            </span>
+            {run.completedAt && (
+              <span>
+                完成: {new Date(run.completedAt).toLocaleString('zh-CN')}
+              </span>
+            )}
+          </div>
+
+          {/* Actions */}
+          <div className="flex items-center gap-2 pt-2">
+            {onRerun && (
+              <button
+                onClick={onRerun}
+                className="px-3 py-1.5 text-sm bg-orange-500 text-white rounded-md hover:bg-orange-600 flex items-center gap-1"
+              >
+                <RefreshCw className="w-3.5 h-3.5" />
+                重新执行
+              </button>
+            )}
+            {onViewDetails && (
+              <button
+                onClick={onViewDetails}
+                className="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300 flex items-center gap-1"
+              >
+                <ExternalLink className="w-3.5 h-3.5" />
+                查看详情
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ExecutionResult;
diff --git a/desktop/src/components/Automation/index.ts b/desktop/src/components/Automation/index.ts
index 42df908..48808a4 100644
--- a/desktop/src/components/Automation/index.ts
+++ b/desktop/src/components/Automation/index.ts
@@ -11,6 +11,8 @@ export { AutomationCard } from './AutomationCard';
 export { AutomationFilters } from './AutomationFilters';
 export { BatchActionBar } from './BatchActionBar';
 export { ScheduleEditor } from './ScheduleEditor';
+export { ApprovalQueue } from './ApprovalQueue';
+export { ExecutionResult } from './ExecutionResult';
 
 // Re-export types
 export type {
diff --git a/desktop/src/components/ChatArea.tsx b/desktop/src/components/ChatArea.tsx
index 0c05ba0..b8e44c0 100644
--- a/desktop/src/components/ChatArea.tsx
+++ b/desktop/src/components/ChatArea.tsx
@@ -6,6 +6,7 @@ import { Paperclip, ChevronDown, Terminal, SquarePen, ArrowUp, MessageSquare } f
 import { Button, EmptyState } from './ui';
 import { listItemVariants, defaultTransition, fadeInVariants } from '../lib/animations';
 import { FirstConversationPrompt } from './FirstConversationPrompt';
+import { MessageSearch } from './MessageSearch';
 
 const MODELS = ['glm-5', 'qwen3.5-plus', 'kimi-k2.5', 'minimax-m2.5'];
 
@@ -21,6 +22,7 @@ export function ChatArea() {
   const [showModelPicker, setShowModelPicker] = useState(false);
   const scrollRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const messageRefs = useRef<Map<string, HTMLDivElement>>(new Map());
 
   // Get current clone for first conversation prompt
   const currentClone = useMemo(() => {
@@ -74,8 +76,21 @@ export function ChatArea() {
 
   const connected = connectionState === 'connected';
 
+  // Navigate to a specific message by ID
+  const handleNavigateToMessage = useCallback((messageId: string) => {
+    const messageEl = messageRefs.current.get(messageId);
+    if (messageEl && scrollRef.current) {
+      messageEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      // Add highlight effect
+      messageEl.classList.add('ring-2', 'ring-orange-400', 'ring-offset-2');
+      setTimeout(() => {
+        messageEl.classList.remove('ring-2', 'ring-orange-400', 'ring-offset-2');
+      }, 2000);
+    }
+  }, []);
+
   return (
-    <>
+    <div className="flex flex-col h-full">
       {/* Header */}
       <div className="h-14 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between px-6 flex-shrink-0 bg-white dark:bg-gray-900">
         <div className="flex items-center gap-2">
@@ -93,6 +108,9 @@ export function ChatArea() {
           )}
         </div>
         <div className="flex items-center gap-2">
+          {messages.length > 0 && (
+            <MessageSearch onNavigateToMessage={handleNavigateToMessage} />
+          )}
           {messages.length > 0 && (
             <Button
               variant="ghost"
@@ -138,6 +156,7 @@ export function ChatArea() {
           {messages.map((message) => (
             <motion.div
               key={message.id}
+              ref={(el) => { if (el) messageRefs.current.set(message.id, el); }}
               variants={listItemVariants}
               initial="hidden"
               animate="visible"
@@ -211,10 +230,10 @@ export function ChatArea() {
                 size="sm"
                 onClick={handleSend}
                 disabled={isStreaming || !input.trim() || !connected}
-                className="w-8 h-8 rounded-full p-0 flex items-center justify-center"
+                className="w-8 h-8 rounded-full p-0 flex items-center justify-center bg-orange-500 hover:bg-orange-600 text-white"
                 aria-label="发送消息"
               >
-                <ArrowUp className="w-4 h-4" />
+                <ArrowUp className="w-4 h-4 text-white" />
               </Button>
             </div>
           </div>
@@ -223,7 +242,7 @@ export function ChatArea() {
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 }
 
@@ -332,6 +351,9 @@ function MessageBubble({ message }: { message: Message }) {
 
   const isUser = message.role === 'user';
 
+  // 思考中状态：streaming 且内容为空时显示思考指示器
+  const isThinking = message.streaming && !message.content;
+
   return (
     <div className={`flex gap-4 ${isUser ? 'justify-end' : ''}`}>
       <div
@@ -340,17 +362,29 @@ function MessageBubble({ message }: { message: Message }) {
         {isUser ? '用' : 'Z'}
       </div>
       <div className={isUser ? 'max-w-2xl' : 'flex-1 max-w-3xl'}>
-        <div className={`p-4 shadow-sm ${isUser ? 'chat-bubble-user shadow-md' : 'chat-bubble-assistant'}`}>
-          <div className={`leading-relaxed whitespace-pre-wrap ${isUser ? 'text-white' : 'text-gray-700 dark:text-gray-200'}`}>
-            {message.content
-              ? (isUser ? message.content : renderMarkdown(message.content))
-              : (message.streaming ? '' : '...')}
-            {message.streaming && <span className="inline-block w-1.5 h-4 bg-orange-500 animate-pulse ml-0.5 align-text-bottom rounded-sm" />}
+        {isThinking ? (
+          // 思考中指示器
+          <div className="flex items-center gap-2 px-4 py-3 text-gray-500 dark:text-gray-400">
+            <div className="flex gap-1">
+              <span className="w-2 h-2 bg-gray-400 dark:bg-gray-500 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
+              <span className="w-2 h-2 bg-gray-400 dark:bg-gray-500 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
+              <span className="w-2 h-2 bg-gray-400 dark:bg-gray-500 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
+            </div>
+            <span className="text-sm">思考中...</span>
           </div>
-          {message.error && (
-            <p className="text-xs text-red-500 mt-2">{message.error}</p>
-          )}
-        </div>
+        ) : (
+          <div className={`p-4 shadow-sm ${isUser ? 'chat-bubble-user shadow-md' : 'chat-bubble-assistant'}`}>
+            <div className={`leading-relaxed whitespace-pre-wrap ${isUser ? 'text-white' : 'text-gray-700 dark:text-gray-200'}`}>
+              {message.content
+                ? (isUser ? message.content : renderMarkdown(message.content))
+                : '...'}
+              {message.streaming && <span className="inline-block w-1.5 h-4 bg-orange-500 animate-pulse ml-0.5 align-text-bottom rounded-sm" />}
+            </div>
+            {message.error && (
+              <p className="text-xs text-red-500 mt-2">{message.error}</p>
+            )}
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/desktop/src/components/CodeSnippetPanel.tsx b/desktop/src/components/CodeSnippetPanel.tsx
new file mode 100644
index 0000000..39d6ae4
--- /dev/null
+++ b/desktop/src/components/CodeSnippetPanel.tsx
@@ -0,0 +1,346 @@
+/**
+ * CodeSnippetPanel - 代码片段快速浏览面板
+ *
+ * 功能：
+ * - 搜索过滤代码片段
+ * - 按语言筛选
+ * - 展开/折叠查看完整代码
+ * - 一键复制
+ * - 下载为文件
+ */
+
+import { useState, useMemo, useCallback } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  Search, Copy, Download, ChevronDown, ChevronUp,
+  FileCode, X, Check, Code
+} from 'lucide-react';
+import { Button, EmptyState } from './ui';
+import type { CodeBlock } from '../store/chatStore';
+
+// === Types ===
+
+export interface CodeSnippet {
+  id: string;
+  block: CodeBlock;
+  messageIndex: number;
+}
+
+interface CodeSnippetPanelProps {
+  snippets: CodeSnippet[];
+}
+
+// === Language Colors ===
+
+const LANGUAGE_COLORS: Record<string, string> = {
+  python: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
+  javascript: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300',
+  typescript: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
+  rust: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
+  go: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300',
+  java: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
+  cpp: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300',
+  c: 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300',
+  html: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
+  css: 'bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-300',
+  sql: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300',
+  bash: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
+  shell: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
+  json: 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300',
+  yaml: 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300',
+  markdown: 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300',
+  text: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400',
+};
+
+function getLanguageColor(lang: string): string {
+  return LANGUAGE_COLORS[lang.toLowerCase()] || LANGUAGE_COLORS.text;
+}
+
+function getFileExtension(lang?: string): string {
+  const extensions: Record<string, string> = {
+    python: 'py',
+    javascript: 'js',
+    typescript: 'ts',
+    rust: 'rs',
+    go: 'go',
+    java: 'java',
+    cpp: 'cpp',
+    c: 'c',
+    html: 'html',
+    css: 'css',
+    sql: 'sql',
+    bash: 'sh',
+    shell: 'sh',
+    json: 'json',
+    yaml: 'yaml',
+    markdown: 'md',
+  };
+  return extensions[lang?.toLowerCase() || ''] || 'txt';
+}
+
+// === Snippet Card Component ===
+
+interface SnippetCardProps {
+  snippet: CodeSnippet;
+  isExpanded: boolean;
+  onToggle: () => void;
+}
+
+function SnippetCard({ snippet, isExpanded, onToggle }: SnippetCardProps) {
+  const [copied, setCopied] = useState(false);
+  const { block, messageIndex } = snippet;
+
+  const handleCopy = useCallback(async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(block.content || '');
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  }, [block.content]);
+
+  const handleDownload = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    const filename = block.filename || `snippet_${messageIndex + 1}.${getFileExtension(block.language)}`;
+    const blob = new Blob([block.content || ''], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+  }, [block.content, block.filename, block.language, messageIndex]);
+
+  const lineCount = (block.content || '').split('\n').length;
+  const charCount = (block.content || '').length;
+  const previewLines = (block.content || '').split('\n').slice(0, 2).join('\n');
+
+  return (
+    <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+      {/* Header */}
+      <button
+        onClick={onToggle}
+        className="w-full flex items-center justify-between p-3 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors text-left"
+      >
+        <div className="flex items-center gap-3 min-w-0">
+          <FileCode className="w-4 h-4 text-gray-400 flex-shrink-0" />
+          <div className="min-w-0">
+            <div className="flex items-center gap-2">
+              <span className="font-medium text-gray-800 dark:text-gray-200 truncate text-sm">
+                {block.filename || `代码片段 #${messageIndex + 1}`}
+              </span>
+              <span className={`text-xs px-1.5 py-0.5 rounded font-medium ${getLanguageColor(block.language || 'text')}`}>
+                {block.language || 'text'}
+              </span>
+            </div>
+            <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+              {lineCount} 行 · {charCount > 1024 ? `${(charCount / 1024).toFixed(1)} KB` : `${charCount} 字符`}
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleCopy}
+            className="p-1.5 opacity-60 hover:opacity-100"
+            title="复制代码"
+          >
+            {copied ? (
+              <Check className="w-4 h-4 text-green-500" />
+            ) : (
+              <Copy className="w-4 h-4" />
+            )}
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleDownload}
+            className="p-1.5 opacity-60 hover:opacity-100"
+            title="下载文件"
+          >
+            <Download className="w-4 h-4" />
+          </Button>
+          {isExpanded ? (
+            <ChevronUp className="w-4 h-4 text-gray-400 ml-1" />
+          ) : (
+            <ChevronDown className="w-4 h-4 text-gray-400 ml-1" />
+          )}
+        </div>
+      </button>
+
+      {/* Preview / Full Content */}
+      <AnimatePresence initial={false}>
+        {isExpanded ? (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="overflow-hidden"
+          >
+            <div className="border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 p-3">
+              <pre className="text-xs font-mono text-gray-700 dark:text-gray-300 overflow-x-auto whitespace-pre-wrap break-all max-h-60 overflow-y-auto">
+                {block.content}
+              </pre>
+            </div>
+          </motion.div>
+        ) : (
+          <div className="px-3 pb-3">
+            <pre className="text-xs font-mono text-gray-500 dark:text-gray-400 overflow-hidden whitespace-pre-wrap break-all line-clamp-2">
+              {previewLines}
+              {(block.content || '').split('\n').length > 2 && '...'}
+            </pre>
+          </div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+// === Main Component ===
+
+export function CodeSnippetPanel({ snippets }: CodeSnippetPanelProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedLanguage, setSelectedLanguage] = useState<string | null>(null);
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+
+  // Get unique languages with counts
+  const languages = useMemo(() => {
+    const langMap = new Map<string, number>();
+    snippets.forEach(s => {
+      const lang = s.block.language?.toLowerCase() || 'text';
+      langMap.set(lang, (langMap.get(lang) || 0) + 1);
+    });
+    return Array.from(langMap.entries())
+      .map(([lang, count]) => ({ lang, count }))
+      .sort((a, b) => b.count - a.count);
+  }, [snippets]);
+
+  // Filter snippets
+  const filteredSnippets = useMemo(() => {
+    return snippets.filter(snippet => {
+      const block = snippet.block;
+
+      // Language filter
+      if (selectedLanguage && (block.language?.toLowerCase() || 'text') !== selectedLanguage) {
+        return false;
+      }
+
+      // Search filter
+      if (searchQuery) {
+        const query = searchQuery.toLowerCase();
+        const matchesFilename = block.filename?.toLowerCase().includes(query);
+        const matchesContent = block.content?.toLowerCase().includes(query);
+        const matchesLanguage = block.language?.toLowerCase().includes(query);
+        return matchesFilename || matchesContent || matchesLanguage;
+      }
+
+      return true;
+    });
+  }, [snippets, searchQuery, selectedLanguage]);
+
+  const handleToggle = useCallback((id: string) => {
+    setExpandedId(prev => prev === id ? null : id);
+  }, []);
+
+  if (snippets.length === 0) {
+    return (
+      <EmptyState
+        icon={<Code className="w-10 h-10" />}
+        title="暂无代码片段"
+        description="对话中生成的代码会自动出现在这里"
+        className="py-8"
+      />
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {/* Search Bar */}
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+        <input
+          type="text"
+          placeholder="搜索代码..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="w-full pl-9 pr-8 py-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent"
+        />
+        {searchQuery && (
+          <button
+            onClick={() => setSearchQuery('')}
+            className="absolute right-2 top-1/2 -translate-y-1/2 p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded"
+          >
+            <X className="w-3 h-3 text-gray-400" />
+          </button>
+        )}
+      </div>
+
+      {/* Language Filters */}
+      {languages.length > 1 && (
+        <div className="flex flex-wrap gap-1.5">
+          <button
+            onClick={() => setSelectedLanguage(null)}
+            className={`px-2 py-1 text-xs rounded-full transition-colors ${
+              selectedLanguage === null
+                ? 'bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300'
+                : 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700'
+            }`}
+          >
+            全部 ({snippets.length})
+          </button>
+          {languages.map(({ lang, count }) => (
+            <button
+              key={lang}
+              onClick={() => setSelectedLanguage(selectedLanguage === lang ? null : lang)}
+              className={`px-2 py-1 text-xs rounded-full transition-colors ${
+                selectedLanguage === lang
+                  ? 'bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300'
+                  : 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700'
+              }`}
+            >
+              {lang} ({count})
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Results Count */}
+      {(searchQuery || selectedLanguage) && (
+        <div className="text-xs text-gray-500 dark:text-gray-400">
+          找到 {filteredSnippets.length} 个代码片段
+        </div>
+      )}
+
+      {/* Snippet List */}
+      <div className="space-y-2 overflow-y-auto" style={{ maxHeight: 'calc(100vh - 380px)' }}>
+        <AnimatePresence mode="popLayout">
+          {filteredSnippets.map((snippet) => (
+            <motion.div
+              key={snippet.id}
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              layout
+            >
+              <SnippetCard
+                snippet={snippet}
+                isExpanded={expandedId === snippet.id}
+                onToggle={() => handleToggle(snippet.id)}
+              />
+            </motion.div>
+          ))}
+        </AnimatePresence>
+
+        {filteredSnippets.length === 0 && (
+          <div className="text-center py-4 text-sm text-gray-500 dark:text-gray-400">
+            没有找到匹配的代码片段
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/desktop/src/components/DetailDrawer.tsx b/desktop/src/components/DetailDrawer.tsx
new file mode 100644
index 0000000..20e1c4b
--- /dev/null
+++ b/desktop/src/components/DetailDrawer.tsx
@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X } from 'lucide-react';
+
+interface DetailDrawerProps {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  children: ReactNode;
+}
+
+export function DetailDrawer({ open, onClose, title = '详情', children }: DetailDrawerProps) {
+  return (
+    <AnimatePresence>
+      {open && (
+        <>
+          {/* 遮罩层 */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="fixed inset-0 bg-black/20 dark:bg-black/40 z-40"
+            onClick={onClose}
+          />
+
+          {/* 抽屉面板 */}
+          <motion.aside
+            initial={{ x: '100%' }}
+            animate={{ x: 0 }}
+            exit={{ x: '100%' }}
+            transition={{ type: 'spring', damping: 25, stiffness: 300 }}
+            className="fixed right-0 top-0 bottom-0 w-[400px] bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-gray-700 z-50 flex flex-col shadow-xl"
+          >
+            {/* 抽屉头部 */}
+            <header className="h-14 border-b border-gray-200 dark:border-gray-700 flex items-center px-4 flex-shrink-0">
+              <span className="font-medium text-gray-900 dark:text-gray-100">{title}</span>
+              <button
+                onClick={onClose}
+                className="ml-auto p-1.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg text-gray-500 dark:text-gray-400 transition-colors"
+                aria-label="关闭"
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </header>
+
+            {/* 抽屉内容 */}
+            <div className="flex-1 overflow-y-auto">
+              {children}
+            </div>
+          </motion.aside>
+        </>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/desktop/src/components/HandTaskPanel.tsx b/desktop/src/components/HandTaskPanel.tsx
index 8f9b06f..bf9f906 100644
--- a/desktop/src/components/HandTaskPanel.tsx
+++ b/desktop/src/components/HandTaskPanel.tsx
@@ -19,6 +19,7 @@ import {
   ArrowLeft,
   RefreshCw,
 } from 'lucide-react';
+import { useToast } from './ui/Toast';
 
 interface HandTaskPanelProps {
   handId: string;
@@ -39,6 +40,7 @@ const RUN_STATUS_CONFIG: Record<string, { label: string; className: string; icon
 
 export function HandTaskPanel({ handId, onBack }: HandTaskPanelProps) {
   const { hands, handRuns, loadHands, loadHandRuns, triggerHand, isLoading } = useGatewayStore();
+  const { toast } = useToast();
   const [selectedHand, setSelectedHand] = useState<Hand | null>(null);
   const [isActivating, setIsActivating] = useState(false);
   const [isRefreshing, setIsRefreshing] = useState(false);
@@ -78,20 +80,49 @@ export function HandTaskPanel({ handId, onBack }: HandTaskPanelProps) {
   // Trigger hand execution
   const handleActivate = useCallback(async () => {
     if (!selectedHand) return;
+
+    // Check if hand is already running
+    if (selectedHand.status === 'running') {
+      toast(`Hand "${selectedHand.name}" 正在运行中，请等待完成`, 'warning');
+      return;
+    }
+
     setIsActivating(true);
+    console.log(`[HandTaskPanel] Activating hand: ${selectedHand.id} (${selectedHand.name})`);
+
     try {
-      await triggerHand(selectedHand.id);
-      // Refresh hands list and task history
-      await Promise.all([
-        loadHands(),
-        loadHandRuns(selectedHand.id, { limit: 50 }),
-      ]);
-    } catch {
-      // Error is handled in store
+      const result = await triggerHand(selectedHand.id);
+      console.log(`[HandTaskPanel] Activation result:`, result);
+
+      if (result) {
+        toast(`Hand "${selectedHand.name}" 已成功启动`, 'success');
+        // Refresh hands list and task history
+        await Promise.all([
+          loadHands(),
+          loadHandRuns(selectedHand.id, { limit: 50 }),
+        ]);
+      } else {
+        // Check for specific error in store
+        const storeError = useGatewayStore.getState().error;
+        if (storeError?.includes('already active')) {
+          toast(`Hand "${selectedHand.name}" 已在运行中`, 'warning');
+        } else {
+          toast(`Hand "${selectedHand.name}" 启动失败: ${storeError || '未知错误'}`, 'error');
+        }
+      }
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      console.error(`[HandTaskPanel] Activation error:`, errorMsg);
+
+      if (errorMsg.includes('already active')) {
+        toast(`Hand "${selectedHand.name}" 已在运行中`, 'warning');
+      } else {
+        toast(`Hand "${selectedHand.name}" 启动异常: ${errorMsg}`, 'error');
+      }
     } finally {
       setIsActivating(false);
     }
-  }, [selectedHand, triggerHand, loadHands, loadHandRuns]);
+  }, [selectedHand, triggerHand, loadHands, loadHandRuns, toast]);
 
   if (!selectedHand) {
     return (
diff --git a/desktop/src/components/MemoryGraph.tsx b/desktop/src/components/MemoryGraph.tsx
index 63045fd..8deab76 100644
--- a/desktop/src/components/MemoryGraph.tsx
+++ b/desktop/src/components/MemoryGraph.tsx
@@ -158,7 +158,7 @@ export function MemoryGraph({ className = '' }: MemoryGraphProps) {
   const [searchQuery, setSearchQuery] = useState('');
 
   const { currentAgent } = useChatStore();
-  const agentId = currentAgent?.id || 'default';
+  const agentId = currentAgent?.id || 'zclaw-main';
 
   const {
     isLoading,
@@ -225,8 +225,8 @@ export function MemoryGraph({ className = '' }: MemoryGraphProps) {
     canvas.height = layout.height * dpr;
     ctx.scale(dpr, dpr);
 
-    // 清空画布
-    ctx.fillStyle = '#1a1a2e';
+    // 清空画布 - 使用浅色背景匹配系统主题
+    ctx.fillStyle = '#f9fafb'; // gray-50
     ctx.fillRect(0, 0, layout.width, layout.height);
 
     // 应用变换
@@ -299,7 +299,7 @@ export function MemoryGraph({ className = '' }: MemoryGraphProps) {
       ctx.arc(legendX, legendY, 6, 0, Math.PI * 2);
       ctx.fillStyle = colors.fill;
       ctx.fill();
-      ctx.fillStyle = '#9ca3af';
+      ctx.fillStyle = '#6b7280'; // gray-500 for better visibility on light background
       ctx.textAlign = 'left';
       ctx.fillText(label, legendX + 12, legendY + 4);
       legendX += 70;
@@ -377,7 +377,7 @@ export function MemoryGraph({ className = '' }: MemoryGraphProps) {
   return (
     <div className={`flex flex-col h-full ${className}`}>
       {/* 工具栏 */}
-      <div className="flex items-center gap-2 p-2 bg-gray-800/50 rounded-t-lg border-b border-gray-700">
+      <div className="flex items-center gap-2 p-2 bg-gray-100 dark:bg-gray-800/50 rounded-t-lg border-b border-gray-200 dark:border-gray-700">
         {/* 搜索框 */}
         <div className="relative flex-1 max-w-xs">
           <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
@@ -386,7 +386,7 @@ export function MemoryGraph({ className = '' }: MemoryGraphProps) {
             placeholder="搜索记忆..."
             value={searchQuery}
             onChange={(e) => handleSearch(e.target.value)}
-            className="w-full pl-8 pr-2 py-1 bg-gray-900 border border-gray-700 rounded text-sm text-white placeholder-gray-500 focus:outline-none focus:border-blue-500"
+            className="w-full pl-8 pr-2 py-1 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:border-orange-400 dark:focus:border-blue-500"
           />
         </div>
 
@@ -459,7 +459,7 @@ export function MemoryGraph({ className = '' }: MemoryGraphProps) {
             initial={{ height: 0, opacity: 0 }}
             animate={{ height: 'auto', opacity: 1 }}
             exit={{ height: 0, opacity: 0 }}
-            className="overflow-hidden bg-gray-800/30 border-b border-gray-700"
+            className="overflow-hidden bg-gray-50 dark:bg-gray-800/30 border-b border-gray-200 dark:border-gray-700"
           >
             <div className="p-3 flex flex-wrap gap-3">
               {/* 类型筛选 */}
@@ -476,8 +476,8 @@ export function MemoryGraph({ className = '' }: MemoryGraphProps) {
                     }}
                     className={`px-2 py-1 text-xs rounded ${
                       filter.types.includes(type)
-                        ? 'bg-blue-600 text-white'
-                        : 'bg-gray-700 text-gray-300'
+                        ? 'bg-orange-500 text-white'
+                        : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
                     }`}
                   >
                     {TYPE_LABELS[type]}
@@ -510,9 +510,9 @@ export function MemoryGraph({ className = '' }: MemoryGraphProps) {
       </AnimatePresence>
 
       {/* 图谱画布 */}
-      <div className="flex-1 relative overflow-hidden bg-gray-900">
+      <div className="flex-1 relative overflow-hidden bg-gray-50 dark:bg-gray-900">
         {isLoading && (
-          <div className="absolute inset-0 flex items-center justify-center bg-gray-900/80 z-10">
+          <div className="absolute inset-0 flex items-center justify-center bg-gray-50/80 dark:bg-gray-900/80 z-10">
             <RefreshCw className="w-8 h-8 text-blue-500 animate-spin" />
           </div>
         )}
@@ -541,7 +541,7 @@ export function MemoryGraph({ className = '' }: MemoryGraphProps) {
               initial={{ opacity: 0, x: 20 }}
               animate={{ opacity: 1, x: 0 }}
               exit={{ opacity: 0, x: 20 }}
-              className="absolute top-4 right-4 w-64 bg-gray-800 rounded-lg border border-gray-700 p-4 shadow-xl"
+              className="absolute top-4 right-4 w-64 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 shadow-xl"
             >
               <div className="flex items-center justify-between mb-3">
                 <Badge variant={selectedNode.type as any}>
@@ -549,7 +549,7 @@ export function MemoryGraph({ className = '' }: MemoryGraphProps) {
                 </Badge>
                 <button
                   onClick={() => selectNode(null)}
-                  className="text-gray-400 hover:text-white"
+                  className="text-gray-400 hover:text-gray-600 dark:hover:text-white"
                 >
                   <X className="w-4 h-4" />
                 </button>
@@ -557,7 +557,7 @@ export function MemoryGraph({ className = '' }: MemoryGraphProps) {
 
               <p className="text-sm text-gray-200 mb-3">{selectedNode.label}</p>
 
-              <div className="space-y-2 text-xs text-gray-400">
+              <div className="space-y-2 text-xs text-gray-500 dark:text-gray-400">
                 <div className="flex items-center gap-2">
                   <Star className="w-3 h-3" />
                   重要性: {selectedNode.importance}
@@ -573,9 +573,9 @@ export function MemoryGraph({ className = '' }: MemoryGraphProps) {
               </div>
 
               {/* 关联边统计 */}
-              <div className="mt-3 pt-3 border-t border-gray-700">
-                <div className="text-xs text-gray-400 mb-1">关联记忆:</div>
-                <div className="text-sm text-gray-200">
+              <div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
+                <div className="text-xs text-gray-500 dark:text-gray-400 mb-1">关联记忆:</div>
+                <div className="text-sm text-gray-700 dark:text-gray-200">
                   {filteredEdges.filter(
                     e => e.source === selectedNode.id || e.target === selectedNode.id
                   ).length} 个
@@ -598,7 +598,7 @@ export function MemoryGraph({ className = '' }: MemoryGraphProps) {
       </div>
 
       {/* 状态栏 */}
-      <div className="flex items-center justify-between px-3 py-1 bg-gray-800/50 rounded-b-lg text-xs text-gray-400">
+      <div className="flex items-center justify-between px-3 py-1 bg-gray-100 dark:bg-gray-800/50 rounded-b-lg text-xs text-gray-500 dark:text-gray-400">
         <div className="flex items-center gap-4">
           <span>节点: {filteredNodes.length}</span>
           <span>关联: {filteredEdges.length}</span>
diff --git a/desktop/src/components/RightPanel.tsx b/desktop/src/components/RightPanel.tsx
index 099b8d4..40abc34 100644
--- a/desktop/src/components/RightPanel.tsx
+++ b/desktop/src/components/RightPanel.tsx
@@ -1,19 +1,80 @@
-import { useEffect, useMemo, useState } from 'react';
+import { ReactNode, useEffect, useMemo, useState } from 'react';
 import { motion } from 'framer-motion';
 import { getStoredGatewayUrl } from '../lib/gateway-client';
 import { useGatewayStore, type PluginStatus } from '../store/gatewayStore';
-import { toChatAgent, useChatStore } from '../store/chatStore';
+import { toChatAgent, useChatStore, type CodeBlock } from '../store/chatStore';
 import {
   Wifi, WifiOff, Bot, BarChart3, Plug, RefreshCw,
-  MessageSquare, Cpu, FileText, User, Activity, FileCode, Brain,
-  Shield, Sparkles, GraduationCap
+  MessageSquare, Cpu, FileText, User, Activity, Brain,
+  Shield, Sparkles, GraduationCap, List, Network
 } from 'lucide-react';
+
+// === Helper to extract code blocks from markdown content ===
+function extractCodeBlocksFromContent(content: string): CodeBlock[] {
+  const blocks: CodeBlock[] = [];
+  const regex = /```(\w*)\n([\s\S]*?)```/g;
+  let match;
+
+  while ((match = regex.exec(content)) !== null) {
+    const language = match[1] || 'text';
+    const codeContent = match[2].trim();
+
+    // Try to extract filename from first line comment
+    let filename: string | undefined;
+    let actualContent = codeContent;
+
+    // Check for filename patterns like "# filename.py" or "// filename.js"
+    const firstLine = codeContent.split('\n')[0];
+    const filenameMatch = firstLine.match(/^(?:#|\/\/|\/\*|<!--)\s*([^\s]+\.\w+)/);
+    if (filenameMatch) {
+      filename = filenameMatch[1];
+      actualContent = codeContent.split('\n').slice(1).join('\n').trim();
+    }
+
+    blocks.push({
+      language,
+      filename,
+      content: actualContent,
+    });
+  }
+
+  return blocks;
+}
+
+// === Tab Button Component ===
+function TabButton({
+  active,
+  onClick,
+  icon,
+  label,
+}: {
+  active: boolean;
+  onClick: () => void;
+  icon: ReactNode;
+  label: string;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors ${
+        active
+          ? 'bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300'
+          : 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300'
+      }`}
+    >
+      {icon}
+      <span>{label}</span>
+    </button>
+  );
+}
 import { MemoryPanel } from './MemoryPanel';
+import { MemoryGraph } from './MemoryGraph';
 import { ReflectionLog } from './ReflectionLog';
 import { AutonomyConfig } from './AutonomyConfig';
 import { ActiveLearningPanel } from './ActiveLearningPanel';
+import { CodeSnippetPanel, type CodeSnippet } from './CodeSnippetPanel';
 import { cardHover, defaultTransition } from '../lib/animations';
-import { Button, Badge, EmptyState } from './ui';
+import { Button, Badge } from './ui';
 import { getPersonalityById } from '../lib/personality-presets';
 import { silentErrorHandler } from '../lib/error-utils';
 
@@ -24,6 +85,7 @@ export function RightPanel() {
   } = useGatewayStore();
   const { messages, currentModel, currentAgent, setCurrentAgent } = useChatStore();
   const [activeTab, setActiveTab] = useState<'status' | 'files' | 'agent' | 'memory' | 'reflection' | 'autonomy' | 'learning'>('status');
+  const [memoryViewMode, setMemoryViewMode] = useState<'list' | 'graph'>('list');
   const [isEditingAgent, setIsEditingAgent] = useState(false);
   const [agentDraft, setAgentDraft] = useState<AgentDraft | null>(null);
 
@@ -96,108 +158,149 @@ export function RightPanel() {
   const userAddressing = selectedClone?.nickname || selectedClone?.userName || quickConfig.userName || '未设置';
   const localTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone || '系统时区';
 
+  // Extract code blocks from all messages (both from codeBlocks property and content parsing)
+  const codeSnippets = useMemo((): CodeSnippet[] => {
+    const snippets: CodeSnippet[] = [];
+    let globalIndex = 0;
+
+    for (let msgIdx = 0; msgIdx < messages.length; msgIdx++) {
+      const msg = messages[msgIdx];
+
+      // First, add any existing codeBlocks from the message
+      if (msg.codeBlocks && msg.codeBlocks.length > 0) {
+        for (const block of msg.codeBlocks) {
+          snippets.push({
+            id: `${msg.id}-codeblock-${globalIndex}`,
+            block,
+            messageIndex: msgIdx,
+          });
+          globalIndex++;
+        }
+      }
+
+      // Then, extract code blocks from the message content
+      if (msg.content) {
+        const extractedBlocks = extractCodeBlocksFromContent(msg.content);
+        for (const block of extractedBlocks) {
+          snippets.push({
+            id: `${msg.id}-extracted-${globalIndex}`,
+            block,
+            messageIndex: msgIdx,
+          });
+          globalIndex++;
+        }
+      }
+    }
+
+    return snippets;
+  }, [messages]);
+
   return (
-    <aside className="w-80 bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-gray-700 flex flex-col flex-shrink-0">
-      {/* 顶部工具栏 */}
-      <div className="h-14 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between px-4 flex-shrink-0">
-        <div className="flex items-center gap-3">
-          <div className="flex items-center gap-1 text-gray-600 dark:text-gray-300">
-            <BarChart3 className="w-4 h-4" />
-            <span className="font-medium">{messages.length}</span>
-          </div>
-          <span className="text-xs text-gray-500 dark:text-gray-400">当前消息</span>
-        </div>
-        <div className="flex items-center gap-2 text-gray-500 dark:text-gray-400" role="tablist">
-          <Button
-            variant={activeTab === 'status' ? 'secondary' : 'ghost'}
-            size="sm"
+    <aside className="w-full bg-white dark:bg-gray-900 flex flex-col">
+      {/* 顶部工具栏 - Tab 栏 */}
+      <div className="border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+        {/* 主 Tab 行 */}
+        <div className="flex items-center px-2 pt-2 gap-1">
+          <TabButton
+            active={activeTab === 'status'}
             onClick={() => setActiveTab('status')}
-            className="flex items-center gap-1 text-xs px-2 py-1"
-            title="Status"
-            aria-label="Status"
-            aria-selected={activeTab === 'status'}
-            role="tab"
-          >
-            <Activity className="w-4 h-4" />
-          </Button>
-          <Button
-            variant={activeTab === 'files' ? 'secondary' : 'ghost'}
-            size="sm"
-            onClick={() => setActiveTab('files')}
-            className="flex items-center gap-1 text-xs px-2 py-1"
-            title="Files"
-            aria-label="Files"
-            aria-selected={activeTab === 'files'}
-            role="tab"
-          >
-            <FileText className="w-4 h-4" />
-          </Button>
-          <Button
-            variant={activeTab === 'agent' ? 'secondary' : 'ghost'}
-            size="sm"
+            icon={<Activity className="w-4 h-4" />}
+            label="状态"
+          />
+          <TabButton
+            active={activeTab === 'agent'}
             onClick={() => setActiveTab('agent')}
-            className="flex items-center gap-1 text-xs px-2 py-1"
-            title="Agent"
-            aria-label="Agent"
-            aria-selected={activeTab === 'agent'}
-            role="tab"
-          >
-            <User className="w-4 h-4" />
-          </Button>
-          <Button
-            variant={activeTab === 'memory' ? 'secondary' : 'ghost'}
-            size="sm"
+            icon={<User className="w-4 h-4" />}
+            label="Agent"
+          />
+          <TabButton
+            active={activeTab === 'files'}
+            onClick={() => setActiveTab('files')}
+            icon={<FileText className="w-4 h-4" />}
+            label="文件"
+          />
+          <TabButton
+            active={activeTab === 'memory'}
             onClick={() => setActiveTab('memory')}
-            className="flex items-center gap-1 text-xs px-2 py-1"
-            title="Memory"
-            aria-label="Memory"
-            aria-selected={activeTab === 'memory'}
-            role="tab"
-          >
-            <Brain className="w-4 h-4" />
-          </Button>
-          <Button
-            variant={activeTab === 'reflection' ? 'secondary' : 'ghost'}
-            size="sm"
+            icon={<Brain className="w-4 h-4" />}
+            label="记忆"
+          />
+        </div>
+        {/* 第二行 Tab */}
+        <div className="flex items-center px-2 pb-2 gap-1">
+          <TabButton
+            active={activeTab === 'reflection'}
             onClick={() => setActiveTab('reflection')}
-            className="flex items-center gap-1 text-xs px-2 py-1"
-            title="Reflection"
-            aria-label="Reflection"
-            aria-selected={activeTab === 'reflection'}
-            role="tab"
-          >
-            <Sparkles className="w-4 h-4" />
-          </Button>
-          <Button
-            variant={activeTab === 'autonomy' ? 'secondary' : 'ghost'}
-            size="sm"
+            icon={<Sparkles className="w-4 h-4" />}
+            label="反思"
+          />
+          <TabButton
+            active={activeTab === 'autonomy'}
             onClick={() => setActiveTab('autonomy')}
-            className="flex items-center gap-1 text-xs px-2 py-1"
-            title="Autonomy"
-            aria-label="Autonomy"
-            aria-selected={activeTab === 'autonomy'}
-            role="tab"
-          >
-            <Shield className="w-4 h-4" />
-          </Button>
-          <Button
-            variant={activeTab === 'learning' ? 'secondary' : 'ghost'}
-            size="sm"
+            icon={<Shield className="w-4 h-4" />}
+            label="自主"
+          />
+          <TabButton
+            active={activeTab === 'learning'}
             onClick={() => setActiveTab('learning')}
-            className="flex items-center gap-1 text-xs px-2 py-1"
-            title="Learning"
-            aria-label="Learning"
-            aria-selected={activeTab === 'learning'}
-            role="tab"
-          >
-            <GraduationCap className="w-4 h-4" />
-          </Button>
+            icon={<GraduationCap className="w-4 h-4" />}
+            label="学习"
+          />
+        </div>
+      </div>
+
+      {/* 消息统计 */}
+      <div className="px-4 py-2 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between text-xs">
+        <div className="flex items-center gap-2 text-gray-500 dark:text-gray-400">
+          <BarChart3 className="w-3.5 h-3.5" />
+          <span>{messages.length} 条消息</span>
+          <span className="text-gray-300 dark:text-gray-600">|</span>
+          <span>{userMsgCount} 用户 / {assistantMsgCount} 助手</span>
+        </div>
+        <div className={`flex items-center gap-1 ${connected ? 'text-emerald-500' : 'text-gray-400'}`}>
+          {connected ? <Wifi className="w-3.5 h-3.5" /> : <WifiOff className="w-3.5 h-3.5" />}
+          <span>{runtimeSummary}</span>
         </div>
       </div>
 
       <div className="flex-1 overflow-y-auto custom-scrollbar p-4 space-y-4">
         {activeTab === 'memory' ? (
-          <MemoryPanel />
+          <div className="space-y-3">
+            {/* 视图切换 */}
+            <div className="flex items-center gap-1 p-1 bg-gray-100 dark:bg-gray-800 rounded-lg">
+              <button
+                onClick={() => setMemoryViewMode('list')}
+                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors ${
+                  memoryViewMode === 'list'
+                    ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm'
+                    : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
+                }`}
+              >
+                <List className="w-3.5 h-3.5" />
+                列表
+              </button>
+              <button
+                onClick={() => setMemoryViewMode('graph')}
+                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors ${
+                  memoryViewMode === 'graph'
+                    ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm'
+                    : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
+                }`}
+              >
+                <Network className="w-3.5 h-3.5" />
+                图谱
+              </button>
+            </div>
+
+            {/* 内容区域 */}
+            {memoryViewMode === 'list' ? (
+              <MemoryPanel />
+            ) : (
+              <div className="h-[400px] rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
+                <MemoryGraph />
+              </div>
+            )}
+          </div>
         ) : activeTab === 'reflection' ? (
           <ReflectionLog />
         ) : activeTab === 'autonomy' ? (
@@ -354,90 +457,8 @@ export function RightPanel() {
             </motion.div>
           </div>
         ) : activeTab === 'files' ? (
-          <div className="space-y-4">
-            {/* 对话输出文件 */}
-            <motion.div
-              whileHover={cardHover}
-              transition={defaultTransition}
-              className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4 shadow-sm"
-            >
-              <div className="flex items-center justify-between mb-3">
-                <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
-                  <FileCode className="w-4 h-4" />
-                  对话输出文件
-                </h3>
-              </div>
-              {messages.filter(m => m.files && m.files.length > 0).length > 0 ? (
-                <div className="space-y-2">
-                  {messages.filter(m => m.files && m.files.length > 0).map((msg, msgIdx) => (
-                    <div key={msgIdx} className="space-y-1">
-                      {msg.files!.map((file, fileIdx) => (
-                        <div
-                          key={`${msgIdx}-${fileIdx}`}
-                          className="flex items-center gap-2 px-3 py-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors"
-                          title={file.path || file.name}
-                        >
-                          <FileText className="w-4 h-4 text-gray-500 dark:text-gray-400 flex-shrink-0" />
-                          <div className="flex-1 min-w-0">
-                            <div className="text-gray-700 dark:text-gray-200 truncate">{file.name}</div>
-                            {file.path && (
-                              <div className="text-xs text-gray-500 dark:text-gray-400 truncate">{file.path}</div>
-                            )}
-                          </div>
-                          {file.size && (
-                            <span className="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">
-                              {file.size < 1024 ? `${file.size} B` :
-                               file.size < 1024 * 1024 ? `${(file.size / 1024).toFixed(1)} KB` :
-                               `${(file.size / (1024 * 1024)).toFixed(1)} MB`}
-                            </span>
-                          )}
-                        </div>
-                      ))}
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <EmptyState
-                  icon={<FileCode className="w-8 h-8" />}
-                  title="No Output Files"
-                  description="Files will appear here when AI uses tools"
-                  className="py-4"
-                />
-              )}
-            </motion.div>
-
-            {/* 代码块 */}
-            <motion.div
-              whileHover={cardHover}
-              transition={defaultTransition}
-              className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4 shadow-sm"
-            >
-              <div className="flex items-center justify-between mb-3">
-                <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">代码片段</h3>
-              </div>
-              {messages.filter(m => m.codeBlocks && m.codeBlocks.length > 0).length > 0 ? (
-                <div className="space-y-2">
-                  {messages.filter(m => m.codeBlocks && m.codeBlocks.length > 0).flatMap((msg, msgIdx) =>
-                    msg.codeBlocks!.map((block, blockIdx) => (
-                      <div
-                        key={`${msgIdx}-${blockIdx}`}
-                        className="px-3 py-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-sm"
-                      >
-                        <div className="flex items-center gap-2 mb-1">
-                          <Badge variant="default">{block.language || 'code'}</Badge>
-                          <span className="text-gray-700 dark:text-gray-200 truncate">{block.filename || 'Untitled'}</span>
-                        </div>
-                        <pre className="text-xs text-gray-500 dark:text-gray-400 overflow-x-auto max-h-20">
-                          {block.content?.slice(0, 200)}{block.content && block.content.length > 200 ? '...' : ''}
-                        </pre>
-                      </div>
-                    ))
-                  ).slice(0, 5)}
-                </div>
-              ) : (
-                <p className="text-sm text-gray-500 dark:text-gray-400 text-center py-4">No code snippets in conversation</p>
-              )}
-            </motion.div>
+          <div className="p-4">
+            <CodeSnippetPanel snippets={codeSnippets} />
           </div>
         ) : (
           <>
diff --git a/desktop/src/components/SchedulerPanel.tsx b/desktop/src/components/SchedulerPanel.tsx
index 1dde589..f7e59e7 100644
--- a/desktop/src/components/SchedulerPanel.tsx
+++ b/desktop/src/components/SchedulerPanel.tsx
@@ -10,6 +10,7 @@ import { useState, useEffect, useCallback } from 'react';
 import { useGatewayStore, type Workflow } from '../store/gatewayStore';
 import { WorkflowEditor } from './WorkflowEditor';
 import { WorkflowHistory } from './WorkflowHistory';
+import { TriggersPanel } from './TriggersPanel';
 import {
   Clock,
   Zap,
@@ -661,11 +662,6 @@ export function SchedulerPanel() {
     setIsCreateModalOpen(true);
   }, []);
 
-  const handleCreateTrigger = useCallback(() => {
-    // TODO: Implement trigger creation modal
-    alert('事件触发器创建功能即将推出!');
-  }, []);
-
   const handleCreateSuccess = useCallback(() => {
     loadScheduledTasks();
   }, [loadScheduledTasks]);
@@ -862,15 +858,7 @@ export function SchedulerPanel() {
         )}
 
         {activeTab === 'triggers' && (
-          <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
-            <EmptyState
-              icon={Zap}
-              title="暂无事件触发器"
-              description="事件触发器在系统事件（如收到消息、文件更改或 API webhook）发生时触发代理执行。"
-              actionLabel="创建事件触发器"
-              onAction={handleCreateTrigger}
-            />
-          </div>
+          <TriggersPanel />
         )}
 
         {/* Workflows Tab */}
diff --git a/desktop/src/components/Sidebar.tsx b/desktop/src/components/Sidebar.tsx
index e2790d5..836d97d 100644
--- a/desktop/src/components/Sidebar.tsx
+++ b/desktop/src/components/Sidebar.tsx
@@ -1,33 +1,38 @@
 import { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { Settings, Users, Bot, GitBranch, MessageSquare, Layers, Package } from 'lucide-react';
+import {
+  Users, Bot, Zap, Layers, Package,
+  Search, Sparkles, ChevronRight, X
+} from 'lucide-react';
 import { CloneManager } from './CloneManager';
-import { HandList } from './HandList';
-import { WorkflowList } from './WorkflowList';
+import { AutomationPanel } from './Automation';
 import { TeamList } from './TeamList';
 import { SwarmDashboard } from './SwarmDashboard';
 import { SkillMarket } from './SkillMarket';
 import { useGatewayStore } from '../store/gatewayStore';
-import { Button } from './ui';
 import { containerVariants, defaultTransition } from '../lib/animations';
 
-export type MainViewType = 'chat' | 'hands' | 'workflow' | 'team' | 'swarm' | 'skills';
+export type MainViewType = 'chat' | 'automation' | 'team' | 'swarm' | 'skills';
 
 interface SidebarProps {
   onOpenSettings?: () => void;
   onMainViewChange?: (view: MainViewType) => void;
-  selectedHandId?: string;
-  onSelectHand?: (handId: string) => void;
   selectedTeamId?: string;
   onSelectTeam?: (teamId: string) => void;
+  onNewChat?: () => void;
 }
 
-type Tab = 'clones' | 'hands' | 'workflow' | 'team' | 'swarm' | 'skills';
+type Tab = 'chat' | 'clones' | 'automation' | 'team' | 'swarm' | 'skills';
 
-const TABS: { key: Tab; label: string; icon: React.ComponentType<{ className?: string }>; mainView?: MainViewType }[] = [
+// 导航项配置 - WorkBuddy 风格
+const NAV_ITEMS: {
+  key: Tab;
+  label: string;
+  icon: React.ComponentType<{ className?: string }>;
+  mainView?: MainViewType;
+}[] = [
   { key: 'clones', label: '分身', icon: Bot },
-  { key: 'hands', label: 'Hands', icon: MessageSquare, mainView: 'hands' },
-  { key: 'workflow', label: '工作流', icon: GitBranch, mainView: 'workflow' },
+  { key: 'automation', label: '自动化', icon: Zap, mainView: 'automation' },
   { key: 'skills', label: '技能', icon: Package, mainView: 'skills' },
   { key: 'team', label: '团队', icon: Users, mainView: 'team' },
   { key: 'swarm', label: '协作', icon: Layers, mainView: 'swarm' },
@@ -36,15 +41,15 @@ const TABS: { key: Tab; label: string; icon: React.ComponentType<{ className?: s
 export function Sidebar({
   onOpenSettings,
   onMainViewChange,
-  selectedHandId,
-  onSelectHand,
   selectedTeamId,
-  onSelectTeam
+  onSelectTeam,
+  onNewChat
 }: SidebarProps) {
   const [activeTab, setActiveTab] = useState<Tab>('clones');
+  const [searchQuery, setSearchQuery] = useState('');
   const userName = useGatewayStore((state) => state.quickConfig.userName) || '用户7141';
 
-  const handleTabClick = (key: Tab, mainView?: MainViewType) => {
+  const handleNavClick = (key: Tab, mainView?: MainViewType) => {
     setActiveTab(key);
     if (mainView && onMainViewChange) {
       onMainViewChange(mainView);
@@ -53,12 +58,6 @@ export function Sidebar({
     }
   };
 
-  const handleSelectHand = (handId: string) => {
-    onSelectHand?.(handId);
-    setActiveTab('hands');
-    onMainViewChange?.('hands');
-  };
-
   const handleSelectTeam = (teamId: string) => {
     onSelectTeam?.(teamId);
     setActiveTab('team');
@@ -66,30 +65,65 @@ export function Sidebar({
   };
 
   return (
-    <aside className="w-64 bg-gray-50 dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700 flex flex-col flex-shrink-0">
-      {/* 顶部标签 - 使用图标 */}
-      <div className="flex border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800" role="tablist">
-        {TABS.map(({ key, label, icon: Icon }) => (
-          <button
-            key={key}
-            title={label}
-            aria-label={label}
-            aria-selected={activeTab === key}
-            role="tab"
-            className={`flex-1 py-2.5 px-2 text-xs font-medium transition-colors flex flex-col items-center gap-0.5 ${
-              activeTab === key
-                ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-500 bg-blue-50 dark:bg-blue-900/20'
-                : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700/50'
-            }`}
-            onClick={() => handleTabClick(key, TABS.find(t => t.key === key)?.mainView)}
-          >
-            <Icon className="w-4 h-4" />
-            <span className="text-[10px]">{label}</span>
-          </button>
-        ))}
+    <aside className="w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700 flex flex-col flex-shrink-0">
+      {/* 搜索框 */}
+      <div className="p-3 border-b border-gray-100 dark:border-gray-800">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-4 h-4" />
+          <input
+            type="text"
+            placeholder="搜索..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full pl-9 pr-8 py-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 transition-all text-gray-700 dark:text-gray-300 placeholder-gray-400"
+          />
+          {searchQuery && (
+            <button
+              onClick={() => setSearchQuery('')}
+              className="absolute right-2 top-1/2 -translate-y-1/2 p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded text-gray-400 transition-colors"
+            >
+              <X className="w-3 h-3" />
+            </button>
+          )}
+        </div>
       </div>
 
-      {/* Tab content */}
+      {/* 新对话按钮 */}
+      <div className="px-3 py-2">
+        <button
+          onClick={onNewChat}
+          className="w-full flex items-center gap-3 px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg text-gray-700 dark:text-gray-300 transition-colors group"
+        >
+          <Sparkles className="w-5 h-5 text-emerald-500" />
+          <span className="font-medium">新对话</span>
+        </button>
+      </div>
+
+      {/* 导航项 */}
+      <nav className="px-3 space-y-0.5">
+        {NAV_ITEMS.map(({ key, label, icon: Icon, mainView }) => (
+          <button
+            key={key}
+            onClick={() => handleNavClick(key, mainView)}
+            className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
+              activeTab === key
+                ? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-medium'
+                : 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800/50 hover:text-gray-900 dark:hover:text-gray-200'
+            }`}
+          >
+            <Icon className={`w-5 h-5 ${activeTab === key ? 'text-gray-700 dark:text-gray-300' : 'text-gray-400'}`} />
+            <span>{label}</span>
+            {activeTab === key && (
+              <ChevronRight className="w-4 h-4 ml-auto text-gray-400" />
+            )}
+          </button>
+        ))}
+      </nav>
+
+      {/* 分隔线 */}
+      <div className="my-3 mx-3 border-t border-gray-100 dark:border-gray-800" />
+
+      {/* 内容区域 */}
       <div className="flex-1 overflow-hidden">
         <AnimatePresence mode="wait">
           <motion.div
@@ -99,16 +133,12 @@ export function Sidebar({
             animate="visible"
             exit="exit"
             transition={defaultTransition}
-            className="h-full"
+            className="h-full overflow-y-auto"
           >
             {activeTab === 'clones' && <CloneManager />}
-            {activeTab === 'hands' && (
-              <HandList
-                selectedHandId={selectedHandId}
-                onSelectHand={handleSelectHand}
-              />
+            {activeTab === 'automation' && (
+              <AutomationPanel />
             )}
-            {activeTab === 'workflow' && <WorkflowList />}
             {activeTab === 'skills' && <SkillMarket />}
             {activeTab === 'team' && (
               <TeamList
@@ -121,23 +151,20 @@ export function Sidebar({
         </AnimatePresence>
       </div>
 
-      {/* 底部用户 */}
-      <div className="p-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
-        <div className="flex items-center gap-3">
-          <div className="w-8 h-8 bg-gradient-to-br from-orange-400 to-red-500 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
+      {/* 底部用户栏 */}
+      <div className="p-3 border-t border-gray-200 dark:border-gray-700">
+        <button
+          onClick={onOpenSettings}
+          className="flex items-center gap-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 p-2 rounded-lg transition-colors"
+        >
+          <div className="w-8 h-8 bg-gradient-to-br from-emerald-400 to-cyan-500 rounded-full flex items-center justify-center text-white font-bold shadow-sm">
             {userName?.charAt(0) || '用'}
           </div>
-          <span className="font-medium text-gray-700 dark:text-gray-300 truncate">{userName}</span>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="ml-auto p-1.5"
-            onClick={onOpenSettings}
-            aria-label="打开设置"
-          >
-            <Settings className="w-4 h-4" />
-          </Button>
-        </div>
+          <span className="flex-1 text-left text-sm font-medium text-gray-700 dark:text-gray-300 truncate">
+            {userName}
+          </span>
+          <ChevronRight className="w-4 h-4 text-gray-400" />
+        </button>
       </div>
     </aside>
   );
diff --git a/desktop/src/components/TopBar.tsx b/desktop/src/components/TopBar.tsx
new file mode 100644
index 0000000..3ad6551
--- /dev/null
+++ b/desktop/src/components/TopBar.tsx
@@ -0,0 +1,53 @@
+import { ClipboardList } from 'lucide-react';
+import { Button } from './ui';
+
+interface TopBarProps {
+  title: string;
+  subtitle?: string;
+  onOpenDetail?: () => void;
+  showDetailButton?: boolean;
+}
+
+export function TopBar({
+  title,
+  subtitle,
+  onOpenDetail,
+  showDetailButton = true
+}: TopBarProps) {
+  return (
+    <header className="h-14 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 flex items-center px-4 flex-shrink-0">
+      {/* 左侧标题 */}
+      <div className="flex items-center gap-2">
+        <div className="w-8 h-8 bg-gradient-to-br from-emerald-400 to-teal-500 rounded-lg flex items-center justify-center text-white font-bold shadow-sm">
+          <span className="text-sm">Z</span>
+        </div>
+        <div>
+          <span className="font-bold text-lg text-gray-900 dark:text-gray-100">{title}</span>
+          {subtitle && (
+            <span className="ml-2 text-sm text-gray-500 dark:text-gray-400">{subtitle}</span>
+          )}
+        </div>
+      </div>
+
+      {/* 中间区域 */}
+      <div className="flex-1" />
+
+      {/* 右侧按钮 */}
+      <div className="flex items-center gap-1">
+        {/* 详情按钮 */}
+        {showDetailButton && onOpenDetail && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onOpenDetail}
+            className="flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"
+            title="显示详情面板"
+          >
+            <ClipboardList className="w-4 h-4" />
+            <span className="text-sm">详情</span>
+          </Button>
+        )}
+      </div>
+    </header>
+  );
+}
diff --git a/desktop/src/lib/agent-identity.ts b/desktop/src/lib/agent-identity.ts
index 86441c0..eade72b 100644
--- a/desktop/src/lib/agent-identity.ts
+++ b/desktop/src/lib/agent-identity.ts
@@ -13,6 +13,8 @@
  * Reference: ZCLAW_AGENT_INTELLIGENCE_EVOLUTION.md §6.2.3
  */
 
+import { canAutoExecute } from './autonomy-manager';
+
 // === Types ===
 
 export interface IdentityFiles {
@@ -200,8 +202,17 @@ export class AgentIdentityManager {
     agentId: string,
     file: 'soul' | 'instructions',
     suggestedContent: string,
-    reason: string
-  ): IdentityChangeProposal {
+    reason: string,
+    options?: { skipAutonomyCheck?: boolean }
+  ): IdentityChangeProposal | null {
+    // Autonomy check - identity updates are high-risk, always require approval
+    if (!options?.skipAutonomyCheck) {
+      const { decision } = canAutoExecute('identity_update', 8);
+      console.log(`[AgentIdentity] Autonomy check for identity update: ${decision.reason}`);
+      // Identity updates always require approval regardless of autonomy level
+      // But we log the decision for audit purposes
+    }
+
     const identity = this.getIdentity(agentId);
     const currentContent = file === 'soul' ? identity.soul : identity.instructions;
 
diff --git a/desktop/src/lib/context-compactor.ts b/desktop/src/lib/context-compactor.ts
index 3c70a0e..61ce404 100644
--- a/desktop/src/lib/context-compactor.ts
+++ b/desktop/src/lib/context-compactor.ts
@@ -20,6 +20,7 @@ import {
   type LLMServiceAdapter,
   type LLMProvider,
 } from './llm-service';
+import { canAutoExecute } from './autonomy-manager';
 
 // === Types ===
 
@@ -181,8 +182,27 @@ export class ContextCompactor {
     messages: CompactableMessage[],
     agentId: string,
     conversationId?: string,
-    options?: { forceLLM?: boolean }
+    options?: { forceLLM?: boolean; skipAutonomyCheck?: boolean }
   ): Promise<CompactionResult> {
+    // Autonomy check - verify if compaction is allowed
+    if (!options?.skipAutonomyCheck) {
+      const { canProceed, decision } = canAutoExecute('compaction_run', 5);
+      if (!canProceed) {
+        console.log(`[ContextCompactor] Autonomy check failed: ${decision.reason}`);
+        // Return result without compaction
+        return {
+          compactedMessages: messages,
+          summary: '',
+          originalCount: messages.length,
+          retainedCount: messages.length,
+          flushedMemories: 0,
+          tokensBeforeCompaction: estimateMessagesTokens(messages),
+          tokensAfterCompaction: estimateMessagesTokens(messages),
+        };
+      }
+      console.log(`[ContextCompactor] Autonomy check passed: ${decision.reason}`);
+    }
+
     const tokensBeforeCompaction = estimateMessagesTokens(messages);
     const keepCount = Math.min(this.config.keepRecentMessages, messages.length);
 
diff --git a/desktop/src/lib/gateway-client.ts b/desktop/src/lib/gateway-client.ts
index de00d8a..0d09ed2 100644
--- a/desktop/src/lib/gateway-client.ts
+++ b/desktop/src/lib/gateway-client.ts
@@ -958,15 +958,27 @@ export class GatewayClient {
 
   private async restPost<T>(path: string, body?: unknown): Promise<T> {
     const baseUrl = this.getRestBaseUrl();
-    const response = await fetch(`${baseUrl}${path}`, {
+    const url = `${baseUrl}${path}`;
+    console.log(`[GatewayClient] POST ${url}`, body);
+
+    const response = await fetch(url, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: body ? JSON.stringify(body) : undefined,
     });
+
     if (!response.ok) {
-      throw new Error(`REST API error: ${response.status} ${response.statusText}`);
+      const errorBody = await response.text().catch(() => '');
+      console.error(`[GatewayClient] POST ${url} failed: ${response.status} ${response.statusText}`, errorBody);
+      const error = new Error(`REST API error: ${response.status} ${response.statusText}${errorBody ? ` - ${errorBody}` : ''}`);
+      (error as any).status = response.status;
+      (error as any).body = errorBody;
+      throw error;
     }
-    return response.json();
+
+    const result = await response.json();
+    console.log(`[GatewayClient] POST ${url} response:`, result);
+    return result;
   }
 
   private async restPut<T>(path: string, body?: unknown): Promise<T> {
@@ -1318,12 +1330,19 @@ export class GatewayClient {
 
   /** Trigger a Hand */
   async triggerHand(name: string, params?: Record<string, unknown>): Promise<{ runId: string; status: string }> {
+    console.log(`[GatewayClient] Triggering hand: ${name}`, params);
     // OpenFang uses /activate endpoint, not /trigger
-    const result = await this.restPost<{
-      instance_id: string;
-      status: string;
-    }>(`/api/hands/${name}/activate`, params || {});
-    return { runId: result.instance_id, status: result.status };
+    try {
+      const result = await this.restPost<{
+        instance_id: string;
+        status: string;
+      }>(`/api/hands/${name}/activate`, params || {});
+      console.log(`[GatewayClient] Hand trigger response:`, result);
+      return { runId: result.instance_id, status: result.status };
+    } catch (err) {
+      console.error(`[GatewayClient] Hand trigger failed for ${name}:`, err);
+      throw err;
+    }
   }
 
   /** Get Hand execution status */
diff --git a/desktop/src/lib/llm-service.ts b/desktop/src/lib/llm-service.ts
index 08382f6..8f4e7d2 100644
--- a/desktop/src/lib/llm-service.ts
+++ b/desktop/src/lib/llm-service.ts
@@ -295,21 +295,59 @@ class GatewayLLMAdapter implements LLMServiceAdapter {
     const config = { ...this.config, ...options };
     const startTime = Date.now();
 
-    const response = await fetch(`${config.apiBase}/complete`, {
+    // Build a single prompt from messages
+    const systemMessage = messages.find(m => m.role === 'system')?.content || '';
+    const userMessage = messages.find(m => m.role === 'user')?.content || '';
+
+    // Combine system and user messages into a single prompt
+    const fullPrompt = systemMessage
+      ? `${systemMessage}\n\n${userMessage}`
+      : userMessage;
+
+    // Use OpenFang's chat endpoint (same as main chat)
+    // Try to get the default agent ID from localStorage or use 'default'
+    const agentId = localStorage.getItem('zclaw-default-agent-id') || 'default';
+
+    const response = await fetch(`/api/agents/${agentId}/message`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({
-        messages,
+        message: fullPrompt,
         max_tokens: config.maxTokens,
-        temperature: config.temperature,
+        temperature: config.temperature ?? 0.3, // Lower temperature for extraction tasks
       }),
       signal: AbortSignal.timeout(config.timeout || 60000),
     });
 
     if (!response.ok) {
       const error = await response.text();
+      // If agent not found, try without agent ID (direct /api/chat)
+      if (response.status === 404) {
+        const fallbackResponse = await fetch('/api/chat', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            message: fullPrompt,
+            max_tokens: config.maxTokens,
+            temperature: config.temperature ?? 0.3,
+          }),
+          signal: AbortSignal.timeout(config.timeout || 60000),
+        });
+
+        if (!fallbackResponse.ok) {
+          throw new Error(`[Gateway] Both endpoints failed: ${fallbackResponse.status}`);
+        }
+
+        const data = await fallbackResponse.json();
+        const latencyMs = Date.now() - startTime;
+        return {
+          content: data.response || data.content || '',
+          tokensUsed: { input: data.input_tokens || 0, output: data.output_tokens || 0 },
+          latencyMs,
+        };
+      }
       throw new Error(`[Gateway] API error: ${response.status} - ${error}`);
     }
 
@@ -317,15 +355,14 @@ class GatewayLLMAdapter implements LLMServiceAdapter {
     const latencyMs = Date.now() - startTime;
 
     return {
-      content: data.content || data.choices?.[0]?.message?.content || '',
-      tokensUsed: data.tokensUsed || { input: 0, output: 0 },
-      model: data.model,
+      content: data.response || data.content || '',
+      tokensUsed: { input: data.input_tokens || 0, output: data.output_tokens || 0 },
       latencyMs,
     };
   }
 
   isAvailable(): boolean {
-    // Gateway is available if we're connected to OpenFang
+    // Gateway is available if we're in browser (can connect to OpenFang)
     return typeof window !== 'undefined';
   }
 
@@ -382,8 +419,8 @@ export function loadConfig(): LLMConfig {
     // Ignore parse errors
   }
 
-  // Default to mock for safety
-  return DEFAULT_CONFIGS.mock;
+  // Default to gateway (OpenFang passthrough) for L4 self-evolution
+  return DEFAULT_CONFIGS.gateway;
 }
 
 export function saveConfig(config: LLMConfig): void {
diff --git a/desktop/src/lib/memory-extractor.ts b/desktop/src/lib/memory-extractor.ts
index 9ff362d..3a43c12 100644
--- a/desktop/src/lib/memory-extractor.ts
+++ b/desktop/src/lib/memory-extractor.ts
@@ -80,9 +80,9 @@ const EXTRACTION_PROMPT = `请从以下对话中提取值得长期记住的信
 // === Default Config ===
 
 export const DEFAULT_EXTRACTION_CONFIG: ExtractionConfig = {
-  useLLM: false,
+  useLLM: true,  // Enable LLM-powered semantic extraction by default
   llmFallbackToRules: true,
-  minMessagesForExtraction: 4,
+  minMessagesForExtraction: 2,  // Lowered from 4 to capture memories earlier
   extractionCooldownMs: 30_000,
   minImportanceThreshold: 3,
 };
@@ -119,12 +119,15 @@ export class MemoryExtractor {
   ): Promise<ExtractionResult> {
     // Cooldown check
     if (Date.now() - this.lastExtractionTime < this.config.extractionCooldownMs) {
+      console.log('[MemoryExtractor] Skipping extraction: cooldown active');
       return { items: [], saved: 0, skipped: 0, userProfileUpdated: false };
     }
 
     // Minimum message threshold
     const chatMessages = messages.filter(m => m.role === 'user' || m.role === 'assistant');
+    console.log(`[MemoryExtractor] Checking extraction: ${chatMessages.length} messages (min: ${this.config.minMessagesForExtraction})`);
     if (chatMessages.length < this.config.minMessagesForExtraction) {
+      console.log('[MemoryExtractor] Skipping extraction: not enough messages');
       return { items: [], saved: 0, skipped: 0, userProfileUpdated: false };
     }
 
@@ -146,11 +149,14 @@ export class MemoryExtractor {
       }
     } else {
       // Rule-based extraction
+      console.log('[MemoryExtractor] Using rule-based extraction');
       extracted = this.ruleBasedExtraction(chatMessages);
+      console.log(`[MemoryExtractor] Rule-based extracted ${extracted.length} items before filtering`);
     }
 
     // Filter by importance threshold
     extracted = extracted.filter(item => item.importance >= this.config.minImportanceThreshold);
+    console.log(`[MemoryExtractor] After importance filtering (>= ${this.config.minImportanceThreshold}): ${extracted.length} items`);
 
     // Save to memory
     const memoryManager = getMemoryManager();
diff --git a/desktop/src/lib/reflection-engine.ts b/desktop/src/lib/reflection-engine.ts
index 6b7d49f..8fff2d2 100644
--- a/desktop/src/lib/reflection-engine.ts
+++ b/desktop/src/lib/reflection-engine.ts
@@ -21,6 +21,7 @@ import {
   type LLMServiceAdapter,
   type LLMProvider,
 } from './llm-service';
+import { canAutoExecute } from './autonomy-manager';
 
 // === Types ===
 
@@ -62,7 +63,7 @@ export const DEFAULT_REFLECTION_CONFIG: ReflectionConfig = {
   triggerAfterHours: 24,
   allowSoulModification: false,
   requireApproval: true,
-  useLLM: false,
+  useLLM: true,  // Enable LLM-powered deep reflection (Phase 4)
   llmFallbackToRules: true,
 };
 
@@ -137,9 +138,26 @@ export class ReflectionEngine {
   /**
    * Execute a reflection cycle for the given agent.
    */
-  async reflect(agentId: string, options?: { forceLLM?: boolean }): Promise<ReflectionResult> {
+  async reflect(agentId: string, options?: { forceLLM?: boolean; skipAutonomyCheck?: boolean }): Promise<ReflectionResult> {
     console.log(`[Reflection] Starting reflection for agent: ${agentId}`);
 
+    // Autonomy check - verify if reflection is allowed
+    if (!options?.skipAutonomyCheck) {
+      const { canProceed, decision } = canAutoExecute('reflection_run', 5);
+      if (!canProceed) {
+        console.log(`[Reflection] Autonomy check failed: ${decision.reason}`);
+        // Return empty result instead of throwing
+        return {
+          patterns: [],
+          improvements: [],
+          identityProposals: [],
+          newMemories: 0,
+          timestamp: new Date().toISOString(),
+        };
+      }
+      console.log(`[Reflection] Autonomy check passed: ${decision.reason}`);
+    }
+
     // Try LLM-powered reflection if enabled
     if ((this.config.useLLM || options?.forceLLM) && this.llmAdapter?.isAvailable()) {
       try {
@@ -575,7 +593,9 @@ ${recentHistory || '无'}
         identity.instructions + `\n\n## 自我反思改进\n${additions}`,
         `基于 ${negativePatterns.length} 个负面模式观察，建议在指令中增加自我改进提醒`
       );
-      proposals.push(proposal);
+      if (proposal) {
+        proposals.push(proposal);
+      }
     }
 
     return proposals;
diff --git a/desktop/src/lib/skill-discovery.ts b/desktop/src/lib/skill-discovery.ts
index 4dafb5f..69a1609 100644
--- a/desktop/src/lib/skill-discovery.ts
+++ b/desktop/src/lib/skill-discovery.ts
@@ -12,6 +12,7 @@
  */
 
 import { getMemoryManager } from './agent-memory';
+import { canAutoExecute } from './autonomy-manager';
 
 // === Types ===
 
@@ -365,13 +366,33 @@ export class SkillDiscoveryEngine {
 
   /**
    * Mark a skill as installed/uninstalled.
+   * Includes autonomy check for skill_install/skill_uninstall actions.
    */
-  setSkillInstalled(skillId: string, installed: boolean): void {
+  setSkillInstalled(
+    skillId: string,
+    installed: boolean,
+    options?: { skipAutonomyCheck?: boolean }
+  ): { success: boolean; reason?: string } {
     const skill = this.skills.find(s => s.id === skillId);
-    if (skill) {
-      skill.installed = installed;
-      this.saveIndex();
+    if (!skill) {
+      return { success: false, reason: `Skill not found: ${skillId}` };
     }
+
+    // Autonomy check - verify if skill installation is allowed
+    if (!options?.skipAutonomyCheck) {
+      const action = installed ? 'skill_install' : 'skill_uninstall';
+      const { canProceed, decision } = canAutoExecute(action, 6);
+      console.log(`[SkillDiscovery] Autonomy check for ${action}: ${decision.reason}`);
+
+      if (!canProceed) {
+        return { success: false, reason: decision.reason };
+      }
+    }
+
+    skill.installed = installed;
+    this.saveIndex();
+    console.log(`[SkillDiscovery] Skill ${skillId} ${installed ? 'installed' : 'uninstalled'}`);
+    return { success: true };
   }
 
   /**
diff --git a/desktop/src/main.tsx b/desktop/src/main.tsx
index 3b3452f..f14bebb 100644
--- a/desktop/src/main.tsx
+++ b/desktop/src/main.tsx
@@ -2,9 +2,12 @@
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import './index.css';
+import { ToastProvider } from './components/ui/Toast';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <ToastProvider>
+      <App />
+    </ToastProvider>
   </React.StrictMode>,
 );
diff --git a/desktop/src/store/chatStore.ts b/desktop/src/store/chatStore.ts
index ed41a02..204dc42 100644
--- a/desktop/src/store/chatStore.ts
+++ b/desktop/src/store/chatStore.ts
@@ -403,12 +403,21 @@ export const useChatStore = create<ChatState>()(
               set((state) => ({ messages: [...state.messages, handMsg] }));
             },
             onComplete: () => {
-              set((state) => ({
+              const state = get();
+
+              // Save conversation to persist across refresh
+              const conversations = upsertActiveConversation([...state.conversations], state);
+              const currentConvId = state.currentConversationId || conversations[0]?.id;
+
+              set({
                 isStreaming: false,
+                conversations,
+                currentConversationId: currentConvId,
                 messages: state.messages.map((m) =>
                   m.id === assistantId ? { ...m, streaming: false, runId } : m
                 ),
-              }));
+              });
+
               // Async memory extraction after stream completes
               const msgs = get().messages
                 .filter(m => m.role === 'user' || m.role === 'assistant')
diff --git a/desktop/src/store/gatewayStore.ts b/desktop/src/store/gatewayStore.ts
index 74758dd..a5d022e 100644
--- a/desktop/src/store/gatewayStore.ts
+++ b/desktop/src/store/gatewayStore.ts
@@ -1294,11 +1294,15 @@ export const useGatewayStore = create<GatewayStore>((set, get) => {
     },
 
     triggerHand: async (name: string, params?: Record<string, unknown>) => {
+      console.log(`[GatewayStore] Triggering hand: ${name}`, params);
       try {
         const result = await get().client.triggerHand(name, params);
+        console.log(`[GatewayStore] Hand trigger result:`, result);
         return result ? { runId: result.runId, status: result.status, startedAt: new Date().toISOString() } : undefined;
       } catch (err: unknown) {
-        set({ error: err instanceof Error ? err.message : String(err) });
+        const errorMsg = err instanceof Error ? err.message : String(err);
+        console.error(`[GatewayStore] Hand trigger error:`, errorMsg, err);
+        set({ error: errorMsg });
         return undefined;
       }
     },
diff --git a/desktop/test-results/.last-run.json b/desktop/test-results/.last-run.json
deleted file mode 100644
index cbcc1fb..0000000
--- a/desktop/test-results/.last-run.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "status": "passed",
-  "failedTests": []
-}
\ No newline at end of file
diff --git a/desktop/test-results/screenshots/01-app-layout.png b/desktop/test-results/screenshots/01-app-layout.png
deleted file mode 100644
index b17b8f1..0000000
Binary files a/desktop/test-results/screenshots/01-app-layout.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/02-connection-state.png b/desktop/test-results/screenshots/02-connection-state.png
deleted file mode 100644
index b17b8f1..0000000
Binary files a/desktop/test-results/screenshots/02-connection-state.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/02-sidebar-navigation.png b/desktop/test-results/screenshots/02-sidebar-navigation.png
deleted file mode 100644
index b17b8f1..0000000
Binary files a/desktop/test-results/screenshots/02-sidebar-navigation.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/03-chat-input.png b/desktop/test-results/screenshots/03-chat-input.png
deleted file mode 100644
index 65b366a..0000000
Binary files a/desktop/test-results/screenshots/03-chat-input.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/03-navigation-switch.png b/desktop/test-results/screenshots/03-navigation-switch.png
deleted file mode 100644
index 4a3e5d5..0000000
Binary files a/desktop/test-results/screenshots/03-navigation-switch.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/04-chat-response.png b/desktop/test-results/screenshots/04-chat-response.png
deleted file mode 100644
index 7a0e82c..0000000
Binary files a/desktop/test-results/screenshots/04-chat-response.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/04-settings-access.png b/desktop/test-results/screenshots/04-settings-access.png
deleted file mode 100644
index dae5e58..0000000
Binary files a/desktop/test-results/screenshots/04-settings-access.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/05-chat-area.png b/desktop/test-results/screenshots/05-chat-area.png
deleted file mode 100644
index b17b8f1..0000000
Binary files a/desktop/test-results/screenshots/05-chat-area.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/06-message-send.png b/desktop/test-results/screenshots/06-message-send.png
deleted file mode 100644
index f349a17..0000000
Binary files a/desktop/test-results/screenshots/06-message-send.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/07-conversation-list.png b/desktop/test-results/screenshots/07-conversation-list.png
deleted file mode 100644
index b17b8f1..0000000
Binary files a/desktop/test-results/screenshots/07-conversation-list.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/07-streaming-response.png b/desktop/test-results/screenshots/07-streaming-response.png
deleted file mode 100644
index 05d6abc..0000000
Binary files a/desktop/test-results/screenshots/07-streaming-response.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/08-hands-list.png b/desktop/test-results/screenshots/08-hands-list.png
deleted file mode 100644
index b17b8f1..0000000
Binary files a/desktop/test-results/screenshots/08-hands-list.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/08-offline-error.png b/desktop/test-results/screenshots/08-offline-error.png
deleted file mode 100644
index 7a8516d..0000000
Binary files a/desktop/test-results/screenshots/08-offline-error.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/10-scheduler-panel.png b/desktop/test-results/screenshots/10-scheduler-panel.png
deleted file mode 100644
index b17b8f1..0000000
Binary files a/desktop/test-results/screenshots/10-scheduler-panel.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/12-team-view.png b/desktop/test-results/screenshots/12-team-view.png
deleted file mode 100644
index b17b8f1..0000000
Binary files a/desktop/test-results/screenshots/12-team-view.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/13-swarm-dashboard.png b/desktop/test-results/screenshots/13-swarm-dashboard.png
deleted file mode 100644
index b17b8f1..0000000
Binary files a/desktop/test-results/screenshots/13-swarm-dashboard.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/14-settings-page.png b/desktop/test-results/screenshots/14-settings-page.png
deleted file mode 100644
index dae5e58..0000000
Binary files a/desktop/test-results/screenshots/14-settings-page.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/15-general-settings.png b/desktop/test-results/screenshots/15-general-settings.png
deleted file mode 100644
index dae5e58..0000000
Binary files a/desktop/test-results/screenshots/15-general-settings.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/16-model-settings.png b/desktop/test-results/screenshots/16-model-settings.png
deleted file mode 100644
index dae5e58..0000000
Binary files a/desktop/test-results/screenshots/16-model-settings.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/17-right-panel.png b/desktop/test-results/screenshots/17-right-panel.png
deleted file mode 100644
index b17b8f1..0000000
Binary files a/desktop/test-results/screenshots/17-right-panel.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/17-workflow-list.png b/desktop/test-results/screenshots/17-workflow-list.png
deleted file mode 100644
index 3507cc0..0000000
Binary files a/desktop/test-results/screenshots/17-workflow-list.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/18-offline-error.png b/desktop/test-results/screenshots/18-offline-error.png
deleted file mode 100644
index b17b8f1..0000000
Binary files a/desktop/test-results/screenshots/18-offline-error.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/20-mobile-layout.png b/desktop/test-results/screenshots/20-mobile-layout.png
deleted file mode 100644
index 5e74631..0000000
Binary files a/desktop/test-results/screenshots/20-mobile-layout.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/21-tablet-layout.png b/desktop/test-results/screenshots/21-tablet-layout.png
deleted file mode 100644
index 963bd51..0000000
Binary files a/desktop/test-results/screenshots/21-tablet-layout.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/21-team-list.png b/desktop/test-results/screenshots/21-team-list.png
deleted file mode 100644
index 0adf228..0000000
Binary files a/desktop/test-results/screenshots/21-team-list.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/22-desktop-layout.png b/desktop/test-results/screenshots/22-desktop-layout.png
deleted file mode 100644
index d057a6a..0000000
Binary files a/desktop/test-results/screenshots/22-desktop-layout.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/24-swarm-dashboard.png b/desktop/test-results/screenshots/24-swarm-dashboard.png
deleted file mode 100644
index 900c7f1..0000000
Binary files a/desktop/test-results/screenshots/24-swarm-dashboard.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/27-settings-page.png b/desktop/test-results/screenshots/27-settings-page.png
deleted file mode 100644
index dae5e58..0000000
Binary files a/desktop/test-results/screenshots/27-settings-page.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/28-general-settings.png b/desktop/test-results/screenshots/28-general-settings.png
deleted file mode 100644
index dae5e58..0000000
Binary files a/desktop/test-results/screenshots/28-general-settings.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/30-gateway-settings.png b/desktop/test-results/screenshots/30-gateway-settings.png
deleted file mode 100644
index dae5e58..0000000
Binary files a/desktop/test-results/screenshots/30-gateway-settings.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/32-right-panel.png b/desktop/test-results/screenshots/32-right-panel.png
deleted file mode 100644
index b17b8f1..0000000
Binary files a/desktop/test-results/screenshots/32-right-panel.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/35-first-time-user.png b/desktop/test-results/screenshots/35-first-time-user.png
deleted file mode 100644
index b17b8f1..0000000
Binary files a/desktop/test-results/screenshots/35-first-time-user.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/37-view-switching.png b/desktop/test-results/screenshots/37-view-switching.png
deleted file mode 100644
index 0adf228..0000000
Binary files a/desktop/test-results/screenshots/37-view-switching.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/38-session-persistence.png b/desktop/test-results/screenshots/38-session-persistence.png
deleted file mode 100644
index a3b3ddc..0000000
Binary files a/desktop/test-results/screenshots/38-session-persistence.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/39-rapid-switching.png b/desktop/test-results/screenshots/39-rapid-switching.png
deleted file mode 100644
index 0adf228..0000000
Binary files a/desktop/test-results/screenshots/39-rapid-switching.png and /dev/null differ
diff --git a/desktop/test-results/screenshots/41-keyboard-nav.png b/desktop/test-results/screenshots/41-keyboard-nav.png
deleted file mode 100644
index 79a5ba6..0000000
Binary files a/desktop/test-results/screenshots/41-keyboard-nav.png and /dev/null differ
diff --git a/docs/archive/openclaw-legacy/workbuddy界面/claw.html b/docs/archive/openclaw-legacy/workbuddy界面/claw.html
new file mode 100644
index 0000000..b3ccafe
--- /dev/null
+++ b/docs/archive/openclaw-legacy/workbuddy界面/claw.html
@@ -0,0 +1,524 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WorkBuddy - Claw</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            overflow: hidden;
+        }
+        
+        /* Custom scrollbar */
+        ::-webkit-scrollbar { width: 6px; height: 6px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
+        ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
+        
+        /* Robot floating animation */
+        @keyframes float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-8px); }
+        }
+        .robot-float { animation: float 4s ease-in-out infinite; }
+        
+        /* Title styling */
+        .claw-title {
+            font-size: 2.5rem;
+            font-weight: 700;
+            color: #1f2937;
+            letter-spacing: -0.02em;
+        }
+        
+        .claw-icon {
+            color: #dc2626;
+            display: inline-block;
+            transform: rotate(-15deg);
+            margin: 0 0.25rem;
+        }
+        
+        .ideas-text {
+            position: relative;
+            display: inline-block;
+        }
+        
+        .ideas-underline {
+            position: absolute;
+            bottom: -4px;
+            left: 0;
+            width: 100%;
+            height: 8px;
+            background: linear-gradient(90deg, #a78bfa 0%, #c084fc 100%);
+            opacity: 0.6;
+            border-radius: 4px;
+            transform: rotate(-1deg);
+        }
+        
+        .star-icon {
+            color: #10b981;
+            font-size: 0.8rem;
+            vertical-align: super;
+            margin-left: 0.25rem;
+        }
+        
+        /* Dropdown animations */
+        .dropdown-menu {
+            opacity: 0;
+            transform: scale(0.95) translateY(-10px);
+            transition: all 0.15s ease-out;
+            pointer-events: none;
+        }
+        .dropdown-menu.active {
+            opacity: 1;
+            transform: scale(1) translateY(0);
+            pointer-events: auto;
+        }
+        
+        /* Input area focus */
+        .input-container {
+            transition: all 0.2s ease;
+            border: 1px solid #e5e7eb;
+        }
+        .input-container:focus-within {
+            border-color: #6366f1;
+            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+        }
+        
+        /* Button hover effects */
+        .tool-btn {
+            transition: all 0.15s ease;
+        }
+        .tool-btn:hover {
+            background-color: #f3f4f6;
+        }
+        .tool-btn.active {
+            background-color: #f3f4f6;
+        }
+        
+        /* Sidebar item selected state */
+        .sidebar-item {
+            transition: all 0.15s ease;
+        }
+        .sidebar-item:hover {
+            background-color: #f3f4f6;
+        }
+        .sidebar-item.active {
+            background-color: #f3f4f6;
+            font-weight: 500;
+        }
+        
+        /* Model list item */
+        .model-item {
+            transition: background-color 0.15s;
+        }
+        .model-item:hover {
+            background-color: #f9fafb;
+        }
+        
+        /* Send button */
+        .send-btn {
+            transition: all 0.2s;
+        }
+        .send-btn:hover {
+            background-color: #10b981;
+            color: white;
+            transform: scale(1.05);
+        }
+    </style>
+</head>
+<body class="bg-white h-screen flex text-gray-800">
+
+    <!-- Left Sidebar -->
+    <aside class="w-64 bg-white border-r border-gray-200 flex flex-col h-full select-none">
+        <!-- App Header -->
+        <div class="h-14 flex items-center px-4 border-b border-gray-100 flex-shrink-0">
+            <div class="flex items-center gap-2">
+                <div class="w-8 h-8 bg-gradient-to-br from-emerald-400 to-teal-500 rounded-lg flex items-center justify-center text-white font-bold text-lg shadow-sm">
+                    <i class="fas fa-code text-sm"></i>
+                </div>
+                <span class="font-bold text-lg text-gray-800 tracking-tight">WorkBuddy</span>
+            </div>
+            <button class="ml-auto p-1.5 hover:bg-gray-100 rounded-lg text-gray-400 transition-colors">
+                <i class="far fa-clone text-sm"></i>
+            </button>
+        </div>
+
+        <!-- Menu Items -->
+        <nav class="flex-1 py-3 px-3 space-y-0.5 overflow-y-auto">
+            <!-- Search -->
+            <div class="px-1 mb-3">
+                <div class="relative">
+                    <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
+                    <input type="text" placeholder="搜索任务" 
+                           class="w-full pl-9 pr-8 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 transition-all">
+                    <button class="absolute right-2 top-1/2 -translate-y-1/2 p-1 hover:bg-gray-200 rounded text-gray-400 transition-colors">
+                        <i class="fas fa-sliders-h text-xs"></i>
+                    </button>
+                </div>
+            </div>
+
+            <!-- New Task Button -->
+            <button class="w-full flex items-center gap-3 px-3 py-2 hover:bg-gray-100 rounded-lg text-gray-700 transition-colors mb-1">
+                <i class="far fa-check-square text-emerald-600 w-5"></i>
+                <span class="font-medium">新建任务</span>
+            </button>
+
+            <!-- Claw Item (Active with icons) -->
+            <div class="sidebar-item active flex items-center justify-between px-3 py-2 rounded-lg cursor-pointer group">
+                <div class="flex items-center gap-3">
+                    <i class="fas fa-robot text-gray-700 w-5"></i>
+                    <span>Claw</span>
+                </div>
+                <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <button class="p-1 hover:bg-gray-200 rounded text-gray-500" title="打开文件夹">
+                        <i class="far fa-folder-open text-xs"></i>
+                    </button>
+                    <button class="p-1 hover:bg-gray-200 rounded text-gray-500" title="设置">
+                        <i class="fas fa-cog text-xs"></i>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Other Nav Items -->
+            <a href="#" class="sidebar-item flex items-center gap-3 px-3 py-2 text-gray-600 rounded-lg transition-colors">
+                <i class="fas fa-user-tie text-gray-400 w-5"></i>
+                <span>专家</span>
+            </a>
+            
+            <a href="#" class="sidebar-item flex items-center gap-3 px-3 py-2 text-gray-600 rounded-lg transition-colors">
+                <i class="fas fa-wand-magic-sparkles text-gray-400 w-5"></i>
+                <span>技能</span>
+            </a>
+            
+            <a href="#" class="sidebar-item flex items-center gap-3 px-3 py-2 text-gray-600 rounded-lg transition-colors">
+                <i class="fas fa-puzzle-piece text-gray-400 w-5"></i>
+                <span>插件</span>
+            </a>
+            
+            <a href="#" class="sidebar-item flex items-center gap-3 px-3 py-2 text-gray-600 rounded-lg transition-colors">
+                <i class="far fa-clock text-gray-400 w-5"></i>
+                <span>自动化</span>
+            </a>
+
+            <!-- Empty State -->
+            <div class="mt-8 px-4 text-center">
+                <p class="text-gray-900 font-medium mb-1">暂无任务</p>
+                <p class="text-gray-400 text-sm">点击上方按钮开始新任务</p>
+            </div>
+        </nav>
+
+        <!-- User Profile -->
+        <div class="p-3 border-t border-gray-200 flex-shrink-0">
+            <button class="flex items-center gap-3 w-full hover:bg-gray-50 p-2 rounded-lg transition-colors">
+                <div class="w-8 h-8 bg-gradient-to-br from-emerald-400 to-cyan-500 rounded-full flex items-center justify-center text-white font-bold shadow-sm">
+                    <i class="fas fa-robot text-xs"></i>
+                </div>
+                <span class="flex-1 text-left text-sm font-medium text-gray-700">iven</span>
+                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
+            </button>
+        </div>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="flex-1 flex flex-col h-full relative bg-white">
+        <!-- Top Bar -->
+        <header class="h-14 bg-white border-b border-gray-200 flex items-center justify-between px-4 flex-shrink-0">
+            <div class="flex-1"></div>
+            <div class="text-sm text-gray-600 font-medium">Agents</div>
+            <div class="flex-1 flex justify-end items-center gap-1">
+                <button class="w-8 h-8 flex items-center justify-center hover:bg-gray-100 rounded-lg text-gray-500 transition-colors">
+                    <i class="fas fa-minus text-xs"></i>
+                </button>
+                <button class="w-8 h-8 flex items-center justify-center hover:bg-gray-100 rounded-lg text-gray-500 transition-colors">
+                    <i class="far fa-square text-xs"></i>
+                </button>
+                <button class="w-8 h-8 flex items-center justify-center hover:bg-red-50 hover:text-red-500 rounded-lg text-gray-500 transition-colors">
+                    <i class="fas fa-times text-xs"></i>
+                </button>
+            </div>
+        </header>
+
+        <!-- Content Area -->
+        <div class="flex-1 overflow-y-auto bg-white flex flex-col items-center justify-center p-8">
+            <div class="w-full max-w-3xl flex flex-col items-center">
+                
+                <!-- Robot Mascot -->
+                <div class="robot-float mb-6 relative">
+                    <div class="w-24 h-24 relative">
+                        <img src="https://api.dicebear.com/7.x/bottts/svg?seed=claw-red&backgroundColor=ffdfbf&eyes=happy" 
+                             alt="Claw Robot" 
+                             class="w-full h-full drop-shadow-xl">
+                    </div>
+                </div>
+
+                <!-- Title -->
+                <h1 class="claw-title mb-1 text-center">
+                    Claw<span class="claw-icon"><i class="fas fa-paw"></i></span>Your 
+                    <span class="ideas-text">Ideas<span class="ideas-underline"></span></span>
+                </h1>
+                <h2 class="claw-title mb-6 text-center">
+                    Into Reality<span class="star-icon"><i class="fas fa-star"></i></span>
+                </h2>
+
+                <!-- Description -->
+                <div class="text-center text-gray-600 mb-8 space-y-1">
+                    <p class="text-base">通过 Claw，让 Agent 随时随地接手并推进你的工作。</p>
+                    <p class="text-base">前往 Claw 设置，连接企业微信、飞书、钉钉或 QQ，把任务带到每一个消息入口。</p>
+                </div>
+
+                <!-- Input Area -->
+                <div class="w-full input-container bg-white rounded-2xl shadow-sm relative">
+                    <!-- Input Toolbar -->
+                    <div class="flex items-center gap-1 px-4 pt-3 pb-2">
+                        <button class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 text-gray-600 transition-colors" title="提及">
+                            <i class="fas fa-at"></i>
+                        </button>
+                        <button class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 text-gray-600 transition-colors" title="附件">
+                            <i class="fas fa-paperclip"></i>
+                        </button>
+                    </div>
+
+                    <!-- Text Input -->
+                    <div class="px-4 pb-2">
+                        <textarea 
+                            placeholder="输入消息..." 
+                            class="w-full h-20 resize-none outline-none text-gray-700 placeholder-gray-400 text-base leading-relaxed bg-transparent"
+                            style="min-height: 60px;"></textarea>
+                    </div>
+
+                    <!-- Bottom Toolbar -->
+                    <div class="px-3 pb-3 flex items-center justify-between">
+                        <div class="flex items-center gap-2">
+                            <!-- Craft Dropdown -->
+                            <div class="relative" id="craftDropdown">
+                                <button onclick="toggleDropdown('craftDropdown')" class="tool-btn flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium text-gray-700 border border-gray-200 bg-white">
+                                    <i class="far fa-window-maximize text-xs text-gray-500"></i>
+                                    <span>Craft</span>
+                                    <i class="fas fa-chevron-down text-xs text-gray-400 ml-1"></i>
+                                </button>
+                                <!-- Craft Menu -->
+                                <div class="dropdown-menu absolute bottom-full left-0 mb-2 w-48 bg-white border border-gray-200 rounded-xl shadow-xl py-1.5 z-50">
+                                    <button class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 text-left text-sm text-gray-700">
+                                        <i class="far fa-window-maximize text-gray-500"></i>
+                                        <span>Craft</span>
+                                        <i class="fas fa-check text-emerald-500 ml-auto text-xs"></i>
+                                    </button>
+                                    <button class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 text-left text-sm text-gray-700">
+                                        <i class="far fa-calendar-check text-gray-500"></i>
+                                        <span>Plan</span>
+                                    </button>
+                                    <button class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 text-left text-sm text-gray-700">
+                                        <i class="far fa-comment-dots text-gray-500"></i>
+                                        <span>Ask</span>
+                                    </button>
+                                </div>
+                            </div>
+
+                            <!-- Auto Dropdown -->
+                            <div class="relative" id="autoDropdown">
+                                <button onclick="toggleDropdown('autoDropdown')" class="tool-btn flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium text-gray-700 border border-gray-200 bg-white">
+                                    <i class="fas fa-layer-group text-xs text-gray-500"></i>
+                                    <span>Auto</span>
+                                    <i class="fas fa-chevron-down text-xs text-gray-400 ml-1"></i>
+                                </button>
+                                <!-- Model Menu -->
+                                <div class="dropdown-menu absolute bottom-full left-0 mb-2 w-64 bg-white border border-gray-200 rounded-xl shadow-xl py-2 z-50">
+                                    <div class="px-3 py-1.5 text-xs text-gray-400 font-medium uppercase tracking-wider">内置模型</div>
+                                    
+                                    <button class="model-item w-full flex items-center gap-3 px-4 py-2 text-left">
+                                        <i class="fas fa-layer-group text-gray-600 text-sm"></i>
+                                        <span class="flex-1 text-sm text-gray-700">Auto</span>
+                                        <i class="fas fa-check text-emerald-500 text-xs"></i>
+                                    </button>
+                                    
+                                    <button class="model-item w-full flex items-center gap-3 px-4 py-2 text-left">
+                                        <i class="fas fa-wave-square text-pink-500 text-sm"></i>
+                                        <span class="text-sm text-gray-700">MiniMax-M2.5</span>
+                                        <i class="fas fa-snowflake text-gray-300 text-xs ml-auto"></i>
+                                    </button>
+                                    
+                                    <button class="model-item w-full flex items-center gap-3 px-4 py-2 text-left">
+                                        <div class="w-5 h-5 bg-purple-600 rounded flex items-center justify-center text-white text-xs font-bold">Z</div>
+                                        <span class="text-sm text-gray-700">GLM-5.0</span>
+                                        <i class="fas fa-snowflake text-gray-300 text-xs ml-auto"></i>
+                                    </button>
+                                    
+                                    <button class="model-item w-full flex items-center gap-3 px-4 py-2 text-left">
+                                        <div class="w-5 h-5 bg-purple-500 rounded flex items-center justify-center text-white text-xs font-bold">Z</div>
+                                        <span class="text-sm text-gray-700">GLM-4.7</span>
+                                        <i class="fas fa-snowflake text-gray-300 text-xs ml-auto"></i>
+                                    </button>
+                                    
+                                    <button class="model-item w-full flex items-center gap-3 px-4 py-2 text-left">
+                                        <div class="w-5 h-5 bg-gray-800 rounded flex items-center justify-center text-white text-xs font-bold">K</div>
+                                        <span class="text-sm text-gray-700">Kimi-K2.5</span>
+                                        <i class="fas fa-snowflake text-gray-300 text-xs ml-auto"></i>
+                                    </button>
+                                    
+                                    <button class="model-item w-full flex items-center gap-3 px-4 py-2 text-left">
+                                        <div class="w-5 h-5 bg-gray-700 rounded flex items-center justify-center text-white text-xs font-bold">K</div>
+                                        <span class="text-sm text-gray-700">Kimi-K2-Thinking</span>
+                                        <i class="fas fa-snowflake text-gray-300 text-xs ml-auto"></i>
+                                    </button>
+                                    
+                                    <button class="model-item w-full flex items-center gap-3 px-4 py-2 text-left">
+                                        <i class="fas fa-fish text-blue-500 text-sm"></i>
+                                        <span class="text-sm text-gray-700">DeepSeek-V3.2</span>
+                                        <i class="fas fa-snowflake text-gray-300 text-xs ml-auto"></i>
+                                    </button>
+                                </div>
+                            </div>
+
+                            <!-- Skills Dropdown -->
+                            <div class="relative" id="skillsDropdown">
+                                <button onclick="toggleDropdown('skillsDropdown')" class="tool-btn flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium text-gray-700 border border-gray-200 bg-white">
+                                    <i class="fas fa-wand-magic-sparkles text-xs text-gray-500"></i>
+                                    <span>Skills</span>
+                                </button>
+                                <!-- Skills Menu -->
+                                <div class="dropdown-menu absolute bottom-full left-0 mb-2 w-80 bg-white border border-gray-200 rounded-xl shadow-xl py-2 z-50">
+                                    <div class="px-3 pb-2">
+                                        <div class="relative">
+                                            <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs"></i>
+                                            <input type="text" placeholder="搜索技能" class="w-full pl-8 pr-3 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm outline-none focus:border-emerald-500">
+                                        </div>
+                                    </div>
+                                    <div class="py-4 text-center text-gray-400 text-sm">
+                                        未找到技能
+                                    </div>
+                                    <div class="border-t border-gray-100 mt-1">
+                                        <button class="w-full flex items-center gap-2 px-4 py-2.5 hover:bg-gray-50 text-left text-sm text-gray-700">
+                                            <i class="fas fa-file-import text-gray-500"></i>
+                                            <span>导入技能</span>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="flex items-center gap-2">
+                            <!-- Folder Selection -->
+                            <div class="relative" id="folderDropdown">
+                                <button onclick="toggleDropdown('folderDropdown')" class="tool-btn flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm text-gray-600 hover:text-gray-800 transition-colors">
+                                    <i class="far fa-folder text-xs"></i>
+                                    <span>Claw</span>
+                                    <i class="fas fa-chevron-down text-xs ml-1"></i>
+                                </button>
+                                <!-- Folder Menu -->
+                                <div class="dropdown-menu absolute bottom-full right-0 mb-2 w-72 bg-white border border-gray-200 rounded-xl shadow-xl py-2 z-50">
+                                    <div class="px-3 pb-2">
+                                        <div class="relative">
+                                            <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs"></i>
+                                            <input type="text" placeholder="搜索工作空间" class="w-full pl-8 pr-8 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm outline-none focus:border-emerald-500">
+                                            <i class="fas fa-search absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs"></i>
+                                        </div>
+                                    </div>
+                                    
+                                    <button class="w-full flex items-center justify-between px-4 py-2.5 hover:bg-gray-50 text-left text-sm text-gray-700">
+                                        <span>从空文件夹开始</span>
+                                    </button>
+                                    
+                                    <button class="w-full flex items-center gap-2 px-4 py-2.5 hover:bg-gray-50 text-left text-sm text-gray-700">
+                                        <i class="far fa-folder-open text-gray-400"></i>
+                                        <span>打开新文件夹</span>
+                                    </button>
+                                    
+                                    <div class="border-t border-gray-100 my-1"></div>
+                                    
+                                    <button class="w-full flex items-center justify-between px-4 py-2.5 hover:bg-gray-50 text-left bg-gray-50">
+                                        <div class="flex flex-col">
+                                            <span class="text-sm font-medium text-gray-900">Claw</span>
+                                            <span class="text-xs text-gray-500 truncate max-w-[200px]">c:\Users\szend\WorkBudd...</span>
+                                        </div>
+                                        <i class="fas fa-check text-emerald-500 text-xs"></i>
+                                    </button>
+                                </div>
+                            </div>
+
+                            <!-- Send Button -->
+                            <button class="send-btn w-9 h-9 bg-gray-200 rounded-lg flex items-center justify-center text-gray-400 hover:bg-emerald-500 hover:text-white transition-all">
+                                <i class="fas fa-paper-plane text-sm"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // Track active dropdown
+        let activeDropdown = null;
+
+        function toggleDropdown(id) {
+            const dropdown = document.getElementById(id);
+            const menu = dropdown.querySelector('.dropdown-menu');
+            
+            // Close if clicking same dropdown
+            if (activeDropdown === id) {
+                menu.classList.remove('active');
+                activeDropdown = null;
+                return;
+            }
+            
+            // Close all others
+            document.querySelectorAll('.dropdown-menu').forEach(m => {
+                m.classList.remove('active');
+            });
+            
+            // Open this one
+            menu.classList.add('active');
+            activeDropdown = id;
+            
+            // Prevent event bubbling
+            event.stopPropagation();
+        }
+
+        // Close dropdowns when clicking outside
+        document.addEventListener('click', function(e) {
+            if (!e.target.closest('.relative')) {
+                document.querySelectorAll('.dropdown-menu').forEach(m => {
+                    m.classList.remove('active');
+                });
+                activeDropdown = null;
+            }
+        });
+
+        // Auto-resize textarea
+        const textarea = document.querySelector('textarea');
+        textarea.addEventListener('input', function() {
+            this.style.height = 'auto';
+            this.style.height = Math.max(60, this.scrollHeight) + 'px';
+        });
+
+        // Model selection interaction
+        document.querySelectorAll('.model-item').forEach(item => {
+            item.addEventListener('click', function() {
+                // Remove check from all
+                document.querySelectorAll('.model-item .fa-check').forEach(check => {
+                    check.remove();
+                });
+                // Add check to clicked
+                const check = document.createElement('i');
+                check.className = 'fas fa-check text-emerald-500 text-xs ml-auto';
+                this.appendChild(check);
+            });
+        });
+
+        // Prevent dropdown close when clicking inside
+        document.querySelectorAll('.dropdown-menu').forEach(menu => {
+            menu.addEventListener('click', function(e) {
+                if (e.target.tagName !== 'BUTTON' && !e.target.closest('button')) {
+                    e.stopPropagation();
+                }
+            });
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/archive/openclaw-legacy/workbuddy界面/专家.html b/docs/archive/openclaw-legacy/workbuddy界面/专家.html
new file mode 100644
index 0000000..981b03f
--- /dev/null
+++ b/docs/archive/openclaw-legacy/workbuddy界面/专家.html
@@ -0,0 +1,477 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WorkBuddy - 专家中心</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            overflow: hidden;
+        }
+        
+        /* Custom scrollbar */
+        ::-webkit-scrollbar { width: 6px; height: 6px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
+        ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
+        
+        /* Hide scrollbar for category nav but keep functionality */
+        .category-scroll::-webkit-scrollbar { display: none; }
+        .category-scroll { -ms-overflow-style: none; scrollbar-width: none; }
+        
+        /* Expert card animations */
+        .expert-card {
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            border-top: 4px solid #8b5cf6;
+        }
+        .expert-card:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        
+        /* Avatar ring animation on hover */
+        .avatar-ring {
+            transition: all 0.3s ease;
+        }
+        .expert-card:hover .avatar-ring {
+            box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2);
+        }
+        
+        /* Category tab active indicator */
+        .category-tab {
+            position: relative;
+            white-space: nowrap;
+        }
+        .category-tab.active::after {
+            content: '';
+            position: absolute;
+            bottom: -1px;
+            left: 0;
+            right: 0;
+            height: 2px;
+            background-color: #8b5cf6;
+        }
+        
+        /* Summon button pulse */
+        @keyframes pulse-purple {
+            0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4); }
+            50% { box-shadow: 0 0 0 10px rgba(139, 92, 246, 0); }
+        }
+        .summon-btn {
+            background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+            transition: all 0.3s ease;
+        }
+        .summon-btn:hover {
+            transform: scale(1.05);
+            box-shadow: 0 10px 20px -5px rgba(139, 92, 246, 0.4);
+        }
+        .summon-btn:active {
+            transform: scale(0.98);
+        }
+        
+        /* Tag styling */
+        .expert-tag {
+            background-color: #f3e8ff;
+            color: #7c3aed;
+            font-size: 0.75rem;
+            padding: 0.25rem 0.75rem;
+            border-radius: 9999px;
+            font-weight: 500;
+            display: inline-block;
+        }
+        
+        /* Sidebar active state */
+        .sidebar-item.active {
+            background-color: #f3f4f6;
+            font-weight: 500;
+        }
+    </style>
+</head>
+<body class="bg-white h-screen flex text-gray-800">
+
+    <!-- Left Sidebar -->
+    <aside class="w-64 bg-white border-r border-gray-200 flex flex-col h-full flex-shrink-0">
+        <!-- App Header -->
+        <div class="h-14 flex items-center px-4 border-b border-gray-100 flex-shrink-0">
+            <div class="flex items-center gap-2">
+                <div class="w-8 h-8 bg-gradient-to-br from-emerald-400 to-teal-500 rounded-lg flex items-center justify-center text-white font-bold text-lg shadow-sm">
+                    <i class="fas fa-code text-sm"></i>
+                </div>
+                <span class="font-bold text-lg text-gray-800 tracking-tight">WorkBuddy</span>
+            </div>
+            <button class="ml-auto p-1.5 hover:bg-gray-100 rounded-lg text-gray-400 transition-colors">
+                <i class="far fa-clone text-sm"></i>
+            </button>
+        </div>
+
+        <!-- Menu Items -->
+        <nav class="flex-1 py-3 px-3 space-y-0.5 overflow-y-auto">
+            <!-- Search -->
+            <div class="px-1 mb-3">
+                <div class="relative">
+                    <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
+                    <input type="text" placeholder="搜索任务" 
+                           class="w-full pl-9 pr-8 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 transition-all">
+                    <button class="absolute right-2 top-1/2 -translate-y-1/2 p-1 hover:bg-gray-200 rounded text-gray-400 transition-colors">
+                        <i class="fas fa-sliders-h text-xs"></i>
+                    </button>
+                </div>
+            </div>
+
+            <!-- New Task Button -->
+            <button class="w-full flex items-center gap-3 px-3 py-2 hover:bg-gray-100 rounded-lg text-gray-700 transition-colors mb-1">
+                <i class="far fa-check-square text-emerald-600 w-5"></i>
+                <span class="font-medium">新建任务</span>
+            </button>
+
+            <!-- Nav Items -->
+            <a href="#" class="sidebar-item flex items-center gap-3 px-3 py-2 text-gray-600 rounded-lg transition-colors">
+                <i class="fas fa-robot text-gray-400 w-5"></i>
+                <span>Claw</span>
+            </a>
+            
+            <a href="#" class="sidebar-item active flex items-center gap-3 px-3 py-2 text-gray-900 rounded-lg transition-colors">
+                <i class="fas fa-user-tie text-gray-700 w-5"></i>
+                <span>专家</span>
+            </a>
+            
+            <a href="#" class="sidebar-item flex items-center gap-3 px-3 py-2 text-gray-600 rounded-lg transition-colors">
+                <i class="fas fa-wand-magic-sparkles text-gray-400 w-5"></i>
+                <span>技能</span>
+            </a>
+            
+            <a href="#" class="sidebar-item flex items-center gap-3 px-3 py-2 text-gray-600 rounded-lg transition-colors">
+                <i class="fas fa-puzzle-piece text-gray-400 w-5"></i>
+                <span>插件</span>
+            </a>
+            
+            <a href="#" class="sidebar-item flex items-center gap-3 px-3 py-2 text-gray-600 rounded-lg transition-colors">
+                <i class="far fa-clock text-gray-400 w-5"></i>
+                <span>自动化</span>
+            </a>
+
+            <!-- Empty State -->
+            <div class="mt-8 px-4 text-center">
+                <p class="text-gray-900 font-medium mb-1">暂无任务</p>
+                <p class="text-gray-400 text-sm">点击上方按钮开始新任务</p>
+            </div>
+        </nav>
+
+        <!-- User Profile -->
+        <div class="p-3 border-t border-gray-200 flex-shrink-0">
+            <button class="flex items-center gap-3 w-full hover:bg-gray-50 p-2 rounded-lg transition-colors">
+                <div class="w-8 h-8 bg-gradient-to-br from-emerald-400 to-cyan-500 rounded-full flex items-center justify-center text-white font-bold shadow-sm">
+                    <i class="fas fa-robot text-xs"></i>
+                </div>
+                <span class="flex-1 text-left text-sm font-medium text-gray-700">iven</span>
+                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
+            </button>
+        </div>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="flex-1 flex flex-col h-full bg-white overflow-hidden">
+        <!-- Top Bar -->
+        <header class="h-14 bg-white border-b border-gray-200 flex items-center justify-between px-6 flex-shrink-0">
+            <div class="flex items-center gap-2">
+                <div class="w-8 h-8 bg-gradient-to-br from-emerald-400 to-teal-500 rounded-lg flex items-center justify-center text-white font-bold">
+                    <i class="fas fa-code text-sm"></i>
+                </div>
+                <span class="font-bold text-lg">WorkBuddy</span>
+            </div>
+            <div class="text-sm text-gray-600 font-medium">Agents</div>
+            <div class="flex items-center gap-2">
+                <button class="p-2 hover:bg-gray-100 rounded-lg text-gray-500">
+                    <i class="fas fa-minus text-xs"></i>
+                </button>
+                <button class="p-2 hover:bg-gray-100 rounded-lg text-gray-500">
+                    <i class="far fa-square text-xs"></i>
+                </button>
+                <button class="p-2 hover:bg-red-50 rounded-lg text-gray-500 hover:text-red-500">
+                    <i class="fas fa-times text-xs"></i>
+                </button>
+            </div>
+        </header>
+
+        <!-- Content Area -->
+        <div class="flex-1 overflow-y-auto bg-gray-50/50">
+            <div class="max-w-7xl mx-auto px-8 py-8">
+                
+                <!-- Header Section -->
+                <div class="mb-8">
+                    <h1 class="text-3xl font-bold text-gray-900 mb-2">专家中心</h1>
+                    <p class="text-gray-500 text-base">按行业分类浏览专家，召唤他们为你服务</p>
+                </div>
+
+                <!-- Category Tabs -->
+                <div class="mb-8 border-b border-gray-200">
+                    <div class="category-scroll flex gap-8 overflow-x-auto pb-0">
+                        <button class="category-tab active pb-3 text-violet-600 font-medium text-sm" onclick="filterExperts('all', this)">
+                            全部
+                        </button>
+                        <button class="category-tab pb-3 text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors" onclick="filterExperts('design', this)">
+                            设计 <span class="text-gray-400 ml-1">(8)</span>
+                        </button>
+                        <button class="category-tab pb-3 text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors" onclick="filterExperts('engineering', this)">
+                            工程技术 <span class="text-gray-400 ml-1">(21)</span>
+                        </button>
+                        <button class="category-tab pb-3 text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors" onclick="filterExperts('marketing', this)">
+                            市场营销 <span class="text-gray-400 ml-1">(26)</span>
+                        </button>
+                        <button class="category-tab pb-3 text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors" onclick="filterExperts('media', this)">
+                            付费媒体 <span class="text-gray-400 ml-1">(7)</span>
+                        </button>
+                        <button class="category-tab pb-3 text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors" onclick="filterExperts('sales', this)">
+                            销售 <span class="text-gray-400 ml-1">(8)</span>
+                        </button>
+                        <button class="category-tab pb-3 text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors" onclick="filterExperts('product', this)">
+                            产品 <span class="text-gray-400 ml-1">(4)</span>
+                        </button>
+                        <button class="category-tab pb-3 text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors" onclick="filterExperts('pm', this)">
+                            项目管理 <span class="text-gray-400 ml-1">(6)</span>
+                        </button>
+                        <button class="category-tab pb-3 text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors" onclick="filterExperts('quality', this)">
+                            质量测试 <span class="text-gray-400 ml-1">(12)</span>
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Experts Grid -->
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="expertsGrid">
+                    
+                    <!-- Expert Card: Kai -->
+                    <div class="expert-card bg-white rounded-2xl p-6 border border-gray-100 flex flex-col items-center text-center relative overflow-hidden group" data-category="marketing">
+                        <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-violet-500 to-purple-600"></div>
+                        <div class="avatar-ring w-20 h-20 rounded-full overflow-hidden mb-4 border-4 border-white shadow-lg relative">
+                            <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Kai&backgroundColor=b6e3f4&clothing=graphicShirt&eyebrows=default&eyes=happy&mouth=smile&top=shortHair" 
+                                 alt="Kai" class="w-full h-full object-cover">
+                        </div>
+                        <h3 class="text-lg font-bold text-gray-900 mb-2">Kai</h3>
+                        <span class="expert-tag mb-3">内容创作专家</span>
+                        <p class="text-gray-500 text-sm leading-relaxed mb-6 flex-1 line-clamp-3">
+                            擅长创作引人入胜的多平台内容，让品牌故事触达目标受众
+                        </p>
+                        <button class="summon-btn w-full py-2.5 rounded-xl text-white font-medium text-sm flex items-center justify-center gap-2 shadow-lg shadow-violet-200" onclick="summonExpert('Kai')">
+                            <i class="fas fa-plus"></i>
+                            立即召唤
+                        </button>
+                    </div>
+
+                    <!-- Expert Card: Phoebe -->
+                    <div class="expert-card bg-white rounded-2xl p-6 border border-gray-100 flex flex-col items-center text-center relative overflow-hidden group" data-category="engineering">
+                        <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-violet-500 to-purple-600"></div>
+                        <div class="avatar-ring w-20 h-20 rounded-full overflow-hidden mb-4 border-4 border-white shadow-lg">
+                            <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Phoebe&backgroundColor=c0aede&clothing=collarAndSweater&eyes=default&mouth=default&top=longHair" 
+                                 alt="Phoebe" class="w-full h-full object-cover">
+                        </div>
+                        <h3 class="text-lg font-bold text-gray-900 mb-2">Phoebe</h3>
+                        <span class="expert-tag mb-3">数据分析报告师</span>
+                        <p class="text-gray-500 text-sm leading-relaxed mb-6 flex-1 line-clamp-3">
+                            将复杂数据转化为清晰可执行的业务报告，让数据驱动决策
+                        </p>
+                        <button class="summon-btn w-full py-2.5 rounded-xl text-white font-medium text-sm flex items-center justify-center gap-2 shadow-lg shadow-violet-200" onclick="summonExpert('Phoebe')">
+                            <i class="fas fa-plus"></i>
+                            立即召唤
+                        </button>
+                    </div>
+
+                    <!-- Expert Card: Jude -->
+                    <div class="expert-card bg-white rounded-2xl p-6 border border-gray-100 flex flex-col items-center text-center relative overflow-hidden group" data-category="sales">
+                        <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-violet-500 to-purple-600"></div>
+                        <div class="avatar-ring w-20 h-20 rounded-full overflow-hidden mb-4 border-4 border-white shadow-lg">
+                            <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Jude&backgroundColor=ffdfbf&clothing=blazerAndShirt&eyes=default&mouth=smile&top=shortHair" 
+                                 alt="Jude" class="w-full h-full object-cover">
+                        </div>
+                        <h3 class="text-lg font-bold text-gray-900 mb-2">Jude</h3>
+                        <span class="expert-tag mb-3">中国电商运营专家</span>
+                        <p class="text-gray-500 text-sm leading-relaxed mb-6 flex-1 line-clamp-3">
+                            精通天猫京东拼多多等平台运营，从选品到爆款一站式操盘
+                        </p>
+                        <button class="summon-btn w-full py-2.5 rounded-xl text-white font-medium text-sm flex items-center justify-center gap-2 shadow-lg shadow-violet-200" onclick="summonExpert('Jude')">
+                            <i class="fas fa-plus"></i>
+                            立即召唤
+                        </button>
+                    </div>
+
+                    <!-- Expert Card: Maya -->
+                    <div class="expert-card bg-white rounded-2xl p-6 border border-gray-100 flex flex-col items-center text-center relative overflow-hidden group" data-category="media">
+                        <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-violet-500 to-purple-600"></div>
+                        <div class="avatar-ring w-20 h-20 rounded-full overflow-hidden mb-4 border-4 border-white shadow-lg">
+                            <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Maya&backgroundColor=ffd5dc&clothing=graphicShirt&eyes=default&mouth=smile&top=longHair" 
+                                 alt="Maya" class="w-full h-full object-cover">
+                        </div>
+                        <h3 class="text-lg font-bold text-gray-900 mb-2">Maya</h3>
+                        <span class="expert-tag mb-3">抖音策略专家</span>
+                        <p class="text-gray-500 text-sm leading-relaxed mb-6 flex-1 line-clamp-3">
+                            精通抖音算法和内容营销，助力品牌打造短视频爆款并实现商业变现
+                        </p>
+                        <button class="summon-btn w-full py-2.5 rounded-xl text-white font-medium text-sm flex items-center justify-center gap-2 shadow-lg shadow-violet-200" onclick="summonExpert('Maya')">
+                            <i class="fas fa-plus"></i>
+                            立即召唤
+                        </button>
+                    </div>
+
+                    <!-- Expert Card: Ula -->
+                    <div class="expert-card bg-white rounded-2xl p-6 border border-gray-100 flex flex-col items-center text-center relative overflow-hidden group" data-category="sales">
+                        <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-violet-500 to-purple-600"></div>
+                        <div class="avatar-ring w-20 h-20 rounded-full overflow-hidden mb-4 border-4 border-white shadow-lg">
+                            <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Ula&backgroundColor=d1d4f9&clothing=collarAndSweater&eyes=default&mouth=default&top=shortHair" 
+                                 alt="Ula" class="w-full h-full object-cover">
+                        </div>
+                        <h3 class="text-lg font-bold text-gray-900 mb-2">Ula</h3>
+                        <span class="expert-tag mb-3">销售教练</span>
+                        <p class="text-gray-500 text-sm leading-relaxed mb-6 flex-1 line-clamp-3">
+                            用苏格拉底式提问训练销售团队，从60%达标到总统俱乐部
+                        </p>
+                        <button class="summon-btn w-full py-2.5 rounded-xl text-white font-medium text-sm flex items-center justify-center gap-2 shadow-lg shadow-violet-200" onclick="summonExpert('Ula')">
+                            <i class="fas fa-plus"></i>
+                            立即召唤
+                        </button>
+                    </div>
+
+                    <!-- Expert Card: Ben -->
+                    <div class="expert-card bg-white rounded-2xl p-6 border border-gray-100 flex flex-col items-center text-center relative overflow-hidden group" data-category="design">
+                        <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-violet-500 to-purple-600"></div>
+                        <div class="avatar-ring w-20 h-20 rounded-full overflow-hidden mb-4 border-4 border-white shadow-lg">
+                            <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Ben&backgroundColor=c0aede&clothing=blazerAndShirt&eyes=default&mouth=smile&top=shortHair" 
+                                 alt="Ben" class="w-full h-full object-cover">
+                        </div>
+                        <h3 class="text-lg font-bold text-gray-900 mb-2">Ben</h3>
+                        <span class="expert-tag mb-3">品牌策略师</span>
+                        <p class="text-gray-500 text-sm leading-relaxed mb-6 flex-1 line-clamp-3">
+                            15年品牌战略经验，守护品牌一致性的终极捍卫者
+                        </p>
+                        <button class="summon-btn w-full py-2.5 rounded-xl text-white font-medium text-sm flex items-center justify-center gap-2 shadow-lg shadow-violet-200" onclick="summonExpert('Ben')">
+                            <i class="fas fa-plus"></i>
+                            立即召唤
+                        </button>
+                    </div>
+
+                    <!-- Expert Card: Fay -->
+                    <div class="expert-card bg-white rounded-2xl p-6 border border-gray-100 flex flex-col items-center text-center relative overflow-hidden group" data-category="marketing">
+                        <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-violet-500 to-purple-600"></div>
+                        <div class="avatar-ring w-20 h-20 rounded-full overflow-hidden mb-4 border-4 border-white shadow-lg">
+                            <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Fay&backgroundColor=ffdfbf&clothing=graphicShirt&eyes=default&mouth=smile&top=longHair" 
+                                 alt="Fay" class="w-full h-full object-cover">
+                        </div>
+                        <h3 class="text-lg font-bold text-gray-900 mb-2">Fay</h3>
+                        <span class="expert-tag mb-3">小红书运营专家</span>
+                        <p class="text-gray-500 text-sm leading-relaxed mb-6 flex-1 line-clamp-3">
+                            深谙小红书种草生态和推荐机制，打造高互动率种草内容
+                        </p>
+                        <button class="summon-btn w-full py-2.5 rounded-xl text-white font-medium text-sm flex items-center justify-center gap-2 shadow-lg shadow-violet-200" onclick="summonExpert('Fay')">
+                            <i class="fas fa-plus"></i>
+                            立即召唤
+                        </button>
+                    </div>
+
+                    <!-- Expert Card: Tess -->
+                    <div class="expert-card bg-white rounded-2xl p-6 border border-gray-100 flex flex-col items-center text-center relative overflow-hidden group" data-category="product">
+                        <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-violet-500 to-purple-600"></div>
+                        <div class="avatar-ring w-20 h-20 rounded-full overflow-hidden mb-4 border-4 border-white shadow-lg">
+                            <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Tess&backgroundColor=b6e3f4&clothing=collarAndSweater&eyes=default&mouth=default&top=longHair" 
+                                 alt="Tess" class="w-full h-full object-cover">
+                        </div>
+                        <h3 class="text-lg font-bold text-gray-900 mb-2">Tess</h3>
+                        <span class="expert-tag mb-3">招聘专家</span>
+                        <p class="text-gray-500 text-sm leading-relaxed mb-6 flex-1 line-clamp-3">
+                            精通人才招聘全流程，从简历筛选到面试评估，为企业寻找最佳人才
+                        </p>
+                        <button class="summon-btn w-full py-2.5 rounded-xl text-white font-medium text-sm flex items-center justify-center gap-2 shadow-lg shadow-violet-200" onclick="summonExpert('Tess')">
+                            <i class="fas fa-plus"></i>
+                            立即召唤
+                        </button>
+                    </div>
+
+                </div>
+
+                <!-- Loading More Indicator -->
+                <div class="mt-12 text-center">
+                    <div class="inline-flex items-center gap-2 text-gray-400 text-sm">
+                        <i class="fas fa-circle-notch fa-spin"></i>
+                        <span>更多专家加载中...</span>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </main>
+
+    <!-- Toast Notification -->
+    <div id="toast" class="fixed bottom-8 right-8 bg-gray-900 text-white px-6 py-3 rounded-xl shadow-2xl transform translate-y-20 opacity-0 transition-all duration-300 flex items-center gap-3 z-50">
+        <i class="fas fa-check-circle text-emerald-400"></i>
+        <span id="toastMessage">已召唤专家</span>
+    </div>
+
+    <script>
+        // Filter experts by category
+        function filterExperts(category, element) {
+            // Update active tab
+            document.querySelectorAll('.category-tab').forEach(tab => {
+                tab.classList.remove('active', 'text-violet-600');
+                tab.classList.add('text-gray-500');
+            });
+            element.classList.add('active', 'text-violet-600');
+            element.classList.remove('text-gray-500');
+
+            // Filter cards with animation
+            const cards = document.querySelectorAll('.expert-card');
+            cards.forEach(card => {
+                if (category === 'all' || card.dataset.category === category) {
+                    card.style.display = 'flex';
+                    setTimeout(() => {
+                        card.style.opacity = '1';
+                        card.style.transform = 'translateY(0)';
+                    }, 50);
+                } else {
+                    card.style.opacity = '0';
+                    card.style.transform = 'translateY(20px)';
+                    setTimeout(() => {
+                        card.style.display = 'none';
+                    }, 300);
+                }
+            });
+        }
+
+        // Summon expert action
+        function summonExpert(name) {
+            const toast = document.getElementById('toast');
+            const toastMessage = document.getElementById('toastMessage');
+            
+            toastMessage.textContent = `已召唤 ${name} 为您服务`;
+            toast.classList.remove('translate-y-20', 'opacity-0');
+            
+            setTimeout(() => {
+                toast.classList.add('translate-y-20', 'opacity-0');
+            }, 3000);
+        }
+
+        // Add scroll animation for cards on load
+        window.addEventListener('load', () => {
+            const cards = document.querySelectorAll('.expert-card');
+            cards.forEach((card, index) => {
+                card.style.opacity = '0';
+                card.style.transform = 'translateY(20px)';
+                setTimeout(() => {
+                    card.style.transition = 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)';
+                    card.style.opacity = '1';
+                    card.style.transform = 'translateY(0)';
+                }, index * 100);
+            });
+        });
+
+        // Horizontal scroll with mouse wheel for category tabs
+        document.querySelector('.category-scroll').addEventListener('wheel', (e) => {
+            if (e.deltaY !== 0) {
+                e.preventDefault();
+                e.currentTarget.scrollLeft += e.deltaY;
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/archive/openclaw-legacy/workbuddy界面/技能.html b/docs/archive/openclaw-legacy/workbuddy界面/技能.html
new file mode 100644
index 0000000..a0baf30
--- /dev/null
+++ b/docs/archive/openclaw-legacy/workbuddy界面/技能.html
@@ -0,0 +1,537 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WorkBuddy - 技能</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            overflow: hidden;
+        }
+        
+        /* Custom scrollbar */
+        ::-webkit-scrollbar { width: 6px; height: 6px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
+        ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
+        
+        /* Skill card animations */
+        .skill-card {
+            transition: all 0.2s ease;
+            border: 1px solid #e5e7eb;
+        }
+        .skill-card:hover {
+            border-color: #d1d5db;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+            transform: translateY(-1px);
+        }
+        
+        /* Add button animation */
+        .add-btn {
+            transition: all 0.2s ease;
+            border: 1px solid #e5e7eb;
+        }
+        .add-btn:hover {
+            border-color: #10b981;
+            color: #10b981;
+            background-color: #ecfdf5;
+            transform: scale(1.05);
+        }
+        .add-btn:active {
+            transform: scale(0.95);
+        }
+        .add-btn.added {
+            background-color: #10b981;
+            border-color: #10b981;
+            color: white;
+        }
+        
+        /* Icon container */
+        .skill-icon {
+            background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
+            transition: all 0.2s ease;
+        }
+        .skill-card:hover .skill-icon {
+            background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
+        }
+        
+        /* Sidebar active state */
+        .sidebar-item.active {
+            background-color: #f3f4f6;
+            font-weight: 500;
+        }
+        
+        /* Search input focus */
+        .search-input:focus {
+            border-color: #10b981;
+            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
+        }
+        
+        /* Import button hover */
+        .import-btn {
+            transition: all 0.2s ease;
+        }
+        .import-btn:hover {
+            background-color: #f3f4f6;
+            border-color: #d1d5db;
+        }
+    </style>
+</head>
+<body class="bg-white h-screen flex text-gray-800">
+
+    <!-- Left Sidebar -->
+    <aside class="w-64 bg-white border-r border-gray-200 flex flex-col h-full flex-shrink-0">
+        <!-- App Header -->
+        <div class="h-14 flex items-center px-4 border-b border-gray-100 flex-shrink-0">
+            <div class="flex items-center gap-2">
+                <div class="w-8 h-8 bg-gradient-to-br from-emerald-400 to-teal-500 rounded-lg flex items-center justify-center text-white font-bold text-lg shadow-sm">
+                    <i class="fas fa-code text-sm"></i>
+                </div>
+                <span class="font-bold text-lg text-gray-800 tracking-tight">WorkBuddy</span>
+            </div>
+            <button class="ml-auto p-1.5 hover:bg-gray-100 rounded-lg text-gray-400 transition-colors">
+                <i class="far fa-clone text-sm"></i>
+            </button>
+        </div>
+
+        <!-- Menu Items -->
+        <nav class="flex-1 py-3 px-3 space-y-0.5 overflow-y-auto">
+            <!-- Search -->
+            <div class="px-1 mb-3">
+                <div class="relative">
+                    <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
+                    <input type="text" placeholder="搜索任务" 
+                           class="w-full pl-9 pr-8 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 transition-all">
+                    <button class="absolute right-2 top-1/2 -translate-y-1/2 p-1 hover:bg-gray-200 rounded text-gray-400 transition-colors">
+                        <i class="fas fa-sliders-h text-xs"></i>
+                    </button>
+                </div>
+            </div>
+
+            <!-- New Task Button -->
+            <button class="w-full flex items-center gap-3 px-3 py-2 hover:bg-gray-100 rounded-lg text-gray-700 transition-colors mb-1">
+                <i class="far fa-check-square text-emerald-600 w-5"></i>
+                <span class="font-medium">新建任务</span>
+            </button>
+
+            <!-- Nav Items -->
+            <a href="#" class="sidebar-item flex items-center gap-3 px-3 py-2 text-gray-600 rounded-lg transition-colors">
+                <i class="fas fa-robot text-gray-400 w-5"></i>
+                <span>Claw</span>
+            </a>
+            
+            <a href="#" class="sidebar-item flex items-center gap-3 px-3 py-2 text-gray-600 rounded-lg transition-colors">
+                <i class="fas fa-user-tie text-gray-400 w-5"></i>
+                <span>专家</span>
+            </a>
+            
+            <a href="#" class="sidebar-item active flex items-center gap-3 px-3 py-2 text-gray-900 rounded-lg transition-colors">
+                <i class="fas fa-wand-magic-sparkles text-gray-700 w-5"></i>
+                <span>技能</span>
+            </a>
+            
+            <a href="#" class="sidebar-item flex items-center gap-3 px-3 py-2 text-gray-600 rounded-lg transition-colors">
+                <i class="fas fa-puzzle-piece text-gray-400 w-5"></i>
+                <span>插件</span>
+            </a>
+            
+            <a href="#" class="sidebar-item flex items-center gap-3 px-3 py-2 text-gray-600 rounded-lg transition-colors">
+                <i class="far fa-clock text-gray-400 w-5"></i>
+                <span>自动化</span>
+            </a>
+
+            <!-- Empty State -->
+            <div class="mt-8 px-4 text-center">
+                <p class="text-gray-900 font-medium mb-1">暂无任务</p>
+                <p class="text-gray-400 text-sm">点击上方按钮开始新任务</p>
+            </div>
+        </nav>
+
+        <!-- User Profile -->
+        <div class="p-3 border-t border-gray-200 flex-shrink-0">
+            <button class="flex items-center gap-3 w-full hover:bg-gray-50 p-2 rounded-lg transition-colors">
+                <div class="w-8 h-8 bg-gradient-to-br from-emerald-400 to-cyan-500 rounded-full flex items-center justify-center text-white font-bold shadow-sm">
+                    <i class="fas fa-robot text-xs"></i>
+                </div>
+                <span class="flex-1 text-left text-sm font-medium text-gray-700">iven</span>
+                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
+            </button>
+        </div>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="flex-1 flex flex-col h-full bg-white overflow-hidden">
+        <!-- Top Bar -->
+        <header class="h-14 bg-white border-b border-gray-200 flex items-center justify-between px-6 flex-shrink-0">
+            <div class="flex items-center gap-2">
+                <div class="w-8 h-8 bg-gradient-to-br from-emerald-400 to-teal-500 rounded-lg flex items-center justify-center text-white font-bold">
+                    <i class="fas fa-code text-sm"></i>
+                </div>
+                <span class="font-bold text-lg">WorkBuddy</span>
+            </div>
+            <div class="text-sm text-gray-600 font-medium">Agents</div>
+            <div class="flex items-center gap-2">
+                <button class="p-2 hover:bg-gray-100 rounded-lg text-gray-500">
+                    <i class="fas fa-minus text-xs"></i>
+                </button>
+                <button class="p-2 hover:bg-gray-100 rounded-lg text-gray-500">
+                    <i class="far fa-square text-xs"></i>
+                </button>
+                <button class="p-2 hover:bg-red-50 rounded-lg text-gray-500 hover:text-red-500">
+                    <i class="fas fa-times text-xs"></i>
+                </button>
+            </div>
+        </header>
+
+        <!-- Content Area -->
+        <div class="flex-1 overflow-y-auto bg-white">
+            <div class="max-w-6xl mx-auto px-8 py-8">
+                
+                <!-- Header Section -->
+                <div class="flex items-start justify-between mb-8">
+                    <div>
+                        <h1 class="text-2xl font-bold text-gray-900 mb-1">技能</h1>
+                        <p class="text-gray-500 text-base">赋予 WorkBuddy 更强大的能力</p>
+                    </div>
+                    
+                    <div class="flex items-center gap-3">
+                        <!-- Search -->
+                        <div class="relative">
+                            <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
+                            <input type="text" id="skillSearch" placeholder="搜索技能" 
+                                   class="search-input w-64 pl-9 pr-4 py-2 bg-white border border-gray-300 rounded-lg text-sm outline-none transition-all">
+                        </div>
+                        
+                        <!-- Import Button -->
+                        <button class="import-btn flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50" onclick="importSkill()">
+                            <i class="fas fa-plus text-xs"></i>
+                            导入技能
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Installed Count -->
+                <div class="mb-6">
+                    <span class="text-gray-900 font-medium">已安装</span>
+                    <span class="ml-2 px-2 py-0.5 bg-gray-100 text-gray-600 text-xs rounded-full" id="installedCount">0</span>
+                </div>
+
+                <!-- Recommended Section -->
+                <div>
+                    <h2 class="text-base font-semibold text-gray-900 mb-4">推荐</h2>
+                    
+                    <!-- Skills Grid -->
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4" id="skillsGrid">
+                        
+                        <!-- Skill Card 1 -->
+                        <div class="skill-card bg-white rounded-xl p-4 flex items-center gap-4 group cursor-pointer" data-name="find-skills">
+                            <div class="skill-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
+                                <i class="fas fa-hammer text-gray-600 text-lg"></i>
+                            </div>
+                            <div class="flex-1 min-w-0">
+                                <h3 class="font-semibold text-gray-900 text-sm mb-0.5">find-skills</h3>
+                                <p class="text-gray-500 text-sm truncate">Helps users discover and install agent skills whe...</p>
+                            </div>
+                            <button class="add-btn w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-emerald-600 flex-shrink-0" onclick="toggleSkill(this, 'find-skills')">
+                                <i class="fas fa-plus text-sm"></i>
+                            </button>
+                        </div>
+
+                        <!-- Skill Card 2 -->
+                        <div class="skill-card bg-white rounded-xl p-4 flex items-center gap-4 group cursor-pointer" data-name="workbuddy-channel-setup">
+                            <div class="skill-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
+                                <i class="fas fa-hammer text-gray-600 text-lg"></i>
+                            </div>
+                            <div class="flex-1 min-w-0">
+                                <h3 class="font-semibold text-gray-900 text-sm mb-0.5">workbuddy-channel-setup</h3>
+                                <p class="text-gray-500 text-sm truncate">Automate WorkBuddy channel integration setu...</p>
+                            </div>
+                            <button class="add-btn w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-emerald-600 flex-shrink-0" onclick="toggleSkill(this, 'workbuddy-channel-setup')">
+                                <i class="fas fa-plus text-sm"></i>
+                            </button>
+                        </div>
+
+                        <!-- Skill Card 3 -->
+                        <div class="skill-card bg-white rounded-xl p-4 flex items-center gap-4 group cursor-pointer" data-name="FBS-BookWriter">
+                            <div class="skill-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
+                                <i class="fas fa-hammer text-gray-600 text-lg"></i>
+                            </div>
+                            <div class="flex-1 min-w-0">
+                                <h3 class="font-semibold text-gray-900 text-sm mb-0.5">FBS-BookWriter</h3>
+                                <p class="text-gray-500 text-sm truncate">福帮手出品 | 人机协同写书。联网校验-千书千面...</p>
+                            </div>
+                            <button class="add-btn w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-emerald-600 flex-shrink-0" onclick="toggleSkill(this, 'FBS-BookWriter')">
+                                <i class="fas fa-plus text-sm"></i>
+                            </button>
+                        </div>
+
+                        <!-- Skill Card 4 -->
+                        <div class="skill-card bg-white rounded-xl p-4 flex items-center gap-4 group cursor-pointer" data-name="xiaohongshu">
+                            <div class="skill-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
+                                <i class="fas fa-hammer text-gray-600 text-lg"></i>
+                            </div>
+                            <div class="flex-1 min-w-0">
+                                <h3 class="font-semibold text-gray-900 text-sm mb-0.5">xiaohongshu</h3>
+                                <p class="text-gray-500 text-sm truncate">小红书（RedNote）内容工具。使用场景：搜索...</p>
+                            </div>
+                            <button class="add-btn w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-emerald-600 flex-shrink-0" onclick="toggleSkill(this, 'xiaohongshu')">
+                                <i class="fas fa-plus text-sm"></i>
+                            </button>
+                        </div>
+
+                        <!-- Skill Card 5 -->
+                        <div class="skill-card bg-white rounded-xl p-4 flex items-center gap-4 group cursor-pointer" data-name="agentmail">
+                            <div class="skill-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
+                                <i class="fas fa-hammer text-gray-600 text-lg"></i>
+                            </div>
+                            <div class="flex-1 min-w-0">
+                                <h3 class="font-semibold text-gray-900 text-sm mb-0.5">agentmail</h3>
+                                <p class="text-gray-500 text-sm truncate">Email inbox for AI agents. Check messages, sen...</p>
+                            </div>
+                            <button class="add-btn w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-emerald-600 flex-shrink-0" onclick="toggleSkill(this, 'agentmail')">
+                                <i class="fas fa-plus text-sm"></i>
+                            </button>
+                        </div>
+
+                        <!-- Skill Card 6 -->
+                        <div class="skill-card bg-white rounded-xl p-4 flex items-center gap-4 group cursor-pointer" data-name="apple-notes">
+                            <div class="skill-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
+                                <i class="fas fa-hammer text-gray-600 text-lg"></i>
+                            </div>
+                            <div class="flex-1 min-w-0">
+                                <h3 class="font-semibold text-gray-900 text-sm mb-0.5">apple-notes</h3>
+                                <p class="text-gray-500 text-sm truncate">Manage Apple Notes via the `memo` CLI on ma...</p>
+                            </div>
+                            <button class="add-btn w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-emerald-600 flex-shrink-0" onclick="toggleSkill(this, 'apple-notes')">
+                                <i class="fas fa-plus text-sm"></i>
+                            </button>
+                        </div>
+
+                        <!-- Skill Card 7 -->
+                        <div class="skill-card bg-white rounded-xl p-4 flex items-center gap-4 group cursor-pointer" data-name="apple-reminders">
+                            <div class="skill-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
+                                <i class="fas fa-hammer text-gray-600 text-lg"></i>
+                            </div>
+                            <div class="flex-1 min-w-0">
+                                <h3 class="font-semibold text-gray-900 text-sm mb-0.5">apple-reminders</h3>
+                                <p class="text-gray-500 text-sm truncate">Manage Apple Reminders via the `remindctl` CL...</p>
+                            </div>
+                            <button class="add-btn w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-emerald-600 flex-shrink-0" onclick="toggleSkill(this, 'apple-reminders')">
+                                <i class="fas fa-plus text-sm"></i>
+                            </button>
+                        </div>
+
+                        <!-- Skill Card 8 -->
+                        <div class="skill-card bg-white rounded-xl p-4 flex items-center gap-4 group cursor-pointer" data-name="blogwatcher">
+                            <div class="skill-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
+                                <i class="fas fa-hammer text-gray-600 text-lg"></i>
+                            </div>
+                            <div class="flex-1 min-w-0">
+                                <h3 class="font-semibold text-gray-900 text-sm mb-0.5">blogwatcher</h3>
+                                <p class="text-gray-500 text-sm truncate">Monitor blogs and RSS/Atom feeds for updates...</p>
+                            </div>
+                            <button class="add-btn w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-emerald-600 flex-shrink-0" onclick="toggleSkill(this, 'blogwatcher')">
+                                <i class="fas fa-plus text-sm"></i>
+                            </button>
+                        </div>
+
+                        <!-- Skill Card 9 -->
+                        <div class="skill-card bg-white rounded-xl p-4 flex items-center gap-4 group cursor-pointer" data-name="cos-vectors">
+                            <div class="skill-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
+                                <i class="fas fa-hammer text-gray-600 text-lg"></i>
+                            </div>
+                            <div class="flex-1 min-w-0">
+                                <h3 class="font-semibold text-gray-900 text-sm mb-0.5">cos-vectors</h3>
+                                <p class="text-gray-500 text-sm truncate">Manage Tencent Cloud COS vector buckets via ...</p>
+                            </div>
+                            <button class="add-btn w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-emerald-600 flex-shrink-0" onclick="toggleSkill(this, 'cos-vectors')">
+                                <i class="fas fa-plus text-sm"></i>
+                            </button>
+                        </div>
+
+                        <!-- Skill Card 10 -->
+                        <div class="skill-card bg-white rounded-xl p-4 flex items-center gap-4 group cursor-pointer" data-name="gifgrep">
+                            <div class="skill-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
+                                <i class="fas fa-hammer text-gray-600 text-lg"></i>
+                            </div>
+                            <div class="flex-1 min-w-0">
+                                <h3 class="font-semibold text-gray-900 text-sm mb-0.5">gifgrep</h3>
+                                <p class="text-gray-500 text-sm truncate">Search GIF providers with CLI/TUI, download re...</p>
+                            </div>
+                            <button class="add-btn w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-emerald-600 flex-shrink-0" onclick="toggleSkill(this, 'gifgrep')">
+                                <i class="fas fa-plus text-sm"></i>
+                            </button>
+                        </div>
+
+                        <!-- Skill Card 11 -->
+                        <div class="skill-card bg-white rounded-xl p-4 flex items-center gap-4 group cursor-pointer" data-name="github">
+                            <div class="skill-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
+                                <i class="fas fa-hammer text-gray-600 text-lg"></i>
+                            </div>
+                            <div class="flex-1 min-w-0">
+                                <h3 class="font-semibold text-gray-900 text-sm mb-0.5">github</h3>
+                                <p class="text-gray-500 text-sm truncate">Interact with GitHub using the `gh` CLI. Use `gh ...</p>
+                            </div>
+                            <button class="add-btn w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-emerald-600 flex-shrink-0" onclick="toggleSkill(this, 'github')">
+                                <i class="fas fa-plus text-sm"></i>
+                            </button>
+                        </div>
+
+                        <!-- Skill Card 12 -->
+                        <div class="skill-card bg-white rounded-xl p-4 flex items-center gap-4 group cursor-pointer" data-name="gog">
+                            <div class="skill-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
+                                <i class="fas fa-hammer text-gray-600 text-lg"></i>
+                            </div>
+                            <div class="flex-1 min-w-0">
+                                <h3 class="font-semibold text-gray-900 text-sm mb-0.5">gog</h3>
+                                <p class="text-gray-500 text-sm truncate">Google Workspace CLI for Gmail, Calendar, Driv...</p>
+                            </div>
+                            <button class="add-btn w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-emerald-600 flex-shrink-0" onclick="toggleSkill(this, 'gog')">
+                                <i class="fas fa-plus text-sm"></i>
+                            </button>
+                        </div>
+
+                        <!-- Skill Card 13 -->
+                        <div class="skill-card bg-white rounded-xl p-4 flex items-center gap-4 group cursor-pointer" data-name="healthcheck">
+                            <div class="skill-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
+                                <i class="fas fa-hammer text-gray-600 text-lg"></i>
+                            </div>
+                            <div class="flex-1 min-w-0">
+                                <h3 class="font-semibold text-gray-900 text-sm mb-0.5">healthcheck</h3>
+                                <p class="text-gray-500 text-sm truncate">Track water and sleep with JSON file storage.</p>
+                            </div>
+                            <button class="add-btn w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-emerald-600 flex-shrink-0" onclick="toggleSkill(this, 'healthcheck')">
+                                <i class="fas fa-plus text-sm"></i>
+                            </button>
+                        </div>
+
+                        <!-- Skill Card 14 -->
+                        <div class="skill-card bg-white rounded-xl p-4 flex items-center gap-4 group cursor-pointer" data-name="himalaya">
+                            <div class="skill-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
+                                <i class="fas fa-hammer text-gray-600 text-lg"></i>
+                            </div>
+                            <div class="flex-1 min-w-0">
+                                <h3 class="font-semibold text-gray-900 text-sm mb-0.5">himalaya</h3>
+                                <p class="text-gray-500 text-sm truncate">CLI to manage emails via IMAP/SMTP. Use `him...</p>
+                            </div>
+                            <button class="add-btn w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-emerald-600 flex-shrink-0" onclick="toggleSkill(this, 'himalaya')">
+                                <i class="fas fa-plus text-sm"></i>
+                            </button>
+                        </div>
+
+                    </div>
+                </div>
+
+                <!-- Empty State (Hidden by default) -->
+                <div id="emptyState" class="hidden mt-12 text-center py-12">
+                    <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i class="fas fa-search text-gray-400 text-2xl"></i>
+                    </div>
+                    <p class="text-gray-500">未找到相关技能</p>
+                </div>
+
+            </div>
+        </div>
+    </main>
+
+    <!-- Toast Notification -->
+    <div id="toast" class="fixed bottom-8 right-8 bg-gray-900 text-white px-6 py-3 rounded-xl shadow-2xl transform translate-y-20 opacity-0 transition-all duration-300 flex items-center gap-3 z-50">
+        <i class="fas fa-check-circle text-emerald-400"></i>
+        <span id="toastMessage">操作成功</span>
+    </div>
+
+    <script>
+        let installedCount = 0;
+        const installedSkills = new Set();
+
+        // Toggle skill installation
+        function toggleSkill(btn, skillName) {
+            const icon = btn.querySelector('i');
+            
+            if (installedSkills.has(skillName)) {
+                // Uninstall
+                installedSkills.delete(skillName);
+                btn.classList.remove('added');
+                icon.classList.remove('fa-check');
+                icon.classList.add('fa-plus');
+                installedCount--;
+                showToast(`已卸载 ${skillName}`);
+            } else {
+                // Install
+                installedSkills.add(skillName);
+                btn.classList.add('added');
+                icon.classList.remove('fa-plus');
+                icon.classList.add('fa-check');
+                installedCount++;
+                showToast(`已安装 ${skillName}`);
+            }
+            
+            document.getElementById('installedCount').textContent = installedCount;
+        }
+
+        // Import skill action
+        function importSkill() {
+            showToast('请选择要导入的技能文件');
+        }
+
+        // Show toast notification
+        function showToast(message) {
+            const toast = document.getElementById('toast');
+            const toastMessage = document.getElementById('toastMessage');
+            
+            toastMessage.textContent = message;
+            toast.classList.remove('translate-y-20', 'opacity-0');
+            
+            setTimeout(() => {
+                toast.classList.add('translate-y-20', 'opacity-0');
+            }, 2500);
+        }
+
+        // Search functionality
+        document.getElementById('skillSearch').addEventListener('input', function(e) {
+            const searchTerm = e.target.value.toLowerCase();
+            const cards = document.querySelectorAll('.skill-card');
+            let visibleCount = 0;
+            
+            cards.forEach(card => {
+                const name = card.getAttribute('data-name').toLowerCase();
+                const desc = card.querySelector('p').textContent.toLowerCase();
+                
+                if (name.includes(searchTerm) || desc.includes(searchTerm)) {
+                    card.style.display = 'flex';
+                    visibleCount++;
+                } else {
+                    card.style.display = 'none';
+                }
+            });
+            
+            // Show/hide empty state
+            const emptyState = document.getElementById('emptyState');
+            if (visibleCount === 0) {
+                emptyState.classList.remove('hidden');
+            } else {
+                emptyState.classList.add('hidden');
+            }
+        });
+
+        // Add stagger animation on load
+        window.addEventListener('load', () => {
+            const cards = document.querySelectorAll('.skill-card');
+            cards.forEach((card, index) => {
+                card.style.opacity = '0';
+                card.style.transform = 'translateY(10px)';
+                setTimeout(() => {
+                    card.style.transition = 'all 0.3s ease';
+                    card.style.opacity = '1';
+                    card.style.transform = 'translateY(0)';
+                }, index * 30);
+            });
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/archive/openclaw-legacy/workbuddy界面/新建任务.html b/docs/archive/openclaw-legacy/workbuddy界面/新建任务.html
new file mode 100644
index 0000000..129cf4d
--- /dev/null
+++ b/docs/archive/openclaw-legacy/workbuddy界面/新建任务.html
@@ -0,0 +1,489 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WorkBuddy - 新建任务</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            overflow: hidden;
+        }
+        
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #d1d5db;
+            border-radius: 3px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #9ca3af;
+        }
+        
+        /* Dropdown animations */
+        .dropdown-enter {
+            opacity: 0;
+            transform: scale(0.95) translateY(-10px);
+        }
+        .dropdown-enter-active {
+            opacity: 1;
+            transform: scale(1) translateY(0);
+            transition: opacity 0.1s ease-out, transform 0.1s ease-out;
+        }
+        
+        /* Gradient text effect for title */
+        .gradient-text {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        
+        /* Custom shadow for cards */
+        .card-shadow {
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+        }
+        
+        /* Input area focus ring */
+        .input-focus-ring:focus-within {
+            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+            border-color: #6366f1;
+        }
+        
+        /* Skill tag hover effect */
+        .skill-tag {
+            transition: all 0.2s ease;
+        }
+        .skill-tag:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        }
+        
+        /* Robot animation */
+        @keyframes float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+        }
+        .robot-float {
+            animation: float 3s ease-in-out infinite;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 h-screen flex text-gray-800">
+
+    <!-- Left Sidebar -->
+    <aside class="w-64 bg-white border-r border-gray-200 flex flex-col h-full">
+        <!-- App Header -->
+        <div class="h-14 flex items-center px-4 border-b border-gray-100">
+            <div class="flex items-center gap-2">
+                <div class="w-8 h-8 bg-gradient-to-br from-emerald-400 to-teal-500 rounded-lg flex items-center justify-center text-white font-bold text-lg">
+                    <i class="fas fa-code"></i>
+                </div>
+                <span class="font-bold text-lg text-gray-800">CodeBuddy</span>
+            </div>
+        </div>
+
+        <!-- Menu Items -->
+        <nav class="flex-1 py-4 px-3 space-y-1 overflow-y-auto">
+            <!-- Search -->
+            <div class="px-2 mb-4">
+                <div class="relative">
+                    <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
+                    <input type="text" placeholder="搜索任务" 
+                           class="w-full pl-9 pr-4 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 transition-colors">
+                    <button class="absolute right-2 top-1/2 -translate-y-1/2 p-1 hover:bg-gray-200 rounded text-gray-400">
+                        <i class="fas fa-sliders-h text-xs"></i>
+                    </button>
+                </div>
+            </div>
+
+            <!-- New Task Button -->
+            <button class="w-full flex items-center gap-3 px-3 py-2.5 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-700 font-medium transition-colors mb-2">
+                <i class="far fa-check-square text-emerald-600"></i>
+                <span>新建任务</span>
+            </button>
+
+            <!-- Nav Items -->
+            <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-600 hover:bg-gray-50 rounded-lg transition-colors group">
+                <i class="fas fa-robot text-gray-400 group-hover:text-emerald-600 w-5"></i>
+                <span>Claw</span>
+            </a>
+            
+            <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-600 hover:bg-gray-50 rounded-lg transition-colors group">
+                <i class="fas fa-user-tie text-gray-400 group-hover:text-emerald-600 w-5"></i>
+                <span>专家</span>
+            </a>
+            
+            <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-600 hover:bg-gray-50 rounded-lg transition-colors group">
+                <i class="fas fa-wand-magic-sparkles text-gray-400 group-hover:text-emerald-600 w-5"></i>
+                <span>技能</span>
+            </a>
+            
+            <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-600 hover:bg-gray-50 rounded-lg transition-colors group">
+                <i class="fas fa-puzzle-piece text-gray-400 group-hover:text-emerald-600 w-5"></i>
+                <span>插件</span>
+            </a>
+            
+            <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-600 hover:bg-gray-50 rounded-lg transition-colors group">
+                <i class="far fa-clock text-gray-400 group-hover:text-emerald-600 w-5"></i>
+                <span>自动化</span>
+            </a>
+
+            <!-- Empty State -->
+            <div class="mt-8 px-4 text-center">
+                <p class="text-gray-500 text-sm mb-1">暂无任务</p>
+                <p class="text-gray-400 text-xs">点击上方按钮开始新任务</p>
+            </div>
+        </nav>
+
+        <!-- User Profile -->
+        <div class="p-4 border-t border-gray-200">
+            <button class="flex items-center gap-3 w-full hover:bg-gray-50 p-2 rounded-lg transition-colors">
+                <div class="w-8 h-8 bg-gradient-to-br from-emerald-400 to-cyan-500 rounded-full flex items-center justify-center text-white font-bold">
+                    <i class="fas fa-robot text-sm"></i>
+                </div>
+                <span class="flex-1 text-left text-sm font-medium text-gray-700">iven</span>
+                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
+            </button>
+        </div>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="flex-1 flex flex-col h-full relative">
+        <!-- Top Bar -->
+        <header class="h-14 bg-white border-b border-gray-200 flex items-center justify-between px-6">
+            <div class="flex items-center gap-2">
+                <div class="w-8 h-8 bg-gradient-to-br from-emerald-400 to-teal-500 rounded-lg flex items-center justify-center text-white font-bold">
+                    <i class="fas fa-code text-sm"></i>
+                </div>
+                <span class="font-bold text-lg">WorkBuddy</span>
+                <button class="ml-2 p-1.5 hover:bg-gray-100 rounded-lg text-gray-400">
+                    <i class="far fa-clone text-sm"></i>
+                </button>
+            </div>
+            <div class="text-sm text-gray-600 font-medium">Agents</div>
+            <div class="flex items-center gap-2">
+                <button class="p-2 hover:bg-gray-100 rounded-lg text-gray-500">
+                    <i class="fas fa-minus text-xs"></i>
+                </button>
+                <button class="p-2 hover:bg-gray-100 rounded-lg text-gray-500">
+                    <i class="far fa-square text-xs"></i>
+                </button>
+                <button class="p-2 hover:bg-gray-100 rounded-lg text-gray-500 hover:text-red-500">
+                    <i class="fas fa-times text-xs"></i>
+                </button>
+            </div>
+        </header>
+
+        <!-- Content Area -->
+        <div class="flex-1 overflow-y-auto bg-white">
+            <div class="max-w-5xl mx-auto px-8 py-12">
+                
+                <!-- Hero Section -->
+                <div class="text-center mb-12">
+                    <!-- Robot Mascot -->
+                    <div class="robot-float mb-6 inline-block">
+                        <div class="w-24 h-24 mx-auto relative">
+                            <img src="https://api.dicebear.com/7.x/bottts/svg?seed=claw&backgroundColor=ffdfbf" 
+                                 alt="Claw Robot" 
+                                 class="w-full h-full drop-shadow-2xl">
+                            <!-- Decorative elements -->
+                            <div class="absolute -top-2 -right-2 w-6 h-6 bg-red-500 rounded-full flex items-center justify-center text-white text-xs animate-pulse">
+                                <i class="fas fa-code"></i>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Title -->
+                    <h1 class="text-4xl font-bold text-gray-800 mb-2 tracking-tight">
+                        Claw <span class="text-red-500 mx-1"><i class="fas fa-claw"></i></span> Your Ideas
+                    </h1>
+                    <h2 class="text-4xl font-bold text-gray-800 mb-4 tracking-tight">
+                        Into Reality
+                        <span class="inline-block ml-1 text-emerald-400 animate-pulse">*</span>
+                    </h2>
+                </div>
+
+                <!-- Feature Cards -->
+                <div class="grid grid-cols-2 gap-6 mb-10 max-w-3xl mx-auto">
+                    <!-- Code Development Card -->
+                    <div class="bg-gray-50 rounded-2xl p-6 card-shadow border border-gray-100 relative overflow-hidden group hover:border-gray-200 transition-all">
+                        <div class="absolute top-0 left-1/2 -translate-x-1/2 bg-gray-400 text-white text-xs px-4 py-1 rounded-b-lg font-medium">
+                            代码开发
+                        </div>
+                        <div class="mt-4 text-center">
+                            <h3 class="text-gray-500 font-medium mb-2">面向代码与工程交付</h3>
+                        </div>
+                        <div class="absolute inset-0 bg-gradient-to-b from-transparent to-gray-100/50 opacity-0 group-hover:opacity-100 transition-opacity"></div>
+                    </div>
+
+                    <!-- Daily Office Card -->
+                    <div class="bg-gray-50 rounded-2xl p-6 card-shadow border border-gray-100 relative overflow-hidden group hover:border-indigo-200 transition-all">
+                        <div class="absolute top-0 left-1/2 -translate-x-1/2 bg-indigo-500 text-white text-xs px-4 py-1 rounded-b-lg font-medium shadow-lg shadow-indigo-200">
+                            日常办公
+                        </div>
+                        <div class="mt-4 text-center">
+                            <h3 class="text-indigo-600 font-medium mb-3">面向日常工作与知识生产</h3>
+                            <p class="text-gray-500 text-sm leading-relaxed px-2">
+                                将整理、写作、规划与跟进交给 AI 智能体推进，并获得结构化、可落地的工作成果。
+                            </p>
+                        </div>
+                        <div class="absolute inset-0 bg-gradient-to-b from-transparent to-indigo-50/30 opacity-0 group-hover:opacity-100 transition-opacity"></div>
+                    </div>
+                </div>
+
+                <!-- Input Area -->
+                <div class="max-w-4xl mx-auto">
+                    <div class="bg-white border border-gray-200 rounded-2xl input-focus-ring transition-all">
+                        <!-- Input Toolbar -->
+                        <div class="flex items-center gap-2 px-4 py-3 border-b border-gray-100">
+                            <button class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 text-gray-600 transition-colors" title="@提及">
+                                <i class="fas fa-at"></i>
+                            </button>
+                            <button class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 text-gray-600 transition-colors" title="附件">
+                                <i class="fas fa-paperclip"></i>
+                            </button>
+                        </div>
+
+                        <!-- Text Input -->
+                        <div class="px-4 py-3">
+                            <textarea 
+                                placeholder="输入消息..." 
+                                class="w-full h-24 resize-none outline-none text-gray-700 placeholder-gray-400 text-base leading-relaxed bg-transparent"
+                                style="min-height: 80px;"></textarea>
+                        </div>
+
+                        <!-- Bottom Toolbar -->
+                        <div class="px-4 py-3 flex items-center justify-between border-t border-gray-100">
+                            <div class="flex items-center gap-2">
+                                <!-- Craft Dropdown -->
+                                <div class="relative" id="craftDropdown">
+                                    <button onclick="toggleDropdown('craftDropdown')" class="flex items-center gap-2 px-3 py-1.5 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium text-gray-700 transition-colors">
+                                        <i class="far fa-window-maximize text-xs"></i>
+                                        <span>Craft</span>
+                                        <i class="fas fa-chevron-down text-xs ml-1"></i>
+                                    </button>
+                                    <!-- Dropdown Menu -->
+                                    <div class="hidden absolute bottom-full left-0 mb-2 w-48 bg-white border border-gray-200 rounded-xl shadow-xl py-1 z-50">
+                                        <button class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 text-left text-sm">
+                                            <i class="far fa-window-maximize text-gray-400"></i>
+                                            <span>Craft</span>
+                                            <i class="fas fa-check text-emerald-500 ml-auto text-xs"></i>
+                                        </button>
+                                        <button class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 text-left text-sm">
+                                            <i class="far fa-calendar-check text-gray-400"></i>
+                                            <span>Plan</span>
+                                        </button>
+                                        <button class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 text-left text-sm">
+                                            <i class="far fa-comment-dots text-gray-400"></i>
+                                            <span>Ask</span>
+                                        </button>
+                                    </div>
+                                </div>
+
+                                <!-- Auto Dropdown -->
+                                <div class="relative" id="autoDropdown">
+                                    <button onclick="toggleDropdown('autoDropdown')" class="flex items-center gap-2 px-3 py-1.5 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium text-gray-700 transition-colors">
+                                        <i class="fas fa-layer-group text-xs"></i>
+                                        <span>Auto</span>
+                                        <i class="fas fa-chevron-down text-xs ml-1"></i>
+                                    </button>
+                                    <!-- Model Selection Dropdown -->
+                                    <div class="hidden absolute bottom-full left-0 mb-2 w-64 bg-white border border-gray-200 rounded-xl shadow-xl py-2 z-50">
+                                        <div class="px-3 py-1.5 text-xs text-gray-400 font-medium uppercase tracking-wider">内置模型</div>
+                                        
+                                        <button class="w-full flex items-center gap-3 px-4 py-2 hover:bg-gray-50 text-left">
+                                            <i class="fas fa-layer-group text-gray-600"></i>
+                                            <span class="flex-1 text-sm">Auto</span>
+                                            <i class="fas fa-check text-emerald-500 text-xs"></i>
+                                        </button>
+                                        
+                                        <button class="w-full flex items-center gap-3 px-4 py-2 hover:bg-gray-50 text-left">
+                                            <i class="fas fa-wave-square text-pink-500"></i>
+                                            <span class="text-sm">MiniMax-M2.5</span>
+                                            <i class="fas fa-snowflake text-gray-300 text-xs ml-1"></i>
+                                        </button>
+                                        
+                                        <button class="w-full flex items-center gap-3 px-4 py-2 hover:bg-gray-50 text-left">
+                                            <div class="w-4 h-4 bg-purple-600 rounded flex items-center justify-center text-white text-xs font-bold">Z</div>
+                                            <span class="text-sm">GLM-5.0</span>
+                                            <i class="fas fa-snowflake text-gray-300 text-xs ml-1"></i>
+                                        </button>
+                                        
+                                        <button class="w-full flex items-center gap-3 px-4 py-2 hover:bg-gray-50 text-left">
+                                            <div class="w-4 h-4 bg-purple-500 rounded flex items-center justify-center text-white text-xs font-bold">Z</div>
+                                            <span class="text-sm">GLM-4.7</span>
+                                            <i class="fas fa-snowflake text-gray-300 text-xs ml-1"></i>
+                                        </button>
+                                        
+                                        <button class="w-full flex items-center gap-3 px-4 py-2 hover:bg-gray-50 text-left">
+                                            <div class="w-4 h-4 bg-gray-800 rounded flex items-center justify-center text-white text-xs font-bold">K</div>
+                                            <span class="text-sm">Kimi-K2.5</span>
+                                            <i class="fas fa-snowflake text-gray-300 text-xs ml-1"></i>
+                                        </button>
+                                        
+                                        <button class="w-full flex items-center gap-3 px-4 py-2 hover:bg-gray-50 text-left">
+                                            <div class="w-4 h-4 bg-gray-700 rounded flex items-center justify-center text-white text-xs font-bold">K</div>
+                                            <span class="text-sm">Kimi-K2-Thinking</span>
+                                            <i class="fas fa-snowflake text-gray-300 text-xs ml-1"></i>
+                                        </button>
+                                        
+                                        <button class="w-full flex items-center gap-3 px-4 py-2 hover:bg-gray-50 text-left">
+                                            <i class="fas fa-fish text-blue-500"></i>
+                                            <span class="text-sm">DeepSeek-V3.2</span>
+                                            <i class="fas fa-snowflake text-gray-300 text-xs ml-1"></i>
+                                        </button>
+                                    </div>
+                                </div>
+
+                                <!-- Skills Button -->
+                                <button class="flex items-center gap-2 px-3 py-1.5 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium text-gray-700 transition-colors">
+                                    <i class="fas fa-wand-magic-sparkles text-xs"></i>
+                                    <span>Skills</span>
+                                </button>
+                            </div>
+
+                            <div class="flex items-center gap-2">
+                                <!-- Folder Selection -->
+                                <div class="relative" id="folderDropdown">
+                                    <button onclick="toggleDropdown('folderDropdown')" class="flex items-center gap-2 px-3 py-1.5 hover:bg-gray-100 rounded-lg text-sm text-gray-600 transition-colors border border-gray-200">
+                                        <i class="fas fa-desktop text-xs"></i>
+                                        <span>选择文件夹</span>
+                                        <i class="fas fa-chevron-down text-xs"></i>
+                                    </button>
+                                    <!-- Folder Menu -->
+                                    <div class="hidden absolute bottom-full right-0 mb-2 w-72 bg-white border border-gray-200 rounded-xl shadow-xl py-2 z-50">
+                                        <div class="px-3 py-2 border-b border-gray-100">
+                                            <div class="relative">
+                                                <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs"></i>
+                                                <input type="text" placeholder="搜索工作空间" class="w-full pl-8 pr-3 py-1.5 bg-gray-50 rounded-lg text-sm outline-none">
+                                            </div>
+                                        </div>
+                                        <button class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 text-left text-sm">
+                                            <span class="flex-1">从空文件夹开始</span>
+                                            <i class="fas fa-check text-emerald-500 text-xs"></i>
+                                        </button>
+                                        <button class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 text-left text-sm text-gray-600">
+                                            <i class="far fa-folder-open"></i>
+                                            <span>打开新文件夹</span>
+                                        </button>
+                                        <div class="px-4 py-2 text-xs text-gray-400 font-medium">Claw</div>
+                                        <button class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 text-left text-sm pl-8 text-gray-600">
+                                            <span class="truncate">c:\Users\szend\WorkBuddy\Claw</span>
+                                        </button>
+                                    </div>
+                                </div>
+
+                                <!-- Send Button -->
+                                <button class="w-9 h-9 bg-gray-200 hover:bg-emerald-500 hover:text-white rounded-lg flex items-center justify-center text-gray-400 transition-all transform hover:scale-105">
+                                    <i class="fas fa-paper-plane text-sm"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Skill Tags -->
+                    <div class="mt-6 flex flex-wrap justify-center gap-3">
+                        <button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
+                            文档处理
+                        </button>
+                        <button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
+                            视频生成
+                        </button>
+                        <button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
+                            深度研究
+                        </button>
+                        <button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
+                            幻灯片
+                        </button>
+                        <button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
+                            数据分析
+                        </button>
+                        <button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
+                            数据可视化
+                        </button>
+                        <button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
+                            金融服务
+                        </button>
+                        <button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
+                            产品管理
+                        </button>
+                        <button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
+                            设计
+                        </button>
+                        <button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
+                            邮件编辑
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // Dropdown toggle functionality
+        function toggleDropdown(id) {
+            const dropdown = document.getElementById(id).querySelector('div[class*="hidden"], div[class*="block"]');
+            const allDropdowns = document.querySelectorAll('[id$="Dropdown"] > div');
+            
+            // Close all other dropdowns
+            allDropdowns.forEach(d => {
+                if (d !== dropdown) {
+                    d.classList.add('hidden');
+                    d.classList.remove('block');
+                }
+            });
+            
+            // Toggle current
+            if (dropdown.classList.contains('hidden')) {
+                dropdown.classList.remove('hidden');
+                dropdown.classList.add('block');
+                dropdown.classList.add('dropdown-enter');
+                setTimeout(() => {
+                    dropdown.classList.add('dropdown-enter-active');
+                    dropdown.classList.remove('dropdown-enter');
+                }, 10);
+            } else {
+                dropdown.classList.add('hidden');
+                dropdown.classList.remove('block');
+            }
+        }
+
+        // Close dropdowns when clicking outside
+        document.addEventListener('click', function(e) {
+            if (!e.target.closest('[id$="Dropdown"]')) {
+                document.querySelectorAll('[id$="Dropdown"] > div').forEach(d => {
+                    d.classList.add('hidden');
+                    d.classList.remove('block');
+                });
+            }
+        });
+
+        // Auto-resize textarea
+        const textarea = document.querySelector('textarea');
+        textarea.addEventListener('input', function() {
+            this.style.height = 'auto';
+            this.style.height = Math.max(80, this.scrollHeight) + 'px';
+        });
+
+        // Skill tag click effect
+        document.querySelectorAll('.skill-tag').forEach(tag => {
+            tag.addEventListener('click', function() {
+                this.classList.toggle('bg-emerald-50');
+                this.classList.toggle('border-emerald-200');
+                this.classList.toggle('text-emerald-700');
+            });
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/archive/openclaw-legacy/workbuddy界面/自动化.html b/docs/archive/openclaw-legacy/workbuddy界面/自动化.html
new file mode 100644
index 0000000..2b6875c
--- /dev/null
+++ b/docs/archive/openclaw-legacy/workbuddy界面/自动化.html
@@ -0,0 +1,366 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WorkBuddy - 自动化</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            overflow: hidden;
+        }
+        
+        /* Custom scrollbar */
+        ::-webkit-scrollbar { width: 6px; height: 6px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
+        ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
+        
+        /* Template card animations */
+        .template-card {
+            transition: all 0.2s ease;
+            border: 1px solid #e5e7eb;
+        }
+        .template-card:hover {
+            border-color: #d1d5db;
+            background-color: #fafafa;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+        }
+        
+        /* Icon container */
+        .template-icon {
+            background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
+            transition: all 0.2s ease;
+        }
+        .template-card:hover .template-icon {
+            background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
+            transform: scale(1.05);
+        }
+        
+        /* Beta tag */
+        .beta-tag {
+            background-color: #6b7280;
+            color: white;
+            font-size: 0.75rem;
+            padding: 0.125rem 0.5rem;
+            border-radius: 0.25rem;
+            font-weight: 500;
+            letter-spacing: 0.025em;
+        }
+        
+        /* Sidebar active state */
+        .sidebar-item.active {
+            background-color: #f3f4f6;
+            font-weight: 500;
+        }
+        
+        /* Button hover effects */
+        .btn-primary {
+            transition: all 0.2s ease;
+        }
+        .btn-primary:hover {
+            background-color: #f3f4f6;
+            border-color: #d1d5db;
+        }
+        
+        .btn-secondary {
+            transition: all 0.2s ease;
+        }
+        .btn-secondary:hover {
+            background-color: #f9fafb;
+            border-color: #d1d5db;
+        }
+    </style>
+</head>
+<body class="bg-white h-screen flex text-gray-800">
+
+    <!-- Left Sidebar -->
+    <aside class="w-64 bg-white border-r border-gray-200 flex flex-col h-full flex-shrink-0">
+        <!-- App Header -->
+        <div class="h-14 flex items-center px-4 border-b border-gray-100 flex-shrink-0">
+            <div class="flex items-center gap-2">
+                <div class="w-8 h-8 bg-gradient-to-br from-emerald-400 to-teal-500 rounded-lg flex items-center justify-center text-white font-bold text-lg shadow-sm">
+                    <i class="fas fa-code text-sm"></i>
+                </div>
+                <span class="font-bold text-lg text-gray-800 tracking-tight">WorkBuddy</span>
+            </div>
+            <button class="ml-auto p-1.5 hover:bg-gray-100 rounded-lg text-gray-400 transition-colors">
+                <i class="far fa-clone text-sm"></i>
+            </button>
+        </div>
+
+        <!-- Menu Items -->
+        <nav class="flex-1 py-3 px-3 space-y-0.5 overflow-y-auto">
+            <!-- Search -->
+            <div class="px-1 mb-3">
+                <div class="relative">
+                    <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
+                    <input type="text" placeholder="搜索任务" 
+                           class="w-full pl-9 pr-8 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 transition-all">
+                    <button class="absolute right-2 top-1/2 -translate-y-1/2 p-1 hover:bg-gray-200 rounded text-gray-400 transition-colors">
+                        <i class="fas fa-sliders-h text-xs"></i>
+                    </button>
+                </div>
+            </div>
+
+            <!-- New Task Button -->
+            <button class="w-full flex items-center gap-3 px-3 py-2 hover:bg-gray-100 rounded-lg text-gray-700 transition-colors mb-1">
+                <i class="far fa-check-square text-emerald-600 w-5"></i>
+                <span class="font-medium">新建任务</span>
+            </button>
+
+            <!-- Nav Items -->
+            <a href="#" class="sidebar-item flex items-center gap-3 px-3 py-2 text-gray-600 rounded-lg transition-colors">
+                <i class="fas fa-robot text-gray-400 w-5"></i>
+                <span>Claw</span>
+            </a>
+            
+            <a href="#" class="sidebar-item flex items-center gap-3 px-3 py-2 text-gray-600 rounded-lg transition-colors">
+                <i class="fas fa-user-tie text-gray-400 w-5"></i>
+                <span>专家</span>
+            </a>
+            
+            <a href="#" class="sidebar-item flex items-center gap-3 px-3 py-2 text-gray-600 rounded-lg transition-colors">
+                <i class="fas fa-wand-magic-sparkles text-gray-400 w-5"></i>
+                <span>技能</span>
+            </a>
+            
+            <a href="#" class="sidebar-item flex items-center gap-3 px-3 py-2 text-gray-600 rounded-lg transition-colors">
+                <i class="fas fa-puzzle-piece text-gray-400 w-5"></i>
+                <span>插件</span>
+            </a>
+            
+            <a href="#" class="sidebar-item active flex items-center gap-3 px-3 py-2 text-gray-900 rounded-lg transition-colors">
+                <i class="far fa-clock text-gray-700 w-5"></i>
+                <span>自动化</span>
+            </a>
+
+            <!-- Empty State -->
+            <div class="mt-8 px-4 text-center">
+                <p class="text-gray-900 font-medium mb-1">暂无任务</p>
+                <p class="text-gray-400 text-sm">点击上方按钮开始新任务</p>
+            </div>
+        </nav>
+
+        <!-- User Profile -->
+        <div class="p-3 border-t border-gray-200 flex-shrink-0">
+            <button class="flex items-center gap-3 w-full hover:bg-gray-50 p-2 rounded-lg transition-colors">
+                <div class="w-8 h-8 bg-gradient-to-br from-emerald-400 to-cyan-500 rounded-full flex items-center justify-center text-white font-bold shadow-sm">
+                    <i class="fas fa-robot text-xs"></i>
+                </div>
+                <span class="flex-1 text-left text-sm font-medium text-gray-700">iven</span>
+                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
+            </button>
+        </div>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="flex-1 flex flex-col h-full bg-white overflow-hidden">
+        <!-- Top Bar -->
+        <header class="h-14 bg-white border-b border-gray-200 flex items-center justify-between px-6 flex-shrink-0">
+            <div class="flex items-center gap-2">
+                <div class="w-8 h-8 bg-gradient-to-br from-emerald-400 to-teal-500 rounded-lg flex items-center justify-center text-white font-bold">
+                    <i class="fas fa-code text-sm"></i>
+                </div>
+                <span class="font-bold text-lg">WorkBuddy</span>
+            </div>
+            <div class="text-sm text-gray-600 font-medium">Agents</div>
+            <div class="flex items-center gap-2">
+                <button class="p-2 hover:bg-gray-100 rounded-lg text-gray-500">
+                    <i class="fas fa-minus text-xs"></i>
+                </button>
+                <button class="p-2 hover:bg-gray-100 rounded-lg text-gray-500">
+                    <i class="far fa-square text-xs"></i>
+                </button>
+                <button class="p-2 hover:bg-red-50 rounded-lg text-gray-500 hover:text-red-500">
+                    <i class="fas fa-times text-xs"></i>
+                </button>
+            </div>
+        </header>
+
+        <!-- Content Area -->
+        <div class="flex-1 overflow-y-auto bg-white">
+            <div class="max-w-6xl mx-auto px-8 py-8">
+                
+                <!-- Header Section -->
+                <div class="flex items-start justify-between mb-8">
+                    <div>
+                        <div class="flex items-center gap-2 mb-2">
+                            <h1 class="text-2xl font-bold text-gray-900">自动化</h1>
+                            <span class="beta-tag">Beta</span>
+                        </div>
+                        <p class="text-gray-500 text-base">管理自动化任务并查看近期运行记录。</p>
+                    </div>
+                    
+                    <div class="flex items-center gap-3">
+                        <button class="btn-secondary flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50" onclick="addAutomation()">
+                            <i class="fas fa-plus text-xs"></i>
+                            添加
+                        </button>
+                        <button class="btn-primary flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50" onclick="addFromTemplate()">
+                            从模版添加
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Templates Section -->
+                <div>
+                    <h2 class="text-base font-medium text-gray-900 mb-4">从模版入手</h2>
+                    
+                    <!-- Templates Grid -->
+                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="templatesGrid">
+                        
+                        <!-- Template 1: 每日 AI 新闻推送 -->
+                        <div class="template-card bg-white rounded-xl p-4 flex items-start gap-4 cursor-pointer group" onclick="useTemplate('每日 AI 新闻推送')">
+                            <div class="template-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
+                                <i class="far fa-newspaper text-gray-600 text-xl"></i>
+                            </div>
+                            <div class="flex-1 min-w-0 pt-0.5">
+                                <h3 class="font-semibold text-gray-900 text-sm mb-1 group-hover:text-gray-700">每日 AI 新闻推送</h3>
+                                <p class="text-gray-500 text-sm leading-relaxed line-clamp-2">关注当天 AI 领域的重要动态，侧...</p>
+                            </div>
+                        </div>
+
+                        <!-- Template 2: 每日 5 个英语单词 -->
+                        <div class="template-card bg-white rounded-xl p-4 flex items-start gap-4 cursor-pointer group" onclick="useTemplate('每日 5 个英语单词')">
+                            <div class="template-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
+                                <span class="text-gray-600 font-bold text-lg">文</span>
+                                <span class="text-gray-400 text-xs ml-0.5">A</span>
+                            </div>
+                            <div class="flex-1 min-w-0 pt-0.5">
+                                <h3 class="font-semibold text-gray-900 text-sm mb-1 group-hover:text-gray-700">每日 5 个英语单词</h3>
+                                <p class="text-gray-500 text-sm leading-relaxed line-clamp-2">每天推荐 5 个高频实用英语单词...</p>
+                            </div>
+                        </div>
+
+                        <!-- Template 3: 每日儿童睡前故事 -->
+                        <div class="template-card bg-white rounded-xl p-4 flex items-start gap-4 cursor-pointer group" onclick="useTemplate('每日儿童睡前故事')">
+                            <div class="template-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
+                                <i class="far fa-moon text-gray-600 text-xl"></i>
+                            </div>
+                            <div class="flex-1 min-w-0 pt-0.5">
+                                <h3 class="font-semibold text-gray-900 text-sm mb-1 group-hover:text-gray-700">每日儿童睡前故事</h3>
+                                <p class="text-gray-500 text-sm leading-relaxed line-clamp-2">生成 3-5 分钟可读的温和睡前故事...</p>
+                            </div>
+                        </div>
+
+                        <!-- Template 4: 每周工作周报 -->
+                        <div class="template-card bg-white rounded-xl p-4 flex items-start gap-4 cursor-pointer group" onclick="useTemplate('每周工作周报')">
+                            <div class="template-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
+                                <i class="fas fa-list-check text-gray-600 text-xl"></i>
+                            </div>
+                            <div class="flex-1 min-w-0 pt-0.5">
+                                <h3 class="font-semibold text-gray-900 text-sm mb-1 group-hover:text-gray-700">每周工作周报</h3>
+                                <p class="text-gray-500 text-sm leading-relaxed line-clamp-2">每周五汇总仓库 PR 与 Issue 进展...</p>
+                            </div>
+                        </div>
+
+                        <!-- Template 5: 经典电影推荐 -->
+                        <div class="template-card bg-white rounded-xl p-4 flex items-start gap-4 cursor-pointer group" onclick="useTemplate('经典电影推荐')">
+                            <div class="template-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
+                                <i class="fas fa-film text-gray-600 text-xl"></i>
+                            </div>
+                            <div class="flex-1 min-w-0 pt-0.5">
+                                <h3 class="font-semibold text-gray-900 text-sm mb-1 group-hover:text-gray-700">经典电影推荐</h3>
+                                <p class="text-gray-500 text-sm leading-relaxed line-clamp-2">推荐一部高分经典电影，简要介绍...</p>
+                            </div>
+                        </div>
+
+                        <!-- Template 6: 历史上的今天 -->
+                        <div class="template-card bg-white rounded-xl p-4 flex items-start gap-4 cursor-pointer group" onclick="useTemplate('历史上的今天')">
+                            <div class="template-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
+                                <i class="far fa-calendar-alt text-gray-600 text-xl"></i>
+                            </div>
+                            <div class="flex-1 min-w-0 pt-0.5">
+                                <h3 class="font-semibold text-gray-900 text-sm mb-1 group-hover:text-gray-700">历史上的今天</h3>
+                                <p class="text-gray-500 text-sm leading-relaxed line-clamp-2">从科技、电影、音乐等领域挑选一...</p>
+                            </div>
+                        </div>
+
+                        <!-- Template 7: 每日一个为什么 -->
+                        <div class="template-card bg-white rounded-xl p-4 flex items-start gap-4 cursor-pointer group" onclick="useTemplate('每日一个为什么')">
+                            <div class="template-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
+                                <i class="far fa-lightbulb text-gray-600 text-xl"></i>
+                            </div>
+                            <div class="flex-1 min-w-0 pt-0.5">
+                                <h3 class="font-semibold text-gray-900 text-sm mb-1 group-hover:text-gray-700">每日一个为什么</h3>
+                                <p class="text-gray-500 text-sm leading-relaxed line-clamp-2">每天抛出一个有趣问题，先提问再...</p>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+
+                <!-- My Automations Section (Empty State shown initially) -->
+                <div class="mt-12 hidden" id="myAutomations">
+                    <h2 class="text-base font-medium text-gray-900 mb-4">我的自动化</h2>
+                    <div class="bg-gray-50 rounded-xl p-8 text-center border border-dashed border-gray-300">
+                        <p class="text-gray-500 text-sm">暂无自动化任务，从上方模版开始创建</p>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </main>
+
+    <!-- Toast Notification -->
+    <div id="toast" class="fixed bottom-8 right-8 bg-gray-900 text-white px-6 py-3 rounded-xl shadow-2xl transform translate-y-20 opacity-0 transition-all duration-300 flex items-center gap-3 z-50">
+        <i class="fas fa-check-circle text-emerald-400"></i>
+        <span id="toastMessage">操作成功</span>
+    </div>
+
+    <script>
+        // Use template
+        function useTemplate(templateName) {
+            showToast(`已选择模版：${templateName}`);
+            
+            // Show my automations section if hidden
+            document.getElementById('myAutomations').classList.remove('hidden');
+        }
+
+        // Add automation manually
+        function addAutomation() {
+            showToast('创建新的自动化任务');
+        }
+
+        // Add from template
+        function addFromTemplate() {
+            // Scroll to templates section smoothly
+            document.getElementById('templatesGrid').scrollIntoView({ behavior: 'smooth', block: 'center' });
+            showToast('请从下方选择模版');
+        }
+
+        // Show toast notification
+        function showToast(message) {
+            const toast = document.getElementById('toast');
+            const toastMessage = document.getElementById('toastMessage');
+            
+            toastMessage.textContent = message;
+            toast.classList.remove('translate-y-20', 'opacity-0');
+            
+            setTimeout(() => {
+                toast.classList.add('translate-y-20', 'opacity-0');
+            }, 2500);
+        }
+
+        // Add stagger animation on load
+        window.addEventListener('load', () => {
+            const cards = document.querySelectorAll('.template-card');
+            cards.forEach((card, index) => {
+                card.style.opacity = '0';
+                card.style.transform = 'translateY(10px)';
+                setTimeout(() => {
+                    card.style.transition = 'all 0.3s ease';
+                    card.style.opacity = '1';
+                    card.style.transform = 'translateY(0)';
+                }, index * 50);
+            });
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/features/02-intelligence-layer/00-agent-memory.md b/docs/features/02-intelligence-layer/00-agent-memory.md
index 92ab0af..37a0622 100644
--- a/docs/features/02-intelligence-layer/00-agent-memory.md
+++ b/docs/features/02-intelligence-layer/00-agent-memory.md
@@ -3,7 +3,7 @@
 > **分类**: 智能层
 > **优先级**: P0 - 决定性
 > **成熟度**: L4 - 生产
-> **最后更新**: 2026-03-16
+> **最后更新**: 2026-03-18
 
 ---
 
@@ -26,8 +26,11 @@ Agent 记忆系统实现了跨会话的持久化记忆，支持 5 种记忆类
 |------|------|------|
 | 核心实现 | `desktop/src/lib/agent-memory.ts` | 记忆管理 |
 | 提取器 | `desktop/src/lib/memory-extractor.ts` | 会话记忆提取 |
+| LLM 服务 | `desktop/src/lib/llm-service.ts` | LLM 智能提取适配器 |
 | 向量搜索 | `desktop/src/lib/vector-memory.ts` | 语义搜索 |
-| UI 组件 | `desktop/src/components/MemoryPanel.tsx` | 记忆面板 |
+| 图谱 Store | `desktop/src/store/memoryGraphStore.ts` | 记忆图谱状态 |
+| UI 组件 | `desktop/src/components/MemoryPanel.tsx` | 记忆列表面板 |
+| 图谱组件 | `desktop/src/components/MemoryGraph.tsx` | 记忆关系图谱 |
 
 ---
 
@@ -209,13 +212,19 @@ function prune(options: PruneOptions): number {
 
 - [x] 5 种记忆类型
 - [x] 关键词提取
+- [x] **LLM 智能提取** (2026-03-18)
+  - 通过 OpenFang Gateway 调用 LLM 进行语义分析
+  - 自动识别事实、偏好、经验、任务等记忆类型
+  - 智能评估记忆重要性 (1-10)
+- [x] 规则提取 (备用方案)
 - [x] 相关性排序
 - [x] 重要性评分
 - [x] 访问追踪
 - [x] 去重机制
 - [x] 清理功能
 - [x] Markdown 导出
-- [x] UI 面板
+- [x] UI 面板 (MemoryPanel)
+- [x] **记忆图谱可视化** (MemoryGraph)
 
 ### 5.2 测试覆盖
 
@@ -230,6 +239,15 @@ function prune(options: PruneOptions): number {
 | 大量记忆时检索变慢 | 中 | 待处理 | Q2 |
 | 向量搜索需要 OpenViking | 低 | 可选 | - |
 
+### 5.4 历史问题修复
+
+| 问题 | 原因 | 解决方案 | 日期 |
+|------|------|---------|------|
+| Memory tab 为空 | `useLLM: false` 默认禁用 LLM 提取 | 启用 LLM 提取，降低阈值到 2 条消息 | 2026-03-18 |
+| Graph UI 与系统不一致 | 使用深色主题 `#1a1a2e` | 统一为浅色/暗色双主题支持 | 2026-03-18 |
+| agentId 不一致 | `MemoryPanel` 用 `'zclaw-main'`，`MemoryGraph` 用 `'default'` | 统一 fallback 为 `'zclaw-main'` | 2026-03-18 |
+| GatewayLLMAdapter 端点不存在 | 调用不存在的 `/api/llm/complete` | 改用 `/api/agents/{id}/message` | 2026-03-18 |
+
 ### 5.4 用户反馈
 
 记忆系统有效减少了重复说明，希望提高自动提取的准确性。
diff --git a/docs/features/02-intelligence-layer/05-autonomy-manager.md b/docs/features/02-intelligence-layer/05-autonomy-manager.md
index df7cbce..6457013 100644
--- a/docs/features/02-intelligence-layer/05-autonomy-manager.md
+++ b/docs/features/02-intelligence-layer/05-autonomy-manager.md
@@ -3,18 +3,28 @@
 > **分类**: 智能层
 > **优先级**: P1 - 重要
 > **成熟度**: L4 - 生产
-> **最后更新**: 2026-03-17
+> **最后更新**: 2026-03-18
 
 ---
 
-## ✅ UI 集成状态
+## ✅ 集成状态
 
-> **当前状态**: ✅ 已集成
+> **当前状态**: ✅ 完全集成
 >
 > `AutonomyConfig.tsx` 组件已集成到 `RightPanel.tsx` 的 'autonomy' tab。
 >
 > **集成位置**: RightPanel 'autonomy' tab (点击 Shield 图标)
 
+### 已集成的系统
+
+| 系统 | 文件 | 集成状态 | 说明 |
+|------|------|---------|------|
+| 反思引擎 | `reflection-engine.ts` | ✅ 已集成 | 反思运行前检查授权 |
+| 上下文压缩 | `context-compactor.ts` | ✅ 已集成 | 压缩执行前检查授权 |
+| 身份更新 | `agent-identity.ts` | ✅ 已集成 | 身份变更前检查授权 |
+| 技能安装 | `skill-discovery.ts` | ✅ 已集成 | 技能安装/卸载前检查授权 |
+| 记忆提取 | `session-persistence.ts` | ✅ 已集成 | 记忆保存前检查授权 |
+
 ---
 
 ## 一、功能概述
@@ -27,7 +37,7 @@
 |------|-----|
 | 分类 | 智能层 |
 | 优先级 | P1 |
-| 成熟度 | L2 (降级：UI 未集成) |
+| 成熟度 | L4 |
 | 依赖 | AuditLog, ApprovalWorkflow |
 
 ### 1.2 相关文件
@@ -35,8 +45,8 @@
 | 文件 | 路径 | 用途 | 集成状态 |
 |------|------|------|---------|
 | 核心实现 | `desktop/src/lib/autonomy-manager.ts` | 授权逻辑 | ✅ 存在 |
-| 配置 UI | `desktop/src/components/AutonomyConfig.tsx` | 配置界面 | ❌ **未集成** |
-| 审批 UI | `desktop/src/components/ApprovalsPanel.tsx` | 审批界面 | ❌ **未集成** |
+| 配置 UI | `desktop/src/components/AutonomyConfig.tsx` | 配置界面 | ✅ 已集成 |
+| 审批 UI | `desktop/src/components/ApprovalsPanel.tsx` | 审批界面 | ✅ 已集成 |
 
 ---
 
@@ -76,8 +86,8 @@
 
 | 等级 | 操作类型 | Supervised | Assisted | Autonomous |
 |------|---------|------------|----------|------------|
-| Low | memory_save, reflection_run | 需确认 | 自动 | 自动 |
-| Medium | hand_trigger, config_change | 需确认 | 需确认 | 自动 |
+| Low | memory_save, reflection_run, compaction_run | 需确认 | 自动 | 自动 |
+| Medium | hand_trigger, config_change, skill_install | 需确认 | 需确认 | 自动 |
 | High | memory_delete, identity_update | 需确认 | 需确认 | 需确认 |
 
 ### 2.5 设计约束
@@ -112,6 +122,29 @@ interface AutonomyManager {
                     创建审批请求 → 用户批准/拒绝
 ```
 
+### 3.3 集成模式
+
+各系统集成自主检查的统一模式：
+
+```typescript
+import { canAutoExecute } from './autonomy-manager';
+
+async function someOperation(options?: { skipAutonomyCheck?: boolean }) {
+  // 自主检查
+  if (!options?.skipAutonomyCheck) {
+    const { canProceed, decision } = canAutoExecute('action_type', importance);
+    if (!canProceed) {
+      console.log(`[Module] Autonomy check failed: ${decision.reason}`);
+      return; // 或返回默认结果
+    }
+    console.log(`[Module] Autonomy check passed: ${decision.reason}`);
+  }
+
+  // 执行实际操作
+  // ...
+}
+```
+
 ---
 
 ## 四、实际效果
@@ -125,6 +158,10 @@ interface AutonomyManager {
 - [x] 操作回滚 (lib)
 - [x] 审批过期 (lib)
 - [x] **UI 审批面板** - ✅ 已集成到 RightPanel 'autonomy' tab
+- [x] **反思引擎集成** - ✅ 2026-03-18
+- [x] **上下文压缩集成** - ✅ 2026-03-18
+- [x] **身份更新集成** - ✅ 2026-03-18
+- [x] **技能安装集成** - ✅ 2026-03-18
 
 ### 4.2 已知问题
 
@@ -138,6 +175,10 @@ interface AutonomyManager {
 ## 五、演化路线
 
 ### 5.1 短期计划（1-2 周）
+- [x] 集成反思引擎
+- [x] 集成上下文压缩
+- [x] 集成身份更新
+- [x] 集成技能安装
 - [ ] 优化审批 UI
 - [ ] 添加批量审批
 
diff --git a/docs/features/FRONTEND_INTEGRATION_AUDIT.md b/docs/features/FRONTEND_INTEGRATION_AUDIT.md
index 15536be..a16a815 100644
--- a/docs/features/FRONTEND_INTEGRATION_AUDIT.md
+++ b/docs/features/FRONTEND_INTEGRATION_AUDIT.md
@@ -189,19 +189,20 @@
 | ~~ActiveLearningPanel~~ | ~~`ActiveLearningPanel.tsx`~~ | ~~主动学习面板~~ | ✅ 已集成 |
 | ~~SkillMarket~~ | ~~`SkillMarket.tsx`~~ | ~~技能市场~~ | ✅ 已集成 |
 | ~~SkillCard~~ | ~~`SkillMarket/SkillCard.tsx`~~ | ~~技能卡片~~ | ✅ 已集成 |
-| MemoryGraph | `MemoryGraph.tsx` | 记忆图谱可视化 | 中 |
+| ~~MemoryGraph~~ | ~~`MemoryGraph.tsx`~~ | ~~记忆图谱可视化~~ | ✅ 已集成到 RightPanel memory tab |
 | ~~AuditLogsPanel~~ | ~~`AuditLogsPanel.tsx`~~ | ~~审计日志面板~~ | ✅ 已集成 |
 | ~~SecurityLayersPanel~~ | ~~`SecurityLayersPanel.tsx`~~ | ~~安全层面板~~ | ✅ 已集成 |
-| TriggersPanel | `TriggersPanel.tsx` | 触发器管理 | 低 |
-| ApprovalsPanel | `ApprovalsPanel.tsx` | 审批管理面板 | 低 |
-| TeamOrchestrator | `TeamOrchestrator.tsx` | 团队编排器 | 低 |
+| ~~TriggersPanel~~ | ~~`TriggersPanel.tsx`~~ | ~~触发器管理~~ | ✅ 已集成到 SchedulerPanel triggers tab |
+| ~~ApprovalsPanel~~ | ~~`ApprovalsPanel.tsx`~~ | ~~审批管理面板~~ | ✅ 已集成到 HandsPanel approvals tab |
+| ~~TeamOrchestrator~~ | ~~`TeamOrchestrator.tsx`~~ | ~~团队编排器~~ | ✅ 已集成到 App team view orchestrator tab |
 | ~~SecurityStatus~~ | ~~`SecurityStatus.tsx`~~ | ~~安全状态显示~~ | ✅ 已集成 |
 | HeartbeatConfig | `HeartbeatConfig.tsx` | 心跳配置 | 低 |
 | CreateTriggerModal | `CreateTriggerModal.tsx` | 创建触发器弹窗 | 低 |
-| FeedbackButton | `Feedback/FeedbackButton.tsx` | 反馈按钮 | 低 |
-| FeedbackHistory | `Feedback/FeedbackHistory.tsx` | 反馈历史 | 低 |
-| FeedbackModal | `Feedback/FeedbackModal.tsx` | 反馈弹窗 | 低 |
-| MessageSearch | `MessageSearch.tsx` | 消息搜索 | 中 |
+| ~~FeedbackButton~~ | ~~`Feedback/FeedbackButton.tsx`~~ | ~~反馈按钮~~ | ✅ 已集成到 SettingsLayout |
+| ~~FeedbackHistory~~ | ~~`Feedback/FeedbackHistory.tsx`~~ | ~~反馈历史~~ | ✅ 已集成到 SettingsLayout |
+| ~~FeedbackModal~~ | ~~`Feedback/FeedbackModal.tsx`~~ | ~~反馈弹窗~~ | ✅ 已集成到 SettingsLayout |
+| ~~MessageSearch~~ | ~~`MessageSearch.tsx`~~ | ~~消息搜索~~ | ✅ Sidebar 已有搜索功能 |
+| ~~MemoryGraph~~ | ~~`MemoryGraph.tsx`~~ | ~~记忆图谱可视化~~ | ✅ 已集成到 RightPanel memory tab |
 | PersonalitySelector | `PersonalitySelector.tsx` | 个性选择器 | 低 |
 | ScenarioTags | `ScenarioTags.tsx` | 场景标签 | 低 |
 | BrowserHand/* | `BrowserHand/*.tsx` | Browser Hand 组件 | ✅ 已被 HandsPanel 使用 |
@@ -254,12 +255,12 @@
    - ~~`HandParamsForm.tsx` → 集成到 HandsPanel 触发流程~~ - ✅ 已集成
    - ~~`HandApprovalModal.tsx` → 集成到 App.tsx 全局监听~~ - ✅ 已集成
 
-### P2 - 增强 (锦上添花)
+### P2 - 增强 (锦上添花) - ✅ MemoryGraph、TriggersPanel 已完成
 
 5. **集成其他组件**
-   - `TriggersPanel.tsx` → 添加到 workflow 视图
+   - ~~`TriggersPanel.tsx` → 添加到 workflow 视图~~ - ✅ 已集成到 SchedulerPanel (2026-03-18)
    - `ApprovalsPanel.tsx` → 添加到 hands 视图
-   - `MemoryGraph.tsx` → 添加到 memory tab
+   - ~~`MemoryGraph.tsx` → 添加到 memory tab~~ - ✅ 已集成 (2026-03-18)
    - `MessageSearch.tsx` → 添加到 ChatArea
 
 ---
@@ -273,7 +274,6 @@
 | `02-intelligence-layer/03-reflection-engine.md` | L4 已完成 | ✅ 已更新为 L4 已集成 |
 | `02-intelligence-layer/05-autonomy-manager.md` | L4 已完成 | ✅ 已更新为 L4 已集成 |
 | `04-skills-ecosystem/00-skill-system.md` | L4 已完成 | ✅ 已更新为 L4 已集成 |
-| `01-core-features/03-workflow-engine.md` | L3 成熟 | 添加说明：Editor/History 未集成 |
 
 ---
 
@@ -297,7 +297,11 @@
 4. **Hands 参数和审批已集成** - ✅ HandParamsForm 和 HandApprovalModal 已集成 (2026-03-17)
 5. **Workflow 编辑器已集成** - ✅ WorkflowEditor 和 WorkflowHistory 已集成到 SchedulerPanel (2026-03-17)
 6. **安全与审计已集成** - ✅ AuditLogsPanel 和 SecurityLayersPanel 已集成到 SettingsLayout (2026-03-17)
-7. **部分"僵尸组件"** - ~2 组件存在但未渲染 (MemoryGraph, TriggersPanel)
+7. **记忆图谱已集成** - ✅ MemoryGraph 已集成到 RightPanel memory tab (2026-03-18)
+8. **触发器面板已集成** - ✅ TriggersPanel 已集成到 SchedulerPanel triggers tab (2026-03-18)
+9. **审批面板已集成** - ✅ ApprovalsPanel 已集成到 HandsPanel approvals tab (2026-03-18)
+10. **团队编排器已集成** - ✅ TeamOrchestrator 已集成到 App team view orchestrator tab (2026-03-18)
+11. **所有组件已集成** - ✅ 无剩余"僵尸组件"
 
 ### 建议行动
 
@@ -305,5 +309,8 @@
 2. ~~**短期**: 集成 SkillMarket 和 ActiveLearningPanel~~ - ✅ 已完成 (2026-03-17)
 3. ~~**短期**: 集成 HandParamsForm 和 HandApprovalModal~~ - ✅ 已完成 (2026-03-17)
 4. ~~**中期**: 集成 Workflow Editor/History 和 安全/审计组件~~ - ✅ 已完成 (2026-03-17)
-5. **长期**: 清理剩余"僵尸组件" (MemoryGraph, TriggersPanel)
-6. **长期**: 建立文档-代码同步机制，避免文档过时
+5. ~~**中期**: 集成 MemoryGraph~~ - ✅ 已完成 (2026-03-18)
+6. ~~**中期**: 集成 TriggersPanel~~ - ✅ 已完成 (2026-03-18)
+7. ~~**中期**: 集成 ApprovalsPanel~~ - ✅ 已完成 (2026-03-18)
+8. ~~**中期**: 集成 TeamOrchestrator~~ - ✅ 已完成 (2026-03-18)
+9. **长期**: 建立文档-代码同步机制，避免文档过时
diff --git a/docs/knowledge-base/troubleshooting.md b/docs/knowledge-base/troubleshooting.md
index 3bae9c3..5e36380 100644
--- a/docs/knowledge-base/troubleshooting.md
+++ b/docs/knowledge-base/troubleshooting.md
@@ -546,6 +546,187 @@ if (clones && clones.length > 0) {
 2. 重新启动应用
 3. 完成引导流程 → 应该成功更新默认 Agent
 
+### 3.4 刷新页面后对话内容丢失
+
+**症状**: 切换 Tab 时对话正常保留，但按 F5 刷新页面后对话内容消失
+
+**根本原因**: `onComplete` 回调中没有将当前对话保存到 `conversations` 数组，导致 `persist` 中间件无法持久化
+
+**问题分析**:
+
+Zustand 的 `persist` 中间件只保存 `partialize` 中指定的字段：
+```typescript
+partialize: (state) => ({
+  conversations: state.conversations,  // ← 从这里恢复
+  currentModel: state.currentModel,
+  currentAgentId: state.currentAgent?.id,
+  currentConversationId: state.currentConversationId,
+}),
+```
+
+但 `messages` 数组只在内存中，刷新后丢失。恢复逻辑依赖 `conversations` 数组：
+```typescript
+onRehydrateStorage: () => (state) => {
+  if (state?.currentConversationId && state.conversations) {
+    const currentConv = state.conversations.find(c => c.id === state.currentConversationId);
+    if (currentConv) {
+      state.messages = [...currentConv.messages];  // ← 从 conversations 恢复
+    }
+  }
+},
+```
+
+**问题**: `onComplete` 回调中只更新了 `messages`，没有调用 `upsertActiveConversation` 保存到 `conversations`
+
+**修复代码**:
+```typescript
+onComplete: () => {
+  const state = get();
+
+  // Save conversation to persist across refresh
+  const conversations = upsertActiveConversation([...state.conversations], state);
+  const currentConvId = state.currentConversationId || conversations[0]?.id;
+
+  set({
+    isStreaming: false,
+    conversations,           // ← 保存到 conversations 数组
+    currentConversationId: currentConvId,  // ← 确保 ID 被设置
+    messages: state.messages.map((m) =>
+      m.id === assistantId ? { ...m, streaming: false, runId } : m
+    ),
+  });
+
+  // ... rest of the callback
+},
+```
+
+**文件**: `desktop/src/store/chatStore.ts`
+
+**验证修复**:
+1. 发送消息并获得 AI 回复
+2. 按 F5 刷新页面
+3. 对话内容应该保留
+
+### 3.5 ChatArea 输入框布局错乱
+
+**症状**: 对话过程中输入框被移动到页面顶部，而不是固定在底部
+
+**根本原因**: `ChatArea` 组件返回的是 React Fragment (`<>...</>`)，没有包裹在 flex 容器中
+
+**问题代码**:
+```typescript
+// ❌ 错误 - Fragment 没有 flex 布局
+return (
+  <>
+    <div className="h-14 ...">Header</div>
+    <div className="flex-1 ...">Messages</div>
+    <div className="border-t ...">Input</div>
+  </>
+);
+```
+
+**修复代码**:
+```typescript
+// ✅ 正确 - 使用 flex 容器
+return (
+  <div className="flex flex-col h-full">
+    <div className="h-14 flex-shrink-0 ...">Header</div>
+    <div className="flex-1 overflow-y-auto ...">Messages</div>
+    <div className="flex-shrink-0 ...">Input</div>
+  </div>
+);
+```
+
+**文件**: `desktop/src/components/ChatArea.tsx`
+
+**布局原理**:
+```
+┌─────────────────────────────────────┐
+│ Header (h-14, flex-shrink-0)        │ ← 固定高度
+├─────────────────────────────────────┤
+│                                     │
+│ Messages (flex-1, overflow-y-auto)  │ ← 占据剩余空间，可滚动
+│                                     │
+├─────────────────────────────────────┤
+│ Input (flex-shrink-0)               │ ← 固定在底部
+└─────────────────────────────────────┘
+```
+
+---
+
+## 7. 记忆系统问题
+
+### 7.1 Memory Tab 为空，多轮对话后无记忆
+
+**症状**: 经过多次对话后，右侧面板的"记忆"Tab 内容为空
+
+**根本原因**: 多个配置问题导致记忆未被提取
+
+**问题分析**:
+
+1. **LLM 提取默认禁用**: `useLLM: false` 导致只使用规则提取
+2. **提取阈值过高**: `minMessagesForExtraction: 4` 短对话不会触发
+3. **agentId 不一致**: `MemoryPanel` 用 `'zclaw-main'`，`MemoryGraph` 用 `'default'`
+4. **Gateway 端点不存在**: `GatewayLLMAdapter` 调用 `/api/llm/complete`，OpenFang 无此端点
+
+**修复方案**:
+
+```typescript
+// 1. 启用 LLM 提取 (memory-extractor.ts)
+export const DEFAULT_EXTRACTION_CONFIG: ExtractionConfig = {
+  useLLM: true,  // 从 false 改为 true
+  minMessagesForExtraction: 2,  // 从 4 降低到 2
+  // ...
+};
+
+// 2. 统一 agentId fallback (MemoryGraph.tsx)
+const agentId = currentAgent?.id || 'zclaw-main';  // 从 'default' 改为 'zclaw-main'
+
+// 3. 修复 Gateway 适配器端点 (llm-service.ts)
+// 使用 OpenFang 的 /api/agents/{id}/message 端点
+const response = await fetch(`/api/agents/${agentId}/message`, {
+  method: 'POST',
+  body: JSON.stringify({ message: fullPrompt, ... }),
+});
+```
+
+**文件**:
+- `desktop/src/lib/memory-extractor.ts`
+- `desktop/src/lib/llm-service.ts`
+- `desktop/src/components/MemoryGraph.tsx`
+
+**验证修复**:
+1. 打开浏览器控制台
+2. 进行至少 2 轮对话
+3. 查看日志: `[MemoryExtractor] Using LLM-powered semantic extraction`
+4. 检查 Memory Tab 是否显示提取的记忆
+
+### 7.2 Memory Graph UI 与系统风格不一致
+
+**症状**: 记忆图谱使用深色主题，与系统浅色主题不协调
+
+**根本原因**: `MemoryGraph.tsx` 硬编码深色背景 `#1a1a2e`
+
+**修复方案**:
+
+```typescript
+// Canvas 背景 - 支持亮/暗双主题
+ctx.fillStyle = '#f9fafb'; // gray-50 (浅色)
+
+// 工具栏 - 添加 dark: 变体
+<div className="bg-gray-100 dark:bg-gray-800/50">
+
+// 图谱画布 - 添加 dark: 变体
+<div className="bg-gray-50 dark:bg-gray-900">
+```
+
+**文件**: `desktop/src/components/MemoryGraph.tsx`
+
+**设计规范**:
+- 使用 Tailwind 的 `dark:` 变体支持双主题
+- 强调色使用 `orange-500` 而非 `blue-600`
+- 文字颜色使用 `gray-700 dark:text-gray-300`
+
 ---
 
 ## 8. 相关文档
@@ -560,6 +741,8 @@ if (clones && clones.length > 0) {
 
 | 日期 | 变更 |
 |------|------|
+| 2026-03-18 | 添加记忆提取和图谱 UI 问题 |
+| 2026-03-18 | 添加刷新后对话丢失问题和 ChatArea 布局问题 |
 | 2026-03-17 | 添加首次使用引导流程 |
 | 2026-03-17 | 添加配置热重载限制问题 |
 | 2026-03-14 | 初始版本 |
diff --git a/plans/humble-popping-anchor.md b/plans/humble-popping-anchor.md
index 58fc803..71e0e86 100644
--- a/plans/humble-popping-anchor.md
+++ b/plans/humble-popping-anchor.md
@@ -1,202 +1,246 @@
 # ZClaw 桌面应用布局优化计划
 
-## 一、问题分析
+## 一、设计参考
 
-基于截图和代码分析，当前三栏布局存在以下问题：
+基于腾讯 WorkBuddy 的 HTML 设计稿，学习其布局风格并适配 ZClaw 的功能需求。
 
-| 问题 | 影响 |
-|------|------|
-| Sidebar 固定 256px | 占用过多水平空间 |
-| RightPanel 固定 320px | 信息密度过高，7 个 Tab 挤在一起 |
-| 主内容区被挤压 | 聊天（核心功能）空间不足 |
-| 无折叠机制 | 用户无法按需调整空间 |
-| 无响应式 | 小屏幕上不可用 |
+### WorkBuddy 布局结构
+
+```
+┌────────────────────────────────────────────────────────────────┐
+│                    顶部工具栏 (h-14 = 56px)                     │
+├────────────────┬───────────────────────────────────────────────┤
+│                │                                               │
+│   左侧导航栏    │                主内容区                        │
+│   w-64 (256px) │               flex-1                          │
+│                │          (占据全部剩余空间)                     │
+│  ┌──────────┐  │                                               │
+│  │ 搜索框   │  │    - 聊天界面 (居中卡片)                        │
+│  ├──────────┤  │    - 专家中心 (网格卡片)                        │
+│  │ 新建任务 │  │    - 技能市场 (网格卡片)                        │
+│  ├──────────┤  │    - 自动化 (模板卡片)                         │
+│  │ Claw    │  │                                               │
+│  │ 专家    │  │                                               │
+│  │ 技能    │  │                                               │
+│  │ 插件    │  │                                               │
+│  │ 自动化  │  │                                               │
+│  ├──────────┤  │                                               │
+│  │ 空状态   │  │                                               │
+│  └──────────┘  │                                               │
+│  ┌──────────┐  │                                               │
+│  │ 用户头像 │  │                                               │
+│  └──────────┘  │                                               │
+└────────────────┴───────────────────────────────────────────────┘
+```
+
+### 关键设计特点
+
+1. **无右侧面板** - 所有功能通过左侧导航切换，在主内容区显示
+2. **紧凑导航栏** - 256px 固定宽度，包含搜索和所有导航项
+3. **最大化主内容区** - 占据全部剩余空间
+4. **卡片式布局** - 主内容区使用卡片网格展示内容
+5. **绿色强调色** - emerald-500 作为主强调色
+6. **Inter 字体** - 现代简洁的字体
 
 ---
 
-## 二、布局方案对比
+## 二、ZClaw 功能映射
 
-### 方案 A: 顶部导航 + 左右双栏 ⭐ 推荐
+### 导航项映射
 
-```
-┌──────────────────────────────────────────────────────────────────┐
-│  [Logo] ZCLAW     Chat  |  Agents  |  Hands  |  Workflow  |  ⚙   │
-│                         ← 顶部 Tab 导航                            │
-├────────────────┬─────────────────────────────────────────────────┤
-│                │                                                 │
-│   左侧列表区    │                  主内容区                        │
-│   (可折叠)     │               (聊天/详情)                        │
-│                │                                                 │
-│  ┌──────────┐  │   ┌─────────────────────────────────────────┐   │
-│  │ Agent 1  │  │   │                                         │   │
-│  │ Agent 2  │  │   │         聊天消息 / 详情内容              │   │
-│  │ Hand 1   │  │   │                                         │   │
-│  │ ...      │  │   │                                         │   │
-│  └──────────┘  │   └─────────────────────────────────────────┘   │
-│                │                                                 │
-│  ┌──────────┐  │   ┌─────────────────────────────────────────┐   │
-│  │ 用户头像  │  │   │ [输入框]                    [📋 详情]   │   │
-│  └──────────┘  │   └─────────────────────────────────────────┘   │
-└────────────────┴─────────────────────────────────────────────────┘
-      240px                    flex-1 (最大化)
-```
+| WorkBuddy | ZClaw | 功能说明 |
+|-----------|-------|---------|
+| Claw | 聊天 (Chat) | AI 对话，核心功能 |
+| 专家 | 分身 (Agents) | Agent 列表和管理 |
+| 技能 | 技能 (Skills) | 技能市场 |
+| 插件 | Hands | 7 个自主能力包 |
+| 自动化 | 工作流 (Workflow) | 工作流和调度 |
 
-**特点**:
-- ✅ 主内容区域最大化
-- ✅ 顶部导航清晰，一眼看到所有视图
-- ✅ 左侧列表可折叠 (240px ↔ 0px)
-- ✅ 详情面板通过按钮触发（抽屉滑出），不常驻
+### 额外功能处理
 
-**空间分配**: `240px + flex-1` = 主内容占比 ~80%
+ZClaw 有额外的功能需要处理：
+- **团队协作** → 添加到导航项
+- **Swarm 协作** → 添加到导航项
+- **详情面板** (RightPanel) → **改为抽屉或合并到主内容区**
 
 ---
 
-### 方案 B: 窄导航 + 列表 + 主内容 (类 VSCode)
+## 三、新布局方案
+
+### 方案：WorkBuddy 风格 + 详情抽屉
 
 ```
-┌────┬─────────────┬───────────────────────────────────────────────┐
-│ 🔘 │             │                                               │
-│ 💬 │   列表区     │                   主内容区                     │
-│ 🤖 │  (Agent/    │                (聊天/详情)                     │
-│ 🖐️ │   Hands/    │                                               │
-│ ⚡ │   etc)      │                                               │
-│ 👥 │             │                                               │
-│ ⚙️ │             │                                               │
-└────┴─────────────┴───────────────────────────────────────────────┘
- 64px    200px                    flex-1
+┌────────────────────────────────────────────────────────────────┐
+│  [Z] ZCLAW                              [📋 详情] [⚙ 设置]     │
+├────────────────┬───────────────────────────────────────────────┤
+│  🔍 搜索...    │                                               │
+├────────────────┤                                               │
+│  ✨ 新对话     │                                               │
+├────────────────┤                                               │
+│  💬 聊天      │              主内容区                           │
+│  🤖 分身 ←   │           (flex-1)                              │
+│  🖐️ Hands    │                                               │
+│  ⚡ 工作流    │        根据导航显示对应内容:                      │
+│  📦 技能     │        - 聊天界面                                │
+│  👥 团队     │        - Agent 列表 + 详情                       │
+│  🐝 Swarm    │        - Hands 列表 + 详情                       │
+├────────────────┤        - 工作流编辑器                          │
+│  暂无任务     │        - 技能市场                               │
+├────────────────┤        - 团队列表                              │
+│  👤 用户     │        - Swarm 仪表盘                            │
+└────────────────┴───────────────────────────────────────────────┘
+                        ↑ 点击 [📋 详情] 可从右侧滑出抽屉
 ```
 
-**特点**:
-- ✅ 导航极简，64px 窄条
-- ✅ 类似 VSCode/Notion 布局，用户熟悉
-- ⚠️ 仍是三栏，但比例更合理
+### 布局尺寸
 
-**空间分配**: `64px + 200px + flex-1` = 主内容占比 ~70%
+| 区域 | 尺寸 | 说明 |
+|------|------|------|
+| 左侧导航栏 | `w-64` (256px) | 与 WorkBuddy 一致 |
+| 顶部工具栏 | `h-14` (56px) | 与 WorkBuddy 一致 |
+| 主内容区 | `flex-1` | 占据全部剩余空间 |
+| 详情抽屉 | `w-80` (320px) | 按需滑出 |
 
 ---
 
-### 方案 C: 左侧导航+列表 + 主内容 + 右侧详情（可折叠）
+## 四、详细实施计划
 
-```
-┌──────────────────────┬──────────────────────────────┬─────────────┐
-│  [Tab: 分身|Hands|...]│                              │             │
-├──────────────────────┤          主内容区             │  详情面板   │
-│                      │         (聊天/详情)           │  (可折叠)   │
-│   列表区             │                              │             │
-│   (根据 Tab 切换)     │                              │  - Status   │
-│                      │                              │  - Memory   │
-│                      │                              │  - Agent    │
-└──────────────────────┴──────────────────────────────┴─────────────┘
-        240px                    flex-1              280px (可隐藏)
-```
+### Phase 1: 重构 Sidebar 组件
 
-**特点**:
-- ✅ 改动最小，基于现有结构
-- ✅ 详情面板可折叠
-- ⚠️ 仍是三栏结构
-- ⚠️ 右侧面板常驻时占用空间
+**修改文件**: `desktop/src/components/Sidebar.tsx`
 
-**空间分配**: `240px + flex-1 + 280px` = 主内容占比 ~50% (面板展开时)
-
----
-
-### 方案 D: 单栏 + 抽屉模式（极简）
-
-```
-┌──────────────────────────────────────────────────────────────────┐
-│  [≡ 菜单]  ZCLAW                               [⚙ 详情]  [🔔]    │
-├──────────────────────────────────────────────────────────────────┤
-│                                                                  │
-│                                                                  │
-│                          主内容区                                 │
-│                        (聊天/详情)                                │
-│                                                                  │
-│                         最大化空间                                │
-│                                                                  │
-├──────────────────────────────────────────────────────────────────┤
-│  [💬 输入框]                                                     │
-└──────────────────────────────────────────────────────────────────┘
-
-点击 [≡ 菜单] → 左侧滑出抽屉导航
-点击 [⚙ 详情] → 右侧滑出详情面板
-```
-
-**特点**:
-- ✅ 主内容区域最大化 (100%)
-- ✅ 极简界面，专注当前任务
-- ⚠️ 需要额外点击访问导航
-- ⚠️ 不适合频繁切换视图
-
-**空间分配**: 主内容 100%，抽屉按需滑出
-
----
-
-## 三、方案推荐
-
-| 方案 | 主内容占比 | 改动量 | 适合场景 |
-|------|-----------|--------|---------|
-| **A: 顶部导航+双栏** ⭐ | ~80% | 中 | **推荐** - 平衡空间和功能 |
-| B: 窄导航+三栏 | ~70% | 小 | 保守升级，用户熟悉 |
-| C: 改良三栏 | ~50% | 最小 | 最小改动，渐进优化 |
-| D: 单栏+抽屉 | 100% | 大 | 极简主义，移动端友好 |
-
-**推荐方案 A** 的理由：
-1. 聊天是核心功能，应给予最大空间
-2. 顶部导航符合现代应用设计趋势
-3. 左侧列表可折叠，灵活控制
-4. 详情面板按需显示，不常驻占用
-
----
-
-## 四、实施计划（基于方案 A）
-
-### Phase 1: 创建顶部导航组件
-
-**新建文件**: `desktop/src/components/TopNav.tsx`
+**改动内容**:
+1. 移除顶部 Tab 栏（改为单一导航列表）
+2. 添加搜索框
+3. 添加"新对话"按钮
+4. 导航项使用图标 + 文字
+5. 保持 256px 宽度
 
 ```tsx
-// 顶部导航组件
-// Tab: Chat | Agents | Hands | Workflow | Skills | Team
-// 右侧: 详情按钮、设置按钮
+<aside className="w-64 bg-white border-r border-gray-200 flex flex-col">
+  {/* 搜索框 */}
+  <div className="p-3">
+    <SearchInput placeholder="搜索..." />
+  </div>
+
+  {/* 新对话按钮 */}
+  <button className="mx-3 mb-2 flex items-center gap-3 px-3 py-2 bg-gray-100 rounded-lg">
+    <Sparkles className="text-emerald-500" />
+    <span>新对话</span>
+  </button>
+
+  {/* 导航项 */}
+  <nav className="flex-1 px-3 space-y-0.5 overflow-y-auto">
+    <NavItem icon={MessageSquare} label="聊天" active />
+    <NavItem icon={Bot} label="分身" />
+    <NavItem icon={Hand} label="Hands" />
+    <NavItem icon={GitBranch} label="工作流" />
+    <NavItem icon={Package} label="技能" />
+    <NavItem icon={Users} label="团队" />
+    <NavItem icon={Layers} label="Swarm" />
+  </nav>
+
+  {/* 用户栏 */}
+  <div className="p-3 border-t">
+    <UserBar />
+  </div>
+</aside>
 ```
 
-### Phase 2: 重构 App.tsx 布局
+### Phase 2: 移除 RightPanel，改为抽屉
 
 **修改文件**: `desktop/src/App.tsx`
 
+**改动内容**:
+1. 移除常驻的 RightPanel
+2. 添加详情抽屉状态
+3. 在顶部工具栏添加"详情"按钮
+4. 点击按钮时从右侧滑出抽屉
+
 ```tsx
-// 新布局结构
-<div className="h-screen flex flex-col">
-  <TopNav />
-  <div className="flex-1 flex overflow-hidden">
-    <LeftPanel collapsible />  {/* 可折叠列表区 */}
-    <MainContent />             {/* 主内容区 */}
-  </div>
+const [showDetailDrawer, setShowDetailDrawer] = useState(false);
+
+// 布局
+<div className="h-screen flex">
+  <Sidebar />
+  <main className="flex-1 flex flex-col">
+    <header className="h-14 border-b flex items-center px-4">
+      <span className="font-medium">{viewTitle}</span>
+      <div className="flex-1" />
+      <Button onClick={() => setShowDetailDrawer(true)}>
+        <ClipboardList /> 详情
+      </Button>
+      <Button onClick={onOpenSettings}>
+        <Settings />
+      </Button>
+    </header>
+    <div className="flex-1 overflow-hidden">
+      {/* 主内容 */}
+    </div>
+  </main>
+
+  {/* 详情抽屉 */}
+  <DetailDrawer open={showDetailDrawer} onClose={() => setShowDetailDrawer(false)}>
+    <RightPanelContent />
+  </DetailDrawer>
 </div>
 ```
 
-### Phase 3: 重构 Sidebar 为 LeftPanel
+### Phase 3: 创建 DetailDrawer 组件
 
-**修改文件**: `desktop/src/components/Sidebar.tsx` → `LeftPanel.tsx`
+**新建文件**: `desktop/src/components/DetailDrawer.tsx`
 
-- 移除顶部 Tab（已移到 TopNav）
-- 添加折叠功能
-- 显示当前视图的列表
+```tsx
+import { motion, AnimatePresence } from 'framer-motion';
 
-### Phase 4: RightPanel 改为抽屉模式
+export function DetailDrawer({ open, onClose, children }) {
+  return (
+    <AnimatePresence>
+      {open && (
+        <>
+          {/* 遮罩 */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 bg-black/20 z-40"
+            onClick={onClose}
+          />
+          {/* 抽屉 */}
+          <motion.aside
+            initial={{ x: 320 }}
+            animate={{ x: 0 }}
+            exit={{ x: 320 }}
+            transition={{ type: 'spring', damping: 25, stiffness: 300 }}
+            className="fixed right-0 top-0 bottom-0 w-80 bg-white border-l z-50 flex flex-col"
+          >
+            <header className="h-14 border-b flex items-center px-4">
+              <span className="font-medium">详情</span>
+              <button onClick={onClose} className="ml-auto">
+                <X />
+              </button>
+            </header>
+            <div className="flex-1 overflow-y-auto">
+              {children}
+            </div>
+          </motion.aside>
+        </>
+      )}
+    </AnimatePresence>
+  );
+}
+```
 
-**修改文件**: `desktop/src/components/RightPanel.tsx`
+### Phase 4: 主内容区适配
 
-- 改为滑出式抽屉（Drawer）
-- 默认隐藏，点击按钮显示
-- 优化 Tab 分组
+**修改文件**: 各视图组件
 
-### Phase 5: 响应式适配
-
-**修改文件**: `desktop/src/App.tsx`
-
-- 窗口 < 1024px: 自动折叠 LeftPanel
-- 窗口 < 768px: LeftPanel 改为抽屉
+根据 WorkBuddy 的风格调整各页面布局：
+- **聊天页**: 居中卡片式输入框，上方消息列表
+- **分身页**: 左侧列表 + 右侧详情（或卡片网格）
+- **Hands 页**: 列表 + 详情
+- **工作流页**: 列表 + 编辑器
+- **技能页**: 网格卡片布局（参考 WorkBuddy 技能页）
 
 ---
 
@@ -204,22 +248,66 @@
 
 | 文件 | 操作 | 说明 |
 |------|------|------|
-| `components/TopNav.tsx` | 新建 | 顶部导航栏 |
-| `components/LeftPanel.tsx` | 新建/重构 | 可折叠左侧列表 |
-| `components/Drawer.tsx` | 新建 | 通用抽屉组件 |
+| `components/Sidebar.tsx` | 重构 | 改为 WorkBuddy 风格导航 |
+| `components/DetailDrawer.tsx` | **新建** | 右侧滑出抽屉 |
+| `components/TopBar.tsx` | **新建** | 顶部工具栏 |
 | `App.tsx` | 重构 | 新布局结构 |
-| `Sidebar.tsx` | 删除/重构 | 合并到 LeftPanel |
-| `RightPanel.tsx` | 重构 | 改为抽屉模式 |
+| `RightPanel.tsx` | 重构 | 内容移入 DetailDrawer |
 
 ---
 
-## 六、验证方法
+## 六、颜色和样式规范
+
+### 主色调 (参考 WorkBuddy)
+
+```css
+/* 强调色 */
+--primary: #10b981; /* emerald-500 */
+--primary-hover: #059669; /* emerald-600 */
+
+/* 背景 */
+--bg-main: #ffffff;
+--bg-sidebar: #ffffff;
+--bg-input: #f9fafb; /* gray-50 */
+
+/* 边框 */
+--border: #e5e7eb; /* gray-200 */
+--border-light: #f3f4f6; /* gray-100 */
+
+/* 文字 */
+--text-primary: #111827; /* gray-900 */
+--text-secondary: #6b7280; /* gray-500 */
+--text-muted: #9ca3af; /* gray-400 */
+```
+
+### 尺寸规范
+
+```css
+/* 导航栏 */
+--sidebar-width: 256px;
+--header-height: 56px;
+
+/* 间距 */
+--spacing-xs: 4px;
+--spacing-sm: 8px;
+--spacing-md: 12px;
+--spacing-lg: 16px;
+
+/* 圆角 */
+--radius-sm: 6px;
+--radius-md: 8px;
+--radius-lg: 12px;
+```
+
+---
+
+## 七、验证方法
 
 1. **布局验证**: 检查各组件在正确位置
-2. **折叠验证**: LeftPanel 可正常折叠/展开
-3. **抽屉验证**: RightPanel 抽屉正常滑出/关闭
-4. **响应式验证**: 不同窗口尺寸下布局自适应
-5. **功能验证**: 所有现有功能正常工作
+2. **导航验证**: 点击导航项切换视图
+3. **抽屉验证**: 点击详情按钮抽屉滑出
+4. **响应式验证**: 窗口缩放时布局正确
+5. **暗色模式验证**: 暗色模式下样式正确
 
 ```bash
 pnpm dev
@@ -228,23 +316,51 @@ pnpm dev
 
 ---
 
-## 七、实施预估
+## 八、视觉效果对比
 
-| Phase | 工作量 | 优先级 |
-|-------|--------|--------|
-| Phase 1: TopNav | 2h | P0 |
-| Phase 2: App 重构 | 2h | P0 |
-| Phase 3: LeftPanel | 2h | P0 |
-| Phase 4: RightPanel 抽屉 | 1.5h | P1 |
-| Phase 5: 响应式 | 1h | P1 |
+### 改造前
 
-**总计**: 约 8.5 小时
+```
+┌────────────────────────────────────────────────────────────────┐
+│ [Tab: 分身|Hands|工作流|技能|团队|协作]                          │
+├────────────────────────────────────────────────┬───────────────┤
+│              主内容区 (~50%)                    │  RightPanel   │
+│                                                │   (320px)     │
+└────────────────────────────────────────────────┴───────────────┘
+```
+
+### 改造后 (WorkBuddy 风格)
+
+```
+┌────────────────┬───────────────────────────────────────────────┐
+│  🔍 搜索      │                                               │
+│  ✨ 新对话    │                                               │
+│  💬 聊天     │                                               │
+│  🤖 分身     │              主内容区                          │
+│  🖐️ Hands   │              (100%)                            │
+│  ⚡ 工作流   │                                               │
+│  📦 技能    │         [📋 详情] → 按需显示抽屉                 │
+│  👥 团队    │                                               │
+│  🐝 Swarm   │                                               │
+│  ──────────  │                                               │
+│  👤 用户    │                                               │
+└────────────────┴───────────────────────────────────────────────┘
+      256px
+```
+
+**空间优化**:
+- 移除常驻 RightPanel，主内容区从 ~50% 扩大到 ~100%
+- 详情通过抽屉按需显示，不占用常驻空间
 
 ---
 
-## 八、待确认问题
+## 九、实施预估
 
-1. **布局方案选择**: 你更倾向于哪个方案 (A/B/C/D)？
-2. **RightPanel 处理**: 改为抽屉模式，还是保留常驻但可折叠？
-3. **快捷键**: 是否需要快捷键切换面板 (Cmd+[ / Cmd+])？
-4. **过渡动画**: 是否需要平滑的折叠/展开动画？
+| Phase | 工作量 | 优先级 |
+|-------|--------|--------|
+| Phase 1: 重构 Sidebar | 2h | P0 |
+| Phase 2: 移除 RightPanel，改为抽屉 | 1.5h | P0 |
+| Phase 3: 创建 DetailDrawer | 1h | P0 |
+| Phase 4: 主内容区适配 | 2h | P1 |
+
+**总计**: 约 6.5 小时