npm - @autocode-cli/autocode - Versions diffs - 0.8.37 → 0.22.0 - Mend

@autocode-cli/autocode 0.8.37 → 0.22.0

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 (1534) hide show

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

@@ -1,1783 +0,0 @@
-/**
- * Pipeline configurator page generator
- */
-import { generateI18nScript, generateLangSwitcher } from '../shared/index.js';
-// Pipeline-specific translation keys
-const pipelineKeys = [
-    'pipeline.backBtn', 'pipeline.title', 'pipeline.titleSpan', 'pipeline.savePipeline',
-    'pipeline.activateSync', 'pipeline.pipelines', 'pipeline.newPipeline', 'pipeline.noSelected',
-    'pipeline.noSelectedDesc', 'pipeline.createFirst', 'pipeline.pipelineName', 'pipeline.version',
-    'pipeline.delete', 'pipeline.description', 'pipeline.descPlaceholder', 'pipeline.definition',
-    'pipeline.definitionDesc', 'pipeline.action', 'pipeline.actionDesc', 'pipeline.finish',
-    'pipeline.finishDesc', 'pipeline.catalog', 'pipeline.catalogHint', 'pipeline.addColumn',
-    'pipeline.syncPreview', 'pipeline.createNewPipeline', 'pipeline.create', 'pipeline.cancel',
-    'pipeline.addColumnTitle', 'pipeline.addColumnDesc', 'pipeline.columnName', 'pipeline.segment',
-    'pipeline.segmentDefinition', 'pipeline.segmentAction', 'pipeline.segmentFinish',
-    'pipeline.describeColumn', 'pipeline.generateClaude', 'pipeline.generating', 'pipeline.promptPreview',
-    'pipeline.loading', 'pipeline.noPrompt', 'pipeline.columnBelongsTo', 'pipeline.segmentLabel',
-    'pipeline.cannotMoveBetween', 'pipeline.columnExists', 'pipeline.pipelineSaved',
-    'pipeline.pipelineCreated', 'pipeline.pipelineDeleted', 'pipeline.pipelineActivated',
-    'pipeline.fillAllFields', 'pipeline.enterPipelineName', 'pipeline.keyExists',
-    'pipeline.confirmDelete', 'pipeline.selectPipeline', 'pipeline.selectPipelineDesc',
-    'pipeline.columnAdded', 'pipeline.errorFillFields', 'pipeline.errorColumnExists',
-    'pipeline.errorGeneric', 'pipeline.applyColumn', 'pipeline.removeColumn', 'pipeline.columnApplied',
-    'pipeline.columnRemoved', 'pipeline.selectPipelineFirst', 'pipeline.analyze', 'pipeline.analysisTitle',
-    'pipeline.analyzing', 'pipeline.analysisError', 'pipeline.close', 'pipeline.autocreateTitle',
-    'pipeline.autocreateDesc', 'pipeline.autocreateBtn', 'pipeline.analyzeSectionTitle',
-    'pipeline.analyzeSectionDesc', 'pipeline.analyzeSectionBtn',
-];
-/**
- * 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); }
-    .column-item .order-btns {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      margin-right: 4px;
-    }
-    .column-item .order-btn {
-      background: none;
-      border: none;
-      color: var(--muted);
-      cursor: pointer;
-      padding: 2px 4px;
-      border-radius: 3px;
-      font-size: 10px;
-      line-height: 1;
-    }
-    .column-item .order-btn:hover { color: var(--accent); background: rgba(124, 58, 237, 0.1); }
-    .column-item .order-btn:disabled { opacity: 0.2; cursor: not-allowed; }
-    .column-item .order-btn:disabled:hover { color: var(--muted); background: none; }
-    /* 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);
-    }
-    /* Analysis Modal */
-    .analysis-modal {
-      max-width: 900px;
-      width: 95%;
-      max-height: 90vh;
-      display: flex;
-      flex-direction: column;
-    }
-    .analysis-content {
-      flex: 1;
-      overflow-y: auto;
-      max-height: 70vh;
-      padding: 16px;
-      background: var(--bg);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      font-size: 14px;
-      line-height: 1.6;
-    }
-    .analysis-loading {
-      text-align: center;
-      padding: 40px;
-      color: var(--muted);
-    }
-    .analysis-error {
-      color: var(--red);
-      background: rgba(239, 68, 68, 0.1);
-      padding: 12px;
-      border-radius: 6px;
-    }
-    /* Markdown styles in analysis */
-    .analysis-content h1 { font-size: 20px; margin: 20px 0 12px 0; color: var(--accent); border-bottom: 1px solid var(--border); padding-bottom: 8px; }
-    .analysis-content h2 { font-size: 17px; margin: 18px 0 10px 0; color: var(--blue); }
-    .analysis-content h3 { font-size: 15px; margin: 14px 0 8px 0; color: var(--fg); }
-    .analysis-content p { margin: 8px 0; }
-    .analysis-content ul, .analysis-content ol { margin: 8px 0; padding-left: 24px; }
-    .analysis-content li { margin: 4px 0; }
-    .analysis-content strong { color: var(--fg); }
-    .analysis-content code { background: var(--bg-card); padding: 2px 6px; border-radius: 4px; font-family: monospace; font-size: 13px; }
-    .analysis-content pre { background: var(--bg-card); padding: 12px; border-radius: 6px; overflow-x: auto; margin: 10px 0; }
-    .analysis-content pre code { background: none; padding: 0; }
-    .analysis-content blockquote { border-left: 3px solid var(--accent); padding-left: 12px; margin: 10px 0; color: var(--muted); }
-    .analysis-content table { width: 100%; border-collapse: collapse; margin: 10px 0; }
-    .analysis-content th, .analysis-content td { border: 1px solid var(--border); padding: 8px; text-align: left; }
-    .analysis-content th { background: var(--bg-card); }
-  </style>
-</head>
-<body>
-  <header class="header">
-    <a href="/" class="back-btn">← Dashboard</a>
-    <h1 class="title"><span>Pipeline</span> Configurator</h1>
-    ${generateLangSwitcher()}
-    <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 id="labelPipelineName">Pipeline Name</label>
-              <input type="text" id="pipelineName" placeholder="e.g., Default Pipeline">
-            </div>
-            <div class="form-group">
-              <label id="labelVersion">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 id="labelDescription">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" id="segmentTitleDefinition">Definition</span>
-            </div>
-            <div class="segment-desc" id="segmentDescDefinition">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" id="segmentTitleAction">Action</span>
-            </div>
-            <div class="segment-desc" id="segmentDescAction">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" id="segmentTitleFinish">Finish</span>
-            </div>
-            <div class="segment-desc" id="segmentDescFinish">Finalization and deployment columns</div>
-            <div class="segment-columns" id="finishColumns" data-segment="finish">
-              <!-- Columns added here -->
-            </div>
-          </div>
-        </div>
-        <!-- Analyze Section -->
-        <div class="analyze-section" id="analyzeSection" style="margin-top: 24px; margin-bottom: 12px; padding: 20px; background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); border-radius: 8px; color: white;">
-          <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;">
-            <div>
-              <h3 id="analyzeSectionTitle" style="margin: 0 0 4px 0; font-size: 16px; font-weight: 600;">Analyze Pipeline</h3>
-              <p id="analyzeSectionDesc" style="margin: 0; font-size: 13px; opacity: 0.9;">Review your current pipeline configuration with Claude</p>
-            </div>
-            <button class="btn" id="analyzeSectionBtn" onclick="runAnalysis()" style="background: white; color: #3b82f6; font-weight: 600; padding: 8px 16px; border-radius: 4px; font-size: 13px; border: none; cursor: pointer;">Analyze</button>
-          </div>
-        </div>
-        <!-- Autocreate Section -->
-        <div class="autocreate-section" id="autocreateSection" style="margin-bottom: 24px; padding: 20px; background: linear-gradient(135deg, var(--accent) 0%, #7c3aed 100%); border-radius: 8px; color: white;">
-          <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;">
-            <div>
-              <h3 id="autocreateTitle" style="margin: 0 0 4px 0; font-size: 16px; font-weight: 600;">Autocreate</h3>
-              <p id="autocreateDesc" style="margin: 0; font-size: 13px; opacity: 0.9;">Analyze your project and generate relevant columns automatically</p>
-            </div>
-            <a href="/settings/pipeline/autocreate" class="btn" id="autocreateBtn" style="background: white; color: var(--accent); font-weight: 600; text-decoration: none; padding: 8px 16px; border-radius: 4px; font-size: 13px;">Analyze Project</a>
-          </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 id="addColumnError" class="form-error" style="display: none; color: #e74c3c; background: #fdf2f2; padding: 8px 12px; border-radius: 4px; margin-top: 12px; font-size: 13px;"></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 class="modal-actions" id="promptPreviewActions" style="display: none;">
-        <button class="btn btn-success" id="applyColumnBtn" onclick="applyColumnFromModal()">Apply</button>
-        <button class="btn btn-danger" id="removeColumnBtn" onclick="removeColumnFromModal()" style="display: none;">Remove</button>
-      </div>
-    </div>
-  </div>
-  <!-- Analysis Modal -->
-  <div class="modal-overlay" id="analysisModal">
-    <div class="modal analysis-modal">
-      <div class="modal-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
-        <h3 id="analysisModalTitle" style="margin: 0;">Pipeline Analysis</h3>
-        <button class="btn btn-secondary" onclick="closeAnalysisModal()" style="padding: 4px 10px;">✕</button>
-      </div>
-      <div id="analysisContent" class="analysis-content">
-        <div class="analysis-loading">Analyzing...</div>
-      </div>
-      <div class="modal-actions">
-        <button class="btn btn-secondary" onclick="closeAnalysisModal()">Close</button>
-      </div>
-    </div>
-  </div>
-  <script>
-    ${generateI18nScript({
-        keys: pipelineKeys,
-        onLangChangeCallback: 'onPipelineLangChange',
-    })}
-    // Wrapper for backward compatibility - prepends 'pipeline.' to keys
-    const tBase = t;
-    function t(key) {
-      return tBase('pipeline.' + key);
-    }
-    // Callback after language change
-    function onPipelineLangChange() {
-      currentPromptLang = currentLang;
-      updateUILanguage();
-    }
-    function updateUILanguage() {
-      const setText = (el, text) => { if (el) el.textContent = text; };
-      const setPlaceholder = (el, text) => { if (el) el.placeholder = text; };
-      const $ = (id) => document.getElementById(id);
-      const $q = (sel) => document.querySelector(sel);
-      // Header
-      setText($q('.back-btn'), t('backBtn'));
-      setText($q('.title span'), t('titleSpan'));
-      const titleEl = $q('.title');
-      if (titleEl && titleEl.childNodes[2]) titleEl.childNodes[2].textContent = ' ' + t('title');
-      setText($('savePipelineBtn'), t('savePipeline'));
-      setText($('activateBtn'), t('activateSync'));
-      // Analysis modal
-      setText($('analysisModalTitle'), t('analysisTitle'));
-      setText($q('#analysisModal .modal-actions button'), t('close'));
-      // Sidebar
-      setText($q('.sidebar h2'), t('pipelines'));
-      setText($('newPipelineBtn'), t('newPipeline'));
-      // Empty state
-      setText($q('#emptyState h3'), t('noSelected'));
-      setText($q('#emptyState p'), t('noSelectedDesc'));
-      setText($('createFirstBtn'), t('createFirst'));
-      // Pipeline form labels
-      setText($('labelPipelineName'), t('pipelineName'));
-      setText($('labelVersion'), t('version'));
-      setText($('labelDescription'), t('description'));
-      setText($('deletePipelineBtn'), t('delete'));
-      setPlaceholder($('pipelineDescription'), t('descPlaceholder'));
-      // Segments
-      setText($('segmentTitleDefinition'), t('definition'));
-      setText($('segmentDescDefinition'), t('definitionDesc'));
-      setText($('segmentTitleAction'), t('action'));
-      setText($('segmentDescAction'), t('actionDesc'));
-      setText($('segmentTitleFinish'), t('finish'));
-      setText($('segmentDescFinish'), t('finishDesc'));
-      // Autocreate section
-      setText($('autocreateTitle'), t('autocreateTitle'));
-      setText($('autocreateDesc'), t('autocreateDesc'));
-      setText($('autocreateBtn'), t('autocreateBtn'));
-      // Analyze section
-      setText($('analyzeSectionTitle'), t('analyzeSectionTitle'));
-      setText($('analyzeSectionDesc'), t('analyzeSectionDesc'));
-      setText($('analyzeSectionBtn'), t('analyzeSectionBtn'));
-      // Catalog
-      const catalogH2 = $q('.catalog h2');
-      if (catalogH2 && catalogH2.childNodes[0]) {
-        catalogH2.childNodes[0].textContent = t('catalog') + ' ';
-        setText(catalogH2.querySelector('span'), t('catalogHint'));
-        setText(catalogH2.querySelector('button'), t('addColumn'));
-      }
-      // Sync preview
-      setText($q('#syncPreview h3'), t('syncPreview'));
-      // New pipeline modal
-      setText($q('#newPipelineModal h3'), t('createNewPipeline'));
-      setText($q('#newPipelineModal label'), t('pipelineName'));
-      setText($q('#newPipelineModal .btn-secondary'), t('cancel'));
-      setText($q('#newPipelineModal .btn-primary'), t('create'));
-      // Add column modal
-      setText($q('#addColumnModal h3'), t('addColumnTitle'));
-      setText($q('#addColumnModal .modal > p'), t('addColumnDesc'));
-      const addColLabels = document.querySelectorAll('#addColumnModal label');
-      setText(addColLabels[0], t('columnName'));
-      setText(addColLabels[1], t('segment'));
-      setText(addColLabels[2], t('describeColumn'));
-      const segOpts = document.querySelectorAll('#newColumnSegment option');
-      setText(segOpts[0], t('segmentDefinition'));
-      setText(segOpts[1], t('segmentAction'));
-      setText(segOpts[2], t('segmentFinish'));
-      setText($q('#addColumnModal .btn-secondary'), t('cancel'));
-      setText($('generateColumnText'), t('generateClaude'));
-      setText($('generateColumnSpinner'), t('generating'));
-      // Prompt preview modal
-      setText($('promptPreviewTitle'), 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';
-    let currentModalColumn = null; // { slug, name, segment }
-    // 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 analyzeSectionBtn = document.getElementById('analyzeSectionBtn');
-    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, segment);
-            }
-          };
-          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';
-      }
-      updateEmptyState();
-    }
-    // Update empty state message based on whether pipelines exist
-    function updateEmptyState() {
-      const h3 = document.querySelector('#emptyState h3');
-      const p = document.querySelector('#emptyState p');
-      const btn = document.getElementById('createFirstBtn');
-      if (pipelines.length > 0) {
-        // Pipelines exist but none selected
-        if (h3) h3.textContent = t('selectPipeline');
-        if (p) p.textContent = t('selectPipelineDesc');
-        if (btn) btn.style.display = 'none';
-      } else {
-        // No pipelines at all
-        if (h3) h3.textContent = t('noSelected');
-        if (p) p.textContent = t('noSelectedDesc');
-        if (btn) btn.style.display = '';
-      }
-    }
-    // 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] || [];
-        const total = columns.length;
-        columns.forEach((col, index) => {
-          const item = createColumnItem(col, segment, index, total);
-          container.appendChild(item);
-        });
-      });
-    }
-    // Create a column item element
-    function createColumnItem(col, segment, index, total) {
-      const item = document.createElement('div');
-      item.className = 'column-item';
-      item.draggable = true;
-      item.dataset.segment = segment;
-      item.dataset.index = index;
-      const isFirst = index === 0;
-      const isLast = index === total - 1;
-      item.innerHTML =
-        '<span class="drag-handle">⋮⋮</span>' +
-        '<div class="order-btns">' +
-          '<button class="order-btn up-btn" title="Move up"' + (isFirst ? ' disabled' : '') + '>▲</button>' +
-          '<button class="order-btn down-btn" title="Move down"' + (isLast ? ' disabled' : '') + '>▼</button>' +
-        '</div>' +
-        '<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);
-      };
-      item.querySelector('.up-btn').onclick = (e) => {
-        e.stopPropagation();
-        if (!isFirst) moveColumn(segment, index, index - 1);
-      };
-      item.querySelector('.down-btn').onclick = (e) => {
-        e.stopPropagation();
-        if (!isLast) moveColumn(segment, index, index + 1);
-      };
-      return item;
-    }
-    // Move column within segment
-    function moveColumn(segment, fromIndex, toIndex) {
-      if (!currentPipeline || !currentPipeline[segment]) return;
-      const columns = currentPipeline[segment];
-      const [removed] = columns.splice(fromIndex, 1);
-      columns.splice(toIndex, 0, removed);
-      renderSegmentColumns();
-      hasChanges = true;
-      updateButtons();
-    }
-    // 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;
-      analyzeSectionBtn.disabled = !currentPipeline;
-      // 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>Issues 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, segment) {
-      currentPromptSlug = slug;
-      currentPromptLang = currentLang || 'en';
-      currentModalColumn = { slug, name, segment };
-      document.getElementById('promptPreviewTitle').textContent = name;
-      document.getElementById('promptPreviewModal').classList.add('show');
-      updatePromptLangButtons();
-      updatePromptActionButtons();
-      await loadPromptContent();
-    }
-    function updatePromptActionButtons() {
-      const actionsDiv = document.getElementById('promptPreviewActions');
-      const applyBtn = document.getElementById('applyColumnBtn');
-      const removeBtn = document.getElementById('removeColumnBtn');
-      // Only show actions if a pipeline is selected
-      if (!currentPipeline || !currentModalColumn) {
-        actionsDiv.style.display = 'none';
-        return;
-      }
-      actionsDiv.style.display = 'flex';
-      const segment = currentModalColumn.segment;
-      const isInPipeline = currentPipeline[segment]?.some(c => c.slug.includes(currentModalColumn.slug));
-      applyBtn.textContent = t('applyColumn');
-      removeBtn.textContent = t('removeColumn');
-      if (isInPipeline) {
-        applyBtn.style.display = 'none';
-        removeBtn.style.display = '';
-      } else {
-        applyBtn.style.display = '';
-        removeBtn.style.display = 'none';
-      }
-    }
-    function applyColumnFromModal() {
-      if (!currentPipeline) {
-        showNotification(t('selectPipelineFirst'), 'warning');
-        return;
-      }
-      if (!currentModalColumn) return;
-      addColumn(currentModalColumn.segment, currentModalColumn.slug, currentModalColumn.name);
-      showNotification(t('columnApplied'));
-      closePromptPreview();
-    }
-    function removeColumnFromModal() {
-      if (!currentPipeline || !currentModalColumn) return;
-      const segment = currentModalColumn.segment;
-      const index = currentPipeline[segment]?.findIndex(c => c.slug.includes(currentModalColumn.slug));
-      if (index !== undefined && index >= 0) {
-        removeColumn(segment, index);
-        showNotification(t('columnRemoved'));
-        closePromptPreview();
-      }
-    }
-    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';
-      hideAddColumnError();
-    }
-    function closeAddColumnModal() {
-      document.getElementById('addColumnModal').classList.remove('show');
-      hideAddColumnError();
-    }
-    function showAddColumnError(message) {
-      const errorEl = document.getElementById('addColumnError');
-      errorEl.textContent = message;
-      errorEl.style.display = 'block';
-    }
-    function hideAddColumnError() {
-      const errorEl = document.getElementById('addColumnError');
-      errorEl.style.display = 'none';
-      errorEl.textContent = '';
-    }
-    async function generateColumn() {
-      const name = document.getElementById('newColumnName').value.trim();
-      const segment = document.getElementById('newColumnSegment').value;
-      const description = document.getElementById('newColumnDescription').value.trim();
-      hideAddColumnError();
-      if (!name || !description) {
-        showAddColumnError(t('errorFillFields'));
-        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 {
-          // Check for duplicate slug error
-          if (data.error && data.error.includes('already exists')) {
-            showAddColumnError(t('errorColumnExists'));
-          } else {
-            showAddColumnError(data.error || t('errorGeneric'));
-          }
-        }
-      } catch (e) {
-        showAddColumnError(e.message);
-      } 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 || '-';
-    });
-    // =============== Pipeline Analysis ===============
-    // Simple markdown to HTML renderer
-    function renderMarkdown(text) {
-      if (!text) return '';
-      // Escape HTML first
-      let html = text
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;');
-      // Code blocks (must be before inline code)
-      html = html.replace(/\`\`\`([\\s\\S]*?)\`\`\`/g, '<pre><code>$1</code></pre>');
-      // Headers
-      html = html.replace(/^### (.*$)/gm, '<h3>$1</h3>');
-      html = html.replace(/^## (.*$)/gm, '<h2>$1</h2>');
-      html = html.replace(/^# (.*$)/gm, '<h1>$1</h1>');
-      // Bold and italic
-      html = html.replace(/\\*\\*([^*]+)\\*\\*/g, '<strong>$1</strong>');
-      html = html.replace(/\\*([^*]+)\\*/g, '<em>$1</em>');
-      // Inline code
-      html = html.replace(/\`([^\`]+)\`/g, '<code>$1</code>');
-      // Lists
-      html = html.replace(/^\\* (.*$)/gm, '<li>$1</li>');
-      html = html.replace(/^- (.*$)/gm, '<li>$1</li>');
-      html = html.replace(/^\\d+\\. (.*$)/gm, '<li>$1</li>');
-      // Wrap consecutive li elements in ul
-      html = html.replace(/(<li>.*<\\/li>\\n?)+/g, (match) => '<ul>' + match + '</ul>');
-      // Paragraphs (double newlines)
-      html = html.replace(/\\n\\n/g, '</p><p>');
-      // Single newlines to br (except after block elements)
-      html = html.replace(/([^>])\\n([^<])/g, '$1<br>$2');
-      // Wrap in paragraph
-      html = '<p>' + html + '</p>';
-      // Clean up empty paragraphs
-      html = html.replace(/<p><\\/p>/g, '');
-      html = html.replace(/<p>(<h[1-3]>)/g, '$1');
-      html = html.replace(/(<\\/h[1-3]>)<\\/p>/g, '$1');
-      html = html.replace(/<p>(<ul>)/g, '$1');
-      html = html.replace(/(<\\/ul>)<\\/p>/g, '$1');
-      html = html.replace(/<p>(<pre>)/g, '$1');
-      html = html.replace(/(<\\/pre>)<\\/p>/g, '$1');
-      return html;
-    }
-    // Run pipeline analysis
-    async function runAnalysis() {
-      const modal = document.getElementById('analysisModal');
-      const content = document.getElementById('analysisContent');
-      // Show modal with loading state
-      modal.classList.add('show');
-      content.innerHTML = '<div class="analysis-loading">' + t('analyzing') + '</div>';
-      try {
-        const response = await fetch('/api/pipeline/analyze', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            lang: currentLang,
-            pipelineKey: currentPipelineKey
-          })
-        });
-        const data = await response.json();
-        if (data.success && data.data?.analysis) {
-          content.innerHTML = renderMarkdown(data.data.analysis);
-        } else {
-          content.innerHTML = '<div class="analysis-error">' + t('analysisError') + ': ' + (data.error || 'Unknown error') + '</div>';
-        }
-      } catch (error) {
-        content.innerHTML = '<div class="analysis-error">' + t('analysisError') + ': ' + error.message + '</div>';
-      }
-    }
-    // Close analysis modal
-    function closeAnalysisModal() {
-      document.getElementById('analysisModal').classList.remove('show');
-    }
-    // Initialize
-    init().then(() => {
-      updateUILanguage();
-      updateEmptyState();
-    });
-    updateUILanguage();
-  </script>
-</body>
-</html>`;
-}
-//# sourceMappingURL=pipeline-configurator.js.map