Skip to content

FATBot Dashboard

Overview

Web-based control center for the FATBot trading system. Currently a static UI shell reading mock JSON data, planned for React TypeScript migration and live MCP integration.

Location: fatbot/dashboard/ Server: node dashboard/server.js → http://localhost:8000 Dependencies: None (vanilla HTML/CSS/JS)

Layout

┌─────────────────────────────────────────────────┐
│  HEADER: FATBot Logo + Connection Status        │
├─────────────────────────────────────────────────┤
│  TICKER STRIP: Symbol, Price, 24h Change       │
├─────────────────────────────────────────────────┤
│  STRATEGY BANNER                                │
│  Direction (LONG/SHORT) | Entry | Stop | Target │
│  Setup title | Risk:Reward                      │
├──────────────┬──────────────┬───────────────────┤
│ LEFT SIDEBAR │ MAIN AREA    │ RIGHT SIDEBAR     │
│ • Watchlist  │ • Chart      │ • Order Blocks    │
│ • Orders     │ • Indicators │ • Levels & SMT    │
│ • Positions  │              │ • ATR Sizing      │
│ • History    │              │                   │
└──────────────┴──────────────┴───────────────────┘

Files

File Purpose
index.html Full UI (~1050 lines: CSS + HTML + JS)
server.js Static file server with path traversal protection
mock-mcp.json Chart data: bias, session, strategy, OBs, SMT, ATR
mock-db.json Trade data: watchlist, orders, positions, history
manifest.json PWA manifest (installable)
logo.svg FATBot logo (gold diamond + lightning bolt)
material-icons.woff2 Icon font

Theme

Dark mode with CSS custom properties: - Background: #0e0e13 → #22222c (elevation layers) - Text: #fafafa (primary), #a1a1aa (secondary) - Accent: #f59e0b (gold) - Bull: #22c55e / Bear: #ef4444 - Fonts: Inter (UI), JetBrains Mono (numbers)

Data Sources (Current: Mock)

mock-mcp.json — What would come from MCP tools: 

{
  "symbol": "CME_MINI:NQ1!",
  "timeframe": "5",
  "bias": { "daily": "bearish", "pdh": 20598.75, ... },
  "session": { "high": 20512.50, "huntSide": "HUNT_HIGH", ... },
  "strategy": { "direction": "short", "entry": 20501.75, ... },
  "orderBlocks": [{ "dir": "BEAR", "high": 20505.50, ... }],
  "smt": { "bearCount": 2, "labels": [...] },
  "atr": { "points": 34.50, "positionSize": 12 }
}

Migration Path

  1. Extract CSS into separate file
  2. Extract JS into modules
  3. Convert to React TypeScript components
  4. Replace mock fetch with live MCP WebSocket/polling
  5. Add state management for real-time updates