feat: chatbot

frontend/src/components/TradeIdeas.tsx

@@ -2,11 +2,11 @@ import { useState, useMemo, useEffect, Fragment } from 'react'
 import {
   useAllPatterns, useLastScores, useScorePatterns, useAiStatus,
   usePortfolioPositions, useTradeMtm, useRiskProfiles, useMacroRegime, useAddPosition,
-  useConfig,
+  useConfig, useAiTradeProposals, useConfirmAiTradeProposal, useRejectAiTradeProposal,
 } from '../hooks/useApi'
 import {
   Target, Brain, Plus, RefreshCw, ChevronDown, ChevronUp, CheckCircle2,
-  LayoutGrid, List, Terminal,
+  LayoutGrid, List, Terminal, Bot, Check, X as XIcon,
 } from 'lucide-react'
 import clsx from 'clsx'
 import { format } from 'date-fns'
@@ -683,6 +683,72 @@ export function TradeRow({ item, onAdd, macroInfo, addedInfo, profiles, rank }:
   )
 }
 
+// ── AI-proposed trades — awaiting explicit user confirmation ──────────────────
+// Created by the chat widget's propose_trade tool call. Deliberately kept
+// separate from TradeCard/TradeItem (those are derived from scored patterns —
+// grafting an AI-sourced item onto that shape would be fragile).
+function AiProposedTradesSection() {
+  const { data: proposals } = useAiTradeProposals('pending')
+  const { mutate: confirmProposal, isPending: confirming } = useConfirmAiTradeProposal()
+  const { mutate: rejectProposal, isPending: rejecting } = useRejectAiTradeProposal()
+  const [pendingId, setPendingId] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  if (!proposals || proposals.length === 0) return null
+
+  const handleConfirm = (id: string) => {
+    setPendingId(id); setError(null)
+    confirmProposal(id, {
+      onError: (e: any) => setError(e?.response?.data?.detail ?? 'Erreur lors de la confirmation.'),
+      onSettled: () => setPendingId(null),
+    })
+  }
+  const handleReject = (id: string) => {
+    setPendingId(id)
+    rejectProposal(id, { onSettled: () => setPendingId(null) })
+  }
+
+  return (
+    <div className="card border-blue-500/30">
+      <h3 className="section-title flex items-center gap-1.5 mb-3">
+        <Bot className="w-3.5 h-3.5 text-blue-400" /> Idées proposées par l'IA
+        <span className="text-slate-600 font-normal">({proposals.length} en attente)</span>
+      </h3>
+      {error && <div className="text-xs text-red-400 mb-2">{error}</div>}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+        {proposals.map(p => (
+          <div key={p.id} className="rounded-lg border border-slate-700/40 bg-dark-900/60 p-3 space-y-2">
+            <div className="flex items-start justify-between gap-2">
+              <div>
+                <div className="text-sm font-semibold text-white">{p.title}</div>
+                <div className="text-[11px] text-slate-500">{p.underlying} · {p.strategy} · {p.capital_invested.toLocaleString('fr-FR')} €</div>
+              </div>
+              <span className="text-[10px] px-1.5 py-0.5 rounded bg-blue-900/40 text-blue-300 shrink-0">🤖 IA</span>
+            </div>
+            {p.rationale && <div className="text-[11px] text-slate-400 leading-snug">{p.rationale}</div>}
+            <div className="flex items-center gap-2 pt-1">
+              <button
+                onClick={() => handleConfirm(p.id)}
+                disabled={confirming && pendingId === p.id}
+                className="flex-1 flex items-center justify-center gap-1 text-xs px-2 py-1.5 rounded bg-emerald-600/20 text-emerald-400 hover:bg-emerald-600/30 disabled:opacity-40 transition-colors"
+              >
+                <Check className="w-3 h-3" /> Confirmer
+              </button>
+              <button
+                onClick={() => handleReject(p.id)}
+                disabled={rejecting && pendingId === p.id}
+                className="flex-1 flex items-center justify-center gap-1 text-xs px-2 py-1.5 rounded bg-slate-700/40 text-slate-400 hover:bg-slate-700/60 disabled:opacity-40 transition-colors"
+              >
+                <XIcon className="w-3 h-3" /> Rejeter
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
 // ── Self-contained Trade Ideas Tab ────────────────────────────────────────────
 export function TradeIdeasTab() {
   const { data: allPatternsData } = useAllPatterns()
@@ -862,6 +928,8 @@ export function TradeIdeasTab() {
 
   return (
     <div className="space-y-4">
+      <AiProposedTradesSection />
+
       {/* Toolbar */}
       <div className="flex items-center justify-between gap-3 flex-wrap">
         <div className="flex items-center gap-2 flex-wrap">