claude-controller 0.2.0 → 0.3.0

package/web/static/pipelines.js

@@ -6,6 +6,8 @@
 let _pipelines = [];
 let _pipelinePollTimer = null;
 let _pipelineCountdownTimer = null;
+const _POLL_FAST = 2000;   // job 실행 중
+const _POLL_NORMAL = 5000; // 대기 중
 
 async function fetchPipelines() {
   try {
@@ -13,17 +15,27 @@ async function fetchPipelines() {
     renderPipelines();
 
     const hasActive = _pipelines.some(p => p.status === 'active');
-    if (hasActive && !_pipelinePollTimer) {
-      _pipelinePollTimer = setInterval(_pipelinePollTick, 5000);
-    } else if (!hasActive && _pipelinePollTimer) {
+    const hasRunning = _pipelines.some(p => p.status === 'active' && p.job_id);
+    const desiredInterval = hasRunning ? _POLL_FAST : _POLL_NORMAL;
+
+    if (hasActive) {
+      // 간격이 바뀌었으면 타이머 재설정
+      if (_pipelinePollTimer && _pipelinePollTimer._interval !== desiredInterval) {
+        clearInterval(_pipelinePollTimer);
+        _pipelinePollTimer = null;
+      }
+      if (!_pipelinePollTimer) {
+        _pipelinePollTimer = setInterval(_pipelinePollTick, desiredInterval);
+        _pipelinePollTimer._interval = desiredInterval;
+      }
+    } else if (_pipelinePollTimer) {
       clearInterval(_pipelinePollTimer);
       _pipelinePollTimer = null;
     }
 
-    const hasTimer = _pipelines.some(p => p.status === 'active');
-    if (hasTimer && !_pipelineCountdownTimer) {
+    if (hasActive && !_pipelineCountdownTimer) {
       _pipelineCountdownTimer = setInterval(_updateCountdowns, 1000);
-    } else if (!hasTimer && _pipelineCountdownTimer) {
+    } else if (!hasActive && _pipelineCountdownTimer) {
       clearInterval(_pipelineCountdownTimer);
       _pipelineCountdownTimer = null;
     }
@@ -31,12 +43,16 @@ async function fetchPipelines() {
 }
 
 async function _pipelinePollTick() {
-  const hasRunning = _pipelines.some(p => p.status === 'active' && p.job_id);
-  if (hasRunning) {
+  const hasActive = _pipelines.some(p => p.status === 'active');
+  if (hasActive) {
     try {
-      await apiFetch('/api/pipelines/tick-all', {
+      const results = await apiFetch('/api/pipelines/tick-all', {
         method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}',
       });
+      // 완료/에러/디스패치 감지 시 jobs 목록도 즉시 갱신
+      if (Array.isArray(results) && results.some(r => r.result && (r.result.action === 'completed' || r.result.action === 'error' || r.result.action === 'dispatched'))) {
+        fetchJobs();
+      }
     } catch { /* silent */ }
   }
   fetchPipelines();
@@ -56,14 +72,23 @@ function _updateCountdowns() {
 
     if (!p.next_run) {
       el.textContent = _formatTimer(0);
+      // next_run 없고 job도 없으면 즉시 dispatch (프리셋 생성 직후 등)
+      if (!p._dispatching && !p.job_id) {
+        p._dispatching = true;
+        apiFetch(`/api/pipelines/${encodeURIComponent(p.id)}/run`, {
+          method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}',
+        }).then(() => { fetchPipelines(); fetchJobs(); setTimeout(fetchJobs, 1000); })
+          .catch(() => {})
+          .finally(() => { p._dispatching = false; });
+      }
       continue;
     }
 
     const remaining = Math.max(0, Math.floor((new Date(p.next_run).getTime() - Date.now()) / 1000));
     el.textContent = _formatTimer(remaining);
 
-    // 타이머 0 → 즉시 dispatch + 로컬에서 next_run 갱신
-    if (remaining <= 0 && !p._dispatching) {
+    // 타이머 0 → 이미 job_id가 있으면 skip (이중 발사 방지)
+    if (remaining <= 0 && !p._dispatching && !p.job_id) {
       p._dispatching = true;
       // 로컬에서 즉시 next_run 갱신 → 타이머 끊김 방지
       if (p.interval_sec) {
@@ -104,18 +129,40 @@ function renderPipelines() {
     }
 
     const cmdPreview = (p.command || '').substring(0, 80) + ((p.command || '').length > 80 ? '...' : '');
-    const intervalLabel = p.interval ? `<span style="font-size:0.65rem;padding:1px 5px;background:rgba(59,130,246,0.1);color:var(--primary);border-radius:3px;">${escapeHtml(p.interval)} 반복</span>` : '';
+    const projectName = p.project_path ? p.project_path.split('/').filter(Boolean).pop() : '';
+    const projectPath = p.project_path || '';
+
+    // 적응형 인터벌 표시
+    const baseInterval = p.interval_sec;
+    const effectiveInterval = p.effective_interval_sec;
+    const isAdapted = baseInterval && effectiveInterval && baseInterval !== effectiveInterval;
+    let intervalLabel = '';
+    if (p.interval) {
+      if (isAdapted) {
+        const effMin = Math.round(effectiveInterval / 60);
+        const pct = Math.round((effectiveInterval - baseInterval) / baseInterval * 100);
+        intervalLabel = `<span style="font-size:0.65rem;padding:1px 5px;background:rgba(168,85,247,0.1);color:#a855f7;border-radius:3px;" title="기본: ${escapeHtml(p.interval)}, 적응: ${effMin}분 (${pct > 0 ? '+' : ''}${pct}%)">${effMin}분 적응</span>`;
+      } else {
+        intervalLabel = `<span style="font-size:0.65rem;padding:1px 5px;background:rgba(59,130,246,0.1);color:var(--primary);border-radius:3px;">${escapeHtml(p.interval)} 반복</span>`;
+      }
+    }
+
+    // 체이닝 표시
+    const chainLabel = p.on_complete ? `<span style="font-size:0.65rem;padding:1px 5px;background:rgba(34,197,94,0.1);color:#22c55e;border-radius:3px;" title="완료 시 트리거">→ chain</span>` : '';
+
+    const runningBadge = isRunning ? `<span class="pipe-running-badge"><span class="pipe-running-dot"></span>실행 중</span>` : '';
     const runCount = p.run_count ? `<span style="font-size:0.65rem;color:var(--text-muted);">${p.run_count}회</span>` : '';
 
     const toggleBtn = isOn
       ? `<button class="btn btn-sm" onclick="stopPipeline('${p.id}')">OFF</button>`
       : `<button class="btn btn-sm btn-primary" onclick="runPipeline('${p.id}')">ON</button>`;
 
-    return `<div class="pipeline-card" data-pipe-id="${p.id}">
+    return `<div class="pipeline-card${isRunning ? ' is-running' : ''}" data-pipe-id="${p.id}">
       <div class="pipeline-card-header">
         <div class="pipeline-card-title">${escapeHtml(p.name || p.id)}</div>
-        <div style="display:flex;gap:4px;align-items:center;">${intervalLabel} ${timerHtml}</div>
+        <div style="display:flex;gap:4px;align-items:center;">${runningBadge} ${intervalLabel} ${chainLabel} ${timerHtml}</div>
       </div>
+      ${projectName ? `<div style="font-size:0.65rem;color:var(--text-muted);margin:2px 0 0 0;display:flex;align-items:center;gap:3px;" title="${escapeHtml(projectPath)}"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>${escapeHtml(projectName)}</div>` : ''}
       <div class="pipeline-card-goal" style="font-size:0.75rem;color:var(--text-secondary);margin:4px 0;font-family:var(--font-mono,monospace);">${escapeHtml(cmdPreview)}</div>
       ${p.last_error ? `<div style="font-size:0.7rem;color:var(--danger);margin:4px 0;padding:4px 8px;background:rgba(239,68,68,0.1);border-radius:4px;">${escapeHtml(p.last_error)}</div>` : ''}
       <div style="display:flex;gap:8px;font-size:0.7rem;color:var(--text-muted);align-items:center;">
@@ -125,6 +172,7 @@ function renderPipelines() {
       <div class="pipeline-card-actions" style="margin-top:8px;display:flex;gap:6px;">
         ${toggleBtn}
         <button class="btn btn-sm" onclick="editPipeline('${p.id}')">수정</button>
+        ${p.run_count ? `<button class="btn btn-sm" onclick="showPipelineHistory('${p.id}')">이력</button>` : ''}
         <button class="btn btn-sm btn-danger" onclick="deletePipeline('${p.id}')">삭제</button>
       </div>
     </div>`;
@@ -250,3 +298,190 @@ async function deletePipeline(pipeId) {
     showToast(err.message || '삭제 실패', 'error');
   }
 }
+
+/* ── 진화 요약 패널 ── */
+async function fetchEvolutionSummary() {
+  const el = document.getElementById('evolutionSummary');
+  if (!el) return;
+  try {
+    const data = await apiFetch('/api/pipelines/evolution');
+    const cls = data.classifications || {};
+    const total = (cls.has_change || 0) + (cls.no_change || 0) + (cls.unknown || 0);
+    const adaptations = (data.interval_adaptations || []);
+
+    let adaptHtml = '';
+    if (adaptations.length > 0) {
+      adaptHtml = adaptations.map(a =>
+        `<span style="font-size:0.65rem;color:#a855f7;">${escapeHtml(a.name)}: ${a.change_pct > 0 ? '+' : ''}${a.change_pct}%</span>`
+      ).join(' ');
+    }
+
+    el.innerHTML = `<div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:8px 12px;background:var(--bg-secondary);border-radius:8px;font-size:0.7rem;color:var(--text-muted);">
+      <span>총 ${data.total_runs}회 실행</span>
+      <span>효율 ${data.efficiency_pct}%</span>
+      ${total > 0 ? `<span style="color:var(--text-secondary);">변경:${cls.has_change||0} / 무변경:${cls.no_change||0}</span>` : ''}
+      ${adaptHtml}
+    </div>`;
+  } catch { el.innerHTML = ''; }
+}
+
+/* ── 새 자동화 생성 모달 ── */
+function openCreatePipeline() {
+  const cwd = document.getElementById('cwdInput')?.value?.trim() || '';
+  const formId = 'pipeCreate_' + Date.now();
+  const overlay = document.createElement('div');
+  overlay.className = 'settings-overlay';
+  overlay.style.cssText = 'display:flex;align-items:center;justify-content:center;';
+  overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
+  overlay.innerHTML = `<div class="settings-panel" style="max-width:520px;margin:0;">
+    <div class="settings-header">
+      <div class="settings-title" style="display:flex;align-items:center;gap:8px;">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+        <span>새 자동화</span>
+      </div>
+      <button class="settings-close" onclick="this.closest('.settings-overlay').remove()">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+      </button>
+    </div>
+    <div class="settings-body">
+      <div style="margin-bottom:12px;">
+        <label style="font-size:0.72rem;font-weight:600;color:var(--text-secondary);display:block;margin-bottom:4px;">이름</label>
+        <input id="${formId}_name" type="text" placeholder="예: code-quality"
+          style="width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);font-size:0.8rem;box-sizing:border-box;">
+      </div>
+      <div style="margin-bottom:12px;">
+        <label style="font-size:0.72rem;font-weight:600;color:var(--text-secondary);display:block;margin-bottom:4px;">프로젝트 경로</label>
+        <input id="${formId}_path" type="text" value="${escapeHtml(cwd)}"
+          style="width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);font-size:0.8rem;font-family:var(--font-mono,monospace);box-sizing:border-box;">
+      </div>
+      <div style="margin-bottom:12px;">
+        <label style="font-size:0.72rem;font-weight:600;color:var(--text-secondary);display:block;margin-bottom:4px;">명령어 (프롬프트)</label>
+        <textarea id="${formId}_cmd" rows="4" placeholder="Claude에게 시킬 작업을 입력하세요"
+          style="width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);font-size:0.8rem;font-family:var(--font-mono,monospace);resize:vertical;box-sizing:border-box;"></textarea>
+      </div>
+      <div style="display:flex;gap:12px;margin-bottom:12px;">
+        <div style="flex:1;">
+          <label style="font-size:0.72rem;font-weight:600;color:var(--text-secondary);display:block;margin-bottom:4px;">반복 간격 <span style="font-weight:400;color:var(--text-muted);">(비우면 1회)</span></label>
+          <input id="${formId}_interval" type="text" placeholder="예: 5m, 1h"
+            style="width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);font-size:0.8rem;box-sizing:border-box;">
+        </div>
+        <div style="flex:1;">
+          <label style="font-size:0.72rem;font-weight:600;color:var(--text-secondary);display:block;margin-bottom:4px;">체이닝 <span style="font-weight:400;color:var(--text-muted);">(완료 시 트리거)</span></label>
+          <select id="${formId}_chain"
+            style="width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);font-size:0.8rem;box-sizing:border-box;">
+            <option value="">없음</option>
+            ${_pipelines.map(p => `<option value="${escapeHtml(p.id)}">${escapeHtml(p.name || p.id)}</option>`).join('')}
+          </select>
+        </div>
+      </div>
+    </div>
+    <div class="settings-footer" style="display:flex;gap:6px;">
+      <button class="btn btn-sm btn-primary" onclick="_submitCreatePipeline('${formId}',this)">생성 및 실행</button>
+      <button class="btn btn-sm" onclick="this.closest('.settings-overlay').remove()">취소</button>
+    </div>
+  </div>`;
+  document.body.appendChild(overlay);
+  // 포커스
+  setTimeout(() => document.getElementById(formId + '_name')?.focus(), 100);
+}
+
+async function _submitCreatePipeline(formId, btn) {
+  const name = document.getElementById(formId + '_name').value.trim();
+  const project_path = document.getElementById(formId + '_path').value.trim();
+  const command = document.getElementById(formId + '_cmd').value.trim();
+  const interval = document.getElementById(formId + '_interval').value.trim();
+  const on_complete = document.getElementById(formId + '_chain').value;
+
+  if (!project_path) { showToast('프로젝트 경로를 입력하세요', 'error'); return; }
+  if (!command) { showToast('명령어를 입력하세요', 'error'); return; }
+
+  btn.disabled = true;
+  btn.textContent = '생성 중...';
+  try {
+    await apiFetch('/api/pipelines', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name, project_path, command, interval, on_complete }),
+    });
+    showToast('자동화 생성 완료');
+    btn.closest('.settings-overlay').remove();
+    fetchPipelines();
+    fetchJobs();
+  } catch (err) {
+    showToast(err.message || '생성 실패', 'error');
+    btn.disabled = false;
+    btn.textContent = '생성 및 실행';
+  }
+}
+
+/* ── 실행 이력 모달 ── */
+async function showPipelineHistory(pipeId) {
+  try {
+    const data = await apiFetch(`/api/pipelines/${encodeURIComponent(pipeId)}/history`);
+    const overlay = document.createElement('div');
+    overlay.className = 'settings-overlay';
+    overlay.style.cssText = 'display:flex;align-items:center;justify-content:center;';
+    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
+
+    const entries = data.entries || [];
+    let tableHtml = '';
+    if (entries.length === 0) {
+      tableHtml = '<div style="padding:20px;text-align:center;color:var(--text-muted);font-size:0.8rem;">실행 이력이 없습니다.</div>';
+    } else {
+      const rows = entries.map((h, i) => {
+        const cls = h.classification || 'unknown';
+        const clsBadge = cls === 'has_change'
+          ? '<span class="pipe-hist-badge pipe-hist-change">변경</span>'
+          : cls === 'no_change'
+            ? '<span class="pipe-hist-badge pipe-hist-nochange">무변경</span>'
+            : '<span class="pipe-hist-badge pipe-hist-unknown">?</span>';
+        const dur = h.duration_ms ? `${(h.duration_ms / 1000).toFixed(1)}s` : '-';
+        const time = h.completed_at || '';
+        const resultPreview = escapeHtml((h.result || '').substring(0, 120));
+        return `<tr>
+          <td style="white-space:nowrap;">${time}</td>
+          <td>${clsBadge}</td>
+          <td>${dur}</td>
+          <td class="pipe-hist-result" title="${escapeHtml(h.result || '')}">${resultPreview}${(h.result || '').length > 120 ? '...' : ''}</td>
+        </tr>`;
+      }).join('');
+      tableHtml = `<div class="pipe-hist-table-wrap"><table class="pipe-hist-table">
+        <thead><tr><th>시간</th><th>분류</th><th>소요</th><th>결과 요약</th></tr></thead>
+        <tbody>${rows}</tbody>
+      </table></div>`;
+    }
+
+    const summaryHtml = `<div style="display:flex;gap:12px;font-size:0.72rem;color:var(--text-muted);margin-bottom:12px;">
+      <span>총 ${data.run_count}회 실행</span>
+    </div>`;
+
+    overlay.innerHTML = `<div class="settings-panel" style="max-width:700px;margin:0;">
+      <div class="settings-header">
+        <div class="settings-title" style="display:flex;align-items:center;gap:8px;">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+          <span>${escapeHtml(data.name || pipeId)} — 실행 이력</span>
+        </div>
+        <button class="settings-close" onclick="this.closest('.settings-overlay').remove()">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+        </button>
+      </div>
+      <div class="settings-body" style="padding:12px 16px;">
+        ${summaryHtml}
+        ${tableHtml}
+      </div>
+      <div class="settings-footer">
+        <button class="btn btn-sm" onclick="this.closest('.settings-overlay').remove()">닫기</button>
+      </div>
+    </div>`;
+    document.body.appendChild(overlay);
+  } catch (err) {
+    showToast(err.message || '이력 조회 실패', 'error');
+  }
+}
+
+// fetchPipelines 후 진화 요약도 갱신
+const _origFetchPipelines = fetchPipelines;
+fetchPipelines = async function() {
+  await _origFetchPipelines();
+  fetchEvolutionSummary();
+};

package/web/static/presets.js

@@ -0,0 +1,244 @@
+/* ===================================================
+   Presets -- 자동화 프리셋 브라우징/적용 UI
+   =================================================== */
+
+let _presets = [];
+let _presetsPanelOpen = false;
+
+const _PRESET_ICONS = {
+  rocket:   '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></svg>',
+  search:   '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>',
+  book:     '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>',
+  shield:   '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>',
+  layers:   '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>',
+  bookmark: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>',
+};
+
+async function fetchPresets() {
+  try {
+    _presets = await apiFetch('/api/presets');
+    renderPresetCards();
+  } catch { /* silent */ }
+}
+
+function renderPresetCards() {
+  const container = document.getElementById('presetGrid');
+  if (!container) return;
+
+  if (_presets.length === 0) {
+    container.innerHTML = '<div class="empty-state" style="padding:20px;text-align:center;color:var(--text-muted);font-size:0.8rem;">프리셋이 없습니다.</div>';
+    return;
+  }
+
+  container.innerHTML = _presets.map(p => {
+    const icon = _PRESET_ICONS[p.icon] || _PRESET_ICONS.layers;
+    const pipeNames = (p.pipeline_names || []).map(n => escapeHtml(n)).join(' &rarr; ');
+    const builtinBadge = p.builtin
+      ? '<span class="preset-badge preset-badge-builtin">내장</span>'
+      : '<span class="preset-badge preset-badge-custom">커스텀</span>';
+
+    return `<div class="preset-card" data-preset-id="${escapeHtml(p.id)}">
+      <div class="preset-card-icon">${icon}</div>
+      <div class="preset-card-body">
+        <div class="preset-card-header">
+          <span class="preset-card-name">${escapeHtml(p.name)}</span>
+          ${builtinBadge}
+        </div>
+        <div class="preset-card-desc">${escapeHtml(p.description)}</div>
+        <div class="preset-card-pipes">${pipeNames} <span class="preset-pipe-count">(${p.pipeline_count}개)</span></div>
+      </div>
+      <div class="preset-card-actions">
+        <button class="btn btn-sm btn-primary" onclick="openApplyPreset('${escapeHtml(p.id)}')">적용</button>
+        ${!p.builtin ? `<button class="btn btn-sm btn-danger" onclick="deletePreset('${escapeHtml(p.id)}')">삭제</button>` : ''}
+      </div>
+    </div>`;
+  }).join('');
+}
+
+function openApplyPreset(presetId) {
+  const preset = _presets.find(p => p.id === presetId);
+  if (!preset) return;
+
+  const overlayId = 'presetApply_' + Date.now();
+  const overlay = document.createElement('div');
+  overlay.className = 'settings-overlay';
+  overlay.style.cssText = 'display:flex;align-items:center;justify-content:center;';
+  overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
+
+  const icon = _PRESET_ICONS[preset.icon] || _PRESET_ICONS.layers;
+
+  overlay.innerHTML = `<div class="settings-panel" style="max-width:480px;margin:0;">
+    <div class="settings-header">
+      <div class="settings-title" style="display:flex;align-items:center;gap:8px;">
+        ${icon}
+        <span>프리셋 적용: ${escapeHtml(preset.name)}</span>
+      </div>
+      <button class="settings-close" onclick="this.closest('.settings-overlay').remove()">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+      </button>
+    </div>
+    <div class="settings-body">
+      <div style="margin-bottom:12px;font-size:0.78rem;color:var(--text-secondary);">
+        ${escapeHtml(preset.description)}
+      </div>
+      <div style="margin-bottom:12px;font-size:0.72rem;color:var(--text-muted);display:flex;gap:6px;flex-wrap:wrap;">
+        ${(preset.pipeline_names || []).map(n => `<span class="preset-pipe-tag">${escapeHtml(n)}</span>`).join('')}
+      </div>
+      <div style="margin-bottom:12px;">
+        <label style="font-size:0.72rem;font-weight:600;color:var(--text-secondary);display:block;margin-bottom:4px;">프로젝트 경로</label>
+        <div style="display:flex;gap:6px;">
+          <input id="${overlayId}_path" type="text" placeholder="/path/to/project"
+            value="${escapeHtml(document.getElementById('cwdInput')?.value || '')}"
+            style="flex:1;padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);font-size:0.8rem;font-family:var(--font-mono,monospace);">
+          <button class="btn btn-sm" onclick="_browseForPreset('${overlayId}_path')" title="디렉토리 탐색">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="settings-footer" style="display:flex;gap:6px;">
+      <button class="btn btn-sm btn-primary" onclick="_doApplyPreset('${escapeHtml(presetId)}','${overlayId}',this)">적용하기</button>
+      <button class="btn btn-sm" onclick="this.closest('.settings-overlay').remove()">취소</button>
+    </div>
+  </div>`;
+  document.body.appendChild(overlay);
+}
+
+function _browseForPreset(inputId) {
+  // 기존 디렉토리 브라우저를 재활용: 선택 후 해당 input에 값 설정
+  const input = document.getElementById(inputId);
+  if (!input) return;
+  // 임시로 cwdInput에 연결하여 기존 dir browser 활용
+  const origCwd = document.getElementById('cwdInput')?.value || '';
+  toggleDirBrowser();
+  // dirBrowser 선택 시 cwdInput에 값이 설정되므로 polling으로 감지
+  const poll = setInterval(() => {
+    const newVal = document.getElementById('cwdInput')?.value || '';
+    if (newVal && newVal !== origCwd) {
+      input.value = newVal;
+      clearInterval(poll);
+    }
+  }, 300);
+  setTimeout(() => clearInterval(poll), 30000);
+}
+
+async function _doApplyPreset(presetId, overlayId, btn) {
+  const path = document.getElementById(overlayId + '_path').value.trim();
+  if (!path) { showToast('프로젝트 경로를 입력하세요', 'error'); return; }
+
+  btn.disabled = true;
+  btn.textContent = '적용 중...';
+  try {
+    const result = await apiFetch('/api/presets/apply', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ preset_id: presetId, project_path: path }),
+    });
+    showToast(`프리셋 "${result.preset_name}" 적용 완료 (${result.pipelines_created}개 파이프라인 생성)`);
+    btn.closest('.settings-overlay').remove();
+    // 생성된 파이프라인 중 첫 번째를 즉시 실행 (나머지는 체이닝 또는 타이머로 자동 시작)
+    if (result.pipelines && result.pipelines.length > 0) {
+      runPipeline(result.pipelines[0].id);
+    }
+    fetchPipelines();
+  } catch (err) {
+    showToast(`적용 실패: ${err.message}`, 'error');
+    btn.disabled = false;
+    btn.textContent = '적용하기';
+  }
+}
+
+async function deletePreset(presetId) {
+  if (!confirm('이 프리셋을 삭제하시겠습니까?')) return;
+  try {
+    await apiFetch(`/api/presets/${encodeURIComponent(presetId)}`, { method: 'DELETE' });
+    showToast('프리셋 삭제됨');
+    fetchPresets();
+  } catch (err) {
+    showToast(err.message || '삭제 실패', 'error');
+  }
+}
+
+/* -- 현재 파이프라인을 프리셋으로 저장 -- */
+
+function openSavePresetDialog() {
+  if (_pipelines.length === 0) {
+    showToast('저장할 파이프라인이 없습니다', 'error');
+    return;
+  }
+  const dlgId = 'presetSave_' + Date.now();
+  const overlay = document.createElement('div');
+  overlay.className = 'settings-overlay';
+  overlay.style.cssText = 'display:flex;align-items:center;justify-content:center;';
+  overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
+
+  const pipeChecks = _pipelines.map(p =>
+    `<label style="display:flex;gap:6px;align-items:center;font-size:0.78rem;color:var(--text-primary);">
+      <input type="checkbox" value="${escapeHtml(p.id)}" checked style="accent-color:var(--primary);">
+      ${escapeHtml(p.name || p.id)}
+      <span style="font-size:0.65rem;color:var(--text-muted);">${escapeHtml(p.interval || '1회')}</span>
+    </label>`
+  ).join('');
+
+  overlay.innerHTML = `<div class="settings-panel" style="max-width:440px;margin:0;">
+    <div class="settings-header">
+      <div class="settings-title" style="display:flex;align-items:center;gap:8px;">
+        ${_PRESET_ICONS.bookmark}
+        <span>프리셋으로 저장</span>
+      </div>
+      <button class="settings-close" onclick="this.closest('.settings-overlay').remove()">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+      </button>
+    </div>
+    <div class="settings-body">
+      <div style="margin-bottom:12px;">
+        <label style="font-size:0.72rem;font-weight:600;color:var(--text-secondary);display:block;margin-bottom:4px;">프리셋 이름</label>
+        <input id="${dlgId}_name" type="text" placeholder="나의 자동화 프리셋"
+          style="width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);font-size:0.8rem;box-sizing:border-box;">
+      </div>
+      <div style="margin-bottom:12px;">
+        <label style="font-size:0.72rem;font-weight:600;color:var(--text-secondary);display:block;margin-bottom:4px;">설명</label>
+        <input id="${dlgId}_desc" type="text" placeholder="이 프리셋의 용도를 설명하세요"
+          style="width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);font-size:0.8rem;box-sizing:border-box;">
+      </div>
+      <div style="margin-bottom:8px;">
+        <label style="font-size:0.72rem;font-weight:600;color:var(--text-secondary);display:block;margin-bottom:6px;">포함할 파이프라인</label>
+        <div id="${dlgId}_pipes" style="display:flex;flex-direction:column;gap:6px;max-height:200px;overflow-y:auto;">
+          ${pipeChecks}
+        </div>
+      </div>
+    </div>
+    <div class="settings-footer" style="display:flex;gap:6px;">
+      <button class="btn btn-sm btn-primary" onclick="_doSavePreset('${dlgId}',this)">저장</button>
+      <button class="btn btn-sm" onclick="this.closest('.settings-overlay').remove()">취소</button>
+    </div>
+  </div>`;
+  document.body.appendChild(overlay);
+}
+
+async function _doSavePreset(dlgId, btn) {
+  const name = document.getElementById(dlgId + '_name').value.trim();
+  if (!name) { showToast('프리셋 이름을 입력하세요', 'error'); return; }
+
+  const desc = document.getElementById(dlgId + '_desc').value.trim();
+  const checks = document.querySelectorAll(`#${dlgId}_pipes input[type="checkbox"]:checked`);
+  const pipeIds = Array.from(checks).map(c => c.value);
+  if (pipeIds.length === 0) { showToast('최소 1개 파이프라인을 선택하세요', 'error'); return; }
+
+  btn.disabled = true;
+  btn.textContent = '저장 중...';
+  try {
+    const result = await apiFetch('/api/presets/save', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name, description: desc, pipeline_ids: pipeIds }),
+    });
+    showToast(`프리셋 "${result.name}" 저장됨 (${result.pipeline_count}개 파이프라인)`);
+    btn.closest('.settings-overlay').remove();
+    fetchPresets();
+  } catch (err) {
+    showToast(`저장 실패: ${err.message}`, 'error');
+    btn.disabled = false;
+    btn.textContent = '저장';
+  }
+}

package/web/static/send.js

@@ -4,6 +4,7 @@
 
 let _sendLock = false;
 let _automationMode = false;
+let _depsMode = false;
 
 function toggleAutomation() {
   _automationMode = !_automationMode;
@@ -22,12 +23,24 @@ function toggleAutomation() {
   }
 }
 
+function toggleDeps() {
+  // DAG UI는 숨김 처리됨 — AI가 API depends_on으로 직접 사용
+  _depsMode = !_depsMode;
+  const row = document.getElementById('depsRow');
+  if (row) row.style.display = _depsMode ? 'flex' : 'none';
+  if (!_depsMode) {
+    const inp = document.getElementById('depsInput');
+    if (inp) inp.value = '';
+  }
+}
+
 function clearPromptForm() {
   document.getElementById('promptInput').value = '';
   clearAttachments();
   updatePromptMirror();
   clearDirSelection();
   if (_automationMode) toggleAutomation();
+  if (_depsMode) toggleDeps();
 }
 
 async function sendTask(e) {
@@ -54,8 +67,7 @@ async function sendTask(e) {
         body: JSON.stringify({ project_path: cwd, command: prompt, interval }),
       });
       showToast(`자동화 등록: ${pipe.name || pipe.id}`);
-      document.getElementById('promptInput').value = '';
-      toggleAutomation();
+      clearPromptForm();
       fetchPipelines();
       runPipeline(pipe.id);
     } catch (err) {
@@ -94,13 +106,23 @@ async function sendTask(e) {
 
     if (filePaths.length > 0) body.images = filePaths;
 
-    await apiFetch('/api/send', { method: 'POST', body: JSON.stringify(body) });
+    // 의존성 모드: depends_on 추가
+    if (_depsMode) {
+      const depsVal = document.getElementById('depsInput').value.trim();
+      if (depsVal) {
+        body.depends_on = depsVal.split(/[,\s]+/).filter(Boolean);
+      }
+    }
+
+    const result = await apiFetch('/api/send', { method: 'POST', body: JSON.stringify(body) });
     const modeMsg = _contextMode === 'resume' ? ' (resume)' : _contextMode === 'fork' ? ' (fork)' : '';
-    showToast(t('msg_task_sent') + modeMsg);
+    const depMsg = result && result.status === 'pending' ? ' (대기 중 — 선행 작업 완료 후 실행)' : '';
+    showToast(t('msg_task_sent') + modeMsg + depMsg);
     if (cwd) addRecentDir(cwd);
     document.getElementById('promptInput').value = '';
     clearAttachments();
     clearContext();
+    if (_depsMode) toggleDeps();
     fetchJobs();
   } catch (err) {
     showToast(`${t('msg_send_failed')}: ${err.message}`, 'error');