Brandon LiandClaude Opus 5
25289cb9b3
Three changes that ride together because they touch the same surface. A control link to the master. lib/master-link.ts dials out to <master>/ws/instance and holds it open, so the dashboard can trigger a trade or queue an AutoBuyer run here. Commands call the same functions the local pages call — runTrade, startScheduler, queueRun — so nothing reaches the broker by a path the UI does not also use. Reports prefer the socket and fall back to the existing POST, which keeps older masters working unchanged. startMasterLink is idempotent, and that matters more than it looks: getClients() is lazy and starts the link, so the first command re-enters it from inside a command the live socket is waiting to ack. Tearing the socket down there loses the ack and reports a trade that actually executed as a failure — which invites pressing the button twice. queueRun is lifted out of the automations route so the socket and HTTP share one copy of the input clamping that decides how many times a purchase fires. Page capture loses its switch and gains a scope. It now runs every tick, but only against the active tab of the last-focused window that matches host_permissions — so it follows the page in front of you and stops when you switch away, where before it would fall back to any firm tab left open in the background. autobuyer_enabled is gone entirely. The AutoBuyer is ready whenever the runner is; a run happens because someone asked for one. That does mean a queued run executes as soon as clicker/runner.py claims it, with no second gate — stopping the runner is now the way to make a machine idle. Extension to 0.10.0; it needs a manual reload at chrome://extensions. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
285 lines
14 KiB
TypeScript
285 lines
14 KiB
TypeScript
'use client';
|
||
|
||
import { useEffect, useState } from 'react';
|
||
import Link from 'next/link';
|
||
|
||
interface Instrument {
|
||
symbol: string;
|
||
enabled: boolean;
|
||
}
|
||
|
||
interface ResolvedContract {
|
||
name: string;
|
||
alternative?: string;
|
||
}
|
||
|
||
interface AppSettings {
|
||
max_concurrent_accounts: string | null;
|
||
master_dashboard_url: string | null;
|
||
instance_name: string | null;
|
||
trading_hours: string | null;
|
||
}
|
||
|
||
export default function SettingsPage() {
|
||
const [instruments, setInstruments] = useState<Instrument[]>([]);
|
||
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 [instanceName, setInstanceName] = useState<string>('');
|
||
const [saving, setSaving] = useState(false);
|
||
const [saved, setSaved] = useState(false);
|
||
|
||
useEffect(() => {
|
||
fetch('/api/instruments')
|
||
.then((r) => r.json())
|
||
.then(setInstruments);
|
||
|
||
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);
|
||
}
|
||
});
|
||
|
||
// 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 toggle(symbol: string, enabled: boolean) {
|
||
setInstruments((prev) =>
|
||
prev.map((i) => (i.symbol === symbol ? { ...i, enabled } : i))
|
||
);
|
||
await fetch(`/api/instruments/${symbol}`, {
|
||
method: 'PATCH',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ enabled }),
|
||
});
|
||
|
||
// When enabling a symbol, auto-resolve its active contract
|
||
if (enabled) {
|
||
fetch('/api/instruments/contracts', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ symbols: [symbol] }),
|
||
})
|
||
.then((r) => r.json())
|
||
.then((fresh: Record<string, ResolvedContract | null>) => {
|
||
if (!fresh.error) {
|
||
setContracts((prev) => ({ ...prev, ...fresh }));
|
||
}
|
||
})
|
||
.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 }),
|
||
});
|
||
setSaving(false);
|
||
setSaved(true);
|
||
setTimeout(() => setSaved(false), 2000);
|
||
}
|
||
|
||
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
|
||
</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>
|
||
|
||
{/* ── Instruments ── */}
|
||
<h2 className="text-sm font-semibold uppercase tracking-wider text-slate-500 mb-3">
|
||
Instruments
|
||
</h2>
|
||
|
||
<div className="bg-white border border-slate-200 rounded-xl overflow-hidden shadow-sm">
|
||
{instruments.length === 0 ? (
|
||
<div className="px-4 py-8 text-center text-sm text-slate-400 italic">
|
||
Loading…
|
||
</div>
|
||
) : (
|
||
<table className="w-full text-sm border-collapse">
|
||
<thead>
|
||
<tr className="border-b border-slate-200 bg-slate-50">
|
||
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-400">Symbol</th>
|
||
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-400">Active Contract</th>
|
||
<th className="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-400">Enabled</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{instruments.map((instr) => {
|
||
const c = contracts[instr.symbol];
|
||
const wasRolled = !!c?.alternative;
|
||
return (
|
||
<tr key={instr.symbol} className="border-b border-slate-100 last:border-0">
|
||
<td className="px-4 py-2.5 font-mono font-semibold text-slate-800">
|
||
{instr.symbol}
|
||
</td>
|
||
<td className="px-4 py-2.5">
|
||
{instr.enabled && c ? (
|
||
<div className="flex items-center gap-2">
|
||
<span className={`font-mono text-sm ${wasRolled ? 'text-amber-600 font-semibold' : 'text-slate-600'}`}>
|
||
{c.name}
|
||
</span>
|
||
{wasRolled && (
|
||
<span className="text-xs bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded font-medium">
|
||
rolled from {c.alternative}
|
||
</span>
|
||
)}
|
||
</div>
|
||
) : null}
|
||
</td>
|
||
<td className="px-4 py-2.5 text-right">
|
||
<button
|
||
onClick={() => toggle(instr.symbol, !instr.enabled)}
|
||
className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none ${
|
||
instr.enabled ? 'bg-blue-500' : 'bg-slate-200'
|
||
}`}
|
||
>
|
||
<span
|
||
className={`inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow transition-transform ${
|
||
instr.enabled ? 'translate-x-4' : 'translate-x-1'
|
||
}`}
|
||
/>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|