npm - @autocode-cli/autocode - Versions diffs - 0.1.4 → 0.1.6 - Mend

@autocode-cli/autocode 0.1.4 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (125) hide show

package/dist/server/dashboard/pages/pipeline-configurator.js ADDED Viewed

@@ -0,0 +1,1531 @@
+/**
+ * Pipeline configurator page generator
+ */
+/**
+ * Generate the pipeline configurator page
+ */
+export function generatePipelineConfiguratorPage(lang) {
+    return `<!DOCTYPE html>
+<html lang="${lang}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Pipeline Configurator - AutoCode</title>
+  <style>
+    :root {
+      --bg: #0d1117;
+      --bg-card: #161b22;
+      --bg-hover: #1f2937;
+      --border: #30363d;
+      --fg: #c9d1d9;
+      --muted: #8b949e;
+      --accent: #7c3aed;
+      --blue: #4dabf7;
+      --green: #22c55e;
+      --red: #ef4444;
+      --yellow: #eab308;
+      --segment-definition: #3b82f6;
+      --segment-action: #f97316;
+      --segment-finish: #22c55e;
+    }
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg);
+      color: var(--fg);
+      min-height: 100vh;
+    }
+    .header {
+      background: var(--bg-card);
+      border-bottom: 1px solid var(--border);
+      padding: 16px 24px;
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+    .back-btn {
+      background: none;
+      border: 1px solid var(--border);
+      color: var(--fg);
+      padding: 8px 12px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      text-decoration: none;
+    }
+    .back-btn:hover { border-color: var(--accent); color: var(--accent); }
+    .title { flex: 1; font-size: 18px; font-weight: 600; }
+    .title span { color: var(--accent); }
+    .btn {
+      padding: 8px 16px;
+      border-radius: 6px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      border: none;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .btn-primary { background: var(--accent); color: white; }
+    .btn-primary:hover { opacity: 0.9; }
+    .btn-success { background: var(--green); color: white; }
+    .btn-success:hover { opacity: 0.9; }
+    .btn-secondary { background: var(--bg); border: 1px solid var(--border); color: var(--fg); }
+    .btn-secondary:hover { border-color: var(--accent); }
+    .btn-danger { background: var(--red); color: white; }
+    .btn-danger:hover { opacity: 0.9; }
+    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
+    .container {
+      display: grid;
+      grid-template-columns: 280px 1fr;
+      gap: 24px;
+      padding: 24px;
+      max-width: 1600px;
+      margin: 0 auto;
+    }
+    /* Sidebar - Pipeline List */
+    .sidebar {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 16px;
+    }
+    .sidebar h2 {
+      font-size: 14px;
+      text-transform: uppercase;
+      color: var(--muted);
+      margin-bottom: 12px;
+      letter-spacing: 0.5px;
+    }
+    .pipeline-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      margin-bottom: 16px;
+    }
+    .pipeline-item {
+      padding: 12px;
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    .pipeline-item:hover { border-color: var(--accent); }
+    .pipeline-item.active { border-color: var(--accent); background: rgba(124, 58, 237, 0.1); }
+    .pipeline-item .name { font-weight: 500; margin-bottom: 4px; }
+    .pipeline-item .meta { font-size: 12px; color: var(--muted); }
+    .pipeline-item .badge {
+      display: inline-block;
+      background: var(--green);
+      color: white;
+      font-size: 10px;
+      padding: 2px 6px;
+      border-radius: 4px;
+      margin-left: 8px;
+    }
+    .new-pipeline-btn {
+      width: 100%;
+      padding: 12px;
+      background: var(--bg);
+      border: 1px dashed var(--border);
+      border-radius: 6px;
+      color: var(--muted);
+      cursor: pointer;
+      font-size: 14px;
+    }
+    .new-pipeline-btn:hover { border-color: var(--accent); color: var(--accent); }
+    /* Main area */
+    .main {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+    }
+    /* Pipeline details */
+    .pipeline-header {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 20px;
+    }
+    .pipeline-form {
+      display: grid;
+      grid-template-columns: 1fr 1fr auto;
+      gap: 16px;
+      align-items: end;
+    }
+    .form-group {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    .form-group label {
+      font-size: 12px;
+      color: var(--muted);
+      text-transform: uppercase;
+    }
+    .form-group input, .form-group textarea {
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      padding: 10px 12px;
+      color: var(--fg);
+      font-size: 14px;
+    }
+    .form-group input:focus, .form-group textarea:focus {
+      outline: none;
+      border-color: var(--accent);
+    }
+    /* Segments editor */
+    .segments-container {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 16px;
+    }
+    .segment {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 16px;
+      min-height: 300px;
+    }
+    .segment.definition { border-top: 3px solid var(--segment-definition); }
+    .segment.action { border-top: 3px solid var(--segment-action); }
+    .segment.finish { border-top: 3px solid var(--segment-finish); }
+    .segment-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 12px;
+    }
+    .segment-title {
+      font-weight: 600;
+      font-size: 14px;
+      text-transform: uppercase;
+    }
+    .segment.definition .segment-title { color: var(--segment-definition); }
+    .segment.action .segment-title { color: var(--segment-action); }
+    .segment.finish .segment-title { color: var(--segment-finish); }
+    .segment-desc {
+      font-size: 12px;
+      color: var(--muted);
+      margin-bottom: 16px;
+    }
+    .segment-columns {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      min-height: 200px;
+      padding: 8px;
+      background: var(--bg);
+      border-radius: 6px;
+      border: 2px dashed var(--border);
+    }
+    .segment-columns.dragover {
+      border-color: var(--accent);
+      background: rgba(124, 58, 237, 0.1);
+    }
+    .segment-columns.dragover-invalid {
+      border-color: var(--red);
+      background: rgba(239, 68, 68, 0.1);
+      cursor: not-allowed;
+    }
+    /* Column items */
+    .column-item {
+      padding: 10px 12px;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: grab;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      transition: all 0.2s;
+    }
+    .column-item:hover { border-color: var(--accent); }
+    .column-item.dragging { opacity: 0.5; }
+    .column-item .drag-handle {
+      color: var(--muted);
+      font-size: 12px;
+    }
+    .column-item .name { flex: 1; font-size: 14px; }
+    .column-item .remove-btn {
+      background: none;
+      border: none;
+      color: var(--muted);
+      cursor: pointer;
+      padding: 4px;
+      border-radius: 4px;
+    }
+    .column-item .remove-btn:hover { color: var(--red); background: rgba(239, 68, 68, 0.1); }
+    /* Catalog */
+    .catalog {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 16px;
+    }
+    .catalog h2 {
+      font-size: 14px;
+      text-transform: uppercase;
+      color: var(--muted);
+      margin-bottom: 16px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .catalog-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 16px;
+    }
+    .catalog-segment {
+      display: flex;
+      flex-direction: column;
+    }
+    .catalog-segment-header {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 12px;
+    }
+    .catalog-segment-arrow {
+      font-size: 24px;
+      color: var(--muted);
+      opacity: 0.5;
+      animation: bounce 2s infinite;
+    }
+    @keyframes bounce {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-5px); }
+    }
+    .catalog-segment.definition .catalog-segment-arrow { color: var(--segment-definition); }
+    .catalog-segment.action .catalog-segment-arrow { color: var(--segment-action); }
+    .catalog-segment.finish .catalog-segment-arrow { color: var(--segment-finish); }
+    .catalog-segment-title {
+      font-size: 12px;
+      font-weight: 600;
+      padding: 4px 8px;
+      border-radius: 4px;
+      display: inline-block;
+    }
+    .catalog-segment.definition .catalog-segment-title { background: rgba(59, 130, 246, 0.2); color: var(--segment-definition); }
+    .catalog-segment.action .catalog-segment-title { background: rgba(249, 115, 22, 0.2); color: var(--segment-action); }
+    .catalog-segment.finish .catalog-segment-title { background: rgba(34, 197, 94, 0.2); color: var(--segment-finish); }
+    .catalog-columns {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      flex: 1;
+    }
+    .catalog-item {
+      padding: 8px 12px;
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 13px;
+      transition: all 0.2s;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .catalog-item:hover { border-color: var(--accent); }
+    .catalog-item.dragging { opacity: 0.5; cursor: grabbing; }
+    .catalog-item-name { flex: 1; }
+    .catalog-item-eye {
+      opacity: 0.3;
+      font-size: 11px;
+      transition: opacity 0.2s;
+    }
+    .catalog-item:hover .catalog-item-eye { opacity: 0.8; }
+    /* Lang toggle */
+    .lang-toggle {
+      display: flex;
+      gap: 4px;
+    }
+    .lang-toggle .lang-btn {
+      padding: 4px 10px;
+      font-size: 12px;
+    }
+    .lang-toggle .lang-btn.active {
+      background: var(--accent);
+      border-color: var(--accent);
+      color: white;
+    }
+    .catalog-item[title]:hover::after {
+      content: attr(title);
+      position: absolute;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      padding: 6px 10px;
+      border-radius: 4px;
+      font-size: 12px;
+      white-space: nowrap;
+      z-index: 100;
+      margin-top: 30px;
+      margin-left: -50px;
+    }
+    /* Sync preview */
+    .sync-preview {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 16px;
+    }
+    .sync-preview h3 {
+      font-size: 14px;
+      margin-bottom: 12px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .sync-changes {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 12px;
+    }
+    .sync-group {
+      padding: 12px;
+      border-radius: 6px;
+      background: var(--bg);
+    }
+    .sync-group.added { border-left: 3px solid var(--green); }
+    .sync-group.removed { border-left: 3px solid var(--red); }
+    .sync-group.renamed { border-left: 3px solid var(--yellow); }
+    .sync-group h4 {
+      font-size: 12px;
+      margin-bottom: 8px;
+      color: var(--muted);
+    }
+    .sync-group ul {
+      list-style: none;
+      font-size: 13px;
+    }
+    .sync-group li { padding: 4px 0; }
+    /* Notification */
+    .notification {
+      position: fixed;
+      bottom: 24px;
+      right: 24px;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-left: 3px solid var(--green);
+      padding: 12px 16px;
+      border-radius: 6px;
+      font-size: 14px;
+      opacity: 0;
+      transform: translateY(10px);
+      transition: all 0.3s;
+      z-index: 1000;
+    }
+    .notification.show { opacity: 1; transform: translateY(0); }
+    .notification.error { border-left-color: var(--red); }
+    .notification.warning { border-left-color: var(--yellow); }
+    /* Modal */
+    .modal-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.7);
+      display: none;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+    }
+    .modal-overlay.show { display: flex; }
+    .modal {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 24px;
+      min-width: 400px;
+      max-width: 500px;
+    }
+    .modal h3 {
+      margin-bottom: 16px;
+      font-size: 18px;
+    }
+    .modal-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      margin-top: 20px;
+    }
+    /* Empty state */
+    .empty-state {
+      text-align: center;
+      padding: 40px;
+      color: var(--muted);
+    }
+    .empty-state h3 { font-size: 18px; margin-bottom: 8px; color: var(--fg); }
+    .empty-state p { margin-bottom: 20px; }
+    /* Lang switcher */
+    .lang-switcher {
+      display: flex;
+      gap: 4px;
+      margin-left: auto;
+      margin-right: 16px;
+    }
+    .lang-switcher .lang-btn {
+      background: var(--bg);
+      border: 1px solid var(--border);
+      color: var(--muted);
+      padding: 6px 12px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 13px;
+      font-weight: 600;
+      transition: all 0.2s;
+    }
+    .lang-switcher .lang-btn:hover:not(.active) {
+      border-color: var(--accent);
+      color: var(--fg);
+    }
+    .lang-switcher .lang-btn.active {
+      background: var(--accent);
+      color: white;
+      border-color: var(--accent);
+    }
+  </style>
+</head>
+<body>
+  <header class="header">
+    <a href="/" class="back-btn">← Dashboard</a>
+    <h1 class="title"><span>Pipeline</span> Configurator</h1>
+    <div class="lang-switcher" id="lang-switcher">
+      <button class="lang-btn" data-lang="en">EN</button>
+      <button class="lang-btn" data-lang="fr">FR</button>
+    </div>
+    <button class="btn btn-success" id="savePipelineBtn" disabled>Save Pipeline</button>
+    <button class="btn btn-primary" id="activateBtn" disabled>Activate & Sync</button>
+  </header>
+  <div class="container">
+    <!-- Sidebar: Pipeline list -->
+    <aside class="sidebar">
+      <h2>Pipelines</h2>
+      <div class="pipeline-list" id="pipelineList">
+        <!-- Populated by JS -->
+      </div>
+      <button class="new-pipeline-btn" id="newPipelineBtn">+ New Pipeline</button>
+    </aside>
+    <!-- Main content -->
+    <main class="main" id="mainContent">
+      <div class="empty-state" id="emptyState">
+        <h3>No Pipeline Selected</h3>
+        <p>Select a pipeline from the list or create a new one.</p>
+        <button class="btn btn-primary" id="createFirstBtn">Create First Pipeline</button>
+      </div>
+      <!-- Pipeline editor (hidden initially) -->
+      <div id="pipelineEditor" style="display:none;">
+        <!-- Pipeline details -->
+        <div class="pipeline-header">
+          <div class="pipeline-form">
+            <div class="form-group">
+              <label>Pipeline Name</label>
+              <input type="text" id="pipelineName" placeholder="e.g., Default Pipeline">
+            </div>
+            <div class="form-group">
+              <label>Version</label>
+              <input type="text" id="pipelineVersion" placeholder="e.g., 1.0.0" value="1.0.0">
+            </div>
+            <button class="btn btn-danger" id="deletePipelineBtn">Delete</button>
+          </div>
+          <div class="form-group" style="margin-top: 12px;">
+            <label>Description (optional)</label>
+            <input type="text" id="pipelineDescription" placeholder="Short description of this pipeline">
+          </div>
+        </div>
+        <!-- Segments -->
+        <div class="segments-container">
+          <div class="segment definition">
+            <div class="segment-header">
+              <span class="segment-title">Definition</span>
+            </div>
+            <div class="segment-desc">Qualification and preparation columns</div>
+            <div class="segment-columns" id="definitionColumns" data-segment="definition">
+              <!-- Columns added here -->
+            </div>
+          </div>
+          <div class="segment action">
+            <div class="segment-header">
+              <span class="segment-title">Action</span>
+            </div>
+            <div class="segment-desc">Implementation and validation columns</div>
+            <div class="segment-columns" id="actionColumns" data-segment="action">
+              <!-- Columns added here -->
+            </div>
+          </div>
+          <div class="segment finish">
+            <div class="segment-header">
+              <span class="segment-title">Finish</span>
+            </div>
+            <div class="segment-desc">Finalization and deployment columns</div>
+            <div class="segment-columns" id="finishColumns" data-segment="finish">
+              <!-- Columns added here -->
+            </div>
+          </div>
+        </div>
+        <!-- Catalog -->
+        <div class="catalog">
+          <h2>
+            Column Catalog <span style="font-weight: normal; font-size: 12px;">(drag columns to segments above)</span>
+            <button class="btn btn-secondary" style="margin-left: auto; font-size: 12px;" onclick="openAddColumnModal()">+ Add Column</button>
+          </h2>
+          <div id="catalogContent">
+            <!-- Populated by JS -->
+          </div>
+        </div>
+        <!-- Sync preview -->
+        <div class="sync-preview" id="syncPreview" style="display:none;">
+          <h3>Sync Preview</h3>
+          <div class="sync-changes" id="syncChanges">
+            <!-- Populated by JS -->
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+  <!-- New Pipeline Modal -->
+  <div class="modal-overlay" id="newPipelineModal">
+    <div class="modal">
+      <h3>Create New Pipeline</h3>
+      <div class="form-group">
+        <label>Pipeline Name</label>
+        <input type="text" id="newPipelineName" placeholder="e.g., Default Pipeline">
+        <small style="color: var(--muted); margin-top: 4px; display: block;">Key: <code id="newPipelineKeyPreview">-</code></small>
+      </div>
+      <div class="modal-actions">
+        <button class="btn btn-secondary" onclick="closeNewPipelineModal()">Cancel</button>
+        <button class="btn btn-primary" onclick="confirmNewPipeline()">Create</button>
+      </div>
+    </div>
+  </div>
+  <div class="notification" id="notification"></div>
+  <!-- Add Column Modal -->
+  <div class="modal-overlay" id="addColumnModal">
+    <div class="modal" style="max-width: 500px;">
+      <h3>Add New Column to Catalog</h3>
+      <p style="color: var(--muted); font-size: 13px; margin-bottom: 16px;">Describe your idea and Claude will generate the prompt in EN/FR.</p>
+      <div class="form-group">
+        <label>Column Name</label>
+        <input type="text" id="newColumnName" placeholder="e.g., Code Formatting">
+      </div>
+      <div class="form-group" style="margin-top: 12px;">
+        <label>Segment</label>
+        <select id="newColumnSegment">
+          <option value="definition">Definition (preparation)</option>
+          <option value="action" selected>Action (implementation)</option>
+          <option value="finish">Finish (deployment)</option>
+        </select>
+      </div>
+      <div class="form-group" style="margin-top: 12px;">
+        <label>Describe what this column should do</label>
+        <textarea id="newColumnDescription" rows="4" placeholder="e.g., Check code formatting with Prettier, fix any issues, ensure consistent style across the project..."></textarea>
+      </div>
+      <div class="modal-actions">
+        <button class="btn btn-secondary" onclick="closeAddColumnModal()">Cancel</button>
+        <button class="btn btn-primary" id="generateColumnBtn" onclick="generateColumn()">
+          <span id="generateColumnText">Generate with Claude</span>
+          <span id="generateColumnSpinner" style="display:none;">Generating...</span>
+        </button>
+      </div>
+    </div>
+  </div>
+  <!-- Prompt Preview Modal -->
+  <div class="modal-overlay" id="promptPreviewModal">
+    <div class="modal" style="max-width: 700px; width: 90%;">
+      <div class="modal-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
+        <h3 id="promptPreviewTitle" style="margin: 0;">Column Prompt</h3>
+        <div style="display: flex; gap: 8px; align-items: center;">
+          <div class="lang-toggle">
+            <button class="btn btn-secondary lang-btn active" data-lang="en" onclick="switchPromptLang('en')">EN</button>
+            <button class="btn btn-secondary lang-btn" data-lang="fr" onclick="switchPromptLang('fr')">FR</button>
+          </div>
+          <button class="btn btn-secondary" onclick="closePromptPreview()" style="padding: 4px 10px;">✕</button>
+        </div>
+      </div>
+      <div id="promptPreviewContent" style="background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 16px; max-height: 60vh; overflow-y: auto; white-space: pre-wrap; font-family: monospace; font-size: 13px; line-height: 1.5;"></div>
+    </div>
+  </div>
+  <script>
+    // Translations
+    const translations = {
+      en: {
+        backBtn: '← Dashboard',
+        title: 'Configurator',
+        titleSpan: 'Pipeline',
+        savePipeline: 'Save Pipeline',
+        activateSync: 'Activate & Sync',
+        pipelines: 'Pipelines',
+        newPipeline: '+ New Pipeline',
+        noSelected: 'No Pipeline Selected',
+        noSelectedDesc: 'Select a pipeline from the list or create a new one.',
+        createFirst: 'Create First Pipeline',
+        pipelineName: 'Pipeline Name',
+        version: 'Version',
+        delete: 'Delete',
+        description: 'Description (optional)',
+        descPlaceholder: 'Short description of this pipeline',
+        definition: 'DEFINITION',
+        definitionDesc: 'Qualification and preparation columns',
+        action: 'ACTION',
+        actionDesc: 'Implementation and validation columns',
+        finish: 'FINISH',
+        finishDesc: 'Finalization and deployment columns',
+        catalog: 'Column Catalog',
+        catalogHint: '(drag columns to segments above)',
+        addColumn: '+ Add Column',
+        syncPreview: 'Sync Preview',
+        createNewPipeline: 'Create New Pipeline',
+        create: 'Create',
+        cancel: 'Cancel',
+        addColumnTitle: 'Add New Column to Catalog',
+        addColumnDesc: 'Describe your idea and Claude will generate the prompt in EN/FR.',
+        columnName: 'Column Name',
+        segment: 'Segment',
+        segmentDefinition: 'Definition (preparation)',
+        segmentAction: 'Action (implementation)',
+        segmentFinish: 'Finish (deployment)',
+        describeColumn: 'Describe what this column should do',
+        generateClaude: 'Generate with Claude',
+        generating: 'Generating...',
+        promptPreview: 'Column Prompt',
+        loading: 'Loading...',
+        noPrompt: '(No prompt available for this column)',
+        columnBelongsTo: 'This column belongs to the',
+        segmentLabel: 'segment',
+        cannotMoveBetween: 'Columns cannot be moved between segments',
+        columnExists: 'Column already exists in this segment',
+        pipelineSaved: 'Pipeline saved!',
+        pipelineCreated: 'Pipeline created!',
+        pipelineDeleted: 'Pipeline deleted',
+        pipelineActivated: 'Pipeline activated and synced!',
+        fillAllFields: 'Please fill in all fields',
+        enterPipelineName: 'Please enter a pipeline name',
+        keyExists: 'A pipeline with this key already exists',
+        confirmDelete: 'Are you sure you want to delete this pipeline?',
+        columnAdded: 'Column added to catalog!',
+      },
+      fr: {
+        backBtn: '← Tableau de bord',
+        title: 'Configurateur',
+        titleSpan: 'Pipeline',
+        savePipeline: 'Sauvegarder',
+        activateSync: 'Activer & Sync',
+        pipelines: 'Pipelines',
+        newPipeline: '+ Nouveau Pipeline',
+        noSelected: 'Aucun Pipeline Sélectionné',
+        noSelectedDesc: 'Sélectionnez un pipeline dans la liste ou créez-en un nouveau.',
+        createFirst: 'Créer le Premier Pipeline',
+        pipelineName: 'Nom du Pipeline',
+        version: 'Version',
+        delete: 'Supprimer',
+        description: 'Description (optionnel)',
+        descPlaceholder: 'Brève description de ce pipeline',
+        definition: 'DÉFINITION',
+        definitionDesc: 'Colonnes de qualification et préparation',
+        action: 'ACTION',
+        actionDesc: "Colonnes d'implémentation et validation",
+        finish: 'FINALISATION',
+        finishDesc: 'Colonnes de finalisation et déploiement',
+        catalog: 'Catalogue de Colonnes',
+        catalogHint: '(glissez les colonnes vers les segments ci-dessus)',
+        addColumn: '+ Ajouter Colonne',
+        syncPreview: 'Aperçu Sync',
+        createNewPipeline: 'Créer un Nouveau Pipeline',
+        create: 'Créer',
+        cancel: 'Annuler',
+        addColumnTitle: 'Ajouter une Nouvelle Colonne au Catalogue',
+        addColumnDesc: 'Décrivez votre idée et Claude générera le prompt en EN/FR.',
+        columnName: 'Nom de la Colonne',
+        segment: 'Segment',
+        segmentDefinition: 'Définition (préparation)',
+        segmentAction: 'Action (implémentation)',
+        segmentFinish: 'Finalisation (déploiement)',
+        describeColumn: 'Décrivez ce que cette colonne doit faire',
+        generateClaude: 'Générer avec Claude',
+        generating: 'Génération...',
+        promptPreview: 'Prompt de la Colonne',
+        loading: 'Chargement...',
+        noPrompt: '(Aucun prompt disponible pour cette colonne)',
+        columnBelongsTo: 'Cette colonne appartient au segment',
+        segmentLabel: '',
+        cannotMoveBetween: 'Les colonnes ne peuvent pas être déplacées entre segments',
+        columnExists: 'La colonne existe déjà dans ce segment',
+        pipelineSaved: 'Pipeline sauvegardé !',
+        pipelineCreated: 'Pipeline créé !',
+        pipelineDeleted: 'Pipeline supprimé',
+        pipelineActivated: 'Pipeline activé et synchronisé !',
+        fillAllFields: 'Veuillez remplir tous les champs',
+        enterPipelineName: 'Veuillez entrer un nom de pipeline',
+        keyExists: 'Un pipeline avec cette clé existe déjà',
+        confirmDelete: 'Êtes-vous sûr de vouloir supprimer ce pipeline ?',
+        columnAdded: 'Colonne ajoutée au catalogue !',
+      }
+    };
+    function t(key) {
+      return translations[currentLang]?.[key] || translations['en'][key] || key;
+    }
+    function updateUILanguage() {
+      // Header
+      document.querySelector('.back-btn').textContent = t('backBtn');
+      document.querySelector('.title span').textContent = t('titleSpan');
+      document.querySelector('.title').childNodes[2].textContent = ' ' + t('title');
+      document.getElementById('savePipelineBtn').textContent = t('savePipeline');
+      document.getElementById('activateBtn').textContent = t('activateSync');
+      // Sidebar
+      document.querySelector('.sidebar h2').textContent = t('pipelines');
+      document.getElementById('newPipelineBtn').textContent = t('newPipeline');
+      // Empty state
+      document.querySelector('#emptyState h3').textContent = t('noSelected');
+      document.querySelector('#emptyState p').textContent = t('noSelectedDesc');
+      document.getElementById('createFirstBtn').textContent = t('createFirst');
+      // Pipeline form
+      document.querySelector('label[for="pipelineName"]')?.setAttribute('data-text', t('pipelineName'));
+      document.querySelectorAll('.pipeline-header .form-group label')[0].textContent = t('pipelineName');
+      document.querySelectorAll('.pipeline-header .form-group label')[1].textContent = t('version');
+      document.getElementById('deletePipelineBtn').textContent = t('delete');
+      document.querySelectorAll('.pipeline-header .form-group label')[2].textContent = t('description');
+      document.getElementById('pipelineDescription').placeholder = t('descPlaceholder');
+      // Segments
+      document.querySelectorAll('.segment.definition .segment-title')[0].textContent = t('definition');
+      document.querySelectorAll('.segment.definition .segment-desc')[0].textContent = t('definitionDesc');
+      document.querySelectorAll('.segment.action .segment-title')[0].textContent = t('action');
+      document.querySelectorAll('.segment.action .segment-desc')[0].textContent = t('actionDesc');
+      document.querySelectorAll('.segment.finish .segment-title')[0].textContent = t('finish');
+      document.querySelectorAll('.segment.finish .segment-desc')[0].textContent = t('finishDesc');
+      // Catalog
+      const catalogH2 = document.querySelector('.catalog h2');
+      catalogH2.childNodes[0].textContent = t('catalog') + ' ';
+      catalogH2.querySelector('span').textContent = t('catalogHint');
+      catalogH2.querySelector('button').textContent = t('addColumn');
+      // Sync preview
+      document.querySelector('#syncPreview h3').textContent = t('syncPreview');
+      // New pipeline modal
+      document.querySelector('#newPipelineModal h3').textContent = t('createNewPipeline');
+      document.querySelector('#newPipelineModal label').textContent = t('pipelineName');
+      document.querySelectorAll('#newPipelineModal .btn-secondary')[0].textContent = t('cancel');
+      document.querySelectorAll('#newPipelineModal .btn-primary')[0].textContent = t('create');
+      // Add column modal
+      document.querySelector('#addColumnModal h3').textContent = t('addColumnTitle');
+      document.querySelector('#addColumnModal p').textContent = t('addColumnDesc');
+      document.querySelectorAll('#addColumnModal label')[0].textContent = t('columnName');
+      document.querySelectorAll('#addColumnModal label')[1].textContent = t('segment');
+      document.querySelectorAll('#addColumnModal label')[2].textContent = t('describeColumn');
+      document.querySelectorAll('#addColumnModal select option')[0].textContent = t('segmentDefinition');
+      document.querySelectorAll('#addColumnModal select option')[1].textContent = t('segmentAction');
+      document.querySelectorAll('#addColumnModal select option')[2].textContent = t('segmentFinish');
+      document.querySelectorAll('#addColumnModal .btn-secondary')[0].textContent = t('cancel');
+      document.getElementById('generateColumnText').textContent = t('generateClaude');
+      document.getElementById('generateColumnSpinner').textContent = t('generating');
+      // Prompt preview modal
+      document.getElementById('promptPreviewTitle').textContent = t('promptPreview');
+    }
+    // State
+    let catalog = null;
+    let pipelines = [];
+    let currentPipelineKey = null;
+    let currentPipeline = null;
+    let hasChanges = false;
+    let currentPromptSlug = null;
+    let currentPromptLang = 'en';
+    let currentLang = localStorage.getItem('autocode-lang') || 'en';
+    // Elements
+    const pipelineList = document.getElementById('pipelineList');
+    const mainContent = document.getElementById('mainContent');
+    const emptyState = document.getElementById('emptyState');
+    const pipelineEditor = document.getElementById('pipelineEditor');
+    const savePipelineBtn = document.getElementById('savePipelineBtn');
+    const activateBtn = document.getElementById('activateBtn');
+    const notification = document.getElementById('notification');
+    // Load initial data
+    async function init() {
+      await Promise.all([loadCatalog(), loadPipelines()]);
+      renderCatalog();
+      renderPipelineList();
+      setupDragAndDrop();
+    }
+    // Load catalog
+    async function loadCatalog() {
+      try {
+        const res = await fetch('/api/catalog');
+        const data = await res.json();
+        if (data.success) {
+          catalog = data.data;
+        }
+      } catch (e) {
+        showNotification('Failed to load catalog: ' + e.message, 'error');
+      }
+    }
+    // Load pipelines
+    async function loadPipelines() {
+      try {
+        const res = await fetch('/api/pipelines');
+        const data = await res.json();
+        if (data.success) {
+          pipelines = data.data;
+        }
+      } catch (e) {
+        showNotification('Failed to load pipelines: ' + e.message, 'error');
+      }
+    }
+    // Render catalog
+    function renderCatalog() {
+      if (!catalog) return;
+      const container = document.getElementById('catalogContent');
+      container.innerHTML = '<div class="catalog-grid" id="catalogGrid"></div>';
+      const grid = document.getElementById('catalogGrid');
+      for (const [segment, data] of Object.entries(catalog.segments)) {
+        const segmentDiv = document.createElement('div');
+        segmentDiv.className = 'catalog-segment ' + segment;
+        // Header with arrow and title
+        const headerDiv = document.createElement('div');
+        headerDiv.className = 'catalog-segment-header';
+        headerDiv.innerHTML = '<span class="catalog-segment-arrow">↑</span><span class="catalog-segment-title">' + segment.toUpperCase() + '</span>';
+        segmentDiv.appendChild(headerDiv);
+        const columnsDiv = document.createElement('div');
+        columnsDiv.className = 'catalog-columns';
+        for (const col of data.columns) {
+          const item = document.createElement('div');
+          item.className = 'catalog-item';
+          item.draggable = true;
+          item.dataset.slug = col.slug;
+          item.dataset.name = col.name;
+          item.dataset.segment = segment;
+          item.title = col.description + ' (click to preview prompt)';
+          item.innerHTML = '<span class="catalog-item-name">' + escapeHtml(col.name) + '</span><span class="catalog-item-eye">👁</span>';
+          item.onclick = (e) => {
+            if (!e.target.classList.contains('dragging')) {
+              openPromptPreview(col.slug, col.name);
+            }
+          };
+          columnsDiv.appendChild(item);
+        }
+        segmentDiv.appendChild(columnsDiv);
+        grid.appendChild(segmentDiv);
+      }
+    }
+    // Render pipeline list
+    function renderPipelineList() {
+      pipelineList.innerHTML = '';
+      for (const p of pipelines) {
+        const item = document.createElement('div');
+        item.className = 'pipeline-item' + (p.name === currentPipelineKey ? ' active' : '');
+        item.innerHTML = '<div class="name">' + escapeHtml(p.pipeline.name) +
+          (p.isActive ? '<span class="badge">Active</span>' : '') +
+          '</div><div class="meta">v' + escapeHtml(p.pipeline.version) + '</div>';
+        item.onclick = () => selectPipeline(p.name);
+        pipelineList.appendChild(item);
+      }
+      if (pipelines.length === 0) {
+        emptyState.style.display = '';
+        pipelineEditor.style.display = 'none';
+      }
+    }
+    // Select a pipeline
+    function selectPipeline(key) {
+      const p = pipelines.find(p => p.name === key);
+      if (!p) return;
+      currentPipelineKey = key;
+      currentPipeline = JSON.parse(JSON.stringify(p.pipeline)); // Deep copy
+      emptyState.style.display = 'none';
+      pipelineEditor.style.display = '';
+      document.getElementById('pipelineName').value = currentPipeline.name;
+      document.getElementById('pipelineVersion').value = currentPipeline.version;
+      document.getElementById('pipelineDescription').value = currentPipeline.description || '';
+      renderSegmentColumns();
+      renderPipelineList();
+      hasChanges = false;
+      updateButtons();
+    }
+    // Render segment columns
+    function renderSegmentColumns() {
+      ['definition', 'action', 'finish'].forEach(segment => {
+        const container = document.getElementById(segment + 'Columns');
+        container.innerHTML = '';
+        const columns = currentPipeline[segment] || [];
+        columns.forEach((col, index) => {
+          const item = createColumnItem(col, segment, index);
+          container.appendChild(item);
+        });
+      });
+    }
+    // Create a column item element
+    function createColumnItem(col, segment, index) {
+      const item = document.createElement('div');
+      item.className = 'column-item';
+      item.draggable = true;
+      item.dataset.segment = segment;
+      item.dataset.index = index;
+      item.innerHTML =
+        '<span class="drag-handle">⋮⋮</span>' +
+        '<span class="name">' + escapeHtml(col.name) + '</span>' +
+        '<button class="remove-btn" title="Remove">✕</button>';
+      item.querySelector('.remove-btn').onclick = (e) => {
+        e.stopPropagation();
+        removeColumn(segment, index);
+      };
+      return item;
+    }
+    // Add column to segment
+    function addColumn(segment, slug, name) {
+      if (!currentPipeline) return;
+      if (!currentPipeline[segment]) currentPipeline[segment] = [];
+      // Check if already exists
+      if (currentPipeline[segment].some(c => c.slug.includes(slug))) {
+        showNotification('Column already exists in this segment', 'warning');
+        return;
+      }
+      currentPipeline[segment].push({ slug, name });
+      renderSegmentColumns();
+      hasChanges = true;
+      updateButtons();
+    }
+    // Remove column from segment
+    function removeColumn(segment, index) {
+      if (!currentPipeline || !currentPipeline[segment]) return;
+      currentPipeline[segment].splice(index, 1);
+      renderSegmentColumns();
+      hasChanges = true;
+      updateButtons();
+    }
+    // Setup drag and drop
+    function setupDragAndDrop() {
+      document.addEventListener('dragstart', (e) => {
+        if (e.target.classList.contains('catalog-item') || e.target.classList.contains('column-item')) {
+          e.target.classList.add('dragging');
+          window.currentDragSegment = e.target.dataset.segment;
+          e.dataTransfer.setData('text/plain', JSON.stringify({
+            slug: e.target.dataset.slug,
+            name: e.target.dataset.name,
+            segment: e.target.dataset.segment,
+            index: e.target.dataset.index
+          }));
+        }
+      });
+      document.addEventListener('dragend', (e) => {
+        e.target.classList.remove('dragging');
+        window.currentDragSegment = null;
+        document.querySelectorAll('.dragover').forEach(el => el.classList.remove('dragover'));
+        document.querySelectorAll('.dragover-invalid').forEach(el => el.classList.remove('dragover-invalid'));
+      });
+      document.querySelectorAll('.segment-columns').forEach(container => {
+        container.addEventListener('dragover', (e) => {
+          e.preventDefault();
+          // Only show dragover if segment is compatible
+          const draggedSegment = window.currentDragSegment;
+          const targetSegment = container.dataset.segment;
+          if (!draggedSegment || draggedSegment === targetSegment) {
+            container.classList.add('dragover');
+          } else {
+            container.classList.add('dragover-invalid');
+          }
+        });
+        container.addEventListener('dragleave', () => {
+          container.classList.remove('dragover');
+          container.classList.remove('dragover-invalid');
+        });
+        container.addEventListener('drop', (e) => {
+          e.preventDefault();
+          container.classList.remove('dragover');
+          container.classList.remove('dragover-invalid');
+          const data = JSON.parse(e.dataTransfer.getData('text/plain'));
+          const targetSegment = container.dataset.segment;
+          // Check if it's from catalog or from another segment
+          if (data.index === undefined) {
+            // From catalog - check segment compatibility
+            if (data.segment !== targetSegment) {
+              showNotification('This column belongs to the "' + data.segment + '" segment', 'warning');
+              return;
+            }
+            addColumn(targetSegment, data.slug, data.name);
+          } else {
+            // Reordering within same segment only
+            const fromSegment = data.segment;
+            const fromIndex = parseInt(data.index);
+            if (fromSegment !== targetSegment) {
+              showNotification('Columns cannot be moved between segments', 'warning');
+              return;
+            }
+            // Reorder within same segment
+            const items = currentPipeline[fromSegment];
+            const [removed] = items.splice(fromIndex, 1);
+            // Find drop position
+            const dropIndex = getDropIndex(e, container);
+            items.splice(dropIndex, 0, removed);
+            renderSegmentColumns();
+            hasChanges = true;
+            updateButtons();
+          }
+        });
+      });
+    }
+    function getDropIndex(e, container) {
+      const items = [...container.querySelectorAll('.column-item:not(.dragging)')];
+      const y = e.clientY;
+      let insertIndex = items.length;
+      for (let i = 0; i < items.length; i++) {
+        const rect = items[i].getBoundingClientRect();
+        if (y < rect.top + rect.height / 2) {
+          insertIndex = i;
+          break;
+        }
+      }
+      return insertIndex;
+    }
+    // Update buttons state
+    function updateButtons() {
+      savePipelineBtn.disabled = !hasChanges || !currentPipeline;
+      activateBtn.disabled = !currentPipeline || hasChanges;
+      // Validate pipeline
+      if (currentPipeline) {
+        const valid = validatePipeline();
+        savePipelineBtn.disabled = savePipelineBtn.disabled || !valid;
+      }
+    }
+    // Validate pipeline
+    function validatePipeline() {
+      if (!currentPipeline) return false;
+      if (!currentPipeline.definition || currentPipeline.definition.length === 0) return false;
+      if (!currentPipeline.action || currentPipeline.action.length === 0) return false;
+      if (!currentPipeline.finish || currentPipeline.finish.length === 0) return false;
+      return true;
+    }
+    // Save pipeline
+    async function savePipeline() {
+      if (!currentPipelineKey || !currentPipeline) return;
+      // Update from form
+      currentPipeline.name = document.getElementById('pipelineName').value;
+      currentPipeline.version = document.getElementById('pipelineVersion').value;
+      currentPipeline.description = document.getElementById('pipelineDescription').value;
+      // Renumber columns
+      let index = 0;
+      ['definition', 'action', 'finish'].forEach(segment => {
+        currentPipeline[segment] = currentPipeline[segment].map(col => ({
+          slug: String(index++).padStart(2, '0') + '_' + col.slug.replace(/^\\d{2}_/, ''),
+          name: col.name
+        }));
+      });
+      try {
+        const res = await fetch('/api/pipelines', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            name: currentPipelineKey,
+            pipeline: currentPipeline,
+            setActive: false
+          })
+        });
+        const data = await res.json();
+        if (data.success) {
+          showNotification('Pipeline saved!');
+          hasChanges = false;
+          await loadPipelines();
+          renderPipelineList();
+          updateButtons();
+        } else {
+          showNotification('Error: ' + data.error, 'error');
+        }
+      } catch (e) {
+        showNotification('Error: ' + e.message, 'error');
+      }
+    }
+    // Activate pipeline
+    async function activatePipeline() {
+      if (!currentPipelineKey) return;
+      try {
+        const res = await fetch('/api/pipelines/' + encodeURIComponent(currentPipelineKey) + '/activate', {
+          method: 'PUT'
+        });
+        const data = await res.json();
+        if (data.success) {
+          showNotification('Pipeline activated and synced!');
+          await loadPipelines();
+          renderPipelineList();
+          // Show sync results if any
+          if (data.data && (data.data.added.length || data.data.removed.length || data.data.transitioned.length)) {
+            showSyncResults(data.data);
+          }
+        } else {
+          showNotification('Error: ' + data.error, 'error');
+        }
+      } catch (e) {
+        showNotification('Error: ' + e.message, 'error');
+      }
+    }
+    // Show sync results
+    function showSyncResults(result) {
+      const preview = document.getElementById('syncPreview');
+      const changes = document.getElementById('syncChanges');
+      changes.innerHTML = '';
+      if (result.added.length) {
+        changes.innerHTML += '<div class="sync-group added"><h4>Added</h4><ul>' +
+          result.added.map(s => '<li>+ ' + escapeHtml(s) + '</li>').join('') + '</ul></div>';
+      }
+      if (result.removed.length) {
+        changes.innerHTML += '<div class="sync-group removed"><h4>Removed</h4><ul>' +
+          result.removed.map(s => '<li>- ' + escapeHtml(s) + '</li>').join('') + '</ul></div>';
+      }
+      if (result.transitioned.length) {
+        changes.innerHTML += '<div class="sync-group renamed"><h4>Tickets in Transition</h4><ul>' +
+          result.transitioned.map(s => '<li>' + escapeHtml(s) + '</li>').join('') + '</ul></div>';
+      }
+      preview.style.display = changes.innerHTML ? '' : 'none';
+    }
+    // Delete pipeline
+    async function deletePipeline() {
+      if (!currentPipelineKey) return;
+      if (!confirm('Are you sure you want to delete this pipeline?')) return;
+      try {
+        const res = await fetch('/api/pipelines/' + encodeURIComponent(currentPipelineKey), {
+          method: 'DELETE'
+        });
+        const data = await res.json();
+        if (data.success) {
+          showNotification('Pipeline deleted');
+          currentPipelineKey = null;
+          currentPipeline = null;
+          await loadPipelines();
+          renderPipelineList();
+          emptyState.style.display = '';
+          pipelineEditor.style.display = 'none';
+        } else {
+          showNotification('Error: ' + data.error, 'error');
+        }
+      } catch (e) {
+        showNotification('Error: ' + e.message, 'error');
+      }
+    }
+    // Convert to kebab-case
+    function toKebabCase(str) {
+      return str
+        .toLowerCase()
+        .normalize('NFD').replace(/[\u0300-\u036f]/g, '') // Remove accents
+        .replace(/[^a-z0-9]+/g, '-') // Replace non-alphanumeric with dashes
+        .replace(/^-+|-+$/g, '') // Trim dashes
+        .replace(/-+/g, '-'); // Collapse multiple dashes
+    }
+    // New pipeline modal
+    function openNewPipelineModal() {
+      document.getElementById('newPipelineModal').classList.add('show');
+      document.getElementById('newPipelineName').value = '';
+      document.getElementById('newPipelineKeyPreview').textContent = '-';
+    }
+    function closeNewPipelineModal() {
+      document.getElementById('newPipelineModal').classList.remove('show');
+    }
+    async function confirmNewPipeline() {
+      const name = document.getElementById('newPipelineName').value.trim();
+      const key = toKebabCase(name);
+      if (!name || !key) {
+        showNotification('Please enter a pipeline name', 'warning');
+        return;
+      }
+      // Check if key already exists
+      if (pipelines.some(p => p.name === key)) {
+        showNotification('A pipeline with this key already exists', 'warning');
+        return;
+      }
+      // Create empty pipeline
+      const newPipeline = {
+        name: name,
+        version: '1.0.0',
+        description: '',
+        definition: [{ slug: 'backlog', name: 'Backlog' }],
+        action: [{ slug: 'in-progress', name: 'In Progress' }],
+        finish: [{ slug: 'done', name: 'Done' }]
+      };
+      try {
+        const res = await fetch('/api/pipelines', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            name: key,
+            pipeline: newPipeline,
+            setActive: pipelines.length === 0
+          })
+        });
+        const data = await res.json();
+        if (data.success) {
+          closeNewPipelineModal();
+          await loadPipelines();
+          renderPipelineList();
+          selectPipeline(key);
+          showNotification('Pipeline created!');
+        } else {
+          showNotification('Error: ' + data.error, 'error');
+        }
+      } catch (e) {
+        showNotification('Error: ' + e.message, 'error');
+      }
+    }
+    // Show notification
+    function showNotification(msg, type = 'success') {
+      notification.textContent = msg;
+      notification.className = 'notification show' + (type !== 'success' ? ' ' + type : '');
+      setTimeout(() => notification.className = 'notification', 3000);
+    }
+    // Prompt preview
+    async function openPromptPreview(slug, name) {
+      currentPromptSlug = slug;
+      currentPromptLang = currentLang || 'en';
+      document.getElementById('promptPreviewTitle').textContent = name;
+      document.getElementById('promptPreviewModal').classList.add('show');
+      updatePromptLangButtons();
+      await loadPromptContent();
+    }
+    function closePromptPreview() {
+      document.getElementById('promptPreviewModal').classList.remove('show');
+      currentPromptSlug = null;
+    }
+    async function switchPromptLang(lang) {
+      currentPromptLang = lang;
+      updatePromptLangButtons();
+      await loadPromptContent();
+    }
+    function updatePromptLangButtons() {
+      document.querySelectorAll('#promptPreviewModal .lang-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.lang === currentPromptLang);
+      });
+    }
+    async function loadPromptContent() {
+      const content = document.getElementById('promptPreviewContent');
+      content.textContent = 'Loading...';
+      try {
+        const res = await fetch('/api/prompts/' + encodeURIComponent(currentPromptSlug) + '?lang=' + currentPromptLang);
+        const data = await res.json();
+        if (data.success && data.data) {
+          content.textContent = data.data;
+        } else {
+          content.textContent = '(No prompt available for this column in ' + currentPromptLang.toUpperCase() + ')';
+        }
+      } catch (e) {
+        content.textContent = 'Error loading prompt: ' + e.message;
+      }
+    }
+    // Add Column Modal
+    function openAddColumnModal() {
+      document.getElementById('addColumnModal').classList.add('show');
+      document.getElementById('newColumnName').value = '';
+      document.getElementById('newColumnDescription').value = '';
+      document.getElementById('newColumnSegment').value = 'action';
+    }
+    function closeAddColumnModal() {
+      document.getElementById('addColumnModal').classList.remove('show');
+    }
+    async function generateColumn() {
+      const name = document.getElementById('newColumnName').value.trim();
+      const segment = document.getElementById('newColumnSegment').value;
+      const description = document.getElementById('newColumnDescription').value.trim();
+      if (!name || !description) {
+        showNotification('Please fill in all fields', 'warning');
+        return;
+      }
+      // Show loading state
+      document.getElementById('generateColumnText').style.display = 'none';
+      document.getElementById('generateColumnSpinner').style.display = 'inline';
+      document.getElementById('generateColumnBtn').disabled = true;
+      try {
+        const res = await fetch('/api/catalog/generate', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ name, segment, description })
+        });
+        const data = await res.json();
+        if (data.success) {
+          showNotification('Column "' + name + '" added to catalog!');
+          closeAddColumnModal();
+          // Reload catalog
+          await loadCatalog();
+          renderCatalog();
+        } else {
+          showNotification('Error: ' + data.error, 'error');
+        }
+      } catch (e) {
+        showNotification('Error: ' + e.message, 'error');
+      } finally {
+        document.getElementById('generateColumnText').style.display = 'inline';
+        document.getElementById('generateColumnSpinner').style.display = 'none';
+        document.getElementById('generateColumnBtn').disabled = false;
+      }
+    }
+    // Escape HTML
+    function escapeHtml(str) {
+      const div = document.createElement('div');
+      div.textContent = str || '';
+      return div.innerHTML;
+    }
+    // Event listeners
+    document.getElementById('newPipelineBtn').onclick = openNewPipelineModal;
+    document.getElementById('createFirstBtn').onclick = openNewPipelineModal;
+    document.getElementById('savePipelineBtn').onclick = savePipeline;
+    document.getElementById('activateBtn').onclick = activatePipeline;
+    document.getElementById('deletePipelineBtn').onclick = deletePipeline;
+    // Track form changes
+    ['pipelineName', 'pipelineVersion', 'pipelineDescription'].forEach(id => {
+      document.getElementById(id).addEventListener('input', () => {
+        hasChanges = true;
+        updateButtons();
+      });
+    });
+    // Live update key preview in new pipeline modal
+    document.getElementById('newPipelineName').addEventListener('input', (e) => {
+      const name = e.target.value.trim();
+      const key = toKebabCase(name);
+      document.getElementById('newPipelineKeyPreview').textContent = key || '-';
+    });
+    // Language switcher
+    function initLangSwitcher() {
+      const buttons = document.querySelectorAll('#lang-switcher .lang-btn');
+      buttons.forEach(btn => {
+        if (btn.dataset.lang === currentLang) {
+          btn.classList.add('active');
+        }
+        btn.addEventListener('click', () => {
+          currentLang = btn.dataset.lang;
+          localStorage.setItem('autocode-lang', currentLang);
+          buttons.forEach(b => b.classList.remove('active'));
+          btn.classList.add('active');
+          // Update default prompt language
+          currentPromptLang = currentLang;
+          // Update all UI text
+          updateUILanguage();
+        });
+      });
+    }
+    // Initialize
+    init();
+    initLangSwitcher();
+    updateUILanguage();
+  </script>
+</body>
+</html>`;
+}
+//# sourceMappingURL=pipeline-configurator.js.map