henry/AITrader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: ensure dark text on job detail and job history cards (avoid white-on-light backgrounds)\n\nCo-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Browse Source
This commit is contained in:
henry
2026-05-16 15:13:38 +02:00
parent 3ed894015a
commit 329b83a17c
11 changed files with 1910 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/copilot-instructions.md
+99 -92
View File
@@ -1,116 +1,123 @@
# Copilot Instructions for AITrader
## Quick Start
This repo is a full‑stack React Router (v7) app with SSR, TypeScript, TailwindCSS, Playwright E2E tests, and optional MCP helpers. The existing AGENTS.md and workflows include helpful automation — this file consolidates the most important guidance Copilot sessions need.
This is a stock trading application built with React Router 7, TypeScript, and TailwindCSS, integrating with the Alpaca trading API.
## Build, test, and (lack of) lint commands
- Install deps: `npm install`
- Dev server (HMR): `npm run dev` (http://localhost:5173)
- Build: `npm run build` → output in `./build` (client + server)
- Serve production build: `npm start` (requires prior `npm run build`)
- Typecheck (must run before commit): `npm run typecheck` (runs `react-router typegen` then `tsc`)
### Essential Commands
- `npm install` – Install dependencies (first time only)
- `npm run dev` – Start development server at `http://localhost:5173`
- `npm run build` – Create production build in `./build`
- `npm start` – Serve production build (requires `npm run build` first)
- `npm run typecheck` – Validate TypeScript (`react-router typegen` + `tsc`) — **must run before committing**
- `npm run test:e2e` – Run Playwright end-to-end tests
Tests
- Run unit tests (Vitest): `npm run test` (runs `vitest run`)
- Watch mode: `npm run test:watch`
- Run a single Vitest file: `npx vitest run path/to/file.test.ts` or run tests by name: `npx vitest -t "test name"`
## Architecture Overview
E2E (Playwright)
- Full suite: `npm run test:e2e` (alias: `playwright test`)
- Run one spec: `npx playwright test tests/my.spec.ts`
- Run by title: `npx playwright test -g "test name"`
- HTML report: generated into `test-results/` (config in `playwright.config.ts`)
### Project Structure
```
app/
├── root.tsx # Root layout and error boundary
├── routes.ts # Route configuration (React Router 7 RouteConfig API)
├── routes/
│ ├── landing.tsx # Landing page
│ ├── home.tsx # Main application page
│ ├── stocks.tsx # Stock dashboard
│ └── api/ # Server-side API routes
│ ├── indicators.ts # Stock indicator calculations
│ └── alpaca/ # Alpaca broker integration
│ └── account.ts # Account data endpoints
├── components/ # Reusable React components
│ ├── StockViewer.tsx # Stock symbol search and indicator display
│ └── AlpacaAccountInfo.tsx # Account balance and portfolio info
├── utils/
│ ├── indicators.ts # Technical indicator logic (SMA, EMA, RSI, MACD)
│ └── __tests__/ # Unit tests via Vitest
├── types.ts # TypeScript interfaces (IndicatorData, AlpacaAccount)
└── app.css # Global styles
```
Linting
- There is no lint script in package.json. Add ESLint/Prettier if desired; current CI/workflows don't run a linter by default.
### Full-Stack Data Flow
1. **Client (React Components)** – User interacts with `StockViewer` or `AlpacaAccountInfo`
2. **Server Routes (`/routes/api/`)** – Handle business logic (fetch data from external APIs, run calculations)
3. **Utils** – Pure functions for indicators and shared logic (testable with Vitest)
4. **External APIs** – Alpaca API for account/trading data
MCP server helpers
- Dev MCP server: `npm run mcp:dev` (runs `npx tsx mcp-server/index.ts`)
- Build MCP server: `npm run mcp:build` (compiles `mcp-server` TypeScript)
### Server-Side Rendering (SSR)
- Enabled by default (`ssr: true` in `react-router.config.ts`)
- Routes can export loaders for initial data fetching
- Use `loader` functions in route definitions for data pre-loading
## High-level architecture (big picture)
- Client: React components under `app/` (routes, root.tsx, components). Routes are file-based and can export loader functions for SSR.
- Server: React Router build produces `build/server` that serves rendered routes; server-side API routes live under `app/routes/api/` and run server-only code.
- Utils: Pure functions and indicator logic in `app/utils/` (testable with Vitest).
- External integration: Alpaca trading API usage is colocated under `app/routes/api/alpaca/` and consumed by client components via `/api/*` endpoints.
- Tests: Playwright E2E tests in `tests/` use the dev server (configured in `playwright.config.ts`). Vitest unit tests configured in `vitest.config.ts` (jsdom environment, setup file `vitest.setup.ts`).
## Key Conventions
Build outputs & runtime ports
- Dev server: 5173 (vite/react-router dev)
- Production server (Docker): typically exposed on 3000
- Production build: `./build/client` (static assets) and `./build/server` (node server)
### TypeScript & Type Safety
- **Path alias** – Use `~/` for app imports (e.g., `import { IndicatorData } from "~/types"`)
- **Generated types** – React Router generates types in `.react-router/types/` after running `typecheck`
- **Route types** – Import `type { Route }` from `./+types/[routename]` for loader/action types
- **Never skip `react-router typegen`** – Directly running `tsc` will fail; always run `npm run typecheck`
- **ES Module syntax** – Project uses `"type": "module"`; include file extensions in imports where needed
## Key conventions (repo-specific)
- React Router 7 file-based routes: use `index()` only once at the same nesting level; prefer `route()` for additional segments.
- Generated route types: always run `npm run typecheck` to produce `.react-router/types/` before `tsc` or commits.
- Path alias: `~/` maps to the app root for imports (e.g., `import { Foo } from "~/components/Foo"`).
- ES Modules: package.json uses `"type": "module"` — include file extensions when Node requires them.
- Server-only code: place server-only logic under `app/routes/api/**` (these run on the server during SSR/build).
- Styling: Tailwind via Vite plugin; no separate processing step required.
### Component Patterns
- **Client-side interactivity** – Use React hooks (`useState`, `useEffect`) in components
- **API calls** – Fetch from `/api/*` endpoints; proxy configured in `vite.config.ts` routes to local dev server
- **Error handling** – Wrap API calls in try/catch; set error state for UI display
- **Loading states** – Track `loading` boolean to show spinners/disable buttons during async work
## CI / GitHub Actions
- A Copilot setup workflow exists at `.github/workflows/copilot-setup-steps.yml` — it checks out code, sets up Node 20, runs `npm ci`, and installs Playwright browsers.
### API Route Patterns
- Handlers in `app/routes/api/**/*.ts` are server-only functions
- Export a default `export default function(...)` that receives request context
- Return JSON responses or error responses
- Use utilities in `~/utils/` for shared logic (e.g., indicator calculations)
## Files important to Copilot sessions
- `AGENTS.md` — detailed quick‑start for agents (already includes many conventions). Keep synced with this file.
- `.github/workflows/copilot-setup-steps.yml` — used for CI initialization and Playwright browser installation.
- `playwright.config.ts` — webServer config (runs `npm run dev` on port 5173) and HTML reporter settings.
- `vitest.config.ts` & `vitest.setup.ts` — unit test env and globals.
### Testing
- **Unit tests** – Use Vitest (`npm run test:e2e` actually runs Playwright, but unit tests exist via `vitest`)
- Located alongside source files in `__tests__/` directories
- Test format: `*.test.ts` or `*.test.tsx`
- **E2E tests** – Playwright configured in `playwright.config.ts`
- Tests in `./tests/` directory
- Dev server starts automatically during test runs
- HTML report generated in `test-results/`
## Quick troubleshooting notes
- If `npm start` fails: confirm `npm run build` completed and `./build/server/index.js` exists.
- If TypeScript errors appear after route changes: run `npm run typecheck` to regenerate route types before `tsc`.
- Playwright tests expect the dev server; allow up to 120s for the web server to start (configurable in `playwright.config.ts`).
### Styling
- **TailwindCSS** – Configured via Vite plugin (`@tailwindcss/vite`); no separate build step needed
- **Global styles** – Edit `app/app.css`
- **Component styles** – Use Tailwind utility classes directly in JSX
---
### Import Paths
- **Absolute imports** – Use `~/` alias for app folder (e.g., `~/components/StockViewer`)
- **Relative imports** – Use `./` or `../` sparingly within same directory tree
## Playwright MCP (Model Context Protocol) configuration for Copilot
## Common Pitfalls
This repository already contains a Playwright-based MCP server at `mcp-server/index.ts`. To enable Copilot sessions to drive the web UI, follow these steps locally or in a Copilot runtime:
- **`npm start` fails if build doesn't exist** – Always run `npm run build` first
- **TypeScript compilation errors after route changes** – Missing `npm run typecheck` step; regenerated types in `.react-router/types/` are required
- **Vite proxy not working in dev** – Ensure dev server is running and API endpoints match `vite.config.ts` proxy config (default: `/api` → `http://127.0.0.1:3000`)
- **No test framework exists for unit tests** – Repository includes Vitest/Playwright dependencies but no test runner script; configure as needed
- **Port conflicts** – Dev server uses `5173`, Docker/production uses `3000`
1. Install Playwright browsers (required once):
- `npx playwright install chromium --with-deps`
2. Start the MCP server (the server exposes tools Copilot can call):
- `npm run mcp:dev` (runs `npx tsx mcp-server/index.ts`)
- The server logs "Playwright MCP Server started" to stderr when ready.
## Deployment
Available MCP tools (as implemented in `mcp-server/index.ts`):
- `navigate` — { url } → navigates and returns page title
- `getPageContent` — () → returns page body text
- `click` — { selector } → clicks element matching CSS selector
- `fillForm` — { selector, value } → fills an input
- `screenshot` — { path } → saves a screenshot at path
- `closeBrowser` — () → closes browser instance
Quick usage notes for Copilot sessions
- Ensure `npm run mcp:dev` is running in the environment where Copilot can reach stdin/stdout.
- Ensure Playwright browsers are installed and the runtime has necessary dependencies for Chromium.
- Tools accept JSON arguments and return structured content; errors are returned with `isError: true`.
Example tool call payload (navigate):
{
"name": "navigate",
"arguments": { "url": "http://localhost:5173" }
}
Additions and CI
- The existing workflow `.github/workflows/copilot-setup-steps.yml` already installs Playwright browsers in CI. If Copilot sessions run in CI runners, the MCP server can be started there too.
- If desired, a short workflow can be added to launch the MCP server for integration tests; request if you want that added.
---
Configuration completed: MCP instructions added and linked to `mcp-server/index.ts`. Want a small GitHub Action to start the MCP server for CI runs (e.g., integration test job), or should a README be added inside `mcp-server/` with the same steps?
## Indexing for GitHub Copilot / Copilot Chat
To make Copilot (and Copilot Chat) index this repository so the assistant can answer repository-specific questions, follow these steps:
- In VS Code: install the **GitHub Copilot** and **GitHub Copilot Chat** extensions and sign into GitHub using the extensions' sign-in flow.
- From a terminal you can install the extensions with:
### Docker
```bash
docker build -t aitrader .
docker run -p 3000:3000 aitrader
code --install-extension GitHub.copilot
code --install-extension GitHub.copilot-chat
```
Ensure `npm run build` is run in the Dockerfile before the final `CMD`.
### Environment Variables
- Check Dockerfile for any required environment setup
- Alpaca API credentials likely needed for trading features (not present in repo; set at runtime)
- Open the Copilot Chat view (or the Command Palette) and run the workspace indexing command: `Copilot: Index workspace` (or `Copilot Chat: Index workspace`). This will scan project files and build the local index used by Copilot Chat.
## Debugging Tips
- Exclude sensitive or large files from indexing: ensure secret files (API keys, `.env`) and large generated folders like `node_modules/`, `build/`, and `public/` are listed in `.gitignore` (or removed from the workspace) so they are not indexed. Do not commit credentials to the repo.
- **Type errors** – Run `npm run typecheck` to regenerate React Router types and validate all TS
- **Module resolution** – Check `tsconfig.json` for path aliases and ensure imports match configured paths
- **Component not rendering** – Check route configuration in `routes.ts` and ensure component is exported as default
- **API calls failing** – Verify Vite proxy config and that the target server is running
- If your organization uses GitHub Copilot Enterprise / Copilot for Business and you want repo-level indexing on GitHub (server-side index), ask an org admin to enable repository indexing/code search for Copilot in the GitHub org settings.
- After indexing completes, verify by asking Copilot Chat repository-specific questions (for example: "Where is the landing page route?" or "Show the `AlpacaAccountInfo` component"). The Copilot Chat UI also shows indexing status and recent index actions.
If you want, I can add a short `docs/README-indexing.md` with these steps or tighten the `copilot-instructions.md` wording further.