# Task: CoinEx Dashboard — Unified Navigation & Settings Consolidation

**Priority:** HIGH  
**Assigned:** Glitch → Hawk → Jinx + Pixel  
**Status:** Spec  
**Date:** 2026-03-01  

## Overview

Reorganize the CoinEx Dashboard with a consistent nav bar across all pages and consolidate all settings into one centralized Settings page. Settings flow downstream: Scanner uses them for signal calculation, Trader bot uses them for trade execution.

## Navigation Bar

Every page gets the same persistent nav bar at the top:

```
┌─────────────────────────────────────────────────────────────┐
│  ⚡ CoinEx Platform   [Home] [Trader] [Settings] [Logs] [Status]  │
└─────────────────────────────────────────────────────────────┘
```

- **Home** (`/`) — Futures scanner grid (existing)
- **Trader** (`/trader`) — Trader control panel (existing, minus config tab)
- **Settings** (`/settings`) — NEW: all configuration in one place
- **Logs** (`/logs`) — Unified audit log (existing)
- **Status** (`/status`) — System status (existing)

Active page is highlighted. Nav is a shared component used by all pages.

### Implementation
- Create `components/NavBar.tsx` — shared nav component
- Use `usePathname()` from `next/navigation` for active state
- Replace the ad-hoc headers on each page with `<NavBar />`
- Remove the back arrows (← ) since nav handles navigation now
- Remove inline "Trader Control" and "Audit Log" links from home page header

## Settings Page (`/settings`)

### Single Source of Truth
All settings stored in one config file: `trader_config.json` at  
`/home/wdjones/.openclaw/workspace/projects/crypto-signals/data/coinex-live/trader_config.json`

The scanner reads thresholds and coin list from this config too — no more hardcoded values in `scanner.ts`.

### Settings Sections

**1. Signal Configuration**
These control how the homepage scanner calculates and displays signals:
- Long signal threshold (currently hardcoded 45 in scanner.ts)
- Short signal threshold (currently hardcoded 50 in scanner.ts)
- Coin watchlist (currently hardcoded COINS array in scanner.ts) — add/remove coins with search
- Scan interval (currently 30s in scanner.ts)

**2. Trading Configuration**
These control how the trader bot operates:
- Mode: LIVE / DRY-RUN / PAUSED
- Position size % (default 5%)
- Max concurrent positions (default 3)
- Max leverage cap (default 10x)
- Leverage tiers (score-based, e.g. ≥45→5x, ≥60→7x)
- TP % / SL %
- Trailing stop %
- Circuit breaker failure count (default 3)
- Kill switch drawdown % (default 50%)

**3. Coin Blacklist / Whitelist**
- Which coins can be traded (separate from which coins are scanned)
- Toggle individual coins on/off for trading

**4. CoinEx API Connection**
- Move the existing Settings modal content here (API credentials, connection test)

### Config File Schema Update
```json
{
  "mode": "paused",
  "scan_interval_seconds": 30,
  "long_threshold": 45,
  "short_threshold": 50,
  "coin_watchlist": ["BTCUSDT", "ETHUSDT", ...],
  "position_size_pct": 5.0,
  "max_positions": 3,
  "max_leverage": 10,
  "leverage_tiers": [
    {"min_score": 45, "leverage": 5},
    {"min_score": 60, "leverage": 7}
  ],
  "kill_switch_drawdown_pct": 50,
  "tp_pct": 5.0,
  "sl_pct": -3.0,
  "trailing_stop_pct": 2.0,
  "circuit_breaker_threshold": 3,
  "coin_blacklist": [],
  "coin_whitelist": [],
  "coinex_access_id": "",
  "coinex_secret_key": "",
  "last_updated": "..."
}
```

### Backend Changes

**Scanner (`lib/server/scanner.ts`):**
- Remove hardcoded `COINS` array — read `coin_watchlist` from config
- Remove hardcoded `LONG_THRESHOLD` / `SHORT_THRESHOLD` — read from config
- Read config at start of each scan cycle (hot reload)
- Add config reading utility (same `trader_config.json` file)

**API route (`/api/trader/config`):**
- Already exists — reuse for all settings reads/writes
- Add `scan_interval_seconds` and `coin_watchlist` to validation

**Home page (`app/page.tsx`):**
- Remove hardcoded `LONG_THRESHOLD` / `SHORT_THRESHOLD` constants
- Read thresholds from config via WebSocket data (scanner sends them)
- Or fetch from `/api/trader/config` on mount

**Trader page (`app/trader/page.tsx`):**
- Remove the "Configuration" tab entirely — it lives in Settings now
- Keep: Overview, Positions, Activity Logs tabs
- Overview still shows a summary of current settings (read-only)

**Settings Modal (`components/SettingsModal.tsx`):**
- Remove or deprecate — functionality moves to Settings page

## Page Changes Summary

| Page | Add | Remove |
|------|-----|--------|
| All pages | `<NavBar />` component | Ad-hoc headers, back arrows |
| Home (`/`) | — | Inline nav links, hardcoded thresholds |
| Trader (`/trader`) | — | Configuration tab (moves to Settings) |
| Settings (`/settings`) | NEW: all config UI | — |
| Logs (`/logs`) | — | Back arrow |
| Status (`/status`) | — | Back arrow |

## Files to Modify
- `components/NavBar.tsx` — NEW shared nav
- `app/page.tsx` — replace header, read thresholds from config
- `app/trader/page.tsx` — remove config tab, replace header
- `app/settings/page.tsx` — NEW settings page
- `app/logs/page.tsx` — replace header
- `app/status/page.tsx` — replace header
- `app/layout.tsx` — possibly add NavBar here instead of per-page
- `lib/server/scanner.ts` — read config instead of hardcoded values
- `app/api/trader/config/route.ts` — extend validation for new fields
- `lib/types.ts` — extend TraderConfig type

## Constraints
- All existing scoring logic in `lib/indicators.ts` PRESERVED EXACTLY
- Dark theme, monospace aesthetic
- Zero client-side CoinEx API calls
- Use `api.binance.us` not `api.binance.com`
- Standard stack: Next.js 16 + Tailwind v4 + Framer Motion + ShadCN + Lucide + TS
- Context7 mandatory for library docs
- Include unit tests for new components
- Must pass build (`npm run build`) before submitting

## QA Pipeline
1. **Glitch builds** — implements all changes
2. **Hawk reviews** — code review + verifies tests pass
3. **Jinx E2E** — functional testing: nav works on all pages, settings save/load, scanner reads config, trader reads config
4. **Pixel visual** — consistent nav styling, responsive, dark theme, no layout breaks

## Definition of Done
- [ ] NavBar component renders on all 5 pages with correct active state
- [ ] Settings page has all 4 sections with working save/load
- [ ] Scanner reads thresholds + coin list from config (no hardcoded values)
- [ ] Trader page config tab removed (settings are in /settings)
- [ ] All pages use consistent header via NavBar
- [ ] Changing thresholds in Settings affects scanner behavior on next cycle
- [ ] Build passes
- [ ] Unit tests for NavBar and Settings page
- [ ] Hawk PASS
- [ ] Jinx PASS
- [ ] Pixel PASS