@atlashub/smartstack-cli 1.13.2 → 1.14.0

package/.documentation/installation.html

@@ -5,14 +5,327 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Installation - SmartStack CLI</title>
     <link rel="stylesheet" href="css/styles.css">
+    <style>
+        /* Installation-specific styles */
+        .platform-selector {
+            display: flex;
+            gap: 1rem;
+            margin-bottom: 2rem;
+        }
+        .platform-btn {
+            flex: 1;
+            padding: 1rem 1.5rem;
+            border: 2px solid var(--border);
+            border-radius: 8px;
+            background: var(--bg-card);
+            color: var(--text);
+            cursor: pointer;
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            font-size: 1rem;
+            font-weight: 500;
+        }
+        .platform-btn:hover {
+            border-color: var(--primary);
+            background: var(--bg-hover);
+        }
+        .platform-btn.active {
+            border-color: var(--primary);
+            background: rgba(59, 130, 246, 0.1);
+        }
+        .platform-btn .platform-icon {
+            font-size: 1.5rem;
+        }
+        .platform-content {
+            display: none;
+        }
+        .platform-content.active {
+            display: block;
+        }
+
+        /* OS Selector */
+        .os-selector {
+            display: flex;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+        }
+        .os-btn {
+            padding: 0.5rem 1rem;
+            border: 1px solid var(--border);
+            border-radius: 6px;
+            background: var(--bg-card);
+            color: var(--text);
+            cursor: pointer;
+            transition: all 0.2s ease;
+            font-size: 0.9rem;
+        }
+        .os-btn:hover {
+            border-color: var(--primary);
+        }
+        .os-btn.active {
+            border-color: var(--primary);
+            background: rgba(59, 130, 246, 0.1);
+            font-weight: 500;
+        }
+        .os-content {
+            display: none;
+        }
+        .os-content.active {
+            display: block;
+        }
+
+        /* Settings panel */
+        .settings-panel {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            padding: 1.5rem;
+            margin-bottom: 2rem;
+        }
+        .settings-row {
+            display: flex;
+            gap: 2rem;
+            flex-wrap: wrap;
+        }
+        .settings-group {
+            flex: 1;
+            min-width: 200px;
+        }
+        .settings-label {
+            font-weight: 600;
+            color: var(--text);
+            margin-bottom: 0.75rem;
+            display: block;
+        }
+
+        /* Tutorial section */
+        .tutorial-section {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            padding: 1.5rem;
+            margin-bottom: 1.5rem;
+        }
+        .tutorial-section h4 {
+            color: var(--text);
+            margin: 0 0 1rem 0;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .tutorial-section h4 .step-badge {
+            background: var(--primary);
+            color: white;
+            padding: 0.25rem 0.75rem;
+            border-radius: 4px;
+            font-size: 0.8rem;
+        }
+        .tutorial-note {
+            background: rgba(59, 130, 246, 0.1);
+            border-left: 3px solid var(--primary);
+            padding: 1rem;
+            margin: 1rem 0;
+            border-radius: 0 4px 4px 0;
+        }
+        .tutorial-note p {
+            margin: 0;
+            color: var(--text);
+        }
+
+        /* API Key Input */
+        .api-key-section {
+            margin: 1.5rem 0;
+            padding: 1rem;
+            background: var(--bg-card);
+            border-radius: 8px;
+            border: 1px solid var(--border);
+        }
+        .api-key-input-wrapper {
+            display: flex;
+            gap: 0.5rem;
+            margin-top: 0.5rem;
+        }
+        .api-key-input {
+            flex: 1;
+            padding: 0.5rem 0.75rem;
+            border: 1px solid var(--border);
+            border-radius: 4px;
+            background: var(--bg-input);
+            color: var(--text);
+            font-family: monospace;
+        }
+        .api-key-input:focus {
+            outline: none;
+            border-color: var(--primary);
+        }
+        .api-key-save-btn {
+            padding: 0.5rem 1rem;
+            background: var(--primary);
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+        }
+        .api-key-save-btn:hover {
+            background: var(--primary-hover);
+        }
+
+        /* Progress bar */
+        .progress-container {
+            margin: 2rem 0;
+            padding: 1.5rem;
+            background: var(--bg-card);
+            border-radius: 8px;
+            border: 1px solid var(--border);
+        }
+        .progress-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1rem;
+        }
+        .progress-title {
+            font-weight: 600;
+            color: var(--text);
+        }
+        .progress-count {
+            color: var(--text-muted);
+            font-size: 0.9rem;
+        }
+        .progress-bar {
+            height: 8px;
+            background: var(--bg-hover);
+            border-radius: 4px;
+            overflow: hidden;
+        }
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, var(--primary), var(--success));
+            border-radius: 4px;
+            transition: width 0.3s ease;
+        }
+
+        /* Checklist */
+        .checklist {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+        .checklist-item {
+            display: flex;
+            align-items: flex-start;
+            gap: 1rem;
+            padding: 1.5rem;
+            margin-bottom: 1rem;
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            transition: all 0.2s ease;
+        }
+        .checklist-item:hover {
+            border-color: var(--primary);
+        }
+        .checklist-item.completed {
+            border-color: var(--success);
+            background: rgba(34, 197, 94, 0.05);
+        }
+        .checklist-checkbox {
+            width: 24px;
+            height: 24px;
+            min-width: 24px;
+            border: 2px solid var(--border);
+            border-radius: 50%;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s ease;
+            margin-top: 0.2rem;
+        }
+        .checklist-checkbox:hover {
+            border-color: var(--primary);
+        }
+        .checklist-item.completed .checklist-checkbox {
+            background: var(--success);
+            border-color: var(--success);
+        }
+        .checklist-checkbox::after {
+            content: '';
+            display: none;
+        }
+        .checklist-item.completed .checklist-checkbox::after {
+            content: '\2713';
+            display: block;
+            color: white;
+            font-weight: bold;
+        }
+        .checklist-content {
+            flex: 1;
+        }
+        .checklist-title {
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            color: var(--text);
+        }
+        .checklist-description {
+            color: var(--text-muted);
+            font-size: 0.9rem;
+            line-height: 1.5;
+        }
+        .checklist-number {
+            width: 28px;
+            height: 28px;
+            min-width: 28px;
+            background: var(--primary);
+            color: white;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 600;
+            font-size: 0.85rem;
+        }
+        .checklist-item.completed .checklist-number {
+            background: var(--success);
+        }
+
+        /* Dynamic command display */
+        .dynamic-command {
+            transition: all 0.2s ease;
+        }
+        .command-highlight {
+            background: rgba(59, 130, 246, 0.2);
+            padding: 0 2px;
+            border-radius: 2px;
+        }
+
+        /* Reset button */
+        .reset-progress-btn {
+            margin-top: 1rem;
+            padding: 0.5rem 1rem;
+            background: transparent;
+            color: var(--text-muted);
+            border: 1px solid var(--border);
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 0.85rem;
+        }
+        .reset-progress-btn:hover {
+            background: var(--bg-hover);
+            color: var(--text);
+        }
+    </style>
 </head>
 <body>
     <div class="app-container">
-        <!-- Global Header (single unified element) -->
+        <!-- Global Header -->
         <header class="global-header">
             <div class="logo">SS</div>
             <span class="site-title">SmartStack CLI</span>
-            <span class="version-badge">v1.5.0</span>
+            <span class="version-badge">v1.14.0</span>
             <div class="header-divider"></div>
             <span class="page-title">Installation</span>
             <nav class="breadcrumb">
@@ -25,8 +338,8 @@
             </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>
+                <option value="fr">&#127467;&#127479; FR</option>
+                <option value="en">&#127468;&#127463; EN</option>
             </select>
             <!-- Search -->
             <div class="header-search">
@@ -128,417 +441,565 @@
             <!-- Main Content -->
             <main class="main-content">
                 <div class="content content-wide">
-                <!-- Prerequisites -->
-                <section id="prerequisites">
+
+                <!-- Introduction -->
+                <section id="introduction">
                     <h2>
-                        <span data-lang="fr">Prerequis</span>
-                        <span data-lang="en">Prerequisites</span>
+                        <span data-lang="fr">Installation de SmartStack CLI</span>
+                        <span data-lang="en">SmartStack CLI Installation</span>
                     </h2>
+                    <p data-lang="fr">
+                        Suivez cette checklist interactive pour installer SmartStack CLI et configurer votre environnement de developpement.
+                        Votre progression est automatiquement sauvegardee.
+                    </p>
+                    <p data-lang="en">
+                        Follow this interactive checklist to install SmartStack CLI and configure your development environment.
+                        Your progress is automatically saved.
+                    </p>
+                </section>
 
-                    <div class="feature-grid">
-                        <div class="feature-item">
-                            <span class="feature-icon">&#128215;</span>
-                            <span class="feature-text"><strong>Node.js</strong> &gt;= 18.0.0</span>
-                        </div>
-                        <div class="feature-item">
-                            <span class="feature-icon">&#128230;</span>
-                            <span class="feature-text"><strong>npm</strong> &gt;= 8.0.0</span>
-                        </div>
-                        <div class="feature-item">
-                            <span class="feature-icon">&#129302;</span>
-                            <span class="feature-text"><strong>Claude Code</strong> (CLI d'Anthropic)</span>
-                        </div>
+                <!-- Progress Bar -->
+                <div class="progress-container">
+                    <div class="progress-header">
+                        <span class="progress-title">
+                            <span data-lang="fr">Progression</span>
+                            <span data-lang="en">Progress</span>
+                        </span>
+                        <span class="progress-count" id="progress-count">0/7</span>
+                    </div>
+                    <div class="progress-bar">
+                        <div class="progress-fill" id="progress-fill" style="width: 0%"></div>
                     </div>
+                    <button class="reset-progress-btn" onclick="resetProgress()">
+                        <span data-lang="fr">Reinitialiser la progression</span>
+                        <span data-lang="en">Reset progress</span>
+                    </button>
+                </div>
+
+                <!-- Configuration Panel -->
+                <section id="config-panel">
+                    <h3>
+                        <span data-lang="fr">Configuration</span>
+                        <span data-lang="en">Configuration</span>
+                    </h3>
+                    <p data-lang="fr">Selectionnez votre environnement pour afficher les commandes adaptees :</p>
+                    <p data-lang="en">Select your environment to display adapted commands:</p>
 
-                    <div class="code-block">
-                        <button class="copy-btn">Copy</button>
-                        <pre><code># Verifier les versions
-node --version  # v18.x.x ou superieur
-npm --version   # v8.x.x ou superieur</code></pre>
+                    <div class="settings-panel">
+                        <div class="settings-row">
+                            <div class="settings-group">
+                                <span class="settings-label">
+                                    <span data-lang="fr">Systeme d'exploitation</span>
+                                    <span data-lang="en">Operating System</span>
+                                </span>
+                                <div class="os-selector">
+                                    <button class="os-btn active" data-os="windows" onclick="setOS('windows')">Windows</button>
+                                    <button class="os-btn" data-os="macos" onclick="setOS('macos')">macOS</button>
+                                    <button class="os-btn" data-os="linux" onclick="setOS('linux')">Linux</button>
+                                </div>
+                            </div>
+                            <div class="settings-group">
+                                <span class="settings-label">
+                                    <span data-lang="fr">Plateforme Git</span>
+                                    <span data-lang="en">Git Platform</span>
+                                </span>
+                                <div class="platform-selector">
+                                    <button class="platform-btn active" data-platform="github" onclick="setPlatform('github')">
+                                        <span class="platform-icon">&#128025;</span>
+                                        <span>GitHub</span>
+                                    </button>
+                                    <button class="platform-btn" data-platform="azure" onclick="setPlatform('azure')">
+                                        <span class="platform-icon">&#9729;</span>
+                                        <span>Azure DevOps</span>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </section>
 
-                <!-- Quick Install -->
-                <section id="quick-install">
-                    <h2>
-                        <span data-lang="fr">Installation rapide</span>
-                        <span data-lang="en">Quick Install</span>
-                    </h2>
+                <!-- Installation Checklist -->
+                <section id="checklist">
+                    <h3>
+                        <span data-lang="fr">Checklist d'installation</span>
+                        <span data-lang="en">Installation Checklist</span>
+                    </h3>
 
-                    <div class="code-block">
-                        <button class="copy-btn">Copy</button>
-                        <pre><code># Installer le package
-npm install -g @atlashub/smartstack-cli
+                    <ul class="checklist" id="installation-checklist">
+                        <!-- Step 1: Node.js -->
+                        <li class="checklist-item" data-step="1">
+                            <span class="checklist-number">1</span>
+                            <div class="checklist-checkbox" onclick="toggleStep(1)"></div>
+                            <div class="checklist-content">
+                                <div class="checklist-title">
+                                    <span data-lang="fr">Installer Node.js</span>
+                                    <span data-lang="en">Install Node.js</span>
+                                </div>
+                                <div class="checklist-description">
+                                    <p data-lang="fr">Telechargez et installez Node.js (version 18 ou superieure recommandee).</p>
+                                    <p data-lang="en">Download and install Node.js (version 18 or higher recommended).</p>
+                                    <div class="code-block">
+                                        <button class="copy-btn">Copy</button>
+                                        <pre><code>node --version  # Verifier l'installation</code></pre>
+                                    </div>
+                                    <p><a href="https://nodejs.org/" target="_blank">https://nodejs.org/</a></p>
+                                </div>
+                            </div>
+                        </li>
 
-# Installer les commandes
-smartstack-cli install</code></pre>
-                    </div>
-                </section>
+                        <!-- Step 2: Git -->
+                        <li class="checklist-item" data-step="2">
+                            <span class="checklist-number">2</span>
+                            <div class="checklist-checkbox" onclick="toggleStep(2)"></div>
+                            <div class="checklist-content">
+                                <div class="checklist-title">
+                                    <span data-lang="fr">Configurer Git</span>
+                                    <span data-lang="en">Configure Git</span>
+                                </div>
+                                <div class="checklist-description">
+                                    <!-- GitHub content -->
+                                    <div class="platform-content github-content active">
+                                        <p data-lang="fr">Configurez Git avec SSH pour GitHub. Ajoutez votre cle SSH dans les parametres GitHub.</p>
+                                        <p data-lang="en">Configure Git with SSH for GitHub. Add your SSH key in GitHub settings.</p>
 
-                <!-- Global Installation -->
-                <section id="global">
-                    <h2>
-                        <span data-lang="fr">Installation globale (recommandee)</span>
-                        <span data-lang="en">Global Installation (recommended)</span>
-                    </h2>
+                                        <!-- Windows -->
+                                        <div class="os-content windows-content active">
+                                            <div class="code-block">
+                                                <button class="copy-btn">Copy</button>
+                                                <pre><code># Generer une cle SSH (PowerShell)
+ssh-keygen -t ed25519 -C "your_email@example.com"
 
-                    <p data-lang="fr">
-                        L'installation globale installe les commandes dans <code>~/.claude</code>, les rendant disponibles dans tous vos projets.
-                    </p>
-                    <p data-lang="en">
-                        Global installation installs commands to <code>~/.claude</code>, making them available in all your projects.
-                    </p>
+# Demarrer le service SSH Agent
+Get-Service ssh-agent | Set-Service -StartupType Automatic
+Start-Service ssh-agent
+ssh-add $env:USERPROFILE\.ssh\id_ed25519
+
+# Afficher la cle publique a copier
+Get-Content $env:USERPROFILE\.ssh\id_ed25519.pub</code></pre>
+                                            </div>
+                                        </div>
+                                        <!-- macOS -->
+                                        <div class="os-content macos-content">
+                                            <div class="code-block">
+                                                <button class="copy-btn">Copy</button>
+                                                <pre><code># Generer une cle SSH
+ssh-keygen -t ed25519 -C "your_email@example.com"
+
+# Ajouter au Keychain
+ssh-add --apple-use-keychain ~/.ssh/id_ed25519
+
+# Afficher la cle publique a copier
+cat ~/.ssh/id_ed25519.pub | pbcopy  # Copie directement</code></pre>
+                                            </div>
+                                        </div>
+                                        <!-- Linux -->
+                                        <div class="os-content linux-content">
+                                            <div class="code-block">
+                                                <button class="copy-btn">Copy</button>
+                                                <pre><code># Generer une cle SSH
+ssh-keygen -t ed25519 -C "your_email@example.com"
+
+# Demarrer l'agent SSH
+eval "$(ssh-agent -s)"
+ssh-add ~/.ssh/id_ed25519
+
+# Afficher la cle publique a copier
+cat ~/.ssh/id_ed25519.pub</code></pre>
+                                            </div>
+                                        </div>
 
-                    <ol class="steps-list">
-                        <li>
-                            <div class="step-content">
-                                <h5 data-lang="fr">Installer le package npm</h5>
-                                <h5 data-lang="en">Install npm package</h5>
-                                <div class="code-block">
-                                    <button class="copy-btn">Copy</button>
-                                    <pre><code>npm install -g @atlashub/smartstack-cli</code></pre>
+                                        <p data-lang="fr">Ajoutez votre cle SSH ici : <a href="https://github.com/settings/keys" target="_blank">https://github.com/settings/keys</a></p>
+                                        <p data-lang="en">Add your SSH key here: <a href="https://github.com/settings/keys" target="_blank">https://github.com/settings/keys</a></p>
+                                    </div>
+                                    <!-- Azure DevOps content -->
+                                    <div class="platform-content azure-content">
+                                        <p data-lang="fr">Configurez Git avec HTTPS et Git Credential Manager pour Azure DevOps.</p>
+                                        <p data-lang="en">Configure Git with HTTPS and Git Credential Manager for Azure DevOps.</p>
+
+                                        <!-- Windows -->
+                                        <div class="os-content windows-content active">
+                                            <div class="code-block">
+                                                <button class="copy-btn">Copy</button>
+                                                <pre><code># Git Credential Manager est inclus avec Git for Windows
+# Verifiez qu'il est configure :
+git config --global credential.helper manager</code></pre>
+                                            </div>
+                                            <p data-lang="fr" style="margin-top: 0.5rem; color: var(--text-muted);">Git Credential Manager est installe automatiquement avec Git for Windows.</p>
+                                            <p data-lang="en" style="margin-top: 0.5rem; color: var(--text-muted);">Git Credential Manager is installed automatically with Git for Windows.</p>
+                                        </div>
+                                        <!-- macOS -->
+                                        <div class="os-content macos-content">
+                                            <div class="code-block">
+                                                <button class="copy-btn">Copy</button>
+                                                <pre><code># Installer Git Credential Manager via Homebrew
+brew install --cask git-credential-manager
+
+# Configurer le credential helper
+git config --global credential.helper manager</code></pre>
+                                            </div>
+                                        </div>
+                                        <!-- Linux -->
+                                        <div class="os-content linux-content">
+                                            <div class="code-block">
+                                                <button class="copy-btn">Copy</button>
+                                                <pre><code># Installer Git Credential Manager
+# Telechargez le .deb depuis: https://github.com/git-ecosystem/git-credential-manager/releases
+sudo dpkg -i gcm-linux_amd64.deb
+
+# Configurer le credential helper
+git config --global credential.helper manager</code></pre>
+                                            </div>
+                                        </div>
+
+                                        <p data-lang="fr" style="margin-top: 1rem;">Git Credential Manager gerera automatiquement l'authentification via le navigateur lors du clone avec <code>/gitflow:10-start</code>.</p>
+                                        <p data-lang="en" style="margin-top: 1rem;">Git Credential Manager will automatically handle authentication via browser when cloning with <code>/gitflow:10-start</code>.</p>
+                                    </div>
                                 </div>
                             </div>
                         </li>
-                        <li>
-                            <div class="step-content">
-                                <h5 data-lang="fr">Activer votre licence</h5>
-                                <h5 data-lang="en">Activate your license</h5>
-                                <div class="code-block">
-                                    <button class="copy-btn">Copy</button>
-                                    <pre><code>smartstack-cli activate YOUR-LICENSE-KEY</code></pre>
+
+                        <!-- Step 3: Claude Code CLI -->
+                        <li class="checklist-item" data-step="3">
+                            <span class="checklist-number">3</span>
+                            <div class="checklist-checkbox" onclick="toggleStep(3)"></div>
+                            <div class="checklist-content">
+                                <div class="checklist-title">
+                                    <span data-lang="fr">Installer Claude Code CLI</span>
+                                    <span data-lang="en">Install Claude Code CLI</span>
+                                </div>
+                                <div class="checklist-description">
+                                    <p data-lang="fr">Installez Claude Code CLI globalement avec npm.</p>
+                                    <p data-lang="en">Install Claude Code CLI globally with npm.</p>
+                                    <div class="code-block">
+                                        <button class="copy-btn">Copy</button>
+                                        <pre><code>npm install -g @anthropic-ai/claude-code</code></pre>
+                                    </div>
                                 </div>
                             </div>
                         </li>
-                        <li>
-                            <div class="step-content">
-                                <h5 data-lang="fr">Installer les commandes</h5>
-                                <h5 data-lang="en">Install commands</h5>
-                                <div class="code-block">
-                                    <button class="copy-btn">Copy</button>
-                                    <pre><code>smartstack-cli install</code></pre>
+
+                        <!-- Step 4: SmartStack CLI -->
+                        <li class="checklist-item" data-step="4">
+                            <span class="checklist-number">4</span>
+                            <div class="checklist-checkbox" onclick="toggleStep(4)"></div>
+                            <div class="checklist-content">
+                                <div class="checklist-title">
+                                    <span data-lang="fr">Installer SmartStack CLI</span>
+                                    <span data-lang="en">Install SmartStack CLI</span>
+                                </div>
+                                <div class="checklist-description">
+                                    <p data-lang="fr">Installez SmartStack CLI globalement avec npm.</p>
+                                    <p data-lang="en">Install SmartStack CLI globally with npm.</p>
+                                    <div class="code-block">
+                                        <button class="copy-btn">Copy</button>
+                                        <pre><code>npm install -g @atlashub/smartstack-cli</code></pre>
+                                    </div>
+                                    <p data-lang="fr">Verifiez l'installation :</p>
+                                    <p data-lang="en">Verify installation:</p>
+                                    <div class="code-block">
+                                        <button class="copy-btn">Copy</button>
+                                        <pre><code>smartstack --version</code></pre>
+                                    </div>
                                 </div>
                             </div>
                         </li>
-                        <li>
-                            <div class="step-content">
-                                <h5 data-lang="fr">Verifier l'installation</h5>
-                                <h5 data-lang="en">Verify installation</h5>
-                                <div class="code-block">
-                                    <button class="copy-btn">Copy</button>
-                                    <pre><code>smartstack-cli status</code></pre>
+
+                        <!-- Step 5: SmartStack MCP Server -->
+                        <li class="checklist-item" data-step="5">
+                            <span class="checklist-number">5</span>
+                            <div class="checklist-checkbox" onclick="toggleStep(5)"></div>
+                            <div class="checklist-content">
+                                <div class="checklist-title">
+                                    <span data-lang="fr">Installer SmartStack MCP Server</span>
+                                    <span data-lang="en">Install SmartStack MCP Server</span>
+                                </div>
+                                <div class="checklist-description">
+                                    <p data-lang="fr">Installez le serveur MCP SmartStack pour la validation des conventions et le scaffolding.</p>
+                                    <p data-lang="en">Install the SmartStack MCP server for conventions validation and scaffolding.</p>
+                                    <div class="code-block">
+                                        <button class="copy-btn">Copy</button>
+                                        <pre><code># Etape 1: Installer le package globalement
+npm install -g @atlashub/smartstack-mcp
+
+# Etape 2: Enregistrer le serveur MCP dans Claude
+claude mcp add smartstack -- npx @atlashub/smartstack-mcp</code></pre>
+                                    </div>
                                 </div>
                             </div>
                         </li>
-                    </ol>
-                </section>
 
-                <!-- Local Installation -->
-                <section id="local">
-                    <h2>
-                        <span data-lang="fr">Installation locale (projet)</span>
-                        <span data-lang="en">Local Installation (project)</span>
-                    </h2>
+                        <!-- Step 6: Context7 MCP Server -->
+                        <li class="checklist-item" data-step="6">
+                            <span class="checklist-number">6</span>
+                            <div class="checklist-checkbox" onclick="toggleStep(6)"></div>
+                            <div class="checklist-content">
+                                <div class="checklist-title">
+                                    <span data-lang="fr">Installer Context7 MCP Server</span>
+                                    <span data-lang="en">Install Context7 MCP Server</span>
+                                </div>
+                                <div class="checklist-description">
+                                    <p data-lang="fr">Installez le serveur MCP Context7 pour acceder a la documentation des bibliotheques.</p>
+                                    <p data-lang="en">Install the Context7 MCP server to access library documentation.</p>
 
-                    <p data-lang="fr">
-                        L'installation locale installe les commandes dans <code>./.claude</code> du projet courant. Utile pour personnaliser les commandes par projet.
-                    </p>
-                    <p data-lang="en">
-                        Local installation installs commands to <code>./.claude</code> in the current project. Useful for customizing commands per project.
-                    </p>
+                                    <!-- API Key Input -->
+                                    <div class="api-key-section">
+                                        <label data-lang="fr"><strong>Cle API Context7</strong> (optionnel - ameliore les performances)</label>
+                                        <label data-lang="en"><strong>Context7 API Key</strong> (optional - improves performance)</label>
+                                        <div class="api-key-input-wrapper">
+                                            <input type="text" class="api-key-input" id="context7-api-key" placeholder="ctx7_xxxxxxxx">
+                                            <button class="api-key-save-btn" onclick="saveApiKey()">
+                                                <span data-lang="fr">Sauvegarder</span>
+                                                <span data-lang="en">Save</span>
+                                            </button>
+                                        </div>
+                                        <small style="color: var(--text-muted); margin-top: 0.5rem; display: block;">
+                                            <span data-lang="fr">Obtenez une cle API sur <a href="https://context7.com" target="_blank">context7.com</a></span>
+                                            <span data-lang="en">Get an API key at <a href="https://context7.com" target="_blank">context7.com</a></span>
+                                        </small>
+                                    </div>
 
-                    <div class="code-block">
-                        <button class="copy-btn">Copy</button>
-                        <pre><code># Dans votre projet
-npm install -D @atlashub/smartstack-cli
+                                    <div class="code-block">
+                                        <button class="copy-btn">Copy</button>
+                                        <pre><code id="context7-command"># Sans cle API
+claude mcp add context7 -- npx @upstash/context7-mcp</code></pre>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
 
-# Installer localement
-npx smartstack-cli install --local</code></pre>
-                    </div>
+                        <!-- Step 7: Verification -->
+                        <li class="checklist-item" data-step="7">
+                            <span class="checklist-number">7</span>
+                            <div class="checklist-checkbox" onclick="toggleStep(7)"></div>
+                            <div class="checklist-content">
+                                <div class="checklist-title">
+                                    <span data-lang="fr">Verifier l'installation</span>
+                                    <span data-lang="en">Verify Installation</span>
+                                </div>
+                                <div class="checklist-description">
+                                    <p data-lang="fr">Verifiez que tout est correctement installe.</p>
+                                    <p data-lang="en">Verify that everything is correctly installed.</p>
+                                    <div class="code-block">
+                                        <button class="copy-btn">Copy</button>
+                                        <pre><code># Verifier les versions
+node --version
+claude --version
+smartstack --version
 
-                    <div class="alert alert-warning">
-                        <span class="alert-icon">&#9888;</span>
-                        <div class="alert-content">
-                            <h5 data-lang="fr">Ajoutez .claude au .gitignore</h5>
-                            <h5 data-lang="en">Add .claude to .gitignore</h5>
-                            <p data-lang="fr">
-                                Si vous installez localement, pensez a ajouter <code>.claude/</code> a votre <code>.gitignore</code> pour eviter de commiter les fichiers de configuration.
-                            </p>
-                            <p data-lang="en">
-                                If you install locally, consider adding <code>.claude/</code> to your <code>.gitignore</code> to avoid committing configuration files.
-                            </p>
-                        </div>
-                    </div>
+# Verifier les serveurs MCP
+claude mcp list</code></pre>
+                                    </div>
+                                    <div class="alert alert-success" style="margin-top: 1rem;">
+                                        <span class="alert-icon">&#9989;</span>
+                                        <div class="alert-content">
+                                            <p data-lang="fr">Felicitations ! Vous pouvez maintenant :</p>
+                                            <p data-lang="en">Congratulations! You can now:</p>
+                                            <ul style="margin: 0.5rem 0 0 1rem;">
+                                                <li data-lang="fr">Creer un nouveau projet : <code>smartstack init MyProject</code></li>
+                                                <li data-lang="en">Create a new project: <code>smartstack init MyProject</code></li>
+                                                <li data-lang="fr">Ou initialiser sur un projet existant : <code>smartstack init .</code></li>
+                                                <li data-lang="en">Or initialize on an existing project: <code>smartstack init .</code></li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
                 </section>
 
-                <!-- MCP Servers -->
-                <section id="mcp-servers">
-                    <h2>
-                        <span data-lang="fr">Serveurs MCP (recommande)</span>
-                        <span data-lang="en">MCP Servers (recommended)</span>
-                    </h2>
-
-                    <p data-lang="fr">
-                        Les serveurs MCP (Model Context Protocol) enrichissent SmartStack avec des fonctionnalites avancees : validation de conventions, scaffolding, documentation en temps reel.
-                    </p>
-                    <p data-lang="en">
-                        MCP servers (Model Context Protocol) enhance SmartStack with advanced features: conventions validation, scaffolding, real-time documentation.
-                    </p>
+                <!-- Next Steps - Tutorial -->
+                <section id="next-steps">
+                    <h3>
+                        <span data-lang="fr">Demarrer votre premier projet</span>
+                        <span data-lang="en">Start your first project</span>
+                    </h3>
 
-                    <div class="table-container">
-                        <table>
-                            <thead>
-                                <tr>
-                                    <th>Serveur</th>
-                                    <th>
-                                        <span data-lang="fr">Fonction</span>
-                                        <span data-lang="en">Function</span>
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td><strong>SmartStack MCP</strong></td>
-                                    <td>
-                                        <span data-lang="fr">Validation conventions, scaffolding, API docs</span>
-                                        <span data-lang="en">Conventions validation, scaffolding, API docs</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><strong>Context7 MCP</strong></td>
-                                    <td>
-                                        <span data-lang="fr">Documentation libraries, exemples de code</span>
-                                        <span data-lang="en">Library documentation, code examples</span>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
+                    <div class="alert alert-info" style="margin-bottom: 1.5rem;">
+                        <span class="alert-icon">&#128161;</span>
+                        <div class="alert-content">
+                            <p data-lang="fr">Felicitations ! L'installation est terminee. Voici comment demarrer votre premier projet SmartStack.</p>
+                            <p data-lang="en">Congratulations! Installation is complete. Here's how to start your first SmartStack project.</p>
+                        </div>
                     </div>
 
-                    <h3 data-lang="fr">Installation</h3>
-                    <h3 data-lang="en">Installation</h3>
+                    <!-- Step A: Create repo -->
+                    <div class="tutorial-section">
+                        <h4>
+                            <span class="step-badge">A</span>
+                            <span data-lang="fr">Creer le repository Git</span>
+                            <span data-lang="en">Create the Git repository</span>
+                        </h4>
 
-                    <div class="code-block">
-                        <button class="copy-btn">Copy</button>
-                        <pre><code># SmartStack MCP
-claude mcp add smartstack
+                        <p data-lang="fr">Avant d'initialiser SmartStack, vous devez creer un repository sur votre plateforme Git.</p>
+                        <p data-lang="en">Before initializing SmartStack, you need to create a repository on your Git platform.</p>
 
-# Context7 MCP (remplacez YOUR_API_KEY par votre cle)
-claude mcp add context7 -- npx @upstash/context7-mcp -- --api-key YOUR_API_KEY</code></pre>
-                    </div>
+                        <div class="platform-content github-content active">
+                            <ol style="margin: 1rem 0 1rem 1.5rem; color: var(--text-muted);">
+                                <li data-lang="fr">Allez sur <a href="https://github.com/new" target="_blank">github.com/new</a></li>
+                                <li data-lang="en">Go to <a href="https://github.com/new" target="_blank">github.com/new</a></li>
+                                <li data-lang="fr">Nommez votre repository (ex: <code>MonProjet</code>)</li>
+                                <li data-lang="en">Name your repository (e.g., <code>MyProject</code>)</li>
+                                <li data-lang="fr">Laissez-le <strong>vide</strong> (pas de README, .gitignore, ou license)</li>
+                                <li data-lang="en">Leave it <strong>empty</strong> (no README, .gitignore, or license)</li>
+                                <li data-lang="fr">Cliquez sur "Create repository"</li>
+                                <li data-lang="en">Click "Create repository"</li>
+                            </ol>
+                        </div>
 
-                    <div class="alert alert-warning">
-                        <span class="alert-icon">&#9888;</span>
-                        <div class="alert-content">
-                            <h5 data-lang="fr">Cle API Context7</h5>
-                            <h5 data-lang="en">Context7 API Key</h5>
-                            <p data-lang="fr">
-                                Obtenez votre cle API gratuite sur <a href="https://context7.io" target="_blank">context7.io</a>
-                            </p>
-                            <p data-lang="en">
-                                Get your free API key at <a href="https://context7.io" target="_blank">context7.io</a>
-                            </p>
+                        <div class="platform-content azure-content">
+                            <ol style="margin: 1rem 0 1rem 1.5rem; color: var(--text-muted);">
+                                <li data-lang="fr">Allez dans votre projet Azure DevOps</li>
+                                <li data-lang="en">Go to your Azure DevOps project</li>
+                                <li data-lang="fr">Repos &gt; "New repository"</li>
+                                <li data-lang="en">Repos &gt; "New repository"</li>
+                                <li data-lang="fr">Nommez votre repository (ex: <code>MonProjet</code>)</li>
+                                <li data-lang="en">Name your repository (e.g., <code>MyProject</code>)</li>
+                                <li data-lang="fr">Decochez "Add a README"</li>
+                                <li data-lang="en">Uncheck "Add a README"</li>
+                                <li data-lang="fr">Cliquez sur "Create"</li>
+                                <li data-lang="en">Click "Create"</li>
+                            </ol>
                         </div>
-                    </div>
 
-                    <div class="alert alert-info">
-                        <span class="alert-icon">&#128161;</span>
-                        <div class="alert-content">
-                            <h5 data-lang="fr">Verifier l'installation</h5>
-                            <h5 data-lang="en">Verify installation</h5>
-                            <p><code>claude mcp list</code></p>
+                        <div class="tutorial-note">
+                            <p data-lang="fr"><strong>Pourquoi un repo vide ?</strong> SmartStack va initialiser la structure du projet avec les bons fichiers. Un repo pre-rempli pourrait creer des conflits.</p>
+                            <p data-lang="en"><strong>Why an empty repo?</strong> SmartStack will initialize the project structure with the correct files. A pre-filled repo could create conflicts.</p>
                         </div>
                     </div>
-                </section>
 
-                <!-- Installation Options -->
-                <section id="options">
-                    <h2>
-                        <span data-lang="fr">Options d'installation</span>
-                        <span data-lang="en">Installation Options</span>
-                    </h2>
+                    <!-- Step B: Initialize GitFlow -->
+                    <div class="tutorial-section">
+                        <h4>
+                            <span class="step-badge">B</span>
+                            <span data-lang="fr">Initialiser GitFlow</span>
+                            <span data-lang="en">Initialize GitFlow</span>
+                        </h4>
 
-                    <div class="table-container">
-                        <table>
-                            <thead>
-                                <tr>
-                                    <th>Option</th>
-                                    <th>
-                                        <span data-lang="fr">Description</span>
-                                        <span data-lang="en">Description</span>
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td><code>--local</code></td>
-                                    <td>
-                                        <span data-lang="fr">Installer dans le projet courant (./.claude)</span>
-                                        <span data-lang="en">Install in current project (./.claude)</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>--commands-only</code></td>
-                                    <td>
-                                        <span data-lang="fr">Installer uniquement les commandes</span>
-                                        <span data-lang="en">Install commands only</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>--agents-only</code></td>
-                                    <td>
-                                        <span data-lang="fr">Installer uniquement les agents</span>
-                                        <span data-lang="en">Install agents only</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>--hooks-only</code></td>
-                                    <td>
-                                        <span data-lang="fr">Installer uniquement les hooks</span>
-                                        <span data-lang="en">Install hooks only</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>--force</code></td>
-                                    <td>
-                                        <span data-lang="fr">Forcer la reecriture des fichiers existants</span>
-                                        <span data-lang="en">Force overwrite existing files</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>--no-config</code></td>
-                                    <td>
-                                        <span data-lang="fr">Ne pas creer le fichier de configuration</span>
-                                        <span data-lang="en">Skip config file creation</span>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </section>
+                        <p data-lang="fr">Ouvrez Claude Code dans un dossier vide et lancez l'initialisation GitFlow :</p>
+                        <p data-lang="en">Open Claude Code in an empty folder and launch GitFlow initialization:</p>
 
-                <!-- Directory Structure -->
-                <section id="structure">
-                    <h2>
-                        <span data-lang="fr">Structure des fichiers</span>
-                        <span data-lang="en">File Structure</span>
-                    </h2>
+                        <div class="code-block">
+                            <button class="copy-btn">Copy</button>
+                            <pre><code># Dans Claude Code, tapez :
+/gitflow:1-init</code></pre>
+                        </div>
+
+                        <p data-lang="fr" style="margin-top: 1rem;">L'assistant vous guidera pour :</p>
+                        <p data-lang="en" style="margin-top: 1rem;">The assistant will guide you to:</p>
 
-                    <p data-lang="fr">Apres installation, la structure suivante est creee :</p>
-                    <p data-lang="en">After installation, the following structure is created:</p>
-
-                    <div class="code-block">
-                        <pre><code>~/.claude/                    # Installation globale
-├── commands/                 # Commandes slash
-│   ├── gitflow.md           # Orchestrateur GitFlow
-│   ├── gitflow/             # Phases GitFlow
-│   │   ├── 1-init.md
-│   │   ├── 2-status.md
-│   │   ├── 3-commit.md
-│   │   ├── 4-plan.md
-│   │   ├── 5-exec.md
-│   │   ├── 6-abort.md
-│   │   ├── 10-start.md
-│   │   └── 11-finish.md
-│   ├── apex.md              # Orchestrateur APEX
-│   ├── apex/                # Phases APEX
-│   ├── git/                 # Commandes Git
-│   └── prompts/             # Generateurs de prompts
-├── agents/                   # Agents specialises
-│   ├── explore-codebase.md
-│   ├── explore-docs.md
-│   ├── websearch.md
-│   ├── snipper.md
-│   ├── fix-grammar.md
-│   └── action.md
-├── hooks/                    # Hooks Claude Code
-│   └── hooks.json
-└── gitflow/                  # Donnees GitFlow
-    ├── config.json          # Configuration
-    ├── plans/               # Plans d'integration
-    ├── logs/                # Logs d'operations
-    └── migrations/          # Suivi des migrations
-        └── history.json</code></pre>
+                        <ul style="margin: 0.5rem 0 1rem 1.5rem; color: var(--text-muted);">
+                            <li data-lang="fr">Cloner votre repository</li>
+                            <li data-lang="en">Clone your repository</li>
+                            <li data-lang="fr">Configurer les branches (main, develop)</li>
+                            <li data-lang="en">Configure branches (main, develop)</li>
+                            <li data-lang="fr">Definir les conventions de versioning</li>
+                            <li data-lang="en">Define versioning conventions</li>
+                        </ul>
+
+                        <div class="tutorial-note">
+                            <p data-lang="fr"><strong>Conseil :</strong> Repondez aux questions de l'assistant. Il adaptera la configuration a vos besoins.</p>
+                            <p data-lang="en"><strong>Tip:</strong> Answer the assistant's questions. It will adapt the configuration to your needs.</p>
+                        </div>
                     </div>
-                </section>
 
-                <!-- Uninstall -->
-                <section id="uninstall">
-                    <h2>
-                        <span data-lang="fr">Desinstallation</span>
-                        <span data-lang="en">Uninstallation</span>
-                    </h2>
+                    <!-- Step C: Initialize SmartStack -->
+                    <div class="tutorial-section">
+                        <h4>
+                            <span class="step-badge">C</span>
+                            <span data-lang="fr">Initialiser SmartStack</span>
+                            <span data-lang="en">Initialize SmartStack</span>
+                        </h4>
 
-                    <div class="code-block">
-                        <button class="copy-btn">Copy</button>
-                        <pre><code># Desinstaller tous les composants
-smartstack-cli uninstall
+                        <p data-lang="fr">Une fois GitFlow configure, initialisez la structure du projet SmartStack :</p>
+                        <p data-lang="en">Once GitFlow is configured, initialize the SmartStack project structure:</p>
 
-# Desinstaller des composants specifiques
-smartstack-cli uninstall --commands-only
-smartstack-cli uninstall --agents-only
-smartstack-cli uninstall --hooks-only
+                        <div class="code-block">
+                            <button class="copy-btn">Copy</button>
+                            <pre><code># Pour un nouveau projet .NET (cree la structure Clean Architecture)
+smartstack init MonProjet
 
-# Garder le fichier de configuration
-smartstack-cli uninstall --keep-config
+# OU pour un projet existant (ajoute seulement les outils SmartStack)
+smartstack init .</code></pre>
+                        </div>
+
+                        <p data-lang="fr" style="margin-top: 1rem;">Cette commande va :</p>
+                        <p data-lang="en" style="margin-top: 1rem;">This command will:</p>
 
-# Sans confirmation
-smartstack-cli uninstall --yes</code></pre>
+                        <ul style="margin: 0.5rem 0 1rem 1.5rem; color: var(--text-muted);">
+                            <li data-lang="fr">Creer la structure Clean Architecture (.NET)</li>
+                            <li data-lang="en">Create the Clean Architecture structure (.NET)</li>
+                            <li data-lang="fr">Installer les skills et agents SmartStack</li>
+                            <li data-lang="en">Install SmartStack skills and agents</li>
+                            <li data-lang="fr">Configurer les hooks Claude Code</li>
+                            <li data-lang="en">Configure Claude Code hooks</li>
+                            <li data-lang="fr">Verifier les serveurs MCP</li>
+                            <li data-lang="en">Verify MCP servers</li>
+                        </ul>
                     </div>
-                </section>
 
-                <!-- Update -->
-                <section id="update">
-                    <h2>
-                        <span data-lang="fr">Mise a jour</span>
-                        <span data-lang="en">Update</span>
-                    </h2>
+                    <!-- Step D: Start working -->
+                    <div class="tutorial-section">
+                        <h4>
+                            <span class="step-badge">D</span>
+                            <span data-lang="fr">Commencer a travailler</span>
+                            <span data-lang="en">Start working</span>
+                        </h4>
 
-                    <div class="code-block">
-                        <button class="copy-btn">Copy</button>
-                        <pre><code># Mettre a jour le package npm
-npm update -g @atlashub/smartstack-cli
+                        <p data-lang="fr">Votre environnement est pret ! Pour commencer une nouvelle fonctionnalite :</p>
+                        <p data-lang="en">Your environment is ready! To start a new feature:</p>
 
-# Mettre a jour les commandes installees
-smartstack-cli update</code></pre>
-                    </div>
-                </section>
+                        <div class="code-block">
+                            <button class="copy-btn">Copy</button>
+                            <pre><code># Creer une branche feature
+/gitflow:10-start feature ma-fonctionnalite
 
-                <!-- Troubleshooting -->
-                <section id="troubleshooting">
-                    <h2>
-                        <span data-lang="fr">Resolution de problemes</span>
-                        <span data-lang="en">Troubleshooting</span>
-                    </h2>
+# Commiter vos changements
+/gitflow:3-commit
 
-                    <div class="alert alert-warning">
-                        <span class="alert-icon">&#9888;</span>
-                        <div class="alert-content">
-                            <h5 data-lang="fr">Erreur de permission</h5>
-                            <h5 data-lang="en">Permission error</h5>
-                            <p data-lang="fr">
-                                Si vous obtenez une erreur de permission lors de l'installation globale, utilisez <code>sudo</code> ou configurez npm pour utiliser un repertoire utilisateur.
-                            </p>
-                            <p data-lang="en">
-                                If you get a permission error during global installation, use <code>sudo</code> or configure npm to use a user directory.
-                            </p>
+# Finaliser la feature
+/gitflow:11-finish</code></pre>
                         </div>
                     </div>
 
-                    <div class="alert alert-info">
-                        <span class="alert-icon">&#128161;</span>
-                        <div class="alert-content">
-                            <h5 data-lang="fr">Commandes non reconnues</h5>
-                            <h5 data-lang="en">Commands not recognized</h5>
-                            <p data-lang="fr">
-                                Assurez-vous que le repertoire npm global est dans votre PATH. Verifiez avec <code>npm bin -g</code>.
-                            </p>
-                            <p data-lang="en">
-                                Make sure the npm global directory is in your PATH. Check with <code>npm bin -g</code>.
-                            </p>
-                        </div>
+                    <!-- Links to documentation -->
+                    <h4 style="margin-top: 2rem;">
+                        <span data-lang="fr">Documentation complementaire</span>
+                        <span data-lang="en">Additional documentation</span>
+                    </h4>
+
+                    <div class="feature-grid">
+                        <a href="init.html" class="feature-item" style="text-decoration: none;">
+                            <span class="feature-icon">&#128640;</span>
+                            <span class="feature-text">
+                                <span data-lang="fr">Commande Init</span>
+                                <span data-lang="en">Init Command</span>
+                            </span>
+                        </a>
+                        <a href="gitflow.html" class="feature-item" style="text-decoration: none;">
+                            <span class="feature-icon">&#128256;</span>
+                            <span class="feature-text">
+                                <span data-lang="fr">Guide GitFlow</span>
+                                <span data-lang="en">GitFlow Guide</span>
+                            </span>
+                        </a>
+                        <a href="efcore.html" class="feature-item" style="text-decoration: none;">
+                            <span class="feature-icon">&#128452;</span>
+                            <span class="feature-text">
+                                <span data-lang="fr">Migrations EF Core</span>
+                                <span data-lang="en">EF Core Migrations</span>
+                            </span>
+                        </a>
+                        <a href="apex.html" class="feature-item" style="text-decoration: none;">
+                            <span class="feature-icon">&#127919;</span>
+                            <span class="feature-text">
+                                <span data-lang="fr">Methodologie APEX</span>
+                                <span data-lang="en">APEX Methodology</span>
+                            </span>
+                        </a>
                     </div>
                 </section>
+
             </div>
             </main>
         </div>
@@ -549,5 +1010,193 @@ smartstack-cli update</code></pre>
     <div class="overlay"></div>
 
     <script src="js/app.js"></script>
+    <script>
+        // Installation page specific scripts
+        var STORAGE_KEY = 'smartstack-install-progress';
+        var completedSteps = [];
+
+        // Initialize on page load
+        document.addEventListener('DOMContentLoaded', function() {
+            loadProgress();
+            loadApiKey();
+            loadPlatform();
+            loadOS();
+            updateProgressBar();
+        });
+
+        // OS switching
+        function setOS(os) {
+            // Update buttons
+            var buttons = document.querySelectorAll('.os-btn');
+            buttons.forEach(function(btn) {
+                btn.classList.remove('active');
+                if (btn.dataset.os === os) {
+                    btn.classList.add('active');
+                }
+            });
+
+            // Update content visibility
+            var windowsContent = document.querySelectorAll('.windows-content');
+            var macosContent = document.querySelectorAll('.macos-content');
+            var linuxContent = document.querySelectorAll('.linux-content');
+
+            windowsContent.forEach(function(el) {
+                el.classList.toggle('active', os === 'windows');
+            });
+            macosContent.forEach(function(el) {
+                el.classList.toggle('active', os === 'macos');
+            });
+            linuxContent.forEach(function(el) {
+                el.classList.toggle('active', os === 'linux');
+            });
+
+            // Save preference
+            localStorage.setItem('smartstack-os', os);
+        }
+
+        function loadOS() {
+            // Try to detect OS
+            var detectedOS = 'windows';
+            var userAgent = navigator.userAgent.toLowerCase();
+            if (userAgent.indexOf('mac') !== -1) {
+                detectedOS = 'macos';
+            } else if (userAgent.indexOf('linux') !== -1) {
+                detectedOS = 'linux';
+            }
+
+            var savedOS = localStorage.getItem('smartstack-os') || detectedOS;
+            setOS(savedOS);
+        }
+
+        // Platform switching
+        function setPlatform(platform) {
+            // Update buttons
+            var buttons = document.querySelectorAll('.platform-btn');
+            buttons.forEach(function(btn) {
+                btn.classList.remove('active');
+                if (btn.dataset.platform === platform) {
+                    btn.classList.add('active');
+                }
+            });
+
+            // Update content visibility
+            var githubContent = document.querySelectorAll('.github-content');
+            var azureContent = document.querySelectorAll('.azure-content');
+
+            githubContent.forEach(function(el) {
+                el.classList.toggle('active', platform === 'github');
+            });
+            azureContent.forEach(function(el) {
+                el.classList.toggle('active', platform === 'azure');
+            });
+
+            // Save preference
+            localStorage.setItem('smartstack-platform', platform);
+        }
+
+        function loadPlatform() {
+            var platform = localStorage.getItem('smartstack-platform') || 'github';
+            setPlatform(platform);
+        }
+
+        // Checklist management
+        function toggleStep(stepNumber) {
+            var index = completedSteps.indexOf(stepNumber);
+            if (index === -1) {
+                completedSteps.push(stepNumber);
+            } else {
+                completedSteps.splice(index, 1);
+            }
+            saveProgress();
+            updateUI();
+        }
+
+        function saveProgress() {
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(completedSteps));
+        }
+
+        function loadProgress() {
+            var saved = localStorage.getItem(STORAGE_KEY);
+            if (saved) {
+                try {
+                    completedSteps = JSON.parse(saved);
+                } catch (e) {
+                    completedSteps = [];
+                }
+            }
+            updateUI();
+        }
+
+        function resetProgress() {
+            completedSteps = [];
+            saveProgress();
+            updateUI();
+        }
+
+        function updateUI() {
+            var items = document.querySelectorAll('.checklist-item');
+            items.forEach(function(item) {
+                var step = parseInt(item.dataset.step);
+                if (completedSteps.indexOf(step) !== -1) {
+                    item.classList.add('completed');
+                } else {
+                    item.classList.remove('completed');
+                }
+            });
+            updateProgressBar();
+        }
+
+        function updateProgressBar() {
+            var total = 7;
+            var completed = completedSteps.length;
+            var percentage = (completed / total) * 100;
+
+            var progressFill = document.getElementById('progress-fill');
+            var progressCount = document.getElementById('progress-count');
+
+            if (progressFill) {
+                progressFill.style.width = percentage + '%';
+            }
+            if (progressCount) {
+                progressCount.textContent = completed + '/' + total;
+            }
+        }
+
+        // API Key management
+        function saveApiKey() {
+            var input = document.getElementById('context7-api-key');
+            var apiKey = input.value.trim();
+
+            if (apiKey) {
+                localStorage.setItem('context7-api-key', apiKey);
+                updateContext7Command(apiKey);
+            } else {
+                localStorage.removeItem('context7-api-key');
+                updateContext7Command('');
+            }
+        }
+
+        function loadApiKey() {
+            var apiKey = localStorage.getItem('context7-api-key');
+            if (apiKey) {
+                var input = document.getElementById('context7-api-key');
+                if (input) {
+                    input.value = apiKey;
+                }
+                updateContext7Command(apiKey);
+            }
+        }
+
+        function updateContext7Command(apiKey) {
+            var commandEl = document.getElementById('context7-command');
+            if (commandEl) {
+                if (apiKey) {
+                    commandEl.textContent = '# Avec cle API\nclaude mcp add context7 -e CONTEXT7_API_KEY=' + apiKey + ' -- npx @upstash/context7-mcp';
+                } else {
+                    commandEl.textContent = '# Sans cle API\nclaude mcp add context7 -- npx @upstash/context7-mcp';
+                }
+            }
+        }
+    </script>
 </body>
 </html>