From 7f8270a048afd70521a18dec0bd4dcd958973887 Mon Sep 17 00:00:00 2001 From: Klesti Selimaj Date: Tue, 8 Sep 2026 02:38:46 +0200 Subject: [PATCH] Replace threshold placeholder link with a real settings panel Adds a "Loss thresholds" panel to the popup backed by the backend's new GET/PATCH /me/settings endpoints, converting between the wire's fractional percentages and whole-number form inputs only at that boundary. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01RTorFQXMR9ZQtCKcMTXLHp --- CLAUDE.md | 3 +- src/background/settings-client.ts | 31 +++++ src/entrypoints/background.ts | 15 ++- src/entrypoints/popup/App.tsx | 205 ++++++++++++++++++++++++++++-- src/entrypoints/popup/style.css | 62 ++++++++- src/shared/messaging.ts | 11 +- src/shared/types.ts | 25 ++++ 7 files changed, 335 insertions(+), 17 deletions(-) create mode 100644 src/background/settings-client.ts diff --git a/CLAUDE.md b/CLAUDE.md index 620a57f..dc9d258 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -93,6 +93,7 @@ Note the naming mismatch with the wire protocol below: the frontend's internal ` - `src/background/wallet-auth.ts` — `handleWalletConnected()` runs the REST auth flow (`POST /auth/nonce` → Phantom signature → `POST /auth/verify` → session token) once a content script reports a connected wallet. Also `requestWalletReconnect()` (silent reconnect after the backend invalidates a session), `requestWalletDisconnect()` (sign-out), `requestAccountSwitch()` (explicit account switch) — all three just message whichever tabs are on a supported site; `wallet-connect.ts` in the content script does the actual work. - `src/background/ws-client.ts` — the WS client described above: connects to `/ws?token=...`. `connectWsClient()` returns a controller with `reconnectNow()` so the background script can short-circuit the backoff wait right after a fresh token arrives. Auth failures (`4001` close, `auth_expired`/`session_revoked` errors) do **not** auto-retry with backoff — they call `onAuthExpired()` instead, since retrying with a known-bad token can't succeed; only real disconnects (network drop, backgrounded browser) use the protocol's suggested backoff schedule. - `src/background/connection-status.ts` — separate from lock state; the popup surfaces this (connecting/connected/disconnected/auth-error) alongside the lock state so a broken connection isn't silently indistinguishable from "unlocked". +- `src/background/settings-client.ts` — `GET`/`PATCH /me/settings` (per-user loss-detection thresholds; see backend/CLAUDE.md, "Account settings"), same direct-fetch-with-bearer-token shape as `wallet-auth.ts`. Popup -> background dispatch is `nexa:get-settings`/`nexa:update-settings` in `background.ts`, responses shaped `{ settings } | { error }` (`SettingsResult` in `shared/messaging.ts`). The popup's "Loss thresholds" panel (`entrypoints/popup/App.tsx`) is the only place percent fields (`near_full_exit_fraction` and both loss thresholds) get converted between the backend's fractional wire representation and the whole-number percentages shown in the form — same "convert only at the seam" rule as `LockScope`'s kebab/snake split below. ### Wallet auth (Phantom) — implemented @@ -183,5 +184,5 @@ Single source of truth for the wire protocol between the Nexa backend (Rust/Axum - No cost-basis tracking logic (backend concern). - No full-site-block implementation beyond a stub module. -- No threshold-setting UI (placeholder link only). +- ~~No threshold-setting UI (placeholder link only)~~ — implemented, see "Backend connection" above. - Only the axiom.trade adapter needs to be functional; the architecture just needs to make adding more sites trivial. diff --git a/src/background/settings-client.ts b/src/background/settings-client.ts new file mode 100644 index 0000000..32034b6 --- /dev/null +++ b/src/background/settings-client.ts @@ -0,0 +1,31 @@ +import { BACKEND_HTTP_URL } from '@/shared/config'; +import type { ThresholdSettings } from '@/shared/types'; +import { getSessionToken } from './backend-client'; + +/** + * `GET`/`PATCH /me/settings` — same direct-fetch-with-bearer-token shape as + * wallet-auth.ts's REST calls. Throws on any failure (network, auth, or a + * validation rejection from the backend); callers decide how to surface that. + */ +export async function getSettings(): Promise { + const token = await getSessionToken(); + const res = await fetch(`${BACKEND_HTTP_URL}/me/settings`, { + headers: { authorization: `Bearer ${token}` }, + }); + if (!res.ok) throw new Error(`get settings failed: ${res.status}`); + return (await res.json()) as ThresholdSettings; +} + +export async function updateSettings(patch: Partial): Promise { + const token = await getSessionToken(); + const res = await fetch(`${BACKEND_HTTP_URL}/me/settings`, { + method: 'PATCH', + headers: { authorization: `Bearer ${token}`, 'content-type': 'application/json' }, + body: JSON.stringify(patch), + }); + if (!res.ok) { + const message = await res.text().catch(() => ''); + throw new Error(message || `update settings failed: ${res.status}`); + } + return (await res.json()) as ThresholdSettings; +} diff --git a/src/entrypoints/background.ts b/src/entrypoints/background.ts index 9b3eb8a..624d4d1 100644 --- a/src/entrypoints/background.ts +++ b/src/entrypoints/background.ts @@ -7,8 +7,9 @@ import { requestWalletDisconnect, requestWalletReconnect, } from '@/background/wallet-auth'; +import { getSettings, updateSettings } from '@/background/settings-client'; import { connectWsClient } from '@/background/ws-client'; -import type { NexaMessage } from '@/shared/messaging'; +import type { NexaMessage, SettingsResult } from '@/shared/messaging'; export default defineBackground(() => { const ws = connectWsClient({ @@ -71,6 +72,18 @@ export default defineBackground(() => { void requestAccountSwitch(); return false; + case 'nexa:get-settings': + getSettings() + .then((settings) => sendResponse({ settings } satisfies SettingsResult)) + .catch((err) => sendResponse({ error: String(err) } satisfies SettingsResult)); + return true; // keep the message channel open for the async response + + case 'nexa:update-settings': + updateSettings(message.settings) + .then((settings) => sendResponse({ settings } satisfies SettingsResult)) + .catch((err) => sendResponse({ error: String(err) } satisfies SettingsResult)); + return true; + default: return undefined; } diff --git a/src/entrypoints/popup/App.tsx b/src/entrypoints/popup/App.tsx index e20586a..e04d6f9 100644 --- a/src/entrypoints/popup/App.tsx +++ b/src/entrypoints/popup/App.tsx @@ -1,7 +1,14 @@ import { useEffect, useState } from 'react'; import { browser } from 'wxt/browser'; -import { DEFAULT_CONNECTION_STATUS, DEFAULT_LOCK_STATE, type ConnectionStatus, type LockState } from '@/shared/types'; -import type { NexaMessage } from '@/shared/messaging'; +import { + DEFAULT_CONNECTION_STATUS, + DEFAULT_LOCK_STATE, + DEFAULT_THRESHOLD_SETTINGS, + type ConnectionStatus, + type LockState, + type ThresholdSettings, +} from '@/shared/types'; +import type { NexaMessage, SettingsResult } from '@/shared/messaging'; const CONNECTION_LABELS: Record = { connecting: 'Connecting…', @@ -78,13 +85,193 @@ export function App() { )} - - Adjust loss thresholds → - + ); } + +/** + * Percent-shaped fields (`near_full_exit_fraction`, both loss thresholds) are + * edited here as whole numbers (e.g. "30") and converted to/from the + * backend's fractional wire representation only at this boundary — same + * "convert only at the seam" rule already applied to LockScope's kebab/snake + * case split (see ../../CLAUDE.md). + */ +type ThresholdForm = { + exitPercent: string; + windowHours: string; + streakLength: string; + singleLossPercent: string; + streakLossPercent: string; + cooldownMinutes: string; +}; + +function toForm(settings: ThresholdSettings): ThresholdForm { + return { + exitPercent: String(Math.round(settings.near_full_exit_fraction * 100)), + windowHours: String(settings.loss_window_hours), + streakLength: String(settings.streak_length), + singleLossPercent: String(Math.round(-settings.single_trade_loss_threshold * 100)), + streakLossPercent: String(Math.round(-settings.streak_sum_loss_threshold * 100)), + cooldownMinutes: String(settings.cooldown_minutes), + }; +} + +function fromForm(form: ThresholdForm): Partial { + return { + near_full_exit_fraction: Number(form.exitPercent) / 100, + loss_window_hours: Number(form.windowHours), + streak_length: Number(form.streakLength), + single_trade_loss_threshold: -Number(form.singleLossPercent) / 100, + streak_sum_loss_threshold: -Number(form.streakLossPercent) / 100, + cooldown_minutes: Number(form.cooldownMinutes), + }; +} + +function ThresholdsPanel() { + const [expanded, setExpanded] = useState(false); + const [form, setForm] = useState(() => toForm(DEFAULT_THRESHOLD_SETTINGS)); + const [status, setStatus] = useState<'idle' | 'loading' | 'saving'>('idle'); + const [error, setError] = useState(undefined); + + function expand(): void { + setExpanded(true); + if (status !== 'idle') return; + setStatus('loading'); + setError(undefined); + browser.runtime + .sendMessage({ type: 'nexa:get-settings' } satisfies NexaMessage) + .then((result: SettingsResult | undefined) => { + if (result && 'settings' in result) { + setForm(toForm(result.settings)); + setStatus('idle'); + } else { + setError(result?.error ?? 'Failed to load settings.'); + setStatus('idle'); + } + }); + } + + function field(key: keyof ThresholdForm, value: string): void { + setForm((prev) => ({ ...prev, [key]: value })); + } + + function save(): void { + setStatus('saving'); + setError(undefined); + browser.runtime + .sendMessage({ type: 'nexa:update-settings', settings: fromForm(form) } satisfies NexaMessage) + .then((result: SettingsResult | undefined) => { + setStatus('idle'); + if (result && 'settings' in result) { + setForm(toForm(result.settings)); + } else { + setError(result?.error ?? 'Failed to save settings.'); + } + }); + } + + if (!expanded) { + return ( + + ); + } + + return ( +
+

Loss thresholds

+ + + + + + + + + + + + + + {error &&

{error}

} + + +
+ ); +} diff --git a/src/entrypoints/popup/style.css b/src/entrypoints/popup/style.css index d381bde..d7dba78 100644 --- a/src/entrypoints/popup/style.css +++ b/src/entrypoints/popup/style.css @@ -100,11 +100,65 @@ header .subtitle { background: rgba(128, 128, 128, 0.12); } -.thresholds-link { +.thresholds-toggle { display: block; + width: 100%; margin-top: 14px; + padding: 0; + border: none; + background: none; color: inherit; - opacity: 0.5; - text-decoration: none; - pointer-events: none; + opacity: 0.75; + font: inherit; + text-align: left; + cursor: pointer; +} + +.thresholds-toggle:hover { + opacity: 1; +} + +.thresholds-panel { + margin-top: 14px; + padding-top: 12px; + border-top: 1px solid rgba(128, 128, 128, 0.25); +} + +.thresholds-panel h2 { + margin: 0 0 8px; + font-size: 13px; +} + +.thresholds-panel label { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + margin-bottom: 8px; + font-size: 12px; + opacity: 0.85; +} + +.threshold-input { + display: flex; + align-items: center; + gap: 4px; + flex-shrink: 0; +} + +.threshold-input input { + width: 48px; + padding: 3px 5px; + border: 1px solid rgba(128, 128, 128, 0.4); + border-radius: 4px; + background: transparent; + color: inherit; + font: inherit; + text-align: right; +} + +.thresholds-error { + margin: 4px 0 8px; + color: #dc2626; + font-size: 12px; } diff --git a/src/shared/messaging.ts b/src/shared/messaging.ts index 90e19d1..eb55bc5 100644 --- a/src/shared/messaging.ts +++ b/src/shared/messaging.ts @@ -1,4 +1,4 @@ -import type { ConnectionStatus, LockState } from './types'; +import type { ConnectionStatus, LockState, ThresholdSettings } from './types'; /** browser.storage.local key backing the lock state seam in the background script. */ export const LOCK_STATE_STORAGE_KEY = 'nexa:lockState'; @@ -28,7 +28,14 @@ export type NexaMessage = | { type: 'nexa:switch-account-request' } // Sign-out / switch account (popup -> background). See entrypoints/popup/App.tsx. | { type: 'nexa:sign-out' } - | { type: 'nexa:switch-account' }; + | { type: 'nexa:switch-account' } + // Loss-threshold settings (popup -> background -> GET/PATCH /me/settings). + // See background/settings-client.ts and entrypoints/popup/App.tsx. + | { type: 'nexa:get-settings' } + | { type: 'nexa:update-settings'; settings: Partial }; + +/** Response shape for 'nexa:get-settings'/'nexa:update-settings', returned via sendResponse. */ +export type SettingsResult = { settings: ThresholdSettings } | { error: string }; /** Response shape for 'nexa:wallet-sign-request', returned via sendResponse (not a dispatched NexaMessage). */ export type WalletSignResult = { signature: string } | { error: string }; diff --git a/src/shared/types.ts b/src/shared/types.ts index 6f6ca52..78566b5 100644 --- a/src/shared/types.ts +++ b/src/shared/types.ts @@ -17,3 +17,28 @@ export const DEFAULT_LOCK_STATE: LockState = { export type ConnectionStatus = 'connecting' | 'connected' | 'disconnected' | 'auth-error'; export const DEFAULT_CONNECTION_STATUS: ConnectionStatus = 'connecting'; + +/** + * Per-user loss-detection thresholds — mirrors the backend's + * `settings::Settings` field-for-field (wire is snake_case throughout, see + * backend/CLAUDE.md, "Relationship to the frontend"). Fetched/updated via + * `GET`/`PATCH /me/settings`, see background/settings-client.ts. + */ +export interface ThresholdSettings { + near_full_exit_fraction: number; + loss_window_hours: number; + streak_length: number; + single_trade_loss_threshold: number; + streak_sum_loss_threshold: number; + cooldown_minutes: number; +} + +/** Mirrors the backend's `Settings::default()` — shown before the real values load. */ +export const DEFAULT_THRESHOLD_SETTINGS: ThresholdSettings = { + near_full_exit_fraction: 0.95, + loss_window_hours: 24, + streak_length: 3, + single_trade_loss_threshold: -0.3, + streak_sum_loss_threshold: -0.5, + cooldown_minutes: 30, +};