feat(desktop): DeerFlow visual redesign + stream hang fix + intelligence client

DeerFlow frontend visual overhaul:
- Card-style input box (white rounded card, textarea top, actions bottom)
- Dropdown mode selector (闪速/思考/Pro/Ultra with icons+descriptions)
- Colored quick-action chips (小惊喜/写作/研究/收集/学习)
- Minimal top bar (title + token count + export)
- Warm gray color system (#faf9f6 bg, #f5f4f1 sidebar, #e8e6e1 border)
- DeerFlow-style sidebar (新对话/对话/智能体 nav)
- Reasoning block, tool call chain, task progress visualization
- Streaming text, model selector, suggestion chips components
- Resizable artifact panel with drag handle
- Virtualized message list for 100+ messages

Bug fixes:
- Stream hang: GatewayClient onclose code 1000 now calls onComplete
- WebView2 textarea border: CSS !important override for UA styles
- Gateway stream event handling (response/phase/tool_call types)

Intelligence client:
- Unified client with fallback drivers (compactor/heartbeat/identity/memory/reflection)
- Gateway API types and type conversions

desktop/src/components/Sidebar.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import {
-  Bot, Zap, Package,
-  Search, ChevronRight, X
+  SquarePen, MessageSquare, Bot, Search, X, Settings
 } from 'lucide-react';
+import { ConversationList } from './ConversationList';
 import { CloneManager } from './CloneManager';
-import { useConfigStore } from '../store/configStore';
+import { useChatStore } from '../store/chatStore';
 import { containerVariants, defaultTransition } from '../lib/animations';
 
 export type MainViewType = 'chat' | 'automation' | 'skills';
@@ -16,86 +16,81 @@ interface SidebarProps {
   onNewChat?: () => void;
 }
 
-type Tab = 'chat' | 'clones' | 'automation' | 'skills';
-
-// 导航项配置 - WorkBuddy 风格
-const NAV_ITEMS: {
-  key: Tab;
-  label: string;
-  icon: React.ComponentType<{ className?: string }>;
-  mainView?: MainViewType;
-}[] = [
-  { key: 'clones', label: '分身', icon: Bot },
-  { key: 'automation', label: '自动化', icon: Zap, mainView: 'automation' },
-  { key: 'skills', label: '技能', icon: Package, mainView: 'skills' },
-];
+type Tab = 'conversations' | 'clones';
 
 export function Sidebar({
   onOpenSettings,
   onMainViewChange,
 }: Omit<SidebarProps, 'onNewChat'>) {
-  const [activeTab, setActiveTab] = useState<Tab>('clones');
+  const [activeTab, setActiveTab] = useState<Tab>('conversations');
   const [searchQuery, setSearchQuery] = useState('');
-  const userName = useConfigStore((state) => state.quickConfig?.userName) || '用户7141';
+  const newConversation = useChatStore((s) => s.newConversation);
 
-  const handleNavClick = (key: Tab, mainView?: MainViewType) => {
-    setActiveTab(key);
-    if (mainView && onMainViewChange) {
-      onMainViewChange(mainView);
-    } else if (onMainViewChange) {
-      onMainViewChange('chat');
+  const handleNewConversation = () => {
+    newConversation();
+    onMainViewChange?.('chat');
+  };
+
+  const handleNavClick = (tab: Tab) => {
+    setActiveTab(tab);
+    if (tab === 'clones') {
+      onMainViewChange?.('chat');
+    } else {
+      onMainViewChange?.('chat');
     }
   };
 
   return (
-    <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-gray-400 focus:ring-1 focus:ring-gray-400 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>
+    <aside className="w-64 sidebar-bg border-r border-[#e8e6e1] dark:border-gray-800 flex flex-col h-full shrink-0">
+      {/* Logo area */}
+      <div className="h-14 flex items-center px-4 border-b border-[#e8e6e1]/50 dark:border-gray-800">
+        <span className="text-lg font-semibold tracking-tight text-gray-900 dark:text-gray-100">ZCLAW</span>
+        <button
+          onClick={handleNewConversation}
+          className="ml-auto p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-md transition-colors text-gray-600 dark:text-gray-400"
+          title="新对话"
+        >
+          <SquarePen className="w-4 h-4" />
+        </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>
+      {/* Main Nav — DeerFlow-style: new chat / conversations / agents */}
+      <div className="p-2 space-y-1">
+        <button
+          onClick={handleNewConversation}
+          className="w-full flex items-center gap-3 px-3 py-2 rounded-lg bg-black/5 dark:bg-white/5 text-sm font-medium text-gray-900 dark:text-gray-100"
+        >
+          <SquarePen className="w-4 h-4" />
+          新对话
+        </button>
+        <button
+          onClick={() => handleNavClick('conversations')}
+          className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors ${
+            activeTab === 'conversations'
+              ? 'bg-black/5 dark:bg-white/5 font-medium text-gray-900 dark:text-gray-100'
+              : 'text-gray-600 dark:text-gray-400 hover:bg-black/5 dark:hover:bg-white/5'
+          }`}
+        >
+          <MessageSquare className="w-4 h-4" />
+          对话
+        </button>
+        <button
+          onClick={() => handleNavClick('clones')}
+          className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors ${
+            activeTab === 'clones'
+              ? 'bg-black/5 dark:bg-white/5 font-medium text-gray-900 dark:text-gray-100'
+              : 'text-gray-600 dark:text-gray-400 hover:bg-black/5 dark:hover:bg-white/5'
+          }`}
+        >
+          <Bot className="w-4 h-4" />
+          智能体
+        </button>
+      </div>
 
-      {/* 分隔线 */}
-      <div className="my-3 mx-3 border-t border-gray-100 dark:border-gray-800" />
+      {/* Divider */}
+      <div className="mx-3 border-t border-[#e8e6e1]/50 dark:border-gray-800" />
 
-      {/* 内容区域 - 只显示分身内容，自动化和技能在主内容区显示 */}
+      {/* Content area */}
       <div className="flex-1 overflow-hidden">
         <AnimatePresence mode="wait">
           <motion.div
@@ -107,27 +102,45 @@ export function Sidebar({
             transition={defaultTransition}
             className="h-full overflow-y-auto"
           >
+            {activeTab === 'conversations' && (
+              <div className="p-2">
+                {/* Search in conversations */}
+                <div className="relative mb-2">
+                  <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-1.5 bg-white/60 dark:bg-gray-800 border border-[#e8e6e1] dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:border-gray-400 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"
+                    >
+                      <X className="w-3 h-3" />
+                    </button>
+                  )}
+                </div>
+                <ConversationList />
+              </div>
+            )}
             {activeTab === 'clones' && <CloneManager />}
-            {/* skills 和 automation 不在侧边栏显示内容，由主内容区显示 */}
           </motion.div>
         </AnimatePresence>
       </div>
 
-      {/* 底部用户栏 */}
-      <div className="p-3 border-t border-gray-200 dark:border-gray-700">
+      {/* Bottom user bar */}
+      <div className="p-2 border-t border-[#e8e6e1] dark:border-gray-700">
         <button
           onClick={onOpenSettings}
           aria-label="打开设置"
-          title="设置"
-          className="flex items-center gap-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 p-2 rounded-lg transition-colors"
+          title="设置和更多"
+          className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 dark:text-gray-400 hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
         >
-          <div className="w-8 h-8 bg-gray-600 rounded-full flex items-center justify-center text-white font-bold shadow-sm">
-            {userName?.charAt(0) || '用'}
-          </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" />
+          <Settings className="w-4 h-4" />
+          <span>设置和更多</span>
         </button>
       </div>
     </aside>