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