feat(ui): enhance UI with animations, dark mode support and and improved components

- Add framer-motion page transitions and AnimatePresence support
- Add dark mode support across all components
- Create reusable UI components (Button, Badge, Card, EmptyState, Input, Toast, Skeleton)
- Add CSS custom properties for consistent theming
- Add animation variants and utility functions
- Improve ChatArea, Sidebar, TriggersPanel with animations

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

desktop/package.json

@@ -22,9 +22,13 @@
   "dependencies": {
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-opener": "^2",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.36.0",
     "lucide-react": "^0.577.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "smol-toml": "^1.6.0",
+    "tailwind-merge": "^3.5.0",
     "tweetnacl": "^1.0.3",
     "zustand": "^5.0.11"
   },

desktop/pnpm-lock.yaml

@@ -14,6 +14,12 @@ importers:
       '@tauri-apps/plugin-opener':
         specifier: ^2
         version: 2.5.3
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      framer-motion:
+        specifier: ^12.36.0
+        version: 12.36.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       lucide-react:
         specifier: ^0.577.0
         version: 0.577.0(react@19.2.4)
@@ -23,6 +29,12 @@ importers:
       react-dom:
         specifier: ^19.1.0
         version: 19.2.4(react@19.2.4)
+      smol-toml:
+        specifier: ^1.6.0
+        version: 1.6.0
+      tailwind-merge:
+        specifier: ^3.5.0
+        version: 3.5.0
       tweetnacl:
         specifier: ^1.0.3
         version: 1.0.3
@@ -684,6 +696,10 @@ packages:
   caniuse-lite@1.0.30001777:
     resolution: {integrity: sha512-tmN+fJxroPndC74efCdp12j+0rk0RHwV5Jwa1zWaFVyw2ZxAuPeG8ZgWC3Wz7uSjT3qMRQ5XHZ4COgQmsCMJAQ==}
 
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
@@ -731,6 +747,20 @@ packages:
   fraction.js@5.3.4:
     resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
 
+  framer-motion@12.36.0:
+    resolution: {integrity: sha512-4PqYHAT7gev0ke0wos+PyrcFxI0HScjm3asgU8nSYa8YzJFuwgIvdj3/s3ZaxLq0bUSboIn19A2WS/MHwLCvfw==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -845,6 +875,12 @@ packages:
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
+  motion-dom@12.36.0:
+    resolution: {integrity: sha512-Ep1pq8P88rGJ75om8lTCA13zqd7ywPGwCqwuWwin6BKc0hMLkVfcS6qKlRqEo2+t0DwoUcgGJfXwaiFn4AOcQA==}
+
+  motion-utils@12.36.0:
+    resolution: {integrity: sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg==}
+
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -895,10 +931,17 @@ packages:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
 
+  smol-toml@1.6.0:
+    resolution: {integrity: sha512-4zemZi0HvTnYwLfrpk/CF9LOd9Lt87kAt50GnqhMpyF9U3poDAP2+iukq2bZsO/ufegbYehBkqINbsWxj4l4cw==}
+    engines: {node: '>= 18'}
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  tailwind-merge@3.5.0:
+    resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==}
+
   tailwindcss@4.2.1:
     resolution: {integrity: sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==}
 
@@ -910,6 +953,9 @@ packages:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
 
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
   tweetnacl@1.0.3:
     resolution: {integrity: sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw==}
 
@@ -1458,6 +1504,8 @@ snapshots:
 
   caniuse-lite@1.0.30001777: {}
 
+  clsx@2.1.1: {}
+
   convert-source-map@2.0.0: {}
 
   csstype@3.2.3: {}
@@ -1512,6 +1560,15 @@ snapshots:
 
   fraction.js@5.3.4: {}
 
+  framer-motion@12.36.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      motion-dom: 12.36.0
+      motion-utils: 12.36.0
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
   fsevents@2.3.3:
     optional: true
 
@@ -1588,6 +1645,12 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  motion-dom@12.36.0:
+    dependencies:
+      motion-utils: 12.36.0
+
+  motion-utils@12.36.0: {}
+
   ms@2.1.3: {}
 
   nanoid@3.3.11: {}
@@ -1650,8 +1713,12 @@ snapshots:
 
   semver@6.3.1: {}
 
+  smol-toml@1.6.0: {}
+
   source-map-js@1.2.1: {}
 
+  tailwind-merge@3.5.0: {}
+
   tailwindcss@4.2.1: {}
 
   tapable@2.3.0: {}
@@ -1661,6 +1728,8 @@ snapshots:
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
 
+  tslib@2.8.1: {}
+
   tweetnacl@1.0.3: {}
 
   typescript@5.8.3: {}

desktop/src/App.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 import './index.css';
 import { Sidebar, MainViewType } from './components/Sidebar';
 import { ChatArea } from './components/ChatArea';
@@ -10,6 +11,9 @@ import { TeamCollaborationView } from './components/TeamCollaborationView';
 import { useGatewayStore } from './store/gatewayStore';
 import { useTeamStore } from './store/teamStore';
 import { getStoredGatewayToken } from './lib/gateway-client';
+import { pageVariants, defaultTransition, fadeInVariants } from './lib/animations';
+import { Bot, Users } from 'lucide-react';
+import { EmptyState } from './components/ui';
 
 type View = 'main' | 'settings';
 
@@ -66,48 +70,51 @@ function App() {
       />
 
       {/* 中间区域 */}
-      <main className="flex-1 flex flex-col bg-white relative overflow-hidden">
-        {mainContentView === 'hands' && selectedHandId ? (
-          <HandTaskPanel
-            handId={selectedHandId}
-            onBack={() => setSelectedHandId(undefined)}
-          />
-        ) : mainContentView === 'hands' ? (
-          <div className="flex-1 flex items-center justify-center p-6">
-            <div className="text-center">
-              <div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                <span className="text-4xl">🤖</span>
-              </div>
-              <h3 className="text-lg font-semibold text-gray-700 mb-2">选择一个 Hand</h3>
-              <p className="text-sm text-gray-400 max-w-sm">
-                从左侧列表中选择一个自主能力包，查看其任务清单和执行结果。
-              </p>
-            </div>
-          </div>
-        ) : mainContentView === 'workflow' ? (
-          <div className="flex-1 overflow-y-auto">
-            <SchedulerPanel />
-          </div>
-        ) : mainContentView === 'team' ? (
-          activeTeam ? (
-            <TeamCollaborationView teamId={activeTeam.id} />
+      <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."
+              />
+            )
           ) : (
-            <div className="flex-1 flex items-center justify-center p-6">
-              <div className="text-center">
-                <div className="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                  <span className="text-4xl">👥</span>
-                </div>
-                <h3 className="text-lg font-semibold text-gray-700 mb-2">选择或创建团队</h3>
-                <p className="text-sm text-gray-400 max-w-sm">
-                  从左侧列表选择一个团队，或点击 + 创建新的多 Agent 协作团队。
-                </p>
-              </div>
-            </div>
-          )
-        ) : (
-          <ChatArea />
-        )}
-      </main>
+            <ChatArea />
+          )}
+        </motion.main>
+      </AnimatePresence>
 
       {/* 右侧边栏 */}
       <RightPanel />

desktop/src/components/ChatArea.tsx

@@ -1,7 +1,10 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 import { useChatStore, Message } from '../store/chatStore';
 import { useGatewayStore } from '../store/gatewayStore';
-import { Paperclip, ChevronDown, Terminal, SquarePen, ArrowUp } from 'lucide-react';
+import { Paperclip, ChevronDown, Terminal, SquarePen, ArrowUp, MessageSquare } from 'lucide-react';
+import { Button, EmptyState } from './ui';
+import { listItemVariants, defaultTransition, fadeInVariants } from '../lib/animations';
 
 const MODELS = ['glm-5', 'qwen3.5-plus', 'kimi-k2.5', 'minimax-m2.5'];
 
@@ -58,56 +61,84 @@ export function ChatArea() {
   return (
     <>
       {/* Header */}
-      <div className="h-14 border-b border-gray-100 flex items-center justify-between px-6 flex-shrink-0 bg-white">
+      <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">
-          <h2 className="font-semibold text-gray-900">{currentAgent?.name || 'ZCLAW'}</h2>
+          <h2 className="font-semibold text-gray-900 dark:text-gray-100">{currentAgent?.name || 'ZCLAW'}</h2>
           {isStreaming ? (
-            <span className="text-xs text-gray-400 flex items-center gap-1">
-              <span className="w-1.5 h-1.5 bg-gray-400 rounded-full thinking-dot"></span>
+            <span className="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1">
+              <span className="w-1.5 h-1.5 bg-gray-500 dark:bg-gray-400 rounded-full thinking-dot"></span>
               正在输入中
             </span>
           ) : (
-            <span className={`text-xs flex items-center gap-1 ${connected ? 'text-green-500' : 'text-gray-400'}`}>
-              <span className={`w-1.5 h-1.5 rounded-full ${connected ? 'bg-green-400' : 'bg-gray-300'}`}></span>
+            <span className={`text-xs flex items-center gap-1 ${connected ? 'text-green-500' : 'text-gray-500 dark:text-gray-400'}`}>
+              <span className={`w-1.5 h-1.5 rounded-full ${connected ? 'bg-green-400' : 'bg-gray-300 dark:bg-gray-600'}`}></span>
               {connected ? 'Gateway 已连接' : 'Gateway 未连接'}
             </span>
           )}
         </div>
         <div className="flex items-center gap-2">
           {messages.length > 0 && (
-            <button
+            <Button
+              variant="ghost"
+              size="sm"
               onClick={newConversation}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-gray-500 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors"
               title="新对话"
+              aria-label="开始新对话"
+              className="flex items-center gap-1.5 text-gray-500 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 hover:bg-orange-50 dark:hover:bg-orange-900/20"
             >
               <SquarePen className="w-3.5 h-3.5" />
               新对话
-            </button>
+            </Button>
           )}
         </div>
       </div>
 
       {/* Messages */}
-      <div ref={scrollRef} className="flex-1 overflow-y-auto custom-scrollbar p-6 space-y-6">
-        {messages.length === 0 && (
-          <div className="text-center text-gray-400 py-20">
-            <p className="text-lg mb-2">欢迎使用 ZCLAW 🦞</p>
-            <p className="text-sm">{connected ? '发送消息开始对话' : '请先在设置中连接 Gateway'}</p>
-          </div>
-        )}
+      <div ref={scrollRef} className="flex-1 overflow-y-auto custom-scrollbar p-6 space-y-6 bg-white dark:bg-gray-900">
+        <AnimatePresence mode="popLayout">
+          {messages.length === 0 && (
+            <motion.div
+              key="empty-state"
+              variants={fadeInVariants}
+              initial="initial"
+              animate="animate"
+              exit="exit"
+            >
+              <EmptyState
+                icon={<MessageSquare className="w-8 h-8" />}
+                title="欢迎使用 ZCLAW"
+                description={connected ? '发送消息开始对话' : '请先在设置中连接 Gateway'}
+              />
+            </motion.div>
+          )}
 
-        {messages.map((message) => (
-          <MessageBubble key={message.id} message={message} />
-        ))}
+          {messages.map((message) => (
+            <motion.div
+              key={message.id}
+              variants={listItemVariants}
+              initial="hidden"
+              animate="visible"
+              layout
+              transition={defaultTransition}
+            >
+              <MessageBubble message={message} />
+            </motion.div>
+          ))}
+        </AnimatePresence>
       </div>
 
       {/* Input */}
-      <div className="border-t border-gray-100 p-4 bg-white">
+      <div className="border-t border-gray-100 dark:border-gray-800 p-4 bg-white dark:bg-gray-900">
         <div className="max-w-4xl mx-auto">
-          <div className="relative flex items-end gap-2 bg-gray-50 rounded-2xl border border-gray-200 p-2 focus-within:border-orange-300 focus-within:ring-2 focus-within:ring-orange-100 transition-all">
-            <button className="p-2 text-gray-400 hover:text-gray-600 rounded-lg">
+          <div className="relative flex items-end gap-2 bg-gray-50 dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-2 focus-within:border-orange-300 dark:focus-within:border-orange-600 focus-within:ring-2 focus-within:ring-orange-100 dark:focus-within:ring-orange-900/30 transition-all">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="p-2 text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+              aria-label="添加附件"
+            >
               <Paperclip className="w-5 h-5" />
-            </button>
+            </Button>
             <div className="flex-1 py-1">
               <textarea
                 ref={textareaRef}
@@ -123,41 +154,48 @@ export function ChatArea() {
                 }
                 disabled={isStreaming || !connected}
                 rows={1}
-                className="w-full bg-transparent border-none focus:outline-none text-gray-700 placeholder-gray-400 disabled:opacity-50 resize-none leading-relaxed mt-1"
+                className="w-full bg-transparent border-none focus:outline-none text-gray-700 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 disabled:opacity-50 resize-none leading-relaxed mt-1"
                 style={{ minHeight: '24px', maxHeight: '160px' }}
               />
             </div>
             <div className="flex items-center gap-2 pr-2 pb-1 relative">
-              <button
+              <Button
+                variant="ghost"
+                size="sm"
                 onClick={() => setShowModelPicker(!showModelPicker)}
-                className="flex items-center gap-1 px-2 py-1 text-xs text-gray-500 hover:bg-gray-200 rounded-md transition-colors"
+                className="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
+                aria-label="选择模型"
+                aria-expanded={showModelPicker}
               >
                 <span>{currentModel}</span>
                 <ChevronDown className="w-3 h-3" />
-              </button>
+              </Button>
               {showModelPicker && (
-                <div className="absolute bottom-full right-8 mb-2 bg-white border border-gray-200 rounded-lg shadow-lg py-1 min-w-[160px] z-10">
+                <div className="absolute bottom-full right-8 mb-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg py-1 min-w-[160px] z-10">
                   {MODELS.map((model) => (
                     <button
                       key={model}
                       onClick={() => { setCurrentModel(model); setShowModelPicker(false); }}
-                      className={`w-full text-left px-3 py-2 text-xs hover:bg-gray-50 ${model === currentModel ? 'text-orange-600 font-medium' : 'text-gray-700'}`}
+                      className={`w-full text-left px-3 py-2 text-xs hover:bg-gray-50 dark:hover:bg-gray-700 ${model === currentModel ? 'text-orange-600 dark:text-orange-400 font-medium' : 'text-gray-700 dark:text-gray-300'}`}
                     >
                       {model}
                     </button>
                   ))}
                 </div>
               )}
-              <button
+              <Button
+                variant="primary"
+                size="sm"
                 onClick={handleSend}
                 disabled={isStreaming || !input.trim() || !connected}
-                className="w-8 h-8 bg-gray-900 text-white rounded-full flex items-center justify-center hover:bg-gray-800 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+                className="w-8 h-8 rounded-full p-0 flex items-center justify-center"
+                aria-label="发送消息"
               >
                 <ArrowUp className="w-4 h-4" />
-              </button>
+              </Button>
             </div>
           </div>
-          <div className="text-center mt-2 text-xs text-gray-400">
+          <div className="text-center mt-2 text-xs text-gray-500 dark:text-gray-400">
             Agent 在本地运行，内容由 AI 生成
           </div>
         </div>
@@ -229,7 +267,7 @@ function renderInline(text: string): React.ReactNode[] {
     } else if (match[5]) {
       // `code`
       parts.push(
-        <code key={parts.length} className="bg-gray-100 text-orange-700 px-1 py-0.5 rounded text-[0.85em] font-mono">
+        <code key={parts.length} className="bg-gray-100 dark:bg-gray-700 text-orange-700 dark:text-orange-400 px-1 py-0.5 rounded text-[0.85em] font-mono">
           {match[6]}
         </code>
       );
@@ -237,7 +275,7 @@ function renderInline(text: string): React.ReactNode[] {
       // [text](url)
       parts.push(
         <a key={parts.length} href={match[9]} target="_blank" rel="noopener noreferrer"
-          className="text-orange-600 underline hover:text-orange-700">{match[8]}</a>
+          className="text-orange-600 dark:text-orange-400 underline hover:text-orange-700 dark:hover:text-orange-300">{match[8]}</a>
       );
     }
 
@@ -254,16 +292,16 @@ function renderInline(text: string): React.ReactNode[] {
 function MessageBubble({ message }: { message: Message }) {
   if (message.role === 'tool') {
     return (
-      <div className="ml-12 bg-gray-50 border border-gray-200 rounded-lg p-3 text-xs font-mono">
-        <div className="flex items-center gap-2 text-gray-500 mb-1">
+      <div className="ml-12 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-3 text-xs font-mono">
+        <div className="flex items-center gap-2 text-gray-500 dark:text-gray-400 mb-1">
           <Terminal className="w-3.5 h-3.5" />
           <span className="font-semibold">{message.toolName || 'tool'}</span>
         </div>
         {message.toolInput && (
-          <pre className="text-gray-600 bg-white rounded p-2 mb-1 overflow-x-auto">{message.toolInput}</pre>
+          <pre className="text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-900 rounded p-2 mb-1 overflow-x-auto">{message.toolInput}</pre>
         )}
         {message.content && (
-          <pre className="text-green-700 bg-white rounded p-2 overflow-x-auto">{message.content}</pre>
+          <pre className="text-green-700 dark:text-green-400 bg-white dark:bg-gray-900 rounded p-2 overflow-x-auto">{message.content}</pre>
         )}
       </div>
     );
@@ -274,13 +312,13 @@ function MessageBubble({ message }: { message: Message }) {
   return (
     <div className={`flex gap-4 ${isUser ? 'justify-end' : ''}`}>
       <div
-        className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${isUser ? 'bg-gray-200 text-gray-600 order-last' : 'agent-avatar text-white'}`}
+        className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${isUser ? 'bg-gray-200 dark:bg-gray-600 text-gray-600 dark:text-gray-200 order-last' : 'agent-avatar text-white'}`}
       >
-        {isUser ? '用' : '🦞'}
+        {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'}`}>
+          <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 ? '' : '...')}

desktop/src/components/RightPanel.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
+import { motion } from 'framer-motion';
 import { getStoredGatewayUrl } from '../lib/gateway-client';
 import { useGatewayStore } from '../store/gatewayStore';
 import { toChatAgent, useChatStore } from '../store/chatStore';
@@ -6,6 +7,8 @@ import {
   Wifi, WifiOff, Bot, BarChart3, Plug, RefreshCw,
   MessageSquare, Cpu, FileText, User, Activity, FileCode
 } from 'lucide-react';
+import { cardHover, defaultTransition } from '../lib/animations';
+import { Button, Badge, EmptyState } from './ui';
 
 export function RightPanel() {
   const {
@@ -89,164 +92,205 @@ export function RightPanel() {
   const localTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone || '系统时区';
 
   return (
-    <aside className="w-80 bg-white border-l border-gray-200 flex flex-col flex-shrink-0">
+    <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 flex items-center justify-between px-4 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">
+          <div className="flex items-center gap-1 text-gray-600 dark:text-gray-300">
             <BarChart3 className="w-4 h-4" />
             <span className="font-medium">{topMetricValue}</span>
           </div>
-          <span className="text-xs text-gray-400">{topMetricLabel}</span>
+          <span className="text-xs text-gray-500 dark:text-gray-400">{topMetricLabel}</span>
         </div>
-        <div className="flex items-center gap-2 text-gray-500">
-          <button
+        <div className="flex items-center gap-2 text-gray-500 dark:text-gray-400" role="tablist">
+          <Button
+            variant={activeTab === 'status' ? 'secondary' : 'ghost'}
+            size="sm"
             onClick={() => setActiveTab('status')}
-            className={`flex items-center gap-1 text-xs px-2 py-1 rounded ${activeTab === 'status' ? 'text-gray-900 bg-gray-100' : 'text-gray-400 hover:text-gray-700'}`}
-            title="状态"
+            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
+          </Button>
+          <Button
+            variant={activeTab === 'files' ? 'secondary' : 'ghost'}
+            size="sm"
             onClick={() => setActiveTab('files')}
-            className={`flex items-center gap-1 text-xs px-2 py-1 rounded ${activeTab === 'files' ? 'text-gray-900 bg-gray-100' : 'text-gray-400 hover:text-gray-700'}`}
-            title="文件"
+            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
+          </Button>
+          <Button
+            variant={activeTab === 'agent' ? 'secondary' : 'ghost'}
+            size="sm"
             onClick={() => setActiveTab('agent')}
-            className={`flex items-center gap-1 text-xs px-2 py-1 rounded ${activeTab === 'agent' ? 'text-gray-900 bg-gray-100' : 'text-gray-400 hover:text-gray-700'}`}
+            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>
         </div>
       </div>
 
       <div className="flex-1 overflow-y-auto custom-scrollbar p-4 space-y-4">
         {activeTab === 'agent' ? (
           <div className="space-y-4">
-            <div className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm">
+            <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-start justify-between gap-3">
                 <div className="flex items-center gap-3">
                   <div className="w-12 h-12 rounded-full bg-gradient-to-br from-cyan-400 to-blue-500 flex items-center justify-center text-white text-lg font-semibold">
                     {(selectedClone?.nickname || currentAgent?.name || 'Z').slice(0, 1)}
                   </div>
                   <div>
-                    <div className="text-base font-semibold text-gray-900">{selectedClone?.name || currentAgent?.name || 'ZCLAW'}</div>
-                    <div className="text-sm text-gray-500">{selectedClone?.role || 'AI coworker'}</div>
+                    <div className="text-base font-semibold text-gray-900 dark:text-gray-100">{selectedClone?.name || currentAgent?.name || 'ZCLAW'}</div>
+                    <div className="text-sm text-gray-500 dark:text-gray-400">{selectedClone?.role || 'AI coworker'}</div>
                   </div>
                 </div>
                 {selectedClone ? (
                   isEditingAgent ? (
                     <div className="flex gap-2">
-                      <button
+                      <Button
+                        variant="outline"
+                        size="sm"
                         onClick={handleCancelEdit}
-                        className="text-xs border border-gray-200 rounded-lg px-3 py-1.5 hover:bg-gray-50 transition-colors"
+                        aria-label="Cancel edit"
                       >
-                        取消
-                      </button>
-                      <button
+                        Cancel
+                      </Button>
+                      <Button
+                        variant="primary"
+                        size="sm"
                         onClick={() => { handleSaveAgent().catch(() => {}); }}
-                        className="text-xs bg-orange-500 text-white rounded-lg px-3 py-1.5 hover:bg-orange-600 transition-colors"
+                        aria-label="Save edit"
                       >
-                        保存
-                      </button>
+                        Save
+                      </Button>
                     </div>
                   ) : (
-                    <button
+                    <Button
+                      variant="outline"
+                      size="sm"
                       onClick={handleStartEdit}
-                      className="text-xs border border-gray-200 rounded-lg px-3 py-1.5 hover:bg-gray-50 transition-colors"
+                      aria-label="Edit Agent"
                     >
-                      编辑
-                    </button>
+                      Edit
+                    </Button>
                   )
                 ) : null}
               </div>
-            </div>
+            </motion.div>
 
-            <div className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm">
-              <div className="text-sm font-semibold text-gray-900 mb-3">关于我</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="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-3">About Me</div>
               {isEditingAgent && agentDraft ? (
                 <div className="space-y-2">
-                  <AgentInput label="名称" value={agentDraft.name} onChange={(value) => setAgentDraft({ ...agentDraft, name: value })} />
-                  <AgentInput label="角色" value={agentDraft.role} onChange={(value) => setAgentDraft({ ...agentDraft, role: value })} />
-                  <AgentInput label="昵称" value={agentDraft.nickname} onChange={(value) => setAgentDraft({ ...agentDraft, nickname: value })} />
-                  <AgentInput label="模型" value={agentDraft.model} onChange={(value) => setAgentDraft({ ...agentDraft, model: value })} />
+                  <AgentInput label="Name" value={agentDraft.name} onChange={(value) => setAgentDraft({ ...agentDraft, name: value })} />
+                  <AgentInput label="Role" value={agentDraft.role} onChange={(value) => setAgentDraft({ ...agentDraft, role: value })} />
+                  <AgentInput label="Nickname" value={agentDraft.nickname} onChange={(value) => setAgentDraft({ ...agentDraft, nickname: value })} />
+                  <AgentInput label="Model" value={agentDraft.model} onChange={(value) => setAgentDraft({ ...agentDraft, model: value })} />
                 </div>
               ) : (
                 <div className="space-y-3 text-sm">
-                  <AgentRow label="角色" value={selectedClone?.role || '-'} />
-                  <AgentRow label="昵称" value={selectedClone?.nickname || '-'} />
-                  <AgentRow label="模型" value={selectedClone?.model || currentModel} />
+                  <AgentRow label="Role" value={selectedClone?.role || '-'} />
+                  <AgentRow label="Nickname" value={selectedClone?.nickname || '-'} />
+                  <AgentRow label="Model" value={selectedClone?.model || currentModel} />
                   <AgentRow label="Emoji" value={selectedClone?.nickname?.slice(0, 1) || '🦞'} />
                 </div>
               )}
-            </div>
+            </motion.div>
 
-            <div className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm">
-              <div className="text-sm font-semibold text-gray-900 mb-3">我眼中的你</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="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-3">You in My Eyes</div>
               {isEditingAgent && agentDraft ? (
                 <div className="space-y-2">
-                  <AgentInput label="名字" value={agentDraft.userName} onChange={(value) => setAgentDraft({ ...agentDraft, userName: value })} />
-                  <AgentInput label="角色" value={agentDraft.userRole} onChange={(value) => setAgentDraft({ ...agentDraft, userRole: value })} />
-                  <AgentInput label="场景" value={agentDraft.scenarios} onChange={(value) => setAgentDraft({ ...agentDraft, scenarios: value })} placeholder="coding, research" />
-                  <AgentInput label="工作目录" value={agentDraft.workspaceDir} onChange={(value) => setAgentDraft({ ...agentDraft, workspaceDir: value })} />
-                  <AgentToggle label="文件限制" checked={agentDraft.restrictFiles} onChange={(value) => setAgentDraft({ ...agentDraft, restrictFiles: value })} />
-                  <AgentToggle label="优化计划" checked={agentDraft.privacyOptIn} onChange={(value) => setAgentDraft({ ...agentDraft, privacyOptIn: value })} />
+                  <AgentInput label="Name" value={agentDraft.userName} onChange={(value) => setAgentDraft({ ...agentDraft, userName: value })} />
+                  <AgentInput label="Role" value={agentDraft.userRole} onChange={(value) => setAgentDraft({ ...agentDraft, userRole: value })} />
+                  <AgentInput label="Scenarios" value={agentDraft.scenarios} onChange={(value) => setAgentDraft({ ...agentDraft, scenarios: value })} placeholder="coding, research" />
+                  <AgentInput label="Workspace" value={agentDraft.workspaceDir} onChange={(value) => setAgentDraft({ ...agentDraft, workspaceDir: value })} />
+                  <AgentToggle label="File Restriction" checked={agentDraft.restrictFiles} onChange={(value) => setAgentDraft({ ...agentDraft, restrictFiles: value })} />
+                  <AgentToggle label="Opt-in Program" checked={agentDraft.privacyOptIn} onChange={(value) => setAgentDraft({ ...agentDraft, privacyOptIn: value })} />
                 </div>
               ) : (
                 <div className="space-y-3 text-sm">
-                  <AgentRow label="名字" value={userNameDisplay} />
-                  <AgentRow label="称呼" value={userAddressing} />
-                  <AgentRow label="时区" value={localTimezone} />
+                  <AgentRow label="Name" value={userNameDisplay} />
+                  <AgentRow label="Addressing" value={userAddressing} />
+                  <AgentRow label="Timezone" value={localTimezone} />
                   <div className="flex gap-4">
-                    <div className="w-16 text-gray-400">专注于</div>
+                    <div className="w-16 text-gray-500 dark:text-gray-400">Focus</div>
                     <div className="flex-1 flex flex-wrap gap-2">
                       {focusAreas.map((item) => (
-                        <span key={item} className="px-2 py-1 rounded-full bg-gray-100 text-xs text-gray-600">{item}</span>
+                        <Badge key={item} variant="default">{item}</Badge>
                       ))}
                     </div>
                   </div>
-                  <AgentRow label="工作目录" value={selectedClone?.workspaceDir || workspaceInfo?.path || '~/.openfang/zclaw-workspace'} />
-                  <AgentRow label="解析目录" value={selectedClone?.workspaceResolvedPath || workspaceInfo?.resolvedPath || '-'} />
-                  <AgentRow label="文件限制" value={selectedClone?.restrictFiles ? '已开启' : '未开启'} />
-                  <AgentRow label="优化计划" value={selectedClone?.privacyOptIn ? '已加入' : '未加入'} />
+                  <AgentRow label="Workspace" value={selectedClone?.workspaceDir || workspaceInfo?.path || '~/.openfang/zclaw-workspace'} />
+                  <AgentRow label="Resolved" value={selectedClone?.workspaceResolvedPath || workspaceInfo?.resolvedPath || '-'} />
+                  <AgentRow label="File Restriction" value={selectedClone?.restrictFiles ? 'Enabled' : 'Disabled'} />
+                  <AgentRow label="Opt-in" value={selectedClone?.privacyOptIn ? 'Joined' : 'Not joined'} />
                 </div>
               )}
-            </div>
+            </motion.div>
 
-            <div className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm">
+            <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">
-                <div className="text-sm font-semibold text-gray-900">Bootstrap 文件</div>
-                <span className={`text-xs ${selectedClone?.bootstrapReady ? 'text-green-600' : 'text-gray-400'}`}>
-                  {selectedClone?.bootstrapReady ? '已生成' : '未生成'}
-                </span>
+                <div className="text-sm font-semibold text-gray-900 dark:text-gray-100">Bootstrap Files</div>
+                <Badge variant={selectedClone?.bootstrapReady ? 'success' : 'default'}>
+                  {selectedClone?.bootstrapReady ? 'Generated' : 'Not generated'}
+                </Badge>
               </div>
               <div className="space-y-2 text-sm">
                 {bootstrapFiles.length > 0 ? bootstrapFiles.map((file) => (
-                  <div key={file.name} className="rounded-lg border border-gray-100 bg-gray-50 px-3 py-2">
+                  <div key={file.name} className="rounded-lg border border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50 px-3 py-2">
                     <div className="flex items-center justify-between gap-3">
-                      <span className="font-medium text-gray-800">{file.name}</span>
-                      <span className={`text-xs ${file.exists ? 'text-green-600' : 'text-red-500'}`}>
-                        {file.exists ? '存在' : '缺失'}
-                      </span>
+                      <span className="font-medium text-gray-800 dark:text-gray-200">{file.name}</span>
+                      <Badge variant={file.exists ? 'success' : 'error'}>
+                        {file.exists ? 'Exists' : 'Missing'}
+                      </Badge>
                     </div>
-                    <div className="mt-1 text-xs text-gray-500 break-all">{file.path}</div>
+                    <div className="mt-1 text-xs text-gray-500 dark:text-gray-400 break-all">{file.path}</div>
                   </div>
                 )) : (
-                  <p className="text-sm text-gray-400">当前 Agent 尚未生成 bootstrap 文件。</p>
+                  <p className="text-sm text-gray-500 dark:text-gray-400">No bootstrap files generated for this Agent.</p>
                 )}
               </div>
-            </div>
+            </motion.div>
           </div>
         ) : activeTab === 'files' ? (
           <div className="space-y-4">
             {/* 对话输出文件 */}
-            <div className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm">
+            <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 flex items-center gap-2">
+                <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>
@@ -258,18 +302,18 @@ export function RightPanel() {
                       {msg.files!.map((file, fileIdx) => (
                         <div
                           key={`${msgIdx}-${fileIdx}`}
-                          className="flex items-center gap-2 px-3 py-2 bg-gray-50 rounded-lg text-sm hover:bg-gray-100 cursor-pointer transition-colors"
+                          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-400 flex-shrink-0" />
+                          <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 truncate">{file.name}</div>
+                            <div className="text-gray-700 dark:text-gray-200 truncate">{file.name}</div>
                             {file.path && (
-                              <div className="text-xs text-gray-400 truncate">{file.path}</div>
+                              <div className="text-xs text-gray-500 dark:text-gray-400 truncate">{file.path}</div>
                             )}
                           </div>
                           {file.size && (
-                            <span className="text-xs text-gray-400 flex-shrink-0">
+                            <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`}
@@ -281,18 +325,23 @@ export function RightPanel() {
                   ))}
                 </div>
               ) : (
-                <div className="text-center py-8">
-                  <FileCode className="w-12 h-12 text-gray-200 mx-auto mb-3" />
-                  <p className="text-sm text-gray-400">对话中暂无输出文件</p>
-                  <p className="text-xs text-gray-300 mt-1">文件将在 AI 工具调用时显示</p>
-                </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"
+                />
               )}
-            </div>
+            </motion.div>
 
             {/* 代码块 */}
-            <div className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm">
+            <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">代码片段</h3>
+                <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">
@@ -300,15 +349,13 @@ export function RightPanel() {
                     msg.codeBlocks!.map((block, blockIdx) => (
                       <div
                         key={`${msgIdx}-${blockIdx}`}
-                        className="px-3 py-2 bg-gray-50 rounded-lg text-sm"
+                        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">
-                          <span className="text-xs px-1.5 py-0.5 bg-gray-200 rounded text-gray-600">
-                            {block.language || 'code'}
-                          </span>
-                          <span className="text-gray-700 truncate">{block.filename || '未命名'}</span>
+                          <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 overflow-x-auto max-h-20">
+                        <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>
@@ -316,33 +363,40 @@ export function RightPanel() {
                   ).slice(0, 5)}
                 </div>
               ) : (
-                <p className="text-sm text-gray-400 text-center py-4">对话中暂无代码片段</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400 text-center py-4">No code snippets in conversation</p>
               )}
-            </div>
+            </motion.div>
           </div>
         ) : (
           <>
         {/* Gateway 连接状态 */}
-        <div className={`rounded-lg border p-3 ${connected ? 'bg-green-50 border-green-200' : 'bg-gray-50 border-gray-200'}`}>
+        <motion.div
+          whileHover={cardHover}
+          transition={defaultTransition}
+          className={`rounded-lg border p-3 ${connected ? 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800' : 'bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700'}`}
+        >
           <div className="flex items-center justify-between mb-2">
             <div className="flex items-center gap-2">
               {connected ? (
-                <Wifi className="w-4 h-4 text-green-600" />
+                <Wifi className="w-4 h-4 text-green-600 dark:text-green-400" />
               ) : (
-                <WifiOff className="w-4 h-4 text-gray-400" />
+                <WifiOff className="w-4 h-4 text-gray-500 dark:text-gray-400" />
               )}
-              <span className={`text-xs font-semibold ${connected ? 'text-green-700' : 'text-gray-600'}`}>
-                Gateway {connected ? '已连接' : connectionState === 'connecting' ? '连接中...' : connectionState === 'reconnecting' ? '重连中...' : '未连接'}
-              </span>
+              <Badge variant={connected ? 'success' : 'default'}>
+                Gateway {connected ? 'Connected' : connectionState === 'connecting' ? 'Connecting...' : connectionState === 'reconnecting' ? 'Reconnecting...' : 'Disconnected'}
+              </Badge>
             </div>
             {connected && (
-              <button
+              <Button
+                variant="ghost"
+                size="sm"
                 onClick={() => { loadUsageStats(); loadPluginStatus(); loadClones(); }}
-                className="p-1 text-gray-400 hover:text-orange-500 rounded transition-colors"
-                title="刷新数据"
+                className="p-1 text-gray-500 hover:text-orange-500"
+                title="Refresh data"
+                aria-label="Refresh data"
               >
                 <RefreshCw className="w-3.5 h-3.5" />
-              </button>
+              </Button>
             )}
           </div>
           <div className="space-y-1 text-xs">
@@ -362,20 +416,28 @@ export function RightPanel() {
             </div>
           </div>
           {!connected && connectionState !== 'connecting' && (
-            <button
-              onClick={handleReconnect}
-              className="mt-2 w-full text-xs bg-orange-500 text-white rounded py-1.5 hover:bg-orange-600 transition-colors"
-            >
-              连接 Gateway
-            </button>
+            <div className="mt-2">
+              <Button
+                variant="primary"
+                size="sm"
+                onClick={handleReconnect}
+                className="w-full"
+              >
+                Connect Gateway
+              </Button>
+            </div>
           )}
           {error && (
             <p className="mt-2 text-xs text-red-500 truncate" title={error}>{error}</p>
           )}
-        </div>
+        </motion.div>
 
         {/* 当前会话 */}
-        <div className="bg-gray-50 rounded-lg border border-gray-100 p-3">
+        <motion.div
+          whileHover={cardHover}
+          transition={defaultTransition}
+          className="bg-gray-50 rounded-lg border border-gray-100 p-3"
+        >
           <h3 className="text-xs font-semibold text-gray-700 mb-2 flex items-center gap-1.5">
             <MessageSquare className="w-3.5 h-3.5" />
             当前会话
@@ -398,10 +460,14 @@ export function RightPanel() {
               <span className="font-medium text-orange-600">{messages.length}</span>
             </div>
           </div>
-        </div>
+        </motion.div>
 
         {/* 分身 */}
-        <div className="bg-gray-50 rounded-lg border border-gray-100 p-3">
+        <motion.div
+          whileHover={cardHover}
+          transition={defaultTransition}
+          className="bg-gray-50 rounded-lg border border-gray-100 p-3"
+        >
           <h3 className="text-xs font-semibold text-gray-700 mb-2 flex items-center gap-1.5">
             <Bot className="w-3.5 h-3.5" />
             分身状态
@@ -417,19 +483,23 @@ export function RightPanel() {
                 </div>
               ))}
               {clones.length > 5 && (
-                <p className="text-xs text-gray-400">+{clones.length - 5} 个分身</p>
+                <p className="text-xs text-gray-500">+{clones.length - 5} 个分身</p>
               )}
             </div>
           ) : (
-            <p className="text-xs text-gray-400">
+            <p className="text-xs text-gray-500">
               {connected ? '暂无分身，在左侧栏创建' : '连接后可用'}
             </p>
           )}
-        </div>
+        </motion.div>
 
         {/* 用量统计 */}
         {usageStats && (
-          <div className="bg-gray-50 rounded-lg border border-gray-100 p-3">
+          <motion.div
+            whileHover={cardHover}
+            transition={defaultTransition}
+            className="bg-gray-50 rounded-lg border border-gray-100 p-3"
+          >
             <h3 className="text-xs font-semibold text-gray-700 mb-2 flex items-center gap-1.5">
               <BarChart3 className="w-3.5 h-3.5" />
               用量统计
@@ -448,12 +518,16 @@ export function RightPanel() {
                 <span className="font-medium text-gray-900">{usageStats.totalTokens.toLocaleString()}</span>
               </div>
             </div>
-          </div>
+          </motion.div>
         )}
 
         {/* 插件状态 */}
         {pluginStatus.length > 0 && (
-          <div className="bg-gray-50 rounded-lg border border-gray-100 p-3">
+          <motion.div
+            whileHover={cardHover}
+            transition={defaultTransition}
+            className="bg-gray-50 rounded-lg border border-gray-100 p-3"
+          >
             <h3 className="text-xs font-semibold text-gray-700 mb-2 flex items-center gap-1.5">
               <Plug className="w-3.5 h-3.5" />
               插件 ({pluginStatus.length})
@@ -462,17 +536,21 @@ export function RightPanel() {
               {pluginStatus.map((p: any, i: number) => (
                 <div key={i} className="flex justify-between">
                   <span className="text-gray-600 truncate">{p.name || p.id}</span>
-                  <span className={p.status === 'active' ? 'text-green-600' : 'text-gray-400'}>
+                  <span className={p.status === 'active' ? 'text-green-600' : 'text-gray-500'}>
                     {p.status === 'active' ? '运行中' : '已停止'}
                   </span>
                 </div>
               ))}
             </div>
-          </div>
+          </motion.div>
         )}
 
         {/* 系统信息 */}
-        <div className="bg-gray-50 rounded-lg border border-gray-100 p-3">
+        <motion.div
+          whileHover={cardHover}
+          transition={defaultTransition}
+          className="bg-gray-50 rounded-lg border border-gray-100 p-3"
+        >
           <h3 className="text-xs font-semibold text-gray-700 mb-2 flex items-center gap-1.5">
             <Cpu className="w-3.5 h-3.5" />
             运行概览
@@ -495,9 +573,7 @@ export function RightPanel() {
               <span className="text-gray-700">{pluginStatus.length}</span>
             </div>
           </div>
-        </div>
-          </>
-        )}
+        </motion.div>
       </div>
     </aside>
   );
@@ -506,7 +582,7 @@ export function RightPanel() {
 function AgentRow({ label, value }: { label: string; value: string }) {
   return (
     <div className="flex gap-4">
-      <div className="w-16 text-gray-400">{label}</div>
+      <div className="w-16 text-gray-500">{label}</div>
       <div className="flex-1 text-gray-700 break-all">{value}</div>
     </div>
   );
@@ -567,7 +643,7 @@ function AgentInput({
 }) {
   return (
     <label className="block">
-      <div className="text-xs text-gray-400 mb-1">{label}</div>
+      <div className="text-xs text-gray-500 mb-1">{label}</div>
       <input
         type="text"
         value={value}

desktop/src/components/Sidebar.tsx

@@ -1,10 +1,13 @@
 import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 import { Settings, Users, Bot, GitBranch, MessageSquare } from 'lucide-react';
 import { CloneManager } from './CloneManager';
 import { HandList } from './HandList';
 import { TaskList } from './TaskList';
 import { TeamList } from './TeamList';
 import { useGatewayStore } from '../store/gatewayStore';
+import { Button } from './ui';
+import { containerVariants, defaultTransition } from '../lib/animations';
 
 export type MainViewType = 'chat' | 'hands' | 'workflow' | 'team';
 
@@ -55,11 +58,14 @@ 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">
+      <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'
@@ -75,32 +81,50 @@ export function Sidebar({
 
       {/* Tab content */}
       <div className="flex-1 overflow-hidden">
-        {activeTab === 'clones' && <CloneManager />}
-        {activeTab === 'hands' && (
-          <HandList
-            selectedHandId={selectedHandId}
-            onSelectHand={handleSelectHand}
-          />
-        )}
-        {activeTab === 'workflow' && <TaskList />}
-        {activeTab === 'team' && (
-          <TeamList
-            selectedTeamId={selectedTeamId}
-            onSelectTeam={onSelectTeam}
-          />
-        )}
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={activeTab}
+            variants={containerVariants}
+            initial="hidden"
+            animate="visible"
+            exit="exit"
+            transition={defaultTransition}
+            className="h-full"
+          >
+            {activeTab === 'clones' && <CloneManager />}
+            {activeTab === 'hands' && (
+              <HandList
+                selectedHandId={selectedHandId}
+                onSelectHand={handleSelectHand}
+              />
+            )}
+            {activeTab === 'workflow' && <TaskList />}
+            {activeTab === 'team' && (
+              <TeamList
+                selectedTeamId={selectedTeamId}
+                onSelectTeam={onSelectTeam}
+              />
+            )}
+          </motion.div>
+        </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">
+          <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">
             {userName?.charAt(0) || '用'}
           </div>
-          <span className="font-medium text-gray-700 dark:text-gray-300">{userName}</span>
-          <button className="ml-auto text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" onClick={onOpenSettings}>
+          <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>
+          </Button>
         </div>
       </div>
     </aside>

desktop/src/components/TriggersPanel.tsx

@@ -15,8 +15,6 @@ import {
   Globe,
   Bell,
   MessageSquare,
-  AlertCircle,
-  CheckCircle2,
   X,
 } from 'lucide-react';
 

desktop/src/components/ui/Badge.tsx

@@ -0,0 +1,32 @@
+import { cn } from '../../lib/utils';
+
+type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+
+interface BadgeProps {
+  children: React.ReactNode;
+  variant?: BadgeVariant;
+  className?: string;
+}
+
+const variantStyles: Record<BadgeVariant, string> = {
+  default: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300',
+  primary: 'bg-primary-light text-primary',
+  success: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
+  warning: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
+  error: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
+  info: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
+};
+
+export function Badge({ children, variant = 'default', className }: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium',
+        variantStyles[variant],
+        className
+      )}
+    >
+      {children}
+    </span>
+  );
+}

desktop/src/components/ui/Button.tsx

@@ -0,0 +1,54 @@
+import { forwardRef } from 'react';
+import { motion, HTMLMotionProps } from 'framer-motion';
+import { cn } from '../../lib/utils';
+import { Loader2 } from 'lucide-react';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface ButtonProps extends Omit<HTMLMotionProps<'button'>, 'children'> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+  children?: React.ReactNode;
+}
+
+const variantStyles: Record<ButtonVariant, string> = {
+  primary: 'bg-primary text-white hover:bg-primary-hover',
+  secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600',
+  ghost: 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700',
+  danger: 'bg-red-500 text-white hover:bg-red-600',
+  outline: 'border border-gray-300 text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800',
+};
+
+const sizeStyles: Record<ButtonSize, string> = {
+  sm: 'px-3 py-1.5 text-xs rounded-md',
+  md: 'px-4 py-2 text-sm rounded-lg',
+  lg: 'px-6 py-3 text-base rounded-lg',
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = 'primary', size = 'md', loading, disabled, children, ...props }, ref) => {
+    return (
+      <motion.button
+        ref={ref}
+        whileTap={{ scale: 0.98 }}
+        className={cn(
+          'inline-flex items-center justify-center font-medium transition-colors duration-fast',
+          'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
+          'disabled:opacity-50 disabled:cursor-not-allowed',
+          variantStyles[variant],
+          sizeStyles[size],
+          className
+        )}
+        disabled={disabled || loading}
+        {...props}
+      >
+        {loading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+        {children}
+      </motion.button>
+    );
+  }
+);
+
+Button.displayName = 'Button';

desktop/src/components/ui/Card.tsx

@@ -0,0 +1,64 @@
+import { motion, HTMLMotionProps } from 'framer-motion';
+import { cn } from '../../lib/utils';
+import { cardHover } from '../../lib/animations';
+
+interface CardProps extends Omit<HTMLMotionProps<'div'>, 'children'> {
+  children: React.ReactNode;
+  hoverable?: boolean;
+}
+
+export function Card({ children, className, hoverable = false, ...props }: CardProps) {
+  return (
+    <motion.div
+      className={cn(
+        'rounded-xl border border-gray-200 bg-white p-4 shadow-sm',
+        'dark:border-gray-700 dark:bg-gray-800',
+        hoverable && 'cursor-pointer transition-shadow duration-200',
+        className
+      )}
+      {...(hoverable && { whileHover: cardHover })}
+      {...props}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+interface CardHeaderProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function CardHeader({ children, className }: CardHeaderProps) {
+  return (
+    <div className={cn('mb-3', className)}>
+      {children}
+    </div>
+  );
+}
+
+interface CardTitleProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function CardTitle({ children, className }: CardTitleProps) {
+  return (
+    <h3 className={cn('text-sm font-semibold text-gray-900 dark:text-gray-100', className)}>
+      {children}
+    </h3>
+  );
+}
+
+interface CardContentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function CardContent({ children, className }: CardContentProps) {
+  return (
+    <div className={cn('text-sm text-gray-600 dark:text-gray-300', className)}>
+      {children}
+    </div>
+  );
+}

desktop/src/components/ui/EmptyState.tsx

@@ -0,0 +1,28 @@
+import { cn } from '../../lib/utils';
+
+interface EmptyStateProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  action?: React.ReactNode;
+  className?: string;
+}
+
+export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
+  return (
+    <div className={cn('flex-1 flex items-center justify-center p-6', className)}>
+      <div className="text-center max-w-sm">
+        <div className="w-16 h-16 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-4 text-gray-400">
+          {icon}
+        </div>
+        <h3 className="text-base font-semibold text-gray-700 dark:text-gray-300 mb-2">
+          {title}
+        </h3>
+        <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
+          {description}
+        </p>
+        {action}
+      </div>
+    </div>
+  );
+}

desktop/src/components/ui/Input.tsx

@@ -0,0 +1,45 @@
+import { forwardRef, InputHTMLAttributes } from 'react';
+import { cn } from '../../lib/utils';
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, label, error, id, ...props }, ref) => {
+    const inputId = id || label?.toLowerCase().replace(/\s+/g, '-');
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label
+            htmlFor={inputId}
+            className="block text-xs text-gray-500 dark:text-gray-400 mb-1"
+          >
+            {label}
+          </label>
+        )}
+        <input
+          ref={ref}
+          id={inputId}
+          className={cn(
+            'w-full text-sm border border-gray-200 rounded-lg px-3 py-2',
+            'bg-white dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100',
+            'placeholder:text-gray-400 dark:placeholder:text-gray-500',
+            'focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent',
+            'transition-colors duration-fast',
+            error && 'border-red-500 focus:ring-red-500',
+            className
+          )}
+          {...props}
+        />
+        {error && (
+          <p className="mt-1 text-xs text-red-500">{error}</p>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = 'Input';

desktop/src/components/ui/Skeleton.tsx

@@ -0,0 +1,42 @@
+import { cn } from '../../lib/utils';
+
+interface SkeletonProps {
+  className?: string;
+}
+
+export function Skeleton({ className }: SkeletonProps) {
+  return (
+    <div
+      className={cn(
+        'animate-pulse bg-gray-200 dark:bg-gray-700 rounded',
+        className
+      )}
+    />
+  );
+}
+
+export function CardSkeleton() {
+  return (
+    <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4">
+      <Skeleton className="h-4 w-24 mb-3" />
+      <Skeleton className="h-3 w-full mb-2" />
+      <Skeleton className="h-3 w-3/4" />
+    </div>
+  );
+}
+
+export function ListSkeleton({ count = 3 }: { count?: number }) {
+  return (
+    <div className="space-y-2">
+      {Array.from({ length: count }).map((_, i) => (
+        <div key={i} className="flex items-center gap-3 p-2">
+          <Skeleton className="w-8 h-8 rounded-full" />
+          <div className="flex-1">
+            <Skeleton className="h-3 w-24 mb-1" />
+            <Skeleton className="h-2 w-32" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

desktop/src/components/ui/Toast.tsx

@@ -0,0 +1,89 @@
+import { useState, useCallback, createContext, useContext } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+type ToastType = 'success' | 'error' | 'info' | 'warning';
+
+interface Toast {
+  id: string;
+  message: string;
+  type: ToastType;
+}
+
+interface ToastContextType {
+  toast: (message: string, type?: ToastType) => void;
+}
+
+const ToastContext = createContext<ToastContextType | null>(null);
+
+export function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+}
+
+const iconMap: Record<ToastType, React.ReactNode> = {
+  success: <CheckCircle className="w-5 h-5 text-green-500" />,
+  error: <AlertCircle className="w-5 h-5 text-red-500" />,
+  info: <Info className="w-5 h-5 text-blue-500" />,
+  warning: <AlertTriangle className="w-5 h-5 text-yellow-500" />,
+};
+
+const styleMap: Record<ToastType, string> = {
+  success: 'bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-800',
+  error: 'bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800',
+  info: 'bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-800',
+  warning: 'bg-yellow-50 border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-800',
+};
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const toast = useCallback((message: string, type: ToastType = 'info') => {
+    const id = Date.now().toString();
+    setToasts((prev) => [...prev, { id, message, type }]);
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, 3000);
+  }, []);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ toast }}>
+      {children}
+      <div className="fixed bottom-4 right-4 z-50 space-y-2">
+        <AnimatePresence>
+          {toasts.map((t) => (
+            <motion.div
+              key={t.id}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              className={cn(
+                'flex items-center gap-3 px-4 py-3 rounded-lg border shadow-lg',
+                'bg-white dark:bg-gray-800',
+                styleMap[t.type]
+              )}
+            >
+              {iconMap[t.type]}
+              <span className="text-sm text-gray-700 dark:text-gray-200">{t.message}</span>
+              <button
+                onClick={() => removeToast(t.id)}
+                className="ml-2 text-gray-400 hover:text-gray-600"
+                aria-label="Close"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </motion.div>
+          ))}
+        </AnimatePresence>
+      </div>
+    </ToastContext.Provider>
+  );
+}

desktop/src/components/ui/index.ts

@@ -0,0 +1,15 @@
+export { Button } from './Button';
+export type { ButtonProps } from './Button';
+
+export { Card, CardHeader, CardTitle, CardContent } from './Card';
+
+export { Input } from './Input';
+export type { InputProps } from './Input';
+
+export { Badge } from './Badge';
+
+export { Skeleton, CardSkeleton, ListSkeleton } from './Skeleton';
+
+export { EmptyState } from './EmptyState';
+
+export { ToastProvider, useToast } from './Toast';

desktop/src/index.css

@@ -1,4 +1,64 @@
-@import "tailwindcss";
+@import "tailwindcss";
+
+:root {
+  /* Brand Colors */
+  --color-primary: #f97316;
+  --color-primary-hover: #ea580c;
+  --color-primary-light: #fff7ed;
+
+  /* Semantic Colors */
+  --color-success: #22c55e;
+  --color-warning: #eab308;
+  --color-error: #ef4444;
+  --color-info: #3b82f6;
+
+  /* Neutral Colors */
+  --color-bg: #ffffff;
+  --color-bg-secondary: #f9fafb;
+  --color-border: #e5e7eb;
+  --color-text: #111827;
+  --color-text-secondary: #6b7280;
+  --color-text-muted: #9ca3af;
+
+  /* Spacing Scale */
+  --space-xs: 4px;
+  --space-sm: 8px;
+  --space-md: 16px;
+  --space-lg: 24px;
+  --space-xl: 32px;
+
+  /* Border Radius */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+
+  /* Transitions */
+  --transition-fast: 150ms ease;
+  --transition-normal: 200ms ease;
+  --transition-slow: 300ms ease;
+}
+
+.dark {
+  --color-bg: #0f172a;
+  --color-bg-secondary: #1e293b;
+  --color-border: #334155;
+  --color-text: #f1f5f9;
+  --color-text-secondary: #94a3b8;
+  --color-text-muted: #64748b;
+}
+
+/* Focus states for accessibility */
+:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
 
 body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

desktop/src/lib/animations.ts

@@ -0,0 +1,62 @@
+import { Variants, Transition } from 'framer-motion';
+
+// Page transition animations
+export const pageVariants: Variants = {
+  initial: { opacity: 0, y: 10 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: -10 },
+};
+
+// List item stagger animations
+export const listItemVariants: Variants = {
+  hidden: { opacity: 0, x: -10 },
+  visible: { opacity: 1, x: 0 },
+};
+
+// Container stagger animations
+export const containerVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.05,
+    },
+  },
+  exit: {
+    opacity: 0,
+    transition: {
+      duration: 0.1,
+    },
+  },
+};
+
+// Fade in animations
+export const fadeInVariants: Variants = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 },
+};
+
+// Button tap animation
+export const buttonTap = { scale: 0.98 };
+
+// Card hover animation
+export const cardHover = { y: -2, boxShadow: '0 10px 25px -5px rgb(0 0 0 / 0.1)' };
+
+// Default transition config
+export const defaultTransition: Transition = {
+  duration: 0.2,
+  ease: [0.4, 0, 0.2, 1],
+};
+
+// Fast transition
+export const fastTransition: Transition = {
+  duration: 0.15,
+  ease: [0.4, 0, 0.2, 1],
+};
+
+// Slow transition
+export const slowTransition: Transition = {
+  duration: 0.3,
+  ease: [0.4, 0, 0.2, 1],
+};

desktop/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

desktop/tailwind.config.js

@@ -1,11 +1,38 @@
-/** @type {import('tailwindcss').Config} */
+/** @type {import('tailwindcss').Config} */
 export default {
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
+  darkMode: 'class',
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: 'var(--color-primary)',
+          hover: 'var(--color-primary-hover)',
+          light: 'var(--color-primary-light)',
+        },
+        success: 'var(--color-success)',
+        warning: 'var(--color-warning)',
+        error: 'var(--color-error)',
+        info: 'var(--color-info)',
+      },
+      boxShadow: {
+        'card': 'var(--shadow-md)',
+        'hover': 'var(--shadow-lg)',
+      },
+      transitionDuration: {
+        'fast': '150ms',
+        'normal': '200ms',
+      },
+      borderRadius: {
+        'sm': 'var(--radius-sm)',
+        'md': 'var(--radius-md)',
+        'lg': 'var(--radius-lg)',
+        'xl': 'var(--radius-xl)',
+      },
+    },
   },
   plugins: [],
 }