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 <[email protected]> Claude-Session: https://claude.ai/code/session_01RTorFQXMR9ZQtCKcMTXLHp
2026-09-08 02:38:46 +02:00
parent ac421196e9
commit 7f8270a048
7 changed files with 335 additions and 17 deletions
@@ -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<ThresholdSettings> {
+  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<ThresholdSettings>): Promise<ThresholdSettings> {
+  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;
+}
@@ -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;
    }
@@ -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<ConnectionStatus, string> = {
  connecting: 'Connecting…',
@@ -78,13 +85,193 @@ export function App() {
        </div>
      )}

-      <a
-        className="thresholds-link"
-        href="#"
-        title="Threshold settings are not part of this milestone"
-      >
-        Adjust loss thresholds →
-      </a>
+      <ThresholdsPanel />
    </>
  );
 }
+
+/**
+ * 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<ThresholdSettings> {
+  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<ThresholdForm>(() => toForm(DEFAULT_THRESHOLD_SETTINGS));
+  const [status, setStatus] = useState<'idle' | 'loading' | 'saving'>('idle');
+  const [error, setError] = useState<string | undefined>(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 (
+      <button type="button" className="thresholds-toggle" onClick={expand}>
+        Adjust loss thresholds →
+      </button>
+    );
+  }
+
+  return (
+    <section className="thresholds-panel">
+      <h2>Loss thresholds</h2>
+
+      <label>
+        Exit counts as "full" at
+        <div className="threshold-input">
+          <input
+            type="number"
+            min={1}
+            max={100}
+            value={form.exitPercent}
+            onChange={(e) => field('exitPercent', e.target.value)}
+          />
+          %
+        </div>
+      </label>
+
+      <label>
+        Streak window
+        <div className="threshold-input">
+          <input
+            type="number"
+            min={1}
+            max={168}
+            value={form.windowHours}
+            onChange={(e) => field('windowHours', e.target.value)}
+          />
+          hours
+        </div>
+      </label>
+
+      <label>
+        Streak length
+        <div className="threshold-input">
+          <input
+            type="number"
+            min={1}
+            max={20}
+            value={form.streakLength}
+            onChange={(e) => field('streakLength', e.target.value)}
+          />
+          trades
+        </div>
+      </label>
+
+      <label>
+        Single-trade loss locks at
+        <div className="threshold-input">
+          <input
+            type="number"
+            min={1}
+            max={100}
+            value={form.singleLossPercent}
+            onChange={(e) => field('singleLossPercent', e.target.value)}
+          />
+          %
+        </div>
+      </label>
+
+      <label>
+        Streak cumulative loss locks at
+        <div className="threshold-input">
+          <input
+            type="number"
+            min={1}
+            max={100}
+            value={form.streakLossPercent}
+            onChange={(e) => field('streakLossPercent', e.target.value)}
+          />
+          %
+        </div>
+      </label>
+
+      <label>
+        Auto-unlock after
+        <div className="threshold-input">
+          <input
+            type="number"
+            min={1}
+            max={1440}
+            value={form.cooldownMinutes}
+            onChange={(e) => field('cooldownMinutes', e.target.value)}
+          />
+          minutes
+        </div>
+      </label>
+
+      {error && <p className="thresholds-error">{error}</p>}
+
+      <button type="button" className="sign-out-button" onClick={save} disabled={status === 'saving'}>
+        {status === 'saving' ? 'Saving…' : 'Save'}
+      </button>
+    </section>
+  );
+}
@@ -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;
 }
@@ -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<ThresholdSettings> };
+
+/** 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 };
@@ -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,
+};