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>
2026-03-15 17:24:40 +08:00
parent 308994121c
commit e3d164e9d2
18 changed files with 772 additions and 108 deletions
--- a/desktop/src/components/ChatArea.tsx
+++ b/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 ? '' : '...')}
--- a/desktop/src/components/Sidebar.tsx
+++ b/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>
--- a/desktop/src/components/TriggersPanel.tsx
+++ b/desktop/src/components/TriggersPanel.tsx
@@ -15,8 +15,6 @@ import {
  Globe,
  Bell,
  MessageSquare,
-  AlertCircle,
-  CheckCircle2,
  X,
 } from 'lucide-react';

--- a/desktop/src/components/ui/Badge.tsx
+++ b/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>
+  );
+}
--- a/desktop/src/components/ui/Button.tsx
+++ b/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';
--- a/desktop/src/components/ui/Card.tsx
+++ b/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>
+  );
+}
--- a/desktop/src/components/ui/EmptyState.tsx
+++ b/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>
+  );
+}
--- a/desktop/src/components/ui/Input.tsx
+++ b/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';
--- a/desktop/src/components/ui/Skeleton.tsx
+++ b/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>
+  );
+}
--- a/desktop/src/components/ui/Toast.tsx
+++ b/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>
+  );
+}
--- a/desktop/src/components/ui/index.ts
+++ b/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';