diff --git a/.gitignore b/.gitignore
index a070dc4..156ef20 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,8 @@
/target
.env
.ares_state_*.json
+
+# web portfolio
+web/.next/
+web/node_modules/
+web/.env.local
diff --git a/web/.env.local.example b/web/.env.local.example
new file mode 100644
index 0000000..cc2efdf
--- /dev/null
+++ b/web/.env.local.example
@@ -0,0 +1,3 @@
+# MT5 bridge URL — server-side only, never exposed to browser
+# On Vercel: add this as an Environment Variable (not NEXT_PUBLIC_)
+MT5_BASE_URL=https://mt5.romys.my.id
diff --git a/web/.gitignore b/web/.gitignore
new file mode 100644
index 0000000..c77e368
--- /dev/null
+++ b/web/.gitignore
@@ -0,0 +1,5 @@
+.next/
+node_modules/
+.env.local
+.env*.local
+*.log
diff --git a/web/app/api/account/route.ts b/web/app/api/account/route.ts
new file mode 100644
index 0000000..5afb144
--- /dev/null
+++ b/web/app/api/account/route.ts
@@ -0,0 +1,13 @@
+import { NextResponse } from "next/server";
+import { getAccount } from "@/lib/mt5";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+ try {
+ const data = await getAccount();
+ return NextResponse.json(data);
+ } catch (e) {
+ return NextResponse.json({ error: String(e) }, { status: 502 });
+ }
+}
diff --git a/web/app/api/deals/route.ts b/web/app/api/deals/route.ts
new file mode 100644
index 0000000..dabe322
--- /dev/null
+++ b/web/app/api/deals/route.ts
@@ -0,0 +1,18 @@
+import { NextResponse } from "next/server";
+import { NextRequest } from "next/server";
+import { getDeals } from "@/lib/mt5";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(req: NextRequest) {
+ const { searchParams } = req.nextUrl;
+ const dateFrom = searchParams.get("date_from") ?? "2025-01-01T00:00:00";
+ const dateTo = searchParams.get("date_to") ?? new Date().toISOString().slice(0, 19);
+ const symbol = searchParams.get("symbol") ?? undefined;
+ try {
+ const data = await getDeals(dateFrom, dateTo, symbol);
+ return NextResponse.json(data);
+ } catch (e) {
+ return NextResponse.json({ error: String(e) }, { status: 502 });
+ }
+}
diff --git a/web/app/api/orders/route.ts b/web/app/api/orders/route.ts
new file mode 100644
index 0000000..351060a
--- /dev/null
+++ b/web/app/api/orders/route.ts
@@ -0,0 +1,15 @@
+import { NextResponse } from "next/server";
+import { getOrders } from "@/lib/mt5";
+import { NextRequest } from "next/server";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(req: NextRequest) {
+ const symbol = req.nextUrl.searchParams.get("symbol") ?? undefined;
+ try {
+ const data = await getOrders(symbol);
+ return NextResponse.json(data);
+ } catch (e) {
+ return NextResponse.json({ error: String(e) }, { status: 502 });
+ }
+}
diff --git a/web/app/api/positions/route.ts b/web/app/api/positions/route.ts
new file mode 100644
index 0000000..7a77f05
--- /dev/null
+++ b/web/app/api/positions/route.ts
@@ -0,0 +1,13 @@
+import { NextResponse } from "next/server";
+import { getPositions } from "@/lib/mt5";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+ try {
+ const data = await getPositions();
+ return NextResponse.json(data);
+ } catch (e) {
+ return NextResponse.json({ error: String(e) }, { status: 502 });
+ }
+}
diff --git a/web/app/backtest/page.tsx b/web/app/backtest/page.tsx
new file mode 100644
index 0000000..f13e363
--- /dev/null
+++ b/web/app/backtest/page.tsx
@@ -0,0 +1,155 @@
+import Link from "next/link";
+
+const results = [
+ { period: "1 Month", tf: "M5", risk: "1%", trades: 159, wr: 55.3, pf: 1.42, ret: 43.2, dd: -11.5, highlight: true },
+ { period: "1 Month", tf: "M5", risk: "5%", trades: 159, wr: 55.3, pf: 1.26, ret: 390, dd: -156, highlight: false },
+ { period: "1 Week", tf: "M5", risk: "1%", trades: 34, wr: 47.1, pf: 0.94, ret: -6.2, dd: -8.1, highlight: false },
+ { period: "Yesterday", tf: "M1", risk: "1%", trades: 36, wr: 47.2, pf: 1.05, ret: 6.6, dd: -51, highlight: false },
+ { period: "Yesterday", tf: "M5", risk: "1%", trades: 3, wr: 66.7, pf: null, ret: null, dd: null, highlight: false, note: "Too few trades" },
+];
+
+const params = [
+ ["Timeframe", "M5"],
+ ["Symbol", "XAUUSDm"],
+ ["EMA Period", "20"],
+ ["Min FVG Pips", "3"],
+ ["Min SL Pips", "5"],
+ ["Min RR", "1.5×"],
+ ["FVG Expiry", "10 candles"],
+ ["Body PCT Min", "60%"],
+ ["Close PCT Min", "80%"],
+];
+
+export default function BacktestPage() {
+ return (
+ <>
+
+ Quantitative Analysis
+
+ Backtest Results
+
+
+ Historical simulation on real MT5 tick data. Includes spread costs, commission, and slippage.
+
+
+
+ {/* Highlight */}
+
+
+
+
Recommended
+
M5 · 1 Month · 1% Risk
+
XAUUSDm · Exness Demo
+
+
View Live Trades →
+
+
+ {[
+ { label: "Profit Factor", value: "1.42", note: "> 1.3 = good" },
+ { label: "Net Return", value: "+43.2%", note: "on $600 balance" },
+ { label: "Max Drawdown", value: "−11.5%", note: "manageable" },
+ { label: "Win Rate", value: "55.3%", note: "159 trades" },
+ ].map(({ label, value, note }) => (
+
+
{label}
+
{value}
+
{note}
+
+ ))}
+
+
+
+
+
+
+
+ {["Period", "TF", "Risk", "Trades", "Win Rate", "Profit Factor", "Return", "Max DD", ""].map(h => (
+ {h}
+ ))}
+
+
+
+ {results.map((r, i) => (
+
+ {r.period}
+ {r.tf}
+ {r.risk}
+ {r.trades}
+ {r.wr.toFixed(1)}%
+
+ {r.pf != null
+ ? = 1.3 ? "text-bull" : r.pf < 1 ? "text-bear" : "text-ink-md"}>{r.pf.toFixed(2)}
+ : — }
+
+
+ {r.ret != null
+ ? = 0 ? "text-bull" : "text-bear"}>{r.ret >= 0 ? "+" : ""}{r.ret.toFixed(1)}%
+ : — }
+
+
+ {r.dd != null
+ ? 30 ? "text-bear" : Math.abs(r.dd) > 15 ? "text-amber-400" : "text-ink-md"}>{r.dd.toFixed(1)}%
+ : — }
+
+ {r.note ?? ""}
+
+ ))}
+
+
+
+
+
+
Parameters
+
+ {params.map(([k, v]) => (
+
+
{k}
+ {v}
+
+ ))}
+
+
+
+
+
How It Works
+
+ {[
+ ["Detect Impulse", "3-candle momentum: body ≥ 60% of range, close in top/bottom 20%."],
+ ["Find FVG", "Measure gap between candle 1 high and candle 3 low (bull) or reverse."],
+ ["EMA Filter", "Long only above EMA-20, short only below. Strict trend confirmation."],
+ ["Place Limit", "Set limit at FVG midpoint. Auto-cancel after 10 candles if unfilled."],
+ ["Manage Risk", "SL at FVG boundary, TP at ≥ 1.5× RR, size at exactly 1% risk."],
+ ].map(([title, desc], i) => (
+
+
+ {i + 1}
+
+
+
+ ))}
+
+
+
+
+ Disclaimer —
+ Backtests simulate on historical data and do not account for requotes, broker restrictions, or changing market regimes.
+ Past results do not guarantee future performance. For informational purposes only.
+
+
+ {children}
+
+
+
+
+
ARES
+
+ M5 Momentum FVG Scalper
+
+
+
+
Disclaimer
+
+ Past performance does not guarantee future results. Demo account forward test. Not financial advice.
+
+
+
+
+
+ );
+}
diff --git a/web/app/page.tsx b/web/app/page.tsx
new file mode 100644
index 0000000..1eb2c64
--- /dev/null
+++ b/web/app/page.tsx
@@ -0,0 +1,88 @@
+import Link from "next/link";
+import LiveDashboard from "@/components/LiveDashboard";
+
+export default function DashboardPage() {
+ return (
+ <>
+ {/* Hero */}
+
+ Live Forward Test · Demo Account
+
+ ARES Trading Bot
+
+
+ M5 Momentum FVG scalper built in Rust. Targets Fair Value Gaps on XAUUSDm
+ with EMA-20 trend filter, automatic position sizing, and Telegram alerts.
+
+
+
+
+
+ {/* Live data — client-side polling */}
+
+
+
+
Backtest Highlight
+
+ M5 · 1 Month · 1% Risk
+
+
XAUUSDm · 159 trades · Exness Demo
+
+
+ Full Results →
+
+
+ {[
+ { label: "Profit Factor", value: "1.42" },
+ { label: "Net Return", value: "+43.2%" },
+ { label: "Max Drawdown", value: "−11.5%" },
+ { label: "Win Rate", value: "55.3%" },
+ ].map(({ label, value }) => (
+
+ ))}
+
+
+ );
+}
+
+function FeatureCard({ icon, title, body }: { icon: string; title: string; body: string }) {
+ return (
+
+
{icon}
+
{title}
+
{body}
+
+ Live Forward Test
+
+ Trade History
+
+
+ All closed trades from ARES · magic {MAGIC}
+
+
+
+ {error ? (
+
+ Unable to fetch trade data.
+
+ ) : (
+ <>
+ {/* Stats */}
+
+ {[
+ { label: "Total Trades", value: closed.length.toString(), mono: true },
+ { label: "Win Rate", value: `${wr.toFixed(1)}%`, mono: true },
+ { label: "Profit Factor",value: pf > 0 ? pf.toFixed(2) : "—", mono: true },
+ { label: "Net P&L", value: formatCurrency(netPnl, currency), mono: true, colored: netPnl !== 0 ? netPnl > 0 : undefined },
+ { label: "W / L", value: `${wins.length} / ${losses.length}`, mono: true },
+ ].map(({ label, value, mono, colored }) => (
+
+ ))}
+
+
+ {closed.length === 0 ? (
+
No closed trades yet.
+ ) : (
+
+
+
+
+ {["Time", "Symbol", "Side", "Volume", "Price", "P&L"].map(h => (
+ {h}
+ ))}
+
+
+
+ {closed.slice().reverse().map((d) => (
+
+ {formatDate(d.time)}
+ {d.symbol || "—"}
+
+
+ {d.type === 0 ? "BUY" : "SELL"}
+
+
+ {d.volume}
+ {d.price.toFixed(2)}
+ = 0 ? "text-bull" : "text-bear"}`}>
+ {formatCurrency(d.profit, currency)}
+
+
+ ))}
+
+
+
+ )}
+
+ Not enough data to render chart.
+
+ );
+ }
+
+ const first = data[0].equity;
+ const last = data[data.length - 1].equity;
+ const isPos = last >= first;
+ const color = isPos ? "#27a644" : "#e5484d";
+ const min = Math.min(...data.map(d => d.equity));
+ const max = Math.max(...data.map(d => d.equity));
+
+ return (
+
+
+
+
+
+
+ `$${v.toFixed(0)}`}
+ width={60}
+ />
+ [formatCurrency(v, currency), "Equity"]}
+ contentStyle={{
+ background: "#141516",
+ border: "1px solid #34343a",
+ borderRadius: "8px",
+ fontSize: "12px",
+ fontFamily: "'JetBrains Mono', monospace",
+ color: "#f7f8f8",
+ }}
+ labelStyle={{ color: "#8a8f98", marginBottom: 4 }}
+ cursor={{ stroke: "#34343a", strokeWidth: 1 }}
+ />
+
+
+ );
+}
diff --git a/web/components/LiveDashboard.tsx b/web/components/LiveDashboard.tsx
new file mode 100644
index 0000000..00abae3
--- /dev/null
+++ b/web/components/LiveDashboard.tsx
@@ -0,0 +1,183 @@
+"use client";
+import { useEffect, useState } from "react";
+import type { AccountInfo, Position, PendingOrder } from "@/lib/mt5";
+import { formatCurrency } from "@/lib/format";
+import PositionsTable from "./PositionsTable";
+import PendingOrdersTable from "./PendingOrdersTable";
+
+const MAGIC = 19730;
+const POLL_MS = 30_000;
+
+interface State {
+ account: AccountInfo | null;
+ positions: Position[];
+ orders: PendingOrder[];
+ loading: boolean;
+ error: string | null;
+ ts: Date | null;
+}
+
+export default function LiveDashboard() {
+ const [state, setState] = useState({
+ account: null, positions: [], orders: [], loading: true, error: null, ts: null,
+ });
+
+ async function fetchData() {
+ try {
+ const [aRes, pRes, oRes] = await Promise.all([
+ fetch("/api/account"), fetch("/api/positions"), fetch("/api/orders"),
+ ]);
+ if (!aRes.ok) throw new Error("bridge error");
+ const [account, positions, orders] = await Promise.all([
+ aRes.json() as Promise,
+ pRes.json() as Promise,
+ oRes.json() as Promise,
+ ]);
+ setState({
+ account, positions,
+ orders: Array.isArray(orders) ? orders : [],
+ loading: false, error: null, ts: new Date(),
+ });
+ } catch (e) {
+ setState(prev => ({ ...prev, loading: false, error: String(e) }));
+ }
+ }
+
+ useEffect(() => {
+ fetchData();
+ const id = setInterval(fetchData, POLL_MS);
+ return () => clearInterval(id);
+ }, []);
+
+ const aresPos = state.positions.filter(p => p.magic === MAGIC);
+ const aresOrd = state.orders.filter(o => o.magic === MAGIC);
+ const openPnl = aresPos.reduce((s, p) => s + p.profit, 0);
+ const currency = state.account?.currency ?? "USD";
+
+ if (state.loading) return
+ Unable to connect to MT5 bridge.
+
+ );
+ }
+ const { account } = state;
+ if (!account) return null;
+
+ return (
+ <>
+ {/* Account stats */}
+
+
+
Account Overview
+ {state.ts && (
+
+ {state.ts.toLocaleTimeString()}
+
+ )}
+
+ 0 : undefined}
+ />
+
+
+
+ {/* Open positions */}
+
+
+
Open Positions
+ {aresPos.length > 0 && (
+
{aresPos.length}
+ )}
+
No open positions right now.
+ ) : (
+
+ )}
+
+
+ {/* Pending orders */}
+
+
+
Pending Orders
+ {aresOrd.length > 0 && (
+
{aresOrd.length}
+ )}
+
No pending orders right now.
+ ) : (
+
+ )}
+
+
+ );
+}
+
+// ── Sub-components ─────────────────────────────────────────────────────────────
+
+function StatTile({ label, value, diff, colored }: {
+ label: string;
+ value: string;
+ diff?: { val: number; currency: string };
+ colored?: boolean;
+}) {
+ return (
+
+
{label}
+
{value}
+ {diff && (
+
= 0 ? "text-bull" : "text-bear"}`}>
+ {diff.val >= 0 ? "+" : ""}{formatCurrency(diff.val, diff.currency)}
+
+ )}
+
+ {children}
+
+ );
+}
+
+function LoadingSkeleton() {
+ return (
+
+
+
+
+ {[...Array(4)].map((_, i) => (
+
+ ))}
+
+
+
+
+
+ {/* wordmark */}
+
+ ARES
+
+
+ {/* nav links */}
+
+ {links.map(({ href, label }) => (
+
+
+ {/* live indicator */}
+
+ Live
+
+
+ );
+}
diff --git a/web/components/PendingOrdersTable.tsx b/web/components/PendingOrdersTable.tsx
new file mode 100644
index 0000000..64f7b59
--- /dev/null
+++ b/web/components/PendingOrdersTable.tsx
@@ -0,0 +1,43 @@
+import type { PendingOrder } from "@/lib/mt5";
+
+const ORDER_LABEL: Record = {
+ 2: { label: "BUY LIMIT", bull: true },
+ 3: { label: "SELL LIMIT", bull: false },
+ 4: { label: "BUY STOP", bull: true },
+ 5: { label: "SELL STOP", bull: false },
+};
+
+export default function PendingOrdersTable({ orders }: { orders: PendingOrder[] }) {
+ return (
+
+
+
+ {["Symbol", "Type", "Vol", "Entry", "Current", "SL", "TP", "Comment"].map(h => (
+ {h}
+ ))}
+
+
+
+ {orders.map((o) => {
+ const kind = ORDER_LABEL[o.type] ?? { label: `TYPE ${o.type}`, bull: true };
+ return (
+
+ {o.symbol}
+
+
+ {kind.label}
+
+
+ {o.volume_current}
+ {o.price_open.toFixed(2)}
+ {o.price_current.toFixed(2)}
+ {o.sl > 0 ? o.sl.toFixed(2) : "—"}
+ {o.tp > 0 ? o.tp.toFixed(2) : "—"}
+ {o.comment || "—"}
+
+ );
+ })}
+
+
+ );
+}
diff --git a/web/components/PositionsTable.tsx b/web/components/PositionsTable.tsx
new file mode 100644
index 0000000..f8e870e
--- /dev/null
+++ b/web/components/PositionsTable.tsx
@@ -0,0 +1,42 @@
+import type { Position } from "@/lib/mt5";
+import { formatCurrency } from "@/lib/format";
+
+export default function PositionsTable({ positions, currency = "USD" }: {
+ positions: Position[];
+ currency?: string;
+}) {
+ return (
+
+
+
+ {["Symbol", "Side", "Volume", "Entry", "Current", "SL", "TP", "P&L"].map(h => (
+ {h}
+ ))}
+
+
+
+ {positions.map((p) => {
+ const isBuy = p.type === 0;
+ return (
+
+ {p.symbol}
+
+
+ {isBuy ? "BUY" : "SELL"}
+
+
+ {p.volume}
+ {p.price_open.toFixed(2)}
+ {p.price_current.toFixed(2)}
+ {p.sl > 0 ? p.sl.toFixed(2) : "—"}
+ {p.tp > 0 ? p.tp.toFixed(2) : "—"}
+ = 0 ? "text-bull" : "text-bear"}`}>
+ {formatCurrency(p.profit, currency)}
+
+
+ );
+ })}
+
+
+ );
+}
diff --git a/web/lib/format.ts b/web/lib/format.ts
new file mode 100644
index 0000000..fe59d21
--- /dev/null
+++ b/web/lib/format.ts
@@ -0,0 +1,22 @@
+export function formatCurrency(n: number, currency = "USD"): string {
+ return new Intl.NumberFormat("en-US", {
+ style: "currency", currency,
+ minimumFractionDigits: 2,
+ maximumFractionDigits: 2,
+ }).format(n);
+}
+
+export function formatPct(n: number, decimals = 1): string {
+ return `${n >= 0 ? "+" : ""}${n.toFixed(decimals)}%`;
+}
+
+export function formatDate(iso: string): string {
+ return new Date(iso).toLocaleString("en-US", {
+ month: "short", day: "numeric",
+ hour: "2-digit", minute: "2-digit",
+ });
+}
+
+export function formatPrice(n: number, digits = 2): string {
+ return n.toFixed(digits);
+}
diff --git a/web/lib/mt5.ts b/web/lib/mt5.ts
new file mode 100644
index 0000000..1ff16e3
--- /dev/null
+++ b/web/lib/mt5.ts
@@ -0,0 +1,102 @@
+// Server-side only — bridge URL never leaves this file
+
+async function apiFetch(path: string): Promise {
+ const base = process.env.MT5_BASE_URL ?? "http://localhost:8000";
+ const res = await fetch(`${base}${path}`, {
+ next: { revalidate: 0 }, // always fresh
+ });
+ if (!res.ok) throw new Error(`MT5 bridge ${path} → ${res.status}`);
+ return res.json();
+}
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+export interface AccountInfo {
+ login: number;
+ balance: number;
+ equity: number;
+ profit: number;
+ margin: number;
+ margin_free: number;
+ margin_level: number;
+ currency: string;
+ leverage: number;
+ name: string;
+ server: string;
+}
+
+export interface Position {
+ ticket: number;
+ symbol: string;
+ type: number; // 0=buy, 1=sell
+ volume: number;
+ price_open: number;
+ price_current: number;
+ sl: number;
+ tp: number;
+ profit: number;
+ swap: number;
+ comment: string;
+ magic: number;
+ time: string;
+}
+
+export interface PendingOrder {
+ ticket: number;
+ symbol: string;
+ type: number; // 2=BUY_LIMIT, 3=SELL_LIMIT, 4=BUY_STOP, 5=SELL_STOP
+ volume_initial: number;
+ volume_current: number;
+ price_open: number;
+ price_current: number;
+ sl: number;
+ tp: number;
+ magic: number;
+ comment: string;
+ time_setup: string;
+}
+
+export interface Deal {
+ ticket: number;
+ order: number;
+ time: string;
+ type: number; // 0=buy, 1=sell, 2=balance
+ entry: number; // 0=in, 1=out
+ symbol: string;
+ volume: number;
+ price: number;
+ commission: number;
+ swap: number;
+ profit: number;
+ comment: string;
+ magic: number;
+}
+
+// ── Wrappers ──────────────────────────────────────────────────────────────────
+
+interface DataVec { data: T[]; count: number }
+
+export async function getAccount(): Promise {
+ const w = await apiFetch>("/account");
+ const item = w.data[0];
+ if (!item) throw new Error("empty /account response");
+ return item;
+}
+
+export async function getPositions(): Promise {
+ const w = await apiFetch>("/positions");
+ return w.data;
+}
+
+export async function getOrders(symbol?: string): Promise {
+ const path = symbol ? `/orders?symbol=${encodeURIComponent(symbol)}` : "/orders";
+ const w = await apiFetch>(path);
+ return w.data;
+}
+
+export async function getDeals(dateFrom: string, dateTo: string, symbol?: string): Promise {
+ let path = `/history/deals?date_from=${encodeURIComponent(dateFrom)}&date_to=${encodeURIComponent(dateTo)}`;
+ if (symbol) path += `&symbol=${encodeURIComponent(symbol)}`;
+ const w = await apiFetch>(path);
+ return w.data;
+}
diff --git a/web/next-env.d.ts b/web/next-env.d.ts
new file mode 100644
index 0000000..830fb59
--- /dev/null
+++ b/web/next-env.d.ts
@@ -0,0 +1,6 @@
+///