\n \n\n\n",[],[148,317,319],"11f9d7e5-90a5-40c3-ade9-56588b1b2722","api.ts","03fe14f0-80df-11f1-872f-1607ee4eb77e",11,["D",1784183075799],"// Tiny typed fetch client.\nasync function req(url: string, opts?: RequestInit): Promise {\n const res = await fetch(url, {\n ...opts,\n headers: { \"Content-Type\": \"application/json\", ...(opts?.headers ?? {}) },\n });\n const text = await res.text();\n const data = text ? JSON.parse(text) : {};\n if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);\n return data as T;\n}\n\nexport interface Candle {\n time: number; open: number; high: number; low: number; close: number; volume: number;\n}\nexport interface Quote {\n symbol: string; price: number; change: number; percentChange: number; timestamp: number;\n}\nexport interface Factor { name: string; side: string; weight: number; detail: string; }\nexport interface Signal {\n id: number; symbol: string; direction: string; confidence: number; entry: number; stopLoss: number;\n takeProfits: number[]; atr: number; bullishScore: number; bearishScore: number; session: string;\n reasoning: string[]; factors: Factor[]; autoTraded: boolean; createdAt: number;\n}\nexport interface Trade {\n id: number; brokerId: number; brokerType: string; symbol: string; direction: string;\n quantity: number; entryPrice: number; exitPrice: number | null; stopLoss: number;\n takeProfit: number; status: string; pnl: number | null; confidence: number;\n reasoning: string; brokerOrderId: string | null; createdAt: number; closedAt: number | null;\n}\nexport interface BrokerRow {\n id: number; type: string; name: string; apiKey: string; apiSecret: string;\n extra: string; isPaper: boolean; active: boolean; symbols: string; createdAt: number;\n config?: BrokerConfig;\n}\nexport interface BrokerConfig {\n type: string; displayName: string; description: string; icon: string;\n fields: { key: string; label: string; type: string; required: boolean; placeholder?: string }[];\n defaultSymbols: string[]; supportsPaperTrading: boolean; available: boolean;\n}\nexport interface Settings {\n hasApiKey: boolean; riskPerTrade: number; riskReward: number[];\n scanIntervalMin: number; autoTrade: boolean; minConfidence: number;\n maxOpenTrades: number; tradeSymbol: string;\n}\nexport interface TelegramConfig {\n hasToken: boolean; chatId: string; notifyBuy: boolean; notifySell: boolean;\n notifyNeutral: boolean; notifyTrades: boolean; minConfidence: number;\n}\n\nexport const api = {\n candles: (interval: string, symbol?: string, outputsize = 200) =>\n req<{ interval: string; symbol: string; candles: Candle[] }>(\n `/api/market-data?type=candles&interval=${interval}&outputsize=${outputsize}${symbol ? `&symbol=${symbol}` : \"\"}`,\n ),\n quote: (symbol?: string) =>\n req(`/api/market-data?type=quote${symbol ? `&symbol=${symbol}` : \"\"}`),\n analyze: () =>\n req<{ ok: boolean; analysis?: any; telegramSent: boolean; autoTraded: boolean; tradeError?: string; error?: string }>(\n `/api/analyze`, { method: \"POST\" },\n ),\n signals: (limit = 50) => req(`/api/signals?limit=${limit}`),\n trades: (limit = 50) => req(`/api/trades?limit=${limit}`),\n setTradeStatus: (id: number, body: Partial) =>\n req(`/api/trades/${id}`, { method: \"PATCH\", body: JSON.stringify(body) }),\n\n brokers: () => req(`/api/brokers`),\n brokerConfigs: () => req(`/api/brokers/configs`),\n createBroker: (b: any) => req<{ id: number }>(`/api/brokers`, { method: \"POST\", body: JSON.stringify(b) }),\n updateBroker: (id: number, b: any) => req(`/api/brokers/${id}`, { method: \"PATCH\", body: JSON.stringify(b) }),\n deleteBroker: (id: number) => req(`/api/brokers/${id}`, { method: \"DELETE\" }),\n\n settings: () => req(`/api/settings`),\n updateSettings: (s: Partial) =>\n req(`/api/settings`, { method: \"PATCH\", body: JSON.stringify(s) }),\n\n telegram: () => req(`/api/telegram`),\n updateTelegram: (t: Partial) =>\n req(`/api/telegram`, { method: \"PATCH\", body: JSON.stringify(t) }),\n testTelegram: () => req<{ ok: boolean; error?: string }>(`/api/telegram/test`, { method: \"POST\" }),\n};\n",[],[148,317,327],"1b59239c-831c-446e-9dd7-fcfbb9ab932b","App.tsx","0cdb37ec-80df-11f1-9439-1607ee4eb77e",15,["D",1784183090593],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { Dashboard } from \"./tabs/Dashboard.tsx\";\nimport { Signals } from \"./tabs/Signals.tsx\";\nimport { Trades } from \"./tabs/Trades.tsx\";\nimport { Brokers } from \"./tabs/Brokers.tsx\";\nimport { SettingsTab } from \"./tabs/SettingsTab.tsx\";\nimport { TelegramTab } from \"./tabs/TelegramTab.tsx\";\n\nconst TABS = [\n { id: \"dashboard\", label: \"Dashboard\", icon: \"📊\" },\n { id: \"brokers\", label: \"Brokers\", icon: \"🔌\" },\n { id: \"signals\", label: \"Signals\", icon: \"📡\" },\n { id: \"trades\", label: \"Trades\", icon: \"💰\" },\n { id: \"settings\", label: \"Settings\", icon: \"⚙️\" },\n { id: \"telegram\", label: \"Telegram\", icon: \"✈️\" },\n];\n\nexport function App() {\n const [tab, setTab] = useState(\"dashboard\");\n return (\n

\n 🤖\n

Multi-Broker Auto-Trading Bot

7 Brokers · Auto-Trade · Multi-Asset

\n \n

\n\n

\n {tab === \"dashboard\" && }\n {tab === \"brokers\" && }\n {tab === \"signals\" && }\n {tab === \"trades\" && }\n {tab === \"settings\" && }\n {tab === \"telegram\" && }\n

\n\n \n

\n );\n}\n",[],[148,317,335],"f9c720bf-2858-45c5-bc79-0ff8bf1b6d03","Trades.tsx","fce3e130-80df-11f1-b755-1607ee4eb77e","fe22d0d8-2e71-4793-8686-91d801e47950",18,["D",1784183493321],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, type Trade } from \"../api.ts\";\nimport { Card, TradeCard } from \"../components/ui.tsx\";\n\nexport function Trades() {\n const [trades, setTrades] = useState([]);\n const [loading, setLoading] = useState(true);\n\n async function load() {\n setLoading(true);\n setTrades(await api.trades(100).catch(() => []));\n setLoading(false);\n }\n\n useEffect(() => { load(); }, []);\n\n async function closeTrade(id: number, pnl: number) {\n await api.setTradeStatus(id, { status: \"closed\", pnl, closedAt: Date.now() });\n await load();\n }\n\n const totalPnl = trades.filter((t) => t.pnl !== null).reduce((sum, t) => sum + (t.pnl ?? 0), 0);\n const openCount = trades.filter((t) => t.status === \"open\" || t.status === \"pending\").length;\n const winCount = trades.filter((t) => t.pnl !== null && t.pnl > 0).length;\n const closedCount = trades.filter((t) => t.status === \"closed\").length;\n\n return (\n

Total PnL

= 0 ? \"text-emerald-400\" : \"text-red-400\"}`}>{totalPnl >= 0 ? \"+\" : \"\"}{totalPnl.toFixed(2)}

Open Trades

{openCount}

Win Rate

{closedCount > 0 ? Math.round((winCount / closedCount) * 100) : 0}%

Total Trades

{trades.length}

\n\n \n {loading ? (\n

Loading…

\n ) : trades.length === 0 ? (\n

No trades yet. Enable auto-trade or connect a broker to start.

\n ) : (\n

\n {trades.map((t) => )}\n

\n )}\n \n

\n );\n}\n",[],[148,317,351,343],"tabs","4fb25d47-a15a-4427-a145-91f3efe39666","TelegramTab.tsx","fcf35034-80df-11f1-aa32-1607ee4eb77e",19,["D",1784183493313],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, type TelegramConfig } from \"../api.ts\";\nimport { Card, Btn, Input } from \"../components/ui.tsx\";\n\nexport function TelegramTab() {\n const [t, setT] = useState(null);\n const [token, setToken] = useState(\"\");\n const [saved, setSaved] = useState(false);\n const [testing, setTesting] = useState(false);\n const [testResult, setTestResult] = useState(null);\n\n useEffect(() => { api.telegram().then(setT).catch(() => {}); }, []);\n\n async function save() {\n if (!t) return;\n await api.updateTelegram({\n botToken: token || undefined as any,\n chatId: t.chatId,\n notifyBuy: t.notifyBuy, notifySell: t.notifySell,\n notifyNeutral: t.notifyNeutral, notifyTrades: t.notifyTrades,\n minConfidence: t.minConfidence,\n });\n setToken(\"\");\n setSaved(true);\n setT(await api.telegram());\n setTimeout(() => setSaved(false), 2500);\n }\n\n async function test() {\n setTesting(true);\n setTestResult(null);\n try {\n const r = await api.testTelegram();\n setTestResult(r.ok ? \"✅ Message sent!\" : \"❌ \" + r.error);\n } catch (e) {\n setTestResult(\"❌ \" + String((e as Error).message));\n } finally {\n setTesting(false);\n }\n }\n\n if (!t) return

Loading…

;\n\n return (\n

\n \n Bot Token {t.hasToken && ✓ saved}\n setToken(e.target.value)} className=\"mt-1 mb-3\" />\n Chat ID\n setT({ ...t, chatId: e.target.value })} placeholder=\"Your chat ID\" className=\"mt-1 mb-3\" />\n Min Confidence to Notify (%)\n setT({ ...t, minConfidence: Number(e.target.value) })} className=\"mt-1\" />\n

\n Create a bot via @BotFather.\n Get your chat ID from @userinfobot.\n

\n \n\n \n

\n \n setT({ ...t, notifyBuy: e.target.checked })} /> Notify on BUY signals\n \n \n setT({ ...t, notifySell: e.target.checked })} /> Notify on SELL signals\n \n \n setT({ ...t, notifyNeutral: e.target.checked })} /> Notify on NEUTRAL signals\n \n \n setT({ ...t, notifyTrades: e.target.checked })} /> Notify on auto-trade execution\n \n

\n \n\n

\n Save\n {testing ? \"Sending…\" : \"Send Test Message\"}\n {saved && ✓ Saved}\n {testResult && {testResult}}\n

\n );\n}\n",[],[148,317,351,353],"81116cdd-c5fd-4ab4-bb7e-c92673b7acca","Signals.tsx","99165ade-80df-11f1-a5d4-1607ee4eb77e",16,["D",1784183325945],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, type Signal } from \"../api.ts\";\nimport { Card, SignalCard } from \"../components/ui.tsx\";\n\nexport function Signals() {\n const [signals, setSignals] = useState([]);\n const [loading, setLoading] = useState(true);\n\n async function load() {\n setLoading(true);\n setSignals(await api.signals(100).catch(() => []));\n setLoading(false);\n }\n\n useEffect(() => { load(); }, []);\n\n return (\n \n {loading ? (\n

Loading…

\n ) : signals.length === 0 ? (\n

No signals yet. Run a scan from the Dashboard.

\n ) : (\n

\n {signals.map((s) => )}\n

\n )}\n \n );\n}\n",[],[148,317,351,361],"ac9d1bb2-dc3a-42bb-88c6-7d5f3ecc8f7b","SettingsTab.tsx","fd41127e-80df-11f1-83f6-1607ee4eb77e",21,["D",1784183493329],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, type Settings } from \"../api.ts\";\nimport { Card, Btn, Input } from \"../components/ui.tsx\";\n\nexport function SettingsTab() {\n const [s, setS] = useState(null);\n const [apiKey, setApiKey] = useState(\"\");\n const [saved, setSaved] = useState(false);\n\n useEffect(() => { api.settings().then(setS).catch(() => {}); }, []);\n\n async function save() {\n if (!s) return;\n await api.updateSettings({\n apiKey: apiKey || undefined as any,\n riskPerTrade: s.riskPerTrade,\n riskReward: s.riskReward,\n scanIntervalMin: s.scanIntervalMin,\n minConfidence: s.minConfidence,\n maxOpenTrades: s.maxOpenTrades,\n tradeSymbol: s.tradeSymbol,\n });\n setApiKey(\"\");\n setSaved(true);\n setS(await api.settings());\n setTimeout(() => setSaved(false), 2500);\n }\n\n if (!s) return

Loading…

;\n\n return (\n

\n \n API Key {s.hasApiKey && ✓ saved}\n setApiKey(e.target.value)} className=\"mt-1\" />\n

\n Get a free key (800 calls/day) at{\" \"}\n twelvedata.com.\n Stored securely server-side.\n

\n \n\n \n Risk per trade (%)\n setS({ ...s, riskPerTrade: Number(e.target.value) })} className=\"mt-1 mb-3\" />\n Risk : Reward ratios (TP1 / TP2 / TP3)\n

\n {s.riskReward.map((r, i) => (\n {\n const rr = [...s.riskReward]; rr[i] = Number(e.target.value); setS({ ...s, riskReward: rr });\n }} />\n ))}\n

\n \n\n \n Trading Symbol\n setS({ ...s, tradeSymbol: e.target.value })} className=\"mt-1 mb-3\" />\n Min Confidence to Auto-Trade (%)\n setS({ ...s, minConfidence: Number(e.target.value) })} className=\"mt-1 mb-3\" />\n Max Open Trades\n setS({ ...s, maxOpenTrades: Number(e.target.value) })} className=\"mt-1 mb-3\" />\n Auto-scan interval (minutes)\n setS({ ...s, scanIntervalMin: Number(e.target.value) })} className=\"mt-1\" />\n

Free tier enforces 15-min minimum cron interval.

\n \n\n

\n Save Settings\n {saved && ✓ Saved}\n

\n );\n}\n",[],[148,317,351,369],"1dfd1c23-a9fe-434b-859f-a5b3866f087d","Dashboard.tsx","fcd929fc-80df-11f1-9402-1607ee4eb77e",17,["D",1784183493313],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, type Candle, type Quote, type Settings, type Signal } from \"../api.ts\";\nimport { Card, Btn, SignalCard } from \"../components/ui.tsx\";\nimport { CandleChart } from \"../components/Chart.tsx\";\n\nconst TIMEFRAMES = [\"1min\", \"5min\", \"15min\", \"30min\", \"1h\", \"1day\"];\n\nexport function Dashboard() {\n const [tf, setTf] = useState(\"5min\");\n const [candles, setCandles] = useState([]);\n const [quote, setQuote] = useState(null);\n const [signals, setSignals] = useState([]);\n const [settings, setSettings] = useState(null);\n const [loading, setLoading] = useState(false);\n const [scanning, setScanning] = useState(false);\n const [msg, setMsg] = useState(null);\n\n async function loadChart(interval = tf) {\n setLoading(true);\n setMsg(null);\n try {\n const [c, q] = await Promise.all([\n api.candles(interval, settings?.tradeSymbol),\n api.quote(settings?.tradeSymbol).catch(() => null),\n ]);\n setCandles(c.candles);\n if (q) setQuote(q);\n } catch (e) {\n setMsg(String((e as Error).message));\n } finally {\n setLoading(false);\n }\n }\n\n async function loadMeta() {\n setSignals(await api.signals(10).catch(() => []));\n setSettings(await api.settings().catch(() => null));\n }\n\n useEffect(() => { loadMeta(); }, []);\n useEffect(() => { if (settings) loadChart(tf); }, [tf, settings?.tradeSymbol]);\n\n async function scanNow() {\n setScanning(true);\n setMsg(null);\n try {\n const r = await api.analyze();\n if (!r.ok) setMsg(\"Scan failed: \" + r.error);\n else setMsg(`New ${r.analysis.direction} signal @ ${r.analysis.confidence}%${r.autoTraded ? \" · 🤖 AUTO-TRADED\" : \"\"}${r.telegramSent ? \" · sent to Telegram\" : \"\"}${r.tradeError ? \" · trade: \" + r.tradeError : \"\"}`);\n await loadMeta();\n await loadChart();\n } catch (e) {\n setMsg(String((e as Error).message));\n } finally {\n setScanning(false);\n }\n }\n\n async function toggleAutoTrade() {\n if (!settings) return;\n await api.updateSettings({ autoTrade: !settings.autoTrade });\n setSettings({ ...settings, autoTrade: !settings.autoTrade });\n }\n\n const up = (quote?.change ?? 0) >= 0;\n const sym = settings?.tradeSymbol ?? \"XAU/USD\";\n\n return (\n

\n {!settings?.hasApiKey && (\n

\n ⚠️ No Twelve Data API key set. Go to Settings and add your key to load live data.\n

\n )}\n\n

\n \n

{sym}

\n {quote ? quote.price.toFixed(2) : \"—\"}\n

\n {quote && (\n

\n {up ? \"▲\" : \"▼\"} {quote.change.toFixed(2)} ({quote.percentChange.toFixed(2)}%)\n

\n )}\n

\n \n {scanning ? \"Scanning…\" : \"🔍 Scan Now\"}\n \n \n {settings?.autoTrade ? \"⏹ Stop Auto-Trade\" : \"▶ Start Auto-Trade\"}\n \n {settings && (\n

\n Auto-trade {settings.autoTrade ? \"🟢 ON\" : \"⚪ OFF\"} · Min conf {settings.minConfidence}% · Max {settings.maxOpenTrades} trades\n

\n )}\n

\n \n\n \n

\n {TIMEFRAMES.map((t) => (\n \n ))}\n

\n {loading ? (\n

Loading chart…

\n ) : candles.length ? (\n \n ) : (\n

No data yet — add API key in Settings

\n )}\n \n

\n\n {msg &&

{msg}

}\n\n \n {signals.length === 0 ? (\n

No signals yet. Click Scan Now to generate one.

\n ) : (\n

\n {signals.map((s) => )}\n

\n )}\n \n

\n );\n}\n",[],[148,317,351,377],"1418a428-7533-4e45-9da1-e297720642a7","Brokers.tsx","fd0efc62-80df-11f1-9439-1607ee4eb77e",20,["D",1784183493322],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, type BrokerRow, type BrokerConfig } from \"../api.ts\";\nimport { Card, Btn, Input } from \"../components/ui.tsx\";\n\nexport function Brokers() {\n const [brokers, setBrokers] = useState([]);\n const [configs, setConfigs] = useState([]);\n const [showAdd, setShowAdd] = useState(false);\n const [selType, setSelType] = useState(\"alpaca\");\n const [form, setForm] = useState({ name: \"\", apiKey: \"\", apiSecret: \"\", extra: \"\", symbols: \"XAU/USD\", isPaper: true });\n\n async function load() {\n setBrokers(await api.brokers().catch(() => []));\n setConfigs(await api.brokerConfigs().catch(() => []));\n }\n\n useEffect(() => { load(); }, []);\n\n async function addBroker() {\n const cfg = configs.find((c) => c.type === selType);\n await api.createBroker({ type: selType, name: form.name || cfg?.displayName || selType, ...form });\n setForm({ name: \"\", apiKey: \"\", apiSecret: \"\", extra: \"\", symbols: cfg?.defaultSymbols?.join(\",\") ?? \"XAU/USD\", isPaper: true });\n setShowAdd(false);\n await load();\n }\n\n async function toggleActive(b: BrokerRow) {\n await api.updateBroker(b.id, { active: !b.active });\n await load();\n }\n\n async function removeBroker(id: number) {\n await api.deleteBroker(id);\n await load();\n }\n\n const selCfg = configs.find((c) => c.type === selType);\n\n return (\n

Connected Brokers

\n setShowAdd(!showAdd)}>{showAdd ? \"Cancel\" : \"+ Add Broker\"}\n

\n\n {showAdd && (\n \n Broker Type\n \n {selCfg &&

{selCfg.description}

}\n

Display Name setForm({ ...form, name: e.target.value })} placeholder={selCfg?.displayName} className=\"mt-1\" />

API Key setForm({ ...form, apiKey: e.target.value })} placeholder={selCfg?.fields[0]?.placeholder} className=\"mt-1\" />

\n {selCfg && selCfg.fields.length > 1 && (\n

{selCfg.fields[1].label} setForm({ ...form, apiSecret: e.target.value })} placeholder={selCfg.fields[1].placeholder} className=\"mt-1\" />

\n )}\n {selCfg && selCfg.fields.length > 2 && (\n

{selCfg.fields[2].label} setForm({ ...form, extra: e.target.value })} placeholder={selCfg.fields[2].placeholder} className=\"mt-1\" />

\n )}\n

Symbols (comma-separated) setForm({ ...form, symbols: e.target.value })} className=\"mt-1\" />

\n \n setForm({ ...form, isPaper: e.target.checked })} /> Paper / Testnet mode\n \n

Add Broker

\n \n )}\n\n {brokers.length === 0 ? (\n

No brokers connected. Click + Add Broker to connect Alpaca, Binance, Bybit, OANDA, Deriv, IBKR, or MT5.

\n ) : (\n

\n {brokers.map((b) => (\n \n

\n {b.config?.icon ?? \"🔌\"}\n

{b.name}

{b.type.toUpperCase()} · {b.symbols} · {b.isPaper ? \"Paper\" : \"Live\"}

\n toggleActive(b)}>{b.active ? \"Deactivate\" : \"Activate\"}\n removeBroker(b.id)}>Delete\n

\n \n ))}\n

\n )}\n\n \n

\n {configs.map((c) => (\n

\n {c.icon}\n

{c.displayName}

{c.description}

\n \n {c.available ? \"✓ Available\" : \"⚠ Needs gateway\"}\n \n {c.supportsPaperTrading && Paper}\n

\n ))}\n

\n \n

\n );\n}\n",[],[148,317,351,385],"96cabb7a-096f-4f37-bd23-51478402851a",["D",1784183325945],[178,179,180,181,182,183],[148,317,351],"d0e72cca-eb37-4477-97d1-35f4c024bee5","ui.tsx","0410e3dc-80df-11f1-b6a2-1607ee4eb77e","62036ca6-6f19-456b-8f8e-5b2cdf3c7e27",13,["D",1784183075821],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Signal, Trade } from \"../api.ts\";\n\nexport function Card({ title, children, className = \"\" }: { title?: string; children: React.ReactNode; className?: string }) {\n return (\n

\n {title &&

{title}

}\n {children}\n

\n );\n}\n\nexport function Btn({ children, onClick, variant = \"primary\", disabled, className = \"\" }: {\n children: React.ReactNode; onClick?: () => void; variant?: \"primary\" | \"ghost\" | \"danger\" | \"success\"; disabled?: boolean; className?: string;\n}) {\n const styles: Record = {\n primary: \"bg-amber-500 hover:bg-amber-400 text-slate-950\",\n success: \"bg-emerald-600 hover:bg-emerald-500 text-white\",\n danger: \"bg-red-600 hover:bg-red-500 text-white\",\n ghost: \"bg-slate-800 hover:bg-slate-700 text-slate-200\",\n };\n return (\n \n );\n}\n\nexport function Input(props: React.InputHTMLAttributes) {\n return ;\n}\n\nexport function DirBadge({ dir }: { dir: string }) {\n const map: Record = {\n BUY: \"bg-emerald-500/15 text-emerald-400 border-emerald-500/30\",\n SELL: \"bg-red-500/15 text-red-400 border-red-500/30\",\n NEUTRAL: \"bg-slate-500/15 text-slate-400 border-slate-500/30\",\n };\n return {dir};\n}\n\nexport function StatusBadge({ status }: { status: string }) {\n const map: Record = {\n pending: [\"Pending\", \"bg-amber-500/15 text-amber-400\"],\n open: [\"Open\", \"bg-blue-500/15 text-blue-400\"],\n closed: [\"Closed\", \"bg-slate-600/20 text-slate-400\"],\n cancelled: [\"Cancelled\", \"bg-slate-600/20 text-slate-400\"],\n rejected: [\"Rejected\", \"bg-red-500/15 text-red-400\"],\n };\n const [label, cls] = map[status] ?? [\"—\", \"bg-slate-600/20 text-slate-400\"];\n return {label};\n}\n\nexport function SignalCard({ s }: { s: Signal }) {\n const [open, setOpen] = useState(false);\n const time = new Date(s.createdAt).toLocaleString();\n return (\n

\n \n {s.confidence}%\n {s.autoTraded && 🤖 Auto-Traded}\n

\n {s.symbol}\n {time}\n

\n \n \n \n \n \n

\n 🟢 {s.bullishScore} / 🔴 {s.bearishScore} · {s.session} · ATR {s.atr}\n

\n \n

\n {open && (\n

• {r}

\n )}\n

\n );\n}\n\nexport function TradeCard({ t, onClose }: { t: Trade; onClose?: (id: number, pnl: number) => void }) {\n const [pnl, setPnl] = useState(\"\");\n const time = new Date(t.createdAt).toLocaleString();\n return (\n

\n \n {t.symbol}\n \n

\n {t.brokerType.toUpperCase()} · {time}\n

\n \n \n \n \n \n = 0 ? \"text-emerald-400\" : \"text-red-400\"} />\n

\n {t.reasoning &&

{t.reasoning}

}\n {onClose && t.status === \"open\" && (\n

\n setPnl(e.target.value)} className=\"w-32\" />\n onClose(t.id, Number(pnl) || 0)}>Close Trade\n

\n )}\n

\n );\n}\n\nfunction Stat({ label, value, cls = \"\" }: { label: string; value: number | string; cls?: string }) {\n return (\n

{label}

{value}

\n );\n}\n",[],[148,317,405,397],"components","e8c5b262-c862-4b1c-b0a1-64a1b708cf8f","Chart.tsx","0cccf722-80df-11f1-ba29-1607ee4eb77e",14,["D",1784183090591],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\nimport type { Candle } from \"../api.ts\";\n\nexport function CandleChart({ candles }: { candles: Candle[] }) {\n const ref = useRef(null);\n\n useEffect(() => {\n const canvas = ref.current;\n if (!canvas || candles.length === 0) return;\n const dpr = window.devicePixelRatio || 1;\n const W = canvas.clientWidth;\n const H = canvas.clientHeight;\n canvas.width = W * dpr;\n canvas.height = H * dpr;\n const ctx = canvas.getContext(\"2d\")!;\n ctx.scale(dpr, dpr);\n ctx.clearRect(0, 0, W, H);\n\n const priceH = H * 0.78;\n const volH = H * 0.22;\n const padR = 56;\n const plotW = W - padR;\n\n const data = candles.slice(-120);\n const highs = data.map((c) => c.high);\n const lows = data.map((c) => c.low);\n const maxP = Math.max(...highs);\n const minP = Math.min(...lows);\n const range = maxP - minP || 1;\n const maxV = Math.max(...data.map((c) => c.volume), 1);\n\n const cw = plotW / data.length;\n const bodyW = Math.max(1, cw * 0.6);\n const yP = (p: number) => 6 + (priceH - 12) * (1 - (p - minP) / range);\n\n ctx.font = \"10px ui-monospace, monospace\";\n ctx.textBaseline = \"middle\";\n for (let i = 0; i <= 4; i++) {\n const p = minP + (range * i) / 4;\n const y = yP(p);\n ctx.strokeStyle = \"rgba(148,163,184,0.12)\";\n ctx.beginPath();\n ctx.moveTo(0, y);\n ctx.lineTo(plotW, y);\n ctx.stroke();\n ctx.fillStyle = \"rgba(148,163,184,0.8)\";\n ctx.fillText(p.toFixed(2), plotW + 6, y);\n }\n\n data.forEach((c, i) => {\n const x = i * cw + cw / 2;\n const up = c.close >= c.open;\n const color = up ? \"#22c55e\" : \"#ef4444\";\n ctx.strokeStyle = color;\n ctx.fillStyle = color;\n ctx.beginPath();\n ctx.moveTo(x, yP(c.high));\n ctx.lineTo(x, yP(c.low));\n ctx.stroke();\n const yo = yP(c.open);\n const yc = yP(c.close);\n const top = Math.min(yo, yc);\n const h = Math.max(1, Math.abs(yc - yo));\n ctx.fillRect(x - bodyW / 2, top, bodyW, h);\n const vh = (c.volume / maxV) * (volH - 6);\n ctx.globalAlpha = 0.5;\n ctx.fillRect(x - bodyW / 2, H - vh, bodyW, vh);\n ctx.globalAlpha = 1;\n });\n }, [candles]);\n\n return

Diff · v26