Concrétisez Anvil2 avec son modèle de tokens à trois niveaux, ses valeurs de rôles vérifiées en mode clair et sombre, et une interaction complète d’affectation de service avec des états de technicien, d’horaire et de révision synchronisés.
ServiceTitan Anvil — architecture de jetons à trois niveaux du système de conception
Placez les primitifs sous les rôles sémantiques
Anvil2 distingue les primitifs bruts, les rôles sémantiques et les alias propres aux composants. En règle générale, un produit doit choisir le rôle qui décrit le sens de l’interface plutôt que de reprendre un bleu primitif dans chaque contrôle. Le tableau de référence inclut les valeurs exportées exactes et leurs équivalents pour le thème sombre, afin de permettre l’examen des deux thèmes en parallèle.
Ne vous attendez pas à un recalcul des alias à l’exécution
Le guide officiel de thématisation précise que les références aux primitives sont résolues lors de la compilation. Modifier une primitive via un fournisseur à l’exécution ne régénère pas automatiquement la couche sémantique. Pour recolorer l’application, remplacez le rôle sémantique concerné ; pour modifier un seul composant, utilisez le niveau du composant. Vous éviterez ainsi un thème partiellement modifié, où des contrôles associés ne seraient plus cohérents.
Système de design ServiceTitan Anvil : apparences claire et sombre
Associer les changements de premier plan et d’arrière-plan
L’action principale utilise BackgroundColorPrimary avec ForegroundColorOnPrimary. En apparence claire, le fond est bleu et le texte blanc ; en apparence sombre, le bleu est plus clair et le libellé foncé. Modifier uniquement le fond produirait une combinaison incohérente. L’étude complète HTML utilise light-dark() avec un basculement de color-scheme pour présenter ces valeurs, sans prétendre utiliser ThemeProvider.
Associer une signification explicite aux couleurs d’état
Anvil2 associe une signification aux familles de couleurs d’état. L’exemple local utilise un rôle de réussite, mais indique précisément ce qui s’est passé. Le technicien indisponible est identifié par un libellé et une option radio désactivée. Aucune teinte verte ne laisse entendre qu’une intervention a été envoyée : l’exemple ne se connecte jamais à un système de gestion des interventions.
Système de design ServiceTitan Anvil : affectation et état d’une intervention
L’indisponibilité doit limiter le choix suivant
La sélection d’un technicien remplace les horaires de début proposés par les disponibilités fictives de cette personne. Le technicien indisponible reste visible, mais ne peut pas être sélectionné. Ces deux contrôles sont interdépendants : modifier le premier doit réinitialiser le second à une valeur valide, au lieu de conserver un horaire qui ne correspond pas à la personne choisie.
Distinguer la planification de l’exécution
La confirmation de l’affectation enregistre un plan local et précise qu’aucune intervention n’a été envoyée. Un processus de production devrait vérifier les autorisations, récupérer les disponibilités à jour et gérer les conflits avant de valider l’affectation. L’exemple rend cette limite explicite tout en proposant une interaction complète, que l’on peut tester et adapter.
Système de design ServiceTitan Anvil : densité opérationnelle et lisibilité
Garder le contexte de l’intervention à proximité du choix
Un résumé compact de l’intervention indique la tâche, la durée, le secteur et la priorité. Les techniciens sont présentés dans une liste verticale facile à lire, et l’intervention proposée figure dans un panneau distinct. L’interface utilise des séparateurs neutres et une couleur d’accent discrète pour que le choix et l’action principale restent faciles à repérer. Les barres de planning sont données à titre indicatif ; le sélecteur d’horaire fait foi.
Préserver l’ordre de lecture sur mobile
Système de design ServiceTitan Anvil : intégration native et alternative complète HTML
Utiliser la structure documentée du fournisseur
Le ThemeProvider d’Anvil2 accepte les remplacements de jetons sémantiques et de composants, avec des extensions pour value et l’apparence sombre. Le guide présente ci-dessous un exemple complet de fournisseur, tiré de la documentation publique. Il s’agit d’une référence d’intégration native, distincte de l’exemple HTML autonome exécuté localement.
Ne pas prétendre qu’un environnement d’exécution du package a été vérifié
Cette page fournit une implémentation HTML fonctionnelle et des données de jetons vérifiées. L’exemple du fournisseur natif est une référence d’intégration distincte ; il ne correspond pas à l’environnement d’exécution affiché dans l’aperçu. Pour utiliser les composants React, installez une version d’Anvil2 compatible, incluez les styles requis et vérifiez les API des composants avant de remplacer les contrôles natifs HTML.
Système de design ServiceTitan Anvil : accessibilité et vérification des états
Utiliser la sémantique native des formulaires
Les techniciens sont présentés sous forme de boutons radio natifs avec libellés, l’horaire de début est un sélecteur avec libellé et le contrôle d’apparence expose aria-pressed. Le message de confirmation est une région d’état. Le navigateur gère nativement la sélection des boutons radio au clavier ; le style de focus visible reste indépendant des styles de sélection et de survol.
Vérifier les changements après confirmation
Le changement de technicien ou d’horaire efface l’ancien message de confirmation. Le changement d’apparence conserve le technicien et l’horaire sélectionnés, car une modification visuelle du thème ne devrait pas effacer un plan. Les tests doivent couvrir ces deux transitions, ainsi que la désactivation d’une option et le débordement sur écran étroit, plutôt que de vérifier uniquement qu’un bouton est cliquable.
Système de design ServiceTitan Anvil : transfert à l’agent et mise en œuvre
Commencer par le modèle d’état complet
Enregistrez et exécutez l’exemple HTML complet pour examiner son comportement. Les paires de couleurs claires et sombres dérivées des jetons sont visibles en haut de CSS, et les données de disponibilité définies dans l’exemple figurent dans le script. Une mise en œuvre native de React peut conserver les mêmes transitions d’état tout en utilisant des contrôles Anvil2 vérifiés.
Exécutez l’exemple HTML complet.
Sélectionnez le deuxième technicien et vérifiez que les horaires de début proposés changent.
Confirmez le plan, puis modifiez l’horaire et vérifiez que le message de confirmation est effacé.
Changez l’apparence et vérifiez que la sélection actuelle est conservée.
Préciser les éléments qui nécessitent de vraies données
Demandez à l’agent de conserver la liste d’horaires interdépendante, le membre du personnel désactivé, l’invalidation de la confirmation et le comportement de l’apparence. Ne remplacez les données fictives de l’intervention et du personnel que lorsqu’un contrat de données réel est disponible. Ne transformez pas la confirmation locale en message de réussite en changeant simplement le libellé du bouton.
Vérifiez les disponibilités avant d’envoyer une intervention.
Séparez les remplacements sémantiques de ceux des composants.
Testez les paires de couleurs de premier plan et d’arrière-plan en apparences claire et sombre.
Système de design ServiceTitan Anvil : exemples de composants
Exemple complet d’affectation locale
Exemple original HTML/CSS/JavaScript, avec des apparences dérivées des jetons et un état de formulaire interdépendant.
Enregistrez sous index.html ; les navigateurs modernes prennent en charge light-dark(). Il ne s’agit pas de l’environnement d’exécution natif d’Anvil2.
Référence d’intégration de ThemeProvider
Structure documentée des remplacements sémantiques dans un exemple complet de React. À vérifier avec la version d’Anvil2 installée.
jsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import { ThemeProvider } from '@servicetitan/anvil2';
const theme = {
semantic: {
BackgroundColorPrimary: {
value: '#7c3aed',
extensions: { appearance: { dark: { value: '#a78bfa' } } },
},
},
};
function App() {
return (
<ThemeProvider theme={theme}>
<main>
<h1>Theme integration check</h1>
<div style={{ background: 'var(--a2-background-color-primary)', padding: 24 }}>
<span style={{ color: 'var(--a2-foreground-color-on-primary)' }}>
Primary role with the provider’s matching foreground role
</span>
</div>
</main>
</ThemeProvider>
);
}
createRoot(document.getElementById('root')).render(<App />);
Cette référence au fournisseur a été vérifiée à partir de la documentation officielle ; l’exemple en cours d’exécution ci-dessus est indépendant HTML.
04
Configuration de l’agent IA système de design ServiceTitan Anvil
Point de départ de l’implémentation
Aucun package Anvil2 n’est nécessaire pour l’exemple exécuté. L’exemple distinct avec ThemeProvider nécessite une installation native compatible.
sh
# Save the complete HTML example as index.html
python3 -m http.server 8080
# Open http://localhost:8080
Un prompt pour votre projet
Prompt pour l’agent IA
Créez une interface d’affectation des interventions à l’aide des rôles sémantiques Anvil2. Reprenez l’exemple complet : paires de couleurs de premier plan pour les thèmes clair et sombre, horaires proposés selon le technicien, personnel indisponible désactivé et validation réinitialisée. Choisissez explicitement entre l’installation originale HTML et une installation Anvil2 vérifiée React. Ne prétendez jamais qu’une intervention a été affectée sans réponse du backend.
05
Sources et périmètre du système de design ServiceTitan Anvil
Guide OpenDesign consacré à ServiceTitan Anvil2. Les valeurs des jetons sont extraites de Hammer, le package public de jetons, version 3.5.0. L’exemple en cours d’exécution est original HTML, et non un environnement d’exécution Anvil2 React ; les techniciens et leurs disponibilités sont fictifs.
