work-agent 0.1.0

package/app/page.tsx

@@ -0,0 +1,2288 @@
+'use client';
+
+import { useState, useRef, useEffect, Suspense } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { Send, Bot, Trash2, X, ClipboardList, CheckCircle, User, Plus, MessageSquare, ChevronLeft, ChevronRight, ChevronDown, Pencil, Loader2, BookOpen, Share2, Check, Brain } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from '@/components/ui/dialog';
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from '@/components/ui/select';
+import { cn } from '@/lib/utils';
+import { MessageResponse, Message } from '@/components/ai-elements/message';
+import { TicketDetailContent } from '@/components/ticket-detail-content';
+import type { Ticket } from '@/lib/db';
+import { SkillSwitcher } from '@/components/chat/SkillSwitcher';
+import { MentionInput } from '@/components/chat/MentionInput';
+import { KnowledgePickerDialog } from '@/components/chat/KnowledgePickerDialog';
+import {
+	ChainOfThought,
+	ChainOfThoughtContent,
+	ChainOfThoughtHeader,
+	ChainOfThoughtStep,
+} from '@/components/ai-elements/chain-of-thought';
+import { RecommendationBanner } from '@/components/chat/RecommendationBanner';
+import { OrganizeDialog } from '@/components/chat/OrganizeDialog';
+import { SetupGuide } from '@/components/setup-guide';
+import { WelcomeGuide } from '@/components/welcome-guide';
+
+// UUID 生成函数
+function generateUUID(): string {
+	if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+		return crypto.randomUUID();
+	}
+	return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+		const r = (Math.random() * 16) | 0;
+		const v = c === 'x' ? r : (r & 0x3) | 0x8;
+		return v.toString(16);
+	});
+}
+
+// Track chain-of-thought data for each message
+type ToolExecution = {
+	toolName: string;
+	startTime: Date;
+	endTime?: Date;
+	input?: any;
+	output?: any;
+	isError?: boolean;
+};
+
+type MessageChainOfThought = {
+	isStreaming: boolean;
+	thinking: string;
+	toolExecutions: ToolExecution[];
+};
+
+type Message = {
+	id: string;
+	role: 'user' | 'assistant' | 'system';
+	content: string;
+	timestamp: Date;
+	isStreaming?: boolean;
+	ticket?: {
+		id: string;
+		title: string;
+		type: string;
+		status: string;
+		priority: string;
+		description?: string;
+	};
+	chainOfThought?: MessageChainOfThought;
+};
+
+type PIEvent = {
+	type: 'session_start' | 'session_restored' | 'text' | 'thinking' | 'tool_start' | 'tool_output' | 'tool_end' | 'turn_start' | 'turn_end' | 'message_end' | 'agent_end' | 'error';
+	content?: string;
+	toolName?: string;
+	args?: any;
+	sessionId?: string;
+	isError?: boolean;
+	message?: any;
+	messages?: any[];
+	toolResults?: any[];
+	error?: string;
+};
+
+type SidePanel = 'none' | 'tickets' | 'approvals' | 'ticket-detail';
+
+// 会话元数据类型
+type SessionInfo = {
+	sessionId: string;
+	userId?: string;
+	createdAt: string;
+	lastAccessedAt: string;
+	messageCount: number;
+	title?: string; // 会话标题，从第一条用户消息提取
+	recentSummary?: string; // 会话摘要
+};
+
+// 工单操作按钮组件
+function TicketActionButtons({
+	ticketId,
+	ticketStatus,
+	onAction,
+	onViewDetails,
+	loadingTicket,
+}: {
+	ticketId: string;
+	ticketStatus: string;
+	onAction: (ticketId: string, action: 'approve' | 'reject' | 'execute') => void;
+	onViewDetails: () => void;
+	loadingTicket: boolean;
+}) {
+	const [currentStatus, setCurrentStatus] = useState(ticketStatus);
+	const [isOperating, setIsOperating] = useState(false);
+
+	// 获取最新工单状态
+	useEffect(() => {
+		async function fetchStatus() {
+			try {
+				const response = await fetch(`/api/tickets/${ticketId}`);
+				if (response.ok) {
+					const data = await response.json();
+					setCurrentStatus(data.ticket?.status || ticketStatus);
+				}
+			} catch (e) {
+				// 忽略错误，使用传入的状态
+			}
+		}
+		fetchStatus();
+	}, [ticketId, ticketStatus]);
+
+	const handleAction = async (action: 'approve' | 'reject' | 'execute') => {
+		setIsOperating(true);
+		// 立即更新状态以防止重复点击
+		if (action === 'approve') setCurrentStatus('approved');
+		else if (action === 'reject') setCurrentStatus('rejected');
+		else if (action === 'execute') setCurrentStatus('executing');
+
+		try {
+			await onAction(ticketId, action);
+		} finally {
+			setIsOperating(false);
+		}
+	};
+
+	return (
+		<div className="flex items-center gap-1">
+			{/* 查看详情按钮 */}
+			<Button
+				variant="ghost"
+				size="sm"
+				onClick={onViewDetails}
+				disabled={loadingTicket}
+				className="h-6 px-2 text-xs"
+			>
+				<ClipboardList className="h-3 w-3 mr-1" />
+				{loadingTicket ? '...' : '详情'}
+			</Button>
+
+			{/* 待审批状态：显示批准和拒绝按钮 */}
+			{currentStatus === 'pending' && (
+				<>
+					<Button
+						variant="default"
+						size="sm"
+						onClick={() => handleAction('approve')}
+						disabled={isOperating}
+						className="h-6 px-2 text-xs bg-green-600 hover:bg-green-700"
+					>
+						✓ 批准
+					</Button>
+					<Button
+						variant="destructive"
+						size="sm"
+						onClick={() => handleAction('reject')}
+						disabled={isOperating}
+						className="h-6 px-2 text-xs"
+					>
+						✗ 拒绝
+					</Button>
+				</>
+			)}
+
+			{/* 已批准状态：显示执行按钮 */}
+			{currentStatus === 'approved' && (
+				<Button
+					variant="default"
+					size="sm"
+					onClick={() => handleAction('execute')}
+					disabled={isOperating}
+					className="h-6 px-2 text-xs bg-blue-600 hover:bg-blue-700"
+				>
+					▶ 执行
+				</Button>
+			)}
+
+			{/* 执行中状态 */}
+			{currentStatus === 'executing' && (
+				<span className="text-xs text-blue-600 flex items-center gap-1 px-2">
+					<span className="w-1.5 h-1.5 rounded-full bg-blue-600 animate-pulse"></span>
+					执行中...
+				</span>
+			)}
+
+			{/* 已完成状态 */}
+			{currentStatus === 'completed' && (
+				<span className="text-xs text-green-600 px-2">✓ 已完成</span>
+			)}
+
+			{/* 已拒绝状态 */}
+			{currentStatus === 'rejected' && (
+				<span className="text-xs text-red-600 px-2">✗ 已拒绝</span>
+			)}
+
+			{/* 失败状态 */}
+			{currentStatus === 'failed' && (
+				<span className="text-xs text-red-600 px-2">⚠ 失败</span>
+			)}
+		</div>
+	);
+}
+
+function HomePageContent() {
+	const router = useRouter();
+	const searchParams = useSearchParams();
+	const [sessionId, setSessionId] = useState<string | null>(null);
+	const [messages, setMessages] = useState<Message[]>([]);
+	const [input, setInput] = useState('');
+	const [loading, setLoading] = useState(false);
+	const [currentTool, setCurrentTool] = useState<string | null>(null);
+	const [userId, setUserId] = useState<string>('');
+	const [isLoggedIn, setIsLoggedIn] = useState(false);
+	const [skillNameMap, setSkillNameMap] = useState<Record<string, string>>({}); // dirName -> skillName
+	const [attachedFiles, setAttachedFiles] = useState<Array<{ id: string; name: string; size: number }>>([]);
+	const [uploading, setUploading] = useState(false);
+	const messagesEndRef = useRef<HTMLDivElement>(null);
+	const abortControllerRef = useRef<AbortController | null>(null);
+	const urlParamsProcessedRef = useRef(false);
+
+	// Scroll handling refs and state
+	const scrollContainerRef = useRef<HTMLDivElement>(null);
+	const isUserScrollingRef = useRef(false);
+	const lastScrollTopRef = useRef(0);
+	const lastMessageCountRef = useRef(0);
+	const [showScrollButton, setShowScrollButton] = useState(false);
+	const [scrollMode, setScrollMode] = useState<'auto' | 'follow'>('auto');
+
+	// 加载用户技能名称映射
+	const loadSkillNameMap = async (uid: string) => {
+		try {
+			const response = await fetch(`/api/skills?userId=${uid}`);
+			if (response.ok) {
+				const skills = await response.json();
+				const map: Record<string, string> = {};
+				for (const skill of skills) {
+					if (skill.name && skill.displayName) {
+						map[skill.name] = skill.displayName;
+					}
+				}
+				setSkillNameMap(map);
+			}
+		} catch (error) {
+			console.error('Failed to load skill name map:', error);
+		}
+	};
+
+	// 检查用户登录状态
+	useEffect(() => {
+		const checkLoginStatus = () => {
+			const userId = localStorage.getItem('userId');
+			setIsLoggedIn(!!userId);
+			if (userId) {
+				setUserId(userId);
+				loadSkillNameMap(userId);
+			}
+		};
+
+		checkLoginStatus();
+
+		// 监听登录状态变化
+		const handleStorageChange = () => {
+			checkLoginStatus();
+		};
+
+		window.addEventListener('storage', handleStorageChange);
+		return () => window.removeEventListener('storage', handleStorageChange);
+	}, []);
+
+	// 配置检查状态
+	const [configChecked, setConfigChecked] = useState(false);
+	const [isConfigured, setIsConfigured] = useState(true); // 默认 true，检查后更新
+
+	// 侧边栏状态
+	const [sidePanel, setSidePanel] = useState<SidePanel>('none');
+	const [sidePanelTicketId, setSidePanelTicketId] = useState<string | null>(null);
+	const [refreshKey, setRefreshKey] = useState(0);
+
+	// 会话管理状态
+	const [sessions, setSessions] = useState<SessionInfo[]>([]);
+	const [sessionSidebarOpen, setSessionSidebarOpen] = useState(true);
+
+	// Skill 选择状态
+	const [selectedSkills, setSelectedSkills] = useState<string[]>([]);
+	const [availableSkills, setAvailableSkills] = useState<{ name: string; displayName?: string; description?: string }[]>([]);
+
+	// 分析对话框状态
+	const [analysisDialogOpen, setAnalysisDialogOpen] = useState(false);
+
+	// 知识库列表状态
+	const [availableKnowledge, setAvailableKnowledge] = useState<{ id: string; title: string; category?: string; isOwner?: boolean }[]>([]);
+
+	// 知识库选择弹框状态
+	const [knowledgePickerOpen, setKnowledgePickerOpen] = useState(false);
+
+	// 分享状态
+	const [shareCopied, setShareCopied] = useState(false);
+
+	// 检查配置状态
+	useEffect(() => {
+		async function checkConfig() {
+			try {
+				const response = await fetch('/api/config/status');
+				if (response.ok) {
+					const data = await response.json();
+					setIsConfigured(data.isConfigured);
+				}
+			} catch (e) {
+				console.error('Failed to check config:', e);
+			} finally {
+				setConfigChecked(true);
+			}
+		}
+		checkConfig();
+	}, []);
+
+	// 加载可用 skills 列表（只显示用户已安装的）
+	useEffect(() => {
+		async function loadSkills() {
+			const userId = localStorage.getItem('userId');
+			if (!userId) return;
+			
+			try {
+				const response = await fetch(`/api/user/skills?userId=${userId}`);
+				if (response.ok) {
+					const data = await response.json();
+					const userSkills = data.skills || [];
+					setAvailableSkills(userSkills.map((s: any) => ({
+						name: s.skillName,
+						displayName: s.skillName,
+						description: s.isBuiltin ? '内置Skill' : (s.source === 'personal' ? '个人Skill' : '已安装'),
+					})));
+				}
+			} catch (error) {
+				console.error('Failed to load user skills:', error);
+			}
+		}
+
+		async function loadKnowledge() {
+			const userId = localStorage.getItem('userId');
+			if (!userId) return;
+			
+			try {
+				const response = await fetch(`/api/knowledge?author=${encodeURIComponent(userId)}`);
+				if (response.ok) {
+					const data = await response.json();
+					const myDocs = (data.documents || []).map((d: any) => ({
+						id: d.id,
+						title: d.title,
+						category: d.category,
+						isOwner: true,
+					}));
+					setAvailableKnowledge(myDocs);
+				}
+			} catch (error) {
+				console.error('Failed to load knowledge:', error);
+			}
+		}
+
+		loadSkills();
+		loadKnowledge();
+	}, []);
+
+	// 处理 URL 参数（skill 和 prompt）
+	useEffect(() => {
+		if (urlParamsProcessedRef.current) return;
+		
+		const skillParam = searchParams.get('skill');
+		const promptParam = searchParams.get('prompt');
+		
+		if (!skillParam && !promptParam) return;
+		
+		// 等待 availableSkills 加载完成
+		if (availableSkills.length === 0 && skillParam) return;
+		
+		// 标记已处理
+		urlParamsProcessedRef.current = true;
+		
+		// 处理 skill 参数
+		if (skillParam) {
+			const skillExists = availableSkills.some(s => s.name === skillParam);
+			if (skillExists) {
+				setSelectedSkills([skillParam]);
+				console.log(`[URL参数] 激活技能: ${skillParam}`);
+			} else {
+				console.warn(`[URL参数] 技能不存在: ${skillParam}`);
+			}
+		}
+		
+		// 处理 prompt 参数
+		if (promptParam) {
+			setInput(promptParam);
+			console.log(`[URL参数] 设置输入: ${promptParam}`);
+		}
+		
+		// 清理 URL 参数（可选，保持 URL 干净）
+		// window.history.replaceState({}, '', '/');
+	}, [searchParams, availableSkills]);
+
+	// 工单详情弹框状态
+	const [selectedTicket, setSelectedTicket] = useState<Ticket | null>(null);
+	const [ticketDialogOpen, setTicketDialogOpen] = useState(false);
+	const [loadingTicket, setLoadingTicket] = useState(false);
+
+	// 加载会话列表
+	const loadSessions = async () => {
+		try {
+			const currentUserId = localStorage.getItem('userId');
+
+			// 获取后端会话
+			const url = currentUserId ? `/api/sessions?userId=${encodeURIComponent(currentUserId)}` : '/api/sessions';
+			const response = await fetch(url);
+			const backendSessions: SessionInfo[] = response.ok ? (await response.json()).sessions || [] : [];
+
+			// 获取本地会话（尚未同步到后端的）
+			const localSessions: SessionInfo[] = JSON.parse(localStorage.getItem('assistant-local-sessions') || '[]');
+
+			// 过滤当前用户的本地会话
+			const filteredLocalSessions = currentUserId
+				? localSessions.filter(s => s.userId === currentUserId)
+				: localSessions;
+
+			// 合并会话，去重（以后端为准）
+			const backendIds = new Set(backendSessions.map(s => s.sessionId));
+			const mergedSessions = [
+				...backendSessions,
+				...filteredLocalSessions.filter(s => !backendIds.has(s.sessionId))
+			];
+
+			// 按最后访问时间排序
+			mergedSessions.sort((a, b) =>
+				new Date(b.lastAccessedAt).getTime() - new Date(a.lastAccessedAt).getTime()
+			);
+
+			setSessions(mergedSessions);
+		} catch (error) {
+			console.error('Failed to load sessions:', error);
+		}
+	};
+
+	// 初始化会话
+	useEffect(() => {
+		const initSession = async () => {
+			const savedSessionId = localStorage.getItem('assistant-session-id');
+
+			if (savedSessionId) {
+				setSessionId(savedSessionId);
+
+				// 从后端获取消息（包含 chain-of-thought）
+				try {
+					const response = await fetch(`/api/sessions/${savedSessionId}/messages`);
+						if (response.ok) {
+						const data = await response.json();
+						const backendMessages = data.messages || [];
+						if (backendMessages.length > 0) {
+							// 转换消息并解析 chain-of-thought，直接嵌入消息对象
+							const converted: Message[] = [];
+
+							backendMessages.forEach((m: any) => {
+								const message: Message = {
+									id: m.id,
+									role: m.role as 'user' | 'assistant',
+									content: m.content,
+									timestamp: new Date(m.timestamp),
+								};
+
+								// 解析 chain-of-thought 数据，直接嵌入消息对象
+								if (m.chainOfThought) {
+									message.chainOfThought = {
+										isStreaming: false,
+										thinking: m.chainOfThought.thinking || '',
+										toolExecutions: (m.chainOfThought.toolExecutions || []).map((t: any) => ({
+											...t,
+											startTime: new Date(t.startTime),
+											endTime: t.endTime ? new Date(t.endTime) : undefined,
+										}))
+									};
+								}
+
+								converted.push(message);
+							});
+
+							setMessages(converted);
+						}
+					}
+				} catch (error) {
+					console.error('Failed to load messages from backend:', error);
+				}
+			} else {
+				const newSessionId = generateUUID();
+				setSessionId(newSessionId);
+				// 清空消息（chain-of-thought 会随消息一起清空）
+				setMessages([]);
+				localStorage.setItem('assistant-session-id', newSessionId);
+			}
+
+			// 加载会话列表
+			loadSessions();
+
+			// 初始化调度器（后台调用，不阻塞UI）
+			fetch('/api/health').catch(() => {
+				// 忽略健康检查失败
+			});
+		};
+
+		initSession();
+	}, []);
+
+	// 持久化会话ID到 localStorage（用于记住当前会话）
+	useEffect(() => {
+		if (sessionId) {
+			localStorage.setItem('assistant-session-id', sessionId);
+		}
+	}, [sessionId]);
+
+	// 创建新会话
+	const createNewSession = () => {
+		const newSessionId = generateUUID();
+		const now = new Date().toISOString();
+		const currentUserId = localStorage.getItem('userId') || undefined;
+
+		// Reset scroll lock when creating new session
+		isUserScrollingRef.current = false;
+
+		setSessionId(newSessionId);
+		setMessages([]); // chain-of-thought 会随消息一起清空
+		localStorage.setItem('assistant-session-id', newSessionId);
+
+		// 保存到本地会话列表
+		const localSessions: SessionInfo[] = JSON.parse(localStorage.getItem('assistant-local-sessions') || '[]');
+		const newSession: SessionInfo = {
+			sessionId: newSessionId,
+			userId: currentUserId,
+			createdAt: now,
+			lastAccessedAt: now,
+			messageCount: 0,
+		};
+
+		// 检查是否已存在
+		if (!localSessions.find(s => s.sessionId === newSessionId)) {
+			localSessions.unshift(newSession);
+			localStorage.setItem('assistant-local-sessions', JSON.stringify(localSessions));
+		}
+
+		// 刷新会话列表
+		loadSessions();
+	};
+
+	// 切换会话
+	const switchSession = async (targetSessionId: string) => {
+		if (targetSessionId === sessionId) return;
+
+		// Reset scroll lock when switching sessions
+		isUserScrollingRef.current = false;
+
+		// 切换到目标会话
+		setSessionId(targetSessionId);
+		localStorage.setItem('assistant-session-id', targetSessionId);
+
+		// 从后端获取消息
+		try {
+			const response = await fetch(`/api/sessions/${targetSessionId}/messages`);
+			if (response.ok) {
+				const data = await response.json();
+				const backendMessages = data.messages || [];
+				if (backendMessages.length > 0) {
+					// 转换消息并解析 chain-of-thought，直接嵌入消息对象
+					const converted: Message[] = [];
+
+					backendMessages.forEach((m: any) => {
+						const message: Message = {
+							id: m.id,
+							role: m.role as 'user' | 'assistant',
+							content: m.content,
+							timestamp: new Date(m.timestamp),
+						};
+
+						// 解析 chain-of-thought 数据，直接嵌入消息对象
+						if (m.chainOfThought) {
+							message.chainOfThought = {
+								isStreaming: false,
+								thinking: m.chainOfThought.thinking || '',
+								toolExecutions: (m.chainOfThought.toolExecutions || []).map((t: any) => ({
+									...t,
+									startTime: new Date(t.startTime),
+									endTime: t.endTime ? new Date(t.endTime) : undefined,
+								}))
+							};
+						}
+
+						converted.push(message);
+					});
+
+					setMessages(converted);
+				}
+			}
+		} catch (error) {
+			console.error('Failed to load messages from backend:', error);
+		}
+	};
+
+	// 删除会话
+	const deleteSession = async (targetSessionId: string) => {
+		try {
+			// 调用后端 API 删除
+			await fetch(`/api/sessions?sessionId=${targetSessionId}`, { method: 'DELETE' });
+		} catch (error) {
+			console.error('Failed to delete session:', error);
+		}
+
+		// 从本地会话列表中移除
+		const localSessions = JSON.parse(localStorage.getItem('assistant-local-sessions') || '[]');
+		const updatedLocalSessions = localSessions.filter((s: SessionInfo) => s.sessionId !== targetSessionId);
+		localStorage.setItem('assistant-local-sessions', JSON.stringify(updatedLocalSessions));
+
+		// 如果删除的是当前会话，创建新会话
+		if (targetSessionId === sessionId) {
+			createNewSession();
+		}
+
+		// 刷新会话列表
+		loadSessions();
+	};
+
+	// 获取会话标题
+	const getSessionTitle = (session: SessionInfo) => {
+		// 优先使用 title，其次使用 recentSummary
+		if (session.title) {
+			return session.title;
+		}
+		if (session.recentSummary) {
+			return session.recentSummary.slice(0, 30) + (session.recentSummary.length > 30 ? '...' : '');
+		}
+		// 使用日期作为默认标题
+		return `会话 ${new Date(session.createdAt).toLocaleDateString('zh-CN')}`;
+	};
+
+	const scrollToBottom = (smooth: boolean = false) => {
+		if (scrollContainerRef.current) {
+			const container = scrollContainerRef.current;
+			container.scrollTo({
+				top: container.scrollHeight,
+				behavior: smooth ? 'smooth' : 'auto'
+			});
+		}
+	};
+
+	// 将消息内容中的 dirName 转换回 skillName 用于显示
+	const convertSkillNamesForDisplay = (content: string): string => {
+		if (!skillNameMap || Object.keys(skillNameMap).length === 0) {
+			return content;
+		}
+		return content.replace(/@(\w+)/g, (match, dirName) => {
+			const skillName = skillNameMap[dirName];
+			return skillName ? `@${skillName}` : match;
+		});
+	};
+
+	// Optimized scroll trigger - unified handling for messages and chain-of-thought
+	useEffect(() => {
+		if (scrollMode !== 'auto') return;
+		
+		// 新消息追加时立即滚动
+		if (messages.length > lastMessageCountRef.current) {
+			scrollToBottom(false);
+		} else if (loading) {
+			// 内容更新（思考过程流式输出）时防抖滚动
+			const timer = setTimeout(() => {
+				scrollToBottom(false);
+			}, 150);
+			return () => clearTimeout(timer);
+		}
+		lastMessageCountRef.current = messages.length;
+	}, [messages, scrollMode, loading]);
+
+	// Enhanced user scroll detection with scroll mode support
+	useEffect(() => {
+		const container = scrollContainerRef.current;
+		if (!container) return;
+
+		const handleScroll = () => {
+			const scrollTop = container.scrollTop;
+			const scrollHeight = container.scrollHeight;
+			const clientHeight = container.clientHeight;
+			const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+
+			// Detect user scroll direction (up or down)
+			const isScrollingUp = scrollTop < lastScrollTopRef.current;
+			lastScrollTopRef.current = scrollTop;
+
+			// More sensitive threshold: switch to follow mode when > 100px from bottom
+			const isAtBottom = distanceFromBottom < 100;
+
+			// User scrolled up - switch to follow mode
+			if (isScrollingUp && distanceFromBottom > 100) {
+				setScrollMode('follow');
+			} else if (isAtBottom) {
+				// User scrolled to bottom - restore auto mode
+				setScrollMode('auto');
+			}
+
+			// Show/hide scroll button when not at bottom
+			setShowScrollButton(distanceFromBottom > 100);
+		};
+
+		container.addEventListener('scroll', handleScroll, { passive: true });
+		return () => container.removeEventListener('scroll', handleScroll);
+	}, []);
+
+	// Scroll to bottom on mount and when session changes
+	useEffect(() => {
+		scrollToBottom(true);
+	}, [sessionId]);
+
+	const parseSSELine = (line: string): PIEvent | null => {
+		if (!line.startsWith('data: ')) return null;
+		try {
+			return JSON.parse(line.slice(6));
+		} catch {
+			return null;
+		}
+	};
+
+	const handleFileAttach = async (file: File) => {
+		if (!userId) return;
+		setUploading(true);
+		try {
+			const formData = new FormData();
+			formData.append('userId', userId);
+			formData.append('file', file);
+			const res = await fetch('/api/my/files', { method: 'POST', body: formData });
+			if (res.ok) {
+				const data = await res.json();
+				setAttachedFiles(prev => [...prev, {
+					id: data.file.id,
+					name: file.name,
+					size: file.size,
+				}]);
+			} else {
+				const error = await res.json();
+				alert(error.error || '上传失败');
+			}
+		} catch (error) {
+			console.error('Upload error:', error);
+			alert('上传失败');
+		} finally {
+			setUploading(false);
+		}
+	};
+
+	const handleFileRemove = (fileId: string) => {
+		setAttachedFiles(prev => prev.filter(f => f.id !== fileId));
+	};
+
+	const handleSend = async () => {
+		if ((!input.trim() && attachedFiles.length === 0) || loading) return;
+
+		// Unlock scroll when user sends a new message
+		isUserScrollingRef.current = false;
+
+		// 构建消息内容（包含文件信息）
+		let messageContent = input.trim();
+		if (attachedFiles.length > 0) {
+			const fileInfo = attachedFiles.map(f => `[文件: ${f.name} (ID: ${f.id})]`).join('\n');
+			messageContent = messageContent ? `${messageContent}\n\n${fileInfo}` : fileInfo;
+		}
+
+		const userMessage: Message = {
+			id: generateUUID(),
+			role: 'user',
+			content: messageContent,
+			timestamp: new Date(),
+		};
+
+		setMessages((prev) => [...prev, userMessage]);
+		const messageToSend = messageContent;
+		const filesToSend = [...attachedFiles];
+		setInput('');
+		setAttachedFiles([]);
+		setLoading(true);
+		setCurrentTool(null);
+
+		abortControllerRef.current = new AbortController();
+
+		let assistantContent = '';
+		let assistantMessageId = generateUUID();
+		let createdTicket: Message['ticket'] | null = null;
+
+		// 从消息中提取 @mentions
+		const mentionedInMessage = (input.match(/@([\w\u4e00-\u9fa5]+)/g) || []).map(m => m.slice(1));
+		
+		// 合并 selectedSkills 和 @mentions（去重）
+		const combinedSkills = Array.from(new Set([...selectedSkills, ...mentionedInMessage]));
+
+		try {
+			const userId = localStorage.getItem('userId');
+			const response = await fetch('/api/pi-chat', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					message: messageToSend,
+					sessionId: sessionId || undefined,
+					userId: userId || undefined,
+					skills: combinedSkills,
+					abort: true,
+				}),
+				signal: abortControllerRef.current.signal,
+			});
+
+			if (!response.ok) {
+				throw new Error(`请求失败: ${response.status}`);
+			}
+
+			const reader = response.body?.getReader();
+			const decoder = new TextDecoder();
+
+			if (!reader) {
+				throw new Error('No response body');
+			}
+
+			let buffer = '';
+
+			while (true) {
+				const { done, value } = await reader.read();
+				if (done) break;
+
+				buffer += decoder.decode(value, { stream: true });
+				const lines = buffer.split('\n');
+				buffer = lines.pop() || '';
+
+				for (const line of lines) {
+					const event = parseSSELine(line);
+					if (!event) continue;
+
+					switch (event.type) {
+						case 'session_start':
+						case 'session_restored':
+							if (event.sessionId) {
+								setSessionId(event.sessionId);
+							}
+							break;
+
+						case 'text':
+							assistantContent += event.content || '';
+							setMessages((prev) => {
+								const existing = prev.find((m) => m.id === assistantMessageId);
+								if (existing) {
+									return prev.map((m) =>
+										m.id === assistantMessageId
+											? { ...m, content: assistantContent, isStreaming: true }
+											: m,
+									);
+								} else {
+									return [
+										...prev,
+										{
+											id: assistantMessageId,
+											role: 'assistant',
+											content: assistantContent,
+											timestamp: new Date(),
+											isStreaming: true,
+										},
+									];
+								}
+							});
+							break;
+
+						case 'thinking':
+							// Capture thinking content - update directly in message
+							setMessages((prev) => prev.map((m) => {
+								if (m.id !== assistantMessageId) return m;
+								return {
+									...m,
+									chainOfThought: {
+										isStreaming: true,
+										thinking: (m.chainOfThought?.thinking || '') + (event.content || ''),
+										toolExecutions: m.chainOfThought?.toolExecutions || [],
+									},
+								};
+							}));
+							break;
+
+						case 'tool_start':
+							setCurrentTool(event.toolName || null);
+							// Start tracking tool execution - update directly in message
+							setMessages((prev) => prev.map((m) => {
+								if (m.id !== assistantMessageId) return m;
+								return {
+									...m,
+									chainOfThought: {
+										isStreaming: true,
+										thinking: m.chainOfThought?.thinking || '',
+										toolExecutions: [
+											...(m.chainOfThought?.toolExecutions || []),
+											{
+												toolName: event.toolName || '',
+												startTime: new Date(),
+												input: event.args,
+											},
+										],
+									},
+								};
+							}));
+							break;
+
+						case 'tool_end':
+							setCurrentTool(null);
+							break;
+
+						case 'tool_output':
+							// Capture tool output for chain-of-thought display - update directly in message
+							if (event.content) {
+								try {
+									let result = JSON.parse(event.content);
+									// Handle double-encoded JSON: if result is a string that looks like JSON, parse it again
+									if (typeof result === 'string' && (result.startsWith('{') || result.startsWith('['))) {
+										try {
+											result = JSON.parse(result);
+										} catch {
+											// Keep as string if second parse fails
+										}
+									}
+									setMessages((prev) => prev.map((m) => {
+										if (m.id !== assistantMessageId) return m;
+										const tools = [...(m.chainOfThought?.toolExecutions || [])];
+										const lastTool = tools[tools.length - 1];
+
+										if (lastTool && !lastTool.output) {
+											lastTool.output = result;
+											lastTool.isError = event.isError;
+											lastTool.endTime = new Date();
+										}
+
+										return {
+											...m,
+											chainOfThought: {
+												isStreaming: m.chainOfThought?.isStreaming ?? true,
+												thinking: m.chainOfThought?.thinking || '',
+												toolExecutions: tools,
+											},
+										};
+									}));
+
+									// Keep existing ticket creation logic
+									if (event.toolName === 'create_ticket' && result.details?.success && result.details.ticket) {
+										const ticket = result.details.ticket;
+										createdTicket = {
+											id: ticket.id,
+											title: ticket.title,
+											type: ticket.type,
+											status: ticket.status,
+											priority: ticket.priority,
+											description: ticket.description,
+										};
+									}
+								} catch (e) {
+									console.error('[pi-chat] Failed to parse tool output:', e);
+								}
+							}
+							break;
+
+						case 'error':
+							setMessages((prev) => [
+								...prev,
+								{
+									id: generateUUID(),
+									role: 'system',
+									content: `❌ 错误: ${event.error || '未知错误'}`,
+									timestamp: new Date(),
+								},
+							]);
+							break;
+
+						case 'message_end':
+							// 处理消息中的错误（如 API 限流、认证错误等）
+							if (event.message?.stopReason === 'error' && event.message?.errorMessage) {
+								setMessages((prev) => [
+									...prev,
+									{
+										id: generateUUID(),
+										role: 'system',
+										content: `❌ API 错误: ${event.message.errorMessage}`,
+										timestamp: new Date(),
+									},
+								]);
+							}
+							break;
+
+						case 'agent_end':
+							// 检查 agent 结束时的错误
+							if (event.messages) {
+								for (const msg of event.messages) {
+									if (msg.stopReason === 'error' && msg.errorMessage) {
+										// 错误已在 message_end 中处理，这里避免重复
+										break;
+									}
+								}
+							}
+							break;
+
+						case 'turn_end':
+							// Mark chain-of-thought as complete - update directly in message
+							setMessages((prev) => prev.map((m) => {
+								if (m.id !== assistantMessageId) return m;
+								if (!m.chainOfThought) return m;
+								return {
+									...m,
+									chainOfThought: {
+										...m.chainOfThought,
+										isStreaming: false,
+									},
+								};
+							}));
+							// Extract ticket from tool results (only if we haven't found one yet)
+							if (!createdTicket && event.toolResults && Array.isArray(event.toolResults) && event.toolResults.length > 0) {
+								for (const result of event.toolResults) {
+									if (result.toolName === 'create_ticket' && result.details?.ticket) {
+										const ticket = result.details.ticket;
+										createdTicket = {
+											id: ticket.id,
+											title: ticket.title,
+											type: ticket.type,
+											status: ticket.status,
+											priority: ticket.priority,
+											description: ticket.description,
+										};
+										break;
+									}
+								}
+							}
+							break;
+					}
+				}
+			}
+
+			setMessages((prev) =>
+				prev.map((m) =>
+					m.id === assistantMessageId
+						? { ...m, isStreaming: false, ticket: createdTicket || undefined }
+						: m,
+				),
+			);
+
+		} catch (error: unknown) {
+			if ((error as Error).name === 'AbortError') {
+				setMessages((prev) => [
+					...prev,
+					{
+						id: generateUUID(),
+						role: 'system',
+						content: '\n⏸️ 已停止',
+						timestamp: new Date(),
+					},
+				]);
+			} else {
+				// Enhanced error logging
+				console.error('[pi-chat] Stream error:', {
+					name: (error as Error).name,
+					message: (error as Error).message,
+					stack: (error as Error).stack,
+				});
+				
+				setMessages((prev) => [
+					...prev,
+					{
+						id: generateUUID(),
+						role: 'system',
+						content: `\n❌ 错误: ${error instanceof Error ? error.message : '未知错误'}`,
+						timestamp: new Date(),
+					},
+				]);
+			}
+		} finally {
+			setLoading(false);
+			setCurrentTool(null);
+			abortControllerRef.current = null;
+			// 刷新会话列表以更新标题
+			loadSessions();
+		}
+	};
+
+	const handleStop = async () => {
+		// Abort HTTP request
+		if (abortControllerRef.current) {
+			abortControllerRef.current.abort();
+		}
+
+		// Also abort on backend
+		if (sessionId) {
+			try {
+				await fetch(`/api/pi-chat?sessionId=${sessionId}`, { method: 'PUT' });
+			} catch (e) {
+				// Ignore errors
+			}
+		}
+
+		setLoading(false);
+		setCurrentTool(null);
+	};
+
+	const handleKeyPress = (e: React.KeyboardEvent) => {
+		if (e.key === 'Enter' && !e.shiftKey && !loading) {
+			e.preventDefault();
+			handleSend();
+		}
+	};
+
+	// 刷新面板数据
+	const refreshPanel = () => {
+		setRefreshKey(prev => prev + 1);
+	};
+
+	// 处理工单操作（审批/拒绝/执行）
+	const handleTicketAction = async (ticketId: string, action: 'approve' | 'reject' | 'execute') => {
+		let resultMessage = '';
+		let resultType: 'success' | 'error' = 'success';
+
+		// 先获取工单信息用于显示
+		let ticketInfo = '';
+		let currentTicket: Ticket | null = null;
+		try {
+			const ticketResponse = await fetch(`/api/tickets/${ticketId}`);
+			if (ticketResponse.ok) {
+				const ticketData = await ticketResponse.json();
+				currentTicket = ticketData.ticket;
+				if (currentTicket) {
+					ticketInfo = `**工单:** ${currentTicket.title}\n**ID:** ${ticketId}\n\n`;
+				}
+			}
+		} catch (e) {
+			// 如果获取工单信息失败，至少显示 ID
+			ticketInfo = `**工单 ID:** ${ticketId}\n\n`;
+		}
+
+		try {
+			if (action === 'execute') {
+				// Check if ticket is in correct status
+				if (currentTicket && currentTicket.status !== 'approved') {
+					resultMessage = `❌ 无法执行\n\n${ticketInfo}工单状态为 ${currentTicket.status}，必须是已批准状态才能执行。`;
+					resultType = 'error';
+				} else {
+					const response = await fetch(`/api/tickets/${ticketId}/execute`, {
+						method: 'POST',
+						headers: { 'Content-Type': 'application/json' },
+						body: JSON.stringify({ ticketId }),
+					});
+					const data = await response.json();
+
+					if (response.ok && data.success) {
+						resultMessage = `✅ 工单执行成功\n\n${ticketInfo}${data.output || '操作已完成'}`;
+					} else {
+						resultMessage = `❌ 工单执行失败\n\n${ticketInfo}${data.error || '未知错误'}`;
+						resultType = 'error';
+					}
+				}
+
+				// 刷新侧边栏
+				refreshPanel();
+			} else {
+				// approve 或 reject
+				const response = await fetch(`/api/tickets/${ticketId}/approve`, {
+					method: 'POST',
+					headers: { 'Content-Type': 'application/json' },
+					body: JSON.stringify({
+						action,
+						approver: 'user',
+						comment: '',
+					}),
+				});
+				const data = await response.json();
+
+				if (response.ok) {
+					resultMessage = action === 'approve'
+						? `✅ 工单已批准\n\n${ticketInfo}工单已批准，可以执行。`
+						: `✅ 工单已拒绝\n\n${ticketInfo}工单已被拒绝。`;
+				} else {
+					resultMessage = `❌ 操作失败\n\n${ticketInfo}${data.error || '未知错误'}`;
+					resultType = 'error';
+				}
+
+				// 刷新侧边栏
+				refreshPanel();
+			}
+		} catch (error) {
+			resultMessage = `❌ 操作失败\n\n${ticketInfo}${error instanceof Error ? error.message : '未知错误'}`;
+			resultType = 'error';
+		}
+
+		// 将操作结果作为系统消息添加到对话
+		setMessages((prev) => [
+			...prev,
+			{
+				id: generateUUID(),
+				role: 'system',
+				content: resultMessage,
+				timestamp: new Date(),
+			},
+		]);
+	};
+
+	// 未配置时显示设置引导
+	if (!configChecked) {
+		return (
+			<div className="h-full flex items-center justify-center">
+				<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+			</div>
+		);
+	}
+
+	if (!isConfigured) {
+		return (
+			<div className="h-full overflow-auto bg-background">
+				<SetupGuide />
+			</div>
+		);
+	}
+
+	return (
+		<>
+			{!isLoggedIn ? (
+				<WelcomeGuide />
+			) : (
+				<div className="h-full flex bg-background">
+			{/* 左侧会话列表 */}
+			<div className={cn(
+				"bg-card border-r flex flex-col transition-all duration-300 flex-shrink-0",
+				sessionSidebarOpen ? "w-64" : "w-0 overflow-hidden"
+			)}>
+				{/* 会话列表头部 */}
+				<div className="px-3 py-3 border-b flex items-center justify-between">
+					<span className="text-sm font-medium">会话列表</span>
+					<Button
+						variant="ghost"
+						size="sm"
+						onClick={createNewSession}
+						className="h-7 px-2"
+						title="新建会话"
+					>
+						<Plus className="h-4 w-4" />
+					</Button>
+				</div>
+
+				{/* 会话列表 */}
+				<div className="flex-1 overflow-y-auto">
+					{sessions.length === 0 ? (
+						<div className="px-3 py-4 text-center text-sm text-muted-foreground">
+							暂无会话记录
+						</div>
+					) : (
+						<div className="py-1">
+							{sessions.map((session) => (
+								<div
+									key={session.sessionId}
+									className={cn(
+										"px-3 py-2 mx-1 rounded-lg cursor-pointer group flex items-start gap-2",
+										session.sessionId === sessionId
+											? "bg-primary/10 text-primary"
+											: "hover:bg-muted"
+									)}
+									onClick={() => switchSession(session.sessionId)}
+								>
+									<MessageSquare className="h-4 w-4 mt-0.5 flex-shrink-0" />
+									<div className="flex-1 min-w-0">
+										<div className="text-sm truncate">
+											{getSessionTitle(session)}
+										</div>
+										<div className="text-xs text-muted-foreground mt-0.5">
+											{new Date(session.lastAccessedAt).toLocaleDateString('zh-CN')}
+										</div>
+									</div>
+									<Button
+										variant="ghost"
+										size="sm"
+										onClick={(e) => {
+											e.stopPropagation();
+											deleteSession(session.sessionId);
+										}}
+										className="h-6 w-6 p-0 opacity-0 group-hover:opacity-100"
+										title="删除会话"
+									>
+										<Trash2 className="h-3 w-3" />
+									</Button>
+								</div>
+							))}
+						</div>
+					)}
+				</div>
+
+				{/* 底部：新建会话按钮 */}
+				<div className="p-2 border-t">
+					<Button
+						variant="outline"
+						size="sm"
+						onClick={createNewSession}
+						className="w-full"
+					>
+						<Plus className="h-4 w-4 mr-1" />
+						新建会话
+					</Button>
+				</div>
+			</div>
+
+			{/* 会话边栏折叠按钮 */}
+			<Button
+				variant="ghost"
+				size="icon"
+				onClick={() => setSessionSidebarOpen(!sessionSidebarOpen)}
+				className="absolute left-0 top-1/2 -translate-y-1/2 z-10 h-8 w-6 rounded-r-md bg-card border border-l-0 shadow-sm"
+				style={{ left: sessionSidebarOpen ? '256px' : '0' }}
+			>
+				{sessionSidebarOpen ? (
+					<ChevronLeft className="h-4 w-4" />
+				) : (
+					<ChevronRight className="h-4 w-4" />
+				)}
+			</Button>
+
+			{/* 主聊天区域 */}
+			<div className="flex-1 flex flex-col min-w-0">
+				{/* 顶部标题栏 */}
+				<header className="bg-card border-b flex-shrink-0">
+					<div className="px-4 py-3">
+						<div className="flex items-center justify-between gap-4">
+							<div className="flex items-center gap-3">
+							<SkillSwitcher
+								skills={availableSkills}
+								selectedSkills={selectedSkills}
+								onSkillsChange={setSelectedSkills}
+							/>
+							<button
+								onClick={() => setKnowledgePickerOpen(true)}
+								className="flex items-center gap-1.5 px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
+							>
+								<BookOpen className="w-4 h-4 text-gray-500" />
+								<span className="text-sm text-gray-600">知识库</span>
+							</button>
+							</div>
+							<div className="flex items-center gap-1.5">
+								{/* 结束会话并分析 */}
+								<Button
+									variant="outline"
+									size="sm"
+									onClick={() => setAnalysisDialogOpen(true)}
+									className="h-8"
+								>
+									<Bot className="h-4 w-4 mr-1" />
+									整理保存
+								</Button>
+
+								{/* 分享按钮 */}
+								<Button
+									variant="outline"
+									size="sm"
+									onClick={async () => {
+										if (!sessionId) return;
+										const shareUrl = `${window.location.origin}/share/${sessionId}`;
+										if (navigator?.clipboard?.writeText) {
+											await navigator.clipboard.writeText(shareUrl);
+										} else {
+											const input = document.createElement('input');
+											input.value = shareUrl;
+											document.body.appendChild(input);
+											input.select();
+											document.execCommand('copy');
+											document.body.removeChild(input);
+										}
+										setShareCopied(true);
+										setTimeout(() => setShareCopied(false), 2000);
+									}}
+									disabled={!sessionId}
+									className="h-8"
+									title="复制分享链接"
+								>
+									{shareCopied ? <Check className="h-4 w-4 mr-1" /> : <Share2 className="h-4 w-4 mr-1" />}
+									{shareCopied ? '已复制' : '分享'}
+								</Button>
+
+								{/* 分屏按钮 */}
+								<Button
+									variant={sidePanel === 'tickets' ? 'default' : 'outline'}
+									size="sm"
+									onClick={() => setSidePanel(sidePanel === 'tickets' ? 'none' : 'tickets')}
+									className="h-8"
+								>
+									<ClipboardList className="h-4 w-4 mr-1" />
+									工单
+								</Button>
+								<Button
+									variant={sidePanel === 'approvals' ? 'default' : 'outline'}
+									size="sm"
+									onClick={() => setSidePanel(sidePanel === 'approvals' ? 'none' : 'approvals')}
+									className="h-8"
+								>
+									<CheckCircle className="h-4 w-4 mr-1" />
+									审核
+								</Button>
+
+								<Button
+									variant="ghost"
+									size="icon"
+									onClick={() => {
+										setMessages([]); // chain-of-thought 会随消息一起清空
+									}}
+									className="h-8 w-8"
+									title="清空对话"
+								>
+									<Trash2 className="h-4 w-4" />
+								</Button>
+							</div>
+						</div>
+					</div>
+				</header>
+
+				{/* 消息区域 */}
+				<div ref={scrollContainerRef} className="flex-1 overflow-y-auto p-4">
+					<div className="w-full px-4 space-y-6">
+						{messages.length === 0 && (
+							<div className="flex justify-center items-center h-full">
+								<div className="bg-muted/50 border rounded-xl px-6 py-5 max-w-md text-center">
+									<Bot className="h-10 w-10 mx-auto mb-3 text-primary" />
+									<p className="font-medium mb-2">智能助手</p>
+									<p className="text-sm text-muted-foreground mb-3">执行命令、创建工单、定时任务</p>
+									<p className="text-xs text-muted-foreground/70">所有危险操作都需要审核批准</p>
+								</div>
+							</div>
+						)}
+
+						{/* 智能推荐横幅 */}
+						{userId && messages.length > 0 && messages.length < 3 && (
+							<RecommendationBanner
+								userId={userId}
+								onInstallAndUse={async (skillName) => {
+									try {
+										await fetch('/api/user/skills', {
+											method: 'POST',
+											headers: { 'Content-Type': 'application/json' },
+											body: JSON.stringify({
+												userId,
+												action: 'install',
+												skillName,
+												source: 'market',
+											}),
+										});
+										setSelectedSkills([...selectedSkills, skillName]);
+									} catch (error) {
+										console.error('Failed to install skill:', error);
+									}
+								}}
+							/>
+						)}
+
+						{/* 会话整理保存对话框 */}
+						{sessionId && userId && (
+							<OrganizeDialog
+								sessionId={sessionId}
+								userId={userId}
+								messages={messages}
+								open={analysisDialogOpen}
+								onOpenChange={setAnalysisDialogOpen}
+							/>
+						)}
+
+						{/* 知识库选择弹框 */}
+						<KnowledgePickerDialog
+							open={knowledgePickerOpen}
+							onOpenChange={setKnowledgePickerOpen}
+							onSelect={(knowledge) => {
+								setInput(prev => prev + `@doc:${knowledge.title}`);
+							}}
+						/>
+
+						{messages.map((message) => (
+							<div key={message.id} className={cn('flex gap-3', message.role === 'user' && 'flex-row-reverse')}>
+								{message.role === 'system' ? (
+									<div className="flex justify-center w-full">
+										<div className="bg-destructive/10 border border-destructive/20 rounded-lg px-4 py-2 text-sm text-destructive">
+											<p>{message.content}</p>
+										</div>
+									</div>
+								) : (
+									<>
+										{/* Avatar column */}
+										<div className="flex flex-col items-center gap-1 flex-shrink-0">
+											{message.role === 'assistant' && (
+												<div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
+													<Bot className="h-5 w-5 text-primary" />
+												</div>
+											)}
+											{message.role === 'user' && (
+												<div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center">
+													<User className="h-5 w-5 text-primary-foreground" />
+												</div>
+											)}
+											{/* Timestamp - always below avatar */}
+											<div className={cn('text-xs opacity-60', message.role === 'user' && 'text-right')}>
+												{new Date(message.timestamp).toLocaleTimeString('zh-CN')}
+											</div>
+										</div>
+
+										{/* Message content column */}
+										<div className={cn('flex flex-col flex-1', message.role === 'user' && 'items-end')}>
+											<div
+												className={cn(
+													'rounded-2xl px-4 py-3',
+													message.role === 'user'
+														? 'max-w-[70%] bg-primary text-primary-foreground'
+														: 'w-full bg-muted text-foreground'
+												)}
+											>
+												{/* Chain-of-Thought Display - 使用嵌入消息的 chainOfThought */}
+												{message.role === 'assistant' && message.chainOfThought && (
+													<ChainOfThought
+														key={`cot-${message.id}`}
+														defaultOpen={message.chainOfThought.isStreaming}
+													>
+														<ChainOfThoughtHeader>
+															{message.chainOfThought.isStreaming ? '思考中...' : '思考过程'}
+														</ChainOfThoughtHeader>
+														<ChainOfThoughtContent>
+															{/* Thinking Section */}
+															{message.chainOfThought.thinking.trim().length > 0 && (
+																<ChainOfThoughtStep
+																	icon={Brain}
+																	label="思考"
+																	status={message.chainOfThought.isStreaming ? 'active' : 'complete'}
+																>
+																	<div className="text-muted-foreground whitespace-pre-wrap">
+																		{message.chainOfThought.thinking}
+																	</div>
+																</ChainOfThoughtStep>
+															)}
+
+															{/* Tool Executions Section */}
+															{message.chainOfThought.toolExecutions.map((tool, idx) => (
+																<ChainOfThoughtStep
+																	key={`${message.id}-tool-${idx}`}
+																	label={tool.toolName === 'bash' && tool.input?.command
+																		? `执行: ${tool.input.command}`
+																		: tool.toolName}
+																	status={!tool.endTime ? 'active' : tool.isError ? 'pending' : 'complete'}
+																>
+																	{/* Input for other tools */}
+																	{tool.toolName !== 'bash' && tool.input && (
+																		<div className="mt-2 text-xs">
+																			<strong>输入:</strong>
+																			<pre className="mt-1 overflow-x-auto bg-muted rounded p-2">
+																				{typeof tool.input === 'string' ? tool.input : JSON.stringify(tool.input, null, 2)}
+																			</pre>
+																		</div>
+																	)}
+
+																	{/* Output with better formatting */}
+																	{tool.output && (
+																		<div className="mt-2 text-xs">
+																			<strong>输出:</strong>
+																			{(() => {
+																				// Handle pi-coding-agent output format: { content: [{ type: "text", text: "..." }] }
+																				if (tool.toolName === 'bash' && typeof tool.output === 'object' && tool.output.content) {
+																					const textContent = tool.output.content
+																						?.filter((item: any) => item?.type === 'text')
+																						?.map((item: any) => item?.text || '')
+																						?.join('\n') || '';
+																					const exitCode = tool.output.details?.exitCode ?? 0;
+																					return (
+																						<pre className={cn(
+																							"mt-1 overflow-x-auto rounded p-2 whitespace-pre-wrap break-all",
+																							exitCode === 0 ? "bg-muted" : "bg-destructive/10"
+																						)}>
+																							{textContent || JSON.stringify(tool.output, null, 2)}
+																						</pre>
+																					);
+																				}
+																				// Handle traditional bash output format: { stdout, stderr, exitCode }
+																				if (tool.toolName === 'bash' && typeof tool.output === 'object' && tool.output.stdout !== undefined) {
+																					return (
+																						<pre className={cn(
+																							"mt-1 overflow-x-auto rounded p-2 whitespace-pre-wrap break-all",
+																							tool.output.exitCode === 0 ? "bg-muted" : "bg-destructive/10"
+																						)}>
+																							{tool.output.stdout || ''}
+																							{tool.output.stderr && (
+																								<div className="text-destructive mt-1">{tool.output.stderr}</div>
+																							)}
+																						</pre>
+																					);
+																				}
+																				// Fallback for other tools or string output
+																				return (
+																					<pre className="mt-1 overflow-x-auto bg-muted rounded p-2">
+																						{typeof tool.output === 'string' ? tool.output : JSON.stringify(tool.output, null, 2)}
+																					</pre>
+																				);
+																			})()}
+																		</div>
+																	)}
+																</ChainOfThoughtStep>
+															))}
+														</ChainOfThoughtContent>
+													</ChainOfThought>
+												)}
+												{/* Message Content */}
+												{message.role === 'assistant' ? (
+													<MessageResponse>{convertSkillNamesForDisplay(message.content)}</MessageResponse>
+												) : (
+													<span>{convertSkillNamesForDisplay(message.content)}</span>
+												)}
+											</div>
+											{/* Action buttons below message */}
+											{message.role === 'assistant' && (
+												<div className="flex items-center gap-2 mt-2">
+													{/* 工单操作按钮 */}
+													{message.ticket && !message.isStreaming && (
+														<TicketActionButtons
+															ticketId={message.ticket.id}
+															ticketStatus={message.ticket.status}
+															onAction={handleTicketAction}
+															onViewDetails={async () => {
+																setLoadingTicket(true);
+																try {
+																	const response = await fetch(`/api/tickets/${message.ticket!.id}`);
+																	if (response.ok) {
+																		const data = await response.json();
+																		setSelectedTicket(data.ticket);
+																		setTicketDialogOpen(true);
+																	}
+																} finally {
+																	setLoadingTicket(false);
+																}
+															}}
+															loadingTicket={loadingTicket}
+														/>
+													)}
+													{/* 流式状态 */}
+													{message.isStreaming && (
+														<span className="text-xs text-primary flex items-center gap-1">
+															<span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse"></span>
+															输入中...
+														</span>
+													)}
+												</div>
+											)}
+										</div>
+									</>
+								)}
+							</div>
+						))}
+
+						{/* 当前工具状态 */}
+						{currentTool && (
+							<div className="flex justify-center">
+								<div className="bg-primary/10 border border-primary/20 rounded-lg px-4 py-2 text-sm text-primary flex items-center gap-2">
+									<span className="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
+									正在执行: <code className="bg-primary/20 px-2 py-0.5 rounded">{currentTool}</code>
+								</div>
+							</div>
+						)}
+					</div>
+				</div>
+
+				{/* Scroll mode toggle and scroll to bottom button */}
+				<div className="fixed bottom-28 right-8 z-50 flex flex-col gap-2">
+					{/* Scroll mode indicator/toggle */}
+					<Button
+						onClick={() => {
+							const newMode = scrollMode === 'auto' ? 'follow' : 'auto';
+							setScrollMode(newMode);
+							if (newMode === 'auto') {
+								scrollToBottom(true);
+							}
+						}}
+						className={cn(
+							"rounded-full shadow-lg",
+							scrollMode === 'auto' 
+								? "bg-muted-foreground/80 hover:bg-muted-foreground/90 text-background" 
+								: "bg-secondary hover:bg-secondary/80 text-foreground"
+						)}
+						size="sm"
+						variant="default"
+					>
+						{scrollMode === 'auto' ? (
+							<><ChevronDown className="h-3 w-3 mr-1" /><span className="text-xs">自动</span></>
+						) : (
+							<span className="text-xs px-1">跟随</span>
+						)}
+					</Button>
+					
+					{/* Scroll to bottom button - shows when not at bottom */}
+					{showScrollButton && (
+						<Button
+							onClick={() => {
+								setScrollMode('auto');
+								scrollToBottom(true);
+							}}
+							className="rounded-full shadow-lg bg-primary hover:bg-primary/90"
+							size="default"
+							variant="default"
+						>
+							<ChevronDown className="h-4 w-4 mr-1" />
+							<span className="text-sm">最新</span>
+						</Button>
+					)}
+				</div>
+
+				{/* 输入区域 */}
+				<div className="p-4 border-t bg-card flex-shrink-0">
+					{loading && (
+						<div className="flex items-center justify-between mb-2">
+							<div className="flex items-center gap-2">
+								<div className="w-2 h-2 rounded-full bg-primary animate-pulse"></div>
+								<span className="text-xs text-muted-foreground">{currentTool ? `正在执行: ${currentTool}` : 'AI 正在思考...'}</span>
+							</div>
+							<Button variant="destructive" size="sm" onClick={handleStop} className="h-7">
+								停止
+							</Button>
+						</div>
+					)}
+					<div className="mb-2">
+						<MentionInput
+							skills={availableSkills}
+							value={input}
+							onChange={setInput}
+							onSend={handleSend}
+							disabled={loading}
+							attachedFiles={attachedFiles}
+							onFileAttach={handleFileAttach}
+							onFileRemove={handleFileRemove}
+							uploading={uploading}
+						/>
+					</div>
+					<div className="flex items-center gap-2 text-xs text-muted-foreground">
+						<span>💡</span>
+						<button onClick={() => setInput('查看当前目录')} className="hover:text-foreground">列出文件</button>
+						<span>•</span>
+						<button onClick={() => setInput('系统信息')} className="hover:text-foreground">系统状态</button>
+						<span>•</span>
+						<button onClick={() => setInput('帮我创建一个执行任务的工单')} className="hover:text-foreground">创建工单</button>
+					</div>
+				</div>
+			</div>
+
+			{/* 右侧面板 */}
+			{sidePanel !== 'none' && (
+				<div className="w-96 bg-card border-l flex flex-col shadow-lg flex-shrink-0">
+					{/* 面板标题栏 */}
+					<div className="px-4 py-3 border-b flex items-center justify-between bg-muted/30">
+						<h2 className="text-sm font-semibold">
+							{sidePanel === 'tickets' && (
+								<span className="flex items-center gap-2">
+									<ClipboardList className="h-4 w-4" />
+									工单列表
+								</span>
+							)}
+							{sidePanel === 'approvals' && (
+								<span className="flex items-center gap-2">
+									<CheckCircle className="h-4 w-4" />
+									审核队列
+								</span>
+							)}
+						</h2>
+						<Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setSidePanel('none')}>
+							<X className="h-4 w-4" />
+						</Button>
+					</div>
+
+					{/* 面板内容 */}
+					<div className="flex-1 overflow-auto">
+						{sidePanel === 'tickets' && (
+							<TicketsPanel
+								key={`${refreshKey}-${sessionId}`}
+								sessionId={sessionId}
+								onTicketClick={async (id) => {
+									setLoadingTicket(true);
+									try {
+										const response = await fetch(`/api/tickets/${id}`);
+										if (response.ok) {
+											const data = await response.json();
+											setSelectedTicket(data.ticket);
+											setTicketDialogOpen(true);
+										}
+									} finally {
+										setLoadingTicket(false);
+									}
+								}}
+							/>
+						)}
+						{sidePanel === 'approvals' && (
+							<ApprovalsPanel
+								key={`${refreshKey}-${sessionId}`}
+								sessionId={sessionId}
+								onTicketClick={async (id) => {
+									setLoadingTicket(true);
+									try {
+										const response = await fetch(`/api/tickets/${id}`);
+										if (response.ok) {
+											const data = await response.json();
+											setSelectedTicket(data.ticket);
+											setTicketDialogOpen(true);
+										}
+									} finally {
+										setLoadingTicket(false);
+									}
+								}}
+							/>
+						)}
+					</div>
+				</div>
+			)}
+
+			{/* 工单详情对话框 */}
+			<Dialog open={ticketDialogOpen} onOpenChange={setTicketDialogOpen}>
+				<DialogContent className="max-w-3xl w-[90vw] max-h-[85vh] overflow-hidden flex flex-col">
+					{selectedTicket && (
+						<>
+							<DialogHeader>
+								<DialogTitle>工单详情</DialogTitle>
+								<DialogDescription>{selectedTicket.id}</DialogDescription>
+							</DialogHeader>
+							<div className="overflow-y-auto flex-1">
+								<TicketDetailContent
+								ticket={selectedTicket}
+								onApprove={async () => {
+									await handleTicketAction(selectedTicket.id, 'approve');
+									const response = await fetch(`/api/tickets/${selectedTicket.id}`);
+									if (response.ok) {
+										const data = await response.json();
+										setSelectedTicket(data.ticket);
+									}
+								}}
+								onReject={async () => {
+									await handleTicketAction(selectedTicket.id, 'reject');
+									const response = await fetch(`/api/tickets/${selectedTicket.id}`);
+									if (response.ok) {
+										const data = await response.json();
+										setSelectedTicket(data.ticket);
+									}
+								}}
+								onExecute={async () => {
+									await handleTicketAction(selectedTicket.id, 'execute');
+									const response = await fetch(`/api/tickets/${selectedTicket.id}`);
+									if (response.ok) {
+										const data = await response.json();
+										setSelectedTicket(data.ticket);
+									}
+								}}
+							/>
+							</div>
+						</>
+					)}
+				</DialogContent>
+			</Dialog>
+		</div>
+			)}
+		</>
+	);
+}
+
+// 工单列表面板
+function TicketsPanel({ sessionId, onTicketClick }: { sessionId: string | null; onTicketClick: (id: string) => void }) {
+	const [tickets, setTickets] = useState<any[]>([]);
+	const [loading, setLoading] = useState(true);
+
+	useEffect(() => {
+		async function load() {
+			try {
+				const url = sessionId 
+					? `/api/tickets?aiSessionId=${sessionId}&limit=20` 
+					: '/api/tickets?limit=20';
+				const response = await fetch(url);
+				if (!response.ok) throw new Error('Failed to load tickets');
+				const data = await response.json();
+				const tickets = data.tickets || [];
+				setTickets(Array.isArray(tickets) ? tickets.slice(0, 20) : []);
+			} catch (error) {
+				console.error('Failed to load tickets:', error);
+				setTickets([]);
+			} finally {
+				setLoading(false);
+			}
+		}
+		load();
+	}, [sessionId]);
+
+	if (loading) return <div className="text-center text-muted-foreground text-sm py-4">加载中...</div>;
+
+	return (
+		<div className="p-3 space-y-2">
+			{tickets.map((ticket) => (
+				<div
+					key={ticket.id}
+					onClick={() => onTicketClick(ticket.id)}
+					className="p-3 bg-muted/30 hover:bg-muted rounded-lg cursor-pointer transition-colors"
+				>
+					<div className="flex items-start justify-between mb-1">
+						<span className="font-medium text-sm">{ticket.title}</span>
+						<StatusBadge status={ticket.status} />
+					</div>
+					<div className="text-xs text-muted-foreground">
+						{ticket.type === 'bash-execute' ? '命令执行' : 'Skill 脚本'} · {ticket.riskLevel || 'medium'}
+					</div>
+				</div>
+			))}
+			{tickets.length === 0 && (
+				<div className="text-center text-muted-foreground text-sm py-8">暂无工单</div>
+			)}
+		</div>
+	);
+}
+
+// 审核队列面板
+function ApprovalsPanel({ sessionId, onTicketClick }: { sessionId: string | null; onTicketClick: (id: string) => void }) {
+	const [tickets, setTickets] = useState<any[]>([]);
+	const [loading, setLoading] = useState(true);
+
+	useEffect(() => {
+		async function load() {
+			try {
+				const url = sessionId 
+					? `/api/tickets?status=pending&aiSessionId=${sessionId}` 
+					: '/api/tickets?status=pending';
+				const response = await fetch(url);
+				const data = await response.json();
+				setTickets(data.tickets || []);
+			} catch (error) {
+				console.error('Failed to load approvals:', error);
+			} finally {
+				setLoading(false);
+			}
+		}
+		load();
+	}, [sessionId]);
+
+	if (loading) return <div className="text-center text-muted-foreground text-sm py-4">加载中...</div>;
+
+	return (
+		<div className="p-3 space-y-2">
+			{tickets.map((ticket) => (
+				<div
+					key={ticket.id}
+					onClick={() => onTicketClick(ticket.id)}
+					className="p-3 bg-muted/30 hover:bg-muted rounded-lg cursor-pointer transition-colors"
+				>
+					<div className="font-medium text-sm">{ticket.title}</div>
+					<div className="text-xs text-muted-foreground mt-1">
+						{ticket.type === 'bash-execute' ? '命令执行' : 'Skill 脚本'} · {ticket.riskLevel || 'medium'}
+					</div>
+				</div>
+			))}
+			{tickets.length === 0 && (
+				<div className="text-center text-muted-foreground text-sm py-8">暂无待审核工单</div>
+			)}
+		</div>
+	);
+}
+
+// 工单详情面板
+	function TicketDetailPanel({ ticketId, onClose }: { ticketId: string; onClose: () => void }) {
+		const [ticket, setTicket] = useState<any>(null);
+		const [loading, setLoading] = useState(true);
+		const [approving, setApproving] = useState(false);
+		const [comment, setComment] = useState('');
+
+		const loadTicket = async () => {
+			setLoading(true);
+			try {
+				const response = await fetch(`/api/tickets/${ticketId}`);
+				if (response.ok) {
+					const data = await response.json();
+					setTicket(data.ticket || null);
+				} else {
+					setTicket(null);
+				}
+			} catch (error) {
+				console.error('Failed to load ticket:', error);
+				setTicket(null);
+			} finally {
+				setLoading(false);
+			}
+		};
+
+		useEffect(() => {
+			loadTicket();
+		}, [ticketId]);
+
+		const handleApprove = async () => {
+			setApproving(true);
+			try {
+				const response = await fetch(`/api/tickets/${ticketId}/approve`, {
+					method: 'POST',
+					headers: { 'Content-Type': 'application/json' },
+					body: JSON.stringify({
+						action: 'approve',
+						approver: 'user',
+						comment,
+					}),
+				});
+				if (response.ok) {
+					const data = await response.json();
+					setTicket(data.ticket || null);
+					setComment('');
+				}
+			} finally {
+				setApproving(false);
+			}
+		};
+
+		const handleReject = async () => {
+			setApproving(true);
+			try {
+				const response = await fetch(`/api/tickets/${ticketId}/approve`, {
+					method: 'POST',
+					headers: { 'Content-Type': 'application/json' },
+					body: JSON.stringify({
+						action: 'reject',
+						approver: 'user',
+						comment,
+					}),
+				});
+				if (response.ok) {
+					const data = await response.json();
+					setTicket(data.ticket || null);
+					setComment('');
+				}
+			} finally {
+				setApproving(false);
+			}
+		};
+
+		const handleExecute = async () => {
+			setApproving(true);
+			// Immediately update UI to show executing state
+			setTicket((prev: Ticket | null) => prev ? { ...prev, status: 'executing' as const } : null);
+
+			try {
+				const response = await fetch(`/api/tickets/${ticketId}/execute`, {
+					method: 'POST',
+					headers: { 'Content-Type': 'application/json' },
+					body: JSON.stringify({ ticketId }),
+				});
+
+				const data = await response.json();
+				if (response.ok) {
+					setTicket(data.ticket || null);
+				} else {
+					if (data?.ticket) {
+						setTicket(data.ticket);
+					}
+					alert(data?.error || data?.message || '执行失败');
+				}
+			} catch (error: unknown) {
+				alert(error instanceof Error ? error.message : '执行失败');
+				loadTicket();
+			} finally {
+				setApproving(false);
+			}
+		};
+
+		const getRiskBadge = (risk: string) => {
+			const config: Record<string, { label: string; className: string }> = {
+				low: { label: '低风险', className: 'bg-green-100 text-green-800 border-green-200' },
+				medium: { label: '中风险', className: 'bg-yellow-100 text-yellow-800 border-yellow-200' },
+				high: { label: '高风险', className: 'bg-orange-100 text-orange-800 border-orange-200' },
+				critical: { label: '极高风险', className: 'bg-red-100 text-red-800 border-red-200' },
+			};
+			const { label, className } = config[risk] || config.medium;
+			return <span className={`px-2 py-0.5 rounded-full text-xs border ${className}`}>{label}</span>;
+		};
+
+		if (loading) return <div className="text-center text-muted-foreground text-sm py-4">加载中...</div>;
+		if (!ticket) return <div className="text-center text-muted-foreground text-sm py-4">工单不存在</div>;
+
+		return (
+			<div className="p-4 space-y-4">
+				{/* 返回按钮 */}
+				<Button variant="ghost" size="sm" onClick={onClose} className="mb-2">
+					← 返回列表
+				</Button>
+
+				{/* 标题和状态 */}
+				<div className="flex items-start justify-between gap-2">
+					<h3 className="font-semibold text-lg leading-tight">{ticket.title}</h3>
+					<StatusBadge status={ticket.status} />
+				</div>
+
+				{/* 风险等级 */}
+				<div className="flex items-center gap-2">
+					{ticket.riskLevel && getRiskBadge(ticket.riskLevel)}
+					<span className="text-xs text-muted-foreground">
+						类型: {ticket.type === 'bash-execute' ? '命令执行' : 'Skill 脚本'}
+					</span>
+				</div>
+
+				{/* 核心信息卡片 */}
+				<div className="bg-muted/50 rounded-lg p-4 space-y-4">
+					{/* 要执行的命令 */}
+					{ticket.command && (
+						<div>
+							<h4 className="text-xs font-medium text-muted-foreground mb-1">执行命令</h4>
+							<div className="bg-background rounded border px-3 py-2 font-mono text-sm overflow-x-auto">
+								<pre className="whitespace-pre-wrap break-all">{ticket.command}</pre>
+							</div>
+						</div>
+					)}
+
+					{/* Skill 脚本 */}
+					{ticket.scriptContent && (
+						<div>
+							<h4 className="text-xs font-medium text-muted-foreground mb-1">
+								Skill: {ticket.skillName || '未知'}
+							</h4>
+							<div className="bg-background rounded border px-3 py-2 font-mono text-sm max-h-48 overflow-y-auto">
+								<pre className="whitespace-pre-wrap break-all">{ticket.scriptContent}</pre>
+							</div>
+						</div>
+					)}
+
+					{/* 受影响资源 */}
+					{ticket.affectedResources && ticket.affectedResources.length > 0 && (
+						<div>
+							<h4 className="text-xs font-medium text-muted-foreground mb-1">受影响资源</h4>
+							<div className="flex flex-wrap gap-1">
+								{ticket.affectedResources.map((resource: string, idx: number) => (
+									<span key={idx} className="px-2 py-0.5 bg-orange-100 text-orange-800 rounded text-xs">
+										{resource}
+									</span>
+								))}
+							</div>
+						</div>
+					)}
+				</div>
+
+				{/* 执行结果 */}
+				{ticket.status === 'completed' && ticket.output && (
+					<div className="bg-green-50 border border-green-200 rounded-lg p-4">
+						<h4 className="text-xs font-medium text-green-800 mb-1">执行结果</h4>
+						<div className="bg-background rounded px-3 py-2 font-mono text-sm max-h-48 overflow-y-auto">
+							<pre className="whitespace-pre-wrap break-all">{ticket.output}</pre>
+						</div>
+					</div>
+				)}
+
+				{ticket.status === 'failed' && ticket.error && (
+					<div className="bg-red-50 border border-red-200 rounded-lg p-4">
+						<h4 className="text-xs font-medium text-red-800 mb-1">执行失败</h4>
+						<div className="text-red-700 text-sm">{ticket.error}</div>
+					</div>
+				)}
+
+				{/* 审批意见 */}
+				{ticket.description && (
+					<div className="text-sm text-muted-foreground bg-muted/30 p-3 rounded">
+						{ticket.description}
+					</div>
+				)}
+
+				{/* 时间信息 */}
+				<div className="text-xs text-muted-foreground space-y-1">
+					<div>创建时间: {new Date(ticket.createdAt).toLocaleString('zh-CN')}</div>
+					{ticket.updatedAt && ticket.updatedAt !== '1970-01-01T00:00:00.000Z' && (
+						<div>更新时间: {new Date(ticket.updatedAt).toLocaleString('zh-CN')}</div>
+					)}
+				</div>
+
+				{/* 审批记录 */}
+				{ticket.approvals && ticket.approvals.length > 0 && (
+					<div className="border-t pt-4">
+						<h4 className="text-sm font-medium mb-2">审批记录</h4>
+						<div className="space-y-2">
+							{ticket.approvals.map((approval: any, idx: number) => (
+								<div key={idx} className="text-sm bg-muted/30 p-2 rounded">
+									<div className="flex items-center justify-between">
+										<span className="font-medium">{approval.approver}</span>
+										<span className={`text-xs px-2 py-0.5 rounded ${
+											approval.decision === 'approved' 
+												? 'bg-green-100 text-green-800' 
+												: 'bg-red-100 text-red-800'
+										}`}>
+											{approval.decision === 'approved' ? '已批准' : '已拒绝'}
+										</span>
+									</div>
+									{approval.comment && (
+										<div className="text-muted-foreground mt-1">{approval.comment}</div>
+									)}
+									<div className="text-xs text-muted-foreground mt-1">
+										{new Date(approval.timestamp).toLocaleString('zh-CN')}
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
+				)}
+
+				{/* 操作按钮 */}
+				{ticket.status === 'pending' && (
+					<div className="space-y-2 border-t pt-4">
+						<textarea
+							value={comment}
+							onChange={(e) => setComment(e.target.value)}
+							placeholder="审批意见（可选）"
+							className="w-full px-3 py-2 border rounded-lg text-sm bg-background"
+							rows={2}
+						/>
+						<div className="flex gap-2">
+							<Button onClick={handleApprove} disabled={approving} className="flex-1" size="sm">
+								✓ 批准
+							</Button>
+							<Button variant="destructive" onClick={handleReject} disabled={approving} className="flex-1" size="sm">
+								✗ 拒绝
+							</Button>
+						</div>
+					</div>
+				)}
+
+				{ticket.status === 'approved' && (
+					<Button onClick={handleExecute} disabled={approving} className="w-full" size="sm">
+						▶️ 执行工单
+					</Button>
+				)}
+
+				{ticket.status === 'executing' && (
+					<div className="text-center py-2 text-muted-foreground">
+						<span className="inline-flex items-center gap-2">
+							<span className="w-2 h-2 rounded-full bg-blue-600 animate-pulse"></span>
+							执行中...
+						</span>
+					</div>
+				)}
+			</div>
+		);
+	}
+
+	// 状态徽章
+function StatusBadge({ status }: { status: string }) {
+	const config = {
+		draft: { label: '草稿', variant: 'secondary' as const },
+		pending: { label: '待审核', variant: 'outline' as const },
+		approved: { label: '已批准', variant: 'default' as const },
+		rejected: { label: '已拒绝', variant: 'destructive' as const },
+		executing: { label: '执行中', variant: 'outline' as const },
+		completed: { label: '已完成', variant: 'default' as const },
+		failed: { label: '失败', variant: 'destructive' as const },
+	};
+	const { label, variant } = config[status as keyof typeof config] || config.draft;
+	return <Badge variant={variant}>{label}</Badge>;
+}
+
+export default function HomePage() {
+	return (
+		<Suspense fallback={
+			<div className="h-full flex items-center justify-center">
+				<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+			</div>
+		}>
+			<HomePageContent />
+		</Suspense>
+	);
+}