refactor(ui): reduce app renderer prop assembly

apps/ui/src/App.tsx

@@ -1355,110 +1355,120 @@ export default function App() {
   const conversationWorkspaceProps = {
     viewMode,
     workspaceRef: conversationWorkspaceRef,
-    messageListRef,
-    attachmentInputRef,
-    skillMenuRef,
-    panelActions,
-    selectedSkillBadge,
-    selectedSkillIsDefault: selectedSkillId === DEFAULT_SKILL.id,
-    homeLeadIcon: <LobsterClawIcon />,
-    activeExpertName,
-    activeExpertKey,
-    activeExpertVisualKey,
-    activeExpertGuide,
-    expertWorkspaceLogo,
-    renderExpertIcon,
-    showInlineStartupNotice,
-    chatLaunchState,
-    startupCurtainStatus,
-    homeIntentSuggestion: pendingHomeIntentSuggestion?.suggestion ?? null,
-    homeIntentDecisionPending,
-    homeIntentLabels: {
-      title: ui.suggestionSwitchTitle,
-      prefix: ui.suggestionSwitchPrefix,
-      suffix: ui.suggestionSwitchSuffix,
-      continue: ui.suggestionContinue,
-      switchAction: ui.suggestionSwitchAction
+    status: {
+      panelActions,
+      showInlineStartupNotice,
+      chatLaunchState,
+      startupCurtainStatus
     },
-    renderIntentIcon: getIntentSuggestionIcon,
-    onContinueHomeIntent: continuePendingHomePromptInHome,
-    onSwitchHomeIntent: switchExpertAndContinuePendingHomePrompt,
-    showBindEntry,
-    bindEntry: {
-      lobsterKeyDraft,
-      workspaceApiKeyConfigured: Boolean(workspace?.apiKeyConfigured),
-      saving,
-      bindingLabel: ui.binding,
-      onLobsterKeyChange: setLobsterKeyDraft,
-      onSave: () => void saveLobsterKey()
+    emptyState: {
+      selectedSkillBadge,
+      selectedSkillIsDefault: selectedSkillId === DEFAULT_SKILL.id,
+      homeLeadIcon: <LobsterClawIcon />,
+      activeExpertName,
+      activeExpertKey,
+      activeExpertVisualKey,
+      activeExpertGuide,
+      expertWorkspaceLogo,
+      homeIntentSuggestion: pendingHomeIntentSuggestion?.suggestion ?? null,
+      homeIntentDecisionPending,
+      homeIntentLabels: {
+        title: ui.suggestionSwitchTitle,
+        prefix: ui.suggestionSwitchPrefix,
+        suffix: ui.suggestionSwitchSuffix,
+        continue: ui.suggestionContinue,
+        switchAction: ui.suggestionSwitchAction
+      },
+      showBindEntry,
+      bindEntry: {
+        lobsterKeyDraft,
+        workspaceApiKeyConfigured: Boolean(workspace?.apiKeyConfigured),
+        saving,
+        bindingLabel: ui.binding,
+        onLobsterKeyChange: setLobsterKeyDraft,
+        onSave: () => void saveLobsterKey()
+      },
+      hasExpertProjects: Boolean(expertPageProjects.length),
+      noExpertsLabel: expertsPageCopy.noExperts,
+      starterQuestionsHint: ui.starterQuestionsHint,
+      homeEmptyTitle: homeChatCopy.emptyTitle,
+      homePrompts: homeChatCopy.prompts
     },
-    hasExpertProjects: Boolean(expertPageProjects.length),
-    noExpertsLabel: expertsPageCopy.noExperts,
-    starterQuestionsHint: ui.starterQuestionsHint,
-    homeEmptyTitle: homeChatCopy.emptyTitle,
-    homePrompts: homeChatCopy.prompts,
-    onStarterPrompt: applyStarterPrompt,
-    messages,
-    showEmptyState,
-    messageTraces,
-    messageReactions,
-    copiedToken,
-    sending,
-    messageLabels: {
-      thinking: ui.thinking,
-      hideTrace: ui.hideTrace,
-      traceCollapsed: ui.traceCollapsed
+    messages: {
+      messageListRef,
+      messages,
+      showEmptyState,
+      messageTraces,
+      messageReactions,
+      copiedToken,
+      sending,
+      messageLabels: {
+        thinking: ui.thinking,
+        hideTrace: ui.hideTrace,
+        traceCollapsed: ui.traceCollapsed
+      },
+      copyIcon: <CopyIcon />,
+      copiedIcon: <CheckIcon />,
+      deleteIcon: <TrashIcon />,
+      regenerateIcon: <RefreshIcon />
     },
-    copyIcon: <CopyIcon />,
-    copiedIcon: <CheckIcon />,
-    deleteIcon: <TrashIcon />,
-    regenerateIcon: <RefreshIcon />,
-    renderThumbIcon: (direction) => <ThumbIcon direction={direction} />,
-    renderMarkdownContent,
-    buildDouyinVideoStatusCard,
-    formatMessageTimestamp,
-    onMessageListScroll: handleMessageListScroll,
-    onCopyText: handleCopyText,
-    onDeleteMessage: deleteMessage,
-    onTraceExpandedChange: setMessageTraceExpanded,
-    onRegenerateAssistantMessage: regenerateAssistantMessage,
-    onToggleMessageReaction: toggleMessageReaction,
-    prompt,
-    isBound,
-    canSend,
-    isComposerDragOver,
-    isComposerResizeActive,
-    composerShellStyle,
-    attachmentAccept,
-    attachments: composerAttachments,
-    composerPlaceholder,
-    sendButtonLabel,
-    skillMenuTitle: ui.skillMenuTitle,
-    defaultChatLabel: ui.defaultChat,
-    defaultSkillId: DEFAULT_SKILL.id,
-    selectedSkillId,
-    selectedSkillName: selectedSkill.name,
-    skills: effectiveSkills,
-    skillMenuOpen,
-    attachmentIcon: <AttachmentIcon />,
-    submitIcon: sendPhase !== "idle" ? <StopIcon /> : <ArrowUpIcon />,
-    onSubmit: sendPrompt,
-    onCancel: cancelActiveStream,
-    onPromptChange: setPrompt,
-    onTextareaKeyDown: handleComposerKeyDown,
-    onAttachmentSelection: handleAttachmentSelection,
-    onOpenAttachmentPicker: openAttachmentPicker,
-    onRemoveAttachment: removeComposerAttachment,
-    onToggleSkillMenu: () => setSkillMenuOpen((current) => !current),
-    onClearSelectedSkill: clearSelectedSkill,
-    onChooseSkill: chooseSkill,
-    onDragEnter: handleComposerDragEnter,
-    onDragOver: handleComposerDragOver,
-    onDragLeave: handleComposerDragLeave,
-    onDrop: handleComposerDrop,
-    onResizePointerDown: handleComposerResizePointerDown,
-    onResizePointerMove: handleComposerResizePointerMove,
-    onResizePointerEnd: handleComposerResizePointerEnd
+    composer: {
+      attachmentInputRef,
+      skillMenuRef,
+      prompt,
+      isBound,
+      canSend,
+      isComposerDragOver,
+      isComposerResizeActive,
+      composerShellStyle,
+      attachmentAccept,
+      attachments: composerAttachments,
+      composerPlaceholder,
+      sendButtonLabel,
+      skillMenuTitle: ui.skillMenuTitle,
+      defaultChatLabel: ui.defaultChat,
+      defaultSkillId: DEFAULT_SKILL.id,
+      selectedSkillId,
+      selectedSkillName: selectedSkill.name,
+      skills: effectiveSkills,
+      skillMenuOpen,
+      attachmentIcon: <AttachmentIcon />,
+      submitIcon: sendPhase !== "idle" ? <StopIcon /> : <ArrowUpIcon />
+    },
+    actions: {
+      renderExpertIcon,
+      renderIntentIcon: getIntentSuggestionIcon,
+      onContinueHomeIntent: continuePendingHomePromptInHome,
+      onSwitchHomeIntent: switchExpertAndContinuePendingHomePrompt,
+      onStarterPrompt: applyStarterPrompt,
+      renderThumbIcon: (direction) => <ThumbIcon direction={direction} />,
+      renderMarkdownContent,
+      buildDouyinVideoStatusCard,
+      formatMessageTimestamp,
+      onMessageListScroll: handleMessageListScroll,
+      onCopyText: handleCopyText,
+      onDeleteMessage: deleteMessage,
+      onTraceExpandedChange: setMessageTraceExpanded,
+      onRegenerateAssistantMessage: regenerateAssistantMessage,
+      onToggleMessageReaction: toggleMessageReaction,
+      onSubmit: sendPrompt,
+      onCancel: cancelActiveStream,
+      onPromptChange: setPrompt,
+      onTextareaKeyDown: handleComposerKeyDown,
+      onAttachmentSelection: handleAttachmentSelection,
+      onOpenAttachmentPicker: openAttachmentPicker,
+      onRemoveAttachment: removeComposerAttachment,
+      onToggleSkillMenu: () => setSkillMenuOpen((current) => !current),
+      onClearSelectedSkill: clearSelectedSkill,
+      onChooseSkill: chooseSkill,
+      onDragEnter: handleComposerDragEnter,
+      onDragOver: handleComposerDragOver,
+      onDragLeave: handleComposerDragLeave,
+      onDrop: handleComposerDrop,
+      onResizePointerDown: handleComposerResizePointerDown,
+      onResizePointerMove: handleComposerResizePointerMove,
+      onResizePointerEnd: handleComposerResizePointerEnd
+    }
   } satisfies ComponentProps<typeof ConversationWorkspaceView>;
   const settingsStatusHint = showSettingsStatusHint
     ? <div className={"inline-hint settings-runtime-hint" + (chatLaunchState === "error" ? " error" : "")}>{startupMessage}</div>

docs/2026-05-25-client-ui-ux-execution-plan.md

@@ -258,7 +258,7 @@
 - Modify: `apps/ui/src/features/settings/SettingsPanels.tsx`
 - Create or modify focused hooks only under existing `apps/ui/src/features/*`
 
-- [ ] **Step 1: 拆出纯 props 组装**
+- [x] **Step 1: 拆出纯 props 组装**
 
   Move only pure prop-building logic from `App.tsx` into focused helpers or hooks when all inputs are already available.
 
@@ -274,7 +274,12 @@
   - No IPC calls move across ownership boundaries in this step.
   - `App.tsx` line count decreases, but line count is not the success metric; clearer ownership is.
 
-- [ ] **Step 2: Keep high-risk flows in place**
+  Progress note:
+
+  - Completed on 2026-05-25 by grouping `ConversationWorkspaceView` props into focused `status`, `emptyState`, `messages`, `composer`, and `actions` objects.
+  - IPC calls, stream lifecycle, composer submit/cancel, session actions, startup overlay actions, and smoke hooks remain in `App.tsx`.
+
+- [x] **Step 2: Keep high-risk flows in place**
 
   Do not move these during this phase:
 
@@ -289,7 +294,11 @@
 
   - Existing smoke tests do not need selector or action rewrites.
 
-- [ ] **Step 3: Reduce oversized component props**
+  Progress note:
+
+  - Confirmed during the prop grouping pass; no smoke contract or high-risk flow was moved.
+
+- [x] **Step 3: Reduce oversized component props**
 
   For `ConversationWorkspaceView`, group related props into typed objects only when ownership is obvious:
 
@@ -304,7 +313,11 @@
   - Component call site becomes easier to read.
   - Existing child component props stay unchanged unless required.
 
-- [ ] **Step 4: Validate App.tsx encoding and tests**
+  Progress note:
+
+  - `ConversationWorkspaceView` now receives typed grouped props; child components still receive their existing prop shapes.
+
+- [x] **Step 4: Validate App.tsx encoding and tests**
 
   Run:
 
@@ -320,6 +333,12 @@
   - Diff contains no mojibake and no unrelated Chinese copy changes.
   - UI typecheck passes.
 
+  Progress note:
+
+  - Passed on 2026-05-25: BOM check printed `b'imp'`.
+  - Inspected `git diff -- apps/ui/src/App.tsx apps/ui/src/features/chat/ConversationWorkspaceView.tsx`; no mojibake or unrelated Chinese copy changes.
+  - Passed on 2026-05-25: `corepack pnpm --filter @qjclaw/ui typecheck`; `corepack pnpm build`.
+
 ## 6. Phase 4 - 修正核心工作流 UI/UX
 
 **目标:** 优先改善用户每天会反复使用的界面：聊天、任务、自动化、设置。