{ticker}
{dateRange}
{accentName}
= 0 ? '+' : ''}$${pnl.toFixed(0)} (${pnlPct >= 0 ? '+' : ''}${pnlPct.toFixed(2)}%)`}
color={pnl >= 0 ? '#00FF41' : '#ffb4ab'}
/>
= 0 ? '+' : ''}$${alphaAbs.toFixed(0)}`
}
color={alphaAbs == null ? undefined : alphaAbs >= 0 ? '#00FF41' : '#ffb4ab'}
/>
);
};
const Stat = ({ label, value, color }: { label: string; value: string; color?: string }) => (
= {
positive: '#00FF41',
bullish: '#00FF41',
neutral: 'rgb(163,163,163)',
negative: '#ffb4ab',
bearish: '#ffb4ab',
};
const SparklineMini = ({ values, color = '#00FF41' }: { values: number[]; color?: string }) => {
if (!values || values.length < 2) {
return (
no data
);
}
const min = Math.min(...values);
const max = Math.max(...values);
const range = max - min || 1;
const pts = values
.map((v, i) => `${(i / (values.length - 1)) * 100},${100 - ((v - min) / range) * 90 - 5}`)
.join(' ');
return (
);
};
const SPECIALIST_VISUALS: Record<
string,
{
icon: any;
color: string;
render: (obs: MarketObservation | null, vote: import('./api').SpecialistVote | undefined) => any;
}
> = {
chart_pattern: {
icon: Zap,
color: '[#00FF41]',
render: (obs) => {
const last = obs?.price_history?.slice(-30) ?? [];
return ;
},
},
indicator: {
icon: LineChart,
color: '[#00FF41]',
render: (obs) => {
const ind = obs?.indicators ?? {};
const rsi = typeof ind['rsi14'] === 'number' ? (ind['rsi14'] as number) : null;
const macd = typeof ind['macd'] === 'number' ? (ind['macd'] as number) : null;
const atr = typeof ind['atr14'] === 'number' ? (ind['atr14'] as number) : null;
const lastClose = obs?.price ?? 0;
const atrPct = atr && lastClose ? (atr / lastClose) * 100 : null;
const rows = [
rsi !== null
? { l: 'RSI', text: rsi.toFixed(1), pct: Math.max(0, Math.min(100, rsi)), c: rsi > 70 ? '#ffb4ab' : rsi < 30 ? '#ffb4ab' : '#00FF41' }
: { l: 'RSI', text: '—', pct: 0, c: 'rgba(255,255,255,0.2)' },
macd !== null
? { l: 'MACD', text: macd.toFixed(2), pct: Math.max(5, Math.min(95, 50 + macd * 20)), c: macd >= 0 ? '#00FF41' : '#ffb4ab' }
: { l: 'MACD', text: '—', pct: 0, c: 'rgba(255,255,255,0.2)' },
atrPct !== null
? { l: 'ATR%', text: `${atrPct.toFixed(2)}%`, pct: Math.max(0, Math.min(100, atrPct * 20)), c: 'white' }
: { l: 'ATR%', text: '—', pct: 0, c: 'rgba(255,255,255,0.2)' },
];
return (
{rows.map((b, i) => (
))}
no headlines this step
);
}
const opacities = ['opacity-90', 'opacity-70', 'opacity-40'];
return (
{items.map((h, i) => {
const c = SENT_COLOR[(h.sentiment_label ?? '').toLowerCase()] ?? 'rgb(163,163,163)';
return (
);
})}
no forum activity this step
);
}
return (
{items.map((f, i) => (
r/{f.subreddit}
({f.score})
{f.post_text}
))}
{cells.slice(0, 4).map((m, i) => (
{m.l}
{m.v}
))}
no macro headlines
);
}
return (
{items.map((m, i) => (
{m.country}
{m.headline}
))}
{[30, 45, 35, 60, 55, 70, 50, 65, 75, 60, 80, 72].map((h, i) => (
))}
stylized
{/* Alpha Moderator */}
Alpha Moderator
CONSENSUS
0.2
? 'border-[#00FF41]'
: consensus < -0.2
? 'border-[#ffb4ab]'
: 'border-neutral-400'
} border-b-transparent border-r-transparent opacity-80`}
style={{
transform: `rotate(${45 + Math.max(-1, Math.min(1, consensus)) * 135}deg)`,
clipPath: 'polygon(50% 50%, 0% 0%, 100% 0%)',
}}
/>
{consensus >= 0 ? '+' : ''}
{consensus.toFixed(2)}
{consensusLabel}
-1.0 (BEAR)
0.0
+1.0 (BULL)
Moderator Synthesis
{council?.rationale ??
'Run a task in Gallery to populate moderator synthesis from the live council.'}
{council && (
Action: {council.action.side.toUpperCase()}
{council.action.side !== 'hold' ? ` ${council.action.quantity}` : ''}
)}
{/* Specialist cards */}
{Object.entries(SPECIALIST_VISUALS).map(([roleName, visual]) => {
const vote = council?.votes.find((v) => v.name === roleName);
const stat = vote ? `${vote.signal >= 0 ? '+' : ''}${vote.signal.toFixed(2)}` : '—';
const Icon = visual.icon;
return (
{visual.render(observation, vote)}
{vote?.rationale ?? 'Awaiting council vote — run a task in Gallery.'}
);
})}
);
};
// ---------------------------------------------------------------- TrainingView
const MetricCard = ({
label,
value,
trend,
}: {
label: string;
value: string;
trend?: string;
}) => (
{label}
{value}
{trend && (
{trend}
)}
);
const TrainingView = () => {
const [metrics, setMetrics] = useState
(null);
useEffect(() => {
let cancel = false;
api
.trainingMetrics()
.then((m) => {
if (!cancel) setMetrics(m);
})
.catch(() => {
if (!cancel) setMetrics({ status: 'no_runs', summary: [], mean_alpha_pct: 0 });
});
return () => {
cancel = true;
};
}, []);
// Placeholder logs — there's no JSON log on disk, kept as decorative.
const logs = [
{ type: 'SYS', msg: 'Initializing GRPO policy trainer…' },
{ type: 'SYS', msg: 'Loading historical state tensors [BATCH_SIZE=256]…' },
{ type: 'OPT', msg: 'Step 4480: Adv = 0.124, Kl_div = 0.003', color: 'text-purple-400' },
{ type: 'REWARD', msg: 'Epoch 44 evaluation: Mean R = +1.24%', color: 'text-[#00FF41]' },
{ type: 'SYS', msg: 'Checkpoint saved.', pulse: true },
];
const best = metrics?.summary?.length
? metrics.summary.reduce((a, b) => (b.alpha_pct > a.alpha_pct ? b : a))
: null;
const worst = metrics?.summary?.length
? metrics.summary.reduce((a, b) => (b.alpha_pct < a.alpha_pct ? b : a))
: null;
return (
0 ? 'up' : undefined}
/>
{/* Left: status + logs */}
GRPO Status
{metrics?.status === 'completed' ? 'EVAL DONE' : 'NO RUNS'}
Tasks evaluated
{metrics?.summary.length ?? 0}
LoRA Adapters
Base (no LoRA loaded)
Run directory
{metrics?.run_name ?? '—'}
Terminal Logs (decorative)
{logs.map((log, i) => (
[{log.type}]
{log.msg}
{log.pulse ? ' _' : ''}
))}
{/* Right: real curves from training/runs */}
{metrics?.reward_curve_png ? (
) : (
No run yet — run python training/eval_rollout.py --mock.
)}
{metrics?.portfolio_curve_png ? (
) : (
No run yet.
)}
{metrics?.summary?.length ? (
Per-task summary
| Task |
Alpha % |
Final |
Buy & Hold |
{metrics.summary.map((row) => (
| {row.task_id} |
= 0 ? 'text-[#00FF41]' : 'text-[#ffb4ab]'
}`}
>
{row.alpha_pct.toFixed(2)}%
|
${row.final_portfolio.toLocaleString()}
|
${row.buy_and_hold.toLocaleString()}
|
))}
) : null}
);
};
// ---------------------------------------------------------------- GalleryView
const TASK_META: Record = {
task_easy: { difficulty: 'Easy', name: 'Steady Regime', color: '[#00FF41]' },
task_medium: { difficulty: 'Medium', name: 'Choppy Sideways', color: '[#731fff]' },
task_hard: { difficulty: 'Hard', name: 'Drawdown / Snapback', color: '[#ffb4ab]' },
};
const TaskCard = ({
taskId,
bars,
onDeploy,
active,
}: {
taskId: string;
bars: OhlcvBar[] | null;
onDeploy: () => void;
active: boolean;
}) => {
const meta = TASK_META[taskId] ?? { difficulty: '?', name: taskId, color: '[#00FF41]' };
const ticker = bars?.[0] ? '' : '';
const inEpisode = bars?.filter((b) => b.in_episode) ?? [];
const dates =
inEpisode.length > 0
? `${inEpisode[0].time} → ${inEpisode[inEpisode.length - 1].time}`
: 'Loading…';
// Compute a 9-bucket sparkline from in-episode closes
let sparkBars: number[] = [];
if (inEpisode.length > 0) {
const closes = inEpisode.map((b) => b.close);
const min = Math.min(...closes);
const max = Math.max(...closes);
const range = max - min || 1;
const buckets = 9;
const step = closes.length / buckets;
sparkBars = Array.from({ length: buckets }, (_, i) => {
const slice = closes.slice(Math.floor(i * step), Math.floor((i + 1) * step) || (i + 1));
const avg = slice.reduce((a, c) => a + c, 0) / Math.max(1, slice.length);
return ((avg - min) / range) * 100;
});
}
return (
{bars?.[0] ? bars[0].time.slice(0, 4) : ''}
{sparkBars.length > 0 ? (
sparkBars.map((h, i) => (
))
) : (
Loading bars…
)}
);
};
const GalleryView = ({
env,
onDeploy,
}: {
env: StockerEnv;
onDeploy: (taskId: string) => void;
}) => {
const [bars, setBars] = useState>({});
useEffect(() => {
let cancel = false;
Promise.all(env.tasks.map((t) => api.ohlcv(t).then((r) => [t, r] as const))).then((pairs) => {
if (cancel) return;
const next: Record = {};
for (const [t, r] of pairs) next[t] = r;
setBars(next);
});
return () => {
cancel = true;
};
}, [env.tasks]);
return (
{env.tasks.map((t) => (
onDeploy(t)}
/>
))}
);
};
// --------------------------------------------------------------- PortfolioView
const PortfolioView = ({ env }: { env: StockerEnv }) => {
const { observation, envState, startingCash } = env;
if (!observation || !envState) {
return (
Run a task in Gallery to populate your portfolio.
);
}
const ticker = observation.ticker;
const price = observation.price;
const balance = observation.position;
const value = balance * price;
const portfolio = envState.portfolio_value;
const cash = envState.cash;
const pnl = portfolio - startingCash;
const pnlPct = startingCash > 0 ? (pnl / startingCash) * 100 : 0;
const equityShare = portfolio > 0 ? (value / portfolio) * 100 : 0;
const cashShare = portfolio > 0 ? (cash / portfolio) * 100 : 0;
const reservedShare = Math.max(0, 100 - equityShare - cashShare);
// 24h change from the last two prices in price_history
const ph = observation.price_history;
const change24h =
ph.length >= 2 ? ((ph[ph.length - 1] - ph[ph.length - 2]) / ph[ph.length - 2]) * 100 : 0;
// Sparkline = last 7 closes
const spark = ph.slice(-7);
const sMin = Math.min(...spark);
const sMax = Math.max(...spark);
const sRange = sMax - sMin || 1;
const sparkPct = spark.map((p) => ((p - sMin) / sRange) * 100);
// Risk profile = action diversity
const actions = envState.action_history;
const totalActions = actions.length || 1;
const tradeCount = actions.filter((a) => a.side !== 'hold').length;
const riskScore = Math.min(100, Math.round((tradeCount / totalActions) * 100));
const riskLabel =
riskScore < 30 ? 'Conservative' : riskScore < 60 ? 'Moderate' : 'Aggressive';
return (
Active Position
Holdings & P&L
Total Balance
${portfolio.toLocaleString(undefined, { maximumFractionDigits: 2 })}
= 0 ? 'border-[#00FF41]' : 'border-[#ffb4ab]'
}`}
>
Total P&L
= 0 ? 'text-[#00FF41]' : 'text-[#ffb4ab]'
}`}
>
{pnl >= 0 ? '+' : ''}${pnl.toFixed(2)} ({pnlPct >= 0 ? '+' : ''}{pnlPct.toFixed(2)}%)
| Asset |
Price |
24h Change |
Balance |
Value |
7D Performance |
{ticker[0]}
{ticker}
NASDAQ
|
${price.toFixed(2)} |
= 0 ? 'text-[#00FF41]' : 'text-[#ffb4ab]'
}`}
>
{change24h >= 0 ? '+' : ''}
{change24h.toFixed(2)}%
|
{balance} {ticker} |
${value.toLocaleString(undefined, { maximumFractionDigits: 2 })}
|
{sparkPct.map((v, j) => (
= 0 ? '#00FF41' : '#ffb4ab',
}}
/>
))}
|
Risk Profile
{riskLabel}
{tradeCount} of {totalActions} steps were trades.
Trade Allocation
{[
{ l: 'Equities', v: equityShare, c: '#00FF41' },
{ l: 'Cash', v: cashShare, c: '#731fff' },
{ l: 'Reserved', v: reservedShare, c: 'rgba(255,255,255,0.1)' },
].map((a, i) => (
{a.l} ({a.v.toFixed(0)}%)
))}
);
};
// ----------------------------------------------------------- IntelligenceView
const SENTIMENT_SCORE: Record = {
positive: 1,
bullish: 1,
neutral: 0,
negative: -1,
bearish: -1,
};
const IntelligenceView = ({ env }: { env: StockerEnv }) => {
const { observation } = env;
const positiveHeadlines = (observation?.headlines ?? [])
.filter((h) => (SENTIMENT_SCORE[h.sentiment_label?.toLowerCase()] ?? 0) > 0);
const negativeHeadlines = (observation?.headlines ?? [])
.filter((h) => (SENTIMENT_SCORE[h.sentiment_label?.toLowerCase()] ?? 0) < 0);
const peerEntries = observation?.peers?.peers ?? [];
const macroEntries = observation?.macro ?? [];
const signals = [
positiveHeadlines[0] && {
t: 'Top Headline',
msg: positiveHeadlines[0].headline,
time: positiveHeadlines[0].date,
color: '#00FF41',
},
positiveHeadlines[1] && {
t: 'Secondary',
msg: positiveHeadlines[1].headline,
time: positiveHeadlines[1].date,
color: '#00FF41',
},
negativeHeadlines[0] && {
t: 'Risk Note',
msg: negativeHeadlines[0].headline,
time: negativeHeadlines[0].date,
color: '#ffb4ab',
},
peerEntries.length > 0 && {
t: 'Peer Watch',
msg: `${observation?.ticker} vs ${peerEntries
.slice(0, 3)
.map((p) => `${p.peer_ticker}=${p.peer_close?.toFixed(2) ?? '?'}`)
.join(', ')}`,
time: observation?.date ?? '',
color: '#731fff',
},
macroEntries[0] && {
t: 'Macro',
msg: `${macroEntries[0].country} — ${macroEntries[0].headline}`,
time: macroEntries[0].date,
color: '#731fff',
},
].filter(Boolean) as Array<{ t: string; msg: string; time: string; color: string }>;
// Sentiment hub: mean of headline sentiment scores
const headlines = observation?.headlines ?? [];
const meanTone = headlines.length
? headlines.reduce((a, h) => a + (SENTIMENT_SCORE[h.sentiment_label?.toLowerCase()] ?? 0), 0) /
headlines.length
: 0;
const toneScale = Math.round(((meanTone + 1) / 2) * 100); // 0..100
const sentimentLabel =
meanTone > 0.2 ? 'BULL' : meanTone < -0.2 ? 'BEAR' : 'NEUTRAL';
const peerBeta = peerEntries.length ? '~1.00' : '—';
return (
{/* Neural map */}
Neural Consensus Active
{/* Alpha signals — derived from observation */}
Alpha Signals
{signals.length > 0 ? (
signals.map((s, i) => (
))
) : (
{observation ? 'No headlines/peers/macro for this step.' : 'Run a task to populate signals.'}
)}
Sentiment Hub
{toneScale}
{sentimentLabel}
{[
{ l: 'News Tone', v: meanTone.toFixed(2) },
{ l: 'Sentiment', v: sentimentLabel },
{ l: 'Peer Beta', v: peerBeta },
].map((m, i) => (
{m.l}
{m.v}
))}
);
};
// ------------------------------------------------------------------------- App
export default function App() {
const [activeTab, setActiveTab] = useState('Terminal');
const env = useStockerEnv();
const onDeploy = (taskId: string) => {
void env.selectTask(taskId);
setActiveTab('Terminal');
};
const renderView = () => {
switch (activeTab) {
case 'Terminal':
return ;
case 'Council':
return ;
case 'Training':
return ;
case 'Gallery':
return ;
case 'Portfolio':
return ;
case 'Intelligence':
return ;
default:
return ;
}
};
return (
{/* Sidebar */}
{/* Main Content */}
);
}