fix(desktop): DeerFlow UI — ChatArea refactor + ai-elements + dead CSS cleanup

ChatArea retry button uses setInput instead of direct sendToGateway,
fix bootstrap spinner stuck for non-logged-in users,
remove dead CSS (aurora-title/sidebar-open/quick-action-chips),
add ai components (ReasoningBlock/StreamingText/ChatMode/ModelSelector/TaskProgress),
add ClassroomPlayer + ResizableChatLayout + artifact panel

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

desktop/src/components/ChatArea.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef, useCallback, useMemo, type MutableRefObjec
 import { motion, AnimatePresence } from 'framer-motion';
 import { List, type ListImperativeAPI } from 'react-window';
 import { useChatStore, Message } from '../store/chatStore';
+import { useArtifactStore } from '../store/chat/artifactStore';
 import { useConnectionStore } from '../store/connectionStore';
 import { useAgentStore } from '../store/agentStore';
 import { useConfigStore } from '../store/configStore';
@@ -12,6 +13,8 @@ import { ArtifactPanel } from './ai/ArtifactPanel';
 import { ToolCallChain } from './ai/ToolCallChain';
 import { listItemVariants, defaultTransition, fadeInVariants } from '../lib/animations';
 import { FirstConversationPrompt } from './FirstConversationPrompt';
+import { ClassroomPlayer } from './classroom_player';
+import { useClassroomStore } from '../store/classroomStore';
 // MessageSearch temporarily removed during DeerFlow redesign
 import { OfflineIndicator } from './OfflineIndicator';
 import {
@@ -45,11 +48,14 @@ export function ChatArea() {
     messages, currentAgent, isStreaming, isLoading, currentModel,
     sendMessage: sendToGateway, setCurrentModel, initStreamListener,
     newConversation, chatMode, setChatMode, suggestions,
-    artifacts, selectedArtifactId, artifactPanelOpen,
-    selectArtifact, setArtifactPanelOpen,
     totalInputTokens, totalOutputTokens,
   } = useChatStore();
+  const {
+    artifacts, selectedArtifactId, artifactPanelOpen,
+    selectArtifact, setArtifactPanelOpen,
+  } = useArtifactStore();
   const connectionState = useConnectionStore((s) => s.connectionState);
+  const { activeClassroom, classroomOpen, closeClassroom, generating, progressPercent, progressActivity, error: classroomError, clearError: clearClassroomError } = useClassroomStore();
   const clones = useAgentStore((s) => s.clones);
   const models = useConfigStore((s) => s.models);
 
@@ -203,9 +209,76 @@ export function ChatArea() {
   );
 
   return (
+    <div className="relative h-full">
+    {/* Generation progress overlay */}
+    <AnimatePresence>
+      {generating && (
+        <motion.div
+          key="generation-overlay"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className="absolute inset-0 z-40 bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm flex items-center justify-center"
+        >
+          <div className="text-center space-y-4">
+            <div className="w-12 h-12 border-4 border-indigo-200 border-t-indigo-500 rounded-full animate-spin mx-auto" />
+            <div>
+              <p className="text-lg font-medium text-gray-900 dark:text-white">
+                正在生成课堂...
+              </p>
+              <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+                {progressActivity || '准备中...'}
+              </p>
+            </div>
+            {progressPercent > 0 && (
+              <div className="w-64 mx-auto">
+                <div className="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                  <div
+                    className="h-full bg-indigo-500 rounded-full transition-all duration-500"
+                    style={{ width: `${progressPercent}%` }}
+                  />
+                </div>
+                <p className="text-xs text-gray-400 mt-1">{progressPercent}%</p>
+              </div>
+            )}
+            <button
+              onClick={() => useClassroomStore.getState().cancelGeneration()}
+              className="px-4 py-2 text-sm text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg"
+            >
+              取消
+            </button>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+
+    {/* ClassroomPlayer overlay */}
+    <AnimatePresence>
+      {classroomOpen && activeClassroom && (
+        <motion.div
+          key="classroom-overlay"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className="absolute inset-0 z-50 bg-white dark:bg-gray-900"
+        >
+          <ClassroomPlayer
+            onClose={closeClassroom}
+          />
+        </motion.div>
+      )}
+    </AnimatePresence>
+
     <ResizableChatLayout
       chatPanel={
         <div className="flex flex-col h-full">
+      {/* Classroom generation error banner */}
+      {classroomError && (
+        <div className="mx-4 mt-2 px-4 py-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex items-center justify-between text-sm">
+          <span className="text-red-600 dark:text-red-400">课堂生成失败: {classroomError}</span>
+          <button onClick={clearClassroomError} className="text-red-400 hover:text-red-600 ml-3 text-xs">关闭</button>
+        </div>
+      )}
       {/* Header — DeerFlow-style: minimal */}
       <div className="h-14 border-b border-transparent flex items-center justify-between px-6 flex-shrink-0 bg-white dark:bg-gray-900">
         <div className="flex items-center gap-2 text-sm text-gray-500">
@@ -298,6 +371,7 @@ export function ChatArea() {
               getHeight={getHeight}
               onHeightChange={setHeight}
               messageRefs={messageRefs}
+              setInput={setInput}
             />
           ) : (
             messages.map((message) => (
@@ -310,7 +384,7 @@ export function ChatArea() {
                 layout
                 transition={defaultTransition}
               >
-                <MessageBubble message={message} />
+                <MessageBubble message={message} setInput={setInput} />
               </motion.div>
             ))
           )}
@@ -433,19 +507,16 @@ export function ChatArea() {
       rightPanelOpen={artifactPanelOpen}
       onRightPanelToggle={setArtifactPanelOpen}
     />
+    </div>
   );
 }
 
-function MessageBubble({ message }: { message: Message }) {
-  // Tool messages are now absorbed into the assistant message's toolSteps chain.
-  // Legacy standalone tool messages (from older sessions) still render as before.
+function MessageBubble({ message, setInput }: { message: Message; setInput: (text: string) => void }) {
   if (message.role === 'tool') {
     return null;
   }
 
   const isUser = message.role === 'user';
-
-  // 思考中状态：streaming 且内容为空时显示思考指示器
   const isThinking = message.streaming && !message.content;
 
   // Download message as Markdown file
@@ -518,7 +589,20 @@ function MessageBubble({ message }: { message: Message }) {
                 : '...'}
             </div>
             {message.error && (
-              <p className="text-xs text-red-500 mt-2">{message.error}</p>
+              <div className="flex items-center gap-2 mt-2">
+                <p className="text-xs text-red-500">{message.error}</p>
+                <button
+                  onClick={() => {
+                    const text = typeof message.content === 'string' ? message.content : '';
+                    if (text) {
+                      setInput(text);
+                    }
+                  }}
+                  className="text-xs px-2 py-0.5 rounded bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 hover:bg-red-200 dark:hover:bg-red-900/50 transition-colors"
+                >
+                  重试
+                </button>
+              </div>
             )}
             {/* Download button for AI messages - show on hover */}
             {!isUser && message.content && !message.streaming && (
@@ -543,6 +627,7 @@ interface VirtualizedMessageRowProps {
   message: Message;
   onHeightChange: (height: number) => void;
   messageRefs: MutableRefObject<Map<string, HTMLDivElement>>;
+  setInput: (text: string) => void;
 }
 
 /**
@@ -553,6 +638,7 @@ function VirtualizedMessageRow({
   message,
   onHeightChange,
   messageRefs,
+  setInput,
   style,
   ariaAttributes,
 }: VirtualizedMessageRowProps & {
@@ -587,7 +673,7 @@ function VirtualizedMessageRow({
       className="py-3"
       {...ariaAttributes}
     >
-      <MessageBubble message={message} />
+      <MessageBubble message={message} setInput={setInput} />
     </div>
   );
 }
@@ -598,6 +684,7 @@ interface VirtualizedMessageListProps {
   getHeight: (id: string, role: string) => number;
   onHeightChange: (id: string, height: number) => void;
   messageRefs: MutableRefObject<Map<string, HTMLDivElement>>;
+  setInput: (text: string) => void;
 }
 
 /**
@@ -610,6 +697,7 @@ function VirtualizedMessageList({
   getHeight,
   onHeightChange,
   messageRefs,
+  setInput,
 }: VirtualizedMessageListProps) {
   // Row component for react-window v2
   const RowComponent = (props: {
@@ -625,6 +713,7 @@ function VirtualizedMessageList({
       message={messages[props.index]}
       onHeightChange={(h) => onHeightChange(messages[props.index].id, h)}
       messageRefs={messageRefs}
+      setInput={setInput}
       style={props.style}
       ariaAttributes={props.ariaAttributes}
     />