Files
aitbc/apps/marketplace-web
oib 7062b2cc78 feat: add dark mode, navigation, and Web Vitals tracking to marketplace
Backend:
- Simplify DatabaseConfig: remove effective_url property and project root finder
- Update to Pydantic v2 model_config (replace nested Config class)
- Add web_vitals router to main.py and __init__.py
- Fix ExplorerService datetime handling (ensure timezone-naive comparisons)
- Fix status_label extraction to handle both enum and string job states

Frontend (Marketplace):
- Add dark mode toggle with system preference detection
2026-02-15 19:02:51 +01:00
..

Marketplace Web

Mock UI for exploring marketplace offers and submitting bids.

Development

npm install
npm run dev

The dev server listens on http://localhost:5173/ by default. Adjust via --host/--port flags in the systemd unit or package.json script.

Data Modes

Marketplace web reuses the explorer pattern of mock vs. live data:

  • Set VITE_MARKETPLACE_DATA_MODE=mock (default) to consume JSON fixtures under public/mock/.
  • Set VITE_MARKETPLACE_DATA_MODE=live and point VITE_MARKETPLACE_API to the coordinator backend when integration-ready.

Feature Flags & Auth

  • VITE_MARKETPLACE_ENABLE_BIDS (default true) gates whether the bid form submits to the backend. Set to false to keep the UI read-only during phased rollouts.
  • VITE_MARKETPLACE_REQUIRE_AUTH (default false) enforces a bearer token session before live bid submissions. Tokens are stored in localStorage by src/lib/auth.ts; the API helpers automatically attach the Authorization header when a session is present.
  • Session JSON is expected to include token (string) and expiresAt (epoch ms). Expired or malformed entries are cleared automatically.

Document any backend expectations (e.g., coordinator accepting bearer tokens) alongside the environment variables in deployment manifests.

Structure

  • public/mock/offers.json sample marketplace offers.
  • public/mock/stats.json summary dashboard statistics.
  • src/lib/api.ts data-mode-aware fetch helpers.
  • src/main.ts renders dashboard, offers table, and bid form.
  • src/style.css layout and visual styling.

Submitting Bids

When in mock mode, bid submissions simulate latency and always succeed.

When in live mode, ensure the coordinator exposes /v1/marketplace/offers, /v1/marketplace/stats, and /v1/marketplace/bids endpoints compatible with the JSON shapes defined in src/lib/api.ts.