@autocode-cli/autocode 0.1.31 → 0.1.32

package/dist/server/dashboard/pages/new-issue.js

@@ -248,12 +248,114 @@ export function generateNewIssuePage(lang) {
       animation: spin 0.8s linear infinite;
     }
     @keyframes spin { to { transform: rotate(360deg); } }
+    @keyframes pulse-recording {
+      0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
+      50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
+    }
+    .btn-mic {
+      background: var(--bg);
+      border: 1px solid var(--border);
+      color: var(--muted);
+      width: 42px;
+      height: 42px;
+      border-radius: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s;
+      flex-shrink: 0;
+    }
+    .btn-mic:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
+    .btn-mic:disabled { opacity: 0.4; cursor: not-allowed; }
+    .btn-mic.recording {
+      background: var(--red);
+      border-color: var(--red);
+      color: white;
+      animation: pulse-recording 1.5s ease-in-out infinite;
+    }
+    .btn-mic svg { width: 18px; height: 18px; }
+    .description-row {
+      display: flex;
+      gap: 8px;
+      align-items: flex-start;
+    }
+    .description-row .form-group { flex: 1; margin-bottom: 0; }
     .title-row {
       display: flex;
       gap: 12px;
       align-items: flex-end;
     }
     .title-row .form-group { flex: 1; margin-bottom: 0; }
+    .title-input-row {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+    .title-input-row input { flex: 1; }
+    .autocomplete-countdown {
+      position: fixed;
+      bottom: 80px;
+      right: 24px;
+      background: var(--bg-card);
+      border: 1px solid var(--accent);
+      border-radius: 12px;
+      padding: 16px 20px;
+      z-index: 100;
+      display: none;
+      flex-direction: column;
+      gap: 12px;
+      min-width: 280px;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    }
+    .autocomplete-countdown.show { display: flex; }
+    .countdown-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+    }
+    .countdown-text {
+      font-size: 14px;
+      color: var(--fg);
+    }
+    .countdown-timer {
+      font-weight: 600;
+      color: var(--accent);
+      font-size: 18px;
+    }
+    .countdown-progress {
+      height: 4px;
+      background: var(--border);
+      border-radius: 2px;
+      overflow: hidden;
+    }
+    .countdown-progress-bar {
+      height: 100%;
+      background: var(--accent);
+      transition: width 0.1s linear;
+    }
+    .countdown-actions {
+      display: flex;
+      gap: 8px;
+    }
+    .btn-countdown {
+      flex: 1;
+      padding: 8px 12px;
+      border-radius: 6px;
+      font-size: 13px;
+      cursor: pointer;
+      border: 1px solid var(--border);
+      background: var(--bg);
+      color: var(--fg);
+    }
+    .btn-countdown:hover { border-color: var(--accent); }
+    .btn-countdown.primary {
+      background: var(--accent);
+      border-color: var(--accent);
+      color: white;
+    }
+    .btn-countdown.primary:hover { opacity: 0.9; }
     .btn-secondary {
       background: var(--bg);
       color: var(--fg);
@@ -294,7 +396,16 @@ export function generateNewIssuePage(lang) {
       <div class="title-row">
         <div class="form-group">
           <label for="issue-title" data-i18n="newIssue.titleLabel">Title *</label>
-          <input type="text" id="issue-title" placeholder="E.g.: Fix the login bug" data-i18n-placeholder="newIssue.titlePlaceholder">
+          <div class="title-input-row">
+            <input type="text" id="issue-title" placeholder="E.g.: Fix the login bug" data-i18n-placeholder="newIssue.titlePlaceholder">
+            <button type="button" class="btn-mic" id="btn-mic" onclick="toggleSpeechToText()" title="Speech to text">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>
+                <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
+                <line x1="12" x2="12" y1="19" y2="22"/>
+              </svg>
+            </button>
+          </div>
         </div>
         <button type="button" class="btn-autocomplete" id="btn-autocomplete" onclick="autocomplete()" title="Auto-fill fields using AI">
           <span id="autocomplete-icon">&#10024;</span>
@@ -371,6 +482,20 @@ export function generateNewIssuePage(lang) {
 
   <div class="notification" id="notification"></div>
 
+  <div class="autocomplete-countdown" id="autocomplete-countdown">
+    <div class="countdown-header">
+      <span class="countdown-text" data-i18n="countdown.autocompletingIn">AutoComplete in</span>
+      <span class="countdown-timer" id="countdown-timer">3</span>
+    </div>
+    <div class="countdown-progress">
+      <div class="countdown-progress-bar" id="countdown-progress-bar" style="width: 100%"></div>
+    </div>
+    <div class="countdown-actions">
+      <button class="btn-countdown" onclick="cancelAutocompleteCountdown()" data-i18n="countdown.cancel">Cancel</button>
+      <button class="btn-countdown primary" onclick="triggerAutocompleteNow()" data-i18n="countdown.now">Now</button>
+    </div>
+  </div>
+
   <script>
     const STORAGE_KEY = 'autocode-lang';
     let currentLang = localStorage.getItem(STORAGE_KEY) || 'fr';
@@ -407,7 +532,16 @@ export function generateNewIssuePage(lang) {
         'notify.error': 'Error',
         'notify.titleRequired': 'Title is required',
         'notify.autocompleteSuccess': 'Fields auto-filled!',
-        'notify.autocompleteTitleRequired': 'Enter a title first'
+        'notify.autocompleteTitleRequired': 'Enter a title first',
+        'mic.title': 'Speech to text',
+        'mic.titleRecording': 'Recording... Click to stop',
+        'mic.notSupported': 'Speech recognition not supported',
+        'notify.micNotSupported': 'Speech recognition is not supported by your browser',
+        'notify.micError': 'Speech recognition error',
+        'countdown.autocompletingIn': 'AutoComplete in',
+        'countdown.cancel': 'Cancel',
+        'countdown.now': 'Now',
+        'countdown.seconds': 's'
       },
       fr: {
         'newIssue.title': 'Nouveau ticket',
@@ -439,7 +573,16 @@ export function generateNewIssuePage(lang) {
         'notify.error': 'Erreur',
         'notify.titleRequired': 'Le titre est requis',
         'notify.autocompleteSuccess': 'Champs remplis automatiquement !',
-        'notify.autocompleteTitleRequired': 'Entrez un titre d\\'abord'
+        'notify.autocompleteTitleRequired': 'Entrez un titre d\\'abord',
+        'mic.title': 'Dictée vocale',
+        'mic.titleRecording': 'Enregistrement... Cliquer pour arrêter',
+        'mic.notSupported': 'Reconnaissance vocale non supportée',
+        'notify.micNotSupported': 'La reconnaissance vocale n\\'est pas supportée par votre navigateur',
+        'notify.micError': 'Erreur de reconnaissance vocale',
+        'countdown.autocompletingIn': 'AutoComplete dans',
+        'countdown.cancel': 'Annuler',
+        'countdown.now': 'Maintenant',
+        'countdown.seconds': 's'
       }
     };
 
@@ -561,6 +704,7 @@ export function generateNewIssuePage(lang) {
           currentLang = newLang;
           localStorage.setItem(STORAGE_KEY, newLang);
           updateLangUI();
+          updateMicButton();
         }
       });
     });
@@ -639,8 +783,144 @@ export function generateNewIssuePage(lang) {
       }
     }
 
+    // Speech-to-text
+    let recognition = null;
+    let isRecording = false;
+    let autocompleteCountdownTimer = null;
+    let autocompleteCountdownInterval = null;
+    const AUTOCOMPLETE_DELAY_SECONDS = 3;
+
+    function isSpeechSupported() {
+      return 'SpeechRecognition' in window || 'webkitSpeechRecognition' in window;
+    }
+
+    function initSpeechRecognition() {
+      if (!isSpeechSupported()) return null;
+      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+      const rec = new SpeechRecognition();
+      rec.continuous = true;
+      rec.interimResults = true;
+      rec.lang = currentLang === 'fr' ? 'fr-FR' : 'en-US';
+      return rec;
+    }
+
+    function updateMicButton() {
+      const btn = document.getElementById('btn-mic');
+      if (!isSpeechSupported()) {
+        btn.disabled = true;
+        btn.title = t('mic.notSupported');
+      } else {
+        btn.disabled = false;
+        btn.title = isRecording ? t('mic.titleRecording') : t('mic.title');
+        btn.classList.toggle('recording', isRecording);
+      }
+    }
+
+    function handleSpeechResult(event, titleInput, state) {
+      for (let i = event.resultIndex; i < event.results.length; i++) {
+        const result = event.results[i];
+        if (result.isFinal) {
+          const text = result[0].transcript;
+          state.finalTranscript += (state.finalTranscript ? ' ' : '') + text;
+          titleInput.value = state.finalTranscript;
+        }
+      }
+    }
+
+    function handleSpeechError(event) {
+      if (event.error !== 'aborted') {
+        showNotification(t('notify.micError') + ': ' + event.error, true);
+      }
+      isRecording = false;
+      updateMicButton();
+    }
+
+    function handleSpeechEnd() {
+      isRecording = false;
+      updateMicButton();
+      const title = document.getElementById('issue-title').value.trim();
+      if (title) {
+        startAutocompleteCountdown();
+      }
+    }
+
+    function startAutocompleteCountdown() {
+      const countdown = document.getElementById('autocomplete-countdown');
+      const timerEl = document.getElementById('countdown-timer');
+      const progressBar = document.getElementById('countdown-progress-bar');
+
+      let remaining = AUTOCOMPLETE_DELAY_SECONDS;
+      timerEl.textContent = remaining + t('countdown.seconds');
+      progressBar.style.width = '100%';
+      countdown.classList.add('show');
+
+      autocompleteCountdownInterval = setInterval(function() {
+        remaining -= 0.1;
+        const percentage = (remaining / AUTOCOMPLETE_DELAY_SECONDS) * 100;
+        progressBar.style.width = percentage + '%';
+        if (remaining <= 0) {
+          remaining = 0;
+        }
+        timerEl.textContent = Math.ceil(remaining) + t('countdown.seconds');
+      }, 100);
+
+      autocompleteCountdownTimer = setTimeout(function() {
+        hideAutocompleteCountdown();
+        autocomplete();
+      }, AUTOCOMPLETE_DELAY_SECONDS * 1000);
+    }
+
+    function hideAutocompleteCountdown() {
+      const countdown = document.getElementById('autocomplete-countdown');
+      countdown.classList.remove('show');
+      if (autocompleteCountdownTimer) {
+        clearTimeout(autocompleteCountdownTimer);
+        autocompleteCountdownTimer = null;
+      }
+      if (autocompleteCountdownInterval) {
+        clearInterval(autocompleteCountdownInterval);
+        autocompleteCountdownInterval = null;
+      }
+    }
+
+    function cancelAutocompleteCountdown() {
+      hideAutocompleteCountdown();
+    }
+
+    function triggerAutocompleteNow() {
+      hideAutocompleteCountdown();
+      autocomplete();
+    }
+
+    function toggleSpeechToText() {
+      if (!isSpeechSupported()) {
+        showNotification(t('notify.micNotSupported'), true);
+        return;
+      }
+
+      if (isRecording && recognition) {
+        recognition.stop();
+        return;
+      }
+
+      recognition = initSpeechRecognition();
+      if (!recognition) return;
+
+      const titleInput = document.getElementById('issue-title');
+      const state = { finalTranscript: titleInput.value };
+
+      recognition.onresult = function(event) { handleSpeechResult(event, titleInput, state); };
+      recognition.onerror = handleSpeechError;
+      recognition.onend = handleSpeechEnd;
+
+      recognition.start();
+      isRecording = true;
+      updateMicButton();
+    }
+
     // Init
     updateLangUI();
+    updateMicButton();
   </script>
 </body>
 </html>`;

package/dist/server/dashboard/pages/new-issue.js.map

@@ -1 +1 @@
-{"version":3,"file":"new-issue.js","sourceRoot":"","sources":["../../../../src/server/dashboard/pages/new-issue.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD;;GAEG;AACH,MAAM,UAAU,oBAAoB,CAAC,IAAY;IAC/C,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAErE,OAAO;cACK,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAmUJ,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,kBAAkB,GAAG,CAAC,IAAI,IAAI,GAAG,CAAC,IAAI,KAAK,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,CAAC,IAAI,WAAW,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAuTjJ,CAAC;AACT,CAAC"}
+{"version":3,"file":"new-issue.js","sourceRoot":"","sources":["../../../../src/server/dashboard/pages/new-issue.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD;;GAEG;AACH,MAAM,UAAU,oBAAoB,CAAC,IAAY;IAC/C,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAErE,OAAO;cACK,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAkbJ,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,kBAAkB,GAAG,CAAC,IAAI,IAAI,GAAG,CAAC,IAAI,KAAK,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,CAAC,IAAI,WAAW,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAgejJ,CAAC;AACT,CAAC"}

package/dist/server/dashboard/pages/new-issue.test.js

@@ -327,6 +327,276 @@ describe('AutoComplete functionality', () => {
         });
     });
 });
+describe('Speech-to-Text functionality', () => {
+    describe('UI elements', () => {
+        it('should include microphone button', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('id="btn-mic"');
+            expect(html).toContain('class="btn-mic"');
+            expect(html).toContain('onclick="toggleSpeechToText()"');
+        });
+        it('should include microphone SVG icon', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('<svg');
+            expect(html).toContain('viewBox="0 0 24 24"');
+            // Microphone path
+            expect(html).toContain('M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5');
+        });
+        it('should include microphone button styling', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('.btn-mic');
+            expect(html).toContain('.btn-mic:hover');
+            expect(html).toContain('.btn-mic:disabled');
+            expect(html).toContain('.btn-mic.recording');
+        });
+        it('should include recording animation', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('@keyframes pulse-recording');
+            expect(html).toContain('animation: pulse-recording');
+        });
+        it('should place microphone button next to title input', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('class="title-input-row"');
+            // Title and button should be in same container
+            expect(html).toMatch(/title-input-row[\s\S]*?issue-title[\s\S]*?btn-mic/);
+        });
+    });
+    describe('JavaScript functionality', () => {
+        it('should include speech recognition state variables', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('let recognition = null');
+            expect(html).toContain('let isRecording = false');
+        });
+        it('should include isSpeechSupported function', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('function isSpeechSupported()');
+            expect(html).toContain("'SpeechRecognition' in window");
+            expect(html).toContain("'webkitSpeechRecognition' in window");
+        });
+        it('should include initSpeechRecognition function', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('function initSpeechRecognition()');
+            expect(html).toContain('window.SpeechRecognition || window.webkitSpeechRecognition');
+            expect(html).toContain('new SpeechRecognition()');
+        });
+        it('should configure continuous and interimResults mode', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('rec.continuous = true');
+            expect(html).toContain('rec.interimResults = true');
+        });
+        it('should include updateMicButton function', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('function updateMicButton()');
+            expect(html).toContain("btn.classList.toggle('recording', isRecording)");
+        });
+        it('should include toggleSpeechToText function', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('function toggleSpeechToText()');
+        });
+        it('should handle push-to-talk toggle - start recording', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('recognition.start()');
+            expect(html).toContain('isRecording = true');
+        });
+        it('should handle push-to-talk toggle - stop recording', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('if (isRecording && recognition)');
+            expect(html).toContain('recognition.stop()');
+        });
+        it('should include onresult event handler', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('recognition.onresult = function(event)');
+            expect(html).toContain('event.resultIndex');
+            expect(html).toContain('result.isFinal');
+            expect(html).toContain('result[0].transcript');
+        });
+        it('should append transcribed text to title input', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain("const titleInput = document.getElementById('issue-title')");
+            // The handleSpeechResult function assigns to titleInput.value
+            expect(html).toContain('titleInput.value = state.finalTranscript');
+        });
+        it('should include onerror event handler', () => {
+            const html = generateNewIssuePage('en');
+            // Uses a separate handler function
+            expect(html).toContain('recognition.onerror = handleSpeechError');
+            expect(html).toContain("event.error !== 'aborted'");
+        });
+        it('should include onend event handler', () => {
+            const html = generateNewIssuePage('en');
+            // Uses a separate handler function
+            expect(html).toContain('recognition.onend = handleSpeechEnd');
+            expect(html).toContain('function handleSpeechEnd()');
+        });
+        it('should initialize mic button on page load', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('updateMicButton()');
+        });
+    });
+    describe('Language support (FR and EN)', () => {
+        it('should set language to fr-FR for French', () => {
+            const html = generateNewIssuePage('fr');
+            expect(html).toContain("rec.lang = currentLang === 'fr' ? 'fr-FR' : 'en-US'");
+        });
+        it('should set language to en-US for English', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain("rec.lang = currentLang === 'fr' ? 'fr-FR' : 'en-US'");
+        });
+    });
+    describe('Error handling', () => {
+        it('should show notification when speech not supported', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('if (!isSpeechSupported())');
+            expect(html).toContain("showNotification(t('notify.micNotSupported'), true)");
+        });
+        it('should disable button when speech not supported', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('btn.disabled = true');
+            expect(html).toContain("btn.title = t('mic.notSupported')");
+        });
+        it('should show error notification on recognition error', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain("showNotification(t('notify.micError') + ': ' + event.error, true)");
+        });
+        it('should ignore aborted error', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain("if (event.error !== 'aborted')");
+        });
+        it('should reset recording state on error', () => {
+            const html = generateNewIssuePage('en');
+            // handleSpeechError function should reset isRecording and update button
+            expect(html).toContain('function handleSpeechError(event)');
+            expect(html).toMatch(/handleSpeechError[\s\S]*?isRecording = false[\s\S]*?updateMicButton\(\)/);
+        });
+        it('should handle null recognition gracefully', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('if (!recognition) return');
+        });
+    });
+    describe('i18n translations for Speech-to-Text', () => {
+        it('should include English Speech-to-Text translations', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain("'mic.title': 'Speech to text'");
+            expect(html).toContain("'mic.titleRecording': 'Recording... Click to stop'");
+            expect(html).toContain("'mic.notSupported': 'Speech recognition not supported'");
+            expect(html).toContain("'notify.micNotSupported': 'Speech recognition is not supported by your browser'");
+            expect(html).toContain("'notify.micError': 'Speech recognition error'");
+        });
+        it('should include French Speech-to-Text translations', () => {
+            const html = generateNewIssuePage('fr');
+            expect(html).toContain("'mic.title': 'Dictée vocale'");
+            expect(html).toContain("'mic.titleRecording': 'Enregistrement... Cliquer pour arrêter'");
+            expect(html).toContain("'mic.notSupported': 'Reconnaissance vocale non supportée'");
+            expect(html).toContain("'notify.micNotSupported': 'La reconnaissance vocale n\\'est pas supportée par votre navigateur'");
+            expect(html).toContain("'notify.micError': 'Erreur de reconnaissance vocale'");
+        });
+        it('should update mic button title based on recording state', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain("btn.title = isRecording ? t('mic.titleRecording') : t('mic.title')");
+        });
+    });
+    describe('Recording state management', () => {
+        it('should track recording state with isRecording variable', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('let isRecording = false');
+        });
+        it('should toggle recording class on button', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain("btn.classList.toggle('recording', isRecording)");
+        });
+        it('should apply red background when recording', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('.btn-mic.recording');
+            expect(html).toContain('background: var(--red)');
+        });
+        it('should update button state after recognition ends', () => {
+            const html = generateNewIssuePage('en');
+            // onend handler should update button
+            expect(html).toMatch(/onend[\s\S]*?updateMicButton\(\)/);
+        });
+    });
+    describe('Autocomplete countdown after transcription', () => {
+        it('should trigger autocomplete countdown after speech ends if title has content', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('function handleSpeechEnd()');
+            expect(html).toContain("const title = document.getElementById('issue-title').value.trim()");
+            expect(html).toContain('if (title) {');
+            expect(html).toContain('startAutocompleteCountdown()');
+        });
+        it('should have configurable autocomplete delay', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('const AUTOCOMPLETE_DELAY_SECONDS = 3');
+        });
+        it('should show countdown UI element', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('id="autocomplete-countdown"');
+            expect(html).toContain('class="autocomplete-countdown"');
+            expect(html).toContain('id="countdown-timer"');
+            expect(html).toContain('id="countdown-progress-bar"');
+        });
+        it('should have cancel and now buttons in countdown', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('onclick="cancelAutocompleteCountdown()"');
+            expect(html).toContain('onclick="triggerAutocompleteNow()"');
+        });
+        it('should define startAutocompleteCountdown function', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('function startAutocompleteCountdown()');
+            expect(html).toContain("countdown.classList.add('show')");
+        });
+        it('should define cancelAutocompleteCountdown function', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('function cancelAutocompleteCountdown()');
+            expect(html).toContain('hideAutocompleteCountdown()');
+        });
+        it('should define triggerAutocompleteNow function', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('function triggerAutocompleteNow()');
+            expect(html).toContain('hideAutocompleteCountdown()');
+            expect(html).toContain('autocomplete()');
+        });
+        it('should have countdown translations in English', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain("'countdown.autocompletingIn': 'AutoComplete in'");
+            expect(html).toContain("'countdown.cancel': 'Cancel'");
+            expect(html).toContain("'countdown.now': 'Now'");
+            expect(html).toContain("'countdown.seconds': 's'");
+        });
+        it('should have countdown translations in French', () => {
+            const html = generateNewIssuePage('fr');
+            expect(html).toContain("'countdown.autocompletingIn': 'AutoComplete dans'");
+            expect(html).toContain("'countdown.cancel': 'Annuler'");
+            expect(html).toContain("'countdown.now': 'Maintenant'");
+            expect(html).toContain("'countdown.seconds': 's'");
+        });
+        it('should clear timers in hideAutocompleteCountdown', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('function hideAutocompleteCountdown()');
+            expect(html).toContain('clearTimeout(autocompleteCountdownTimer)');
+            expect(html).toContain('clearInterval(autocompleteCountdownInterval)');
+        });
+        it('should have countdown progress bar with animation', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('.countdown-progress-bar');
+            expect(html).toContain("progressBar.style.width = percentage + '%'");
+        });
+    });
+    describe('Microphone button placement', () => {
+        it('should have mic button next to title input', () => {
+            const html = generateNewIssuePage('en');
+            expect(html).toContain('class="title-input-row"');
+            expect(html).toContain('id="issue-title"');
+            expect(html).toContain('id="btn-mic"');
+        });
+        it('should not have mic button in description row', () => {
+            const html = generateNewIssuePage('en');
+            // Description should be a simple textarea without mic button
+            expect(html).toContain('id="issue-description"');
+            // The description-row class should not contain btn-mic anymore
+            expect(html).not.toContain('class="description-row">\n          <textarea');
+        });
+    });
+});
 describe('Edge cases', () => {
     it('should handle empty columns array', async () => {
         // Re-mock with empty columns