Improve TradingView layout loading with better debugging and selection logic

- Added comprehensive layout menu item detection with multiple selectors
- Implemented debug screenshots for layout menu and after layout changes
- Added better error handling and logging for layout selection
- Improved text matching with exact and partial match strategies
- Added fallback comprehensive search with direct click functionality
- Fixed TypeScript issues with element handle clicking

components/AIAnalysisPanel.tsx

@@ -15,21 +15,36 @@ const timeframes = [
 
 export default function AIAnalysisPanel() {
   const [symbol, setSymbol] = useState('BTCUSD')
-  const [layout, setLayout] = useState(layouts[0])
+  const [selectedLayouts, setSelectedLayouts] = useState<string[]>([layouts[0]])
   const [timeframe, setTimeframe] = useState('60')
   const [loading, setLoading] = useState(false)
   const [result, setResult] = useState<any>(null)
   const [error, setError] = useState<string | null>(null)
 
+  const toggleLayout = (layout: string) => {
+    setSelectedLayouts(prev => 
+      prev.includes(layout) 
+        ? prev.filter(l => l !== layout)
+        : [...prev, layout]
+    )
+  }
+
   async function handleAnalyze() {
     setLoading(true)
     setError(null)
     setResult(null)
+    
+    if (selectedLayouts.length === 0) {
+      setError('Please select at least one layout')
+      setLoading(false)
+      return
+    }
+
     try {
       const res = await fetch('/api/analyze', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ symbol, layout, timeframe })
+        body: JSON.stringify({ symbol, layouts: selectedLayouts, timeframe })
       })
       const data = await res.json()
       if (!res.ok) throw new Error(data.error || 'Unknown error')
@@ -50,13 +65,6 @@ export default function AIAnalysisPanel() {
           onChange={e => setSymbol(e.target.value)}
           placeholder="Symbol (e.g. BTCUSD)"
         />
-        <select
-          className="input input-bordered"
-          value={layout}
-          onChange={e => setLayout(e.target.value)}
-        >
-          {layouts.map(l => <option key={l} value={l}>{l}</option>)}
-        </select>
         <select
           className="input input-bordered"
           value={timeframe}
@@ -68,6 +76,31 @@ export default function AIAnalysisPanel() {
           {loading ? 'Analyzing...' : 'Analyze'}
         </button>
       </div>
+      
+      {/* Layout selection */}
+      <div className="mb-4">
+        <label className="block text-sm font-medium text-gray-300 mb-2">
+          Select Layouts for Analysis:
+        </label>
+        <div className="flex flex-wrap gap-2">
+          {layouts.map(layout => (
+            <label key={layout} className="flex items-center gap-2 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={selectedLayouts.includes(layout)}
+                onChange={() => toggleLayout(layout)}
+                className="form-checkbox h-4 w-4 text-blue-600 rounded"
+              />
+              <span className="text-sm text-gray-300">{layout}</span>
+            </label>
+          ))}
+        </div>
+        {selectedLayouts.length > 0 && (
+          <div className="text-xs text-gray-400 mt-1">
+            Selected: {selectedLayouts.join(', ')}
+          </div>
+        )}
+      </div>
       {error && (
         <div className="text-red-400 mb-2">
           {error.includes('frame was detached') ? (
@@ -93,12 +126,19 @@ export default function AIAnalysisPanel() {
       )}
       {result && (
         <div className="bg-gray-800 rounded p-4 mt-4">
-          <div><b>Summary:</b> {result.summary}</div>
-          <div><b>Sentiment:</b> {result.marketSentiment}</div>
-          <div><b>Recommendation:</b> {result.recommendation} ({result.confidence}%)</div>
-          <div><b>Support:</b> {result.keyLevels?.support?.join(', ')}</div>
-          <div><b>Resistance:</b> {result.keyLevels?.resistance?.join(', ')}</div>
-          <div><b>Reasoning:</b> {result.reasoning}</div>
+          {result.layoutsAnalyzed && (
+            <div className="mb-3 text-sm text-gray-400">
+              <b>Layouts analyzed:</b> {result.layoutsAnalyzed.join(', ')}
+            </div>
+          )}
+          <div className="space-y-2">
+            <div><b>Summary:</b> {result.summary}</div>
+            <div><b>Sentiment:</b> {result.marketSentiment}</div>
+            <div><b>Recommendation:</b> {result.recommendation} ({result.confidence}%)</div>
+            <div><b>Support:</b> {result.keyLevels?.support?.join(', ')}</div>
+            <div><b>Resistance:</b> {result.keyLevels?.resistance?.join(', ')}</div>
+            <div><b>Reasoning:</b> {result.reasoning}</div>
+          </div>
         </div>
       )}
     </div>