feat(flow-chat): add quote-select — copy or quote selected message text into composer

src/web-ui/package.json

@@ -44,13 +44,13 @@
     "@xterm/xterm": "^6.1.0-beta.101",
     "diff": "^8.0.3",
     "highlight.js": "^11.11.1",
-    "modern-screenshot": "^4.7.0",
     "i18next": "^25.8.0",
     "immer": "^11.1.3",
     "jszip": "^3.10.1",
     "katex": "^0.16.25",
     "lucide-react": "^0.541.0",
     "mermaid": "^11.10.1",
+    "modern-screenshot": "^4.7.0",
     "monaco-editor": "^0.52.2",
     "morphdom": "^2.7.8",
     "partial-json": "^0.1.7",
@@ -77,6 +77,8 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.24.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
     "@types/node": "^20.10.0",
     "@types/path-browserify": "^1.0.3",
     "@types/prismjs": "^1.26.5",

src/web-ui/src/app/scenes/session/ChatPane.tsx

@@ -9,6 +9,8 @@ import React, { useCallback, memo, useEffect, useRef } from 'react';
 import { ModernFlowChatContainer as FlowChatContainer } from '../../../flow_chat/components/modern/ModernFlowChatContainer';
 import { ChatInput } from '../../../flow_chat/components/ChatInput';
 import type { ChatInputRegistration } from '../../../flow_chat/components/chatInputRegistration';
+import { QuoteSelect } from '../../../flow_chat/components/QuoteSelect/QuoteSelect';
+import { QuoteDock } from '../../../flow_chat/components/QuoteSelect/QuoteDock';
 import { useCanvasStore } from '../../components/panels/content-canvas/stores/canvasStore';
 import type { LineRange } from '@/component-library';
 import path from 'path-browserify';
@@ -178,8 +180,10 @@ const ChatPaneInner: React.FC<ChatPaneProps> = ({
           isSceneActive={isSceneActive}
           onSendMessage={(_message: string) => {}}
           registration={chatInputRegistration}
+          composerDock={(draft) => <QuoteDock draft={draft} />}
         />
       )}
+      <QuoteSelect />
     </div>
   );
 };

src/web-ui/src/flow_chat/components/ChatInput.tsx

@@ -226,6 +226,11 @@ export interface ChatInputProps {
    * standard composer. The registration never replaces ChatInput's UI.
    */
   registration?: ChatInputRegistration;
+  /**
+   * Host-injected area rendered above the composer (render prop so the host
+   * can subscribe to draft changes). Never replaces the composer itself.
+   */
+  composerDock?: (draft: string) => React.ReactNode;
 }
 
 type SlashActionItem = {
@@ -425,6 +430,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
   onSendMessage,
   isSceneActive = true,
   registration,
+  composerDock,
 }) => {
   const deviceSurfaceScope = getActiveSurfaceScope();
   const { t } = useTranslation('flow-chat');
@@ -5541,6 +5547,11 @@ export const ChatInput: React.FC<ChatInputProps> = ({
 
         <div className="bitfun-chat-input__container" data-bf-component="chat-input" data-bf-part="container">
           <AcpPlanPanel entries={acpPlanEntries} />
+          {composerDock != null && (
+            <div data-bf-component="chat-input" data-bf-part="composerDock">
+              {composerDock(inputState.value)}
+            </div>
+          )}
           <div className={`bitfun-chat-input__box ${isMultiLine ? 'bitfun-chat-input__box--multi-line' : 'bitfun-chat-input__box--capsule'}`} data-bf-component="chat-input" data-bf-part="box">
             {showTargetSwitcher && (
               <div className="bitfun-chat-input__target-switcher" data-bf-component="chat-input" data-bf-part="targetSwitcher" data-testid="chat-input-target-switcher">

src/web-ui/src/flow_chat/components/QuoteSelect/QuoteDock.tsx

@@ -0,0 +1,51 @@
+/**
+ * QuoteDock — 输入框上方的可移除引用卡片
+ *
+ * 渲染进 ChatInput 新增的 composerDock 扩展点（见 chatinput-patch.md）。
+ * 与草稿内容双向同步：
+ *  - draft 中 marker 被删（发送清空 / 手动删除）→ 卡片自动摘除
+ *  - 点卡片 ✕ → 从草稿移除 marker 并压缩多余空行
+ */
+import React, { useEffect } from 'react';
+import { useI18n } from '@/infrastructure/i18n';
+import { quoteSelectStore } from './quoteSelectStore';
+
+export const QuoteDock: React.FC<{ draft: string }> = ({ draft }) => {
+  const { t } = useI18n('flow-chat');
+  const quotes = quoteSelectStore((s) => s.quotes);
+
+  useEffect(() => {
+    quoteSelectStore.getState().syncDraft(draft);
+  }, [draft]);
+
+  if (quotes.length === 0) return null;
+
+  return (
+    <div className="quote-select__dock" data-bf-component="quote-select" data-bf-part="dock">
+      {quotes.map((q) => (
+        <div key={q.id} className="quote-select__chip" data-bf-part="chip">
+          <span className="quote-select__chip-ico" aria-hidden>❝</span>
+          <span className="quote-select__chip-body">
+            <span className="quote-select__chip-label">
+              {t('quote.from')} · {q.who}
+              {q.pos ? ` · ${t('quote.msgNo', { pos: q.pos })}` : ''}
+            </span>
+            <span className="quote-select__chip-text">{q.text.replace(/\s+/g, ' ')}</span>
+          </span>
+          <button
+            type="button"
+            className="quote-select__chip-x"
+            data-bf-part="removeChip"
+            title={t('quote.remove')}
+            aria-label={t('quote.remove')}
+            onClick={() => quoteSelectStore.getState().removeQuote(q.id)}
+          >
+            ✕
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default QuoteDock;