Création du tableau de bord web

Le tableau de bord web dans web/ est une application Vite + React + TypeScript. Son client API TypeScript est généré à partir de la spécification OpenAPI d’exécution de la passerelle, et non écrit à la main.

Démarrage rapide

sh

cargo web build         # bundle de production dans web/dist/
cargo web dev           # Serveur de développement vite avec HMR
cargo web check         # vérification de type uniquement (gen-api + tsc -b)
cargo web gen-api       # régénérer web/src/lib/api-generated.ts
cargo web install       # npm install dans web/

cargo web est un alias pour cargo run -p xtask --bin web -- (défini dans la configuration cargo). Chaque sous-commande exécute automatiquement npm install si web/node_modules/ est absent.

Ce qui est généré

Chemin	Générateur	Suivi ?
`web/src/lib/api-generated.ts`	`cargo web gen-api`	gitignored
`target/openapi.json`	`cargo web gen-api`	gitignored
`web/dist/`	`cargo web build`	gitignored

cargo web gen-api génère la spécification OpenAPI en cours de processus à partir de zeroclaw_gateway::openapi::build_spec(), l’écrit dans target/openapi.json, puis transmet ce fichier à openapi-typescript. La même fonction build_spec() sert /api/openapi.json à l’exécution, de sorte que build_spec() constitue l’unique source de contrat et que les fichiers générés sont reconstruits à la demande.

Flux d’édition

Modifiez un gestionnaire de passerelle ou un schéma dans crates/zeroclaw-gateway/.
Exécutez cargo web check : gen-api régénère api-generated.ts à partir de la nouvelle spécification, puis tsc -b vérifie le typage du tableau de bord par rapport à celle-ci. Tout consommateur qui dépend d’un champ désormais supprimé échoue à la compilation.
Mettez à jour les conscommateurs dans web/src/ pour qu’ils correspondent.
cargo web build pour le bundle final.

Builds d’intégration continue et de publication

L’étape obligatoire de CI exécute cargo web check lorsque le tableau de bord, sa chaîne d’outils, les crates Rust qui définissent les schémas exportés (zeroclaw-config, zeroclaw-gateway, zeroclaw-runtime et zeroclaw-sop-graph), le générateur xtask, les manifestes de l’espace de travail ou ce workflow sont modifiés. Cela régénère le client TypeScript ignoré et vérifie les types du tableau de bord sans produire de bundle. Les tâches Rust de lint, de build et de test utilisent toujours un fichier placeholder web/dist/.gitkeep afin que la crate gateway puisse être compilée sans le bundle. La production d’un artefact de publication qui inclut le tableau de bord constitue une étape distincte :

sh

cargo web build
cargo build --release --features gateway

La passerelle charge web/dist/ depuis le système de fichiers au moment de l’exécution via static_files.rs, de sorte que la compilation Rust et la build web sont découplées. Distribuez le dossier web/dist/ rempli avec le binaire pour les installations qui doivent servir le tableau de bord.

Outils requis

Outil	Installer
`npm`	https://nodejs.org/ ou `nvm install && nvm use` depuis la racine du dépôt
`cargo`	https://rustup.rs

Le fichier .nvmrc à la racine du dépôt fixe la version majeure de Node utilisée par les builds web de release. Utilisez-le pour le travail local sur le dashboard afin que npm install, cargo web check et les builds de release manuels s’exécutent tous sur la même ligne de Node.

cargo web échoue rapidement avec une suggestion d’installation si npm est manquant.

Navigateurs pris en charge (minimum)

Le tableau de bord cible les navigateurs evergreen prenant en charge à la fois color-mix() et structuredClone().

Chrome 111+
Edge 111+
Firefox 113+
Safari 16.2+

Keyboard shortcuts

ZeroClaw Docs