npm - @atlashub/smartstack-cli - Versions diffs - 4.80.0 → 5.0.0 - Mend

@atlashub/smartstack-cli 4.80.0 → 5.0.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 (1008) hide show

package/.documentation/apex.html DELETED Viewed

@@ -1,649 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>APEX - SmartStack CLI</title>
-    <link rel="stylesheet" href="css/styles.css">
-</head>
-<body>
-    <div class="app-container">
-        <!-- Global Header (single unified element) -->
-        <header class="global-header">
-            <div class="logo">SS</div>
-            <span class="site-title">SmartStack CLI</span>
-            <span class="version-badge">v3.34.0</span>
-            <div class="header-divider"></div>
-            <span class="page-title" data-lang="fr">APEX - Développement Incrémental</span>
-            <span class="page-title" data-lang="en">APEX - Incremental Development</span>
-            <nav class="breadcrumb">
-                <a href="index.html">
-                    <span data-lang="fr">Accueil</span>
-                    <span data-lang="en">Home</span>
-                </a>
-                <span class="breadcrumb-separator">&#8250;</span>
-                <span data-lang="fr">Workflows</span>
-                <span data-lang="en">Workflows</span>
-                <span class="breadcrumb-separator">&#8250;</span>
-                <span class="breadcrumb-current">APEX</span>
-            </nav>
-            <!-- Language Select -->
-            <select class="lang-select" id="lang-select" onchange="setLanguage(this.value); localStorage.setItem('doc-language', this.value);">
-                <option value="fr">🇫🇷 FR</option>
-                <option value="en">🇬🇧 EN</option>
-            </select>
-            <!-- Search -->
-            <div class="header-search">
-                <div class="search-input-wrapper">
-                    <span class="search-icon">&#128269;</span>
-                    <input type="text" id="search-input" class="search-input" placeholder="Rechercher..." data-placeholder-fr="Rechercher..." data-placeholder-en="Search..." autocomplete="off">
-                    <span class="search-shortcut">Ctrl+K</span>
-                </div>
-                <div id="search-results" class="search-results"></div>
-            </div>
-        </header>
-        <!-- App Body -->
-        <div class="app-body">
-            <!-- Sidebar -->
-            <aside class="sidebar">
-                <button class="sidebar-toggle" title="Toggle sidebar">
-                    <span class="toggle-icon-collapse">&#171;</span>
-                    <span class="toggle-icon-expand">&#187;</span>
-                </button>
-                <nav class="sidebar-nav">
-                <div class="nav-section">
-                    <div class="nav-section-title">
-                        <span data-lang="fr">Demarrage</span>
-                        <span data-lang="en">Getting Started</span>
-                    </div>
-                    <a href="index.html" class="nav-item">
-                        <span class="icon">&#127968;</span>
-                        <span class="nav-text" data-lang="fr">Accueil</span>
-                        <span class="nav-text" data-lang="en">Home</span>
-                    </a>
-                    <a href="installation.html" class="nav-item">
-                        <span class="icon">&#128230;</span>
-                        <span class="nav-text">Installation</span>
-                    </a>
-                    <a href="license.html" class="nav-item">
-                        <span class="icon">&#128274;</span>
-                        <span class="nav-text" data-lang="fr">Licence</span>
-                        <span class="nav-text" data-lang="en">License</span>
-                    </a>
-                    <a href="init.html" class="nav-item">
-                        <span class="icon">&#128640;</span>
-                        <span class="nav-text">Projet Client</span>
-                    </a>
-                </div>
-                <div class="nav-section">
-                    <div class="nav-section-title">Workflows</div>
-                    <a href="gitflow.html" class="nav-item">
-                        <span class="icon">&#128256;</span>
-                        <span class="nav-text">GitFlow</span>
-                    </a>
-                    <a href="efcore.html" class="nav-item">
-                        <span class="icon">&#128452;</span>
-                        <span class="nav-text">EF Core</span>
-                    </a>
-                    <a href="business-analyse.html" class="nav-item">
-                        <span class="icon">&#128202;</span>
-                        <span class="nav-text">Business Analyse</span>
-                    </a>
-                    <a href="ralph-loop.html" class="nav-item">
-                        <span class="icon">&#128260;</span>
-                        <span class="nav-text">Ralph Loop</span>
-                    </a>
-                    <a href="apex.html" class="nav-item active">
-                        <span class="icon">&#9881;</span>
-                        <span class="nav-text">APEX</span>
-                    </a>
-                </div>
-                <div class="nav-section">
-                    <div class="nav-section-title">
-                        <span data-lang="fr">Outils</span>
-                        <span data-lang="en">Tools</span>
-                    </div>
-                    <a href="cli-commands.html" class="nav-item">
-                        <span class="icon">&#128187;</span>
-                        <span class="nav-text" data-lang="fr">CLI SmartStack</span>
-                        <span class="nav-text" data-lang="en">SmartStack CLI</span>
-                    </a>
-                    <a href="agents.html" class="nav-item">
-                        <span class="icon">&#129302;</span>
-                        <span class="nav-text">Agents</span>
-                    </a>
-                    <a href="commands.html" class="nav-item">
-                        <span class="icon">&#9889;</span>
-                        <span class="nav-text" data-lang="fr">Commandes Claude</span>
-                        <span class="nav-text" data-lang="en">Claude Commands</span>
-                    </a>
-                    <a href="hooks.html" class="nav-item">
-                        <span class="icon">&#128279;</span>
-                        <span class="nav-text">Hooks</span>
-                    </a>
-                    <a href="test-web.html" class="nav-item">
-                        <span class="icon">&#127760;</span>
-                        <span class="nav-text">Test Web</span>
-                    </a>
-                </div>
-            </nav>
-            </aside>
-            <!-- Main Content -->
-            <main class="main-content">
-                <div class="content content-wide">
-                <!-- Introduction -->
-                <section id="introduction">
-                    <h1>APEX</h1>
-                    <p data-lang="fr">
-                        <strong>APEX = Analyze → Plan → Execute → eXamine</strong>
-                    </p>
-                    <p data-lang="en">
-                        <strong>APEX = Analyze → Plan → Execute → eXamine</strong>
-                    </p>
-                    <p data-lang="fr">
-                        APEX est la méthodologie SmartStack de développement incrémental. C'est un orchestrateur qui coordonne la génération de code via les skills existants (/controller, /application, /ui-components, /efcore) et les outils MCP.
-                    </p>
-                    <p data-lang="en">
-                        APEX is the SmartStack incremental development methodology. It is an orchestrator that coordinates code generation through existing skills (/controller, /application, /ui-components, /efcore) and MCP tools.
-                    </p>
-                    <div class="alert alert-info">
-                        <span class="alert-icon">&#128161;</span>
-                        <div class="alert-content">
-                            <h5 data-lang="fr">Principe clé</h5>
-                            <h5 data-lang="en">Key Principle</h5>
-                            <p data-lang="fr">
-                                APEX orchestre — il ne génère jamais le code SmartStack directement. Toute génération passe par les skills et les outils MCP.
-                            </p>
-                            <p data-lang="en">
-                                APEX orchestrates — it never generates SmartStack code directly. All generation goes through skills and MCP tools.
-                            </p>
-                        </div>
-                    </div>
-                </section>
-                <!-- Quick Start -->
-                <section id="quick-start">
-                    <h2 data-lang="fr">Démarrage Rapide</h2>
-                    <h2 data-lang="en">Quick Start</h2>
-                    <div class="code-block">
-                        <div class="code-label" data-lang="fr">Commandes APEX</div>
-                        <div class="code-label" data-lang="en">APEX Commands</div>
-                        <pre><code>/apex add absence management to HR module           # Add section
-/apex -a fix the leave request controller            # Auto fix
-/apex -a -x -s -pr add PDF export to Orders          # Full workflow
-/apex -e add status field to Project entity          # Economy (no agents)
-/apex -r                                             # Resume previous
-/apex -d .ralph/prd.json                             # Delegate mode (from ralph-loop)</code></pre>
-                    </div>
-                </section>
-                <!-- Flags -->
-                <section id="flags">
-                    <h2 data-lang="fr">Drapeaux</h2>
-                    <h2 data-lang="en">Flags</h2>
-                    <div class="table-container">
-                        <table class="reference-table">
-                            <thead>
-                                <tr>
-                                    <th data-lang="fr">Drapeau</th>
-                                    <th data-lang="en">Flag</th>
-                                    <th data-lang="fr">Description</th>
-                                    <th data-lang="en">Description</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td><code>-a</code></td>
-                                    <td colspan="1"></td>
-                                    <td data-lang="fr">Mode auto: saute les confirmations</td>
-                                    <td data-lang="en">Auto mode: skip confirmations</td>
-                                </tr>
-                                <tr>
-                                    <td><code>-x</code></td>
-                                    <td colspan="1"></td>
-                                    <td data-lang="fr">Revue approfondie: revue de code adversariale</td>
-                                    <td data-lang="en">Deep review: adversarial code review</td>
-                                </tr>
-                                <tr>
-                                    <td><code>-s</code></td>
-                                    <td colspan="1"></td>
-                                    <td data-lang="fr">Mode sauvegarde: sortie vers `.claude/output/apex/`</td>
-                                    <td data-lang="en">Save mode: output to `.claude/output/apex/`</td>
-                                </tr>
-                                <tr>
-                                    <td><code>-e</code></td>
-                                    <td colspan="1"></td>
-                                    <td data-lang="fr">Mode économie: pas de sous-agents</td>
-                                    <td data-lang="en">Economy mode: no subagents</td>
-                                </tr>
-                                <tr>
-                                    <td><code>-r</code></td>
-                                    <td colspan="1"></td>
-                                    <td data-lang="fr">Reprendre l'état précédent</td>
-                                    <td data-lang="en">Resume: continue from previous state</td>
-                                </tr>
-                                <tr>
-                                    <td><code>-pr</code></td>
-                                    <td colspan="1"></td>
-                                    <td data-lang="fr">Mode PR: créer une pull request à la fin</td>
-                                    <td data-lang="en">PR mode: create pull request at end</td>
-                                </tr>
-                                <tr>
-                                    <td><code>-d {path}</code></td>
-                                    <td colspan="1"></td>
-                                    <td data-lang="fr">Mode délégué: lire le contexte d'un fichier PRD. Implique -a -e. Utilisé par /ralph-loop.</td>
-                                    <td data-lang="en">Delegate mode: read context from PRD file. Implies -a -e. Used by /ralph-loop.</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </section>
-                <!-- 9 Steps Architecture -->
-                <section id="steps">
-                    <h2 data-lang="fr">Architecture: 9 Étapes</h2>
-                    <h2 data-lang="en">Architecture: 9 Steps</h2>
-                    <svg class="svg-diagram" viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" style="margin: 2rem 0;">
-                        <!-- Title -->
-                        <text x="500" y="30" text-anchor="middle" font-size="24" font-weight="bold" fill="#1f2937">APEX Phases & Layers</text>
-                        <!-- Phase boxes -->
-                        <g>
-                            <!-- ANALYZE -->
-                            <rect x="50" y="80" width="180" height="100" fill="#3b82f6" opacity="0.2" stroke="#3b82f6" stroke-width="2" rx="8"/>
-                            <text x="140" y="110" text-anchor="middle" font-weight="bold" font-size="18" fill="#1e40af">ANALYZE</text>
-                            <text x="140" y="140" text-anchor="middle" font-size="13" fill="#1f2937">Step 00: Init</text>
-                            <text x="140" y="160" text-anchor="middle" font-size="13" fill="#1f2937">Step 01: Explore</text>
-                            <!-- PLAN -->
-                            <rect x="280" y="80" width="180" height="100" fill="#8b5cf6" opacity="0.2" stroke="#8b5cf6" stroke-width="2" rx="8"/>
-                            <text x="370" y="110" text-anchor="middle" font-weight="bold" font-size="18" fill="#5b21b6">PLAN</text>
-                            <text x="370" y="140" text-anchor="middle" font-size="13" fill="#1f2937">Step 02: Layer</text>
-                            <text x="370" y="160" text-anchor="middle" font-size="13" fill="#1f2937">Mapping</text>
-                            <!-- EXECUTE -->
-                            <rect x="510" y="80" width="180" height="100" fill="#10b981" opacity="0.2" stroke="#10b981" stroke-width="2" rx="8"/>
-                            <text x="600" y="110" text-anchor="middle" font-weight="bold" font-size="18" fill="#065f46">EXECUTE</text>
-                            <text x="600" y="140" text-anchor="middle" font-size="13" fill="#1f2937">Step 03: Run</text>
-                            <text x="600" y="160" text-anchor="middle" font-size="13" fill="#1f2937">Skills & MCP</text>
-                            <!-- EXAMINE -->
-                            <rect x="740" y="80" width="180" height="100" fill="#f59e0b" opacity="0.2" stroke="#f59e0b" stroke-width="2" rx="8"/>
-                            <text x="830" y="110" text-anchor="middle" font-weight="bold" font-size="18" fill="#92400e">EXAMINE</text>
-                            <text x="830" y="140" text-anchor="middle" font-size="13" fill="#1f2937">Step 04: Validate</text>
-                            <text x="830" y="160" text-anchor="middle" font-size="13" fill="#1f2937">43 POST-CHECKs</text>
-                        </g>
-                        <!-- Arrows between phases -->
-                        <g stroke="#6b7280" stroke-width="2" fill="none">
-                            <path d="M 230 130 L 280 130" marker-end="url(#arrowhead)"/>
-                            <path d="M 460 130 L 510 130" marker-end="url(#arrowhead)"/>
-                            <path d="M 690 130 L 740 130" marker-end="url(#arrowhead)"/>
-                        </g>
-                        <!-- Layer Execution Order -->
-                        <text x="50" y="230" font-weight="bold" font-size="16" fill="#1f2937">Layer Execution Order:</text>
-                        <g id="layers">
-                            <rect x="50" y="250" width="880" height="200" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" rx="4"/>
-                            <!-- Layer flow -->
-                            <text x="70" y="275" font-size="12" fill="#374151" font-family="monospace">domain</text>
-                            <text x="70" y="300" font-size="12" fill="#374151" font-family="monospace">↓ infrastructure</text>
-                            <text x="70" y="325" font-size="12" fill="#dc2626" font-family="monospace" font-weight="bold">↓ migration (BLOCKING)</text>
-                            <text x="70" y="350" font-size="12" fill="#374151" font-family="monospace">↓ application</text>
-                            <text x="70" y="375" font-size="12" fill="#374151" font-family="monospace">↓ api</text>
-                            <text x="70" y="400" font-size="12" fill="#374151" font-family="monospace">↓ frontend</text>
-                            <text x="70" y="425" font-size="12" fill="#374151" font-family="monospace">↓ i18n → tests</text>
-                        </g>
-                        <!-- Arrow marker definition -->
-                        <defs>
-                            <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
-                                <polygon points="0 0, 10 3, 0 6" fill="#6b7280"/>
-                            </marker>
-                        </defs>
-                    </svg>
-                    <div class="table-container">
-                        <table class="reference-table">
-                            <thead>
-                                <tr>
-                                    <th data-lang="fr">Étape</th>
-                                    <th data-lang="en">Step</th>
-                                    <th data-lang="fr">Phase</th>
-                                    <th data-lang="en">Phase</th>
-                                    <th data-lang="fr">Objectif</th>
-                                    <th data-lang="en">Purpose</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>00</td>
-                                    <td colspan="1"></td>
-                                    <td colspan="1">Init</td>
-                                    <td colspan="1"></td>
-                                    <td data-lang="fr">Parser flags, détecter contexte, vérifier MCP, définir hiérarchie 4 niveaux, challenger besoin</td>
-                                    <td data-lang="en">Parse flags, detect context, verify MCP, define 4-level hierarchy, challenge need</td>
-                                </tr>
-                                <tr style="background: #3b82f6; background: rgba(59, 130, 246, 0.1);">
-                                    <td>01</td>
-                                    <td colspan="1"></td>
-                                    <td colspan="1" style="font-weight: bold;">ANALYZE</td>
-                                    <td colspan="1"></td>
-                                    <td data-lang="fr">Explorer le code existant (Agent Teams ou direct)</td>
-                                    <td data-lang="en">Explore existing code (Agent Teams or direct)</td>
-                                </tr>
-                                <tr style="background: rgba(139, 92, 246, 0.1);">
-                                    <td>02</td>
-                                    <td colspan="1"></td>
-                                    <td colspan="1" style="font-weight: bold;">PLAN</td>
-                                    <td colspan="1"></td>
-                                    <td data-lang="fr">Plan par couche avec mapping skill/MCP</td>
-                                    <td data-lang="en">Layer-by-layer plan with skill/MCP mapping</td>
-                                </tr>
-                                <tr style="background: rgba(16, 185, 129, 0.1);">
-                                    <td>03</td>
-                                    <td colspan="1"></td>
-                                    <td colspan="1" style="font-weight: bold;">EXECUTE</td>
-                                    <td colspan="1"></td>
-                                    <td data-lang="fr">Orchestrer exécution via skills et MCP</td>
-                                    <td data-lang="en">Orchestrate execution via skills and MCP</td>
-                                </tr>
-                                <tr style="background: rgba(245, 158, 11, 0.1);">
-                                    <td>04</td>
-                                    <td colspan="1"></td>
-                                    <td colspan="1" style="font-weight: bold;">EXAMINE</td>
-                                    <td colspan="1"></td>
-                                    <td data-lang="fr">Validation MCP, build, 43 POST-CHECKs, critères acceptation</td>
-                                    <td data-lang="en">MCP validation, build, 43 POST-CHECKs, acceptance criteria</td>
-                                </tr>
-                                <tr>
-                                    <td>05</td>
-                                    <td colspan="1"></td>
-                                    <td colspan="1">Deep Review</td>
-                                    <td colspan="1"></td>
-                                    <td data-lang="fr">Revue de code adversariale (si flag -x)</td>
-                                    <td data-lang="en">Adversarial code review (if -x flag)</td>
-                                </tr>
-                                <tr>
-                                    <td>06</td>
-                                    <td colspan="1"></td>
-                                    <td colspan="1">Resolve</td>
-                                    <td colspan="1"></td>
-                                    <td data-lang="fr">Corriger les trouvailles BLOQUANTES</td>
-                                    <td data-lang="en">Fix BLOCKING findings</td>
-                                </tr>
-                                <tr>
-                                    <td>07</td>
-                                    <td colspan="1"></td>
-                                    <td colspan="1">Tests</td>
-                                    <td colspan="1"></td>
-                                    <td data-lang="fr">Scaffolder tests via MCP</td>
-                                    <td data-lang="en">Scaffold tests via MCP</td>
-                                </tr>
-                                <tr>
-                                    <td>08</td>
-                                    <td colspan="1"></td>
-                                    <td colspan="1">Run Tests</td>
-                                    <td colspan="1"></td>
-                                    <td data-lang="fr">Exécuter tests jusqu'à 100% réussi</td>
-                                    <td data-lang="en">Run tests until 100% pass</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </section>
-                <!-- 43 POST-CHECKs -->
-                <section id="post-checks">
-                    <h2 data-lang="fr">43 POST-CHECKs (Étape 04)</h2>
-                    <h2 data-lang="en">43 POST-CHECKs (Step 04)</h2>
-                    <p data-lang="fr">
-                        Validation automatisée couvrant:
-                    </p>
-                    <p data-lang="en">
-                        Automated validation covering:
-                    </p>
-                    <ul style="margin-top: 1rem; margin-bottom: 2rem; line-height: 1.8;">
-                        <li data-lang="fr">Conventions namespace, usage BaseEntity, ITenantEntity</li>
-                        <li data-lang="en">Namespace conventions, BaseEntity usage, ITenantEntity</li>
-                        <li data-lang="fr">Filtrage TenantId dans les services (clause de garde obligatoire)</li>
-                        <li data-lang="en">TenantId filtering in services (guard clause mandatory)</li>
-                        <li data-lang="fr">[RequirePermission] sur contrôleurs (pas seulement [Authorize])</li>
-                        <li data-lang="en">[RequirePermission] on controllers (not just [Authorize])</li>
-                        <li data-lang="fr">Routes chemin complet, permissions en kebab-case</li>
-                        <li data-lang="en">Full-path routes, kebab-case permissions</li>
-                        <li data-lang="fr">Complétude données seed (navigation, permissions, rôles, traductions)</li>
-                        <li data-lang="en">Seed data completeness (navigation, permissions, roles, translations)</li>
-                        <li data-lang="fr">Idempotence traductions (gardes AnyAsync)</li>
-                        <li data-lang="en">Translation idempotency (AnyAsync guards)</li>
-                        <li data-lang="fr">Sécurité données seed FK (requête IDs réels de DB)</li>
-                        <li data-lang="en">FK seed data safety (query actual IDs from DB)</li>
-                        <li data-lang="fr">Frontend: i18n 4 langues, pas imports statiques en routes, pas couleurs en dur</li>
-                        <li data-lang="en">Frontend: i18n 4 languages, no static imports in routes, no hardcoded colors</li>
-                        <li data-lang="fr">Pas de modaux pour formulaires, pages create/edit existent, fichiers test existent</li>
-                        <li data-lang="en">No modals for forms, create/edit pages exist, test files exist</li>
-                        <li data-lang="fr">EntityLookup pour champs FK, param search sur GetAll</li>
-                        <li data-lang="en">EntityLookup for FK fields, search param on GetAll</li>
-                        <li data-lang="fr">Complétude sous-ressources, onglets page détail état local</li>
-                        <li data-lang="en">Sub-resource completeness, detail page tabs local state</li>
-                    </ul>
-                </section>
-                <!-- Error Handling -->
-                <section id="error-handling">
-                    <h2 data-lang="fr">Gestion des Erreurs</h2>
-                    <h2 data-lang="en">Error Handling</h2>
-                    <div class="table-container">
-                        <table class="reference-table">
-                            <thead>
-                                <tr>
-                                    <th data-lang="fr">Erreur</th>
-                                    <th data-lang="en">Error</th>
-                                    <th data-lang="fr">Action</th>
-                                    <th data-lang="en">Action</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td><code>dotnet build</code> <span data-lang="fr">échoue</span><span data-lang="en">fails</span></td>
-                                    <td colspan="1"></td>
-                                    <td data-lang="fr">Corriger via skill/MCP, rebuilder (max 3)</td>
-                                    <td data-lang="en">Fix via skill/MCP, rebuild (max 3)</td>
-                                </tr>
-                                <tr>
-                                    <td><code>npm run typecheck</code> <span data-lang="fr">échoue</span><span data-lang="en">fails</span></td>
-                                    <td colspan="1"></td>
-                                    <td data-lang="fr">Corriger erreur TypeScript (max 3)</td>
-                                    <td data-lang="en">Fix TypeScript error (max 3)</td>
-                                </tr>
-                                <tr>
-                                    <td data-lang="fr">MCP indisponible</td>
-                                    <td data-lang="en">MCP unavailable</td>
-                                    <td colspan="1"></td>
-                                    <td data-lang="fr">Mode dégradé avec smartstack-api.md</td>
-                                    <td data-lang="en">Degraded mode with smartstack-api.md</td>
-                                </tr>
-                                <tr>
-                                    <td data-lang="fr">POST-CHECK échoue</td>
-                                    <td data-lang="en">POST-CHECK fails</td>
-                                    <td colspan="1"></td>
-                                    <td data-lang="fr">Retourner execute, corriger, re-valider (max 2)</td>
-                                    <td data-lang="en">Return to execute, fix, re-validate (max 2)</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </section>
-                <!-- Success Criteria -->
-                <section id="success-criteria">
-                    <h2 data-lang="fr">Critères de Succès</h2>
-                    <h2 data-lang="en">Success Criteria</h2>
-                    <div class="alert alert-success" style="background: rgba(34, 197, 94, 0.1); border-color: #22c55e;">
-                        <span class="alert-icon" style="color: #22c55e;">✓</span>
-                        <div class="alert-content">
-                            <ul style="margin: 0; padding-left: 1.5rem;">
-                                <li data-lang="fr"><code>validate_conventions</code> MCP: 0 erreurs</li>
-                                <li data-lang="en"><code>validate_conventions</code> MCP: 0 errors</li>
-                                <li data-lang="fr"><code>dotnet build</code> PASS + <code>npm run typecheck</code> PASS</li>
-                                <li data-lang="en"><code>dotnet build</code> PASS + <code>npm run typecheck</code> PASS</li>
-                                <li data-lang="fr">Données seed complètes (navigation, permissions, rôles)</li>
-                                <li data-lang="en">Seed data complete (navigation, permissions, roles)</li>
-                                <li data-lang="fr">Tests: 100% réussi, >= 80% couverture</li>
-                                <li data-lang="en">Tests: 100% pass, >= 80% coverage</li>
-                                <li data-lang="fr">Commits atomiques par couche</li>
-                                <li data-lang="en">Commits atomic per layer</li>
-                            </ul>
-                        </div>
-                    </div>
-                </section>
-                <!-- Delegate Mode -->
-                <section id="delegate-mode">
-                    <h2 data-lang="fr">Mode Délégué (ralph-loop)</h2>
-                    <h2 data-lang="en">Delegate Mode (ralph-loop)</h2>
-                    <p data-lang="fr">
-                        Quand ralph-loop invoque APEX avec `-d .ralph/prd.json`, APEX lit le contexte PRD et exécute le workflow complet en mode autonome.
-                    </p>
-                    <p data-lang="en">
-                        When ralph-loop invokes APEX with `-d .ralph/prd.json`, APEX reads PRD context and executes the full workflow in autonomous mode.
-                    </p>
-                    <div class="code-block">
-                        <div class="code-label" data-lang="fr">Structure PRD</div>
-                        <div class="code-label" data-lang="en">PRD Structure</div>
-                        <pre><code>{
-  "version": "1.0",
-  "metadata": {
-    "name": "Feature Name",
-    "domain": "module-path",
-    "category": "feature|bugfix|refactor"
-  },
-  "context": {
-    "domain": {...},
-    "infrastructure": {...},
-    "application": {...},
-    "api": {...},
-    "seedData": {...},
-    "frontend": {...}
-  },
-  "tasks": [
-    {
-      "id": "entity",
-      "category": "domain",
-      "status": "pending",
-      "completed_at": null,
-      "commit_hash": null,
-      "files_changed": []
-    }
-  ]
-}</code></pre>
-                    </div>
-                    <p data-lang="fr">
-                        APEX met à jour `task.status`, `completed_at`, `commit_hash`, et `files_changed` au fur et à mesure. Ralph lit le fichier PRD mis à jour après que APEX retourne.
-                    </p>
-                    <p data-lang="en">
-                        APEX updates `task.status`, `completed_at`, `commit_hash`, and `files_changed` as it progresses. Ralph reads the updated PRD file after APEX returns.
-                    </p>
-                </section>
-                <!-- Integration Points -->
-                <section id="integration">
-                    <h2 data-lang="fr">Points d'Intégration</h2>
-                    <h2 data-lang="en">Integration Points</h2>
-                    <p data-lang="fr">
-                        APEX intègre:
-                    </p>
-                    <p data-lang="en">
-                        APEX integrates:
-                    </p>
-                    <div class="feature-grid" style="margin-top: 1.5rem;">
-                        <div class="feature-item">
-                            <span class="feature-icon">&#128736;</span>
-                            <span class="feature-text" data-lang="fr">Skills: /controller, /application, /ui-components, /efcore</span>
-                            <span class="feature-text" data-lang="en">Skills: /controller, /application, /ui-components, /efcore</span>
-                        </div>
-                        <div class="feature-item">
-                            <span class="feature-icon">&#128205;</span>
-                            <span class="feature-text" data-lang="fr">MCP: validate_conventions, scaffold_*, generate_*, suggest_*</span>
-                            <span class="feature-text" data-lang="en">MCP: validate_conventions, scaffold_*, generate_*, suggest_*</span>
-                        </div>
-                        <div class="feature-item">
-                            <span class="feature-icon">&#128201;</span>
-                            <span class="feature-text" data-lang="fr">Agents: explore-codebase, code-reviewer (si -x)</span>
-                            <span class="feature-text" data-lang="en">Agents: explore-codebase, code-reviewer (if -x)</span>
-                        </div>
-                        <div class="feature-item">
-                            <span class="feature-icon">&#128257;</span>
-                            <span class="feature-text" data-lang="fr">GitFlow: commits atomiques, PR creation (si -pr)</span>
-                            <span class="feature-text" data-lang="en">GitFlow: atomic commits, PR creation (if -pr)</span>
-                        </div>
-                    </div>
-                </section>
-                <!-- Reference -->
-                <section id="reference">
-                    <h2 data-lang="fr">Référence</h2>
-                    <h2 data-lang="en">Reference</h2>
-                    <p class="template-path"><code>templates/skills/apex/</code></p>
-                    <div class="alert alert-info" style="margin-top: 1.5rem;">
-                        <span class="alert-icon">&#128161;</span>
-                        <div class="alert-content">
-                            <p data-lang="fr">
-                                Pour une documentation complète des étapes APEX, références, et patterns: consultez les fichiers de la skill APEX dans `templates/skills/apex/`.
-                            </p>
-                            <p data-lang="en">
-                                For complete APEX step documentation, references, and patterns: see APEX skill files in `templates/skills/apex/`.
-                            </p>
-                        </div>
-                    </div>
-                </section>
-            </div>
-            </main>
-        </div>
-    </div>
-    <!-- Mobile Menu Button -->
-    <button class="mobile-menu-btn">&#9776;</button>
-    <div class="overlay"></div>
-    <script src="js/app.js"></script>
-</body>
-</html>