claude-controller 0.1.2 → 0.3.0

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

@@ -0,0 +1,135 @@
+/* ═══════════════════════════════════════════════
+   Send Task — 작업 전송 및 자동화 토글
+   ═══════════════════════════════════════════════ */
+
+let _sendLock = false;
+let _automationMode = false;
+let _depsMode = false;
+
+function toggleAutomation() {
+  _automationMode = !_automationMode;
+  const row = document.getElementById('automationRow');
+  const btn = document.getElementById('btnAutoToggle');
+  const sendBtn = document.getElementById('btnSend');
+  if (_automationMode) {
+    row.style.display = 'flex';
+    btn.style.cssText = 'border-color:var(--accent);color:var(--accent);background:rgba(99,102,241,0.1);';
+    sendBtn.querySelector('span').textContent = '자동화 등록';
+  } else {
+    row.style.display = 'none';
+    btn.style.cssText = '';
+    sendBtn.querySelector('span').textContent = t('send');
+    document.getElementById('automationInterval').value = '';
+  }
+}
+
+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) {
+  e.preventDefault();
+  if (_sendLock) return false;
+
+  const prompt = document.getElementById('promptInput').value.trim();
+  if (!prompt) {
+    showToast(t('msg_prompt_required'), 'error');
+    return false;
+  }
+
+  // ── 자동화 모드: 파이프라인 생성 ──
+  if (_automationMode) {
+    const cwd = document.getElementById('cwdInput').value.trim();
+    if (!cwd) { showToast('디렉토리를 선택하세요', 'error'); return false; }
+    const interval = document.getElementById('automationInterval').value.trim();
+    _sendLock = true;
+    const btn = document.getElementById('btnSend');
+    btn.disabled = true;
+    try {
+      const pipe = await apiFetch('/api/pipelines', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ project_path: cwd, command: prompt, interval }),
+      });
+      showToast(`자동화 등록: ${pipe.name || pipe.id}`);
+      clearPromptForm();
+      fetchPipelines();
+      runPipeline(pipe.id);
+    } catch (err) {
+      showToast(`등록 실패: ${err.message}`, 'error');
+    } finally {
+      _sendLock = false;
+      btn.disabled = false;
+      btn.querySelector('span').textContent = t('send');
+    }
+    return false;
+  }
+
+  // ── 일반 전송 모드 ──
+  _sendLock = true;
+  const cwd = document.getElementById('cwdInput').value.trim();
+  const btn = document.getElementById('btnSend');
+  btn.disabled = true;
+  btn.innerHTML = '<span class="spinner"></span> 전송 중...';
+
+  try {
+    let finalPrompt = prompt;
+    const filePaths = [];
+    attachments.forEach((att, idx) => {
+      if (att && att.serverPath) {
+        finalPrompt = finalPrompt.replace(new RegExp(`@image${idx}\\b`, 'g'), `@${att.serverPath}`);
+        filePaths.push(att.serverPath);
+      }
+    });
+
+    const body = { prompt: finalPrompt };
+    if (cwd) body.cwd = cwd;
+
+    if (_contextSessionId && (_contextMode === 'resume' || _contextMode === 'fork')) {
+      body.session = _contextMode + ':' + _contextSessionId;
+    }
+
+    if (filePaths.length > 0) body.images = filePaths;
+
+    // 의존성 모드: 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)' : '';
+    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');
+  } finally {
+    _sendLock = false;
+    btn.disabled = false;
+    btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg> <span data-i18n="send">' + t('send') + '</span>';
+  }
+  return false;
+}

package/web/static/settings-style.css

@@ -0,0 +1,291 @@
+/* ── Settings & Overlays ── */
+
+/* ── Theme Toggle FAB ── */
+.theme-fab {
+  position: fixed;
+  bottom: 80px;
+  right: 24px;
+  z-index: 300;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+  transition: all var(--transition);
+}
+.theme-fab:hover {
+  background: var(--surface-hover);
+  color: var(--accent);
+  border-color: var(--accent);
+}
+/* dark mode: show sun icon, hide moon */
+.theme-icon-light { display: none; }
+.theme-icon-dark { display: block; }
+[data-theme="light"] .theme-icon-light { display: block; }
+[data-theme="light"] .theme-icon-dark { display: none; }
+
+/* ── Settings Panel ── */
+.settings-fab {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 300;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+  transition: all var(--transition);
+}
+.settings-fab:hover {
+  background: var(--surface-hover);
+  color: var(--accent);
+  border-color: var(--accent);
+  transform: rotate(30deg);
+}
+
+.settings-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 400;
+  background: rgba(0,0,0,0.5);
+  backdrop-filter: blur(4px);
+  animation: fadeIn 0.2s ease;
+}
+.settings-overlay.open { display: flex; align-items: center; justify-content: center; }
+
+.settings-panel {
+  width: 520px;
+  max-width: 90vw;
+  max-height: 85vh;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: panel-slide 0.2s ease-out;
+}
+
+.settings-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border);
+}
+.settings-title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--text);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.settings-title svg { width: 18px; height: 18px; color: var(--accent); }
+.settings-close {
+  padding: 6px;
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--text-muted);
+  border: none;
+  cursor: pointer;
+}
+.settings-close:hover { background: var(--surface-active); color: var(--text); }
+
+.settings-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+.settings-section {
+  margin-bottom: 20px;
+}
+.settings-section-title {
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 12px;
+}
+
+.setting-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--border);
+  gap: 16px;
+}
+.setting-row:last-child { border-bottom: none; }
+
+.setting-info { flex: 1; min-width: 0; }
+.setting-label {
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--text);
+  margin-bottom: 2px;
+}
+.setting-desc {
+  font-size: 0.72rem;
+  color: var(--text-muted);
+  line-height: 1.4;
+}
+
+.setting-control { flex-shrink: 0; }
+
+/* Toggle Switch */
+.toggle {
+  position: relative;
+  width: 40px;
+  height: 22px;
+  cursor: pointer;
+}
+.toggle input { display: none; }
+.toggle-track {
+  position: absolute;
+  inset: 0;
+  background: var(--border);
+  border-radius: 11px;
+  transition: background var(--transition);
+}
+.toggle input:checked + .toggle-track { background: var(--accent); }
+.toggle-thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #fff;
+  transition: transform var(--transition);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+}
+.toggle input:checked ~ .toggle-thumb { transform: translateX(18px); }
+
+.setting-input {
+  width: 100%;
+  padding: 7px 10px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  transition: border-color var(--transition);
+}
+.setting-input:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-glow);
+}
+.setting-input-sm { width: 80px; text-align: center; }
+
+.settings-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 14px 20px;
+  border-top: 1px solid var(--border);
+}
+
+.setting-restart-hint {
+  font-size: 0.7rem;
+  color: var(--yellow);
+  margin-right: auto;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* ── Connection Modal ── */
+.conn-message {
+  font-size: 0.8rem;
+  color: var(--red);
+  background: var(--red-dim);
+  border: 1px solid rgba(248, 113, 113, 0.25);
+  border-radius: var(--radius);
+  padding: 8px 12px;
+}
+
+/* ── Running Job Preview Row ── */
+.preview-row {
+  cursor: default !important;
+}
+.preview-row,
+.preview-row:hover {
+  background: transparent !important;
+}
+.preview-row td {
+  padding: 0 !important;
+  border-bottom: 1px solid var(--border) !important;
+}
+
+.job-preview {
+  padding: 6px 14px;
+  background: var(--stream-bg, #080a0e);
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  line-height: 1.7;
+  color: var(--text);
+  max-height: calc(0.78rem * 1.7 * 2 + 6px + 6px);
+  overflow: hidden;
+  box-sizing: content-box;
+}
+.preview-lines {
+  min-width: 0;
+  overflow: hidden;
+}
+.preview-line {
+  padding: 2px 0;
+  word-break: break-word;
+  color: var(--text);
+}
+.preview-line + .preview-line {
+  margin-top: 1px;
+}
+.preview-tool {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: var(--yellow-dim);
+  color: var(--yellow);
+  font-size: 0.7rem;
+  font-weight: 600;
+  white-space: nowrap;
+  margin-right: 4px;
+}
+.preview-tool::before {
+  content: '>';
+  opacity: 0.5;
+}
+.preview-result {
+  color: var(--green);
+}
+.preview-result::before {
+  content: '✓ ';
+  font-weight: 700;
+}
+.preview-text {
+  color: var(--text);
+}
+