Environment:HKUDS AI Trader Browser Runtime

Knowledge Sources	AI-Trader
Domains	Frontend, Browser, JavaScript
Last Updated	2026-02-09 14:00 GMT

Overview

Browser runtime environment for the AI Trader web dashboard frontend, requiring a modern web browser with ES6+ JavaScript support, Chart.js, and js-yaml.

Description

This environment provides the client-side runtime for the AI Trader web dashboard. The dashboard is a static site served from the docs/ directory (GitHub Pages compatible) that displays agent trading performance, portfolio breakdowns, and transaction histories. It relies on vanilla JavaScript (no framework), Chart.js for visualization, js-yaml for configuration parsing, and browser localStorage for caching.

Usage

Use this environment for all frontend dashboard components including asset charts, portfolio pages, transaction displays, configuration loading, data loading, and cache management.

System Requirements

Category	Requirement	Notes
Browser	Modern browser with ES6+ support	Chrome 80+, Firefox 78+, Safari 14+, Edge 80+
JavaScript	ES6+ (async/await, Promises, template literals)	No transpilation needed for modern browsers
Network	Access to CDN for Chart.js	Or self-hosted Chart.js bundle
Storage	localStorage available	Used by CacheManager for data caching

Dependencies

External Libraries (CDN)

Chart.js v3+ - charting library for portfolio value visualization
js-yaml - YAML parser for config.yaml loading

Internal Modules

config-loader.js - Loads and parses docs/config.yaml
cache-manager.js - localStorage caching with version control
data-loader.js - Fetches and transforms agent trading data
asset-chart.js - Main portfolio value chart
portfolio.js - Per-agent portfolio breakdown view
transaction-loader.js - Transaction feed and leaderboard

Code Evidence

Script loading order from docs/index.html:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-yaml/dist/js-yaml.min.js"></script>
<script src="assets/js/config-loader.js"></script>
<script src="assets/js/cache-manager.js"></script>
<script src="assets/js/data-loader.js"></script>
<script src="assets/js/asset-chart.js"></script>

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment