back(test): specs validation env + DTO upload (48 -> 59 tests)

- env.validation.spec : config valide/coercion/défauts + rejets (var manquante,
  port hors plage, NODE_ENV inconnu)
- create-api-upload.dto.spec : name requis, emails @ValidateIf (vides OK,
  invalides rejetés), énum convention, MaxLength
- vitest-setup charge reflect-metadata (décorateurs class-validator en test)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

README.md

@@ -83,4 +83,5 @@ docker compose -f infra/docker-compose.yml up -d
 
 - [`documentation/architecture.md`](documentation/architecture.md) — flux, schéma DB, services
 - [`documentation/api-reference.md`](documentation/api-reference.md) — référence complète des endpoints REST
+- [`documentation/local-setup.md`](documentation/local-setup.md) — installation locale (sans Docker)
 - [`documentation/CLAUDE.md`](documentation/CLAUDE.md) — guide d'implémentation interne

back/nest-cli.json

@@ -3,7 +3,14 @@
   "collection": "@nestjs/schematics",
   "sourceRoot": "src",
   "compilerOptions": {
-    "deleteOutDir": true
+    "deleteOutDir": true,
+    "assets": [
+      {
+        "include": "modules/seeder/assets/**/*.yaml",
+        "outDir": "./dist/back/src",
+        "watchAssets": true
+      }
+    ]
   },
   "entryFile": "back/src/main"
 }

back/package.json

@@ -9,36 +9,47 @@
     "start:debug": "nest start --debug --watch",
     "lint": "eslint \"{src,apps,libs,test}/**/*.ts\"",
     "test": "vitest run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "test:cov": "vitest run --coverage",
+    "migration:generate": "typeorm-ts-node-commonjs migration:generate -d src/data-source.ts",
+    "migration:run": "typeorm-ts-node-commonjs migration:run -d src/data-source.ts",
+    "migration:revert": "typeorm-ts-node-commonjs migration:revert -d src/data-source.ts",
+    "migration:show": "typeorm-ts-node-commonjs migration:show -d src/data-source.ts"
   },
   "dependencies": {
+    "@asyncapi/bundler": "^1.0.1",
+    "@asyncapi/cli": "6.0.0",
+    "@asyncapi/generator": "3.0.1",
+    "@asyncapi/html-template": "3.5.6",
+    "@datacat/shared": "workspace:*",
     "@nestjs/common": "^11.0.0",
+    "@nestjs/config": "^4.0.0",
     "@nestjs/core": "^11.0.0",
     "@nestjs/platform-express": "^11.0.0",
-    "@nestjs/typeorm": "^11.0.0",
-    "@nestjs/config": "^4.0.0",
     "@nestjs/serve-static": "^5.0.0",
-    "typeorm": "^0.3.20",
+    "@nestjs/typeorm": "^11.0.0",
-    "pg": "^8.13.0",
+    "@redocly/cli": "latest",
-    "reflect-metadata": "^0.2.0",
+    "class-transformer": "^0.5.0",
-    "rxjs": "^7.8.0",
+    "class-validator": "^0.14.0",
+    "js-yaml": "^4.1.0",
     "multer": "^1.4.5-lts.1",
-    "uuid": "^11.0.0",
+    "pg": "^8.13.0",
     "pino": "^9.0.0",
     "pino-http": "^10.0.0",
-    "class-validator": "^0.14.0",
+    "reflect-metadata": "^0.2.0",
-    "class-transformer": "^0.5.0",
+    "rxjs": "^7.8.0",
-    "@asyncapi/cli": "6.0.0",
+    "typeorm": "^0.3.20",
-    "@asyncapi/html-template": "3.5.6",
+    "uuid": "^11.0.0"
-    "@redocly/cli": "latest"
   },
   "devDependencies": {
     "@nestjs/cli": "^11.0.0",
     "@nestjs/testing": "^11.0.0",
     "@types/express": "^5.0.0",
+    "@types/js-yaml": "^4.0.9",
     "@types/multer": "^1.4.12",
     "@types/node": "^22.0.0",
     "@types/uuid": "^10.0.0",
+    "@vitest/coverage-v8": "^3.2.6",
     "typescript": "^5.7.0",
     "vitest": "^3.0.0"
   }

back/redocly.yaml

@@ -0,0 +1,3 @@
+# Validation structurelle uniquement — pas de règles de style
+extends:
+  - spec

back/src/app.module.ts

@@ -7,21 +7,26 @@ import { UploadsModule } from './modules/uploads/uploads.module';
 import { DocsGenerationModule } from './modules/docs-generation/docs-generation.module';
 import { CategoriesModule } from './modules/categories/categories.module';
 import { SeederModule } from './modules/seeder/seeder.module';
+import { validateEnv } from './config/env.validation';
 
 @Module({
   imports: [
-    ConfigModule.forRoot({ isGlobal: true }),
+    ConfigModule.forRoot({ isGlobal: true, validate: validateEnv }),
     TypeOrmModule.forRootAsync({
       inject: [ConfigService],
       useFactory: (config: ConfigService) => ({
         type: 'postgres',
-        host: config.get('DATABASE_HOST', 'localhost'),
+        host: config.getOrThrow<string>('DATABASE_HOST'),
-        port: config.get<number>('DATABASE_PORT', 5432),
+        port: config.getOrThrow<number>('DATABASE_PORT'),
-        username: config.get('DATABASE_USER', 'datacat'),
+        username: config.getOrThrow<string>('DATABASE_USER'),
-        password: config.get('DATABASE_PASSWORD', 'datacat'),
+        password: config.getOrThrow<string>('DATABASE_PASSWORD'),
-        database: config.get('DATABASE_NAME', 'datacat'),
+        database: config.getOrThrow<string>('DATABASE_NAME'),
         entities: [__dirname + '/**/*.entity{.ts,.js}'],
+        migrations: [__dirname + '/migrations/*{.ts,.js}'],
+        // Dev : synchronize auto (itération rapide). Prod : pas de synchronize,
+        // le schéma est appliqué par les migrations exécutées au démarrage.
         synchronize: config.get('NODE_ENV') !== 'production',
+        migrationsRun: config.get('NODE_ENV') === 'production',
         logging: config.get('NODE_ENV') === 'development',
       }),
     }),

back/src/common/filters/all-exceptions.filter.ts

@@ -1,8 +1,10 @@
-import { ExceptionFilter, Catch, ArgumentsHost, HttpException, HttpStatus } from '@nestjs/common';
+import { ExceptionFilter, Catch, ArgumentsHost, HttpException, HttpStatus, Logger } from '@nestjs/common';
 import { Request, Response } from 'express';
 
 @Catch()
 export class AllExceptionsFilter implements ExceptionFilter {
+  private readonly logger = new Logger('ExceptionFilter');
+
   catch(exception: unknown, host: ArgumentsHost) {
     const ctx = host.switchToHttp();
     const response = ctx.getResponse<Response>();
@@ -18,6 +20,14 @@ export class AllExceptionsFilter implements ExceptionFilter {
         ? exception.getResponse()
         : 'Internal server error';
 
+    /* Logguer toutes les erreurs 5xx avec stack trace complète */
+    if (status >= 500) {
+      this.logger.error(
+        `[${request.method} ${request.url}] ${String(exception)}`,
+        exception instanceof Error ? exception.stack : undefined,
+      );
+    }
+
     response.status(status).json({
       statusCode: status,
       timestamp: new Date().toISOString(),

back/src/config/env.validation.spec.ts

@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest';
+import { validateEnv } from './env.validation';
+
+const base = {
+  DATABASE_HOST: 'localhost',
+  DATABASE_PORT: '5432',
+  DATABASE_USER: 'datacat',
+  DATABASE_PASSWORD: 'datacat',
+  DATABASE_NAME: 'datacat',
+};
+
+describe('validateEnv', () => {
+  it('accepte une config valide, coerce le port et applique les défauts', () => {
+    const cfg = validateEnv({ ...base });
+    expect(cfg.DATABASE_PORT).toBe(5432);
+    expect(typeof cfg.DATABASE_PORT).toBe('number');
+    expect(cfg.NODE_ENV).toBe('development');
+    expect(cfg.PORT).toBe(3000);
+  });
+
+  it('rejette une variable requise manquante (message explicite)', () => {
+    const { DATABASE_HOST: _omit, ...rest } = base;
+    expect(() => validateEnv(rest)).toThrow(/DATABASE_HOST/);
+  });
+
+  it('rejette un port hors plage', () => {
+    expect(() => validateEnv({ ...base, DATABASE_PORT: '70000' })).toThrow();
+  });
+
+  it('rejette un NODE_ENV inconnu', () => {
+    expect(() => validateEnv({ ...base, NODE_ENV: 'staging' })).toThrow();
+  });
+});

back/src/config/env.validation.ts

@@ -0,0 +1,76 @@
+import { plainToInstance, Type } from 'class-transformer';
+import {
+  IsEnum,
+  IsInt,
+  IsNotEmpty,
+  IsOptional,
+  IsString,
+  Max,
+  Min,
+  validateSync,
+} from 'class-validator';
+
+export enum NodeEnv {
+  Development = 'development',
+  Production = 'production',
+  Test = 'test',
+}
+
+/**
+ * Schéma des variables d'environnement. Validé au démarrage via `validateEnv`
+ * (branché sur `ConfigModule.forRoot({ validate })`) : l'app refuse de démarrer
+ * si une variable requise manque ou est mal typée, plutôt que d'utiliser
+ * silencieusement des valeurs par défaut (ex. credentials DB).
+ */
+export class EnvironmentVariables {
+  @IsEnum(NodeEnv)
+  @IsOptional()
+  NODE_ENV: NodeEnv = NodeEnv.Development;
+
+  @IsString()
+  @IsNotEmpty()
+  DATABASE_HOST!: string;
+
+  @Type(() => Number)
+  @IsInt()
+  @Min(1)
+  @Max(65535)
+  DATABASE_PORT!: number;
+
+  @IsString()
+  @IsNotEmpty()
+  DATABASE_USER!: string;
+
+  @IsString()
+  @IsNotEmpty()
+  DATABASE_PASSWORD!: string;
+
+  @IsString()
+  @IsNotEmpty()
+  DATABASE_NAME!: string;
+
+  @Type(() => Number)
+  @IsInt()
+  @Min(1)
+  @Max(65535)
+  @IsOptional()
+  PORT = 3000;
+
+  @IsString()
+  @IsOptional()
+  DOCS_OUTPUT_DIR?: string;
+}
+
+export function validateEnv(config: Record<string, unknown>): EnvironmentVariables {
+  const validated = plainToInstance(EnvironmentVariables, config, {
+    enableImplicitConversion: true,
+  });
+  const errors = validateSync(validated, { skipMissingProperties: false });
+  if (errors.length > 0) {
+    const details = errors
+      .map((e) => Object.values(e.constraints ?? {}).join(', '))
+      .join('\n  - ');
+    throw new Error(`Configuration d'environnement invalide:\n  - ${details}`);
+  }
+  return validated;
+}

back/src/data-source.ts

@@ -0,0 +1,20 @@
+import 'reflect-metadata';
+import { DataSource } from 'typeorm';
+
+/**
+ * DataSource dédié à la CLI TypeORM (migrations). Lit l'environnement
+ * directement (les mêmes DATABASE_* que l'app). Utilisé par les scripts
+ * migration:generate / migration:run / migration:revert.
+ *
+ * NB : la config runtime de l'app vit dans app.module.ts (TypeOrmModule).
+ */
+export default new DataSource({
+  type: 'postgres',
+  host: process.env.DATABASE_HOST ?? 'localhost',
+  port: Number(process.env.DATABASE_PORT ?? 5432),
+  username: process.env.DATABASE_USER ?? 'datacat',
+  password: process.env.DATABASE_PASSWORD ?? 'datacat',
+  database: process.env.DATABASE_NAME ?? 'datacat',
+  entities: ['src/**/*.entity.ts'],
+  migrations: ['src/migrations/*.ts'],
+});

back/src/main.ts

@@ -1,5 +1,5 @@
 import { NestFactory } from '@nestjs/core';
-import { ValidationPipe, RequestMethod } from '@nestjs/common';
+import { Logger, ValidationPipe, RequestMethod } from '@nestjs/common';
 import { AppModule } from './app.module';
 import { AllExceptionsFilter } from './common/filters/all-exceptions.filter';
 
@@ -16,7 +16,7 @@ async function bootstrap() {
 
   const port = process.env.PORT ?? 3000;
   await app.listen(port);
-  console.log(`Datacat API running on port ${port}`);
+  Logger.log(`Datacat API running on port ${port}`, 'Bootstrap');
 }
 
 bootstrap();

back/src/migrations/1782543826810-InitialSchema.ts

@@ -0,0 +1,16 @@
+import { MigrationInterface, QueryRunner } from "typeorm";
+
+export class InitialSchema1782543826810 implements MigrationInterface {
+    name = 'InitialSchema1782543826810'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`CREATE TABLE "categories" ("id" uuid NOT NULL DEFAULT uuid_generate_v4(), "name" character varying(255) NOT NULL, "description" text, "parent_id" character varying(36), "order_index" integer NOT NULL DEFAULT '0', "created_at" TIMESTAMP NOT NULL DEFAULT now(), "updated_at" TIMESTAMP NOT NULL DEFAULT now(), CONSTRAINT "PK_24dbc6126a28ff948da33e97d3b" PRIMARY KEY ("id"))`);
+        await queryRunner.query(`CREATE TABLE "api_entries" ("id" uuid NOT NULL DEFAULT uuid_generate_v4(), "convention" character varying(30) NOT NULL DEFAULT 'CONSULTER', "name" character varying(255) NOT NULL DEFAULT '', "description" text, "type" character varying(10) NOT NULL, "provider" character varying(255) NOT NULL DEFAULT '', "version_major" integer NOT NULL DEFAULT '0', "version_minor" integer NOT NULL DEFAULT '0', "version_patch" integer NOT NULL DEFAULT '0', "yaml_content" text NOT NULL, "html_path" character varying(500), "status" character varying(10) NOT NULL DEFAULT 'PENDING', "error_message" text, "category_id" character varying(36), "is_current" boolean NOT NULL DEFAULT true, "contact_functional_name" character varying(255) NOT NULL DEFAULT '', "contact_functional_entity" character varying(255) NOT NULL DEFAULT '', "contact_functional_email" character varying(255) NOT NULL DEFAULT '', "contact_technical_name" character varying(255) NOT NULL DEFAULT '', "contact_technical_entity" character varying(255) NOT NULL DEFAULT '', "contact_technical_email" character varying(255) NOT NULL DEFAULT '', "created_at" TIMESTAMP NOT NULL DEFAULT now(), "updated_at" TIMESTAMP NOT NULL DEFAULT now(), CONSTRAINT "PK_d7b668541d2539a0c212b198d32" PRIMARY KEY ("id"))`);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`DROP TABLE "api_entries"`);
+        await queryRunner.query(`DROP TABLE "categories"`);
+    }
+
+}

back/src/modules/apis/api-entry.entity.ts

@@ -1,16 +1,16 @@
 import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, UpdateDateColumn } from 'typeorm';
-import { ApiType, ApiStatus } from '@datacat/shared';
+import { ApiType, ApiStatus, ApiConvention } from '@datacat/shared';
 
 @Entity('api_entries')
 export class ApiEntryEntity {
   @PrimaryGeneratedColumn('uuid')
   id!: string;
 
-  @Column()
+  @Column({ type: 'varchar', length: 30, default: 'CONSULTER' })
-  title!: string;
+  convention!: ApiConvention;
 
-  @Column()
+  @Column({ type: 'varchar', length: 255, default: '' })
-  version!: string;
+  name!: string;
 
   @Column({ nullable: true, type: 'text' })
   description!: string | null;
@@ -18,6 +18,18 @@ export class ApiEntryEntity {
   @Column({ type: 'varchar', length: 10 })
   type!: ApiType;
 
+  @Column({ type: 'varchar', length: 255, default: '', name: 'provider' })
+  provider!: string;
+
+  @Column({ type: 'int', default: 0, name: 'version_major' })
+  versionMajor!: number;
+
+  @Column({ type: 'int', default: 0, name: 'version_minor' })
+  versionMinor!: number;
+
+  @Column({ type: 'int', default: 0, name: 'version_patch' })
+  versionPatch!: number;
+
   @Column({ type: 'text', name: 'yaml_content' })
   yamlContent!: string;
 
@@ -33,23 +45,26 @@ export class ApiEntryEntity {
   @Column({ nullable: true, type: 'varchar', length: 36, name: 'category_id' })
   categoryId!: string | null;
 
-  @Column({ nullable: true, type: 'text', name: 'functional_doc' })
+  @Column({ type: 'boolean', default: true, name: 'is_current' })
-  functionalDoc!: string | null;
+  isCurrent!: boolean;
 
-  @Column({ nullable: true, type: 'text', name: 'technical_doc' })
+  @Column({ type: 'varchar', length: 255, default: '', name: 'contact_functional_name' })
-  technicalDoc!: string | null;
+  contactFunctionalName!: string;
 
-  @Column({ nullable: true, type: 'varchar', length: 500, name: 'external_doc_url' })
+  @Column({ type: 'varchar', length: 255, default: '', name: 'contact_functional_entity' })
-  externalDocUrl!: string | null;
+  contactFunctionalEntity!: string;
 
-  @Column({ nullable: true, type: 'varchar', length: 255, name: 'contact_functional' })
+  @Column({ type: 'varchar', length: 255, default: '', name: 'contact_functional_email' })
-  contactFunctional!: string | null;
+  contactFunctionalEmail!: string;
 
-  @Column({ nullable: true, type: 'varchar', length: 255, name: 'contact_technical' })
+  @Column({ type: 'varchar', length: 255, default: '', name: 'contact_technical_name' })
-  contactTechnical!: string | null;
+  contactTechnicalName!: string;
 
-  @Column({ nullable: true, type: 'text', name: 'access_rights' })
+  @Column({ type: 'varchar', length: 255, default: '', name: 'contact_technical_entity' })
-  accessRights!: string | null;
+  contactTechnicalEntity!: string;
+
+  @Column({ type: 'varchar', length: 255, default: '', name: 'contact_technical_email' })
+  contactTechnicalEmail!: string;
 
   @CreateDateColumn({ name: 'created_at' })
   createdAt!: Date;

back/src/modules/apis/api-entry.mapper.ts

@@ -0,0 +1,20 @@
+import { ApiEntryEntity } from './api-entry.entity';
+import { ApiEntryListItem, API_CONVENTION_LABELS } from '@datacat/shared';
+
+export function toApiEntryListItem(entity: ApiEntryEntity): ApiEntryListItem {
+  return {
+    id: entity.id,
+    title: `${API_CONVENTION_LABELS[entity.convention]} ${entity.name}`,
+    name: entity.name,
+    convention: entity.convention,
+    version: `${entity.versionMajor}.${entity.versionMinor}.${entity.versionPatch}`,
+    description: entity.description,
+    type: entity.type,
+    provider: entity.provider,
+    status: entity.status,
+    categoryId: entity.categoryId,
+    isCurrent: entity.isCurrent,
+    createdAt: entity.createdAt.toISOString(),
+    updatedAt: entity.updatedAt.toISOString(),
+  };
+}

back/src/modules/apis/apis.controller.ts

@@ -43,6 +43,11 @@ export class ApisController {
     return this.apisService.remove(id);
   }
 
+  @Post(':id/set-current')
+  setCurrent(@Param('id') id: string) {
+    return this.apisService.setCurrent(id);
+  }
+
   @Post(':id/regenerate')
   regenerate(@Param('id') id: string) {
     return this.apisService.regenerate(id);
@@ -64,6 +69,11 @@ export class ApisController {
     res.send(entry.yamlContent);
   }
 
+  @Get(':id/versions')
+  getVersions(@Param('id') id: string) {
+    return this.apisService.findVersionsOf(id);
+  }
+
   /** Sert les assets statiques (CSS, JS) générés par AsyncAPI CLI */
   @Get(':id/*path')
   async getDocAsset(@Param('id') id: string, @Req() req: Request, @Res() res: Response) {

back/src/modules/apis/apis.service.spec.ts

@@ -0,0 +1,353 @@
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { ConflictException, NotFoundException } from '@nestjs/common';
+import { ApisService } from './apis.service';
+import { ApiType } from '@datacat/shared';
+
+/** Accès à la méthode privée pour les tests unitaires */
+function parse(raw: string) {
+  return (ApisService.prototype as any).parseSearchTokens.call({}, raw) as {
+    text: string;
+    type?: ApiType;
+    version?: string;
+    latestOnly: boolean;
+  };
+}
+
+describe('ApisService.parseSearchTokens()', () => {
+  describe('chaîne vide', () => {
+    it('retourne text vide, pas de type, pas de version, latestOnly=false', () => {
+      expect(parse('')).toEqual({ text: '', type: undefined, version: undefined, latestOnly: false });
+    });
+
+    it('gère les espaces seuls', () => {
+      expect(parse('   ')).toEqual({ text: '', type: undefined, version: undefined, latestOnly: false });
+    });
+  });
+
+  describe('texte libre seul (sans version ni type)', () => {
+    it('"auth" → latestOnly=true automatique', () => {
+      expect(parse('auth')).toEqual({ text: 'auth', type: undefined, version: undefined, latestOnly: true });
+    });
+
+    it('"paiement commande" → texte libre multi-mots, latestOnly=true', () => {
+      expect(parse('paiement commande')).toEqual({
+        text: 'paiement commande',
+        type: undefined,
+        version: undefined,
+        latestOnly: true,
+      });
+    });
+  });
+
+  describe('détection du type', () => {
+    it('"async" → ASYNCAPI', () => {
+      const r = parse('async');
+      expect(r.type).toBe('ASYNCAPI');
+    });
+
+    it('"asyncapi" → ASYNCAPI', () => {
+      expect(parse('asyncapi').type).toBe('ASYNCAPI');
+    });
+
+    it('"openapi" → OPENAPI', () => {
+      expect(parse('openapi').type).toBe('OPENAPI');
+    });
+
+    it('"open" → OPENAPI', () => {
+      expect(parse('open').type).toBe('OPENAPI');
+    });
+
+    it('type seul → latestOnly=true (champ non vide, pas de version)', () => {
+      expect(parse('async').latestOnly).toBe(true);
+    });
+
+    it('mots de type ne font pas partie du texte libre', () => {
+      expect(parse('auth async').text).toBe('auth');
+    });
+  });
+
+  describe('détection de version', () => {
+    it('"v1" → version="1", latestOnly=false', () => {
+      expect(parse('v1')).toEqual({ text: '', type: undefined, version: '1', latestOnly: false });
+    });
+
+    it('"1.2" → version="1.2"', () => {
+      expect(parse('1.2').version).toBe('1.2');
+    });
+
+    it('"v1.2.3" → version="1.2.3" (préfixe v supprimé)', () => {
+      expect(parse('v1.2.3').version).toBe('1.2.3');
+    });
+
+    it('"1.0.0" → version exacte', () => {
+      expect(parse('1.0.0').version).toBe('1.0.0');
+    });
+
+    it('version présente → latestOnly=false', () => {
+      expect(parse('auth v1').latestOnly).toBe(false);
+    });
+
+    it('numéro de version ne fait pas partie du texte libre', () => {
+      expect(parse('auth v1').text).toBe('auth');
+    });
+  });
+
+  describe('mot-clé "latest"', () => {
+    it('"latest" seul → latestOnly=true, pas de texte', () => {
+      expect(parse('latest')).toEqual({ text: '', type: undefined, version: undefined, latestOnly: true });
+    });
+
+    it('"latest" + type → latestOnly=true + type détecté', () => {
+      const r = parse('latest async');
+      expect(r.latestOnly).toBe(true);
+      expect(r.type).toBe('ASYNCAPI');
+    });
+
+    it('"latest" + version → les deux flags actifs', () => {
+      const r = parse('latest v1');
+      expect(r.latestOnly).toBe(true);
+      expect(r.version).toBe('1');
+    });
+  });
+
+  describe('combinaisons', () => {
+    it('"auth async" → texte=auth, type=ASYNCAPI, latestOnly=true', () => {
+      expect(parse('auth async')).toEqual({
+        text: 'auth',
+        type: 'ASYNCAPI',
+        version: undefined,
+        latestOnly: true,
+      });
+    });
+
+    it('"auth async v1" → texte=auth, type=ASYNCAPI, version=1, latestOnly=false', () => {
+      expect(parse('auth async v1')).toEqual({
+        text: 'auth',
+        type: 'ASYNCAPI',
+        version: '1',
+        latestOnly: false,
+      });
+    });
+
+    it('"auth 1.0.0" → texte=auth, version=1.0.0, latestOnly=false', () => {
+      expect(parse('auth 1.0.0')).toEqual({
+        text: 'auth',
+        type: undefined,
+        version: '1.0.0',
+        latestOnly: false,
+      });
+    });
+
+    it('"openapi latest" → type=OPENAPI, latestOnly=true', () => {
+      expect(parse('openapi latest')).toEqual({
+        text: '',
+        type: 'OPENAPI',
+        version: undefined,
+        latestOnly: true,
+      });
+    });
+
+    it('insensible à la casse pour les mots-clés', () => {
+      const r = parse('ASYNC Auth LATEST');
+      expect(r.type).toBe('ASYNCAPI');
+      expect(r.latestOnly).toBe(true);
+      expect(r.text).toBe('Auth');
+    });
+  });
+});
+
+// ─── Mocks partagés pour les tests unitaires de ApisService ───────────────────
+
+const mockRepo = {
+  findOne: vi.fn(),
+  count:   vi.fn(),
+  create:  vi.fn(),
+  save:    vi.fn(),
+  find:    vi.fn(),
+  update:  vi.fn(),
+  delete:  vi.fn(),
+};
+
+const mockDocsService = { generate: vi.fn() };
+
+const mockDataSource = {
+  transaction: vi.fn(async (cb: (m: unknown) => unknown) =>
+    cb({ getRepository: () => mockRepo }),
+  ),
+};
+
+let service: ApisService;
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  service = new ApisService(mockRepo as any, mockDataSource as any, mockDocsService as any);
+});
+
+function makeEntity(overrides: Record<string, unknown> = {}) {
+  return {
+    id: 'uuid-1', name: 'Petstore', convention: 'CONSULTER',
+    versionMajor: 1, versionMinor: 0, versionPatch: 0,
+    type: 'OPENAPI', provider: 'DINUM', description: null,
+    yamlContent: 'openapi: "3.0.0"', htmlPath: null,
+    status: 'PENDING', errorMessage: null, categoryId: null,
+    isCurrent: true,
+    contactFunctionalName: '', contactFunctionalEntity: '', contactFunctionalEmail: '',
+    contactTechnicalName: '', contactTechnicalEntity: '', contactTechnicalEmail: '',
+    createdAt: new Date(), updatedAt: new Date(),
+    ...overrides,
+  };
+}
+
+const baseDto = {
+  name: 'Petstore', convention: 'CONSULTER' as const,
+  versionMajor: 1, versionMinor: 0, versionPatch: 0,
+  type: 'OPENAPI' as const, provider: 'DINUM',
+  yamlContent: 'openapi: "3.0.0"',
+  contactFunctionalName: 'Alice', contactFunctionalEntity: 'DINUM', contactFunctionalEmail: 'alice@dinum.fr',
+  contactTechnicalName: 'Bob', contactTechnicalEntity: 'DINUM', contactTechnicalEmail: 'bob@dinum.fr',
+};
+
+// ─── ApisService.create() ─────────────────────────────────────────────────────
+
+describe('ApisService.create()', () => {
+  it('crée l\'entrée et la retourne', async () => {
+    const entity = makeEntity();
+    mockRepo.findOne.mockResolvedValue(null);
+    mockRepo.count.mockResolvedValue(0);
+    mockRepo.create.mockReturnValue(entity);
+    mockRepo.save.mockResolvedValue(entity);
+
+    const result = await service.create(baseDto as any);
+
+    expect(result.id).toBe('uuid-1');
+    expect(result.title).toBe('Consulter Petstore');
+    expect(result.version).toBe('1.0.0');
+  });
+
+  it('lève ConflictException si doublon', async () => {
+    mockRepo.findOne.mockResolvedValue(makeEntity());
+
+    await expect(service.create(baseDto as any)).rejects.toThrow(ConflictException);
+  });
+
+  it('isCurrent=true si première version', async () => {
+    const entity = makeEntity({ isCurrent: true });
+    mockRepo.findOne.mockResolvedValue(null);
+    mockRepo.count.mockResolvedValue(0);
+    mockRepo.create.mockReturnValue(entity);
+    mockRepo.save.mockResolvedValue(entity);
+
+    await service.create(baseDto as any);
+
+    expect(mockRepo.create).toHaveBeenCalledWith(expect.objectContaining({ isCurrent: true }));
+  });
+
+  it('isCurrent=false si version ultérieure', async () => {
+    const entity = makeEntity({ isCurrent: false });
+    mockRepo.findOne.mockResolvedValue(null);
+    mockRepo.count.mockResolvedValue(1);
+    mockRepo.create.mockReturnValue(entity);
+    mockRepo.save.mockResolvedValue(entity);
+
+    await service.create(baseDto as any);
+
+    expect(mockRepo.create).toHaveBeenCalledWith(expect.objectContaining({ isCurrent: false }));
+  });
+});
+
+// ─── ApisService.findOneOrThrow() ────────────────────────────────────────────
+
+describe('ApisService.findOneOrThrow()', () => {
+  it('retourne l\'entrée mappée si trouvée', async () => {
+    mockRepo.findOne.mockResolvedValue(makeEntity());
+
+    const result = await service.findOneOrThrow('uuid-1');
+
+    expect(result.id).toBe('uuid-1');
+    expect(result.title).toBe('Consulter Petstore');
+    expect(result.version).toBe('1.0.0');
+  });
+
+  it('lève NotFoundException si absente', async () => {
+    mockRepo.findOne.mockResolvedValue(null);
+
+    await expect(service.findOneOrThrow('uuid-unknown')).rejects.toThrow(NotFoundException);
+  });
+});
+
+// ─── ApisService.remove() ────────────────────────────────────────────────────
+
+describe('ApisService.remove()', () => {
+  it('supprime l\'entrée si elle existe', async () => {
+    mockRepo.findOne.mockResolvedValue(makeEntity());
+    mockRepo.delete.mockResolvedValue({ affected: 1 });
+
+    await service.remove('uuid-1');
+
+    expect(mockRepo.delete).toHaveBeenCalledWith('uuid-1');
+  });
+
+  it('lève NotFoundException si absente', async () => {
+    mockRepo.findOne.mockResolvedValue(null);
+
+    await expect(service.remove('uuid-unknown')).rejects.toThrow(NotFoundException);
+  });
+});
+
+// ─── ApisService.findVersionsOf() ────────────────────────────────────────────
+
+describe('ApisService.findVersionsOf()', () => {
+  it('retourne toutes les versions (même name+convention)', async () => {
+    const entity1 = makeEntity({ id: 'uuid-1', versionMajor: 2 });
+    const entity2 = makeEntity({ id: 'uuid-2', versionMajor: 1 });
+    mockRepo.findOne.mockResolvedValue(entity1);
+    mockRepo.find.mockResolvedValue([entity1, entity2]);
+
+    const result = await service.findVersionsOf('uuid-1');
+
+    expect(result).toHaveLength(2);
+    expect(result[0].id).toBe('uuid-1');
+    expect(result[1].id).toBe('uuid-2');
+  });
+
+  it('lève NotFoundException si id inconnu', async () => {
+    mockRepo.findOne.mockResolvedValue(null);
+
+    await expect(service.findVersionsOf('uuid-unknown')).rejects.toThrow(NotFoundException);
+  });
+});
+
+// ─── ApisService.setCurrent() ────────────────────────────────────────────────
+
+describe('ApisService.setCurrent()', () => {
+  it('met isCurrent=false sur les siblings puis true sur la cible', async () => {
+    mockRepo.findOne.mockResolvedValue(makeEntity());
+    mockRepo.update.mockResolvedValue({ affected: 1 });
+
+    await service.setCurrent('uuid-1');
+
+    expect(mockRepo.update).toHaveBeenCalledWith(
+      { name: 'Petstore', convention: 'CONSULTER' },
+      { isCurrent: false },
+    );
+    expect(mockRepo.update).toHaveBeenCalledWith(
+      { id: 'uuid-1' },
+      { isCurrent: true },
+    );
+  });
+});
+
+// ─── ApisService.regenerate() ────────────────────────────────────────────────
+
+describe('ApisService.regenerate()', () => {
+  it('remet le statut à PENDING et appelle docsService.generate()', async () => {
+    mockRepo.findOne.mockResolvedValue(makeEntity());
+    mockRepo.update.mockResolvedValue({ affected: 1 });
+    mockDocsService.generate.mockResolvedValue(undefined);
+
+    await service.regenerate('uuid-1');
+
+    expect(mockRepo.update).toHaveBeenCalledWith('uuid-1', { status: 'PENDING', errorMessage: null });
+    expect(mockDocsService.generate).toHaveBeenCalledWith('uuid-1');
+  });
+});

back/src/modules/apis/apis.service.ts

@@ -1,17 +1,15 @@
-import { Injectable, NotFoundException, Inject, forwardRef } from '@nestjs/common';
+import { Injectable, NotFoundException, ConflictException, Inject, forwardRef, Logger } from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
-import { Repository } from 'typeorm';
+import { DataSource, Repository } from 'typeorm';
 import { ApiEntryEntity } from './api-entry.entity';
 import { CreateApiEntryDto } from './dto/create-api-entry.dto';
 import { UpdateApiEntryDto } from './dto/update-api-entry.dto';
-import { ApiListResponse, ApiListQuery, ApiEntry, ApiEntryListItem, ApiType, ApiStatus } from '@datacat/shared';
+import { ApiListResponse, ApiListQuery, ApiEntry, ApiEntryListItem, ApiType, ApiStatus, ApiConvention, API_CONVENTION_LABELS } from '@datacat/shared';
+import { toApiEntryListItem } from './api-entry.mapper';
 import { DocsGenerationService } from '../docs-generation/docs-generation.service';
 
 /** Champs internes mis à jour par DocsGenerationService */
 interface InternalUpdateFields {
-  title?: string;
-  version?: string;
-  description?: string;
   htmlPath?: string | null;
   status?: ApiStatus;
   errorMessage?: string | null;
@@ -19,28 +17,58 @@ interface InternalUpdateFields {
 
 @Injectable()
 export class ApisService {
+  private readonly logger = new Logger(ApisService.name);
+
   constructor(
     @InjectRepository(ApiEntryEntity)
     private readonly repo: Repository<ApiEntryEntity>,
+    private readonly dataSource: DataSource,
     @Inject(forwardRef(() => DocsGenerationService))
     private readonly docsService: DocsGenerationService,
   ) {}
 
   async create(dto: CreateApiEntryDto): Promise<ApiEntry> {
+    // Vérifier qu'il n'existe pas déjà une entrée avec le même tuple (name, convention, version)
+    const duplicate = await this.repo.findOne({
+      where: {
+        name: dto.name,
+        convention: dto.convention,
+        versionMajor: dto.versionMajor,
+        versionMinor: dto.versionMinor,
+        versionPatch: dto.versionPatch,
+      },
+    });
+    if (duplicate) {
+      throw new ConflictException(
+        `La version ${dto.versionMajor}.${dto.versionMinor}.${dto.versionPatch} existe déjà pour l'API "${dto.name}".`,
+      );
+    }
+
+    // Première version si aucune entrée avec le même name + convention
+    const existingCount = await this.repo.count({
+      where: { name: dto.name, convention: dto.convention },
+    });
+    const isCurrent = existingCount === 0;
+
     const entity = this.repo.create({
-      title: dto.title,
+      convention: dto.convention,
-      version: dto.version,
+      name: dto.name,
+      provider: dto.provider,
+      versionMajor: dto.versionMajor,
+      versionMinor: dto.versionMinor,
+      versionPatch: dto.versionPatch,
       description: dto.description ?? null,
       type: dto.type,
       yamlContent: dto.yamlContent,
-      status: 'PENDING',
+      status: (dto.yamlContent ? 'PENDING' : 'NO_YAML') as ApiStatus,
       categoryId: dto.categoryId ?? null,
-      functionalDoc: dto.functionalDoc ?? null,
+      isCurrent,
-      technicalDoc: dto.technicalDoc ?? null,
+      contactFunctionalName: dto.contactFunctionalName,
-      externalDocUrl: dto.externalDocUrl ?? null,
+      contactFunctionalEntity: dto.contactFunctionalEntity,
-      contactFunctional: dto.contactFunctional ?? null,
+      contactFunctionalEmail: dto.contactFunctionalEmail,
-      contactTechnical: dto.contactTechnical ?? null,
+      contactTechnicalName: dto.contactTechnicalName,
-      accessRights: dto.accessRights ?? null,
+      contactTechnicalEntity: dto.contactTechnicalEntity,
+      contactTechnicalEmail: dto.contactTechnicalEmail,
     });
     const saved = await this.repo.save(entity);
     return toApiEntry(saved);
@@ -53,29 +81,101 @@ export class ApisService {
 
     const qb = this.repo.createQueryBuilder('api');
 
-    if (query.type) {
+    let effectiveType = query.type as ApiType | undefined;
-      qb.andWhere('api.type = :type', { type: query.type as ApiType });
+    let version: string | undefined;
-    }
+    let latestOnly = false;
-    if (query.search) {
+
+    if (query.search?.trim()) {
+      const parsed = this.parseSearchTokens(query.search);
+      // Le type détecté dans la saisie override le select UI
+      if (parsed.type) effectiveType = parsed.type;
+      version = parsed.version;
+      latestOnly = parsed.latestOnly;
+
+      if (parsed.text) {
+        // Recherche fuzzy via pg_trgm + ILIKE pour les matches partiels courts
         qb.andWhere(
-        '(LOWER(api.title) LIKE :search OR LOWER(api.description) LIKE :search)',
+          `(
-        { search: `%${query.search.toLowerCase()}%` },
+            api.name              ILIKE :likeText
+            OR api.provider       ILIKE :likeText
+            OR COALESCE(api.description, '') ILIKE :likeText
+            OR api.contact_functional_name  ILIKE :likeText
+            OR api.contact_technical_name   ILIKE :likeText
+            OR word_similarity(:text, api.name)              > 0.4
+            OR word_similarity(:text, api.provider)          > 0.4
+            OR word_similarity(:text, COALESCE(api.description, '')) > 0.5
+          )`,
+          { likeText: `%${parsed.text}%`, text: parsed.text },
         );
       }
+    }
+
+    if (effectiveType) {
+      qb.andWhere('api.type = :type', { type: effectiveType });
+    }
     if (query.categoryId) {
       qb.andWhere('api.category_id = :categoryId', { categoryId: query.categoryId });
     }
 
-    qb.orderBy('api.created_at', 'DESC').skip(offset).take(limit);
+    // Filtre par version (partielle ou complète)
+    if (version) {
+      const parts = version.split('.').map(Number);
+      if (parts.length >= 1 && !isNaN(parts[0]))
+        qb.andWhere('api.version_major = :major', { major: parts[0] });
+      if (parts.length >= 2 && !isNaN(parts[1]))
+        qb.andWhere('api.version_minor = :minor', { minor: parts[1] });
+      if (parts.length >= 3 && !isNaN(parts[2]))
+        qb.andWhere('api.version_patch = :patch', { patch: parts[2] });
+    }
 
+    // Latest-only : exclure les entrées dont il existe une version plus récente du même API
+    if (latestOnly) {
+      qb.andWhere(`NOT EXISTS (
+        SELECT 1 FROM api_entries e2
+        WHERE e2.name = api.name AND e2.convention = api.convention
+        AND (
+          e2.version_major > api.version_major
+          OR (e2.version_major = api.version_major AND e2.version_minor > api.version_minor)
+          OR (e2.version_major = api.version_major AND e2.version_minor = api.version_minor
+              AND e2.version_patch > api.version_patch)
+        )
+      )`);
+    }
+
+    qb.orderBy('api.created_at', 'DESC').skip(offset).take(limit);
     const [entities, total] = await qb.getManyAndCount();
 
-    return {
+    return { items: entities.map(toApiEntryListItem), total, page, limit };
-      items: entities.map(toApiEntryListItem),
+  }
-      total,
+
-      page,
+  private parseSearchTokens(raw: string): {
-      limit,
+    text: string;
+    type?: ApiType;
+    version?: string;
+    latestOnly: boolean;
+  } {
+    const TYPE_MAP: Record<string, ApiType> = {
+      async: 'ASYNCAPI', asyncapi: 'ASYNCAPI',
+      openapi: 'OPENAPI', open: 'OPENAPI',
     };
+    const VERSION_RE = /^v?(\d+)(?:\.(\d+)(?:\.(\d+))?)?$/i;
+    let type: ApiType | undefined;
+    let version: string | undefined;
+    let latestOnly = false;
+    const remaining: string[] = [];
+
+    for (const word of raw.trim().split(/\s+/).filter(Boolean)) {
+      const lower = word.toLowerCase();
+      if (lower === 'latest')         { latestOnly = true; }
+      else if (TYPE_MAP[lower])       { type = TYPE_MAP[lower]; }
+      else if (VERSION_RE.test(word)) { version = word.replace(/^v/i, ''); }
+      else                            { remaining.push(word); }
+    }
+
+    const text = remaining.join(' ');
+    // Pas de version explicite ET champ non vide → latest par défaut
+    if (!latestOnly && raw.trim().length > 0 && !version) latestOnly = true;
+    return { text, type, version, latestOnly };
   }
 
   async findOneOrThrow(id: string): Promise<ApiEntry> {
@@ -101,47 +201,78 @@ export class ApisService {
     await this.repo.delete(id);
   }
 
+  async findVersionsOf(id: string): Promise<ApiEntryListItem[]> {
+    const entry = await this.findOneOrThrow(id);
+    const entities = await this.repo.find({
+      where: { name: entry.name, convention: entry.convention },
+      order: {
+        versionMajor: 'DESC',
+        versionMinor: 'DESC',
+        versionPatch: 'DESC',
+      },
+    });
+    return entities.map(toApiEntryListItem);
+  }
+
+  async setCurrent(id: string): Promise<ApiEntry> {
+    const entry = await this.findOneOrThrow(id);
+    // Transaction : éviter une fenêtre où aucun (ou deux) sibling n'est courant.
+    await this.dataSource.transaction(async (manager) => {
+      const repo = manager.getRepository(ApiEntryEntity);
+      await repo.update(
+        { name: entry.name, convention: entry.convention },
+        { isCurrent: false },
+      );
+      await repo.update({ id }, { isCurrent: true });
+    });
+    return this.findOneOrThrow(id);
+  }
+
   async regenerate(id: string): Promise<ApiEntry> {
     await this.findOneOrThrow(id);
     await this.updateInternal(id, { status: 'PENDING', errorMessage: null });
-    this.docsService.generate(id).catch(console.error);
+    this.docsService
+      .generate(id)
+      .catch((err) => this.logger.error(`Génération docs échouée pour ${id}`, err));
     return this.findOneOrThrow(id);
   }
 }
 
+function buildTitle(convention: ApiConvention, name: string): string {
+  return `${API_CONVENTION_LABELS[convention]} ${name}`;
+}
+
+function buildVersion(major: number, minor: number, patch: number): string {
+  return `${major}.${minor}.${patch}`;
+}
+
 function toApiEntry(entity: ApiEntryEntity): ApiEntry {
   return {
     id: entity.id,
-    title: entity.title,
+    title: buildTitle(entity.convention, entity.name),
-    version: entity.version,
+    name: entity.name,
+    convention: entity.convention,
+    version: buildVersion(entity.versionMajor, entity.versionMinor, entity.versionPatch),
+    versionMajor: entity.versionMajor,
+    versionMinor: entity.versionMinor,
+    versionPatch: entity.versionPatch,
     description: entity.description,
     type: entity.type,
+    provider: entity.provider,
     yamlContent: entity.yamlContent,
     htmlPath: entity.htmlPath,
     status: entity.status,
     errorMessage: entity.errorMessage,
     categoryId: entity.categoryId,
-    functionalDoc: entity.functionalDoc,
+    isCurrent: entity.isCurrent,
-    technicalDoc: entity.technicalDoc,
+    contactFunctionalName: entity.contactFunctionalName,
-    externalDocUrl: entity.externalDocUrl,
+    contactFunctionalEntity: entity.contactFunctionalEntity,
-    contactFunctional: entity.contactFunctional,
+    contactFunctionalEmail: entity.contactFunctionalEmail,
-    contactTechnical: entity.contactTechnical,
+    contactTechnicalName: entity.contactTechnicalName,
-    accessRights: entity.accessRights,
+    contactTechnicalEntity: entity.contactTechnicalEntity,
+    contactTechnicalEmail: entity.contactTechnicalEmail,
     createdAt: entity.createdAt.toISOString(),
     updatedAt: entity.updatedAt.toISOString(),
   };
 }
 
-function toApiEntryListItem(entity: ApiEntryEntity): ApiEntryListItem {
-  return {
-    id: entity.id,
-    title: entity.title,
-    version: entity.version,
-    description: entity.description,
-    type: entity.type,
-    status: entity.status,
-    categoryId: entity.categoryId,
-    createdAt: entity.createdAt.toISOString(),
-    updatedAt: entity.updatedAt.toISOString(),
-  };
-}

back/src/modules/apis/dto/create-api-entry.dto.ts

@@ -1,20 +1,41 @@
-import { IsString, IsNotEmpty, IsIn, IsOptional, IsUUID } from 'class-validator';
+import { IsString, IsNotEmpty, IsIn, IsOptional, IsUUID, IsInt, Min, IsEmail, MaxLength } from 'class-validator';
-import { ApiType } from '@datacat/shared';
+import { Type } from 'class-transformer';
+import { ApiType, ApiConvention, API_CONVENTIONS, API_TYPES } from '@datacat/shared';
 
 export class CreateApiEntryDto {
-  @IsString()
+  @IsIn([...API_CONVENTIONS])
-  @IsNotEmpty()
+  convention!: ApiConvention;
-  title!: string;
 
   @IsString()
   @IsNotEmpty()
-  version!: string;
+  @MaxLength(255)
+  name!: string;
+
+  @IsString()
+  @IsNotEmpty()
+  @MaxLength(255)
+  provider!: string;
+
+  @IsInt()
+  @Min(0)
+  @Type(() => Number)
+  versionMajor!: number;
+
+  @IsInt()
+  @Min(0)
+  @Type(() => Number)
+  versionMinor!: number;
+
+  @IsInt()
+  @Min(0)
+  @Type(() => Number)
+  versionPatch!: number;
 
   @IsString()
   @IsOptional()
   description?: string;
 
-  @IsIn(['ASYNCAPI', 'OPENAPI'])
+  @IsIn([...API_TYPES])
   type!: ApiType;
 
   @IsString()
@@ -26,26 +47,30 @@ export class CreateApiEntryDto {
   categoryId?: string;
 
   @IsString()
-  @IsOptional()
+  @IsNotEmpty()
-  functionalDoc?: string;
+  @MaxLength(255)
+  contactFunctionalName!: string;
 
   @IsString()
-  @IsOptional()
+  @IsNotEmpty()
-  technicalDoc?: string;
+  @MaxLength(255)
+  contactFunctionalEntity!: string;
+
+  @IsEmail()
+  @MaxLength(255)
+  contactFunctionalEmail!: string;
 
   @IsString()
-  @IsOptional()
+  @IsNotEmpty()
-  externalDocUrl?: string;
+  @MaxLength(255)
+  contactTechnicalName!: string;
 
   @IsString()
-  @IsOptional()
+  @IsNotEmpty()
-  contactFunctional?: string;
+  @MaxLength(255)
+  contactTechnicalEntity!: string;
 
-  @IsString()
+  @IsEmail()
-  @IsOptional()
+  @MaxLength(255)
-  contactTechnical?: string;
+  contactTechnicalEmail!: string;
-
-  @IsString()
-  @IsOptional()
-  accessRights?: string;
 }

back/src/modules/apis/dto/update-api-entry.dto.ts

@@ -1,17 +1,41 @@
-import { IsString, IsOptional, IsUUID } from 'class-validator';
+import { IsString, IsOptional, IsUUID, IsIn, IsInt, Min, IsEmail } from 'class-validator';
+import { Type } from 'class-transformer';
+import { ApiConvention, API_CONVENTIONS } from '@datacat/shared';
 
 export class UpdateApiEntryDto {
-  @IsString()
+  @IsIn([...API_CONVENTIONS])
   @IsOptional()
-  title?: string;
+  convention?: ApiConvention;
 
   @IsString()
   @IsOptional()
-  version?: string;
+  name?: string;
 
   @IsString()
   @IsOptional()
-  description?: string;
+  provider?: string;
+
+  @IsInt()
+  @Min(0)
+  @Type(() => Number)
+  @IsOptional()
+  versionMajor?: number;
+
+  @IsInt()
+  @Min(0)
+  @Type(() => Number)
+  @IsOptional()
+  versionMinor?: number;
+
+  @IsInt()
+  @Min(0)
+  @Type(() => Number)
+  @IsOptional()
+  versionPatch?: number;
+
+  @IsString()
+  @IsOptional()
+  description?: string | null;
 
   @IsUUID()
   @IsOptional()
@@ -19,25 +43,25 @@ export class UpdateApiEntryDto {
 
   @IsString()
   @IsOptional()
-  functionalDoc?: string | null;
+  contactFunctionalName?: string;
 
   @IsString()
   @IsOptional()
-  technicalDoc?: string | null;
+  contactFunctionalEntity?: string;
+
+  @IsEmail()
+  @IsOptional()
+  contactFunctionalEmail?: string;
 
   @IsString()
   @IsOptional()
-  externalDocUrl?: string | null;
+  contactTechnicalName?: string;
 
   @IsString()
   @IsOptional()
-  contactFunctional?: string | null;
+  contactTechnicalEntity?: string;
 
-  @IsString()
+  @IsEmail()
   @IsOptional()
-  contactTechnical?: string | null;
+  contactTechnicalEmail?: string;
-
-  @IsString()
-  @IsOptional()
-  accessRights?: string | null;
 }

back/src/modules/categories/categories.controller.ts

@@ -6,6 +6,7 @@ import {
   Delete,
   Param,
   Body,
+  Query,
   HttpCode,
 } from '@nestjs/common';
 import { CategoriesService } from './categories.service';
@@ -17,8 +18,8 @@ export class CategoriesController {
   constructor(private readonly categoriesService: CategoriesService) {}
 
   @Get()
-  findAll() {
+  findAll(@Query('search') search?: string) {
-    return this.categoriesService.findAll();
+    return this.categoriesService.findAll(search);
   }
 
   /* Déclarés AVANT :id pour éviter que NestJS interprète "browse" comme un UUID */

back/src/modules/categories/categories.service.ts

@@ -10,10 +10,8 @@ import {
   CategoryWithCounts,
   CategoryBrowseResponse,
   CategoryListResponse,
-  ApiEntryListItem,
-  ApiType,
-  ApiStatus,
 } from '@datacat/shared';
+import { toApiEntryListItem } from '../apis/api-entry.mapper';
 
 @Injectable()
 export class CategoriesService {
@@ -24,7 +22,26 @@ export class CategoriesService {
     private readonly apiRepo: Repository<ApiEntryEntity>,
   ) {}
 
-  async findAll(): Promise<CategoryListResponse> {
+  async findAll(search?: string): Promise<CategoryListResponse> {
+    if (search?.trim()) {
+      const text = search.trim();
+      const entities = await this.categoryRepo
+        .createQueryBuilder('cat')
+        .where(
+          `(
+            cat.name        ILIKE :likeText
+            OR COALESCE(cat.description, '') ILIKE :likeText
+            OR word_similarity(:text, cat.name) >= 0.4
+            OR word_similarity(:text, COALESCE(cat.description, '')) > 0.5
+          )`,
+          { likeText: `%${text}%`, text },
+        )
+        .orderBy('cat.order_index', 'ASC')
+        .addOrderBy('cat.name', 'ASC')
+        .getMany();
+      return { items: entities.map(toCategory) };
+    }
+
     const entities = await this.categoryRepo.find({
       order: { orderIndex: 'ASC', name: 'ASC' },
     });
@@ -81,6 +98,53 @@ export class CategoriesService {
     await this.categoryRepo.delete(id);
   }
 
+  /**
+   * Comptages pour TOUTES les catégories en 2 requêtes (au lieu d'un N+1
+   * récursif par enfant) : la hiérarchie et les APIs directes sont chargées en
+   * une fois, puis les compteurs récursifs sont calculés en mémoire.
+   */
+  private async computeCategoryCounts(): Promise<{
+    subcategoryCount: Map<string, number>;
+    recursiveApiCount: Map<string, number>;
+  }> {
+    const categories = await this.categoryRepo.find({ select: ['id', 'parentId'] });
+    const directRows = await this.apiRepo
+      .createQueryBuilder('api')
+      .select('api.categoryId', 'categoryId')
+      .addSelect('COUNT(*)', 'count')
+      .where('api.categoryId IS NOT NULL')
+      .groupBy('api.categoryId')
+      .getRawMany<{ categoryId: string; count: string }>();
+
+    const directApiCount = new Map(directRows.map((r) => [r.categoryId, Number(r.count)]));
+    const childrenOf = new Map<string, string[]>();
+    for (const c of categories) {
+      if (c.parentId) {
+        const siblings = childrenOf.get(c.parentId) ?? [];
+        siblings.push(c.id);
+        childrenOf.set(c.parentId, siblings);
+      }
+    }
+
+    const recursiveApiCount = new Map<string, number>();
+    const computeRecursive = (id: string): number => {
+      const cached = recursiveApiCount.get(id);
+      if (cached !== undefined) return cached;
+      let total = directApiCount.get(id) ?? 0;
+      for (const childId of childrenOf.get(id) ?? []) total += computeRecursive(childId);
+      recursiveApiCount.set(id, total);
+      return total;
+    };
+
+    const subcategoryCount = new Map<string, number>();
+    for (const c of categories) {
+      subcategoryCount.set(c.id, (childrenOf.get(c.id) ?? []).length);
+      computeRecursive(c.id);
+    }
+
+    return { subcategoryCount, recursiveApiCount };
+  }
+
   async browse(categoryId: string | null): Promise<CategoryBrowseResponse> {
     /* 1. Charge la catégorie courante */
     let currentCategory: CategoryEntity | null = null;
@@ -108,13 +172,12 @@ export class CategoriesService {
       order: { orderIndex: 'ASC', name: 'ASC' },
     });
 
-    const subcategories: CategoryWithCounts[] = await Promise.all(
+    const { subcategoryCount, recursiveApiCount } = await this.computeCategoryCounts();
-      directChildren.map(async (child) => {
+    const subcategories: CategoryWithCounts[] = directChildren.map((child) => ({
-        const subcategoryCount = await this.categoryRepo.count({ where: { parentId: child.id } });
+      ...toCategory(child),
-        const apiCount = await this.apiRepo.count({ where: { categoryId: child.id } });
+      subcategoryCount: subcategoryCount.get(child.id) ?? 0,
-        return { ...toCategory(child), subcategoryCount, apiCount };
+      apiCount: recursiveApiCount.get(child.id) ?? 0,
-      }),
+    }));
-    );
 
     /* 4. APIs directement dans cette catégorie */
     const apiEntities = await this.apiRepo.find({
@@ -143,16 +206,3 @@ function toCategory(entity: CategoryEntity): Category {
   };
 }
 
-function toApiEntryListItem(entity: ApiEntryEntity): ApiEntryListItem {
-  return {
-    id: entity.id,
-    title: entity.title,
-    version: entity.version,
-    description: entity.description,
-    type: entity.type as ApiType,
-    status: entity.status as ApiStatus,
-    categoryId: entity.categoryId,
-    createdAt: entity.createdAt.toISOString(),
-    updatedAt: entity.updatedAt.toISOString(),
-  };
-}

back/src/modules/docs-generation/docs-generation.service.ts

@@ -3,11 +3,13 @@ import { execFile } from 'child_process';
 import { promisify } from 'util';
 import * as fs from 'fs/promises';
 import * as path from 'path';
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const AsyncApiGenerator = require('@asyncapi/generator');
 import { ApisService } from '../apis/apis.service';
 
 const execFileAsync = promisify(execFile);
 
-/* Ajoute node_modules/.bin au PATH pour trouver asyncapi/redocly en local */
+/* Ajoute node_modules/.bin au PATH pour trouver redocly en local */
 const localBin = path.join(process.cwd(), 'node_modules', '.bin');
 const execEnv = {
   ...process.env,
@@ -44,22 +46,16 @@ export class DocsGenerationService {
     } catch (error) {
       await this.apisService.updateInternal(entryId, {
         status: 'ERROR',
-        errorMessage: String(error),
+        errorMessage: error instanceof Error ? error.message : String(error),
       });
     }
   }
 
   private async generateAsyncApi(yamlPath: string, outputDir: string): Promise<void> {
-    /* Chemin local du template — évite l'appel réseau vers registry.npmjs.org */
+    /* API programmatique — aucun appel réseau, template résolu localement */
     const templatePath = path.join(process.cwd(), 'node_modules', '@asyncapi', 'html-template');
-    await execFileAsync('asyncapi', [
+    const generator = new AsyncApiGenerator(templatePath, outputDir, { forceWrite: true });
-      'generate', 'fromTemplate',
+    await generator.generateFromFile(yamlPath);
-      yamlPath,
-      templatePath,
-      '--output', outputDir,
-      '--no-interactive',
-      '--force-write',
-    ], { shell: true, env: execEnv });
   }
 
   private async generateOpenApi(yamlPath: string, outputDir: string): Promise<void> {

back/src/modules/seeder/seeder.service.ts

@@ -1,6 +1,6 @@
-import { Injectable, OnApplicationBootstrap } from '@nestjs/common';
+import { Injectable, Logger, OnApplicationBootstrap } from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
-import { Repository } from 'typeorm';
+import { Repository, DataSource } from 'typeorm';
 import * as fs from 'fs/promises';
 import { ApiEntryEntity } from '../apis/api-entry.entity';
 import { CategoryEntity } from '../categories/category.entity';
@@ -587,24 +587,61 @@ components:
 
 @Injectable()
 export class SeederService implements OnApplicationBootstrap {
+  private readonly logger = new Logger(SeederService.name);
+
   constructor(
     @InjectRepository(ApiEntryEntity)
     private readonly apiRepo: Repository<ApiEntryEntity>,
     @InjectRepository(CategoryEntity)
     private readonly categoryRepo: Repository<CategoryEntity>,
     private readonly docsService: DocsGenerationService,
+    private readonly dataSource: DataSource,
   ) {}
 
   async onApplicationBootstrap(): Promise<void> {
+    // Activer l'extension pg_trgm pour la recherche fuzzy
+    await this.dataSource.query('CREATE EXTENSION IF NOT EXISTS pg_trgm');
+
     const forceReseed = process.env.FORCE_RESEED === 'true';
     if (forceReseed) {
       await this.reset();
     }
     const count = await this.apiRepo.count();
-    if (count > 0) return; /* Idempotent — ne ré-exécute pas si des données existent */
+    if (count > 0) {
+      await this.fixIsCurrentFlags();
+      return;
+    }
     await this.seed();
   }
 
+  /**
+   * Corrige les flags is_current après une migration :
+   * si toutes les versions d'un même groupe (name+convention) sont marquées courantes,
+   * on ne garde que la plus haute version.
+   */
+  private async fixIsCurrentFlags(): Promise<void> {
+    await this.dataSource.query(`
+      UPDATE api_entries SET is_current = false
+      WHERE id IN (
+        SELECT a.id
+        FROM api_entries a
+        WHERE a.is_current = true
+        AND EXISTS (
+          SELECT 1 FROM api_entries b
+          WHERE b.name = a.name AND b.convention = a.convention
+            AND b.is_current = true
+            AND b.id != a.id
+            AND (
+              b.version_major > a.version_major
+              OR (b.version_major = a.version_major AND b.version_minor > a.version_minor)
+              OR (b.version_major = a.version_major AND b.version_minor = a.version_minor
+                  AND b.version_patch > a.version_patch)
+            )
+        )
+      )
+    `);
+  }
+
   private async reset(): Promise<void> {
     /* Supprimer toutes les entrées puis les catégories */
     await this.apiRepo.delete({});
@@ -613,7 +650,7 @@ export class SeederService implements OnApplicationBootstrap {
     const docsDir = process.env.DOCS_OUTPUT_DIR ?? '/app/docs-output';
     await fs.rm(docsDir, { recursive: true, force: true });
     await fs.mkdir(docsDir, { recursive: true });
-    console.log('[Seeder] Reset complet — données supprimées, docs nettoyées.');
+    this.logger.log('Reset complet — données supprimées, docs nettoyées.');
   }
 
   private async seed(): Promise<void> {
@@ -688,89 +725,154 @@ export class SeederService implements OnApplicationBootstrap {
     /* APIs de démo */
     const entries = await this.apiRepo.save([
       this.apiRepo.create({
-        title: 'Swagger Petstore',
+        convention: 'CONSULTER',
-        version: '3.0.4',
+        name: 'Référentiel Produits',
+        versionMajor: 3,
+        versionMinor: 0,
+        versionPatch: 4,
+        isCurrent: true,
         description:
           'A sample API that uses a petstore as an example to demonstrate features in the OpenAPI specification.',
         type: 'OPENAPI',
         yamlContent: PETSTORE_YAML,
         status: 'PENDING',
         categoryId: produits.id,
-        functionalDoc: 'Cas d\'usage : gestion du catalogue produits. Permet de lister, créer et consulter des animaux de compagnie. Usage typique : intégration e-commerce, démo API REST.',
+        provider: 'DINUM',
-        technicalDoc: 'Authentification Bearer token requise. Pagination via paramètre `limit` (max 100). Réponses JSON selon schéma OpenAPI 3.0. Endpoint base : https://petstore.swagger.io/v3.',
+        contactFunctionalName: 'Alice Martin',
-        externalDocUrl: null,
+        contactFunctionalEntity: 'Équipe Produit',
-        contactFunctional: 'Équipe Produit',
+        contactFunctionalEmail: 'alice.martin@example.gouv.fr',
-        contactTechnical: 'Équipe API',
+        contactTechnicalName: 'Bob Dupont',
-        accessRights: 'API publique — aucune habilitation requise.',
+        contactTechnicalEntity: 'Équipe API',
+        contactTechnicalEmail: 'bob.dupont@example.gouv.fr',
       }),
       this.apiRepo.create({
-        title: 'Streetlights Kafka API',
+        convention: 'ETRE_NOTIFIE',
-        version: '1.0.0',
+        name: 'Éclairage Urbain Kafka',
+        versionMajor: 1,
+        versionMinor: 0,
+        versionPatch: 0,
         description:
           'The Smartylighting Streetlights API allows you to remotely manage the city lights using Kafka messaging.',
         type: 'ASYNCAPI',
         yamlContent: STREETLIGHTS_YAML,
         status: 'PENDING',
         categoryId: evenements.id,
-        functionalDoc: 'Gestion de l\'éclairage urbain IoT. Permet de recevoir les mesures de luminosité des lampadaires et d\'envoyer des commandes d\'allumage/extinction à distance.',
+        provider: 'Bureau Infrastructure',
-        technicalDoc: 'Broker Kafka sécurisé avec SCRAM-SHA-512. Topics : smartylighting.streetlights.1.0.*. Schémas de messages définis en AsyncAPI 3.0. Adresse broker : test.mykafkacluster.org:18092.',
+        contactFunctionalName: 'Claire Leroy',
-        externalDocUrl: null,
+        contactFunctionalEntity: 'Bureau Infrastructure',
-        contactFunctional: 'Bureau Infrastructure',
+        contactFunctionalEmail: 'claire.leroy@example.gouv.fr',
-        contactTechnical: 'ops@example.com',
+        contactTechnicalName: 'David Chen',
-        accessRights: 'Accès sur demande — habilitation DSI requise.',
+        contactTechnicalEntity: 'Ops',
+        contactTechnicalEmail: 'ops@example.com',
       }),
       this.apiRepo.create({
-        title: 'Account Service',
+        convention: 'ETRE_NOTIFIE',
-        version: '1.0.0',
+        name: 'Comptes Utilisateurs',
+        versionMajor: 1,
+        versionMinor: 0,
+        versionPatch: 0,
         description: "Service de gestion des comptes utilisateurs avec publication d'événements.",
         type: 'ASYNCAPI',
         yamlContent: ACCOUNT_SERVICE_YAML,
         status: 'PENDING',
         categoryId: notifications.id,
-        functionalDoc: 'Cycle de vie du compte utilisateur. Publie des événements lors de l\'inscription et du changement de mot de passe. Utilisé par les services de notification et d\'audit.',
+        provider: 'Équipe Comptes',
-        technicalDoc: 'Consommer via broker AMQP ou Kafka. Canaux : user/signedup, user/passwordchanged. Payloads JSON avec horodatage ISO 8601. Spec AsyncAPI 3.0.',
+        contactFunctionalName: 'Emma Roux',
-        externalDocUrl: null,
+        contactFunctionalEntity: 'Équipe Comptes',
-        contactFunctional: 'Équipe Comptes',
+        contactFunctionalEmail: 'emma.roux@example.gouv.fr',
-        contactTechnical: 'dev-core@example.com',
+        contactTechnicalName: 'François Blanc',
-        accessRights: 'Interne uniquement — accès réservé aux services du SI.',
+        contactTechnicalEntity: 'Dev Core',
+        contactTechnicalEmail: 'dev-core@example.com',
       }),
       this.apiRepo.create({
-        title: 'Orders API',
+        convention: 'ENREGISTRER',
-        version: '1.0.0',
+        name: 'Commandes Clients',
+        versionMajor: 1,
+        versionMinor: 0,
+        versionPatch: 0,
         description: 'API de gestion des commandes clients.',
         type: 'OPENAPI',
         yamlContent: ORDERS_YAML,
         status: 'PENDING',
         categoryId: commandes.id,
-        functionalDoc: 'Gestion des commandes clients : création, consultation, mise à jour du statut. Supporte les webhooks pour les transitions de statut (confirmed, shipped, delivered, cancelled).',
+        provider: 'Équipe Commerce',
-        technicalDoc: 'REST + JWT Bearer. Pagination via paramètres `page` et `limit`. Webhook de statut : POST vers URL configurée lors de la transition. Base URL : https://api.example.com/v1.',
+        contactFunctionalName: 'Gaëlle Moreau',
-        externalDocUrl: null,
+        contactFunctionalEntity: 'Équipe Commerce',
-        contactFunctional: 'Équipe Commerce',
+        contactFunctionalEmail: 'gaelle.moreau@example.gouv.fr',
-        contactTechnical: 'api-orders@example.com',
+        contactTechnicalName: 'Hugo Simon',
-        accessRights: 'Partenaires agréés uniquement — convention de partenariat requise.',
+        contactTechnicalEntity: 'API Commerce',
+        contactTechnicalEmail: 'api-orders@example.com',
       }),
       this.apiRepo.create({
-        title: 'Auth API',
+        convention: 'CONSULTER',
-        version: '1.0.0',
+        name: 'Référentiel Produits',
+        versionMajor: 3,
+        versionMinor: 0,
+        versionPatch: 3,
+        isCurrent: false,
+        description:
+          'A sample API that uses a petstore as an example to demonstrate features in the OpenAPI specification.',
+        type: 'OPENAPI',
+        yamlContent: PETSTORE_YAML,
+        status: 'PENDING',
+        categoryId: produits.id,
+        provider: 'DINUM',
+        contactFunctionalName: 'Alice Martin',
+        contactFunctionalEntity: 'Équipe Produit',
+        contactFunctionalEmail: 'alice.martin@example.gouv.fr',
+        contactTechnicalName: 'Bob Dupont',
+        contactTechnicalEntity: 'Équipe API',
+        contactTechnicalEmail: 'bob.dupont@example.gouv.fr',
+      }),
+      this.apiRepo.create({
+        convention: 'CONSULTER',
+        name: 'Référentiel Produits',
+        versionMajor: 3,
+        versionMinor: 0,
+        versionPatch: 2,
+        isCurrent: false,
+        description:
+          'A sample API that uses a petstore as an example to demonstrate features in the OpenAPI specification.',
+        type: 'OPENAPI',
+        yamlContent: PETSTORE_YAML,
+        status: 'PENDING',
+        categoryId: produits.id,
+        provider: 'DINUM',
+        contactFunctionalName: 'Alice Martin',
+        contactFunctionalEntity: 'Équipe Produit',
+        contactFunctionalEmail: 'alice.martin@example.gouv.fr',
+        contactTechnicalName: 'Bob Dupont',
+        contactTechnicalEntity: 'Équipe API',
+        contactTechnicalEmail: 'bob.dupont@example.gouv.fr',
+      }),
+      this.apiRepo.create({
+        convention: 'CONSULTER',
+        name: 'Authentification JWT',
+        versionMajor: 1,
+        versionMinor: 0,
+        versionPatch: 0,
         description: "Service d'authentification et d'autorisation.",
         type: 'OPENAPI',
         yamlContent: AUTH_YAML,
         status: 'PENDING',
         categoryId: auth.id,
-        functionalDoc: 'SSO centralisé avec tokens JWT. Gère la connexion, le rafraîchissement de token et la déconnexion. Exposé à tous les services du SI comme fournisseur d\'identité.',
+        provider: 'Équipe Sécurité',
-        technicalDoc: 'Bearer JWT (RS256). Endpoint principal : POST /auth/login. Refresh via POST /auth/refresh. Durée access token : 15 min. Durée refresh token : 7 jours. Base URL : https://auth.example.com/v1.',
+        contactFunctionalName: 'Isabelle Petit',
-        externalDocUrl: null,
+        contactFunctionalEntity: 'Équipe Sécurité',
-        contactFunctional: 'Équipe Sécurité',
+        contactFunctionalEmail: 'isabelle.petit@example.gouv.fr',
-        contactTechnical: 'securite@example.com',
+        contactTechnicalName: 'Julien Bernard',
-        accessRights: 'Restreint — habilitation RSSI requise avant intégration.',
+        contactTechnicalEntity: 'Sécurité SI',
+        contactTechnicalEmail: 'securite@example.com',
       }),
     ]);
 
-    console.log('[Seeder] 8 catégories et 5 APIs de démo créées — génération docs en cours...');
+    this.logger.log('8 catégories et 7 APIs de démo créées — génération docs en cours...');
 
     /* Déclenche la génération de docs en fire-and-forget pour chaque API */
     for (const entry of entries) {
-      this.docsService.generate(entry.id).catch(console.error);
+      this.docsService
+        .generate(entry.id)
+        .catch((err) => this.logger.error(`Génération docs échouée pour ${entry.id}`, err));
     }
   }
 }

back/src/modules/uploads/dto/create-api-upload.dto.spec.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect } from 'vitest';
+import { plainToInstance } from 'class-transformer';
+import { validateSync } from 'class-validator';
+import { CreateApiUploadDto } from './create-api-upload.dto';
+
+function validate(payload: Record<string, unknown>) {
+  const dto = plainToInstance(CreateApiUploadDto, payload, { enableImplicitConversion: true });
+  return validateSync(dto, { whitelist: true });
+}
+
+describe('CreateApiUploadDto', () => {
+  it('accepte un payload minimal (name seul requis)', () => {
+    expect(validate({ name: 'Mon API' })).toHaveLength(0);
+  });
+
+  it('rejette un name manquant', () => {
+    expect(validate({}).some((e) => e.property === 'name')).toBe(true);
+  });
+
+  it('accepte des emails de contact vides (@ValidateIf)', () => {
+    expect(
+      validate({ name: 'X', contactFunctionalEmail: '', contactTechnicalEmail: '' }),
+    ).toHaveLength(0);
+  });
+
+  it('rejette un email renseigné mais invalide', () => {
+    expect(
+      validate({ name: 'X', contactFunctionalEmail: 'pas-un-email' }).some(
+        (e) => e.property === 'contactFunctionalEmail',
+      ),
+    ).toBe(true);
+  });
+
+  it('accepte un email valide', () => {
+    expect(validate({ name: 'X', contactFunctionalEmail: 'a@b.fr' })).toHaveLength(0);
+  });
+
+  it('rejette une convention hors énumération', () => {
+    expect(
+      validate({ name: 'X', convention: 'FOO' }).some((e) => e.property === 'convention'),
+    ).toBe(true);
+  });
+
+  it('rejette un name trop long (>255)', () => {
+    expect(
+      validate({ name: 'a'.repeat(256) }).some((e) => e.property === 'name'),
+    ).toBe(true);
+  });
+});

back/src/modules/uploads/dto/create-api-upload.dto.ts

@@ -0,0 +1,96 @@
+import { Type } from 'class-transformer';
+import {
+  IsEmail,
+  IsIn,
+  IsInt,
+  IsNotEmpty,
+  IsOptional,
+  IsString,
+  IsUUID,
+  MaxLength,
+  Min,
+  ValidateIf,
+} from 'class-validator';
+import { ApiConvention, ApiType, API_CONVENTIONS, API_TYPES } from '@datacat/shared';
+
+/**
+ * Corps du multipart POST /uploads. Les valeurs arrivent en `string` (form-data)
+ * et sont transformées par le ValidationPipe global (transform:true).
+ *
+ * Strictness alignée sur le comportement existant pour ne pas casser le front :
+ * seul `name` est réellement requis ; provider/contacts peuvent être vides ; les
+ * emails ne sont validés que s'ils sont renseignés (@ValidateIf).
+ */
+export class CreateApiUploadDto {
+  @IsIn([...API_CONVENTIONS])
+  @IsOptional()
+  convention?: ApiConvention;
+
+  @IsString()
+  @IsNotEmpty()
+  @MaxLength(255)
+  name!: string;
+
+  @IsString()
+  @IsOptional()
+  @MaxLength(255)
+  provider?: string;
+
+  @Type(() => Number)
+  @IsInt()
+  @Min(0)
+  @IsOptional()
+  versionMajor?: number;
+
+  @Type(() => Number)
+  @IsInt()
+  @Min(0)
+  @IsOptional()
+  versionMinor?: number;
+
+  @Type(() => Number)
+  @IsInt()
+  @Min(0)
+  @IsOptional()
+  versionPatch?: number;
+
+  @IsString()
+  @IsOptional()
+  description?: string;
+
+  @IsIn([...API_TYPES])
+  @IsOptional()
+  type?: ApiType;
+
+  @IsUUID()
+  @IsOptional()
+  categoryId?: string;
+
+  @IsString()
+  @IsOptional()
+  @MaxLength(255)
+  contactFunctionalName?: string;
+
+  @IsString()
+  @IsOptional()
+  @MaxLength(255)
+  contactFunctionalEntity?: string;
+
+  @ValidateIf((o: CreateApiUploadDto) => !!o.contactFunctionalEmail)
+  @IsEmail()
+  contactFunctionalEmail?: string;
+
+  @IsString()
+  @IsOptional()
+  @MaxLength(255)
+  contactTechnicalName?: string;
+
+  @IsString()
+  @IsOptional()
+  @MaxLength(255)
+  contactTechnicalEntity?: string;
+
+  @ValidateIf((o: CreateApiUploadDto) => !!o.contactTechnicalEmail)
+  @IsEmail()
+  contactTechnicalEmail?: string;
+}

back/src/modules/uploads/uploads.controller.spec.ts

@@ -0,0 +1,93 @@
+import { describe, it, expect } from 'vitest';
+import { UploadsController } from './uploads.controller';
+
+/** Accès à la méthode privée sans instancier le contrôleur complet */
+function extract(yamlContent: string) {
+  return (UploadsController.prototype as any).extractMetadata.call({}, yamlContent);
+}
+
+describe('UploadsController.extractMetadata()', () => {
+  describe('version OpenAPI standard', () => {
+    it('"1.2.3" → major=1, minor=2, patch=3', () => {
+      const result = extract('info:\n  title: Test\n  version: "1.2.3"');
+      expect(result.versionMajor).toBe(1);
+      expect(result.versionMinor).toBe(2);
+      expect(result.versionPatch).toBe(3);
+    });
+
+    it('"1.0" → major=1, minor=0, patch=null', () => {
+      const result = extract('info:\n  title: Test\n  version: "1.0"');
+      expect(result.versionMajor).toBe(1);
+      expect(result.versionMinor).toBe(0);
+      expect(result.versionPatch).toBeNull();
+    });
+
+    it('"2" → major=2, minor=null, patch=null', () => {
+      const result = extract('info:\n  title: Test\n  version: "2"');
+      expect(result.versionMajor).toBe(2);
+      expect(result.versionMinor).toBeNull();
+      expect(result.versionPatch).toBeNull();
+    });
+
+    it('"0.0.0" → major=0, minor=0, patch=0', () => {
+      const result = extract('info:\n  title: Test\n  version: "0.0.0"');
+      expect(result.versionMajor).toBe(0);
+      expect(result.versionMinor).toBe(0);
+      expect(result.versionPatch).toBe(0);
+    });
+  });
+
+  describe('extraction du nom et description', () => {
+    it('title présent → name extrait', () => {
+      const result = extract('info:\n  title: Mon API\n  version: "1.0.0"');
+      expect(result.name).toBe('Mon API');
+    });
+
+    it('title absent → name=null', () => {
+      const result = extract('info:\n  version: "1.0.0"');
+      expect(result.name).toBeNull();
+    });
+
+    it('description présente → description extraite', () => {
+      const result = extract('info:\n  title: Test\n  version: "1.0.0"\n  description: Une description');
+      expect(result.description).toBe('Une description');
+    });
+
+    it('description absente → description=null', () => {
+      const result = extract('info:\n  title: Test\n  version: "1.0.0"');
+      expect(result.description).toBeNull();
+    });
+  });
+
+  describe('cas limite de version', () => {
+    it('version non numérique ("alpha") → major=null, minor=null, patch=null', () => {
+      const result = extract('info:\n  title: Test\n  version: alpha');
+      expect(result.versionMajor).toBeNull();
+      expect(result.versionMinor).toBeNull();
+      expect(result.versionPatch).toBeNull();
+    });
+
+    it('version absente → tout null', () => {
+      const result = extract('info:\n  title: Test');
+      expect(result.versionMajor).toBeNull();
+      expect(result.versionMinor).toBeNull();
+      expect(result.versionPatch).toBeNull();
+    });
+
+    it('version vide string "" → tout null', () => {
+      const result = extract('info:\n  title: Test\n  version: ""');
+      expect(result.versionMajor).toBeNull();
+      expect(result.versionMinor).toBeNull();
+      expect(result.versionPatch).toBeNull();
+    });
+
+    it('info absent → tout null', () => {
+      const result = extract('asyncapi: "3.0.0"');
+      expect(result.name).toBeNull();
+      expect(result.description).toBeNull();
+      expect(result.versionMajor).toBeNull();
+      expect(result.versionMinor).toBeNull();
+      expect(result.versionPatch).toBeNull();
+    });
+  });
+});

back/src/modules/uploads/uploads.controller.ts

@@ -5,32 +5,168 @@ import {
   UploadedFiles,
   Body,
   BadRequestException,
+  Logger,
 } from '@nestjs/common';
 import { FilesInterceptor } from '@nestjs/platform-express';
 import { diskStorage } from 'multer';
-import * as fs from 'fs';
 import * as fsPromises from 'fs/promises';
 import * as path from 'path';
+import * as os from 'os';
+import * as yaml from 'js-yaml';
 import { execFile } from 'child_process';
 import { promisify } from 'util';
 import { randomUUID } from 'crypto';
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const asyncapiBundle = require('@asyncapi/bundler');
+
+const execFileAsync = promisify(execFile);
+const localBin = path.join(process.cwd(), 'node_modules', '.bin');
+const execEnv = {
+  ...process.env,
+  PATH: `${localBin}${path.delimiter}${process.env.PATH ?? ''}`,
+};
 import { ApisService } from '../apis/apis.service';
 import { DocsGenerationService } from '../docs-generation/docs-generation.service';
 import { ApiType } from '@datacat/shared';
-
+import { CreateApiUploadDto } from './dto/create-api-upload.dto';
-const execFileAsync = promisify(execFile);
 
 @Controller('uploads')
 export class UploadsController {
+  private readonly logger = new Logger(UploadsController.name);
+
   constructor(
     private readonly apisService: ApisService,
     private readonly docsService: DocsGenerationService,
   ) {}
 
+  @Post('validate')
+  @UseInterceptors(
+    FilesInterceptor('files', 20, {
+      storage: diskStorage({ destination: path.join(os.tmpdir(), 'datacat-uploads') }),
+      fileFilter: (_req, file, cb) => {
+        if (!file.originalname.match(/\.(yaml|yml)$/i)) {
+          return cb(new BadRequestException('Only YAML files are allowed'), false);
+        }
+        cb(null, true);
+      },
+    }),
+  )
+  async validate(
+    @UploadedFiles() files: Express.Multer.File[],
+  ): Promise<{
+    valid: boolean;
+    type: ApiType | null;
+    mainFile: string | null;
+    name: string | null;
+    versionMajor: number | null;
+    versionMinor: number | null;
+    versionPatch: number | null;
+    description: string | null;
+    errors: Array<{ file: string; message: string }>;
+  }> {
+    if (!files || files.length === 0) {
+      return { valid: false, type: null, mainFile: null, name: null, versionMajor: null, versionMinor: null, versionPatch: null, description: null, errors: [{ file: '', message: 'Aucun fichier fourni.' }] };
+    }
+
+    /* Lire tous les contenus en mémoire avant toute suppression */
+    const fileContents = await Promise.all(
+      files.map(async (file) => ({
+        name: file.originalname,
+        path: file.path,
+        content: await fsPromises.readFile(file.path, 'utf-8'),
+      })),
+    );
+
+    /* Nettoyage immédiat des fichiers temporaires */
+    for (const file of files) {
+      fsPromises.unlink(file.path).catch(() => undefined);
+    }
+
+    const errors: Array<{ file: string; message: string }> = [];
+
+    /* Validation syntaxique de chaque fichier */
+    for (const { name, content } of fileContents) {
+      try {
+        const parsed = yaml.load(content);
+        if (parsed === null || typeof parsed !== 'object') {
+          errors.push({ file: name, message: 'le fichier YAML est vide ou invalide' });
+        }
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        errors.push({ file: name, message: `erreur de syntaxe YAML — ${msg}` });
+      }
+    }
+
+    if (errors.length > 0) {
+      return { valid: false, type: null, mainFile: null, name: null, versionMajor: null, versionMinor: null, versionPatch: null, description: null, errors };
+    }
+
+    /* Détection du fichier principal */
+    let mainFileName: string | null = null;
+    let detectedType: ApiType | null = null;
+
+    for (const { name, content } of fileContents) {
+      const type = this.detectTypeFromContent(content);
+      if (type) {
+        mainFileName = name;
+        detectedType = type;
+        break;
+      }
+    }
+
+    if (!mainFileName) {
+      return {
+        valid: false, type: null, mainFile: null, name: null, versionMajor: null, versionMinor: null, versionPatch: null, description: null,
+        errors: [{ file: '', message: 'Aucun fichier principal trouvé (clé openapi: ou asyncapi: manquante).' }],
+      };
+    }
+
+    /* Validation complète via CLI (asyncapi validate / redocly lint) */
+    const tempDir = path.join(os.tmpdir(), 'datacat-validate', randomUUID());
+    try {
+      await fsPromises.mkdir(tempDir, { recursive: true });
+
+      /* Écrire tous les fichiers dans le répertoire temp avec leurs noms d'origine (pour les $ref) */
+      for (const { name, content } of fileContents) {
+        await fsPromises.writeFile(path.join(tempDir, name), content, 'utf-8');
+      }
+
+      const mainPath = path.join(tempDir, mainFileName);
+
+      try {
+        if (detectedType === 'ASYNCAPI') {
+          await execFileAsync('asyncapi', ['validate', mainPath], { env: execEnv, shell: true, timeout: 30000 });
+        } else {
+          await execFileAsync('redocly', ['lint', mainPath], { env: execEnv, shell: true, timeout: 30000 });
+        }
+      } catch (cliError) {
+        const err = cliError as NodeJS.ErrnoException & { stdout?: string; stderr?: string };
+        /* CLI non installé (dev local sans Docker) → skip la validation complète */
+        if (err.code !== 'ENOENT') {
+          const output = (err.stdout || err.stderr || String(cliError)).trim();
+          return {
+            valid: false, type: detectedType, mainFile: mainFileName,
+            name: null, versionMajor: null, versionMinor: null, versionPatch: null, description: null,
+            errors: [{ file: mainFileName, message: output }],
+          };
+        }
+        this.logger.warn(`CLI ${detectedType === 'ASYNCAPI' ? 'asyncapi' : 'redocly'} non trouvé — validation CLI ignorée`);
+      }
+    } finally {
+      await fsPromises.rm(tempDir, { recursive: true, force: true }).catch(() => undefined);
+    }
+
+    /* Extraction des métadonnées depuis le fichier principal */
+    const mainContent = fileContents.find((f) => f.name === mainFileName)!.content;
+    const { name, description, versionMajor, versionMinor, versionPatch } = this.extractMetadata(mainContent);
+
+    return { valid: true, type: detectedType, mainFile: mainFileName, name, versionMajor, versionMinor, versionPatch, description, errors: [] };
+  }
+
   @Post()
   @UseInterceptors(
     FilesInterceptor('files', 20, {
-      storage: diskStorage({ destination: '/tmp/uploads' }),
+      storage: diskStorage({ destination: path.join(os.tmpdir(), 'datacat-uploads') }),
       fileFilter: (_req, file, cb) => {
         if (!file.originalname.match(/\.(yaml|yml)$/i)) {
           return cb(new BadRequestException('Only YAML files are allowed'), false);
@@ -41,41 +177,32 @@ export class UploadsController {
   )
   async upload(
     @UploadedFiles() files: Express.Multer.File[],
-    @Body()
+    @Body() body: CreateApiUploadDto,
-    body: {
-      title: string;
-      version: string;
-      description?: string;
-      type?: ApiType;
-      categoryId?: string;
-      functionalDoc?: string;
-      technicalDoc?: string;
-      externalDocUrl?: string;
-      contactFunctional?: string;
-      contactTechnical?: string;
-      accessRights?: string;
-    },
   ) {
-    if (!files || files.length === 0) throw new BadRequestException('YAML file is required');
+    /* Crée le répertoire si absent (mkdir recursive est idempotent) */
-    if (!body.title) throw new BadRequestException('title is required');
+    const uploadDir = path.join(os.tmpdir(), 'datacat-uploads');
-    if (!body.version) throw new BadRequestException('version is required');
+    await fsPromises.mkdir(uploadDir, { recursive: true });
-
-    /* Crée le répertoire si absent */
-    if (!fs.existsSync('/tmp/uploads')) {
-      fs.mkdirSync('/tmp/uploads', { recursive: true });
-    }
 
     let yamlContent: string;
     let detectedType: ApiType | null = null;
 
-    if (files.length === 1) {
+    if (!files || files.length === 0) {
-      /* Cas simple : un seul fichier, comportement identique à l'ancien */
+      /* Pas de fichier : entrée créée sans YAML (YAML pourra être ajouté plus tard) */
-      yamlContent = fs.readFileSync(files[0].path, 'utf-8');
+      yamlContent = '';
+    } else if (files.length === 1) {
+      /* Cas simple : un seul fichier */
+      yamlContent = await fsPromises.readFile(files[0].path, 'utf-8');
+
+      /* Validation syntaxique YAML */
+      this.validateYamlSyntax(yamlContent, files[0].originalname);
+
       detectedType = this.detectTypeFromContent(yamlContent);
     } else {
       /* Cas multi-fichiers : détecter le fichier principal et bundler */
-      const { mainFile, type } = this.detectMainFile(files);
+      const { mainFile, type } = await this.detectMainFile(files);
       detectedType = type;
+
+      this.logger.log(`Multi-file upload: main=${mainFile.originalname}, type=${type}, total=${files.length} files`);
       yamlContent = await this.bundleFiles(files, mainFile, type);
     }
 
@@ -86,26 +213,76 @@ export class UploadsController {
     }
 
     const entry = await this.apisService.create({
-      title: body.title,
+      convention: body.convention ?? 'CONSULTER',
-      version: body.version,
+      name: body.name,
+      provider: body.provider ?? '',
+      versionMajor: body.versionMajor ?? 0,
+      versionMinor: body.versionMinor ?? 0,
+      versionPatch: body.versionPatch ?? 0,
       description: body.description,
       type: apiType,
       yamlContent,
       categoryId: body.categoryId || undefined,
-      functionalDoc: body.functionalDoc || undefined,
+      contactFunctionalName: body.contactFunctionalName ?? '',
-      technicalDoc: body.technicalDoc || undefined,
+      contactFunctionalEntity: body.contactFunctionalEntity ?? '',
-      externalDocUrl: body.externalDocUrl || undefined,
+      contactFunctionalEmail: body.contactFunctionalEmail ?? '',
-      contactFunctional: body.contactFunctional || undefined,
+      contactTechnicalName: body.contactTechnicalName ?? '',
-      contactTechnical: body.contactTechnical || undefined,
+      contactTechnicalEntity: body.contactTechnicalEntity ?? '',
-      accessRights: body.accessRights || undefined,
+      contactTechnicalEmail: body.contactTechnicalEmail ?? '',
     });
 
-    /* Fire-and-forget : génération asynchrone */
+    /* Fire-and-forget : génération asynchrone (seulement si YAML fourni) */
-    this.docsService.generate(entry.id).catch(console.error);
+    if (yamlContent) {
+      this.docsService
+        .generate(entry.id)
+        .catch((err) => this.logger.error(`Génération docs échouée pour ${entry.id}`, err));
+    }
 
     return entry;
   }
 
+  /** Extrait les métadonnées (titre, description, version) depuis le contenu YAML */
+  private extractMetadata(yamlContent: string): {
+    name: string | null;
+    description: string | null;
+    versionMajor: number | null;
+    versionMinor: number | null;
+    versionPatch: number | null;
+  } {
+    const parsed = yaml.load(yamlContent) as Record<string, unknown>;
+    const info = parsed['info'] as Record<string, unknown> | undefined;
+    const name = typeof info?.['title'] === 'string' ? info['title'] : null;
+    const description = typeof info?.['description'] === 'string' ? info['description'] : null;
+
+    let versionMajor: number | null = null;
+    let versionMinor: number | null = null;
+    let versionPatch: number | null = null;
+    const versionStr = typeof info?.['version'] === 'string' ? info['version'] : null;
+    if (versionStr) {
+      const parts = versionStr.split('.').map((p) => parseInt(p, 10));
+      if (parts.length >= 1 && !isNaN(parts[0])) versionMajor = parts[0];
+      if (parts.length >= 2 && !isNaN(parts[1])) versionMinor = parts[1];
+      if (parts.length >= 3 && !isNaN(parts[2])) versionPatch = parts[2];
+    }
+
+    return { name, description, versionMajor, versionMinor, versionPatch };
+  }
+
+  /** Valide la syntaxe YAML et lève une BadRequestException si invalide */
+  private validateYamlSyntax(content: string, filename: string): void {
+    try {
+      const parsed = yaml.load(content);
+      if (parsed === null || typeof parsed !== 'object') {
+        throw new BadRequestException(`${filename}: le fichier YAML est vide ou invalide`);
+      }
+    } catch (err) {
+      if (err instanceof BadRequestException) throw err;
+      const msg = err instanceof Error ? err.message : String(err);
+      this.logger.warn(`Validation YAML échouée pour ${filename}: ${msg}`);
+      throw new BadRequestException(`${filename}: erreur de syntaxe YAML — ${msg}`);
+    }
+  }
+
   private detectTypeFromContent(content: string): ApiType | null {
     /* Cherche la clé racine openapi: ou asyncapi: sans dépendance à js-yaml */
     if (/^openapi\s*:/m.test(content)) return 'OPENAPI';
@@ -113,9 +290,11 @@ export class UploadsController {
     return null;
   }
 
-  private detectMainFile(files: Express.Multer.File[]): { mainFile: Express.Multer.File; type: ApiType } {
+  private async detectMainFile(
+    files: Express.Multer.File[],
+  ): Promise<{ mainFile: Express.Multer.File; type: ApiType }> {
     for (const file of files) {
-      const content = fs.readFileSync(file.path, 'utf-8');
+      const content = await fsPromises.readFile(file.path, 'utf-8');
       const type = this.detectTypeFromContent(content);
       if (type) {
         return { mainFile: file, type };
@@ -131,7 +310,7 @@ export class UploadsController {
     mainFile: Express.Multer.File,
     type: ApiType,
   ): Promise<string> {
-    const tempDir = `/tmp/uploads/${randomUUID()}`;
+    const tempDir = path.join(os.tmpdir(), 'datacat-uploads', randomUUID());
     const bundledPath = path.join(tempDir, 'bundled.yaml');
 
     try {
@@ -145,12 +324,15 @@ export class UploadsController {
       const mainPath = path.join(tempDir, mainFile.originalname);
 
       if (type === 'OPENAPI') {
-        await execFileAsync('redocly', ['bundle', mainPath, '--output', bundledPath]);
+        /* redocly bundle : pas d'appel réseau, fonctionne en local */
-      } else {
+        await execFileAsync('redocly', ['bundle', mainPath, '--output', bundledPath], { env: execEnv });
-        await execFileAsync('asyncapi', ['bundle', mainPath, '--output', bundledPath]);
-      }
-
         return await fsPromises.readFile(bundledPath, 'utf-8');
+      } else {
+        /* @asyncapi/bundler API programmatique : aucun appel réseau */
+        const bundleFn = asyncapiBundle.default ?? asyncapiBundle;
+        const document = await bundleFn([mainPath], { base: mainPath });
+        return document.string();
+      }
     } finally {
       /* Nettoyage du répertoire temp même en cas d'erreur */
       await fsPromises.rm(tempDir, { recursive: true, force: true }).catch(() => undefined);

back/tsconfig.json

@@ -10,10 +10,9 @@
     "target": "ES2021",
     "sourceMap": true,
     "outDir": "./dist",
+    "rootDir": "../",
     "baseUrl": "./",
-    "incremental": true,
+    "incremental": true
-    "paths": {
+  },
-      "@datacat/shared": ["../shared/src/index.ts"]
+  "include": ["src/**/*.ts"]
-    }
-  }
 }

back/vitest-setup.ts

@@ -0,0 +1,3 @@
+// Requis pour que les décorateurs class-validator / class-transformer
+// (Reflect.getMetadata) fonctionnent dans les tests, comme dans l'app (main.ts).
+import 'reflect-metadata';

back/vitest.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'node',
+    setupFiles: ['./vitest-setup.ts'],
+    include: ['src/**/*.spec.ts'],
+    coverage: {
+      provider: 'v8',
+      reportsDirectory: './coverage',
+      reporter: ['text', 'html', 'lcov'],
+      include: ['src/**/*.ts'],
+      exclude: [
+        'src/**/*.spec.ts',
+        'src/**/*.module.ts',
+        'src/**/*.entity.ts',
+        'src/main.ts',
+        'src/**/*.dto.ts',
+      ],
+    },
+  },
+});

documentation/CLAUDE.md

@@ -3,7 +3,7 @@
 ## 1. Purpose & Architecture
 
 **Datacat** est un catalogue de données d'API. Il permet d'importer des fichiers YAML
-(AsyncAPI ou OpenAPI) et de les transformer en documentation HTML via des CLI spécialisées.
+(AsyncAPI ou OpenAPI) et de les transformer en documentation HTML.
 
 ```
 datacat/
@@ -19,8 +19,8 @@ datacat/
 User uploads YAML → POST /api/uploads
   → ApiEntry created (status: PENDING)
   → DocsGenerationService.generate()
-      → asyncapi generate fromFile input.yaml --output /docs-output/<id>/
+      → AsyncAPI : API programmatique @asyncapi/generator (html-template local)
-      → OR redocly build-docs input.yaml --output /docs-output/<id>/index.html
+      → OpenAPI  : redocly build-docs input.yaml --output /docs-output/<id>/index.html
   → ApiEntry updated (status: GENERATED, htmlPath: /docs-output/<id>/index.html)
   → GET /api/apis/:id/docs → sendFile(htmlPath)
 ```
@@ -31,17 +31,15 @@ User uploads YAML → POST /api/uploads
 
 ```bash
 # Tout en Docker (recommandé)
-pnpm run dev           # docker compose up
+docker compose -f infra/docker-compose.yml up -d
-pnpm run dev:build     # docker compose up --build
+docker compose -f infra/docker-compose.yml up -d --build  # avec rebuild
 
 # Local (sans Docker)
-cd back && pnpm run start:dev         # NestJS watch mode — port 3000
+cd back && pnpm run start:dev         # NestJS watch mode — port 3000 interne / 3010 hôte
 cd front-public && pnpm run start     # Angular dev server — port 4200
 
-# Install deps
+# Install deps (depuis la racine workspace)
-cd back && pnpm install
+pnpm install
-cd front-public && pnpm install
-cd shared && pnpm install
 
 # Build prod
 cd back && pnpm run build
@@ -49,11 +47,21 @@ cd front-public && pnpm run build:prod
 ```
 
 ### Proxy Angular → API
-Créer `front-public/proxy.conf.json` :
+`front-public/proxy.conf.json` (développement local) :
 ```json
 {
   "/api": {
-    "target": "http://localhost:3000",
+    "target": "http://localhost:3010",
+    "secure": false
+  }
+}
+```
+
+`front-public/proxy.conf.docker.json` (dans Docker) :
+```json
+{
+  "/api": {
+    "target": "http://backend:3000",
     "secure": false
   }
 }
@@ -71,9 +79,10 @@ Créer `front-public/proxy.conf.json` :
 | TypeORM | ^0.3.20 |
 | PostgreSQL | 17 |
 | Angular | ^19.0.0 |
-| TypeScript | ^5.7.0 |
+| TypeScript | ~5.8.3 |
-| @asyncapi/cli | latest (in Docker) |
+| @asyncapi/cli | 6.0.0 (in Docker) |
 | @redocly/cli | latest (in Docker) |
+| @gouvfr/dsfr | ^1.13.0 (npm devDep front-public) |
 
 ### Conventions TypeScript
 - Pas de `any` — utiliser les types de `@datacat/shared`
@@ -89,8 +98,13 @@ Créer `front-public/proxy.conf.json` :
 ```sql
 CREATE TABLE api_entries (
   id                        UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-  title         VARCHAR(255) NOT NULL,
+  convention                VARCHAR(30)  NOT NULL DEFAULT 'CONSULTER'
-  version       VARCHAR(50)  NOT NULL,
+                            CHECK (convention IN ('CONSULTER','ENREGISTRER','ETRE_NOTIFIE')),
+  name                      VARCHAR(255) NOT NULL DEFAULT '',
+  provider                  VARCHAR(255) NOT NULL DEFAULT '',
+  version_major             INT          NOT NULL DEFAULT 0,
+  version_minor             INT          NOT NULL DEFAULT 0,
+  version_patch             INT          NOT NULL DEFAULT 0,
   description               TEXT,
   type                      VARCHAR(10)  NOT NULL CHECK (type IN ('ASYNCAPI', 'OPENAPI')),
   yaml_content              TEXT         NOT NULL,
@@ -98,51 +112,95 @@ CREATE TABLE api_entries (
   status                    VARCHAR(10)  NOT NULL DEFAULT 'PENDING'
                             CHECK (status IN ('PENDING', 'GENERATED', 'ERROR')),
   error_message             TEXT,
+  category_id               VARCHAR(36),
+  contact_functional_name   VARCHAR(255) NOT NULL DEFAULT '',
+  contact_functional_entity VARCHAR(255) NOT NULL DEFAULT '',
+  contact_functional_email  VARCHAR(255) NOT NULL DEFAULT '',
+  contact_technical_name    VARCHAR(255) NOT NULL DEFAULT '',
+  contact_technical_entity  VARCHAR(255) NOT NULL DEFAULT '',
+  contact_technical_email   VARCHAR(255) NOT NULL DEFAULT '',
   created_at                TIMESTAMPTZ  NOT NULL DEFAULT NOW(),
   updated_at                TIMESTAMPTZ  NOT NULL DEFAULT NOW()
 );
 ```
 
+> `title` et `version` sont des champs **calculés** (pas en DB) :
+> - `title` = `CONVENTION_LABEL + ' ' + name` (ex: `"Consulter Petstore"`)
+> - `version` = `"major.minor.patch"` (ex: `"1.2.0"`)
+
 ### Entity TypeORM (`back/src/modules/apis/api-entry.entity.ts`)
 
 ```typescript
 import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, UpdateDateColumn } from 'typeorm';
-import { ApiType, ApiStatus } from '@datacat/shared';
+import { ApiType, ApiStatus, ApiConvention } from '@datacat/shared';
 
 @Entity('api_entries')
 export class ApiEntryEntity {
   @PrimaryGeneratedColumn('uuid')
-  id: string;
+  id!: string;
 
-  @Column()
+  @Column({ type: 'varchar', length: 30, default: 'CONSULTER' })
-  title: string;
+  convention!: ApiConvention;
 
-  @Column()
+  @Column({ type: 'varchar', length: 255, default: '' })
-  version: string;
+  name!: string;
 
   @Column({ nullable: true, type: 'text' })
-  description: string | null;
+  description!: string | null;
 
   @Column({ type: 'varchar', length: 10 })
-  type: ApiType;
+  type!: ApiType;
+
+  @Column({ type: 'varchar', length: 255, default: '', name: 'provider' })
+  provider!: string;
+
+  @Column({ type: 'int', default: 0, name: 'version_major' })
+  versionMajor!: number;
+
+  @Column({ type: 'int', default: 0, name: 'version_minor' })
+  versionMinor!: number;
+
+  @Column({ type: 'int', default: 0, name: 'version_patch' })
+  versionPatch!: number;
 
   @Column({ type: 'text', name: 'yaml_content' })
-  yamlContent: string;
+  yamlContent!: string;
 
-  @Column({ nullable: true, name: 'html_path' })
+  @Column({ nullable: true, type: 'varchar', length: 500, name: 'html_path' })
-  htmlPath: string | null;
+  htmlPath!: string | null;
 
   @Column({ type: 'varchar', length: 10, default: 'PENDING' })
-  status: ApiStatus;
+  status!: ApiStatus;
 
   @Column({ nullable: true, type: 'text', name: 'error_message' })
-  errorMessage: string | null;
+  errorMessage!: string | null;
+
+  @Column({ nullable: true, type: 'varchar', length: 36, name: 'category_id' })
+  categoryId!: string | null;
+
+  @Column({ type: 'varchar', length: 255, default: '', name: 'contact_functional_name' })
+  contactFunctionalName!: string;
+
+  @Column({ type: 'varchar', length: 255, default: '', name: 'contact_functional_entity' })
+  contactFunctionalEntity!: string;
+
+  @Column({ type: 'varchar', length: 255, default: '', name: 'contact_functional_email' })
+  contactFunctionalEmail!: string;
+
+  @Column({ type: 'varchar', length: 255, default: '', name: 'contact_technical_name' })
+  contactTechnicalName!: string;
+
+  @Column({ type: 'varchar', length: 255, default: '', name: 'contact_technical_entity' })
+  contactTechnicalEntity!: string;
+
+  @Column({ type: 'varchar', length: 255, default: '', name: 'contact_technical_email' })
+  contactTechnicalEmail!: string;
 
   @CreateDateColumn({ name: 'created_at' })
-  createdAt: Date;
+  createdAt!: Date;
 
   @UpdateDateColumn({ name: 'updated_at' })
-  updatedAt: Date;
+  updatedAt!: Date;
 }
 ```
 
@@ -161,40 +219,60 @@ src/
 │   │   ├── apis.module.ts
 │   │   ├── apis.controller.ts      # REST endpoints
 │   │   ├── apis.service.ts         # CRUD logique
-│   │   └── api-entry.entity.ts     # TypeORM entity
+│   │   ├── api-entry.entity.ts     # TypeORM entity
+│   │   ├── api-entry.mapper.ts     # entity → DTO (calcul title/version)
+│   │   └── dto/
+│   │       ├── create-api-entry.dto.ts
+│   │       └── update-api-entry.dto.ts
 │   ├── uploads/
 │   │   ├── uploads.module.ts
-│   │   └── uploads.controller.ts   # POST /api/uploads (multipart)
+│   │   └── uploads.controller.ts   # POST /api/uploads + POST /api/uploads/validate
-│   └── docs-generation/
+│   ├── docs-generation/
-│       ├── docs-generation.module.ts
+│   │   ├── docs-generation.module.ts
-│       └── docs-generation.service.ts  # Appels AsyncAPI/Redocly CLI
+│   │   └── docs-generation.service.ts  # API programmatique @asyncapi/generator + redocly CLI
-├── database/
+│   ├── categories/
-│   └── database.module.ts          # TypeORM config (si séparé)
+│   │   ├── categories.module.ts
+│   │   ├── categories.controller.ts
+│   │   ├── categories.service.ts
+│   │   └── category.entity.ts
+│   └── seeder/
+│       ├── seeder.module.ts
+│       └── seeder.service.ts       # Données de démo (idempotent, OnApplicationBootstrap)
+├── health/
+│   ├── health.module.ts
+│   └── health.controller.ts
 └── common/
-    ├── filters/
+    └── filters/
-    │   └── all-exceptions.filter.ts
+        └── all-exceptions.filter.ts
-    └── interceptors/
-        └── transform.interceptor.ts
 ```
 
 ### API REST
 
 ```
 GET    /health                          → { status: 'ok' }
-GET    /api/apis                       → ApiListResponse (+ ?search=&type=&page=&limit=)
+GET    /api/apis                        → ApiListResponse (+ ?search=&type=&categoryId=&page=&limit=)
 GET    /api/apis/:id                    → ApiEntry
-POST   /api/uploads                    → ApiEntry (multipart: file + title + version + description + type)
 PATCH  /api/apis/:id                    → ApiEntry (body: UpdateApiEntryDto)
 DELETE /api/apis/:id                    → 204 No Content
 POST   /api/apis/:id/regenerate         → ApiEntry (relance la génération de docs)
 GET    /api/apis/:id/docs               → sendFile(htmlPath) ou 404 si pas encore généré
+GET    /api/apis/:id/*path              → assets générés (CSS/JS référencés par index.html)
 GET    /api/apis/:id/yaml               → download du YAML brut (Content-Disposition: attachment)
+POST   /api/uploads                     → ApiEntry (multipart: files 1..20 + métadonnées)
+POST   /api/uploads/validate            → résultat de validation (sans sauvegarde)
+GET    /api/categories                  → liste flat toutes catégories
+GET    /api/categories/browse           → navigation racine (sous-catégories + APIs sans catégorie)
+GET    /api/categories/browse/:id       → navigation dans une catégorie
+GET    /api/categories/:id              → détail catégorie
+POST   /api/categories                  → créer catégorie
+PATCH  /api/categories/:id              → modifier catégorie
+DELETE /api/categories/:id              → supprimer (400 si non vide)
 ```
 
 ### ApisController
 
 ```typescript
-import { Controller, Get, Patch, Delete, Post, Param, Body, Query, Res, NotFoundException } from '@nestjs/common';
+import { Controller, Get, Patch, Delete, Post, Param, Body, Query, Res, NotFoundException, HttpCode } from '@nestjs/common';
 import { Response } from 'express';
 
 @Controller('apis')
@@ -237,7 +315,7 @@ export class ApisController {
   @Get(':id/yaml')
   async getYaml(@Param('id') id: string, @Res() res: Response) {
     const entry = await this.apisService.findOneOrThrow(id);
-    res.setHeader('Content-Disposition', `attachment; filename="${entry.title}.yaml"`);
+    res.setHeader('Content-Disposition', `attachment; filename="${entry.name}.yaml"`);
     res.setHeader('Content-Type', 'application/x-yaml');
     res.send(entry.yamlContent);
   }
@@ -247,8 +325,8 @@ export class ApisController {
 ### UploadsController
 
 ```typescript
-import { Controller, Post, UseInterceptors, UploadedFile, Body } from '@nestjs/common';
+import { Controller, Post, UseInterceptors, UploadedFiles, Body, BadRequestException } from '@nestjs/common';
-import { FileInterceptor } from '@nestjs/platform-express';
+import { FilesInterceptor } from '@nestjs/platform-express';
 import { diskStorage } from 'multer';
 
 @Controller('uploads')
@@ -258,22 +336,38 @@ export class UploadsController {
     private readonly docsService: DocsGenerationService,
   ) {}
 
-  @Post()
+  // POST /api/uploads/validate — valide sans sauvegarder
-  @UseInterceptors(FileInterceptor('file', {
+  @Post('validate')
-    storage: diskStorage({ destination: '/tmp/uploads' }),
+  @UseInterceptors(FilesInterceptor('files', 20, { /* diskStorage + fileFilter yaml */ }))
-    fileFilter: (req, file, cb) => {
+  async validate(@UploadedFiles() files: Express.Multer.File[]) {
-      if (!file.originalname.match(/\.(yaml|yml)$/)) {
+    // Retourne { valid, type, mainFile, name, versionMajor, versionMinor, versionPatch, description, errors }
-        return cb(new Error('Only YAML files are allowed'), false);
   }
-      cb(null, true);
+
-    },
+  // POST /api/uploads — crée l'entrée + lance la génération
-  }))
+  @Post()
+  @UseInterceptors(FilesInterceptor('files', 20, { /* diskStorage + fileFilter yaml */ }))
   async upload(
-    @UploadedFile() file: Express.Multer.File,
+    @UploadedFiles() files: Express.Multer.File[],
-    @Body() body: { title: string; version: string; description?: string; type: 'ASYNCAPI' | 'OPENAPI' },
+    @Body() body: {
+      convention: string;
+      name: string;
+      provider: string;
+      versionMajor: string;    // string car multipart form-data
+      versionMinor: string;
+      versionPatch: string;
+      description?: string;
+      type?: 'ASYNCAPI' | 'OPENAPI';  // optionnel, détecté depuis le YAML
+      categoryId?: string;
+      contactFunctionalName: string;
+      contactFunctionalEntity: string;
+      contactFunctionalEmail: string;
+      contactTechnicalName: string;
+      contactTechnicalEntity: string;
+      contactTechnicalEmail: string;
+    },
   ) {
-    const yamlContent = fs.readFileSync(file.path, 'utf-8');
+    // 1 fichier → lecture directe
-    const entry = await this.apisService.create({ ...body, yamlContent });
+    // N fichiers → détection fichier principal + bundling (redocly bundle / @asyncapi/bundler)
     // Fire and forget — génération asynchrone
     this.docsService.generate(entry.id).catch(console.error);
     return entry;
@@ -289,19 +383,19 @@ import { execFile } from 'child_process';
 import { promisify } from 'util';
 import * as fs from 'fs/promises';
 import * as path from 'path';
+const AsyncApiGenerator = require('@asyncapi/generator');
 
 const execFileAsync = promisify(execFile);
 
 @Injectable()
 export class DocsGenerationService {
-  private readonly outputDir = process.env.DOCS_OUTPUT_DIR ?? '/app/docs-output';
+  private readonly outputDir = process.env.DOCS_OUTPUT_DIR ?? './docs-output';
 
   async generate(entryId: string): Promise<void> {
     const entry = await this.apisService.findOneOrThrow(entryId);
     const entryDir = path.join(this.outputDir, entryId);
 
     await fs.mkdir(entryDir, { recursive: true });
-
     const yamlPath = path.join(entryDir, 'input.yaml');
     await fs.writeFile(yamlPath, entry.yamlContent, 'utf-8');
 
@@ -311,37 +405,32 @@ export class DocsGenerationService {
       } else {
         await this.generateOpenApi(yamlPath, entryDir);
       }
-
+      await this.apisService.updateInternal(entryId, { htmlPath: path.join(entryDir, 'index.html'), status: 'GENERATED' });
-      const htmlPath = path.join(entryDir, 'index.html');
-      await this.apisService.update(entryId, { htmlPath, status: 'GENERATED' });
     } catch (error) {
-      await this.apisService.update(entryId, {
+      await this.apisService.updateInternal(entryId, { status: 'ERROR', errorMessage: String(error) });
-        status: 'ERROR',
-        errorMessage: String(error),
-      });
     }
   }
 
   private async generateAsyncApi(yamlPath: string, outputDir: string): Promise<void> {
-    // asyncapi generate fromFile <input> --output <dir>
+    // API programmatique — aucun appel réseau, template résolu localement
-    await execFileAsync('asyncapi', [
+    const templatePath = path.join(process.cwd(), 'node_modules', '@asyncapi', 'html-template');
-      'generate', 'fromFile',
+    const generator = new AsyncApiGenerator(templatePath, outputDir, { forceWrite: true });
-      yamlPath,
+    await generator.generateFromFile(yamlPath);
-      '--output', outputDir,
-    ]);
   }
 
   private async generateOpenApi(yamlPath: string, outputDir: string): Promise<void> {
-    // redocly build-docs <input> --output <file>
     await execFileAsync('redocly', [
-      'build-docs',
+      'build-docs', yamlPath,
-      yamlPath,
       '--output', path.join(outputDir, 'index.html'),
-    ]);
+    ], { shell: true, env: execEnv });
   }
 }
 ```
 
+> **Note** : `ApisService` expose deux méthodes de mise à jour :
+> - `update(id, dto: UpdateApiEntryDto)` — pour le controller (champs éditables par l'utilisateur)
+> - `updateInternal(id, fields)` — pour `DocsGenerationService` (status / htmlPath / errorMessage)
+
 ---
 
 ## 6. Conventions Angular 19
@@ -362,44 +451,31 @@ import { ActivatedRoute } from '@angular/router';
 import { CommonModule } from '@angular/common';
 
 @Component({
-  selector: 'app-catalog',
+  selector: 'app-browse',
   standalone: true,
   imports: [CommonModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div class="fr-container fr-mt-4w">
-      <h1 class="fr-h1">Catalogue des APIs</h1>
+      <h1 class="fr-h1">Parcourir les APIs</h1>
       @if (loading()) {
         <div class="fr-callout">Chargement...</div>
       }
-      @for (api of apis(); track api.id) {
+      @for (cat of subcategories(); track cat.id) {
         <div class="fr-card fr-mb-2w">
-          <h2>{{ api.title }}</h2>
+          <h2>{{ cat.name }}</h2>
         </div>
       }
     </div>
   `,
 })
-export class CatalogComponent implements OnInit {
+export class BrowseComponent implements OnInit {
   private http = inject(HttpClient);
 
-  apis = signal<ApiEntryListItem[]>([]);
+  subcategories = signal<CategoryWithCounts[]>([]);
   loading = signal(false);
 
-  ngOnInit() {
+  ngOnInit() { /* ... */ }
-    this.loadApis();
-  }
-
-  private loadApis() {
-    this.loading.set(true);
-    this.http.get<ApiListResponse>('/api/apis').subscribe({
-      next: (res) => {
-        this.apis.set(res.items);
-        this.loading.set(false);
-      },
-      error: () => this.loading.set(false),
-    });
-  }
 }
 ```
 
@@ -438,23 +514,13 @@ export class ApiService {
 
 ## 7. DSFR (Système de Design de l'État)
 
-### Installation (assets statiques — pas de package npm)
+### Installation via npm
 
-Télécharger la dernière version depuis https://www.systeme-de-design.gouv.fr/
+```bash
-et placer les assets dans `front-public/src/assets/dsfr/`.
+# Déjà dans front-public/package.json :
-
+# "@gouvfr/dsfr": "^1.13.0" (devDependencies)
-Structure attendue :
+# Assets copiés automatiquement via angular.json (assets config)
 ```
-src/assets/dsfr/
-├── dsfr.min.css
-├── dsfr.module.min.js
-├── dsfr.nomodule.min.js
-└── utility/
-    └── icons/
-        └── icons.min.css
-```
-
-Déjà référencé dans `index.html`.
 
 ### Classes CSS essentielles
 
@@ -506,24 +572,24 @@ fr-mt-4w   fr-mb-2w   fr-ml-1w   fr-p-3w   fr-mx-auto
 - `fr-icon-delete-bin-line` — supprimer
 - `fr-icon-refresh-line` — régénérer
 - `fr-icon-eye-line` — voir
+- `fr-icon-folder-2-line` — dossier
+- `fr-icon-edit-line` — éditer
 
 ---
 
-## 8. Commandes AsyncAPI CLI & Redocly CLI
+## 8. Génération de documentation
 
-### AsyncAPI CLI
+### AsyncAPI — API programmatique (pas CLI)
 
-```bash
+```typescript
-# Générer HTML depuis un fichier YAML AsyncAPI
+// Utilise @asyncapi/generator directement (installé dans node_modules)
-asyncapi generate fromFile ./api.yaml --output ./output-dir/
+// Template @asyncapi/html-template pré-installé dans l'image Docker
-
+const templatePath = path.join(process.cwd(), 'node_modules', '@asyncapi', 'html-template');
-# Valider un fichier
+const generator = new AsyncApiGenerator(templatePath, outputDir, { forceWrite: true });
-asyncapi validate ./api.yaml
+await generator.generateFromFile(yamlPath);
-
-# Format de sortie : ./output-dir/index.html
 ```
 
-### Redocly CLI
+### OpenAPI — CLI Redocly
 
 ```bash
 # Générer HTML depuis un fichier OpenAPI YAML
@@ -531,15 +597,17 @@ redocly build-docs ./api.yaml --output ./output-dir/index.html
 
 # Valider un fichier OpenAPI
 redocly lint ./api.yaml
-
-# Format de sortie : ./output-dir/index.html
 ```
 
+### Bundling multi-fichiers
+- **OpenAPI** : `redocly bundle <main> --output <bundled.yaml>`
+- **AsyncAPI** : API programmatique `@asyncapi/bundler`
+
 ### Notes importantes
-- Les deux CLIs sont installés dans l'image Docker prod (`infra/Dockerfile.prod`, target `back`)
+- `@asyncapi/generator` et `@asyncapi/html-template` sont installés dans l'image Docker prod et dev
-- En dev, ils sont installés dans `infra/Dockerfile.back.dev`
+- `@redocly/cli` est installé globalement dans les images Docker
 - La génération est **asynchrone** : l'upload crée l'entrée, puis la génération se fait en background
-- Le répertoire de sortie : `DOCS_OUTPUT_DIR=/app/docs-output` (PVC en prod)
+- Le répertoire de sortie : `DOCS_OUTPUT_DIR=/app/docs-output` (PVC en prod), `./docs-output` en dev
 - Chaque API a son propre sous-répertoire : `/app/docs-output/<uuid>/index.html`
 
 ---
@@ -618,18 +686,6 @@ Dans `https://ci.chmod777.dev` → Settings → Secrets pour le dépôt `datacat
 - `registry_password` : token Gitea avec accès packages
 - `deploy_kubeconfig` : contenu du fichier `~/.kube/config`
 
-### Dépôt Gitea
-Créer le dépôt `datacat` dans l'organisation `z3n` sur `https://git.chmod777.dev`.
-
-```bash
-cd /home/flo/dev/datacat
-git init
-git remote add origin https://git.chmod777.dev/z3n/datacat.git
-git add .
-git commit -m "feat: initial scaffold"
-git push -u origin main
-```
-
 ---
 
 ## 11. Règles de code
@@ -637,7 +693,7 @@ git push -u origin main
 - **Langue** : code en anglais, commentaires en français
 - **Commits** : Conventional Commits (`feat:`, `fix:`, `chore:`, `docs:`, `refactor:`)
 - **TypeScript** : pas de `any`, `strict: true`, types depuis `@datacat/shared`
-- **NestJS** : un module par feature (`ApisModule`, `UploadsModule`, `DocsGenerationModule`)
+- **NestJS** : un module par feature (`ApisModule`, `UploadsModule`, `DocsGenerationModule`, `CategoriesModule`)
 - **Angular** : standalone components, signals, inject(), OnPush, lazy loading
 - **Tests** : Vitest pour le backend, `ng test` pour le frontend
 - **Pas de `console.log`** en production — utiliser Pino (NestJS) ou le logger Angular
@@ -646,30 +702,48 @@ git push -u origin main
 
 ## 12. Pages Angular — Détail d'implémentation
 
+### `/browse` et `/browse/:id` — BrowseComponent
+- Navigation par dossiers DSFR (tuiles `fr-tile` ou cartes `fr-card`)
+- Fil d'Ariane DSFR (`fr-breadcrumb`) depuis le breadcrumb retourné par l'API
+- Boutons : créer dossier, éditer dossier (crayon), supprimer dossier
+- Modales partagées : `CategoryFormModalComponent` (créer/éditer), `CategoryDeleteModalComponent`
+- Recherche dans les APIs du dossier courant
+- `BrowseComponent` réutilisé pour `/browse` et `/browse/:id` — s'abonne à `paramMap` via `takeUntilDestroyed`
+
 ### `/catalog` — CatalogComponent
 - Grille DSFR de cartes (`fr-card`)
-- Champ de recherche (`fr-input`) filtrant titre + description
+- Champ de recherche (`fr-input`) filtrant `name`, `provider`, `description`, contacts
 - Select DSFR pour filtrer par type (ASYNCAPI / OPENAPI)
 - Pagination DSFR (`fr-pagination`)
-- Lien vers `/upload` avec bouton `fr-btn fr-btn--icon-left fr-icon-upload-2-line`
 
 ### `/catalog/:id` — ApiDetailComponent
-- Métadonnées : titre, version, description, type, statut (badge), dates
+- Fil d'Ariane aligné sur la hiérarchie des catégories
+- Titre affiché : `CONVENTION_LABEL + ' ' + name` (ex: `"Consulter Petstore"`)
+- Métadonnées : convention (badge), name, provider, version, description, type, statut, dates
+- Contacts métier (nom, entité, email) et technique (nom, entité, email)
 - Badge de statut : `fr-badge--success` (GENERATED), `fr-badge--warning` (PENDING), `fr-badge--error` (ERROR)
 - Boutons :
   - "Voir la documentation" → `/catalog/:id/docs` (désactivé si status ≠ GENERATED)
   - "Télécharger YAML" → `/api/apis/:id/yaml`
   - "Régénérer" → POST `/api/apis/:id/regenerate`
-  - "Supprimer" → DELETE `/api/apis/:id` + redirect `/catalog`
+  - "Modifier" → modale d'édition (tous les champs sauf yamlContent)
+  - "Supprimer" → modale de confirmation → DELETE `/api/apis/:id` + redirect `/browse`
 
 ### `/catalog/:id/docs` — DocViewerComponent
 - `<iframe>` plein écran affichant `/api/apis/:id/docs`
 - Bouton "Retour" en haut
 
 ### `/upload` — UploadComponent
-- Stepper DSFR 3 étapes : (1) Choisir le fichier, (2) Métadonnées, (3) Confirmation
+- Stepper DSFR 3 étapes : (1) Choisir les fichiers, (2) Métadonnées, (3) Confirmation
-- Étape 1 : Zone de drop DSFR (`fr-upload-group`) pour fichier `.yaml` / `.yml`
+- Étape 1 : Zone de drop DSFR (`fr-upload-group`) pour 1 à 20 fichiers `.yaml` / `.yml`
-- Étape 2 : Formulaire (titre, version, description, type select AsyncAPI/OpenAPI)
+  - Validation serveur via `POST /api/uploads/validate` dès la sélection
+  - Pré-remplit les champs `name`, `versionMajor/Minor/Patch`, `description` depuis le YAML
+- Étape 2 : Formulaire — `convention` (select), `name`, `provider`, `versionMajor/Minor/Patch`,
+  `description`, `categoryId` (optionnel), contacts métier + technique
 - Étape 3 : Récap + bouton "Importer"
 - POST multipart vers `/api/uploads`
 - Redirect vers `/catalog/:id` après succès
+
+### Composants partagés
+- `CategoryFormModalComponent` — modale DSFR pour créer ou éditer une catégorie (nom, description, ordre)
+- `CategoryDeleteModalComponent` — modale DSFR de confirmation de suppression d'une catégorie

documentation/api-reference.md

@@ -29,7 +29,7 @@ Liste les entrées avec filtres optionnels et pagination.
 
 | Paramètre | Type | Défaut | Description |
 |-----------|------|--------|-------------|
-| `search` | string | — | Recherche dans le titre et la description (case-insensitive) |
+| `search` | string | — | Recherche dans `name`, `provider`, `description`, contacts (case-insensitive) |
 | `type` | `ASYNCAPI` \| `OPENAPI` | — | Filtre par type |
 | `categoryId` | UUID | — | Filtre par catégorie |
 | `page` | number | `1` | Page (min 1) |
@@ -41,10 +41,13 @@ Liste les entrées avec filtres optionnels et pagination.
   "items": [
     {
       "id": "uuid",
-      "title": "My API",
+      "title": "Consulter Petstore",
+      "name": "Petstore",
+      "convention": "CONSULTER",
       "version": "1.0.0",
       "description": "...",
       "type": "OPENAPI",
+      "provider": "Équipe Produit",
       "status": "GENERATED",
       "categoryId": "uuid-or-null",
       "createdAt": "2025-01-01T00:00:00.000Z",
@@ -57,7 +60,7 @@ Liste les entrées avec filtres optionnels et pagination.
 }
 ```
 
-> `items` contient des `ApiEntryListItem` (sans `yamlContent` ni `htmlPath`).
+> `items` contient des `ApiEntryListItem` (sans `yamlContent`, `htmlPath`, contacts ni `versionMajor/Minor/Patch`).
 
 ---
 
@@ -69,15 +72,27 @@ Retourne le détail complet d'une entrée.
 ```json
 {
   "id": "uuid",
-  "title": "My API",
+  "title": "Consulter Petstore",
+  "name": "Petstore",
+  "convention": "CONSULTER",
   "version": "1.0.0",
+  "versionMajor": 1,
+  "versionMinor": 0,
+  "versionPatch": 0,
   "description": "...",
   "type": "OPENAPI",
+  "provider": "Équipe Produit",
   "yamlContent": "openapi: '3.0.0'\n...",
   "htmlPath": "/app/docs-output/uuid/index.html",
   "status": "GENERATED",
   "errorMessage": null,
   "categoryId": "uuid-or-null",
+  "contactFunctionalName": "Alice Martin",
+  "contactFunctionalEntity": "DSI",
+  "contactFunctionalEmail": "alice@example.com",
+  "contactTechnicalName": "Bob Dupont",
+  "contactTechnicalEntity": "Équipe Backend",
+  "contactTechnicalEmail": "bob@example.com",
   "createdAt": "2025-01-01T00:00:00.000Z",
   "updatedAt": "2025-01-01T00:00:00.000Z"
 }
@@ -94,10 +109,20 @@ Met à jour les métadonnées d'une entrée (champs éditables par l'utilisateur
 **Body JSON** (tous les champs sont optionnels)
 ```json
 {
-  "title": "New title",
+  "convention": "CONSULTER",
-  "version": "2.0.0",
+  "name": "Nouveau nom",
-  "description": "Updated description",
+  "provider": "Équipe X",
-  "categoryId": "uuid-or-null"
+  "versionMajor": 2,
+  "versionMinor": 0,
+  "versionPatch": 0,
+  "description": "Description mise à jour",
+  "categoryId": "uuid-or-null",
+  "contactFunctionalName": "...",
+  "contactFunctionalEntity": "...",
+  "contactFunctionalEmail": "...",
+  "contactTechnicalName": "...",
+  "contactTechnicalEntity": "...",
+  "contactTechnicalEmail": "..."
 }
 ```
 
@@ -146,7 +171,7 @@ Télécharge le fichier YAML source.
 
 **Réponse 200**
 - `Content-Type: application/x-yaml`
-- `Content-Disposition: attachment; filename="<title>.yaml"`
+- `Content-Disposition: attachment; filename="<name>.yaml"`
 - Corps : contenu YAML brut
 
 **Réponse 404** — entrée introuvable
@@ -155,6 +180,52 @@ Télécharge le fichier YAML source.
 
 ## Upload (`/api/uploads`)
 
+### `POST /api/uploads/validate`
+
+Valide 1 à 20 fichiers YAML sans créer d'entrée en base. Utilisé pour la validation en temps réel lors de l'upload.
+
+**Content-Type** : `multipart/form-data`
+
+**Champs du formulaire**
+
+| Champ | Type | Requis | Description |
+|-------|------|--------|-------------|
+| `files` | file (1 à 20) | Oui | Fichiers YAML (`.yaml` ou `.yml`) |
+
+**Réponse 200**
+```json
+{
+  "valid": true,
+  "type": "OPENAPI",
+  "mainFile": "petstore.yaml",
+  "name": "Petstore",
+  "versionMajor": 1,
+  "versionMinor": 0,
+  "versionPatch": 0,
+  "description": "A sample API",
+  "errors": []
+}
+```
+
+En cas d'erreur :
+```json
+{
+  "valid": false,
+  "type": null,
+  "mainFile": null,
+  "name": null,
+  "versionMajor": null,
+  "versionMinor": null,
+  "versionPatch": null,
+  "description": null,
+  "errors": [
+    { "file": "api.yaml", "message": "erreur de syntaxe YAML — unexpected token" }
+  ]
+}
+```
+
+---
+
 ### `POST /api/uploads`
 
 Crée une nouvelle entrée à partir d'un ou plusieurs fichiers YAML.
@@ -167,11 +238,21 @@ Lance la génération de documentation en arrière-plan (fire-and-forget).
 | Champ | Type | Requis | Description |
 |-------|------|--------|-------------|
 | `files` | file (1 à 20) | Oui | Fichiers YAML (`.yaml` ou `.yml`) |
-| `title` | string | Oui | Titre de l'API |
+| `convention` | `CONSULTER` \| `ENREGISTRER` \| `ETRE_NOTIFIE` | Oui | Convention d'échange |
-| `version` | string | Oui | Version (ex: `1.0.0`) |
+| `name` | string | Oui | Nom de l'API |
+| `provider` | string | Oui | Fournisseur / équipe responsable |
+| `versionMajor` | string (number) | Non | Version majeure (défaut: 0) |
+| `versionMinor` | string (number) | Non | Version mineure (défaut: 0) |
+| `versionPatch` | string (number) | Non | Version patch (défaut: 0) |
 | `description` | string | Non | Description libre |
 | `type` | `ASYNCAPI` \| `OPENAPI` | Non | Type (détecté automatiquement si absent) |
 | `categoryId` | UUID | Non | Catégorie parente |
+| `contactFunctionalName` | string | Non | Contact métier — nom |
+| `contactFunctionalEntity` | string | Non | Contact métier — entité |
+| `contactFunctionalEmail` | string | Non | Contact métier — email |
+| `contactTechnicalName` | string | Non | Contact technique — nom |
+| `contactTechnicalEntity` | string | Non | Contact technique — entité |
+| `contactTechnicalEmail` | string | Non | Contact technique — email |
 
 **Détection automatique du type**
 
@@ -180,13 +261,13 @@ Le type est détecté à partir du contenu YAML :
 - Présence de `asyncapi:` en début de ligne → `ASYNCAPI`
 
 Si plusieurs fichiers sont fournis, le fichier contenant la clé racine est considéré comme le fichier principal.
-Les autres sont bundlés via `redocly bundle` (OpenAPI) ou `asyncapi bundle` (AsyncAPI).
+Les autres sont bundlés via `redocly bundle` (OpenAPI) ou `@asyncapi/bundler` (AsyncAPI).
 
 **Réponse 201** — `ApiEntry` créé avec `status: "PENDING"`
 
 **Réponse 400**
 - Aucun fichier fourni
-- `title` ou `version` manquant
+- `name` ou `convention` manquant
 - Fichier non YAML
 - Type non détectable et non fourni
 - Aucun fichier principal trouvé dans un upload multi-fichiers
@@ -243,8 +324,14 @@ Navigation à la racine : retourne les catégories de premier niveau et les APIs
   "apis": [
     {
       "id": "uuid",
-      "title": "API sans catégorie",
+      "title": "Consulter API sans catégorie",
-      ...
+      "name": "API sans catégorie",
+      "convention": "CONSULTER",
+      "version": "1.0.0",
+      "provider": "...",
+      "status": "GENERATED",
+      "categoryId": null,
+      "..."
     }
   ]
 }
@@ -331,10 +418,11 @@ Met à jour une catégorie.
 ### `DELETE /api/categories/:id`
 
 Supprime une catégorie.
-Les APIs et sous-catégories enfants sont désassociées (`categoryId`/`parentId` mis à null).
 
 **Réponse 204** — succès (pas de corps)
 
+**Réponse 400** — le dossier contient des APIs ou des sous-dossiers (vérification applicative avant suppression)
+
 **Réponse 404** — catégorie introuvable
 
 ---
@@ -343,7 +431,7 @@ Les APIs et sous-catégories enfants sont désassociées (`categoryId`/`parentId
 
 | Code | Description |
 |------|-------------|
-| 400 | Requête invalide (champ manquant, format incorrect) |
+| 400 | Requête invalide (champ manquant, format incorrect, suppression non vide) |
 | 404 | Ressource introuvable |
 | 500 | Erreur interne serveur |
 
@@ -365,3 +453,11 @@ Les APIs et sous-catégories enfants sont désassociées (`categoryId`/`parentId
 | `PENDING` | Entrée créée, génération de doc en cours |
 | `GENERATED` | Documentation HTML disponible |
 | `ERROR` | La génération a échoué (voir `errorMessage`) |
+
+## Conventions d'échange
+
+| Convention | Label affiché |
+|------------|---------------|
+| `CONSULTER` | Consulter |
+| `ENREGISTRER` | Enregistrer |
+| `ETRE_NOTIFIE` | Être notifié |

documentation/architecture.md

@@ -84,8 +84,13 @@ Injecte des données de démonstration au démarrage (idempotent : ne re-seed qu
 ```sql
 CREATE TABLE api_entries (
   id                        UUID         PRIMARY KEY DEFAULT gen_random_uuid(),
-  title         VARCHAR(255) NOT NULL,
+  convention                VARCHAR(30)  NOT NULL DEFAULT 'CONSULTER'
-  version       VARCHAR(50)  NOT NULL,
+                            CHECK (convention IN ('CONSULTER','ENREGISTRER','ETRE_NOTIFIE')),
+  name                      VARCHAR(255) NOT NULL DEFAULT '',
+  provider                  VARCHAR(255) NOT NULL DEFAULT '',
+  version_major             INT          NOT NULL DEFAULT 0,
+  version_minor             INT          NOT NULL DEFAULT 0,
+  version_patch             INT          NOT NULL DEFAULT 0,
   description               TEXT,
   type                      VARCHAR(10)  NOT NULL CHECK (type IN ('ASYNCAPI', 'OPENAPI')),
   yaml_content              TEXT         NOT NULL,
@@ -94,11 +99,21 @@ CREATE TABLE api_entries (
                             CHECK (status IN ('PENDING', 'GENERATED', 'ERROR')),
   error_message             TEXT,
   category_id               VARCHAR(36),
+  contact_functional_name   VARCHAR(255) NOT NULL DEFAULT '',
+  contact_functional_entity VARCHAR(255) NOT NULL DEFAULT '',
+  contact_functional_email  VARCHAR(255) NOT NULL DEFAULT '',
+  contact_technical_name    VARCHAR(255) NOT NULL DEFAULT '',
+  contact_technical_entity  VARCHAR(255) NOT NULL DEFAULT '',
+  contact_technical_email   VARCHAR(255) NOT NULL DEFAULT '',
   created_at                TIMESTAMPTZ  NOT NULL DEFAULT NOW(),
   updated_at                TIMESTAMPTZ  NOT NULL DEFAULT NOW()
 );
 ```
 
+> `title` et `version` sont des champs calculés (pas en DB) :
+> - `title` = `CONVENTION_LABEL + ' ' + name` (ex: `"Consulter Petstore"`)
+> - `version` = `"major.minor.patch"` (ex: `"1.0.0"`)
+
 ### Table `categories`
 
 ```sql
@@ -114,7 +129,7 @@ CREATE TABLE categories (
 ```
 
 > Les relations `category_id` / `parent_id` sont des colonnes varchar sans contrainte de clé étrangère TypeORM.
-> La suppression d'une catégorie désassocie automatiquement ses APIs et sous-catégories enfants (logique applicative).
+> La suppression d'une catégorie est **rejetée avec 400** si le dossier contient des APIs ou des sous-dossiers (vérification applicative avant `DELETE`).
 
 ---
 

documentation/local-setup.md

@@ -138,6 +138,65 @@ Des exemples sont disponibles dans `documentation/` :
 
 ---
 
+## Fixtures & re-seed
+
+Les données de démo (catégories + APIs) sont définies dans `back/src/modules/seeder/seeder.service.ts`.
+
+### Structure des fixtures
+
+```
+E-commerce          (racine)
+  └─ Produits
+  └─ Commandes
+  └─ Notifications
+Infrastructure      (racine)
+  └─ Événements
+Identité & Accès    (racine)
+  └─ Authentification
+```
+
+5 APIs de démo y sont rattachées (Petstore, Streetlights Kafka, Account Service, Orders, Auth JWT).
+
+### Modifier les fixtures
+
+Éditer directement `back/src/modules/seeder/seeder.service.ts` :
+
+- **Catégories** : bloc `categoryRepo.save(categoryRepo.create({...}))` dans la méthode `seed()`. Utiliser `parentId: null` pour une racine, ou `parentId: autreCategorie.id` pour un enfant.
+- **APIs** : tableau passé à `apiRepo.save([...])`. Chaque entrée référence une catégorie via `categoryId`.
+- **YAML** : les constantes en haut du fichier (`PETSTORE_YAML`, `ORDERS_YAML`, etc.) contiennent le YAML inliné de chaque API.
+
+### Régénérer la base de données
+
+Le seeder est **idempotent** : il ne s'exécute pas si la table `api_entries` contient déjà des lignes.
+
+Pour forcer un re-seed complet (vide tout et recrée), utiliser la variable `FORCE_RESEED=true` :
+
+**Avec Docker :**
+```bash
+docker compose -f infra/docker-compose.yml stop backend
+docker compose -f infra/docker-compose.yml run --rm -e FORCE_RESEED=true backend
+```
+
+**Sans Docker (local) :**
+```bash
+cd back
+FORCE_RESEED=true pnpm run start:dev
+```
+
+Ou via `back/.env` :
+```env
+FORCE_RESEED=true
+```
+> Penser à retirer `FORCE_RESEED=true` du `.env` après le redémarrage, sinon la base sera réinitialisée à chaque démarrage.
+
+Le seeder supprime toutes les entrées `api_entries` et `categories`, nettoie le répertoire `docs-output`, puis recrée tout depuis `seed()`. Les logs confirment l'opération :
+```
+[Seeder] Reset complet — données supprimées, docs nettoyées.
+[Seeder] 8 catégories et 5 APIs de démo créées — génération docs en cours...
+```
+
+---
+
 ## Notes
 
 - **Schéma DB** : TypeORM crée et synchronise automatiquement les tables au démarrage (mode `synchronize: true` hors production). Aucune migration manuelle nécessaire.

front-public/angular.json

@@ -36,6 +36,16 @@
                 "glob": "**/*",
                 "input": "node_modules/@gouvfr/dsfr/dist/utility",
                 "output": "assets/dsfr/utility"
+              },
+              {
+                "glob": "**/*",
+                "input": "node_modules/@gouvfr/dsfr/dist/icons",
+                "output": "assets/dsfr/icons"
+              },
+              {
+                "glob": "**/*",
+                "input": "node_modules/@gouvfr/dsfr/dist/icons",
+                "output": "assets/icons"
               }
             ],
             "styles": ["src/styles.scss"],
@@ -47,7 +57,13 @@
                 { "type": "initial", "maximumWarning": "500kB", "maximumError": "1MB" },
                 { "type": "anyComponentStyle", "maximumWarning": "4kB", "maximumError": "8kB" }
               ],
-              "outputHashing": "all"
+              "outputHashing": "all",
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
             },
             "development": {
               "optimization": false,
@@ -65,7 +81,8 @@
           },
           "defaultConfiguration": "development",
           "options": {
-            "proxyConfig": "proxy.conf.json"
+            "proxyConfig": "proxy.conf.json",
+            "allowedHosts": ["datacat.dev.chmod777.dev"]
           }
         }
       }

front-public/eslint.config.js

@@ -0,0 +1,38 @@
+// @ts-check
+const eslint = require('@eslint/js');
+const tseslint = require('typescript-eslint');
+const angular = require('angular-eslint');
+
+module.exports = tseslint.config(
+  {
+    ignores: ['dist/**', 'node_modules/**', '.angular/**', 'coverage/**'],
+  },
+  {
+    files: ['**/*.ts'],
+    extends: [
+      eslint.configs.recommended,
+      ...tseslint.configs.recommended,
+      ...angular.configs.tsRecommended,
+    ],
+    processor: angular.processInlineTemplates,
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        { type: 'attribute', prefix: 'app', style: 'camelCase' },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        { type: 'element', prefix: 'app', style: 'kebab-case' },
+      ],
+      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+    },
+  },
+  {
+    files: ['**/*.html'],
+    extends: [
+      ...angular.configs.templateRecommended,
+      ...angular.configs.templateAccessibility,
+    ],
+    rules: {},
+  },
+);

front-public/package.json

@@ -6,8 +6,10 @@
     "start": "ng serve",
     "build": "ng build",
     "build:prod": "ng build --configuration production",
-    "test": "ng test --watch=false --browsers=ChromeHeadless",
+    "test": "vitest run",
-    "lint": "ng lint"
+    "test:watch": "vitest",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
   },
   "dependencies": {
     "@angular/animations": "^19.0.0",
@@ -18,6 +20,8 @@
     "@angular/platform-browser": "^19.0.0",
     "@angular/platform-browser-dynamic": "^19.0.0",
     "@angular/router": "^19.0.0",
+    "@datacat/shared": "workspace:*",
+    "@gouvfr/dsfr": "^1.13.0",
     "rxjs": "^7.8.0",
     "tslib": "^2.8.0",
     "zone.js": "^0.15.0"
@@ -26,9 +30,14 @@
     "@angular-devkit/build-angular": "^19.0.0",
     "@angular/cli": "^19.0.0",
     "@angular/compiler-cli": "^19.0.0",
+    "@eslint/js": "^9.39.4",
     "@types/node": "^22.0.0",
-    "@gouvfr/dsfr": "^1.13.0",
+    "angular-eslint": "^19.8.1",
+    "eslint": "^9.39.4",
+    "jsdom": "^29.1.1",
+    "sass": "^1.83.0",
     "typescript": "~5.8.3",
-    "sass": "^1.83.0"
+    "typescript-eslint": "^8.62.0",
+    "vitest": "^3.2.4"
   }
 }

front-public/src/app/app.component.ts

@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
-import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
+import { RouterOutlet, RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, RouterLink, RouterLinkActive],
+  imports: [RouterOutlet, RouterLink],
   template: `
     <header role="banner" class="fr-header">
       <div class="fr-header__body">
@@ -17,7 +17,7 @@ import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
                 </div>
               </div>
               <div class="fr-header__service">
-                <a href="/" routerLink="/browse" title="Accueil — Datacat">
+                <a href="/" routerLink="/" title="Accueil — Datacat">
                   <p class="fr-header__service-title">Datacat</p>
                 </a>
                 <p class="fr-header__service-tagline">Catalogue de données d'API</p>
@@ -26,34 +26,6 @@ import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
           </div>
         </div>
       </div>
-      <div class="fr-header__menu">
-        <div class="fr-container">
-          <nav class="fr-nav" role="navigation" aria-label="Menu principal">
-            <ul class="fr-nav__list">
-              <li class="fr-nav__item">
-                <a
-                  class="fr-nav__link"
-                  routerLink="/browse"
-                  routerLinkActive="fr-nav__link--active"
-                  [routerLinkActiveOptions]="{ exact: false }"
-                >
-                  Parcourir
-                </a>
-              </li>
-              <li class="fr-nav__item">
-                <a
-                  class="fr-nav__link"
-                  routerLink="/catalog"
-                  routerLinkActive="fr-nav__link--active"
-                  [routerLinkActiveOptions]="{ exact: false }"
-                >
-                  Catalogue
-                </a>
-              </li>
-            </ul>
-          </nav>
-        </div>
-      </div>
     </header>
     <main>
       <router-outlet />

front-public/src/app/app.config.ts

@@ -1,12 +1,13 @@
 import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter, withComponentInputBinding } from '@angular/router';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
 import { routes } from './app.routes';
+import { errorInterceptor } from './core/error.interceptor';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes, withComponentInputBinding()),
-    provideHttpClient(withInterceptorsFromDi()),
+    provideHttpClient(withInterceptors([errorInterceptor])),
   ],
 };

front-public/src/app/app.routes.ts

@@ -3,8 +3,8 @@ import { Routes } from '@angular/router';
 export const routes: Routes = [
   {
     path: '',
-    redirectTo: 'browse',
+    loadComponent: () =>
-    pathMatch: 'full',
+      import('./pages/browse/browse.component').then((m) => m.BrowseComponent),
   },
   {
     path: 'browse',
@@ -18,8 +18,8 @@ export const routes: Routes = [
   },
   {
     path: 'catalog',
-    loadComponent: () =>
+    redirectTo: 'browse',
-      import('./pages/catalog/catalog.component').then((m) => m.CatalogComponent),
+    pathMatch: 'full',
   },
   {
     path: 'catalog/:id',
@@ -38,6 +38,6 @@ export const routes: Routes = [
   },
   {
     path: '**',
-    redirectTo: 'browse',
+    redirectTo: '',
   },
 ];

front-public/src/app/core/api.service.ts

@@ -1,12 +1,14 @@
 import { Injectable, inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { ApiEntry, ApiListResponse, ApiListQuery } from '@datacat/shared';
+import { ApiEntry, ApiEntryListItem, ApiListResponse, ApiListQuery, ApiType } from '@datacat/shared';
+import { environment } from '../../environments/environment';
 
 @Injectable({ providedIn: 'root' })
 export class ApiService {
   private http = inject(HttpClient);
-  private baseUrl = '/api/apis';
+  private baseUrl = `${environment.apiBaseUrl}/apis`;
+  private uploadsUrl = `${environment.apiBaseUrl}/uploads`;
 
   list(query?: ApiListQuery): Observable<ApiListResponse> {
     const params: Record<string, string> = {};
@@ -22,7 +24,22 @@ export class ApiService {
     return this.http.get<ApiEntry>(`${this.baseUrl}/${id}`);
   }
 
-  update(id: string, data: { title?: string; version?: string; description?: string }): Observable<ApiEntry> {
+  update(id: string, data: {
+    convention?: string;
+    name?: string;
+    provider?: string;
+    versionMajor?: number;
+    versionMinor?: number;
+    versionPatch?: number;
+    description?: string | null;
+    categoryId?: string | null;
+    contactFunctionalName?: string;
+    contactFunctionalEntity?: string;
+    contactFunctionalEmail?: string;
+    contactTechnicalName?: string;
+    contactTechnicalEntity?: string;
+    contactTechnicalEmail?: string;
+  }): Observable<ApiEntry> {
     return this.http.patch<ApiEntry>(`${this.baseUrl}/${id}`, data);
   }
 
@@ -30,11 +47,36 @@ export class ApiService {
     return this.http.delete<void>(`${this.baseUrl}/${id}`);
   }
 
+  getVersions(id: string): Observable<ApiEntryListItem[]> {
+    return this.http.get<ApiEntryListItem[]>(`${this.baseUrl}/${id}/versions`);
+  }
+
+  setCurrent(id: string): Observable<ApiEntry> {
+    return this.http.post<ApiEntry>(`${this.baseUrl}/${id}/set-current`, {});
+  }
+
   regenerate(id: string): Observable<ApiEntry> {
     return this.http.post<ApiEntry>(`${this.baseUrl}/${id}/regenerate`, {});
   }
 
   upload(formData: FormData): Observable<ApiEntry> {
-    return this.http.post<ApiEntry>('/api/uploads', formData);
+    return this.http.post<ApiEntry>(this.uploadsUrl, formData);
+  }
+
+  validate(formData: FormData): Observable<ValidateResponse> {
+    return this.http.post<ValidateResponse>(`${this.uploadsUrl}/validate`, formData);
   }
 }
+
+/** Réponse de l'endpoint de validation d'upload (POST /uploads/validate). */
+export interface ValidateResponse {
+  valid: boolean;
+  type: ApiType | null;
+  mainFile: string | null;
+  name: string | null;
+  versionMajor: number | null;
+  versionMinor: number | null;
+  versionPatch: number | null;
+  description: string | null;
+  errors: Array<{ file: string; message: string }>;
+}

front-public/src/app/core/category.service.ts

@@ -6,14 +6,17 @@ import {
   CategoryListResponse,
   CategoryBrowseResponse,
 } from '@datacat/shared';
+import { environment } from '../../environments/environment';
 
 @Injectable({ providedIn: 'root' })
 export class CategoryService {
   private http = inject(HttpClient);
-  private baseUrl = '/api/categories';
+  private baseUrl = `${environment.apiBaseUrl}/categories`;
 
-  list(): Observable<CategoryListResponse> {
+  list(search?: string): Observable<CategoryListResponse> {
-    return this.http.get<CategoryListResponse>(this.baseUrl);
+    const params: Record<string, string> = {};
+    if (search?.trim()) params['search'] = search;
+    return this.http.get<CategoryListResponse>(this.baseUrl, { params });
   }
 
   browse(id: string | null): Observable<CategoryBrowseResponse> {

front-public/src/app/core/error.interceptor.ts

@@ -0,0 +1,18 @@
+import { HttpErrorResponse, HttpInterceptorFn } from '@angular/common/http';
+import { inject } from '@angular/core';
+import { ErrorService } from './error.service';
+import { catchError, throwError } from 'rxjs';
+
+/**
+ * Interceptor HTTP fonctionnel : journalise et normalise les erreurs réseau en
+ * un message lisible (via ErrorService), puis relaie l'erreur aux appelants.
+ */
+export const errorInterceptor: HttpInterceptorFn = (req, next) => {
+  const errorService = inject(ErrorService);
+  return next(req).pipe(
+    catchError((error: HttpErrorResponse) => {
+      errorService.log(req.method, req.url, error);
+      return throwError(() => error);
+    }),
+  );
+};

front-public/src/app/core/error.service.spec.ts

@@ -0,0 +1,36 @@
+import { describe, it, expect } from 'vitest';
+import { HttpErrorResponse } from '@angular/common/http';
+import { ErrorService } from './error.service';
+
+describe('ErrorService.toMessage', () => {
+  const svc = new ErrorService();
+
+  it('retourne un body string', () => {
+    const err = new HttpErrorResponse({ error: 'Boom', status: 500 });
+    expect(svc.toMessage(err)).toBe('Boom');
+  });
+
+  it('extrait body.message', () => {
+    const err = new HttpErrorResponse({ error: { message: 'Champ invalide' }, status: 400 });
+    expect(svc.toMessage(err)).toBe('Champ invalide');
+  });
+
+  it('joint un body.message tableau', () => {
+    const err = new HttpErrorResponse({ error: { message: ['a', 'b'] }, status: 400 });
+    expect(svc.toMessage(err)).toBe('a, b');
+  });
+
+  it('status 0 -> serveur injoignable', () => {
+    const err = new HttpErrorResponse({ status: 0 });
+    expect(svc.toMessage(err)).toContain('injoignable');
+  });
+
+  it('Error standard -> son message', () => {
+    expect(svc.toMessage(new Error('oops'))).toBe('oops');
+  });
+
+  it('valeur inconnue -> fallback', () => {
+    expect(svc.toMessage(null)).toBe('Une erreur est survenue.');
+    expect(svc.toMessage(undefined, 'custom')).toBe('custom');
+  });
+});

front-public/src/app/core/error.service.ts

@@ -0,0 +1,32 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+/**
+ * Centralise la traduction d'une erreur HTTP en message lisible et son
+ * journal. Les composants appellent `toMessage(err)` plutôt que de
+ * réimplémenter chacun leur extraction de message.
+ */
+@Injectable({ providedIn: 'root' })
+export class ErrorService {
+  /** Extrait un message lisible depuis une erreur HTTP (ou autre). */
+  toMessage(error: unknown, fallback = 'Une erreur est survenue.'): string {
+    if (error instanceof HttpErrorResponse) {
+      const body = error.error;
+      if (typeof body === 'string' && body.trim()) return body;
+      if (body && typeof body === 'object') {
+        const message = (body as { message?: unknown }).message;
+        if (typeof message === 'string' && message) return message;
+        if (Array.isArray(message) && message.length) return message.join(', ');
+      }
+      if (error.status === 0) return 'Serveur injoignable. Vérifiez votre connexion.';
+      return error.message || fallback;
+    }
+    if (error instanceof Error && error.message) return error.message;
+    return fallback;
+  }
+
+  /** Journalise une erreur réseau (appelé par l'interceptor). */
+  log(method: string, url: string, error: HttpErrorResponse): void {
+    console.error(`[HTTP ${error.status}] ${method} ${url} — ${this.toMessage(error)}`);
+  }
+}

front-public/src/app/pages/api-detail/api-detail.component.html

@@ -0,0 +1,369 @@
+    <div class="fr-container fr-mt-4w fr-mb-4w">
+      <app-breadcrumb [items]="breadcrumbItems()" />
+
+      @if (loading()) {
+        <div class="fr-callout fr-mb-4w">
+          <p class="fr-callout__text">Chargement...</p>
+        </div>
+      }
+
+      @if (error()) {
+        <div class="fr-alert fr-alert--error fr-mb-4w">
+          <p class="fr-alert__title">Erreur</p>
+          <p>{{ error() }}</p>
+        </div>
+      }
+
+      @if (api(); as entry) {
+        <!-- Retour -->
+        <a class="fr-link fr-icon-arrow-left-line fr-link--icon-left fr-mb-2w" style="display:inline-flex;"
+           [routerLink]="backUrl()">Retour</a>
+
+        <!-- En-tête -->
+        <div class="fr-mb-3w" style="display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;">
+          <!-- Gauche : titre + version -->
+          <div style="display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;min-width:0;">
+            <h1 class="fr-h2 fr-mb-0">{{ entry.title }}</h1>
+            @if (versions().length <= 1) {
+              <span class="fr-tag">v{{ entry.version }}</span>
+            } @else {
+              <select class="fr-select" id="version-select" style="width:auto;" (change)="onVersionChange($event)">
+                @for (v of versions(); track v.id) {
+                  <option [value]="v.id" [selected]="v.id === entry.id">
+                    {{ v.version }}{{ v.isCurrent ? ' (courante)' : '' }}
+                  </option>
+                }
+              </select>
+            }
+          </div>
+          <!-- Droite : bouton Voir doc + Actions dropdown -->
+          <div style="display:flex;align-items:center;gap:0.5rem;flex-shrink:0;">
+            <a class="fr-btn fr-btn--icon-left fr-icon-eye-line"
+               [routerLink]="entry.status === 'GENERATED' ? ['/catalog', entry.id, 'docs'] : null"
+               [style.opacity]="entry.status !== 'GENERATED' ? '0.5' : '1'"
+               [style.pointer-events]="entry.status !== 'GENERATED' ? 'none' : 'auto'">
+              Voir la documentation
+            </a>
+            <div style="position:relative;">
+            <button class="fr-btn fr-btn--secondary fr-btn--icon-right fr-icon-arrow-down-s-line"
+                    (click)="actionsOpen.set(!actionsOpen())">
+              Actions
+            </button>
+            @if (actionsOpen()) {
+              <div style="position:absolute;right:0;top:calc(100% + 4px);z-index:1000;background:#fff;border:1px solid #ddd;box-shadow:0 4px 12px rgba(0,0,0,.15);min-width:220px;border-radius:4px;overflow:hidden;">
+                <button style="display:block;width:100%;text-align:left;padding:0.75rem 1rem;background:none;border:none;border-bottom:1px solid #eee;cursor:pointer;color:#161616;"
+                        (click)="onNewVersion(); actionsOpen.set(false)">
+                  Nouvelle version
+                </button>
+                <a [href]="'/api/apis/' + entry.id + '/yaml'"
+                   download
+                   (click)="actionsOpen.set(false)"
+                   style="display:block;padding:0.75rem 1rem;text-decoration:none;color:#161616;border-bottom:1px solid #eee;">
+                  Télécharger YAML
+                </a>
+                @if (entry.status !== 'GENERATED') {
+                  <button style="display:block;width:100%;text-align:left;padding:0.75rem 1rem;background:none;border:none;border-bottom:1px solid #eee;cursor:pointer;color:#161616;"
+                          [disabled]="regenerating()"
+                          (click)="onRegenerate(); actionsOpen.set(false)">
+                    {{ regenerating() ? 'Régénération...' : 'Régénérer' }}
+                  </button>
+                }
+                <button style="display:block;width:100%;text-align:left;padding:0.75rem 1rem;background:none;border:none;cursor:pointer;color:#CE0500;"
+                        [disabled]="deleting()"
+                        (click)="onDelete(); actionsOpen.set(false)">
+                  {{ deleting() ? 'Suppression...' : 'Supprimer' }}
+                </button>
+              </div>
+            }
+            </div>
+          </div>
+        </div>
+
+        <!-- Navigation onglets -->
+        <div style="display:flex;border-bottom:2px solid #e5e5e5;margin-bottom:1.5rem;">
+          <button (click)="activeTab.set('info')"
+            [style.border-bottom]="activeTab()==='info' ? '2px solid #000091' : '2px solid transparent'"
+            [style.color]="activeTab()==='info' ? '#000091' : '#3a3a3a'"
+            [style.font-weight]="activeTab()==='info' ? '700' : '400'"
+            style="padding:0.75rem 1.5rem;background:none;border-top:none;border-left:none;border-right:none;cursor:pointer;margin-bottom:-2px;">
+            Informations
+          </button>
+          <button (click)="activeTab.set('contacts')"
+            [style.border-bottom]="activeTab()==='contacts' ? '2px solid #000091' : '2px solid transparent'"
+            [style.color]="activeTab()==='contacts' ? '#000091' : '#3a3a3a'"
+            [style.font-weight]="activeTab()==='contacts' ? '700' : '400'"
+            style="padding:0.75rem 1.5rem;background:none;border-top:none;border-left:none;border-right:none;cursor:pointer;margin-bottom:-2px;">
+            Contacts
+          </button>
+        </div>
+
+        <!-- Onglet Informations -->
+        @if (activeTab() === 'info') {
+          @if (!editingInfo()) {
+            <div class="fr-card fr-mb-3w">
+              <div class="fr-card__body">
+                <div class="fr-card__content">
+                  <dl class="fr-grid-row fr-grid-row--gutters">
+                    <div class="fr-col-12 fr-col-md-4">
+                      <dt class="fr-text--bold">Version</dt>
+                      <dd style="display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;">
+                        {{ entry.version }}
+                        @if (!entry.isCurrent) {
+                          <button class="fr-btn fr-btn--sm fr-btn--secondary" [disabled]="settingCurrent()"
+                                  (click)="onSetCurrent()">
+                            {{ settingCurrent() ? '...' : 'Passer en courante' }}
+                          </button>
+                        }
+                      </dd>
+                    </div>
+                    <div class="fr-col-12 fr-col-md-4">
+                      <dt class="fr-text--bold">Type</dt>
+                      <dd>{{ entry.type }}</dd>
+                    </div>
+                    <div class="fr-col-12 fr-col-md-4">
+                      <dt class="fr-text--bold">Statut</dt>
+                      <dd>
+                        <span [class]="badgeClass(entry.status)">{{ statusLabel(entry.status) }}</span>
+                        @if (entry.status === 'ERROR' && entry.errorMessage) {
+                          <p class="fr-text--sm fr-mt-1w">{{ entry.errorMessage }}</p>
+                        }
+                      </dd>
+                    </div>
+                    <div class="fr-col-12 fr-col-md-4">
+                      <dt class="fr-text--bold">Fournisseur</dt>
+                      <dd>{{ entry.provider }}</dd>
+                    </div>
+                    @if (entry.description) {
+                      <div class="fr-col-12">
+                        <dt class="fr-text--bold">Description</dt>
+                        <dd>{{ entry.description }}</dd>
+                      </div>
+                    }
+                    <div class="fr-col-12 fr-col-md-6">
+                      <dt class="fr-text--bold">Créé le</dt>
+                      <dd>{{ entry.createdAt | date:'dd/MM/yyyy HH:mm' }}</dd>
+                    </div>
+                    <div class="fr-col-12 fr-col-md-6">
+                      <dt class="fr-text--bold">Mis à jour le</dt>
+                      <dd>{{ entry.updatedAt | date:'dd/MM/yyyy HH:mm' }}</dd>
+                    </div>
+                  </dl>
+                  <div class="fr-mt-2w">
+                    <button class="fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-edit-line" (click)="startEditInfo()">
+                      Modifier les informations
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          }
+
+          @if (editingInfo()) {
+            <form [formGroup]="infoForm" (ngSubmit)="submitInfo()" novalidate class="fr-mb-3w">
+              <!-- Convention + Nom -->
+              <p class="fr-label fr-mb-1w">Titre <span style="color:var(--text-default-error)">*</span></p>
+              <div class="fr-grid-row fr-grid-row--gutters fr-mb-1w">
+                <div class="fr-col-12 fr-col-md-4">
+                  <div class="fr-select-group">
+                    <label class="fr-label" for="info-convention">Convention</label>
+                    <select id="info-convention" class="fr-select" formControlName="convention">
+                      <option value="CONSULTER">Consulter</option>
+                      <option value="ENREGISTRER">Enregistrer</option>
+                      <option value="ETRE_NOTIFIE">Être notifié</option>
+                    </select>
+                  </div>
+                </div>
+                <div class="fr-col-12 fr-col-md-8">
+                  <div class="fr-input-group"
+                    [class.fr-input-group--error]="infoForm.get('name')?.invalid && infoForm.get('name')?.touched">
+                    <label class="fr-label" for="info-name">Nom de l'API <span style="color:var(--text-default-error)">*</span></label>
+                    <input id="info-name" class="fr-input" type="text" formControlName="name"
+                      [class.fr-input--error]="infoForm.get('name')?.invalid && infoForm.get('name')?.touched" />
+                    @if (infoForm.get('name')?.invalid && infoForm.get('name')?.touched) {
+                      <p class="fr-error-text">Le nom est obligatoire.</p>
+                    }
+                  </div>
+                </div>
+              </div>
+
+              <!-- Fournisseur -->
+              <div class="fr-input-group fr-mb-2w"
+                [class.fr-input-group--error]="infoForm.get('provider')?.invalid && infoForm.get('provider')?.touched">
+                <label class="fr-label" for="info-provider">Fournisseur <span style="color:var(--text-default-error)">*</span></label>
+                <input id="info-provider" class="fr-input" type="text" formControlName="provider"
+                  [class.fr-input--error]="infoForm.get('provider')?.invalid && infoForm.get('provider')?.touched" />
+                @if (infoForm.get('provider')?.invalid && infoForm.get('provider')?.touched) {
+                  <p class="fr-error-text">Le fournisseur est obligatoire.</p>
+                }
+              </div>
+
+              <!-- Version -->
+              <p class="fr-label fr-mb-1w">Version <span style="color:var(--text-default-error)">*</span></p>
+              <div class="fr-grid-row fr-grid-row--gutters fr-mb-2w">
+                <div class="fr-col-4">
+                  <div class="fr-input-group">
+                    <label class="fr-label" for="info-v-major">Majeure (X)</label>
+                    <input id="info-v-major" class="fr-input" type="number" min="0" formControlName="versionMajor" />
+                  </div>
+                </div>
+                <div class="fr-col-4">
+                  <div class="fr-input-group">
+                    <label class="fr-label" for="info-v-minor">Mineure (Y)</label>
+                    <input id="info-v-minor" class="fr-input" type="number" min="0" formControlName="versionMinor" />
+                  </div>
+                </div>
+                <div class="fr-col-4">
+                  <div class="fr-input-group">
+                    <label class="fr-label" for="info-v-patch">Correctif (Z)</label>
+                    <input id="info-v-patch" class="fr-input" type="number" min="0" formControlName="versionPatch" />
+                  </div>
+                </div>
+              </div>
+
+              <!-- Description -->
+              <div class="fr-input-group fr-mb-2w">
+                <label class="fr-label" for="info-description">Description</label>
+                <textarea id="info-description" class="fr-input" rows="3" formControlName="description"></textarea>
+              </div>
+
+              <!-- Catégorie -->
+              <div class="fr-select-group fr-mb-3w">
+                <label class="fr-label" for="info-category">Catégorie</label>
+                <select id="info-category" class="fr-select" formControlName="categoryId">
+                  <option value="">— Sans catégorie —</option>
+                  @for (cat of categories(); track cat.id) {
+                    <option [value]="cat.id">{{ cat.name }}</option>
+                  }
+                </select>
+              </div>
+
+              <div class="fr-btns-group fr-btns-group--inline fr-btns-group--right">
+                <button type="button" class="fr-btn fr-btn--secondary" (click)="editingInfo.set(false)">Annuler</button>
+                <button type="submit" class="fr-btn" [disabled]="savingInfo()">
+                  {{ savingInfo() ? 'Enregistrement...' : 'Enregistrer' }}
+                </button>
+              </div>
+            </form>
+          }
+        }
+
+        <!-- Onglet Contacts -->
+        @if (activeTab() === 'contacts') {
+          @if (!editingContacts()) {
+            <div class="fr-card fr-mb-3w">
+              <div class="fr-card__body">
+                <div class="fr-card__content">
+                  <div class="fr-grid-row fr-grid-row--gutters">
+                    <div class="fr-col-12 fr-col-md-6">
+                      <p class="fr-text--bold fr-mb-1w">Contact métier</p>
+                      <p class="fr-mb-0">{{ entry.contactFunctionalName }}</p>
+                      <p class="fr-mb-0 fr-text--sm">{{ entry.contactFunctionalEntity }}</p>
+                      <p class="fr-mb-0 fr-text--sm">{{ entry.contactFunctionalEmail }}</p>
+                    </div>
+                    <div class="fr-col-12 fr-col-md-6">
+                      <p class="fr-text--bold fr-mb-1w">Contact technique</p>
+                      <p class="fr-mb-0">{{ entry.contactTechnicalName }}</p>
+                      <p class="fr-mb-0 fr-text--sm">{{ entry.contactTechnicalEntity }}</p>
+                      <p class="fr-mb-0 fr-text--sm">{{ entry.contactTechnicalEmail }}</p>
+                    </div>
+                  </div>
+                  <div class="fr-mt-2w">
+                    <button class="fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-edit-line" (click)="startEditContacts()">
+                      Modifier les contacts
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          }
+
+          @if (editingContacts()) {
+            <form [formGroup]="contactForm" (ngSubmit)="submitContacts()" novalidate class="fr-mb-3w">
+              <!-- Contact métier -->
+              <p class="fr-label fr-mb-1w">Contact métier <span style="color:var(--text-default-error)">*</span></p>
+              <div class="fr-grid-row fr-grid-row--gutters fr-mb-3w">
+                <div class="fr-col-12 fr-col-md-4">
+                  <div class="fr-input-group"
+                    [class.fr-input-group--error]="contactForm.get('contactFunctionalName')?.invalid && contactForm.get('contactFunctionalName')?.touched">
+                    <label class="fr-label" for="cf-name">Nom et prénom</label>
+                    <input id="cf-name" class="fr-input" type="text" formControlName="contactFunctionalName" placeholder="Prénom Nom"
+                      [class.fr-input--error]="contactForm.get('contactFunctionalName')?.invalid && contactForm.get('contactFunctionalName')?.touched" />
+                    @if (contactForm.get('contactFunctionalName')?.invalid && contactForm.get('contactFunctionalName')?.touched) {
+                      <p class="fr-error-text">Obligatoire.</p>
+                    }
+                  </div>
+                </div>
+                <div class="fr-col-12 fr-col-md-4">
+                  <div class="fr-input-group"
+                    [class.fr-input-group--error]="contactForm.get('contactFunctionalEntity')?.invalid && contactForm.get('contactFunctionalEntity')?.touched">
+                    <label class="fr-label" for="cf-entity">Entité</label>
+                    <input id="cf-entity" class="fr-input" type="text" formControlName="contactFunctionalEntity" placeholder="Direction XYZ"
+                      [class.fr-input--error]="contactForm.get('contactFunctionalEntity')?.invalid && contactForm.get('contactFunctionalEntity')?.touched" />
+                    @if (contactForm.get('contactFunctionalEntity')?.invalid && contactForm.get('contactFunctionalEntity')?.touched) {
+                      <p class="fr-error-text">Obligatoire.</p>
+                    }
+                  </div>
+                </div>
+                <div class="fr-col-12 fr-col-md-4">
+                  <div class="fr-input-group"
+                    [class.fr-input-group--error]="contactForm.get('contactFunctionalEmail')?.invalid && contactForm.get('contactFunctionalEmail')?.touched">
+                    <label class="fr-label" for="cf-email">Email</label>
+                    <input id="cf-email" class="fr-input" type="email" formControlName="contactFunctionalEmail" placeholder="prenom.nom@example.fr"
+                      [class.fr-input--error]="contactForm.get('contactFunctionalEmail')?.invalid && contactForm.get('contactFunctionalEmail')?.touched" />
+                    @if (contactForm.get('contactFunctionalEmail')?.invalid && contactForm.get('contactFunctionalEmail')?.touched) {
+                      <p class="fr-error-text">Email valide requis.</p>
+                    }
+                  </div>
+                </div>
+              </div>
+
+              <!-- Contact technique -->
+              <p class="fr-label fr-mb-1w">Contact technique <span style="color:var(--text-default-error)">*</span></p>
+              <div class="fr-grid-row fr-grid-row--gutters fr-mb-3w">
+                <div class="fr-col-12 fr-col-md-4">
+                  <div class="fr-input-group"
+                    [class.fr-input-group--error]="contactForm.get('contactTechnicalName')?.invalid && contactForm.get('contactTechnicalName')?.touched">
+                    <label class="fr-label" for="ct-name">Nom et prénom</label>
+                    <input id="ct-name" class="fr-input" type="text" formControlName="contactTechnicalName" placeholder="Prénom Nom"
+                      [class.fr-input--error]="contactForm.get('contactTechnicalName')?.invalid && contactForm.get('contactTechnicalName')?.touched" />
+                    @if (contactForm.get('contactTechnicalName')?.invalid && contactForm.get('contactTechnicalName')?.touched) {
+                      <p class="fr-error-text">Obligatoire.</p>
+                    }
+                  </div>
+                </div>
+                <div class="fr-col-12 fr-col-md-4">
+                  <div class="fr-input-group"
+                    [class.fr-input-group--error]="contactForm.get('contactTechnicalEntity')?.invalid && contactForm.get('contactTechnicalEntity')?.touched">
+                    <label class="fr-label" for="ct-entity">Entité</label>
+                    <input id="ct-entity" class="fr-input" type="text" formControlName="contactTechnicalEntity" placeholder="Équipe Technique"
+                      [class.fr-input--error]="contactForm.get('contactTechnicalEntity')?.invalid && contactForm.get('contactTechnicalEntity')?.touched" />
+                    @if (contactForm.get('contactTechnicalEntity')?.invalid && contactForm.get('contactTechnicalEntity')?.touched) {
+                      <p class="fr-error-text">Obligatoire.</p>
+                    }
+                  </div>
+                </div>
+                <div class="fr-col-12 fr-col-md-4">
+                  <div class="fr-input-group"
+                    [class.fr-input-group--error]="contactForm.get('contactTechnicalEmail')?.invalid && contactForm.get('contactTechnicalEmail')?.touched">
+                    <label class="fr-label" for="ct-email">Email</label>
+                    <input id="ct-email" class="fr-input" type="email" formControlName="contactTechnicalEmail" placeholder="tech@example.fr"
+                      [class.fr-input--error]="contactForm.get('contactTechnicalEmail')?.invalid && contactForm.get('contactTechnicalEmail')?.touched" />
+                    @if (contactForm.get('contactTechnicalEmail')?.invalid && contactForm.get('contactTechnicalEmail')?.touched) {
+                      <p class="fr-error-text">Email valide requis.</p>
+                    }
+                  </div>
+                </div>
+              </div>
+
+              <div class="fr-btns-group fr-btns-group--inline fr-btns-group--right">
+                <button type="button" class="fr-btn fr-btn--secondary" (click)="editingContacts.set(false)">Annuler</button>
+                <button type="submit" class="fr-btn" [disabled]="savingContacts()">
+                  {{ savingContacts() ? 'Enregistrement...' : 'Enregistrer' }}
+                </button>
+              </div>
+            </form>
+          }
+        }
+
+      }
+    </div>

front-public/src/app/pages/api-detail/api-detail.component.ts

@@ -1,253 +1,155 @@
 import {
   Component,
   signal,
+  computed,
   inject,
+  DestroyRef,
   OnInit,
   OnDestroy,
   ChangeDetectionStrategy,
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { ApiService } from '../../core/api.service';
-import { ApiEntry } from '@datacat/shared';
+import { CategoryService } from '../../core/category.service';
+import { BreadcrumbComponent, BreadcrumbItem } from '../../shared/breadcrumb/breadcrumb.component';
+import { ApiEntry, ApiEntryListItem, Category } from '@datacat/shared';
 
 @Component({
   selector: 'app-api-detail',
   standalone: true,
-  imports: [CommonModule, RouterLink],
+  imports: [CommonModule, RouterLink, ReactiveFormsModule, BreadcrumbComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
+  templateUrl: "./api-detail.component.html",
-    <div class="fr-container fr-mt-4w fr-mb-4w">
-      <!-- Fil d'Ariane -->
-      <nav class="fr-breadcrumb fr-mb-3w" aria-label="vous êtes ici">
-        <ol class="fr-breadcrumb__list">
-          <li>
-            <a class="fr-breadcrumb__link" routerLink="/catalog">Catalogue</a>
-          </li>
-          <li>
-            <a class="fr-breadcrumb__link" aria-current="page">
-              {{ api()?.title ?? 'Chargement...' }}
-            </a>
-          </li>
-        </ol>
-      </nav>
-
-      @if (loading()) {
-        <div class="fr-callout fr-mb-4w">
-          <p class="fr-callout__text">Chargement...</p>
-        </div>
-      }
-
-      @if (error()) {
-        <div class="fr-alert fr-alert--error fr-mb-4w">
-          <p class="fr-alert__title">Erreur</p>
-          <p>{{ error() }}</p>
-        </div>
-      }
-
-      @if (api(); as entry) {
-        <!-- En-tête -->
-        <div class="fr-grid-row fr-grid-row--middle fr-mb-3w">
-          <div class="fr-col">
-            <h1 class="fr-h2 fr-mb-1w">{{ entry.title }}</h1>
-            <div class="fr-tags-group">
-              <span class="fr-tag">{{ entry.type }}</span>
-              <span class="fr-tag">v{{ entry.version }}</span>
-              <span [class]="badgeClass(entry.status)">{{ entry.status }}</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- Alerte statut PENDING -->
-        @if (entry.status === 'PENDING') {
-          <div class="fr-alert fr-alert--info fr-mb-3w">
-            <p class="fr-alert__title">Génération en cours</p>
-            <p>La documentation est en cours de génération. Cette page se rafraîchit automatiquement.</p>
-          </div>
-        }
-
-        <!-- Alerte statut ERROR -->
-        @if (entry.status === 'ERROR') {
-          <div class="fr-alert fr-alert--error fr-mb-3w">
-            <p class="fr-alert__title">Erreur de génération</p>
-            <p>{{ entry.errorMessage }}</p>
-          </div>
-        }
-
-        <!-- Métadonnées -->
-        <div class="fr-card fr-mb-4w">
-          <div class="fr-card__body">
-            <div class="fr-card__content">
-              <h2 class="fr-h5 fr-mb-2w">Informations</h2>
-              <dl class="fr-grid-row fr-grid-row--gutters">
-                <div class="fr-col-12 fr-col-md-4">
-                  <dt class="fr-text--bold">Titre</dt>
-                  <dd>{{ entry.title }}</dd>
-                </div>
-                <div class="fr-col-12 fr-col-md-4">
-                  <dt class="fr-text--bold">Version</dt>
-                  <dd>{{ entry.version }}</dd>
-                </div>
-                <div class="fr-col-12 fr-col-md-4">
-                  <dt class="fr-text--bold">Type</dt>
-                  <dd>{{ entry.type }}</dd>
-                </div>
-                @if (entry.description) {
-                  <div class="fr-col-12">
-                    <dt class="fr-text--bold">Description</dt>
-                    <dd>{{ entry.description }}</dd>
-                  </div>
-                }
-                <div class="fr-col-12 fr-col-md-6">
-                  <dt class="fr-text--bold">Créé le</dt>
-                  <dd>{{ entry.createdAt | date:'dd/MM/yyyy HH:mm' }}</dd>
-                </div>
-                <div class="fr-col-12 fr-col-md-6">
-                  <dt class="fr-text--bold">Mis à jour le</dt>
-                  <dd>{{ entry.updatedAt | date:'dd/MM/yyyy HH:mm' }}</dd>
-                </div>
-              </dl>
-            </div>
-          </div>
-        </div>
-
-        <!-- Documentation fonctionnelle -->
-        @if (entry.functionalDoc) {
-          <div class="fr-card fr-mb-4w">
-            <div class="fr-card__body">
-              <div class="fr-card__content">
-                <h2 class="fr-h5 fr-mb-2w">Documentation fonctionnelle</h2>
-                <p style="white-space: pre-wrap">{{ entry.functionalDoc }}</p>
-              </div>
-            </div>
-          </div>
-        }
-
-        <!-- Documentation technique -->
-        @if (entry.technicalDoc) {
-          <div class="fr-card fr-mb-4w">
-            <div class="fr-card__body">
-              <div class="fr-card__content">
-                <h2 class="fr-h5 fr-mb-2w">Documentation technique</h2>
-                <p style="white-space: pre-wrap">{{ entry.technicalDoc }}</p>
-              </div>
-            </div>
-          </div>
-        }
-
-        <!-- Contacts -->
-        @if (entry.contactFunctional || entry.contactTechnical) {
-          <div class="fr-card fr-mb-4w">
-            <div class="fr-card__body">
-              <div class="fr-card__content">
-                <h2 class="fr-h5 fr-mb-2w">Contacts</h2>
-                <dl class="fr-grid-row fr-grid-row--gutters">
-                  @if (entry.contactFunctional) {
-                    <div class="fr-col-12 fr-col-md-6">
-                      <dt class="fr-text--bold">Contact fonctionnel</dt>
-                      <dd>{{ entry.contactFunctional }}</dd>
-                    </div>
-                  }
-                  @if (entry.contactTechnical) {
-                    <div class="fr-col-12 fr-col-md-6">
-                      <dt class="fr-text--bold">Contact technique</dt>
-                      <dd>{{ entry.contactTechnical }}</dd>
-                    </div>
-                  }
-                </dl>
-              </div>
-            </div>
-          </div>
-        }
-
-        <!-- Droits d'accès -->
-        @if (entry.accessRights) {
-          <div class="fr-card fr-mb-4w">
-            <div class="fr-card__body">
-              <div class="fr-card__content">
-                <h2 class="fr-h5 fr-mb-2w">Droits d'accès</h2>
-                <p style="white-space: pre-wrap">{{ entry.accessRights }}</p>
-              </div>
-            </div>
-          </div>
-        }
-
-        <!-- Documentation externe -->
-        @if (entry.externalDocUrl) {
-          <div class="fr-mb-4w">
-            <a
-              [href]="entry.externalDocUrl"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="fr-btn fr-btn--secondary fr-icon-external-link-line fr-btn--icon-left"
-            >
-              Documentation externe
-            </a>
-          </div>
-        }
-
-        <!-- Actions -->
-        <div class="fr-btns-group fr-btns-group--inline-sm">
-          <a
-            [routerLink]="['/catalog', entry.id, 'docs']"
-            class="fr-btn"
-            [class.fr-btn--disabled]="entry.status !== 'GENERATED'"
-            [attr.aria-disabled]="entry.status !== 'GENERATED' ? 'true' : null"
-          >
-            Voir la documentation
-          </a>
-          <a
-            [href]="'/api/apis/' + entry.id + '/yaml'"
-            class="fr-btn fr-btn--secondary"
-            download
-          >
-            Télécharger YAML
-          </a>
-          <button
-            class="fr-btn fr-btn--secondary"
-            (click)="onRegenerate()"
-            [disabled]="regenerating()"
-          >
-            {{ regenerating() ? 'Régénération...' : 'Régénérer' }}
-          </button>
-          <button
-            class="fr-btn fr-btn--secondary"
-            (click)="onDelete()"
-            [disabled]="deleting()"
-          >
-            {{ deleting() ? 'Suppression...' : 'Supprimer' }}
-          </button>
-        </div>
-      }
-    </div>
-  `,
 })
 export class ApiDetailComponent implements OnInit, OnDestroy {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private apiService = inject(ApiService);
+  private categoryService = inject(CategoryService);
+  private fb = inject(FormBuilder);
+  private destroyRef = inject(DestroyRef);
 
   api = signal<ApiEntry | null>(null);
+  versions = signal<ApiEntryListItem[]>([]);
+  categoryBreadcrumb = signal<Category[]>([]);
   loading = signal(false);
   error = signal<string | null>(null);
   regenerating = signal(false);
   deleting = signal(false);
+  settingCurrent = signal(false);
+  categories = signal<Category[]>([]);
+  actionsOpen = signal(false);
+
+  backUrl = computed<string[]>(() => {
+    const crumbs = this.categoryBreadcrumb();
+    if (crumbs.length > 0) return ['/browse', crumbs[crumbs.length - 1].id];
+    return ['/browse'];
+  });
+
+  breadcrumbItems = computed<BreadcrumbItem[]>(() => {
+    const crumbs = this.categoryBreadcrumb();
+    const items: BreadcrumbItem[] = [{ label: 'Accueil', link: '/' }];
+    if (crumbs.length === 0) items.push({ label: 'Parcourir', link: '/browse' });
+    for (const crumb of crumbs) items.push({ label: crumb.name, link: ['/browse', crumb.id] });
+    items.push({ label: this.api()?.title ?? 'Chargement...' });
+    return items;
+  });
+
+  /* Onglets */
+  activeTab = signal<'info' | 'contacts'>('info');
+  editingInfo = signal(false);
+  editingContacts = signal(false);
+  savingInfo = signal(false);
+  savingContacts = signal(false);
+
+  infoForm = this.fb.group({
+    convention: ['CONSULTER', Validators.required],
+    name: ['', Validators.required],
+    provider: ['', Validators.required],
+    versionMajor: [0, [Validators.required, Validators.min(0)]],
+    versionMinor: [0, [Validators.required, Validators.min(0)]],
+    versionPatch: [0, [Validators.required, Validators.min(0)]],
+    description: [''],
+    categoryId: [''],
+  });
+
+  contactForm = this.fb.group({
+    contactFunctionalName: ['', Validators.required],
+    contactFunctionalEntity: ['', Validators.required],
+    contactFunctionalEmail: ['', [Validators.required, Validators.email]],
+    contactTechnicalName: ['', Validators.required],
+    contactTechnicalEntity: ['', Validators.required],
+    contactTechnicalEmail: ['', [Validators.required, Validators.email]],
+  });
 
   private pollInterval: ReturnType<typeof setInterval> | null = null;
   private id = '';
 
   ngOnInit() {
-    this.id = this.route.snapshot.paramMap.get('id') ?? '';
+    this.categoryService
+      .list()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((res) => this.categories.set(res.items));
+    this.route.paramMap
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((params) => {
+        this.id = params.get('id') ?? '';
+        this.api.set(null);
+        this.versions.set([]);
+        this.error.set(null);
+        this.categoryBreadcrumb.set([]);
+        this.editingInfo.set(false);
+        this.editingContacts.set(false);
+        this.clearPoll();
         this.loadApi();
+      });
   }
 
   ngOnDestroy() {
     this.clearPoll();
   }
 
+  onVersionChange(event: Event): void {
+    const id = (event.target as HTMLSelectElement).value;
+    if (id && id !== this.api()?.id) {
+      this.router.navigate(['/catalog', id]);
+    }
+  }
+
+  onNewVersion(): void {
+    this.router.navigate(['/upload'], { queryParams: { from: this.api()?.id } });
+  }
+
+  onSetCurrent() {
+    this.settingCurrent.set(true);
+    this.apiService
+      .setCurrent(this.id)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (entry) => {
+          this.api.set(entry);
+          this.settingCurrent.set(false);
+          this.apiService
+            .getVersions(this.id)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+              next: (v) => this.versions.set(v),
+              error: () => {},
+            });
+        },
+        error: () => this.settingCurrent.set(false),
+      });
+  }
+
   onRegenerate() {
     this.regenerating.set(true);
-    this.apiService.regenerate(this.id).subscribe({
+    this.apiService
+      .regenerate(this.id)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
         next: (entry) => {
           this.api.set(entry);
           this.regenerating.set(false);
@@ -257,11 +159,97 @@ export class ApiDetailComponent implements OnInit, OnDestroy {
       });
   }
 
+  startEditInfo() {
+    const entry = this.api();
+    if (!entry) return;
+    this.infoForm.patchValue({
+      convention: entry.convention,
+      name: entry.name,
+      provider: entry.provider,
+      versionMajor: entry.versionMajor,
+      versionMinor: entry.versionMinor,
+      versionPatch: entry.versionPatch,
+      description: entry.description ?? '',
+      categoryId: entry.categoryId ?? '',
+    });
+    this.editingInfo.set(true);
+  }
+
+  startEditContacts() {
+    const entry = this.api();
+    if (!entry) return;
+    this.contactForm.patchValue({
+      contactFunctionalName: entry.contactFunctionalName,
+      contactFunctionalEntity: entry.contactFunctionalEntity,
+      contactFunctionalEmail: entry.contactFunctionalEmail,
+      contactTechnicalName: entry.contactTechnicalName,
+      contactTechnicalEntity: entry.contactTechnicalEntity,
+      contactTechnicalEmail: entry.contactTechnicalEmail,
+    });
+    this.editingContacts.set(true);
+  }
+
+  submitInfo() {
+    if (this.infoForm.invalid) { this.infoForm.markAllAsTouched(); return; }
+    const entry = this.api();
+    if (!entry) return;
+    this.savingInfo.set(true);
+    const raw = this.infoForm.getRawValue();
+    this.apiService.update(entry.id, {
+      convention: raw.convention ?? 'CONSULTER',
+      name: raw.name ?? '',
+      provider: raw.provider ?? '',
+      versionMajor: raw.versionMajor ?? 0,
+      versionMinor: raw.versionMinor ?? 0,
+      versionPatch: raw.versionPatch ?? 0,
+      categoryId: raw.categoryId || null,
+      description: raw.description || null,
+    })
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (updated) => { this.api.set(updated); this.savingInfo.set(false); this.editingInfo.set(false); },
+        error: () => this.savingInfo.set(false),
+      });
+  }
+
+  submitContacts() {
+    if (this.contactForm.invalid) { this.contactForm.markAllAsTouched(); return; }
+    const entry = this.api();
+    if (!entry) return;
+    this.savingContacts.set(true);
+    const raw = this.contactForm.getRawValue();
+    this.apiService.update(entry.id, {
+      contactFunctionalName: raw.contactFunctionalName ?? '',
+      contactFunctionalEntity: raw.contactFunctionalEntity ?? '',
+      contactFunctionalEmail: raw.contactFunctionalEmail ?? '',
+      contactTechnicalName: raw.contactTechnicalName ?? '',
+      contactTechnicalEntity: raw.contactTechnicalEntity ?? '',
+      contactTechnicalEmail: raw.contactTechnicalEmail ?? '',
+    })
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (updated) => { this.api.set(updated); this.savingContacts.set(false); this.editingContacts.set(false); },
+        error: () => this.savingContacts.set(false),
+      });
+  }
+
   onDelete() {
     if (!confirm('Supprimer cette API ?')) return;
     this.deleting.set(true);
-    this.apiService.delete(this.id).subscribe({
+    /* Calculer la cible de redirection avant la suppression */
-      next: () => this.router.navigate(['/catalog']),
+    const otherVersions = this.versions().filter((v) => v.id !== this.id);
+    const redirectTarget = otherVersions.find((v) => v.isCurrent) ?? otherVersions[0];
+    this.apiService
+      .delete(this.id)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: () => {
+          if (redirectTarget) {
+            this.router.navigate(['/catalog', redirectTarget.id]);
+          } else {
+            this.router.navigate(this.backUrl());
+          }
+        },
         error: () => this.deleting.set(false),
       });
   }
@@ -269,16 +257,43 @@ export class ApiDetailComponent implements OnInit, OnDestroy {
   badgeClass(status: string): string {
     if (status === 'GENERATED') return 'fr-badge fr-badge--success';
     if (status === 'ERROR') return 'fr-badge fr-badge--error';
+    if (status === 'NO_YAML') return 'fr-badge fr-badge--warning';
     return 'fr-badge fr-badge--info';
   }
 
+  statusLabel(status: string): string {
+    if (status === 'GENERATED') return 'Générée';
+    if (status === 'ERROR') return 'Erreur';
+    if (status === 'NO_YAML') return 'Sans fichier';
+    return 'En attente';
+  }
+
   private loadApi() {
     this.loading.set(true);
-    this.apiService.get(this.id).subscribe({
+    this.apiService
+      .get(this.id)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
         next: (entry) => {
           this.api.set(entry);
           this.loading.set(false);
           this.startPollIfPending();
+          this.apiService
+            .getVersions(this.id)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+              next: (v) => this.versions.set(v),
+              error: () => {},
+            });
+          if (entry.categoryId) {
+            this.categoryService
+              .browse(entry.categoryId)
+              .pipe(takeUntilDestroyed(this.destroyRef))
+              .subscribe({
+                next: (data) => this.categoryBreadcrumb.set(data.breadcrumb),
+                error: () => {},
+              });
+          }
         },
         error: (err) => {
           this.error.set(err.message ?? 'Erreur lors du chargement');
@@ -295,7 +310,10 @@ export class ApiDetailComponent implements OnInit, OnDestroy {
   }
 
   private pollStatus() {
-    this.apiService.get(this.id).subscribe({
+    this.apiService
+      .get(this.id)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
         next: (entry) => {
           this.api.set(entry);
           if (entry.status !== 'PENDING') this.clearPoll();

front-public/src/app/pages/browse/browse.component.ts

@@ -12,46 +12,61 @@ import { CommonModule } from '@angular/common';
 import { RouterLink } from '@angular/router';
 import { ActivatedRoute } from '@angular/router';
 import { CategoryService } from '../../core/category.service';
-import { CategoryBrowseResponse, Category, CategoryWithCounts } from '@datacat/shared';
+import { ApiService } from '../../core/api.service';
+import { CategoryBrowseResponse, Category, CategoryWithCounts, ApiEntryListItem } from '@datacat/shared';
+import { forkJoin } from 'rxjs';
+import { CategoryFormModalComponent } from '../../shared/category-form-modal/category-form-modal.component';
+import { CategoryDeleteModalComponent } from '../../shared/category-delete-modal/category-delete-modal.component';
+import { BreadcrumbComponent, BreadcrumbItem } from '../../shared/breadcrumb/breadcrumb.component';
 
 @Component({
   selector: 'app-browse',
   standalone: true,
-  imports: [CommonModule, RouterLink],
+  imports: [CommonModule, RouterLink, CategoryFormModalComponent, CategoryDeleteModalComponent, BreadcrumbComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div class="fr-container fr-mt-4w fr-mb-4w">
-      <!-- Fil d'Ariane -->
+      <app-breadcrumb [items]="breadcrumbItems()" />
-      <nav class="fr-breadcrumb fr-mb-3w" aria-label="vous êtes ici">
-        <ol class="fr-breadcrumb__list">
-          <li>
-            <a class="fr-breadcrumb__link" routerLink="/browse">Parcourir</a>
-          </li>
-          @for (crumb of ancestors(); track crumb.id) {
-            <li>
-              <a class="fr-breadcrumb__link" [routerLink]="['/browse', crumb.id]">{{ crumb.name }}</a>
-            </li>
-          }
-          @if (browseData()?.category) {
-            <li>
-              <a class="fr-breadcrumb__link" aria-current="page">{{ browseData()!.category!.name }}</a>
-            </li>
-          }
-        </ol>
-      </nav>
 
       <!-- En-tête -->
+      @if (categoryId()) {
+        <a class="fr-link fr-icon-arrow-left-line fr-link--icon-left fr-mb-2w" style="display:inline-flex;"
+           [routerLink]="backUrl()">Retour</a>
+      }
       <div class="fr-grid-row fr-grid-row--middle fr-mb-3w">
         <div class="fr-col">
-          <h1 class="fr-h2 fr-mb-0">{{ browseData()?.category?.name ?? 'Catalogue' }}</h1>
+          <h1 class="fr-h2 fr-mb-0">
+            {{ browseData()?.category?.name ?? 'Catalogue' }}
+            @if (browseData()?.category) {
+              <button
+                title="Modifier ce dossier"
+                style="background:none;border:none;cursor:pointer;padding:0 0.25rem;vertical-align:middle;opacity:0.6"
+                (click)="openEdit(browseData()!.category!)">
+                <span class="fr-icon-edit-line" aria-hidden="true" style="font-size:0.875rem"></span>
+              </button>
+            }
+          </h1>
         </div>
-        <div class="fr-col-auto">
+        <div class="fr-col-auto" style="display:flex;gap:0.5rem">
+          <a class="fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-upload-2-line"
+             [routerLink]="['/upload']"
+             [queryParams]="categoryId() ? { categoryId: categoryId() } : {}">
+            Importer une API
+          </a>
           <button class="fr-btn fr-btn--icon-left fr-icon-folder-2-fill" (click)="openCreate()">
             Nouveau dossier
           </button>
         </div>
       </div>
 
+      <!-- Barre de recherche -->
+      <div class="fr-search-bar fr-mb-3w">
+        <label class="fr-label" for="search-api">Rechercher</label>
+        <input id="search-api" class="fr-input" type="search" placeholder="Ex : auth async v1.0, openapi latest..."
+               [value]="searchQuery()"
+               (input)="onSearchChange($any($event.target).value)" />
+      </div>
+
       @if (loading()) {
         <div class="fr-callout fr-mb-4w">
           <p class="fr-callout__text">Chargement...</p>
@@ -64,10 +79,10 @@ import { CategoryBrowseResponse, Category, CategoryWithCounts } from '@datacat/s
         </div>
       }
 
+      @if (!isSearchMode()) {
         @if (!loading() && browseData()) {
           <!-- Sous-catégories -->
           @if (browseData()!.subcategories.length > 0) {
-          <h2 class="fr-h4 fr-mb-3w">Catégories</h2>
             <div class="fr-grid-row fr-grid-row--gutters fr-mb-4w">
               @for (cat of browseData()!.subcategories; track cat.id) {
                 <div class="fr-col-12 fr-col-md-4">
@@ -76,6 +91,18 @@ import { CategoryBrowseResponse, Category, CategoryWithCounts } from '@datacat/s
                       <div class="fr-tile__content">
                         <h3 class="fr-tile__title">
                           <a [routerLink]="['/browse', cat.id]">{{ cat.name }}</a>
+                          <button title="Modifier"
+                                  style="position:relative;z-index:1;background:none;border:none;cursor:pointer;padding:0 0.25rem;vertical-align:middle;opacity:0.6"
+                                  (click)="openEdit(cat); $event.stopPropagation()">
+                            <span class="fr-icon-edit-line" aria-hidden="true" style="font-size:0.75rem"></span>
+                          </button>
+                          @if (cat.apiCount === 0 && cat.subcategoryCount === 0) {
+                            <button title="Supprimer"
+                                    style="position:relative;z-index:1;background:none;border:none;cursor:pointer;padding:0 0.25rem;vertical-align:middle;opacity:0.6"
+                                    (click)="openDelete(cat); $event.stopPropagation()">
+                              <span class="fr-icon-delete-bin-line" aria-hidden="true" style="font-size:0.75rem"></span>
+                            </button>
+                          }
                         </h3>
                         @if (cat.description) {
                           <p class="fr-tile__desc">{{ cat.description }}</p>
@@ -83,18 +110,6 @@ import { CategoryBrowseResponse, Category, CategoryWithCounts } from '@datacat/s
                         <p class="fr-tile__detail">
                           {{ cat.subcategoryCount }} sous-catégorie(s) · {{ cat.apiCount }} API(s)
                         </p>
-                      <div style="position:relative;z-index:1;margin-top:0.5rem;display:flex;gap:0.25rem;order:5">
-                        <button class="fr-btn fr-btn--tertiary-no-outline fr-btn--sm fr-btn--icon-left fr-icon-edit-line"
-                                (click)="openEdit(cat); $event.stopPropagation()">
-                          Modifier
-                        </button>
-                        @if (cat.apiCount === 0 && cat.subcategoryCount === 0) {
-                          <button class="fr-btn fr-btn--tertiary-no-outline fr-btn--sm fr-btn--icon-left fr-icon-delete-bin-line"
-                                  (click)="deleteCategory(cat); $event.stopPropagation()">
-                            Supprimer
-                          </button>
-                        }
-                      </div>
                       </div>
                     </div>
                   </div>
@@ -105,7 +120,6 @@ import { CategoryBrowseResponse, Category, CategoryWithCounts } from '@datacat/s
 
           <!-- APIs -->
           @if (browseData()!.apis.length > 0) {
-          <h2 class="fr-h4 fr-mb-3w">APIs</h2>
             <div class="fr-grid-row fr-grid-row--gutters">
               @for (api of browseData()!.apis; track api.id) {
                 <div class="fr-col-12 fr-col-md-4">
@@ -120,8 +134,10 @@ import { CategoryBrowseResponse, Category, CategoryWithCounts } from '@datacat/s
                         }
                         <p class="fr-tile__detail">
                           <span [class]="typeBadgeClass(api.type)">{{ api.type }}</span>
-                        &nbsp;
+                          &nbsp;<span class="fr-badge fr-badge--sm">v{{ api.version }}</span>
-                        <span [class]="statusBadgeClass(api.status)">{{ api.status }}</span>
+                          @if (api.isCurrent) {
+                            &nbsp;<span class="fr-badge fr-badge--success fr-badge--sm">Courante</span>
+                          }
                         </p>
                       </div>
                     </div>
@@ -137,61 +153,113 @@ import { CategoryBrowseResponse, Category, CategoryWithCounts } from '@datacat/s
             </div>
           }
         }
+      } @else {
+        <!-- Mode recherche -->
+        @if (searchLoading()) {
+          <div class="fr-callout fr-mb-4w">
+            <p class="fr-callout__text">Chargement...</p>
+          </div>
+        }
+        @if (!searchLoading()) {
+          <!-- Dossiers -->
+          @if (searchCategoryResults().length > 0) {
+            @if (searchResults().length > 0) {
+              <p class="fr-text--sm fr-text--bold fr-mb-2w">Dossiers</p>
+            }
+            <div class="fr-grid-row fr-grid-row--gutters fr-mb-4w">
+              @for (cat of searchCategoryResults(); track cat.id) {
+                <div class="fr-col-12 fr-col-md-4">
+                  <div class="fr-tile fr-enlarge-link fr-tile--sm">
+                    <div class="fr-tile__body">
+                      <div class="fr-tile__content">
+                        <h3 class="fr-tile__title">
+                          <a [routerLink]="['/browse', cat.id]">{{ cat.name }}</a>
+                        </h3>
+                        @if (cat.description) {
+                          <p class="fr-tile__desc">{{ cat.description }}</p>
+                        }
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              }
+            </div>
+          }
 
-      <!-- Modale création / édition (overlay Angular, sans fr-modal pour éviter l'interférence du JS DSFR) -->
+          <!-- APIs -->
+          @if (searchResults().length > 0) {
+            @if (searchCategoryResults().length > 0) {
+              <p class="fr-text--sm fr-text--bold fr-mb-2w">APIs</p>
+            }
+            <div class="fr-grid-row fr-grid-row--gutters">
+              @for (api of searchResults(); track api.id) {
+                <div class="fr-col-12 fr-col-md-6 fr-col-lg-4">
+                  <div class="fr-card fr-card--sm fr-enlarge-link">
+                    <div class="fr-card__body">
+                      <div class="fr-card__content">
+                        <h3 class="fr-card__title">
+                          <a [routerLink]="['/catalog', api.id]">{{ api.title }}</a>
+                        </h3>
+                        @if (api.description) {
+                          <p class="fr-card__desc">{{ api.description }}</p>
+                        }
+                        <div class="fr-badges-group fr-mt-1w">
+                          <span [class]="typeBadgeClass(api.type)">{{ api.type }}</span>
+                          <span class="fr-badge fr-badge--sm">v{{ api.version }}</span>
+                          @if (api.isCurrent) {
+                            <span class="fr-badge fr-badge--success fr-badge--sm">Courante</span>
+                          }
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              }
+            </div>
+            @if (searchTotalPages() > 1) {
+              <div class="fr-grid-row fr-grid-row--center fr-mt-4w">
+                <button class="fr-btn fr-btn--secondary fr-btn--sm" [disabled]="searchPage() === 1"
+                        (click)="setSearchPage(searchPage() - 1)">Précédent</button>
+                <span class="fr-mx-2w">Page {{ searchPage() }} / {{ searchTotalPages() }}</span>
+                <button class="fr-btn fr-btn--secondary fr-btn--sm" [disabled]="searchPage() === searchTotalPages()"
+                        (click)="setSearchPage(searchPage() + 1)">Suivant</button>
+              </div>
+            }
+          }
+
+          <!-- Aucun résultat -->
+          @if (searchCategoryResults().length === 0 && searchResults().length === 0) {
+            <p class="fr-text--lead">Aucun résultat pour « {{ searchQuery() }} »</p>
+          }
+        }
+      }
+    </div>
+
+    <!-- Modale de suppression -->
+    @if (deletingCategory()) {
+      <app-category-delete-modal
+        [category]="deletingCategory()!"
+        (confirmed)="onDeleteConfirmed()"
+        (cancelled)="deletingCategory.set(null)"
+      />
+    }
+
+    <!-- Modale création / édition -->
     @if (showFormModal()) {
-        <div style="position:fixed;inset:0;z-index:9999;background:rgba(22,22,22,.64);display:flex;align-items:flex-start;justify-content:center;padding-top:5vh;overflow-y:auto"
+      <app-category-form-modal
-             role="dialog" aria-modal="true" aria-labelledby="modal-title">
+        [mode]="formMode()"
-          <div style="background:white;width:calc(100% - 2rem);max-width:540px;margin:0 1rem 2rem">
+        [category]="editingCategory()"
-            <div class="fr-p-4w">
+        [parentId]="categoryId()"
-              <div class="fr-grid-row fr-grid-row--middle fr-mb-3w">
+        (saved)="onFormSaved()"
-                <div class="fr-col">
+        (closed)="showFormModal.set(false)"
-                  <h2 id="modal-title" class="fr-h3 fr-mb-0">
+      />
-                    {{ formMode() === 'create' ? 'Nouveau dossier' : 'Modifier le dossier' }}
-                  </h2>
-                </div>
-                <div class="fr-col-auto">
-                  <button class="fr-btn fr-btn--tertiary-no-outline fr-btn--sm"
-                          (click)="closeModal()">✕</button>
-                </div>
-              </div>
-              @if (formError()) {
-                <div class="fr-alert fr-alert--error fr-mb-2w">
-                  <p>{{ formError() }}</p>
-                </div>
     }
-              <div class="fr-input-group fr-mb-2w">
-                <label class="fr-label" for="form-name">
-                  Nom <span class="fr-hint-text">Obligatoire</span>
-                </label>
-                <input id="form-name" class="fr-input" type="text"
-                       [value]="formName()"
-                       (input)="formName.set($any($event.target).value)" />
-              </div>
-              <div class="fr-input-group fr-mb-3w">
-                <label class="fr-label" for="form-desc">
-                  Description <span class="fr-hint-text">Optionnel</span>
-                </label>
-                <textarea id="form-desc" class="fr-input" rows="3"
-                          [value]="formDescription()"
-                          (input)="formDescription.set($any($event.target).value)"></textarea>
-              </div>
-              <div class="fr-btns-group fr-btns-group--right fr-btns-group--inline">
-                <button class="fr-btn fr-btn--secondary" (click)="closeModal()">Annuler</button>
-                <button class="fr-btn" (click)="submitForm()" [disabled]="formLoading()">
-                  {{ formMode() === 'create' ? 'Créer' : 'Enregistrer' }}
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      }
-    </div>
   `,
 })
 export class BrowseComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private categoryService = inject(CategoryService);
+  private apiService = inject(ApiService);
   private destroyRef = inject(DestroyRef);
 
   browseData = signal<CategoryBrowseResponse | null>(null);
@@ -199,22 +267,48 @@ export class BrowseComponent implements OnInit {
   error = signal<string | null>(null);
   categoryId = signal<string | null>(null);
 
-  /* Signaux pour la modale */
+  /* Signaux recherche */
+  searchQuery = signal('');
+  searchResults = signal<ApiEntryListItem[]>([]);
+  searchCategoryResults = signal<Category[]>([]);
+  searchTotal = signal(0);
+  searchPage = signal(1);
+  searchLoading = signal(false);
+  readonly searchLimit = 12;
+
+  isSearchMode = computed(() => this.searchQuery().trim().length > 0);
+  searchTotalPages = computed(() => Math.ceil(this.searchTotal() / this.searchLimit));
+
+  private searchDebounce: ReturnType<typeof setTimeout> | null = null;
+
+  /* Signaux pour les modales */
   showFormModal = signal(false);
   formMode = signal<'create' | 'edit'>('create');
-  editingCategoryId = signal<string | null>(null);
+  editingCategory = signal<Category | null>(null);
-  formName = signal('');
+  deletingCategory = signal<CategoryWithCounts | null>(null);
-  formDescription = signal('');
-  formError = signal<string | null>(null);
-  formLoading = signal(false);
 
-  /* Ancêtres = breadcrumb sans le nœud courant (déjà dans le h1) */
   ancestors = computed<Category[]>(() => {
     const d = this.browseData();
     if (!d || !d.category) return [];
     return d.breadcrumb.slice(0, -1);
   });
 
+  breadcrumbItems = computed<BreadcrumbItem[]>(() => {
+    const items: BreadcrumbItem[] = [{ label: 'Accueil', link: '/' }];
+    for (const crumb of this.ancestors()) {
+      items.push({ label: crumb.name, link: ['/browse', crumb.id] });
+    }
+    const current = this.browseData()?.category;
+    if (current) items.push({ label: current.name });
+    return items;
+  });
+
+  backUrl = computed<string[]>(() => {
+    const anc = this.ancestors();
+    if (anc.length > 0) return ['/browse', anc[anc.length - 1].id];
+    return ['/browse'];
+  });
+
   ngOnInit() {
     this.route.paramMap
       .pipe(takeUntilDestroyed(this.destroyRef))
@@ -227,7 +321,10 @@ export class BrowseComponent implements OnInit {
   loadBrowse() {
     this.loading.set(true);
     this.error.set(null);
-    this.categoryService.browse(this.categoryId()).subscribe({
+    this.categoryService
+      .browse(this.categoryId())
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
         next: (data) => {
           this.browseData.set(data);
           this.loading.set(false);
@@ -241,65 +338,67 @@ export class BrowseComponent implements OnInit {
 
   openCreate() {
     this.formMode.set('create');
-    this.editingCategoryId.set(null);
+    this.editingCategory.set(null);
-    this.formName.set('');
-    this.formDescription.set('');
-    this.formError.set(null);
     this.showFormModal.set(true);
   }
 
-  openEdit(cat: CategoryWithCounts) {
+  openEdit(cat: Category) {
     this.formMode.set('edit');
-    this.editingCategoryId.set(cat.id);
+    this.editingCategory.set(cat);
-    this.formName.set(cat.name);
-    this.formDescription.set(cat.description ?? '');
-    this.formError.set(null);
     this.showFormModal.set(true);
   }
 
-  closeModal() {
+  openDelete(cat: CategoryWithCounts) {
-    this.showFormModal.set(false);
+    this.deletingCategory.set(cat);
   }
 
-  submitForm() {
+  onFormSaved() {
-    if (!this.formName().trim()) {
-      this.formError.set('Le nom est obligatoire.');
-      return;
-    }
-    this.formLoading.set(true);
-    const name = this.formName().trim();
-    const description = this.formDescription().trim() || undefined;
-
-    const obs =
-      this.formMode() === 'create'
-        ? this.categoryService.create({
-            name,
-            description,
-            parentId: this.categoryId() ?? undefined,
-          })
-        : this.categoryService.update(this.editingCategoryId()!, { name, description });
-
-    obs.subscribe({
-      next: () => {
-        this.formLoading.set(false);
     this.showFormModal.set(false);
     this.loadBrowse();
+  }
+
+  onDeleteConfirmed() {
+    this.deletingCategory.set(null);
+    this.loadBrowse();
+  }
+
+  onSearchChange(value: string) {
+    this.searchQuery.set(value);
+    this.searchPage.set(1);
+    if (this.searchDebounce) clearTimeout(this.searchDebounce);
+    if (value.trim()) {
+      this.searchLoading.set(true);
+      this.searchDebounce = setTimeout(() => this.loadSearch(), 400);
+    } else {
+      this.searchLoading.set(false);
+      this.searchCategoryResults.set([]);
+    }
+  }
+
+  loadSearch() {
+    this.searchLoading.set(true);
+    const raw = this.searchQuery();
+
+    forkJoin({
+      apis: this.apiService.list({ search: raw || undefined, page: this.searchPage(), limit: this.searchLimit }),
+      categories: this.categoryService.list(raw || undefined),
+    })
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+      next: ({ apis, categories }) => {
+        this.searchResults.set(apis.items);
+        this.searchTotal.set(apis.total);
+        this.searchCategoryResults.set(categories.items);
+        this.searchLoading.set(false);
       },
-      error: (err: { error?: { message?: string } }) => {
+      error: () => this.searchLoading.set(false),
-        this.formLoading.set(false);
-        this.formError.set(err?.error?.message ?? 'Une erreur est survenue.');
-      },
     });
   }
 
-  deleteCategory(cat: CategoryWithCounts) {
+  setSearchPage(p: number) {
-    if (cat.apiCount > 0 || cat.subcategoryCount > 0) return;
+    if (p < 1 || p > this.searchTotalPages()) return;
-    if (!confirm(`Supprimer le dossier "${cat.name}" ?`)) return;
+    this.searchPage.set(p);
-    this.categoryService.delete(cat.id).subscribe({
+    this.loadSearch();
-      next: () => this.loadBrowse(),
-      error: (err: { error?: { message?: string } }) =>
-        alert(err?.error?.message ?? 'Erreur lors de la suppression.'),
-    });
   }
 
   typeBadgeClass(type: string): string {
@@ -308,9 +407,4 @@ export class BrowseComponent implements OnInit {
       : 'fr-badge fr-badge--sm fr-badge--blue-ecume';
   }
 
-  statusBadgeClass(status: string): string {
-    if (status === 'GENERATED') return 'fr-badge fr-badge--sm fr-badge--success';
-    if (status === 'ERROR') return 'fr-badge fr-badge--sm fr-badge--error';
-    return 'fr-badge fr-badge--sm fr-badge--info';
-  }
 }

front-public/src/app/pages/catalog/catalog.component.ts

@@ -4,9 +4,11 @@ import {
   computed,
   effect,
   inject,
+  DestroyRef,
   OnInit,
   ChangeDetectionStrategy,
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { CommonModule } from '@angular/common';
 import { RouterLink } from '@angular/router';
 import { FormsModule } from '@angular/forms';
@@ -41,7 +43,7 @@ import { ApiEntryListItem, ApiType } from '@datacat/shared';
               id="search-input"
               class="fr-input"
               type="search"
-              placeholder="Rechercher par titre ou description..."
+              placeholder="Ex : auth async v1.0, openapi latest..."
               [ngModel]="search()"
               (ngModelChange)="onSearchChange($event)"
             />
@@ -154,6 +156,7 @@ import { ApiEntryListItem, ApiType } from '@datacat/shared';
 })
 export class CatalogComponent implements OnInit {
   private apiService = inject(ApiService);
+  private destroyRef = inject(DestroyRef);
 
   apis = signal<ApiEntryListItem[]>([]);
   loading = signal(false);
@@ -173,9 +176,9 @@ export class CatalogComponent implements OnInit {
   private searchTimer: ReturnType<typeof setTimeout> | null = null;
 
   constructor() {
-    /* Rechargement si page change */
+    /* Rechargement si page change (lecture du signal = dépendance de l'effet) */
     effect(() => {
-      const _ = this.page();
+      this.page();
       this.loadApis();
     });
   }
@@ -208,6 +211,7 @@ export class CatalogComponent implements OnInit {
     const base = 'fr-badge';
     if (status === 'GENERATED') return `${base} fr-badge--success`;
     if (status === 'ERROR') return `${base} fr-badge--error`;
+    if (status === 'NO_YAML') return `${base} fr-badge--warning`;
     return `${base} fr-badge--info`;
   }
 
@@ -220,6 +224,7 @@ export class CatalogComponent implements OnInit {
         page: this.page(),
         limit: this.limit,
       })
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe({
         next: (res) => {
           this.apis.set(res.items);

front-public/src/app/pages/upload/upload.component.html

@@ -0,0 +1,472 @@
+    <div class="fr-container fr-mt-4w fr-mb-4w">
+      <app-breadcrumb [items]="breadcrumbItems" />
+
+      <h1 class="fr-h2 fr-mb-4w">Importer une API</h1>
+
+      <!-- Stepper numéroté -->
+      <div class="fr-mb-4w" style="display:flex;align-items:flex-start;">
+        @for (title of stepTitles; track $index) {
+          <div style="display:flex;flex-direction:column;align-items:center;flex:none;min-width:6rem;">
+            <div
+              [style.background]="step() > $index + 1 ? '#1f8d49' : step() === $index + 1 ? '#000091' : '#e5e5e5'"
+              [style.color]="step() >= $index + 1 ? 'white' : '#666'"
+              style="width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.875rem;transition:background 0.2s;">
+              @if (step() > $index + 1) {
+                <span class="fr-icon-check-line" aria-hidden="true" style="font-size:0.875rem"></span>
+              } @else {
+                {{ $index + 1 }}
+              }
+            </div>
+            <span style="font-size:0.75rem;margin-top:0.4rem;text-align:center;line-height:1.2;"
+                  [style.font-weight]="step() === $index + 1 ? '700' : '400'"
+                  [style.color]="step() === $index + 1 ? '#000091' : step() > $index + 1 ? '#1f8d49' : '#666'">
+              {{ title }}
+            </span>
+          </div>
+          @if ($index < stepTitles.length - 1) {
+            <div style="flex:1;height:2px;margin-top:1rem;transition:background 0.2s;"
+                 [style.background]="step() > $index + 1 ? '#1f8d49' : '#e5e5e5'">
+            </div>
+          }
+        }
+      </div>
+
+      <!-- Étape 1 : Fichier(s) YAML -->
+      @if (step() === 1) {
+        <div class="fr-upload-group fr-mb-4w">
+          <label class="fr-label" for="file-input">
+            Fichier(s) YAML
+            <span class="fr-hint-text">
+              Formats acceptés : .yaml, .yml — Sélectionnez plusieurs fichiers si votre spec utilise des $ref
+            </span>
+          </label>
+          <input
+            id="file-input"
+            class="fr-upload"
+            type="file"
+            accept=".yaml,.yml"
+            multiple
+            (change)="onFileChange($event)"
+          />
+        </div>
+
+        @if (fileError()) {
+          <div class="fr-alert fr-alert--error fr-mb-3w">
+            <p>{{ fileError() }}</p>
+          </div>
+        }
+
+        @if (selectedFiles().length > 0) {
+          <div class="fr-mb-3w">
+            @for (file of selectedFiles(); track file.name) {
+              <div class="fr-callout fr-callout--blue-cumulus fr-mb-1w" style="display:flex;align-items:center;justify-content:space-between;gap:1rem;">
+                <span>
+                  <strong>{{ file.name }}</strong>
+                  ({{ (file.size / 1024).toFixed(1) }} Ko)
+                </span>
+                @if (file.name === detectedMainFilename()) {
+                  <span class="fr-badge fr-badge--success fr-badge--sm">Principal</span>
+                } @else if (selectedFiles().length > 1) {
+                  <span class="fr-badge fr-badge--blue-cumulus fr-badge--sm">Secondaire</span>
+                }
+              </div>
+            }
+          </div>
+
+          @if (validating()) {
+            <div class="fr-callout fr-mb-3w">
+              <p>Validation en cours...</p>
+            </div>
+          } @else if (validationDone()) {
+            @if (validationErrors().length > 0) {
+              <div class="fr-alert fr-alert--error fr-mb-3w">
+                <p class="fr-alert__title">Fichier(s) invalide(s)</p>
+                @for (err of validationErrors(); track err.file) {
+                  <p>{{ err.file ? err.file + ' : ' : '' }}{{ err.message }}</p>
+                }
+              </div>
+            } @else {
+              <div class="fr-alert fr-alert--success fr-mb-3w">
+                <p class="fr-alert__title">Fichier(s) valide(s)</p>
+                <p>Le fichier a été validé avec succès.</p>
+              </div>
+            }
+          }
+        }
+
+        <div class="fr-btns-group fr-btns-group--inline-sm">
+          <button
+            class="fr-btn"
+            (click)="goToStep2()"
+            [disabled]="!canProceedFromStep1()"
+          >
+            Suivant
+          </button>
+          <a routerLink="/catalog" class="fr-btn fr-btn--secondary">Annuler</a>
+        </div>
+      }
+
+      <!-- Étape 2 : Informations -->
+      @if (step() === 2) {
+        <!-- Bannière nouvelle version -->
+        @if (fromApi(); as origin) {
+          <div class="fr-callout fr-callout--blue-cumulus fr-mb-3w">
+            <p class="fr-callout__text">
+              Nouvelle version de : <strong>{{ origin.title }}</strong> (v{{ origin.version }})
+              — le nom et la convention sont verrouillés.
+            </p>
+          </div>
+        }
+
+        <form [formGroup]="metaForm" (ngSubmit)="goToStep3()" novalidate>
+
+          <!-- Titre : convention + nom -->
+          <p class="fr-label fr-mb-1w">Titre <span style="color:var(--text-default-error)">*</span></p>
+          <div class="fr-grid-row fr-grid-row--gutters fr-mb-1w">
+            <div class="fr-col-12 fr-col-md-4">
+              <div class="fr-select-group" [class.fr-select-group--error]="conventionInvalid()">
+                <label class="fr-label" for="convention-input">Convention</label>
+                <select
+                  id="convention-input"
+                  class="fr-select"
+                  [class.fr-select--error]="conventionInvalid()"
+                  formControlName="convention"
+                >
+                  <option value="CONSULTER">Consulter</option>
+                  <option value="ENREGISTRER">Enregistrer</option>
+                  <option value="ETRE_NOTIFIE">Être notifié</option>
+                </select>
+                @if (conventionInvalid()) {
+                  <p class="fr-error-text">La convention est obligatoire.</p>
+                }
+              </div>
+            </div>
+            <div class="fr-col-12 fr-col-md-8">
+              <div class="fr-input-group" [class.fr-input-group--error]="nameInvalid()">
+                <label class="fr-label" for="name-input">Nom de l'API</label>
+                <input
+                  id="name-input"
+                  class="fr-input"
+                  [class.fr-input--error]="nameInvalid()"
+                  formControlName="name"
+                  type="text"
+                  placeholder="Référentiel Adresses"
+                />
+                @if (nameInvalid()) {
+                  <p class="fr-error-text">Le nom est obligatoire.</p>
+                }
+              </div>
+            </div>
+          </div>
+          <p class="fr-hint-text fr-mb-3w">Titre complet : <strong>{{ previewTitle() }}</strong></p>
+
+          <!-- Catégorie -->
+          <div class="fr-select-group fr-mb-3w">
+            <label class="fr-label" for="category-input">
+              Catégorie
+            </label>
+            <select id="category-input" class="fr-select" formControlName="categoryId">
+              <option value="">— Sans catégorie —</option>
+              @for (cat of categories(); track cat.id) {
+                <option [value]="cat.id">{{ categoryLabel(cat) }}</option>
+              }
+            </select>
+          </div>
+
+          <!-- Fournisseur -->
+          <div class="fr-input-group fr-mb-3w" [class.fr-input-group--error]="providerInvalid()">
+            <label class="fr-label" for="provider-input">
+              Fournisseur <span style="color:var(--text-default-error)">*</span>
+            </label>
+            <input
+              id="provider-input"
+              class="fr-input"
+              [class.fr-input--error]="providerInvalid()"
+              formControlName="provider"
+              type="text"
+              placeholder="DINUM, Direction XYZ..."
+            />
+            @if (providerInvalid()) {
+              <p class="fr-error-text">Le fournisseur est obligatoire.</p>
+            }
+          </div>
+
+          <!-- Type -->
+          <div class="fr-select-group fr-mb-3w">
+            <label class="fr-label" for="type-input">
+              Type <span style="color:var(--text-default-error)">*</span>
+            </label>
+            <select id="type-input" class="fr-select" formControlName="type">
+              <option value="ASYNCAPI">AsyncAPI</option>
+              <option value="OPENAPI">OpenAPI</option>
+            </select>
+            @if (detectedType()) {
+              <p class="fr-hint-text">Détecté automatiquement depuis le fichier YAML</p>
+            }
+          </div>
+
+          <!-- Description -->
+          <div class="fr-input-group fr-mb-3w">
+            <label class="fr-label" for="description-input">
+              Description
+            </label>
+            <textarea
+              id="description-input"
+              class="fr-input"
+              formControlName="description"
+              rows="3"
+              placeholder="Description de l'API..."
+            ></textarea>
+          </div>
+
+          <!-- Version X.Y.Z -->
+          <p class="fr-label fr-mb-1w">Version <span style="color:var(--text-default-error)">*</span></p>
+          <div class="fr-grid-row fr-grid-row--gutters fr-mb-1w">
+            <div class="fr-col-4">
+              <div class="fr-input-group" [class.fr-input-group--error]="versionMajorInvalid()">
+                <label class="fr-label" for="version-major-input">Majeure (X)</label>
+                <input
+                  id="version-major-input"
+                  class="fr-input"
+                  [class.fr-input--error]="versionMajorInvalid()"
+                  formControlName="versionMajor"
+                  type="number"
+                  min="0"
+                  placeholder="1"
+                />
+              </div>
+            </div>
+            <div class="fr-col-4">
+              <div class="fr-input-group" [class.fr-input-group--error]="versionMinorInvalid()">
+                <label class="fr-label" for="version-minor-input">Mineure (Y)</label>
+                <input
+                  id="version-minor-input"
+                  class="fr-input"
+                  [class.fr-input--error]="versionMinorInvalid()"
+                  formControlName="versionMinor"
+                  type="number"
+                  min="0"
+                  placeholder="0"
+                />
+              </div>
+            </div>
+            <div class="fr-col-4">
+              <div class="fr-input-group" [class.fr-input-group--error]="versionPatchInvalid()">
+                <label class="fr-label" for="version-patch-input">Correctif (Z)</label>
+                <input
+                  id="version-patch-input"
+                  class="fr-input"
+                  [class.fr-input--error]="versionPatchInvalid()"
+                  formControlName="versionPatch"
+                  type="number"
+                  min="0"
+                  placeholder="0"
+                />
+              </div>
+            </div>
+          </div>
+
+          @if (versionAlreadyExists()) {
+            <div class="fr-alert fr-alert--warning fr-mb-3w">
+              <p class="fr-alert__title">Version déjà existante</p>
+              <p>
+                La version {{ formValues().versionMajor }}.{{ formValues().versionMinor }}.{{ formValues().versionPatch }}
+                existe déjà pour cette API. Choisissez un numéro de version différent.
+              </p>
+            </div>
+          }
+
+          <div class="fr-btns-group fr-btns-group--inline-sm">
+            <button type="submit" class="fr-btn" [disabled]="versionAlreadyExists()">Suivant</button>
+            <button type="button" class="fr-btn fr-btn--secondary" (click)="step.set(1)">
+              Retour
+            </button>
+          </div>
+        </form>
+      }
+
+      <!-- Étape 3 : Contacts -->
+      @if (step() === 3) {
+        <form [formGroup]="metaForm" (ngSubmit)="goToStep4()" novalidate>
+
+          <!-- Contact métier -->
+          <p class="fr-label fr-mb-1w">Contact métier <span style="color:var(--text-default-error)">*</span></p>
+          <div class="fr-grid-row fr-grid-row--gutters fr-mb-3w">
+            <div class="fr-col-12 fr-col-md-4">
+              <div class="fr-input-group" [class.fr-input-group--error]="fieldInvalid('contactFunctionalName')">
+                <label class="fr-label" for="cf-name-input">Nom et prénom</label>
+                <input id="cf-name-input" class="fr-input"
+                  [class.fr-input--error]="fieldInvalid('contactFunctionalName')"
+                  formControlName="contactFunctionalName" type="text" placeholder="Prénom Nom" />
+                @if (fieldInvalid('contactFunctionalName')) {
+                  <p class="fr-error-text">Obligatoire.</p>
+                }
+              </div>
+            </div>
+            <div class="fr-col-12 fr-col-md-4">
+              <div class="fr-input-group" [class.fr-input-group--error]="fieldInvalid('contactFunctionalEntity')">
+                <label class="fr-label" for="cf-entity-input">Entité</label>
+                <input id="cf-entity-input" class="fr-input"
+                  [class.fr-input--error]="fieldInvalid('contactFunctionalEntity')"
+                  formControlName="contactFunctionalEntity" type="text" placeholder="Direction XYZ" />
+                @if (fieldInvalid('contactFunctionalEntity')) {
+                  <p class="fr-error-text">Obligatoire.</p>
+                }
+              </div>
+            </div>
+            <div class="fr-col-12 fr-col-md-4">
+              <div class="fr-input-group" [class.fr-input-group--error]="fieldInvalid('contactFunctionalEmail')">
+                <label class="fr-label" for="cf-email-input">Email</label>
+                <input id="cf-email-input" class="fr-input"
+                  [class.fr-input--error]="fieldInvalid('contactFunctionalEmail')"
+                  formControlName="contactFunctionalEmail" type="email" placeholder="prenom.nom@example.fr" />
+                @if (fieldInvalid('contactFunctionalEmail')) {
+                  <p class="fr-error-text">Email valide requis.</p>
+                }
+              </div>
+            </div>
+          </div>
+
+          <!-- Contact technique -->
+          <p class="fr-label fr-mb-1w">Contact technique <span style="color:var(--text-default-error)">*</span></p>
+          <div class="fr-grid-row fr-grid-row--gutters fr-mb-4w">
+            <div class="fr-col-12 fr-col-md-4">
+              <div class="fr-input-group" [class.fr-input-group--error]="fieldInvalid('contactTechnicalName')">
+                <label class="fr-label" for="ct-name-input">Nom et prénom</label>
+                <input id="ct-name-input" class="fr-input"
+                  [class.fr-input--error]="fieldInvalid('contactTechnicalName')"
+                  formControlName="contactTechnicalName" type="text" placeholder="Prénom Nom" />
+                @if (fieldInvalid('contactTechnicalName')) {
+                  <p class="fr-error-text">Obligatoire.</p>
+                }
+              </div>
+            </div>
+            <div class="fr-col-12 fr-col-md-4">
+              <div class="fr-input-group" [class.fr-input-group--error]="fieldInvalid('contactTechnicalEntity')">
+                <label class="fr-label" for="ct-entity-input">Entité</label>
+                <input id="ct-entity-input" class="fr-input"
+                  [class.fr-input--error]="fieldInvalid('contactTechnicalEntity')"
+                  formControlName="contactTechnicalEntity" type="text" placeholder="Équipe Technique" />
+                @if (fieldInvalid('contactTechnicalEntity')) {
+                  <p class="fr-error-text">Obligatoire.</p>
+                }
+              </div>
+            </div>
+            <div class="fr-col-12 fr-col-md-4">
+              <div class="fr-input-group" [class.fr-input-group--error]="fieldInvalid('contactTechnicalEmail')">
+                <label class="fr-label" for="ct-email-input">Email</label>
+                <input id="ct-email-input" class="fr-input"
+                  [class.fr-input--error]="fieldInvalid('contactTechnicalEmail')"
+                  formControlName="contactTechnicalEmail" type="email" placeholder="tech@example.fr" />
+                @if (fieldInvalid('contactTechnicalEmail')) {
+                  <p class="fr-error-text">Email valide requis.</p>
+                }
+              </div>
+            </div>
+          </div>
+
+          <div class="fr-btns-group fr-btns-group--inline-sm">
+            <button type="submit" class="fr-btn">Suivant</button>
+            <button type="button" class="fr-btn fr-btn--secondary" (click)="step.set(2)">
+              Retour
+            </button>
+          </div>
+        </form>
+      }
+
+      <!-- Étape 4 : Confirmation -->
+      @if (step() === 4) {
+        <div class="fr-card fr-mb-4w">
+          <div class="fr-card__body">
+            <div class="fr-card__content">
+              <h2 class="fr-h5 fr-mb-3w">Récapitulatif</h2>
+              <dl class="fr-grid-row fr-grid-row--gutters">
+                <div class="fr-col-12 fr-col-md-6">
+                  <dt class="fr-text--bold">Fichier{{ selectedFiles().length > 1 ? 's' : '' }}</dt>
+                  <dd>
+                    @if (selectedFiles().length === 0) {
+                      <span class="fr-badge fr-badge--warning fr-badge--sm">Aucun fichier</span>
+                    } @else if (selectedFiles().length === 1) {
+                      {{ selectedFiles()[0].name }}
+                    } @else {
+                      @for (f of selectedFiles(); track f.name) {
+                        <div style="display:flex;align-items:center;gap:0.5rem;">
+                          {{ f.name }}
+                          @if (f.name === detectedMainFilename()) {
+                            <span class="fr-badge fr-badge--success fr-badge--sm">Principal</span>
+                          }
+                        </div>
+                      }
+                    }
+                  </dd>
+                </div>
+                <div class="fr-col-12 fr-col-md-6">
+                  <dt class="fr-text--bold">Type</dt>
+                  <dd>{{ displayType() }}</dd>
+                </div>
+                <div class="fr-col-12">
+                  <dt class="fr-text--bold">Titre</dt>
+                  <dd>{{ previewTitle() }}</dd>
+                </div>
+                <div class="fr-col-12 fr-col-md-6">
+                  <dt class="fr-text--bold">Version</dt>
+                  <dd>{{ metaForm.value.versionMajor }}.{{ metaForm.value.versionMinor }}.{{ metaForm.value.versionPatch }}</dd>
+                </div>
+                <div class="fr-col-12 fr-col-md-6">
+                  <dt class="fr-text--bold">Fournisseur</dt>
+                  <dd>{{ metaForm.value.provider }}</dd>
+                </div>
+                @if (metaForm.value.categoryId) {
+                  <div class="fr-col-12 fr-col-md-6">
+                    <dt class="fr-text--bold">Catégorie</dt>
+                    <dd>{{ selectedCategoryName() }}</dd>
+                  </div>
+                }
+                @if (metaForm.value.description) {
+                  <div class="fr-col-12">
+                    <dt class="fr-text--bold">Description</dt>
+                    <dd>{{ metaForm.value.description }}</dd>
+                  </div>
+                }
+                <div class="fr-col-12 fr-col-md-6">
+                  <dt class="fr-text--bold">Contact métier</dt>
+                  <dd>
+                    {{ metaForm.value.contactFunctionalName }}<br>
+                    <span class="fr-text--sm">{{ metaForm.value.contactFunctionalEntity }}</span><br>
+                    <span class="fr-text--sm">{{ metaForm.value.contactFunctionalEmail }}</span>
+                  </dd>
+                </div>
+                <div class="fr-col-12 fr-col-md-6">
+                  <dt class="fr-text--bold">Contact technique</dt>
+                  <dd>
+                    {{ metaForm.value.contactTechnicalName }}<br>
+                    <span class="fr-text--sm">{{ metaForm.value.contactTechnicalEntity }}</span><br>
+                    <span class="fr-text--sm">{{ metaForm.value.contactTechnicalEmail }}</span>
+                  </dd>
+                </div>
+              </dl>
+            </div>
+          </div>
+        </div>
+
+        @if (uploadError()) {
+          <div class="fr-alert fr-alert--error fr-mb-3w">
+            <p class="fr-alert__title">Erreur lors de l'import</p>
+            <p>{{ uploadError() }}</p>
+          </div>
+        }
+
+        <div class="fr-btns-group fr-btns-group--inline-sm">
+          <button
+            class="fr-btn"
+            (click)="onSubmit()"
+            [disabled]="uploading()"
+          >
+            {{ uploading() ? 'Import en cours...' : 'Importer' }}
+          </button>
+          <button class="fr-btn fr-btn--secondary" (click)="step.set(3)" [disabled]="uploading()">
+            Retour
+          </button>
+        </div>
+      }
+    </div>

front-public/src/app/pages/upload/upload.component.ts

@@ -3,394 +3,213 @@ import {
   signal,
   computed,
   inject,
+  DestroyRef,
   OnInit,
   ChangeDetectionStrategy,
 } from '@angular/core';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
-import { Router, RouterLink } from '@angular/router';
+import { Router, RouterLink, ActivatedRoute } from '@angular/router';
 import { ApiService } from '../../core/api.service';
 import { CategoryService } from '../../core/category.service';
-import { Category } from '@datacat/shared';
+import { BreadcrumbComponent, BreadcrumbItem } from '../../shared/breadcrumb/breadcrumb.component';
+import { ApiEntry, ApiEntryListItem, Category, API_CONVENTION_LABELS, ApiConvention } from '@datacat/shared';
 
 @Component({
   selector: 'app-upload',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, RouterLink],
+  imports: [CommonModule, ReactiveFormsModule, RouterLink, BreadcrumbComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
+  templateUrl: "./upload.component.html",
-    <div class="fr-container fr-mt-4w fr-mb-4w">
-      <!-- Fil d'Ariane -->
-      <nav class="fr-breadcrumb fr-mb-3w" aria-label="vous êtes ici">
-        <ol class="fr-breadcrumb__list">
-          <li><a class="fr-breadcrumb__link" routerLink="/browse">Parcourir</a></li>
-          <li><a class="fr-breadcrumb__link" routerLink="/catalog">Catalogue</a></li>
-          <li><a class="fr-breadcrumb__link" aria-current="page">Importer une API</a></li>
-        </ol>
-      </nav>
-
-      <h1 class="fr-h2 fr-mb-4w">Importer une API</h1>
-
-      <!-- Stepper -->
-      <div class="fr-stepper fr-mb-4w">
-        <h2 class="fr-stepper__title">
-          {{ stepTitles[step() - 1] }}
-          <span class="fr-stepper__state">Étape {{ step() }} sur 3</span>
-        </h2>
-        <div
-          class="fr-stepper__steps"
-          [attr.data-fr-current-step]="step()"
-          data-fr-steps="3"
-        ></div>
-      </div>
-
-      <!-- Étape 1 : Fichier(s) YAML -->
-      @if (step() === 1) {
-        <div class="fr-upload-group fr-mb-4w">
-          <label class="fr-label" for="file-input">
-            Fichier(s) YAML
-            <span class="fr-hint-text">
-              Formats acceptés : .yaml, .yml — Sélectionnez plusieurs fichiers si votre spec utilise des $ref
-            </span>
-          </label>
-          <input
-            id="file-input"
-            class="fr-upload"
-            type="file"
-            accept=".yaml,.yml"
-            multiple
-            (change)="onFileChange($event)"
-          />
-        </div>
-
-        @if (fileError()) {
-          <div class="fr-alert fr-alert--error fr-mb-3w">
-            <p>{{ fileError() }}</p>
-          </div>
-        }
-
-        @if (selectedFiles().length > 0) {
-          <div class="fr-mb-3w">
-            @for (file of selectedFiles(); track file.name) {
-              <div class="fr-callout fr-callout--blue-cumulus fr-mb-1w" style="display:flex;align-items:center;justify-content:space-between;gap:1rem;">
-                <span>
-                  <strong>{{ file.name }}</strong>
-                  ({{ (file.size / 1024).toFixed(1) }} Ko)
-                </span>
-                @if (file.name === detectedMainFilename()) {
-                  <span class="fr-badge fr-badge--success fr-badge--sm">Principal</span>
-                } @else if (selectedFiles().length > 1) {
-                  <span class="fr-badge fr-badge--blue-cumulus fr-badge--sm">Secondaire</span>
-                }
-              </div>
-            }
-          </div>
-        }
-
-        <div class="fr-btns-group fr-btns-group--inline-sm">
-          <button
-            class="fr-btn"
-            (click)="goToStep2()"
-            [disabled]="!canProceedFromStep1()"
-          >
-            Suivant
-          </button>
-          <a routerLink="/catalog" class="fr-btn fr-btn--secondary">Annuler</a>
-        </div>
-      }
-
-      <!-- Étape 2 : Métadonnées -->
-      @if (step() === 2) {
-        <form [formGroup]="metaForm" (ngSubmit)="goToStep3()" novalidate>
-          <div class="fr-input-group fr-mb-3w" [class.fr-input-group--error]="titleInvalid()">
-            <label class="fr-label" for="title-input">
-              Titre <span class="fr-hint-text">Obligatoire</span>
-            </label>
-            <input
-              id="title-input"
-              class="fr-input"
-              [class.fr-input--error]="titleInvalid()"
-              formControlName="title"
-              type="text"
-              placeholder="Nom de l'API"
-            />
-            @if (titleInvalid()) {
-              <p class="fr-error-text">Le titre est obligatoire.</p>
-            }
-          </div>
-
-          <div class="fr-input-group fr-mb-3w" [class.fr-input-group--error]="versionInvalid()">
-            <label class="fr-label" for="version-input">
-              Version <span class="fr-hint-text">Obligatoire</span>
-            </label>
-            <input
-              id="version-input"
-              class="fr-input"
-              [class.fr-input--error]="versionInvalid()"
-              formControlName="version"
-              type="text"
-              placeholder="1.0.0"
-            />
-            @if (versionInvalid()) {
-              <p class="fr-error-text">La version est obligatoire.</p>
-            }
-          </div>
-
-          <div class="fr-select-group fr-mb-3w">
-            <label class="fr-label" for="type-input">
-              Type <span class="fr-hint-text">Obligatoire</span>
-            </label>
-            <select id="type-input" class="fr-select" formControlName="type">
-              <option value="ASYNCAPI">AsyncAPI</option>
-              <option value="OPENAPI">OpenAPI</option>
-            </select>
-          </div>
-
-          <div class="fr-select-group fr-mb-3w">
-            <label class="fr-label" for="category-input">
-              Catégorie <span class="fr-hint-text">Optionnel</span>
-            </label>
-            <select id="category-input" class="fr-select" formControlName="categoryId">
-              <option value="">— Sans catégorie —</option>
-              @for (cat of categories(); track cat.id) {
-                <option [value]="cat.id">{{ categoryLabel(cat) }}</option>
-              }
-            </select>
-          </div>
-
-          <div class="fr-input-group fr-mb-3w">
-            <label class="fr-label" for="description-input">
-              Description <span class="fr-hint-text">Optionnel</span>
-            </label>
-            <textarea
-              id="description-input"
-              class="fr-input"
-              formControlName="description"
-              rows="3"
-              placeholder="Description de l'API..."
-            ></textarea>
-          </div>
-
-          <div class="fr-input-group fr-mb-3w">
-            <label class="fr-label" for="functional-doc-input">
-              Documentation fonctionnelle <span class="fr-hint-text">Optionnel</span>
-            </label>
-            <textarea
-              id="functional-doc-input"
-              class="fr-input"
-              formControlName="functionalDoc"
-              rows="4"
-              placeholder="Cas d'usage, contexte métier..."
-            ></textarea>
-          </div>
-
-          <div class="fr-input-group fr-mb-3w">
-            <label class="fr-label" for="technical-doc-input">
-              Documentation technique <span class="fr-hint-text">Optionnel</span>
-            </label>
-            <textarea
-              id="technical-doc-input"
-              class="fr-input"
-              formControlName="technicalDoc"
-              rows="4"
-              placeholder="Guide d'intégration technique..."
-            ></textarea>
-          </div>
-
-          <div class="fr-input-group fr-mb-3w">
-            <label class="fr-label" for="external-doc-url-input">
-              URL documentation externe <span class="fr-hint-text">Optionnel</span>
-            </label>
-            <input
-              id="external-doc-url-input"
-              class="fr-input"
-              formControlName="externalDocUrl"
-              type="text"
-              placeholder="https://..."
-            />
-          </div>
-
-          <div class="fr-input-group fr-mb-3w">
-            <label class="fr-label" for="contact-functional-input">
-              Contact fonctionnel <span class="fr-hint-text">Optionnel</span>
-            </label>
-            <input
-              id="contact-functional-input"
-              class="fr-input"
-              formControlName="contactFunctional"
-              type="text"
-              placeholder="Nom, email, téléphone..."
-            />
-          </div>
-
-          <div class="fr-input-group fr-mb-3w">
-            <label class="fr-label" for="contact-technical-input">
-              Contact technique <span class="fr-hint-text">Optionnel</span>
-            </label>
-            <input
-              id="contact-technical-input"
-              class="fr-input"
-              formControlName="contactTechnical"
-              type="text"
-              placeholder="Nom, email, téléphone..."
-            />
-          </div>
-
-          <div class="fr-input-group fr-mb-4w">
-            <label class="fr-label" for="access-rights-input">
-              Droits d'accès <span class="fr-hint-text">Optionnel</span>
-            </label>
-            <textarea
-              id="access-rights-input"
-              class="fr-input"
-              formControlName="accessRights"
-              rows="3"
-              placeholder="Processus d'habilitation, conditions d'accès..."
-            ></textarea>
-          </div>
-
-          <div class="fr-btns-group fr-btns-group--inline-sm">
-            <button type="submit" class="fr-btn" [disabled]="metaForm.invalid">Suivant</button>
-            <button type="button" class="fr-btn fr-btn--secondary" (click)="step.set(1)">
-              Retour
-            </button>
-          </div>
-        </form>
-      }
-
-      <!-- Étape 3 : Confirmation -->
-      @if (step() === 3) {
-        <div class="fr-card fr-mb-4w">
-          <div class="fr-card__body">
-            <div class="fr-card__content">
-              <h2 class="fr-h5 fr-mb-3w">Récapitulatif</h2>
-              <dl class="fr-grid-row fr-grid-row--gutters">
-                <div class="fr-col-12 fr-col-md-6">
-                  <dt class="fr-text--bold">Fichier{{ selectedFiles().length > 1 ? 's' : '' }}</dt>
-                  <dd>
-                    @if (selectedFiles().length === 1) {
-                      {{ selectedFiles()[0].name }}
-                    } @else {
-                      @for (f of selectedFiles(); track f.name) {
-                        <div style="display:flex;align-items:center;gap:0.5rem;">
-                          {{ f.name }}
-                          @if (f.name === detectedMainFilename()) {
-                            <span class="fr-badge fr-badge--success fr-badge--sm">Principal</span>
-                          }
-                        </div>
-                      }
-                    }
-                  </dd>
-                </div>
-                <div class="fr-col-12 fr-col-md-6">
-                  <dt class="fr-text--bold">Type</dt>
-                  <dd>{{ metaForm.value.type }}</dd>
-                </div>
-                <div class="fr-col-12 fr-col-md-6">
-                  <dt class="fr-text--bold">Titre</dt>
-                  <dd>{{ metaForm.value.title }}</dd>
-                </div>
-                <div class="fr-col-12 fr-col-md-6">
-                  <dt class="fr-text--bold">Version</dt>
-                  <dd>{{ metaForm.value.version }}</dd>
-                </div>
-                @if (metaForm.value.categoryId) {
-                  <div class="fr-col-12 fr-col-md-6">
-                    <dt class="fr-text--bold">Catégorie</dt>
-                    <dd>{{ selectedCategoryName() }}</dd>
-                  </div>
-                }
-                @if (metaForm.value.description) {
-                  <div class="fr-col-12">
-                    <dt class="fr-text--bold">Description</dt>
-                    <dd>{{ metaForm.value.description }}</dd>
-                  </div>
-                }
-              </dl>
-            </div>
-          </div>
-        </div>
-
-        @if (uploadError()) {
-          <div class="fr-alert fr-alert--error fr-mb-3w">
-            <p class="fr-alert__title">Erreur lors de l'import</p>
-            <p>{{ uploadError() }}</p>
-          </div>
-        }
-
-        <div class="fr-btns-group fr-btns-group--inline-sm">
-          <button
-            class="fr-btn"
-            (click)="onSubmit()"
-            [disabled]="uploading()"
-          >
-            {{ uploading() ? 'Import en cours...' : 'Importer' }}
-          </button>
-          <button class="fr-btn fr-btn--secondary" (click)="step.set(2)" [disabled]="uploading()">
-            Retour
-          </button>
-        </div>
-      }
-    </div>
-  `,
 })
 export class UploadComponent implements OnInit {
   private fb = inject(FormBuilder);
   private apiService = inject(ApiService);
   private categoryService = inject(CategoryService);
   private router = inject(Router);
+  private route = inject(ActivatedRoute);
+  private destroyRef = inject(DestroyRef);
 
   step = signal(1);
+  readonly breadcrumbItems: BreadcrumbItem[] = [
+    { label: 'Parcourir', link: '/browse' },
+    { label: 'Catalogue', link: '/catalog' },
+    { label: 'Importer une API' },
+  ];
+
+  private readonly maxFileSize = 5 * 1024 * 1024; // 5 Mo
   selectedFiles = signal<File[]>([]);
   detectedType = signal<'ASYNCAPI' | 'OPENAPI' | null>(null);
   detectedMainFilename = signal<string | null>(null);
   fileError = signal<string | null>(null);
   uploading = signal(false);
   uploadError = signal<string | null>(null);
+  validating = signal(false);
+  validationDone = signal(false);
+  validationErrors = signal<Array<{ file: string; message: string }>>([]);
   categories = signal<Category[]>([]);
+  /* API d'origine lors d'une création de nouvelle version (from=<id>) */
+  fromApi = signal<ApiEntry | null>(null);
+  /* Versions existantes de l'API d'origine (pour détecter les doublons) */
+  existingVersions = signal<ApiEntryListItem[]>([]);
 
   readonly stepTitles = [
     'Choisir le fichier',
-    'Renseigner les métadonnées',
+    'Informations',
+    'Contacts',
     "Confirmer l'import",
   ];
 
+  private readonly INFO_FIELDS = [
+    'convention', 'name', 'provider', 'type',
+    'versionMajor', 'versionMinor', 'versionPatch',
+  ];
+
+  private readonly CONTACT_FIELDS = [
+    'contactFunctionalName', 'contactFunctionalEntity', 'contactFunctionalEmail',
+    'contactTechnicalName', 'contactTechnicalEntity', 'contactTechnicalEmail',
+  ];
+
   metaForm = this.fb.group({
-    title: ['', Validators.required],
+    convention: ['CONSULTER', Validators.required],
-    version: ['', Validators.required],
+    name: ['', Validators.required],
+    provider: ['', Validators.required],
+    versionMajor: [0, [Validators.required, Validators.min(0)]],
+    versionMinor: [0, [Validators.required, Validators.min(0)]],
+    versionPatch: [0, [Validators.required, Validators.min(0)]],
     type: ['ASYNCAPI', Validators.required],
     categoryId: [''],
     description: [''],
-    functionalDoc: [''],
+    contactFunctionalName: ['', Validators.required],
-    technicalDoc: [''],
+    contactFunctionalEntity: ['', Validators.required],
-    externalDocUrl: [''],
+    contactFunctionalEmail: ['', [Validators.required, Validators.email]],
-    contactFunctional: [''],
+    contactTechnicalName: ['', Validators.required],
-    contactTechnical: [''],
+    contactTechnicalEntity: ['', Validators.required],
-    accessRights: [''],
+    contactTechnicalEmail: ['', [Validators.required, Validators.email]],
+  });
+
+  /* Convertit valueChanges en signal pour que les computed() trackent les changements du formulaire */
+  protected readonly formValues = toSignal(this.metaForm.valueChanges, { initialValue: this.metaForm.value });
+
+  previewTitle = computed(() => {
+    const values = this.formValues();
+    const origin = this.fromApi();
+    /* Quand convention/name sont désactivés, ils sont absents de valueChanges → fallback sur fromApi */
+    const convention = (values.convention ?? origin?.convention ?? 'CONSULTER') as ApiConvention;
+    const name = values.name ?? origin?.name ?? '';
+    return `${API_CONVENTION_LABELS[convention]} ${name}`.trim();
   });
 
-  titleInvalid = computed(
-    () => !!(this.metaForm.get('title')?.invalid && this.metaForm.get('title')?.touched),
-  );
-  versionInvalid = computed(
-    () => !!(this.metaForm.get('version')?.invalid && this.metaForm.get('version')?.touched),
-  );
   selectedCategoryName = computed(() => {
-    const id = this.metaForm.value.categoryId;
+    const id = this.formValues().categoryId;
     if (!id) return '';
     return this.categories().find((c) => c.id === id)?.name ?? '';
   });
-  canProceedFromStep1 = computed(() => {
+
-    if (this.selectedFiles().length === 0) return false;
+  /* Vérifie si la version saisie existe déjà parmi les versions de l'API d'origine */
-    if (this.selectedFiles().length === 1) return true;
+  versionAlreadyExists = computed(() => {
-    /* Plusieurs fichiers : un fichier principal doit être détecté */
+    const versions = this.existingVersions();
-    return this.detectedMainFilename() !== null;
+    if (versions.length === 0) return false;
+    const values = this.formValues();
+    const candidate = `${values.versionMajor ?? 0}.${values.versionMinor ?? 0}.${values.versionPatch ?? 0}`;
+    return versions.some((v) => v.version === candidate);
   });
 
-  ngOnInit() {
+  /* Type effectif : getRawValue() inclut les champs désactivés */
-    this.categoryService.list().subscribe({
+  displayType = computed(() => {
-      next: (res) => this.categories.set(res.items),
+    const origin = this.fromApi();
+    if (origin) return origin.type;
+    return (this.formValues().type ?? null) as 'ASYNCAPI' | 'OPENAPI' | null;
   });
+
+  /* Méthodes de validation (pas de computed — la re-exécution est déclenchée par les événements DOM blur/input) */
+  conventionInvalid(): boolean {
+    return !!(this.metaForm.get('convention')?.invalid && this.metaForm.get('convention')?.touched);
+  }
+  nameInvalid(): boolean {
+    return !!(this.metaForm.get('name')?.invalid && this.metaForm.get('name')?.touched);
+  }
+  providerInvalid(): boolean {
+    return !!(this.metaForm.get('provider')?.invalid && this.metaForm.get('provider')?.touched);
+  }
+  versionMajorInvalid(): boolean {
+    return !!(this.metaForm.get('versionMajor')?.invalid && this.metaForm.get('versionMajor')?.touched);
+  }
+  versionMinorInvalid(): boolean {
+    return !!(this.metaForm.get('versionMinor')?.invalid && this.metaForm.get('versionMinor')?.touched);
+  }
+  versionPatchInvalid(): boolean {
+    return !!(this.metaForm.get('versionPatch')?.invalid && this.metaForm.get('versionPatch')?.touched);
+  }
+  canProceedFromStep1 = computed(() => {
+    if (this.selectedFiles().length === 0) return true;   // fichier optionnel
+    if (this.validating()) return false;
+    return this.validationDone() && this.validationErrors().length === 0;
+  });
+
+  fieldInvalid(name: string): boolean {
+    const ctrl = this.metaForm.get(name);
+    return !!(ctrl?.invalid && ctrl?.touched);
+  }
+
+  ngOnInit() {
+    const params = this.route.snapshot.queryParamMap;
+    const preselectedCategoryId = params.get('categoryId');
+    const fromId = params.get('from');
+
+    this.categoryService
+      .list()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (res) => {
+          this.categories.set(res.items);
+          if (preselectedCategoryId) {
+            this.metaForm.patchValue({ categoryId: preselectedCategoryId });
+          }
+        },
+      });
+
+    if (fromId) {
+      this.apiService
+        .get(fromId)
+        .pipe(takeUntilDestroyed(this.destroyRef))
+        .subscribe({
+          next: (api) => this.prefillFromApi(api),
+          error: () => {},
+        });
+      this.apiService
+        .getVersions(fromId)
+        .pipe(takeUntilDestroyed(this.destroyRef))
+        .subscribe({
+          next: (versions) => this.existingVersions.set(versions),
+          error: () => {},
+        });
+    }
+  }
+
+  private prefillFromApi(api: ApiEntry): void {
+    this.fromApi.set(api);
+    this.metaForm.patchValue({
+      convention: api.convention,
+      name: api.name,
+      provider: api.provider,
+      versionMajor: api.versionMajor,
+      versionMinor: api.versionMinor,
+      versionPatch: api.versionPatch + 1,
+      description: api.description ?? '',
+      categoryId: api.categoryId ?? '',
+      contactFunctionalName: api.contactFunctionalName,
+      contactFunctionalEntity: api.contactFunctionalEntity,
+      contactFunctionalEmail: api.contactFunctionalEmail,
+      contactTechnicalName: api.contactTechnicalName,
+      contactTechnicalEntity: api.contactTechnicalEntity,
+      contactTechnicalEmail: api.contactTechnicalEmail,
+    });
+    /* Verrouiller les champs qui définissent l'identité de l'API */
+    this.metaForm.get('convention')?.disable();
+    this.metaForm.get('name')?.disable();
+    this.metaForm.get('type')?.disable();
   }
 
   categoryLabel(cat: Category): string {
@@ -401,8 +220,15 @@ export class UploadComponent implements OnInit {
 
   onFileChange(event: Event) {
     this.fileError.set(null);
+    this.uploadError.set(null);
     this.detectedType.set(null);
     this.detectedMainFilename.set(null);
+    this.validationErrors.set([]);
+    this.validationDone.set(false);
+    /* Ne pas réactiver le type s'il est verrouillé par fromApi */
+    if (!this.fromApi()) {
+      this.metaForm.get('type')?.enable();
+    }
 
     const input = event.target as HTMLInputElement;
     const fileList = input.files;
@@ -419,10 +245,22 @@ export class UploadComponent implements OnInit {
       return;
     }
 
+    const tooLarge = files.find((f) => f.size > this.maxFileSize);
+    if (tooLarge) {
+      this.fileError.set(
+        `Fichier trop volumineux (${tooLarge.name}). Taille max : ${this.maxFileSize / (1024 * 1024)} Mo.`,
+      );
+      this.selectedFiles.set([]);
+      return;
+    }
+
     this.selectedFiles.set(files);
 
     /* Détection côté client du fichier principal (pré-remplissage du type) */
     void this.detectMainFileClient(files);
+
+    /* Validation serveur immédiate */
+    this.runValidation(files);
   }
 
   goToStep2() {
@@ -431,53 +269,118 @@ export class UploadComponent implements OnInit {
   }
 
   goToStep3() {
-    if (this.metaForm.invalid) {
+    const invalid = this.INFO_FIELDS.some((f) => this.metaForm.get(f)?.invalid);
-      this.metaForm.markAllAsTouched();
+    if (invalid) {
+      this.INFO_FIELDS.forEach((f) => this.metaForm.get(f)?.markAsTouched());
       return;
     }
+    if (this.versionAlreadyExists()) return;
     this.step.set(3);
   }
 
-  onSubmit() {
+  goToStep4() {
-    const files = this.selectedFiles();
+    const invalid = this.CONTACT_FIELDS.some((f) => this.metaForm.get(f)?.invalid);
-    if (files.length === 0 || this.metaForm.invalid) return;
+    if (invalid) {
+      this.CONTACT_FIELDS.forEach((f) => this.metaForm.get(f)?.markAsTouched());
+      return;
+    }
+    this.step.set(4);
+  }
 
-    this.uploading.set(true);
+  private runValidation(files: File[]): void {
-    this.uploadError.set(null);
+    this.validating.set(true);
+    this.validationDone.set(false);
 
     const formData = new FormData();
     for (const f of files) {
       formData.append('files', f);
     }
-    formData.append('title', this.metaForm.value.title ?? '');
+
-    formData.append('version', this.metaForm.value.version ?? '');
+    this.apiService
-    formData.append('type', this.metaForm.value.type ?? 'ASYNCAPI');
+      .validate(formData)
-    if (this.metaForm.value.categoryId) {
+      .pipe(takeUntilDestroyed(this.destroyRef))
-      formData.append('categoryId', this.metaForm.value.categoryId);
+      .subscribe({
+        next: (result) => {
+          this.validating.set(false);
+          this.validationDone.set(true);
+        if (!result.valid) {
+          this.validationErrors.set(result.errors);
+          /* Ne pas réactiver le type s'il est verrouillé par fromApi */
+          if (!this.fromApi()) {
+            this.metaForm.get('type')?.enable();
           }
-    if (this.metaForm.value.description) {
+        } else {
-      formData.append('description', this.metaForm.value.description);
+          this.validationErrors.set([]);
+          if (result.type) {
+            this.detectedType.set(result.type);
+            /* Ne pas modifier le type s'il est verrouillé par fromApi */
+            if (!this.fromApi()) {
+              this.metaForm.patchValue({ type: result.type });
+              this.metaForm.get('type')?.disable();
             }
-    if (this.metaForm.value.functionalDoc) {
-      formData.append('functionalDoc', this.metaForm.value.functionalDoc);
           }
-    if (this.metaForm.value.technicalDoc) {
+          if (result.mainFile) {
-      formData.append('technicalDoc', this.metaForm.value.technicalDoc);
+            this.detectedMainFilename.set(result.mainFile);
           }
-    if (this.metaForm.value.externalDocUrl) {
+          /* Pré-remplissage du formulaire depuis les métadonnées du fichier */
-      formData.append('externalDocUrl', this.metaForm.value.externalDocUrl);
+          /* Ne pas écraser le nom s'il est verrouillé par fromApi */
+          if (result.name && !this.fromApi()) this.metaForm.patchValue({ name: result.name });
+          if (result.versionMajor !== null) this.metaForm.patchValue({ versionMajor: result.versionMajor });
+          if (result.versionMinor !== null) this.metaForm.patchValue({ versionMinor: result.versionMinor });
+          if (result.versionPatch !== null) this.metaForm.patchValue({ versionPatch: result.versionPatch });
+          if (result.description) this.metaForm.patchValue({ description: result.description });
         }
-    if (this.metaForm.value.contactFunctional) {
+      },
-      formData.append('contactFunctional', this.metaForm.value.contactFunctional);
+      error: (err) => {
-    }
+        this.validating.set(false);
-    if (this.metaForm.value.contactTechnical) {
+        this.validationDone.set(true);
-      formData.append('contactTechnical', this.metaForm.value.contactTechnical);
+        this.validationErrors.set([{ file: '', message: err?.error?.message ?? 'Erreur de validation.' }]);
-    }
+      },
-    if (this.metaForm.value.accessRights) {
+    });
-      formData.append('accessRights', this.metaForm.value.accessRights);
   }
 
-    this.apiService.upload(formData).subscribe({
+  onSubmit() {
+    const files = this.selectedFiles();
+    this.metaForm.markAllAsTouched();
+    if (this.metaForm.invalid) {
+      /* Naviguer vers l'étape avec les erreurs pour les rendre visibles */
+      const infoInvalid = this.INFO_FIELDS.some((f) => this.metaForm.get(f)?.invalid);
+      this.step.set(infoInvalid ? 2 : 3);
+      return;
+    }
+
+    this.uploading.set(true);
+    this.uploadError.set(null);
+
+    const raw = this.metaForm.getRawValue();
+    const formData = new FormData();
+    for (const f of files) {
+      formData.append('files', f);
+    }
+    formData.append('convention', raw.convention ?? 'CONSULTER');
+    formData.append('name', raw.name ?? '');
+    formData.append('provider', raw.provider ?? '');
+    formData.append('versionMajor', String(raw.versionMajor ?? 0));
+    formData.append('versionMinor', String(raw.versionMinor ?? 0));
+    formData.append('versionPatch', String(raw.versionPatch ?? 0));
+    formData.append('type', raw.type ?? 'ASYNCAPI');
+    if (raw.categoryId) {
+      formData.append('categoryId', raw.categoryId);
+    }
+    if (raw.description) {
+      formData.append('description', raw.description);
+    }
+    formData.append('contactFunctionalName', raw.contactFunctionalName ?? '');
+    formData.append('contactFunctionalEntity', raw.contactFunctionalEntity ?? '');
+    formData.append('contactFunctionalEmail', raw.contactFunctionalEmail ?? '');
+    formData.append('contactTechnicalName', raw.contactTechnicalName ?? '');
+    formData.append('contactTechnicalEntity', raw.contactTechnicalEntity ?? '');
+    formData.append('contactTechnicalEmail', raw.contactTechnicalEmail ?? '');
+
+    this.apiService
+      .upload(formData)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
         next: (entry) => {
           this.uploading.set(false);
           this.router.navigate(['/catalog', entry.id]);
@@ -495,13 +398,13 @@ export class UploadComponent implements OnInit {
       if (/^openapi\s*:/m.test(content)) {
         this.detectedType.set('OPENAPI');
         this.detectedMainFilename.set(file.name);
-        this.metaForm.patchValue({ type: 'OPENAPI' });
+        if (!this.fromApi()) this.metaForm.patchValue({ type: 'OPENAPI' });
         return;
       }
       if (/^asyncapi\s*:/m.test(content)) {
         this.detectedType.set('ASYNCAPI');
         this.detectedMainFilename.set(file.name);
-        this.metaForm.patchValue({ type: 'ASYNCAPI' });
+        if (!this.fromApi()) this.metaForm.patchValue({ type: 'ASYNCAPI' });
         return;
       }
     }

front-public/src/app/shared/breadcrumb/breadcrumb.component.ts

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+/** Un maillon du fil d'Ariane. `link` absent => élément courant (aria-current). */
+export interface BreadcrumbItem {
+  label: string;
+  link?: string | unknown[];
+}
+
+/**
+ * Fil d'Ariane DSFR générique (présentationnel). Chaque page construit sa liste
+ * d'items et la passe ; le dernier item sans `link` est marqué comme courant.
+ */
+@Component({
+  selector: 'app-breadcrumb',
+  standalone: true,
+  imports: [RouterLink],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <nav class="fr-breadcrumb fr-mb-3w" aria-label="vous êtes ici">
+      <ol class="fr-breadcrumb__list">
+        @for (item of items(); track $index) {
+          <li>
+            @if (item.link) {
+              <a class="fr-breadcrumb__link" [routerLink]="item.link">{{ item.label }}</a>
+            } @else {
+              <a class="fr-breadcrumb__link" aria-current="page">{{ item.label }}</a>
+            }
+          </li>
+        }
+      </ol>
+    </nav>
+  `,
+})
+export class BreadcrumbComponent {
+  items = input.required<BreadcrumbItem[]>();
+}

front-public/src/app/shared/category-delete-modal/category-delete-modal.component.ts

@@ -0,0 +1,84 @@
+import { Component, signal, inject, DestroyRef, ChangeDetectionStrategy, input, output } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { CommonModule } from '@angular/common';
+import { CategoryService } from '../../core/category.service';
+import { CategoryWithCounts } from '@datacat/shared';
+
+@Component({
+  selector: 'app-category-delete-modal',
+  standalone: true,
+  imports: [CommonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div style="position:fixed;inset:0;z-index:9999;background:rgba(22,22,22,.64);display:flex;align-items:flex-start;justify-content:center;padding-top:5vh;overflow-y:auto"
+         role="dialog" aria-modal="true" aria-labelledby="delete-modal-title">
+      <div style="background:white;width:calc(100% - 2rem);max-width:480px;margin:0 1rem 2rem">
+        <div class="fr-p-4w">
+          <div class="fr-grid-row fr-grid-row--middle fr-mb-3w">
+            <div class="fr-col">
+              <h2 id="delete-modal-title" class="fr-h3 fr-mb-0">Supprimer le dossier</h2>
+            </div>
+            <div class="fr-col-auto">
+              <button class="fr-btn fr-btn--tertiary-no-outline fr-btn--sm"
+                      (click)="cancel()">✕</button>
+            </div>
+          </div>
+          <p class="fr-text--lead fr-mb-1w">
+            Êtes-vous sûr de vouloir supprimer le dossier
+            <strong>« {{ category().name }} »</strong> ?
+          </p>
+          <p class="fr-text--sm fr-text--mention-grey fr-mb-3w">
+            Cette action est irréversible.
+          </p>
+          @if (deleteError()) {
+            <div class="fr-alert fr-alert--error fr-mb-2w">
+              <p>{{ deleteError() }}</p>
+            </div>
+          }
+          <div class="fr-btns-group fr-btns-group--right fr-btns-group--inline">
+            <button class="fr-btn fr-btn--secondary" (click)="cancel()"
+                    [disabled]="deleteLoading()">Annuler</button>
+            <button class="fr-btn fr-btn--error" (click)="confirmDelete()"
+                    [disabled]="deleteLoading()">
+              {{ deleteLoading() ? 'Suppression...' : 'Supprimer' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class CategoryDeleteModalComponent {
+  private categoryService = inject(CategoryService);
+  private destroyRef = inject(DestroyRef);
+
+  category = input.required<CategoryWithCounts>();
+  confirmed = output<void>();
+  cancelled = output<void>();
+
+  deleteLoading = signal(false);
+  deleteError = signal<string | null>(null);
+
+  cancel() {
+    this.cancelled.emit();
+  }
+
+  confirmDelete() {
+    const cat = this.category();
+    this.deleteLoading.set(true);
+    this.deleteError.set(null);
+    this.categoryService
+      .delete(cat.id)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: () => {
+          this.deleteLoading.set(false);
+          this.confirmed.emit();
+        },
+        error: (err: { error?: { message?: string } }) => {
+          this.deleteLoading.set(false);
+          this.deleteError.set(err?.error?.message ?? 'Erreur lors de la suppression.');
+        },
+      });
+  }
+}

front-public/src/app/shared/category-form-modal/category-form-modal.component.ts

@@ -0,0 +1,179 @@
+import {
+  Component,
+  signal,
+  computed,
+  inject,
+  DestroyRef,
+  OnInit,
+  ChangeDetectionStrategy,
+  input,
+  output,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { CommonModule } from '@angular/common';
+import { CategoryService } from '../../core/category.service';
+import { Category } from '@datacat/shared';
+
+@Component({
+  selector: 'app-category-form-modal',
+  standalone: true,
+  imports: [CommonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div style="position:fixed;inset:0;z-index:9999;background:rgba(22,22,22,.64);display:flex;align-items:flex-start;justify-content:center;padding-top:5vh;overflow-y:auto"
+         role="dialog" aria-modal="true" aria-labelledby="modal-title">
+      <div style="background:white;width:calc(100% - 2rem);max-width:540px;margin:0 1rem 2rem">
+        <div class="fr-p-4w">
+          <div class="fr-grid-row fr-grid-row--middle fr-mb-3w">
+            <div class="fr-col">
+              <h2 id="modal-title" class="fr-h3 fr-mb-0">
+                {{ mode() === 'create' ? 'Nouveau dossier' : 'Modifier le dossier' }}
+              </h2>
+            </div>
+            <div class="fr-col-auto">
+              <button class="fr-btn fr-btn--tertiary-no-outline fr-btn--sm"
+                      (click)="close()">✕</button>
+            </div>
+          </div>
+          @if (formError()) {
+            <div class="fr-alert fr-alert--error fr-mb-2w">
+              <p>{{ formError() }}</p>
+            </div>
+          }
+          @if (mode() === 'create') {
+            <div class="fr-select-group fr-mb-2w">
+              <label class="fr-label" for="form-parent">Emplacement</label>
+              <select id="form-parent" class="fr-select"
+                      (change)="formParentId.set($any($event.target).value || null)">
+                <option value="" [selected]="!formParentId()"></option>
+                @for (opt of categoriesForSelect(); track opt.id) {
+                  <option [value]="opt.id" [selected]="opt.id === formParentId()">{{ opt.label }}</option>
+                }
+              </select>
+            </div>
+          }
+          <div class="fr-input-group fr-mb-2w" [class.fr-input-group--error]="formNameError()">
+            <label class="fr-label" for="form-name">
+              Nom <span style="color:var(--text-default-error)">*</span>
+            </label>
+            <input id="form-name" class="fr-input" [class.fr-input--error]="formNameError()" type="text"
+                   [value]="formName()"
+                   (input)="formName.set($any($event.target).value); formNameError.set(false)"
+                   (blur)="formNameError.set(!formName().trim())" />
+            @if (formNameError()) { <p class="fr-error-text">Le nom est obligatoire.</p> }
+          </div>
+          <div class="fr-input-group fr-mb-3w">
+            <label class="fr-label" for="form-desc">Description</label>
+            <textarea id="form-desc" class="fr-input" rows="3"
+                      [value]="formDescription()"
+                      (input)="formDescription.set($any($event.target).value)"></textarea>
+          </div>
+          <div class="fr-btns-group fr-btns-group--right fr-btns-group--inline">
+            <button class="fr-btn fr-btn--secondary" (click)="close()">Annuler</button>
+            <button class="fr-btn" (click)="submit()" [disabled]="formLoading()">
+              {{ mode() === 'create' ? 'Créer' : 'Enregistrer' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class CategoryFormModalComponent implements OnInit {
+  private categoryService = inject(CategoryService);
+  private destroyRef = inject(DestroyRef);
+
+  mode = input<'create' | 'edit'>('create');
+  category = input<Category | null>(null);
+  parentId = input<string | null>(null);
+  saved = output<void>();
+  closed = output<void>();
+
+  formName = signal('');
+  formDescription = signal('');
+  formParentId = signal<string | null>(null);
+  formError = signal<string | null>(null);
+  formNameError = signal(false);
+  formLoading = signal(false);
+  allCategories = signal<Category[]>([]);
+  editingCategoryId = signal<string | null>(null);
+
+  categoriesForSelect = computed<{ id: string; label: string }[]>(() => {
+    const cats = this.allCategories();
+    const map = new Map(cats.map((c) => [c.id, c]));
+
+    const getSortPath = (id: string, depth = 0): string => {
+      if (depth > 10) return '';
+      const cat = map.get(id);
+      if (!cat) return '';
+      if (!cat.parentId) return cat.name;
+      return `${getSortPath(cat.parentId, depth + 1)} / ${cat.name}`;
+    };
+
+    const getDepth = (id: string, depth = 0): number => {
+      if (depth > 10) return depth;
+      const cat = map.get(id);
+      if (!cat?.parentId) return depth;
+      return getDepth(cat.parentId, depth + 1);
+    };
+
+    return cats
+      .map((c) => {
+        const depth = getDepth(c.id);
+        const indent = '\u00a0\u00a0'.repeat(depth);
+        const prefix = depth > 0 ? `${indent}└\u00a0` : '';
+        return { id: c.id, label: `${prefix}${c.name}`, _sort: getSortPath(c.id) };
+      })
+      .sort((a, b) => a._sort.localeCompare(b._sort, 'fr'))
+      .map(({ id, label }) => ({ id, label }));
+  });
+
+  ngOnInit() {
+    const cat = this.category();
+    if (this.mode() === 'edit' && cat) {
+      this.editingCategoryId.set(cat.id);
+      this.formName.set(cat.name);
+      this.formDescription.set(cat.description ?? '');
+    } else {
+      this.formParentId.set(this.parentId());
+      this.categoryService
+        .list()
+        .pipe(takeUntilDestroyed(this.destroyRef))
+        .subscribe({
+          next: (res) => this.allCategories.set(res.items),
+          error: () => this.allCategories.set([]),
+        });
+    }
+  }
+
+  close() {
+    this.closed.emit();
+  }
+
+  submit() {
+    if (!this.formName().trim()) {
+      this.formNameError.set(true);
+      return;
+    }
+    this.formNameError.set(false);
+    this.formLoading.set(true);
+    const name = this.formName().trim();
+    const description = this.formDescription().trim() || undefined;
+
+    const obs =
+      this.mode() === 'create'
+        ? this.categoryService.create({ name, description, parentId: this.formParentId() ?? undefined })
+        : this.categoryService.update(this.editingCategoryId()!, { name, description });
+
+    obs.pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+      next: () => {
+        this.formLoading.set(false);
+        this.saved.emit();
+      },
+      error: (err: { error?: { message?: string } }) => {
+        this.formLoading.set(false);
+        this.formError.set(err?.error?.message ?? 'Une erreur est survenue.');
+      },
+    });
+  }
+}

front-public/src/environments/environment.prod.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: true,
+  apiBaseUrl: '/api',
+};

front-public/src/environments/environment.ts

@@ -0,0 +1,5 @@
+export const environment = {
+  production: false,
+  // Préfixe des appels API (proxifié vers le back en dev, cf. proxy.conf*.json).
+  apiBaseUrl: '/api',
+};

front-public/vitest-setup.ts

@@ -0,0 +1,3 @@
+// Charge le compilateur Angular pour permettre le fallback JIT en test
+// (sinon l'import de symboles @angular/* partiellement compilés échoue).
+import '@angular/compiler';

front-public/vitest.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vitest/config';
+
+// Vitest pour les tests de logique/services purs (cohérent avec le back).
+// Les tests de composants avec TestBed nécessiteraient un plugin Angular dédié
+// (ex. @analogjs/vitest-angular) — hors périmètre pour l'instant.
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'node',
+    setupFiles: ['./vitest-setup.ts'],
+    include: ['src/**/*.spec.ts'],
+  },
+});

infra/docker-compose.yml

@@ -21,7 +21,7 @@ services:
       NODE_ENV: development
       DOCS_OUTPUT_DIR: /app/docs-output
     working_dir: /workspace/back
-    command: sh -c "cd /workspace && pnpm install && cd /workspace/back && pnpm run start:dev"
+    command: sh -c "cd /workspace && pnpm install && /workspace/back/node_modules/.bin/tsc --project /workspace/shared/tsconfig.build.json && cd /workspace/back && pnpm run start:dev"
     networks:
       - network
     depends_on:

scripts/setup-local.sh

@@ -116,7 +116,7 @@ if command -v asyncapi &>/dev/null; then
   ok "asyncapi CLI déjà installé ($(asyncapi --version 2>/dev/null || echo 'version inconnue'))"
 else
   info "Installation de @asyncapi/cli@6.0.0..."
-  npm install -g @asyncapi/cli@6.0.0
+  npm install -g @asyncapi/cli@6.0.0 --legacy-peer-deps
   ok "asyncapi CLI installé"
 fi
 

shared/README.md

@@ -0,0 +1,31 @@
+# @datacat/shared
+
+Types et constantes partagés entre le **back** (NestJS) et le **front** (Angular).
+
+## Contenu
+
+- `src/types/` — interfaces et types (`ApiEntry`, `Category`, réponses d'API…).
+- `src/schemas/api-entry.schema.ts` — **source de vérité** des énumérations
+  (`API_TYPES`, `API_STATUSES`, `API_CONVENTIONS`). Les types `ApiType` /
+  `ApiStatus` / `ApiConvention` en sont **dérivés** (`typeof X[number]`), et la
+  validation back (`@IsIn`) réutilise ces mêmes constantes. Ajouter une valeur
+  dans le tableau suffit donc à propager type + validation.
+
+## Double build (piège récurrent)
+
+Ce paquet est consommé de **deux façons différentes** :
+
+| Consommateur | Mécanisme | Config |
+|--------------|-----------|--------|
+| **front** (Angular) | alias TypeScript vers la **source** | `tsconfig.json` (ES2022) + `paths` dans `front-public/tsconfig.json` |
+| **back** (NestJS) | paquet **compilé** (`dist/`) en CommonJS | `tsconfig.build.json` (CommonJS) → `dist/` |
+
+⚠️ Le back lit `dist/`, pas la source. Après toute modification de `shared`, il
+faut **rebuild** avant que le back voie le changement :
+
+```sh
+pnpm --filter @datacat/shared build
+# (le docker-compose le fait déjà : voir infra/docker-compose.yml, étape tsc)
+```
+
+Le front, lui, voit la source directement (pas de rebuild nécessaire).

shared/package.json

@@ -1,7 +1,18 @@
 {
   "name": "@datacat/shared",
   "version": "0.1.0",
+  "description": "Types et constantes partagés entre le back (NestJS) et le front (Angular) de Datacat.",
+  "license": "UNLICENSED",
   "private": true,
-  "main": "src/index.ts",
+  "main": "dist/index.js",
-  "types": "src/index.ts"
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc --project tsconfig.build.json"
+  }
 }

shared/src/schemas/api-entry.schema.ts

@@ -1,19 +1,7 @@
-// Zod schemas for validation (used in backend)
+// Source de vérité unique pour les énumérations d'API.
-// Install zod in back/ if needed: pnpm add zod
+// Les types (`ApiType`, `ApiStatus`, `ApiConvention`) sont dérivés de ces
-
+// constantes dans `../types/api-entry.types.ts`, et la validation back
+// (class-validator `@IsIn`) les réutilise — pas de duplication.
 export const API_TYPES = ['ASYNCAPI', 'OPENAPI'] as const;
-export const API_STATUSES = ['PENDING', 'GENERATED', 'ERROR'] as const;
+export const API_STATUSES = ['PENDING', 'GENERATED', 'ERROR', 'NO_YAML'] as const;
-
+export const API_CONVENTIONS = ['CONSULTER', 'ENREGISTRER', 'ETRE_NOTIFIE'] as const;
-export interface CreateApiEntryDto {
-  title: string;
-  version: string;
-  description?: string;
-  type: 'ASYNCAPI' | 'OPENAPI';
-}
-
-export interface UpdateApiEntryDto {
-  title?: string;
-  version?: string;
-  description?: string;
-  categoryId?: string | null;
-}

shared/src/types/api-entry.types.ts

@@ -1,24 +1,43 @@
-export type ApiType = 'ASYNCAPI' | 'OPENAPI';
+import { API_TYPES, API_STATUSES, API_CONVENTIONS } from '../schemas/api-entry.schema';
 
-export type ApiStatus = 'PENDING' | 'GENERATED' | 'ERROR';
+// Types dérivés des constantes (source de vérité dans api-entry.schema.ts) :
+// ajouter une valeur dans le tableau suffit à mettre à jour le type.
+export type ApiType = (typeof API_TYPES)[number];
+
+export type ApiStatus = (typeof API_STATUSES)[number];
+
+export type ApiConvention = (typeof API_CONVENTIONS)[number];
+
+export const API_CONVENTION_LABELS: Record<ApiConvention, string> = {
+  CONSULTER: 'Consulter',
+  ENREGISTRER: 'Enregistrer',
+  ETRE_NOTIFIE: 'Être notifié',
+};
 
 export interface ApiEntry {
   id: string;
   title: string;
+  name: string;
+  convention: ApiConvention;
   version: string;
+  versionMajor: number;
+  versionMinor: number;
+  versionPatch: number;
   description: string | null;
   type: ApiType;
+  provider: string;
   yamlContent: string;
   htmlPath: string | null;
   status: ApiStatus;
   errorMessage: string | null;
   categoryId: string | null;
-  functionalDoc: string | null;
+  isCurrent: boolean;
-  technicalDoc: string | null;
+  contactFunctionalName: string;
-  externalDocUrl: string | null;
+  contactFunctionalEntity: string;
-  contactFunctional: string | null;
+  contactFunctionalEmail: string;
-  contactTechnical: string | null;
+  contactTechnicalName: string;
-  accessRights: string | null;
+  contactTechnicalEntity: string;
+  contactTechnicalEmail: string;
   createdAt: string;
   updatedAt: string;
 }
@@ -26,11 +45,15 @@ export interface ApiEntry {
 export interface ApiEntryListItem {
   id: string;
   title: string;
+  name: string;
+  convention: ApiConvention;
   version: string;
   description: string | null;
   type: ApiType;
+  provider: string;
   status: ApiStatus;
   categoryId: string | null;
+  isCurrent: boolean;
   createdAt: string;
   updatedAt: string;
 }

shared/tsconfig.build.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "target": "ES2021",
+    "module": "CommonJS",
+    "moduleResolution": "node",
+    "outDir": "./dist",
+    "declaration": true,
+    "declarationMap": true
+  },
+  "include": ["src/**/*.ts"]
+}