@tuskira/gateway-web

Console d'administration pour la Tuskira AI Agent Gateway. React 19 + Vite + TypeScript (strict) + Tailwind CSS 4 + shadcn/ui.

Développement

Nécessite Node 26+ et npm 11+ (pas de pnpm).

npm install
npm run dev

Le serveur de développement proxifie /api vers http://localhost:8081 (voir vite.config.ts), donc lancez la gateway sur :8081 en parallèle de l'interface. Connectez-vous à /login avec une clé API (gk_…) émise par la gateway.

Depuis la racine du dépôt, vous pouvez plutôt exécuter :

make ui-install
make ui-dev

Build

npm run build

Génère un bundle de production dans dist/. En production, la gateway elle-même sert ce bundle à / sur :8081, donc l'application communique avec l'API en same-origin — aucun proxy nécessaire.

make ui-build   # depuis la racine du dépôt

Vérifications de qualité

npm run lint        # eslint
npm run typecheck    # tsc --noEmit (project references)
npm run test         # vitest
npm run format:check # prettier --check

Ajouter un composant shadcn/ui

npx shadcn@latest add <component>

Le fichier components.json de ce projet cible le template Vite, la base radix, la couleur de base neutral, et les variables CSS pour le thème, avec l'alias d'import @/* résolvant vers src/*. Les nouveaux composants sont écrits dans src/components/ui/.

Design tokens

tokens.json (racine du dépôt) est la source de vérité unique pour le design system — couleurs, espacements, rayons, ombres, polices. Exécutez npm run gen:tokens après l'avoir modifié pour régénérer :

• src/styles/tokens.css — les tokens bruts sous forme de propriétés personnalisées CSS (:root pour les valeurs claires, .dark pour les surcharges sombres), en conservant les noms de tokens du designer (--indigo-9, --sev-high, --r-4, --shadow-1, ...).
• src/styles/tokens.ts — les mêmes échelles de couleurs catégorielles (colors.indigo, colors.slate, colors.sev, colors.status, colors.brand) plus fonts, radii, shadows, pour les consommateurs non-CSS (par ex. les couleurs de séries recharts).

src/index.css mappe les variables sémantiques de shadcn (--background, --primary, --sidebar, ...) sur ces tokens, et enregistre les entrées @theme de Tailwind v4 afin que des utilitaires comme bg-indigo-9, text-text-muted, border-border-strong, shadow-1, rounded-r-4, et font-mono soient disponibles partout dans l'application. Ne modifiez pas manuellement src/styles/tokens.css / src/styles/tokens.ts — ils sont écrasés par le générateur. src/test/tokens.test.ts vérifie que chaque entrée de tokens.ts a une déclaration correspondante dans tokens.css.

Arborescence des dossiers

web/
├── index.html
├── vite.config.ts        # React + Tailwind plugins, /api dev proxy, vitest config
├── components.json        # shadcn/ui config
├── tokens.json             # design-token source of truth (see Design tokens)
├── scripts/
│   └── gen-tokens.mjs        # tokens.json -> src/styles/tokens.{css,ts}
├── src/
│   ├── main.tsx            # ReactDOM root
│   ├── App.tsx              # QueryClientProvider, AuthProvider, RouterProvider
│   ├── index.css            # Tailwind entrypoint + semantic token mapping
│   ├── styles/
│   │   ├── tokens.css         # generated — raw design tokens as CSS vars
│   │   └── tokens.ts           # generated — same tokens for non-CSS use
│   ├── auth/
│   │   ├── AuthContext.tsx    # AuthProvider / useAuth — principal, signIn, signOut
│   │   └── RequireAuth.tsx    # route guard for the authenticated shell
│   ├── components/
│   │   ├── ui/                 # shadcn/ui primitives (generated, don't hand-edit)
│   │   ├── layout/              # AppShell, Sidebar, TopBar
│   │   └── app/                  # ComingSoon, StatCard
│   ├── hooks/
│   │   └── use-theme.ts          # light/dark toggle, class strategy, localStorage
│   ├── lib/
│   │   ├── api.ts                 # fetch wrapper: bearer auth, 401 handling, ApiError
│   │   ├── nav.ts                  # single source of truth for sidebar nav + routes
│   │   ├── queries.ts                # react-query hooks (useHealth)
│   │   ├── query-client.ts            # QueryClient instance
│   │   ├── types.ts                    # Principal, HealthResponse, ApiErrorBody
│   │   └── utils.ts                     # cn() (shadcn)
│   ├── routes/
│   │   ├── router.tsx                    # createBrowserRouter (data router)
│   │   ├── LoginPage.tsx
│   │   ├── OverviewPage.tsx
│   │   └── DocsPage.tsx
│   └── test/
│       ├── setup.ts
│       ├── LoginPage.test.tsx
│       ├── Sidebar.test.tsx
│       ├── SignOut.test.tsx
│       └── tokens.test.ts