Redesign: phosphor-terminal identity and simplified 4-page structure
Information architecture (6 nav destinations -> 4): - New Overview home: metric strip (live setups, high confidence, hit rate, expectancy), top-5 setups, watchlist pulse - Market = Watchlist + Rankings merged as tabs; scoring weights moved into a collapsible disclosure - Signals = Scanner + Performance merged as tabs (Setups | Track Record) with actions inside the panels - Legacy routes redirect (/watchlist, /rankings, /scanner, /performance) Visual identity: - Warm ash-green dark palette replaces cold navy; citron lime accent replaces blue (Tailwind gray/blue remapped at config level so all components reskin) - Primary buttons: lime with ink text; long/short stays emerald/red - Typography: Bricolage Grotesque display, Instrument Sans body, IBM Plex Mono for all numerals incl. chart canvas labels - Atmosphere: graph-paper grid + citron glow + film grain; pulsing brand dot; mono-numbered nav Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
dennisthiessenandClaude Fable 5 committed
1 parent
21ed83c56c
commit
9c6a0a72fa
20 files changed
+548
-213
No files matched your search
@@ -0,0 +1,236 @@
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useTrades } from '../../hooks/useTrades';
|
||||
import { TradeTable, type SortColumn, type SortDirection, computeTradeAnalysis } from '../scanner/TradeTable';
|
||||
import { SkeletonTable } from '../ui/Skeleton';
|
||||
import { useToast } from '../ui/Toast';
|
||||
import { Button } from '../ui/Button';
|
||||
import { Callout } from '../ui/Callout';
|
||||
import { Disclosure } from '../ui/Disclosure';
|
||||
import { Field, Input, Select } from '../ui/Field';
|
||||
import { triggerJob } from '../../api/admin';
|
||||
import type { TradeSetup } from '../../lib/types';
|
||||
import { RECOMMENDATION_ACTION_GLOSSARY, RECOMMENDATION_ACTION_LABELS } from '../../lib/recommendation';
|
||||
|
||||
type DirectionFilter = 'both' | 'long' | 'short';
|
||||
type ActionFilter = 'all' | 'LONG_HIGH' | 'LONG_MODERATE' | 'SHORT_HIGH' | 'SHORT_MODERATE' | 'NEUTRAL';
|
||||
|
||||
function filterTrades(
|
||||
trades: TradeSetup[],
|
||||
minRR: number,
|
||||
direction: DirectionFilter,
|
||||
minConfidence: number,
|
||||
action: ActionFilter,
|
||||
): TradeSetup[] {
|
||||
return trades.filter((t) => {
|
||||
if (t.rr_ratio < minRR) return false;
|
||||
if (direction !== 'both' && t.direction !== direction) return false;
|
||||
if (minConfidence > 0 && (t.confidence_score ?? 0) < minConfidence) return false;
|
||||
if (action !== 'all' && t.recommended_action !== action) return false;
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
function getComputedValue(trade: TradeSetup, column: SortColumn): number {
|
||||
const analysis = computeTradeAnalysis(trade);
|
||||
switch (column) {
|
||||
case 'risk_amount': return analysis.risk_amount;
|
||||
case 'reward_amount': return analysis.reward_amount;
|
||||
case 'stop_pct': return analysis.stop_pct;
|
||||
case 'target_pct': return analysis.target_pct;
|
||||
case 'confidence_score': return trade.confidence_score ?? -1;
|
||||
case 'best_target_probability':
|
||||
return trade.targets?.length ? Math.max(...trade.targets.map((t) => t.probability)) : -1;
|
||||
case 'risk_level':
|
||||
if (trade.risk_level === 'Low') return 1;
|
||||
if (trade.risk_level === 'Medium') return 2;
|
||||
if (trade.risk_level === 'High') return 3;
|
||||
return 0;
|
||||
default: return 0;
|
||||
}
|
||||
}
|
||||
|
||||
function sortTrades(
|
||||
trades: TradeSetup[],
|
||||
column: SortColumn,
|
||||
direction: SortDirection,
|
||||
): TradeSetup[] {
|
||||
const sorted = [...trades].sort((a, b) => {
|
||||
let cmp = 0;
|
||||
switch (column) {
|
||||
case 'symbol':
|
||||
cmp = a.symbol.localeCompare(b.symbol);
|
||||
break;
|
||||
case 'direction':
|
||||
cmp = a.direction.localeCompare(b.direction);
|
||||
break;
|
||||
case 'recommended_action':
|
||||
cmp = (a.recommended_action ?? '').localeCompare(b.recommended_action ?? '');
|
||||
break;
|
||||
case 'detected_at':
|
||||
cmp = new Date(a.detected_at).getTime() - new Date(b.detected_at).getTime();
|
||||
break;
|
||||
case 'risk_amount':
|
||||
case 'reward_amount':
|
||||
case 'stop_pct':
|
||||
case 'target_pct':
|
||||
case 'confidence_score':
|
||||
case 'best_target_probability':
|
||||
case 'risk_level':
|
||||
cmp = getComputedValue(a, column) - getComputedValue(b, column);
|
||||
break;
|
||||
case 'entry_price':
|
||||
case 'stop_loss':
|
||||
case 'target':
|
||||
case 'rr_ratio':
|
||||
case 'composite_score':
|
||||
cmp = a[column] - b[column];
|
||||
break;
|
||||
}
|
||||
return direction === 'asc' ? cmp : -cmp;
|
||||
});
|
||||
return sorted;
|
||||
}
|
||||
|
||||
export function SetupsPanel() {
|
||||
const { data: trades, isLoading, isError, error } = useTrades();
|
||||
const queryClient = useQueryClient();
|
||||
const toast = useToast();
|
||||
|
||||
const [minRR, setMinRR] = useState(0);
|
||||
const [directionFilter, setDirectionFilter] = useState<DirectionFilter>('both');
|
||||
const [minConfidence, setMinConfidence] = useState(0);
|
||||
const [actionFilter, setActionFilter] = useState<ActionFilter>('all');
|
||||
const [sortColumn, setSortColumn] = useState<SortColumn>('rr_ratio');
|
||||
const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
|
||||
|
||||
const scanMutation = useMutation({
|
||||
mutationFn: () => triggerJob('rr_scanner'),
|
||||
onSuccess: () => {
|
||||
toast.addToast('success', 'Scanner triggered. Results will refresh shortly.');
|
||||
setTimeout(() => queryClient.invalidateQueries({ queryKey: ['trades'] }), 3000);
|
||||
},
|
||||
onError: () => {
|
||||
toast.addToast('error', 'Failed to trigger scanner');
|
||||
},
|
||||
});
|
||||
|
||||
const handleSort = (column: SortColumn) => {
|
||||
if (column === sortColumn) {
|
||||
setSortDirection((prev) => (prev === 'asc' ? 'desc' : 'asc'));
|
||||
} else {
|
||||
setSortColumn(column);
|
||||
setSortDirection('asc');
|
||||
}
|
||||
};
|
||||
|
||||
const processed = useMemo(() => {
|
||||
if (!trades) return [];
|
||||
const filtered = filterTrades(trades, minRR, directionFilter, minConfidence, actionFilter);
|
||||
return sortTrades(filtered, sortColumn, sortDirection);
|
||||
}, [trades, minRR, directionFilter, minConfidence, actionFilter, sortColumn, sortDirection]);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Filter toolbar */}
|
||||
<div className="glass-sm flex flex-wrap items-end gap-4 p-4">
|
||||
<Field label="Min Risk:Reward" htmlFor="min-rr">
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-sm text-gray-400">1 :</span>
|
||||
<Input
|
||||
id="min-rr"
|
||||
type="number"
|
||||
min={0}
|
||||
step={0.1}
|
||||
value={minRR}
|
||||
onChange={(e) => setMinRR(Number(e.target.value) || 0)}
|
||||
className="w-20"
|
||||
/>
|
||||
</div>
|
||||
</Field>
|
||||
<Field label="Direction" htmlFor="direction">
|
||||
<Select
|
||||
id="direction"
|
||||
value={directionFilter}
|
||||
onChange={(e) => setDirectionFilter(e.target.value as DirectionFilter)}
|
||||
>
|
||||
<option value="both">Both</option>
|
||||
<option value="long">Long</option>
|
||||
<option value="short">Short</option>
|
||||
</Select>
|
||||
</Field>
|
||||
<Field label="Min Confidence" htmlFor="min-confidence">
|
||||
<Input
|
||||
id="min-confidence"
|
||||
type="number"
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
value={minConfidence}
|
||||
onChange={(e) => setMinConfidence(Number(e.target.value) || 0)}
|
||||
className="w-24"
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Recommended Action" htmlFor="action">
|
||||
<Select
|
||||
id="action"
|
||||
value={actionFilter}
|
||||
onChange={(e) => setActionFilter(e.target.value as ActionFilter)}
|
||||
>
|
||||
<option value="all">All</option>
|
||||
<option value="LONG_HIGH">{RECOMMENDATION_ACTION_LABELS.LONG_HIGH}</option>
|
||||
<option value="LONG_MODERATE">{RECOMMENDATION_ACTION_LABELS.LONG_MODERATE}</option>
|
||||
<option value="SHORT_HIGH">{RECOMMENDATION_ACTION_LABELS.SHORT_HIGH}</option>
|
||||
<option value="SHORT_MODERATE">{RECOMMENDATION_ACTION_LABELS.SHORT_MODERATE}</option>
|
||||
<option value="NEUTRAL">{RECOMMENDATION_ACTION_LABELS.NEUTRAL}</option>
|
||||
</Select>
|
||||
</Field>
|
||||
<div className="ml-auto">
|
||||
<Button onClick={() => scanMutation.mutate()} loading={scanMutation.isPending}>
|
||||
{scanMutation.isPending ? 'Scanning…' : 'Run Scanner'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Disclosure summary="How the scanner works & action glossary">
|
||||
<p className="mb-3 text-xs text-gray-400">
|
||||
The scanner identifies asymmetric risk-reward trade setups by analyzing S/R levels as
|
||||
price targets and using ATR-based stops to define risk. Click{' '}
|
||||
<span className="font-medium text-gray-300">Run Scanner</span> to scan all tickers now,
|
||||
or wait for the scheduled run.
|
||||
</p>
|
||||
<div className="grid gap-1 md:grid-cols-2">
|
||||
{RECOMMENDATION_ACTION_GLOSSARY.map((item) => (
|
||||
<p key={item.action} className="text-xs text-gray-300">
|
||||
<span className="font-semibold text-blue-300">{RECOMMENDATION_ACTION_LABELS[item.action]}:</span>{' '}
|
||||
{item.description}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</Disclosure>
|
||||
|
||||
{isLoading && <SkeletonTable rows={8} cols={8} />}
|
||||
|
||||
{isError && (
|
||||
<Callout variant="error">
|
||||
{error instanceof Error ? error.message : 'Failed to load trade setups'}
|
||||
</Callout>
|
||||
)}
|
||||
|
||||
{trades && processed.length === 0 && !isLoading && (
|
||||
<Callout variant="empty">
|
||||
No trade setups match the current filters. Try lowering the Min R:R or click Run Scanner to refresh.
|
||||
</Callout>
|
||||
)}
|
||||
|
||||
{trades && processed.length > 0 && (
|
||||
<TradeTable
|
||||
trades={processed}
|
||||
sortColumn={sortColumn}
|
||||
sortDirection={sortDirection}
|
||||
onSort={handleSort}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { usePerformance } from '../../hooks/usePerformance';
|
||||
import { triggerJob } from '../../api/admin';
|
||||
import { Button } from '../ui/Button';
|
||||
import { Callout } from '../ui/Callout';
|
||||
import { Disclosure } from '../ui/Disclosure';
|
||||
import { Section } from '../ui/Section';
|
||||
import { SkeletonCard } from '../ui/Skeleton';
|
||||
import { useToast } from '../ui/Toast';
|
||||
import { RECOMMENDATION_ACTION_LABELS } from '../../lib/recommendation';
|
||||
import type { OutcomeBucketStats } from '../../lib/types';
|
||||
|
||||
function fmtR(value: number | null): string {
|
||||
if (value === null) return '—';
|
||||
return `${value > 0 ? '+' : ''}${value.toFixed(2)}R`;
|
||||
}
|
||||
|
||||
function fmtPct(value: number | null): string {
|
||||
return value === null ? '—' : `${value.toFixed(1)}%`;
|
||||
}
|
||||
|
||||
function rColor(value: number | null): string {
|
||||
if (value === null) return 'text-gray-400';
|
||||
if (value > 0) return 'text-emerald-400';
|
||||
if (value < 0) return 'text-red-400';
|
||||
return 'text-gray-300';
|
||||
}
|
||||
|
||||
function StatCard({ label, value, valueClass = 'text-gray-100', sub }: {
|
||||
label: string;
|
||||
value: string;
|
||||
valueClass?: string;
|
||||
sub?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="glass p-5">
|
||||
<p className="section-index">{label}</p>
|
||||
<p className={`num mt-2 text-2xl font-semibold ${valueClass}`}>{value}</p>
|
||||
{sub && <p className="mt-1 text-xs text-gray-500">{sub}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function actionLabel(key: string): string {
|
||||
return RECOMMENDATION_ACTION_LABELS[key as keyof typeof RECOMMENDATION_ACTION_LABELS] ?? key;
|
||||
}
|
||||
|
||||
function BreakdownTable({ rows, labelHeader, mapLabel }: {
|
||||
rows: Record<string, OutcomeBucketStats>;
|
||||
labelHeader: string;
|
||||
mapLabel?: (key: string) => string;
|
||||
}) {
|
||||
const entries = Object.entries(rows);
|
||||
if (entries.length === 0) {
|
||||
return <Callout variant="empty">No evaluated setups in this breakdown yet.</Callout>;
|
||||
}
|
||||
return (
|
||||
<div className="glass overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-white/[0.06] text-left text-xs uppercase tracking-wider text-gray-500">
|
||||
<th className="px-4 py-3">{labelHeader}</th>
|
||||
<th className="px-4 py-3 text-right">Setups</th>
|
||||
<th className="px-4 py-3 text-right">Wins</th>
|
||||
<th className="px-4 py-3 text-right">Losses</th>
|
||||
<th className="px-4 py-3 text-right">Expired</th>
|
||||
<th className="px-4 py-3 text-right">Hit Rate</th>
|
||||
<th className="px-4 py-3 text-right">Avg R</th>
|
||||
<th className="px-4 py-3 text-right">Total R</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{entries.map(([key, stats]) => (
|
||||
<tr key={key} className="border-b border-white/[0.04] transition-colors duration-150 hover:bg-white/[0.03]">
|
||||
<td className="px-4 py-3 font-medium text-gray-200">{mapLabel ? mapLabel(key) : key}</td>
|
||||
<td className="num px-4 py-3 text-right text-gray-300">{stats.total}</td>
|
||||
<td className="num px-4 py-3 text-right text-emerald-400">{stats.wins}</td>
|
||||
<td className="num px-4 py-3 text-right text-red-400">{stats.losses}</td>
|
||||
<td className="num px-4 py-3 text-right text-gray-400">{stats.expired}</td>
|
||||
<td className="num px-4 py-3 text-right text-gray-200">{fmtPct(stats.hit_rate)}</td>
|
||||
<td className={`num px-4 py-3 text-right ${rColor(stats.avg_r)}`}>{fmtR(stats.avg_r)}</td>
|
||||
<td className={`num px-4 py-3 text-right ${rColor(stats.total_r)}`}>{fmtR(stats.total_r)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function TrackRecordPanel() {
|
||||
const { data, isLoading, isError, error } = usePerformance();
|
||||
const queryClient = useQueryClient();
|
||||
const toast = useToast();
|
||||
|
||||
const evaluateMutation = useMutation({
|
||||
mutationFn: () => triggerJob('outcome_evaluator'),
|
||||
onSuccess: () => {
|
||||
toast.addToast('success', 'Outcome evaluation triggered. Stats will refresh shortly.');
|
||||
setTimeout(() => queryClient.invalidateQueries({ queryKey: ['performance'] }), 3000);
|
||||
},
|
||||
onError: () => {
|
||||
toast.addToast('error', 'Failed to trigger outcome evaluation');
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<Disclosure summary="How outcomes are measured">
|
||||
<p className="text-xs text-gray-400">
|
||||
Each setup is replayed against the daily bars after its detection: a{' '}
|
||||
<span className="text-emerald-400">win</span> means the target was reached before the
|
||||
stop, a <span className="text-red-400">loss</span> means the stop was hit first (bars
|
||||
where both levels fall inside the same day count conservatively as losses). Setups with
|
||||
neither level hit within 30 trading days <span className="text-gray-300">expire</span> at
|
||||
0R. Avg R is the expectancy per trade: wins earn their R:R ratio, losses cost −1R — a
|
||||
positive value means the signals have been profitable on a risk-adjusted basis. The
|
||||
evaluator runs nightly after OHLCV collection.
|
||||
</p>
|
||||
</Disclosure>
|
||||
<Button onClick={() => evaluateMutation.mutate()} loading={evaluateMutation.isPending} className="shrink-0">
|
||||
{evaluateMutation.isPending ? 'Evaluating…' : 'Evaluate Now'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{isLoading && (
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<SkeletonCard /><SkeletonCard /><SkeletonCard /><SkeletonCard />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isError && (
|
||||
<Callout variant="error">
|
||||
{error instanceof Error ? error.message : 'Failed to load performance stats'}
|
||||
</Callout>
|
||||
)}
|
||||
|
||||
{data && data.overall.total === 0 && (
|
||||
<Callout variant="empty">
|
||||
No evaluated setups yet. Outcomes appear once setups are old enough for their stop or
|
||||
target to be hit — the evaluator runs nightly, or click Evaluate Now.
|
||||
{data.pending > 0 && ` ${data.pending} setup${data.pending === 1 ? '' : 's'} pending evaluation.`}
|
||||
</Callout>
|
||||
)}
|
||||
|
||||
{data && data.overall.total > 0 && (
|
||||
<>
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<StatCard
|
||||
label="Hit Rate"
|
||||
value={fmtPct(data.overall.hit_rate)}
|
||||
sub={`${data.overall.wins} wins / ${data.overall.losses} losses`}
|
||||
/>
|
||||
<StatCard
|
||||
label="Expectancy"
|
||||
value={fmtR(data.overall.avg_r)}
|
||||
valueClass={rColor(data.overall.avg_r)}
|
||||
sub="average R per trade"
|
||||
/>
|
||||
<StatCard
|
||||
label="Total R"
|
||||
value={fmtR(data.overall.total_r)}
|
||||
valueClass={rColor(data.overall.total_r)}
|
||||
sub="cumulative risk-adjusted result"
|
||||
/>
|
||||
<StatCard
|
||||
label="Evaluated"
|
||||
value={String(data.overall.total)}
|
||||
sub={`${data.pending} pending · ${data.overall.expired} expired`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Section title="By Direction">
|
||||
<BreakdownTable rows={data.by_direction} labelHeader="Direction" />
|
||||
</Section>
|
||||
|
||||
<Section title="By Recommended Action">
|
||||
<BreakdownTable rows={data.by_action} labelHeader="Action" mapLabel={actionLabel} />
|
||||
</Section>
|
||||
|
||||
<Section title="By Confidence" hint="at detection time">
|
||||
<BreakdownTable rows={data.by_confidence} labelHeader="Confidence" />
|
||||
</Section>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user