feat: Add persistent settings and multiple layouts support

- Add settings manager to persist symbol, timeframe, and layouts
- Support multiple layouts for comprehensive chart analysis
- Remove debug screenshots for cleaner logs
- Update AI analysis with professional trading prompt
- Add multi-screenshot analysis for better trading insights
- Update analyze API to use saved settings and multiple layouts

components/AIAnalysisPanel.tsx

@@ -0,0 +1,106 @@
+"use client"
+import React, { useState } from 'react'
+
+const layouts = (process.env.NEXT_PUBLIC_TRADINGVIEW_LAYOUTS || 'ai,Diy module').split(',').map(l => l.trim())
+const timeframes = [
+  { label: '1m', value: '1' },
+  { label: '5m', value: '5' },
+  { label: '15m', value: '15' },
+  { label: '1h', value: '60' },
+  { label: '4h', value: '240' },
+  { label: '1d', value: 'D' },
+  { label: '1w', value: 'W' },
+  { label: '1M', value: 'M' },
+]
+
+export default function AIAnalysisPanel() {
+  const [symbol, setSymbol] = useState('BTCUSD')
+  const [layout, setLayout] = useState(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)
+
+  async function handleAnalyze() {
+    setLoading(true)
+    setError(null)
+    setResult(null)
+    try {
+      const res = await fetch('/api/analyze', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ symbol, layout, timeframe })
+      })
+      const data = await res.json()
+      if (!res.ok) throw new Error(data.error || 'Unknown error')
+      setResult(data)
+    } catch (e: any) {
+      setError(e.message)
+    }
+    setLoading(false)
+  }
+
+  return (
+    <div className="bg-gray-900 rounded-lg shadow p-6 mb-8">
+      <h2 className="text-xl font-bold mb-4 text-white">AI Chart Analysis</h2>
+      <div className="flex gap-2 mb-4">
+        <input
+          className="input input-bordered flex-1"
+          value={symbol}
+          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}
+          onChange={e => setTimeframe(e.target.value)}
+        >
+          {timeframes.map(tf => <option key={tf.value} value={tf.value}>{tf.label}</option>)}
+        </select>
+        <button className="btn btn-primary" onClick={handleAnalyze} disabled={loading}>
+          {loading ? 'Analyzing...' : 'Analyze'}
+        </button>
+      </div>
+      {error && (
+        <div className="text-red-400 mb-2">
+          {error.includes('frame was detached') ? (
+            <>
+              TradingView chart could not be loaded. Please check your symbol and layout, or try again.<br />
+              <span className="text-xs">(Technical: {error})</span>
+            </>
+          ) : error.includes('layout not found') ? (
+            <>
+              TradingView layout not found. Please select a valid layout.<br />
+              <span className="text-xs">(Technical: {error})</span>
+            </>
+          ) : (
+            error
+          )}
+        </div>
+      )}
+      {loading && (
+        <div className="flex items-center gap-2 text-gray-300 mb-2">
+          <svg className="animate-spin h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path></svg>
+          Analyzing chart...
+        </div>
+      )}
+      {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>
+        </div>
+      )}
+    </div>
+  )
+}

components/AutoTradingPanel.tsx

@@ -0,0 +1,35 @@
+"use client"
+import React, { useState } from 'react'
+
+export default function AutoTradingPanel() {
+  const [status, setStatus] = useState<'idle'|'running'|'stopped'>('idle')
+  const [message, setMessage] = useState<string>('')
+
+  async function handleAction(action: 'start'|'stop') {
+    setMessage('')
+    setStatus('idle')
+    const res = await fetch('/api/auto-trading', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action })
+    })
+    if (res.ok) {
+      setStatus(action === 'start' ? 'running' : 'stopped')
+      setMessage(`Auto-trading ${action}ed`)
+    } else {
+      setMessage('Error: ' + (await res.text()))
+    }
+  }
+
+  return (
+    <div className="p-4 border rounded bg-gray-900">
+      <h2 className="text-lg font-bold mb-2">Auto-Trading Control</h2>
+      <div className="flex gap-2 mb-2">
+        <button className="btn btn-primary" onClick={() => handleAction('start')}>Start</button>
+        <button className="btn btn-secondary" onClick={() => handleAction('stop')}>Stop</button>
+      </div>
+      <div className="text-sm text-gray-400">Status: {status}</div>
+      {message && <div className="mt-2 text-yellow-400">{message}</div>}
+    </div>
+  )
+}

components/Dashboard-minimal.tsx

@@ -0,0 +1,11 @@
+"use client"
+import React from 'react'
+
+export default function DashboardMinimal() {
+  return (
+    <div className="p-8 text-center text-gray-400">
+      <h1 className="text-2xl font-bold mb-4">Trading Bot Dashboard</h1>
+      <p>Welcome! Please select a feature from the menu.</p>
+    </div>
+  )
+}

components/Dashboard.tsx

@@ -0,0 +1,68 @@
+"use client"
+import React, { useEffect, useState } from 'react'
+import AutoTradingPanel from './AutoTradingPanel'
+import TradingHistory from './TradingHistory'
+import DeveloperSettings from './DeveloperSettings'
+
+export default function Dashboard() {
+  const [positions, setPositions] = useState<any[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    async function fetchPositions() {
+      try {
+        const res = await fetch('/api/trading')
+        if (res.ok) {
+          const data = await res.json()
+          setPositions(data.positions || [])
+        } else {
+          setError('Failed to load positions')
+        }
+      } catch (e) {
+        setError('Error loading positions')
+      }
+      setLoading(false)
+    }
+    fetchPositions()
+  }, [])
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-8 p-8 bg-gray-950 min-h-screen">
+      <div className="space-y-8">
+        <AutoTradingPanel />
+        <DeveloperSettings />
+      </div>
+      <div className="space-y-8">
+        <div className="bg-gray-900 rounded-lg shadow p-6">
+          <h2 className="text-xl font-bold mb-4 text-white">Open Positions</h2>
+          {loading ? <div className="text-gray-400">Loading...</div> : error ? <div className="text-red-400">{error}</div> : (
+            <table className="w-full text-sm text-left">
+              <thead className="text-gray-400 border-b border-gray-700">
+                <tr>
+                  <th className="py-2">Symbol</th>
+                  <th>Side</th>
+                  <th>Size</th>
+                  <th>Entry Price</th>
+                  <th>Unrealized PnL</th>
+                </tr>
+              </thead>
+              <tbody>
+                {positions.map((pos, i) => (
+                  <tr key={i} className="border-b border-gray-800 hover:bg-gray-800">
+                    <td className="py-2">{pos.symbol}</td>
+                    <td>{pos.side}</td>
+                    <td>{pos.size}</td>
+                    <td>{pos.entryPrice}</td>
+                    <td>{pos.unrealizedPnl}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+        <TradingHistory />
+      </div>
+    </div>
+  )
+}

components/DeveloperSettings.tsx

@@ -0,0 +1,27 @@
+"use client"
+import React, { useState } from 'react'
+
+export default function DeveloperSettings() {
+  const [env, setEnv] = useState('')
+  const [message, setMessage] = useState('')
+
+  async function handleSave() {
+    // Example: Save env to localStorage or send to API
+    localStorage.setItem('devEnv', env)
+    setMessage('Settings saved!')
+  }
+
+  return (
+    <div className="p-4 border rounded bg-gray-900">
+      <h2 className="text-lg font-bold mb-2">Developer Settings</h2>
+      <input
+        className="input input-bordered w-full mb-2"
+        placeholder="Custom ENV value"
+        value={env}
+        onChange={e => setEnv(e.target.value)}
+      />
+      <button className="btn btn-primary w-full" onClick={handleSave}>Save</button>
+      {message && <div className="mt-2 text-green-400">{message}</div>}
+    </div>
+  )
+}

components/TradingHistory.tsx

@@ -0,0 +1,60 @@
+"use client"
+import React, { useEffect, useState } from 'react'
+
+interface Trade {
+  id: string
+  symbol: string
+  side: string
+  amount: number
+  price: number
+  status: string
+  executedAt: string
+}
+
+export default function TradingHistory() {
+  const [trades, setTrades] = useState<Trade[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    async function fetchTrades() {
+      const res = await fetch('/api/trading-history')
+      if (res.ok) {
+        setTrades(await res.json())
+      }
+      setLoading(false)
+    }
+    fetchTrades()
+  }, [])
+
+  return (
+    <div className="p-4 border rounded bg-gray-900">
+      <h2 className="text-lg font-bold mb-2">Trading History</h2>
+      {loading ? <div>Loading...</div> : (
+        <table className="w-full text-sm">
+          <thead>
+            <tr>
+              <th>Symbol</th>
+              <th>Side</th>
+              <th>Amount</th>
+              <th>Price</th>
+              <th>Status</th>
+              <th>Executed At</th>
+            </tr>
+          </thead>
+          <tbody>
+            {trades.map(trade => (
+              <tr key={trade.id}>
+                <td>{trade.symbol}</td>
+                <td>{trade.side}</td>
+                <td>{trade.amount}</td>
+                <td>{trade.price}</td>
+                <td>{trade.status}</td>
+                <td>{trade.executedAt}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  )
+}