feat(automation): complete unified automation system redesign

Phase 4 completion:
- Add ApprovalQueue component for managing pending approvals
- Add ExecutionResult component for displaying hand/workflow results
- Update Sidebar navigation to use unified AutomationPanel
- Replace separate 'hands' and 'workflow' tabs with single 'automation' tab
- Fix TypeScript type safety issues with unknown types in JSX expressions

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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>
   );