Search Tools Studio (Français)

Vue d’ensemble

Search Tools Studio transforme /dashboard/search-tools, qui était un simple environnement de test de recherche, en un Studio à trois onglets réunissant la recherche web, l’extraction de contenu web et la comparaison côte à côte des fournisseurs.

┌ Outils de recherche ───────────────────────────────────────────────────┐
│ [🔍 Recherche] [📄 Extraction] [⚖ Comparaison]  142ms · $0.001  </>    │
│ ⓘ [Guide des modalités]                                                │
├──────────────────────────────────────────┬─────────────────────────────┤
│  {contenu de l’onglet actif}             │ ─ Configuration             │
│                                          │ Fournisseur [auto ∨]        │
│                                          │   🟢 Serper  $0.001         │
│                                          │   🟢 Tavily  $0.008         │
│                                          │   🔥 Firecrawl (récupération)│
│                                          │ Type   [web | actualités]   │
│                                          │ Page complète [ ] (extraction)│
│                                          │ Format [md|texte|html]      │
│                                          │ Modèle de reclassement [∨]  │
└──────────────────────────────────────────┴─────────────────────────────┘

---

Onglets

Onglet Recherche

Fait évoluer les composants SearchForm + ResultsPanel + RerankPanel existants pour les intégrer dans un onglet :

• Requête → résultats (titre, URL, extrait, score de pertinence).
• Métadonnées du fournisseur dans le panneau Configuration (coût, quota, statut).
• Section de reclassement : sélection d’un modèle de reclassement, réorganisation des résultats et affichage de positionDelta.
• État vide avec un appel à l’action lorsqu’aucun fournisseur de recherche n’est configuré.
• Historique des recherches via SearchHistory.tsx.
• Appelle POST /v1/search (point de terminaison existant, aucun changement).

Onglet Extraction

Nouvel onglet permettant d’extraire le contenu d’une URL via POST /v1/web/fetch (créé dans le plan 05) :

• Entrée : URL + option de page complète + sélecteur de format (markdown / texte / HTML).
• Envoi → récupération → rendu de ScrapeResult.tsx.
• ScrapeResult affiche un aperçu du markdown ainsi qu’une option permettant d’afficher le contenu brut.
• Limite : si le corps de la réponse dépasse 256 Ko, l’interface affiche (tronqué, afficher le contenu brut) et ouvre le contenu brut dans une fenêtre modale Monaco (D21).
• Panneau de métadonnées : fournisseur (firecrawl/jina-reader/tavily-search/tinyfish/nimble-search/anysearch-search), latence, coût, taille de la réponse, nombre de liens.
• Utilise le hook useScrapeFetch.ts.

Onglet Comparaison

Exécute la même requête/URL auprès de 4 fournisseurs au maximum en parallèle (D22) :

• Colonnes côte à côte pour chaque fournisseur.
• Métriques : latence, coût, nombre de résultats, taille de la réponse.
• Calcul du chevauchement des URL pour la recherche (nombre d’URL partagées par rapport au résultat initial).
• Appelle POST /v1/search (recherche) ou POST /v1/web/fetch (extraction) pour chaque fournisseur.

---

Panneau Configuration (partagé)

SearchToolsConfigPane.tsx — toujours visible et repliable.

Champ	Remarques
Fournisseur	Liste déroulante avec badge de statut (configuré / manquant / débit limité)
Type	web ou news (recherche uniquement)
Page complète	Option d’extraction — récupère la page entière plutôt que le premier contenu visible
Format	markdown, text ou html (extraction uniquement)
Modèle de reclassement	Modèle facultatif pour le reclassement après la recherche
Historique	Section repliable de l’historique des recherches

---

SearchConceptCard

SearchConceptCard.tsx — toujours visible, accordéon repliable. Explique :

Concept	Description concise
Recherche	Récupère une liste de résultats web (titre, URL, extrait, score de pertinence)
Extraction	Extrait l’intégralité du contenu d’une URL (markdown, texte ou HTML)
Comparaison	Exécute la même requête dans N fournisseurs côte à côte
Reclassement	Réordonne les résultats via un LLM afin d’améliorer leur pertinence par rapport à la requête
Auto (économique)	Sélectionne automatiquement le fournisseur disponible le moins cher

---

Catalogue des fournisseurs

ProviderCatalog.tsx expose la liste complète des fournisseurs provenant de GET /api/search/providers (étendue dans F4 pour inclure les fournisseurs d’extraction) :

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

Le statut est déterminé au moment de la requête en vérifiant si les identifiants existent et si toutes les clés sont actuellement en période de récupération.

---

Exportation du code

ExportCodeModal (importé depuis Playground Studio) + codeExport.ts génèrent des extraits curl / Python / TypeScript pour les appels à /v1/search et /v1/web/fetch. L’espace réservé pour la clé API est toujours $OMNIROUTE_API_KEY (D11, partagé avec Playground Studio).

---

Modifications du backend

Une seule modification du backend était nécessaire pour cette fonctionnalité :

Extension de GET /api/search/providers

src/app/api/search/providers/route.ts a été étendu pour :

• Inclure les 6 fournisseurs d’extraction (firecrawl, jina-reader, tavily-search, tinyfish, nimble-search, anysearch-search) dans le tableau.
• Ajouter kind: "search" | "fetch" à chaque élément.
• Ajouter status: "configured" | "missing" | "rate_limited" déterminé à partir de l’état actuel des identifiants.
• Maintenir la rétrocompatibilité — les champs existants (id, name, etc.) restent inchangés.

---

Fichiers principaux

Chemin	Rôle
src/app/(dashboard)/dashboard/search-tools/SearchToolsClient.tsx	Structure du studio, orchestration des onglets
src/app/(dashboard)/dashboard/search-tools/components/SearchToolsTopBar.tsx	Onglets + métriques + bouton d’exportation
src/app/(dashboard)/dashboard/search-tools/components/SearchToolsConfigPane.tsx	Panneau de configuration partagé
src/app/(dashboard)/dashboard/search-tools/components/SearchConceptCard.tsx	Cartes explicatives (toujours visibles)
src/app/(dashboard)/dashboard/search-tools/components/ProviderCatalog.tsx	Liste des fournisseurs avec métadonnées
src/app/(dashboard)/dashboard/search-tools/components/ScrapeResult.tsx	Aperçu du markdown + bascule vers les données brutes
src/app/(dashboard)/dashboard/search-tools/components/tabs/SearchTab.tsx	Onglet de recherche + reclassement
src/app/(dashboard)/dashboard/search-tools/components/tabs/ScrapeTab.tsx	Onglet d’extraction
src/app/(dashboard)/dashboard/search-tools/components/tabs/CompareTab.tsx	Onglet de comparaison entre plusieurs fournisseurs
src/app/(dashboard)/dashboard/search-tools/hooks/useScrapeFetch.ts	Hook de récupération pour l’extraction
src/app/api/search/providers/route.ts	Étendu avec kind + status + fournisseurs d’extraction
open-sse/config/searchRegistry.ts	Source de référence des métadonnées des fournisseurs

---

Dépannage

Symptôme	Cause	Correction
L’onglet Scrape affiche « endpoint not available »	/v1/web/fetch n’est pas câblé	Vérifiez que le plan 05 est fusionné ; vérifiez que src/app/api/v1/web/fetch/route.ts existe
Le catalogue des fournisseurs les affiche tous comme « missing »	Identifiants non configurés	Ajoutez les identifiants dans /dashboard/providers
Le contenu extrait est tronqué	Réponse supérieure à la limite de 256 Ko	Comportement attendu (D21). Utilisez le bouton « view raw » pour afficher le contenu complet
L’onglet Compare n’affiche que 2 fournisseurs	Limitation de débit active	Deux fournisseurs ou plus sont peut-être en période de récupération — vérifiez leur statut dans le volet Config
« Size » s’affiche comme clé brute dans le tableau	Clé i18n manquante	Vérifiez que search.size existe dans le fichier de paramètres régionaux ; reconstruisez i18n

---

Références

• Plan directeur : _tasks/features-v3.8.6/refactorpages/_orchestration/master-plan-group-C.md
• Plan de la fonctionnalité : _tasks/features-v3.8.6/refactorpages/18-search-tools-studio-redesign.plan.md
• Registre des fournisseurs de recherche : open-sse/config/searchRegistry.ts
• Playground Studio (ExportCodeModal + codeExport.ts partagés) : docs/frameworks/PLAYGROUND_STUDIO.md
• Backend de récupération Web : src/app/api/v1/web/fetch/route.ts

---

Code source d’OmniRoute (a58000c7685f)