@autocode-cli/autocode 0.0.44 → 0.1.5

package/dist/server/dashboard/scripts/index.js

@@ -0,0 +1,1325 @@
+/**
+ * Dashboard client-side JavaScript
+ *
+ * This file contains all interactive functionality for the dashboard.
+ * The code is kept in a single function to maintain shared state and scope.
+ */
+/**
+ * Get all JavaScript for dashboard interactivity
+ */
+export function getScript() {
+    return `
+    // ========================================
+    // i18n TRANSLATIONS
+    // ========================================
+    const translations = {
+      en: {
+        // Filter
+        'filter.allPriorities': 'All priorities',
+        'filter.search': 'Search...',
+        // Buttons
+        'btn.newTicket': '+ New ticket',
+        'btn.createTicket': 'Create ticket',
+        'btn.update': 'Update',
+        'btn.cancel': 'Cancel',
+        'btn.archive': 'Archive',
+        'btn.next': 'Next',
+        'btn.add': 'Add',
+        'btn.edit': 'Edit',
+        'btn.save': 'Save',
+        'btn.reload': 'Reload',
+        // Modal
+        'modal.newTicket': 'New ticket',
+        'modal.editTicket': 'Edit',
+        'modal.title': 'Title *',
+        'modal.titlePlaceholder': 'E.g.: Fix the login bug',
+        'modal.description': 'Description',
+        'modal.descriptionPlaceholder': 'Describe the context and details...',
+        'modal.priority': 'Priority',
+        'modal.releaseType': 'Release type',
+        'modal.labels': 'Labels',
+        '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...',
+        'modal.claudeTerminal': 'Claude Terminal',
+        // Priority
+        'priority.p0': 'P0 - Critical',
+        'priority.p1': 'P1 - High',
+        'priority.p2': 'P2 - Normal',
+        'priority.p3': 'P3 - Low',
+        // Semver
+        'semver.patch': 'Patch (x.x.X) - Bug fix',
+        'semver.minor': 'Minor (x.X.0) - Feature',
+        'semver.major': 'Major (X.0.0) - Breaking',
+        'semver.none': 'No deployment',
+        // Status
+        'status.waiting': 'Waiting',
+        'status.processing': 'Running...',
+        'status.completed': 'Completed',
+        'status.failed': 'Failed',
+        'status.connected': 'Connected',
+        // Stats
+        'stats.total': 'Total',
+        // Board
+        'board.empty': 'Empty',
+        // Action modal
+        'action.instructions': 'Instructions',
+        'action.noInstructions': 'No instructions available',
+        'action.noFile': 'No ACTION file. Click "Edit" to create it.',
+        'action.modifiedOn': 'Modified on',
+        // Notifications
+        'notify.titleRequired': 'Title required',
+        'notify.titleMandatory': 'Title is mandatory',
+        'notify.ticketUpdated': 'Ticket updated',
+        'notify.ticketCreated': 'Ticket created',
+        'notify.ticketAdvanced': 'Ticket advanced',
+        'notify.ticketArchived': 'Ticket archived',
+        'notify.ticketMoved': 'moved',
+        'notify.moveTo': 'To',
+        'notify.commentAdded': 'Comment added',
+        'notify.actionUpdated': 'updated',
+        'notify.error': 'Error',
+        'notify.unableToSave': 'Unable to save',
+        'notify.loadingError': 'Loading error',
+        'notify.claudeStarted': 'Claude started',
+        'notify.claudeFinished': 'Claude finished',
+        'notify.claudeFailed': 'Claude failed',
+        'notify.processingSuccess': 'Processing successful',
+        'notify.checkLogs': 'Check logs',
+        // Confirm
+        'confirm.archive': 'Archive',
+        // Button states
+        'btn.updating': 'Updating...',
+        'btn.creating': 'Creating...',
+        'btn.moving': 'Moving...',
+        'btn.archiving': 'Archiving...',
+        'btn.sending': 'Sending...',
+        'btn.saving': 'Saving...',
+      },
+      fr: {
+        // Filter
+        'filter.allPriorities': 'Toutes priorités',
+        'filter.search': 'Rechercher...',
+        // Buttons
+        'btn.newTicket': '+ Nouveau ticket',
+        'btn.createTicket': 'Créer le ticket',
+        'btn.update': 'Mettre à jour',
+        'btn.cancel': 'Annuler',
+        'btn.archive': 'Archiver',
+        'btn.next': 'Suivant',
+        'btn.add': 'Ajouter',
+        'btn.edit': 'Modifier',
+        'btn.save': 'Enregistrer',
+        'btn.reload': 'Recharger',
+        // Modal
+        'modal.newTicket': 'Nouveau ticket',
+        'modal.editTicket': 'Modifier',
+        'modal.title': 'Titre *',
+        'modal.titlePlaceholder': 'Ex: Corriger le bug de connexion',
+        'modal.description': 'Description',
+        'modal.descriptionPlaceholder': 'Décrivez le contexte et les détails...',
+        'modal.priority': 'Priorité',
+        'modal.releaseType': 'Type de release',
+        'modal.labels': 'Labels',
+        '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...',
+        'modal.claudeTerminal': 'Terminal Claude',
+        // Priority
+        'priority.p0': 'P0 - Critique',
+        'priority.p1': 'P1 - Haute',
+        'priority.p2': 'P2 - Normale',
+        'priority.p3': 'P3 - Basse',
+        // Semver
+        'semver.patch': 'Patch (x.x.X) - Bug fix',
+        'semver.minor': 'Minor (x.X.0) - Fonctionnalité',
+        'semver.major': 'Major (X.0.0) - Breaking',
+        'semver.none': 'Aucun déploiement',
+        // Status
+        'status.waiting': 'En attente',
+        'status.processing': 'En cours...',
+        'status.completed': 'Terminé',
+        'status.failed': 'Échoué',
+        'status.connected': 'Connecté',
+        // Stats
+        'stats.total': 'Total',
+        // Board
+        'board.empty': 'Vide',
+        // Action modal
+        'action.instructions': 'Instructions',
+        'action.noInstructions': 'Aucune instruction disponible',
+        'action.noFile': 'Aucun fichier ACTION. Cliquez sur "Modifier" pour le créer.',
+        'action.modifiedOn': 'Modifié le',
+        // Notifications
+        'notify.titleRequired': 'Titre requis',
+        'notify.titleMandatory': 'Le titre est obligatoire',
+        'notify.ticketUpdated': 'Ticket mis à jour',
+        'notify.ticketCreated': 'Ticket créé',
+        'notify.ticketAdvanced': 'Ticket avancé',
+        'notify.ticketArchived': 'Ticket archivé',
+        'notify.ticketMoved': 'déplacé',
+        'notify.moveTo': 'Vers',
+        'notify.commentAdded': 'Commentaire ajouté',
+        'notify.actionUpdated': 'mis à jour',
+        'notify.error': 'Erreur',
+        'notify.unableToSave': 'Impossible de sauvegarder',
+        'notify.loadingError': 'Erreur de chargement',
+        'notify.claudeStarted': 'Claude démarré',
+        'notify.claudeFinished': 'Claude terminé',
+        'notify.claudeFailed': 'Claude échoué',
+        'notify.processingSuccess': 'Traitement réussi',
+        'notify.checkLogs': 'Voir les logs',
+        // Confirm
+        'confirm.archive': 'Archiver',
+        // Button states
+        'btn.updating': 'Mise à jour...',
+        'btn.creating': 'Création...',
+        'btn.moving': 'Déplacement...',
+        'btn.archiving': 'Archivage...',
+        'btn.sending': 'Envoi...',
+        'btn.saving': 'Sauvegarde...',
+      }
+    };
+
+    let currentLang = localStorage.getItem('autocode-lang') || 'fr';
+
+    function t(key) {
+      return translations[currentLang][key] || translations['en'][key] || key;
+    }
+
+    function switchLanguage(lang) {
+      currentLang = lang;
+      currentActionLang = lang;
+      localStorage.setItem('autocode-lang', lang);
+      document.documentElement.lang = lang;
+
+      // Update lang switcher buttons
+      document.querySelectorAll('.lang-switcher .lang-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.lang === lang);
+      });
+
+      // Update all elements with data-i18n
+      document.querySelectorAll('[data-i18n]').forEach(el => {
+        const key = el.getAttribute('data-i18n');
+        if (translations[lang] && translations[lang][key]) {
+          el.textContent = translations[lang][key];
+        }
+      });
+
+      // Update placeholders
+      document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
+        const key = el.getAttribute('data-i18n-placeholder');
+        if (translations[lang] && translations[lang][key]) {
+          el.placeholder = translations[lang][key];
+        }
+      });
+
+      // Update select options
+      document.querySelectorAll('select option[data-i18n]').forEach(el => {
+        const key = el.getAttribute('data-i18n');
+        if (translations[lang] && translations[lang][key]) {
+          el.textContent = translations[lang][key];
+        }
+      });
+
+      // Re-render board to update dynamic content
+      render();
+    }
+
+    // ========================================
+    // STATE
+    // ========================================
+    let filterPriority = '';
+    let filterSearch = '';
+    let selectedLabels = [];
+    let criteriaCount = 0;
+    let editingKey = null;
+    let currentComments = [];
+    let contextMenuTicket = null;
+    let draggedTicket = null;
+    let draggedFromColumn = null;
+    let currentActionSlug = null;
+    let currentActionLang = localStorage.getItem('autocode-lang') || 'fr';
+    let originalActionContent = '';
+    let claudeProcessingTickets = new Set();
+
+    // Initialize language switcher on page load
+    (function initLangSwitcher() {
+      document.querySelectorAll('.lang-switcher .lang-btn').forEach(btn => {
+        btn.addEventListener('click', () => switchLanguage(btn.dataset.lang));
+      });
+      switchLanguage(currentLang);
+    })();
+
+    // ========================================
+    // NOTIFICATIONS
+    // ========================================
+    function showNotification(type, title, message, duration = 5000) {
+      const container = document.getElementById('notifications');
+      const id = 'notif-' + Date.now();
+      const icons = { info: '\\u{1F535}', success: '\\u2705', warning: '\\u26A0\\uFE0F', error: '\\u274C', claude: '\\u{1F916}' };
+
+      const notif = document.createElement('div');
+      notif.className = 'notification ' + (type === 'claude' ? 'info' : type);
+      notif.id = id;
+      notif.innerHTML = '<span class="notification-icon">' + (icons[type] || icons.info) + '</span>' +
+        '<div class="notification-content"><div class="notification-title">' + title + '</div>' +
+        (message ? '<div class="notification-message">' + message + '</div>' : '') + '</div>' +
+        '<button class="notification-close" onclick="closeNotification(\\'' + id + '\\')">&times;</button>';
+
+      container.appendChild(notif);
+      setTimeout(() => closeNotification(id), duration);
+    }
+
+    function closeNotification(id) {
+      const notif = document.getElementById(id);
+      if (notif) notif.remove();
+    }
+
+    // ========================================
+    // RENDER
+    // ========================================
+    function render() {
+      const board = document.getElementById('board');
+      board.innerHTML = '';
+      let stats = { total: 0, byPriority: { P0: 0, P1: 0, P2: 0, P3: 0 } };
+
+      COLUMNS.forEach(col => {
+        let tickets = TICKETS.filter(t => t.column_slug === col.slug);
+        if (filterPriority) tickets = tickets.filter(t => t.priority === filterPriority);
+        if (filterSearch) {
+          const s = filterSearch.toLowerCase();
+          tickets = tickets.filter(t => t.title.toLowerCase().includes(s) || t.key.toLowerCase().includes(s));
+        }
+        tickets.sort((a, b) => {
+          const p = { P0: 0, P1: 1, P2: 2, P3: 3 };
+          return p[a.priority] - p[b.priority];
+        });
+
+        stats.total += tickets.length;
+        tickets.forEach(t => stats.byPriority[t.priority] = (stats.byPriority[t.priority] || 0) + 1);
+
+        const div = document.createElement('div');
+        div.className = 'column';
+        div.ondragover = onDragOver;
+        div.ondragenter = onDragEnter;
+        div.ondragleave = onDragLeave;
+        div.ondrop = (e) => onDrop(e, col.slug, col.name);
+
+        div.innerHTML = '<div class="column-header">' +
+          '<span class="column-title">' + col.name + '</span>' +
+          '<div class="column-header-actions">' +
+          '<a class="btn-action" title="ACTION.md" href="/column/' + col.slug + '/edit">\\u{1F4D8}</a>' +
+          '<span class="column-count">' + tickets.length + '</span>' +
+          '</div></div>' +
+          '<div class="column-body">' +
+          (tickets.length ? tickets.map(tk => {
+            const isProcessing = claudeProcessingTickets.has(tk.key);
+            return '<div class="ticket' + (isProcessing ? ' claude-processing' : '') + '" draggable="true" ' +
+            'onclick="onTicketClick(\\'' + tk.key + '\\')" ' +
+            'oncontextmenu="showContextMenu(event,\\'' + tk.key + '\\')" ' +
+            'ondragstart="onDragStart(event,\\'' + tk.key + '\\',\\'' + col.slug + '\\')" ' +
+            'ondragend="onDragEnd(event)">' +
+            '<div class="ticket-key">' + tk.key + '</div>' +
+            '<div class="ticket-title">' + escapeHtml(tk.title) + '</div>' +
+            '<div class="ticket-meta"><span class="priority ' + tk.priority + '">' + tk.priority + '</span></div>' +
+            (isProcessing ? '<div class="ticket-claude-indicator"><span class="claude-dot"></span>\\u{1F916} ' + t('status.processing') + '</div>' : '') +
+            '</div>';
+          }).join('') : '<div class="empty">' + t('board.empty') + '</div>') +
+          '</div>';
+
+        board.appendChild(div);
+      });
+
+      document.getElementById('stats').innerHTML =
+        '<span class="stat connected">\\u{1F7E2} ' + t('status.connected') + '</span>' +
+        '<span class="stat">' + t('stats.total') + ': ' + stats.total + '</span>' +
+        '<span class="stat P0">P0: ' + (stats.byPriority.P0 || 0) + '</span>' +
+        '<span class="stat P1">P1: ' + (stats.byPriority.P1 || 0) + '</span>' +
+        '<span class="stat P2">P2: ' + (stats.byPriority.P2 || 0) + '</span>';
+    }
+
+    function escapeHtml(text) {
+      const div = document.createElement('div');
+      div.textContent = text;
+      return div.innerHTML;
+    }
+
+    // ========================================
+    // FILTERS
+    // ========================================
+    document.getElementById('filter-priority').onchange = e => { filterPriority = e.target.value; render(); };
+    document.getElementById('filter-search').oninput = e => { filterSearch = e.target.value.toLowerCase(); render(); };
+
+    // ========================================
+    // MODAL TICKET
+    // ========================================
+    function openModal(key = null) {
+      editingKey = key;
+      document.getElementById('modal-overlay').classList.add('active');
+      document.body.style.overflow = 'hidden';
+
+      const modalTitle = document.getElementById('modal-title');
+      const saveBtn = document.getElementById('btn-save');
+      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;
+        saveBtn.textContent = t('btn.update');
+        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');
+        saveBtn.textContent = t('btn.createTicket');
+        nextBtn.style.display = 'none';
+        archiveBtn.style.display = 'none';
+        commentsSection.style.display = 'none';
+        attachmentsSection.style.display = 'none';
+        resetForm();
+        resetComments();
+        resetAttachments();
+      }
+    }
+
+    function closeModal() {
+      document.getElementById('modal-overlay').classList.remove('active');
+      document.body.style.overflow = '';
+      editingKey = null;
+      resetForm();
+      resetClaudeLog();
+    }
+
+    function resetForm() {
+      document.getElementById('ticket-title').value = '';
+      document.getElementById('ticket-description').value = '';
+      document.getElementById('ticket-priority').value = 'P2';
+      document.getElementById('ticket-semver').value = 'patch';
+      document.getElementById('ticket-labels').value = '';
+      selectedLabels = [];
+      criteriaCount = 0;
+      document.getElementById('selected-labels').innerHTML = '';
+      document.getElementById('criteria-list').innerHTML = '';
+    }
+
+    async function loadTicketForEdit(key) {
+      try {
+        const res = await fetch('/api/tickets/' + key);
+        if (!res.ok) throw new Error('Ticket not found');
+        const json = await res.json();
+        if (!json.success || !json.data) throw new Error('Ticket not found');
+        const ticket = json.data;
+
+        document.getElementById('ticket-title').value = ticket.title || '';
+        document.getElementById('ticket-description').value = ticket.description || '';
+        document.getElementById('ticket-priority').value = ticket.priority || 'P2';
+        document.getElementById('ticket-semver').value = ticket.semver || 'patch';
+
+        selectedLabels = Array.isArray(ticket.labels) ? [...ticket.labels] : [];
+        renderLabels();
+
+        criteriaCount = 0;
+        document.getElementById('criteria-list').innerHTML = '';
+        if (Array.isArray(ticket.acceptance_criteria)) {
+          ticket.acceptance_criteria.forEach(c => addCriteria(c));
+        }
+
+        renderComments(ticket.comments || []);
+        loadAttachments(key);
+        fetchLog(key);
+      } catch (e) {
+        console.error('Error:', e);
+        showNotification('error', 'Error', e.message);
+        closeModal();
+      }
+    }
+
+    async function saveTicket() {
+      const title = document.getElementById('ticket-title').value.trim();
+      const description = document.getElementById('ticket-description').value.trim();
+      const priority = document.getElementById('ticket-priority').value;
+      const semver = document.getElementById('ticket-semver').value;
+      const criteria = getCriteria();
+
+      if (!title) {
+        showNotification('warning', t('notify.titleRequired'), t('notify.titleMandatory'));
+        return;
+      }
+
+      const btn = document.getElementById('btn-save');
+      btn.disabled = true;
+
+      try {
+        if (editingKey) {
+          btn.textContent = t('btn.updating');
+          await fetch('/api/tickets/' + editingKey, {
+            method: 'PATCH',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ title, description, priority, semver, labels: selectedLabels, acceptance_criteria: criteria })
+          });
+          showNotification('success', t('notify.ticketUpdated'), editingKey);
+        } else {
+          btn.textContent = t('btn.creating');
+          const res = await fetch('/api/tickets', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ title, priority, labels: selectedLabels, description, semver, acceptance_criteria: criteria })
+          });
+          const data = await res.json();
+          showNotification('success', t('notify.ticketCreated'), data.key || '');
+        }
+        closeModal();
+        loadTicketsFromAPI();
+      } catch (e) {
+        showNotification('error', t('notify.error'), e.message);
+        btn.disabled = false;
+        btn.textContent = editingKey ? t('btn.update') : t('btn.createTicket');
+      }
+    }
+
+    async function advanceTicket() {
+      if (!editingKey) return;
+      const btn = document.getElementById('btn-next');
+      btn.disabled = true;
+      btn.textContent = t('btn.moving');
+      try {
+        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();
+      } catch (e) {
+        showNotification('error', t('notify.error'), e.message);
+        btn.disabled = false;
+        btn.textContent = t('btn.next');
+      }
+    }
+
+    async function archiveTicket() {
+      if (!editingKey) return;
+      if (!confirm(t('confirm.archive') + ' ' + editingKey + '?')) return;
+
+      const btn = document.getElementById('btn-archive');
+      btn.disabled = true;
+      btn.textContent = t('btn.archiving');
+      try {
+        const lastColumn = COLUMNS[COLUMNS.length - 1];
+        await fetch('/api/tickets/' + editingKey + '/move', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ column: lastColumn.name, force: true, lang: currentLang })
+        });
+        showNotification('info', t('notify.ticketArchived'), editingKey);
+        closeModal();
+        loadTicketsFromAPI();
+      } catch (e) {
+        showNotification('error', t('notify.error'), e.message);
+        btn.disabled = false;
+        btn.textContent = t('btn.archive');
+      }
+    }
+
+    // ========================================
+    // LABELS
+    // ========================================
+    function addLabel(select) {
+      const value = select.value;
+      if (value && !selectedLabels.includes(value)) {
+        selectedLabels.push(value);
+        renderLabels();
+      }
+      select.value = '';
+    }
+
+    function removeLabel(label) {
+      selectedLabels = selectedLabels.filter(l => l !== label);
+      renderLabels();
+    }
+
+    function renderLabels() {
+      const container = document.getElementById('selected-labels');
+      container.innerHTML = selectedLabels.map(label =>
+        '<span class="label-tag">' + label + '<span class="remove-label" onclick="removeLabel(\\'' + label + '\\')">&times;</span></span>'
+      ).join('');
+    }
+
+    // ========================================
+    // CRITERIA
+    // ========================================
+    function addCriteria(value = '') {
+      criteriaCount++;
+      const id = criteriaCount;
+      const container = document.getElementById('criteria-list');
+      const div = document.createElement('div');
+      div.className = 'criteria-item';
+      div.id = 'criteria-' + id;
+      div.innerHTML = '<input type="text" placeholder="Ex: L\\'utilisateur peut..." value="' + escapeHtml(value) + '">' +
+        '<button type="button" class="btn-remove" onclick="removeCriteria(' + id + ')">&times;</button>';
+      container.appendChild(div);
+    }
+
+    function removeCriteria(id) {
+      const el = document.getElementById('criteria-' + id);
+      if (el) el.remove();
+    }
+
+    function getCriteria() {
+      const items = document.querySelectorAll('.criteria-item input');
+      return Array.from(items).map(i => i.value.trim()).filter(Boolean);
+    }
+
+    // ========================================
+    // COMMENTS
+    // ========================================
+    function resetComments() {
+      currentComments = [];
+      document.getElementById('comments-list').innerHTML = '<div class="no-comments">' + t('modal.noComments') + '</div>';
+      document.getElementById('comments-count').textContent = '0';
+      document.getElementById('new-comment').value = '';
+    }
+
+    function renderComments(comments) {
+      currentComments = comments || [];
+      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('modal.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');
+        }
+      });
+    }
+
+    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;
+    }
+
+    async function addComment() {
+      if (!editingKey) return;
+      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/' + editingKey + '/comments', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ text })
+        });
+        const result = await res.json();
+        textarea.value = '';
+        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);
+      } finally {
+        btn.disabled = false;
+        btn.textContent = t('btn.add');
+      }
+    }
+
+    // ========================================
+    // 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: '\\u{1F4C4}', doc: '\\u{1F4DD}', docx: '\\u{1F4DD}', txt: '\\u{1F4DD}',
+        png: '\\u{1F5BC}', jpg: '\\u{1F5BC}', jpeg: '\\u{1F5BC}', gif: '\\u{1F5BC}', svg: '\\u{1F5BC}', webp: '\\u{1F5BC}',
+        mp4: '\\u{1F3AC}', mov: '\\u{1F3AC}', avi: '\\u{1F3AC}',
+        mp3: '\\u{1F3B5}', wav: '\\u{1F3B5}',
+        zip: '\\u{1F4E6}', rar: '\\u{1F4E6}', tar: '\\u{1F4E6}', gz: '\\u{1F4E6}',
+        js: '\\u{1F4DC}', ts: '\\u{1F4DC}', py: '\\u{1F4DC}', json: '\\u{1F4DC}', md: '\\u{1F4DC}',
+      };
+      return icons[ext] || '\\u{1F4CE}';
+    }
+
+    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);
+      }
+
+      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
+    // ========================================
+    function onDragStart(e, key, columnSlug) {
+      draggedTicket = key;
+      draggedFromColumn = columnSlug;
+      e.target.classList.add('dragging');
+      e.dataTransfer.effectAllowed = 'move';
+      e.dataTransfer.setData('text/plain', key);
+    }
+
+    function onDragEnd(e) {
+      e.target.classList.remove('dragging');
+      document.querySelectorAll('.column').forEach(c => c.classList.remove('drag-over'));
+    }
+
+    function onDragOver(e) {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'move';
+    }
+
+    function onDragEnter(e) {
+      e.preventDefault();
+      const column = e.target.closest('.column');
+      if (column) column.classList.add('drag-over');
+    }
+
+    function onDragLeave(e) {
+      const column = e.target.closest('.column');
+      if (column && !column.contains(e.relatedTarget)) {
+        column.classList.remove('drag-over');
+      }
+    }
+
+    async function onDrop(e, targetColumnSlug, targetColumnName) {
+      e.preventDefault();
+      document.querySelectorAll('.column').forEach(c => c.classList.remove('drag-over'));
+
+      if (!draggedTicket) return;
+      if (draggedFromColumn === targetColumnSlug) {
+        draggedTicket = null;
+        draggedFromColumn = null;
+        return;
+      }
+
+      const key = draggedTicket;
+      draggedTicket = null;
+      draggedFromColumn = null;
+
+      try {
+        await fetch('/api/tickets/' + key + '/move', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ column: targetColumnName, force: true, lang: currentLang })
+        });
+        showNotification('info', key + ' ' + t('notify.ticketMoved'), t('notify.moveTo') + ' "' + targetColumnName + '"');
+        loadTicketsFromAPI();
+      } catch (err) {
+        showNotification('error', t('notify.error'), err.message);
+      }
+    }
+
+    // ========================================
+    // CONTEXT MENU
+    // ========================================
+    function showContextMenu(e, key) {
+      e.preventDefault();
+      contextMenuTicket = key;
+      const menu = document.getElementById('context-menu');
+      menu.style.left = e.clientX + 'px';
+      menu.style.top = e.clientY + 'px';
+      menu.classList.add('active');
+    }
+
+    function hideContextMenu() {
+      document.getElementById('context-menu').classList.remove('active');
+      contextMenuTicket = null;
+    }
+
+    function editFromContext() {
+      if (contextMenuTicket) openModal(contextMenuTicket);
+      hideContextMenu();
+    }
+
+    async function archiveFromContext() {
+      if (!contextMenuTicket) return;
+      const key = contextMenuTicket;
+      hideContextMenu();
+
+      if (confirm(t('confirm.archive') + ' ' + key + '?')) {
+        try {
+          const lastColumn = COLUMNS[COLUMNS.length - 1];
+          await fetch('/api/tickets/' + key + '/move', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ column: lastColumn.name, force: true, lang: currentLang })
+          });
+          showNotification('info', t('notify.ticketArchived'), key);
+          loadTicketsFromAPI();
+        } catch (err) {
+          showNotification('error', t('notify.error'), err.message);
+        }
+      }
+    }
+
+    document.addEventListener('click', hideContextMenu);
+
+    // ========================================
+    // ACTION.md MODAL
+    // ========================================
+    function openActionModal(slug) {
+      currentActionSlug = slug;
+      const col = COLUMNS.find(c => c.slug === slug);
+      document.getElementById('action-modal-title').textContent = col?.name || slug;
+      document.getElementById('action-modal').classList.add('active');
+      document.body.style.overflow = 'hidden';
+      reloadActionContent();
+    }
+
+    function closeActionModal() {
+      document.getElementById('action-modal').classList.remove('active');
+      document.body.style.overflow = '';
+      currentActionSlug = null;
+      originalActionContent = '';
+      setActionEditMode(false);
+      document.getElementById('action-content').value = '';
+      document.getElementById('action-empty').style.display = 'none';
+      document.getElementById('action-meta').textContent = '';
+    }
+
+    function setActionEditMode(isEdit) {
+      const textarea = document.getElementById('action-content');
+      const saveBtn = document.getElementById('action-save-btn');
+      const editBtn = document.getElementById('action-edit-btn');
+      textarea.readOnly = !isEdit;
+      saveBtn.disabled = !isEdit;
+      editBtn.style.display = isEdit ? 'none' : 'inline-block';
+    }
+
+    async function reloadActionContent() {
+      if (!currentActionSlug) return;
+      setActionEditMode(false);
+      const textarea = document.getElementById('action-content');
+      const empty = document.getElementById('action-empty');
+      const meta = document.getElementById('action-meta');
+
+      empty.style.display = 'none';
+      textarea.style.display = 'block';
+      textarea.value = '...';
+
+      try {
+        const res = await fetch('/api/columns/' + currentActionSlug + '/actions?lang=' + currentActionLang);
+        const data = res.ok ? await res.json() : {};
+
+        if (!res.ok || !data.success) {
+          if (res.status === 404) {
+            textarea.value = '';
+            textarea.style.display = 'none';
+            empty.textContent = t('action.noFile');
+            empty.style.display = 'block';
+            meta.textContent = '';
+            return;
+          }
+          throw new Error(data.error || t('notify.loadingError'));
+        }
+
+        const actionData = data.data || {};
+        originalActionContent = actionData.content || '';
+        textarea.value = originalActionContent;
+        const updated = actionData.updated_at ? new Date(actionData.updated_at).toLocaleString(currentLang === 'fr' ? 'fr-FR' : 'en-US') : '';
+        meta.textContent = (actionData.path || '') + (updated ? ' - ' + t('action.modifiedOn') + ' ' + updated : '');
+      } catch (e) {
+        empty.textContent = t('notify.error') + ': ' + e.message;
+        empty.style.display = 'block';
+        textarea.style.display = 'none';
+        meta.textContent = '';
+      }
+    }
+
+    function enterActionEdit() {
+      if (!currentActionSlug) return;
+      const textarea = document.getElementById('action-content');
+      const empty = document.getElementById('action-empty');
+      if (empty.style.display === 'block' && !textarea.value) {
+        textarea.value = '# ' + document.getElementById('action-modal-title').textContent + '\\n\\n';
+        empty.style.display = 'none';
+        textarea.style.display = 'block';
+      }
+      setActionEditMode(true);
+      textarea.focus();
+    }
+
+    async function saveActionContent() {
+      if (!currentActionSlug) return;
+      const btn = document.getElementById('action-save-btn');
+      const textarea = document.getElementById('action-content');
+      btn.disabled = true;
+      btn.textContent = t('btn.saving');
+
+      try {
+        const res = await fetch('/api/columns/' + currentActionSlug + '/actions?lang=' + currentActionLang, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ content: textarea.value })
+        });
+        const data = await res.json();
+        if (!res.ok || !data.success) throw new Error(data.error || t('notify.error'));
+
+        originalActionContent = textarea.value;
+        setActionEditMode(false);
+        showNotification('success', 'ACTION.' + currentActionLang + '.md ' + t('notify.actionUpdated'), currentActionSlug);
+      } catch (e) {
+        showNotification('error', t('notify.unableToSave'), e.message);
+      } finally {
+        btn.disabled = false;
+        btn.textContent = t('btn.save');
+      }
+    }
+
+    // ========================================
+    // WEBSOCKET
+    // ========================================
+    let ws;
+
+    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 'refresh':
+            case 'ticket_updated':
+            case 'ticket_created':
+            case 'ticket_moved':
+              loadTicketsFromAPI();
+              break;
+            case 'claude_start':
+              onClaudeStart(data.ticket);
+              break;
+            case 'claude_stream':
+              onClaudeStream(data.ticket);
+              break;
+            case 'claude_end':
+              onClaudeEnd(data.ticket, data.success, data.duration);
+              loadTicketsFromAPI();
+              break;
+            case 'claude_complete':
+              if (data.success) {
+                showNotification('claude', t('notify.claudeFinished') + ' ' + data.ticket, t('notify.processingSuccess'));
+              } else {
+                showNotification('error', t('notify.claudeFailed') + ' ' + data.ticket, t('notify.checkLogs'));
+              }
+              break;
+          }
+        } catch {}
+      };
+
+      ws.onclose = () => setTimeout(connectWebSocket, 2000);
+      ws.onerror = () => ws.close();
+    }
+
+    // ========================================
+    // CLAUDE LOG (in modal)
+    // ========================================
+    let logPollingInterval = null;
+    let claudeProcessingTicket = null;
+
+    function startLogPolling(key) {
+      stopLogPolling();
+      logPollingInterval = setInterval(() => fetchLog(key), 1000);
+      fetchLog(key);
+    }
+
+    function stopLogPolling() {
+      if (logPollingInterval) {
+        clearInterval(logPollingInterval);
+        logPollingInterval = null;
+      }
+    }
+
+    function formatCodeBlock(content, filename) {
+      const lines = content.split(/\\\\n|\\n/);
+      let lang = 'plaintext';
+      if (filename) {
+        const ext = filename.split('.').pop().toLowerCase();
+        const langMap = {
+          'js': 'javascript', 'ts': 'typescript', 'vue': 'html', 'jsx': 'javascript',
+          'tsx': 'typescript', 'py': 'python', 'rb': 'ruby', 'java': 'java',
+          'go': 'go', 'rs': 'rust', 'cpp': 'cpp', 'c': 'c', 'h': 'c',
+          'css': 'css', 'scss': 'scss', 'html': 'html', 'json': 'json',
+          'md': 'markdown', 'sh': 'bash', 'yml': 'yaml', 'yaml': 'yaml'
+        };
+        lang = langMap[ext] || 'plaintext';
+      }
+      let codeLines = [];
+      for (const line of lines) {
+        const match = line.match(/^\\s*\\d+[→|](.*)$/);
+        if (match) {
+          codeLines.push(match[1]);
+        } else if (line.trim()) {
+          codeLines.push(line);
+        }
+      }
+      const codeContent = codeLines.join('\\n');
+      const lineCount = codeLines.length;
+      const preview = filename || (lineCount + ' lignes');
+
+      let html = '<details class="log-code-block">';
+      html += '<summary class="log-code-header"><span class="code-lang">' + lang + '</span> ' + escapeHtml(preview) + '</summary>';
+      html += '<pre><code class="language-' + lang + '">' + escapeHtml(codeContent) + '</code></pre>';
+      html += '</details>';
+      return html;
+    }
+
+    function formatLogContent(rawContent) {
+      if (!rawContent) return '';
+      let cleanedContent = rawContent.replace(/<system-reminder>[\\s\\S]*?<\\/system-reminder>/gi, '');
+      const lines = cleanedContent.split('\\n');
+      const entries = [];
+      let textBuffer = [];
+
+      function flushTextBuffer() {
+        if (textBuffer.length > 0) {
+          const text = textBuffer.join('\\n');
+          entries.push('<div class="log-message-card"><div class="log-message-header assistant-header">Assistant</div><div class="log-message-body">' + renderMarkdown(text) + '</div></div>');
+          textBuffer = [];
+        }
+      }
+
+      for (const line of lines) {
+        if (!line.trim()) continue;
+
+        const timestampMatch = line.match(/^\\[(\\d{4}-\\d{2}-\\d{2}T[^\\]]+)\\]\\s*(.*)$/);
+        if (timestampMatch) {
+          flushTextBuffer();
+          const date = new Date(timestampMatch[1]);
+          const timeStr = date.toLocaleTimeString();
+          entries.push('<div class="log-entry timestamp">' + timeStr + ' - ' + escapeHtml(timestampMatch[2]) + '</div>');
+          continue;
+        }
+
+        if (line.startsWith('[RAW] ')) {
+          const raw = line.slice(6);
+          if (!raw.startsWith('{')) continue;
+
+          const codeMatch = raw.match(/"content":"(\\s*\\d+[→|][^"]*)/);
+          if (codeMatch) {
+            const contentMatch = raw.match(/"content":"([^"]+)/);
+            if (contentMatch) {
+              const decoded = contentMatch[1].replace(/\\\\n/g, '\\n').replace(/\\\\"/g, '"');
+              entries.push('<div class="log-message-card"><div class="log-message-header result-header">Tool Result</div><div class="log-message-body">' + formatCodeBlock(decoded) + '</div></div>');
+              continue;
+            }
+          }
+
+          const textMatch = raw.match(/"type":"text","text":"([^"]+)"/);
+          if (textMatch) {
+            const decoded = textMatch[1].replace(/\\\\n/g, '\\n').replace(/\\\\"/g, '"');
+            entries.push('<div class="log-message-card"><div class="log-message-header assistant-header">Assistant</div><div class="log-message-body">' + renderMarkdown(decoded) + '</div></div>');
+            continue;
+          }
+
+          const toolMatch = raw.match(/"type":"tool_use"[^}]*"name":"([^"]+)"/);
+          if (toolMatch) {
+            entries.push('<div class="log-entry tool-call"><span class="log-tool-badge">' + escapeHtml(toolMatch[1]) + '</span></div>');
+            continue;
+          }
+          continue;
+        }
+
+        if (line.startsWith('[SYSTEM]')) {
+          entries.push('<div class="log-entry system"><span class="log-label">System</span><div class="log-content">' + escapeHtml(line.slice(9)) + '</div></div>');
+          continue;
+        }
+        if (line.startsWith('[ASSISTANT]')) {
+          entries.push('<div class="log-message-card"><div class="log-message-header assistant-header">Assistant</div><div class="log-message-body">' + renderMarkdown(line.slice(12)) + '</div></div>');
+          continue;
+        }
+        if (line.startsWith('[TOOL]')) {
+          entries.push('<div class="log-entry tool-call"><span class="log-tool-badge">' + escapeHtml(line.slice(7)) + '</span></div>');
+          continue;
+        }
+        if (line.startsWith('[RESULT]')) {
+          const content = line.slice(9);
+          if (/^\\s*\\d+[→|]/.test(content)) {
+            entries.push('<div class="log-message-card"><div class="log-message-header result-header">Result</div><div class="log-message-body">' + formatCodeBlock(content) + '</div></div>');
+          } else {
+            entries.push('<div class="log-message-card"><div class="log-message-header result-header">Result</div><div class="log-message-body">' + escapeHtml(content.slice(0, 1000)) + (content.length > 1000 ? '...' : '') + '</div></div>');
+          }
+          continue;
+        }
+        if (line.startsWith('[ERROR]')) {
+          entries.push('<div class="log-entry error"><span class="log-label">Error</span><div class="log-content">' + escapeHtml(line.slice(8)) + '</div></div>');
+          continue;
+        }
+
+        entries.push('<div class="log-entry system">' + escapeHtml(line) + '</div>');
+      }
+
+      return entries.join('');
+    }
+
+    function resetClaudeLog() {
+      stopLogPolling();
+      document.getElementById('claude-log-section').style.display = 'none';
+      document.getElementById('claude-log').innerHTML = '';
+      document.getElementById('claude-log-status').className = 'claude-log-status';
+      document.getElementById('claude-log-status').textContent = t('status.waiting');
+    }
+
+    async function fetchLog(key) {
+      try {
+        const res = await fetch('/api/tickets/' + key + '/log');
+        const json = await res.json();
+        if (json.success && json.data) {
+          const section = document.getElementById('claude-log-section');
+          const log = document.getElementById('claude-log');
+
+          if (json.data.exists || json.data.content) {
+            section.style.display = 'block';
+            log.innerHTML = formatLogContent(json.data.content || '');
+            log.scrollTop = log.scrollHeight;
+          }
+        }
+      } catch (e) {
+        console.error('Log fetch error:', e);
+      }
+    }
+
+    function onClaudeStart(ticket) {
+      claudeProcessingTicket = ticket;
+      claudeProcessingTickets.add(ticket);
+      render();
+
+      const status = document.getElementById('claude-log-status');
+      if (status) {
+        status.className = 'claude-log-status processing';
+        status.textContent = '\\u{1F916} ' + t('status.processing');
+      }
+      if (editingKey === ticket) {
+        document.getElementById('claude-log-section').style.display = 'block';
+        startLogPolling(ticket);
+      }
+      showNotification('claude', t('notify.claudeStarted'), ticket);
+    }
+
+    function onClaudeStream(ticket) {
+      if (editingKey === ticket) {
+        fetchLog(ticket);
+      }
+    }
+
+    function onClaudeEnd(ticket, success, duration) {
+      claudeProcessingTicket = null;
+      claudeProcessingTickets.delete(ticket);
+      render();
+
+      const status = document.getElementById('claude-log-status');
+      if (status && editingKey === ticket) {
+        if (success) {
+          status.className = 'claude-log-status success';
+          status.textContent = '\\u2705 ' + t('status.completed') + ' (' + (duration / 1000).toFixed(1) + 's)';
+        } else {
+          status.className = 'claude-log-status error';
+          status.textContent = '\\u274C ' + t('status.failed');
+        }
+        fetchLog(ticket);
+        stopLogPolling();
+      }
+      if (success) {
+        showNotification('success', t('notify.claudeFinished'), ticket);
+      } else {
+        showNotification('error', t('notify.claudeFailed'), ticket);
+      }
+    }
+
+    // ========================================
+    // API
+    // ========================================
+    async function loadTicketsFromAPI() {
+      try {
+        const res = await fetch('/api/tickets');
+        const json = await res.json();
+        if (json.success && json.data) {
+          TICKETS.length = 0;
+          (json.data.tickets || []).forEach(tk => TICKETS.push(tk));
+          COLUMNS.length = 0;
+          (json.data.columns || []).forEach(c => COLUMNS.push(c));
+          render();
+        }
+      } catch (e) {
+        console.error(t('notify.loadingError') + ':', e);
+      }
+    }
+
+    async function loadProcessingStatus() {
+      try {
+        const res = await fetch('/api/status');
+        const json = await res.json();
+        if (json.success && json.data && json.data.processingTickets) {
+          claudeProcessingTickets = new Set(json.data.processingTickets);
+          render();
+        }
+      } catch (e) {
+        console.error('Failed to load processing status:', e);
+      }
+    }
+
+    function onTicketClick(key) {
+      window.location.href = '/ticket/' + key;
+    }
+
+    // ========================================
+    // KEYBOARD
+    // ========================================
+    document.addEventListener('keydown', e => {
+      if (e.key === 'Escape') {
+        const actionModal = document.getElementById('action-modal');
+        if (actionModal?.classList.contains('active')) {
+          closeActionModal();
+          return;
+        }
+        closeModal();
+      }
+    });
+
+    // ========================================
+    // INIT
+    // ========================================
+    render();
+    loadProcessingStatus();
+    connectWebSocket();
+  `;
+}
+//# sourceMappingURL=index.js.map