Proposition: Onglet Tools Generique sur Pages Instances

Date: 04-02-2026 Status: EN COURS - Phase 1 terminee Priorite: HAUTE Derniere MAJ: 04-02-2026

Objectif

Ajouter un onglet "Tools" sur toutes les pages instances, avec une interface dediee selon le type de connecteur.

4 premiers outils implementes :

1. web-search - Interface recherche web
2. scraper - Navigation + extraction + CAPTCHA
3. ai-orchestrator - Jobs IA + GPU monitor
4. yolo - Detection d'objets

Extensible : Chaque type de connecteur pourra avoir son Tool dedie.

Avancement

Fichiers crees

src/routes/connectors/instance/[id]/tools/
└── index.tsx                  # Router dynamique vers le bon composant

src/components/tools/
├── index.ts                   # Export tous les tools + registry
├── BaseTool.tsx               # Layout commun (header, loading, error)
├── DefaultTool.tsx            # Fallback pour connecteurs sans tool
├── WebSearchTool.tsx          # web-search (227 lignes)
├── ScrapperTool.tsx           # scraper (483 lignes)
├── AiOrchestratorTool.tsx     # ai-orchestrator (397 lignes)
└── YoloTool.tsx               # yolo (367 lignes)

Modification layout.tsx

• Ajout detection isTools dans pathname
• Ajout onglet "Tools" dans les tabs (visible pour TOUTES les instances)

Fonctionnalites implementees

WebSearchTool (web-search)

• [x] Input recherche
• [x] Selection moteurs (Google, Bing, DuckDuckGo, Wikipedia, Brave)
• [x] Categories (Web, Images, News, Videos)
• [x] Affichage resultats (titre, url, snippet, engine badge)
• [x] Mode images avec thumbnails

YoloTool (yolo)

• [x] Upload image (drag&drop, file picker)
• [x] Charger depuis URL
• [x] Selection modele (yolov8n/s/m)
• [x] Slider confiance (0.1-0.9)
• [x] Detection JSON (POST /detect)
• [x] Canvas avec bounding boxes overlay
• [x] Liste detections triees par confiance
• [x] Download image annotee

AiOrchestratorTool (ai-orchestrator)

• [x] GPU Monitor (VRAM gauge, temperature)
• [x] Worker status (running/paused, boutons pause/resume)
• [x] Queue status (pending count, current job)
• [x] Grille outils (status running/stopped, boutons start/stop)
• [x] Formulaire creation job (outil, type, priorite, params, input file)
• [x] Liste jobs avec filtres (all/pending/running/completed/failed)
• [x] Auto-refresh 5s

ScrapperTool (scraper)

• [x] Barre URL avec navigation (back, forward, refresh)
• [x] Screenshot viewer (canvas)
• [x] Actions: click (sur screenshot), type, scroll
• [x] Extraction avec selecteur CSS
• [x] Export (screenshot, PDF, HTML)
• [x] AI: detection YOLO, OCR, CAPTCHA detect
• [x] Mode Templates
• [x] Mode CAPTCHA Assist
• [x] Console avec historique actions

Prochaines etapes

1. Test en PROD - Deployer et tester sur les 4 instances
2. WebSearchTool - Ajouter autocomplete (/autocompleter)
3. ScrapperTool V2 - Streaming WebSocket (optionnel)
4. Feedback utilisateur - Ajuster selon retours

Architecture

Registry des Tools

// src/components/tools/index.ts
export const TOOLS_ENABLED_CONNECTORS = [
  'web-search',
  'scraper',
  'ai-orchestrator',
  'yolo',
] as const;

export function hasDedicatedTool(connectorType: string): boolean {
  return TOOLS_ENABLED_CONNECTORS.includes(connectorType);
}

Page tools/index.tsx

export default component$(() => {
  const ctx = useContext(InstanceContext);
  const connectorType = ctx.instance.value?.connector_type;

  switch (connectorType) {
    case 'web-search': return <WebSearchTool instance={instance} />;
    case 'scraper': return <ScrapperTool instance={instance} />;
    case 'ai-orchestrator': return <AiOrchestratorTool instance={instance} />;
    case 'yolo': return <YoloTool instance={instance} />;
    default: return <DefaultTool instance={instance} />;
  }
});

Extensibilite future

Chaque connecteur peut avoir son Tool :

Il suffit d'ajouter le composant dans TOOLS_ENABLED_CONNECTORS et le switch case.

Complement

Voir aussi: 04-02-2026-22-15-plan-detaille-tools-api.md