);
}
/* ===============================================================
AGENT STATS PANEL
=============================================================== */
function AgentPanel({ user }) {
// ACCOUNT_EQUITY = the meaningful total — what the account is worth right
// now, including margin currently locked in open positions. This matches
// the equity-chart headline so the two panels show ONE number, not two.
//
// paper_balance (free cash) is shown as a sublabel underneath so users
// can see at a glance what's available for new trades vs what's tied up.
//
// ACCOUNT_EQUITY = paperStart + totalPnl
// free = agents.paper_balance (free cash)
// inOpenTrades = equity - free (margin locked + unrealised)
const seed = Number(user.paperStart || 0);
const totalPnl = Number(user.totalPnl || 0);
const equity = seed + totalPnl;
const free = Number(user.paperBalance || 0);
// Floor at 0 — if equity < free (e.g. before any trades open) the
// delta would be slightly negative due to rounding; suppress that noise.
const inOpenTrades = Math.max(equity - free, 0);
// Signed formatters — fixes the "+$-335.436" bug where the JSX hardcoded
// a + prefix and the number rendered its own minus, producing "+$-".
const pnlSign = totalPnl >= 0 ? "+" : "-";
const pnlAbs = Math.abs(totalPnl).toLocaleString(undefined, { maximumFractionDigits: 2 });
const pnlPctSign = (user.totalPnlPct || 0) >= 0 ? "+" : "-";
const pnlPctAbs = Math.abs(user.totalPnlPct || 0).toFixed(2);
const pnlClass = totalPnl >= 0 ? "pos" : "neg";
return (
● TRADING LIVE}
>
NAME
{user.agentName}
TYPE
AI · {(user.agentType || "").replace(/^claude_/, "")}
{isWin
? "Booking the win locks in the PnL above and stops the agent from managing this position further."
: "Booking the loss locks in the PnL above. If you want to give it more room, cancel — the agent's own stop / take-profit still apply."}
);
}
/* ===============================================================
RECENT TRADES TABLE
=============================================================== */
function RecentTradesPanel({ user, onShare }) {
// Live trades from the campaign API — across EVERY agent the user
// owns (no agent_id filter), so the dashboard surface matches what
// the TRADES tab shows. Refetches every 30s.
const [trades, setTrades] = useState([]);
const [loaded, setLoaded] = useState(false);
const [nameById, setNameById] = useState({}); // agent_id → display name
useEffect(() => {
function acJwt() { try { return window.AC_JWT || localStorage.getItem("agc_jwt") || null; } catch (_) { return null; } }
function acBase() { return ((typeof window !== "undefined" && window.AC_API) || "").replace(/\/$/, ""); }
let cancelled = false;
async function refresh() {
const jwt = acJwt(); const base = acBase();
if (!jwt || !base) { setLoaded(true); return; }
try {
// Pull trades + agents in parallel so the row labels resolve
// immediately rather than flicker through "—".
const [tr, ag] = await Promise.all([
fetch(base + "/trades?is_open=false&limit=10",
{ headers: { Authorization: "Bearer " + jwt }, credentials: "omit" }),
fetch(base + "/agents",
{ headers: { Authorization: "Bearer " + jwt }, credentials: "omit" }).catch(() => null),
]);
if (!tr.ok) { setLoaded(true); return; }
const data = await tr.json();
const agentsJson = (ag && ag.ok) ? await ag.json() : null;
const agents = (agentsJson && (agentsJson.agents || agentsJson)) || [];
const map = {};
for (const a of agents) map[a.id] = a.name;
if (cancelled) return;
const rows = (data.trades || []).map(t => {
const opened = t.opened_at ? new Date(t.opened_at) : null;
const time = opened ? `${String(opened.getHours()).padStart(2,"0")}:${String(opened.getMinutes()).padStart(2,"0")}` : "—";
return {
id: t.id,
agent_id: t.agent_id,
time,
market: t.market,
side: (t.side || "").toUpperCase() === "LONG" ? "BUY" : "SELL",
size: Number(t.size_usd || 0),
entry: Number(t.entry_price || 0),
exit: Number(t.exit_price || 0),
pnl: Number(t.pnl || 0),
credit: Number(t.credit_earned || 0),
};
});
setNameById(map);
setTrades(rows); setLoaded(true);
} catch (_) { setLoaded(true); }
}
refresh();
const id = setInterval(refresh, 30_000);
return () => { cancelled = true; clearInterval(id); };
}, []);
return (
TIMEAGENTMARKETSIDESIZEENTRYEXITPnL$CREDIT
{loaded && trades.length === 0 && (
No closed trades yet — your agents tick every ~15s. New trades show up here as they close.
)}
{/* Delta panel — only when the row is expanded and there's
something to show vs the previous decision. */}
{isOpen && deltas.length > 0 && (
// CHANGES VS PREVIOUS REVIEW
{deltas.map((dlt, i) => (
{dlt.label}: {dlt.from}→{dlt.to}
))}
)}
);
})}
)}
);
}
/* Strategy timeline — visual strip per agent. Each node = one strategy
review. Colour reflects the dominant bias of that review's strategy:
long-dominant → green, short → red, neutral → gray, mixed → split.
Click a node to expand its delta vs the prior node. The strip is
capped at 12 nodes per agent so it fits on a phone. */
function StrategyTimeline({ agents, byAgent, filter, openId, onSelect }) {
if (!agents || agents.length === 0) return null;
const visibleAgents = filter === "all" ? agents : agents.filter(a => a.id === filter);
if (visibleAgents.length === 0) return null;
function dominantColor(strategy) {
const biases = (strategy && strategy.market_bias) || {};
const vals = Object.values(biases).filter(v => v);
if (vals.length === 0) return { bg: "var(--cg-tint-2)", fg: "var(--cg-muted)" };
const longs = vals.filter(v => v === "long").length;
const shorts = vals.filter(v => v === "short").length;
const neut = vals.length - longs - shorts;
if (longs > shorts && longs >= neut) return { bg: "rgba(29,158,117,0.55)", fg: "var(--cg-bg)" };
if (shorts > longs && shorts >= neut) return { bg: "rgba(220,38,38,0.55)", fg: "#fff" };
if (longs > 0 && shorts > 0) return { bg: "linear-gradient(90deg, rgba(29,158,117,0.55) 50%, rgba(220,38,38,0.55) 50%)", fg: "#fff" };
return { bg: "var(--cg-tint-2)", fg: "var(--cg-muted)" };
}
function tooltipFor(d) {
const t = d.decided_at ? new Date(d.decided_at) : null;
const when = t ? t.toLocaleString(undefined, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }) : "—";
const biases = (d.strategy && d.strategy.market_bias) || {};
const summary = Object.entries(biases).map(([m, b]) => `${m.replace(/-PERP$/, "")}=${b}`).join(", ") || "—";
return `${when} · ${summary}`;
}
return (
{visibleAgents.map(a => {
// Newest LAST so the strip reads left-to-right oldest → newest,
// which is what users expect from a timeline.
const rows = (byAgent[a.id] || []).slice().sort((x, y) => (x.decided_at || "").localeCompare(y.decided_at || "")).slice(-12);
return (
);
}
/* Compute strategy deltas between two consecutive decisions for the same
agent. Returns [{label, from, to}, ...] for fields that changed. Empty
when nothing changed or there's no prior decision. */
function _strategyDeltas(prior, current) {
if (!prior || !current) return [];
const p = prior.strategy || {};
const c = current.strategy || {};
const out = [];
// Numeric scalars
const numericFields = [
["stop_loss_pct", "Stop loss"],
["take_profit_pct", "Take profit"],
["target_position_size_pct", "Position size"],
["leverage", "Leverage"],
["max_positions", "Max positions"],
["trailing_trigger_pct", "Trailing trigger"],
["trailing_lock_pct", "Trailing lock"],
];
for (const [key, label] of numericFields) {
const pv = p[key];
const cv = c[key];
if (pv == null && cv == null) continue;
if (Number(pv) !== Number(cv)) {
out.push({
label,
from: pv == null ? "—" : String(pv),
to: cv == null ? "—" : String(cv),
});
}
}
// Aggression string
if ((p.aggression || "") !== (c.aggression || "")) {
out.push({
label: "Aggression",
from: (p.aggression || "—").toUpperCase(),
to: (c.aggression || "—").toUpperCase(),
});
}
// Per-market bias deltas (the most interesting changes — flips matter most)
const pBias = p.market_bias || {};
const cBias = c.market_bias || {};
const markets = Array.from(new Set([...Object.keys(pBias), ...Object.keys(cBias)]));
for (const m of markets) {
const pb = pBias[m] || "—";
const cb = cBias[m] || "—";
if (pb !== cb) {
out.push({
label: m.replace(/-PERP$/, "") + " bias",
from: pb,
to: cb,
});
}
}
return out;
}
/* ===============================================================
CAMPAIGN DASHBOARD (main view)
=============================================================== */
function CampaignDashboard({ user, onGraduate }) {
const [shareTrade, setShareTrade] = useState(null);
// Real agents come from two sources, kept in sync:
// (a) user.agents on the parent prop, populated by the periodic /me
// refresh in CampaignApp. This is the canonical source.
// (b) a direct GET /agents fetch on mount + tab-visibility regain
// (in refreshAgents() below), which catches the case where the
// user creates an agent, switches tabs, and the parent's /me
// hasn't repolled yet. Belt-and-suspenders — both ultimately
// call setAgents with the same shape so they don't race.
const [agents, setAgents] = useState(() => Array.isArray(user.agents) ? user.agents : []);
useEffect(() => {
if (Array.isArray(user.agents)) setAgents(user.agents);
}, [user.agents]);
const [addOpen, setAddOpen] = useState(false);
const [reallocSource, setReallocSource] = useState(null); // halted-agent passed to ReallocateModal
const [dismissBanner, setDismissBanner] = useState(false);
const toast = useToast && useToast();
// Adapter — the API returns campaign.agents rows (status / agent_type /
// strategy_state). Map to the legacy shape the panel renderer expects.
function _normaliseAgent(a) {
const strat = a.strategy_state || {};
return {
id: a.id,
name: a.name,
type: a.agent_tier || a.agent_type || "claude_lite",
status: a.status,
risk_state: a.risk_state || null,
paperBalance: Number(a.paper_balance || 0),
pauseReason: a.pause_reason || null,
pnlToday: Number(a.pnl_today || 0),
day: Number(a.day || 0),
reasoning: strat.reasoning || strat.personality || a.personality || "Configuring — first trade incoming.",
kyaId: a.kya_id || null,
kyaStatus: a.kya_status || "unassigned",
};
}
const refreshAgents = useCallback(async () => {
try {
const data = await acGet("/agents");
if (!data) return; // stub mode — keep existing state
const list = Array.isArray(data) ? data : (data.agents || []);
setAgents(list.map(_normaliseAgent));
} catch (_) { /* surface via toast on next action */ }
}, []);
// Refetch on mount and on tab-visibility regain. Without this, an agent
// created in the [+ Add agent] modal disappears the moment the user
// navigates away and back (since the component remounts and the local
// state resets to the stale `user.agents` snapshot from login).
useEffect(() => {
refreshAgents();
function onVisibility() { if (!document.hidden) refreshAgents(); }
document.addEventListener("visibilitychange", onVisibility);
return () => document.removeEventListener("visibilitychange", onVisibility);
}, [refreshAgents]);
const paused = agents.find(a => a.status === "paused");
async function resume(id) {
try {
await acSend("/agents/" + id, { status: "active" }, "PUT");
} catch (_) { /* fall through; refresh below will surface real state */ }
refreshAgents();
}
function bannerCopy(reason) {
if (reason === "inactive_user") return "Your agent was paused for inactivity — it's back on now.";
if (reason === "underperforming") return "An agent was paused after 14 days of low engagement. Edit its strategy to resume.";
return "An agent is paused — make a trade or customise it to bring it back.";
}
return (
{paused && !dismissBanner && (
⏸{bannerCopy(paused.pauseReason)}
)}
{/* Active trades — moved to the top so users see their open
positions + live PnL before scrolling. Was previously in the
bottom row alongside recent trades. */}
{/* Hero loan-eligibility strip — the highest-emotion data point on
the page elevated to a single-click jump target. */}
{
const el = document.getElementById("cg-loan-eligibility");
if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
}} />
{ resume(id); toast && toast.push({ title: "Agent resumed", duration: 2500 }); }}
onAdd={() => setAddOpen(true)}
onReallocate={(a) => setReallocSource(a)}
/>
{shareTrade && setShareTrade(null)} />}
{reallocSource && (
setReallocSource(null)}
onTransferred={() => {
setReallocSource(null);
toast && toast.push({ title: "Capital moved", meta: "Balance updates on the next refresh", duration: 3000 });
refreshAgents();
}}
onCreateNew={() => {
// Hand off to the existing AddAgentModal with the halted
// agent as the funding source pre-selected.
setReallocSource(null);
setAddOpen(true);
}}
/>
)}
{addOpen && (
setAddOpen(false)}
onCreated={(agent) => {
// Optimistic insert so the new card appears instantly; the
// visibility-driven refetch will reconcile against the server.
setAgents(as => [...as, _normaliseAgent(agent)]);
setAddOpen(false);
toast && toast.push({ title: agent.name + " launched", meta: "Agent is live", duration: 3000 });
refreshAgents();
}}
/>
)}
);
}
/* Multi-agent roster grid */
/* ===============================================================
COMBINED AGENTS PANEL — per-agent PnL/Sharpe + aggregate totals
Reads from user.combined (populated by /me's combined block in
campaign/api/routes/registration.py).
=============================================================== */
function CombinedAgentsPanel({ combined }) {
if (!combined || !combined.agents || combined.agents.length === 0) return null;
const t = combined.total || {};
function fmtUsd(n) { const v = Number(n || 0); const sign = v < 0 ? "-" : ""; return `${sign}$${Math.abs(v).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`; }
function pctClass(v) { return Number(v || 0) >= 0 ? "cg-num pos" : "cg-num neg"; }
function sharpeTone(s) {
const v = Number(s || 0);
if (v >= 2) return "var(--accent)";
if (v >= 1) return "var(--blue, #5b8def)";
if (v > 0) return "var(--fg)";
return "var(--red, #b13b3b)";
}
function stateBadge(rs) {
if (rs === "halted") return DONE;
if (rs === "hard_cut") return HARD;
if (rs === "soft_cut") return SOFT;
return null;
}
return (
Sharpe is the annualised risk-adjusted return per agent. Aggregate Sharpe is weighted by trade count. Higher is better; below zero means a net-losing strategy.
);
}
/* ===============================================================
REALLOCATE CAPITAL MODAL — for halted agents
User picks a destination: existing owned agent (POST /agents/:id/
transfer) OR a new agent (delegates to AddAgentModal with source
pre-selected). Default amount is the full source balance.
=============================================================== */
function ShareModal({ trade, user, onClose }) {
const canvasRef = useRef(null);
const toast = useToast && useToast();
const t = normalizeTrade(trade);
// Inside the Telegram Mini App, referrals should point at the bot's
// deep link so the tap opens the Mini App natively (no browser hop,
// start_param carries the referral code straight to /auth/telegram/mini-app).
// On the open web we keep the classic /join?ref= URL so the marketing
// landing captures the referral before signup.
const AC = (typeof window !== "undefined" && window.AC) || {};
const botUser = (typeof window !== "undefined" && window.AC_TG_BOT) || "Agenticscreditbot";
const inTelegram = AC.platform && AC.platform.isTelegram;
const refUrl = inTelegram
? `https://t.me/${botUser}/app?startapp=ref_${user.referralCode}`
: `https://agentics.credit/join?ref=${user.referralCode}`;
const shareText =
`My AI agent ${user.agentName} just closed ${t.market} ${t.side} for ${t.profit ? "+" : ""}$${Math.abs(t.pnl).toLocaleString()} (${t.pnlPct > 0 ? "+" : ""}${t.pnlPct}%) on @agenticscredit Genesis Campaign 🟢\n\nBuild your own trading agent, get $1,000 paper USDT:`;
// render the canvas whenever modal opens
useEffect(() => {
if (canvasRef.current) drawShareCard(canvasRef.current, trade, user);
}, [trade, user]);
async function getBlob() {
return new Promise((resolve) => {
if (!canvasRef.current) return resolve(null);
canvasRef.current.toBlob(b => resolve(b), "image/png");
});
}
async function copyImage() {
try {
const blob = await getBlob();
if (blob && navigator.clipboard && window.ClipboardItem) {
await navigator.clipboard.write([new window.ClipboardItem({ "image/png": blob })]);
toast && toast.push({ title: "Image copied", meta: "Paste into X, Telegram, anywhere", duration: 3000 });
} else {
downloadImage();
}
} catch (_) { downloadImage(); }
}
async function downloadImage() {
const blob = await getBlob();
if (!blob) return;
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url; a.download = `agentics-${user.agentName}-${t.market}.png`;
document.body.appendChild(a); a.click(); a.remove();
setTimeout(() => URL.revokeObjectURL(url), 1000);
toast && toast.push({ title: "Image downloaded", meta: "Attach it to your post", duration: 3000 });
}
function shareX() {
const u = `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(refUrl)}`;
window.open(u, "_blank", "noopener,width=600,height=620");
copyImage();
}
function shareTelegram() {
// Inside the Mini App we use switchInlineQuery — pops the native
// chat-picker so the user shares straight into a Telegram chat
// without leaving the app. On web (or if the SDK is missing) fall
// back to the classic t.me/share/url flow that opens a share popup.
const tg = window.Telegram && window.Telegram.WebApp;
if (inTelegram && tg && tg.switchInlineQuery) {
try {
tg.switchInlineQuery(shareText + "\n\n" + refUrl, ["users", "groups"]);
copyImage();
return;
} catch (_) { /* fall through to browser flow */ }
}
const u = `https://t.me/share/url?url=${encodeURIComponent(refUrl)}&text=${encodeURIComponent(shareText)}`;
window.open(u, "_blank", "noopener,width=600,height=620");
copyImage();
}
function copyLink() {
navigator.clipboard && navigator.clipboard.writeText(refUrl);
toast && toast.push({ title: "Referral link copied", duration: 2200 });
}
return (
e.stopPropagation()}>
// SHARE_TRADE
Share your {t.profit ? "win" : "trade"}
{/* live canvas preview of the actual image that gets shared */}
↑ This exact image is copied to your clipboard when you share. Paste it into the post.
${(user.estLoanUsdc + user.creditBalance).toLocaleString()}TOTAL CREDIT LINE
25% APR · 25% Revenue Share · 50% LTV
$CREDIT vests over 6 months from mainnet launch. Your trading history carries to the live protocol.
);
}
/* ===============================================================
AREA-LEVEL CHROME (Campaign top header)
=============================================================== */
function CampaignHeader({ user, area, onArea, tab, onTab, onShare, onLogout }) {
// Soft-launch nav: hide PROTOCOL / VAULTS / LEADERBOARD / DEVELOPER —
// those areas still render mock data and the live signal from users
// was that the mix was confusing. The campaign sub-nav stays in full
// because every page under it now reads real data. DEV_TOOLS sub-tab
// is hidden too (still shows mock API-key snippets — bring back when
// the developer surface ships for real).
return (