Search Tools Studio (Español)

Descripción general

Search Tools Studio transforma /dashboard/search-tools, que pasa de ser un entorno básico de pruebas de búsqueda a un Studio con tres pestañas que unifica la búsqueda web, la extracción de contenido web y la comparación en paralelo de proveedores.

┌ Herramientas de búsqueda ──────────────────────────────────────────────┐
│ [🔍 Buscar] [📄 Extraer] [⚖ Comparar]           142ms · $0.001  </>    │
│ ⓘ [Guía de modalidades]                                                │
├──────────────────────────────────────────┬─────────────────────────────┤
│  {contenido de la pestaña activa}        │ ─ Configuración             │
│                                          │ Proveedor [auto ∨]          │
│                                          │   🟢 Serper  $0.001         │
│                                          │   🟢 Tavily  $0.008         │
│                                          │   🔥 Firecrawl (obtención)  │
│                                          │ Tipo   [web | news]         │
│                                          │ Página completa [ ]         │
│                                          │ Formato [md|text|html]      │
│                                          │ Modelo de reranking [∨]     │
└──────────────────────────────────────────┴─────────────────────────────┘

---

Pestañas

Pestaña de búsqueda

Convierte los componentes existentes SearchForm + ResultsPanel + RerankPanel en una pestaña:

• Consulta → resultados (título, URL, fragmento, puntuación de relevancia).
• Metadatos del proveedor en el panel de configuración (coste, cuota, estado).
• Sección de reranking: permite elegir un modelo de reranking, reordenar los resultados y mostrar positionDelta.
• Estado vacío con CTA cuando no hay proveedores de búsqueda configurados.
• Historial de búsquedas mediante SearchHistory.tsx.
• Llama a POST /v1/search (endpoint existente, sin cambios).

Pestaña de extracción

Nueva pestaña para extraer contenido de una URL mediante POST /v1/web/fetch (creado en el plan 05):

• Entrada: URL + interruptor de página completa + selector de formato (markdown / texto / HTML).
• Envío → obtención → renderizado de ScrapeResult.tsx.
• ScrapeResult renderiza una vista previa en markdown + un interruptor de contenido sin procesar.
• Límite: si el cuerpo de la respuesta supera los 256 KB, la interfaz muestra (truncado, ver contenido sin procesar) y abre el contenido sin procesar en un modal de Monaco (D21).
• Panel de metadatos: proveedor (firecrawl/jina-reader/tavily-search/tinyfish/nimble-search/anysearch-search), latencia, coste, tamaño de la respuesta y cantidad de enlaces.
• Usa el hook useScrapeFetch.ts.

Pestaña de comparación

Ejecuta la misma consulta/URL en hasta 4 proveedores en paralelo (D22):

• Columnas en paralelo para cada proveedor.
• Métricas: latencia, coste, cantidad de resultados y tamaño de la respuesta.
• Cálculo de coincidencia de URL para la búsqueda (cantidad de URL compartidas frente al resultado inicial).
• Llama a POST /v1/search (búsqueda) o POST /v1/web/fetch (extracción) para cada proveedor.

---

Panel de configuración (compartido)

SearchToolsConfigPane.tsx — siempre visible y contraíble.

Campo	Notas
Proveedor	Menú desplegable con indicador de estado (configurado / ausente / limitado)
Tipo	web o news (solo búsqueda)
Página completa	Interruptor para la extracción: obtiene toda la página o el primer contenido visible
Formato	markdown, text o html (solo extracción)
Modelo de reranking	Modelo opcional para el reranking posterior a la búsqueda
Historial	Sección contraíble del historial de búsquedas

---

SearchConceptCard

SearchConceptCard.tsx — siempre visible, acordeón contraíble. Explica:

Concepto	Descripción breve
Búsqueda	Obtiene una lista de resultados web (título, URL, fragmento, puntuación de relevancia)
Extracción	Extrae el contenido completo de una URL (markdown, texto o HTML)
Comparación	Ejecuta la misma consulta en N proveedores en paralelo
Reordenación	Reordena los resultados mediante un LLM para mejorar la relevancia de la consulta
Automático (barato)	Elige automáticamente el proveedor disponible más barato

---

Catálogo de proveedores

ProviderCatalog.tsx expone la lista completa de proveedores de GET /api/search/providers (ampliada en F4 para incluir proveedores de obtención):

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

El estado se determina en el momento de la solicitud comprobando si existen credenciales y si todas las claves se encuentran actualmente en período de espera.

---

Exportación de código

ExportCodeModal (importado desde Playground Studio) + codeExport.ts generan fragmentos de curl / Python / TypeScript para llamadas tanto a /v1/search como a /v1/web/fetch. El marcador de posición de la clave de API siempre es $OMNIROUTE_API_KEY (D11, compartido con Playground Studio).

---

Cambios en el backend

Solo fue necesario un cambio en el backend para esta funcionalidad:

Ampliación de GET /api/search/providers

src/app/api/search/providers/route.ts se amplió para:

• Incluir los 6 proveedores de obtención (firecrawl, jina-reader, tavily-search, tinyfish, nimble-search, anysearch-search) en el array.
• Añadir kind: "search" | "fetch" a cada elemento.
• Añadir status: "configured" | "missing" | "rate_limited" derivado del estado actual de las credenciales.
• Mantener la compatibilidad con versiones anteriores: los campos existentes (id, name, etc.) permanecen sin cambios.

---

Archivos clave

Ruta	Propósito
src/app/(dashboard)/dashboard/search-tools/SearchToolsClient.tsx	Estructura del estudio y orquestador de pestañas
src/app/(dashboard)/dashboard/search-tools/components/SearchToolsTopBar.tsx	Pestañas + métricas + botón de exportación
src/app/(dashboard)/dashboard/search-tools/components/SearchToolsConfigPane.tsx	Panel de configuración compartido
src/app/(dashboard)/dashboard/search-tools/components/SearchConceptCard.tsx	Tarjetas explicativas (siempre visibles)
src/app/(dashboard)/dashboard/search-tools/components/ProviderCatalog.tsx	Lista de proveedores con metadatos
src/app/(dashboard)/dashboard/search-tools/components/ScrapeResult.tsx	Vista previa de markdown + selector de contenido sin procesar
src/app/(dashboard)/dashboard/search-tools/components/tabs/SearchTab.tsx	Pestaña de búsqueda + reordenación
src/app/(dashboard)/dashboard/search-tools/components/tabs/ScrapeTab.tsx	Pestaña de extracción
src/app/(dashboard)/dashboard/search-tools/components/tabs/CompareTab.tsx	Pestaña de comparación entre múltiples proveedores
src/app/(dashboard)/dashboard/search-tools/hooks/useScrapeFetch.ts	Hook de obtención para extracción
src/app/api/search/providers/route.ts	Ampliado con kind + status + proveedores de obtención
open-sse/config/searchRegistry.ts	Fuente de referencia para los metadatos de proveedores de búsqueda

---

Solución de problemas

Síntoma	Causa	Solución
La pestaña de extracción muestra “endpoint no disponible”	/v1/web/fetch no está conectado	Verifique que el plan 05 esté fusionado; compruebe que exista src/app/api/v1/web/fetch/route.ts
El catálogo de proveedores muestra todos como “faltantes”	Credenciales no configuradas	Añada las credenciales en /dashboard/providers
El contenido extraído está truncado	La respuesta supera el límite de 256 KB	Comportamiento esperado (D21). Use el botón “ver contenido sin procesar” para consultar todo el contenido
La pestaña de comparación solo muestra 2 proveedores	El límite de solicitudes está activo	Es posible que dos o más proveedores estén en período de espera; compruebe el estado de los proveedores en el panel de configuración
“Tamaño” aparece como clave sin procesar en la tabla	Falta la clave de i18n	Verifique que search.size exista en el archivo de configuración regional; vuelva a compilar i18n

---

Referencias

• Plan maestro: _tasks/features-v3.8.6/refactorpages/_orchestration/master-plan-group-C.md
• Plan de la funcionalidad: _tasks/features-v3.8.6/refactorpages/18-search-tools-studio-redesign.plan.md
• Registro de proveedores de búsqueda: open-sse/config/searchRegistry.ts
• Playground Studio (ExportCodeModal + codeExport.ts compartidos): docs/frameworks/PLAYGROUND_STUDIO.md
• Backend de obtención web: src/app/api/v1/web/fetch/route.ts

---

Código fuente de OmniRoute (a58000c7685f)