Search Tools Studio (Português (Brasil))

Visão geral

O Search Tools Studio transforma /dashboard/search-tools, antes uma área básica para testes de pesquisa, em um Studio com três abas que unifica pesquisa na web, extração de conteúdo web e comparação lado a lado entre provedores.

┌ Ferramentas de pesquisa ───────────────────────────────────────────────┐
│ [🔍 Pesquisar] [📄 Extrair] [⚖ Comparar]        142ms · $0.001  </>    │
│ ⓘ [Guia de modalidades]                                                 │
├──────────────────────────────────────────┬─────────────────────────────┤
│  {conteúdo da aba ativa}                 │ ─ Configuração              │
│                                          │ Provedor [auto ∨]           │
│                                          │   🟢 Serper  $0.001         │
│                                          │   🟢 Tavily  $0.008         │
│                                          │   🔥 Firecrawl (busca)      │
│                                          │ Tipo   [web | notícias]     │
│                                          │ Página completa [ ]         │
│                                          │   (extração)                │
│                                          │ Formato [md|texto|html]     │
│                                          │ Modelo de rerank [∨]        │
└──────────────────────────────────────────┴─────────────────────────────┘

---

Abas

Aba de pesquisa

Transforma os componentes existentes SearchForm + ResultsPanel + RerankPanel em uma aba:

• Consulta → resultados (título, URL, trecho, pontuação de relevância).
• Metadados do provedor no painel de Configuração (custo, cota, status).
• Seção de rerank: selecione um modelo de rerank, reordene os resultados e exiba positionDelta.
• Estado vazio com CTA quando nenhum provedor de pesquisa estiver configurado.
• Histórico de pesquisas por meio de SearchHistory.tsx.
• Chama POST /v1/search (endpoint existente, sem alterações).

Aba de extração

Nova aba para extrair conteúdo de uma URL por meio de POST /v1/web/fetch (criado no plano 05):

• Entrada: URL + opção de página completa + seletor de formato (markdown / texto / HTML).
• Enviar → buscar → renderizar ScrapeResult.tsx.
• ScrapeResult renderiza uma prévia em markdown + opção para exibir o conteúdo bruto.
• Limite: se o corpo da resposta for maior que 256 KB, a interface exibirá (truncado, ver conteúdo bruto) e abrirá o conteúdo bruto em um modal do Monaco (D21).
• Painel de metadados: provedor (firecrawl/jina-reader/tavily-search/tinyfish/nimble-search/anysearch-search), latência, custo, tamanho da resposta e número de links.
• Usa o hook useScrapeFetch.ts.

Aba de comparação

Executa a mesma consulta/URL em até 4 provedores em paralelo (D22):

• Colunas lado a lado para cada provedor.
• Métricas: latência, custo, quantidade de resultados e tamanho da resposta.
• Cálculo da sobreposição de URLs na pesquisa (número de URLs compartilhadas em relação ao resultado inicial).
• Chama POST /v1/search (pesquisa) ou POST /v1/web/fetch (extração) para cada provedor.

---

Painel de configuração (compartilhado)

SearchToolsConfigPane.tsx — sempre visível e recolhível.

Campo	Observações
Provedor	Lista suspensa com indicador de status (configurado / ausente / taxa limitada)
Tipo	web ou news (somente pesquisa)
Página completa	Opção de extração — busca a página inteira ou apenas o primeiro conteúdo visível
Formato	markdown, text ou html (somente extração)
Modelo de rerank	Modelo opcional para reordenar os resultados após a pesquisa
Histórico	Seção recolhível do histórico de pesquisas

---

SearchConceptCard

SearchConceptCard.tsx — sempre visível, acordeão recolhível. Explica:

Conceito	Resumo em uma linha
Pesquisa	Obtém uma lista de resultados da web (título, URL, trecho, pontuação de relevância)
Extração	Extrai o conteúdo completo de uma URL (markdown, texto ou HTML)
Comparação	Executa a mesma consulta em N provedores lado a lado
Reclassificação	Reordena os resultados via LLM para melhorar a relevância da consulta
Auto (mais barato)	Seleciona automaticamente o provedor disponível mais barato

---

Catálogo de Provedores

ProviderCatalog.tsx expõe a lista completa de provedores de GET /api/search/providers (estendida em F4 para incluir provedores de obtenção):

| kind | "search" (20 provedores) ou "fetch" (firecrawl, jina-reader, tavily-search, tinyfish, nimble-search, anysearch-search) |

O status é derivado no momento da requisição, verificando se as credenciais existem e se todas as chaves estão atualmente em período de espera.

---

Exportação de Código

ExportCodeModal (importado do Playground Studio) + codeExport.ts geram trechos de código curl / Python / TypeScript para chamadas a /v1/search e /v1/web/fetch. O placeholder da chave de API é sempre $OMNIROUTE_API_KEY (D11, compartilhado com o Playground Studio).

---

Alterações no Backend

Apenas uma alteração no backend foi necessária para este recurso:

GET /api/search/providers Estendido

src/app/api/search/providers/route.ts foi estendido para:

• Incluir todos os 6 provedores de obtenção (firecrawl, jina-reader, tavily-search, tinyfish, nimble-search, anysearch-search) no array.
• Adicionar kind: "search" | "fetch" a cada item.
• Adicionar status: "configured" | "missing" | "rate_limited" derivado do estado atual das credenciais.
• Manter a compatibilidade com versões anteriores — campos existentes (id, name, etc.) inalterados.

---

Arquivos Principais

Caminho	Finalidade
src/app/(dashboard)/dashboard/search-tools/SearchToolsClient.tsx	Estrutura do Studio, orquestrador de abas
src/app/(dashboard)/dashboard/search-tools/components/SearchToolsTopBar.tsx	Abas + métricas + botão de exportação
src/app/(dashboard)/dashboard/search-tools/components/SearchToolsConfigPane.tsx	Painel de configuração compartilhado
src/app/(dashboard)/dashboard/search-tools/components/SearchConceptCard.tsx	Cartões explicativos (sempre visíveis)
src/app/(dashboard)/dashboard/search-tools/components/ProviderCatalog.tsx	Lista de provedores com metadados
src/app/(dashboard)/dashboard/search-tools/components/ScrapeResult.tsx	Pré-visualização de markdown + alternância para conteúdo bruto
src/app/(dashboard)/dashboard/search-tools/components/tabs/SearchTab.tsx	Aba de pesquisa + reclassificação
src/app/(dashboard)/dashboard/search-tools/components/tabs/ScrapeTab.tsx	Aba de extração
src/app/(dashboard)/dashboard/search-tools/components/tabs/CompareTab.tsx	Aba de comparação entre vários provedores
src/app/(dashboard)/dashboard/search-tools/hooks/useScrapeFetch.ts	Hook de obtenção para extração
src/app/api/search/providers/route.ts	Estendido com kind + status + provedores de obtenção
open-sse/config/searchRegistry.ts	Fonte oficial dos metadados dos provedores de pesquisa

---

Solução de problemas

Sintoma	Causa	Correção
A aba Scrape exibe “endpoint não disponível”	/v1/web/fetch não está conectado	Verifique se o plano 05 foi mesclado; confira se src/app/api/v1/web/fetch/route.ts existe
O catálogo de provedores mostra todos como “ausentes”	Credenciais não configuradas	Adicione as credenciais em /dashboard/providers
O conteúdo extraído está truncado	Resposta > limite de 256 KB	Comportamento esperado (D21). Use o botão “ver conteúdo bruto” para acessar o conteúdo completo
A aba Comparar mostra apenas 2 provedores	Limite de requisições ativo	Dois ou mais provedores podem estar em espera — verifique o status dos provedores no painel Configuração
“Tamanho” é exibido como chave bruta na tabela	Chave de i18n ausente	Verifique se search.size existe no arquivo de localidade; recompile o i18n

---

Referências

• Plano mestre: _tasks/features-v3.8.6/refactorpages/_orchestration/master-plan-group-C.md
• Plano do recurso: _tasks/features-v3.8.6/refactorpages/18-search-tools-studio-redesign.plan.md
• Registro de provedores de busca: open-sse/config/searchRegistry.ts
• Playground Studio (ExportCodeModal + codeExport.ts compartilhados): docs/frameworks/PLAYGROUND_STUDIO.md
• Backend de busca na web: src/app/api/v1/web/fetch/route.ts

---

Código-fonte do OmniRoute (a58000c7685f)