@autocode-cli/autocode 0.0.41 → 0.0.43

package/dist/server/dashboard.js

@@ -191,7 +191,7 @@ export function generateDashboard() {
   </div>
 
   <footer>
-    <span>AutoCode v${pkg.version} | <span id="time">${timestamp}</span></span>
+    <span>AutoCode v${pkg.version} | <span id="time">${timestamp}</span> | <code title="autodoc root">${config.root}</code></span>
   </footer>
 
   <script>
@@ -1009,6 +1009,46 @@ function getStyles() {
       color: var(--text);
       margin: 0;
     }
+    /* Formatted log entries */
+    .log-entry { margin-bottom: 8px; padding: 8px 12px; border-radius: 4px; border-left: 3px solid transparent; flex-shrink: 0; }
+    .log-entry.timestamp { color: #8b949e; font-size: 11px; border-left-color: #484f58; background: transparent; padding: 4px 12px; }
+    .log-entry.system { color: #8b949e; border-left-color: #484f58; background: rgba(139,148,158,0.1); }
+    .log-entry.user { color: #58a6ff; border-left-color: #58a6ff; background: rgba(88,166,255,0.1); }
+    .log-entry.assistant { color: #7ee787; border-left-color: #7ee787; background: rgba(126,231,135,0.1); }
+    .log-entry.tool-call { color: #d2a8ff; border-left-color: #d2a8ff; background: rgba(210,168,255,0.1); padding: 12px; }
+    .log-entry.tool-result { color: #ffa657; border-left-color: #ffa657; background: rgba(255,166,87,0.1); }
+    .log-entry.error { color: #f85149; border-left-color: #f85149; background: rgba(248,81,73,0.1); }
+    .log-entry.success { color: #7ee787; border-left-color: #7ee787; background: rgba(126,231,135,0.1); }
+    .log-label { font-weight: 600; font-size: 11px; text-transform: uppercase; margin-bottom: 4px; display: block; opacity: 0.8; }
+    .log-content { white-space: pre-wrap; word-break: break-word; }
+
+    /* Code blocks with line numbers */
+    .log-code-block { background: #161b22; border-radius: 6px; overflow: hidden; margin: 8px 0; border: 1px solid #30363d; }
+    .log-code-header { background: #21262d; padding: 8px 12px; font-size: 12px; color: #8b949e; border-bottom: 1px solid #30363d; display: flex; align-items: center; gap: 8px; }
+    .log-code-header::before { content: ''; display: inline-block; width: 12px; height: 12px; background: #ffa657; border-radius: 50%; }
+    .log-code-content { padding: 12px; overflow-x: auto; font-family: 'Fira Code', 'SF Mono', Monaco, monospace; font-size: 12px; line-height: 1.5; max-height: 400px; overflow-y: auto; }
+    .log-code-line { display: flex; min-height: 20px; }
+    .log-line-number { color: #484f58; text-align: right; padding-right: 16px; user-select: none; min-width: 40px; flex-shrink: 0; }
+    .log-line-content { color: #c9d1d9; white-space: pre; }
+
+    /* Message cards */
+    .log-message-card { background: #161b22; border-radius: 8px; margin: 12px 0; overflow: hidden; border: 1px solid #30363d; flex-shrink: 0; }
+    .log-message-header { padding: 10px 14px; display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13px; }
+    .log-message-header.assistant-header { background: linear-gradient(135deg, #238636 0%, #2ea043 100%); color: white; }
+    .log-message-header.user-header { background: linear-gradient(135deg, #1f6feb 0%, #388bfd 100%); color: white; }
+    .log-message-header.tool-header { background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%); color: white; }
+    .log-message-header.result-header { background: linear-gradient(135deg, #f97316 0%, #fb923c 100%); color: white; }
+    .log-message-body { padding: 14px; border-top: 1px solid #30363d; color: #c9d1d9; white-space: pre-wrap; word-break: break-word; }
+
+    /* Tool badges */
+    .log-tool-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(139,92,246,0.2); color: #a78bfa; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; }
+    .log-tool-input { background: #0d1117; border-radius: 4px; padding: 8px 12px; margin-top: 8px; font-family: 'Fira Code', monospace; font-size: 11px; color: #8b949e; max-height: 150px; overflow: auto; white-space: pre-wrap; }
+
+    /* Collapsible raw JSON */
+    .log-raw-details { margin: 8px 0; }
+    .log-raw-summary { cursor: pointer; color: #8b949e; font-size: 12px; padding: 8px; background: rgba(139,148,158,0.1); border-radius: 4px; }
+    .log-raw-summary:hover { background: rgba(139,148,158,0.2); }
+    .log-raw-json { background: #0d1117; border-radius: 4px; padding: 12px; margin-top: 8px; font-size: 11px; color: #8b949e; max-height: 200px; overflow: auto; white-space: pre-wrap; }
     @keyframes pulse {
       0%, 100% { opacity: 1; }
       50% { opacity: 0.5; }
@@ -2103,10 +2143,144 @@ function getScript() {
       }
     }
 
+    function escapeHtml(str) {
+      if (typeof str !== 'string') return '';
+      return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+    }
+
+    function formatCodeBlock(content, filename) {
+      const lines = content.split(/\\\\n|\\n/);
+      // Détecter le langage depuis le nom de fichier
+      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';
+      }
+      // Extraire le code sans les numéros de ligne pour highlight.js
+      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 '';
+      // Supprimer les balises <system-reminder> et leur contenu
+      let cleanedContent = rawContent.replace(/<system-reminder>[\\s\\S]*?<\\/system-reminder>/gi, '');
+      const lines = cleanedContent.split('\\n');
+      const entries = [];
+
+      for (const line of lines) {
+        if (!line.trim()) continue;
+
+        // Timestamp line
+        const timestampMatch = line.match(/^\\[(\\d{4}-\\d{2}-\\d{2}T[^\\]]+)\\]\\s*(.*)$/);
+        if (timestampMatch) {
+          const date = new Date(timestampMatch[1]);
+          const timeStr = date.toLocaleTimeString();
+          entries.push('<div class="log-entry timestamp">' + timeStr + ' - ' + escapeHtml(timestampMatch[2]) + '</div>');
+          continue;
+        }
+
+        // [RAW] - Parse avec regex (pas JSON.parse car les lignes sont coupées)
+        if (line.startsWith('[RAW] ')) {
+          const raw = line.slice(6);
+
+          // Ignorer les lignes de continuation (ne commencent pas par {)
+          if (!raw.startsWith('{')) {
+            continue;
+          }
+
+          // Extraire code source avec numéros de ligne (tool_result)
+          const codeMatch = raw.match(/"content":"(\\s*\\d+[→|][^"]*)/);
+          if (codeMatch) {
+            // Extraire tout le contenu entre "content":" et la fin
+            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;
+            }
+          }
+
+          // Extraire message assistant texte
+          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">' + escapeHtml(decoded) + '</div></div>');
+            continue;
+          }
+
+          // Extraire tool_use
+          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;
+          }
+
+          // Ignorer les autres RAW (métadonnées, etc.)
+          continue;
+        }
+
+        // Other prefixed messages
+        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">' + escapeHtml(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;
+        }
+
+        // Default
+        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').textContent = '';
+      document.getElementById('claude-log').innerHTML = '';
       document.getElementById('claude-log-status').className = 'claude-log-status';
       document.getElementById('claude-log-status').textContent = t('status.waiting');
     }
@@ -2118,11 +2292,10 @@ function getScript() {
         if (json.success && json.data) {
           const section = document.getElementById('claude-log-section');
           const log = document.getElementById('claude-log');
-          const status = document.getElementById('claude-log-status');
 
           if (json.data.exists || json.data.content) {
             section.style.display = 'block';
-            log.textContent = json.data.content || '';
+            log.innerHTML = formatLogContent(json.data.content || '');
             // Auto-scroll
             log.scrollTop = log.scrollHeight;
           }
@@ -2913,6 +3086,13 @@ export function generateTicketViewPage(ticketKey, lang) {
       padding: 16px;
       border-radius: 8px;
     }
+    .log-container {
+      max-height: 70vh;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
     .actions-bar {
       display: flex;
       gap: 12px;
@@ -3109,6 +3289,46 @@ export function generateTicketViewPage(ticketKey, lang) {
       margin: 0;
       margin-top: 12px;
     }
+    /* Formatted log entries */
+    .log-entry { margin-bottom: 8px; padding: 8px 12px; border-radius: 4px; border-left: 3px solid transparent; flex-shrink: 0; }
+    .log-entry.timestamp { color: #8b949e; font-size: 11px; border-left-color: #484f58; background: transparent; padding: 4px 12px; }
+    .log-entry.system { color: #8b949e; border-left-color: #484f58; background: rgba(139,148,158,0.1); }
+    .log-entry.user { color: #58a6ff; border-left-color: #58a6ff; background: rgba(88,166,255,0.1); }
+    .log-entry.assistant { color: #7ee787; border-left-color: #7ee787; background: rgba(126,231,135,0.1); }
+    .log-entry.tool-call { color: #d2a8ff; border-left-color: #d2a8ff; background: rgba(210,168,255,0.1); padding: 12px; }
+    .log-entry.tool-result { color: #ffa657; border-left-color: #ffa657; background: rgba(255,166,87,0.1); }
+    .log-entry.error { color: #f85149; border-left-color: #f85149; background: rgba(248,81,73,0.1); }
+    .log-entry.success { color: #7ee787; border-left-color: #7ee787; background: rgba(126,231,135,0.1); }
+    .log-label { font-weight: 600; font-size: 11px; text-transform: uppercase; margin-bottom: 4px; display: block; opacity: 0.8; }
+    .log-content { white-space: pre-wrap; word-break: break-word; }
+
+    /* Code blocks with line numbers */
+    .log-code-block { background: #161b22; border-radius: 6px; overflow: hidden; margin: 8px 0; border: 1px solid #30363d; }
+    .log-code-header { background: #21262d; padding: 8px 12px; font-size: 12px; color: #8b949e; border-bottom: 1px solid #30363d; display: flex; align-items: center; gap: 8px; }
+    .log-code-header::before { content: ''; display: inline-block; width: 12px; height: 12px; background: #ffa657; border-radius: 50%; }
+    .log-code-content { padding: 12px; overflow-x: auto; font-family: 'Fira Code', 'SF Mono', Monaco, monospace; font-size: 12px; line-height: 1.5; max-height: 400px; overflow-y: auto; }
+    .log-code-line { display: flex; min-height: 20px; }
+    .log-line-number { color: #484f58; text-align: right; padding-right: 16px; user-select: none; min-width: 40px; flex-shrink: 0; }
+    .log-line-content { color: #c9d1d9; white-space: pre; }
+
+    /* Message cards */
+    .log-message-card { background: #161b22; border-radius: 8px; margin: 12px 0; overflow: hidden; border: 1px solid #30363d; flex-shrink: 0; }
+    .log-message-header { padding: 10px 14px; display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13px; }
+    .log-message-header.assistant-header { background: linear-gradient(135deg, #238636 0%, #2ea043 100%); color: white; }
+    .log-message-header.user-header { background: linear-gradient(135deg, #1f6feb 0%, #388bfd 100%); color: white; }
+    .log-message-header.tool-header { background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%); color: white; }
+    .log-message-header.result-header { background: linear-gradient(135deg, #f97316 0%, #fb923c 100%); color: white; }
+    .log-message-body { padding: 14px; border-top: 1px solid #30363d; color: #c9d1d9; white-space: pre-wrap; word-break: break-word; }
+
+    /* Tool badges */
+    .log-tool-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(139,92,246,0.2); color: #a78bfa; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; }
+    .log-tool-input { background: #0d1117; border-radius: 4px; padding: 8px 12px; margin-top: 8px; font-family: 'Fira Code', monospace; font-size: 11px; color: #8b949e; max-height: 150px; overflow: auto; white-space: pre-wrap; }
+
+    /* Collapsible raw JSON */
+    .log-raw-details { margin: 8px 0; }
+    .log-raw-summary { cursor: pointer; color: #8b949e; font-size: 12px; padding: 8px; background: rgba(139,148,158,0.1); border-radius: 4px; }
+    .log-raw-summary:hover { background: rgba(139,148,158,0.2); }
+    .log-raw-json { background: #0d1117; border-radius: 4px; padding: 12px; margin-top: 8px; font-size: 11px; color: #8b949e; max-height: 200px; overflow: auto; white-space: pre-wrap; }
     @keyframes pulse {
       0%, 100% { opacity: 1; }
       50% { opacity: 0.5; }
@@ -3178,8 +3398,8 @@ export function generateTicketViewPage(ticketKey, lang) {
           ${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>` : '';
+        const showPromptBtn = h.to && h.action !== 'created' ? `<a href="/ticket/${ticketKey}/${escapeHtml(h.to)}/prompt" class="btn-prompt" title="View prompt">📜</a>` : '';
+        const showLogBtn = h.to && h.action !== 'created' ? `<a href="/ticket/${ticketKey}/${escapeHtml(h.to)}/terminal" class="btn-prompt" title="View terminal log">🖥️</a>` : '';
         return `<li class="history-item">
               <span class="history-action">${h.action}</span>
               ${h.from ? `<span class="history-from">${escapeHtml(h.from)}</span> →` : ''}
@@ -3234,7 +3454,7 @@ export function generateTicketViewPage(ticketKey, lang) {
         <button class="prompt-modal-close" onclick="closePromptModal()">&times;</button>
       </div>
       <div class="prompt-modal-body">
-        <pre id="prompt-modal-content"></pre>
+        <div id="prompt-modal-content" class="log-container"></div>
       </div>
     </div>
   </div>
@@ -3592,6 +3812,149 @@ export function generateTicketViewPage(ticketKey, lang) {
       };
     }
 
+    function escapeHtml(str) {
+      if (typeof str !== 'string') return '';
+      return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+    }
+
+    function formatCodeBlock(content, filename) {
+      const lines = content.split(/\\\\n|\\n/);
+      // Détecter le langage depuis le nom de fichier
+      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';
+      }
+      // Extraire le code sans les numéros de ligne pour highlight.js
+      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 '';
+      // Supprimer les balises <system-reminder> et leur contenu
+      let cleanedContent = rawContent.replace(/<system-reminder>[\\s\\S]*?<\\/system-reminder>/gi, '');
+      const lines = cleanedContent.split('\\n');
+      const entries = [];
+
+      for (const line of lines) {
+        if (!line.trim()) continue;
+
+        const timestampMatch = line.match(/^\\[(\\d{4}-\\d{2}-\\d{2}T[^\\]]+)\\]\\s*(.*)$/);
+        if (timestampMatch) {
+          const date = new Date(timestampMatch[1]);
+          const timeStr = date.toLocaleTimeString();
+          entries.push('<div class="log-entry timestamp">' + timeStr + ' - ' + escapeHtml(timestampMatch[2]) + '</div>');
+          continue;
+        }
+
+        // [RAW] - Parse avec regex (pas JSON.parse car les lignes sont coupées)
+        if (line.startsWith('[RAW] ')) {
+          const raw = line.slice(6);
+
+          // Ignorer les lignes de continuation (ne commencent pas par {)
+          if (!raw.startsWith('{')) {
+            continue;
+          }
+
+          // Extraire tool_result content
+          if (raw.includes('"type":"tool_result"')) {
+            const contentStart = raw.indexOf('"content":"');
+            if (contentStart !== -1) {
+              // Extraire le contenu après "content":"
+              let content = raw.slice(contentStart + 11);
+              // Enlever le reste du JSON (approximatif car tronqué)
+              const endQuote = content.lastIndexOf('"');
+              if (endQuote > 0) content = content.slice(0, endQuote);
+              // Décoder les échappements
+              const decoded = content.replace(/\\\\n/g, '\\n').replace(/\\\\"/g, '"').replace(/\\\\t/g, '\\t');
+              // Vérifier si c'est du code avec numéros de ligne
+              if (/^\\s*\\d+[→|]/.test(decoded)) {
+                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>');
+              } else {
+                // Résultat texte simple (liste de fichiers, etc.)
+                const lines = decoded.split('\\n').slice(0, 20); // Limiter à 20 lignes
+                const truncated = decoded.split('\\n').length > 20 ? '<div style="color:#8b949e;font-style:italic">... (truncated)</div>' : '';
+                entries.push('<div class="log-message-card"><div class="log-message-header result-header">Tool Result</div><div class="log-message-body" style="font-family:monospace;font-size:12px;white-space:pre-wrap;max-height:200px;overflow-y:auto">' + escapeHtml(lines.join('\\n')) + truncated + '</div></div>');
+              }
+              continue;
+            }
+          }
+
+          // Extraire message assistant texte
+          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">' + escapeHtml(decoded) + '</div></div>');
+            continue;
+          }
+
+          // Extraire tool_use
+          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;
+          }
+
+          // Ignorer les autres RAW
+          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">' + escapeHtml(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 startLogPolling() {
       stopLogPolling();
       logPollingInterval = setInterval(fetchLog, 1000);
@@ -3612,10 +3975,10 @@ export function generateTicketViewPage(ticketKey, lang) {
         const log = document.getElementById('claude-log');
 
         if (json.success && json.data && (json.data.exists || json.data.content)) {
-          log.textContent = json.data.content || '';
+          log.innerHTML = formatLogContent(json.data.content || '');
           log.scrollTop = log.scrollHeight;
         } else {
-          log.textContent = t('ticketView.noLog');
+          log.innerHTML = '<div class="log-entry system">' + t('ticketView.noLog') + '</div>';
         }
       } catch (e) {
         console.error('Log fetch error:', e);
@@ -3688,7 +4051,11 @@ export function generateTicketViewPage(ticketKey, lang) {
         const json = await res.json();
         if (json.success) {
           title.textContent = 'Terminal → ' + columnSlug;
-          content.textContent = json.data.content || t('ticketView.noLog') || 'No log available';
+          if (json.data.content) {
+            content.innerHTML = formatLogContent(json.data.content);
+          } else {
+            content.textContent = t('ticketView.noLog') || 'No log available';
+          }
         } else {
           title.textContent = t('ticketView.logError') || 'Log Error';
           content.textContent = json.error || 'Error loading log';
@@ -3709,4 +4076,771 @@ export function generateTicketViewPage(ticketKey, lang) {
 </body>
 </html>`;
 }
+/**
+ * Generate the column terminal page HTML
+ */
+export function generateColumnTerminalPage(ticketKey, columnSlug, lang) {
+    const config = getConfig();
+    const ticket = getTicket(config.root, ticketKey);
+    // 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>`;
+    }
+    return `<!DOCTYPE html>
+<html lang="${lang}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Terminal → ${escapeHtml(columnSlug)} | ${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;
+      display: flex;
+      flex-direction: column;
+    }
+    .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;
+      padding: 8px 16px;
+      background: var(--bg-tertiary);
+      border-radius: 6px;
+      transition: all 0.2s;
+    }
+    .back-btn:hover { color: var(--text); background: var(--border); }
+    .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;
+    }
+    .column-slug {
+      font-family: 'SF Mono', Monaco, monospace;
+      font-size: 14px;
+      color: var(--green);
+      background: rgba(74, 222, 128, 0.15);
+      padding: 6px 12px;
+      border-radius: 4px;
+      font-weight: 500;
+    }
+    .page-title {
+      flex: 1;
+      font-size: 18px;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    .main {
+      flex: 1;
+      padding: 24px;
+      display: flex;
+      flex-direction: column;
+    }
+    .terminal-container {
+      flex: 1;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    .terminal-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 16px;
+      background: var(--bg-tertiary);
+      border-bottom: 1px solid var(--border);
+    }
+    .terminal-status {
+      font-size: 12px;
+      padding: 4px 12px;
+      border-radius: 12px;
+      font-weight: 500;
+    }
+    .terminal-status.idle { background: var(--bg-secondary); color: var(--muted); }
+    .terminal-status.processing { background: rgba(251, 146, 60, 0.15); color: var(--orange); }
+    .terminal-status.success { background: rgba(74, 222, 128, 0.15); color: var(--green); }
+    .terminal-status.error { background: rgba(248, 113, 113, 0.15); color: var(--red); }
+    .terminal-log {
+      flex: 1;
+      padding: 16px;
+      overflow-y: auto;
+      font-family: 'SF Mono', Monaco, Consolas, monospace;
+      font-size: 13px;
+      line-height: 1.6;
+    }
+
+    /* Log entry styles */
+    .log-entry {
+      padding: 4px 0;
+      flex-shrink: 0;
+    }
+    .log-entry.timestamp { color: var(--muted); font-size: 11px; }
+    .log-entry.system { color: var(--blue); }
+    .log-entry.error { color: var(--red); }
+    .log-entry.tool-call { margin: 8px 0; }
+    .log-label {
+      display: inline-block;
+      padding: 2px 8px;
+      border-radius: 4px;
+      font-size: 11px;
+      font-weight: 600;
+      margin-right: 8px;
+      text-transform: uppercase;
+    }
+    .log-entry.system .log-label { background: rgba(77, 171, 247, 0.15); color: var(--blue); }
+    .log-entry.error .log-label { background: rgba(248, 113, 113, 0.15); color: var(--red); }
+    .log-tool-badge {
+      display: inline-block;
+      background: rgba(163, 139, 250, 0.15);
+      color: var(--purple);
+      padding: 4px 10px;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 500;
+    }
+    .log-content { display: inline; }
+
+    /* Message cards */
+    .log-message-card {
+      background: var(--bg-tertiary);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      margin: 12px 0;
+      overflow: hidden;
+      flex-shrink: 0;
+    }
+    .log-message-header {
+      padding: 8px 12px;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    .assistant-header { background: rgba(99, 102, 241, 0.15); color: var(--accent); }
+    .result-header { background: rgba(74, 222, 128, 0.15); color: var(--green); }
+    .log-message-body {
+      padding: 12px;
+      line-height: 1.6;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    /* Code blocks - collapsible */
+    .log-code-block {
+      background: #0d1117;
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      overflow: hidden;
+      margin: 8px 0;
+    }
+    .log-code-block summary.log-code-header {
+      background: #161b22;
+      padding: 10px 14px;
+      font-size: 12px;
+      color: var(--muted);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      user-select: none;
+      list-style: none;
+    }
+    .log-code-block summary.log-code-header::-webkit-details-marker { display: none; }
+    .log-code-block summary.log-code-header::before {
+      content: '▶';
+      font-size: 10px;
+      transition: transform 0.2s;
+    }
+    .log-code-block[open] summary.log-code-header::before {
+      transform: rotate(90deg);
+    }
+    .log-code-block .code-lang {
+      background: var(--accent);
+      color: white;
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+    .log-code-block pre {
+      margin: 0;
+      padding: 0;
+      background: transparent;
+    }
+    .log-code-block code {
+      display: block;
+      padding: 14px;
+      overflow-x: auto;
+      font-family: 'Fira Code', 'SF Mono', Monaco, monospace;
+      font-size: 13px;
+      line-height: 1.6;
+      max-height: 500px;
+      overflow-y: auto;
+    }
+
+    .no-log {
+      color: var(--muted);
+      text-align: center;
+      padding: 48px;
+      font-size: 14px;
+    }
+  </style>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
+</head>
+<body>
+  <header class="header">
+    <a href="/ticket/${ticketKey}" class="back-btn">← Retour</a>
+    <span class="ticket-key">${ticketKey}</span>
+    <div class="page-title">
+      <span>Terminal →</span>
+      <span class="column-slug">${escapeHtml(columnSlug)}</span>
+    </div>
+  </header>
+
+  <main class="main">
+    <div class="terminal-container">
+      <div class="terminal-header">
+        <span class="terminal-status idle" id="terminal-status">En attente</span>
+      </div>
+      <div class="terminal-log" id="terminal-log">
+        <div class="no-log">Chargement...</div>
+      </div>
+    </div>
+  </main>
+
+  <script>
+    const TICKET_KEY = '${ticketKey}';
+    const COLUMN_SLUG = '${escapeHtml(columnSlug)}';
+
+    function escapeHtml(str) {
+      if (typeof str !== 'string') return '';
+      return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+    }
+
+    function formatCodeBlock(content, filename) {
+      const lines = content.split(/\\\\n|\\n/);
+      // Détecter le langage depuis le nom de fichier
+      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';
+      }
+      // Extraire le code sans les numéros de ligne pour highlight.js
+      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 '';
+      // Supprimer les balises <system-reminder> et leur contenu
+      let cleanedContent = rawContent.replace(/<system-reminder>[\\s\\S]*?<\\/system-reminder>/gi, '');
+      const lines = cleanedContent.split('\\n');
+      const entries = [];
+
+      for (const line of lines) {
+        if (!line.trim()) continue;
+
+        const timestampMatch = line.match(/^\\[(\\d{4}-\\d{2}-\\d{2}T[^\\]]+)\\]\\s*(.*)$/);
+        if (timestampMatch) {
+          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;
+
+          if (raw.includes('"type":"tool_result"')) {
+            const contentStart = raw.indexOf('"content":"');
+            if (contentStart !== -1) {
+              let content = raw.slice(contentStart + 11);
+              const endQuote = content.lastIndexOf('"');
+              if (endQuote > 0) content = content.slice(0, endQuote);
+              const decoded = content.replace(/\\\\n/g, '\\n').replace(/\\\\"/g, '"').replace(/\\\\t/g, '\\t');
+              if (/^\\s*\\d+[→|]/.test(decoded)) {
+                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>');
+              } else {
+                const lines = decoded.split('\\n').slice(0, 20);
+                const truncated = decoded.split('\\n').length > 20 ? '<div style="color:#8b949e;font-style:italic">... (truncated)</div>' : '';
+                entries.push('<div class="log-message-card"><div class="log-message-header result-header">Tool Result</div><div class="log-message-body" style="font-family:monospace;font-size:12px;white-space:pre-wrap;max-height:200px;overflow-y:auto">' + escapeHtml(lines.join('\\n')) + truncated + '</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">' + escapeHtml(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">' + escapeHtml(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('');
+    }
+
+    async function fetchLog() {
+      try {
+        const res = await fetch('/api/tickets/' + TICKET_KEY + '/log/' + COLUMN_SLUG);
+        const json = await res.json();
+        const log = document.getElementById('terminal-log');
+        const status = document.getElementById('terminal-status');
+
+        if (json.success && json.data && json.data.content) {
+          log.innerHTML = formatLogContent(json.data.content);
+          // Appliquer le syntax highlighting
+          if (window.hljs) {
+            log.querySelectorAll('pre code').forEach((block) => {
+              hljs.highlightElement(block);
+            });
+          }
+          log.scrollTop = log.scrollHeight;
+          status.className = 'terminal-status success';
+          status.textContent = 'Terminé';
+        } else {
+          log.innerHTML = '<div class="no-log">Aucun log disponible pour cette colonne.</div>';
+          status.className = 'terminal-status idle';
+          status.textContent = 'Aucun log';
+        }
+      } catch (e) {
+        console.error('Log fetch error:', e);
+        document.getElementById('terminal-log').innerHTML = '<div class="no-log">Erreur de chargement.</div>';
+      }
+    }
+
+    // WebSocket for live updates
+    let ws = null;
+    function connectWebSocket() {
+      const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+      ws = new WebSocket(protocol + '//' + location.host + '/ws');
+
+      ws.onmessage = (event) => {
+        try {
+          const msg = JSON.parse(event.data);
+          if (msg.type === 'claude:start' && msg.ticketKey === TICKET_KEY) {
+            document.getElementById('terminal-status').className = 'terminal-status processing';
+            document.getElementById('terminal-status').textContent = 'En cours...';
+          }
+          if (msg.type === 'claude:end' && msg.ticketKey === TICKET_KEY) {
+            fetchLog();
+          }
+          if (msg.type === 'ticket:updated' && msg.ticketKey === TICKET_KEY) {
+            fetchLog();
+          }
+        } catch (e) {
+          console.error('WebSocket error:', e);
+        }
+      };
+
+      ws.onclose = () => {
+        setTimeout(connectWebSocket, 3000);
+      };
+    }
+
+    // Init
+    fetchLog();
+    connectWebSocket();
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+</body>
+</html>`;
+}
+/**
+ * Generate the column prompt page HTML
+ */
+export function generateColumnPromptPage(ticketKey, columnSlug, lang) {
+    const config = getConfig();
+    const ticket = getTicket(config.root, ticketKey);
+    // 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>`;
+    }
+    return `<!DOCTYPE html>
+<html lang="${lang}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Prompt → ${escapeHtml(columnSlug)} | ${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;
+      display: flex;
+      flex-direction: column;
+    }
+    .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;
+      padding: 8px 16px;
+      background: var(--bg-tertiary);
+      border-radius: 6px;
+      transition: all 0.2s;
+    }
+    .back-btn:hover { color: var(--text); background: var(--border); }
+    .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;
+    }
+    .column-slug {
+      font-family: 'SF Mono', Monaco, monospace;
+      font-size: 14px;
+      color: var(--yellow);
+      background: rgba(250, 204, 21, 0.15);
+      padding: 6px 12px;
+      border-radius: 4px;
+      font-weight: 500;
+    }
+    .page-title {
+      flex: 1;
+      font-size: 18px;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    .main {
+      flex: 1;
+      padding: 24px;
+      display: flex;
+      flex-direction: column;
+    }
+    .prompt-container {
+      flex: 1;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    .prompt-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 16px;
+      background: var(--bg-tertiary);
+      border-bottom: 1px solid var(--border);
+    }
+    .prompt-status {
+      font-size: 12px;
+      padding: 4px 12px;
+      border-radius: 12px;
+      font-weight: 500;
+    }
+    .prompt-status.loaded { background: rgba(74, 222, 128, 0.15); color: var(--green); }
+    .prompt-status.loading { background: rgba(251, 146, 60, 0.15); color: var(--orange); }
+    .prompt-status.error { background: rgba(248, 113, 113, 0.15); color: var(--red); }
+    .prompt-content {
+      flex: 1;
+      padding: 24px;
+      overflow-y: auto;
+      font-family: 'SF Mono', Monaco, Consolas, monospace;
+      font-size: 14px;
+      line-height: 1.8;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+    .no-prompt {
+      color: var(--muted);
+      text-align: center;
+      padding: 48px;
+      font-size: 14px;
+    }
+  </style>
+</head>
+<body>
+  <header class="header">
+    <a href="/ticket/${ticketKey}" class="back-btn">← Retour</a>
+    <span class="ticket-key">${ticketKey}</span>
+    <div class="page-title">
+      <span>Prompt →</span>
+      <span class="column-slug">${escapeHtml(columnSlug)}</span>
+    </div>
+  </header>
+
+  <main class="main">
+    <div class="prompt-container">
+      <div class="prompt-header">
+        <span class="prompt-status loading" id="prompt-status">Chargement...</span>
+      </div>
+      <div class="prompt-content" id="prompt-content">
+        <div class="no-prompt">Chargement du prompt...</div>
+      </div>
+    </div>
+  </main>
+
+  <script>
+    const TICKET_KEY = '${ticketKey}';
+    const COLUMN_SLUG = '${escapeHtml(columnSlug)}';
+
+    function escapeHtml(str) {
+      if (typeof str !== 'string') return '';
+      return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+    }
+
+    async function fetchPrompt() {
+      const content = document.getElementById('prompt-content');
+      const status = document.getElementById('prompt-status');
+
+      try {
+        const res = await fetch('/api/tickets/' + TICKET_KEY + '/prompt/' + COLUMN_SLUG);
+        const json = await res.json();
+
+        if (json.success && json.data && json.data.prompt) {
+          content.textContent = json.data.prompt;
+          status.className = 'prompt-status loaded';
+          status.textContent = 'Chargé';
+        } else {
+          content.innerHTML = '<div class="no-prompt">Aucun prompt disponible pour cette colonne.</div>';
+          status.className = 'prompt-status error';
+          status.textContent = 'Non disponible';
+        }
+      } catch (e) {
+        console.error('Prompt fetch error:', e);
+        content.innerHTML = '<div class="no-prompt">Erreur de chargement.</div>';
+        status.className = 'prompt-status error';
+        status.textContent = 'Erreur';
+      }
+    }
+
+    // Init
+    fetchPrompt();
+  </script>
+</body>
+</html>`;
+}
 //# sourceMappingURL=dashboard.js.map