Search Tools Studio (中文 (繁體))

概覽

Search Tools Studio 將 /dashboard/search-tools 從基本搜尋測試介面轉變為整合網頁搜尋、網頁擷取，以及並排提供者比較功能的三分頁 Studio。

┌ 搜尋工具 ──────────────────────────────────────────────────────────────┐
│ [🔍 搜尋] [📄 擷取] [⚖ 比較]                   142ms · $0.001  </>    │
│ ⓘ [模態指南]                                                            │
├──────────────────────────────────────────┬─────────────────────────────┤
│  {作用中分頁內容}                        │ ─ 設定                      │
│                                          │ 提供者 [自動 ∨]            │
│                                          │   🟢 Serper  $0.001         │
│                                          │   🟢 Tavily  $0.008         │
│                                          │   🔥 Firecrawl（擷取）      │
│                                          │ 類型   [網頁 | 新聞]        │
│                                          │ 完整頁面 [ ]（擷取）        │
│                                          │ 格式 [md|文字|html]         │
│                                          │ 重新排序模型 [∨]            │
└──────────────────────────────────────────┴─────────────────────────────┘

---

分頁

搜尋分頁

將現有的 SearchForm + ResultsPanel + RerankPanel 改造為一個分頁：

• 查詢 → 結果（標題、URL、摘要、相關性分數）。
• 設定窗格中的提供者中繼資料（成本、配額、狀態）。
• 重新排序區段：選擇重新排序模型、重新排列結果並顯示 positionDelta。
• 未設定搜尋提供者時，顯示包含行動呼籲的空白狀態。
• 透過 SearchHistory.tsx 提供搜尋歷程。
• 呼叫 POST /v1/search（現有端點，不做變更）。

擷取分頁

用於透過 POST /v1/web/fetch（於計畫 05 中建立）從 URL 擷取內容的新分頁：

• 輸入：URL + 完整頁面切換開關 + 格式選擇器（markdown / 文字 / HTML）。
• 提交 → 擷取 → 轉譯 ScrapeResult.tsx。
• ScrapeResult 會轉譯 markdown 預覽與原始內容切換開關。
• 上限：若回應主體超過 256 KB，UI 會顯示「（已截斷，檢視原始內容）」，並在 Monaco 模態視窗中開啟原始內容（D21）。
• 中繼資料面板：提供者（firecrawl/jina-reader/tavily-search/tinyfish/nimble-search/anysearch-search）、延遲、成本、回應大小、連結數量。
• 使用 useScrapeFetch.ts hook。

比較分頁

在最多 4 個提供者之間並行執行相同的查詢或 URL（D22）：

• 每個提供者各有一個並排欄位。
• 指標：延遲、成本、結果數量、回應大小。
• 搜尋的 URL 重疊計算（共用 URL 數量與初始結果的比較）。
• 針對每個提供者呼叫 POST /v1/search（搜尋）或 POST /v1/web/fetch（擷取）。

---

設定窗格（共用）

SearchToolsConfigPane.tsx — 永遠顯示，且可摺疊。

欄位	說明
提供者	帶有狀態徽章的下拉式選單（已設定／缺少／已達速率限制）
類型	web 或 news（僅限搜尋）
完整頁面	擷取切換開關 — 擷取整個頁面，而非第一段可見內容
格式	markdown、text 或 html（僅限擷取）
重新排序模型	用於搜尋後重新排序的選用模型
歷程	可摺疊的搜尋歷程區段

---

SearchConceptCard

SearchConceptCard.tsx — 永遠可見、可收合的手風琴式元件。說明：

概念	簡介
搜尋	取得網頁結果清單（標題、URL、摘要、相關性分數）
擷取	擷取 URL 的完整內容（markdown、文字或 HTML）
比較	在 N 個提供者中並排執行相同查詢
重新排序	透過 LLM 重新排列結果，以提升與查詢的相關性
自動（最便宜）	自動選擇目前可用且最便宜的提供者

---

提供者目錄

ProviderCatalog.tsx 會公開來自 GET /api/search/providers 的完整提供者清單 （在 F4 中擴充以納入擷取提供者）：

| kind | "search"（20 個提供者）或 "fetch"（firecrawl、jina-reader、tavily-search、tinyfish、nimble-search、anysearch-search） |

狀態會在提出請求時動態推導，方式是檢查認證資訊是否存在，以及 目前是否所有金鑰都處於冷卻狀態。

---

匯出程式碼

ExportCodeModal（從 Playground Studio 匯入）+ codeExport.ts 會為 /v1/search 和 /v1/web/fetch 呼叫產生 curl / Python / TypeScript 程式碼片段。 API 金鑰預留位置一律為 $OMNIROUTE_API_KEY（D11，與 Playground Studio 共用）。

---

後端變更

此功能只需要一項後端變更：

擴充 GET /api/search/providers

src/app/api/search/providers/route.ts 已擴充為：

• 在陣列中納入全部 6 個擷取提供者（firecrawl、jina-reader、tavily-search、tinyfish、nimble-search、anysearch-search）。
• 為每個項目新增 kind: "search" | "fetch"。
• 新增根據即時認證狀態推導的 status: "configured" | "missing" | "rate_limited"。
• 維持向後相容性 — 現有欄位（id、name 等）保持不變。

---

主要檔案

路徑	用途
src/app/(dashboard)/dashboard/search-tools/SearchToolsClient.tsx	Studio 外殼、分頁協調器
src/app/(dashboard)/dashboard/search-tools/components/SearchToolsTopBar.tsx	分頁 + 指標 + 匯出按鈕
src/app/(dashboard)/dashboard/search-tools/components/SearchToolsConfigPane.tsx	共用設定面板
src/app/(dashboard)/dashboard/search-tools/components/SearchConceptCard.tsx	說明卡片（永遠可見）
src/app/(dashboard)/dashboard/search-tools/components/ProviderCatalog.tsx	包含中繼資料的提供者清單
src/app/(dashboard)/dashboard/search-tools/components/ScrapeResult.tsx	Markdown 預覽 + 原始內容切換
src/app/(dashboard)/dashboard/search-tools/components/tabs/SearchTab.tsx	搜尋 + 重新排序分頁
src/app/(dashboard)/dashboard/search-tools/components/tabs/ScrapeTab.tsx	擷取分頁
src/app/(dashboard)/dashboard/search-tools/components/tabs/CompareTab.tsx	多提供者比較分頁
src/app/(dashboard)/dashboard/search-tools/hooks/useScrapeFetch.ts	擷取用 fetch hook
src/app/api/search/providers/route.ts	擴充加入 kind + status + 擷取提供者
open-sse/config/searchRegistry.ts	搜尋提供者中繼資料的單一事實來源

---

疑難排解

症狀	原因	修正方式
抓取分頁顯示「端點無法使用」	/v1/web/fetch 尚未連接	確認計畫 05 已合併；檢查 src/app/api/v1/web/fetch/route.ts 是否存在
提供者目錄全部顯示為「缺少」	尚未設定認證資訊	在 /dashboard/providers 中新增認證資訊
抓取內容遭到截斷	回應超過 256 KB 上限	預期行為（D21）。使用「檢視原始內容」按鈕查看完整內容
比較分頁僅顯示 2 個提供者	速率限制生效中	可能有兩個以上的提供者處於冷卻狀態 — 請在「設定」窗格中檢查提供者狀態
表格中的「大小」顯示為原始鍵值	缺少 i18n 鍵值	確認地區設定檔中存在 search.size；重新建置 i18n

---

參考資料

• 主計畫：_tasks/features-v3.8.6/refactorpages/_orchestration/master-plan-group-C.md
• 功能計畫：_tasks/features-v3.8.6/refactorpages/18-search-tools-studio-redesign.plan.md
• 搜尋提供者登錄檔：open-sse/config/searchRegistry.ts
• Playground Studio（共用的 ExportCodeModal + codeExport.ts）：docs/frameworks/PLAYGROUND_STUDIO.md
• Web fetch 後端：src/app/api/v1/web/fetch/route.ts

---

OmniRoute 原始碼 (a58000c7685f)