claude-controller 0.2.0 → 0.3.0

package/web/static/settings-style.css

@@ -1,5 +1,35 @@
 /* ── 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;
@@ -210,11 +240,11 @@
 
 .job-preview {
   padding: 6px 14px;
-  background: var(--bg);
+  background: var(--stream-bg, #080a0e);
   font-family: var(--font-mono);
   font-size: 0.78rem;
   line-height: 1.7;
-  color: var(--text-muted);
+  color: var(--text);
   max-height: calc(0.78rem * 1.7 * 2 + 6px + 6px);
   overflow: hidden;
   box-sizing: content-box;
@@ -226,6 +256,7 @@
 .preview-line {
   padding: 2px 0;
   word-break: break-word;
+  color: var(--text);
 }
 .preview-line + .preview-line {
   margin-top: 1px;
@@ -255,6 +286,6 @@
   font-weight: 700;
 }
 .preview-text {
-  color: var(--text-muted);
+  color: var(--text);
 }
 

package/web/static/settings.js

@@ -27,11 +27,26 @@ function _populateSettingsUI() {
   const d = _settingsData;
   const sel = document.getElementById('cfgLocale');
   if (sel) sel.value = d.locale || _currentLocale;
+
+  const whUrl = document.getElementById('cfgWebhookUrl');
+  if (whUrl) whUrl.value = d.webhook_url || '';
+  const whSecret = document.getElementById('cfgWebhookSecret');
+  if (whSecret) whSecret.value = d.webhook_secret || '';
+  const whEvents = document.getElementById('cfgWebhookEvents');
+  if (whEvents) whEvents.value = d.webhook_events || 'done,failed';
 }
 
 async function saveSettings() {
   const locale = document.getElementById('cfgLocale').value;
-  const payload = { locale };
+  const webhookUrl = (document.getElementById('cfgWebhookUrl')?.value || '').trim();
+  const webhookSecret = (document.getElementById('cfgWebhookSecret')?.value || '').trim();
+  const webhookEvents = document.getElementById('cfgWebhookEvents')?.value || 'done,failed';
+  const payload = {
+    locale,
+    webhook_url: webhookUrl,
+    webhook_secret: webhookSecret,
+    webhook_events: webhookEvents,
+  };
   try {
     await apiFetch('/api/config', {
       method: 'POST',
@@ -43,3 +58,24 @@ async function saveSettings() {
     showToast(t('msg_settings_save_failed') + ': ' + e.message, 'error');
   }
 }
+
+async function testWebhook() {
+  const btn = document.getElementById('btnWebhookTest');
+  if (!btn) return;
+  const orig = btn.innerHTML;
+  btn.disabled = true;
+  btn.innerHTML = '<span class="spinner" style="width:12px;height:12px;"></span>';
+  try {
+    const result = await apiFetch('/api/webhooks/test', { method: 'POST' });
+    if (result.delivered) {
+      showToast(`웹훅 전송 성공 (HTTP ${result.status_code})`);
+    } else {
+      showToast(`웹훅 전송 실패: ${result.error}`, 'error');
+    }
+  } catch (e) {
+    showToast(`웹훅 테스트 실패: ${e.message}`, 'error');
+  } finally {
+    btn.disabled = false;
+    btn.innerHTML = orig;
+  }
+}

package/web/static/stream.js

@@ -31,15 +31,30 @@ function updateJobPreview(jobId) {
   }
 }
 
-function initStream(jobId) {
-  if (streamState[jobId] && streamState[jobId].timer) return;
+function initStream(jobId, jobData) {
   if (streamState[jobId] && streamState[jobId]._bulkLoading) return;
 
   if (!streamState[jobId]) {
-    streamState[jobId] = { offset: 0, timer: null, done: false, jobData: null, events: [], renderedCount: 0 };
+    streamState[jobId] = { offset: 0, timer: null, done: false, jobData: jobData || null, events: [], renderedCount: 0, _initTime: Date.now(), _lastEventTime: Date.now() };
+  } else if (jobData) {
+    streamState[jobId].jobData = jobData;
   }
 
   const state = streamState[jobId];
+
+  // expand 패널이 새로 생겼는데 아직 placeholder 상태면 캐시된 이벤트를 즉시 렌더링
+  const container = document.getElementById(`streamContent-${jobId}`);
+  if (container && state.events.length > 0) {
+    const isEmpty = container.querySelector('.stream-empty') || container.children.length === 0;
+    if (isEmpty) {
+      state.renderedCount = 0;
+      renderStreamEvents(jobId);
+    }
+  }
+
+  // SSE 또는 폴링이 이미 진행 중이면 중복 시작하지 않음
+  if (state.timer || state._eventSource) return;
+
   if (state.done && state.events.length > 0) {
     renderStreamEvents(jobId);
     return;
@@ -51,8 +66,67 @@ function initStream(jobId) {
     return;
   }
 
-  pollStream(jobId);
-  state.timer = setInterval(() => pollStream(jobId), 500);
+  // SSE 실시간 스트림 시작 (실패 시 자동 폴링 폴백)
+  startSSEStream(jobId);
+}
+
+function startSSEStream(jobId) {
+  const state = streamState[jobId];
+  if (!state) return;
+
+  let url = `${API}/api/jobs/${encodeURIComponent(jobId)}/stream`;
+  if (AUTH_TOKEN) url += `?token=${encodeURIComponent(AUTH_TOKEN)}`;
+
+  const es = new EventSource(url);
+  state._eventSource = es;
+
+  es.onmessage = function(e) {
+    try {
+      const evt = JSON.parse(e.data);
+      state.events.push(evt);
+      state._lastEventTime = Date.now();
+      renderStreamEvents(jobId);
+      updateJobPreview(jobId);
+    } catch { /* parse error */ }
+  };
+
+  es.addEventListener('done', function(e) {
+    es.close();
+    state._eventSource = null;
+    state.done = true;
+
+    let finalStatus = 'done';
+    try {
+      const data = JSON.parse(e.data);
+      finalStatus = data.status || 'done';
+    } catch {}
+
+    const lastResult = state.events.filter(ev => ev.type === 'result').pop();
+    if (lastResult && lastResult.is_error) finalStatus = 'failed';
+    if (state.jobData) state.jobData.status = finalStatus;
+
+    renderStreamDone(jobId);
+    updateJobRowStatus(jobId, finalStatus);
+    notifyJobDone(jobId, finalStatus, state.jobData ? state.jobData.prompt : '');
+
+    const pvRow = document.querySelector(`tr[data-job-id="${CSS.escape(jobId + '__preview')}"]`);
+    if (pvRow) pvRow.remove();
+
+    fetchJobs();
+  });
+
+  es.onerror = function() {
+    if (state.done) return;
+
+    // SSE 실패 → 폴링 폴백
+    es.close();
+    state._eventSource = null;
+
+    if (!state.timer) {
+      pollStream(jobId);
+      state.timer = setInterval(() => pollStream(jobId), 500);
+    }
+  };
 }
 
 async function loadStreamBulk(jobId) {
@@ -69,13 +143,28 @@ async function loadStreamBulk(jobId) {
     }
     if (data.done || !data.events || data.events.length === 0) {
       state.done = true;
+      const lastResult = state.events.filter(e => e.type === 'result').pop();
+      const finalStatus = (lastResult && lastResult.is_error) ? 'failed'
+        : (state.jobData ? state.jobData.status : 'done');
+      if (state.jobData) state.jobData.status = finalStatus;
       renderStreamDone(jobId);
-      updateJobRowStatus(jobId, state.jobData ? state.jobData.status : 'done');
+      updateJobRowStatus(jobId, finalStatus);
       const pvRow = document.querySelector(`tr[data-job-id="${CSS.escape(jobId + '__preview')}"]`);
       if (pvRow) pvRow.remove();
     }
-  } catch {
-    // 네트워크 오류 시 재시도 가능
+  } catch (err) {
+    const container = document.getElementById(`streamContent-${jobId}`);
+    if (container) {
+      const retryId = `retryBulk-${jobId}`;
+      container.innerHTML = `<div class="stream-error-state">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+        <span>${escapeHtml(t('stream_load_failed'))}</span>
+        <button class="btn btn-sm" id="${retryId}" onclick="event.stopPropagation(); loadStreamBulk('${escapeHtml(jobId)}')">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>
+          ${escapeHtml(t('stream_retry'))}
+        </button>
+      </div>`;
+    }
   } finally {
     state._bulkLoading = false;
   }
@@ -84,6 +173,10 @@ async function loadStreamBulk(jobId) {
 function stopStream(jobId) {
   const state = streamState[jobId];
   if (!state) return;
+  if (state._eventSource) {
+    state._eventSource.close();
+    state._eventSource = null;
+  }
   if (state.timer) {
     clearInterval(state.timer);
     state.timer = null;
@@ -103,9 +196,17 @@ async function pollStream(jobId) {
     const newOffset = data.offset !== undefined ? data.offset : state.offset + events.length;
     const done = !!data.done;
 
+    // 성공 시 실패 카운터 초기화 + 백오프 복원
+    if (state._pollFails > 0) {
+      state._pollFails = 0;
+      _setPollInterval(jobId, 500);
+      _clearPollWarning(jobId);
+    }
+
     if (events.length > 0) {
       state.events = state.events.concat(events);
       state.offset = newOffset;
+      state._lastEventTime = Date.now();
       renderStreamEvents(jobId);
       updateJobPreview(jobId);
     }
@@ -113,14 +214,95 @@ async function pollStream(jobId) {
     if (done) {
       state.done = true;
       stopStream(jobId);
+
+      // result 이벤트의 is_error 로 실제 최종 상태 결정
+      const lastResult = state.events.filter(e => e.type === 'result').pop();
+      const finalStatus = lastResult && lastResult.is_error ? 'failed' : 'done';
+      if (state.jobData) state.jobData.status = finalStatus;
+
       renderStreamDone(jobId);
-      updateJobRowStatus(jobId, state.jobData ? state.jobData.status : 'done');
+      updateJobRowStatus(jobId, finalStatus);
+      notifyJobDone(jobId, finalStatus, state.jobData ? state.jobData.prompt : '');
       const pvRow = document.querySelector(`tr[data-job-id="${CSS.escape(jobId + '__preview')}"]`);
       if (pvRow) pvRow.remove();
+
+      // 즉시 전체 행 동기화 (액션 버튼, 필터 등)
+      fetchJobs();
     }
   } catch {
-    // Network error — keep retrying
+    // 네트워크 에러 — 지수 백오프 + 실패 피드백
+    state._pollFails = (state._pollFails || 0) + 1;
+    const fails = state._pollFails;
+
+    if (fails >= 20) {
+      // 20회 연속 실패 (~2분) → 폴링 중단, 재시도 버튼 표시
+      stopStream(jobId);
+      _showPollRetry(jobId);
+    } else if (fails >= 5) {
+      // 5회+ 실패 → 경고 표시 + 백오프 (1s → 2s → 4s → 최대 10s)
+      const interval = Math.min(500 * Math.pow(2, fails - 4), 10000);
+      _setPollInterval(jobId, interval);
+      _showPollWarning(jobId);
+    }
+  }
+}
+
+/** 폴링 간격을 동적으로 변경한다. */
+function _setPollInterval(jobId, ms) {
+  const state = streamState[jobId];
+  if (!state || !state.timer) return;
+  clearInterval(state.timer);
+  state.timer = setInterval(() => pollStream(jobId), ms);
+}
+
+/** 연결 불안정 경고를 스트림 패널에 표시한다. */
+function _showPollWarning(jobId) {
+  const panel = document.getElementById(`streamPanel-${jobId}`);
+  if (!panel || panel.querySelector('.stream-poll-warning')) return;
+  const warn = document.createElement('div');
+  warn.className = 'stream-poll-warning';
+  warn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg> ${escapeHtml(t('conn_lost'))}`;
+  panel.prepend(warn);
+}
+
+function _clearPollWarning(jobId) {
+  const panel = document.getElementById(`streamPanel-${jobId}`);
+  if (!panel) return;
+  const warn = panel.querySelector('.stream-poll-warning');
+  if (warn) warn.remove();
+}
+
+/** 폴링이 포기된 후 수동 재시도 버튼을 표시한다. */
+function _showPollRetry(jobId) {
+  _clearPollWarning(jobId);
+  const container = document.getElementById(`streamContent-${jobId}`);
+  if (!container) return;
+  // 이미 표시된 경우 중복 방지
+  if (container.querySelector('.stream-poll-retry')) return;
+  const retryDiv = document.createElement('div');
+  retryDiv.className = 'stream-error-state stream-poll-retry';
+  retryDiv.innerHTML = `
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+    <span>${escapeHtml(t('conn_lost'))}</span>
+    <button class="btn btn-sm" onclick="event.stopPropagation(); retryPollStream('${escapeHtml(jobId)}')">
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>
+      ${escapeHtml(t('stream_reconnect'))}
+    </button>`;
+  container.appendChild(retryDiv);
+}
+
+function retryPollStream(jobId) {
+  const state = streamState[jobId];
+  if (!state) return;
+  state._pollFails = 0;
+  // 재시도 UI 제거
+  const container = document.getElementById(`streamContent-${jobId}`);
+  if (container) {
+    const retry = container.querySelector('.stream-poll-retry');
+    if (retry) retry.remove();
   }
+  // SSE 우선 시도, 실패 시 자동 폴링 전환
+  startSSEStream(jobId);
 }
 
 function renderStreamEvents(jobId) {
@@ -154,8 +336,14 @@ function renderStreamEvents(jobId) {
         break;
       case 'result':
         div.classList.add('stream-event-result');
-        div.innerHTML = `<span class="stream-result-icon">✓</span>
-          <span class="stream-result-text">${escapeHtml(typeof evt.result === 'string' ? evt.result : JSON.stringify(evt.result || ''))}</span>`;
+        if (evt.is_error && evt.user_error) {
+          div.classList.add('stream-event-result-error');
+          div.innerHTML = `<span class="stream-result-icon">✗</span>
+            <span class="stream-result-text">${escapeHtml(evt.user_error.summary)}</span>`;
+        } else {
+          div.innerHTML = `<span class="stream-result-icon">✓</span>
+            <span class="stream-result-text">${escapeHtml(typeof evt.result === 'string' ? evt.result : JSON.stringify(evt.result || ''))}</span>`;
+        }
         if (evt.session_id) {
           const panel = document.getElementById(`streamPanel-${jobId}`);
           if (panel) panel.dataset.sessionId = evt.session_id;
@@ -167,7 +355,7 @@ function renderStreamEvents(jobId) {
               cells[4].className = 'job-session clickable';
               cells[4].title = evt.session_id;
               const evtCwd = panel ? (panel.dataset.cwd || '') : '';
-              cells[4].setAttribute('onclick', `event.stopPropagation(); resumeFromJob('${escapeHtml(evt.session_id)}', '', '${escapeHtml(evtCwd)}')`);
+              cells[4].setAttribute('onclick', `event.stopPropagation(); resumeFromJob('${escapeJsStr(evt.session_id)}', '', '${escapeJsStr(evtCwd)}')`);
             }
           }
         }
@@ -202,12 +390,47 @@ function renderStreamDone(jobId) {
   const status = state && state.jobData ? state.jobData.status : 'done';
   const isFailed = status === 'failed';
 
+  // 이벤트가 0개면 "불러오는 중" placeholder를 "출력 없음"으로 교체
+  if (state && state.events.length === 0) {
+    const container = document.getElementById(`streamContent-${jobId}`);
+    if (container && (container.querySelector('.stream-empty') || container.children.length === 0)) {
+      container.innerHTML = `<div class="stream-no-output">${t('stream_no_output')}</div>`;
+    }
+  }
+
+  // 소요시간 추출
+  const lastResult = state ? state.events.filter(e => e.type === 'result').pop() : null;
+  let bannerDetails = '';
+  if (lastResult) {
+    const info = formatDuration(lastResult.duration_ms);
+    if (info) bannerDetails = ` — ${info}`;
+  }
+
   let banner = panel.querySelector('.stream-done-banner');
   if (!banner) {
     banner = document.createElement('div');
     banner.className = `stream-done-banner${isFailed ? ' failed' : ''}`;
-    banner.textContent = isFailed ? '✗ 작업 실패' : '✓ 작업 완료';
+    banner.textContent = (isFailed ? `✗ ${t('stream_job_failed')}` : `✓ ${t('stream_job_done')}`) + bannerDetails;
     panel.appendChild(banner);
+  } else if (bannerDetails && !banner.textContent.includes('—')) {
+    banner.textContent = (isFailed ? `✗ ${t('stream_job_failed')}` : `✓ ${t('stream_job_done')}`) + bannerDetails;
+  }
+
+  // 실패 시 사용자 친화적 에러 카드 표시
+  if (isFailed && lastResult && !panel.querySelector('.user-error-card')) {
+    const ue = lastResult.user_error;
+    if (ue) {
+      const card = document.createElement('div');
+      card.className = 'user-error-card';
+      const stepsHtml = (ue.next_steps || []).map(s => `<li>${escapeHtml(s)}</li>`).join('');
+      const rawText = typeof lastResult.result === 'string' ? lastResult.result : '';
+      const detailsHtml = rawText ? `<details class="user-error-details"><summary>${escapeHtml(t('err_show_log'))}</summary><pre class="user-error-raw">${escapeHtml(rawText.slice(0, 2000))}</pre></details>` : '';
+      card.innerHTML = `<div class="user-error-summary">${escapeHtml(ue.summary)}</div>
+        <div class="user-error-cause">${escapeHtml(ue.cause)}</div>
+        ${stepsHtml ? `<ul class="user-error-steps">${stepsHtml}</ul>` : ''}
+        ${detailsHtml}`;
+      banner.insertAdjacentElement('afterend', card);
+    }
   }
 
   let actions = panel.querySelector('.stream-actions');
@@ -217,11 +440,11 @@ function renderStreamDone(jobId) {
     actions.innerHTML = `
       <button class="btn btn-sm" onclick="event.stopPropagation(); copyStreamResult('${escapeHtml(jobId)}')">
         <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
-        전체 복사
+        ${escapeHtml(t('stream_copy_all'))}
       </button>
       <button class="btn btn-sm btn-danger" onclick="event.stopPropagation(); deleteJob('${escapeHtml(jobId)}')">
         <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
-        작업 제거
+        ${escapeHtml(t('stream_delete_job'))}
       </button>`;
     panel.appendChild(actions);
   }
@@ -231,14 +454,14 @@ function renderStreamDone(jobId) {
     const followup = document.createElement('div');
     followup.className = 'stream-followup';
     followup.innerHTML = `
-      <span class="stream-followup-label">이어서</span>
+      <span class="stream-followup-label">${escapeHtml(t('stream_followup_label'))}</span>
       <div class="followup-input-wrap">
         <input type="text" class="followup-input" id="followupInput-${escapeHtml(jobId)}"
-               placeholder="이 세션에 이어서 실행할 명령... (파일/이미지 붙여넣기 가능)"
+               placeholder="${escapeHtml(t('stream_followup_placeholder'))}"
                onkeydown="if(event.key==='Enter'){event.stopPropagation();sendFollowUp('${escapeHtml(jobId)}')}"
                onclick="event.stopPropagation()">
         <button class="btn btn-primary btn-sm" onclick="event.stopPropagation(); sendFollowUp('${escapeHtml(jobId)}')" style="white-space:nowrap;">
-          <svg width="12" height="12" 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> 전송
+          <svg width="12" height="12" 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> ${escapeHtml(t('send'))}
         </button>
       </div>
       <div class="followup-previews" id="followupPreviews-${escapeHtml(jobId)}"></div>`;

package/web/static/utils.js

@@ -5,13 +5,19 @@
 function showToast(message, type = 'success') {
   const container = document.getElementById('toastContainer');
   const toast = document.createElement('div');
+  const duration = type === 'error' ? 6000 : 3000;
   toast.className = `toast ${type}`;
+  toast.style.setProperty('--toast-duration', `${duration}ms`);
   const icon = type === 'success'
     ? '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>'
     : '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>';
-  toast.innerHTML = `${icon} ${escapeHtml(message)}`;
+  toast.innerHTML = `${icon} <span class="toast-msg">${escapeHtml(message)}</span><span class="toast-close">&times;</span>`;
+  toast.addEventListener('click', () => {
+    toast.style.animation = 'toastOut 0.2s ease forwards';
+    setTimeout(() => { if (toast.parentNode) toast.remove(); }, 200);
+  });
   container.appendChild(toast);
-  setTimeout(() => { if (toast.parentNode) toast.remove(); }, 3000);
+  setTimeout(() => { if (toast.parentNode) toast.remove(); }, duration);
 }
 
 function escapeHtml(str) {
@@ -21,6 +27,12 @@ function escapeHtml(str) {
   return d.innerHTML;
 }
 
+/** JS 문자열 이스케이프 — onclick 핸들러 내 싱글쿼트 문자열에서 사용 */
+function escapeJsStr(str) {
+  if (!str) return '';
+  return str.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
+}
+
 function truncate(str, len = 60) {
   if (!str) return '-';
   return str.length > len ? str.slice(0, len) + '...' : str;
@@ -77,3 +89,43 @@ function getFileExt(filename) {
   const dot = filename.lastIndexOf('.');
   return dot >= 0 ? filename.slice(dot + 1).toUpperCase() : '?';
 }
+
+/* ── Desktop Notification ── */
+function requestNotificationPermission() {
+  if ('Notification' in window && Notification.permission === 'default') {
+    Notification.requestPermission();
+  }
+}
+
+function notifyJobDone(jobId, status, prompt) {
+  if (!('Notification' in window) || Notification.permission !== 'granted') return;
+  if (document.hasFocus()) return;
+  const title = status === 'done' ? `Job #${jobId} 완료` : `Job #${jobId} 실패`;
+  const body = truncate(prompt || '', 80);
+  const icon = status === 'done'
+    ? 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="80" font-size="80">%E2%9C%85</text></svg>'
+    : 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="80" font-size="80">%E2%9D%8C</text></svg>';
+  try {
+    const n = new Notification(title, { body, icon, tag: `job-${jobId}` });
+    n.onclick = () => { window.focus(); toggleJobExpand(String(jobId)); n.close(); };
+    setTimeout(() => n.close(), 8000);
+  } catch { /* silent */ }
+}
+
+/* ── Duration formatting ── */
+function formatDuration(durationMs) {
+  if (durationMs == null) return '';
+  const sec = durationMs / 1000;
+  return sec < 60 ? `${sec.toFixed(1)}s` : `${Math.floor(sec / 60)}m ${Math.round(sec % 60)}s`;
+}
+
+/* ── Theme ── */
+function applyTheme(theme) {
+  document.documentElement.setAttribute('data-theme', theme);
+  localStorage.setItem('theme', theme);
+}
+
+function toggleTheme() {
+  const current = document.documentElement.getAttribute('data-theme') || 'dark';
+  applyTheme(current === 'dark' ? 'light' : 'dark');
+}