claude-controller 0.1.2 → 0.2.0

package/web/static/pipelines.js

@@ -0,0 +1,252 @@
+/* ═══════════════════════════════════════════════
+   Pipeline — on/off 자동화
+   상태: active (ON) / stopped (OFF)
+   ═══════════════════════════════════════════════ */
+
+let _pipelines = [];
+let _pipelinePollTimer = null;
+let _pipelineCountdownTimer = null;
+
+async function fetchPipelines() {
+  try {
+    _pipelines = await apiFetch('/api/pipelines');
+    renderPipelines();
+
+    const hasActive = _pipelines.some(p => p.status === 'active');
+    if (hasActive && !_pipelinePollTimer) {
+      _pipelinePollTimer = setInterval(_pipelinePollTick, 5000);
+    } else if (!hasActive && _pipelinePollTimer) {
+      clearInterval(_pipelinePollTimer);
+      _pipelinePollTimer = null;
+    }
+
+    const hasTimer = _pipelines.some(p => p.status === 'active');
+    if (hasTimer && !_pipelineCountdownTimer) {
+      _pipelineCountdownTimer = setInterval(_updateCountdowns, 1000);
+    } else if (!hasTimer && _pipelineCountdownTimer) {
+      clearInterval(_pipelineCountdownTimer);
+      _pipelineCountdownTimer = null;
+    }
+  } catch { /* silent */ }
+}
+
+async function _pipelinePollTick() {
+  const hasRunning = _pipelines.some(p => p.status === 'active' && p.job_id);
+  if (hasRunning) {
+    try {
+      await apiFetch('/api/pipelines/tick-all', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}',
+      });
+    } catch { /* silent */ }
+  }
+  fetchPipelines();
+}
+
+function _formatTimer(sec) {
+  const m = Math.floor(sec / 60);
+  const s = sec % 60;
+  return `${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;
+}
+
+function _updateCountdowns() {
+  for (const p of _pipelines) {
+    if (p.status !== 'active') continue;
+    const el = document.querySelector(`[data-pipe-timer="${p.id}"]`);
+    if (!el) continue;
+
+    if (!p.next_run) {
+      el.textContent = _formatTimer(0);
+      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) {
+      p._dispatching = true;
+      // 로컬에서 즉시 next_run 갱신 → 타이머 끊김 방지
+      if (p.interval_sec) {
+        p.next_run = new Date(Date.now() + p.interval_sec * 1000).toISOString().slice(0, 19);
+      }
+      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; });
+    }
+  }
+}
+
+function renderPipelines() {
+  const container = document.getElementById('pipelineList');
+  const countEl = document.getElementById('pipelineCount');
+  if (!container) return;
+
+  if (countEl) countEl.textContent = _pipelines.length > 0 ? `(${_pipelines.length})` : '';
+
+  if (_pipelines.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 = _pipelines.map(p => {
+    const isOn = p.status === 'active';
+    const isRunning = isOn && p.job_id;
+
+    let timerHtml = '';
+    if (isOn) {
+      let remaining = 0;
+      if (p.next_run) {
+        remaining = Math.max(0, Math.floor((new Date(p.next_run).getTime() - Date.now()) / 1000));
+      }
+      timerHtml = `<span data-pipe-timer="${p.id}" style="font-family:var(--font-mono,monospace);font-size:0.72rem;color:var(--text-muted);">${_formatTimer(remaining)}</span>`;
+    }
+
+    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 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}">
+      <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>
+      <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;">
+        ${runCount}
+        <span>${p.last_run || ''}</span>
+      </div>
+      <div class="pipeline-card-actions" style="margin-top:8px;display:flex;gap:6px;">
+        ${toggleBtn}
+        <button class="btn btn-sm" onclick="editPipeline('${p.id}')">수정</button>
+        <button class="btn btn-sm btn-danger" onclick="deletePipeline('${p.id}')">삭제</button>
+      </div>
+    </div>`;
+  }).join('');
+}
+
+async function runPipeline(pipeId) {
+  try {
+    const data = await apiFetch(`/api/pipelines/${encodeURIComponent(pipeId)}/run`, {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({}),
+    });
+    showToast(`${data.name || ''}: ON`);
+    fetchPipelines();
+    fetchJobs();
+    setTimeout(fetchJobs, 1000);
+  } catch (err) {
+    showToast(err.message || '실행 실패', 'error');
+  }
+}
+
+async function stopPipeline(pipeId) {
+  try {
+    await apiFetch(`/api/pipelines/${encodeURIComponent(pipeId)}/stop`, {
+      method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}',
+    });
+    showToast('자동화 OFF');
+    fetchPipelines();
+  } catch (err) {
+    showToast(err.message || 'OFF 실패', 'error');
+  }
+}
+
+async function editPipeline(pipeId) {
+  try {
+    const data = await apiFetch(`/api/pipelines/${encodeURIComponent(pipeId)}/status`);
+    const isOn = data.status === 'active';
+    const statusBadge = isOn
+      ? '<span class="badge" style="background:var(--primary)20;color:var(--primary);">ON</span>'
+      : '<span class="badge" style="background:var(--text-muted)20;color:var(--text-muted);">OFF</span>';
+
+    const editId = 'pipeEdit_' + 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"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+          <span>자동화 수정</span>
+          ${statusBadge}
+        </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="${editId}_name" type="text" value="${escapeHtml(data.name || '')}"
+            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>
+          <textarea id="${editId}_cmd" rows="3"
+            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;">${escapeHtml(data.command || '')}</textarea>
+        </div>
+        <div style="margin-bottom:12px;">
+          <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);">(예: 30s, 5m, 1h / 비우면 1회)</span></label>
+          <input id="${editId}_interval" type="text" value="${escapeHtml(data.interval || '')}" placeholder="예: 1m"
+            style="width:120px;padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);font-size:0.8rem;">
+        </div>
+        <div style="font-size:0.7rem;color:var(--text-muted);display:flex;gap:12px;">
+          <span>경로: <code>${escapeHtml(data.project_path)}</code></span>
+          ${data.run_count ? `<span>${data.run_count}회 실행</span>` : ''}
+        </div>
+      </div>
+      <div class="settings-footer" style="display:flex;gap:6px;">
+        <button class="btn btn-sm btn-primary" onclick="_savePipelineEdit('${data.id}','${editId}',this)">저장</button>
+        ${isOn
+          ? `<button class="btn btn-sm" onclick="stopPipeline('${data.id}');this.closest('.settings-overlay').remove();">OFF</button>`
+          : `<button class="btn btn-sm" onclick="runPipeline('${data.id}');this.closest('.settings-overlay').remove();">ON</button>`}
+        <button class="btn btn-sm" onclick="this.closest('.settings-overlay').remove()">닫기</button>
+      </div>
+    </div>`;
+    document.body.appendChild(overlay);
+  } catch (err) {
+    showToast(err.message || '조회 실패', 'error');
+  }
+}
+
+async function _savePipelineEdit(pipeId, editId, btn) {
+  const name = document.getElementById(editId + '_name').value.trim();
+  const command = document.getElementById(editId + '_cmd').value.trim();
+  const interval = document.getElementById(editId + '_interval').value.trim();
+  if (!command) { showToast('명령어를 입력하세요', 'error'); return; }
+
+  btn.disabled = true;
+  btn.textContent = '저장 중...';
+  try {
+    await apiFetch(`/api/pipelines/${encodeURIComponent(pipeId)}/update`, {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name, command, interval }),
+    });
+    showToast('자동화 수정 완료');
+    btn.closest('.settings-overlay').remove();
+    fetchPipelines();
+  } catch (err) {
+    showToast(err.message || '수정 실패', 'error');
+    btn.disabled = false;
+    btn.textContent = '저장';
+  }
+}
+
+async function deletePipeline(pipeId) {
+  if (!confirm('이 자동화를 삭제하시겠습니까?')) return;
+  try {
+    await apiFetch(`/api/pipelines/${encodeURIComponent(pipeId)}`, { method: 'DELETE' });
+    showToast('자동화 삭제됨');
+    fetchPipelines();
+  } catch (err) {
+    showToast(err.message || '삭제 실패', 'error');
+  }
+}

package/web/static/send.js

@@ -0,0 +1,113 @@
+/* ═══════════════════════════════════════════════
+   Send Task — 작업 전송 및 자동화 토글
+   ═══════════════════════════════════════════════ */
+
+let _sendLock = false;
+let _automationMode = 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 clearPromptForm() {
+  document.getElementById('promptInput').value = '';
+  clearAttachments();
+  updatePromptMirror();
+  clearDirSelection();
+  if (_automationMode) toggleAutomation();
+}
+
+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}`);
+      document.getElementById('promptInput').value = '';
+      toggleAutomation();
+      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;
+
+    await apiFetch('/api/send', { method: 'POST', body: JSON.stringify(body) });
+    const modeMsg = _contextMode === 'resume' ? ' (resume)' : _contextMode === 'fork' ? ' (fork)' : '';
+    showToast(t('msg_task_sent') + modeMsg);
+    if (cwd) addRecentDir(cwd);
+    document.getElementById('promptInput').value = '';
+    clearAttachments();
+    clearContext();
+    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,260 @@
+/* ── Settings & Overlays ── */
+
+/* ── 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(--bg);
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  line-height: 1.7;
+  color: var(--text-muted);
+  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;
+}
+.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-muted);
+}
+

package/web/static/settings.js

@@ -0,0 +1,45 @@
+/* ═══════════════════════════════════════════════
+   Settings — 설정 패널
+   ═══════════════════════════════════════════════ */
+
+let _settingsData = {};
+
+function openSettings() {
+  loadSettings().then(() => {
+    document.getElementById('settingsOverlay').classList.add('open');
+  });
+}
+
+function closeSettings() {
+  document.getElementById('settingsOverlay').classList.remove('open');
+}
+
+async function loadSettings() {
+  try {
+    _settingsData = await apiFetch('/api/config');
+  } catch {
+    _settingsData = {};
+  }
+  _populateSettingsUI();
+}
+
+function _populateSettingsUI() {
+  const d = _settingsData;
+  const sel = document.getElementById('cfgLocale');
+  if (sel) sel.value = d.locale || _currentLocale;
+}
+
+async function saveSettings() {
+  const locale = document.getElementById('cfgLocale').value;
+  const payload = { locale };
+  try {
+    await apiFetch('/api/config', {
+      method: 'POST',
+      body: JSON.stringify(payload),
+    });
+    setLocale(locale);
+    showToast(t('msg_settings_saved'));
+  } catch (e) {
+    showToast(t('msg_settings_save_failed') + ': ' + e.message, 'error');
+  }
+}