@atlashub/smartstack-cli 3.39.0 → 3.41.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (472) hide show
  1. package/.documentation/apex.html +644 -644
  2. package/.documentation/css/styles.css +2320 -2320
  3. package/.documentation/init.html +1377 -1377
  4. package/.documentation/js/app.js +780 -780
  5. package/.documentation/prd-json-v2.0.0.md +396 -396
  6. package/.documentation/testing-ba-e2e.md +462 -462
  7. package/config/default-config.json +95 -95
  8. package/config/mcp-defaults.json +62 -62
  9. package/config/settings.json +53 -53
  10. package/config/settings.local.example.json +16 -16
  11. package/dist/index.js +6 -3
  12. package/dist/index.js.map +1 -1
  13. package/dist/mcp-entry.mjs +6 -4
  14. package/dist/mcp-entry.mjs.map +1 -1
  15. package/package.json +115 -115
  16. package/scripts/extract-api-endpoints.ts +325 -325
  17. package/scripts/extract-business-rules.ts +440 -440
  18. package/scripts/generate-doc-with-mock-ui.ts +804 -804
  19. package/scripts/health-check.sh +168 -168
  20. package/scripts/postinstall.js +18 -18
  21. package/templates/agents/action.md +37 -37
  22. package/templates/agents/ba-reader.md +378 -378
  23. package/templates/agents/ba-writer.md +861 -861
  24. package/templates/agents/code-reviewer.md +163 -163
  25. package/templates/agents/db-reader.md +149 -149
  26. package/templates/agents/docs-context-reader.md +143 -143
  27. package/templates/agents/docs-sync-checker.md +122 -122
  28. package/templates/agents/efcore/conflicts.md +95 -84
  29. package/templates/agents/efcore/db-deploy.md +85 -74
  30. package/templates/agents/efcore/db-reset.md +96 -85
  31. package/templates/agents/efcore/db-seed.md +72 -61
  32. package/templates/agents/efcore/db-status.md +97 -86
  33. package/templates/agents/efcore/migration.md +197 -186
  34. package/templates/agents/efcore/rebase-snapshot.md +119 -108
  35. package/templates/agents/efcore/scan.md +103 -92
  36. package/templates/agents/efcore/squash.md +172 -161
  37. package/templates/agents/explore-codebase.md +66 -66
  38. package/templates/agents/explore-docs.md +98 -98
  39. package/templates/agents/fix-grammar.md +50 -50
  40. package/templates/agents/gitflow/abort.md +45 -45
  41. package/templates/agents/gitflow/cleanup.md +96 -96
  42. package/templates/agents/gitflow/commit.md +236 -236
  43. package/templates/agents/gitflow/exec.md +48 -48
  44. package/templates/agents/gitflow/finish.md +146 -146
  45. package/templates/agents/gitflow/init-clone.md +199 -199
  46. package/templates/agents/gitflow/init-detect.md +137 -137
  47. package/templates/agents/gitflow/init-validate.md +225 -225
  48. package/templates/agents/gitflow/init.md +340 -340
  49. package/templates/agents/gitflow/merge.md +145 -145
  50. package/templates/agents/gitflow/plan.md +42 -42
  51. package/templates/agents/gitflow/pr.md +191 -191
  52. package/templates/agents/gitflow/review.md +49 -49
  53. package/templates/agents/gitflow/start.md +147 -147
  54. package/templates/agents/gitflow/status.md +95 -95
  55. package/templates/agents/mcp-healthcheck.md +163 -163
  56. package/templates/agents/snipper.md +37 -37
  57. package/templates/agents/websearch.md +46 -46
  58. package/templates/hooks/appsettings-guard.sh +76 -76
  59. package/templates/hooks/docs-drift-check.md +96 -96
  60. package/templates/hooks/ef-migration-check.md +139 -139
  61. package/templates/hooks/hooks.json +58 -58
  62. package/templates/hooks/mcp-check.md +64 -64
  63. package/templates/hooks/ralph-mcp-logger.sh +46 -46
  64. package/templates/hooks/ralph-session-end.sh +69 -69
  65. package/templates/hooks/stop-hook.sh +177 -177
  66. package/templates/hooks/wsl-dotnet-cleanup.sh +24 -24
  67. package/templates/mcp-scaffolding/component.tsx.hbs +318 -318
  68. package/templates/mcp-scaffolding/controller.cs.hbs +192 -192
  69. package/templates/mcp-scaffolding/entity-extension.cs.hbs +239 -239
  70. package/templates/mcp-scaffolding/frontend/api-client.ts.hbs +116 -116
  71. package/templates/mcp-scaffolding/frontend/nav-routes.ts.hbs +133 -133
  72. package/templates/mcp-scaffolding/frontend/routes.tsx.hbs +126 -126
  73. package/templates/mcp-scaffolding/migrations/seed-roles.cs.hbs +261 -261
  74. package/templates/mcp-scaffolding/service-extension.cs.hbs +53 -53
  75. package/templates/mcp-scaffolding/tests/controller.test.cs.hbs +436 -436
  76. package/templates/mcp-scaffolding/tests/entity.test.cs.hbs +239 -239
  77. package/templates/mcp-scaffolding/tests/repository.test.cs.hbs +441 -441
  78. package/templates/mcp-scaffolding/tests/security.test.cs.hbs +442 -442
  79. package/templates/mcp-scaffolding/tests/service.test.cs.hbs +402 -402
  80. package/templates/mcp-scaffolding/tests/validator.test.cs.hbs +428 -428
  81. package/templates/project/DependencyInjection.Application.cs.template +25 -25
  82. package/templates/project/DependencyInjection.Infrastructure.cs.template +61 -61
  83. package/templates/project/DesignTimeExtensionsDbContextFactory.cs.template +70 -70
  84. package/templates/project/ExampleEntity.cs.template +116 -116
  85. package/templates/project/ExampleEntityConfiguration.cs.template +64 -64
  86. package/templates/project/ExampleService.cs.template +146 -146
  87. package/templates/project/ExtensionsDbContext.cs.template +41 -41
  88. package/templates/project/IExtensionsDbContext.cs.template +22 -22
  89. package/templates/project/Program.cs.template +47 -47
  90. package/templates/project/README.md +79 -79
  91. package/templates/project/api.ts.template +12 -12
  92. package/templates/project/appsettings.json.template +170 -170
  93. package/templates/project/claude-settings.json.template +5 -5
  94. package/templates/project/test-frontend/msw/handlers.ts +58 -58
  95. package/templates/project/test-frontend/msw/server.ts +25 -25
  96. package/templates/project/test-frontend/setup.ts +16 -16
  97. package/templates/project/test-frontend/test-utils.tsx +59 -59
  98. package/templates/project/test-frontend/vitest.config.ts +31 -31
  99. package/templates/ralph/README.md +93 -93
  100. package/templates/ralph/ralph.config.yaml +113 -113
  101. package/templates/scripts/setup-ralph-loop.sh +173 -173
  102. package/templates/skills/_resources/config-safety.md +61 -61
  103. package/templates/skills/_resources/context-digest-template.md +53 -53
  104. package/templates/skills/_resources/doc-context-cache.md +60 -60
  105. package/templates/skills/_resources/docs-manifest-schema.md +155 -155
  106. package/templates/skills/_resources/formatting-guide.md +124 -124
  107. package/templates/skills/_resources/mcp-validate-documentation-spec.md +181 -181
  108. package/templates/skills/_shared.md +228 -228
  109. package/templates/skills/admin/SKILL.md +48 -48
  110. package/templates/skills/ai-prompt/SKILL.md +107 -107
  111. package/templates/skills/ai-prompt/steps/step-00-init.md +47 -47
  112. package/templates/skills/ai-prompt/steps/step-01-implementation.md +122 -122
  113. package/templates/skills/apex/SKILL.md +168 -168
  114. package/templates/skills/apex/_shared.md +141 -141
  115. package/templates/skills/apex/references/agent-teams-protocol.md +164 -164
  116. package/templates/skills/apex/references/analysis-methods.md +141 -141
  117. package/templates/skills/apex/references/challenge-questions.md +145 -145
  118. package/templates/skills/apex/references/code-generation.md +412 -412
  119. package/templates/skills/apex/references/core-seed-data.md +1437 -1437
  120. package/templates/skills/apex/references/error-classification.md +144 -144
  121. package/templates/skills/apex/references/examine-build-validation.md +82 -82
  122. package/templates/skills/apex/references/execution-frontend-gates.md +177 -177
  123. package/templates/skills/apex/references/execution-frontend-patterns.md +105 -105
  124. package/templates/skills/apex/references/execution-layer1-rules.md +96 -96
  125. package/templates/skills/apex/references/initialization-challenge-flow.md +110 -110
  126. package/templates/skills/apex/references/planning-layer-mapping.md +151 -151
  127. package/templates/skills/apex/references/post-checks.md +1584 -1584
  128. package/templates/skills/apex/references/smartstack-api.md +1053 -1053
  129. package/templates/skills/apex/references/smartstack-frontend.md +1571 -1571
  130. package/templates/skills/apex/references/smartstack-layers.md +402 -402
  131. package/templates/skills/apex/steps/step-00-init.md +307 -307
  132. package/templates/skills/apex/steps/step-01-analyze.md +165 -165
  133. package/templates/skills/apex/steps/step-02-plan.md +144 -144
  134. package/templates/skills/apex/steps/step-03-execute.md +328 -328
  135. package/templates/skills/apex/steps/step-04-examine.md +263 -263
  136. package/templates/skills/apex/steps/step-05-deep-review.md +129 -129
  137. package/templates/skills/apex/steps/step-06-resolve.md +101 -101
  138. package/templates/skills/apex/steps/step-07-tests.md +238 -238
  139. package/templates/skills/apex/steps/step-08-run-tests.md +125 -125
  140. package/templates/skills/application/SKILL.md +4 -4
  141. package/templates/skills/application/references/application-roles-template.md +227 -227
  142. package/templates/skills/application/references/backend-controller-hierarchy.md +58 -58
  143. package/templates/skills/application/references/backend-entity-seeding.md +72 -72
  144. package/templates/skills/application/references/backend-seeding-and-dto-output.md +83 -83
  145. package/templates/skills/application/references/backend-table-prefix-mapping.md +79 -79
  146. package/templates/skills/application/references/backend-verification.md +88 -88
  147. package/templates/skills/application/references/frontend-i18n-and-output.md +67 -67
  148. package/templates/skills/application/references/frontend-route-naming.md +117 -117
  149. package/templates/skills/application/references/frontend-route-wiring-app-tsx.md +107 -107
  150. package/templates/skills/application/references/frontend-verification.md +156 -156
  151. package/templates/skills/application/references/migration-checklist-troubleshooting.md +1 -1
  152. package/templates/skills/application/references/provider-template.md +177 -177
  153. package/templates/skills/application/references/roles-client-project-handling.md +55 -55
  154. package/templates/skills/application/references/roles-fallback-procedure.md +149 -149
  155. package/templates/skills/application/references/test-coverage-requirements.md +213 -213
  156. package/templates/skills/application/references/test-frontend.md +73 -73
  157. package/templates/skills/application/references/test-prerequisites.md +72 -72
  158. package/templates/skills/application/steps/step-05-frontend.md +176 -176
  159. package/templates/skills/application/steps/step-06-migration.md +193 -193
  160. package/templates/skills/application/steps/step-07-tests.md +356 -356
  161. package/templates/skills/application/steps/step-08-documentation.md +137 -137
  162. package/templates/skills/application/templates-backend.md +463 -463
  163. package/templates/skills/application/templates-frontend.md +685 -685
  164. package/templates/skills/application/templates-i18n.md +520 -520
  165. package/templates/skills/application/templates-seed.md +1096 -1096
  166. package/templates/skills/business-analyse/SKILL.md +327 -327
  167. package/templates/skills/business-analyse/_architecture.md +123 -123
  168. package/templates/skills/business-analyse/_elicitation.md +206 -206
  169. package/templates/skills/business-analyse/_module-loop.md +115 -115
  170. package/templates/skills/business-analyse/_shared.md +383 -383
  171. package/templates/skills/business-analyse/_suggestions.md +34 -34
  172. package/templates/skills/business-analyse/html/ba-interactive.html +4477 -4477
  173. package/templates/skills/business-analyse/html/build-html.js +77 -77
  174. package/templates/skills/business-analyse/html/src/scripts/01-data-init.js +150 -150
  175. package/templates/skills/business-analyse/html/src/scripts/02-navigation.js +227 -227
  176. package/templates/skills/business-analyse/html/src/scripts/03-render-cadrage.js +199 -199
  177. package/templates/skills/business-analyse/html/src/scripts/04-render-modules.js +205 -205
  178. package/templates/skills/business-analyse/html/src/scripts/05-render-specs.js +647 -647
  179. package/templates/skills/business-analyse/html/src/scripts/06-render-consolidation.js +195 -195
  180. package/templates/skills/business-analyse/html/src/scripts/07-render-handoff.js +92 -92
  181. package/templates/skills/business-analyse/html/src/scripts/08-editing.js +135 -135
  182. package/templates/skills/business-analyse/html/src/scripts/09-export.js +168 -168
  183. package/templates/skills/business-analyse/html/src/scripts/10-comments.js +171 -171
  184. package/templates/skills/business-analyse/html/src/scripts/11-review-panel.js +166 -166
  185. package/templates/skills/business-analyse/html/src/styles/01-variables.css +38 -38
  186. package/templates/skills/business-analyse/html/src/styles/02-layout.css +101 -101
  187. package/templates/skills/business-analyse/html/src/styles/03-navigation.css +120 -120
  188. package/templates/skills/business-analyse/html/src/styles/04-cards.css +196 -196
  189. package/templates/skills/business-analyse/html/src/styles/05-modules.css +454 -454
  190. package/templates/skills/business-analyse/html/src/styles/06-wireframes.css +272 -272
  191. package/templates/skills/business-analyse/html/src/styles/07-comments.css +184 -184
  192. package/templates/skills/business-analyse/html/src/styles/08-review-panel.css +241 -241
  193. package/templates/skills/business-analyse/html/src/template.html +516 -516
  194. package/templates/skills/business-analyse/patterns/suggestion-catalog.md +546 -546
  195. package/templates/skills/business-analyse/questionnaire/00-application.md +160 -160
  196. package/templates/skills/business-analyse/questionnaire/00b-project.md +85 -85
  197. package/templates/skills/business-analyse/questionnaire/01-context.md +185 -185
  198. package/templates/skills/business-analyse/questionnaire/02-stakeholders.md +189 -189
  199. package/templates/skills/business-analyse/questionnaire/03-scope.md +164 -164
  200. package/templates/skills/business-analyse/questionnaire/04-data.md +88 -88
  201. package/templates/skills/business-analyse/questionnaire/05-integrations.md +58 -58
  202. package/templates/skills/business-analyse/questionnaire/06-security.md +68 -68
  203. package/templates/skills/business-analyse/questionnaire/07-ui.md +76 -76
  204. package/templates/skills/business-analyse/questionnaire/08-performance.md +42 -42
  205. package/templates/skills/business-analyse/questionnaire/09-constraints.md +45 -45
  206. package/templates/skills/business-analyse/questionnaire/10-documentation.md +43 -43
  207. package/templates/skills/business-analyse/questionnaire/11-data-lifecycle.md +59 -59
  208. package/templates/skills/business-analyse/questionnaire/12-migration.md +58 -58
  209. package/templates/skills/business-analyse/questionnaire/13-cross-module.md +69 -69
  210. package/templates/skills/business-analyse/questionnaire/14-risk-assumptions.md +135 -135
  211. package/templates/skills/business-analyse/questionnaire/15-success-metrics.md +136 -136
  212. package/templates/skills/business-analyse/questionnaire.md +337 -337
  213. package/templates/skills/business-analyse/react/application-viewer.md +242 -242
  214. package/templates/skills/business-analyse/react/components.md +551 -551
  215. package/templates/skills/business-analyse/react/i18n-template.md +306 -306
  216. package/templates/skills/business-analyse/references/acceptance-criteria.md +169 -169
  217. package/templates/skills/business-analyse/references/agent-module-prompt.md +362 -362
  218. package/templates/skills/business-analyse/references/agent-pooling-best-practices.md +557 -557
  219. package/templates/skills/business-analyse/references/analysis-semantic-checks.md +190 -190
  220. package/templates/skills/business-analyse/references/cache-warming-strategy.md +566 -566
  221. package/templates/skills/business-analyse/references/cadrage-challenge-patterns.md +41 -41
  222. package/templates/skills/business-analyse/references/cadrage-coverage-matrix.md +74 -74
  223. package/templates/skills/business-analyse/references/cadrage-pre-analysis.md +115 -115
  224. package/templates/skills/business-analyse/references/cadrage-shared-modules.md +68 -69
  225. package/templates/skills/business-analyse/references/cadrage-structure-cards.md +85 -85
  226. package/templates/skills/business-analyse/references/compilation-structure-cards.md +297 -297
  227. package/templates/skills/business-analyse/references/consolidation-structural-checks.md +107 -107
  228. package/templates/skills/business-analyse/references/deploy-data-build.md +180 -180
  229. package/templates/skills/business-analyse/references/deploy-modes.md +118 -118
  230. package/templates/skills/business-analyse/references/detection-strategies.md +424 -424
  231. package/templates/skills/business-analyse/references/entity-architecture-decision.md +218 -218
  232. package/templates/skills/business-analyse/references/handoff-file-templates.md +120 -120
  233. package/templates/skills/business-analyse/references/handoff-mappings.md +81 -81
  234. package/templates/skills/business-analyse/references/handoff-seeddata-generation.md +312 -312
  235. package/templates/skills/business-analyse/references/html-data-mapping.md +299 -299
  236. package/templates/skills/business-analyse/references/init-schema-deployment.md +65 -65
  237. package/templates/skills/business-analyse/references/naming-conventions.md +243 -243
  238. package/templates/skills/business-analyse/references/prd-generation.md +258 -258
  239. package/templates/skills/business-analyse/references/review-data-mapping.md +363 -363
  240. package/templates/skills/business-analyse/references/robustness-checks.md +542 -542
  241. package/templates/skills/business-analyse/references/spec-auto-inference.md +111 -111
  242. package/templates/skills/business-analyse/references/team-orchestration.md +1022 -1022
  243. package/templates/skills/business-analyse/references/ui-dashboard-spec.md +85 -85
  244. package/templates/skills/business-analyse/references/ui-resource-cards.md +259 -259
  245. package/templates/skills/business-analyse/references/validate-incremental-html.md +121 -121
  246. package/templates/skills/business-analyse/references/validation-checklist.md +347 -347
  247. package/templates/skills/business-analyse/references/wireframe-svg-style-guide.md +335 -335
  248. package/templates/skills/business-analyse/schemas/application-schema.json +453 -453
  249. package/templates/skills/business-analyse/schemas/feature-schema.json +53 -53
  250. package/templates/skills/business-analyse/schemas/project-schema.json +485 -485
  251. package/templates/skills/business-analyse/schemas/sections/analysis-schema.json +201 -201
  252. package/templates/skills/business-analyse/schemas/sections/discovery-schema.json +82 -82
  253. package/templates/skills/business-analyse/schemas/sections/handoff-schema.json +80 -80
  254. package/templates/skills/business-analyse/schemas/sections/metadata-schema.json +70 -70
  255. package/templates/skills/business-analyse/schemas/sections/specification-schema.json +547 -547
  256. package/templates/skills/business-analyse/schemas/sections/validation-schema.json +93 -93
  257. package/templates/skills/business-analyse/schemas/shared/common-defs.json +226 -226
  258. package/templates/skills/business-analyse/steps/step-00-init.md +575 -576
  259. package/templates/skills/business-analyse/steps/step-01-cadrage.md +767 -767
  260. package/templates/skills/business-analyse/steps/step-01b-applications.md +419 -419
  261. package/templates/skills/business-analyse/steps/step-02-decomposition.md +387 -387
  262. package/templates/skills/business-analyse/steps/step-03a-data.md +16 -16
  263. package/templates/skills/business-analyse/steps/step-03a1-setup.md +506 -506
  264. package/templates/skills/business-analyse/steps/step-03a2-analysis.md +252 -252
  265. package/templates/skills/business-analyse/steps/step-03b-ui.md +425 -425
  266. package/templates/skills/business-analyse/steps/step-03c-compile.md +611 -611
  267. package/templates/skills/business-analyse/steps/step-03d-validate.md +783 -783
  268. package/templates/skills/business-analyse/steps/step-04-consolidation.md +17 -17
  269. package/templates/skills/business-analyse/steps/step-04a-collect.md +415 -415
  270. package/templates/skills/business-analyse/steps/step-04b-analyze.md +163 -163
  271. package/templates/skills/business-analyse/steps/step-04c-decide.md +186 -186
  272. package/templates/skills/business-analyse/steps/step-05a-handoff.md +840 -840
  273. package/templates/skills/business-analyse/steps/step-05b-deploy.md +522 -522
  274. package/templates/skills/business-analyse/steps/step-05c-ralph-readiness.md +703 -703
  275. package/templates/skills/business-analyse/steps/step-06-review.md +278 -278
  276. package/templates/skills/business-analyse/templates/tpl-frd.md +168 -168
  277. package/templates/skills/business-analyse/templates/tpl-handoff.md +186 -186
  278. package/templates/skills/business-analyse/templates/tpl-launch-displays.md +59 -59
  279. package/templates/skills/business-analyse/templates/tpl-progress.md +172 -172
  280. package/templates/skills/business-analyse/templates-frd.md +476 -476
  281. package/templates/skills/business-analyse/templates-react.md +574 -574
  282. package/templates/skills/cc-agent/SKILL.md +129 -129
  283. package/templates/skills/cc-agent/references/agent-behavior-patterns.md +95 -95
  284. package/templates/skills/cc-agent/references/agent-frontmatter.md +213 -213
  285. package/templates/skills/cc-agent/references/permission-modes.md +102 -102
  286. package/templates/skills/cc-agent/references/tools-reference.md +144 -144
  287. package/templates/skills/cc-agent/steps/step-00-init.md +134 -134
  288. package/templates/skills/cc-agent/steps/step-01-design.md +186 -186
  289. package/templates/skills/cc-agent/steps/step-02-generate.md +131 -131
  290. package/templates/skills/cc-agent/steps/step-03-validate.md +130 -130
  291. package/templates/skills/cc-agent/templates/agent-categorized.md +67 -67
  292. package/templates/skills/cc-agent/templates/agent-standalone.md +56 -56
  293. package/templates/skills/cc-agent/templates/agent-with-skills.md +94 -94
  294. package/templates/skills/cc-audit/SKILL.md +108 -108
  295. package/templates/skills/cc-audit/references/agent-checklist.md +91 -91
  296. package/templates/skills/cc-audit/references/hook-checklist.md +110 -110
  297. package/templates/skills/cc-audit/references/skill-checklist.md +70 -70
  298. package/templates/skills/cc-audit/steps/step-00-init.md +98 -98
  299. package/templates/skills/cc-audit/steps/step-01-scan.md +142 -142
  300. package/templates/skills/cc-audit/steps/step-02-analyze.md +158 -158
  301. package/templates/skills/cc-audit/steps/step-03-report.md +142 -142
  302. package/templates/skills/cc-skill/SKILL.md +134 -134
  303. package/templates/skills/cc-skill/references/best-practices.md +167 -167
  304. package/templates/skills/cc-skill/references/frontmatter-reference.md +182 -182
  305. package/templates/skills/cc-skill/references/skill-patterns.md +199 -199
  306. package/templates/skills/cc-skill/steps/step-00-init.md +119 -119
  307. package/templates/skills/cc-skill/steps/step-01-design.md +199 -199
  308. package/templates/skills/cc-skill/steps/step-02-generate.md +145 -145
  309. package/templates/skills/cc-skill/steps/step-03-steps.md +151 -151
  310. package/templates/skills/cc-skill/steps/step-04-validate.md +124 -124
  311. package/templates/skills/cc-skill/templates/skill-forked.md +85 -85
  312. package/templates/skills/cc-skill/templates/skill-progressive.md +102 -102
  313. package/templates/skills/cc-skill/templates/skill-simple.md +75 -75
  314. package/templates/skills/cc-skill/templates/step-template.md +82 -82
  315. package/templates/skills/check-version/SKILL.md +196 -196
  316. package/templates/skills/controller/SKILL.md +162 -162
  317. package/templates/skills/controller/postman-templates.md +614 -614
  318. package/templates/skills/controller/references/controller-code-templates.md +159 -159
  319. package/templates/skills/controller/references/mcp-scaffold-workflow.md +209 -209
  320. package/templates/skills/controller/references/permission-sync-templates.md +149 -149
  321. package/templates/skills/controller/steps/step-00-init.md +193 -191
  322. package/templates/skills/controller/steps/step-01-analyze.md +146 -146
  323. package/templates/skills/controller/steps/step-02-plan.md +176 -176
  324. package/templates/skills/controller/steps/step-03-generate.md +189 -189
  325. package/templates/skills/controller/steps/step-04-perms.md +80 -80
  326. package/templates/skills/controller/steps/step-05-validate.md +107 -107
  327. package/templates/skills/controller/templates.md +1555 -1555
  328. package/templates/skills/debug/SKILL.md +70 -70
  329. package/templates/skills/debug/references/team-protocol.md +232 -232
  330. package/templates/skills/debug/steps/step-00-init.md +57 -57
  331. package/templates/skills/debug/steps/step-01-analyze.md +219 -219
  332. package/templates/skills/debug/steps/step-02-resolve.md +85 -85
  333. package/templates/skills/documentation/SKILL.md +132 -132
  334. package/templates/skills/documentation/data-schema.md +227 -227
  335. package/templates/skills/documentation/steps/step-00-init.md +70 -70
  336. package/templates/skills/documentation/steps/step-01-scan.md +113 -113
  337. package/templates/skills/documentation/steps/step-02-generate.md +231 -231
  338. package/templates/skills/documentation/steps/step-03-validate.md +251 -238
  339. package/templates/skills/documentation/templates.md +662 -663
  340. package/templates/skills/efcore/SKILL.md +168 -167
  341. package/templates/skills/efcore/references/both-contexts.md +32 -32
  342. package/templates/skills/efcore/references/database-operations.md +67 -67
  343. package/templates/skills/efcore/references/destructive-operations.md +38 -38
  344. package/templates/skills/efcore/references/reset-operations.md +81 -81
  345. package/templates/skills/efcore/references/seed-methods.md +86 -86
  346. package/templates/skills/efcore/references/shared-init-functions.md +250 -250
  347. package/templates/skills/efcore/references/sql-objects-injection.md +61 -61
  348. package/templates/skills/efcore/references/troubleshooting.md +81 -81
  349. package/templates/skills/efcore/references/zero-downtime-patterns.md +227 -227
  350. package/templates/skills/efcore/steps/db/step-deploy.md +217 -217
  351. package/templates/skills/efcore/steps/db/step-reset.md +186 -186
  352. package/templates/skills/efcore/steps/db/step-seed.md +166 -166
  353. package/templates/skills/efcore/steps/db/step-status.md +173 -173
  354. package/templates/skills/efcore/steps/migration/step-00-init.md +102 -102
  355. package/templates/skills/efcore/steps/migration/step-01-check.md +164 -164
  356. package/templates/skills/efcore/steps/migration/step-02-create.md +160 -160
  357. package/templates/skills/efcore/steps/migration/step-03-validate.md +168 -168
  358. package/templates/skills/efcore/steps/rebase-snapshot/step-00-init.md +173 -173
  359. package/templates/skills/efcore/steps/rebase-snapshot/step-01-backup.md +100 -100
  360. package/templates/skills/efcore/steps/rebase-snapshot/step-02-fetch.md +115 -115
  361. package/templates/skills/efcore/steps/rebase-snapshot/step-03-create.md +112 -112
  362. package/templates/skills/efcore/steps/rebase-snapshot/step-04-validate.md +157 -157
  363. package/templates/skills/efcore/steps/shared/step-00-init.md +131 -131
  364. package/templates/skills/efcore/steps/squash/step-00-init.md +141 -141
  365. package/templates/skills/efcore/steps/squash/step-01-backup.md +120 -120
  366. package/templates/skills/efcore/steps/squash/step-02-fetch.md +168 -168
  367. package/templates/skills/efcore/steps/squash/step-03-create.md +184 -184
  368. package/templates/skills/efcore/steps/squash/step-04-validate.md +174 -174
  369. package/templates/skills/explore/SKILL.md +98 -98
  370. package/templates/skills/feature-full/SKILL.md +111 -111
  371. package/templates/skills/feature-full/steps/step-00-init.md +57 -57
  372. package/templates/skills/feature-full/steps/step-01-implementation.md +120 -120
  373. package/templates/skills/gitflow/SKILL.md +377 -377
  374. package/templates/skills/gitflow/_shared.md +620 -620
  375. package/templates/skills/gitflow/phases/abort.md +189 -189
  376. package/templates/skills/gitflow/phases/cleanup.md +234 -234
  377. package/templates/skills/gitflow/phases/status.md +192 -192
  378. package/templates/skills/gitflow/references/commit-message-generation.md +58 -58
  379. package/templates/skills/gitflow/references/commit-migration-validation.md +49 -49
  380. package/templates/skills/gitflow/references/finish-cleanup.md +55 -55
  381. package/templates/skills/gitflow/references/finish-version-bumping.md +45 -45
  382. package/templates/skills/gitflow/references/init-config-template.md +135 -135
  383. package/templates/skills/gitflow/references/init-environment-detection.md +41 -41
  384. package/templates/skills/gitflow/references/init-name-normalization.md +103 -103
  385. package/templates/skills/gitflow/references/init-questions.md +185 -185
  386. package/templates/skills/gitflow/references/init-structure-creation.md +75 -75
  387. package/templates/skills/gitflow/references/init-version-detection.md +21 -21
  388. package/templates/skills/gitflow/references/init-workspace-detection.md +43 -43
  389. package/templates/skills/gitflow/references/merge-ci-status.md +36 -36
  390. package/templates/skills/gitflow/references/merge-execution.md +62 -62
  391. package/templates/skills/gitflow/references/merge-pr-context.md +76 -76
  392. package/templates/skills/gitflow/references/plan-template.md +69 -69
  393. package/templates/skills/gitflow/references/pr-build-checks.md +60 -60
  394. package/templates/skills/gitflow/references/pr-generation.md +58 -58
  395. package/templates/skills/gitflow/references/start-branch-normalization.md +28 -28
  396. package/templates/skills/gitflow/references/start-efcore-preflight.md +70 -70
  397. package/templates/skills/gitflow/references/start-local-config.md +113 -113
  398. package/templates/skills/gitflow/references/start-worktree-creation.md +50 -50
  399. package/templates/skills/gitflow/references/sync-push-verify.md +44 -44
  400. package/templates/skills/gitflow/references/sync-rebase-conflicts.md +38 -38
  401. package/templates/skills/gitflow/steps/step-commit.md +199 -199
  402. package/templates/skills/gitflow/steps/step-finish.md +147 -147
  403. package/templates/skills/gitflow/steps/step-init.md +190 -190
  404. package/templates/skills/gitflow/steps/step-merge.md +85 -85
  405. package/templates/skills/gitflow/steps/step-plan.md +151 -151
  406. package/templates/skills/gitflow/steps/step-pr.md +199 -199
  407. package/templates/skills/gitflow/steps/step-start.md +195 -195
  408. package/templates/skills/gitflow/steps/step-sync.md +161 -161
  409. package/templates/skills/gitflow/templates/config.json +72 -72
  410. package/templates/skills/mcp/SKILL.md +62 -62
  411. package/templates/skills/mcp/steps/step-01-healthcheck.md +108 -108
  412. package/templates/skills/mcp/steps/step-02-tools.md +73 -73
  413. package/templates/skills/notification/SKILL.md +173 -173
  414. package/templates/skills/quick-search/SKILL.md +99 -99
  415. package/templates/skills/ralph-loop/SKILL.md +234 -234
  416. package/templates/skills/ralph-loop/references/category-completeness.md +185 -185
  417. package/templates/skills/ralph-loop/references/category-rules.md +96 -96
  418. package/templates/skills/ralph-loop/references/compact-loop.md +300 -300
  419. package/templates/skills/ralph-loop/references/init-resume-recovery.md +127 -127
  420. package/templates/skills/ralph-loop/references/module-transition.md +151 -151
  421. package/templates/skills/ralph-loop/references/multi-module-queue.md +171 -171
  422. package/templates/skills/ralph-loop/references/parallel-execution.md +246 -246
  423. package/templates/skills/ralph-loop/references/section-splitting.md +439 -439
  424. package/templates/skills/ralph-loop/references/task-transform-legacy.md +256 -256
  425. package/templates/skills/ralph-loop/references/team-orchestration.md +547 -547
  426. package/templates/skills/ralph-loop/steps/step-00-init.md +150 -150
  427. package/templates/skills/ralph-loop/steps/step-01-task.md +174 -174
  428. package/templates/skills/ralph-loop/steps/step-02-execute.md +177 -177
  429. package/templates/skills/ralph-loop/steps/step-03-commit.md +92 -92
  430. package/templates/skills/ralph-loop/steps/step-04-check.md +207 -207
  431. package/templates/skills/ralph-loop/steps/step-05-report.md +175 -175
  432. package/templates/skills/refactor/SKILL.md +56 -56
  433. package/templates/skills/refactor/steps/step-01-discover.md +60 -60
  434. package/templates/skills/refactor/steps/step-02-execute.md +67 -67
  435. package/templates/skills/review-code/SKILL.md +95 -94
  436. package/templates/skills/review-code/references/clean-code-principles.md +292 -292
  437. package/templates/skills/review-code/references/code-quality-metrics.md +174 -174
  438. package/templates/skills/review-code/references/feedback-patterns.md +149 -149
  439. package/templates/skills/review-code/references/owasp-api-top10.md +243 -243
  440. package/templates/skills/review-code/references/security-checklist.md +212 -212
  441. package/templates/skills/review-code/steps/step-01-smartstack.md +96 -96
  442. package/templates/skills/review-code/steps/step-02-detailed-review.md +80 -80
  443. package/templates/skills/review-code/steps/step-03-react.md +44 -44
  444. package/templates/skills/ui-components/SKILL.md +137 -137
  445. package/templates/skills/ui-components/accessibility.md +170 -170
  446. package/templates/skills/ui-components/patterns/dashboard-chart.md +327 -327
  447. package/templates/skills/ui-components/patterns/data-table.md +39 -39
  448. package/templates/skills/ui-components/patterns/entity-card.md +77 -77
  449. package/templates/skills/ui-components/patterns/grid-layout.md +91 -91
  450. package/templates/skills/ui-components/patterns/kanban.md +43 -43
  451. package/templates/skills/ui-components/responsive-guidelines.md +278 -278
  452. package/templates/skills/ui-components/style-guide.md +113 -113
  453. package/templates/skills/utils/SKILL.md +44 -44
  454. package/templates/skills/utils/subcommands/test-web-config.md +152 -152
  455. package/templates/skills/utils/subcommands/test-web.md +123 -123
  456. package/templates/skills/validate/SKILL.md +181 -181
  457. package/templates/skills/validate-feature/SKILL.md +101 -101
  458. package/templates/skills/validate-feature/references/api-smoke-tests.md +140 -140
  459. package/templates/skills/validate-feature/references/db-validation-checks.md +180 -180
  460. package/templates/skills/validate-feature/steps/step-00-dependencies.md +121 -121
  461. package/templates/skills/validate-feature/steps/step-01-compile.md +39 -39
  462. package/templates/skills/validate-feature/steps/step-02-unit-tests.md +45 -45
  463. package/templates/skills/validate-feature/steps/step-03-integration-tests.md +53 -53
  464. package/templates/skills/validate-feature/steps/step-04-api-smoke.md +94 -94
  465. package/templates/skills/validate-feature/steps/step-05-db-validation.md +149 -149
  466. package/templates/skills/workflow/SKILL.md +127 -127
  467. package/templates/skills/workflow/steps/step-00-init.md +57 -57
  468. package/templates/skills/workflow/steps/step-01-implementation.md +84 -84
  469. package/templates/test-web/api-health.json +38 -38
  470. package/templates/test-web/minimal.json +19 -19
  471. package/templates/test-web/npm-package.json +46 -46
  472. package/templates/test-web/seo-check.json +54 -54
package/.documentation/init.html CHANGED
@@ -1,1377 +1,1377 @@
1
- <!DOCTYPE html>
2
- <html lang="fr">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Projet Client - SmartStack CLI</title>
7
- <link rel="stylesheet" href="css/styles.css">
8
- </head>
9
- <body>
10
- <div class="app-container">
11
- <!-- Global Header -->
12
- <header class="global-header">
13
- <div class="logo">SS</div>
14
- <span class="site-title">SmartStack CLI</span>
15
- <span class="version-badge">v3.34.0</span>
16
- <div class="header-divider"></div>
17
- <span class="page-title">
18
- <span data-lang="fr">Projet Client</span>
19
- <span data-lang="en">Client Project</span>
20
- </span>
21
- <nav class="breadcrumb">
22
- <a href="index.html">
23
- <span data-lang="fr">Accueil</span>
24
- <span data-lang="en">Home</span>
25
- </a>
26
- <span class="breadcrumb-separator">&#8250;</span>
27
- <span class="breadcrumb-current">
28
- <span data-lang="fr">Projet Client</span>
29
- <span data-lang="en">Client Project</span>
30
- </span>
31
- </nav>
32
- <!-- Language Select -->
33
- <select class="lang-select" id="lang-select" onchange="setLanguage(this.value); localStorage.setItem('doc-language', this.value);">
34
- <option value="fr">&#127467;&#127479; FR</option>
35
- <option value="en">&#127468;&#127463; EN</option>
36
- </select>
37
- <!-- Search -->
38
- <div class="header-search">
39
- <div class="search-input-wrapper">
40
- <span class="search-icon">&#128269;</span>
41
- <input type="text" id="search-input" class="search-input" placeholder="Rechercher..." data-placeholder-fr="Rechercher..." data-placeholder-en="Search..." autocomplete="off">
42
- <span class="search-shortcut">Ctrl+K</span>
43
- </div>
44
- <div id="search-results" class="search-results"></div>
45
- </div>
46
- </header>
47
-
48
- <!-- App Body -->
49
- <div class="app-body">
50
- <!-- Sidebar -->
51
- <aside class="sidebar">
52
- <button class="sidebar-toggle" title="Toggle sidebar">
53
- <span class="toggle-icon-collapse">&#171;</span>
54
- <span class="toggle-icon-expand">&#187;</span>
55
- </button>
56
-
57
- <nav class="sidebar-nav">
58
- <div class="nav-section">
59
- <div class="nav-section-title">
60
- <span data-lang="fr">Demarrage</span>
61
- <span data-lang="en">Getting Started</span>
62
- </div>
63
- <a href="index.html" class="nav-item">
64
- <span class="icon">&#127968;</span>
65
- <span class="nav-text" data-lang="fr">Accueil</span>
66
- <span class="nav-text" data-lang="en">Home</span>
67
- </a>
68
- <a href="installation.html" class="nav-item">
69
- <span class="icon">&#128230;</span>
70
- <span class="nav-text">Installation</span>
71
- </a>
72
- <div class="nav-item-with-toc">
73
- <a href="init.html" class="nav-item active">
74
- <span class="icon">&#128640;</span>
75
- <span class="nav-text" data-lang="fr">Projet Client</span>
76
- <span class="nav-text" data-lang="en">Client Project</span>
77
- </a>
78
- <nav class="sidebar-toc">
79
- <a href="#introduction" class="sidebar-toc-link">Introduction</a>
80
- <a href="#architecture" class="sidebar-toc-link">Architecture</a>
81
- <a href="#creation" class="sidebar-toc-link">
82
- <span data-lang="fr">Creer votre projet</span>
83
- <span data-lang="en">Create project</span>
84
- </a>
85
- <a href="#structure" class="sidebar-toc-link">Structure</a>
86
- <a href="#development" class="sidebar-toc-link">
87
- <span data-lang="fr">Cycle de dev</span>
88
- <span data-lang="en">Dev cycle</span>
89
- </a>
90
- <a href="#maintenance" class="sidebar-toc-link">Maintenance</a>
91
- <a href="#first-steps" class="sidebar-toc-link">
92
- <span data-lang="fr">Premiers pas</span>
93
- <span data-lang="en">First steps</span>
94
- </a>
95
- <a href="#wsl-ubuntu" class="sidebar-toc-link">
96
- <span data-lang="fr">WSL &amp; Ubuntu</span>
97
- <span data-lang="en">WSL &amp; Ubuntu</span>
98
- </a>
99
- </nav>
100
- </div>
101
- </div>
102
-
103
- <div class="nav-section">
104
- <div class="nav-section-title">Workflows</div>
105
- <a href="gitflow.html" class="nav-item">
106
- <span class="icon">&#128256;</span>
107
- <span class="nav-text">GitFlow</span>
108
- </a>
109
- <a href="efcore.html" class="nav-item">
110
- <span class="icon">&#128452;</span>
111
- <span class="nav-text">EF Core</span>
112
- </a>
113
- <a href="business-analyse.html" class="nav-item">
114
- <span class="icon">&#128202;</span>
115
- <span class="nav-text">Business Analyse</span>
116
- </a>
117
- <a href="ralph-loop.html" class="nav-item">
118
- <span class="icon">&#128260;</span>
119
- <span class="nav-text">Ralph Loop</span>
120
- </a>
121
- <a href="apex.html" class="nav-item">
122
- <span class="icon">&#9881;</span>
123
- <span class="nav-text">APEX</span>
124
- </a>
125
- </div>
126
-
127
- <div class="nav-section">
128
- <div class="nav-section-title">
129
- <span data-lang="fr">Outils</span>
130
- <span data-lang="en">Tools</span>
131
- </div>
132
- <a href="cli-commands.html" class="nav-item">
133
- <span class="icon">&#128187;</span>
134
- <span class="nav-text" data-lang="fr">CLI SmartStack</span>
135
- <span class="nav-text" data-lang="en">SmartStack CLI</span>
136
- </a>
137
- <a href="agents.html" class="nav-item">
138
- <span class="icon">&#129302;</span>
139
- <span class="nav-text">Agents</span>
140
- </a>
141
- <a href="commands.html" class="nav-item">
142
- <span class="icon">&#9889;</span>
143
- <span class="nav-text" data-lang="fr">Commandes Claude</span>
144
- <span class="nav-text" data-lang="en">Claude Commands</span>
145
- </a>
146
- <a href="hooks.html" class="nav-item">
147
- <span class="icon">&#128279;</span>
148
- <span class="nav-text">Hooks</span>
149
- </a>
150
- <a href="test-web.html" class="nav-item">
151
- <span class="icon">&#127760;</span>
152
- <span class="nav-text">Test Web</span>
153
- </a>
154
- </div>
155
- </nav>
156
-
157
- </aside>
158
-
159
- <!-- Main Content -->
160
- <main class="main-content">
161
- <div class="content-full">
162
-
163
- <!-- ============================================
164
- 1. INTRODUCTION
165
- ============================================ -->
166
- <section id="introduction">
167
- <h2>
168
- <span data-lang="fr">Qu'est-ce qu'un projet client SmartStack ?</span>
169
- <span data-lang="en">What is a SmartStack client project?</span>
170
- </h2>
171
-
172
- <p data-lang="fr">
173
- Un projet client SmartStack est une application metier construite sur les fondations du socle SmartStack. Le socle fournit tout ce qui est commun a une application professionnelle &mdash; authentification JWT, gestion des roles (RBAC via HasData), isolation multi-tenant, communication temps reel (SignalR), notifications et audit. Votre projet se concentre exclusivement sur <strong>votre logique metier</strong> : vos entites, vos services, vos pages.
174
- </p>
175
- <p data-lang="en">
176
- A SmartStack client project is a business application built on top of the SmartStack foundation. The foundation provides everything common to a professional application &mdash; JWT authentication, role management (RBAC via HasData), multi-tenant isolation, real-time communication (SignalR), notifications and auditing. Your project focuses exclusively on <strong>your business logic</strong>: your entities, your services, your pages.
177
- </p>
178
-
179
- <p data-lang="fr">
180
- La separation est stricte : vous n'avez jamais besoin de toucher au code du socle. Vous <em>etendez</em> SmartStack en ajoutant vos propres couches, et le socle evolue independamment via les mises a jour (<code>ss upgrade</code>).
181
- </p>
182
- <p data-lang="en">
183
- The separation is strict: you never need to touch the foundation code. You <em>extend</em> SmartStack by adding your own layers, and the foundation evolves independently through updates (<code>ss upgrade</code>).
184
- </p>
185
-
186
- <!-- SVG: Foundation Layers -->
187
- <div class="svg-diagram">
188
- <svg viewBox="0 0 780 255" xmlns="http://www.w3.org/2000/svg" style="font-family: 'Inter', system-ui, sans-serif; width: 100%; max-width: 780px; height: auto; display: block; margin: 1.5rem auto;">
189
- <defs>
190
- <marker id="arrowDown" markerWidth="8" markerHeight="8" refX="4" refY="4" orient="auto">
191
- <path d="M0,0 L8,4 L0,8 z" fill="#8a9bb0"/>
192
- </marker>
193
- </defs>
194
-
195
- <!-- Your Project (top) -->
196
- <rect x="20" y="8" width="740" height="92" rx="10" fill="#1e293b" stroke="#f97316" stroke-width="2"/>
197
- <text x="390" y="32" text-anchor="middle" fill="#f97316" font-weight="700" font-size="13" data-lang="fr">VOTRE CODE METIER</text>
198
- <text x="390" y="32" text-anchor="middle" fill="#f97316" font-weight="700" font-size="13" data-lang="en">YOUR BUSINESS CODE</text>
199
-
200
- <!-- Your Project pills -->
201
- <rect x="52" y="48" width="100" height="32" rx="6" fill="#334155"/>
202
- <text x="102" y="69" text-anchor="middle" fill="#c8d0dc" font-size="11" data-lang="fr">Entites</text>
203
- <text x="102" y="69" text-anchor="middle" fill="#c8d0dc" font-size="11" data-lang="en">Entities</text>
204
-
205
- <rect x="168" y="48" width="100" height="32" rx="6" fill="#334155"/>
206
- <text x="218" y="69" text-anchor="middle" fill="#c8d0dc" font-size="11">Services</text>
207
-
208
- <rect x="284" y="48" width="100" height="32" rx="6" fill="#334155"/>
209
- <text x="334" y="69" text-anchor="middle" fill="#c8d0dc" font-size="11">Controllers</text>
210
-
211
- <rect x="400" y="48" width="110" height="32" rx="6" fill="#334155"/>
212
- <text x="455" y="69" text-anchor="middle" fill="#c8d0dc" font-size="11">Pages React</text>
213
-
214
- <rect x="526" y="48" width="110" height="32" rx="6" fill="#334155"/>
215
- <text x="581" y="69" text-anchor="middle" fill="#c8d0dc" font-size="11" data-lang="fr">Vos tables</text>
216
- <text x="581" y="69" text-anchor="middle" fill="#c8d0dc" font-size="11" data-lang="en">Your tables</text>
217
-
218
- <rect x="652" y="48" width="80" height="32" rx="6" fill="#334155"/>
219
- <text x="692" y="69" text-anchor="middle" fill="#c8d0dc" font-size="11">Tests</text>
220
-
221
- <!-- Arrow: extends -->
222
- <line x1="390" y1="108" x2="390" y2="148" stroke="#8a9bb0" stroke-width="1.5" stroke-dasharray="5,4"/>
223
- <polygon points="384,144 390,155 396,144" fill="#8a9bb0"/>
224
- <text x="390" y="136" text-anchor="middle" fill="#8a9bb0" font-size="11" font-style="italic" data-lang="fr">etend / utilise</text>
225
- <text x="390" y="136" text-anchor="middle" fill="#8a9bb0" font-size="11" font-style="italic" data-lang="en">extends / uses</text>
226
-
227
- <!-- SmartStack (bottom) -->
228
- <rect x="20" y="158" width="740" height="88" rx="10" fill="#1e293b" stroke="#6366f1" stroke-width="2"/>
229
- <text x="390" y="180" text-anchor="middle" fill="#6366f1" font-weight="700" font-size="13">SMARTSTACK (SOCLE)</text>
230
-
231
- <!-- SmartStack pills -->
232
- <rect x="40" y="194" width="92" height="32" rx="6" fill="#312e81"/>
233
- <text x="86" y="215" text-anchor="middle" fill="#c4b5fd" font-size="11">Auth JWT</text>
234
-
235
- <rect x="146" y="194" width="100" height="32" rx="6" fill="#312e81"/>
236
- <text x="196" y="215" text-anchor="middle" fill="#c4b5fd" font-size="11">RBAC</text>
237
-
238
- <rect x="260" y="194" width="108" height="32" rx="6" fill="#312e81"/>
239
- <text x="314" y="215" text-anchor="middle" fill="#c4b5fd" font-size="11">Multi-tenant</text>
240
-
241
- <rect x="382" y="194" width="90" height="32" rx="6" fill="#312e81"/>
242
- <text x="427" y="215" text-anchor="middle" fill="#c4b5fd" font-size="11">SignalR</text>
243
-
244
- <rect x="486" y="194" width="115" height="32" rx="6" fill="#312e81"/>
245
- <text x="543" y="215" text-anchor="middle" fill="#c4b5fd" font-size="11">Notifications</text>
246
-
247
- <rect x="615" y="194" width="80" height="32" rx="6" fill="#312e81"/>
248
- <text x="655" y="215" text-anchor="middle" fill="#c4b5fd" font-size="11">Audit</text>
249
- </svg>
250
- </div>
251
-
252
- <div class="alert alert-info">
253
- <span class="alert-icon">&#128161;</span>
254
- <div class="alert-content">
255
- <h5 data-lang="fr">Principe fondamental</h5>
256
- <h5 data-lang="en">Core principle</h5>
257
- <p data-lang="fr">
258
- Vous ne modifiez jamais les internes de SmartStack. Vous etendez le socle en ajoutant vos entites dans le Domain, vos services dans Application, vos tables dans votre propre DbContext. Quand SmartStack evolue, un simple <code>ss upgrade</code> met a jour les fondations sans toucher a votre code.
259
- </p>
260
- <p data-lang="en">
261
- You never modify SmartStack internals. You extend the foundation by adding your entities in Domain, your services in Application, your tables in your own DbContext. When SmartStack evolves, a simple <code>ss upgrade</code> updates the foundations without touching your code.
262
- </p>
263
- </div>
264
- </div>
265
- </section>
266
-
267
- <!-- ============================================
268
- 2. ARCHITECTURE
269
- ============================================ -->
270
- <section id="architecture">
271
- <h2>Architecture</h2>
272
-
273
- <h3>Clean Architecture</h3>
274
-
275
- <p data-lang="fr">
276
- Votre projet suit le pattern <strong>Clean Architecture</strong> en 4 couches. Le principe fondamental : les dependances pointent toujours vers le centre. Le Domain ne connait rien du monde exterieur. L'Application orchestre sans savoir comment les donnees sont stockees. L'Infrastructure implemente les details techniques. L'Api expose les endpoints.
277
- </p>
278
- <p data-lang="en">
279
- Your project follows the <strong>Clean Architecture</strong> pattern with 4 layers. The core principle: dependencies always point inward. Domain knows nothing about the outside world. Application orchestrates without knowing how data is stored. Infrastructure implements technical details. Api exposes the endpoints.
280
- </p>
281
-
282
- <!-- SVG: Clean Architecture -->
283
- <div class="svg-diagram">
284
- <svg viewBox="0 0 700 300" xmlns="http://www.w3.org/2000/svg" style="font-family: 'Inter', system-ui, sans-serif; width: 100%; max-width: 700px; height: auto; display: block; margin: 1.5rem auto;">
285
- <!-- Api (outermost) -->
286
- <rect x="8" y="8" width="684" height="284" rx="12" fill="none" stroke="#f97316" stroke-width="2.5" stroke-opacity="0.7"/>
287
- <text x="24" y="32" fill="#f97316" font-weight="700" font-size="13">MyApp.Api</text>
288
- <text x="680" y="32" text-anchor="end" fill="#8a9bb0" font-size="10.5" data-lang="fr">Controllers, Swagger, Program.cs</text>
289
- <text x="680" y="32" text-anchor="end" fill="#8a9bb0" font-size="10.5" data-lang="en">Controllers, Swagger, Program.cs</text>
290
-
291
- <!-- Infrastructure -->
292
- <rect x="32" y="52" width="636" height="228" rx="10" fill="none" stroke="#06b6d4" stroke-width="2.5" stroke-opacity="0.7"/>
293
- <text x="48" y="74" fill="#06b6d4" font-weight="700" font-size="13">MyApp.Infrastructure</text>
294
- <text x="656" y="74" text-anchor="end" fill="#8a9bb0" font-size="10.5">ExtensionsDbContext, Repositories, Migrations</text>
295
-
296
- <!-- Application -->
297
- <rect x="56" y="96" width="588" height="172" rx="10" fill="none" stroke="#3b82f6" stroke-width="2.5" stroke-opacity="0.7"/>
298
- <text x="72" y="118" fill="#3b82f6" font-weight="700" font-size="13">MyApp.Application</text>
299
- <text x="632" y="118" text-anchor="end" fill="#8a9bb0" font-size="10.5">Services, DTOs, IExtensionsDbContext</text>
300
-
301
- <!-- Domain (innermost) -->
302
- <rect x="80" y="140" width="540" height="116" rx="10" fill="#1e1b4b" fill-opacity="0.4" stroke="#6366f1" stroke-width="2.5"/>
303
- <text x="96" y="164" fill="#6366f1" font-weight="700" font-size="13">MyApp.Domain</text>
304
- <text x="608" y="164" text-anchor="end" fill="#8a9bb0" font-size="10.5" data-lang="fr">Entites, Interfaces, Regles metier</text>
305
- <text x="608" y="164" text-anchor="end" fill="#8a9bb0" font-size="10.5" data-lang="en">Entities, Interfaces, Business Rules</text>
306
-
307
- <!-- Domain content -->
308
- <text x="100" y="198" fill="#c8d0dc" font-size="11" data-lang="fr">Vos entites metier : Product, Order, Customer...</text>
309
- <text x="100" y="198" fill="#c8d0dc" font-size="11" data-lang="en">Your business entities: Product, Order, Customer...</text>
310
- <text x="100" y="220" fill="#8a9bb0" font-size="10" data-lang="fr">Heritent des classes de base SmartStack (BaseEntity, IAuditable)</text>
311
- <text x="100" y="220" fill="#8a9bb0" font-size="10" data-lang="en">Inherit from SmartStack base classes (BaseEntity, IAuditable)</text>
312
-
313
- <!-- Arrow: dependencies -->
314
- <line x1="662" y1="272" x2="662" y2="160" stroke="#8a9bb0" stroke-width="1.5" marker-end="url(#arrowDown)"/>
315
- <text x="660" y="286" text-anchor="middle" fill="#8a9bb0" font-size="10" data-lang="fr">Dependances</text>
316
- <text x="660" y="286" text-anchor="middle" fill="#8a9bb0" font-size="10" data-lang="en">Dependencies</text>
317
- </svg>
318
- </div>
319
-
320
- <!-- Layer explanations as cards -->
321
- <div class="card-grid">
322
- <div class="card">
323
- <div class="card-header">
324
- <div class="card-icon" style="background: #6366f1;">D</div>
325
- <div>
326
- <div class="card-title">Domain</div>
327
- <div class="card-subtitle" data-lang="fr">Coeur metier</div>
328
- <div class="card-subtitle" data-lang="en">Business core</div>
329
- </div>
330
- </div>
331
- <div class="card-body">
332
- <p data-lang="fr">
333
- C'est ici que vivent vos entites metier (<code>Product</code>, <code>Order</code>, <code>Customer</code>...), vos interfaces et vos regles de validation. Cette couche n'a aucune dependance sur un framework &mdash; c'est du C# pur. Le package SmartStack fournit les classes de base (<code>BaseEntity</code>, <code>IAuditable</code>...).
334
- </p>
335
- <p data-lang="en">
336
- This is where your business entities live (<code>Product</code>, <code>Order</code>, <code>Customer</code>...), your interfaces and validation rules. This layer has no dependency on any framework &mdash; it's pure C#. The SmartStack package provides base classes (<code>BaseEntity</code>, <code>IAuditable</code>...).
337
- </p>
338
- </div>
339
- </div>
340
-
341
- <div class="card">
342
- <div class="card-header">
343
- <div class="card-icon" style="background: #3b82f6;">A</div>
344
- <div>
345
- <div class="card-title">Application</div>
346
- <div class="card-subtitle" data-lang="fr">Orchestration</div>
347
- <div class="card-subtitle" data-lang="en">Orchestration</div>
348
- </div>
349
- </div>
350
- <div class="card-body">
351
- <p data-lang="fr">
352
- La couche d'orchestration. Vos services metier, vos DTOs, vos interfaces de repository. C'est aussi ici que se declare <code>IExtensionsDbContext</code> &mdash; le contrat que l'Infrastructure doit implementer. Aucune reference a EF Core ou SQL Server ici.
353
- </p>
354
- <p data-lang="en">
355
- The orchestration layer. Your business services, DTOs, repository interfaces. This is also where <code>IExtensionsDbContext</code> is declared &mdash; the contract that Infrastructure must implement. No reference to EF Core or SQL Server here.
356
- </p>
357
- </div>
358
- </div>
359
-
360
- <div class="card">
361
- <div class="card-header">
362
- <div class="card-icon" style="background: #06b6d4;">I</div>
363
- <div>
364
- <div class="card-title">Infrastructure</div>
365
- <div class="card-subtitle" data-lang="fr">Acces aux donnees</div>
366
- <div class="card-subtitle" data-lang="en">Data access</div>
367
- </div>
368
- </div>
369
- <div class="card-body">
370
- <p data-lang="fr">
371
- L'implementation technique. <code>ExtensionsDbContext</code> (votre DbContext EF Core), les repositories, les configurations d'entites (<code>EntityTypeConfiguration</code>). C'est la seule couche qui sait <em>comment</em> vos donnees sont stockees. Les migrations EF Core vivent ici.
372
- </p>
373
- <p data-lang="en">
374
- The technical implementation. <code>ExtensionsDbContext</code> (your EF Core DbContext), repositories, entity configurations (<code>EntityTypeConfiguration</code>). This is the only layer that knows <em>how</em> your data is stored. EF Core migrations live here.
375
- </p>
376
- </div>
377
- </div>
378
-
379
- <div class="card">
380
- <div class="card-header">
381
- <div class="card-icon" style="background: #f97316;">P</div>
382
- <div>
383
- <div class="card-title">Api</div>
384
- <div class="card-subtitle" data-lang="fr">Point d'entree HTTP</div>
385
- <div class="card-subtitle" data-lang="en">HTTP entry point</div>
386
- </div>
387
- </div>
388
- <div class="card-body">
389
- <p data-lang="fr">
390
- Le point d'entree de votre application. Vos controllers REST, la configuration Swagger, <code>Program.cs</code> avec l'injection de dependances. C'est la couche la plus externe &mdash; elle orchestre le demarrage et expose vos endpoints.
391
- </p>
392
- <p data-lang="en">
393
- Your application's entry point. Your REST controllers, Swagger configuration, <code>Program.cs</code> with dependency injection. This is the outermost layer &mdash; it orchestrates startup and exposes your endpoints.
394
- </p>
395
- </div>
396
- </div>
397
- </div>
398
-
399
- <!-- Dual-DbContext -->
400
- <h3>Dual-DbContext</h3>
401
-
402
- <p data-lang="fr">
403
- SmartStack utilise une architecture <strong>Dual-DbContext</strong> qui separe strictement les donnees du socle de vos donnees metier. Le socle gere ses propres tables (Users, Roles, Tenants, Permissions, AuditLogs) via son contexte interne. Votre projet utilise <code>ExtensionsDbContext</code> pour ses propres tables.
404
- </p>
405
- <p data-lang="en">
406
- SmartStack uses a <strong>Dual-DbContext</strong> architecture that strictly separates foundation data from your business data. The foundation manages its own tables (Users, Roles, Tenants, Permissions, AuditLogs) through its internal context. Your project uses <code>ExtensionsDbContext</code> for its own tables.
407
- </p>
408
-
409
- <!-- SVG: Dual-DbContext -->
410
- <div class="svg-diagram">
411
- <svg viewBox="0 0 780 290" xmlns="http://www.w3.org/2000/svg" style="font-family: 'Inter', system-ui, sans-serif; width: 100%; max-width: 780px; height: auto; display: block; margin: 1.5rem auto;">
412
- <!-- SmartStack Context (left) -->
413
- <rect x="20" y="10" width="340" height="200" rx="10" fill="#1e293b" stroke="#6366f1" stroke-width="2"/>
414
- <text x="190" y="36" text-anchor="middle" fill="#6366f1" font-weight="700" font-size="13">SmartStack Context</text>
415
- <text x="190" y="54" text-anchor="middle" fill="#8a9bb0" font-size="10.5" font-style="italic" data-lang="fr">Gere par le socle</text>
416
- <text x="190" y="54" text-anchor="middle" fill="#8a9bb0" font-size="10.5" font-style="italic" data-lang="en">Managed by foundation</text>
417
-
418
- <!-- SmartStack tables -->
419
- <rect x="45" y="70" width="290" height="28" rx="4" fill="#334155"/>
420
- <text x="60" y="89" fill="#c4b5fd" font-size="11" font-family="monospace">&#9500; Users</text>
421
- <rect x="45" y="102" width="290" height="28" rx="4" fill="#334155"/>
422
- <text x="60" y="121" fill="#c4b5fd" font-size="11" font-family="monospace">&#9500; Roles / Permissions</text>
423
- <rect x="45" y="134" width="290" height="28" rx="4" fill="#334155"/>
424
- <text x="60" y="153" fill="#c4b5fd" font-size="11" font-family="monospace">&#9500; Tenants</text>
425
- <rect x="45" y="166" width="290" height="28" rx="4" fill="#334155"/>
426
- <text x="60" y="185" fill="#c4b5fd" font-size="11" font-family="monospace">&#9492; AuditLogs</text>
427
-
428
- <!-- Separator -->
429
- <line x1="390" y1="20" x2="390" y2="200" stroke="#475569" stroke-width="2" stroke-dasharray="6,4"/>
430
- <rect x="370" y="92" width="40" height="28" rx="4" fill="#0f172a"/>
431
- <text x="390" y="111" text-anchor="middle" fill="#eab308" font-size="10" font-weight="600">&#9876;</text>
432
-
433
- <!-- Extensions Context (right) -->
434
- <rect x="420" y="10" width="340" height="200" rx="10" fill="#1e293b" stroke="#f97316" stroke-width="2"/>
435
- <text x="590" y="36" text-anchor="middle" fill="#f97316" font-weight="700" font-size="13">Extensions Context</text>
436
- <text x="590" y="54" text-anchor="middle" fill="#8a9bb0" font-size="10.5" font-style="italic" data-lang="fr">Gere par vous</text>
437
- <text x="590" y="54" text-anchor="middle" fill="#8a9bb0" font-size="10.5" font-style="italic" data-lang="en">Managed by you</text>
438
-
439
- <!-- Your tables -->
440
- <rect x="445" y="70" width="290" height="28" rx="4" fill="#334155"/>
441
- <text x="460" y="89" fill="#fdba74" font-size="11" font-family="monospace">&#9500; Products</text>
442
- <rect x="445" y="102" width="290" height="28" rx="4" fill="#334155"/>
443
- <text x="460" y="121" fill="#fdba74" font-size="11" font-family="monospace">&#9500; Orders</text>
444
- <rect x="445" y="134" width="290" height="28" rx="4" fill="#334155"/>
445
- <text x="460" y="153" fill="#fdba74" font-size="11" font-family="monospace">&#9500; Categories</text>
446
- <rect x="445" y="166" width="290" height="28" rx="4" fill="#334155"/>
447
- <text x="460" y="185" fill="#fdba74" font-size="11" font-family="monospace">&#9492; ...</text>
448
-
449
- <!-- Database -->
450
- <line x1="190" y1="210" x2="190" y2="240" stroke="#6366f1" stroke-width="1.5" stroke-opacity="0.6"/>
451
- <line x1="590" y1="210" x2="590" y2="240" stroke="#f97316" stroke-width="1.5" stroke-opacity="0.6"/>
452
- <line x1="190" y1="240" x2="590" y2="240" stroke="#475569" stroke-width="1.5"/>
453
-
454
- <!-- DB icon -->
455
- <ellipse cx="390" cy="258" rx="60" ry="10" fill="none" stroke="#8a9bb0" stroke-width="1.5"/>
456
- <rect x="330" y="258" width="120" height="18" fill="#1e293b" stroke="#8a9bb0" stroke-width="1.5"/>
457
- <ellipse cx="390" cy="276" rx="60" ry="10" fill="none" stroke="#8a9bb0" stroke-width="1.5"/>
458
- <line x1="390" y1="240" x2="390" y2="248" stroke="#8a9bb0" stroke-width="1.5"/>
459
- <text x="390" y="271" text-anchor="middle" fill="#c8d0dc" font-size="10">SQL Server</text>
460
- </svg>
461
- </div>
462
-
463
- <p data-lang="fr">
464
- Cette separation a trois avantages concrets :
465
- </p>
466
- <p data-lang="en">
467
- This separation has three concrete advantages:
468
- </p>
469
- <ul>
470
- <li data-lang="fr">Vos migrations n'interferent <strong>jamais</strong> avec les tables du socle</li>
471
- <li data-lang="en">Your migrations <strong>never</strong> interfere with foundation tables</li>
472
- <li data-lang="fr">Les mises a jour SmartStack (<code>ss upgrade</code>) n'impactent pas votre schema</li>
473
- <li data-lang="en">SmartStack updates (<code>ss upgrade</code>) don't impact your schema</li>
474
- <li data-lang="fr">Vous visualisez clairement ce qui vous appartient vs. ce qui est gere par le framework</li>
475
- <li data-lang="en">You can clearly see what belongs to you vs. what is managed by the framework</li>
476
- </ul>
477
-
478
- <div class="alert alert-info">
479
- <span class="alert-icon">&#128218;</span>
480
- <div class="alert-content">
481
- <p data-lang="fr">Toutes les operations sur vos migrations passent par les skills <code>/efcore</code>. Le MCP valide les noms, detecte les conflits entre branches et assure la coherence. Voir la page <a href="efcore.html">EF Core</a> pour le workflow complet.</p>
482
- <p data-lang="en">All operations on your migrations go through <code>/efcore</code> skills. The MCP validates names, detects conflicts between branches and ensures consistency. See the <a href="efcore.html">EF Core</a> page for the complete workflow.</p>
483
- </div>
484
- </div>
485
- </section>
486
-
487
- <!-- ============================================
488
- 3. CREER VOTRE PROJET
489
- ============================================ -->
490
- <section id="creation">
491
- <h2>
492
- <span data-lang="fr">Creer votre projet</span>
493
- <span data-lang="en">Create your project</span>
494
- </h2>
495
-
496
- <p data-lang="fr">
497
- La commande <code>ss init</code> cree un projet complet et pret a developper. Voici ce qui se passe etape par etape :
498
- </p>
499
- <p data-lang="en">
500
- The <code>ss init</code> command creates a complete, ready-to-develop project. Here's what happens step by step:
501
- </p>
502
-
503
- <ol class="steps-list">
504
- <li>
505
- <div class="step-content">
506
- <h5 data-lang="fr">Choisir le nom du projet</h5>
507
- <h5 data-lang="en">Choose the project name</h5>
508
- <p data-lang="fr">Le nom devient le namespace C# racine de toute votre application : <code>MyApp.Domain</code>, <code>MyApp.Application</code>, <code>MyApp.Infrastructure</code>, <code>MyApp.Api</code>. Choisissez un identifiant C# valide (PascalCase, sans espaces ni tirets).</p>
509
- <p data-lang="en">The name becomes the root C# namespace for your entire application: <code>MyApp.Domain</code>, <code>MyApp.Application</code>, <code>MyApp.Infrastructure</code>, <code>MyApp.Api</code>. Choose a valid C# identifier (PascalCase, no spaces or dashes).</p>
510
- </div>
511
- </li>
512
- <li>
513
- <div class="step-content">
514
- <h5 data-lang="fr">Le wizard vous guide</h5>
515
- <h5 data-lang="en">The wizard guides you</h5>
516
- <p data-lang="fr">En mode interactif, le wizard pose deux questions : <strong>Multi-tenant ?</strong> (activez si votre application doit isoler les donnees par client/organisation) et <strong>Azure AD B2C ?</strong> (si l'authentification passe par Azure B2C, necessite multi-tenant). En mode rapide (<code>-y</code>), les valeurs par defaut sont utilisees (single-tenant, pas de B2C).</p>
517
- <p data-lang="en">In interactive mode, the wizard asks two questions: <strong>Multi-tenant?</strong> (enable if your app needs to isolate data per client/organization) and <strong>Azure AD B2C?</strong> (if authentication goes through Azure B2C, requires multi-tenant). In quick mode (<code>-y</code>), defaults are used (single-tenant, no B2C).</p>
518
- </div>
519
- </li>
520
- <li>
521
- <div class="step-content">
522
- <h5 data-lang="fr">La commande genere tout</h5>
523
- <h5 data-lang="en">The command generates everything</h5>
524
- <p data-lang="fr">Solution .NET 4 projets Clean Architecture, frontend React/Vite/Tailwind preconfigure, fichiers VS Code (debug, tasks, extensions recommandees), <code>CLAUDE.md</code> pour Claude Code, <code>.smartstack/config.json</code> qui identifie votre projet, et <code>Directory.Build.props</code> pour le TargetFramework partage.</p>
525
- <p data-lang="en">.NET solution with 4 Clean Architecture projects, preconfigured React/Vite/Tailwind frontend, VS Code files (debug, tasks, recommended extensions), <code>CLAUDE.md</code> for Claude Code, <code>.smartstack/config.json</code> identifying your project, and <code>Directory.Build.props</code> for the shared TargetFramework.</p>
526
- </div>
527
- </li>
528
- </ol>
529
-
530
- <div class="code-block">
531
- <button class="copy-btn">Copy</button>
532
- <pre><code><span class="code-comment"># Creer un projet avec le wizard interactif</span>
533
- <span class="code-cmd">ss init</span> <span class="code-arg">MyApp</span>
534
-
535
- <span class="code-comment"># Mode rapide : valeurs par defaut (single-tenant, pas de B2C)</span>
536
- <span class="code-cmd">ss init</span> <span class="code-arg">MyApp</span> <span class="code-flag">-y</span>
537
-
538
- <span class="code-comment"># Multi-tenant avec Azure AD B2C</span>
539
- <span class="code-cmd">ss init</span> <span class="code-arg">MyApp</span> <span class="code-flag">--multi-tenant --b2c</span>
540
-
541
- <span class="code-comment"># Previsualiser sans rien creer</span>
542
- <span class="code-cmd">ss init</span> <span class="code-arg">MyApp</span> <span class="code-flag">--dry-run</span></code></pre>
543
- </div>
544
-
545
- <div class="alert alert-warning">
546
- <span class="alert-icon">&#9888;&#65039;</span>
547
- <div class="alert-content">
548
- <p data-lang="fr"><code>ss init</code> <strong>sans nom de projet</strong> fonctionne aussi &mdash; il configure SmartStack sur un projet .NET existant (CLAUDE.md, hooks, verification MCP) au lieu d'en creer un nouveau. Utile pour integrer SmartStack a un projet deja en cours.</p>
549
- <p data-lang="en"><code>ss init</code> <strong>without a project name</strong> also works &mdash; it configures SmartStack on an existing .NET project (CLAUDE.md, hooks, MCP verification) instead of creating a new one. Useful for integrating SmartStack into an ongoing project.</p>
550
- </div>
551
- </div>
552
- </section>
553
-
554
- <!-- ============================================
555
- 4. STRUCTURE DU PROJET
556
- ============================================ -->
557
- <section id="structure">
558
- <h2>
559
- <span data-lang="fr">Structure du projet</span>
560
- <span data-lang="en">Project structure</span>
561
- </h2>
562
-
563
- <p data-lang="fr">Voici la structure generee par <code>ss init MyApp</code>, annotee avec le role de chaque element :</p>
564
- <p data-lang="en">Here is the structure generated by <code>ss init MyApp</code>, annotated with the role of each element:</p>
565
-
566
- <div class="code-block">
567
- <pre><code>MyApp/
568
- <span class="code-comment">&#9500;&#9472;&#9472; src/ &#8592; Backend .NET Clean Architecture</span>
569
- &#9474; &#9500;&#9472;&#9472; MyApp.Domain/ <span class="code-comment">&#8592; Entites, interfaces, regles metier</span>
570
- &#9474; &#9500;&#9472;&#9472; MyApp.Application/ <span class="code-comment">&#8592; Services, DTOs, IExtensionsDbContext</span>
571
- &#9474; &#9500;&#9472;&#9472; MyApp.Infrastructure/ <span class="code-comment">&#8592; ExtensionsDbContext, Repositories, Migrations</span>
572
- &#9474; &#9492;&#9472;&#9472; MyApp.Api/ <span class="code-comment">&#8592; Controllers, Swagger, Program.cs</span>
573
- <span class="code-comment">&#9500;&#9472;&#9472; web/ &#8592; Frontend</span>
574
- &#9474; &#9492;&#9472;&#9472; myapp-web/ <span class="code-comment">&#8592; React + Vite + Tailwind</span>
575
- <span class="code-comment">&#9500;&#9472;&#9472; tests/ &#8592; Tests unitaires et integration</span>
576
- &#9500;&#9472;&#9472; .smartstack/config.json <span class="code-comment">&#8592; Identite du projet SmartStack</span>
577
- &#9500;&#9472;&#9472; CLAUDE.md <span class="code-comment">&#8592; Contexte IA pour Claude Code</span>
578
- &#9500;&#9472;&#9472; Directory.Build.props <span class="code-comment">&#8592; TargetFramework partage (net10.0)</span>
579
- &#9500;&#9472;&#9472; .vscode/ <span class="code-comment">&#8592; Debug, tasks, extensions recommandees</span>
580
- &#9500;&#9472;&#9472; .ralph/ <span class="code-comment">&#8592; Configuration Ralph (IA)</span>
581
- &#9492;&#9472;&#9472; MyApp.sln <span class="code-comment">&#8592; Solution Visual Studio</span></code></pre>
582
- </div>
583
-
584
- <h3 data-lang="fr">Fichiers cles</h3>
585
- <h3 data-lang="en">Key files</h3>
586
-
587
- <div class="card-grid">
588
- <div class="card">
589
- <div class="card-header">
590
- <div class="card-icon" style="background: var(--primary);">&#9881;</div>
591
- <div>
592
- <div class="card-title">.smartstack/config.json</div>
593
- <div class="card-subtitle" data-lang="fr">Identite du projet</div>
594
- <div class="card-subtitle" data-lang="en">Project identity</div>
595
- </div>
596
- </div>
597
- <div class="card-body">
598
- <p data-lang="fr">Contient le type de projet (client vs socle), le nom du DbContext, le namespace racine et la version SmartStack installee. Toutes les commandes CLI (<code>ss upgrade</code>, <code>ss doctor</code>) lisent ce fichier pour savoir comment traiter votre projet. Ne le modifiez pas manuellement.</p>
599
- <p data-lang="en">Contains the project type (client vs foundation), DbContext name, root namespace and installed SmartStack version. All CLI commands (<code>ss upgrade</code>, <code>ss doctor</code>) read this file to know how to handle your project. Do not modify it manually.</p>
600
- </div>
601
- </div>
602
-
603
- <div class="card">
604
- <div class="card-header">
605
- <div class="card-icon" style="background: var(--secondary);">&#128221;</div>
606
- <div>
607
- <div class="card-title">CLAUDE.md</div>
608
- <div class="card-subtitle" data-lang="fr">Contexte IA</div>
609
- <div class="card-subtitle" data-lang="en">AI context</div>
610
- </div>
611
- </div>
612
- <div class="card-body">
613
- <p data-lang="fr">Le contexte que Claude Code utilise pour comprendre votre projet. Genere automatiquement avec les conventions SmartStack, la structure du projet et les regles a respecter. Vous pouvez l'enrichir avec vos propres conventions et regles metier.</p>
614
- <p data-lang="en">The context Claude Code uses to understand your project. Auto-generated with SmartStack conventions, project structure and rules to follow. You can enrich it with your own conventions and business rules.</p>
615
- </div>
616
- </div>
617
-
618
- <div class="card">
619
- <div class="card-header">
620
- <div class="card-icon" style="background: var(--accent);">&#128268;</div>
621
- <div>
622
- <div class="card-title">appsettings.json</div>
623
- <div class="card-subtitle" data-lang="fr">Configuration API</div>
624
- <div class="card-subtitle" data-lang="en">API configuration</div>
625
- </div>
626
- </div>
627
- <div class="card-body">
628
- <p data-lang="fr">Dans <code>src/MyApp.Api/</code>. C'est ici que vous definissez la connection string SQL Server, les parametres JWT, les URLs autorisees (CORS), et la configuration multi-tenant si activee. C'est le premier fichier a configurer apres <code>ss init</code>.</p>
629
- <p data-lang="en">In <code>src/MyApp.Api/</code>. This is where you define the SQL Server connection string, JWT settings, allowed URLs (CORS), and multi-tenant configuration if enabled. It's the first file to configure after <code>ss init</code>.</p>
630
- </div>
631
- </div>
632
-
633
- <div class="card">
634
- <div class="card-header">
635
- <div class="card-icon" style="background: var(--success);">&#9878;</div>
636
- <div>
637
- <div class="card-title">Directory.Build.props</div>
638
- <div class="card-subtitle" data-lang="fr">Framework partage</div>
639
- <div class="card-subtitle" data-lang="en">Shared framework</div>
640
- </div>
641
- </div>
642
- <div class="card-body">
643
- <p data-lang="fr">Centralise le <code>TargetFramework</code> (net10.0) pour tous les projets .NET. Au lieu de definir la version dans chaque <code>.csproj</code>, ce fichier unique simplifie les futures mises a jour de framework.</p>
644
- <p data-lang="en">Centralizes the <code>TargetFramework</code> (net10.0) for all .NET projects. Instead of defining the version in each <code>.csproj</code>, this single file simplifies future framework upgrades.</p>
645
- </div>
646
- </div>
647
- </div>
648
-
649
- <!-- Frontend -->
650
- <h3>Frontend &mdash; React + Vite + Tailwind</h3>
651
-
652
- <p data-lang="fr">
653
- Le frontend est une application React moderne qui s'integre au socle SmartStack via deux mecanismes :
654
- </p>
655
- <p data-lang="en">
656
- The frontend is a modern React application that integrates with the SmartStack foundation through two mechanisms:
657
- </p>
658
-
659
- <ul>
660
- <li data-lang="fr"><strong><code>SmartStackProvider</code></strong> &mdash; wrape votre application et fournit l'authentification, les roles, le theming et les notifications. Vous n'avez rien a configurer, c'est deja en place dans <code>main.tsx</code>.</li>
661
- <li data-lang="en"><strong><code>SmartStackProvider</code></strong> &mdash; wraps your application and provides authentication, roles, theming and notifications. You don't need to configure anything, it's already set up in <code>main.tsx</code>.</li>
662
- <li data-lang="fr"><strong><code>mergeRoutes()</code></strong> &mdash; fusionne vos routes metier avec les routes SmartStack (login, profil, admin, gestion des roles...). Vous developpez vos pages dans <code>src/pages/</code> et les declarez dans <code>App.tsx</code>.</li>
663
- <li data-lang="en"><strong><code>mergeRoutes()</code></strong> &mdash; merges your business routes with SmartStack routes (login, profile, admin, role management...). You develop your pages in <code>src/pages/</code> and declare them in <code>App.tsx</code>.</li>
664
- </ul>
665
- </section>
666
-
667
- <!-- ============================================
668
- 5. CYCLE DE DEVELOPPEMENT
669
- ============================================ -->
670
- <section id="development">
671
- <h2>
672
- <span data-lang="fr">Cycle de developpement</span>
673
- <span data-lang="en">Development cycle</span>
674
- </h2>
675
-
676
- <p data-lang="fr">
677
- Voici le flux typique quand vous ajoutez une fonctionnalite a votre projet. Chaque etape a un skill ou un outil dedie qui vous guide :
678
- </p>
679
- <p data-lang="en">
680
- Here is the typical flow when adding a feature to your project. Each step has a dedicated skill or tool to guide you:
681
- </p>
682
-
683
- <!-- SVG: Development Pipeline -->
684
- <div class="svg-diagram">
685
- <svg viewBox="0 0 780 170" xmlns="http://www.w3.org/2000/svg" style="font-family: 'Inter', system-ui, sans-serif; width: 100%; max-width: 780px; height: auto; display: block; margin: 1.5rem auto;">
686
- <defs>
687
- <marker id="arrowRight" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto">
688
- <path d="M0,0 L8,4 L0,8 z" fill="#475569"/>
689
- </marker>
690
- </defs>
691
-
692
- <!-- Step 1: Entity -->
693
- <rect x="4" y="12" width="108" height="54" rx="8" fill="#1e293b" stroke="#6366f1" stroke-width="2"/>
694
- <text x="58" y="36" text-anchor="middle" fill="#c8d0dc" font-weight="600" font-size="11.5" data-lang="fr">1. Entite</text>
695
- <text x="58" y="36" text-anchor="middle" fill="#c8d0dc" font-weight="600" font-size="11.5" data-lang="en">1. Entity</text>
696
- <text x="58" y="54" text-anchor="middle" fill="#6366f1" font-size="9.5">Domain</text>
697
-
698
- <!-- Arrow 1→2 -->
699
- <line x1="116" y1="39" x2="132" y2="39" stroke="#475569" stroke-width="1.5" marker-end="url(#arrowRight)"/>
700
-
701
- <!-- Step 2: DbContext -->
702
- <rect x="136" y="12" width="108" height="54" rx="8" fill="#1e293b" stroke="#06b6d4" stroke-width="2"/>
703
- <text x="190" y="36" text-anchor="middle" fill="#c8d0dc" font-weight="600" font-size="11.5">2. DbContext</text>
704
- <text x="190" y="54" text-anchor="middle" fill="#06b6d4" font-size="9.5">Infrastructure</text>
705
-
706
- <!-- Arrow 2→3 -->
707
- <line x1="248" y1="39" x2="264" y2="39" stroke="#475569" stroke-width="1.5" marker-end="url(#arrowRight)"/>
708
-
709
- <!-- Step 3: Migration -->
710
- <rect x="268" y="12" width="108" height="54" rx="8" fill="#1e293b" stroke="#22c55e" stroke-width="2"/>
711
- <text x="322" y="36" text-anchor="middle" fill="#c8d0dc" font-weight="600" font-size="11.5">3. Migration</text>
712
- <text x="322" y="54" text-anchor="middle" fill="#22c55e" font-size="9.5">/efcore</text>
713
-
714
- <!-- Arrow 3→4 -->
715
- <line x1="380" y1="39" x2="396" y2="39" stroke="#475569" stroke-width="1.5" marker-end="url(#arrowRight)"/>
716
-
717
- <!-- Step 4: Service -->
718
- <rect x="400" y="12" width="108" height="54" rx="8" fill="#1e293b" stroke="#3b82f6" stroke-width="2"/>
719
- <text x="454" y="36" text-anchor="middle" fill="#c8d0dc" font-weight="600" font-size="11.5">4. Service</text>
720
- <text x="454" y="54" text-anchor="middle" fill="#3b82f6" font-size="9.5">Application</text>
721
-
722
- <!-- Arrow 4→5 -->
723
- <line x1="512" y1="39" x2="528" y2="39" stroke="#475569" stroke-width="1.5" marker-end="url(#arrowRight)"/>
724
-
725
- <!-- Step 5: Controller -->
726
- <rect x="532" y="12" width="108" height="54" rx="8" fill="#1e293b" stroke="#f97316" stroke-width="2"/>
727
- <text x="586" y="36" text-anchor="middle" fill="#c8d0dc" font-weight="600" font-size="11.5">5. Controller</text>
728
- <text x="586" y="54" text-anchor="middle" fill="#f97316" font-size="9.5">Api</text>
729
-
730
- <!-- Arrow 5→6 -->
731
- <line x1="644" y1="39" x2="660" y2="39" stroke="#475569" stroke-width="1.5" marker-end="url(#arrowRight)"/>
732
-
733
- <!-- Step 6: Page -->
734
- <rect x="664" y="12" width="108" height="54" rx="8" fill="#1e293b" stroke="#06b6d4" stroke-width="2"/>
735
- <text x="718" y="36" text-anchor="middle" fill="#c8d0dc" font-weight="600" font-size="11.5">6. Page</text>
736
- <text x="718" y="54" text-anchor="middle" fill="#06b6d4" font-size="9.5">React</text>
737
-
738
- <!-- Bottom: skill labels -->
739
- <text x="58" y="90" text-anchor="middle" fill="#8a9bb0" font-size="9">Product.cs</text>
740
- <text x="190" y="90" text-anchor="middle" fill="#8a9bb0" font-size="9" data-lang="fr">DbSet&lt;Product&gt;</text>
741
- <text x="190" y="90" text-anchor="middle" fill="#8a9bb0" font-size="9" data-lang="en">DbSet&lt;Product&gt;</text>
742
- <text x="322" y="90" text-anchor="middle" fill="#22c55e" font-size="9" font-weight="600">/efcore migration</text>
743
- <text x="322" y="104" text-anchor="middle" fill="#22c55e" font-size="9" font-weight="600">/efcore db-deploy</text>
744
- <text x="454" y="90" text-anchor="middle" fill="#8a9bb0" font-size="9">ProductService</text>
745
- <text x="586" y="90" text-anchor="middle" fill="#8a9bb0" font-size="9">ProductController</text>
746
- <text x="718" y="90" text-anchor="middle" fill="#8a9bb0" font-size="9">ProductPage.tsx</text>
747
-
748
- <!-- Automation bar -->
749
- <rect x="4" y="125" width="772" height="36" rx="8" fill="#1e293b" stroke="#eab308" stroke-width="1.5" stroke-dasharray="6,3"/>
750
- <text x="390" y="148" text-anchor="middle" fill="#eab308" font-size="11" font-weight="600" data-lang="fr">&#9889; /application &mdash; orchestre tout le processus automatiquement</text>
751
- <text x="390" y="148" text-anchor="middle" fill="#eab308" font-size="11" font-weight="600" data-lang="en">&#9889; /application &mdash; orchestrates the entire process automatically</text>
752
- </svg>
753
- </div>
754
-
755
- <p data-lang="fr">
756
- Vous pouvez realiser chaque etape manuellement, ou generer un module complet (entite + service + controller + page) avec <strong><code>/application</code></strong>.
757
- </p>
758
- <p data-lang="en">
759
- You can perform each step manually, or generate a complete module (entity + service + controller + page) with <strong><code>/application</code></strong>.
760
- </p>
761
-
762
- <div class="alert alert-info">
763
- <span class="alert-icon">&#128279;</span>
764
- <div class="alert-content">
765
- <h5 data-lang="fr">Pages liees</h5>
766
- <h5 data-lang="en">Related pages</h5>
767
- <p data-lang="fr">
768
- <a href="efcore.html">EF Core</a> &mdash; workflow complet des migrations (conflits, rebase, squash) &bull;
769
- <a href="gitflow.html">GitFlow</a> &mdash; gestion des branches et versioning
770
- </p>
771
- <p data-lang="en">
772
- <a href="efcore.html">EF Core</a> &mdash; complete migration workflow (conflicts, rebase, squash) &bull;
773
- <a href="gitflow.html">GitFlow</a> &mdash; branch management and versioning
774
- </p>
775
- </div>
776
- </div>
777
- </section>
778
-
779
- <!-- ============================================
780
- 6. MAINTENIR VOTRE PROJET
781
- ============================================ -->
782
- <section id="maintenance">
783
- <h2>
784
- <span data-lang="fr">Maintenir votre projet</span>
785
- <span data-lang="en">Maintain your project</span>
786
- </h2>
787
-
788
- <p data-lang="fr">
789
- Trois commandes couvrent la maintenance de votre environnement SmartStack. Chacune a un perimetre different &mdash; voici quand et pourquoi les utiliser :
790
- </p>
791
- <p data-lang="en">
792
- Three commands cover your SmartStack environment maintenance. Each has a different scope &mdash; here's when and why to use them:
793
- </p>
794
-
795
- <div class="card-grid">
796
- <div class="card">
797
- <div class="card-header">
798
- <div class="card-icon" style="background: var(--accent);">&#128260;</div>
799
- <div>
800
- <div class="card-title">ss update</div>
801
- <div class="card-subtitle" data-lang="fr">Outillage Claude Code</div>
802
- <div class="card-subtitle" data-lang="en">Claude Code tooling</div>
803
- </div>
804
- </div>
805
- <div class="card-body">
806
- <p data-lang="fr">
807
- Met a jour les <strong>skills, agents et hooks</strong> de Claude Code vers la derniere version. Utilisez-la quand SmartStack publie de nouvelles capacites IA (nouveaux skills, agents ameliores, hooks de securite). Ne touche <em>jamais</em> a votre code ni a vos packages &mdash; c'est uniquement l'outillage Claude Code qui evolue.
808
- </p>
809
- <p data-lang="en">
810
- Updates Claude Code <strong>skills, agents and hooks</strong> to the latest version. Use it when SmartStack publishes new AI capabilities (new skills, improved agents, security hooks). <em>Never</em> touches your code or packages &mdash; only the Claude Code tooling evolves.
811
- </p>
812
- <p><code>--local</code> <span data-lang="fr">installe dans <code>.claude/</code> du projet</span><span data-lang="en">installs in the project's <code>.claude/</code></span> &bull; <code>--dry-run</code> <span data-lang="fr">previsualise</span><span data-lang="en">previews</span></p>
813
- </div>
814
- </div>
815
-
816
- <div class="card">
817
- <div class="card-header">
818
- <div class="card-icon" style="background: var(--secondary);">&#128230;</div>
819
- <div>
820
- <div class="card-title">ss upgrade</div>
821
- <div class="card-subtitle" data-lang="fr">Packages du projet</div>
822
- <div class="card-subtitle" data-lang="en">Project packages</div>
823
- </div>
824
- </div>
825
- <div class="card-body">
826
- <p data-lang="fr">
827
- Met a jour les <strong>packages SmartStack</strong> dans votre projet : NuGet (SmartStack, EF Core, JWT, Swashbuckle...) dans tous les projets .NET, et npm (<code>@atlashub/smartstack</code>) dans le frontend. Si necessaire, applique automatiquement des <strong>migrations de code</strong> pour adapter votre projet aux breaking changes.
828
- </p>
829
- <p data-lang="en">
830
- Updates <strong>SmartStack packages</strong> in your project: NuGet (SmartStack, EF Core, JWT, Swashbuckle...) in all .NET projects, and npm (<code>@atlashub/smartstack</code>) in the frontend. If needed, automatically applies <strong>code migrations</strong> to adapt your project to breaking changes.
831
- </p>
832
- <p><code>--preview</code> <span data-lang="fr">versions prerelease</span><span data-lang="en">prerelease versions</span> &bull; <code>--dry-run</code> <span data-lang="fr">liste sans appliquer</span><span data-lang="en">list without applying</span></p>
833
- </div>
834
- </div>
835
-
836
- <div class="card">
837
- <div class="card-header">
838
- <div class="card-icon" style="background: var(--success);">&#129658;</div>
839
- <div>
840
- <div class="card-title">ss doctor</div>
841
- <div class="card-subtitle" data-lang="fr">Diagnostic complet</div>
842
- <div class="card-subtitle" data-lang="en">Full diagnostic</div>
843
- </div>
844
- </div>
845
- <div class="card-body">
846
- <p data-lang="fr">
847
- Diagnostique <strong>l'ensemble de votre environnement</strong> : versions (Node.js, .NET, Git, Claude Code), etat du MCP, licence, composants installes, configuration. Affiche les correctifs recommandes pour chaque probleme detecte. Lancez-la quand quelque chose ne fonctionne pas ou apres une installation fraiche.
848
- </p>
849
- <p data-lang="en">
850
- Diagnoses your <strong>entire environment</strong>: versions (Node.js, .NET, Git, Claude Code), MCP state, license, installed components, configuration. Shows recommended fixes for each detected issue. Run it when something doesn't work or after a fresh installation.
851
- </p>
852
- <p><code>--json</code> <span data-lang="fr">export JSON</span><span data-lang="en">JSON export</span> &bull; <code>--verbose</code> <span data-lang="fr">details complets</span><span data-lang="en">full details</span></p>
853
- </div>
854
- </div>
855
- </div>
856
- </section>
857
-
858
- <!-- ============================================
859
- 7. PREMIERS PAS
860
- ============================================ -->
861
- <section id="first-steps">
862
- <h2>
863
- <span data-lang="fr">Premiers pas apres l'initialisation</span>
864
- <span data-lang="en">First steps after initialization</span>
865
- </h2>
866
-
867
- <p data-lang="fr">
868
- Votre projet est cree. Voici les etapes pour le rendre operationnel :
869
- </p>
870
- <p data-lang="en">
871
- Your project is created. Here are the steps to make it operational:
872
- </p>
873
-
874
- <ol class="steps-list">
875
- <li>
876
- <div class="step-content">
877
- <h5 data-lang="fr">Configurer la base de donnees</h5>
878
- <h5 data-lang="en">Configure the database</h5>
879
- <p data-lang="fr">
880
- Ouvrez <code>src/MyApp.Api/appsettings.json</code>, section <code>ConnectionStrings</code>. Remplacez la valeur par defaut par votre serveur SQL Server :
881
- </p>
882
- <p data-lang="en">
883
- Open <code>src/MyApp.Api/appsettings.json</code>, section <code>ConnectionStrings</code>. Replace the default value with your SQL Server:
884
- </p>
885
- <div class="code-block">
886
- <button class="copy-btn">Copy</button>
887
- <pre><code>"ConnectionStrings": {
888
- "DefaultConnection": "Server=localhost;Database=MyApp;Trusted_Connection=true;TrustServerCertificate=true"
889
- }</code></pre>
890
- </div>
891
- </div>
892
- </li>
893
- <li>
894
- <div class="step-content">
895
- <h5 data-lang="fr">Initialiser GitFlow</h5>
896
- <h5 data-lang="en">Initialize GitFlow</h5>
897
- <p data-lang="fr">
898
- Dans Claude Code, tapez <code>/gitflow init</code>. Cela configure les branches <code>main</code>/<code>develop</code>, le versioning SemVer et les worktrees Git. Indispensable avant de commencer a developper en equipe.
899
- </p>
900
- <p data-lang="en">
901
- In Claude Code, type <code>/gitflow init</code>. This configures <code>main</code>/<code>develop</code> branches, SemVer versioning and Git worktrees. Essential before starting team development.
902
- </p>
903
- </div>
904
- </li>
905
- <li>
906
- <div class="step-content">
907
- <h5 data-lang="fr">Creer la migration initiale</h5>
908
- <h5 data-lang="en">Create the initial migration</h5>
909
- <p data-lang="fr">
910
- Dans Claude Code : <code>/efcore migration</code>. Le MCP suggere le nom de la migration et valide son contenu. Cette premiere migration cree les tables de votre <code>ExtensionsDbContext</code>.
911
- </p>
912
- <p data-lang="en">
913
- In Claude Code: <code>/efcore migration</code>. The MCP suggests the migration name and validates its content. This first migration creates the tables for your <code>ExtensionsDbContext</code>.
914
- </p>
915
- </div>
916
- </li>
917
- <li>
918
- <div class="step-content">
919
- <h5 data-lang="fr">Deployer la base de donnees</h5>
920
- <h5 data-lang="en">Deploy the database</h5>
921
- <p data-lang="fr">
922
- Dans Claude Code : <code>/efcore db-deploy</code>. Applique toutes les migrations en attente et cree les tables dans SQL Server. Vous pouvez verifier l'etat avec <code>/efcore db-status</code>.
923
- </p>
924
- <p data-lang="en">
925
- In Claude Code: <code>/efcore db-deploy</code>. Applies all pending migrations and creates the tables in SQL Server. You can check the state with <code>/efcore db-status</code>.
926
- </p>
927
- </div>
928
- </li>
929
- <li>
930
- <div class="step-content">
931
- <h5 data-lang="fr">Installer le frontend</h5>
932
- <h5 data-lang="en">Install the frontend</h5>
933
- <p data-lang="fr">
934
- Dans le terminal, placez-vous dans le dossier frontend :
935
- </p>
936
- <p data-lang="en">
937
- In the terminal, navigate to the frontend folder:
938
- </p>
939
- <div class="code-block">
940
- <button class="copy-btn">Copy</button>
941
- <pre><code><span class="code-cmd">cd</span> <span class="code-arg">web/myapp-web</span>
942
- <span class="code-cmd">npm install</span></code></pre>
943
- </div>
944
- </div>
945
- </li>
946
- <li>
947
- <div class="step-content">
948
- <h5 data-lang="fr">Commencer a developper</h5>
949
- <h5 data-lang="en">Start developing</h5>
950
- <p data-lang="fr">
951
- Creez votre premiere branche avec <code>/gitflow start feature ma-feature</code>, puis utilisez <code>/application</code> pour generer un module complet.
952
- </p>
953
- <p data-lang="en">
954
- Create your first branch with <code>/gitflow start feature my-feature</code>, then use <code>/application</code> to generate a complete module.
955
- </p>
956
- </div>
957
- </li>
958
- </ol>
959
- </section>
960
-
961
- <!-- ============================================
962
- 8. WSL & UBUNTU & TMUX
963
- ============================================ -->
964
- <section id="wsl-ubuntu">
965
- <h2>
966
- <span data-lang="fr">Environnement Linux sur Windows (WSL)</span>
967
- <span data-lang="en">Linux Environment on Windows (WSL)</span>
968
- </h2>
969
-
970
- <p data-lang="fr">
971
- SmartStack fonctionne nativement sous Windows, mais l'utilisation d'un <strong>terminal Linux via WSL</strong> (Windows Subsystem for Linux) offre un environnement de developpement plus fluide et performant &mdash; meilleur support de Git, scripts bash natifs, et outils comme <code>tmux</code> pour gerer plusieurs sessions.
972
- </p>
973
- <p data-lang="en">
974
- SmartStack works natively on Windows, but using a <strong>Linux terminal via WSL</strong> (Windows Subsystem for Linux) provides a smoother and more performant development environment &mdash; better Git support, native bash scripts, and tools like <code>tmux</code> for managing multiple sessions.
975
- </p>
976
-
977
- <!-- ── WSL2 Installation ── -->
978
- <h3>
979
- <span data-lang="fr">1. Installer WSL2 et Ubuntu</span>
980
- <span data-lang="en">1. Install WSL2 and Ubuntu</span>
981
- </h3>
982
-
983
- <p data-lang="fr">
984
- Ouvrez un terminal <strong>PowerShell en administrateur</strong> et lancez la commande suivante. Elle installe WSL2 avec Ubuntu comme distribution par defaut :
985
- </p>
986
- <p data-lang="en">
987
- Open a <strong>PowerShell terminal as Administrator</strong> and run the following command. It installs WSL2 with Ubuntu as the default distribution:
988
- </p>
989
-
990
- <div class="code-block">
991
- <button class="copy-btn">Copy</button>
992
- <pre><code><span class="code-comment"># PowerShell (Administrateur) — installe WSL2 + Ubuntu</span>
993
- <span class="code-cmd">wsl</span> <span class="code-flag">--install</span></code></pre>
994
- </div>
995
-
996
- <p data-lang="fr">
997
- Redemarrez votre machine apres l'installation. Au premier lancement d'Ubuntu, vous devrez creer un <strong>nom d'utilisateur</strong> et un <strong>mot de passe</strong> Linux (independants de votre compte Windows).
998
- </p>
999
- <p data-lang="en">
1000
- Restart your machine after installation. On first Ubuntu launch, you'll need to create a Linux <strong>username</strong> and <strong>password</strong> (independent from your Windows account).
1001
- </p>
1002
-
1003
- <div class="alert alert-info">
1004
- <span class="alert-icon">&#128161;</span>
1005
- <div class="alert-content">
1006
- <p data-lang="fr">
1007
- Si WSL est deja installe mais avec la version 1, mettez a jour vers WSL2 :
1008
- <code>wsl --set-default-version 2</code>. WSL2 utilise un vrai noyau Linux et offre de meilleures performances I/O.
1009
- </p>
1010
- <p data-lang="en">
1011
- If WSL is already installed but on version 1, upgrade to WSL2:
1012
- <code>wsl --set-default-version 2</code>. WSL2 uses a real Linux kernel and offers better I/O performance.
1013
- </p>
1014
- </div>
1015
- </div>
1016
-
1017
- <p data-lang="fr">Pour verifier que tout fonctionne :</p>
1018
- <p data-lang="en">To verify everything works:</p>
1019
-
1020
- <div class="code-block">
1021
- <button class="copy-btn">Copy</button>
1022
- <pre><code><span class="code-comment"># PowerShell — verifier la version et la distribution</span>
1023
- <span class="code-cmd">wsl</span> <span class="code-flag">--list --verbose</span>
1024
-
1025
- <span class="code-comment"># Resultat attendu :</span>
1026
- <span class="code-comment"># NAME STATE VERSION</span>
1027
- <span class="code-comment"># * Ubuntu Running 2</span></code></pre>
1028
- </div>
1029
-
1030
- <!-- ── Ubuntu Configuration ── -->
1031
- <h3>
1032
- <span data-lang="fr">2. Configurer Ubuntu</span>
1033
- <span data-lang="en">2. Configure Ubuntu</span>
1034
- </h3>
1035
-
1036
- <p data-lang="fr">
1037
- Une fois dans le terminal Ubuntu, commencez par mettre a jour les paquets systeme, puis installez les outils de developpement essentiels :
1038
- </p>
1039
- <p data-lang="en">
1040
- Once inside the Ubuntu terminal, start by updating system packages, then install essential development tools:
1041
- </p>
1042
-
1043
- <div class="code-block">
1044
- <button class="copy-btn">Copy</button>
1045
- <pre><code><span class="code-comment"># Mettre a jour les paquets systeme</span>
1046
- <span class="code-cmd">sudo apt update</span> && <span class="code-cmd">sudo apt upgrade</span> <span class="code-flag">-y</span>
1047
-
1048
- <span class="code-comment"># Installer les outils de base</span>
1049
- <span class="code-cmd">sudo apt install</span> <span class="code-flag">-y</span> <span class="code-arg">git curl wget unzip build-essential</span></code></pre>
1050
- </div>
1051
-
1052
- <h4>
1053
- <span data-lang="fr">Installer Node.js (via nvm)</span>
1054
- <span data-lang="en">Install Node.js (via nvm)</span>
1055
- </h4>
1056
-
1057
- <p data-lang="fr">
1058
- Utilisez <strong>nvm</strong> (Node Version Manager) pour installer Node.js &mdash; cela permet de gerer facilement plusieurs versions :
1059
- </p>
1060
- <p data-lang="en">
1061
- Use <strong>nvm</strong> (Node Version Manager) to install Node.js &mdash; it allows easy management of multiple versions:
1062
- </p>
1063
-
1064
- <div class="code-block">
1065
- <button class="copy-btn">Copy</button>
1066
- <pre><code><span class="code-comment"># Installer nvm</span>
1067
- <span class="code-cmd">curl</span> <span class="code-flag">-o-</span> https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | <span class="code-cmd">bash</span>
1068
-
1069
- <span class="code-comment"># Recharger le profil</span>
1070
- <span class="code-cmd">source</span> <span class="code-arg">~/.bashrc</span>
1071
-
1072
- <span class="code-comment"># Installer la derniere version LTS de Node.js</span>
1073
- <span class="code-cmd">nvm install</span> <span class="code-flag">--lts</span>
1074
-
1075
- <span class="code-comment"># Verifier</span>
1076
- <span class="code-cmd">node</span> <span class="code-flag">--version</span>
1077
- <span class="code-cmd">npm</span> <span class="code-flag">--version</span></code></pre>
1078
- </div>
1079
-
1080
- <h4>
1081
- <span data-lang="fr">Installer .NET SDK</span>
1082
- <span data-lang="en">Install .NET SDK</span>
1083
- </h4>
1084
-
1085
- <div class="code-block">
1086
- <button class="copy-btn">Copy</button>
1087
- <pre><code><span class="code-comment"># Installer le SDK .NET (Ubuntu)</span>
1088
- <span class="code-cmd">sudo apt install</span> <span class="code-flag">-y</span> <span class="code-arg">dotnet-sdk-10.0</span>
1089
-
1090
- <span class="code-comment"># Verifier</span>
1091
- <span class="code-cmd">dotnet</span> <span class="code-flag">--version</span></code></pre>
1092
- </div>
1093
-
1094
- <div class="alert alert-warning">
1095
- <span class="alert-icon">&#9888;&#65039;</span>
1096
- <div class="alert-content">
1097
- <p data-lang="fr">
1098
- Si le paquet <code>dotnet-sdk-10.0</code> n'est pas disponible, ajoutez d'abord le depot Microsoft :
1099
- </p>
1100
- <p data-lang="en">
1101
- If the <code>dotnet-sdk-10.0</code> package is not available, add the Microsoft repository first:
1102
- </p>
1103
- <div class="code-block">
1104
- <button class="copy-btn">Copy</button>
1105
- <pre><code><span class="code-cmd">wget</span> https://packages.microsoft.com/config/ubuntu/$(lsb_release -rs)/packages-microsoft-prod.deb <span class="code-flag">-O</span> packages-microsoft-prod.deb
1106
- <span class="code-cmd">sudo dpkg</span> <span class="code-flag">-i</span> packages-microsoft-prod.deb
1107
- <span class="code-cmd">rm</span> packages-microsoft-prod.deb
1108
- <span class="code-cmd">sudo apt update</span>
1109
- <span class="code-cmd">sudo apt install</span> <span class="code-flag">-y</span> <span class="code-arg">dotnet-sdk-10.0</span></code></pre>
1110
- </div>
1111
- </div>
1112
- </div>
1113
-
1114
- <!-- ── TMUX Installation ── -->
1115
- <h3>
1116
- <span data-lang="fr">3. Installer et configurer tmux</span>
1117
- <span data-lang="en">3. Install and configure tmux</span>
1118
- </h3>
1119
-
1120
- <p data-lang="fr">
1121
- <strong>tmux</strong> (terminal multiplexer) vous permet de diviser votre terminal en plusieurs panneaux, de detacher des sessions et de garder des processus en cours meme si vous fermez votre terminal. C'est particulierement utile pour lancer simultanement le backend .NET, le frontend React et Claude Code.
1122
- </p>
1123
- <p data-lang="en">
1124
- <strong>tmux</strong> (terminal multiplexer) lets you split your terminal into multiple panes, detach sessions and keep processes running even if you close your terminal. It's particularly useful for simultaneously running the .NET backend, React frontend and Claude Code.
1125
- </p>
1126
-
1127
- <div class="code-block">
1128
- <button class="copy-btn">Copy</button>
1129
- <pre><code><span class="code-comment"># Installer tmux</span>
1130
- <span class="code-cmd">sudo apt install</span> <span class="code-flag">-y</span> <span class="code-arg">tmux</span>
1131
-
1132
- <span class="code-comment"># Verifier la version</span>
1133
- <span class="code-cmd">tmux</span> <span class="code-flag">-V</span></code></pre>
1134
- </div>
1135
-
1136
- <!-- ── TMUX Mouse ── -->
1137
- <h4>
1138
- <span data-lang="fr">Activer la souris dans tmux</span>
1139
- <span data-lang="en">Enable mouse in tmux</span>
1140
- </h4>
1141
-
1142
- <p data-lang="fr">
1143
- Par defaut, tmux ne repond pas aux clics de souris. Pour activer le support complet de la souris (clic pour changer de panneau, scroll, redimensionnement, selection de texte), creez ou modifiez le fichier <code>~/.tmux.conf</code> :
1144
- </p>
1145
- <p data-lang="en">
1146
- By default, tmux does not respond to mouse clicks. To enable full mouse support (click to switch panes, scroll, resize, text selection), create or edit the <code>~/.tmux.conf</code> file:
1147
- </p>
1148
-
1149
- <div class="code-block">
1150
- <button class="copy-btn">Copy</button>
1151
- <pre><code><span class="code-comment"># Creer/editer la configuration tmux</span>
1152
- <span class="code-cmd">cat</span> &lt;&lt; 'EOF' &gt; <span class="code-arg">~/.tmux.conf</span>
1153
- <span class="code-comment"># ── Activer la souris ──</span>
1154
- set -g mouse on
1155
-
1156
- <span class="code-comment"># ── Ameliorer le support des couleurs ──</span>
1157
- set -g default-terminal "tmux-256color"
1158
- set -ag terminal-overrides ",xterm-256color:RGB"
1159
-
1160
- <span class="code-comment"># ── Historique de scroll etendu (10 000 lignes) ──</span>
1161
- set -g history-limit 10000
1162
-
1163
- <span class="code-comment"># ── Commencer les indices de fenetres/panneaux a 1 ──</span>
1164
- set -g base-index 1
1165
- setw -g pane-base-index 1
1166
-
1167
- <span class="code-comment"># ── Raccourcis pratiques pour diviser les panneaux ──</span>
1168
- <span class="code-comment"># Ctrl+b puis | = split vertical</span>
1169
- bind | split-window -h -c "#{pane_current_path}"
1170
- <span class="code-comment"># Ctrl+b puis - = split horizontal</span>
1171
- bind - split-window -v -c "#{pane_current_path}"
1172
-
1173
- <span class="code-comment"># ── Recharger la config avec Ctrl+b puis r ──</span>
1174
- bind r source-file ~/.tmux.conf \; display "Config rechargee!"
1175
- EOF</code></pre>
1176
- </div>
1177
-
1178
- <p data-lang="fr">
1179
- Si tmux est deja en cours d'execution, rechargez la configuration sans le fermer :
1180
- </p>
1181
- <p data-lang="en">
1182
- If tmux is already running, reload the configuration without closing it:
1183
- </p>
1184
-
1185
- <div class="code-block">
1186
- <button class="copy-btn">Copy</button>
1187
- <pre><code><span class="code-comment"># Depuis l'interieur de tmux : Ctrl+b puis :</span>
1188
- <span class="code-comment"># Tapez la commande suivante :</span>
1189
- source-file ~/.tmux.conf
1190
-
1191
- <span class="code-comment"># Ou si vous avez ajoute le raccourci ci-dessus :</span>
1192
- <span class="code-comment"># Ctrl+b puis r</span></code></pre>
1193
- </div>
1194
-
1195
- <!-- ── TMUX Usage ── -->
1196
- <h4>
1197
- <span data-lang="fr">Commandes essentielles tmux</span>
1198
- <span data-lang="en">Essential tmux commands</span>
1199
- </h4>
1200
-
1201
- <p data-lang="fr">
1202
- Toutes les commandes tmux commencent par le <strong>prefixe</strong> <code>Ctrl+b</code>, suivi d'une touche. Voici les plus utiles :
1203
- </p>
1204
- <p data-lang="en">
1205
- All tmux commands start with the <strong>prefix</strong> <code>Ctrl+b</code>, followed by a key. Here are the most useful ones:
1206
- </p>
1207
-
1208
- <div class="table-wrapper">
1209
- <table>
1210
- <thead>
1211
- <tr>
1212
- <th data-lang="fr">Action</th>
1213
- <th data-lang="en">Action</th>
1214
- <th data-lang="fr">Raccourci</th>
1215
- <th data-lang="en">Shortcut</th>
1216
- <th>Description</th>
1217
- </tr>
1218
- </thead>
1219
- <tbody>
1220
- <tr>
1221
- <td data-lang="fr">Nouvelle session</td>
1222
- <td data-lang="en">New session</td>
1223
- <td colspan="2"><code>tmux new -s dev</code></td>
1224
- <td data-lang="fr">Cree une session nommee "dev"</td>
1225
- <td data-lang="en">Creates a session named "dev"</td>
1226
- </tr>
1227
- <tr>
1228
- <td data-lang="fr">Detacher la session</td>
1229
- <td data-lang="en">Detach session</td>
1230
- <td colspan="2"><code>Ctrl+b d</code></td>
1231
- <td data-lang="fr">Detache sans fermer (les processus continuent)</td>
1232
- <td data-lang="en">Detaches without closing (processes keep running)</td>
1233
- </tr>
1234
- <tr>
1235
- <td data-lang="fr">Rattacher la session</td>
1236
- <td data-lang="en">Reattach session</td>
1237
- <td colspan="2"><code>tmux attach -t dev</code></td>
1238
- <td data-lang="fr">Revient a la session "dev"</td>
1239
- <td data-lang="en">Returns to the "dev" session</td>
1240
- </tr>
1241
- <tr>
1242
- <td data-lang="fr">Split vertical</td>
1243
- <td data-lang="en">Vertical split</td>
1244
- <td colspan="2"><code>Ctrl+b |</code></td>
1245
- <td data-lang="fr">Divise le panneau verticalement</td>
1246
- <td data-lang="en">Splits the pane vertically</td>
1247
- </tr>
1248
- <tr>
1249
- <td data-lang="fr">Split horizontal</td>
1250
- <td data-lang="en">Horizontal split</td>
1251
- <td colspan="2"><code>Ctrl+b -</code></td>
1252
- <td data-lang="fr">Divise le panneau horizontalement</td>
1253
- <td data-lang="en">Splits the pane horizontally</td>
1254
- </tr>
1255
- <tr>
1256
- <td data-lang="fr">Naviguer entre panneaux</td>
1257
- <td data-lang="en">Navigate panes</td>
1258
- <td colspan="2"><code>Ctrl+b &#8592;&#8593;&#8595;&#8594;</code></td>
1259
- <td data-lang="fr">Fleches directionnelles pour changer de panneau</td>
1260
- <td data-lang="en">Arrow keys to switch panes</td>
1261
- </tr>
1262
- <tr>
1263
- <td data-lang="fr">Fermer un panneau</td>
1264
- <td data-lang="en">Close pane</td>
1265
- <td colspan="2"><code>Ctrl+b x</code></td>
1266
- <td data-lang="fr">Ferme le panneau actif (confirmation demandee)</td>
1267
- <td data-lang="en">Closes the active pane (confirmation required)</td>
1268
- </tr>
1269
- <tr>
1270
- <td data-lang="fr">Lister les sessions</td>
1271
- <td data-lang="en">List sessions</td>
1272
- <td colspan="2"><code>tmux ls</code></td>
1273
- <td data-lang="fr">Affiche toutes les sessions actives</td>
1274
- <td data-lang="en">Shows all active sessions</td>
1275
- </tr>
1276
- </tbody>
1277
- </table>
1278
- </div>
1279
-
1280
- <!-- ── Workflow SmartStack with tmux ── -->
1281
- <h4>
1282
- <span data-lang="fr">Workflow SmartStack avec tmux</span>
1283
- <span data-lang="en">SmartStack workflow with tmux</span>
1284
- </h4>
1285
-
1286
- <p data-lang="fr">
1287
- Voici un exemple de session tmux typique pour le developpement SmartStack avec 3 panneaux :
1288
- </p>
1289
- <p data-lang="en">
1290
- Here's a typical tmux session example for SmartStack development with 3 panes:
1291
- </p>
1292
-
1293
- <div class="code-block">
1294
- <button class="copy-btn">Copy</button>
1295
- <pre><code><span class="code-comment"># Creer une session de developpement</span>
1296
- <span class="code-cmd">tmux</span> <span class="code-arg">new -s smartstack</span>
1297
-
1298
- <span class="code-comment"># Panneau 1 : Backend .NET (deja actif)</span>
1299
- <span class="code-cmd">cd</span> <span class="code-arg">/mnt/d/MyApp/src/MyApp.Api</span>
1300
- <span class="code-cmd">dotnet watch run</span>
1301
-
1302
- <span class="code-comment"># Ctrl+b | → Split vertical pour le panneau 2 : Frontend</span>
1303
- <span class="code-cmd">cd</span> <span class="code-arg">/mnt/d/MyApp/web/myapp-web</span>
1304
- <span class="code-cmd">npm run dev</span>
1305
-
1306
- <span class="code-comment"># Ctrl+b - → Split horizontal pour le panneau 3 : Claude Code</span>
1307
- <span class="code-cmd">cd</span> <span class="code-arg">/mnt/d/MyApp</span>
1308
- <span class="code-cmd">claude</span></code></pre>
1309
- </div>
1310
-
1311
- <!-- SVG: tmux layout -->
1312
- <div class="svg-diagram">
1313
- <svg viewBox="0 0 780 240" xmlns="http://www.w3.org/2000/svg" style="font-family: 'Inter', system-ui, sans-serif; width: 100%; max-width: 780px; height: auto; display: block; margin: 1.5rem auto;">
1314
- <!-- tmux window frame -->
1315
- <rect x="20" y="10" width="740" height="220" rx="10" fill="#0f172a" stroke="#475569" stroke-width="2"/>
1316
-
1317
- <!-- Title bar -->
1318
- <rect x="20" y="10" width="740" height="28" rx="10" fill="#1e293b"/>
1319
- <rect x="20" y="28" width="740" height="10" fill="#1e293b"/>
1320
- <circle cx="44" cy="24" r="6" fill="#ef4444"/>
1321
- <circle cx="64" cy="24" r="6" fill="#eab308"/>
1322
- <circle cx="84" cy="24" r="6" fill="#22c55e"/>
1323
- <text x="390" y="28" text-anchor="middle" fill="#8a9bb0" font-size="11">tmux: smartstack</text>
1324
-
1325
- <!-- Pane 1: Backend (left) -->
1326
- <rect x="24" y="42" width="360" height="110" fill="#0f172a" stroke="#6366f1" stroke-width="1.5"/>
1327
- <text x="34" y="60" fill="#6366f1" font-weight="600" font-size="11" data-lang="fr">&#9612; Backend .NET</text>
1328
- <text x="34" y="60" fill="#6366f1" font-weight="600" font-size="11" data-lang="en">&#9612; Backend .NET</text>
1329
- <text x="34" y="80" fill="#22c55e" font-size="10" font-family="monospace">$ dotnet watch run</text>
1330
- <text x="34" y="96" fill="#8a9bb0" font-size="10" font-family="monospace">info: Listening on https://localhost:5001</text>
1331
- <text x="34" y="112" fill="#8a9bb0" font-size="10" font-family="monospace">info: Application started</text>
1332
- <text x="34" y="140" fill="#475569" font-size="10" font-family="monospace">&#9608;</text>
1333
-
1334
- <!-- Pane 2: Frontend (right) -->
1335
- <rect x="388" y="42" width="368" height="110" fill="#0f172a" stroke="#06b6d4" stroke-width="1.5"/>
1336
- <text x="398" y="60" fill="#06b6d4" font-weight="600" font-size="11">&#9612; Frontend React</text>
1337
- <text x="398" y="80" fill="#22c55e" font-size="10" font-family="monospace">$ npm run dev</text>
1338
- <text x="398" y="96" fill="#8a9bb0" font-size="10" font-family="monospace">VITE v6.x ready in 320 ms</text>
1339
- <text x="398" y="112" fill="#3b82f6" font-size="10" font-family="monospace">Local: http://localhost:5173/</text>
1340
- <text x="398" y="140" fill="#475569" font-size="10" font-family="monospace">&#9608;</text>
1341
-
1342
- <!-- Pane 3: Claude Code (bottom) -->
1343
- <rect x="24" y="156" width="732" height="70" fill="#0f172a" stroke="#f97316" stroke-width="1.5"/>
1344
- <text x="34" y="174" fill="#f97316" font-weight="600" font-size="11">&#9612; Claude Code</text>
1345
- <text x="34" y="194" fill="#22c55e" font-size="10" font-family="monospace">$ claude</text>
1346
- <text x="34" y="210" fill="#c8d0dc" font-size="10" font-family="monospace" data-lang="fr">Claude &gt; Pret a vous aider avec votre projet SmartStack</text>
1347
- <text x="34" y="210" fill="#c8d0dc" font-size="10" font-family="monospace" data-lang="en">Claude &gt; Ready to help with your SmartStack project</text>
1348
- </svg>
1349
- </div>
1350
-
1351
- <div class="alert alert-info">
1352
- <span class="alert-icon">&#128161;</span>
1353
- <div class="alert-content">
1354
- <h5 data-lang="fr">Acceder a vos fichiers Windows depuis WSL</h5>
1355
- <h5 data-lang="en">Access your Windows files from WSL</h5>
1356
- <p data-lang="fr">
1357
- Vos disques Windows sont montes automatiquement sous <code>/mnt/</code>. Le disque <code>C:</code> est accessible a <code>/mnt/c/</code>, le disque <code>D:</code> a <code>/mnt/d/</code>, etc. Vous pouvez donc travailler directement sur vos projets Windows depuis le terminal Ubuntu.
1358
- </p>
1359
- <p data-lang="en">
1360
- Your Windows drives are automatically mounted under <code>/mnt/</code>. The <code>C:</code> drive is accessible at <code>/mnt/c/</code>, the <code>D:</code> drive at <code>/mnt/d/</code>, etc. You can therefore work directly on your Windows projects from the Ubuntu terminal.
1361
- </p>
1362
- </div>
1363
- </div>
1364
- </section>
1365
-
1366
- </div>
1367
- </main>
1368
- </div>
1369
- </div>
1370
-
1371
- <!-- Mobile Menu Button -->
1372
- <button class="mobile-menu-btn">&#9776;</button>
1373
- <div class="overlay"></div>
1374
-
1375
- <script src="js/app.js"></script>
1376
- </body>
1377
- </html>
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Projet Client - SmartStack CLI</title>
7
+ <link rel="stylesheet" href="css/styles.css">
8
+ </head>
9
+ <body>
10
+ <div class="app-container">
11
+ <!-- Global Header -->
12
+ <header class="global-header">
13
+ <div class="logo">SS</div>
14
+ <span class="site-title">SmartStack CLI</span>
15
+ <span class="version-badge">v3.34.0</span>
16
+ <div class="header-divider"></div>
17
+ <span class="page-title">
18
+ <span data-lang="fr">Projet Client</span>
19
+ <span data-lang="en">Client Project</span>
20
+ </span>
21
+ <nav class="breadcrumb">
22
+ <a href="index.html">
23
+ <span data-lang="fr">Accueil</span>
24
+ <span data-lang="en">Home</span>
25
+ </a>
26
+ <span class="breadcrumb-separator">&#8250;</span>
27
+ <span class="breadcrumb-current">
28
+ <span data-lang="fr">Projet Client</span>
29
+ <span data-lang="en">Client Project</span>
30
+ </span>
31
+ </nav>
32
+ <!-- Language Select -->
33
+ <select class="lang-select" id="lang-select" onchange="setLanguage(this.value); localStorage.setItem('doc-language', this.value);">
34
+ <option value="fr">&#127467;&#127479; FR</option>
35
+ <option value="en">&#127468;&#127463; EN</option>
36
+ </select>
37
+ <!-- Search -->
38
+ <div class="header-search">
39
+ <div class="search-input-wrapper">
40
+ <span class="search-icon">&#128269;</span>
41
+ <input type="text" id="search-input" class="search-input" placeholder="Rechercher..." data-placeholder-fr="Rechercher..." data-placeholder-en="Search..." autocomplete="off">
42
+ <span class="search-shortcut">Ctrl+K</span>
43
+ </div>
44
+ <div id="search-results" class="search-results"></div>
45
+ </div>
46
+ </header>
47
+
48
+ <!-- App Body -->
49
+ <div class="app-body">
50
+ <!-- Sidebar -->
51
+ <aside class="sidebar">
52
+ <button class="sidebar-toggle" title="Toggle sidebar">
53
+ <span class="toggle-icon-collapse">&#171;</span>
54
+ <span class="toggle-icon-expand">&#187;</span>
55
+ </button>
56
+
57
+ <nav class="sidebar-nav">
58
+ <div class="nav-section">
59
+ <div class="nav-section-title">
60
+ <span data-lang="fr">Demarrage</span>
61
+ <span data-lang="en">Getting Started</span>
62
+ </div>
63
+ <a href="index.html" class="nav-item">
64
+ <span class="icon">&#127968;</span>
65
+ <span class="nav-text" data-lang="fr">Accueil</span>
66
+ <span class="nav-text" data-lang="en">Home</span>
67
+ </a>
68
+ <a href="installation.html" class="nav-item">
69
+ <span class="icon">&#128230;</span>
70
+ <span class="nav-text">Installation</span>
71
+ </a>
72
+ <div class="nav-item-with-toc">
73
+ <a href="init.html" class="nav-item active">
74
+ <span class="icon">&#128640;</span>
75
+ <span class="nav-text" data-lang="fr">Projet Client</span>
76
+ <span class="nav-text" data-lang="en">Client Project</span>
77
+ </a>
78
+ <nav class="sidebar-toc">
79
+ <a href="#introduction" class="sidebar-toc-link">Introduction</a>
80
+ <a href="#architecture" class="sidebar-toc-link">Architecture</a>
81
+ <a href="#creation" class="sidebar-toc-link">
82
+ <span data-lang="fr">Creer votre projet</span>
83
+ <span data-lang="en">Create project</span>
84
+ </a>
85
+ <a href="#structure" class="sidebar-toc-link">Structure</a>
86
+ <a href="#development" class="sidebar-toc-link">
87
+ <span data-lang="fr">Cycle de dev</span>
88
+ <span data-lang="en">Dev cycle</span>
89
+ </a>
90
+ <a href="#maintenance" class="sidebar-toc-link">Maintenance</a>
91
+ <a href="#first-steps" class="sidebar-toc-link">
92
+ <span data-lang="fr">Premiers pas</span>
93
+ <span data-lang="en">First steps</span>
94
+ </a>
95
+ <a href="#wsl-ubuntu" class="sidebar-toc-link">
96
+ <span data-lang="fr">WSL &amp; Ubuntu</span>
97
+ <span data-lang="en">WSL &amp; Ubuntu</span>
98
+ </a>
99
+ </nav>
100
+ </div>
101
+ </div>
102
+
103
+ <div class="nav-section">
104
+ <div class="nav-section-title">Workflows</div>
105
+ <a href="gitflow.html" class="nav-item">
106
+ <span class="icon">&#128256;</span>
107
+ <span class="nav-text">GitFlow</span>
108
+ </a>
109
+ <a href="efcore.html" class="nav-item">
110
+ <span class="icon">&#128452;</span>
111
+ <span class="nav-text">EF Core</span>
112
+ </a>
113
+ <a href="business-analyse.html" class="nav-item">
114
+ <span class="icon">&#128202;</span>
115
+ <span class="nav-text">Business Analyse</span>
116
+ </a>
117
+ <a href="ralph-loop.html" class="nav-item">
118
+ <span class="icon">&#128260;</span>
119
+ <span class="nav-text">Ralph Loop</span>
120
+ </a>
121
+ <a href="apex.html" class="nav-item">
122
+ <span class="icon">&#9881;</span>
123
+ <span class="nav-text">APEX</span>
124
+ </a>
125
+ </div>
126
+
127
+ <div class="nav-section">
128
+ <div class="nav-section-title">
129
+ <span data-lang="fr">Outils</span>
130
+ <span data-lang="en">Tools</span>
131
+ </div>
132
+ <a href="cli-commands.html" class="nav-item">
133
+ <span class="icon">&#128187;</span>
134
+ <span class="nav-text" data-lang="fr">CLI SmartStack</span>
135
+ <span class="nav-text" data-lang="en">SmartStack CLI</span>
136
+ </a>
137
+ <a href="agents.html" class="nav-item">
138
+ <span class="icon">&#129302;</span>
139
+ <span class="nav-text">Agents</span>
140
+ </a>
141
+ <a href="commands.html" class="nav-item">
142
+ <span class="icon">&#9889;</span>
143
+ <span class="nav-text" data-lang="fr">Commandes Claude</span>
144
+ <span class="nav-text" data-lang="en">Claude Commands</span>
145
+ </a>
146
+ <a href="hooks.html" class="nav-item">
147
+ <span class="icon">&#128279;</span>
148
+ <span class="nav-text">Hooks</span>
149
+ </a>
150
+ <a href="test-web.html" class="nav-item">
151
+ <span class="icon">&#127760;</span>
152
+ <span class="nav-text">Test Web</span>
153
+ </a>
154
+ </div>
155
+ </nav>
156
+
157
+ </aside>
158
+
159
+ <!-- Main Content -->
160
+ <main class="main-content">
161
+ <div class="content-full">
162
+
163
+ <!-- ============================================
164
+ 1. INTRODUCTION
165
+ ============================================ -->
166
+ <section id="introduction">
167
+ <h2>
168
+ <span data-lang="fr">Qu'est-ce qu'un projet client SmartStack ?</span>
169
+ <span data-lang="en">What is a SmartStack client project?</span>
170
+ </h2>
171
+
172
+ <p data-lang="fr">
173
+ Un projet client SmartStack est une application metier construite sur les fondations du socle SmartStack. Le socle fournit tout ce qui est commun a une application professionnelle &mdash; authentification JWT, gestion des roles (RBAC via HasData), isolation multi-tenant, communication temps reel (SignalR), notifications et audit. Votre projet se concentre exclusivement sur <strong>votre logique metier</strong> : vos entites, vos services, vos pages.
174
+ </p>
175
+ <p data-lang="en">
176
+ A SmartStack client project is a business application built on top of the SmartStack foundation. The foundation provides everything common to a professional application &mdash; JWT authentication, role management (RBAC via HasData), multi-tenant isolation, real-time communication (SignalR), notifications and auditing. Your project focuses exclusively on <strong>your business logic</strong>: your entities, your services, your pages.
177
+ </p>
178
+
179
+ <p data-lang="fr">
180
+ La separation est stricte : vous n'avez jamais besoin de toucher au code du socle. Vous <em>etendez</em> SmartStack en ajoutant vos propres couches, et le socle evolue independamment via les mises a jour (<code>ss upgrade</code>).
181
+ </p>
182
+ <p data-lang="en">
183
+ The separation is strict: you never need to touch the foundation code. You <em>extend</em> SmartStack by adding your own layers, and the foundation evolves independently through updates (<code>ss upgrade</code>).
184
+ </p>
185
+
186
+ <!-- SVG: Foundation Layers -->
187
+ <div class="svg-diagram">
188
+ <svg viewBox="0 0 780 255" xmlns="http://www.w3.org/2000/svg" style="font-family: 'Inter', system-ui, sans-serif; width: 100%; max-width: 780px; height: auto; display: block; margin: 1.5rem auto;">
189
+ <defs>
190
+ <marker id="arrowDown" markerWidth="8" markerHeight="8" refX="4" refY="4" orient="auto">
191
+ <path d="M0,0 L8,4 L0,8 z" fill="#8a9bb0"/>
192
+ </marker>
193
+ </defs>
194
+
195
+ <!-- Your Project (top) -->
196
+ <rect x="20" y="8" width="740" height="92" rx="10" fill="#1e293b" stroke="#f97316" stroke-width="2"/>
197
+ <text x="390" y="32" text-anchor="middle" fill="#f97316" font-weight="700" font-size="13" data-lang="fr">VOTRE CODE METIER</text>
198
+ <text x="390" y="32" text-anchor="middle" fill="#f97316" font-weight="700" font-size="13" data-lang="en">YOUR BUSINESS CODE</text>
199
+
200
+ <!-- Your Project pills -->
201
+ <rect x="52" y="48" width="100" height="32" rx="6" fill="#334155"/>
202
+ <text x="102" y="69" text-anchor="middle" fill="#c8d0dc" font-size="11" data-lang="fr">Entites</text>
203
+ <text x="102" y="69" text-anchor="middle" fill="#c8d0dc" font-size="11" data-lang="en">Entities</text>
204
+
205
+ <rect x="168" y="48" width="100" height="32" rx="6" fill="#334155"/>
206
+ <text x="218" y="69" text-anchor="middle" fill="#c8d0dc" font-size="11">Services</text>
207
+
208
+ <rect x="284" y="48" width="100" height="32" rx="6" fill="#334155"/>
209
+ <text x="334" y="69" text-anchor="middle" fill="#c8d0dc" font-size="11">Controllers</text>
210
+
211
+ <rect x="400" y="48" width="110" height="32" rx="6" fill="#334155"/>
212
+ <text x="455" y="69" text-anchor="middle" fill="#c8d0dc" font-size="11">Pages React</text>
213
+
214
+ <rect x="526" y="48" width="110" height="32" rx="6" fill="#334155"/>
215
+ <text x="581" y="69" text-anchor="middle" fill="#c8d0dc" font-size="11" data-lang="fr">Vos tables</text>
216
+ <text x="581" y="69" text-anchor="middle" fill="#c8d0dc" font-size="11" data-lang="en">Your tables</text>
217
+
218
+ <rect x="652" y="48" width="80" height="32" rx="6" fill="#334155"/>
219
+ <text x="692" y="69" text-anchor="middle" fill="#c8d0dc" font-size="11">Tests</text>
220
+
221
+ <!-- Arrow: extends -->
222
+ <line x1="390" y1="108" x2="390" y2="148" stroke="#8a9bb0" stroke-width="1.5" stroke-dasharray="5,4"/>
223
+ <polygon points="384,144 390,155 396,144" fill="#8a9bb0"/>
224
+ <text x="390" y="136" text-anchor="middle" fill="#8a9bb0" font-size="11" font-style="italic" data-lang="fr">etend / utilise</text>
225
+ <text x="390" y="136" text-anchor="middle" fill="#8a9bb0" font-size="11" font-style="italic" data-lang="en">extends / uses</text>
226
+
227
+ <!-- SmartStack (bottom) -->
228
+ <rect x="20" y="158" width="740" height="88" rx="10" fill="#1e293b" stroke="#6366f1" stroke-width="2"/>
229
+ <text x="390" y="180" text-anchor="middle" fill="#6366f1" font-weight="700" font-size="13">SMARTSTACK (SOCLE)</text>
230
+
231
+ <!-- SmartStack pills -->
232
+ <rect x="40" y="194" width="92" height="32" rx="6" fill="#312e81"/>
233
+ <text x="86" y="215" text-anchor="middle" fill="#c4b5fd" font-size="11">Auth JWT</text>
234
+
235
+ <rect x="146" y="194" width="100" height="32" rx="6" fill="#312e81"/>
236
+ <text x="196" y="215" text-anchor="middle" fill="#c4b5fd" font-size="11">RBAC</text>
237
+
238
+ <rect x="260" y="194" width="108" height="32" rx="6" fill="#312e81"/>
239
+ <text x="314" y="215" text-anchor="middle" fill="#c4b5fd" font-size="11">Multi-tenant</text>
240
+
241
+ <rect x="382" y="194" width="90" height="32" rx="6" fill="#312e81"/>
242
+ <text x="427" y="215" text-anchor="middle" fill="#c4b5fd" font-size="11">SignalR</text>
243
+
244
+ <rect x="486" y="194" width="115" height="32" rx="6" fill="#312e81"/>
245
+ <text x="543" y="215" text-anchor="middle" fill="#c4b5fd" font-size="11">Notifications</text>
246
+
247
+ <rect x="615" y="194" width="80" height="32" rx="6" fill="#312e81"/>
248
+ <text x="655" y="215" text-anchor="middle" fill="#c4b5fd" font-size="11">Audit</text>
249
+ </svg>
250
+ </div>
251
+
252
+ <div class="alert alert-info">
253
+ <span class="alert-icon">&#128161;</span>
254
+ <div class="alert-content">
255
+ <h5 data-lang="fr">Principe fondamental</h5>
256
+ <h5 data-lang="en">Core principle</h5>
257
+ <p data-lang="fr">
258
+ Vous ne modifiez jamais les internes de SmartStack. Vous etendez le socle en ajoutant vos entites dans le Domain, vos services dans Application, vos tables dans votre propre DbContext. Quand SmartStack evolue, un simple <code>ss upgrade</code> met a jour les fondations sans toucher a votre code.
259
+ </p>
260
+ <p data-lang="en">
261
+ You never modify SmartStack internals. You extend the foundation by adding your entities in Domain, your services in Application, your tables in your own DbContext. When SmartStack evolves, a simple <code>ss upgrade</code> updates the foundations without touching your code.
262
+ </p>
263
+ </div>
264
+ </div>
265
+ </section>
266
+
267
+ <!-- ============================================
268
+ 2. ARCHITECTURE
269
+ ============================================ -->
270
+ <section id="architecture">
271
+ <h2>Architecture</h2>
272
+
273
+ <h3>Clean Architecture</h3>
274
+
275
+ <p data-lang="fr">
276
+ Votre projet suit le pattern <strong>Clean Architecture</strong> en 4 couches. Le principe fondamental : les dependances pointent toujours vers le centre. Le Domain ne connait rien du monde exterieur. L'Application orchestre sans savoir comment les donnees sont stockees. L'Infrastructure implemente les details techniques. L'Api expose les endpoints.
277
+ </p>
278
+ <p data-lang="en">
279
+ Your project follows the <strong>Clean Architecture</strong> pattern with 4 layers. The core principle: dependencies always point inward. Domain knows nothing about the outside world. Application orchestrates without knowing how data is stored. Infrastructure implements technical details. Api exposes the endpoints.
280
+ </p>
281
+
282
+ <!-- SVG: Clean Architecture -->
283
+ <div class="svg-diagram">
284
+ <svg viewBox="0 0 700 300" xmlns="http://www.w3.org/2000/svg" style="font-family: 'Inter', system-ui, sans-serif; width: 100%; max-width: 700px; height: auto; display: block; margin: 1.5rem auto;">
285
+ <!-- Api (outermost) -->
286
+ <rect x="8" y="8" width="684" height="284" rx="12" fill="none" stroke="#f97316" stroke-width="2.5" stroke-opacity="0.7"/>
287
+ <text x="24" y="32" fill="#f97316" font-weight="700" font-size="13">MyApp.Api</text>
288
+ <text x="680" y="32" text-anchor="end" fill="#8a9bb0" font-size="10.5" data-lang="fr">Controllers, Swagger, Program.cs</text>
289
+ <text x="680" y="32" text-anchor="end" fill="#8a9bb0" font-size="10.5" data-lang="en">Controllers, Swagger, Program.cs</text>
290
+
291
+ <!-- Infrastructure -->
292
+ <rect x="32" y="52" width="636" height="228" rx="10" fill="none" stroke="#06b6d4" stroke-width="2.5" stroke-opacity="0.7"/>
293
+ <text x="48" y="74" fill="#06b6d4" font-weight="700" font-size="13">MyApp.Infrastructure</text>
294
+ <text x="656" y="74" text-anchor="end" fill="#8a9bb0" font-size="10.5">ExtensionsDbContext, Repositories, Migrations</text>
295
+
296
+ <!-- Application -->
297
+ <rect x="56" y="96" width="588" height="172" rx="10" fill="none" stroke="#3b82f6" stroke-width="2.5" stroke-opacity="0.7"/>
298
+ <text x="72" y="118" fill="#3b82f6" font-weight="700" font-size="13">MyApp.Application</text>
299
+ <text x="632" y="118" text-anchor="end" fill="#8a9bb0" font-size="10.5">Services, DTOs, IExtensionsDbContext</text>
300
+
301
+ <!-- Domain (innermost) -->
302
+ <rect x="80" y="140" width="540" height="116" rx="10" fill="#1e1b4b" fill-opacity="0.4" stroke="#6366f1" stroke-width="2.5"/>
303
+ <text x="96" y="164" fill="#6366f1" font-weight="700" font-size="13">MyApp.Domain</text>
304
+ <text x="608" y="164" text-anchor="end" fill="#8a9bb0" font-size="10.5" data-lang="fr">Entites, Interfaces, Regles metier</text>
305
+ <text x="608" y="164" text-anchor="end" fill="#8a9bb0" font-size="10.5" data-lang="en">Entities, Interfaces, Business Rules</text>
306
+
307
+ <!-- Domain content -->
308
+ <text x="100" y="198" fill="#c8d0dc" font-size="11" data-lang="fr">Vos entites metier : Product, Order, Customer...</text>
309
+ <text x="100" y="198" fill="#c8d0dc" font-size="11" data-lang="en">Your business entities: Product, Order, Customer...</text>
310
+ <text x="100" y="220" fill="#8a9bb0" font-size="10" data-lang="fr">Heritent des classes de base SmartStack (BaseEntity, IAuditable)</text>
311
+ <text x="100" y="220" fill="#8a9bb0" font-size="10" data-lang="en">Inherit from SmartStack base classes (BaseEntity, IAuditable)</text>
312
+
313
+ <!-- Arrow: dependencies -->
314
+ <line x1="662" y1="272" x2="662" y2="160" stroke="#8a9bb0" stroke-width="1.5" marker-end="url(#arrowDown)"/>
315
+ <text x="660" y="286" text-anchor="middle" fill="#8a9bb0" font-size="10" data-lang="fr">Dependances</text>
316
+ <text x="660" y="286" text-anchor="middle" fill="#8a9bb0" font-size="10" data-lang="en">Dependencies</text>
317
+ </svg>
318
+ </div>
319
+
320
+ <!-- Layer explanations as cards -->
321
+ <div class="card-grid">
322
+ <div class="card">
323
+ <div class="card-header">
324
+ <div class="card-icon" style="background: #6366f1;">D</div>
325
+ <div>
326
+ <div class="card-title">Domain</div>
327
+ <div class="card-subtitle" data-lang="fr">Coeur metier</div>
328
+ <div class="card-subtitle" data-lang="en">Business core</div>
329
+ </div>
330
+ </div>
331
+ <div class="card-body">
332
+ <p data-lang="fr">
333
+ C'est ici que vivent vos entites metier (<code>Product</code>, <code>Order</code>, <code>Customer</code>...), vos interfaces et vos regles de validation. Cette couche n'a aucune dependance sur un framework &mdash; c'est du C# pur. Le package SmartStack fournit les classes de base (<code>BaseEntity</code>, <code>IAuditable</code>...).
334
+ </p>
335
+ <p data-lang="en">
336
+ This is where your business entities live (<code>Product</code>, <code>Order</code>, <code>Customer</code>...), your interfaces and validation rules. This layer has no dependency on any framework &mdash; it's pure C#. The SmartStack package provides base classes (<code>BaseEntity</code>, <code>IAuditable</code>...).
337
+ </p>
338
+ </div>
339
+ </div>
340
+
341
+ <div class="card">
342
+ <div class="card-header">
343
+ <div class="card-icon" style="background: #3b82f6;">A</div>
344
+ <div>
345
+ <div class="card-title">Application</div>
346
+ <div class="card-subtitle" data-lang="fr">Orchestration</div>
347
+ <div class="card-subtitle" data-lang="en">Orchestration</div>
348
+ </div>
349
+ </div>
350
+ <div class="card-body">
351
+ <p data-lang="fr">
352
+ La couche d'orchestration. Vos services metier, vos DTOs, vos interfaces de repository. C'est aussi ici que se declare <code>IExtensionsDbContext</code> &mdash; le contrat que l'Infrastructure doit implementer. Aucune reference a EF Core ou SQL Server ici.
353
+ </p>
354
+ <p data-lang="en">
355
+ The orchestration layer. Your business services, DTOs, repository interfaces. This is also where <code>IExtensionsDbContext</code> is declared &mdash; the contract that Infrastructure must implement. No reference to EF Core or SQL Server here.
356
+ </p>
357
+ </div>
358
+ </div>
359
+
360
+ <div class="card">
361
+ <div class="card-header">
362
+ <div class="card-icon" style="background: #06b6d4;">I</div>
363
+ <div>
364
+ <div class="card-title">Infrastructure</div>
365
+ <div class="card-subtitle" data-lang="fr">Acces aux donnees</div>
366
+ <div class="card-subtitle" data-lang="en">Data access</div>
367
+ </div>
368
+ </div>
369
+ <div class="card-body">
370
+ <p data-lang="fr">
371
+ L'implementation technique. <code>ExtensionsDbContext</code> (votre DbContext EF Core), les repositories, les configurations d'entites (<code>EntityTypeConfiguration</code>). C'est la seule couche qui sait <em>comment</em> vos donnees sont stockees. Les migrations EF Core vivent ici.
372
+ </p>
373
+ <p data-lang="en">
374
+ The technical implementation. <code>ExtensionsDbContext</code> (your EF Core DbContext), repositories, entity configurations (<code>EntityTypeConfiguration</code>). This is the only layer that knows <em>how</em> your data is stored. EF Core migrations live here.
375
+ </p>
376
+ </div>
377
+ </div>
378
+
379
+ <div class="card">
380
+ <div class="card-header">
381
+ <div class="card-icon" style="background: #f97316;">P</div>
382
+ <div>
383
+ <div class="card-title">Api</div>
384
+ <div class="card-subtitle" data-lang="fr">Point d'entree HTTP</div>
385
+ <div class="card-subtitle" data-lang="en">HTTP entry point</div>
386
+ </div>
387
+ </div>
388
+ <div class="card-body">
389
+ <p data-lang="fr">
390
+ Le point d'entree de votre application. Vos controllers REST, la configuration Swagger, <code>Program.cs</code> avec l'injection de dependances. C'est la couche la plus externe &mdash; elle orchestre le demarrage et expose vos endpoints.
391
+ </p>
392
+ <p data-lang="en">
393
+ Your application's entry point. Your REST controllers, Swagger configuration, <code>Program.cs</code> with dependency injection. This is the outermost layer &mdash; it orchestrates startup and exposes your endpoints.
394
+ </p>
395
+ </div>
396
+ </div>
397
+ </div>
398
+
399
+ <!-- Dual-DbContext -->
400
+ <h3>Dual-DbContext</h3>
401
+
402
+ <p data-lang="fr">
403
+ SmartStack utilise une architecture <strong>Dual-DbContext</strong> qui separe strictement les donnees du socle de vos donnees metier. Le socle gere ses propres tables (Users, Roles, Tenants, Permissions, AuditLogs) via son contexte interne. Votre projet utilise <code>ExtensionsDbContext</code> pour ses propres tables.
404
+ </p>
405
+ <p data-lang="en">
406
+ SmartStack uses a <strong>Dual-DbContext</strong> architecture that strictly separates foundation data from your business data. The foundation manages its own tables (Users, Roles, Tenants, Permissions, AuditLogs) through its internal context. Your project uses <code>ExtensionsDbContext</code> for its own tables.
407
+ </p>
408
+
409
+ <!-- SVG: Dual-DbContext -->
410
+ <div class="svg-diagram">
411
+ <svg viewBox="0 0 780 290" xmlns="http://www.w3.org/2000/svg" style="font-family: 'Inter', system-ui, sans-serif; width: 100%; max-width: 780px; height: auto; display: block; margin: 1.5rem auto;">
412
+ <!-- SmartStack Context (left) -->
413
+ <rect x="20" y="10" width="340" height="200" rx="10" fill="#1e293b" stroke="#6366f1" stroke-width="2"/>
414
+ <text x="190" y="36" text-anchor="middle" fill="#6366f1" font-weight="700" font-size="13">SmartStack Context</text>
415
+ <text x="190" y="54" text-anchor="middle" fill="#8a9bb0" font-size="10.5" font-style="italic" data-lang="fr">Gere par le socle</text>
416
+ <text x="190" y="54" text-anchor="middle" fill="#8a9bb0" font-size="10.5" font-style="italic" data-lang="en">Managed by foundation</text>
417
+
418
+ <!-- SmartStack tables -->
419
+ <rect x="45" y="70" width="290" height="28" rx="4" fill="#334155"/>
420
+ <text x="60" y="89" fill="#c4b5fd" font-size="11" font-family="monospace">&#9500; Users</text>
421
+ <rect x="45" y="102" width="290" height="28" rx="4" fill="#334155"/>
422
+ <text x="60" y="121" fill="#c4b5fd" font-size="11" font-family="monospace">&#9500; Roles / Permissions</text>
423
+ <rect x="45" y="134" width="290" height="28" rx="4" fill="#334155"/>
424
+ <text x="60" y="153" fill="#c4b5fd" font-size="11" font-family="monospace">&#9500; Tenants</text>
425
+ <rect x="45" y="166" width="290" height="28" rx="4" fill="#334155"/>
426
+ <text x="60" y="185" fill="#c4b5fd" font-size="11" font-family="monospace">&#9492; AuditLogs</text>
427
+
428
+ <!-- Separator -->
429
+ <line x1="390" y1="20" x2="390" y2="200" stroke="#475569" stroke-width="2" stroke-dasharray="6,4"/>
430
+ <rect x="370" y="92" width="40" height="28" rx="4" fill="#0f172a"/>
431
+ <text x="390" y="111" text-anchor="middle" fill="#eab308" font-size="10" font-weight="600">&#9876;</text>
432
+
433
+ <!-- Extensions Context (right) -->
434
+ <rect x="420" y="10" width="340" height="200" rx="10" fill="#1e293b" stroke="#f97316" stroke-width="2"/>
435
+ <text x="590" y="36" text-anchor="middle" fill="#f97316" font-weight="700" font-size="13">Extensions Context</text>
436
+ <text x="590" y="54" text-anchor="middle" fill="#8a9bb0" font-size="10.5" font-style="italic" data-lang="fr">Gere par vous</text>
437
+ <text x="590" y="54" text-anchor="middle" fill="#8a9bb0" font-size="10.5" font-style="italic" data-lang="en">Managed by you</text>
438
+
439
+ <!-- Your tables -->
440
+ <rect x="445" y="70" width="290" height="28" rx="4" fill="#334155"/>
441
+ <text x="460" y="89" fill="#fdba74" font-size="11" font-family="monospace">&#9500; Products</text>
442
+ <rect x="445" y="102" width="290" height="28" rx="4" fill="#334155"/>
443
+ <text x="460" y="121" fill="#fdba74" font-size="11" font-family="monospace">&#9500; Orders</text>
444
+ <rect x="445" y="134" width="290" height="28" rx="4" fill="#334155"/>
445
+ <text x="460" y="153" fill="#fdba74" font-size="11" font-family="monospace">&#9500; Categories</text>
446
+ <rect x="445" y="166" width="290" height="28" rx="4" fill="#334155"/>
447
+ <text x="460" y="185" fill="#fdba74" font-size="11" font-family="monospace">&#9492; ...</text>
448
+
449
+ <!-- Database -->
450
+ <line x1="190" y1="210" x2="190" y2="240" stroke="#6366f1" stroke-width="1.5" stroke-opacity="0.6"/>
451
+ <line x1="590" y1="210" x2="590" y2="240" stroke="#f97316" stroke-width="1.5" stroke-opacity="0.6"/>
452
+ <line x1="190" y1="240" x2="590" y2="240" stroke="#475569" stroke-width="1.5"/>
453
+
454
+ <!-- DB icon -->
455
+ <ellipse cx="390" cy="258" rx="60" ry="10" fill="none" stroke="#8a9bb0" stroke-width="1.5"/>
456
+ <rect x="330" y="258" width="120" height="18" fill="#1e293b" stroke="#8a9bb0" stroke-width="1.5"/>
457
+ <ellipse cx="390" cy="276" rx="60" ry="10" fill="none" stroke="#8a9bb0" stroke-width="1.5"/>
458
+ <line x1="390" y1="240" x2="390" y2="248" stroke="#8a9bb0" stroke-width="1.5"/>
459
+ <text x="390" y="271" text-anchor="middle" fill="#c8d0dc" font-size="10">SQL Server</text>
460
+ </svg>
461
+ </div>
462
+
463
+ <p data-lang="fr">
464
+ Cette separation a trois avantages concrets :
465
+ </p>
466
+ <p data-lang="en">
467
+ This separation has three concrete advantages:
468
+ </p>
469
+ <ul>
470
+ <li data-lang="fr">Vos migrations n'interferent <strong>jamais</strong> avec les tables du socle</li>
471
+ <li data-lang="en">Your migrations <strong>never</strong> interfere with foundation tables</li>
472
+ <li data-lang="fr">Les mises a jour SmartStack (<code>ss upgrade</code>) n'impactent pas votre schema</li>
473
+ <li data-lang="en">SmartStack updates (<code>ss upgrade</code>) don't impact your schema</li>
474
+ <li data-lang="fr">Vous visualisez clairement ce qui vous appartient vs. ce qui est gere par le framework</li>
475
+ <li data-lang="en">You can clearly see what belongs to you vs. what is managed by the framework</li>
476
+ </ul>
477
+
478
+ <div class="alert alert-info">
479
+ <span class="alert-icon">&#128218;</span>
480
+ <div class="alert-content">
481
+ <p data-lang="fr">Toutes les operations sur vos migrations passent par les skills <code>/efcore</code>. Le MCP valide les noms, detecte les conflits entre branches et assure la coherence. Voir la page <a href="efcore.html">EF Core</a> pour le workflow complet.</p>
482
+ <p data-lang="en">All operations on your migrations go through <code>/efcore</code> skills. The MCP validates names, detects conflicts between branches and ensures consistency. See the <a href="efcore.html">EF Core</a> page for the complete workflow.</p>
483
+ </div>
484
+ </div>
485
+ </section>
486
+
487
+ <!-- ============================================
488
+ 3. CREER VOTRE PROJET
489
+ ============================================ -->
490
+ <section id="creation">
491
+ <h2>
492
+ <span data-lang="fr">Creer votre projet</span>
493
+ <span data-lang="en">Create your project</span>
494
+ </h2>
495
+
496
+ <p data-lang="fr">
497
+ La commande <code>ss init</code> cree un projet complet et pret a developper. Voici ce qui se passe etape par etape :
498
+ </p>
499
+ <p data-lang="en">
500
+ The <code>ss init</code> command creates a complete, ready-to-develop project. Here's what happens step by step:
501
+ </p>
502
+
503
+ <ol class="steps-list">
504
+ <li>
505
+ <div class="step-content">
506
+ <h5 data-lang="fr">Choisir le nom du projet</h5>
507
+ <h5 data-lang="en">Choose the project name</h5>
508
+ <p data-lang="fr">Le nom devient le namespace C# racine de toute votre application : <code>MyApp.Domain</code>, <code>MyApp.Application</code>, <code>MyApp.Infrastructure</code>, <code>MyApp.Api</code>. Choisissez un identifiant C# valide (PascalCase, sans espaces ni tirets).</p>
509
+ <p data-lang="en">The name becomes the root C# namespace for your entire application: <code>MyApp.Domain</code>, <code>MyApp.Application</code>, <code>MyApp.Infrastructure</code>, <code>MyApp.Api</code>. Choose a valid C# identifier (PascalCase, no spaces or dashes).</p>
510
+ </div>
511
+ </li>
512
+ <li>
513
+ <div class="step-content">
514
+ <h5 data-lang="fr">Le wizard vous guide</h5>
515
+ <h5 data-lang="en">The wizard guides you</h5>
516
+ <p data-lang="fr">En mode interactif, le wizard pose deux questions : <strong>Multi-tenant ?</strong> (activez si votre application doit isoler les donnees par client/organisation) et <strong>Azure AD B2C ?</strong> (si l'authentification passe par Azure B2C, necessite multi-tenant). En mode rapide (<code>-y</code>), les valeurs par defaut sont utilisees (single-tenant, pas de B2C).</p>
517
+ <p data-lang="en">In interactive mode, the wizard asks two questions: <strong>Multi-tenant?</strong> (enable if your app needs to isolate data per client/organization) and <strong>Azure AD B2C?</strong> (if authentication goes through Azure B2C, requires multi-tenant). In quick mode (<code>-y</code>), defaults are used (single-tenant, no B2C).</p>
518
+ </div>
519
+ </li>
520
+ <li>
521
+ <div class="step-content">
522
+ <h5 data-lang="fr">La commande genere tout</h5>
523
+ <h5 data-lang="en">The command generates everything</h5>
524
+ <p data-lang="fr">Solution .NET 4 projets Clean Architecture, frontend React/Vite/Tailwind preconfigure, fichiers VS Code (debug, tasks, extensions recommandees), <code>CLAUDE.md</code> pour Claude Code, <code>.smartstack/config.json</code> qui identifie votre projet, et <code>Directory.Build.props</code> pour le TargetFramework partage.</p>
525
+ <p data-lang="en">.NET solution with 4 Clean Architecture projects, preconfigured React/Vite/Tailwind frontend, VS Code files (debug, tasks, recommended extensions), <code>CLAUDE.md</code> for Claude Code, <code>.smartstack/config.json</code> identifying your project, and <code>Directory.Build.props</code> for the shared TargetFramework.</p>
526
+ </div>
527
+ </li>
528
+ </ol>
529
+
530
+ <div class="code-block">
531
+ <button class="copy-btn">Copy</button>
532
+ <pre><code><span class="code-comment"># Creer un projet avec le wizard interactif</span>
533
+ <span class="code-cmd">ss init</span> <span class="code-arg">MyApp</span>
534
+
535
+ <span class="code-comment"># Mode rapide : valeurs par defaut (single-tenant, pas de B2C)</span>
536
+ <span class="code-cmd">ss init</span> <span class="code-arg">MyApp</span> <span class="code-flag">-y</span>
537
+
538
+ <span class="code-comment"># Multi-tenant avec Azure AD B2C</span>
539
+ <span class="code-cmd">ss init</span> <span class="code-arg">MyApp</span> <span class="code-flag">--multi-tenant --b2c</span>
540
+
541
+ <span class="code-comment"># Previsualiser sans rien creer</span>
542
+ <span class="code-cmd">ss init</span> <span class="code-arg">MyApp</span> <span class="code-flag">--dry-run</span></code></pre>
543
+ </div>
544
+
545
+ <div class="alert alert-warning">
546
+ <span class="alert-icon">&#9888;&#65039;</span>
547
+ <div class="alert-content">
548
+ <p data-lang="fr"><code>ss init</code> <strong>sans nom de projet</strong> fonctionne aussi &mdash; il configure SmartStack sur un projet .NET existant (CLAUDE.md, hooks, verification MCP) au lieu d'en creer un nouveau. Utile pour integrer SmartStack a un projet deja en cours.</p>
549
+ <p data-lang="en"><code>ss init</code> <strong>without a project name</strong> also works &mdash; it configures SmartStack on an existing .NET project (CLAUDE.md, hooks, MCP verification) instead of creating a new one. Useful for integrating SmartStack into an ongoing project.</p>
550
+ </div>
551
+ </div>
552
+ </section>
553
+
554
+ <!-- ============================================
555
+ 4. STRUCTURE DU PROJET
556
+ ============================================ -->
557
+ <section id="structure">
558
+ <h2>
559
+ <span data-lang="fr">Structure du projet</span>
560
+ <span data-lang="en">Project structure</span>
561
+ </h2>
562
+
563
+ <p data-lang="fr">Voici la structure generee par <code>ss init MyApp</code>, annotee avec le role de chaque element :</p>
564
+ <p data-lang="en">Here is the structure generated by <code>ss init MyApp</code>, annotated with the role of each element:</p>
565
+
566
+ <div class="code-block">
567
+ <pre><code>MyApp/
568
+ <span class="code-comment">&#9500;&#9472;&#9472; src/ &#8592; Backend .NET Clean Architecture</span>
569
+ &#9474; &#9500;&#9472;&#9472; MyApp.Domain/ <span class="code-comment">&#8592; Entites, interfaces, regles metier</span>
570
+ &#9474; &#9500;&#9472;&#9472; MyApp.Application/ <span class="code-comment">&#8592; Services, DTOs, IExtensionsDbContext</span>
571
+ &#9474; &#9500;&#9472;&#9472; MyApp.Infrastructure/ <span class="code-comment">&#8592; ExtensionsDbContext, Repositories, Migrations</span>
572
+ &#9474; &#9492;&#9472;&#9472; MyApp.Api/ <span class="code-comment">&#8592; Controllers, Swagger, Program.cs</span>
573
+ <span class="code-comment">&#9500;&#9472;&#9472; web/ &#8592; Frontend</span>
574
+ &#9474; &#9492;&#9472;&#9472; myapp-web/ <span class="code-comment">&#8592; React + Vite + Tailwind</span>
575
+ <span class="code-comment">&#9500;&#9472;&#9472; tests/ &#8592; Tests unitaires et integration</span>
576
+ &#9500;&#9472;&#9472; .smartstack/config.json <span class="code-comment">&#8592; Identite du projet SmartStack</span>
577
+ &#9500;&#9472;&#9472; CLAUDE.md <span class="code-comment">&#8592; Contexte IA pour Claude Code</span>
578
+ &#9500;&#9472;&#9472; Directory.Build.props <span class="code-comment">&#8592; TargetFramework partage (net10.0)</span>
579
+ &#9500;&#9472;&#9472; .vscode/ <span class="code-comment">&#8592; Debug, tasks, extensions recommandees</span>
580
+ &#9500;&#9472;&#9472; .ralph/ <span class="code-comment">&#8592; Configuration Ralph (IA)</span>
581
+ &#9492;&#9472;&#9472; MyApp.sln <span class="code-comment">&#8592; Solution Visual Studio</span></code></pre>
582
+ </div>
583
+
584
+ <h3 data-lang="fr">Fichiers cles</h3>
585
+ <h3 data-lang="en">Key files</h3>
586
+
587
+ <div class="card-grid">
588
+ <div class="card">
589
+ <div class="card-header">
590
+ <div class="card-icon" style="background: var(--primary);">&#9881;</div>
591
+ <div>
592
+ <div class="card-title">.smartstack/config.json</div>
593
+ <div class="card-subtitle" data-lang="fr">Identite du projet</div>
594
+ <div class="card-subtitle" data-lang="en">Project identity</div>
595
+ </div>
596
+ </div>
597
+ <div class="card-body">
598
+ <p data-lang="fr">Contient le type de projet (client vs socle), le nom du DbContext, le namespace racine et la version SmartStack installee. Toutes les commandes CLI (<code>ss upgrade</code>, <code>ss doctor</code>) lisent ce fichier pour savoir comment traiter votre projet. Ne le modifiez pas manuellement.</p>
599
+ <p data-lang="en">Contains the project type (client vs foundation), DbContext name, root namespace and installed SmartStack version. All CLI commands (<code>ss upgrade</code>, <code>ss doctor</code>) read this file to know how to handle your project. Do not modify it manually.</p>
600
+ </div>
601
+ </div>
602
+
603
+ <div class="card">
604
+ <div class="card-header">
605
+ <div class="card-icon" style="background: var(--secondary);">&#128221;</div>
606
+ <div>
607
+ <div class="card-title">CLAUDE.md</div>
608
+ <div class="card-subtitle" data-lang="fr">Contexte IA</div>
609
+ <div class="card-subtitle" data-lang="en">AI context</div>
610
+ </div>
611
+ </div>
612
+ <div class="card-body">
613
+ <p data-lang="fr">Le contexte que Claude Code utilise pour comprendre votre projet. Genere automatiquement avec les conventions SmartStack, la structure du projet et les regles a respecter. Vous pouvez l'enrichir avec vos propres conventions et regles metier.</p>
614
+ <p data-lang="en">The context Claude Code uses to understand your project. Auto-generated with SmartStack conventions, project structure and rules to follow. You can enrich it with your own conventions and business rules.</p>
615
+ </div>
616
+ </div>
617
+
618
+ <div class="card">
619
+ <div class="card-header">
620
+ <div class="card-icon" style="background: var(--accent);">&#128268;</div>
621
+ <div>
622
+ <div class="card-title">appsettings.json</div>
623
+ <div class="card-subtitle" data-lang="fr">Configuration API</div>
624
+ <div class="card-subtitle" data-lang="en">API configuration</div>
625
+ </div>
626
+ </div>
627
+ <div class="card-body">
628
+ <p data-lang="fr">Dans <code>src/MyApp.Api/</code>. C'est ici que vous definissez la connection string SQL Server, les parametres JWT, les URLs autorisees (CORS), et la configuration multi-tenant si activee. C'est le premier fichier a configurer apres <code>ss init</code>.</p>
629
+ <p data-lang="en">In <code>src/MyApp.Api/</code>. This is where you define the SQL Server connection string, JWT settings, allowed URLs (CORS), and multi-tenant configuration if enabled. It's the first file to configure after <code>ss init</code>.</p>
630
+ </div>
631
+ </div>
632
+
633
+ <div class="card">
634
+ <div class="card-header">
635
+ <div class="card-icon" style="background: var(--success);">&#9878;</div>
636
+ <div>
637
+ <div class="card-title">Directory.Build.props</div>
638
+ <div class="card-subtitle" data-lang="fr">Framework partage</div>
639
+ <div class="card-subtitle" data-lang="en">Shared framework</div>
640
+ </div>
641
+ </div>
642
+ <div class="card-body">
643
+ <p data-lang="fr">Centralise le <code>TargetFramework</code> (net10.0) pour tous les projets .NET. Au lieu de definir la version dans chaque <code>.csproj</code>, ce fichier unique simplifie les futures mises a jour de framework.</p>
644
+ <p data-lang="en">Centralizes the <code>TargetFramework</code> (net10.0) for all .NET projects. Instead of defining the version in each <code>.csproj</code>, this single file simplifies future framework upgrades.</p>
645
+ </div>
646
+ </div>
647
+ </div>
648
+
649
+ <!-- Frontend -->
650
+ <h3>Frontend &mdash; React + Vite + Tailwind</h3>
651
+
652
+ <p data-lang="fr">
653
+ Le frontend est une application React moderne qui s'integre au socle SmartStack via deux mecanismes :
654
+ </p>
655
+ <p data-lang="en">
656
+ The frontend is a modern React application that integrates with the SmartStack foundation through two mechanisms:
657
+ </p>
658
+
659
+ <ul>
660
+ <li data-lang="fr"><strong><code>SmartStackProvider</code></strong> &mdash; wrape votre application et fournit l'authentification, les roles, le theming et les notifications. Vous n'avez rien a configurer, c'est deja en place dans <code>main.tsx</code>.</li>
661
+ <li data-lang="en"><strong><code>SmartStackProvider</code></strong> &mdash; wraps your application and provides authentication, roles, theming and notifications. You don't need to configure anything, it's already set up in <code>main.tsx</code>.</li>
662
+ <li data-lang="fr"><strong><code>mergeRoutes()</code></strong> &mdash; fusionne vos routes metier avec les routes SmartStack (login, profil, admin, gestion des roles...). Vous developpez vos pages dans <code>src/pages/</code> et les declarez dans <code>App.tsx</code>.</li>
663
+ <li data-lang="en"><strong><code>mergeRoutes()</code></strong> &mdash; merges your business routes with SmartStack routes (login, profile, admin, role management...). You develop your pages in <code>src/pages/</code> and declare them in <code>App.tsx</code>.</li>
664
+ </ul>
665
+ </section>
666
+
667
+ <!-- ============================================
668
+ 5. CYCLE DE DEVELOPPEMENT
669
+ ============================================ -->
670
+ <section id="development">
671
+ <h2>
672
+ <span data-lang="fr">Cycle de developpement</span>
673
+ <span data-lang="en">Development cycle</span>
674
+ </h2>
675
+
676
+ <p data-lang="fr">
677
+ Voici le flux typique quand vous ajoutez une fonctionnalite a votre projet. Chaque etape a un skill ou un outil dedie qui vous guide :
678
+ </p>
679
+ <p data-lang="en">
680
+ Here is the typical flow when adding a feature to your project. Each step has a dedicated skill or tool to guide you:
681
+ </p>
682
+
683
+ <!-- SVG: Development Pipeline -->
684
+ <div class="svg-diagram">
685
+ <svg viewBox="0 0 780 170" xmlns="http://www.w3.org/2000/svg" style="font-family: 'Inter', system-ui, sans-serif; width: 100%; max-width: 780px; height: auto; display: block; margin: 1.5rem auto;">
686
+ <defs>
687
+ <marker id="arrowRight" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto">
688
+ <path d="M0,0 L8,4 L0,8 z" fill="#475569"/>
689
+ </marker>
690
+ </defs>
691
+
692
+ <!-- Step 1: Entity -->
693
+ <rect x="4" y="12" width="108" height="54" rx="8" fill="#1e293b" stroke="#6366f1" stroke-width="2"/>
694
+ <text x="58" y="36" text-anchor="middle" fill="#c8d0dc" font-weight="600" font-size="11.5" data-lang="fr">1. Entite</text>
695
+ <text x="58" y="36" text-anchor="middle" fill="#c8d0dc" font-weight="600" font-size="11.5" data-lang="en">1. Entity</text>
696
+ <text x="58" y="54" text-anchor="middle" fill="#6366f1" font-size="9.5">Domain</text>
697
+
698
+ <!-- Arrow 1→2 -->
699
+ <line x1="116" y1="39" x2="132" y2="39" stroke="#475569" stroke-width="1.5" marker-end="url(#arrowRight)"/>
700
+
701
+ <!-- Step 2: DbContext -->
702
+ <rect x="136" y="12" width="108" height="54" rx="8" fill="#1e293b" stroke="#06b6d4" stroke-width="2"/>
703
+ <text x="190" y="36" text-anchor="middle" fill="#c8d0dc" font-weight="600" font-size="11.5">2. DbContext</text>
704
+ <text x="190" y="54" text-anchor="middle" fill="#06b6d4" font-size="9.5">Infrastructure</text>
705
+
706
+ <!-- Arrow 2→3 -->
707
+ <line x1="248" y1="39" x2="264" y2="39" stroke="#475569" stroke-width="1.5" marker-end="url(#arrowRight)"/>
708
+
709
+ <!-- Step 3: Migration -->
710
+ <rect x="268" y="12" width="108" height="54" rx="8" fill="#1e293b" stroke="#22c55e" stroke-width="2"/>
711
+ <text x="322" y="36" text-anchor="middle" fill="#c8d0dc" font-weight="600" font-size="11.5">3. Migration</text>
712
+ <text x="322" y="54" text-anchor="middle" fill="#22c55e" font-size="9.5">/efcore</text>
713
+
714
+ <!-- Arrow 3→4 -->
715
+ <line x1="380" y1="39" x2="396" y2="39" stroke="#475569" stroke-width="1.5" marker-end="url(#arrowRight)"/>
716
+
717
+ <!-- Step 4: Service -->
718
+ <rect x="400" y="12" width="108" height="54" rx="8" fill="#1e293b" stroke="#3b82f6" stroke-width="2"/>
719
+ <text x="454" y="36" text-anchor="middle" fill="#c8d0dc" font-weight="600" font-size="11.5">4. Service</text>
720
+ <text x="454" y="54" text-anchor="middle" fill="#3b82f6" font-size="9.5">Application</text>
721
+
722
+ <!-- Arrow 4→5 -->
723
+ <line x1="512" y1="39" x2="528" y2="39" stroke="#475569" stroke-width="1.5" marker-end="url(#arrowRight)"/>
724
+
725
+ <!-- Step 5: Controller -->
726
+ <rect x="532" y="12" width="108" height="54" rx="8" fill="#1e293b" stroke="#f97316" stroke-width="2"/>
727
+ <text x="586" y="36" text-anchor="middle" fill="#c8d0dc" font-weight="600" font-size="11.5">5. Controller</text>
728
+ <text x="586" y="54" text-anchor="middle" fill="#f97316" font-size="9.5">Api</text>
729
+
730
+ <!-- Arrow 5→6 -->
731
+ <line x1="644" y1="39" x2="660" y2="39" stroke="#475569" stroke-width="1.5" marker-end="url(#arrowRight)"/>
732
+
733
+ <!-- Step 6: Page -->
734
+ <rect x="664" y="12" width="108" height="54" rx="8" fill="#1e293b" stroke="#06b6d4" stroke-width="2"/>
735
+ <text x="718" y="36" text-anchor="middle" fill="#c8d0dc" font-weight="600" font-size="11.5">6. Page</text>
736
+ <text x="718" y="54" text-anchor="middle" fill="#06b6d4" font-size="9.5">React</text>
737
+
738
+ <!-- Bottom: skill labels -->
739
+ <text x="58" y="90" text-anchor="middle" fill="#8a9bb0" font-size="9">Product.cs</text>
740
+ <text x="190" y="90" text-anchor="middle" fill="#8a9bb0" font-size="9" data-lang="fr">DbSet&lt;Product&gt;</text>
741
+ <text x="190" y="90" text-anchor="middle" fill="#8a9bb0" font-size="9" data-lang="en">DbSet&lt;Product&gt;</text>
742
+ <text x="322" y="90" text-anchor="middle" fill="#22c55e" font-size="9" font-weight="600">/efcore migration</text>
743
+ <text x="322" y="104" text-anchor="middle" fill="#22c55e" font-size="9" font-weight="600">/efcore db-deploy</text>
744
+ <text x="454" y="90" text-anchor="middle" fill="#8a9bb0" font-size="9">ProductService</text>
745
+ <text x="586" y="90" text-anchor="middle" fill="#8a9bb0" font-size="9">ProductController</text>
746
+ <text x="718" y="90" text-anchor="middle" fill="#8a9bb0" font-size="9">ProductPage.tsx</text>
747
+
748
+ <!-- Automation bar -->
749
+ <rect x="4" y="125" width="772" height="36" rx="8" fill="#1e293b" stroke="#eab308" stroke-width="1.5" stroke-dasharray="6,3"/>
750
+ <text x="390" y="148" text-anchor="middle" fill="#eab308" font-size="11" font-weight="600" data-lang="fr">&#9889; /application &mdash; orchestre tout le processus automatiquement</text>
751
+ <text x="390" y="148" text-anchor="middle" fill="#eab308" font-size="11" font-weight="600" data-lang="en">&#9889; /application &mdash; orchestrates the entire process automatically</text>
752
+ </svg>
753
+ </div>
754
+
755
+ <p data-lang="fr">
756
+ Vous pouvez realiser chaque etape manuellement, ou generer un module complet (entite + service + controller + page) avec <strong><code>/application</code></strong>.
757
+ </p>
758
+ <p data-lang="en">
759
+ You can perform each step manually, or generate a complete module (entity + service + controller + page) with <strong><code>/application</code></strong>.
760
+ </p>
761
+
762
+ <div class="alert alert-info">
763
+ <span class="alert-icon">&#128279;</span>
764
+ <div class="alert-content">
765
+ <h5 data-lang="fr">Pages liees</h5>
766
+ <h5 data-lang="en">Related pages</h5>
767
+ <p data-lang="fr">
768
+ <a href="efcore.html">EF Core</a> &mdash; workflow complet des migrations (conflits, rebase, squash) &bull;
769
+ <a href="gitflow.html">GitFlow</a> &mdash; gestion des branches et versioning
770
+ </p>
771
+ <p data-lang="en">
772
+ <a href="efcore.html">EF Core</a> &mdash; complete migration workflow (conflicts, rebase, squash) &bull;
773
+ <a href="gitflow.html">GitFlow</a> &mdash; branch management and versioning
774
+ </p>
775
+ </div>
776
+ </div>
777
+ </section>
778
+
779
+ <!-- ============================================
780
+ 6. MAINTENIR VOTRE PROJET
781
+ ============================================ -->
782
+ <section id="maintenance">
783
+ <h2>
784
+ <span data-lang="fr">Maintenir votre projet</span>
785
+ <span data-lang="en">Maintain your project</span>
786
+ </h2>
787
+
788
+ <p data-lang="fr">
789
+ Trois commandes couvrent la maintenance de votre environnement SmartStack. Chacune a un perimetre different &mdash; voici quand et pourquoi les utiliser :
790
+ </p>
791
+ <p data-lang="en">
792
+ Three commands cover your SmartStack environment maintenance. Each has a different scope &mdash; here's when and why to use them:
793
+ </p>
794
+
795
+ <div class="card-grid">
796
+ <div class="card">
797
+ <div class="card-header">
798
+ <div class="card-icon" style="background: var(--accent);">&#128260;</div>
799
+ <div>
800
+ <div class="card-title">ss update</div>
801
+ <div class="card-subtitle" data-lang="fr">Outillage Claude Code</div>
802
+ <div class="card-subtitle" data-lang="en">Claude Code tooling</div>
803
+ </div>
804
+ </div>
805
+ <div class="card-body">
806
+ <p data-lang="fr">
807
+ Met a jour les <strong>skills, agents et hooks</strong> de Claude Code vers la derniere version. Utilisez-la quand SmartStack publie de nouvelles capacites IA (nouveaux skills, agents ameliores, hooks de securite). Ne touche <em>jamais</em> a votre code ni a vos packages &mdash; c'est uniquement l'outillage Claude Code qui evolue.
808
+ </p>
809
+ <p data-lang="en">
810
+ Updates Claude Code <strong>skills, agents and hooks</strong> to the latest version. Use it when SmartStack publishes new AI capabilities (new skills, improved agents, security hooks). <em>Never</em> touches your code or packages &mdash; only the Claude Code tooling evolves.
811
+ </p>
812
+ <p><code>--local</code> <span data-lang="fr">installe dans <code>.claude/</code> du projet</span><span data-lang="en">installs in the project's <code>.claude/</code></span> &bull; <code>--dry-run</code> <span data-lang="fr">previsualise</span><span data-lang="en">previews</span></p>
813
+ </div>
814
+ </div>
815
+
816
+ <div class="card">
817
+ <div class="card-header">
818
+ <div class="card-icon" style="background: var(--secondary);">&#128230;</div>
819
+ <div>
820
+ <div class="card-title">ss upgrade</div>
821
+ <div class="card-subtitle" data-lang="fr">Packages du projet</div>
822
+ <div class="card-subtitle" data-lang="en">Project packages</div>
823
+ </div>
824
+ </div>
825
+ <div class="card-body">
826
+ <p data-lang="fr">
827
+ Met a jour les <strong>packages SmartStack</strong> dans votre projet : NuGet (SmartStack, EF Core, JWT, Swashbuckle...) dans tous les projets .NET, et npm (<code>@atlashub/smartstack</code>) dans le frontend. Si necessaire, applique automatiquement des <strong>migrations de code</strong> pour adapter votre projet aux breaking changes.
828
+ </p>
829
+ <p data-lang="en">
830
+ Updates <strong>SmartStack packages</strong> in your project: NuGet (SmartStack, EF Core, JWT, Swashbuckle...) in all .NET projects, and npm (<code>@atlashub/smartstack</code>) in the frontend. If needed, automatically applies <strong>code migrations</strong> to adapt your project to breaking changes.
831
+ </p>
832
+ <p><code>--preview</code> <span data-lang="fr">versions prerelease</span><span data-lang="en">prerelease versions</span> &bull; <code>--dry-run</code> <span data-lang="fr">liste sans appliquer</span><span data-lang="en">list without applying</span></p>
833
+ </div>
834
+ </div>
835
+
836
+ <div class="card">
837
+ <div class="card-header">
838
+ <div class="card-icon" style="background: var(--success);">&#129658;</div>
839
+ <div>
840
+ <div class="card-title">ss doctor</div>
841
+ <div class="card-subtitle" data-lang="fr">Diagnostic complet</div>
842
+ <div class="card-subtitle" data-lang="en">Full diagnostic</div>
843
+ </div>
844
+ </div>
845
+ <div class="card-body">
846
+ <p data-lang="fr">
847
+ Diagnostique <strong>l'ensemble de votre environnement</strong> : versions (Node.js, .NET, Git, Claude Code), etat du MCP, licence, composants installes, configuration. Affiche les correctifs recommandes pour chaque probleme detecte. Lancez-la quand quelque chose ne fonctionne pas ou apres une installation fraiche.
848
+ </p>
849
+ <p data-lang="en">
850
+ Diagnoses your <strong>entire environment</strong>: versions (Node.js, .NET, Git, Claude Code), MCP state, license, installed components, configuration. Shows recommended fixes for each detected issue. Run it when something doesn't work or after a fresh installation.
851
+ </p>
852
+ <p><code>--json</code> <span data-lang="fr">export JSON</span><span data-lang="en">JSON export</span> &bull; <code>--verbose</code> <span data-lang="fr">details complets</span><span data-lang="en">full details</span></p>
853
+ </div>
854
+ </div>
855
+ </div>
856
+ </section>
857
+
858
+ <!-- ============================================
859
+ 7. PREMIERS PAS
860
+ ============================================ -->
861
+ <section id="first-steps">
862
+ <h2>
863
+ <span data-lang="fr">Premiers pas apres l'initialisation</span>
864
+ <span data-lang="en">First steps after initialization</span>
865
+ </h2>
866
+
867
+ <p data-lang="fr">
868
+ Votre projet est cree. Voici les etapes pour le rendre operationnel :
869
+ </p>
870
+ <p data-lang="en">
871
+ Your project is created. Here are the steps to make it operational:
872
+ </p>
873
+
874
+ <ol class="steps-list">
875
+ <li>
876
+ <div class="step-content">
877
+ <h5 data-lang="fr">Configurer la base de donnees</h5>
878
+ <h5 data-lang="en">Configure the database</h5>
879
+ <p data-lang="fr">
880
+ Ouvrez <code>src/MyApp.Api/appsettings.json</code>, section <code>ConnectionStrings</code>. Remplacez la valeur par defaut par votre serveur SQL Server :
881
+ </p>
882
+ <p data-lang="en">
883
+ Open <code>src/MyApp.Api/appsettings.json</code>, section <code>ConnectionStrings</code>. Replace the default value with your SQL Server:
884
+ </p>
885
+ <div class="code-block">
886
+ <button class="copy-btn">Copy</button>
887
+ <pre><code>"ConnectionStrings": {
888
+ "DefaultConnection": "Server=localhost;Database=MyApp;Trusted_Connection=true;TrustServerCertificate=true"
889
+ }</code></pre>
890
+ </div>
891
+ </div>
892
+ </li>
893
+ <li>
894
+ <div class="step-content">
895
+ <h5 data-lang="fr">Initialiser GitFlow</h5>
896
+ <h5 data-lang="en">Initialize GitFlow</h5>
897
+ <p data-lang="fr">
898
+ Dans Claude Code, tapez <code>/gitflow init</code>. Cela configure les branches <code>main</code>/<code>develop</code>, le versioning SemVer et les worktrees Git. Indispensable avant de commencer a developper en equipe.
899
+ </p>
900
+ <p data-lang="en">
901
+ In Claude Code, type <code>/gitflow init</code>. This configures <code>main</code>/<code>develop</code> branches, SemVer versioning and Git worktrees. Essential before starting team development.
902
+ </p>
903
+ </div>
904
+ </li>
905
+ <li>
906
+ <div class="step-content">
907
+ <h5 data-lang="fr">Creer la migration initiale</h5>
908
+ <h5 data-lang="en">Create the initial migration</h5>
909
+ <p data-lang="fr">
910
+ Dans Claude Code : <code>/efcore migration</code>. Le MCP suggere le nom de la migration et valide son contenu. Cette premiere migration cree les tables de votre <code>ExtensionsDbContext</code>.
911
+ </p>
912
+ <p data-lang="en">
913
+ In Claude Code: <code>/efcore migration</code>. The MCP suggests the migration name and validates its content. This first migration creates the tables for your <code>ExtensionsDbContext</code>.
914
+ </p>
915
+ </div>
916
+ </li>
917
+ <li>
918
+ <div class="step-content">
919
+ <h5 data-lang="fr">Deployer la base de donnees</h5>
920
+ <h5 data-lang="en">Deploy the database</h5>
921
+ <p data-lang="fr">
922
+ Dans Claude Code : <code>/efcore db-deploy</code>. Applique toutes les migrations en attente et cree les tables dans SQL Server. Vous pouvez verifier l'etat avec <code>/efcore db-status</code>.
923
+ </p>
924
+ <p data-lang="en">
925
+ In Claude Code: <code>/efcore db-deploy</code>. Applies all pending migrations and creates the tables in SQL Server. You can check the state with <code>/efcore db-status</code>.
926
+ </p>
927
+ </div>
928
+ </li>
929
+ <li>
930
+ <div class="step-content">
931
+ <h5 data-lang="fr">Installer le frontend</h5>
932
+ <h5 data-lang="en">Install the frontend</h5>
933
+ <p data-lang="fr">
934
+ Dans le terminal, placez-vous dans le dossier frontend :
935
+ </p>
936
+ <p data-lang="en">
937
+ In the terminal, navigate to the frontend folder:
938
+ </p>
939
+ <div class="code-block">
940
+ <button class="copy-btn">Copy</button>
941
+ <pre><code><span class="code-cmd">cd</span> <span class="code-arg">web/myapp-web</span>
942
+ <span class="code-cmd">npm install</span></code></pre>
943
+ </div>
944
+ </div>
945
+ </li>
946
+ <li>
947
+ <div class="step-content">
948
+ <h5 data-lang="fr">Commencer a developper</h5>
949
+ <h5 data-lang="en">Start developing</h5>
950
+ <p data-lang="fr">
951
+ Creez votre premiere branche avec <code>/gitflow start feature ma-feature</code>, puis utilisez <code>/application</code> pour generer un module complet.
952
+ </p>
953
+ <p data-lang="en">
954
+ Create your first branch with <code>/gitflow start feature my-feature</code>, then use <code>/application</code> to generate a complete module.
955
+ </p>
956
+ </div>
957
+ </li>
958
+ </ol>
959
+ </section>
960
+
961
+ <!-- ============================================
962
+ 8. WSL & UBUNTU & TMUX
963
+ ============================================ -->
964
+ <section id="wsl-ubuntu">
965
+ <h2>
966
+ <span data-lang="fr">Environnement Linux sur Windows (WSL)</span>
967
+ <span data-lang="en">Linux Environment on Windows (WSL)</span>
968
+ </h2>
969
+
970
+ <p data-lang="fr">
971
+ SmartStack fonctionne nativement sous Windows, mais l'utilisation d'un <strong>terminal Linux via WSL</strong> (Windows Subsystem for Linux) offre un environnement de developpement plus fluide et performant &mdash; meilleur support de Git, scripts bash natifs, et outils comme <code>tmux</code> pour gerer plusieurs sessions.
972
+ </p>
973
+ <p data-lang="en">
974
+ SmartStack works natively on Windows, but using a <strong>Linux terminal via WSL</strong> (Windows Subsystem for Linux) provides a smoother and more performant development environment &mdash; better Git support, native bash scripts, and tools like <code>tmux</code> for managing multiple sessions.
975
+ </p>
976
+
977
+ <!-- ── WSL2 Installation ── -->
978
+ <h3>
979
+ <span data-lang="fr">1. Installer WSL2 et Ubuntu</span>
980
+ <span data-lang="en">1. Install WSL2 and Ubuntu</span>
981
+ </h3>
982
+
983
+ <p data-lang="fr">
984
+ Ouvrez un terminal <strong>PowerShell en administrateur</strong> et lancez la commande suivante. Elle installe WSL2 avec Ubuntu comme distribution par defaut :
985
+ </p>
986
+ <p data-lang="en">
987
+ Open a <strong>PowerShell terminal as Administrator</strong> and run the following command. It installs WSL2 with Ubuntu as the default distribution:
988
+ </p>
989
+
990
+ <div class="code-block">
991
+ <button class="copy-btn">Copy</button>
992
+ <pre><code><span class="code-comment"># PowerShell (Administrateur) — installe WSL2 + Ubuntu</span>
993
+ <span class="code-cmd">wsl</span> <span class="code-flag">--install</span></code></pre>
994
+ </div>
995
+
996
+ <p data-lang="fr">
997
+ Redemarrez votre machine apres l'installation. Au premier lancement d'Ubuntu, vous devrez creer un <strong>nom d'utilisateur</strong> et un <strong>mot de passe</strong> Linux (independants de votre compte Windows).
998
+ </p>
999
+ <p data-lang="en">
1000
+ Restart your machine after installation. On first Ubuntu launch, you'll need to create a Linux <strong>username</strong> and <strong>password</strong> (independent from your Windows account).
1001
+ </p>
1002
+
1003
+ <div class="alert alert-info">
1004
+ <span class="alert-icon">&#128161;</span>
1005
+ <div class="alert-content">
1006
+ <p data-lang="fr">
1007
+ Si WSL est deja installe mais avec la version 1, mettez a jour vers WSL2 :
1008
+ <code>wsl --set-default-version 2</code>. WSL2 utilise un vrai noyau Linux et offre de meilleures performances I/O.
1009
+ </p>
1010
+ <p data-lang="en">
1011
+ If WSL is already installed but on version 1, upgrade to WSL2:
1012
+ <code>wsl --set-default-version 2</code>. WSL2 uses a real Linux kernel and offers better I/O performance.
1013
+ </p>
1014
+ </div>
1015
+ </div>
1016
+
1017
+ <p data-lang="fr">Pour verifier que tout fonctionne :</p>
1018
+ <p data-lang="en">To verify everything works:</p>
1019
+
1020
+ <div class="code-block">
1021
+ <button class="copy-btn">Copy</button>
1022
+ <pre><code><span class="code-comment"># PowerShell — verifier la version et la distribution</span>
1023
+ <span class="code-cmd">wsl</span> <span class="code-flag">--list --verbose</span>
1024
+
1025
+ <span class="code-comment"># Resultat attendu :</span>
1026
+ <span class="code-comment"># NAME STATE VERSION</span>
1027
+ <span class="code-comment"># * Ubuntu Running 2</span></code></pre>
1028
+ </div>
1029
+
1030
+ <!-- ── Ubuntu Configuration ── -->
1031
+ <h3>
1032
+ <span data-lang="fr">2. Configurer Ubuntu</span>
1033
+ <span data-lang="en">2. Configure Ubuntu</span>
1034
+ </h3>
1035
+
1036
+ <p data-lang="fr">
1037
+ Une fois dans le terminal Ubuntu, commencez par mettre a jour les paquets systeme, puis installez les outils de developpement essentiels :
1038
+ </p>
1039
+ <p data-lang="en">
1040
+ Once inside the Ubuntu terminal, start by updating system packages, then install essential development tools:
1041
+ </p>
1042
+
1043
+ <div class="code-block">
1044
+ <button class="copy-btn">Copy</button>
1045
+ <pre><code><span class="code-comment"># Mettre a jour les paquets systeme</span>
1046
+ <span class="code-cmd">sudo apt update</span> && <span class="code-cmd">sudo apt upgrade</span> <span class="code-flag">-y</span>
1047
+
1048
+ <span class="code-comment"># Installer les outils de base</span>
1049
+ <span class="code-cmd">sudo apt install</span> <span class="code-flag">-y</span> <span class="code-arg">git curl wget unzip build-essential</span></code></pre>
1050
+ </div>
1051
+
1052
+ <h4>
1053
+ <span data-lang="fr">Installer Node.js (via nvm)</span>
1054
+ <span data-lang="en">Install Node.js (via nvm)</span>
1055
+ </h4>
1056
+
1057
+ <p data-lang="fr">
1058
+ Utilisez <strong>nvm</strong> (Node Version Manager) pour installer Node.js &mdash; cela permet de gerer facilement plusieurs versions :
1059
+ </p>
1060
+ <p data-lang="en">
1061
+ Use <strong>nvm</strong> (Node Version Manager) to install Node.js &mdash; it allows easy management of multiple versions:
1062
+ </p>
1063
+
1064
+ <div class="code-block">
1065
+ <button class="copy-btn">Copy</button>
1066
+ <pre><code><span class="code-comment"># Installer nvm</span>
1067
+ <span class="code-cmd">curl</span> <span class="code-flag">-o-</span> https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | <span class="code-cmd">bash</span>
1068
+
1069
+ <span class="code-comment"># Recharger le profil</span>
1070
+ <span class="code-cmd">source</span> <span class="code-arg">~/.bashrc</span>
1071
+
1072
+ <span class="code-comment"># Installer la derniere version LTS de Node.js</span>
1073
+ <span class="code-cmd">nvm install</span> <span class="code-flag">--lts</span>
1074
+
1075
+ <span class="code-comment"># Verifier</span>
1076
+ <span class="code-cmd">node</span> <span class="code-flag">--version</span>
1077
+ <span class="code-cmd">npm</span> <span class="code-flag">--version</span></code></pre>
1078
+ </div>
1079
+
1080
+ <h4>
1081
+ <span data-lang="fr">Installer .NET SDK</span>
1082
+ <span data-lang="en">Install .NET SDK</span>
1083
+ </h4>
1084
+
1085
+ <div class="code-block">
1086
+ <button class="copy-btn">Copy</button>
1087
+ <pre><code><span class="code-comment"># Installer le SDK .NET (Ubuntu)</span>
1088
+ <span class="code-cmd">sudo apt install</span> <span class="code-flag">-y</span> <span class="code-arg">dotnet-sdk-10.0</span>
1089
+
1090
+ <span class="code-comment"># Verifier</span>
1091
+ <span class="code-cmd">dotnet</span> <span class="code-flag">--version</span></code></pre>
1092
+ </div>
1093
+
1094
+ <div class="alert alert-warning">
1095
+ <span class="alert-icon">&#9888;&#65039;</span>
1096
+ <div class="alert-content">
1097
+ <p data-lang="fr">
1098
+ Si le paquet <code>dotnet-sdk-10.0</code> n'est pas disponible, ajoutez d'abord le depot Microsoft :
1099
+ </p>
1100
+ <p data-lang="en">
1101
+ If the <code>dotnet-sdk-10.0</code> package is not available, add the Microsoft repository first:
1102
+ </p>
1103
+ <div class="code-block">
1104
+ <button class="copy-btn">Copy</button>
1105
+ <pre><code><span class="code-cmd">wget</span> https://packages.microsoft.com/config/ubuntu/$(lsb_release -rs)/packages-microsoft-prod.deb <span class="code-flag">-O</span> packages-microsoft-prod.deb
1106
+ <span class="code-cmd">sudo dpkg</span> <span class="code-flag">-i</span> packages-microsoft-prod.deb
1107
+ <span class="code-cmd">rm</span> packages-microsoft-prod.deb
1108
+ <span class="code-cmd">sudo apt update</span>
1109
+ <span class="code-cmd">sudo apt install</span> <span class="code-flag">-y</span> <span class="code-arg">dotnet-sdk-10.0</span></code></pre>
1110
+ </div>
1111
+ </div>
1112
+ </div>
1113
+
1114
+ <!-- ── TMUX Installation ── -->
1115
+ <h3>
1116
+ <span data-lang="fr">3. Installer et configurer tmux</span>
1117
+ <span data-lang="en">3. Install and configure tmux</span>
1118
+ </h3>
1119
+
1120
+ <p data-lang="fr">
1121
+ <strong>tmux</strong> (terminal multiplexer) vous permet de diviser votre terminal en plusieurs panneaux, de detacher des sessions et de garder des processus en cours meme si vous fermez votre terminal. C'est particulierement utile pour lancer simultanement le backend .NET, le frontend React et Claude Code.
1122
+ </p>
1123
+ <p data-lang="en">
1124
+ <strong>tmux</strong> (terminal multiplexer) lets you split your terminal into multiple panes, detach sessions and keep processes running even if you close your terminal. It's particularly useful for simultaneously running the .NET backend, React frontend and Claude Code.
1125
+ </p>
1126
+
1127
+ <div class="code-block">
1128
+ <button class="copy-btn">Copy</button>
1129
+ <pre><code><span class="code-comment"># Installer tmux</span>
1130
+ <span class="code-cmd">sudo apt install</span> <span class="code-flag">-y</span> <span class="code-arg">tmux</span>
1131
+
1132
+ <span class="code-comment"># Verifier la version</span>
1133
+ <span class="code-cmd">tmux</span> <span class="code-flag">-V</span></code></pre>
1134
+ </div>
1135
+
1136
+ <!-- ── TMUX Mouse ── -->
1137
+ <h4>
1138
+ <span data-lang="fr">Activer la souris dans tmux</span>
1139
+ <span data-lang="en">Enable mouse in tmux</span>
1140
+ </h4>
1141
+
1142
+ <p data-lang="fr">
1143
+ Par defaut, tmux ne repond pas aux clics de souris. Pour activer le support complet de la souris (clic pour changer de panneau, scroll, redimensionnement, selection de texte), creez ou modifiez le fichier <code>~/.tmux.conf</code> :
1144
+ </p>
1145
+ <p data-lang="en">
1146
+ By default, tmux does not respond to mouse clicks. To enable full mouse support (click to switch panes, scroll, resize, text selection), create or edit the <code>~/.tmux.conf</code> file:
1147
+ </p>
1148
+
1149
+ <div class="code-block">
1150
+ <button class="copy-btn">Copy</button>
1151
+ <pre><code><span class="code-comment"># Creer/editer la configuration tmux</span>
1152
+ <span class="code-cmd">cat</span> &lt;&lt; 'EOF' &gt; <span class="code-arg">~/.tmux.conf</span>
1153
+ <span class="code-comment"># ── Activer la souris ──</span>
1154
+ set -g mouse on
1155
+
1156
+ <span class="code-comment"># ── Ameliorer le support des couleurs ──</span>
1157
+ set -g default-terminal "tmux-256color"
1158
+ set -ag terminal-overrides ",xterm-256color:RGB"
1159
+
1160
+ <span class="code-comment"># ── Historique de scroll etendu (10 000 lignes) ──</span>
1161
+ set -g history-limit 10000
1162
+
1163
+ <span class="code-comment"># ── Commencer les indices de fenetres/panneaux a 1 ──</span>
1164
+ set -g base-index 1
1165
+ setw -g pane-base-index 1
1166
+
1167
+ <span class="code-comment"># ── Raccourcis pratiques pour diviser les panneaux ──</span>
1168
+ <span class="code-comment"># Ctrl+b puis | = split vertical</span>
1169
+ bind | split-window -h -c "#{pane_current_path}"
1170
+ <span class="code-comment"># Ctrl+b puis - = split horizontal</span>
1171
+ bind - split-window -v -c "#{pane_current_path}"
1172
+
1173
+ <span class="code-comment"># ── Recharger la config avec Ctrl+b puis r ──</span>
1174
+ bind r source-file ~/.tmux.conf \; display "Config rechargee!"
1175
+ EOF</code></pre>
1176
+ </div>
1177
+
1178
+ <p data-lang="fr">
1179
+ Si tmux est deja en cours d'execution, rechargez la configuration sans le fermer :
1180
+ </p>
1181
+ <p data-lang="en">
1182
+ If tmux is already running, reload the configuration without closing it:
1183
+ </p>
1184
+
1185
+ <div class="code-block">
1186
+ <button class="copy-btn">Copy</button>
1187
+ <pre><code><span class="code-comment"># Depuis l'interieur de tmux : Ctrl+b puis :</span>
1188
+ <span class="code-comment"># Tapez la commande suivante :</span>
1189
+ source-file ~/.tmux.conf
1190
+
1191
+ <span class="code-comment"># Ou si vous avez ajoute le raccourci ci-dessus :</span>
1192
+ <span class="code-comment"># Ctrl+b puis r</span></code></pre>
1193
+ </div>
1194
+
1195
+ <!-- ── TMUX Usage ── -->
1196
+ <h4>
1197
+ <span data-lang="fr">Commandes essentielles tmux</span>
1198
+ <span data-lang="en">Essential tmux commands</span>
1199
+ </h4>
1200
+
1201
+ <p data-lang="fr">
1202
+ Toutes les commandes tmux commencent par le <strong>prefixe</strong> <code>Ctrl+b</code>, suivi d'une touche. Voici les plus utiles :
1203
+ </p>
1204
+ <p data-lang="en">
1205
+ All tmux commands start with the <strong>prefix</strong> <code>Ctrl+b</code>, followed by a key. Here are the most useful ones:
1206
+ </p>
1207
+
1208
+ <div class="table-wrapper">
1209
+ <table>
1210
+ <thead>
1211
+ <tr>
1212
+ <th data-lang="fr">Action</th>
1213
+ <th data-lang="en">Action</th>
1214
+ <th data-lang="fr">Raccourci</th>
1215
+ <th data-lang="en">Shortcut</th>
1216
+ <th>Description</th>
1217
+ </tr>
1218
+ </thead>
1219
+ <tbody>
1220
+ <tr>
1221
+ <td data-lang="fr">Nouvelle session</td>
1222
+ <td data-lang="en">New session</td>
1223
+ <td colspan="2"><code>tmux new -s dev</code></td>
1224
+ <td data-lang="fr">Cree une session nommee "dev"</td>
1225
+ <td data-lang="en">Creates a session named "dev"</td>
1226
+ </tr>
1227
+ <tr>
1228
+ <td data-lang="fr">Detacher la session</td>
1229
+ <td data-lang="en">Detach session</td>
1230
+ <td colspan="2"><code>Ctrl+b d</code></td>
1231
+ <td data-lang="fr">Detache sans fermer (les processus continuent)</td>
1232
+ <td data-lang="en">Detaches without closing (processes keep running)</td>
1233
+ </tr>
1234
+ <tr>
1235
+ <td data-lang="fr">Rattacher la session</td>
1236
+ <td data-lang="en">Reattach session</td>
1237
+ <td colspan="2"><code>tmux attach -t dev</code></td>
1238
+ <td data-lang="fr">Revient a la session "dev"</td>
1239
+ <td data-lang="en">Returns to the "dev" session</td>
1240
+ </tr>
1241
+ <tr>
1242
+ <td data-lang="fr">Split vertical</td>
1243
+ <td data-lang="en">Vertical split</td>
1244
+ <td colspan="2"><code>Ctrl+b |</code></td>
1245
+ <td data-lang="fr">Divise le panneau verticalement</td>
1246
+ <td data-lang="en">Splits the pane vertically</td>
1247
+ </tr>
1248
+ <tr>
1249
+ <td data-lang="fr">Split horizontal</td>
1250
+ <td data-lang="en">Horizontal split</td>
1251
+ <td colspan="2"><code>Ctrl+b -</code></td>
1252
+ <td data-lang="fr">Divise le panneau horizontalement</td>
1253
+ <td data-lang="en">Splits the pane horizontally</td>
1254
+ </tr>
1255
+ <tr>
1256
+ <td data-lang="fr">Naviguer entre panneaux</td>
1257
+ <td data-lang="en">Navigate panes</td>
1258
+ <td colspan="2"><code>Ctrl+b &#8592;&#8593;&#8595;&#8594;</code></td>
1259
+ <td data-lang="fr">Fleches directionnelles pour changer de panneau</td>
1260
+ <td data-lang="en">Arrow keys to switch panes</td>
1261
+ </tr>
1262
+ <tr>
1263
+ <td data-lang="fr">Fermer un panneau</td>
1264
+ <td data-lang="en">Close pane</td>
1265
+ <td colspan="2"><code>Ctrl+b x</code></td>
1266
+ <td data-lang="fr">Ferme le panneau actif (confirmation demandee)</td>
1267
+ <td data-lang="en">Closes the active pane (confirmation required)</td>
1268
+ </tr>
1269
+ <tr>
1270
+ <td data-lang="fr">Lister les sessions</td>
1271
+ <td data-lang="en">List sessions</td>
1272
+ <td colspan="2"><code>tmux ls</code></td>
1273
+ <td data-lang="fr">Affiche toutes les sessions actives</td>
1274
+ <td data-lang="en">Shows all active sessions</td>
1275
+ </tr>
1276
+ </tbody>
1277
+ </table>
1278
+ </div>
1279
+
1280
+ <!-- ── Workflow SmartStack with tmux ── -->
1281
+ <h4>
1282
+ <span data-lang="fr">Workflow SmartStack avec tmux</span>
1283
+ <span data-lang="en">SmartStack workflow with tmux</span>
1284
+ </h4>
1285
+
1286
+ <p data-lang="fr">
1287
+ Voici un exemple de session tmux typique pour le developpement SmartStack avec 3 panneaux :
1288
+ </p>
1289
+ <p data-lang="en">
1290
+ Here's a typical tmux session example for SmartStack development with 3 panes:
1291
+ </p>
1292
+
1293
+ <div class="code-block">
1294
+ <button class="copy-btn">Copy</button>
1295
+ <pre><code><span class="code-comment"># Creer une session de developpement</span>
1296
+ <span class="code-cmd">tmux</span> <span class="code-arg">new -s smartstack</span>
1297
+
1298
+ <span class="code-comment"># Panneau 1 : Backend .NET (deja actif)</span>
1299
+ <span class="code-cmd">cd</span> <span class="code-arg">/mnt/d/MyApp/src/MyApp.Api</span>
1300
+ <span class="code-cmd">dotnet watch run</span>
1301
+
1302
+ <span class="code-comment"># Ctrl+b | → Split vertical pour le panneau 2 : Frontend</span>
1303
+ <span class="code-cmd">cd</span> <span class="code-arg">/mnt/d/MyApp/web/myapp-web</span>
1304
+ <span class="code-cmd">npm run dev</span>
1305
+
1306
+ <span class="code-comment"># Ctrl+b - → Split horizontal pour le panneau 3 : Claude Code</span>
1307
+ <span class="code-cmd">cd</span> <span class="code-arg">/mnt/d/MyApp</span>
1308
+ <span class="code-cmd">claude</span></code></pre>
1309
+ </div>
1310
+
1311
+ <!-- SVG: tmux layout -->
1312
+ <div class="svg-diagram">
1313
+ <svg viewBox="0 0 780 240" xmlns="http://www.w3.org/2000/svg" style="font-family: 'Inter', system-ui, sans-serif; width: 100%; max-width: 780px; height: auto; display: block; margin: 1.5rem auto;">
1314
+ <!-- tmux window frame -->
1315
+ <rect x="20" y="10" width="740" height="220" rx="10" fill="#0f172a" stroke="#475569" stroke-width="2"/>
1316
+
1317
+ <!-- Title bar -->
1318
+ <rect x="20" y="10" width="740" height="28" rx="10" fill="#1e293b"/>
1319
+ <rect x="20" y="28" width="740" height="10" fill="#1e293b"/>
1320
+ <circle cx="44" cy="24" r="6" fill="#ef4444"/>
1321
+ <circle cx="64" cy="24" r="6" fill="#eab308"/>
1322
+ <circle cx="84" cy="24" r="6" fill="#22c55e"/>
1323
+ <text x="390" y="28" text-anchor="middle" fill="#8a9bb0" font-size="11">tmux: smartstack</text>
1324
+
1325
+ <!-- Pane 1: Backend (left) -->
1326
+ <rect x="24" y="42" width="360" height="110" fill="#0f172a" stroke="#6366f1" stroke-width="1.5"/>
1327
+ <text x="34" y="60" fill="#6366f1" font-weight="600" font-size="11" data-lang="fr">&#9612; Backend .NET</text>
1328
+ <text x="34" y="60" fill="#6366f1" font-weight="600" font-size="11" data-lang="en">&#9612; Backend .NET</text>
1329
+ <text x="34" y="80" fill="#22c55e" font-size="10" font-family="monospace">$ dotnet watch run</text>
1330
+ <text x="34" y="96" fill="#8a9bb0" font-size="10" font-family="monospace">info: Listening on https://localhost:5001</text>
1331
+ <text x="34" y="112" fill="#8a9bb0" font-size="10" font-family="monospace">info: Application started</text>
1332
+ <text x="34" y="140" fill="#475569" font-size="10" font-family="monospace">&#9608;</text>
1333
+
1334
+ <!-- Pane 2: Frontend (right) -->
1335
+ <rect x="388" y="42" width="368" height="110" fill="#0f172a" stroke="#06b6d4" stroke-width="1.5"/>
1336
+ <text x="398" y="60" fill="#06b6d4" font-weight="600" font-size="11">&#9612; Frontend React</text>
1337
+ <text x="398" y="80" fill="#22c55e" font-size="10" font-family="monospace">$ npm run dev</text>
1338
+ <text x="398" y="96" fill="#8a9bb0" font-size="10" font-family="monospace">VITE v6.x ready in 320 ms</text>
1339
+ <text x="398" y="112" fill="#3b82f6" font-size="10" font-family="monospace">Local: http://localhost:5173/</text>
1340
+ <text x="398" y="140" fill="#475569" font-size="10" font-family="monospace">&#9608;</text>
1341
+
1342
+ <!-- Pane 3: Claude Code (bottom) -->
1343
+ <rect x="24" y="156" width="732" height="70" fill="#0f172a" stroke="#f97316" stroke-width="1.5"/>
1344
+ <text x="34" y="174" fill="#f97316" font-weight="600" font-size="11">&#9612; Claude Code</text>
1345
+ <text x="34" y="194" fill="#22c55e" font-size="10" font-family="monospace">$ claude</text>
1346
+ <text x="34" y="210" fill="#c8d0dc" font-size="10" font-family="monospace" data-lang="fr">Claude &gt; Pret a vous aider avec votre projet SmartStack</text>
1347
+ <text x="34" y="210" fill="#c8d0dc" font-size="10" font-family="monospace" data-lang="en">Claude &gt; Ready to help with your SmartStack project</text>
1348
+ </svg>
1349
+ </div>
1350
+
1351
+ <div class="alert alert-info">
1352
+ <span class="alert-icon">&#128161;</span>
1353
+ <div class="alert-content">
1354
+ <h5 data-lang="fr">Acceder a vos fichiers Windows depuis WSL</h5>
1355
+ <h5 data-lang="en">Access your Windows files from WSL</h5>
1356
+ <p data-lang="fr">
1357
+ Vos disques Windows sont montes automatiquement sous <code>/mnt/</code>. Le disque <code>C:</code> est accessible a <code>/mnt/c/</code>, le disque <code>D:</code> a <code>/mnt/d/</code>, etc. Vous pouvez donc travailler directement sur vos projets Windows depuis le terminal Ubuntu.
1358
+ </p>
1359
+ <p data-lang="en">
1360
+ Your Windows drives are automatically mounted under <code>/mnt/</code>. The <code>C:</code> drive is accessible at <code>/mnt/c/</code>, the <code>D:</code> drive at <code>/mnt/d/</code>, etc. You can therefore work directly on your Windows projects from the Ubuntu terminal.
1361
+ </p>
1362
+ </div>
1363
+ </div>
1364
+ </section>
1365
+
1366
+ </div>
1367
+ </main>
1368
+ </div>
1369
+ </div>
1370
+
1371
+ <!-- Mobile Menu Button -->
1372
+ <button class="mobile-menu-btn">&#9776;</button>
1373
+ <div class="overlay"></div>
1374
+
1375
+ <script src="js/app.js"></script>
1376
+ </body>
1377
+ </html>