@autocode-cli/autocode 0.0.39 → 0.0.41

package/dist/server/dashboard.js

@@ -1,10 +1,13 @@
 /**
  * Dashboard HTML generation - Full feature parity with legacy autocode.sh
  */
+import { createRequire } from 'module';
 import { getColumns } from '../core/column.js';
-import { listTickets } from '../core/ticket.js';
+import { listTickets, getTicket } from '../core/ticket.js';
 import { getWorkflowSummary } from '../core/workflow.js';
 import { getConfig } from '../utils/config.js';
+const require = createRequire(import.meta.url);
+const pkg = require('../../package.json');
 /**
  * Generate the full dashboard HTML
  */
@@ -115,6 +118,19 @@ export function generateDashboard() {
             <span>+</span> <span data-i18n="modal.addCriteria">Add criteria</span>
           </button>
         </div>
+        <div class="attachments-section" id="attachments-section" style="display:none">
+          <div class="attachments-header">
+            <h3 data-i18n="modal.attachments">Attachments</h3>
+            <span class="attachments-count" id="attachments-count">0</span>
+          </div>
+          <div class="attachments-list" id="attachments-list"></div>
+          <div class="attachments-upload">
+            <input type="file" id="file-input" multiple style="display:none" onchange="uploadFiles(this.files)">
+            <button type="button" class="btn-add" onclick="document.getElementById('file-input').click()">
+              <span>📎</span> <span data-i18n="modal.addAttachment">Add file</span>
+            </button>
+          </div>
+        </div>
         <div class="comments-section" id="comments-section" style="display:none">
           <div class="comments-header">
             <h3 data-i18n="modal.comments">Comments</h3>
@@ -175,7 +191,7 @@ export function generateDashboard() {
   </div>
 
   <footer>
-    <span>AutoCode v2.0 | <span id="time">${timestamp}</span></span>
+    <span>AutoCode v${pkg.version} | <span id="time">${timestamp}</span></span>
   </footer>
 
   <script>
@@ -627,12 +643,7 @@ function getStyles() {
       display: flex;
       flex-direction: column;
       gap: 10px;
-      max-height: 300px;
-      overflow-y: auto;
-      padding-right: 4px;
     }
-    .comments-list::-webkit-scrollbar { width: 6px; }
-    .comments-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
     .no-comments {
       color: var(--muted);
       font-size: 13px;
@@ -651,15 +662,37 @@ function getStyles() {
     }
     .comment:hover {
       border-left-color: var(--blue);
-      transform: translateX(2px);
     }
     .comment-meta {
       display: flex;
       align-items: center;
-      justify-content: space-between;
-      margin-bottom: 8px;
-      padding-bottom: 8px;
-      border-bottom: 1px solid var(--border);
+      flex-wrap: wrap;
+      gap: 8px;
+      cursor: pointer;
+      user-select: none;
+    }
+    .comment-meta::before {
+      content: '▶';
+      font-size: 10px;
+      color: var(--muted);
+      transition: transform 0.2s ease;
+    }
+    .comment.expanded .comment-meta::before {
+      transform: rotate(90deg);
+    }
+    .comment-text {
+      max-height: 0;
+      overflow: hidden;
+      transition: max-height 0.3s ease, margin-top 0.3s ease, padding-top 0.3s ease;
+      margin-top: 0;
+      padding-top: 0;
+      border-top: none;
+    }
+    .comment.expanded .comment-text {
+      max-height: 500px;
+      margin-top: 8px;
+      padding-top: 8px;
+      border-top: 1px solid var(--border);
     }
     .comment-column {
       font-size: 10px;
@@ -671,6 +704,22 @@ function getStyles() {
       background: rgba(77,171,247,0.15);
       border-radius: 4px;
     }
+    .comment-source {
+      font-size: 10px;
+      padding: 3px 8px;
+      border-radius: 4px;
+      text-transform: uppercase;
+      font-weight: 600;
+      letter-spacing: 0.5px;
+    }
+    .comment-source.user {
+      background: #3b82f6;
+      color: white;
+    }
+    .comment-source.claude {
+      background: #8b5cf6;
+      color: white;
+    }
     .comment-date {
       font-size: 11px;
       color: var(--muted);
@@ -746,6 +795,72 @@ function getStyles() {
       font-size: 13px;
     }
 
+    /* Attachments Section */
+    .attachments-section {
+      border-top: 1px solid var(--border);
+      padding-top: 16px;
+      margin-top: 8px;
+    }
+    .attachments-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 12px;
+    }
+    .attachments-header h3 { font-size: 14px; font-weight: 600; }
+    .attachments-count {
+      background: var(--blue);
+      color: #fff;
+      padding: 2px 8px;
+      border-radius: 10px;
+      font-size: 11px;
+      font-weight: 600;
+    }
+    .attachments-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 12px;
+    }
+    .attachment-item {
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      padding: 8px 12px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+    }
+    .attachment-item:hover { border-color: var(--accent); }
+    .attachment-icon { font-size: 16px; }
+    .attachment-name {
+      max-width: 150px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .attachment-delete {
+      background: none;
+      border: none;
+      color: var(--red);
+      cursor: pointer;
+      padding: 2px;
+      font-size: 14px;
+      opacity: 0.7;
+    }
+    .attachment-delete:hover { opacity: 1; }
+    .attachments-upload { margin-top: 8px; }
+    .no-attachments {
+      color: var(--muted);
+      font-size: 13px;
+      text-align: center;
+      padding: 16px;
+      background: var(--bg);
+      border-radius: 8px;
+      border: 1px dashed var(--border);
+    }
+
     .modal-actions {
       display: flex;
       gap: 12px;
@@ -960,6 +1075,9 @@ function getScript() {
         'modal.selectLabel': 'Select a label...',
         'modal.acceptanceCriteria': 'Acceptance criteria',
         'modal.addCriteria': 'Add criteria',
+        'modal.attachments': 'Attachments',
+        'modal.addAttachment': 'Add file',
+        'modal.noAttachments': 'No attachments',
         'modal.comments': 'Comments',
         'modal.noComments': 'No comments',
         'modal.addCommentPlaceholder': 'Add a comment...',
@@ -1046,6 +1164,9 @@ function getScript() {
         'modal.selectLabel': 'Sélectionner un label...',
         'modal.acceptanceCriteria': 'Critères d\\'acceptation',
         'modal.addCriteria': 'Ajouter un critère',
+        'modal.attachments': 'Pièces jointes',
+        'modal.addAttachment': 'Ajouter un fichier',
+        'modal.noAttachments': 'Aucune pièce jointe',
         'modal.comments': 'Commentaires',
         'modal.noComments': 'Aucun commentaire',
         'modal.addCommentPlaceholder': 'Ajouter un commentaire...',
@@ -1106,7 +1227,7 @@ function getScript() {
       }
     };
 
-    let currentLang = localStorage.getItem('autocode-ui-lang') || 'en';
+    let currentLang = localStorage.getItem('autocode-lang') || 'fr';
 
     function t(key) {
       return translations[currentLang][key] || translations['en'][key] || key;
@@ -1114,8 +1235,7 @@ function getScript() {
 
     function switchLanguage(lang) {
       currentLang = lang;
-      currentActionLang = lang; // Sync ACTION file language
-      localStorage.setItem('autocode-ui-lang', lang);
+      currentActionLang = lang;
       localStorage.setItem('autocode-lang', lang);
       document.documentElement.lang = lang;
 
@@ -1163,7 +1283,7 @@ function getScript() {
     let draggedTicket = null;
     let draggedFromColumn = null;
     let currentActionSlug = null;
-    let currentActionLang = localStorage.getItem('autocode-lang') || 'en';
+    let currentActionLang = localStorage.getItem('autocode-lang') || 'fr';
     let originalActionContent = '';
     let claudeProcessingTickets = new Set(); // Tickets currently being processed by Claude
 
@@ -1290,6 +1410,7 @@ function getScript() {
       const nextBtn = document.getElementById('btn-next');
       const archiveBtn = document.getElementById('btn-archive');
       const commentsSection = document.getElementById('comments-section');
+      const attachmentsSection = document.getElementById('attachments-section');
 
       if (key) {
         modalTitle.textContent = t('modal.editTicket') + ' ' + key;
@@ -1297,6 +1418,7 @@ function getScript() {
         nextBtn.style.display = 'inline-block';
         archiveBtn.style.display = 'inline-block';
         commentsSection.style.display = 'block';
+        attachmentsSection.style.display = 'block';
         loadTicketForEdit(key);
       } else {
         modalTitle.textContent = t('modal.newTicket');
@@ -1304,8 +1426,10 @@ function getScript() {
         nextBtn.style.display = 'none';
         archiveBtn.style.display = 'none';
         commentsSection.style.display = 'none';
+        attachmentsSection.style.display = 'none';
         resetForm();
         resetComments();
+        resetAttachments();
       }
     }
 
@@ -1353,6 +1477,9 @@ function getScript() {
 
         renderComments(ticket.comments || []);
 
+        // Fetch attachments
+        loadAttachments(key);
+
         // Fetch Claude log if exists
         fetchLog(key);
       } catch (e) {
@@ -1381,7 +1508,7 @@ function getScript() {
         if (editingKey) {
           btn.textContent = t('btn.updating');
           await fetch('/api/tickets/' + editingKey, {
-            method: 'POST',
+            method: 'PATCH',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ title, description, priority, semver, labels: selectedLabels, acceptance_criteria: criteria })
           });
@@ -1411,7 +1538,11 @@ function getScript() {
       btn.disabled = true;
       btn.textContent = t('btn.moving');
       try {
-        await fetch('/api/tickets/' + editingKey + '/next', { method: 'POST' });
+        await fetch('/api/tickets/' + editingKey + '/next', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ lang: currentLang })
+        });
         showNotification('info', t('notify.ticketAdvanced'), editingKey);
         closeModal();
         loadTicketsFromAPI();
@@ -1434,7 +1565,7 @@ function getScript() {
         await fetch('/api/tickets/' + editingKey + '/move', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ column: lastColumn.name, force: true })
+          body: JSON.stringify({ column: lastColumn.name, force: true, lang: currentLang })
         });
         showNotification('info', t('notify.ticketArchived'), editingKey);
         closeModal();
@@ -1513,16 +1644,31 @@ function getScript() {
       }
 
       const sorted = [...currentComments].sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
-      list.innerHTML = sorted.map(comment => {
+      list.innerHTML = sorted.map((comment, index) => {
         const date = new Date(comment.created_at);
         const dateStr = date.toLocaleDateString('en-US', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' });
-        return '<div class="comment">' +
-          '<div class="comment-meta"><span class="comment-column">' + (comment.column || 'N/A') + '</span>' +
+        const source = comment.source || 'user';
+        const sourceBadge = source === 'claude'
+          ? '<span class="comment-source claude">Claude</span>'
+          : '<span class="comment-source user">User</span>';
+        return '<div class="comment" id="comment-' + index + '">' +
+          '<div class="comment-meta" onclick="toggleComment(' + index + ')">' + sourceBadge + '<span class="comment-column">' + (comment.column || 'N/A') + '</span>' +
           '<span class="comment-date">' + dateStr + '</span></div>' +
           '<div class="comment-text">' + renderMarkdown(comment.text) + '</div></div>';
       }).join('');
     }
 
+    function toggleComment(index) {
+      const comments = document.querySelectorAll('.comment');
+      comments.forEach((comment, i) => {
+        if (i === index) {
+          comment.classList.toggle('expanded');
+        } else {
+          comment.classList.remove('expanded');
+        }
+      });
+    }
+
     function renderMarkdown(text) {
       if (!text) return '';
       let html = escapeHtml(text);
@@ -1557,7 +1703,9 @@ function getScript() {
         });
         const result = await res.json();
         textarea.value = '';
-        if (result.comments) renderComments(result.comments);
+        if (result.success && result.data && result.data.comments) {
+          renderComments(result.data.comments);
+        }
         showNotification('success', t('notify.commentAdded'), '');
       } catch (e) {
         showNotification('error', t('notify.error'), e.message);
@@ -1567,6 +1715,112 @@ function getScript() {
       }
     }
 
+    // ========================================
+    // ATTACHMENTS
+    // ========================================
+    let currentAttachments = [];
+
+    function resetAttachments() {
+      currentAttachments = [];
+      document.getElementById('attachments-list').innerHTML = '<div class="no-attachments">' + t('modal.noAttachments') + '</div>';
+      document.getElementById('attachments-count').textContent = '0';
+      document.getElementById('file-input').value = '';
+    }
+
+    async function loadAttachments(key) {
+      try {
+        const res = await fetch('/api/tickets/' + key + '/attachments');
+        const json = await res.json();
+        if (json.success) {
+          currentAttachments = json.data || [];
+          renderAttachments();
+        }
+      } catch (e) {
+        console.error('Error loading attachments:', e);
+      }
+    }
+
+    function renderAttachments() {
+      const list = document.getElementById('attachments-list');
+      const count = document.getElementById('attachments-count');
+      count.textContent = currentAttachments.length;
+
+      if (currentAttachments.length === 0) {
+        list.innerHTML = '<div class="no-attachments">' + t('modal.noAttachments') + '</div>';
+        return;
+      }
+
+      list.innerHTML = currentAttachments.map(filename => {
+        const ext = filename.split('.').pop().toLowerCase();
+        const icon = getFileIcon(ext);
+        return '<div class="attachment-item">' +
+          '<span class="attachment-icon">' + icon + '</span>' +
+          '<span class="attachment-name" title="' + escapeHtml(filename) + '">' + escapeHtml(filename) + '</span>' +
+          '<button class="attachment-delete" onclick="deleteAttachment(\\'' + escapeHtml(filename) + '\\')" title="Delete">&times;</button>' +
+          '</div>';
+      }).join('');
+    }
+
+    function getFileIcon(ext) {
+      const icons = {
+        pdf: '📄', doc: '📝', docx: '📝', txt: '📝',
+        png: '🖼️', jpg: '🖼️', jpeg: '🖼️', gif: '🖼️', svg: '🖼️', webp: '🖼️',
+        mp4: '🎬', mov: '🎬', avi: '🎬',
+        mp3: '🎵', wav: '🎵',
+        zip: '📦', rar: '📦', tar: '📦', gz: '📦',
+        js: '📜', ts: '📜', py: '📜', json: '📜', md: '📜',
+      };
+      return icons[ext] || '📎';
+    }
+
+    async function uploadFiles(files) {
+      if (!editingKey || files.length === 0) return;
+
+      const formData = new FormData();
+      for (const file of files) {
+        formData.append('files', file, file.name);
+      }
+
+      try {
+        const res = await fetch('/api/tickets/' + editingKey + '/attachments', {
+          method: 'POST',
+          body: formData
+        });
+        const json = await res.json();
+        if (json.success) {
+          showNotification('success', 'Files uploaded', json.data.join(', '));
+          loadAttachments(editingKey);
+        } else {
+          showNotification('error', 'Upload failed', json.error);
+        }
+      } catch (e) {
+        showNotification('error', 'Upload error', e.message);
+      }
+
+      // Reset file input
+      document.getElementById('file-input').value = '';
+    }
+
+    async function deleteAttachment(filename) {
+      if (!editingKey) return;
+      if (!confirm('Delete ' + filename + '?')) return;
+
+      try {
+        const res = await fetch('/api/tickets/' + editingKey + '/attachments/' + encodeURIComponent(filename), {
+          method: 'DELETE'
+        });
+        const json = await res.json();
+        if (json.success) {
+          showNotification('info', 'File deleted', filename);
+          loadAttachments(editingKey);
+        } else {
+          showNotification('error', 'Delete failed', json.error);
+        }
+      } catch (e) {
+        showNotification('error', 'Delete error', e.message);
+      }
+    }
+
     // ========================================
     // DRAG & DROP
     // ========================================
@@ -1620,7 +1874,7 @@ function getScript() {
         await fetch('/api/tickets/' + key + '/move', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ column: targetColumnName, force: true })
+          body: JSON.stringify({ column: targetColumnName, force: true, lang: currentLang })
         });
         showNotification('info', key + ' ' + t('notify.ticketMoved'), t('notify.moveTo') + ' "' + targetColumnName + '"');
         loadTicketsFromAPI();
@@ -1662,7 +1916,7 @@ function getScript() {
           await fetch('/api/tickets/' + key + '/move', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ column: lastColumn.name, force: true })
+            body: JSON.stringify({ column: lastColumn.name, force: true, lang: currentLang })
           });
           showNotification('info', t('notify.ticketArchived'), key);
           loadTicketsFromAPI();
@@ -1947,7 +2201,7 @@ function getScript() {
     }
 
     function onTicketClick(key) {
-      openModal(key);
+      window.location.href = '/ticket/' + key;
     }
 
     // ========================================
@@ -2119,9 +2373,9 @@ export function generateColumnEditPage(slug, lang) {
   <header class="header">
     <a href="/" class="back-btn">← Dashboard</a>
     <h1 class="title">${escapeHtml(columnName)} <span>/ ACTION.md</span></h1>
-    <div class="lang-selector">
-      <button class="lang-btn ${lang === 'en' ? 'active' : ''}" data-lang="en">EN</button>
-      <button class="lang-btn ${lang === 'fr' ? 'active' : ''}" data-lang="fr">FR</button>
+    <div class="lang-selector" id="lang-selector">
+      <button class="lang-btn" data-lang="en">EN</button>
+      <button class="lang-btn" data-lang="fr">FR</button>
     </div>
     <div class="actions">
       <button class="btn btn-save" id="saveBtn" disabled>Save</button>
@@ -2137,8 +2391,9 @@ export function generateColumnEditPage(slug, lang) {
   <div class="notification" id="notification"></div>
 
   <script>
+    const STORAGE_KEY = 'autocode-lang';
     const slug = '${slug}';
-    let currentLang = '${lang}';
+    let currentLang = localStorage.getItem(STORAGE_KEY) || 'fr';
     let originalContent = '';
     let hasChanges = false;
 
@@ -2148,6 +2403,14 @@ export function generateColumnEditPage(slug, lang) {
     const pathEl = document.getElementById('path');
     const notification = document.getElementById('notification');
 
+    // Update UI to reflect current language
+    function updateLangUI() {
+      document.querySelectorAll('.lang-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.lang === currentLang);
+      });
+      pathEl.textContent = slug + '/ACTION.' + currentLang + '.md';
+    }
+
     // Load content
     async function loadContent() {
       try {
@@ -2237,8 +2500,8 @@ export function generateColumnEditPage(slug, lang) {
             return;
           }
           currentLang = newLang;
-          document.querySelectorAll('.lang-btn').forEach(b => b.classList.remove('active'));
-          btn.classList.add('active');
+          localStorage.setItem(STORAGE_KEY, newLang);
+          updateLangUI();
           loadContent();
         }
       });
@@ -2253,9 +2516,1197 @@ export function generateColumnEditPage(slug, lang) {
     });
 
     // Init
+    updateLangUI();
     loadContent();
   </script>
 </body>
 </html>`;
 }
+/**
+ * Generate ticket view page
+ */
+export function generateTicketViewPage(ticketKey, lang) {
+    const config = getConfig();
+    const ticket = getTicket(config.root, ticketKey);
+    const columns = getColumns();
+    // 404 page if ticket not found
+    if (!ticket) {
+        return `<!DOCTYPE html>
+<html lang="${lang}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Ticket Not Found - AutoCode</title>
+  <style>
+    :root {
+      --bg: #0a0a0f;
+      --text: #f1f5f9;
+      --accent: #6366f1;
+    }
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .not-found {
+      text-align: center;
+      padding: 48px;
+    }
+    h1 { font-size: 2rem; margin-bottom: 16px; }
+    p { color: #94a3b8; margin-bottom: 24px; }
+    a {
+      display: inline-block;
+      background: var(--accent);
+      color: white;
+      padding: 12px 24px;
+      border-radius: 8px;
+      text-decoration: none;
+      font-weight: 500;
+    }
+    a:hover { opacity: 0.9; }
+  </style>
+</head>
+<body>
+  <div class="not-found">
+    <h1>Ticket Not Found</h1>
+    <p>Ticket ${escapeHtml(ticketKey)} does not exist or has been archived.</p>
+    <a href="/">← Back to Dashboard</a>
+  </div>
+</body>
+</html>`;
+    }
+    const currentColumn = columns.find(c => c.slug === ticket.column_slug);
+    const ticketData = JSON.stringify(ticket);
+    const columnsData = JSON.stringify(columns);
+    return `<!DOCTYPE html>
+<html lang="${lang}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(ticket.title)} - ${ticketKey} - AutoCode</title>
+  <style>
+    :root {
+      --bg: #0a0a0f;
+      --bg-secondary: #12121a;
+      --bg-tertiary: #1a1a24;
+      --text: #f1f5f9;
+      --muted: #94a3b8;
+      --border: #2a2a3a;
+      --accent: #6366f1;
+      --blue: #4dabf7;
+      --green: #4ade80;
+      --yellow: #facc15;
+      --orange: #fb923c;
+      --red: #f87171;
+      --purple: #a78bfa;
+    }
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      min-height: 100vh;
+    }
+    .header {
+      display: flex;
+      align-items: center;
+      gap: 24px;
+      padding: 16px 24px;
+      background: var(--bg-secondary);
+      border-bottom: 1px solid var(--border);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+    .back-btn {
+      color: var(--muted);
+      text-decoration: none;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .back-btn:hover { color: var(--text); }
+    .ticket-header-info {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+    .ticket-key {
+      font-family: 'SF Mono', Monaco, monospace;
+      font-size: 12px;
+      color: var(--accent);
+      background: rgba(99, 102, 241, 0.15);
+      padding: 4px 10px;
+      border-radius: 4px;
+      font-weight: 600;
+    }
+    .ticket-title {
+      font-size: 18px;
+      font-weight: 600;
+    }
+    .lang-selector {
+      display: flex;
+      gap: 4px;
+    }
+    .lang-btn {
+      background: transparent;
+      border: 1px solid var(--border);
+      color: var(--muted);
+      padding: 6px 12px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 12px;
+      font-weight: 500;
+    }
+    .lang-btn:hover { border-color: var(--accent); color: var(--text); }
+    .lang-btn.active { background: var(--accent); border-color: var(--accent); color: white; }
+    .ticket-title-input {
+      flex: 1;
+      background: transparent;
+      border: 1px solid transparent;
+      color: var(--text);
+      font-size: 18px;
+      font-weight: 600;
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-family: inherit;
+    }
+    .ticket-title-input:hover { border-color: var(--border); }
+    .ticket-title-input:focus {
+      outline: none;
+      border-color: var(--accent);
+      background: var(--bg-tertiary);
+    }
+    .section-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .btn-edit-toggle {
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      font-size: 14px;
+      opacity: 0.5;
+      transition: opacity 0.2s;
+    }
+    .btn-edit-toggle:hover { opacity: 1; }
+    .btn-edit-toggle.active { opacity: 1; }
+    .description-view {
+      line-height: 1.7;
+      color: var(--text);
+    }
+    .description-view p { margin-bottom: 12px; }
+    .description-view h1, .description-view h2, .description-view h3, .description-view h4 {
+      margin: 16px 0 8px;
+      font-weight: 600;
+    }
+    .description-view code {
+      background: var(--bg-tertiary);
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-family: 'SF Mono', Monaco, monospace;
+      font-size: 13px;
+    }
+    .description-view pre {
+      background: var(--bg-tertiary);
+      padding: 12px;
+      border-radius: 6px;
+      overflow-x: auto;
+    }
+    .description-view ul, .description-view ol {
+      margin: 8px 0;
+      padding-left: 24px;
+    }
+    .description-view a { color: var(--accent); }
+    .description-edit {
+      width: 100%;
+      min-height: 200px;
+      padding: 12px;
+      background: var(--bg-tertiary);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      color: var(--text);
+      font-family: 'SF Mono', Monaco, monospace;
+      font-size: 13px;
+      line-height: 1.6;
+      resize: vertical;
+    }
+    .description-edit:focus {
+      outline: none;
+      border-color: var(--accent);
+    }
+    .main-content {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      padding: 24px 48px;
+    }
+    .ticket-details { display: flex; flex-direction: column; gap: 24px; }
+    .ticket-bottom {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+    }
+    .section {
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 20px;
+    }
+    .section-title {
+      font-size: 12px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--muted);
+      margin-bottom: 16px;
+    }
+    .ticket-meta {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+    }
+    .meta-badge {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      padding: 5px 12px;
+      border-radius: 6px;
+    }
+    .priority-P0 { background: rgba(248, 113, 113, 0.2); color: var(--red); }
+    .priority-P1 { background: rgba(251, 146, 60, 0.2); color: var(--orange); }
+    .priority-P2 { background: rgba(250, 204, 21, 0.2); color: var(--yellow); }
+    .priority-P3 { background: rgba(148, 163, 184, 0.2); color: var(--muted); }
+    .column-badge { background: rgba(77, 171, 247, 0.15); color: var(--blue); }
+    .semver-badge { background: rgba(167, 139, 250, 0.15); color: var(--purple); }
+    .labels-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+    .label-tag {
+      font-size: 11px;
+      padding: 4px 10px;
+      border-radius: 12px;
+      background: var(--bg-tertiary);
+      color: var(--text);
+      border: 1px solid var(--border);
+    }
+    .description-content {
+      line-height: 1.7;
+      color: var(--text);
+    }
+    .description-content p { margin-bottom: 12px; }
+    .description-content code {
+      background: var(--bg-tertiary);
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-family: 'SF Mono', Monaco, monospace;
+      font-size: 13px;
+    }
+    .criteria-list { list-style: none; }
+    .criteria-item {
+      padding: 12px 16px;
+      background: var(--bg-tertiary);
+      border-radius: 8px;
+      margin-bottom: 8px;
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+    }
+    .criteria-item::before {
+      content: '☐';
+      color: var(--muted);
+    }
+    .history-list { list-style: none; }
+    .history-item {
+      padding: 12px 0;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      font-size: 13px;
+    }
+    .history-item:last-child { border-bottom: none; }
+    .history-action {
+      font-weight: 600;
+      text-transform: capitalize;
+    }
+    .history-from, .history-to {
+      padding: 2px 8px;
+      background: var(--bg-tertiary);
+      border-radius: 4px;
+      font-size: 11px;
+    }
+    .history-date { color: var(--muted); margin-left: auto; font-size: 12px; }
+    .btn-prompt {
+      background: none;
+      border: none;
+      cursor: pointer;
+      font-size: 14px;
+      padding: 2px 6px;
+      opacity: 0.6;
+      transition: opacity 0.2s;
+    }
+    .btn-prompt:hover { opacity: 1; }
+    .prompt-modal {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.7);
+      z-index: 1000;
+      align-items: center;
+      justify-content: center;
+    }
+    .prompt-modal.visible { display: flex; }
+    .prompt-modal-content {
+      background: var(--bg-primary);
+      border-radius: 12px;
+      max-width: 900px;
+      max-height: 80vh;
+      width: 90%;
+      display: flex;
+      flex-direction: column;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+    }
+    .prompt-modal-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--border);
+    }
+    .prompt-modal-header h3 { margin: 0; }
+    .prompt-modal-close {
+      background: none;
+      border: none;
+      font-size: 24px;
+      cursor: pointer;
+      color: var(--muted);
+    }
+    .prompt-modal-close:hover { color: var(--text); }
+    .prompt-modal-body {
+      padding: 20px;
+      overflow-y: auto;
+      flex: 1;
+    }
+    .prompt-modal-body pre {
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+      font-size: 13px;
+      line-height: 1.5;
+      margin: 0;
+      background: var(--bg-secondary);
+      padding: 16px;
+      border-radius: 8px;
+    }
+    .actions-bar {
+      display: flex;
+      gap: 12px;
+      padding: 16px 0;
+      border-top: 1px solid var(--border);
+      margin-top: 8px;
+    }
+    .btn {
+      padding: 12px 20px;
+      border-radius: 8px;
+      font-weight: 500;
+      font-size: 14px;
+      cursor: pointer;
+      border: none;
+      text-align: center;
+      text-decoration: none;
+    }
+    .btn-primary { background: var(--accent); color: white; }
+    .btn-primary:hover { opacity: 0.9; }
+    .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
+    .btn-secondary { background: var(--bg-tertiary); color: var(--text); border: 1px solid var(--border); }
+    .btn-secondary:hover { border-color: var(--accent); }
+    .btn-danger { background: rgba(248, 113, 113, 0.15); color: var(--red); border: 1px solid transparent; }
+    .btn-danger:hover { border-color: var(--red); }
+    .comments-list {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      margin-bottom: 16px;
+    }
+    .comment {
+      padding: 16px;
+      background: var(--bg-tertiary);
+      border-radius: 8px;
+      border-left: 3px solid var(--border);
+      transition: all 0.2s ease;
+    }
+    .comment:hover {
+      border-left-color: var(--blue);
+    }
+    .comment-meta {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 8px;
+      cursor: pointer;
+      user-select: none;
+    }
+    .comment-meta::before {
+      content: '▶';
+      font-size: 10px;
+      color: var(--muted);
+      transition: transform 0.2s ease;
+    }
+    .comment.expanded .comment-meta::before {
+      transform: rotate(90deg);
+    }
+    .comment-source {
+      font-size: 10px;
+      padding: 3px 8px;
+      border-radius: 4px;
+      text-transform: uppercase;
+      font-weight: 600;
+      letter-spacing: 0.5px;
+    }
+    .comment-source.user { background: #3b82f6; color: white; }
+    .comment-source.claude { background: #8b5cf6; color: white; }
+    .comment-column {
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--blue);
+      padding: 3px 8px;
+      background: rgba(77,171,247,0.15);
+      border-radius: 4px;
+    }
+    .comment-date {
+      font-size: 11px;
+      color: var(--muted);
+    }
+    .comment-text {
+      font-size: 14px;
+      line-height: 1.6;
+      color: var(--text);
+      max-height: 0;
+      overflow: hidden;
+      transition: max-height 0.3s ease, margin-top 0.3s ease, padding-top 0.3s ease;
+      margin-top: 0;
+      padding-top: 0;
+    }
+    .comment.expanded .comment-text {
+      max-height: 500px;
+      margin-top: 12px;
+      padding-top: 12px;
+      border-top: 1px solid var(--border);
+    }
+    .comment-text code {
+      background: var(--bg);
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-family: 'SF Mono', Monaco, monospace;
+      font-size: 12px;
+    }
+    .add-comment {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    .add-comment textarea {
+      width: 100%;
+      min-height: 80px;
+      padding: 12px;
+      background: var(--bg-tertiary);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      color: var(--text);
+      font-family: inherit;
+      font-size: 14px;
+      resize: vertical;
+    }
+    .add-comment textarea:focus {
+      outline: none;
+      border-color: var(--accent);
+    }
+    .btn-comment {
+      align-self: flex-end;
+      padding: 8px 16px;
+      background: var(--accent);
+      color: white;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 13px;
+      font-weight: 500;
+    }
+    .btn-comment:hover { opacity: 0.9; }
+    .btn-comment:disabled { opacity: 0.5; cursor: not-allowed; }
+    .no-comments {
+      text-align: center;
+      color: var(--muted);
+      padding: 24px;
+      font-size: 14px;
+    }
+    .notification {
+      position: fixed;
+      bottom: 24px;
+      right: 24px;
+      padding: 12px 20px;
+      background: var(--green);
+      color: #000;
+      border-radius: 8px;
+      font-weight: 500;
+      transform: translateY(100px);
+      opacity: 0;
+      transition: all 0.3s ease;
+      z-index: 1000;
+    }
+    .notification.show { transform: translateY(0); opacity: 1; }
+    .notification.error { background: var(--red); color: white; }
+
+    /* Claude Terminal */
+    .claude-section .section-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .claude-status {
+      font-size: 11px;
+      padding: 3px 10px;
+      border-radius: 12px;
+      background: var(--bg-tertiary);
+      color: var(--muted);
+    }
+    .claude-status.processing {
+      color: var(--yellow);
+      animation: pulse 1s infinite;
+    }
+    .claude-status.success { color: var(--green); }
+    .claude-status.error { color: var(--red); }
+    .claude-log {
+      background: #0d1117;
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 16px;
+      max-height: 400px;
+      overflow-y: auto;
+      font-family: 'SF Mono', Monaco, 'Consolas', monospace;
+      font-size: 12px;
+      line-height: 1.6;
+      white-space: pre-wrap;
+      word-break: break-word;
+      color: var(--text);
+      margin: 0;
+      margin-top: 12px;
+    }
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+  </style>
+</head>
+<body>
+  <header class="header">
+    <a href="/" class="back-btn">← Dashboard</a>
+    <div class="ticket-header-info">
+      <span class="ticket-key">${escapeHtml(ticketKey)}</span>
+      <input type="text" class="ticket-title-input" id="ticket-title" value="${escapeHtml(ticket.title)}" />
+    </div>
+    <div class="lang-selector" id="lang-selector">
+      <button class="lang-btn" data-lang="en">EN</button>
+      <button class="lang-btn" data-lang="fr">FR</button>
+    </div>
+  </header>
+
+  <main class="main-content">
+    <div class="ticket-details">
+      <!-- Meta info -->
+      <div class="section">
+        <div class="section-title" data-i18n="ticketView.meta">Meta</div>
+        <div class="ticket-meta">
+          <span class="meta-badge priority-${ticket.priority}">${ticket.priority}</span>
+          <span class="meta-badge column-badge">${escapeHtml(currentColumn?.name || ticket.column_slug)}</span>
+          <span class="meta-badge semver-badge">${ticket.semver}</span>
+        </div>
+      </div>
+
+      <!-- Labels -->
+      ${ticket.labels && ticket.labels.length > 0 ? `
+      <div class="section">
+        <div class="section-title" data-i18n="ticketView.labels">Labels</div>
+        <div class="labels-list">
+          ${ticket.labels.map(label => `<span class="label-tag">${escapeHtml(label)}</span>`).join('')}
+        </div>
+      </div>
+      ` : ''}
+
+      <!-- Description -->
+      <div class="section">
+        <div class="section-title">
+          <span data-i18n="ticketView.description">Description</span>
+          <button class="btn-edit-toggle" id="btn-edit-description" onclick="toggleDescriptionEdit()">✏️</button>
+        </div>
+        <div class="description-view" id="description-view"></div>
+        <textarea class="description-edit" id="description-edit" style="display:none" placeholder="Description (Markdown)">${escapeHtml(ticket.description || '')}</textarea>
+      </div>
+
+      <!-- Acceptance Criteria -->
+      ${ticket.acceptance_criteria && ticket.acceptance_criteria.length > 0 ? `
+      <div class="section">
+        <div class="section-title" data-i18n="ticketView.criteria">Acceptance Criteria</div>
+        <ul class="criteria-list">
+          ${ticket.acceptance_criteria.map(c => `<li class="criteria-item">${escapeHtml(c)}</li>`).join('')}
+        </ul>
+      </div>
+      ` : ''}
+
+      <!-- History -->
+      ${ticket.history && ticket.history.length > 0 ? `
+      <div class="section">
+        <div class="section-title" data-i18n="ticketView.history">History</div>
+        <ul class="history-list">
+          ${ticket.history.map(h => {
+        const date = new Date(h.at);
+        const dateStr = date.toLocaleDateString('en-US', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' });
+        const showPromptBtn = h.to && h.action !== 'created' ? `<button class="btn-prompt" onclick="showPrompt('${escapeHtml(h.to)}')" title="View prompt">📜</button>` : '';
+        const showLogBtn = h.to && h.action !== 'created' ? `<button class="btn-prompt" onclick="showLog('${escapeHtml(h.to)}')" title="View terminal log">🖥️</button>` : '';
+        return `<li class="history-item">
+              <span class="history-action">${h.action}</span>
+              ${h.from ? `<span class="history-from">${escapeHtml(h.from)}</span> →` : ''}
+              <span class="history-to">${escapeHtml(h.to)}</span>
+              ${showPromptBtn}
+              ${showLogBtn}
+              <span class="history-date">${dateStr}</span>
+            </li>`;
+    }).join('')}
+        </ul>
+      </div>
+      ` : ''}
+
+      <!-- Actions bar -->
+      <div class="actions-bar">
+        <button class="btn btn-primary" id="btn-save" onclick="saveTicket()" data-i18n="ticketView.save">Save</button>
+        <button class="btn btn-secondary" onclick="advanceTicket()" data-i18n="ticketView.moveNext">Move to next column</button>
+        <button class="btn btn-danger" onclick="archiveTicket()" data-i18n="ticketView.archive">Archive</button>
+      </div>
+    </div>
+
+    <!-- Bottom section: Comments & Claude Terminal -->
+    <div class="ticket-bottom">
+      <!-- Comments -->
+      <div class="section comments-section">
+        <div class="section-title"><span data-i18n="ticketView.comments">Comments</span> (<span id="comments-count">${ticket.comments?.length || 0}</span>)</div>
+        <div class="comments-list" id="comments-list"></div>
+        <div class="add-comment">
+          <textarea id="new-comment" placeholder="Add a comment..." data-i18n-placeholder="ticketView.addComment"></textarea>
+          <button class="btn-comment" onclick="addComment()" data-i18n="btn.add">Add</button>
+        </div>
+      </div>
+
+      <!-- Claude Terminal -->
+      <div class="section claude-section" id="claude-section">
+        <div class="section-title">
+          <span data-i18n="ticketView.claudeTerminal">Claude Terminal</span>
+          <span class="claude-status" id="claude-status" data-i18n="status.waiting">Waiting</span>
+        </div>
+        <pre class="claude-log" id="claude-log"></pre>
+      </div>
+    </div>
+  </main>
+
+  <div class="notification" id="notification"></div>
+
+  <!-- Prompt Modal -->
+  <div class="prompt-modal" id="prompt-modal" onclick="closePromptModal(event)">
+    <div class="prompt-modal-content" onclick="event.stopPropagation()">
+      <div class="prompt-modal-header">
+        <h3 id="prompt-modal-title">Prompt</h3>
+        <button class="prompt-modal-close" onclick="closePromptModal()">&times;</button>
+      </div>
+      <div class="prompt-modal-body">
+        <pre id="prompt-modal-content"></pre>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    const TICKET_KEY = '${ticketKey}';
+    const TICKET = ${ticketData};
+    const COLUMNS = ${columnsData};
+    const STORAGE_KEY = 'autocode-lang';
+
+    let currentLang = localStorage.getItem(STORAGE_KEY) || 'fr';
+    let currentComments = TICKET.comments || [];
+
+    const translations = {
+      en: {
+        'ticketView.meta': 'Meta',
+        'ticketView.labels': 'Labels',
+        'ticketView.description': 'Description',
+        'ticketView.criteria': 'Acceptance Criteria',
+        'ticketView.history': 'History',
+        'ticketView.actions': 'Actions',
+        'ticketView.save': 'Save',
+        'ticketView.moveNext': 'Move to next column',
+        'ticketView.archive': 'Archive',
+        'ticketView.confirmMove': 'Move this ticket to the next column?',
+        'ticketView.confirmArchive': 'Archive this ticket?',
+        'ticketView.comments': 'Comments',
+        'ticketView.addComment': 'Add a comment...',
+        'ticketView.noComments': 'No comments yet',
+        'ticketView.claudeTerminal': 'Claude Terminal',
+        'ticketView.noDescription': 'No description',
+        'ticketView.noLog': 'No log yet. Waiting for Claude processing...',
+        'ticketView.loadingPrompt': 'Loading prompt...',
+        'ticketView.promptError': 'Error',
+        'btn.add': 'Add',
+        'btn.sending': 'Sending...',
+        'btn.saving': 'Saving...',
+        'status.waiting': 'Waiting',
+        'status.processing': 'Processing...',
+        'status.completed': 'Completed',
+        'status.failed': 'Failed',
+        'notify.commentAdded': 'Comment added',
+        'notify.ticketAdvanced': 'Ticket advanced',
+        'notify.ticketArchived': 'Ticket archived',
+        'notify.ticketSaved': 'Ticket saved',
+        'notify.error': 'Error'
+      },
+      fr: {
+        'ticketView.meta': 'Méta',
+        'ticketView.labels': 'Labels',
+        'ticketView.description': 'Description',
+        'ticketView.criteria': 'Critères d\\'acceptation',
+        'ticketView.history': 'Historique',
+        'ticketView.actions': 'Actions',
+        'ticketView.save': 'Sauvegarder',
+        'ticketView.moveNext': 'Déplacer vers la colonne suivante',
+        'ticketView.archive': 'Archiver',
+        'ticketView.confirmMove': 'Déplacer ce ticket vers la colonne suivante ?',
+        'ticketView.confirmArchive': 'Archiver ce ticket ?',
+        'ticketView.comments': 'Commentaires',
+        'ticketView.addComment': 'Ajouter un commentaire...',
+        'ticketView.noComments': 'Aucun commentaire',
+        'ticketView.claudeTerminal': 'Terminal Claude',
+        'ticketView.noDescription': 'Aucune description',
+        'ticketView.noLog': 'Aucun log. En attente du traitement Claude...',
+        'ticketView.loadingPrompt': 'Chargement du prompt...',
+        'ticketView.promptError': 'Erreur',
+        'btn.add': 'Ajouter',
+        'btn.sending': 'Envoi...',
+        'btn.saving': 'Sauvegarde...',
+        'status.waiting': 'En attente',
+        'status.processing': 'En cours...',
+        'status.completed': 'Terminé',
+        'status.failed': 'Échec',
+        'notify.commentAdded': 'Commentaire ajouté',
+        'notify.ticketAdvanced': 'Ticket avancé',
+        'notify.ticketArchived': 'Ticket archivé',
+        'notify.ticketSaved': 'Ticket sauvegardé',
+        'notify.error': 'Erreur'
+      }
+    };
+
+    function t(key) {
+      return translations[currentLang]?.[key] || translations['en'][key] || key;
+    }
+
+    function escapeHtml(text) {
+      if (!text) return '';
+      const div = document.createElement('div');
+      div.textContent = text;
+      return div.innerHTML;
+    }
+
+    function renderMarkdown(text) {
+      if (!text) return '';
+      let html = escapeHtml(text);
+      html = html.replace(/^### (.+)$/gm, '<h4>$1</h4>');
+      html = html.replace(/^## (.+)$/gm, '<h3>$1</h3>');
+      html = html.replace(/^# (.+)$/gm, '<h2>$1</h2>');
+      html = html.replace(/\\*\\*(.+?)\\*\\*/g, '<strong>$1</strong>');
+      html = html.replace(/\\*(.+?)\\*/g, '<em>$1</em>');
+      html = html.replace(/\`([^\`]+)\`/g, '<code>$1</code>');
+      html = html.replace(/\\[([^\\]]+)\\]\\(([^)]+)\\)/g, '<a href="$2" target="_blank">$1</a>');
+      html = html.replace(/^- (.+)$/gm, '<li>$1</li>');
+      html = html.replace(/(<li>.*<\\/li>\\n?)+/g, '<ul>$&</ul>');
+      html = html.replace(/\\n/g, '<br>');
+      return html;
+    }
+
+    function updateLangUI() {
+      document.querySelectorAll('.lang-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.lang === currentLang);
+      });
+      document.querySelectorAll('[data-i18n]').forEach(el => {
+        el.textContent = t(el.dataset.i18n);
+      });
+      document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
+        el.placeholder = t(el.dataset.i18nPlaceholder);
+      });
+    }
+
+    function renderComments() {
+      const list = document.getElementById('comments-list');
+      const count = document.getElementById('comments-count');
+      count.textContent = currentComments.length;
+
+      if (currentComments.length === 0) {
+        list.innerHTML = '<div class="no-comments">' + t('ticketView.noComments') + '</div>';
+        return;
+      }
+
+      const sorted = [...currentComments].sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
+      list.innerHTML = sorted.map((comment, index) => {
+        const date = new Date(comment.created_at);
+        const dateStr = date.toLocaleDateString('en-US', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' });
+        const source = comment.source || 'user';
+        const sourceBadge = source === 'claude'
+          ? '<span class="comment-source claude">Claude</span>'
+          : '<span class="comment-source user">User</span>';
+        return '<div class="comment" id="comment-' + index + '">' +
+          '<div class="comment-meta" onclick="toggleComment(' + index + ')">' + sourceBadge + '<span class="comment-column">' + (comment.column || 'N/A') + '</span>' +
+          '<span class="comment-date">' + dateStr + '</span></div>' +
+          '<div class="comment-text">' + renderMarkdown(comment.text) + '</div></div>';
+      }).join('');
+    }
+
+    function toggleComment(index) {
+      const comments = document.querySelectorAll('.comment');
+      comments.forEach((comment, i) => {
+        if (i === index) {
+          comment.classList.toggle('expanded');
+        } else {
+          comment.classList.remove('expanded');
+        }
+      });
+    }
+
+    async function addComment() {
+      const textarea = document.getElementById('new-comment');
+      const text = textarea.value.trim();
+      if (!text) return;
+
+      const btn = document.querySelector('.btn-comment');
+      btn.disabled = true;
+      btn.textContent = t('btn.sending');
+
+      try {
+        const res = await fetch('/api/tickets/' + TICKET_KEY + '/comments', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ text, source: 'user' })
+        });
+        const result = await res.json();
+        textarea.value = '';
+        if (result.success && result.data && result.data.comments) {
+          currentComments = result.data.comments;
+          renderComments();
+        }
+        showNotification(t('notify.commentAdded'));
+      } catch (e) {
+        showNotification(t('notify.error') + ': ' + e.message, true);
+      } finally {
+        btn.disabled = false;
+        btn.textContent = t('btn.add');
+      }
+    }
+
+    let isEditingDescription = false;
+
+    function renderDescription() {
+      const view = document.getElementById('description-view');
+      const edit = document.getElementById('description-edit');
+      const description = edit.value || '';
+      if (description) {
+        view.innerHTML = renderMarkdown(description);
+      } else {
+        view.innerHTML = '<span style="color: var(--muted)">' + t('ticketView.noDescription') + '</span>';
+      }
+    }
+
+    function toggleDescriptionEdit() {
+      isEditingDescription = !isEditingDescription;
+      const view = document.getElementById('description-view');
+      const edit = document.getElementById('description-edit');
+      const btn = document.getElementById('btn-edit-description');
+
+      if (isEditingDescription) {
+        view.style.display = 'none';
+        edit.style.display = 'block';
+        btn.classList.add('active');
+        btn.textContent = '✓';
+        edit.focus();
+      } else {
+        view.style.display = 'block';
+        edit.style.display = 'none';
+        btn.classList.remove('active');
+        btn.textContent = '✏️';
+        renderDescription();
+      }
+    }
+
+    async function saveTicket() {
+      const btn = document.getElementById('btn-save');
+      btn.disabled = true;
+      btn.textContent = t('btn.saving');
+
+      try {
+        const res = await fetch('/api/tickets/' + TICKET_KEY, {
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            title: document.getElementById('ticket-title').value,
+            description: document.getElementById('description-edit').value
+          })
+        });
+        const result = await res.json();
+        if (result.success) {
+          showNotification(t('notify.ticketSaved'));
+          if (isEditingDescription) {
+            toggleDescriptionEdit();
+          }
+        } else {
+          showNotification(t('notify.error') + ': ' + result.error, true);
+        }
+      } catch (e) {
+        showNotification(t('notify.error') + ': ' + e.message, true);
+      } finally {
+        btn.disabled = false;
+        btn.textContent = t('ticketView.save');
+      }
+    }
+
+    async function advanceTicket() {
+      if (!confirm(t('ticketView.confirmMove'))) return;
+      try {
+        const res = await fetch('/api/tickets/' + TICKET_KEY + '/next', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ lang: currentLang })
+        });
+        const result = await res.json();
+        if (result.success) {
+          showNotification(t('notify.ticketAdvanced'));
+          setTimeout(() => location.reload(), 1000);
+        } else {
+          showNotification(t('notify.error') + ': ' + result.error, true);
+        }
+      } catch (e) {
+        showNotification(t('notify.error') + ': ' + e.message, true);
+      }
+    }
+
+    async function archiveTicket() {
+      if (!confirm(t('ticketView.confirmArchive'))) return;
+      try {
+        const res = await fetch('/api/tickets/' + TICKET_KEY + '/archive', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ lang: currentLang })
+        });
+        const result = await res.json();
+        if (result.success) {
+          showNotification(t('notify.ticketArchived'));
+          setTimeout(() => location.href = '/', 1000);
+        } else {
+          showNotification(t('notify.error') + ': ' + result.error, true);
+        }
+      } catch (e) {
+        showNotification(t('notify.error') + ': ' + e.message, true);
+      }
+    }
+
+    function showNotification(msg, isError) {
+      const notification = document.getElementById('notification');
+      notification.textContent = msg;
+      notification.className = 'notification show' + (isError ? ' error' : '');
+      setTimeout(() => notification.className = 'notification', 3000);
+    }
+
+    // Language switcher
+    document.querySelectorAll('.lang-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const newLang = btn.dataset.lang;
+        if (newLang !== currentLang) {
+          currentLang = newLang;
+          localStorage.setItem(STORAGE_KEY, newLang);
+          updateLangUI();
+          renderComments();
+        }
+      });
+    });
+
+    // ========================================
+    // WEBSOCKET & CLAUDE LOG
+    // ========================================
+    let ws;
+    let logPollingInterval = null;
+
+    function connectWebSocket() {
+      const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+      ws = new WebSocket(protocol + '//' + location.host + '/ws');
+
+      ws.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          switch (data.type) {
+            case 'ticket_updated':
+              if (data.key === TICKET_KEY) {
+                location.reload();
+              }
+              break;
+            case 'claude_start':
+              if (data.ticket === TICKET_KEY) {
+                onClaudeStart();
+              }
+              break;
+            case 'claude_stream':
+              if (data.ticket === TICKET_KEY) {
+                fetchLog();
+              }
+              break;
+            case 'claude_end':
+              if (data.ticket === TICKET_KEY) {
+                onClaudeEnd(data.success, data.duration);
+              }
+              break;
+          }
+        } catch (e) {
+          console.error('WebSocket message error:', e);
+        }
+      };
+
+      ws.onclose = () => {
+        setTimeout(connectWebSocket, 3000);
+      };
+    }
+
+    function startLogPolling() {
+      stopLogPolling();
+      logPollingInterval = setInterval(fetchLog, 1000);
+      fetchLog();
+    }
+
+    function stopLogPolling() {
+      if (logPollingInterval) {
+        clearInterval(logPollingInterval);
+        logPollingInterval = null;
+      }
+    }
+
+    async function fetchLog() {
+      try {
+        const res = await fetch('/api/tickets/' + TICKET_KEY + '/log');
+        const json = await res.json();
+        const log = document.getElementById('claude-log');
+
+        if (json.success && json.data && (json.data.exists || json.data.content)) {
+          log.textContent = json.data.content || '';
+          log.scrollTop = log.scrollHeight;
+        } else {
+          log.textContent = t('ticketView.noLog');
+        }
+      } catch (e) {
+        console.error('Log fetch error:', e);
+      }
+    }
+
+    function onClaudeStart() {
+      const status = document.getElementById('claude-status');
+      status.className = 'claude-status processing';
+      status.textContent = t('status.processing');
+      startLogPolling();
+    }
+
+    function onClaudeEnd(success, duration) {
+      stopLogPolling();
+      fetchLog();
+      const status = document.getElementById('claude-status');
+      if (success) {
+        status.className = 'claude-status success';
+        status.textContent = t('status.completed') + ' (' + (duration / 1000).toFixed(1) + 's)';
+      } else {
+        status.className = 'claude-status error';
+        status.textContent = t('status.failed');
+      }
+    }
+
+    // Prompt Modal
+    async function showPrompt(columnSlug) {
+      const modal = document.getElementById('prompt-modal');
+      const title = document.getElementById('prompt-modal-title');
+      const content = document.getElementById('prompt-modal-content');
+
+      title.textContent = t('ticketView.loadingPrompt');
+      content.textContent = '';
+      modal.classList.add('visible');
+
+      try {
+        const res = await fetch('/api/tickets/' + TICKET_KEY + '/prompt/' + columnSlug);
+        const json = await res.json();
+        if (json.success) {
+          title.textContent = 'Prompt → ' + json.data.column;
+          content.textContent = json.data.prompt;
+        } else {
+          title.textContent = t('ticketView.promptError');
+          content.textContent = json.error || 'Error loading prompt';
+        }
+      } catch (e) {
+        title.textContent = t('ticketView.promptError');
+        content.textContent = e.message;
+      }
+    }
+
+    function closePromptModal(event) {
+      if (event && event.target !== event.currentTarget) return;
+      document.getElementById('prompt-modal').classList.remove('visible');
+    }
+
+    // Log Modal (reuses prompt modal)
+    async function showLog(columnSlug) {
+      const modal = document.getElementById('prompt-modal');
+      const title = document.getElementById('prompt-modal-title');
+      const content = document.getElementById('prompt-modal-content');
+
+      title.textContent = t('ticketView.loadingLog') || 'Loading log...';
+      content.textContent = '';
+      modal.classList.add('visible');
+
+      try {
+        const res = await fetch('/api/tickets/' + TICKET_KEY + '/log/' + columnSlug);
+        const json = await res.json();
+        if (json.success) {
+          title.textContent = 'Terminal → ' + columnSlug;
+          content.textContent = json.data.content || t('ticketView.noLog') || 'No log available';
+        } else {
+          title.textContent = t('ticketView.logError') || 'Log Error';
+          content.textContent = json.error || 'Error loading log';
+        }
+      } catch (e) {
+        title.textContent = t('ticketView.logError') || 'Log Error';
+        content.textContent = e.message;
+      }
+    }
+
+    // Init
+    updateLangUI();
+    renderDescription();
+    renderComments();
+    connectWebSocket();
+    fetchLog();
+  </script>
+</body>
+</html>`;
+}
 //# sourceMappingURL=dashboard.js.map