claude-controller 0.2.0 → 0.3.0

package/web/static/jobs.js

@@ -4,32 +4,649 @@
 
 let expandedJobId = null;
 let jobPollTimer = null;
+let _jobFilterStatus = 'all';
+let _jobFilterProject = 'all';
+let _jobSearchQuery = '';
+let _allJobs = [];
+let _registeredProjects = [];
+let _jobListCollapsed = localStorage.getItem('jobListCollapsed') === '1';
+let _jobViewMode = localStorage.getItem('jobViewMode') || 'flat';
+let _jobViewModeManual = localStorage.getItem('jobViewModeManual') === '1'; // 사용자가 수동 전환한 적 있는지
+let _collapsedGroups = JSON.parse(localStorage.getItem('collapsedGroups') || '{}');
+let _statsPeriod = 'all';
+let _selectedProject = null;
+let _selectedProjectInfo = null;
+let _jobPage = 1;
+let _jobLimit = 10;
+let _jobPages = 1;
+let _jobTotal = 0;
 
-function statusBadgeHtml(status) {
+/* ── Stats ── */
+
+function setStatsPeriod(period) {
+  _statsPeriod = period;
+  document.querySelectorAll('.stats-period-btn').forEach(btn => {
+    btn.classList.toggle('active', btn.dataset.period === period);
+  });
+  fetchStats();
+}
+
+async function fetchStats() {
+  try {
+    const data = await apiFetch(`/api/stats?period=${_statsPeriod}`);
+    renderStats(data);
+  } catch { /* 통계 실패는 무시 */ }
+}
+
+async function fetchRegisteredProjects() {
+  try {
+    const data = await apiFetch('/api/projects');
+    _registeredProjects = Array.isArray(data) ? data : [];
+    if (_allJobs.length > 0) _renderProjectStrip(_allJobs);
+  } catch { _registeredProjects = []; }
+}
+
+function renderStats(data) {
+  const jobs = data.jobs || {};
+  const total = jobs.total || 0;
+  const done = jobs.done || 0;
+  const failed = jobs.failed || 0;
+  const running = jobs.running || 0;
+
+  document.getElementById('statTotal').textContent =
+    t('stat_jobs_summary').replace('{total}', total).replace('{running}', running);
+
+  const rate = data.success_rate;
+  const el = document.getElementById('statSuccess');
+  if (rate != null) {
+    const pct = (rate * 100).toFixed(1);
+    el.textContent = t('stat_success').replace('{pct}', pct);
+    el.style.color = rate >= 0.8 ? '' : 'var(--danger, #ef4444)';
+  } else {
+    el.textContent = '-';
+  }
+
+  const avg = data.duration?.avg_ms;
+  if (avg != null) {
+    const sec = avg / 1000;
+    document.getElementById('statDuration').textContent =
+      sec >= 60 ? `avg ${(sec / 60).toFixed(1)}m` : `avg ${sec.toFixed(1)}s`;
+  } else {
+    document.getElementById('statDuration').textContent = '-';
+  }
+}
+
+function toggleJobListCollapse() {
+  _jobListCollapsed = !_jobListCollapsed;
+  localStorage.setItem('jobListCollapsed', _jobListCollapsed ? '1' : '0');
+  _applyJobListCollapse();
+}
+
+function _applyJobListCollapse() {
+  const wrap = document.getElementById('jobTableWrap');
+  const filterBar = document.getElementById('jobFilterBar');
+  const strip = document.getElementById('projectStrip');
+  const statsBar = document.getElementById('statsBar');
+  const detail = document.getElementById('projectDetail');
+  const btn = document.getElementById('btnCollapseJobs');
+  if (wrap) wrap.style.display = _jobListCollapsed ? 'none' : '';
+  if (filterBar) filterBar.style.display = _jobListCollapsed ? 'none' : '';
+  if (strip) strip.style.display = _jobListCollapsed ? 'none' : '';
+  if (statsBar) statsBar.style.display = _jobListCollapsed ? 'none' : '';
+  if (detail) detail.style.display = _jobListCollapsed ? 'none' : (_selectedProject ? '' : 'none');
+  if (btn) btn.classList.toggle('collapsed', _jobListCollapsed);
+}
+
+function setJobFilter(status) {
+  _jobFilterStatus = status;
+  document.querySelectorAll('.job-filter-btn').forEach(btn => {
+    btn.classList.toggle('active', btn.dataset.filter === status);
+  });
+  applyJobFilters();
+}
+
+function applyJobFilters() {
+  _jobSearchQuery = (document.getElementById('jobSearchInput')?.value || '').toLowerCase().trim();
+  renderJobs(_allJobs);
+}
+
+function setJobProjectFilter(project) {
+  _jobFilterProject = project;
+  const sel = document.getElementById('jobProjectSelect');
+  if (sel) sel.value = project;
+
+  if (project === 'all') {
+    _selectedProject = null;
+    _selectedProjectInfo = null;
+    _hideProjectDetail();
+  } else {
+    const projects = _extractProjects(_allJobs);
+    _selectedProject = projects.find(p => p.name === project) || null;
+    _selectedProjectInfo = null;
+    _showProjectDetail();
+    if (_selectedProject?.registered && _selectedProject.projectId) {
+      _fetchProjectInfo(_selectedProject.projectId);
+    }
+  }
+
+  applyJobFilters();
+}
+
+function _extractProjects(jobs) {
+  const map = {};
+
+  // 1) 등록된 프로젝트를 먼저 삽입 (이름·경로 우��� 사용)
+  for (const rp of _registeredProjects) {
+    const name = rp.name || formatCwd(rp.path);
+    const js = rp.job_stats || {};
+    map[name] = {
+      name,
+      cwd: rp.path,
+      projectId: rp.id,
+      registered: true,
+      count: js.total || 0,
+      running: js.running || 0,
+    };
+  }
+
+  // 2) job cwd에서 추출한 프로젝트 병합 — 등록 프로젝트와 경로가 같으면 통합
+  for (const job of jobs) {
+    const cwdName = formatCwd(job.cwd);
+    if (!cwdName || cwdName === '-') continue;
+
+    // 등록 프로젝트 중 같은 경로인지 확인
+    const matchKey = Object.keys(map).find(k => {
+      const mp = map[k];
+      return mp.cwd && job.cwd && _normPath(mp.cwd) === _normPath(job.cwd);
+    });
+
+    if (matchKey) {
+      // 등록 프로젝트와 매칭 — job 단위 카운트는 이미 job_stats에 있으므로 skip
+      continue;
+    }
+
+    // 등록되지 않은 ad-hoc 프로젝트
+    if (!map[cwdName]) map[cwdName] = { name: cwdName, cwd: job.cwd, count: 0, running: 0, registered: false };
+    map[cwdName].count++;
+    if (job.status === 'running') map[cwdName].running++;
+  }
+
+  // 등록 프로젝트 우선, 그 안에서 count 역순
+  return Object.values(map).sort((a, b) => {
+    if (a.registered !== b.registered) return a.registered ? -1 : 1;
+    return b.count - a.count;
+  });
+}
+
+function _normPath(p) {
+  if (!p) return '';
+  return p.replace(/\/+$/, '');
+}
+
+function _updateProjectDropdown(jobs) {
+  const sel = document.getElementById('jobProjectSelect');
+  if (!sel) return;
+  const projects = _extractProjects(jobs);
+  const prev = sel.value;
+  sel.innerHTML = `<option value="all">${t('all_projects')} (${jobs.length})</option>`;
+  for (const p of projects) {
+    const label = p.name + ` (${p.count})`;
+    sel.innerHTML += `<option value="${escapeHtml(p.name)}">${escapeHtml(label)}</option>`;
+  }
+  sel.value = (prev && projects.some(p => p.name === prev)) ? prev : 'all';
+  _jobFilterProject = sel.value;
+}
+
+function _renderProjectStrip(jobs) {
+  const container = document.getElementById('projectStrip');
+  if (!container) return;
+  if (_jobListCollapsed) { container.style.display = 'none'; return; }
+
+  const projects = _extractProjects(jobs);
+  const dropdown = document.querySelector('.job-project-filter');
+
+  // 등록 프로젝트가 있으면 항상 스트립 표시
+  const hasRegistered = _registeredProjects.length > 0;
+  if (projects.length <= 1 && !hasRegistered) {
+    container.style.display = 'none';
+    if (dropdown) dropdown.style.display = projects.length > 0 ? 'flex' : 'none';
+    return;
+  }
+  container.style.display = '';
+  if (dropdown) dropdown.style.display = 'none';
+
+  // 프로젝트별 상태 카운트 (job 데이터에서 실시간 집계)
+  const sc = {};
+  for (const job of jobs) {
+    const name = _resolveProjectName(job.cwd);
+    if (!sc[name]) sc[name] = { running: 0, done: 0, failed: 0 };
+    const s = job.status;
+    if (s === 'running') sc[name].running++;
+    else if (s === 'done') sc[name].done++;
+    else if (s === 'failed') sc[name].failed++;
+  }
+
+  let html = `<button class="project-chip${_jobFilterProject === 'all' ? ' active' : ''}" onclick="setJobProjectFilter('all')">
+    <svg class="pchip-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
+    <span class="pchip-name">${t('all_projects')}</span>
+    <span class="pchip-count">${jobs.length}</span>
+  </button>`;
+
+  for (const p of projects) {
+    const active = _jobFilterProject === p.name ? ' active' : '';
+    const dot = p.running > 0 ? '<span class="pchip-dot"></span>' : '';
+    const s = sc[p.name] || {};
+    let stats = '';
+    if (s.running > 0) stats += `<span class="pchip-stat pchip-stat-running">${s.running}</span>`;
+    if (s.done > 0) stats += `<span class="pchip-stat pchip-stat-done">${s.done}</span>`;
+    if (s.failed > 0) stats += `<span class="pchip-stat pchip-stat-failed">${s.failed}</span>`;
+
+    const regBadge = p.registered ? '<span class="pchip-reg"></span>' : '';
+
+    html += `<button class="project-chip${active}${p.registered ? ' registered' : ''}" onclick="setJobProjectFilter('${escapeHtml(escapeJsStr(p.name))}')" title="${escapeHtml(p.cwd)}">
+      ${dot}${regBadge}
+      <svg class="pchip-icon" width="12" height="12" 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>
+      <span class="pchip-name">${escapeHtml(p.name)}</span>
+      <span class="pchip-count">${p.count}</span>
+      ${stats}
+    </button>`;
+  }
+
+  container.innerHTML = html;
+}
+
+/** job의 cwd를 등록 프로젝트 이름으로 resolve한다. 매칭 실패 시 formatCwd 사용. */
+function _resolveProjectName(cwd) {
+  if (!cwd) return '-';
+  const norm = _normPath(cwd);
+  for (const rp of _registeredProjects) {
+    if (_normPath(rp.path) === norm) return rp.name || formatCwd(rp.path);
+  }
+  return formatCwd(cwd);
+}
+
+/* ── Project Detail Panel ── */
+
+async function _fetchProjectInfo(projectId) {
+  try {
+    const data = await apiFetch(`/api/projects/${projectId}`);
+    _selectedProjectInfo = data;
+    _showProjectDetail();
+  } catch { /* silent */ }
+}
+
+function _showProjectDetail() {
+  const container = document.getElementById('projectDetail');
+  if (!container || !_selectedProject) { _hideProjectDetail(); return; }
+
+  const projectJobs = _allJobs.filter(j => _resolveProjectName(j.cwd) === _selectedProject.name);
+
+  let running = 0, done = 0, failed = 0, totalDuration = 0, durCount = 0;
+  for (const j of projectJobs) {
+    if (j.status === 'running') running++;
+    else if (j.status === 'done') done++;
+    else if (j.status === 'failed') failed++;
+    if (j.duration_ms != null) { totalDuration += j.duration_ms; durCount++; }
+  }
+
+  const completed = done + failed;
+  const successRate = completed > 0 ? Math.round((done / completed) * 100) : null;
+  const avgDuration = durCount > 0 ? totalDuration / durCount / 1000 : null;
+
+  const info = _selectedProjectInfo;
+  const metaItems = [];
+  if (_selectedProject.cwd) metaItems.push(`<span class="pd-path-text">${escapeHtml(_selectedProject.cwd)}</span>`);
+  if (info?.branch) metaItems.push(`<span class="pd-branch">${escapeHtml(info.branch)}</span>`);
+  if (info?.remote) {
+    const remote = info.remote.replace(/\.git$/, '').replace(/^https?:\/\//, '').replace(/^git@([^:]+):/, '$1/');
+    metaItems.push(`<span class="pd-remote" title="${escapeHtml(info.remote)}">${escapeHtml(remote)}</span>`);
+  }
+
+  let statsHtml = `<div class="pd-stat"><div class="pd-stat-val">${projectJobs.length}</div><div class="pd-stat-label">${escapeHtml(t('pd_total'))}</div></div>`;
+  if (running > 0) statsHtml += `<div class="pd-stat pd-running"><div class="pd-stat-val">${running}</div><div class="pd-stat-label">${escapeHtml(t('pd_running'))}</div></div>`;
+  statsHtml += `<div class="pd-stat pd-done"><div class="pd-stat-val">${done}</div><div class="pd-stat-label">${escapeHtml(t('pd_done'))}</div></div>`;
+  if (failed > 0) statsHtml += `<div class="pd-stat pd-failed"><div class="pd-stat-val">${failed}</div><div class="pd-stat-label">${escapeHtml(t('pd_failed'))}</div></div>`;
+  if (avgDuration != null) {
+    const durStr = avgDuration < 60 ? `${avgDuration.toFixed(1)}s` : `${(avgDuration / 60).toFixed(1)}m`;
+    statsHtml += `<div class="pd-stat"><div class="pd-stat-val">${durStr}</div><div class="pd-stat-label">${escapeHtml(t('pd_avg'))}</div></div>`;
+  }
+  if (successRate != null) {
+    const rateClass = successRate >= 80 ? 'pd-rate-ok' : 'pd-rate-warn';
+    statsHtml += `<div class="pd-stat ${rateClass}"><div class="pd-stat-val">${successRate}%</div><div class="pd-stat-label">${escapeHtml(t('pd_success_rate'))}</div></div>`;
+  }
+
+  const regBadge = _selectedProject.registered ? `<span class="pd-badge">${escapeHtml(t('pd_registered'))}</span>` : '';
+  const cwdAttr = escapeHtml(escapeJsStr(_selectedProject.cwd || ''));
+
+  container.innerHTML = `
+    <div class="pd-header">
+      <div class="pd-title-row">
+        <svg class="pd-icon" width="16" height="16" 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>
+        <span class="pd-name">${escapeHtml(_selectedProject.name)}</span>
+        ${regBadge}
+        <div class="pd-actions">
+          <button class="btn btn-sm btn-primary" onclick="sendTaskToProject('${cwdAttr}')" title="${escapeHtml(t('pd_send_task_title'))}">
+            <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('pd_send_task'))}
+          </button>
+          <button class="pd-close" onclick="setJobProjectFilter('all')" title="${escapeHtml(t('pd_show_all_title'))}">
+            <svg width="14" height="14" 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>
+      ${metaItems.length ? `<div class="pd-meta">${metaItems.join(' <span class="pd-sep">\u00b7</span> ')}</div>` : ''}
+    </div>
+    <div class="pd-stats">${statsHtml}</div>
+  `;
+  container.style.display = '';
+}
+
+function _hideProjectDetail() {
+  const container = document.getElementById('projectDetail');
+  if (container) { container.style.display = 'none'; container.innerHTML = ''; }
+}
+
+function sendTaskToProject(cwd) {
+  if (cwd) {
+    addRecentDir(cwd);
+    selectRecentDir(cwd, true);
+  }
+  document.getElementById('promptInput')?.focus();
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+}
+
+/* ── Grouped View ── */
+
+function toggleJobViewMode() {
+  _jobViewMode = _jobViewMode === 'flat' ? 'grouped' : 'flat';
+  _jobViewModeManual = true;
+  localStorage.setItem('jobViewMode', _jobViewMode);
+  localStorage.setItem('jobViewModeManual', '1');
+  renderJobs(_allJobs);
+}
+
+/** 프로젝트별 통계 계산 — duration, success rate */
+function _calcProjectStats(jobs) {
+  const stats = {};
+  for (const job of jobs) {
+    const name = _resolveProjectName(job.cwd);
+    const key = (name && name !== '-') ? name : t('pd_other');
+    if (!stats[key]) stats[key] = { duration: 0, done: 0, failed: 0, durCount: 0 };
+    const s = stats[key];
+    if (job.duration_ms != null) { s.duration += job.duration_ms; s.durCount++; }
+    if (job.status === 'done') s.done++;
+    if (job.status === 'failed') s.failed++;
+  }
+  return stats;
+}
+
+function _updateViewModeUI() {
+  const btn = document.getElementById('btnViewMode');
+  if (btn) btn.classList.toggle('active', _jobViewMode === 'grouped');
+}
+
+function toggleGroupCollapse(groupName) {
+  _collapsedGroups[groupName] = !_collapsedGroups[groupName];
+  localStorage.setItem('collapsedGroups', JSON.stringify(_collapsedGroups));
+  renderJobs(_allJobs);
+}
+
+function _renderGroupedView(jobs, tbody) {
+  jobs.sort((a, b) => {
+    const aR = a.status === 'running' ? 0 : 1;
+    const bR = b.status === 'running' ? 0 : 1;
+    if (aR !== bR) return aR - bR;
+    return (parseInt(b.id || b.job_id || 0)) - (parseInt(a.id || a.job_id || 0));
+  });
+
+  const groups = new Map();
+  for (const job of jobs) {
+    const name = _resolveProjectName(job.cwd);
+    const key = (name && name !== '-') ? name : t('pd_other');
+    if (!groups.has(key)) groups.set(key, { name: key, cwd: job.cwd, jobs: [] });
+    groups.get(key).jobs.push(job);
+  }
+
+  const sorted = [...groups.values()].sort((a, b) => {
+    const aR = a.jobs.some(j => j.status === 'running') ? 0 : 1;
+    const bR = b.jobs.some(j => j.status === 'running') ? 0 : 1;
+    if (aR !== bR) return aR - bR;
+    return b.jobs.length - a.jobs.length;
+  });
+
+  // 프로젝트별 통계
+  const pStats = _calcProjectStats(jobs);
+
+  // 포커스·expand row 보존
+  const activeEl = document.activeElement;
+  const focusId = activeEl?.classList.contains('followup-input') ? activeEl.id : null;
+  const focusVal = focusId ? activeEl.value : null;
+  const focusCur = focusId ? activeEl.selectionStart : null;
+
+  const savedExpands = new Map();
+  for (const tr of [...tbody.querySelectorAll('tr.expand-row')]) {
+    savedExpands.set(tr.dataset.jobId, tr);
+    tr.remove();
+  }
+
+  tbody.innerHTML = '';
+
+  if (sorted.length === 0) {
+    tbody.innerHTML = `<tr data-job-id="__empty__"><td colspan="6" class="empty-state">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width:40px;height:40px;margin-bottom:12px;opacity:0.3;"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>
+      <div>${t('no_jobs')}</div></td></tr>`;
+    document.getElementById('btnDeleteCompleted').style.display = 'none';
+    return;
+  }
+
+  let hasCompleted = false;
+
+  for (const group of sorted) {
+    const collapsed = !!_collapsedGroups[group.name];
+    const running = group.jobs.filter(j => j.status === 'running').length;
+    const done = group.jobs.filter(j => j.status === 'done').length;
+    const failed = group.jobs.filter(j => j.status === 'failed').length;
+    if (done > 0 || failed > 0) hasCompleted = true;
+
+    let statsHtml = '';
+    if (running > 0) statsHtml += `<span class="grp-stat grp-stat-running"><span class="grp-dot"></span>${running}</span>`;
+    if (done > 0) statsHtml += `<span class="grp-stat grp-stat-done">${done}</span>`;
+    if (failed > 0) statsHtml += `<span class="grp-stat grp-stat-failed">${failed}</span>`;
+
+    // 프로젝트별 메트릭 (소요시간, 성공률)
+    const ps = pStats[group.name] || {};
+    let metaHtml = '';
+    if (ps.durCount > 0) {
+      const avg = ps.duration / ps.durCount / 1000;
+      metaHtml += `<span class="grp-meta grp-meta-dur">avg ${avg < 60 ? avg.toFixed(1) + 's' : (avg / 60).toFixed(1) + 'm'}</span>`;
+    }
+    const completed = ps.done + ps.failed;
+    if (completed > 0) {
+      const rate = Math.round((ps.done / completed) * 100);
+      const rateClass = rate >= 80 ? 'grp-meta-rate-ok' : 'grp-meta-rate-warn';
+      metaHtml += `<span class="grp-meta ${rateClass}">${rate}%</span>`;
+    }
+
+    const hdr = document.createElement('tr');
+    hdr.className = 'job-group-row';
+    hdr.dataset.jobId = `__group__${group.name}`;
+    hdr.setAttribute('onclick', `toggleGroupCollapse('${escapeJsStr(group.name)}')`);
+    hdr.innerHTML = `<td colspan="6" class="job-group-cell"><div class="job-group-content">
+      <svg class="job-group-chevron${collapsed ? ' collapsed' : ''}" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
+      <svg class="job-group-folder" 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>
+      <span class="job-group-name">${escapeHtml(group.name)}</span>
+      <span class="job-group-count">${group.jobs.length}</span>
+      <div class="job-group-stats">${statsHtml}</div>
+      ${metaHtml ? `<div class="job-group-meta">${metaHtml}</div>` : ''}
+    </div></td>`;
+    tbody.appendChild(hdr);
+
+    if (collapsed) continue;
+
+    for (const job of group.jobs) {
+      const id = job.id || job.job_id || '-';
+      const isExpanded = expandedJobId === id;
+      if (streamState[id]) streamState[id].jobData = job;
+
+      const tr = document.createElement('tr');
+      tr.dataset.jobId = id;
+      tr.className = `job-group-item${isExpanded ? ' expanded' : ''}`;
+      tr.setAttribute('onclick', `toggleJobExpand('${escapeHtml(id)}')`);
+      tr.innerHTML = _buildJobRowCells(id, job);
+      tbody.appendChild(tr);
+
+      if (isExpanded) {
+        const eKey = id + '__expand';
+        if (savedExpands.has(eKey)) {
+          tbody.appendChild(savedExpands.get(eKey));
+          savedExpands.delete(eKey);
+          if (job.session_id) {
+            const panel = document.getElementById(`streamPanel-${id}`);
+            if (panel) panel.dataset.sessionId = job.session_id;
+          }
+        } else {
+          const eTr = document.createElement('tr');
+          eTr.className = 'expand-row';
+          eTr.dataset.jobId = eKey;
+          eTr.innerHTML = _buildExpandRowHtml(id, job);
+          tbody.appendChild(eTr);
+          initStream(id, job);
+        }
+      }
+
+      if (job.status === 'running' && !isExpanded) {
+        if (!streamState[id]) {
+          streamState[id] = { offset: 0, timer: null, done: false, jobData: job, events: [], renderedCount: 0, _initTime: Date.now(), _lastEventTime: Date.now() };
+        }
+        if (!streamState[id].timer) initStream(id, job);
+        const pvTr = document.createElement('tr');
+        pvTr.className = 'preview-row';
+        pvTr.dataset.jobId = id + '__preview';
+        pvTr.innerHTML = `<td colspan="6"><div class="job-preview" id="jobPreview-${escapeHtml(id)}"><span class="preview-text">${escapeHtml(t('stream_preview_wait'))}</span></div></td>`;
+        tbody.appendChild(pvTr);
+        updateJobPreview(id);
+      }
+    }
+  }
+
+  document.getElementById('btnDeleteCompleted').style.display = hasCompleted ? 'inline-flex' : 'none';
+
+  // 포커스 복원
+  if (focusId) {
+    const el = document.getElementById(focusId);
+    if (el) { el.value = focusVal || ''; el.focus(); if (focusCur !== null) el.setSelectionRange(focusCur, focusCur); }
+  }
+}
+
+function filterJobs(jobs) {
+  return jobs.filter(job => {
+    if (_jobFilterStatus !== 'all' && job.status !== _jobFilterStatus) return false;
+    if (_jobFilterProject !== 'all' && _resolveProjectName(job.cwd) !== _jobFilterProject) return false;
+    if (_jobSearchQuery && !(job.prompt || '').toLowerCase().includes(_jobSearchQuery)) return false;
+    return true;
+  });
+}
+
+const ZOMBIE_THRESHOLD_MS = 5 * 60 * 1000; // 5분간 스트림 데이터 없으면 좀비 의심
+
+function statusBadgeHtml(status, jobId, job) {
   const s = (status || 'unknown').toLowerCase();
   const labels = { running: t('status_running'), done: t('status_done'), failed: t('status_failed'), pending: t('status_pending') };
   const cls = { running: 'badge-running', done: 'badge-done', failed: 'badge-failed', pending: 'badge-pending' };
-  return `<span class="badge ${cls[s] || 'badge-pending'}">${labels[s] || s}</span>`;
+  let badge = `<span class="badge ${cls[s] || 'badge-pending'}">${labels[s] || s}</span>`;
+  if (s === 'running' && jobId && isZombieJob(jobId)) {
+    badge += ` <span class="badge badge-zombie" title="${escapeHtml(t('job_zombie_title'))}">${escapeHtml(t('job_zombie'))}</span>`;
+  }
+  if (job && (s === 'done' || s === 'failed') && job.duration_ms != null) {
+    const info = formatDuration(job.duration_ms);
+    if (info) badge += `<span class="job-meta-info">${escapeHtml(info)}</span>`;
+  }
+  // 의존성 뱃지
+  if (job && job.depends_on && job.depends_on.length > 0) {
+    const depIds = job.depends_on.map(d => '#' + d).join(', ');
+    badge += ` <span class="badge badge-dep" title="${escapeHtml(t('job_dep_title').replace('{deps}', depIds))}">⛓ ${escapeHtml(depIds)}</span>`;
+  }
+  return badge;
+}
+
+function isZombieJob(jobId) {
+  const state = streamState[jobId];
+  if (!state) return false;
+  const lastEventTime = state._lastEventTime || state._initTime;
+  if (!lastEventTime) return false;
+  return (Date.now() - lastEventTime) > ZOMBIE_THRESHOLD_MS;
 }
 
 function jobActionsHtml(id, status, sessionId, cwd) {
   const isRunning = status === 'running';
-  const escapedCwd = escapeHtml(cwd || '');
+  const escapedCwd = escapeHtml(escapeJsStr(cwd || ''));
   let btns = '';
   if (!isRunning) {
-    btns += `<button class="btn-retry-job" onclick="event.stopPropagation(); retryJob('${escapeHtml(id)}')" title="같은 프롬프트로 다시 실행"><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></button>`;
+    btns += `<button class="btn-retry-job" onclick="event.stopPropagation(); retryJob('${escapeHtml(id)}')" title="${escapeHtml(t('job_retry_title'))}"><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></button>`;
   }
   if (sessionId) {
-    btns += `<button class="btn-continue-job" onclick="event.stopPropagation(); openFollowUp('${escapeHtml(id)}')" title="세션 이어서 명령 (resume)"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="13 17 18 12 13 7"/><polyline points="6 17 11 12 6 7"/></svg></button>`;
-    btns += `<button class="btn-fork-job" onclick="event.stopPropagation(); quickForkSession('${escapeHtml(sessionId)}', '${escapedCwd}')" title="이 세션에서 분기 (fork)" style="color:var(--yellow);"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><path d="M6 9v3c0 3.3 2.7 6 6 6h3"/></svg></button>`;
+    btns += `<button class="btn-continue-job" onclick="event.stopPropagation(); openFollowUp('${escapeHtml(id)}')" title="${escapeHtml(t('job_resume_title'))}"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="13 17 18 12 13 7"/><polyline points="6 17 11 12 6 7"/></svg></button>`;
+    btns += `<button class="btn-fork-job" onclick="event.stopPropagation(); quickForkSession('${escapeHtml(sessionId)}', '${escapedCwd}')" title="${escapeHtml(t('job_fork_title'))}" style="color:var(--yellow);"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><path d="M6 9v3c0 3.3 2.7 6 6 6h3"/></svg></button>`;
   }
   if (!isRunning) {
-    btns += `<button class="btn-delete-job" onclick="event.stopPropagation(); deleteJob('${escapeHtml(id)}')" title="작업 제거"><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></button>`;
+    btns += `<button class="btn-delete-job" onclick="event.stopPropagation(); deleteJob('${escapeHtml(id)}')" title="${escapeHtml(t('job_delete_title'))}"><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></button>`;
   }
   if (!btns) return '';
   return `<div style="display:flex; align-items:center; gap:4px;">${btns}</div>`;
 }
 
+/** job row의 6개 셀 HTML을 생성한다 — flat/grouped 뷰 공용. */
+function _buildJobRowCells(id, job) {
+  return `
+    <td class="job-id">${escapeHtml(String(id).slice(0, 8))}</td>
+    <td>${statusBadgeHtml(job.status, id, job)}</td>
+    <td class="prompt-cell" title="${escapeHtml(job.prompt)}">${renderPromptHtml(job.prompt)}</td>
+    <td class="job-cwd" title="${escapeHtml(job.cwd || '')}">${escapeHtml(formatCwd(job.cwd))}</td>
+    <td class="job-session${job.session_id ? ' clickable' : ''}" title="${escapeHtml(job.session_id || '')}" ${job.session_id ? `onclick="event.stopPropagation(); resumeFromJob('${escapeHtml(escapeJsStr(job.session_id))}', '${escapeHtml(escapeJsStr(truncate(job.prompt, 40)))}', '${escapeHtml(escapeJsStr(job.cwd || ''))}')"` : ''}>${job.session_id ? escapeHtml(job.session_id.slice(0, 8)) : (job.status === 'running' ? '<span style="color:var(--text-muted);font-size:0.7rem;">—</span>' : '-')}</td>
+    <td>${jobActionsHtml(id, job.status, job.session_id, job.cwd)}</td>`;
+}
+
+/** expand row의 inner HTML을 생성한다 — flat/grouped 뷰 공용. */
+function _buildExpandRowHtml(id, job) {
+  const sessionId = job.session_id || '';
+  const jobCwd = job.cwd || '';
+  const eid = escapeHtml(id);
+
+  let actionsHtml = '';
+  if (job.status !== 'running') {
+    actionsHtml = `<div class="stream-actions">
+      <button class="btn btn-sm" onclick="event.stopPropagation(); retryJob('${eid}')"><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('job_retry'))}</button>
+      <button class="btn btn-sm" onclick="event.stopPropagation(); copyStreamResult('${eid}')"><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" onclick="event.stopPropagation(); toggleCheckpointPanel('${eid}')"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20V10"/><path d="M18 20V4"/><path d="M6 20v-4"/></svg> ${escapeHtml(t('checkpoints'))}</button>
+      <button class="btn btn-sm btn-danger" onclick="event.stopPropagation(); deleteJob('${eid}')"><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>
+    </div>`;
+  }
+
+  let followupHtml = '';
+  if (job.status !== 'running' && sessionId) {
+    followupHtml = `<div class="stream-followup">
+      <span class="stream-followup-label">${escapeHtml(t('stream_followup_label'))}</span>
+      <div class="followup-input-wrap">
+        <input type="text" class="followup-input" id="followupInput-${eid}" placeholder="${escapeHtml(t('stream_followup_placeholder'))}" onkeydown="if(event.key==='Enter'){event.stopPropagation();sendFollowUp('${eid}')}" onclick="event.stopPropagation()">
+        <button class="btn btn-primary btn-sm" onclick="event.stopPropagation(); sendFollowUp('${eid}')" 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> ${escapeHtml(t('send'))}</button>
+      </div>
+    </div>`;
+  }
+
+  return `<td colspan="6">
+    <div class="stream-panel" id="streamPanel-${eid}" data-session-id="${escapeHtml(sessionId)}" data-cwd="${escapeHtml(jobCwd)}">
+      <div class="stream-content" id="streamContent-${eid}">
+        <div class="stream-empty">${escapeHtml(t('stream_loading'))}</div>
+      </div>
+      ${job.status === 'done' ? `<div class="stream-done-banner">✓ ${escapeHtml(t('stream_job_done'))}</div>` : ''}
+      ${job.status === 'failed' ? `<div class="stream-done-banner failed">✗ ${escapeHtml(t('stream_job_failed'))}</div>` : ''}
+      ${actionsHtml}
+      ${followupHtml}
+      <div id="ckptPanel-${eid}" class="ckpt-panel" style="display:none"></div>
+    </div>
+  </td>`;
+}
+
 function quickForkSession(sessionId, cwd) {
   _contextMode = 'fork';
   _contextSessionId = sessionId;
@@ -53,7 +670,7 @@ function resumeFromJob(sessionId, promptHint, cwd) {
     addRecentDir(cwd);
     selectRecentDir(cwd, true);
   }
-  showToast('Resume 모드: ' + sessionId.slice(0, 8) + '... 세션에 이어서 전송합니다.');
+  showToast(t('msg_resume_mode').replace('{sid}', sessionId.slice(0, 8) + '...'));
   document.getElementById('promptInput').focus();
   window.scrollTo({ top: 0, behavior: 'smooth' });
 }
@@ -153,17 +770,15 @@ async function sendFollowUp(jobId) {
 
 async function retryJob(jobId) {
   if (_sendLock) return;
-  _sendLock = true;
 
-  try {
-    const data = await apiFetch('/api/jobs');
-    const jobs = Array.isArray(data) ? data : (data.jobs || []);
-    const job = jobs.find(j => String(j.id || j.job_id) === String(jobId));
-    if (!job || !job.prompt) {
-      showToast(t('msg_no_original_prompt'), 'error');
-      return;
-    }
+  const job = _allJobs.find(j => String(j.id || j.job_id) === String(jobId));
+  if (!job || !job.prompt) {
+    showToast(t('msg_no_original_prompt'), 'error');
+    return;
+  }
 
+  _sendLock = true;
+  try {
     const body = { prompt: job.prompt };
     if (job.cwd) body.cwd = job.cwd;
 
@@ -177,23 +792,123 @@ async function retryJob(jobId) {
   }
 }
 
-async function fetchJobs() {
+let _fetchJobsTimer = null;
+let _fetchJobsInFlight = false;
+
+async function _fetchJobsCore() {
+  if (_fetchJobsInFlight) return;
+  _fetchJobsInFlight = true;
   try {
-    const data = await apiFetch('/api/jobs');
-    const jobs = Array.isArray(data) ? data : (data.jobs || []);
-    renderJobs(jobs);
+    const params = new URLSearchParams({ page: _jobPage, limit: _jobLimit });
+    const data = await apiFetch(`/api/jobs?${params}`);
+    if (Array.isArray(data)) {
+      _jobTotal = data.length;
+      _jobPages = 1;
+      _jobPage = 1;
+      renderJobs(data);
+    } else {
+      _jobTotal = data.total || 0;
+      _jobPages = data.pages || 1;
+      _jobPage = data.page || 1;
+      renderJobs(data.jobs || []);
+    }
+    _renderJobPagination();
   } catch {
     // silent fail for polling
+  } finally {
+    _fetchJobsInFlight = false;
   }
 }
 
+function fetchJobs() {
+  if (_fetchJobsTimer) clearTimeout(_fetchJobsTimer);
+  _fetchJobsTimer = setTimeout(_fetchJobsCore, 300);
+}
+
+function goJobPage(page) {
+  _jobPage = Math.max(1, Math.min(page, _jobPages));
+  fetchJobs();
+}
+
+function _renderJobPagination() {
+  let container = document.getElementById('jobPagination');
+  if (!container) return;
+  if (_jobPages <= 1) {
+    container.innerHTML = '';
+    return;
+  }
+  const prev = _jobPage > 1;
+  const next = _jobPage < _jobPages;
+  let html = '<div class="job-pagination">';
+  html += `<button class="pg-btn" ${prev ? '' : 'disabled'} onclick="goJobPage(${_jobPage - 1})">&laquo;</button>`;
+
+  const range = _buildPageRange(_jobPage, _jobPages);
+  for (const p of range) {
+    if (p === '...') {
+      html += '<span class="pg-ellipsis">…</span>';
+    } else {
+      html += `<button class="pg-btn${p === _jobPage ? ' active' : ''}" onclick="goJobPage(${p})">${p}</button>`;
+    }
+  }
+
+  html += `<button class="pg-btn" ${next ? '' : 'disabled'} onclick="goJobPage(${_jobPage + 1})">&raquo;</button>`;
+  html += `<span class="pg-info">${_jobPage}/${_jobPages} (${_jobTotal})</span>`;
+  html += '</div>';
+  container.innerHTML = html;
+}
+
+function _buildPageRange(current, total) {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+  const pages = [];
+  pages.push(1);
+  if (current > 3) pages.push('...');
+  for (let i = Math.max(2, current - 1); i <= Math.min(total - 1, current + 1); i++) {
+    pages.push(i);
+  }
+  if (current < total - 2) pages.push('...');
+  pages.push(total);
+  return pages;
+}
+
 function renderJobs(jobs) {
+  _allJobs = jobs;
+  _updateProjectDropdown(jobs);
+  _renderProjectStrip(jobs);
+  if (_selectedProject) _showProjectDetail();
+  const filtered = filterJobs(jobs);
   const tbody = document.getElementById('jobTableBody');
   const countEl = document.getElementById('jobCount');
-  countEl.textContent = jobs.length > 0 ? `(${jobs.length}건)` : '';
+  const totalCount = _jobTotal || jobs.length;
+  const isFiltered = _jobFilterStatus !== 'all' || _jobFilterProject !== 'all' || _jobSearchQuery;
+  countEl.textContent = totalCount > 0
+    ? isFiltered ? `(${t('job_count_filtered').replace('{filtered}', filtered.length).replace('{total}', totalCount)})` : `(${t('job_count').replace('{n}', totalCount)})`
+    : '';
+
+  // 프로젝트 2개 이상 + 사용자가 수동 전환한 적 없으면 자동 grouped
+  if (!_jobViewModeManual) {
+    const projectCount = _extractProjects(jobs).length;
+    if (projectCount >= 2 && _jobViewMode !== 'grouped') {
+      _jobViewMode = 'grouped';
+      localStorage.setItem('jobViewMode', 'grouped');
+    } else if (projectCount < 2 && _jobViewMode === 'grouped') {
+      _jobViewMode = 'flat';
+      localStorage.setItem('jobViewMode', 'flat');
+    }
+  }
+
+  _updateViewModeUI();
+  const thead = tbody.closest('table')?.querySelector('thead');
+  if (_jobViewMode === 'grouped') {
+    if (thead) thead.style.display = 'none';
+    _renderGroupedView(filtered, tbody);
+    return;
+  }
+  if (thead) thead.style.display = '';
+
+  jobs = filtered;
 
   if (jobs.length === 0) {
-    tbody.innerHTML = `<tr data-job-id="__empty__"><td colspan="7" class="empty-state">
+    tbody.innerHTML = `<tr data-job-id="__empty__"><td colspan="6" class="empty-state">
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width:40px;height:40px;margin-bottom:12px;opacity:0.3;"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>
       <div>${t('no_jobs')}</div>
     </td></tr>`;
@@ -236,8 +951,8 @@ function renderJobs(jobs) {
 
     if (existing && !existing.classList.contains('expand-row')) {
       const cells = existing.querySelectorAll('td');
-      if (cells.length >= 7) {
-        const newStatus = statusBadgeHtml(job.status);
+      if (cells.length >= 6) {
+        const newStatus = statusBadgeHtml(job.status, id, job);
         if (cells[1].innerHTML !== newStatus) cells[1].innerHTML = newStatus;
         const newCwd = escapeHtml(formatCwd(job.cwd));
         if (cells[3].innerHTML !== newCwd) {
@@ -250,12 +965,12 @@ function renderJobs(jobs) {
           if (job.session_id) {
             cells[4].className = 'job-session clickable';
             cells[4].title = job.session_id;
-            cells[4].setAttribute('onclick', `event.stopPropagation(); resumeFromJob('${escapeHtml(job.session_id)}', '${escapeHtml(truncate(job.prompt, 40))}', '${escapeHtml(job.cwd || '')}')`);
+            cells[4].setAttribute('onclick', `event.stopPropagation(); resumeFromJob('${escapeJsStr(job.session_id)}', '${escapeJsStr(truncate(job.prompt, 40))}', '${escapeJsStr(job.cwd || '')}')`);
           }
         }
         const newActions = jobActionsHtml(id, job.status, job.session_id, job.cwd);
-        if (cells[6].innerHTML !== newActions) {
-          cells[6].innerHTML = newActions;
+        if (cells[5].innerHTML !== newActions) {
+          cells[5].innerHTML = newActions;
         }
       }
       existing.className = isExpanded ? 'expanded' : '';
@@ -265,14 +980,7 @@ function renderJobs(jobs) {
       tr.dataset.jobId = id;
       tr.className = isExpanded ? 'expanded' : '';
       tr.setAttribute('onclick', `toggleJobExpand('${escapeHtml(id)}')`);
-      tr.innerHTML = `
-        <td class="job-id">${escapeHtml(String(id).slice(0, 8))}</td>
-        <td>${statusBadgeHtml(job.status)}</td>
-        <td class="prompt-cell" title="${escapeHtml(job.prompt)}">${renderPromptHtml(job.prompt)}</td>
-        <td class="job-cwd" title="${escapeHtml(job.cwd || '')}">${escapeHtml(formatCwd(job.cwd))}</td>
-        <td class="job-session${job.session_id ? ' clickable' : ''}" title="${escapeHtml(job.session_id || '')}" ${job.session_id ? `onclick="event.stopPropagation(); resumeFromJob('${escapeHtml(job.session_id)}', '${escapeHtml(truncate(job.prompt, 40))}', '${escapeHtml(job.cwd || '')}')"` : ''}>${job.session_id ? escapeHtml(job.session_id.slice(0, 8)) : (job.status === 'running' ? '<span style="color:var(--text-muted);font-size:0.7rem;">—</span>' : '-')}</td>
-        <td class="job-time">${formatTime(job.created || job.created_at)}</td>
-        <td>${jobActionsHtml(id, job.status, job.session_id, job.cwd)}</td>`;
+      tr.innerHTML = _buildJobRowCells(id, job);
       tbody.appendChild(tr);
     } else {
       delete existingRows[id];
@@ -286,26 +994,14 @@ function renderJobs(jobs) {
         const expandTr = document.createElement('tr');
         expandTr.className = 'expand-row';
         expandTr.dataset.jobId = expandKey;
-        const sessionId = job.session_id || '';
-        const jobCwd = job.cwd || '';
-        expandTr.innerHTML = `<td colspan="7">
-          <div class="stream-panel" id="streamPanel-${escapeHtml(id)}" data-session-id="${escapeHtml(sessionId)}" data-cwd="${escapeHtml(jobCwd)}">
-            <div class="stream-content" id="streamContent-${escapeHtml(id)}">
-              <div class="stream-empty">스트림 데이터를 불러오는 중...</div>
-            </div>
-            ${job.status === 'done' ? '<div class="stream-done-banner">✓ 작업 완료</div>' : ''}
-            ${job.status === 'failed' ? '<div class="stream-done-banner failed">✗ 작업 실패</div>' : ''}
-            ${job.status !== 'running' ? `<div class="stream-actions"><button class="btn btn-sm" onclick="event.stopPropagation(); retryJob('${escapeHtml(id)}')"><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> 다시 실행</button><button class="btn btn-sm" onclick="event.stopPropagation(); copyStreamResult('${escapeHtml(id)}')"><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> 전체 복사</button><button class="btn btn-sm btn-danger" onclick="event.stopPropagation(); deleteJob('${escapeHtml(id)}')"><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> 작업 제거</button></div>` : ''}
-            ${(job.status !== 'running' && sessionId) ? `<div class="stream-followup"><span class="stream-followup-label">이어서</span><div class="followup-input-wrap"><input type="text" class="followup-input" id="followupInput-${escapeHtml(id)}" placeholder="이 세션에 이어서 실행할 명령..." onkeydown="if(event.key==='Enter'){event.stopPropagation();sendFollowUp('${escapeHtml(id)}')}" onclick="event.stopPropagation()"><button class="btn btn-primary btn-sm" onclick="event.stopPropagation(); sendFollowUp('${escapeHtml(id)}')" 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> 전송</button></div></div>` : ''}
-          </div>
-        </td>`;
+        expandTr.innerHTML = _buildExpandRowHtml(id, job);
         const jobRow = tbody.querySelector(`tr[data-job-id="${CSS.escape(id)}"]`);
         if (jobRow && jobRow.nextSibling) {
           tbody.insertBefore(expandTr, jobRow.nextSibling);
         } else {
           tbody.appendChild(expandTr);
         }
-        initStream(id);
+        initStream(id, job);
       } else {
         delete existingRows[expandKey];
       }
@@ -323,13 +1019,13 @@ function renderJobs(jobs) {
         streamState[id] = { offset: 0, timer: null, done: false, jobData: job, events: [], renderedCount: 0 };
       }
       if (!streamState[id].timer) {
-        initStream(id);
+        initStream(id, job);
       }
       if (!existingPreview) {
         const pvTr = document.createElement('tr');
         pvTr.className = 'preview-row';
         pvTr.dataset.jobId = previewKey;
-        pvTr.innerHTML = `<td colspan="7"><div class="job-preview" id="jobPreview-${escapeHtml(id)}"><span class="preview-text">대기 중...</span></div></td>`;
+        pvTr.innerHTML = `<td colspan="6"><div class="job-preview" id="jobPreview-${escapeHtml(id)}"><span class="preview-text">${escapeHtml(t('stream_preview_wait'))}</span></div></td>`;
         const jobRow = tbody.querySelector(`tr[data-job-id="${CSS.escape(id)}"]`);
         if (jobRow && jobRow.nextSibling) {
           tbody.insertBefore(pvTr, jobRow.nextSibling);
@@ -373,7 +1069,8 @@ function updateJobRowStatus(jobId, status) {
   if (!row || row.classList.contains('expand-row')) return;
   const cells = row.querySelectorAll('td');
   if (cells.length >= 2) {
-    const newBadge = statusBadgeHtml(status);
+    const job = _allJobs.find(j => String(j.id || j.job_id) === String(jobId));
+    const newBadge = statusBadgeHtml(status, jobId, job);
     if (cells[1].innerHTML !== newBadge) cells[1].innerHTML = newBadge;
   }
 }
@@ -396,11 +1093,12 @@ function toggleJobExpand(id) {
       if (prevRow) prevRow.className = '';
     }
     expandedJobId = id;
-    fetchJobs();
+    renderJobs(_allJobs);
   }
 }
 
 async function deleteJob(jobId) {
+  if (!confirm(t('confirm_delete_job'))) return;
   try {
     await apiFetch(`/api/jobs/${encodeURIComponent(jobId)}`, { method: 'DELETE' });
     if (streamState[jobId]) {
@@ -416,6 +1114,7 @@ async function deleteJob(jobId) {
 }
 
 async function deleteCompletedJobs() {
+  if (!confirm(t('confirm_delete_completed'))) return;
   try {
     const data = await apiFetch('/api/jobs', { method: 'DELETE' });
     const count = data.count || 0;
@@ -432,3 +1131,140 @@ async function deleteCompletedJobs() {
     showToast(`${t('msg_batch_delete_failed')}: ${err.message}`, 'error');
   }
 }
+
+/* ═══════════════════════════════════════════════
+   Checkpoint Diff Viewer
+   ═══════════════════════════════════════════════ */
+
+let _ckptCache = {};  // jobId → checkpoints array
+
+async function toggleCheckpointPanel(jobId) {
+  const panel = document.getElementById(`ckptPanel-${jobId}`);
+  if (!panel) return;
+
+  if (panel.style.display !== 'none') {
+    panel.style.display = 'none';
+    return;
+  }
+  panel.style.display = '';
+  panel.innerHTML = `<div class="ckpt-loading">${t('diff_loading')}</div>`;
+
+  try {
+    const checkpoints = await apiFetch(`/api/jobs/${encodeURIComponent(jobId)}/checkpoints`);
+    _ckptCache[jobId] = checkpoints;
+    renderCheckpointSelector(jobId, checkpoints);
+  } catch (err) {
+    panel.innerHTML = `<div class="ckpt-empty">${t('diff_no_checkpoints')}</div>`;
+  }
+}
+
+function renderCheckpointSelector(jobId, checkpoints) {
+  const panel = document.getElementById(`ckptPanel-${jobId}`);
+  if (!panel) return;
+
+  if (!checkpoints || checkpoints.length === 0) {
+    panel.innerHTML = `<div class="ckpt-empty">${t('diff_no_checkpoints')}</div>`;
+    return;
+  }
+
+  const optionsHtml = checkpoints.map((c, i) => {
+    const label = `#${c.turn} — ${c.hash.slice(0, 7)} (${c.files_changed} ${t('diff_files')})`;
+    return `<option value="${escapeHtml(c.hash)}"${i === 0 ? ' selected' : ''}>${escapeHtml(label)}</option>`;
+  }).join('');
+
+  const prevDefault = checkpoints.length > 1 ? checkpoints[1].hash : '';
+  const prevOptions = checkpoints.map((c, i) => {
+    const label = `#${c.turn} — ${c.hash.slice(0, 7)}`;
+    return `<option value="${escapeHtml(c.hash)}"${i === 1 ? ' selected' : ''}>${escapeHtml(label)}</option>`;
+  }).join('');
+
+  panel.innerHTML = `
+    <div class="ckpt-selector">
+      <div class="ckpt-select-group">
+        <label>From</label>
+        <select id="ckptFrom-${escapeHtml(jobId)}" onclick="event.stopPropagation()">${prevOptions}</select>
+      </div>
+      <span class="ckpt-arrow">→</span>
+      <div class="ckpt-select-group">
+        <label>To</label>
+        <select id="ckptTo-${escapeHtml(jobId)}" onclick="event.stopPropagation()">${optionsHtml}</select>
+      </div>
+      <button class="btn btn-primary btn-sm" onclick="event.stopPropagation(); loadDiff('${escapeHtml(jobId)}')">${t('diff_compare')}</button>
+    </div>
+    <div class="ckpt-hint">${t('diff_select_hint')}</div>
+    <div id="diffResult-${escapeHtml(jobId)}" class="diff-result"></div>`;
+
+  // 자동으로 첫 체크포인트의 단독 diff 로드
+  if (checkpoints.length >= 1) {
+    loadSingleDiff(jobId, checkpoints[0].hash);
+  }
+}
+
+async function loadSingleDiff(jobId, hash) {
+  const container = document.getElementById(`diffResult-${jobId}`);
+  if (!container) return;
+  container.innerHTML = `<div class="ckpt-loading">${t('diff_loading')}</div>`;
+
+  try {
+    const data = await apiFetch(`/api/jobs/${encodeURIComponent(jobId)}/diff?from=${encodeURIComponent(hash)}`);
+    renderDiffResult(container, data);
+  } catch (err) {
+    container.innerHTML = `<div class="ckpt-empty">${err.message || t('diff_no_changes')}</div>`;
+  }
+}
+
+async function loadDiff(jobId) {
+  const fromEl = document.getElementById(`ckptFrom-${jobId}`);
+  const toEl = document.getElementById(`ckptTo-${jobId}`);
+  if (!fromEl || !toEl) return;
+
+  const container = document.getElementById(`diffResult-${jobId}`);
+  if (!container) return;
+  container.innerHTML = `<div class="ckpt-loading">${t('diff_loading')}</div>`;
+
+  try {
+    const data = await apiFetch(
+      `/api/jobs/${encodeURIComponent(jobId)}/diff?from=${encodeURIComponent(fromEl.value)}&to=${encodeURIComponent(toEl.value)}`
+    );
+    renderDiffResult(container, data);
+  } catch (err) {
+    container.innerHTML = `<div class="ckpt-empty">${err.message || t('diff_no_changes')}</div>`;
+  }
+}
+
+function renderDiffResult(container, data) {
+  if (!data.files || data.files.length === 0) {
+    container.innerHTML = `<div class="ckpt-empty">${t('diff_no_changes')}</div>`;
+    return;
+  }
+
+  const summary = `<div class="diff-summary">
+    <span class="diff-stat-files">${data.total_files} ${t('diff_files')}</span>
+    <span class="diff-stat-add">+${data.total_additions} ${t('diff_additions')}</span>
+    <span class="diff-stat-del">-${data.total_deletions} ${t('diff_deletions')}</span>
+  </div>`;
+
+  const filesHtml = data.files.map((f, idx) => {
+    const lines = f.chunks.map(line => {
+      const escaped = escapeHtml(line);
+      if (line.startsWith('@@')) return `<div class="diff-line diff-hunk">${escaped}</div>`;
+      if (line.startsWith('+')) return `<div class="diff-line diff-add">${escaped}</div>`;
+      if (line.startsWith('-')) return `<div class="diff-line diff-del">${escaped}</div>`;
+      if (line.startsWith('\\')) return `<div class="diff-line diff-meta">${escaped}</div>`;
+      return `<div class="diff-line">${escaped}</div>`;
+    }).join('');
+
+    return `<div class="diff-file">
+      <div class="diff-file-header" onclick="event.stopPropagation(); this.parentElement.classList.toggle('collapsed')">
+        <span class="diff-file-name">${escapeHtml(f.file)}</span>
+        <span class="diff-file-stats">
+          <span class="diff-stat-add">+${f.additions}</span>
+          <span class="diff-stat-del">-${f.deletions}</span>
+        </span>
+      </div>
+      <div class="diff-file-body"><pre class="diff-code">${lines}</pre></div>
+    </div>`;
+  }).join('');
+
+  container.innerHTML = summary + filesHtml;
+}