@atlashub/smartstack-cli 2.2.0 → 2.4.0

package/templates/skills/business-analyse/questionnaire/12-migration.md

@@ -55,4 +55,4 @@
 | "On saisira tout à la main" | **Migration non planifiée** | Si > 100 enregistrements, l'import automatisé est indispensable |
 | Pas de validation post-migration | **Données non vérifiées** | Prévoir un rapport de migration : importés / rejetés / à corriger |
 | Aucun rollback plan | **Risque de perte de données** | Toujours faire un backup avant migration + possibilité de rollback |
-| "On migrera plus tard" | **Dette technique** | Si la migration est nécessaire, la planifier dès la v1 même si simplifiée |
+| "On migrera plus tard" | **Dette technique** | Si la migration est nécessaire, la planifier dès le départ même si simplifiée |

package/templates/skills/business-analyse/questionnaire.md

@@ -1,9 +1,9 @@
 # Elicitation Questionnaire - Business Analysis
 
-> **Usage:** Structured questions for step-01-analyse
+> **Usage:** Structured questions for step-01-cadrage and step-03-specify
 > **Standard:** BABOK v3 - Elicitation Techniques (VibeCoding-focused)
 > **Model:** OPUS with ULTRATHINK
-> **Total:** ~60 targeted questions (dev-relevant only)
+> **Total:** ~68 targeted questions (dev-relevant only)
 
 ---
 
@@ -30,6 +30,42 @@
 
 ---
 
+## Category 0: Application Identity (8 questions)
+
+> **Loaded when:** workflow.mode = "application" (multi-module)
+> **Phase:** step-01-cadrage (before core questionnaires)
+> **File:** `questionnaire/00-application.md`
+
+### 0.1 Application Identity
+
+| # | Question | Answer Type |
+|---|----------|-------------|
+| Q0.1 | Quel est le nom de l'application ? | PascalCase identifier |
+| Q0.2 | En 1-2 phrases, quel est l'objectif principal ? | Free text |
+
+### 0.2 Module Landscape
+
+| # | Question | Answer Type |
+|---|----------|-------------|
+| Q0.3 | Combien de domaines fonctionnels distincts identifiez-vous ? | Number + names |
+| Q0.4 | Lesquels sont indispensables pour la première version ? | List (must-haves) |
+
+### 0.3 Application Roles
+
+| # | Question | Answer Type |
+|---|----------|-------------|
+| Q0.5 | Les 4 rôles standards (Admin, Manager, Contributor, Viewer) conviennent-ils ? | Yes/Customize |
+| Q0.6 | Certains rôles sont-ils spécifiques à certains modules ? | Per-role restrictions |
+
+### 0.4 Cross-Module Expectations
+
+| # | Question | Answer Type |
+|---|----------|-------------|
+| Q0.7 | Quels processus métier traversent plusieurs modules ? | List of E2E flows |
+| Q0.8 | Quel rôle par défaut pour les nouveaux utilisateurs ? | Role selection |
+
+---
+
 ## Category 1: Business Context (4 questions)
 
 ### 1.1 Fundamental Need
@@ -237,13 +273,20 @@
 
 ## Questionnaire Usage
 
-### Analyse Phase
+### Phase Mapping
+
+| Phase | Categories Used |
+|-------|----------------|
+| step-01-cadrage | 00 (if app mode), 01, 02, 03, + conditionals (05, 06, 08, 09, 10) |
+| step-03-specify (per module) | 04, 07, 11, 12, 13 (loaded per module) |
+
+### Cadrage Phase
 
-1. **Start:** Begin with Category 1 (Business Context)
+1. **Start:** Begin with Category 0 (if application mode), then Category 1 (Business Context)
 2. **Adapt:** Skip questions not relevant to the context
 3. **Deepen:** Ask follow-up questions on vague answers
 4. **Challenge:** Don't accept "we'll see later" on Must-Have
-5. **Batch:** Present 3-5 questions per interaction (AskUserQuestion)
+5. **Batch:** Present 3-4 questions per interaction (AskUserQuestion)
 
 ### Follow-up Questions
 
@@ -263,17 +306,18 @@ Each question kept passes this test:
 
 ## Summary
 
-| Category | Questions | Focus |
-|----------|-----------|-------|
-| 1. Business Context | 4 | Problem + AS-IS/TO-BE |
-| 2. Stakeholders | 8 | Roles + needs |
-| 3. Functional Scope | 8 | MoSCoW + flows |
-| 4. Data | 8 | Entities + rules |
-| 5. Integrations | 8 | Systems + flows |
-| 6. Security | 8 | Permissions + restrictions |
-| 7. UI | 8 | Screens + experience |
-| 8. Performance | 4 | Response time + tests |
-| 9. Constraints | 4 | Tech stack + deps |
-| 10. Documentation | 4 | User + tech docs |
-| **Total Core** | **64** | |
-| 11-13 (conditional) | ~24 | Lifecycle, migration, cross-module |
+| Category | Questions | Phase | Focus |
+|----------|-----------|-------|-------|
+| 0. Application Identity | 8 | step-01 (app mode) | Application name, modules, roles |
+| 1. Business Context | 4 | step-01 | Problem + AS-IS/TO-BE |
+| 2. Stakeholders | 8 | step-01 | Roles + needs |
+| 3. Functional Scope | 8 | step-01 | MoSCoW + flows |
+| 4. Data | 8 | step-03 (per module) | Entities + rules |
+| 5. Integrations | 8 | step-01 (conditional) | Systems + flows |
+| 6. Security | 8 | step-01 (conditional) | Permissions + restrictions |
+| 7. UI | 8 | step-03 (per module) | Screens + experience |
+| 8. Performance | 4 | step-01 (conditional) | Response time + tests |
+| 9. Constraints | 4 | step-01 (conditional) | Tech stack + deps |
+| 10. Documentation | 4 | step-01 (conditional) | User + tech docs |
+| **Total Core** | **72** | | |
+| 11-13 (conditional) | ~24 | step-03 (per module) | Lifecycle, migration, cross-module |

package/templates/skills/business-analyse/react/application-viewer.md

@@ -0,0 +1,242 @@
+# Application-Level Business Analyse Viewer
+
+> **Usage:** React component for application-level BA documentation within SmartStack web app
+> **Route:** `/docs/business/{app}` (application overview)
+> **Data source:** `docs/business/{app}/business-analyse/v{X.Y}/feature.json` (scope: "application")
+> **Linked to:** Module viewers at `/docs/business/{app}/{module}`
+
+---
+
+## Component: ApplicationAnalyseViewer
+
+### Props
+
+```typescript
+interface ApplicationAnalyseViewerProps {
+  app: string;           // Application code
+  version?: string;      // Version to display (default: latest)
+}
+```
+
+### Route Registration
+
+```typescript
+// In app router configuration
+{
+  path: '/docs/business/:app',
+  component: ApplicationAnalyseViewer,
+  exact: true
+}
+```
+
+### Layout
+
+```
+┌─────────────────────────────────────────────────────────┐
+│  📋 Business Analyse: {app_name}              v{version} │
+│  Status: {status_badge}                                  │
+├─────────────────────────────────────────────────────────┤
+│                                                          │
+│  ┌─ Tabs ──────────────────────────────────────────┐    │
+│  │ [Cadrage] [Modules] [Dépendances] [Permissions] │    │
+│  └─────────────────────────────────────────────────┘    │
+│                                                          │
+│  {Tab Content}                                           │
+│                                                          │
+├─────────────────────────────────────────────────────────┤
+│  Module Progress                                         │
+│  ┌──────────┬──────────┬──────────┬──────────┐         │
+│  │Customers │ Products │ Orders   │ Invoices │         │
+│  │ ✓ done   │ ✓ done   │ ● active │ ○ pending│         │
+│  └──────────┴──────────┴──────────┴──────────┘         │
+└─────────────────────────────────────────────────────────┘
+```
+
+### Tab: Cadrage (Framing)
+
+Displays the application-level framing:
+
+| Section | Data Source | Display |
+|---------|------------|---------|
+| Problem | cadrage.problem | Text block |
+| AS-IS | cadrage.asIs | Text block |
+| TO-BE | cadrage.toBe | Text block |
+| Stakeholders | cadrage.stakeholders | Table: role, description, frequency |
+| Global Scope | cadrage.globalScope | MoSCoW badges: Must/Should/Could/Out |
+| Risks | cadrage.risks | Severity-colored cards |
+
+### Tab: Modules
+
+Grid/cards layout showing all modules:
+
+```
+┌─────────────────────┐  ┌─────────────────────┐
+│  📦 Customers       │  │  📦 Products        │
+│  Status: ✓ Specified │  │  Status: ✓ Specified │
+│  Entities: 3        │  │  Entities: 2         │
+│  BRs: 5             │  │  BRs: 3              │
+│  Complexity: medium  │  │  Complexity: simple   │
+│  [View Details →]   │  │  [View Details →]    │
+└─────────────────────┘  └─────────────────────┘
+┌─────────────────────┐  ┌─────────────────────┐
+│  📦 Orders          │  │  📦 Invoices        │
+│  Status: ● Active   │  │  Status: ○ Pending   │
+│  Entities: 2        │  │  Entities: ~3        │
+│  BRs: ~8            │  │  BRs: ~5             │
+│  Complexity: complex │  │  Complexity: medium   │
+│  [View Details →]   │  │  [View Details →]    │
+└─────────────────────┘  └─────────────────────┘
+```
+
+Each card links to the module viewer: `/docs/business/{app}/{module}`
+
+Status colors:
+- ✓ Specified (green)
+- ● In Progress (blue/animated)
+- ○ Pending (gray)
+- ✗ Error (red)
+
+### Tab: Dépendances (Dependency Graph)
+
+Interactive SVG/Canvas dependency graph:
+
+```
+┌────────────┐     ┌────────────┐
+│  Customers │────▶│  Orders    │────▶┌────────────┐
+└────────────┘     └────────────┘     │  Invoices  │
+┌────────────┐         │              └────────────┘
+│  Products  │─────────┘
+└────────────┘
+```
+
+Implementation options:
+1. **Simple:** ASCII-rendered with `<pre>` (from dependencyGraph)
+2. **Interactive:** SVG with zoom/pan using a lightweight library (e.g., dagre-d3 or vis.js)
+
+Features:
+- Nodes = modules, colored by status
+- Edges = dependencies, labeled with type (FK, Event, Shared)
+- Click on module → navigate to module viewer
+- Layers/groups visualized (foundation → dependent)
+
+### Tab: Permissions
+
+Cross-module permission overview:
+
+```
+┌──────────────────────────────────────────────────────────┐
+│  Application Roles                                        │
+├──────────┬───────────┬──────────────┬───────────────────┤
+│ Role     │ Level     │ Permissions  │ Modules           │
+├──────────┼───────────┼──────────────┼───────────────────┤
+│ Admin    │ admin     │ *.* (all)    │ All               │
+│ Manager  │ manager   │ read,create, │ All               │
+│          │           │ update,assign│                   │
+│ Contrib. │ contrib.  │ read,create, │ All               │
+│          │           │ update       │                   │
+│ Viewer   │ viewer    │ read         │ All               │
+└──────────┴───────────┴──────────────┴───────────────────┘
+
+Per-Module Permission Paths:
+┌──────────────┬──────────────────────────────────────────┐
+│ Module       │ Permission Paths                         │
+├──────────────┼──────────────────────────────────────────┤
+│ Customers    │ business.sales.customers.{read|create|…} │
+│ Products     │ business.sales.products.{read|create|…}  │
+│ Orders       │ business.sales.orders.{read|create|…}    │
+│ Invoices     │ business.sales.invoices.{read|create|…}  │
+└──────────────┴──────────────────────────────────────────┘
+```
+
+### Module Progress Bar
+
+Bottom section showing linear progress through modules:
+
+```typescript
+interface ModuleProgressProps {
+  modules: Array<{
+    code: string;
+    status: 'pending' | 'in-progress' | 'specified' | 'validated';
+    isCurrent: boolean;
+  }>;
+}
+```
+
+Rendered as a horizontal stepper/progress bar with clickable module names.
+
+---
+
+## Sub-Components
+
+### ApplicationStatusBadge
+
+```typescript
+const statusColors = {
+  'draft': 'gray',
+  'framed': 'blue',
+  'decomposed': 'indigo',
+  'specified': 'purple',
+  'consolidated': 'orange',
+  'handed-off': 'green'
+};
+```
+
+### ModuleCard
+
+Compact card for the Modules tab grid.
+
+### DependencyGraph
+
+SVG-based or ASCII-rendered dependency visualization.
+
+### PermissionOverview
+
+Cross-module permission matrix display.
+
+---
+
+## Data Loading
+
+```typescript
+import type { ApplicationFeatureJson } from '../types/business-analyse';
+
+export async function loadApplicationFeature(
+  app: string,
+  version: string
+): Promise<ApplicationFeatureJson> {
+  const response = await fetch(
+    `/docs/business/${app}/business-analyse/v${version}/feature.json`
+  );
+  return response.json();
+}
+
+export async function listApplicationVersions(
+  app: string
+): Promise<string[]> {
+  const response = await fetch(
+    `/api/docs/business/${app}/business-analyse/versions`
+  );
+  return response.json();
+}
+```
+
+---
+
+## Navigation Between Levels
+
+| From | To | Action |
+|------|----|--------|
+| Application overview | Module viewer | Click module card or "View Details" link |
+| Module viewer | Application overview | Breadcrumb: `{App} > {Module}` → click `{App}` |
+| Module viewer | Next module | "Module suivant →" button (from module progress) |
+| Module viewer | Previous module | "← Module précédent" button |
+
+---
+
+## Consolidation View (when consolidated)
+
+After consolidation (status = "consolidated" or "handed-off"), additional sections appear:
+
+- **Cross-Module Interactions:** Table showing FK refs, events, shared entities
+- **E2E Flows:** Visual flow diagrams from consolidation.e2eFlows
+- **Global Risk Assessment:** Risk dashboard with color-coded indicators

package/templates/skills/business-analyse/react/components.md

@@ -1,8 +1,10 @@
 # React Components - Business Analyse Viewer
 
 > **Usage:** React component that renders feature.json directly
-> **Loaded in:** step-04-handoff.md
-> **Data source:** `docs/business/{app}/{module}/business-analyse/v{X.Y}/feature.json`
+> **Loaded in:** step-05-handoff.md
+> **Data source (module):** `docs/business/{app}/{module}/business-analyse/v{X.Y}/feature.json`
+> **Data source (application):** `docs/business/{app}/business-analyse/v{X.Y}/feature.json`
+> **Related:** `react/application-viewer.md` for application-level view
 > **Context7:** /facebook/react, /lucide-icons/lucide-react
 
 ---
@@ -34,16 +36,19 @@ import {
 import type { FeatureJson, FeatureStatus } from '@/types/business-analyse';
 import { loadFeature, listVersions } from '@/services/businessAnalyse';
 
-// Status Badge Component
+// Status Badge Component (supports both module and application statuses)
 function StatusBadge({ status }: { status: FeatureStatus }) {
   const config: Record<FeatureStatus, { color: string; label: string }> = {
     'draft': { color: 'bg-gray-500/10 text-gray-600', label: 'Draft' },
+    'framed': { color: 'bg-sky-500/10 text-sky-600', label: 'Framed' },
     'analysed': { color: 'bg-blue-500/10 text-blue-600', label: 'Analysed' },
+    'decomposed': { color: 'bg-indigo-500/10 text-indigo-600', label: 'Decomposed' },
     'specified': { color: 'bg-yellow-500/10 text-yellow-600', label: 'Specified' },
+    'consolidated': { color: 'bg-orange-500/10 text-orange-600', label: 'Consolidated' },
     'approved': { color: 'bg-green-500/10 text-green-600', label: 'Approved' },
     'handed-off': { color: 'bg-purple-500/10 text-purple-600', label: 'Handed Off' }
   };
-  const { color, label } = config[status];
+  const { color, label } = config[status] || { color: 'bg-gray-500/10 text-gray-600', label: status };
   return (
     <span className={`px-2 py-0.5 rounded text-xs font-medium ${color}`}>
       {label}
@@ -155,6 +160,7 @@ export function BusinessAnalyseViewer() {
     { key: 'useCases', label: t('sections.useCases', 'Use Cases'), icon: Users },
     { key: 'permissions', label: t('sections.permissions', 'Permissions'), icon: Shield },
     { key: 'api', label: t('sections.api', 'API Endpoints'), icon: Zap },
+    { key: 'wireframes', label: t('sections.wireframes', 'Wireframes'), icon: Layout },
     { key: 'suggestions', label: t('sections.suggestions', 'Suggestions'), icon: BookOpen },
     { key: 'changelog', label: t('sections.changelog', 'Changelog'), icon: GitBranch }
   ];
@@ -433,9 +439,55 @@ export function BusinessAnalyseViewer() {
         </div>
       </NumberedSection>
 
-      {/* Section 7: Suggestions */}
+      {/* Section 7: Wireframes & Mockups */}
+      {feature.specification.wireframes?.length > 0 && (
+        <NumberedSection number={7} title="Wireframes & Mockups" icon={Layout}>
+          <div className="space-y-6">
+            {feature.specification.wireframes.map((wf) => (
+              <div key={wf.screen} className="border border-[var(--border-color)] rounded-lg p-4">
+                <div className="flex items-center justify-between mb-3">
+                  <h3 className="font-semibold flex items-center gap-2">
+                    {wf.screen}
+                    {wf.section && (
+                      <span className="px-2 py-0.5 rounded bg-[var(--bg-secondary)] text-xs text-[var(--text-secondary)]">
+                        Section: {wf.section}
+                      </span>
+                    )}
+                  </h3>
+                  <div className="flex gap-1">
+                    {wf.permissionsRequired?.map((perm) => (
+                      <code key={perm} className="px-2 py-0.5 rounded bg-amber-500/10 text-amber-600 text-xs">
+                        {perm}
+                      </code>
+                    ))}
+                  </div>
+                </div>
+                <p className="text-sm text-[var(--text-secondary)] mb-3">{wf.description}</p>
+                {/* Render mockup based on format */}
+                {wf.mockup && (
+                  <div className="bg-[var(--bg-secondary)] rounded-lg p-4 overflow-x-auto">
+                    {wf.mockupFormat === 'svg' ? (
+                      <div dangerouslySetInnerHTML={{ __html: wf.mockup }} />
+                    ) : (
+                      <pre className="text-xs font-mono whitespace-pre leading-relaxed">
+                        {wf.mockup}
+                      </pre>
+                    )}
+                  </div>
+                )}
+                <div className="flex gap-4 mt-3 text-xs text-[var(--text-secondary)]">
+                  <span>Elements: {wf.elements.join(', ')}</span>
+                  <span>Actions: {wf.actions.join(', ')}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </NumberedSection>
+      )}
+
+      {/* Section 8: Suggestions */}
       {feature.suggestions.length > 0 && (
-        <NumberedSection number={7} title={sections[6].label} icon={BookOpen}>
+        <NumberedSection number={8} title={sections[7].label} icon={BookOpen}>
           <div className="space-y-2">
             {feature.suggestions.map((s) => (
               <div key={s.code} className={`flex items-center justify-between p-3 rounded-lg border ${
@@ -461,8 +513,8 @@ export function BusinessAnalyseViewer() {
         </NumberedSection>
       )}
 
-      {/* Section 8: Changelog */}
-      <NumberedSection number={8} title={sections[7].label} icon={GitBranch}>
+      {/* Section 9: Changelog */}
+      <NumberedSection number={9} title={sections[8].label} icon={GitBranch}>
         <div className="space-y-3">
           {feature.changelog.map((entry) => (
             <div key={entry.version} className="border-l-2 border-[var(--color-primary-600)] pl-4">