@atlashub/smartstack-cli 3.18.0 → 3.19.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 (35) hide show
  1. package/dist/index.js +3 -0
  2. package/dist/index.js.map +1 -1
  3. package/package.json +1 -1
  4. package/templates/agents/gitflow/start.md +2 -2
  5. package/templates/skills/business-analyse/SKILL.md +1 -1
  6. package/templates/skills/business-analyse/_shared.md +46 -20
  7. package/templates/skills/business-analyse/html/ba-interactive.html +57 -107
  8. package/templates/skills/business-analyse/html/src/scripts/01-data-init.js +13 -0
  9. package/templates/skills/business-analyse/html/src/scripts/02-navigation.js +1 -1
  10. package/templates/skills/business-analyse/html/src/scripts/03-render-cadrage.js +11 -20
  11. package/templates/skills/business-analyse/html/src/scripts/11-review-panel.js +1 -3
  12. package/templates/skills/business-analyse/html/src/template.html +31 -83
  13. package/templates/skills/business-analyse/patterns/suggestion-catalog.md +71 -3
  14. package/templates/skills/business-analyse/references/cadrage-pre-analysis.md +11 -8
  15. package/templates/skills/business-analyse/references/cadrage-structure-cards.md +7 -5
  16. package/templates/skills/business-analyse/references/deploy-data-build.md +42 -14
  17. package/templates/skills/business-analyse/references/deploy-modes.md +1 -1
  18. package/templates/skills/business-analyse/references/entity-architecture-decision.md +218 -0
  19. package/templates/skills/business-analyse/references/robustness-checks.md +2 -1
  20. package/templates/skills/business-analyse/references/spec-auto-inference.md +70 -16
  21. package/templates/skills/business-analyse/references/ui-resource-cards.md +149 -0
  22. package/templates/skills/business-analyse/steps/step-01-cadrage.md +220 -32
  23. package/templates/skills/business-analyse/steps/step-02-decomposition.md +35 -26
  24. package/templates/skills/business-analyse/steps/step-03a1-setup.md +122 -32
  25. package/templates/skills/business-analyse/steps/step-03a2-analysis.md +8 -0
  26. package/templates/skills/business-analyse/steps/step-03b-ui.md +68 -5
  27. package/templates/skills/business-analyse/steps/step-05a-handoff.md +99 -2
  28. package/templates/skills/business-analyse/steps/step-05b-deploy.md +35 -1
  29. package/templates/skills/business-analyse/steps/step-05c-ralph-readiness.md +4 -1
  30. package/templates/skills/business-analyse/steps/step-06-review.md +2 -1
  31. package/templates/skills/business-analyse/templates/tpl-handoff.md +5 -4
  32. package/templates/skills/business-analyse/templates/tpl-launch-displays.md +4 -1
  33. package/templates/skills/business-analyse/templates-frd.md +5 -4
  34. package/templates/skills/gitflow/references/start-local-config.md +6 -3
  35. package/templates/skills/gitflow/steps/step-start.md +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlashub/smartstack-cli",
3
- "version": "3.18.0",
3
+ "version": "3.19.0",
4
4
  "description": "SmartStack Claude Code automation toolkit - GitFlow, EF Core migrations, prompts and more",
5
5
  "author": {
6
6
  "name": "SmartStack",
package/templates/agents/gitflow/start.md CHANGED
@@ -70,8 +70,8 @@ git fetch origin $FULL_BRANCH:refs/remotes/origin/$FULL_BRANCH --force --quiet
70
70
  - Add `Local` profile to `launchSettings.json`
71
71
 
72
72
  **Frontend (web project detected):**
73
- - Create `.env.local` pointing to the API port
74
- - Add `npm run local` script if missing
73
+ - Create `.env.standalone` pointing to the API port (Vite 7+ forbids "local" as mode name)
74
+ - Add `npm run local` script if missing (uses `--mode standalone`)
75
75
 
76
76
  **Port allocation:** Hash branch name for unique ports (API: 5200+, Web: 5300+)
77
77
 
package/templates/skills/business-analyse/SKILL.md CHANGED
@@ -280,7 +280,7 @@ Load ONLY relevant categories based on feature type:
280
280
  - Each module specified iteratively with client validation
281
281
  - ASCII/SVG mockups proposed for each module's sections
282
282
  - Cross-module consolidation passed (step-04)
283
- - Development handoff ready for `/ralph-loop -r`
283
+ - Development handoff ready for `/ralph-loop`
284
284
  - Ralph Loop prd.json generated (per module or consolidated)
285
285
  - All outputs renderable by SmartStack app viewer at `/docs/business/{app}/`
286
286
  </success_criteria>
package/templates/skills/business-analyse/_shared.md CHANGED
@@ -59,16 +59,19 @@ The BA aligns with the SmartStack navigation hierarchy:
59
59
  Level 1: Context (business)
60
60
  Level 2: Application (Sales)
61
61
  Level 3: Module (Customers)
62
- Level 4: Section (list)
63
- Level 5: Ressource (customer-card)
64
- Level 4: Section (detail)
65
- Level 5: Ressource (customer-form)
66
- Level 4: Section (create)
62
+ Level 4: Section (list) ← sidebar nav
63
+ Level 5: Resource (customer-grid)
64
+ Level 5: Resource (customer-filters)
65
+ Level 4: Section (detail) [hidden] ← reached by row click, route :id
66
+ Level 5: Resource (customer-detail-header)
67
+ Level 5: Resource (customer-detail-tabs)
68
+ Level 5: Resource (customer-info-card)
69
+ Level 5: Resource (customer-orders-grid) ← relation tab
70
+ Level 5: Resource (customer-history) ← audit tab
67
71
  Level 3: Module (Orders)
68
- Level 4: Section (list)
69
- Level 4: Section (detail)
70
- Level 4: Section (create)
71
- Level 4: Section (approve)
72
+ Level 4: Section (list) ← sidebar nav
73
+ Level 4: Section (detail) [hidden] ← reached by row click
74
+ Level 4: Section (approve) ← sidebar nav (workflow)
72
75
  ```
73
76
 
74
77
  | BA Phase | Levels treated | What is defined |
@@ -79,22 +82,45 @@ Level 1: Context (business)
79
82
  | Consolidation (step-04) | Cross-module | Interactions, permission coherence, E2E flows |
80
83
  | Handoff (step-05) | All levels | Implementation mapping, prd.json |
81
84
 
82
- ### Route pattern
85
+ ### Route patterns
83
86
  ```
84
- /business/{application}/{module}/{section}
87
+ /business/{application}/{module}/{section} ← sidebar sections (list, dashboard, approve, etc.)
88
+ /business/{application}/{module}/detail/:id ← detail page (hidden from sidebar, reached by row click)
85
89
  ```
86
90
 
91
+ **Detail page routing:**
92
+ - The detail page uses a parameterized route with `:id`
93
+ - It is NOT registered as a sidebar navigation entry (`navigation: "hidden"`)
94
+ - It is reached by clicking a row in the `list` section (action: `navigate:detail`)
95
+ - The back button navigates to `/business/{application}/{module}/list`
96
+ - Route MUST be registered in frontend routing (App.tsx) alongside the list route
97
+
87
98
  ### Standard Sections per Module
99
+
100
+ > **RULE: Sections are functional zones, NOT CRUD operations.**
101
+ > `create` and `edit` are ACTIONS within the `list` page (modal/drawer).
102
+ > `detail` is a page with tabs accessible by clicking a row in `list` (not a standalone nav section).
103
+
88
104
  | Section | Purpose | Typical Components |
89
105
  |---------|---------|-------------------|
90
- | `list` | Main entity list with filters | DataGrid, FilterBar, Pagination |
91
- | `detail` | Entity detail view | DetailCard, TabPanel, StatusBadge |
92
- | `create` | Create new entity | Form, Validation, SubmitButton |
93
- | `edit` | Edit existing entity | Form (pre-filled), Validation |
94
- | `approve` | Approval workflow | ApprovalPanel, StatusTimeline |
95
- | `dashboard` | Module overview/KPIs | Charts, StatCards, RecentActivity |
96
- | `import` | Bulk data import | FileUpload, MappingTable, Preview |
97
- | `export` | Data export | FormatSelector, FilterOptions |
106
+ | `list` | **Main page**: entity grid + create action (modal/drawer) + click to detail | DataGrid, FilterBar, Pagination, CreateForm |
107
+ | `detail` | **Reached from list** (hidden nav, route `:id`): tabbed view of entity details + edit capability | BackButton, DetailHeader, StatusBadge, TabPanel, DetailCard, SmartForm (edit), SmartTable (relations), Timeline (history) |
108
+ | `dashboard` | Module overview/KPIs (if analytics needed) | Charts, StatCards, RecentActivity |
109
+ | `approve` | Approval workflow queue (if validation workflow) | ApprovalPanel, StatusTimeline |
110
+ | `import` | Bulk data import (if volume > 100) | FileUpload, MappingTable, Preview |
111
+ | `rapport` | Module-specific reporting | ReportBuilder, ExportPanel |
112
+ | `planning` | Calendar/planning view (if time-based data) | Calendar, GanttChart, TimelineView |
113
+
114
+ **What is NEVER a section:**
115
+
116
+ | NOT a sidebar section | What it really is |
117
+ |---------------|-------------------|
118
+ | `create` | Action button in `list` page → opens Form in modal/drawer |
119
+ | `edit` | Action in detail page → switches fields to edit mode |
120
+ | `delete` | Action with confirmation dialog in `list` or detail |
121
+ | `search` | FilterBar component integrated in the `list` section |
122
+
123
+ > **Note on `detail`:** The detail page IS a `specification.sections[]` entry (with `navigation: "hidden"`) so it gets a wireframe, resources, and route. But it is NOT shown in the sidebar — it is reached by clicking a row in `list`. Every module with a `list` section MUST have a companion `detail` section.
98
124
 
99
125
  ---
100
126
 
@@ -148,7 +174,7 @@ docs/
148
174
 
149
175
  ```
150
176
  .ralph/
151
- prd.json # Task breakdown derived from handoff (for /ralph-loop -r)
177
+ prd.json # Task breakdown derived from handoff (for /ralph-loop)
152
178
  progress.txt # Links back to BA feature documents
153
179
  logs/
154
180
  reports/
package/templates/skills/business-analyse/html/ba-interactive.html CHANGED
@@ -1515,14 +1515,8 @@ body {
1515
1515
  <!-- Phase 1 : Cadrage -->
1516
1516
  <div class="nav-group">
1517
1517
  <div class="nav-group-title">1. Cadrage</div>
1518
- <a class="nav-item active" onclick="showSection('cadrage-problem')" data-section="cadrage-problem">
1519
- <span class="nav-icon">&#9679;</span> Probleme a resoudre
1520
- </a>
1521
- <a class="nav-item" onclick="showSection('cadrage-current')" data-section="cadrage-current" data-vibe-hide>
1522
- <span class="nav-icon">&#9679;</span> Situation actuelle
1523
- </a>
1524
- <a class="nav-item" onclick="showSection('cadrage-vision')" data-section="cadrage-vision" data-vibe-hide>
1525
- <span class="nav-icon">&#9679;</span> Situation souhaitee
1518
+ <a class="nav-item active" onclick="showSection('cadrage-context')" data-section="cadrage-context">
1519
+ <span class="nav-icon">&#9679;</span> Contexte
1526
1520
  </a>
1527
1521
  <a class="nav-item" onclick="showSection('cadrage-stakeholders')" data-section="cadrage-stakeholders">
1528
1522
  <span class="nav-icon">&#9679;</span> Parties prenantes
@@ -1589,84 +1583,38 @@ body {
1589
1583
  ============================================ -->
1590
1584
  <main class="main" id="mainContent">
1591
1585
 
1592
- <!-- SECTION: Probleme a resoudre -->
1593
- <div class="section" id="cadrage-problem">
1594
- <h2 class="section-title">Probleme a resoudre</h2>
1595
- <p class="section-subtitle">Decrivez le probleme principal que ce projet doit resoudre. Soyez le plus concret possible.</p>
1596
-
1597
- <div class="card">
1598
- <div class="card-label">Description du probleme</div>
1599
- <div class="editable" contenteditable="true" data-field="problem.description" data-placeholder="Decrivez le probleme que vous rencontrez aujourd'hui. Qu'est-ce qui ne fonctionne pas, ou pas assez bien ?"></div>
1600
- </div>
1601
-
1602
- <div class="card" data-vibe-hide>
1603
- <div class="card-label">Qui est le plus impacte ?</div>
1604
- <div class="editable" contenteditable="true" data-field="problem.impactedPeople" data-placeholder="Quelles personnes souffrent le plus de ce probleme au quotidien ? Quel impact sur leur travail ?"></div>
1605
- </div>
1606
-
1607
- <div class="card" data-vibe-hide>
1608
- <div class="card-label">Depuis quand ce probleme existe-t-il ?</div>
1609
- <div class="editable" contenteditable="true" data-field="problem.history" data-placeholder="Depuis combien de temps ce probleme existe-t-il ? A-t-il empire recemment ?"></div>
1610
- </div>
1611
-
1612
- <div class="card">
1613
- <div class="card-label">Evenement declencheur</div>
1614
- <div class="editable" contenteditable="true" data-field="problem.trigger" data-placeholder="Qu'est-ce qui a declenche cette demande maintenant ? Pourquoi pas il y a 6 mois ?"></div>
1615
- </div>
1616
-
1617
- <div class="card" data-vibe-hide>
1618
- <div class="card-label">Consequences si le projet n'est pas realise</div>
1619
- <div class="editable" contenteditable="true" data-field="problem.consequences" data-placeholder="Que se passerait-il si ce projet n'etait PAS realise ? Quelles consequences a court et moyen terme ?"></div>
1620
- </div>
1621
- </div>
1622
-
1623
- <!-- SECTION: Situation actuelle -->
1624
- <div class="section" id="cadrage-current" style="display:none;" data-vibe-hide>
1625
- <h2 class="section-title">Situation actuelle</h2>
1626
- <p class="section-subtitle">Comment les choses se passent aujourd'hui, concretement.</p>
1627
-
1628
- <div class="card">
1629
- <div class="card-label">Outils et methodes utilises aujourd'hui</div>
1630
- <div class="editable" contenteditable="true" data-field="current.tools" data-placeholder="Comment gerez-vous ce sujet aujourd'hui ? Avec quels outils (tableur, email, papier, logiciel) ?"></div>
1631
- </div>
1632
-
1633
- <div class="card">
1634
- <div class="card-label">Processus actuel, etape par etape</div>
1635
- <div id="processFlow" class="process-flow">
1636
- <!-- Populated dynamically -->
1586
+ <!-- SECTION: Contexte (merged: problem + current + vision) -->
1587
+ <div class="section" id="cadrage-context">
1588
+ <h2 class="section-title">Contexte du projet</h2>
1589
+ <p class="section-subtitle">Vue synthetique du besoin : probleme, situation actuelle et objectif vise.</p>
1590
+
1591
+ <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem;">
1592
+ <div class="card" style="border-left:3px solid #f87171;">
1593
+ <div class="card-label" style="color:#f87171;">Probleme identifie</div>
1594
+ <div class="editable" contenteditable="true" data-field="context.problem" data-placeholder="Quel probleme ce projet doit-il resoudre ?"></div>
1595
+ <div style="margin-top:0.75rem;font-size:0.8rem;color:var(--text-muted);">
1596
+ <strong>Declencheur :</strong>
1597
+ <div class="editable" contenteditable="true" data-field="context.trigger" data-placeholder="Evenement declencheur" style="display:inline;"></div>
1598
+ </div>
1637
1599
  </div>
1638
- <button class="add-btn" onclick="addProcessStep()">+ Ajouter une etape au processus</button>
1639
- </div>
1640
-
1641
- <div class="card">
1642
- <div class="card-label">Etapes les plus penibles ou les plus longues</div>
1643
- <div class="editable" contenteditable="true" data-field="current.painPoints" data-placeholder="Quelles sont les etapes les plus penibles ou les plus longues dans ce processus ?"></div>
1644
- </div>
1645
-
1646
- <div class="card">
1647
- <div class="card-label">Erreurs ou problemes recurrents</div>
1648
- <div class="editable" contenteditable="true" data-field="current.errors" data-placeholder="Quelles erreurs ou problemes reviennent regulierement ? Donnez 2 a 3 exemples concrets."></div>
1649
- </div>
1650
- </div>
1651
-
1652
- <!-- SECTION: Situation souhaitee -->
1653
- <div class="section" id="cadrage-vision" style="display:none;" data-vibe-hide>
1654
- <h2 class="section-title">Situation souhaitee</h2>
1655
- <p class="section-subtitle">Ce que le client veut obtenir, pas ce qu'il veut construire.</p>
1656
1600
 
1657
- <div class="card">
1658
- <div class="card-label">Ce qui changerait concretement</div>
1659
- <div class="editable" contenteditable="true" data-field="vision.changes" data-placeholder="Si le probleme etait resolu demain, que feriez-vous differemment dans votre journee de travail ?"></div>
1660
- </div>
1661
-
1662
- <div class="card">
1663
- <div class="card-label">Resultats attendus (mesurables)</div>
1664
- <div class="editable" contenteditable="true" data-field="vision.results" data-placeholder="Quels resultats concrets attendez-vous ? Citez 2 a 3 ameliorations mesurables."></div>
1665
- </div>
1601
+ <div class="card" style="border-left:3px solid #facc15;">
1602
+ <div class="card-label" style="color:#facc15;">Aujourd'hui</div>
1603
+ <div class="editable" contenteditable="true" data-field="context.currentSituation" data-placeholder="Comment les choses fonctionnent actuellement ?"></div>
1604
+ <div style="margin-top:0.75rem;font-size:0.8rem;color:var(--text-muted);">
1605
+ <strong>Points douleur :</strong>
1606
+ <div class="editable" contenteditable="true" data-field="context.painPoints" data-placeholder="Problemes recurrents" style="display:inline;"></div>
1607
+ </div>
1608
+ </div>
1666
1609
 
1667
- <div class="card">
1668
- <div class="card-label">Signe visible de succes</div>
1669
- <div class="editable" contenteditable="true" data-field="vision.successSign" data-placeholder="Comment saurez-vous que le projet est un succes ? Quel est le signe visible ?"></div>
1610
+ <div class="card" style="border-left:3px solid #4ade80;">
1611
+ <div class="card-label" style="color:#4ade80;">Objectif</div>
1612
+ <div class="editable" contenteditable="true" data-field="context.desiredSituation" data-placeholder="Que doit permettre le systeme cible ?"></div>
1613
+ <div style="margin-top:0.75rem;font-size:0.8rem;color:var(--text-muted);">
1614
+ <strong>Criteres :</strong>
1615
+ <div class="editable" contenteditable="true" data-field="context.acceptanceCriteria" data-placeholder="Criteres de succes" style="display:inline;"></div>
1616
+ </div>
1617
+ </div>
1670
1618
  </div>
1671
1619
  </div>
1672
1620
 
@@ -2113,6 +2061,19 @@ data.cadrage.risks = data.cadrage.risks || [];
2113
2061
  data.consolidation = data.consolidation || {};
2114
2062
  data.consolidation.e2eFlows = data.consolidation.e2eFlows || [];
2115
2063
 
2064
+ // Backward compat: merge old problem/current/vision into context
2065
+ if (!data.cadrage.context) {
2066
+ data.cadrage.context = {
2067
+ problem: data.cadrage.problem?.description || data.cadrage.problem || '',
2068
+ trigger: data.cadrage.problem?.trigger || '',
2069
+ currentSituation: data.cadrage.current?.tools || '',
2070
+ desiredSituation: data.cadrage.vision?.changes || '',
2071
+ painPoints: data.cadrage.current?.painPoints || (data.cadrage.stakeholders || []).flatMap(s => (s.frustrations || '').split('\n').filter(Boolean)).join('\n'),
2072
+ acceptanceCriteria: data.cadrage.vision?.results || (data.cadrage.criteria || []).map(c => c.text).join('\n')
2073
+ };
2074
+ }
2075
+ data.cadrage.context = data.cadrage.context || { problem: '', trigger: '', currentSituation: '', desiredSituation: '', painPoints: '', acceptanceCriteria: '' };
2076
+
2116
2077
  // Initialize comments array
2117
2078
  data.comments = data.comments || [];
2118
2079
 
@@ -2233,7 +2194,7 @@ document.addEventListener('DOMContentLoaded', function() {
2233
2194
  /* ============================================
2234
2195
  NAVIGATION
2235
2196
  ============================================ */
2236
- let currentSectionId = 'cadrage-problem';
2197
+ let currentSectionId = 'cadrage-context';
2237
2198
 
2238
2199
  function showSection(sectionId) {
2239
2200
  currentSectionId = sectionId;
@@ -2441,27 +2402,18 @@ function renderRisks() {
2441
2402
  }
2442
2403
 
2443
2404
  /* ============================================
2444
- PROCESS STEPS
2405
+ CONTEXT RENDERING (merged problem/current/vision)
2445
2406
  ============================================ */
2446
- function addProcessStep() {
2447
- const label = prompt('Nom de l\'etape :');
2448
- if (!label) return;
2449
- if (!data.cadrage.current.steps) data.cadrage.current.steps = [];
2450
- data.cadrage.current.steps.push(label);
2451
- renderProcessFlow();
2452
- autoSave();
2453
- }
2454
-
2455
- function renderProcessFlow() {
2456
- const container = document.getElementById('processFlow');
2457
- const steps = data.cadrage.current.steps || [];
2458
- container.innerHTML = steps.map((step, i) => `
2459
- <div class="process-step">
2460
- <div class="process-step-number">Etape ${i + 1}</div>
2461
- <div class="process-step-label">${step}</div>
2462
- </div>
2463
- ${i < steps.length - 1 ? '<div class="process-arrow">&#8594;</div>' : ''}
2464
- `).join('');
2407
+ function renderContext() {
2408
+ // context fields are handled by initEditableFields() via data-field="context.*"
2409
+ // This function ensures backward compat data is displayed as strings
2410
+ const ctx = data.cadrage.context || {};
2411
+ if (Array.isArray(ctx.painPoints)) {
2412
+ data.cadrage.context.painPoints = ctx.painPoints.join('\n');
2413
+ }
2414
+ if (Array.isArray(ctx.acceptanceCriteria)) {
2415
+ data.cadrage.context.acceptanceCriteria = ctx.acceptanceCriteria.join('\n');
2416
+ }
2465
2417
  }
2466
2418
 
2467
2419
 
@@ -4029,9 +3981,7 @@ function renderReviewPanel() {
4029
3981
 
4030
3982
  function getSectionLabel(sectionId) {
4031
3983
  const labels = {
4032
- 'cadrage-problem': 'Probleme',
4033
- 'cadrage-current': 'Situation actuelle',
4034
- 'cadrage-vision': 'Vision',
3984
+ 'cadrage-context': 'Contexte',
4035
3985
  'cadrage-stakeholders': 'Parties prenantes',
4036
3986
  'cadrage-scope': 'Perimetre',
4037
3987
  'cadrage-risks': 'Risques',
package/templates/skills/business-analyse/html/src/scripts/01-data-init.js CHANGED
@@ -16,6 +16,19 @@ data.cadrage.risks = data.cadrage.risks || [];
16
16
  data.consolidation = data.consolidation || {};
17
17
  data.consolidation.e2eFlows = data.consolidation.e2eFlows || [];
18
18
 
19
+ // Backward compat: merge old problem/current/vision into context
20
+ if (!data.cadrage.context) {
21
+ data.cadrage.context = {
22
+ problem: data.cadrage.problem?.description || data.cadrage.problem || '',
23
+ trigger: data.cadrage.problem?.trigger || '',
24
+ currentSituation: data.cadrage.current?.tools || '',
25
+ desiredSituation: data.cadrage.vision?.changes || '',
26
+ painPoints: data.cadrage.current?.painPoints || (data.cadrage.stakeholders || []).flatMap(s => (s.frustrations || '').split('\n').filter(Boolean)).join('\n'),
27
+ acceptanceCriteria: data.cadrage.vision?.results || (data.cadrage.criteria || []).map(c => c.text).join('\n')
28
+ };
29
+ }
30
+ data.cadrage.context = data.cadrage.context || { problem: '', trigger: '', currentSituation: '', desiredSituation: '', painPoints: '', acceptanceCriteria: '' };
31
+
19
32
  // Initialize comments array
20
33
  data.comments = data.comments || [];
21
34
 
package/templates/skills/business-analyse/html/src/scripts/02-navigation.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /* ============================================
2
2
  NAVIGATION
3
3
  ============================================ */
4
- let currentSectionId = 'cadrage-problem';
4
+ let currentSectionId = 'cadrage-context';
5
5
 
6
6
  function showSection(sectionId) {
7
7
  currentSectionId = sectionId;
package/templates/skills/business-analyse/html/src/scripts/03-render-cadrage.js CHANGED
@@ -184,25 +184,16 @@ function renderRisks() {
184
184
  }
185
185
 
186
186
  /* ============================================
187
- PROCESS STEPS
187
+ CONTEXT RENDERING (merged problem/current/vision)
188
188
  ============================================ */
189
- function addProcessStep() {
190
- const label = prompt('Nom de l\'etape :');
191
- if (!label) return;
192
- if (!data.cadrage.current.steps) data.cadrage.current.steps = [];
193
- data.cadrage.current.steps.push(label);
194
- renderProcessFlow();
195
- autoSave();
196
- }
197
-
198
- function renderProcessFlow() {
199
- const container = document.getElementById('processFlow');
200
- const steps = data.cadrage.current.steps || [];
201
- container.innerHTML = steps.map((step, i) => `
202
- <div class="process-step">
203
- <div class="process-step-number">Etape ${i + 1}</div>
204
- <div class="process-step-label">${step}</div>
205
- </div>
206
- ${i < steps.length - 1 ? '<div class="process-arrow">&#8594;</div>' : ''}
207
- `).join('');
189
+ function renderContext() {
190
+ // context fields are handled by initEditableFields() via data-field="context.*"
191
+ // This function ensures backward compat data is displayed as strings
192
+ const ctx = data.cadrage.context || {};
193
+ if (Array.isArray(ctx.painPoints)) {
194
+ data.cadrage.context.painPoints = ctx.painPoints.join('\n');
195
+ }
196
+ if (Array.isArray(ctx.acceptanceCriteria)) {
197
+ data.cadrage.context.acceptanceCriteria = ctx.acceptanceCriteria.join('\n');
198
+ }
208
199
  }
package/templates/skills/business-analyse/html/src/scripts/11-review-panel.js CHANGED
@@ -100,9 +100,7 @@ function renderReviewPanel() {
100
100
 
101
101
  function getSectionLabel(sectionId) {
102
102
  const labels = {
103
- 'cadrage-problem': 'Probleme',
104
- 'cadrage-current': 'Situation actuelle',
105
- 'cadrage-vision': 'Vision',
103
+ 'cadrage-context': 'Contexte',
106
104
  'cadrage-stakeholders': 'Parties prenantes',
107
105
  'cadrage-scope': 'Perimetre',
108
106
  'cadrage-risks': 'Risques',
package/templates/skills/business-analyse/html/src/template.html CHANGED
@@ -51,14 +51,8 @@
51
51
  <!-- Phase 1 : Cadrage -->
52
52
  <div class="nav-group">
53
53
  <div class="nav-group-title">1. Cadrage</div>
54
- <a class="nav-item active" onclick="showSection('cadrage-problem')" data-section="cadrage-problem">
55
- <span class="nav-icon">&#9679;</span> Probleme a resoudre
56
- </a>
57
- <a class="nav-item" onclick="showSection('cadrage-current')" data-section="cadrage-current" data-vibe-hide>
58
- <span class="nav-icon">&#9679;</span> Situation actuelle
59
- </a>
60
- <a class="nav-item" onclick="showSection('cadrage-vision')" data-section="cadrage-vision" data-vibe-hide>
61
- <span class="nav-icon">&#9679;</span> Situation souhaitee
54
+ <a class="nav-item active" onclick="showSection('cadrage-context')" data-section="cadrage-context">
55
+ <span class="nav-icon">&#9679;</span> Contexte
62
56
  </a>
63
57
  <a class="nav-item" onclick="showSection('cadrage-stakeholders')" data-section="cadrage-stakeholders">
64
58
  <span class="nav-icon">&#9679;</span> Parties prenantes
@@ -125,84 +119,38 @@
125
119
  ============================================ -->
126
120
  <main class="main" id="mainContent">
127
121
 
128
- <!-- SECTION: Probleme a resoudre -->
129
- <div class="section" id="cadrage-problem">
130
- <h2 class="section-title">Probleme a resoudre</h2>
131
- <p class="section-subtitle">Decrivez le probleme principal que ce projet doit resoudre. Soyez le plus concret possible.</p>
132
-
133
- <div class="card">
134
- <div class="card-label">Description du probleme</div>
135
- <div class="editable" contenteditable="true" data-field="problem.description" data-placeholder="Decrivez le probleme que vous rencontrez aujourd'hui. Qu'est-ce qui ne fonctionne pas, ou pas assez bien ?"></div>
136
- </div>
137
-
138
- <div class="card" data-vibe-hide>
139
- <div class="card-label">Qui est le plus impacte ?</div>
140
- <div class="editable" contenteditable="true" data-field="problem.impactedPeople" data-placeholder="Quelles personnes souffrent le plus de ce probleme au quotidien ? Quel impact sur leur travail ?"></div>
141
- </div>
142
-
143
- <div class="card" data-vibe-hide>
144
- <div class="card-label">Depuis quand ce probleme existe-t-il ?</div>
145
- <div class="editable" contenteditable="true" data-field="problem.history" data-placeholder="Depuis combien de temps ce probleme existe-t-il ? A-t-il empire recemment ?"></div>
146
- </div>
147
-
148
- <div class="card">
149
- <div class="card-label">Evenement declencheur</div>
150
- <div class="editable" contenteditable="true" data-field="problem.trigger" data-placeholder="Qu'est-ce qui a declenche cette demande maintenant ? Pourquoi pas il y a 6 mois ?"></div>
151
- </div>
152
-
153
- <div class="card" data-vibe-hide>
154
- <div class="card-label">Consequences si le projet n'est pas realise</div>
155
- <div class="editable" contenteditable="true" data-field="problem.consequences" data-placeholder="Que se passerait-il si ce projet n'etait PAS realise ? Quelles consequences a court et moyen terme ?"></div>
156
- </div>
157
- </div>
158
-
159
- <!-- SECTION: Situation actuelle -->
160
- <div class="section" id="cadrage-current" style="display:none;" data-vibe-hide>
161
- <h2 class="section-title">Situation actuelle</h2>
162
- <p class="section-subtitle">Comment les choses se passent aujourd'hui, concretement.</p>
163
-
164
- <div class="card">
165
- <div class="card-label">Outils et methodes utilises aujourd'hui</div>
166
- <div class="editable" contenteditable="true" data-field="current.tools" data-placeholder="Comment gerez-vous ce sujet aujourd'hui ? Avec quels outils (tableur, email, papier, logiciel) ?"></div>
167
- </div>
168
-
169
- <div class="card">
170
- <div class="card-label">Processus actuel, etape par etape</div>
171
- <div id="processFlow" class="process-flow">
172
- <!-- Populated dynamically -->
122
+ <!-- SECTION: Contexte (merged: problem + current + vision) -->
123
+ <div class="section" id="cadrage-context">
124
+ <h2 class="section-title">Contexte du projet</h2>
125
+ <p class="section-subtitle">Vue synthetique du besoin : probleme, situation actuelle et objectif vise.</p>
126
+
127
+ <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem;">
128
+ <div class="card" style="border-left:3px solid #f87171;">
129
+ <div class="card-label" style="color:#f87171;">Probleme identifie</div>
130
+ <div class="editable" contenteditable="true" data-field="context.problem" data-placeholder="Quel probleme ce projet doit-il resoudre ?"></div>
131
+ <div style="margin-top:0.75rem;font-size:0.8rem;color:var(--text-muted);">
132
+ <strong>Declencheur :</strong>
133
+ <div class="editable" contenteditable="true" data-field="context.trigger" data-placeholder="Evenement declencheur" style="display:inline;"></div>
134
+ </div>
173
135
  </div>
174
- <button class="add-btn" onclick="addProcessStep()">+ Ajouter une etape au processus</button>
175
- </div>
176
-
177
- <div class="card">
178
- <div class="card-label">Etapes les plus penibles ou les plus longues</div>
179
- <div class="editable" contenteditable="true" data-field="current.painPoints" data-placeholder="Quelles sont les etapes les plus penibles ou les plus longues dans ce processus ?"></div>
180
- </div>
181
-
182
- <div class="card">
183
- <div class="card-label">Erreurs ou problemes recurrents</div>
184
- <div class="editable" contenteditable="true" data-field="current.errors" data-placeholder="Quelles erreurs ou problemes reviennent regulierement ? Donnez 2 a 3 exemples concrets."></div>
185
- </div>
186
- </div>
187
136
 
188
- <!-- SECTION: Situation souhaitee -->
189
- <div class="section" id="cadrage-vision" style="display:none;" data-vibe-hide>
190
- <h2 class="section-title">Situation souhaitee</h2>
191
- <p class="section-subtitle">Ce que le client veut obtenir, pas ce qu'il veut construire.</p>
192
-
193
- <div class="card">
194
- <div class="card-label">Ce qui changerait concretement</div>
195
- <div class="editable" contenteditable="true" data-field="vision.changes" data-placeholder="Si le probleme etait resolu demain, que feriez-vous differemment dans votre journee de travail ?"></div>
196
- </div>
197
-
198
- <div class="card">
199
- <div class="card-label">Resultats attendus (mesurables)</div>
200
- <div class="editable" contenteditable="true" data-field="vision.results" data-placeholder="Quels resultats concrets attendez-vous ? Citez 2 a 3 ameliorations mesurables."></div>
201
- </div>
137
+ <div class="card" style="border-left:3px solid #facc15;">
138
+ <div class="card-label" style="color:#facc15;">Aujourd'hui</div>
139
+ <div class="editable" contenteditable="true" data-field="context.currentSituation" data-placeholder="Comment les choses fonctionnent actuellement ?"></div>
140
+ <div style="margin-top:0.75rem;font-size:0.8rem;color:var(--text-muted);">
141
+ <strong>Points douleur :</strong>
142
+ <div class="editable" contenteditable="true" data-field="context.painPoints" data-placeholder="Problemes recurrents" style="display:inline;"></div>
143
+ </div>
144
+ </div>
202
145
 
203
- <div class="card">
204
- <div class="card-label">Signe visible de succes</div>
205
- <div class="editable" contenteditable="true" data-field="vision.successSign" data-placeholder="Comment saurez-vous que le projet est un succes ? Quel est le signe visible ?"></div>
146
+ <div class="card" style="border-left:3px solid #4ade80;">
147
+ <div class="card-label" style="color:#4ade80;">Objectif</div>
148
+ <div class="editable" contenteditable="true" data-field="context.desiredSituation" data-placeholder="Que doit permettre le systeme cible ?"></div>
149
+ <div style="margin-top:0.75rem;font-size:0.8rem;color:var(--text-muted);">
150
+ <strong>Criteres :</strong>
151
+ <div class="editable" contenteditable="true" data-field="context.acceptanceCriteria" data-placeholder="Criteres de succes" style="display:inline;"></div>
152
+ </div>
153
+ </div>
206
154
  </div>
207
155
  </div>
208
156