feat: Implement Pipeline Templates for Company Suite and refine orchestration logic

media/sidebar.html

@@ -224,7 +224,11 @@
                     <div class="map-section-hint">CEO 자유 분배 대신 사용자가 정한 stage 순서대로 dispatch합니다. loop-back 정규식이 매칭되면 이전 stage로 되돌아갑니다 (최대 maxIterations 회).</div>
                 </div>
                 <div class="map-btn-group">
-                    <button class="secondary-btn" id="addCompanyPipelineBtn" title="새 파이프라인 추가">+ Pipeline</button>
+                    <select id="pipelineTemplateSel" title="템플릿에서 새 파이프라인 만들기"
+                        style="padding:3px 6px; font-size:10px; background:var(--surface); color:var(--text-primary); border:1px solid var(--border); border-radius:5px;">
+                        <option value="">📋 템플릿에서…</option>
+                    </select>
+                    <button class="secondary-btn" id="addCompanyPipelineBtn" title="빈 파이프라인부터 시작">+ 빈 Pipeline</button>
                 </div>
             </div>
             <div class="control-row" style="margin-top:8px; gap:8px; align-items:center;">
@@ -236,26 +240,24 @@
             <ul id="companyPipelineList" class="map-list" style="margin-top:8px;"></ul>
         </div>
 
-        <!-- Pipeline editor: hidden until "+ Pipeline" or "Edit" is clicked.
-             MVP is a JSON textarea so we don't have to ship a stage-list
-             reorder widget yet. -->
+        <!-- Pipeline editor — 카드형 stage 에디터.
+             각 stage는 직군 → 담당 cascading + 지시 텍스트 + 재시도 옵션을
+             가진 카드 한 장으로 표현. JSON 직접 편집은 더 이상 불필요. -->
         <div id="pipelineEditForm" class="map-section company-agent-add-form" data-open="false">
             <div class="map-section-title" style="margin-bottom:8px;">파이프라인 편집</div>
             <div class="company-agent-add-grid">
-                <label class="field-label">ID
+                <label class="field-label">ID (한 번 정하면 변경 불가)
                     <input type="text" id="pipelineEditId" placeholder="product-dev-v1" />
                 </label>
                 <label class="field-label">이름
                     <input type="text" id="pipelineEditName" placeholder="제품 개발 v1" />
                 </label>
-                <label class="field-label" style="grid-column:1/-1;">Stages (JSON 배열)
-                    <textarea id="pipelineEditStages" rows="14" style="font-family:monospace; font-size:11px;"></textarea>
-                </label>
             </div>
-            <div class="map-section-hint" style="margin-top:6px;">
-                예시:
-                <code style="font-size:10px;">[{"id":"plan","label":"기획","agentId":"writer","instructionTemplate":"{{userPrompt}} 에 대한 기획서 작성"},{"id":"dev","label":"개발","agentId":"developer","instructionTemplate":"다음 기획대로 구현: {{stage.plan}}","loopBackPattern":"버그|오류|fail","loopBackTo":"plan","maxIterations":3}]</code>
+            <div style="display:flex; justify-content:space-between; align-items:center; margin-top:12px; margin-bottom:6px;">
+                <div style="font-size:11px; font-weight:700; color:var(--text-bright);">단계 (Stages)</div>
+                <button class="secondary-btn" id="addStageBtn" style="font-size:10px; padding:3px 8px;">+ Stage 추가</button>
             </div>
+            <ul id="pipelineStageList" class="pipeline-stage-list"></ul>
             <div class="editor-actions" style="margin-top:10px;">
                 <button id="cancelPipelineEditBtn">Cancel</button>
                 <button class="primary" id="savePipelineEditBtn">저장</button>