[TASK-tsk_3b1abf5387c04f75f0814556][Frontend Developer][R3] feat: FTS5 对话历史全文搜索 UI — 集成到全局 SearchModal

packages/web-ui/src/App.tsx

@@ -24,7 +24,7 @@ import { useTheme } from './hooks/useTheme.ts';
 import { useIsMobile } from './hooks/useIsMobile.ts';
 import { prefetch, PREFETCH_KEYS } from './prefetchCache.ts';
 import { useTranslation } from 'react-i18next';
-import { SearchModal } from './components/SearchModal.tsx';
+import { SearchModal, type SearchCategory } from './components/SearchModal.tsx';
 
 const HIDDEN_STYLE: React.CSSProperties = {
   visibility: 'hidden',
@@ -110,6 +110,7 @@ export function App() {
   }, [checkLicenseLimits]);
 
   const [showSearchModal, setShowSearchModal] = useState(false);
+  const [searchInitialTab, setSearchInitialTab] = useState<SearchCategory>();
 
   // Global search shortcut: Cmd+P (Mac) / Ctrl+P (Win/Linux)
   useEffect(() => {
@@ -118,16 +119,22 @@ export function App() {
     const onKey = (e: KeyboardEvent) => {
       if (isMac && e.metaKey && !e.ctrlKey && e.key === 'p') {
         e.preventDefault();
+        setSearchInitialTab(undefined);
         setShowSearchModal(prev => !prev);
       } else if (!isMac && e.ctrlKey && !e.metaKey && e.key === 'p') {
         e.preventDefault();
+        setSearchInitialTab(undefined);
         setShowSearchModal(prev => !prev);
       }
     };
-    const onOpen = () => setShowSearchModal(true);
+    const onOpen = (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      setSearchInitialTab(detail?.initialTab);
+      setShowSearchModal(true);
+    };
     document.addEventListener('keydown', onKey);
-    window.addEventListener('markus:open-search', onOpen);
-    return () => { document.removeEventListener('keydown', onKey); window.removeEventListener('markus:open-search', onOpen); };
+    window.addEventListener('markus:open-search', onOpen as EventListener);
+    return () => { document.removeEventListener('keydown', onKey); window.removeEventListener('markus:open-search', onOpen as EventListener); };
   }, [isMobile]);
 
   const navigate = useCallback((p: PageId) => {
@@ -449,7 +456,7 @@ export function App() {
 
       {/* Global search modal (desktop) */}
       {!isMobile && showSearchModal && (
-        <SearchModal onClose={() => setShowSearchModal(false)} currentPage={page} />
+        <SearchModal onClose={() => { setShowSearchModal(false); setSearchInitialTab(undefined); }} currentPage={page} initialTab={searchInitialTab} />
       )}
     </div>
   );

packages/web-ui/src/api.ts

@@ -89,11 +89,19 @@ export interface SearchResult {
   source: 'channel' | 'direct';
   id: string;
   text: string;
+  /** Text snippet from FTS5 with <mark> tags for highlight rendering */
+  snippetText?: string;
   senderName?: string;
+  senderId?: string;
   channel?: string;
   sessionId?: string;
+  sessionName?: string;
   agentId?: string;
   createdAt: string;
+  /** Number of matches in this message (from FTS5) */
+  matchCount?: number;
+  /** FTS5 relevance score */
+  relevanceScore?: number;
 }
 
 
@@ -1679,12 +1687,26 @@ export const api = {
 
   // ─── Message Search ───────────────────────────────────────────────
   messages: {
-    search: (query: string, opts?: { scope?: 'all' | 'channel' | 'direct'; channel?: string; limit?: number }) => {
+    search: (query: string, opts?: {
+      scope?: 'all' | 'channel' | 'direct';
+      channel?: string;
+      agentId?: string;
+      sessionId?: string;
+      limit?: number;
+      offset?: number;
+      from?: string;
+      to?: string;
+    }) => {
       const params = new URLSearchParams({ q: query });
       if (opts?.scope) params.set('scope', opts.scope);
       if (opts?.channel) params.set('channel', opts.channel);
+      if (opts?.agentId) params.set('agentId', opts.agentId);
+      if (opts?.sessionId) params.set('sessionId', opts.sessionId);
       if (opts?.limit) params.set('limit', String(opts.limit));
-      return request<{ results: SearchResult[] }>(`/messages/search?${params}`);
+      if (opts?.offset) params.set('offset', String(opts.offset));
+      if (opts?.from) params.set('from', opts.from);
+      if (opts?.to) params.set('to', opts.to);
+      return request<{ results: SearchResult[]; total?: number; speedMs?: number }>(`/messages/search?${params}`);
     },
   },
 

packages/web-ui/src/components/ChatPanel.tsx

@@ -505,6 +505,13 @@ export function ChatPanel({
           className="rounded-md"
         />
         <span className="text-sm font-medium text-fg-primary truncate flex-1">{agentName}</span>
+        <button
+          onClick={() => window.dispatchEvent(new CustomEvent('markus:open-search', { detail: { initialTab: 'messages' } }))}
+          className={`p-1 rounded-md transition-colors text-fg-tertiary hover:text-fg-secondary`}
+          title={t('page.searchMessages')}
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" /></svg>
+        </button>
         {onClose && (
           <button onClick={onClose} className="text-fg-tertiary hover:text-fg-secondary transition-colors p-1">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">