Experience · Frontend · Active

cs-tools web

React and Vite frontend for CS Tools, rendering the tool catalog, auth/setup flows, catalog administration and embedded utility routes through same-origin APIs.

• React 19
• Vite
• Redux Toolkit
• react-intl
• Recharts
• Tailwind

Spec sheet

Repository path

cs-tools/apps/web

Runtime

React 19 + Vite

Public host

http://tools.cs.lvh.me:8080

Frontend rule

Same-origin /api only

Responsibilities

• Render the internal tools catalog and utility navigation.
• Consume only the local BFF through /api.
• Use the local shared package for API-facing types.
• Route local dev API calls through the Vite proxy configured by API_PROXY_TARGET.
• Keep reusable UI primitives under shared modules and feature code under feature folders.

Interfaces and contract surface

• GET / via tools host
• Same-origin /api
• Vite dev server on 5180

Consumers

• Internal users via browser

Dependencies and external touchpoints

• cs tools api
• cs tools shared

Notes

• The frontend has no direct Core-service calls; platform-auth-service is reachable only through the BFF.

Source references

• cs-tools/apps/web/package.json
• cs-tools/apps/web/vite.config.ts
• cs-tools/apps/web/src/features
• cs-tools/apps/web/src/shared

Routing locale

Il frontend Vite viene esposto dal local stack su tools.cs.lvh.me:8080. Le chiamate browser restano same-origin e il proxy inoltra solo /api/* al BFF.

La console /admin include la sezione CRM-style Users con pagine dedicate per lista, creazione, dettaglio, modifica e reset password. Quando la sessione contiene passwordChangeRequired=true, il router forza /password/change prima di rendere disponibili le altre aree autenticate.

Import da estensione

Il workbench Unipol / Monitoring ascolta messaggi window.postMessage validati dal content script CS Tools. Gli import esterni restano nel browser: creano o aggiornano dataset localStorage, poi rieseguono la strategy se le source obbligatorie sono presenti.

Unipol monitoring

La strategy interpreter-flow-logs espone la gestione dei Pattern non riconosciuti anche nella pagina dedicata /unipol/monitoring/unmatched-patterns. La pagina riusa i dataset browser piu recenti o una runId salvata e mantiene la result view principale limitata a una sintesi operativa con rimando alla gestione separata.

Swagger viewer

Il tool API / Swagger Viewer separa l'import da /openapi-tools/swagger-viewer/import e la consultazione da /openapi-tools/swagger-viewer/viewer. La pagina import legge specifiche Swagger 2/OpenAPI 3 da textarea o file locale, salva il contenuto nel browser e la pagina viewer rende metadati, operation filtrabili e schema definitions. Non chiama servizi CORE e non salva contenuti lato server.

Gothic chest puzzle

Il tool Gothic 1 Remake / Chest Puzzle e raggiungibile da /gothic-1-remake/chest-puzzle. La superficie React mantiene separati engine, solver BFS, configurazione pannelli, relazioni, board interattiva, log mosse e output soluzione. La feature non chiama API oltre al catalogo e non persiste stato puzzle lato server.