Brandon LiandClaude Opus 5.5
db1d12327a
One quote feed per machine: a TopstepX client's market hub, else a Tradovate client's market-data socket, subscribed to every listed root's front month and the drain micro. A supervisor keeps it on a working client, dropping one that fails or goes quiet while the market trades. The Auto draw weighs each instrument by its live spread (the typical tick when no fresh quote is at hand). No futures entry pays more than the master's max entry spread ($15 until set) to cross the book: the draw leaves such an instrument out, an explicit symbol sits the tick out, and fireLeg and the extra-day trade check it last before sending. The Settings page and the master's stats show the live spreads and the feed. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
541 lines
30 KiB
TypeScript
541 lines
30 KiB
TypeScript
'use client';
|
||
|
||
import { useEffect, useState } from 'react';
|
||
import Link from 'next/link';
|
||
|
||
/** GET /api/instruments: each firm's list (from the master) and, for
|
||
* futures firms, how the Auto draw sees each instrument. */
|
||
interface InstrumentsOverview {
|
||
roots: string[];
|
||
maxEntrySpreadDollars?: number;
|
||
quotes?: { source: string | null; platform: string | null; lastQuoteAt: string | null; lastError: string | null };
|
||
firms: {
|
||
id: string;
|
||
name: string;
|
||
platform: string;
|
||
source: 'master' | 'legacy';
|
||
instruments: string[];
|
||
stats?: {
|
||
maxHoldHours: number;
|
||
quoteSource?: string | null;
|
||
sessionProgress: number | null;
|
||
instruments: {
|
||
symbol: string;
|
||
listed: boolean;
|
||
spreadDollars: number;
|
||
spreadLive?: boolean;
|
||
spreadBlocked?: boolean;
|
||
dailyMoveDollars: number | null;
|
||
holdHours: number | null;
|
||
disabled: boolean;
|
||
chance: number | null;
|
||
}[];
|
||
};
|
||
}[];
|
||
}
|
||
|
||
interface ResolvedContract {
|
||
name: string;
|
||
alternative?: string;
|
||
}
|
||
|
||
interface AppSettings {
|
||
max_concurrent_accounts: string | null;
|
||
master_dashboard_url: string | null;
|
||
instance_name: string | null;
|
||
instance_id: string | null;
|
||
trading_hours: string | null;
|
||
master_backup_token: string | null;
|
||
proxy_url: string | null;
|
||
backup_last_push_at: string | null;
|
||
backup_last_error: string | null;
|
||
}
|
||
|
||
interface BackupMeta {
|
||
id: string;
|
||
name: string;
|
||
savedAt: string;
|
||
sizeBytes: number;
|
||
}
|
||
|
||
export default function SettingsPage() {
|
||
const [overview, setOverview] = useState<InstrumentsOverview | null>(null);
|
||
const [contracts, setContracts] = useState<Record<string, ResolvedContract | null>>({});
|
||
const [maxConcurrent, setMaxConcurrent] = useState<string>('5');
|
||
const [tradingHours, setTradingHours] = useState<string>('full_cme');
|
||
const [masterUrl, setMasterUrl] = useState<string>('');
|
||
const [catalog, setCatalog] = useState<{
|
||
version: number;
|
||
firmCount: number;
|
||
lastSyncAt: string | null;
|
||
lastError: string | null;
|
||
} | null>(null);
|
||
const [syncing, setSyncing] = useState(false);
|
||
const [instanceName, setInstanceName] = useState<string>('');
|
||
const [instanceId, setInstanceId] = useState<string>('');
|
||
const [saving, setSaving] = useState(false);
|
||
const [saved, setSaved] = useState(false);
|
||
const [backupToken, setBackupToken] = useState<string>('');
|
||
const [proxyUrl, setProxyUrl] = useState<string>('');
|
||
const [backupStatus, setBackupStatus] = useState<{ at: string | null; error: string | null }>({ at: null, error: null });
|
||
const [restoreList, setRestoreList] = useState<BackupMeta[] | null>(null);
|
||
const [restoreBusy, setRestoreBusy] = useState(false);
|
||
const [restoreMsg, setRestoreMsg] = useState<string>('');
|
||
|
||
const fetchCatalog = () => {
|
||
fetch('/api/firm-catalog')
|
||
.then((r) => r.json())
|
||
.then(setCatalog)
|
||
.catch(() => {});
|
||
};
|
||
|
||
const syncCatalogNow = async () => {
|
||
setSyncing(true);
|
||
try {
|
||
await fetch('/api/firm-catalog', { method: 'POST' });
|
||
} catch { /* the error lands in lastError */ }
|
||
fetchCatalog();
|
||
setSyncing(false);
|
||
};
|
||
|
||
useEffect(() => {
|
||
fetch('/api/instruments')
|
||
.then((r) => r.json())
|
||
.then(setOverview)
|
||
.catch(() => {});
|
||
|
||
fetchCatalog();
|
||
|
||
fetch('/api/settings')
|
||
.then((r) => r.json())
|
||
.then((s: AppSettings) => {
|
||
if (s.max_concurrent_accounts != null) {
|
||
setMaxConcurrent(s.max_concurrent_accounts);
|
||
}
|
||
if (s.trading_hours != null) {
|
||
setTradingHours(s.trading_hours);
|
||
}
|
||
if (s.master_dashboard_url != null) {
|
||
setMasterUrl(s.master_dashboard_url);
|
||
}
|
||
if (s.instance_name != null) {
|
||
setInstanceName(s.instance_name);
|
||
}
|
||
if (s.instance_id != null) {
|
||
setInstanceId(s.instance_id);
|
||
}
|
||
if (s.master_backup_token != null) {
|
||
setBackupToken(s.master_backup_token);
|
||
}
|
||
if (s.proxy_url != null) {
|
||
setProxyUrl(s.proxy_url);
|
||
}
|
||
setBackupStatus({ at: s.backup_last_push_at, error: s.backup_last_error || null });
|
||
});
|
||
|
||
// Load cached contracts; if cache is empty, auto-resolve
|
||
fetch('/api/instruments/contracts')
|
||
.then((r) => r.json())
|
||
.then((data: Record<string, ResolvedContract | null>) => {
|
||
if (data.error) return;
|
||
const hasData = Object.values(data).some((v) => v !== null);
|
||
if (hasData) {
|
||
setContracts(data);
|
||
} else {
|
||
// Cache empty — trigger a fresh resolve automatically
|
||
fetch('/api/instruments/contracts', { method: 'POST' })
|
||
.then((r) => r.json())
|
||
.then((fresh) => { if (!fresh.error) setContracts(fresh); })
|
||
.catch(() => {});
|
||
}
|
||
})
|
||
.catch(() => {});
|
||
}, []);
|
||
|
||
async function saveSettings() {
|
||
setSaving(true);
|
||
setSaved(false);
|
||
await fetch('/api/settings', {
|
||
method: 'PATCH',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ max_concurrent_accounts: maxConcurrent, trading_hours: tradingHours, master_dashboard_url: masterUrl, instance_name: instanceName, master_backup_token: backupToken, proxy_url: proxyUrl }),
|
||
});
|
||
setSaving(false);
|
||
setSaved(true);
|
||
setTimeout(() => setSaved(false), 2000);
|
||
}
|
||
|
||
async function loadRestoreList() {
|
||
setRestoreBusy(true);
|
||
setRestoreMsg('');
|
||
try {
|
||
const res = await fetch('/api/backup/restore');
|
||
const body = await res.json();
|
||
if (!res.ok) throw new Error(body?.error ?? `HTTP ${res.status}`);
|
||
setRestoreList(body.backups ?? []);
|
||
} catch (err) {
|
||
setRestoreMsg(err instanceof Error ? err.message : String(err));
|
||
}
|
||
setRestoreBusy(false);
|
||
}
|
||
|
||
async function restoreBackup(b: BackupMeta) {
|
||
const warning =
|
||
`Restore "${b.name}" (saved ${new Date(b.savedAt).toLocaleString()})?\n\n` +
|
||
'This OVERWRITES this machine\'s settings and firm credentials and adopts ' +
|
||
'that instance\'s identity on the master.\n\n' +
|
||
'Make sure the old machine is STOPPED first — two live instances with one ' +
|
||
'identity will fight over the connection.';
|
||
if (!window.confirm(warning)) return;
|
||
setRestoreBusy(true);
|
||
setRestoreMsg('');
|
||
try {
|
||
const res = await fetch('/api/backup/restore', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ id: b.id }),
|
||
});
|
||
const body = await res.json();
|
||
if (!res.ok) throw new Error(body?.error ?? `HTTP ${res.status}`);
|
||
setRestoreMsg(
|
||
`Restored ${body.restored.settings} settings and ${body.restored.credentials} credential(s) as ` +
|
||
`"${body.adopted.name}". Restart the autotrader now (pm2 restart) to finish.`,
|
||
);
|
||
setRestoreList(null);
|
||
} catch (err) {
|
||
setRestoreMsg(err instanceof Error ? err.message : String(err));
|
||
}
|
||
setRestoreBusy(false);
|
||
}
|
||
|
||
/** >24h old backups get flagged — a dead VPS's last push may be stale. */
|
||
function isStale(savedAt: string): boolean {
|
||
return Date.now() - new Date(savedAt).getTime() > 24 * 60 * 60 * 1000;
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-slate-50 p-8">
|
||
<div className="max-w-7xl mx-auto">
|
||
|
||
<div className="flex items-center gap-3 mb-6">
|
||
<Link
|
||
href="/"
|
||
className="text-slate-400 hover:text-slate-600 text-sm transition-colors"
|
||
>
|
||
← Back
|
||
</Link>
|
||
<h1 className="text-2xl font-bold text-slate-900">Settings</h1>
|
||
</div>
|
||
|
||
{/* ── Trading ── */}
|
||
<h2 className="text-sm font-semibold uppercase tracking-wider text-slate-500 mb-3">
|
||
Trading
|
||
</h2>
|
||
<div className="bg-white border border-slate-200 rounded-xl shadow-sm mb-8">
|
||
<div className="flex items-center justify-between px-4 py-3 border-b border-slate-100">
|
||
<div>
|
||
<p className="text-sm font-medium text-slate-800">Max concurrent accounts</p>
|
||
<p className="text-xs text-slate-400 mt-0.5">
|
||
How many accounts trade in parallel per /api/trade call
|
||
</p>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
<input
|
||
type="number"
|
||
min={1}
|
||
max={500}
|
||
value={maxConcurrent}
|
||
onChange={(e) => setMaxConcurrent(e.target.value)}
|
||
className="w-20 rounded-lg border border-slate-200 bg-slate-50 px-3 py-1.5 text-sm text-right font-mono text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
/>
|
||
<button
|
||
onClick={saveSettings}
|
||
disabled={saving}
|
||
className={`text-sm px-3 py-1.5 rounded-lg font-medium transition-colors ${
|
||
saved
|
||
? 'bg-green-500 text-white'
|
||
: 'bg-blue-500 hover:bg-blue-600 text-white disabled:opacity-50'
|
||
}`}
|
||
>
|
||
{saved ? 'Saved ✓' : saving ? 'Saving…' : 'Save'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center justify-between px-4 py-3">
|
||
<div>
|
||
<p className="text-sm font-medium text-slate-800">Allowed trading hours</p>
|
||
<p className="text-xs text-slate-400 mt-0.5">
|
||
5 min buffer
|
||
</p>
|
||
</div>
|
||
<select
|
||
value={tradingHours}
|
||
onChange={(e) => setTradingHours(e.target.value)}
|
||
className="rounded-lg border border-slate-200 bg-slate-50 px-3 py-1.5 text-sm font-mono text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
>
|
||
<option value="full_cme">Full CME (5:00 PM – 3:00 PM CT)</option>
|
||
<option value="equity_hours">Equity Hours (8:30 AM – 3:00 PM CT)</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ── Master Dashboard ── */}
|
||
<h2 className="text-sm font-semibold uppercase tracking-wider text-slate-500 mb-3">
|
||
Master Dashboard
|
||
</h2>
|
||
<div className="bg-white border border-slate-200 rounded-xl shadow-sm mb-8">
|
||
<div className="flex items-center justify-between px-4 py-3 border-b border-slate-100">
|
||
<div>
|
||
<p className="text-sm font-medium text-slate-800">Instance Name</p>
|
||
<p className="text-xs text-slate-400 mt-0.5">
|
||
Identifier for this autotrader on the master dashboard.
|
||
Renaming is safe — the master tracks this machine by its
|
||
person ID{instanceId ? (
|
||
<> (<span className="font-mono">{instanceId.slice(0, 8)}</span>)</>
|
||
) : ' once it has connected'}, so history follows the new name.
|
||
</p>
|
||
</div>
|
||
<input
|
||
type="text"
|
||
placeholder="e.g. VPS-1"
|
||
value={instanceName}
|
||
onChange={(e) => setInstanceName(e.target.value)}
|
||
className="w-48 rounded-lg border border-slate-200 bg-slate-50 px-3 py-1.5 text-sm font-mono text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
<div className="flex items-center justify-between px-4 py-3">
|
||
<div>
|
||
<p className="text-sm font-medium text-slate-800">Dashboard URL</p>
|
||
<p className="text-xs text-slate-400 mt-0.5">
|
||
Reports state here every 30 seconds, and holds a control
|
||
socket open so the dashboard can trigger trades and buys
|
||
</p>
|
||
</div>
|
||
<input
|
||
type="text"
|
||
placeholder="e.g. http://master-ip:4000"
|
||
value={masterUrl}
|
||
onChange={(e) => setMasterUrl(e.target.value)}
|
||
className="w-72 rounded-lg border border-slate-200 bg-slate-50 px-3 py-1.5 text-sm font-mono text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
<div className="flex items-center justify-between px-4 py-3 border-t border-slate-100">
|
||
<div>
|
||
<p className="text-sm font-medium text-slate-800">Firm catalog</p>
|
||
<p className="text-xs text-slate-400 mt-0.5">
|
||
{catalog
|
||
? `v${catalog.version} · ${catalog.firmCount} firm${catalog.firmCount === 1 ? '' : 's'} · ${
|
||
catalog.lastSyncAt
|
||
? `last synced ${new Date(catalog.lastSyncAt).toLocaleTimeString()}`
|
||
: 'never synced'
|
||
}`
|
||
: 'Loading…'}
|
||
</p>
|
||
{catalog?.lastError && (
|
||
<p className="text-xs text-red-600 mt-0.5">{catalog.lastError}</p>
|
||
)}
|
||
</div>
|
||
<button
|
||
onClick={syncCatalogNow}
|
||
disabled={syncing}
|
||
className="text-sm px-3 py-1.5 rounded-lg font-medium bg-slate-100 hover:bg-slate-200 text-slate-700 disabled:opacity-50 transition-colors"
|
||
>
|
||
{syncing ? 'Syncing…' : 'Sync now'}
|
||
</button>
|
||
</div>
|
||
<div className="flex items-center justify-between px-4 py-3 border-t border-slate-100">
|
||
<div>
|
||
<p className="text-sm font-medium text-slate-800">Backup token</p>
|
||
<p className="text-xs text-slate-400 mt-0.5">
|
||
Backups push automatically — this token (the master's
|
||
INSTANCE_BACKUP_TOKEN) is only needed to restore one.
|
||
</p>
|
||
<p className="text-xs text-slate-400 mt-0.5">
|
||
{backupStatus.at
|
||
? `Last backed up ${new Date(backupStatus.at).toLocaleString()}`
|
||
: 'Never backed up'}
|
||
</p>
|
||
{backupStatus.error && (
|
||
<p className="text-xs text-red-600 mt-0.5">{backupStatus.error}</p>
|
||
)}
|
||
</div>
|
||
<input
|
||
type="password"
|
||
placeholder="shared token"
|
||
value={backupToken}
|
||
onChange={(e) => setBackupToken(e.target.value)}
|
||
className="w-72 rounded-lg border border-slate-200 bg-slate-50 px-3 py-1.5 text-sm font-mono text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
<div className="px-4 py-3 border-t border-slate-100">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-sm font-medium text-slate-800">Restore from master</p>
|
||
<p className="text-xs text-slate-400 mt-0.5">
|
||
Replace a dead VPS: pull its backup, overwrite this machine
|
||
and adopt its identity. Stop the old machine first.
|
||
</p>
|
||
</div>
|
||
<button
|
||
onClick={loadRestoreList}
|
||
disabled={restoreBusy}
|
||
className="text-sm px-3 py-1.5 rounded-lg font-medium bg-slate-100 hover:bg-slate-200 text-slate-700 disabled:opacity-50 transition-colors"
|
||
>
|
||
{restoreBusy ? 'Working…' : restoreList ? 'Refresh list' : 'List backups'}
|
||
</button>
|
||
</div>
|
||
{restoreMsg && (
|
||
<p className="text-xs mt-2 text-slate-600">{restoreMsg}</p>
|
||
)}
|
||
{restoreList && (
|
||
<div className="mt-3 border border-slate-200 rounded-lg divide-y divide-slate-100">
|
||
{restoreList.length === 0 ? (
|
||
<p className="px-3 py-2 text-xs text-slate-400 italic">No backups on the master yet</p>
|
||
) : restoreList.map((b) => (
|
||
<div key={b.id} className="flex items-center justify-between px-3 py-2">
|
||
<div>
|
||
<span className="text-sm font-mono text-slate-800">{b.name}</span>
|
||
<span className={`text-xs ml-2 ${isStale(b.savedAt) ? 'text-amber-600 font-semibold' : 'text-slate-400'}`}>
|
||
saved {new Date(b.savedAt).toLocaleString()}
|
||
{isStale(b.savedAt) ? ' — over a day old' : ''}
|
||
</span>
|
||
<span className="text-xs text-slate-300 ml-2 font-mono">{b.id.slice(0, 8)}</span>
|
||
</div>
|
||
<button
|
||
onClick={() => restoreBackup(b)}
|
||
disabled={restoreBusy}
|
||
className="text-sm px-3 py-1 rounded-lg font-medium bg-red-50 hover:bg-red-100 text-red-700 disabled:opacity-50 transition-colors"
|
||
>
|
||
Restore
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* ── Network ── */}
|
||
<h2 className="text-sm font-semibold uppercase tracking-wider text-slate-500 mb-3">
|
||
Network
|
||
</h2>
|
||
<div className="bg-white border border-slate-200 rounded-xl shadow-sm mb-8">
|
||
<div className="flex items-center justify-between px-4 py-3">
|
||
<div>
|
||
<p className="text-sm font-medium text-slate-800">Broker proxy</p>
|
||
<p className="text-xs text-slate-400 mt-0.5">
|
||
Routes broker traffic (TopstepX, Tradovate, quotes) through a proxy —
|
||
http://, https:// or socks5:// with optional user:pass. Use socks5h://
|
||
to resolve DNS on the proxy. The master connection stays direct.
|
||
</p>
|
||
<p className="text-xs text-amber-600 mt-0.5">
|
||
Takes effect after a restart (pm2 restart).
|
||
</p>
|
||
</div>
|
||
<input
|
||
type="text"
|
||
placeholder="e.g. socks5://user:pass@1.2.3.4:1080"
|
||
value={proxyUrl}
|
||
onChange={(e) => setProxyUrl(e.target.value)}
|
||
className="w-72 rounded-lg border border-slate-200 bg-slate-50 px-3 py-1.5 text-sm font-mono text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ── Instruments ── */}
|
||
<h2 className="text-sm font-semibold uppercase tracking-wider text-slate-500 mb-1">
|
||
Instruments
|
||
</h2>
|
||
<p className="text-xs text-slate-400 mb-3">
|
||
What each firm trades is set on the master's{' '}
|
||
{masterUrl ? <a className="text-blue-500 hover:underline" href={`${masterUrl.replace(/\/+$/, '')}/firms`} target="_blank" rel="noreferrer">Firms page</a> : 'Firms page'}.
|
||
Futures “Auto” draws one per batch: cheaper per move early in the session (every instrument gets a floor),
|
||
the fastest near the last entry, never one expected to hold 12h or more. Holds below are for a $1,000 leg.
|
||
Spreads are live off one futures client's quotes (a tick when there are none); no entry pays more than
|
||
{overview?.maxEntrySpreadDollars ? ` $${overview.maxEntrySpreadDollars}` : ' the master\'s limit'} per contract to cross the spread.
|
||
</p>
|
||
{overview?.quotes && (
|
||
<p className="text-xs mb-3 text-slate-500">
|
||
{overview.quotes.source
|
||
? <>Live quotes from <span className="font-semibold">{overview.quotes.source}</span> ({overview.quotes.platform})
|
||
{overview.quotes.lastQuoteAt ? `, last ${new Date(overview.quotes.lastQuoteAt).toLocaleTimeString()}` : ', none yet'}</>
|
||
: <span className="text-amber-700">No live quotes — spreads are the typical tick{overview.quotes.lastError ? ` (${overview.quotes.lastError})` : ''}</span>}
|
||
</p>
|
||
)}
|
||
|
||
{!overview ? (
|
||
<div className="bg-white border border-slate-200 rounded-xl px-4 py-8 text-center text-sm text-slate-400 italic shadow-sm">Loading…</div>
|
||
) : overview.firms.map((firm) => (
|
||
<div key={firm.id} className="bg-white border border-slate-200 rounded-xl overflow-hidden shadow-sm mb-3">
|
||
<div className="flex items-center gap-2 px-4 py-2.5 bg-slate-50 border-b border-slate-200">
|
||
<span className="font-semibold text-sm text-slate-800">{firm.name}</span>
|
||
<span className="text-xs text-slate-400">{firm.platform}</span>
|
||
{firm.source === 'legacy' && (
|
||
<span className="text-xs bg-amber-50 text-amber-700 border border-amber-200 rounded px-1.5 py-0.5" title="The master doesn't send instrument lists yet: this machine's enabled instruments, less the firm's banned symbols">
|
||
from this machine (older master)
|
||
</span>
|
||
)}
|
||
{firm.instruments.length === 0 && <span className="text-xs text-amber-700">no instruments — won't trade</span>}
|
||
</div>
|
||
{firm.stats ? (
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-sm border-collapse whitespace-nowrap">
|
||
<thead>
|
||
<tr className="border-b border-slate-100 text-xs uppercase tracking-wider text-slate-400">
|
||
<th className="px-4 py-2 text-left font-semibold">Symbol</th>
|
||
<th className="px-4 py-2 text-left font-semibold">Contract</th>
|
||
<th className="px-4 py-2 text-right font-semibold">Spread</th>
|
||
<th className="px-4 py-2 text-right font-semibold">Daily move</th>
|
||
<th className="px-4 py-2 text-right font-semibold">Hold</th>
|
||
<th className="px-4 py-2 text-right font-semibold">Chance now</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{firm.instruments.map((sym) => {
|
||
const x = firm.stats!.instruments.find((i) => i.symbol === sym);
|
||
const c = contracts[sym];
|
||
return (
|
||
<tr key={sym} className="border-b border-slate-100 last:border-0">
|
||
<td className="px-4 py-2 font-mono font-semibold text-slate-800">{sym}</td>
|
||
<td className="px-4 py-2 font-mono text-slate-600">
|
||
{c?.name ?? '—'}
|
||
{c?.alternative && <span className="ml-2 text-xs bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded font-sans">rolled from {c.alternative}</span>}
|
||
</td>
|
||
<td
|
||
className={`px-4 py-2 text-right tabular-nums ${x?.spreadBlocked ? 'text-amber-600' : 'text-slate-600'}`}
|
||
title="Crossing the spread on one contract — what entering costs, commissions aside. Live off the quote feed, else the typical tick"
|
||
>
|
||
{x ? `$${x.spreadDollars.toFixed(2)}` : '—'}
|
||
{x && <span className="text-xs text-slate-400"> {x.spreadLive ? 'live' : 'typical'}</span>}
|
||
{x?.spreadBlocked && ' · over limit'}
|
||
</td>
|
||
<td className="px-4 py-2 text-right tabular-nums text-slate-600">
|
||
{x?.dailyMoveDollars != null ? `$${x.dailyMoveDollars.toLocaleString()}` : '—'}
|
||
</td>
|
||
<td className={`px-4 py-2 text-right tabular-nums ${x?.disabled ? 'text-amber-600' : 'text-slate-600'}`}>
|
||
{x?.holdHours != null ? (x.holdHours < 48 ? `${x.holdHours.toFixed(1)}h` : `${(x.holdHours / 24).toFixed(1)}d`) : '—'}
|
||
{x?.disabled && ' · disabled'}
|
||
</td>
|
||
<td className="px-4 py-2 text-right tabular-nums font-semibold text-slate-700">
|
||
{x?.chance != null ? `${Math.round(x.chance * 100)}%` : '—'}
|
||
</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
) : (
|
||
<div className="flex flex-wrap gap-1.5 px-4 py-3">
|
||
{firm.instruments.map((sym) => (
|
||
<span key={sym} className="px-2 py-1 rounded-md text-xs font-mono font-semibold bg-slate-100 text-slate-700">{sym}</span>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|