@atlashub/smartstack-cli 3.39.0 → 3.40.0

package/.documentation/js/app.js

@@ -1,780 +1,780 @@
-/* ============================================
-   CLAUDE TOOLS DOCUMENTATION - APP
-   ============================================ */
-
-document.addEventListener('DOMContentLoaded', function() {
-    initSidebar();
-    initLanguageSwitch();
-    initCopyButtons();
-    initMobileMenu();
-    initSidebarToc();
-    initScrollSpy();
-    initInteractiveDiagram();
-    initSearch();
-    initCopyableCommands();
-});
-
-/* ============================================
-   SIDEBAR
-   ============================================ */
-
-function initSidebar() {
-    const sidebar = document.querySelector('.sidebar');
-    const toggle = document.querySelector('.sidebar-toggle');
-
-    if (!sidebar || !toggle) return;
-
-    // Load saved state
-    const isCollapsed = localStorage.getItem('sidebar-collapsed') === 'true';
-    if (isCollapsed) {
-        sidebar.classList.add('collapsed');
-    }
-
-    toggle.addEventListener('click', function() {
-        sidebar.classList.toggle('collapsed');
-        localStorage.setItem('sidebar-collapsed', sidebar.classList.contains('collapsed'));
-    });
-
-    // Set active nav item
-    const currentPage = window.location.pathname.split('/').pop() || 'index.html';
-    document.querySelectorAll('.nav-item').forEach(item => {
-        if (item.getAttribute('href') === currentPage) {
-            item.classList.add('active');
-        }
-    });
-}
-
-/* ============================================
-   LANGUAGE SWITCH
-   ============================================ */
-
-function initLanguageSwitch() {
-    const langSelect = document.getElementById('lang-select');
-
-    // Load saved language
-    const savedLang = localStorage.getItem('doc-language') || 'fr';
-    setLanguage(savedLang);
-
-    // Set dropdown to saved value
-    if (langSelect) {
-        langSelect.value = savedLang;
-    }
-
-    // Setup language button handlers (sidebar footer)
-    document.querySelectorAll('.lang-btn').forEach(btn => {
-        btn.addEventListener('click', function() {
-            const lang = this.dataset.lang;
-            setLanguage(lang);
-            localStorage.setItem('doc-language', lang);
-
-            // Update active state
-            document.querySelectorAll('.lang-btn').forEach(b => b.classList.remove('active'));
-            this.classList.add('active');
-        });
-    });
-}
-
-function setLanguage(lang) {
-    // Update body class
-    document.body.classList.remove('lang-fr', 'lang-en');
-    document.body.classList.add('lang-' + lang);
-
-    // Update dropdown value (if exists)
-    const langSelect = document.getElementById('lang-select');
-    if (langSelect) {
-        langSelect.value = lang;
-    }
-
-    // Update HTML lang attribute
-    document.documentElement.lang = lang;
-
-    // Update search placeholder
-    const searchInput = document.getElementById('search-input');
-    if (searchInput) {
-        const placeholder = lang === 'en' ? searchInput.dataset.placeholderEn : searchInput.dataset.placeholderFr;
-        if (placeholder) {
-            searchInput.placeholder = placeholder;
-        }
-    }
-}
-
-/* ============================================
-   COPY BUTTONS
-   ============================================ */
-
-function initCopyButtons() {
-    document.querySelectorAll('.copy-btn').forEach(btn => {
-        btn.addEventListener('click', async function() {
-            const code = this.closest('.code-block').querySelector('code').textContent;
-
-            try {
-                await navigator.clipboard.writeText(code);
-                const originalText = this.textContent;
-                this.textContent = 'Copied!';
-                this.style.background = 'var(--success)';
-
-                setTimeout(() => {
-                    this.textContent = originalText;
-                    this.style.background = '';
-                }, 2000);
-            } catch (err) {
-                console.error('Failed to copy:', err);
-            }
-        });
-    });
-}
-
-/* ============================================
-   MOBILE MENU
-   ============================================ */
-
-function initMobileMenu() {
-    const menuBtn = document.querySelector('.mobile-menu-btn');
-    const sidebar = document.querySelector('.sidebar');
-    const overlay = document.querySelector('.overlay');
-
-    if (!menuBtn || !sidebar) return;
-
-    menuBtn.addEventListener('click', function() {
-        sidebar.classList.toggle('open');
-        overlay?.classList.toggle('active');
-    });
-
-    overlay?.addEventListener('click', function() {
-        sidebar.classList.remove('open');
-        overlay.classList.remove('active');
-    });
-
-    // Close on nav item click (mobile)
-    document.querySelectorAll('.nav-item').forEach(item => {
-        item.addEventListener('click', function() {
-            if (window.innerWidth <= 1024) {
-                sidebar.classList.remove('open');
-                overlay?.classList.remove('active');
-            }
-        });
-    });
-}
-
-/* ============================================
-   SIDEBAR TABLE OF CONTENTS
-   ============================================ */
-
-function initSidebarToc() {
-    const sidebarToc = document.querySelector('.sidebar-toc');
-    const tocToggle = document.querySelector('.toc-toggle');
-
-    if (!sidebarToc) return;
-
-    // Auto-open TOC on current page
-    sidebarToc.classList.add('open');
-    if (tocToggle) tocToggle.classList.add('open');
-
-    // Toggle handler
-    if (tocToggle) {
-        tocToggle.addEventListener('click', function(e) {
-            e.preventDefault();
-            e.stopPropagation();
-            sidebarToc.classList.toggle('open');
-            tocToggle.classList.toggle('open');
-        });
-    }
-
-    // Smooth scroll for sidebar TOC links
-    document.querySelectorAll('.sidebar-toc-link').forEach(link => {
-        link.addEventListener('click', function(e) {
-            e.preventDefault();
-            const targetId = this.getAttribute('href');
-            const target = document.querySelector(targetId);
-            if (target) {
-                target.scrollIntoView({ behavior: 'smooth', block: 'start' });
-                // Update active state immediately
-                document.querySelectorAll('.sidebar-toc-link').forEach(l => l.classList.remove('active'));
-                this.classList.add('active');
-            }
-        });
-    });
-}
-
-/* ============================================
-   SCROLL SPY
-   ============================================ */
-
-function initScrollSpy() {
-    const headings = document.querySelectorAll('h2[id], h3[id]');
-    const sidebarTocLinks = document.querySelectorAll('.sidebar-toc-link');
-
-    if (!headings.length || !sidebarTocLinks.length) return;
-
-    const observer = new IntersectionObserver(entries => {
-        entries.forEach(entry => {
-            if (entry.isIntersecting) {
-                const id = entry.target.id;
-                sidebarTocLinks.forEach(link => {
-                    link.classList.toggle('active', link.getAttribute('href') === '#' + id);
-                });
-            }
-        });
-    }, { rootMargin: '-20% 0px -80% 0px' });
-
-    headings.forEach(heading => observer.observe(heading));
-}
-
-/* ============================================
-   UTILITIES
-   ============================================ */
-
-// Smooth scroll for anchor links
-document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-    anchor.addEventListener('click', function(e) {
-        e.preventDefault();
-        const target = document.querySelector(this.getAttribute('href'));
-        if (target) {
-            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
-        }
-    });
-});
-
-// Add animation class on scroll
-const observerOptions = {
-    threshold: 0.1,
-    rootMargin: '0px 0px -50px 0px'
-};
-
-const fadeObserver = new IntersectionObserver((entries) => {
-    entries.forEach(entry => {
-        if (entry.isIntersecting) {
-            entry.target.classList.add('fade-in');
-            fadeObserver.unobserve(entry.target);
-        }
-    });
-}, observerOptions);
-
-document.querySelectorAll('.card, .alert, .best-practice').forEach(el => {
-    fadeObserver.observe(el);
-});
-
-/* ============================================
-   INTERACTIVE DIAGRAM
-   ============================================ */
-
-function initInteractiveDiagram() {
-    const diagram = document.getElementById('gitflow-diagram');
-    const tooltip = document.getElementById('diagram-tooltip');
-
-    if (!diagram || !tooltip) return;
-
-    const clickableElements = diagram.querySelectorAll('.clickable-element');
-    let activeElement = null;
-
-    // Get current language
-    function getLang() {
-        return document.body.classList.contains('lang-en') ? 'en' : 'fr';
-    }
-
-    // Show tooltip for an element
-    function showTooltip(element, event) {
-        const lang = getLang();
-        const title = element.dataset['title' + lang.charAt(0).toUpperCase() + lang.slice(1)] || element.dataset.titleFr;
-        const desc = element.dataset['desc' + lang.charAt(0).toUpperCase() + lang.slice(1)] || element.dataset.descFr;
-        const cmd = element.dataset.cmd || '';
-
-        // Set tooltip content
-        tooltip.querySelector('.tooltip-title').textContent = title;
-        tooltip.querySelector('.tooltip-desc').textContent = desc;
-
-        const cmdElement = tooltip.querySelector('.tooltip-cmd');
-        if (cmd) {
-            cmdElement.textContent = cmd;
-            cmdElement.style.display = 'inline-block';
-        } else {
-            cmdElement.style.display = 'none';
-        }
-
-        // Position tooltip
-        const diagramRect = diagram.getBoundingClientRect();
-        const svgRect = diagram.querySelector('svg').getBoundingClientRect();
-
-        // Calculate position relative to the diagram
-        let left = event.clientX - diagramRect.left + 15;
-        let top = event.clientY - diagramRect.top + 15;
-
-        // Make tooltip visible to measure it
-        tooltip.style.left = left + 'px';
-        tooltip.style.top = top + 'px';
-        tooltip.classList.add('visible');
-
-        // Adjust if overflowing right edge
-        const tooltipRect = tooltip.getBoundingClientRect();
-        if (tooltipRect.right > diagramRect.right - 10) {
-            left = event.clientX - diagramRect.left - tooltipRect.width - 15;
-            tooltip.style.left = left + 'px';
-        }
-
-        // Adjust if overflowing bottom edge
-        if (tooltipRect.bottom > window.innerHeight - 10) {
-            top = event.clientY - diagramRect.top - tooltipRect.height - 15;
-            tooltip.style.top = top + 'px';
-        }
-
-        // Mark element as active
-        if (activeElement) {
-            activeElement.classList.remove('active');
-        }
-        element.classList.add('active');
-        activeElement = element;
-    }
-
-    // Hide tooltip
-    function hideTooltip() {
-        tooltip.classList.remove('visible');
-        if (activeElement) {
-            activeElement.classList.remove('active');
-            activeElement = null;
-        }
-    }
-
-    // Add click handlers to clickable elements
-    clickableElements.forEach(element => {
-        element.addEventListener('click', function(e) {
-            e.stopPropagation();
-
-            // If clicking the same element, toggle off
-            if (activeElement === this) {
-                hideTooltip();
-            } else {
-                showTooltip(this, e);
-            }
-        });
-    });
-
-    // Close tooltip when clicking outside
-    document.addEventListener('click', function(e) {
-        if (!diagram.contains(e.target) || (!e.target.closest('.clickable-element') && !e.target.closest('.diagram-tooltip'))) {
-            hideTooltip();
-        }
-    });
-
-    // Close on escape key
-    document.addEventListener('keydown', function(e) {
-        if (e.key === 'Escape') {
-            hideTooltip();
-        }
-    });
-
-    // Update tooltip language when language changes
-    const langSelect = document.getElementById('lang-select');
-    if (langSelect) {
-        langSelect.addEventListener('change', function() {
-            if (activeElement && tooltip.classList.contains('visible')) {
-                // Re-show tooltip with new language
-                const event = { clientX: parseFloat(tooltip.style.left) + diagram.getBoundingClientRect().left,
-                               clientY: parseFloat(tooltip.style.top) + diagram.getBoundingClientRect().top };
-                setTimeout(() => showTooltip(activeElement, event), 50);
-            }
-        });
-    }
-}
-
-/* ============================================
-   SEARCH (Full-Text with Static Fallback)
-   ============================================ */
-
-function initSearch() {
-    const searchInput = document.getElementById('search-input');
-    const searchResults = document.getElementById('search-results');
-
-    if (!searchInput || !searchResults) return;
-
-    // Static search index (works without server, file:// protocol)
-    const staticIndex = [
-        // Index - Accueil
-        { page: 'index.html', icon: '🏠', title: { fr: 'Accueil', en: 'Home' }, section: '', anchor: '',
-          keywords: 'accueil home documentation claude tools atlashub cli automatisation gitflow ef core migration hooks agents commandes installation npm' },
-
-        // Installation
-        { page: 'installation.html', icon: '📦', title: { fr: 'Installation', en: 'Installation' }, section: '', anchor: '',
-          keywords: 'installation install npm registry nodejs node prérequis requirements setup configuration package global' },
-        { page: 'installation.html', icon: '📦', title: { fr: 'Installation', en: 'Installation' }, section: { fr: 'Prérequis', en: 'Prerequisites' }, anchor: 'prerequisites',
-          keywords: 'prérequis prerequisites nodejs node version 18 npm git' },
-        { page: 'installation.html', icon: '📦', title: { fr: 'Installation', en: 'Installation' }, section: { fr: 'Installation globale', en: 'Global Installation' }, anchor: 'global-install',
-          keywords: 'npm install global atlashub smartstack smartstack-cli registry package' },
-
-        // GitFlow
-        { page: 'gitflow.html', icon: '🔀', title: { fr: 'GitFlow', en: 'GitFlow' }, section: '', anchor: '',
-          keywords: 'gitflow git workflow branch branche feature release hotfix develop main master merge fusion version semver' },
-        { page: 'gitflow.html', icon: '🔀', title: { fr: 'GitFlow', en: 'GitFlow' }, section: { fr: 'Branches principales', en: 'Main Branches' }, anchor: 'main-branches',
-          keywords: 'main master develop development production branches principales' },
-        { page: 'gitflow.html', icon: '🔀', title: { fr: 'GitFlow', en: 'GitFlow' }, section: { fr: 'Feature branches', en: 'Feature branches' }, anchor: 'feature',
-          keywords: 'feature branch nouvelle fonctionnalité develop merge création git checkout' },
-        { page: 'gitflow.html', icon: '🔀', title: { fr: 'GitFlow', en: 'GitFlow' }, section: { fr: 'Release branches', en: 'Release branches' }, anchor: 'release',
-          keywords: 'release branch version livraison production tag semver minor major patch' },
-        { page: 'gitflow.html', icon: '🔀', title: { fr: 'GitFlow', en: 'GitFlow' }, section: { fr: 'Hotfix branches', en: 'Hotfix branches' }, anchor: 'hotfix',
-          keywords: 'hotfix branch correction bug urgent production patch fix' },
-        { page: 'gitflow.html', icon: '🔀', title: { fr: 'GitFlow', en: 'GitFlow' }, section: { fr: 'Commandes', en: 'Commands' }, anchor: 'commands',
-          keywords: 'commandes commands gitflow init start finish status plan exec commit abort' },
-        { page: 'gitflow.html', icon: '🔀', title: { fr: 'GitFlow', en: 'GitFlow' }, section: { fr: 'Versioning SemVer', en: 'SemVer Versioning' }, anchor: 'semver',
-          keywords: 'semver semantic versioning version major minor patch auto increment package.json' },
-
-        // EF Core
-        { page: 'efcore.html', icon: '📄', title: { fr: 'EF Core', en: 'EF Core' }, section: '', anchor: '',
-          keywords: 'ef core entity framework migration database dotnet .net sql model orm microsoft' },
-        { page: 'efcore.html', icon: '📄', title: { fr: 'EF Core', en: 'EF Core' }, section: { fr: 'Structure des migrations', en: 'Migration Structure' }, anchor: 'structure',
-          keywords: 'migration structure fichier file timestamp designer snapshot model context dbcontext' },
-        { page: 'efcore.html', icon: '📄', title: { fr: 'EF Core', en: 'EF Core' }, section: { fr: 'Conflits', en: 'Conflicts' }, anchor: 'conflicts',
-          keywords: 'conflit conflict merge migration snapshot résolution resolution gitflow' },
-        { page: 'efcore.html', icon: '📄', title: { fr: 'EF Core', en: 'EF Core' }, section: { fr: 'Bonnes pratiques', en: 'Best Practices' }, anchor: 'best-practices',
-          keywords: 'bonnes pratiques best practices migration naming convention idempotent script sql' },
-        { page: 'efcore.html', icon: '📄', title: { fr: 'EF Core', en: 'EF Core' }, section: { fr: 'Commandes', en: 'Commands' }, anchor: 'commands',
-          keywords: 'commandes commands dotnet ef migrations add remove update database script' },
-
-        // Business Analyse
-        { page: 'business-analyse.html', icon: '📊', title: { fr: 'Business Analyse', en: 'Business Analyse' }, section: '', anchor: '',
-          keywords: 'business analyse analysis specification requirements exigences babok' },
-        { page: 'business-analyse.html', icon: '📊', title: { fr: 'Business Analyse', en: 'Business Analyse' }, section: { fr: 'Discovery', en: 'Discovery' }, anchor: 'phase-2',
-          keywords: 'discover discovery questionnaire questions adaptatives ultrathink elicitation' },
-        { page: 'business-analyse.html', icon: '📊', title: { fr: 'Business Analyse', en: 'Business Analyse' }, section: { fr: 'Specification', en: 'Specification' }, anchor: 'phase-4',
-          keywords: 'specify specification use cases wireframes gherkin acceptance criteria' },
-        { page: 'business-analyse.html', icon: '📊', title: { fr: 'Business Analyse', en: 'Business Analyse' }, section: { fr: 'Handoff', en: 'Handoff' }, anchor: 'phase-6',
-          keywords: 'handoff dev prompt developer implementation autonome autonomous' },
-
-        // Agents
-        { page: 'agents.html', icon: '🤖', title: { fr: 'Agents', en: 'Agents' }, section: '', anchor: '',
-          keywords: 'agents subagent task tool automation automatisation ai ia claude specialized spécialisé' },
-        { page: 'agents.html', icon: '🤖', title: { fr: 'Agents', en: 'Agents' }, section: { fr: 'GitFlow Agents', en: 'GitFlow Agents' }, anchor: 'gitflow-agents',
-          keywords: 'gitflow agents plan exec commit status abort rollback recovery' },
-        { page: 'agents.html', icon: '🤖', title: { fr: 'Agents', en: 'Agents' }, section: { fr: 'Explore Agent', en: 'Explore Agent' }, anchor: 'explore',
-          keywords: 'explore agent codebase search recherche exploration quick thorough' },
-
-        // Commands
-        { page: 'commands.html', icon: '⚡', title: { fr: 'Commandes', en: 'Commands' }, section: '', anchor: '',
-          keywords: 'commandes commands slash cli terminal prompt gitflow commit review deploy' },
-        { page: 'commands.html', icon: '⚡', title: { fr: 'Commandes', en: 'Commands' }, section: { fr: 'GitFlow Commands', en: 'GitFlow Commands' }, anchor: 'gitflow-commands',
-          keywords: 'gitflow commands init start finish status commit plan exec' },
-        { page: 'commands.html', icon: '⚡', title: { fr: 'Commandes', en: 'Commands' }, section: { fr: 'Commit', en: 'Commit' }, anchor: 'commit',
-          keywords: 'commit git message conventional commits push' },
-        { page: 'commands.html', icon: '⚡', title: { fr: 'Commandes', en: 'Commands' }, section: { fr: 'Deploy', en: 'Deploy' }, anchor: 'deploy',
-          keywords: 'deploy deployment déploiement build test lint push production' },
-
-        // Hooks
-        { page: 'hooks.html', icon: '🔗', title: { fr: 'Hooks', en: 'Hooks' }, section: '', anchor: '',
-          keywords: 'hooks pre-commit post-commit validation automation automatisation script event événement' },
-        { page: 'hooks.html', icon: '🔗', title: { fr: 'Hooks', en: 'Hooks' }, section: { fr: 'Types de hooks', en: 'Hook Types' }, anchor: 'types',
-          keywords: 'types hooks PreToolUse PostToolUse Stop SessionStart UserPromptSubmit' },
-        { page: 'hooks.html', icon: '🔗', title: { fr: 'Hooks', en: 'Hooks' }, section: { fr: 'Configuration', en: 'Configuration' }, anchor: 'configuration',
-          keywords: 'configuration hooks settings.json matcher command timeout' }
-    ];
-
-    let searchIndex = null;
-    let activeIndex = -1;
-
-    function getLang() {
-        return document.body.classList.contains('lang-en') ? 'en' : 'fr';
-    }
-
-    // Build search index from static data
-    function buildIndex() {
-        const lang = getLang();
-
-        return staticIndex.map(item => {
-            const pageTitle = typeof item.title === 'object' ? item.title[lang] : item.title;
-            const sectionTitle = typeof item.section === 'object' ? item.section[lang] : item.section;
-
-            return {
-                page: item.page,
-                pageTitle: pageTitle,
-                icon: item.icon,
-                sectionTitle: sectionTitle || '',
-                content: (pageTitle + ' ' + sectionTitle + ' ' + item.keywords).toLowerCase(),
-                contentRaw: item.keywords,
-                anchor: item.anchor,
-                url: item.anchor ? `${item.page}#${item.anchor}` : item.page
-            };
-        });
-    }
-
-    // Search through index
-    function search(query) {
-        if (!query || query.length < 2) return [];
-
-        // Build index if not ready
-        if (!searchIndex) {
-            searchIndex = buildIndex();
-        }
-
-        const normalizedQuery = query.toLowerCase().trim();
-        const words = normalizedQuery.split(/\s+/).filter(w => w.length >= 2);
-        const results = [];
-        const seenPages = new Set();
-
-        searchIndex.forEach(item => {
-            // Check if any word matches
-            const anyWordMatch = words.some(word => item.content.includes(word));
-            if (!anyWordMatch) return;
-
-            // Calculate relevance score
-            let score = 0;
-            words.forEach(word => {
-                if (item.content.includes(word)) {
-                    // Title match is worth more
-                    if (item.pageTitle.toLowerCase().includes(word)) score += 10;
-                    if (item.sectionTitle.toLowerCase().includes(word)) score += 5;
-                    // Count occurrences in content
-                    const matches = (item.content.match(new RegExp(word, 'g')) || []).length;
-                    score += matches;
-                }
-            });
-
-            // Generate excerpt from keywords
-            let excerpt = item.contentRaw;
-            if (excerpt.length > 80) {
-                // Find first matching word position
-                const firstWord = words.find(w => item.contentRaw.toLowerCase().includes(w));
-                if (firstWord) {
-                    const idx = item.contentRaw.toLowerCase().indexOf(firstWord);
-                    const start = Math.max(0, idx - 20);
-                    const end = Math.min(item.contentRaw.length, idx + 60);
-                    excerpt = (start > 0 ? '...' : '') + item.contentRaw.substring(start, end) + (end < item.contentRaw.length ? '...' : '');
-                } else {
-                    excerpt = item.contentRaw.substring(0, 80) + '...';
-                }
-            }
-
-            // Avoid duplicate pages for same section
-            const key = item.page + '#' + item.anchor;
-            if (!seenPages.has(key)) {
-                seenPages.add(key);
-                results.push({
-                    ...item,
-                    score,
-                    excerpt
-                });
-            }
-        });
-
-        // Sort by score and limit results
-        return results
-            .sort((a, b) => b.score - a.score)
-            .slice(0, 10);
-    }
-
-    // Escape regex special chars
-    function escapeRegex(str) {
-        return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    }
-
-    // Highlight matches in text
-    function highlightMatch(text, query) {
-        const words = query.toLowerCase().split(/\s+/).filter(w => w.length >= 2);
-        let result = text;
-        words.forEach(word => {
-            const regex = new RegExp(`(${escapeRegex(word)})`, 'gi');
-            result = result.replace(regex, '<mark>$1</mark>');
-        });
-        return result;
-    }
-
-    function renderResults(results, query) {
-        const lang = getLang();
-
-        if (results.length === 0) {
-            const emptyMsg = lang === 'fr' ? 'Aucun résultat trouvé' : 'No results found';
-            searchResults.innerHTML = `<div class="search-results-empty">${emptyMsg}</div>`;
-        } else {
-            searchResults.innerHTML = results.map((item, index) => `
-                <a href="${item.url}" class="search-result-item${index === activeIndex ? ' active' : ''}" data-index="${index}">
-                    <div class="search-result-icon">${item.icon}</div>
-                    <div class="search-result-content">
-                        <div class="search-result-title">${highlightMatch(item.pageTitle, query)}${item.sectionTitle ? ' <span class="search-result-section">› ' + highlightMatch(item.sectionTitle, query) + '</span>' : ''}</div>
-                        <div class="search-result-excerpt">${highlightMatch(item.excerpt, query)}</div>
-                        <div class="search-result-path">${item.url}</div>
-                    </div>
-                </a>
-            `).join('');
-        }
-
-        searchResults.classList.add('visible');
-    }
-
-    function hideResults() {
-        searchResults.classList.remove('visible');
-        activeIndex = -1;
-    }
-
-    // Input handler with debounce
-    let debounceTimer;
-    searchInput.addEventListener('input', function() {
-        clearTimeout(debounceTimer);
-        const query = this.value.trim();
-
-        if (query.length >= 2) {
-            debounceTimer = setTimeout(() => {
-                const results = search(query);
-                activeIndex = -1;
-                renderResults(results, query);
-            }, 150);
-        } else {
-            hideResults();
-        }
-    });
-
-    // Keyboard navigation
-    searchInput.addEventListener('keydown', function(e) {
-        const items = searchResults.querySelectorAll('.search-result-item');
-
-        if (e.key === 'ArrowDown') {
-            e.preventDefault();
-            activeIndex = Math.min(activeIndex + 1, items.length - 1);
-            updateActiveItem(items);
-        } else if (e.key === 'ArrowUp') {
-            e.preventDefault();
-            activeIndex = Math.max(activeIndex - 1, 0);
-            updateActiveItem(items);
-        } else if (e.key === 'Enter') {
-            e.preventDefault();
-            if (activeIndex >= 0 && items[activeIndex]) {
-                window.location.href = items[activeIndex].getAttribute('href');
-            }
-        } else if (e.key === 'Escape') {
-            hideResults();
-            searchInput.blur();
-        }
-    });
-
-    function updateActiveItem(items) {
-        items.forEach((item, index) => {
-            item.classList.toggle('active', index === activeIndex);
-        });
-
-        if (items[activeIndex]) {
-            items[activeIndex].scrollIntoView({ block: 'nearest' });
-        }
-    }
-
-    // Focus handler
-    searchInput.addEventListener('focus', function() {
-        if (this.value.length >= 2) {
-            const results = search(this.value);
-            renderResults(results, this.value);
-        }
-    });
-
-    // Click outside to close
-    document.addEventListener('click', function(e) {
-        if (!e.target.closest('.header-search')) {
-            hideResults();
-        }
-    });
-
-    // Keyboard shortcut (Ctrl/Cmd + K)
-    document.addEventListener('keydown', function(e) {
-        if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
-            e.preventDefault();
-            searchInput.focus();
-            searchInput.select();
-        }
-    });
-}
-
-/* ============================================
-   COPYABLE COMMANDS (SVG Diagram)
-   ============================================ */
-
-function initCopyableCommands() {
-    const copyableElements = document.querySelectorAll('.cmd-copyable');
-
-    if (copyableElements.length === 0) return;
-
-    // Get current language
-    function getLang() {
-        return document.body.classList.contains('lang-en') ? 'en' : 'fr';
-    }
-
-    // Create floating tooltip for feedback
-    const tooltip = document.createElement('div');
-    tooltip.className = 'copy-tooltip';
-    tooltip.style.cssText = `
-        position: fixed;
-        background: #22c55e;
-        color: white;
-        padding: 0.5rem 1rem;
-        border-radius: 6px;
-        font-size: 0.85rem;
-        font-weight: 500;
-        z-index: 10000;
-        pointer-events: none;
-        opacity: 0;
-        transition: opacity 0.2s ease;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-    `;
-    document.body.appendChild(tooltip);
-
-    copyableElements.forEach(element => {
-        // Add hover effect
-        element.addEventListener('mouseenter', function() {
-            const rect = this.querySelector('rect');
-            if (rect) {
-                rect.style.filter = 'brightness(1.2)';
-                rect.style.transition = 'filter 0.2s ease';
-            }
-        });
-
-        element.addEventListener('mouseleave', function() {
-            const rect = this.querySelector('rect');
-            if (rect) {
-                rect.style.filter = '';
-            }
-        });
-
-        // Add click handler
-        element.addEventListener('click', function(e) {
-            e.stopPropagation();
-
-            const cmd = this.dataset.cmd;
-            if (!cmd) return;
-
-            // Copy to clipboard
-            navigator.clipboard.writeText(cmd).then(() => {
-                // Show tooltip
-                const lang = getLang();
-                tooltip.textContent = lang === 'fr' ? '✓ Copié !' : '✓ Copied!';
-
-                // Position tooltip near cursor
-                tooltip.style.left = e.clientX + 10 + 'px';
-                tooltip.style.top = e.clientY - 30 + 'px';
-                tooltip.style.opacity = '1';
-
-                // Flash effect on element
-                const rect = this.querySelector('rect');
-                if (rect) {
-                    const originalStroke = rect.getAttribute('stroke');
-                    rect.setAttribute('stroke', '#22c55e');
-                    rect.style.filter = 'brightness(1.4)';
-
-                    setTimeout(() => {
-                        rect.setAttribute('stroke', originalStroke);
-                        rect.style.filter = '';
-                    }, 300);
-                }
-
-                // Hide tooltip after delay
-                setTimeout(() => {
-                    tooltip.style.opacity = '0';
-                }, 1500);
-            }).catch(err => {
-                console.error('Failed to copy:', err);
-                const lang = getLang();
-                tooltip.textContent = lang === 'fr' ? '✗ Erreur' : '✗ Error';
-                tooltip.style.background = '#ef4444';
-                tooltip.style.left = e.clientX + 10 + 'px';
-                tooltip.style.top = e.clientY - 30 + 'px';
-                tooltip.style.opacity = '1';
-
-                setTimeout(() => {
-                    tooltip.style.opacity = '0';
-                    tooltip.style.background = '#22c55e';
-                }, 1500);
-            });
-        });
-    });
-}
+/* ============================================
+   CLAUDE TOOLS DOCUMENTATION - APP
+   ============================================ */
+
+document.addEventListener('DOMContentLoaded', function() {
+    initSidebar();
+    initLanguageSwitch();
+    initCopyButtons();
+    initMobileMenu();
+    initSidebarToc();
+    initScrollSpy();
+    initInteractiveDiagram();
+    initSearch();
+    initCopyableCommands();
+});
+
+/* ============================================
+   SIDEBAR
+   ============================================ */
+
+function initSidebar() {
+    const sidebar = document.querySelector('.sidebar');
+    const toggle = document.querySelector('.sidebar-toggle');
+
+    if (!sidebar || !toggle) return;
+
+    // Load saved state
+    const isCollapsed = localStorage.getItem('sidebar-collapsed') === 'true';
+    if (isCollapsed) {
+        sidebar.classList.add('collapsed');
+    }
+
+    toggle.addEventListener('click', function() {
+        sidebar.classList.toggle('collapsed');
+        localStorage.setItem('sidebar-collapsed', sidebar.classList.contains('collapsed'));
+    });
+
+    // Set active nav item
+    const currentPage = window.location.pathname.split('/').pop() || 'index.html';
+    document.querySelectorAll('.nav-item').forEach(item => {
+        if (item.getAttribute('href') === currentPage) {
+            item.classList.add('active');
+        }
+    });
+}
+
+/* ============================================
+   LANGUAGE SWITCH
+   ============================================ */
+
+function initLanguageSwitch() {
+    const langSelect = document.getElementById('lang-select');
+
+    // Load saved language
+    const savedLang = localStorage.getItem('doc-language') || 'fr';
+    setLanguage(savedLang);
+
+    // Set dropdown to saved value
+    if (langSelect) {
+        langSelect.value = savedLang;
+    }
+
+    // Setup language button handlers (sidebar footer)
+    document.querySelectorAll('.lang-btn').forEach(btn => {
+        btn.addEventListener('click', function() {
+            const lang = this.dataset.lang;
+            setLanguage(lang);
+            localStorage.setItem('doc-language', lang);
+
+            // Update active state
+            document.querySelectorAll('.lang-btn').forEach(b => b.classList.remove('active'));
+            this.classList.add('active');
+        });
+    });
+}
+
+function setLanguage(lang) {
+    // Update body class
+    document.body.classList.remove('lang-fr', 'lang-en');
+    document.body.classList.add('lang-' + lang);
+
+    // Update dropdown value (if exists)
+    const langSelect = document.getElementById('lang-select');
+    if (langSelect) {
+        langSelect.value = lang;
+    }
+
+    // Update HTML lang attribute
+    document.documentElement.lang = lang;
+
+    // Update search placeholder
+    const searchInput = document.getElementById('search-input');
+    if (searchInput) {
+        const placeholder = lang === 'en' ? searchInput.dataset.placeholderEn : searchInput.dataset.placeholderFr;
+        if (placeholder) {
+            searchInput.placeholder = placeholder;
+        }
+    }
+}
+
+/* ============================================
+   COPY BUTTONS
+   ============================================ */
+
+function initCopyButtons() {
+    document.querySelectorAll('.copy-btn').forEach(btn => {
+        btn.addEventListener('click', async function() {
+            const code = this.closest('.code-block').querySelector('code').textContent;
+
+            try {
+                await navigator.clipboard.writeText(code);
+                const originalText = this.textContent;
+                this.textContent = 'Copied!';
+                this.style.background = 'var(--success)';
+
+                setTimeout(() => {
+                    this.textContent = originalText;
+                    this.style.background = '';
+                }, 2000);
+            } catch (err) {
+                console.error('Failed to copy:', err);
+            }
+        });
+    });
+}
+
+/* ============================================
+   MOBILE MENU
+   ============================================ */
+
+function initMobileMenu() {
+    const menuBtn = document.querySelector('.mobile-menu-btn');
+    const sidebar = document.querySelector('.sidebar');
+    const overlay = document.querySelector('.overlay');
+
+    if (!menuBtn || !sidebar) return;
+
+    menuBtn.addEventListener('click', function() {
+        sidebar.classList.toggle('open');
+        overlay?.classList.toggle('active');
+    });
+
+    overlay?.addEventListener('click', function() {
+        sidebar.classList.remove('open');
+        overlay.classList.remove('active');
+    });
+
+    // Close on nav item click (mobile)
+    document.querySelectorAll('.nav-item').forEach(item => {
+        item.addEventListener('click', function() {
+            if (window.innerWidth <= 1024) {
+                sidebar.classList.remove('open');
+                overlay?.classList.remove('active');
+            }
+        });
+    });
+}
+
+/* ============================================
+   SIDEBAR TABLE OF CONTENTS
+   ============================================ */
+
+function initSidebarToc() {
+    const sidebarToc = document.querySelector('.sidebar-toc');
+    const tocToggle = document.querySelector('.toc-toggle');
+
+    if (!sidebarToc) return;
+
+    // Auto-open TOC on current page
+    sidebarToc.classList.add('open');
+    if (tocToggle) tocToggle.classList.add('open');
+
+    // Toggle handler
+    if (tocToggle) {
+        tocToggle.addEventListener('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            sidebarToc.classList.toggle('open');
+            tocToggle.classList.toggle('open');
+        });
+    }
+
+    // Smooth scroll for sidebar TOC links
+    document.querySelectorAll('.sidebar-toc-link').forEach(link => {
+        link.addEventListener('click', function(e) {
+            e.preventDefault();
+            const targetId = this.getAttribute('href');
+            const target = document.querySelector(targetId);
+            if (target) {
+                target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                // Update active state immediately
+                document.querySelectorAll('.sidebar-toc-link').forEach(l => l.classList.remove('active'));
+                this.classList.add('active');
+            }
+        });
+    });
+}
+
+/* ============================================
+   SCROLL SPY
+   ============================================ */
+
+function initScrollSpy() {
+    const headings = document.querySelectorAll('h2[id], h3[id]');
+    const sidebarTocLinks = document.querySelectorAll('.sidebar-toc-link');
+
+    if (!headings.length || !sidebarTocLinks.length) return;
+
+    const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                const id = entry.target.id;
+                sidebarTocLinks.forEach(link => {
+                    link.classList.toggle('active', link.getAttribute('href') === '#' + id);
+                });
+            }
+        });
+    }, { rootMargin: '-20% 0px -80% 0px' });
+
+    headings.forEach(heading => observer.observe(heading));
+}
+
+/* ============================================
+   UTILITIES
+   ============================================ */
+
+// Smooth scroll for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function(e) {
+        e.preventDefault();
+        const target = document.querySelector(this.getAttribute('href'));
+        if (target) {
+            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+    });
+});
+
+// Add animation class on scroll
+const observerOptions = {
+    threshold: 0.1,
+    rootMargin: '0px 0px -50px 0px'
+};
+
+const fadeObserver = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            entry.target.classList.add('fade-in');
+            fadeObserver.unobserve(entry.target);
+        }
+    });
+}, observerOptions);
+
+document.querySelectorAll('.card, .alert, .best-practice').forEach(el => {
+    fadeObserver.observe(el);
+});
+
+/* ============================================
+   INTERACTIVE DIAGRAM
+   ============================================ */
+
+function initInteractiveDiagram() {
+    const diagram = document.getElementById('gitflow-diagram');
+    const tooltip = document.getElementById('diagram-tooltip');
+
+    if (!diagram || !tooltip) return;
+
+    const clickableElements = diagram.querySelectorAll('.clickable-element');
+    let activeElement = null;
+
+    // Get current language
+    function getLang() {
+        return document.body.classList.contains('lang-en') ? 'en' : 'fr';
+    }
+
+    // Show tooltip for an element
+    function showTooltip(element, event) {
+        const lang = getLang();
+        const title = element.dataset['title' + lang.charAt(0).toUpperCase() + lang.slice(1)] || element.dataset.titleFr;
+        const desc = element.dataset['desc' + lang.charAt(0).toUpperCase() + lang.slice(1)] || element.dataset.descFr;
+        const cmd = element.dataset.cmd || '';
+
+        // Set tooltip content
+        tooltip.querySelector('.tooltip-title').textContent = title;
+        tooltip.querySelector('.tooltip-desc').textContent = desc;
+
+        const cmdElement = tooltip.querySelector('.tooltip-cmd');
+        if (cmd) {
+            cmdElement.textContent = cmd;
+            cmdElement.style.display = 'inline-block';
+        } else {
+            cmdElement.style.display = 'none';
+        }
+
+        // Position tooltip
+        const diagramRect = diagram.getBoundingClientRect();
+        const svgRect = diagram.querySelector('svg').getBoundingClientRect();
+
+        // Calculate position relative to the diagram
+        let left = event.clientX - diagramRect.left + 15;
+        let top = event.clientY - diagramRect.top + 15;
+
+        // Make tooltip visible to measure it
+        tooltip.style.left = left + 'px';
+        tooltip.style.top = top + 'px';
+        tooltip.classList.add('visible');
+
+        // Adjust if overflowing right edge
+        const tooltipRect = tooltip.getBoundingClientRect();
+        if (tooltipRect.right > diagramRect.right - 10) {
+            left = event.clientX - diagramRect.left - tooltipRect.width - 15;
+            tooltip.style.left = left + 'px';
+        }
+
+        // Adjust if overflowing bottom edge
+        if (tooltipRect.bottom > window.innerHeight - 10) {
+            top = event.clientY - diagramRect.top - tooltipRect.height - 15;
+            tooltip.style.top = top + 'px';
+        }
+
+        // Mark element as active
+        if (activeElement) {
+            activeElement.classList.remove('active');
+        }
+        element.classList.add('active');
+        activeElement = element;
+    }
+
+    // Hide tooltip
+    function hideTooltip() {
+        tooltip.classList.remove('visible');
+        if (activeElement) {
+            activeElement.classList.remove('active');
+            activeElement = null;
+        }
+    }
+
+    // Add click handlers to clickable elements
+    clickableElements.forEach(element => {
+        element.addEventListener('click', function(e) {
+            e.stopPropagation();
+
+            // If clicking the same element, toggle off
+            if (activeElement === this) {
+                hideTooltip();
+            } else {
+                showTooltip(this, e);
+            }
+        });
+    });
+
+    // Close tooltip when clicking outside
+    document.addEventListener('click', function(e) {
+        if (!diagram.contains(e.target) || (!e.target.closest('.clickable-element') && !e.target.closest('.diagram-tooltip'))) {
+            hideTooltip();
+        }
+    });
+
+    // Close on escape key
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape') {
+            hideTooltip();
+        }
+    });
+
+    // Update tooltip language when language changes
+    const langSelect = document.getElementById('lang-select');
+    if (langSelect) {
+        langSelect.addEventListener('change', function() {
+            if (activeElement && tooltip.classList.contains('visible')) {
+                // Re-show tooltip with new language
+                const event = { clientX: parseFloat(tooltip.style.left) + diagram.getBoundingClientRect().left,
+                               clientY: parseFloat(tooltip.style.top) + diagram.getBoundingClientRect().top };
+                setTimeout(() => showTooltip(activeElement, event), 50);
+            }
+        });
+    }
+}
+
+/* ============================================
+   SEARCH (Full-Text with Static Fallback)
+   ============================================ */
+
+function initSearch() {
+    const searchInput = document.getElementById('search-input');
+    const searchResults = document.getElementById('search-results');
+
+    if (!searchInput || !searchResults) return;
+
+    // Static search index (works without server, file:// protocol)
+    const staticIndex = [
+        // Index - Accueil
+        { page: 'index.html', icon: '🏠', title: { fr: 'Accueil', en: 'Home' }, section: '', anchor: '',
+          keywords: 'accueil home documentation claude tools atlashub cli automatisation gitflow ef core migration hooks agents commandes installation npm' },
+
+        // Installation
+        { page: 'installation.html', icon: '📦', title: { fr: 'Installation', en: 'Installation' }, section: '', anchor: '',
+          keywords: 'installation install npm registry nodejs node prérequis requirements setup configuration package global' },
+        { page: 'installation.html', icon: '📦', title: { fr: 'Installation', en: 'Installation' }, section: { fr: 'Prérequis', en: 'Prerequisites' }, anchor: 'prerequisites',
+          keywords: 'prérequis prerequisites nodejs node version 18 npm git' },
+        { page: 'installation.html', icon: '📦', title: { fr: 'Installation', en: 'Installation' }, section: { fr: 'Installation globale', en: 'Global Installation' }, anchor: 'global-install',
+          keywords: 'npm install global atlashub smartstack smartstack-cli registry package' },
+
+        // GitFlow
+        { page: 'gitflow.html', icon: '🔀', title: { fr: 'GitFlow', en: 'GitFlow' }, section: '', anchor: '',
+          keywords: 'gitflow git workflow branch branche feature release hotfix develop main master merge fusion version semver' },
+        { page: 'gitflow.html', icon: '🔀', title: { fr: 'GitFlow', en: 'GitFlow' }, section: { fr: 'Branches principales', en: 'Main Branches' }, anchor: 'main-branches',
+          keywords: 'main master develop development production branches principales' },
+        { page: 'gitflow.html', icon: '🔀', title: { fr: 'GitFlow', en: 'GitFlow' }, section: { fr: 'Feature branches', en: 'Feature branches' }, anchor: 'feature',
+          keywords: 'feature branch nouvelle fonctionnalité develop merge création git checkout' },
+        { page: 'gitflow.html', icon: '🔀', title: { fr: 'GitFlow', en: 'GitFlow' }, section: { fr: 'Release branches', en: 'Release branches' }, anchor: 'release',
+          keywords: 'release branch version livraison production tag semver minor major patch' },
+        { page: 'gitflow.html', icon: '🔀', title: { fr: 'GitFlow', en: 'GitFlow' }, section: { fr: 'Hotfix branches', en: 'Hotfix branches' }, anchor: 'hotfix',
+          keywords: 'hotfix branch correction bug urgent production patch fix' },
+        { page: 'gitflow.html', icon: '🔀', title: { fr: 'GitFlow', en: 'GitFlow' }, section: { fr: 'Commandes', en: 'Commands' }, anchor: 'commands',
+          keywords: 'commandes commands gitflow init start finish status plan exec commit abort' },
+        { page: 'gitflow.html', icon: '🔀', title: { fr: 'GitFlow', en: 'GitFlow' }, section: { fr: 'Versioning SemVer', en: 'SemVer Versioning' }, anchor: 'semver',
+          keywords: 'semver semantic versioning version major minor patch auto increment package.json' },
+
+        // EF Core
+        { page: 'efcore.html', icon: '📄', title: { fr: 'EF Core', en: 'EF Core' }, section: '', anchor: '',
+          keywords: 'ef core entity framework migration database dotnet .net sql model orm microsoft' },
+        { page: 'efcore.html', icon: '📄', title: { fr: 'EF Core', en: 'EF Core' }, section: { fr: 'Structure des migrations', en: 'Migration Structure' }, anchor: 'structure',
+          keywords: 'migration structure fichier file timestamp designer snapshot model context dbcontext' },
+        { page: 'efcore.html', icon: '📄', title: { fr: 'EF Core', en: 'EF Core' }, section: { fr: 'Conflits', en: 'Conflicts' }, anchor: 'conflicts',
+          keywords: 'conflit conflict merge migration snapshot résolution resolution gitflow' },
+        { page: 'efcore.html', icon: '📄', title: { fr: 'EF Core', en: 'EF Core' }, section: { fr: 'Bonnes pratiques', en: 'Best Practices' }, anchor: 'best-practices',
+          keywords: 'bonnes pratiques best practices migration naming convention idempotent script sql' },
+        { page: 'efcore.html', icon: '📄', title: { fr: 'EF Core', en: 'EF Core' }, section: { fr: 'Commandes', en: 'Commands' }, anchor: 'commands',
+          keywords: 'commandes commands dotnet ef migrations add remove update database script' },
+
+        // Business Analyse
+        { page: 'business-analyse.html', icon: '📊', title: { fr: 'Business Analyse', en: 'Business Analyse' }, section: '', anchor: '',
+          keywords: 'business analyse analysis specification requirements exigences babok' },
+        { page: 'business-analyse.html', icon: '📊', title: { fr: 'Business Analyse', en: 'Business Analyse' }, section: { fr: 'Discovery', en: 'Discovery' }, anchor: 'phase-2',
+          keywords: 'discover discovery questionnaire questions adaptatives ultrathink elicitation' },
+        { page: 'business-analyse.html', icon: '📊', title: { fr: 'Business Analyse', en: 'Business Analyse' }, section: { fr: 'Specification', en: 'Specification' }, anchor: 'phase-4',
+          keywords: 'specify specification use cases wireframes gherkin acceptance criteria' },
+        { page: 'business-analyse.html', icon: '📊', title: { fr: 'Business Analyse', en: 'Business Analyse' }, section: { fr: 'Handoff', en: 'Handoff' }, anchor: 'phase-6',
+          keywords: 'handoff dev prompt developer implementation autonome autonomous' },
+
+        // Agents
+        { page: 'agents.html', icon: '🤖', title: { fr: 'Agents', en: 'Agents' }, section: '', anchor: '',
+          keywords: 'agents subagent task tool automation automatisation ai ia claude specialized spécialisé' },
+        { page: 'agents.html', icon: '🤖', title: { fr: 'Agents', en: 'Agents' }, section: { fr: 'GitFlow Agents', en: 'GitFlow Agents' }, anchor: 'gitflow-agents',
+          keywords: 'gitflow agents plan exec commit status abort rollback recovery' },
+        { page: 'agents.html', icon: '🤖', title: { fr: 'Agents', en: 'Agents' }, section: { fr: 'Explore Agent', en: 'Explore Agent' }, anchor: 'explore',
+          keywords: 'explore agent codebase search recherche exploration quick thorough' },
+
+        // Commands
+        { page: 'commands.html', icon: '⚡', title: { fr: 'Commandes', en: 'Commands' }, section: '', anchor: '',
+          keywords: 'commandes commands slash cli terminal prompt gitflow commit review deploy' },
+        { page: 'commands.html', icon: '⚡', title: { fr: 'Commandes', en: 'Commands' }, section: { fr: 'GitFlow Commands', en: 'GitFlow Commands' }, anchor: 'gitflow-commands',
+          keywords: 'gitflow commands init start finish status commit plan exec' },
+        { page: 'commands.html', icon: '⚡', title: { fr: 'Commandes', en: 'Commands' }, section: { fr: 'Commit', en: 'Commit' }, anchor: 'commit',
+          keywords: 'commit git message conventional commits push' },
+        { page: 'commands.html', icon: '⚡', title: { fr: 'Commandes', en: 'Commands' }, section: { fr: 'Deploy', en: 'Deploy' }, anchor: 'deploy',
+          keywords: 'deploy deployment déploiement build test lint push production' },
+
+        // Hooks
+        { page: 'hooks.html', icon: '🔗', title: { fr: 'Hooks', en: 'Hooks' }, section: '', anchor: '',
+          keywords: 'hooks pre-commit post-commit validation automation automatisation script event événement' },
+        { page: 'hooks.html', icon: '🔗', title: { fr: 'Hooks', en: 'Hooks' }, section: { fr: 'Types de hooks', en: 'Hook Types' }, anchor: 'types',
+          keywords: 'types hooks PreToolUse PostToolUse Stop SessionStart UserPromptSubmit' },
+        { page: 'hooks.html', icon: '🔗', title: { fr: 'Hooks', en: 'Hooks' }, section: { fr: 'Configuration', en: 'Configuration' }, anchor: 'configuration',
+          keywords: 'configuration hooks settings.json matcher command timeout' }
+    ];
+
+    let searchIndex = null;
+    let activeIndex = -1;
+
+    function getLang() {
+        return document.body.classList.contains('lang-en') ? 'en' : 'fr';
+    }
+
+    // Build search index from static data
+    function buildIndex() {
+        const lang = getLang();
+
+        return staticIndex.map(item => {
+            const pageTitle = typeof item.title === 'object' ? item.title[lang] : item.title;
+            const sectionTitle = typeof item.section === 'object' ? item.section[lang] : item.section;
+
+            return {
+                page: item.page,
+                pageTitle: pageTitle,
+                icon: item.icon,
+                sectionTitle: sectionTitle || '',
+                content: (pageTitle + ' ' + sectionTitle + ' ' + item.keywords).toLowerCase(),
+                contentRaw: item.keywords,
+                anchor: item.anchor,
+                url: item.anchor ? `${item.page}#${item.anchor}` : item.page
+            };
+        });
+    }
+
+    // Search through index
+    function search(query) {
+        if (!query || query.length < 2) return [];
+
+        // Build index if not ready
+        if (!searchIndex) {
+            searchIndex = buildIndex();
+        }
+
+        const normalizedQuery = query.toLowerCase().trim();
+        const words = normalizedQuery.split(/\s+/).filter(w => w.length >= 2);
+        const results = [];
+        const seenPages = new Set();
+
+        searchIndex.forEach(item => {
+            // Check if any word matches
+            const anyWordMatch = words.some(word => item.content.includes(word));
+            if (!anyWordMatch) return;
+
+            // Calculate relevance score
+            let score = 0;
+            words.forEach(word => {
+                if (item.content.includes(word)) {
+                    // Title match is worth more
+                    if (item.pageTitle.toLowerCase().includes(word)) score += 10;
+                    if (item.sectionTitle.toLowerCase().includes(word)) score += 5;
+                    // Count occurrences in content
+                    const matches = (item.content.match(new RegExp(word, 'g')) || []).length;
+                    score += matches;
+                }
+            });
+
+            // Generate excerpt from keywords
+            let excerpt = item.contentRaw;
+            if (excerpt.length > 80) {
+                // Find first matching word position
+                const firstWord = words.find(w => item.contentRaw.toLowerCase().includes(w));
+                if (firstWord) {
+                    const idx = item.contentRaw.toLowerCase().indexOf(firstWord);
+                    const start = Math.max(0, idx - 20);
+                    const end = Math.min(item.contentRaw.length, idx + 60);
+                    excerpt = (start > 0 ? '...' : '') + item.contentRaw.substring(start, end) + (end < item.contentRaw.length ? '...' : '');
+                } else {
+                    excerpt = item.contentRaw.substring(0, 80) + '...';
+                }
+            }
+
+            // Avoid duplicate pages for same section
+            const key = item.page + '#' + item.anchor;
+            if (!seenPages.has(key)) {
+                seenPages.add(key);
+                results.push({
+                    ...item,
+                    score,
+                    excerpt
+                });
+            }
+        });
+
+        // Sort by score and limit results
+        return results
+            .sort((a, b) => b.score - a.score)
+            .slice(0, 10);
+    }
+
+    // Escape regex special chars
+    function escapeRegex(str) {
+        return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
+
+    // Highlight matches in text
+    function highlightMatch(text, query) {
+        const words = query.toLowerCase().split(/\s+/).filter(w => w.length >= 2);
+        let result = text;
+        words.forEach(word => {
+            const regex = new RegExp(`(${escapeRegex(word)})`, 'gi');
+            result = result.replace(regex, '<mark>$1</mark>');
+        });
+        return result;
+    }
+
+    function renderResults(results, query) {
+        const lang = getLang();
+
+        if (results.length === 0) {
+            const emptyMsg = lang === 'fr' ? 'Aucun résultat trouvé' : 'No results found';
+            searchResults.innerHTML = `<div class="search-results-empty">${emptyMsg}</div>`;
+        } else {
+            searchResults.innerHTML = results.map((item, index) => `
+                <a href="${item.url}" class="search-result-item${index === activeIndex ? ' active' : ''}" data-index="${index}">
+                    <div class="search-result-icon">${item.icon}</div>
+                    <div class="search-result-content">
+                        <div class="search-result-title">${highlightMatch(item.pageTitle, query)}${item.sectionTitle ? ' <span class="search-result-section">› ' + highlightMatch(item.sectionTitle, query) + '</span>' : ''}</div>
+                        <div class="search-result-excerpt">${highlightMatch(item.excerpt, query)}</div>
+                        <div class="search-result-path">${item.url}</div>
+                    </div>
+                </a>
+            `).join('');
+        }
+
+        searchResults.classList.add('visible');
+    }
+
+    function hideResults() {
+        searchResults.classList.remove('visible');
+        activeIndex = -1;
+    }
+
+    // Input handler with debounce
+    let debounceTimer;
+    searchInput.addEventListener('input', function() {
+        clearTimeout(debounceTimer);
+        const query = this.value.trim();
+
+        if (query.length >= 2) {
+            debounceTimer = setTimeout(() => {
+                const results = search(query);
+                activeIndex = -1;
+                renderResults(results, query);
+            }, 150);
+        } else {
+            hideResults();
+        }
+    });
+
+    // Keyboard navigation
+    searchInput.addEventListener('keydown', function(e) {
+        const items = searchResults.querySelectorAll('.search-result-item');
+
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            activeIndex = Math.min(activeIndex + 1, items.length - 1);
+            updateActiveItem(items);
+        } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            activeIndex = Math.max(activeIndex - 1, 0);
+            updateActiveItem(items);
+        } else if (e.key === 'Enter') {
+            e.preventDefault();
+            if (activeIndex >= 0 && items[activeIndex]) {
+                window.location.href = items[activeIndex].getAttribute('href');
+            }
+        } else if (e.key === 'Escape') {
+            hideResults();
+            searchInput.blur();
+        }
+    });
+
+    function updateActiveItem(items) {
+        items.forEach((item, index) => {
+            item.classList.toggle('active', index === activeIndex);
+        });
+
+        if (items[activeIndex]) {
+            items[activeIndex].scrollIntoView({ block: 'nearest' });
+        }
+    }
+
+    // Focus handler
+    searchInput.addEventListener('focus', function() {
+        if (this.value.length >= 2) {
+            const results = search(this.value);
+            renderResults(results, this.value);
+        }
+    });
+
+    // Click outside to close
+    document.addEventListener('click', function(e) {
+        if (!e.target.closest('.header-search')) {
+            hideResults();
+        }
+    });
+
+    // Keyboard shortcut (Ctrl/Cmd + K)
+    document.addEventListener('keydown', function(e) {
+        if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+            e.preventDefault();
+            searchInput.focus();
+            searchInput.select();
+        }
+    });
+}
+
+/* ============================================
+   COPYABLE COMMANDS (SVG Diagram)
+   ============================================ */
+
+function initCopyableCommands() {
+    const copyableElements = document.querySelectorAll('.cmd-copyable');
+
+    if (copyableElements.length === 0) return;
+
+    // Get current language
+    function getLang() {
+        return document.body.classList.contains('lang-en') ? 'en' : 'fr';
+    }
+
+    // Create floating tooltip for feedback
+    const tooltip = document.createElement('div');
+    tooltip.className = 'copy-tooltip';
+    tooltip.style.cssText = `
+        position: fixed;
+        background: #22c55e;
+        color: white;
+        padding: 0.5rem 1rem;
+        border-radius: 6px;
+        font-size: 0.85rem;
+        font-weight: 500;
+        z-index: 10000;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.2s ease;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+    `;
+    document.body.appendChild(tooltip);
+
+    copyableElements.forEach(element => {
+        // Add hover effect
+        element.addEventListener('mouseenter', function() {
+            const rect = this.querySelector('rect');
+            if (rect) {
+                rect.style.filter = 'brightness(1.2)';
+                rect.style.transition = 'filter 0.2s ease';
+            }
+        });
+
+        element.addEventListener('mouseleave', function() {
+            const rect = this.querySelector('rect');
+            if (rect) {
+                rect.style.filter = '';
+            }
+        });
+
+        // Add click handler
+        element.addEventListener('click', function(e) {
+            e.stopPropagation();
+
+            const cmd = this.dataset.cmd;
+            if (!cmd) return;
+
+            // Copy to clipboard
+            navigator.clipboard.writeText(cmd).then(() => {
+                // Show tooltip
+                const lang = getLang();
+                tooltip.textContent = lang === 'fr' ? '✓ Copié !' : '✓ Copied!';
+
+                // Position tooltip near cursor
+                tooltip.style.left = e.clientX + 10 + 'px';
+                tooltip.style.top = e.clientY - 30 + 'px';
+                tooltip.style.opacity = '1';
+
+                // Flash effect on element
+                const rect = this.querySelector('rect');
+                if (rect) {
+                    const originalStroke = rect.getAttribute('stroke');
+                    rect.setAttribute('stroke', '#22c55e');
+                    rect.style.filter = 'brightness(1.4)';
+
+                    setTimeout(() => {
+                        rect.setAttribute('stroke', originalStroke);
+                        rect.style.filter = '';
+                    }, 300);
+                }
+
+                // Hide tooltip after delay
+                setTimeout(() => {
+                    tooltip.style.opacity = '0';
+                }, 1500);
+            }).catch(err => {
+                console.error('Failed to copy:', err);
+                const lang = getLang();
+                tooltip.textContent = lang === 'fr' ? '✗ Erreur' : '✗ Error';
+                tooltip.style.background = '#ef4444';
+                tooltip.style.left = e.clientX + 10 + 'px';
+                tooltip.style.top = e.clientY - 30 + 'px';
+                tooltip.style.opacity = '1';
+
+                setTimeout(() => {
+                    tooltip.style.opacity = '0';
+                    tooltip.style.background = '#22c55e';
+                }, 1500);
+            });
+        });
+    });
+}