workspace/data/tasks/dashboard-nav-reorganize.md

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

{
  "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