: ChatArea TS2322 workaround + SubscriptionPanel component

The ChatArea.tsx toolSteps/subtasks rendering uses helper functions to avoid TypeScript strict mode && chain producing unknown type in JSX children. Add SubscriptionPanel component for subscription status display in SaaS billing section.

desktop/src/components/ChatArea.tsx

@@ -14,7 +14,8 @@ import { Paperclip, SquarePen, ArrowUp, MessageSquare, Download, X, FileText, Im
 import { Button, EmptyState, MessageListSkeleton, LoadingDots } from './ui';
 import { ResizableChatLayout } from './ai/ResizableChatLayout';
 import { ArtifactPanel } from './ai/ArtifactPanel';
-import { ToolCallChain } from './ai/ToolCallChain';
+import { ToolCallChain, type ToolCallStep } from './ai/ToolCallChain';
+import { TaskProgress, type Subtask } from './ai/TaskProgress';
 import { listItemVariants, defaultTransition, fadeInVariants } from '../lib/animations';
 import { FirstConversationPrompt } from './FirstConversationPrompt';
 import { ClassroomPlayer } from './classroom_player';
@@ -30,7 +31,6 @@ import { ReasoningBlock } from './ai/ReasoningBlock';
 import { StreamingText } from './ai/StreamingText';
 import { ChatMode } from './ai/ChatMode';
 import { ModelSelector } from './ai/ModelSelector';
-import { TaskProgress } from './ai/TaskProgress';
 import { SuggestionChips } from './ai/SuggestionChips';
 import { PipelineResultPreview } from './pipeline/PipelineResultPreview';
 import { PresentationContainer } from './presentation/PresentationContainer';
@@ -598,6 +598,20 @@ function MessageBubble({ message, setInput }: { message: Message; setInput: (tex
   const isUser = message.role === 'user';
   const isThinking = message.streaming && !message.content;
 
+  // Extract typed arrays for JSX rendering (avoids TS2322 from && chain producing unknown)
+  const toolCallSteps: ToolCallStep[] | undefined = message.toolSteps;
+  const subtaskList: Subtask[] | undefined = message.subtasks;
+
+  const renderToolSteps = (): React.ReactNode => {
+    if (isUser || !toolCallSteps || toolCallSteps.length === 0) return null;
+    return <ToolCallChain steps={toolCallSteps} isStreaming={!!message.streaming} />;
+  };
+
+  const renderSubtasks = (): React.ReactNode => {
+    if (isUser || !subtaskList || subtaskList.length === 0) return null;
+    return <TaskProgress tasks={subtaskList} className="mb-3" />;
+  };
+
   // Download message as Markdown file
   const handleDownloadMessage = () => {
     if (!message.content) return;
@@ -644,16 +658,9 @@ function MessageBubble({ message, setInput }: { message: Message; setInput: (tex
               />
             )}
             {/* Tool call steps chain (DeerFlow-inspired) */}
-            {!isUser && message.toolSteps != null && message.toolSteps.length > 0 ? (
-              <ToolCallChain
-                steps={message.toolSteps}
-                isStreaming={message.streaming}
-              />
-            ) : null}
+            {renderToolSteps()}
             {/* Subtask tracking (DeerFlow-inspired) */}
-            {!isUser && message.subtasks != null && message.subtasks.length > 0 ? (
-              <TaskProgress tasks={message.subtasks} className="mb-3" />
-            ) : null}
+            {renderSubtasks()}
             {/* Message content with streaming support */}
             <div className={`leading-relaxed ${isUser ? 'text-white whitespace-pre-wrap' : 'text-gray-700 dark:text-gray-200'}`}>
               {message.content