sanjang 0.3.4 → 0.3.6

package/dashboard/app.js

@@ -12,6 +12,100 @@ const playgrounds = new Map();
 /** @type {Map<string, Array<{text: string, source: string}>>} logs keyed by playground name */
 const logs = new Map();
 
+// ---------------------------------------------------------------------------
+// Route inference — map file paths to preview routes
+// ---------------------------------------------------------------------------
+
+/**
+ * Infer a preview route from a file path.
+ * Only works for file-based routing patterns (pages/, app/, views/).
+ * Returns null if no route can be inferred.
+ */
+function inferRouteFromPath(filePath) {
+  const lower = filePath.toLowerCase();
+
+  // Match pages/xxx.tsx, app/xxx/page.tsx, views/xxx.vue etc.
+  const patterns = [
+    // Next.js app router: app/dashboard/page.tsx → /dashboard
+    { regex: /(?:^|[/\\])app[/\\](.+?)[/\\]page\.[^.]+$/, transform: m => '/' + m },
+    // Next.js app router: app/page.tsx → /
+    { regex: /(?:^|[/\\])app[/\\]page\.[^.]+$/, transform: () => '/' },
+    // Next.js/Nuxt pages router: pages/login.tsx → /login
+    { regex: /(?:^|[/\\])pages[/\\](.+?)(?:\.[^.]+)$/, transform: m => '/' + m },
+    // views/: views/Login.vue → /login
+    { regex: /(?:^|[/\\])views[/\\](.+?)(?:\.[^.]+)$/, transform: m => '/' + m },
+  ];
+
+  for (const { regex, transform } of patterns) {
+    const match = regex.exec(lower);
+    if (match) {
+      let route = transform(match[1] || '');
+      // Clean up: remove index, trailing slash dupes
+      route = route.replace(/\/index$/, '/').replace(/\/+/g, '/');
+      // Remove dynamic route brackets for navigation: [id] → placeholder
+      route = route.replace(/\[([^\]]+)\]/g, '1');
+      return route || '/';
+    }
+  }
+  return null;
+}
+
+/**
+ * Navigate the preview iframe to a given route.
+ */
+function navigatePreview(route) {
+  const iframe = document.querySelector('#ws-preview iframe');
+  if (!iframe) return;
+  try {
+    const base = new URL(iframe.src);
+    base.pathname = route;
+    iframe.contentWindow.location.href = base.toString();
+  } catch {
+    // cross-origin — reload with new path
+    const src = iframe.src.replace(/\/preview\/(\d+)\/.*/, `/preview/$1${route}`);
+    iframe.src = src;
+  }
+  updateUrlBar(route);
+}
+
+function updateUrlBar(route) {
+  const input = document.getElementById('ws-url-input');
+  if (input) input.value = route || '/';
+}
+
+window.previewBack = function previewBack() {
+  const iframe = document.querySelector('#ws-preview iframe');
+  if (!iframe) return;
+  try { iframe.contentWindow.history.back(); } catch { /* cross-origin */ }
+};
+
+window.previewRefresh = function previewRefresh() {
+  const iframe = document.querySelector('#ws-preview iframe');
+  if (!iframe) return;
+  try { iframe.contentWindow.location.reload(); } catch { iframe.src = iframe.src; }
+};
+
+// Viewport presets
+const VIEWPORTS = {
+  desktop: { width: '100%', height: '100%', label: '데스크탑' },
+  tablet: { width: '768px', height: '100%', label: '태블릿' },
+  mobile: { width: '375px', height: '100%', label: '모바일' },
+};
+let currentViewport = 'desktop';
+
+window.setViewport = function setViewport(size) {
+  currentViewport = size;
+  const vp = VIEWPORTS[size];
+  const iframe = document.querySelector('#ws-preview iframe');
+  if (!iframe) return;
+  iframe.style.maxWidth = vp.width;
+  iframe.style.margin = size === 'desktop' ? '0' : '0 auto';
+  iframe.style.transition = 'max-width 0.2s ease';
+  // Update active button
+  document.querySelectorAll('.ws-vp-btn').forEach(btn => btn.classList.remove('ws-vp-active'));
+  document.querySelector(`.ws-vp-btn[onclick*="${size}"]`)?.classList.add('ws-vp-active');
+};
+
 /** @type {Map<string, Array>} diagnostics keyed by playground name */
 const diagnostics = new Map();
 
@@ -22,6 +116,11 @@ let currentWorkspace = null;
 /** @type {number|null} polling interval for workspace changes */
 let wsPollingInterval = null;
 
+/** @type {object|null} 마지막 리포트 캐시 — 세이브 후 축소 표시용 */
+let lastReport = null;
+
+let compareMode = false;
+
 const SHERPA_QUOTES = [
   "요구사항 또 바뀌었댜... 뭐 그러려니 하쥬",
   "'간단한 건데~' 그 말이 제일 무섭댜",
@@ -150,6 +249,10 @@ function handleWsMessage(msg) {
       if (pg) {
         playgrounds.set(name, { ...pg, ...data });
         renderAll();
+        // When the current workspace transitions to running, refresh preview
+        if (currentWorkspace === name && data.status === 'running' && data.url) {
+          api('POST', `/api/playgrounds/${name}/enter`).then(renderWorkspace).catch(() => {});
+        }
       }
       break;
     }
@@ -218,6 +321,7 @@ function handleWsMessage(msg) {
     case 'playground-saved': {
       if (!name) break;
       toast(`💾 세이브됨: ${data?.message || ''}`, 'success');
+      if (currentWorkspace === name) transitionReportToSaved();
       break;
     }
 
@@ -225,6 +329,7 @@ function handleWsMessage(msg) {
       if (!name) break;
       toast('💾 오토세이브 완료', 'success');
       if (currentWorkspace === name) {
+        transitionReportToSaved();
         api('POST', `/api/playgrounds/${name}/enter`).then(renderWorkspace).catch(() => {});
       }
       break;
@@ -237,6 +342,48 @@ function handleWsMessage(msg) {
       break;
     }
 
+    case 'browser-console': {
+      if (!name || !data) break;
+      if (currentWorkspace !== name) break;
+      addBrowserConsole(data);
+      break;
+    }
+
+    case 'browser-network': {
+      if (!name || !data) break;
+      if (currentWorkspace !== name) break;
+      addNetworkRequest(data);
+      break;
+    }
+
+    case 'test-started': {
+      if (!name || currentWorkspace !== name) break;
+      testOutput = '';
+      testRunning = true;
+      renderTestPanel();
+      switchDevTab('test');
+      break;
+    }
+    case 'test-output': {
+      if (!name || !data || currentWorkspace !== name) break;
+      testOutput += data.text;
+      renderTestPanel();
+      break;
+    }
+    case 'test-done': {
+      if (!name || !data || currentWorkspace !== name) break;
+      testRunning = false;
+      testExitCode = data.exitCode;
+      renderTestPanel();
+      const badge = document.getElementById('ws-test-badge');
+      if (badge) {
+        badge.style.display = '';
+        badge.textContent = data.exitCode === 0 ? '✓' : '✗';
+        badge.style.background = data.exitCode === 0 ? '#22c55e' : '#ef4444';
+      }
+      break;
+    }
+
     case 'file-changes': {
       if (!name || !data) break;
       if (currentWorkspace !== name) break;
@@ -257,14 +404,14 @@ function handleWsMessage(msg) {
         if (summaryText2) summaryText2.textContent = `${data.count}개 파일 변경됨`;
         changesEl2.innerHTML = data.files.map(f => {
           const isNew = !prevPaths.has(f.path);
-          return `<div class="ws-file-item${isNew ? ' ws-file-new' : ''}">
+          return `<div class="ws-file-item ws-file-clickable${isNew ? ' ws-file-new' : ''}" onclick="showDiff('${escHtml(currentWorkspace)}','${escHtml(f.path)}')">
             <span class="changes-status changes-status-${f.status === '수정' ? 'mod' : f.status === '새 파일' ? 'new' : 'del'}">${escHtml(f.status)}</span>
             <span>${escHtml(f.path)}</span>
           </div>`;
         }).join('');
         renderBlocks(data.files);
-        // Debounced AI summary fetch
-        debounceSummaryFetch(name);
+        // Debounced AI report fetch
+        debounceReportFetch(name);
       }
 
       updateChangeSummary(data.count, data.ts);
@@ -272,6 +419,19 @@ function handleWsMessage(msg) {
       debouncePreviewRefresh();
       break;
     }
+
+    case 'compare-ready': {
+      if (!compareMode) break;
+      const mainPreview = document.getElementById('ws-preview-main');
+      if (mainPreview && data?.port) {
+        const proxyUrl = `/preview/${data.port}/`;
+        mainPreview.innerHTML = `
+          <div class="ws-preview-label">🏔️ 원본 (main)</div>
+          <iframe src="${escHtml(proxyUrl)}" class="ws-preview-iframe"></iframe>`;
+        toast('원본 프리뷰 준비 완료!', 'success');
+      }
+      break;
+    }
   }
 }
 
@@ -739,7 +899,19 @@ function branchItemHtml(b) {
     + `</div>`;
 }
 
+window.switchNewCampTab = function switchNewCampTab(tab) {
+  document.querySelectorAll('.new-camp-tab').forEach(t => t.classList.toggle('active', t.dataset.tab === tab));
+  document.getElementById('new-camp-quick').style.display = tab === 'quick' ? '' : 'none';
+  document.getElementById('new-camp-branch').style.display = tab === 'branch' ? '' : 'none';
+  if (tab === 'quick') {
+    document.getElementById('modal-quickstart-input').focus();
+  } else {
+    document.getElementById('new-pg-branch').focus();
+  }
+};
+
 window.openNewModal = async function openNewModal() {
+  document.getElementById('modal-quickstart-input').value = '';
   document.getElementById('new-pg-name').value = '';
   document.getElementById('new-pg-name-error').textContent = '';
   const input = document.getElementById('new-pg-branch');
@@ -749,6 +921,8 @@ window.openNewModal = async function openNewModal() {
   dropdown.innerHTML = '';
   dropdown.classList.remove('open');
   countEl.textContent = '불러오는 중...';
+
+  switchNewCampTab('quick');
   document.getElementById('new-pg-modal').classList.add('open');
 
   try {
@@ -785,6 +959,34 @@ window.openNewModal = async function openNewModal() {
   }, 0);
 };
 
+window.modalQuickStart = async function modalQuickStart() {
+  const input = document.getElementById('modal-quickstart-input');
+  const description = input.value.trim();
+  if (!description) { toast('뭘 하고 싶은지 입력해주세요!', 'error'); return; }
+
+  const btn = document.getElementById('modal-quickstart-btn');
+  const origText = btn.textContent;
+  btn.disabled = true;
+  btn.textContent = '만드는 중...';
+  input.disabled = true;
+  toast('캠프를 만들고 있습니다... (의존성 설치 중)', 'info');
+
+  try {
+    const result = await api('POST', '/api/quick-start', { description });
+    input.value = '';
+    closeNewModal();
+    toast(`캠프 "${result.name}" 생성 완료!`, 'success');
+    await loadPortal();
+    renderAll();
+  } catch (err) {
+    toast(`생성 실패: ${err.message}`, 'error');
+  } finally {
+    btn.disabled = false;
+    btn.textContent = origText;
+    input.disabled = false;
+  }
+};
+
 window.closeNewModal = function closeNewModal() {
   document.getElementById('new-pg-modal').classList.remove('open');
 };
@@ -937,6 +1139,60 @@ window.closeChangesModal = function() {
   changesModalName = null;
 };
 
+// ---------------------------------------------------------------------------
+// Diff Modal
+// ---------------------------------------------------------------------------
+
+window.showDiff = async function showDiff(campName, filePath) {
+  const modal = document.getElementById('diff-modal');
+  const title = document.getElementById('diff-modal-title');
+  const content = document.getElementById('diff-content');
+  if (!modal || !content) return;
+
+  title.textContent = filePath;
+  content.innerHTML = '<div style="color:var(--text-muted);padding:16px">불러오는 중...</div>';
+  modal.classList.add('open');
+
+  try {
+    const data = await api('GET', `/api/playgrounds/${campName}/diff?file=${encodeURIComponent(filePath)}`);
+
+    if (data.type === 'new') {
+      content.innerHTML = `<div class="diff-header">새 파일</div><pre class="diff-pre">${escHtml(data.content)}</pre>`;
+    } else if (data.type === 'deleted') {
+      content.innerHTML = `<div class="diff-header">삭제된 파일</div>`;
+    } else {
+      content.innerHTML = renderDiff(data.diff);
+    }
+  } catch (err) {
+    content.innerHTML = `<div style="color:var(--status-error-fg);padding:16px">${escHtml(err.message)}</div>`;
+  }
+};
+
+window.closeDiffModal = function() {
+  document.getElementById('diff-modal').classList.remove('open');
+};
+
+function renderDiff(diff) {
+  if (!diff.trim()) return '<div style="color:var(--text-muted);padding:16px">변경 내용 없음</div>';
+  const lines = diff.split('\n');
+  const html = lines.map(line => {
+    if (line.startsWith('+++') || line.startsWith('---')) {
+      return `<div class="diff-line diff-line-meta">${escHtml(line)}</div>`;
+    }
+    if (line.startsWith('@@')) {
+      return `<div class="diff-line diff-line-hunk">${escHtml(line)}</div>`;
+    }
+    if (line.startsWith('+')) {
+      return `<div class="diff-line diff-line-add">${escHtml(line)}</div>`;
+    }
+    if (line.startsWith('-')) {
+      return `<div class="diff-line diff-line-del">${escHtml(line)}</div>`;
+    }
+    return `<div class="diff-line">${escHtml(line)}</div>`;
+  }).join('');
+  return `<pre class="diff-pre">${html}</pre>`;
+}
+
 // 행위 단위 되돌리기
 window.revertAction = async function revertAction(actionIndex) {
   if (!changesModalName) return;
@@ -1076,6 +1332,7 @@ window.shipPg = async function shipPg() {
 // ---------------------------------------------------------------------------
 
 let conflictCampName = null;
+let conflictDetails = [];
 
 window.syncPg = async function syncPg(name) {
   if (!confirm('팀의 최신 변경사항을 가져올까요?')) return;
@@ -1083,13 +1340,46 @@ window.syncPg = async function syncPg(name) {
     const result = await api('POST', `/api/playgrounds/${name}/sync`);
     if (result.conflict) {
       conflictCampName = name;
+      conflictDetails = result.conflictDetails || [];
       const fileList = document.getElementById('conflict-files');
-      if (result.conflictFiles?.length) {
-        fileList.innerHTML = `<div style="font-size:12px;background:var(--bg-card);padding:8px;border-radius:4px">
-          충돌 파일: ${result.conflictFiles.map(f => `<code>${escHtml(f)}</code>`).join(', ')}
-        </div>`;
-      } else {
-        fileList.innerHTML = '';
+      if (conflictDetails.length > 0) {
+        fileList.innerHTML = conflictDetails.map(f => {
+          const sectionsHtml = f.sections.length > 0
+            ? f.sections.map((s, i) => `
+              <div class="conflict-section">
+                <div class="conflict-side conflict-ours">
+                  <div class="conflict-side-label">내 것</div>
+                  <pre>${escHtml(s.ours)}</pre>
+                </div>
+                <div class="conflict-side conflict-theirs">
+                  <div class="conflict-side-label">팀 것</div>
+                  <pre>${escHtml(s.theirs)}</pre>
+                </div>
+              </div>`).join('')
+            : '<div style="color:var(--text-muted);font-size:12px;padding:4px 0">충돌 내용을 파싱할 수 없습니다</div>';
+          return `<div class="conflict-file">
+            <div class="conflict-file-header">
+              <code>${escHtml(f.path)}</code>
+              <div class="conflict-file-actions">
+                <button class="btn btn-ghost btn-sm" onclick="resolveFile('${escHtml(f.path)}','ours')">내 것</button>
+                <button class="btn btn-ghost btn-sm" onclick="resolveFile('${escHtml(f.path)}','theirs')">팀 것</button>
+              </div>
+            </div>
+            ${sectionsHtml}
+          </div>`;
+        }).join('');
+      } else if (result.conflictFiles?.length) {
+        fileList.innerHTML = result.conflictFiles.map(f =>
+          `<div class="conflict-file">
+            <div class="conflict-file-header">
+              <code>${escHtml(f)}</code>
+              <div class="conflict-file-actions">
+                <button class="btn btn-ghost btn-sm" onclick="resolveFile('${escHtml(f)}','ours')">내 것</button>
+                <button class="btn btn-ghost btn-sm" onclick="resolveFile('${escHtml(f)}','theirs')">팀 것</button>
+              </div>
+            </div>
+          </div>`
+        ).join('');
       }
       document.getElementById('conflict-modal').classList.add('open');
     } else {
@@ -1100,6 +1390,30 @@ window.syncPg = async function syncPg(name) {
   }
 };
 
+window.resolveFile = async function resolveFile(filePath, strategy) {
+  if (!conflictCampName) return;
+  try {
+    const result = await api('POST', `/api/playgrounds/${conflictCampName}/resolve-file`, { path: filePath, strategy });
+    // Remove resolved file from UI
+    const fileEls = document.querySelectorAll('#conflict-files .conflict-file');
+    for (const el of fileEls) {
+      if (el.querySelector('code')?.textContent === filePath) {
+        el.style.opacity = '0.3';
+        el.querySelector('.conflict-file-actions').innerHTML = `<span style="color:#22c55e;font-size:12px">✓ ${strategy === 'ours' ? '내 것' : '팀 것'}</span>`;
+      }
+    }
+    if (result.remaining === 0) {
+      // All resolved — auto finalize
+      await api('POST', `/api/playgrounds/${conflictCampName}/resolve-finalize`);
+      document.getElementById('conflict-modal').classList.remove('open');
+      toast('모든 충돌이 해결되었습니다!', 'success');
+      conflictCampName = null;
+    }
+  } catch (err) {
+    toast(`파일 해결 실패: ${err.message}`, 'error');
+  }
+};
+
 window.resolveConflict = async function resolveConflict(strategy) {
   if (!conflictCampName) return;
   document.getElementById('conflict-modal').classList.remove('open');
@@ -1143,9 +1457,12 @@ function enterWorkspace(name) {
   const ws = document.getElementById('workspace');
   ws.classList.remove('hidden');
 
-  // Call enter API
   api('POST', `/api/playgrounds/${name}/enter`).then(data => {
     renderWorkspace(data);
+    // Auto-start stopped camps so the preview loads immediately
+    if (data.camp.status === 'stopped') {
+      startPg(name);
+    }
   }).catch(err => {
     toast(`캠프 진입 실패: ${err.message}`, 'error');
     exitWorkspace();
@@ -1153,6 +1470,16 @@ function enterWorkspace(name) {
 }
 
 function exitWorkspace() {
+  compareMode = false;
+  const compareBtn = document.getElementById('ws-compare-btn');
+  if (compareBtn) compareBtn.classList.remove('btn-active');
+  const mainPreview = document.getElementById('ws-preview-main');
+  if (mainPreview) mainPreview.classList.add('hidden');
+  const container = document.getElementById('ws-preview-container');
+  if (container) container.classList.remove('ws-split-view');
+  const exitToolbar = document.getElementById('ws-preview-toolbar');
+  if (exitToolbar) exitToolbar.style.display = 'none';
+  lastReport = null;
   currentWorkspace = null;
   if (wsPollingInterval) { clearInterval(wsPollingInterval); wsPollingInterval = null; }
   document.getElementById('workspace').classList.add('hidden');
@@ -1164,6 +1491,178 @@ function exitWorkspace() {
 }
 window.exitWorkspace = exitWorkspace;
 
+// ---------------------------------------------------------------------------
+// Quick Camp Switcher
+// ---------------------------------------------------------------------------
+
+window.toggleCampSwitcher = function toggleCampSwitcher() {
+  const dropdown = document.getElementById('ws-camp-dropdown');
+  if (!dropdown) return;
+  const isOpen = dropdown.classList.toggle('open');
+  if (!isOpen) return;
+
+  const camps = [...playgrounds.values()];
+  if (camps.length <= 1) {
+    dropdown.innerHTML = '<div class="ws-camp-dd-empty">다른 캠프 없음</div>';
+    return;
+  }
+  dropdown.innerHTML = camps
+    .filter(c => c.name !== currentWorkspace)
+    .map(c => {
+      const status = c.status === 'running' ? '🟢' : c.status === 'error' ? '🔴' : '⚪';
+      return `<div class="ws-camp-dd-item" onclick="switchWorkspace('${escHtml(c.name)}')">
+        <span>${status}</span>
+        <span class="ws-camp-dd-name">${escHtml(c.name)}</span>
+        <span class="ws-camp-dd-branch">${escHtml(c.branch)}</span>
+      </div>`;
+    }).join('');
+};
+
+window.switchWorkspace = async function switchWorkspace(name) {
+  // Close dropdown
+  const dropdown = document.getElementById('ws-camp-dropdown');
+  if (dropdown) dropdown.classList.remove('open');
+
+  // Clear devtools state
+  browserErrors.length = 0;
+  browserConsole.length = 0;
+  networkRequests.length = 0;
+  clearBrowserErrors();
+  clearBrowserConsole();
+  clearNetworkRequests();
+
+  currentWorkspace = name;
+  try {
+    const data = await api('POST', `/api/playgrounds/${name}/enter`);
+    renderWorkspace(data);
+  } catch (err) {
+    toast(`캠프 전환 실패: ${err.message}`, 'error');
+    exitWorkspace();
+  }
+};
+
+// Cmd+K / Ctrl+K shortcut for camp switcher
+document.addEventListener('keydown', (e) => {
+  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+    e.preventDefault();
+    if (currentWorkspace) toggleCampSwitcher();
+  }
+});
+
+// Close dropdown on outside click
+document.addEventListener('click', (e) => {
+  const dropdown = document.getElementById('ws-camp-dropdown');
+  const switcher = e.target.closest?.('.ws-camp-switcher');
+  if (dropdown && !switcher) dropdown.classList.remove('open');
+});
+
+async function fetchAndRenderReport(campName, withAi = false) {
+  const section = document.getElementById('ws-report-section');
+  if (!section) return;
+
+  try {
+    const report = await api('GET', `/api/playgrounds/${campName}/change-report${withAi ? '?ai=true' : ''}`);
+
+    if (report.totalCount === 0) {
+      if (lastReport && lastReport.summary) {
+        section.style.display = '';
+        section.classList.add('ws-report-saved');
+        document.getElementById('ws-report-summary').innerHTML =
+          `<div class="ws-report-desc ws-report-saved-desc">✅ 마지막 세이브: ${escHtml(lastReport.summary)}</div>`;
+        document.getElementById('ws-report-warnings').innerHTML = '';
+        document.getElementById('ws-report-categories').innerHTML = '';
+      } else {
+        section.style.display = 'none';
+      }
+      return;
+    }
+
+    lastReport = report;
+    section.style.display = '';
+    section.classList.remove('ws-report-saved');
+
+    const summaryEl = document.getElementById('ws-report-summary');
+    const changeSummaryText = document.getElementById('ws-changes-summary-text');
+    if (report.humanDescription) {
+      summaryEl.innerHTML = `<div class="ws-report-desc">${escHtml(report.humanDescription)}</div>`;
+    } else if (report.summary) {
+      summaryEl.innerHTML = `<div class="ws-report-desc">${escHtml(report.summary)}</div>`;
+    } else {
+      summaryEl.innerHTML = `<div class="ws-report-desc">${report.totalCount}개 파일 변경됨</div>`;
+    }
+
+    if (changeSummaryText && report.summary) {
+      changeSummaryText.textContent = `⚠️ 저장 안 됨 — ${report.summary}`;
+    }
+    // Ensure save button is visible when there are changes
+    const saveBtn = document.getElementById('ws-save-btn');
+    if (saveBtn && report.totalCount > 0) {
+      saveBtn.style.display = '';
+    }
+
+    const warningsEl = document.getElementById('ws-report-warnings');
+    if (report.warnings.length > 0) {
+      warningsEl.innerHTML = report.warnings.map(w =>
+        `<div class="ws-report-warning">
+          <span class="ws-report-warning-icon">⚠️</span>
+          <span>${escHtml(w.message)}</span>
+        </div>`
+      ).join('');
+    } else {
+      warningsEl.innerHTML = '';
+    }
+
+    const categoryNames = { ui: '🎨 화면', api: '⚙️ 서버', config: '🔧 설정', test: '🧪 테스트', docs: '📝 문서', other: '📦 기타' };
+    const categoriesEl = document.getElementById('ws-report-categories');
+    const details = report.categoryDetails || {};
+    categoriesEl.innerHTML = Object.entries(report.byCategory).map(([cat, files]) => {
+      const items = details[cat];
+      const hasDetails = items && items.length > 0;
+      return `<div class="ws-report-cat-group">
+        <div class="ws-report-cat-header">
+          <span class="ws-report-cat-label">${categoryNames[cat] || cat}</span>
+          <span class="ws-report-cat-count">${files.length}</span>
+        </div>
+        ${hasDetails
+          ? `<ul class="ws-report-cat-items">${items.map((item, idx) => {
+              const file = files[idx];
+              const route = cat === 'ui' && file ? inferRouteFromPath(file.path) : null;
+              return route
+                ? `<li class="ws-report-nav-item" onclick="navigatePreview('${escHtml(route)}')" title="${escHtml(file.path)} → ${escHtml(route)}">${escHtml(item)} <span class="ws-report-nav-hint">→ 보기</span></li>`
+                : `<li>${escHtml(item)}</li>`;
+            }).join('')}</ul>`
+          : `<ul class="ws-report-cat-items">${files.map(f => {
+              const route = cat === 'ui' ? inferRouteFromPath(f.path) : null;
+              const label = `${escHtml(f.path.split('/').pop() || f.path)} ${f.status === '새 파일' ? '추가됨' : '수정됨'}`;
+              return route
+                ? `<li class="ws-report-nav-item" onclick="navigatePreview('${escHtml(route)}')" title="${escHtml(f.path)} → ${escHtml(route)}">${label} <span class="ws-report-nav-hint">→ 보기</span></li>`
+                : `<li>${label}</li>`;
+            }).join('')}</ul>`
+        }
+      </div>`;
+    }).join('');
+
+  } catch {
+    section.style.display = 'none';
+  }
+}
+
+function transitionReportToSaved() {
+  const section = document.getElementById('ws-report-section');
+  if (!section || !lastReport) return;
+
+  if (lastReport.summary) {
+    section.style.display = '';
+    section.classList.add('ws-report-saved');
+    document.getElementById('ws-report-summary').innerHTML =
+      `<div class="ws-report-desc ws-report-saved-desc">✅ 마지막 세이브: ${escHtml(lastReport.summary)}</div>`;
+    document.getElementById('ws-report-warnings').innerHTML = '';
+    document.getElementById('ws-report-categories').innerHTML = '';
+  } else {
+    section.style.display = 'none';
+  }
+}
+
 function renderWorkspace(data) {
   const { camp, changes, warpInstalled, previewUrl, autosave } = data;
 
@@ -1187,6 +1686,7 @@ function renderWorkspace(data) {
     saveBtn.style.display = 'none';
     changesEl.innerHTML = '';
     renderBlocks([]);
+    fetchAndRenderReport(camp.name);
   } else {
     unsavedSection.classList.remove('ws-no-changes');
     summaryTextEl.textContent = `⚠️ 저장 안 됨 — ${changes.count}개 파일 수정 중`;
@@ -1194,16 +1694,15 @@ function renderWorkspace(data) {
     saveBtn.textContent = '💾 세이브하기';
     saveBtn.disabled = false;
     changesEl.innerHTML = changes.files.map(f =>
-      `<div class="ws-file-item">
+      `<div class="ws-file-item ws-file-clickable" onclick="showDiff('${escHtml(camp.name)}','${escHtml(f.path)}')">
         <span class="changes-status changes-status-${f.status === '수정' ? 'mod' : f.status === '새 파일' ? 'new' : 'del'}">${escHtml(f.status)}</span>
         <span>${escHtml(f.path)}</span>
       </div>`
     ).join('');
     renderBlocks(changes.files);
-    // Fetch AI summary
-    api('GET', `/api/playgrounds/${camp.name}/changes-summary`).then(data => {
-      if (data.summary) summaryTextEl.textContent = `⚠️ 저장 안 됨 — ${data.summary}`;
-    }).catch(() => {});
+    // 먼저 fallback으로 빠르게 렌더, 이어서 AI로 업그레이드
+    fetchAndRenderReport(camp.name);
+    fetchAndRenderReport(camp.name, true);
   }
 
   // Actions — show commits as work history
@@ -1211,12 +1710,22 @@ function renderWorkspace(data) {
   const commitList = data.commits || [];
   if (commitList.length > 0) {
     actionsEl.innerHTML = commitList.map(c =>
-      `<div class="ws-commit-item">
-        <span class="ws-commit-msg">${escHtml(c.message)}</span>
-        <span class="ws-commit-date">${escHtml(c.date)}</span>
-        <button class="btn btn-ghost btn-sm ws-revert-btn" onclick="revertCommit('${escHtml(c.hash)}')" title="이 세이브 되돌리기">↩</button>
-      </div>`
+      `<details class="ws-commit-item" data-hash="${escHtml(c.hash)}">
+        <summary class="ws-commit-summary">
+          <span class="ws-commit-arrow">▶</span>
+          <span class="ws-commit-msg">${escHtml(c.message)}</span>
+          <span class="ws-commit-date">${escHtml(c.date)}</span>
+          <button class="btn btn-ghost btn-sm ws-revert-btn" onclick="event.stopPropagation();event.preventDefault();revertCommit('${escHtml(c.hash)}')" title="이 세이브 되돌리기">↩</button>
+        </summary>
+        <div class="ws-commit-report"></div>
+      </details>`
     ).join('');
+    // 펼칠 때 자동으로 리포트 로드
+    actionsEl.querySelectorAll('.ws-commit-item').forEach(el => {
+      el.addEventListener('toggle', function() {
+        if (this.open) loadCommitReport(this, this.dataset.hash);
+      });
+    });
   } else if (changes.count > 0) {
     actionsEl.innerHTML = '<span style="color:var(--text-muted);font-size:13px">아직 커밋 없음 (작업 중)</span>';
   } else {
@@ -1225,6 +1734,7 @@ function renderWorkspace(data) {
 
   // Preview — use proxy URL (same origin, no X-Frame-Options issues)
   const previewEl = document.getElementById('ws-preview');
+  const previewToolbar = document.getElementById('ws-preview-toolbar');
   if (previewUrl) {
     const port = new URL(previewUrl).port || '80';
     const proxyUrl = `/preview/${port}/`;
@@ -1240,7 +1750,11 @@ function renderWorkspace(data) {
       iframe.style.display = 'none';
       previewEl.querySelector('.ws-preview-fallback').style.display = 'flex';
     });
+    if (previewToolbar) previewToolbar.style.display = '';
+    updateUrlBar('/');
+    if (currentViewport !== 'desktop') setViewport(currentViewport);
   } else {
+    if (previewToolbar) previewToolbar.style.display = 'none';
     previewEl.innerHTML = `
       <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;user-select:none;">
         <div style="width:4px;height:4px;image-rendering:pixelated;color:transparent;box-shadow:
@@ -1426,15 +1940,57 @@ function updateQuestProgress(hasChanges, hasSaves) {
   }
 }
 
-let summaryFetchTimer = null;
-function debounceSummaryFetch(campName) {
-  if (summaryFetchTimer) clearTimeout(summaryFetchTimer);
-  summaryFetchTimer = setTimeout(() => {
-    api('GET', `/api/playgrounds/${campName}/changes-summary`).then(data => {
-      const el = document.getElementById('ws-changes-summary-text');
-      if (data.summary && el) el.textContent = data.summary;
-    }).catch(() => {});
-  }, 3000);
+async function loadCommitReport(el, hash) {
+  const reportEl = el.querySelector('.ws-commit-report');
+  if (!reportEl || reportEl.dataset.loaded) return;
+
+  reportEl.innerHTML = '<div class="ws-commit-report-loading">불러오는 중...</div>';
+
+  try {
+    const report = await api('GET', `/api/playgrounds/${currentWorkspace}/commit-report/${hash}?ai=true`);
+    const categoryNames = { ui: '🎨 화면', api: '⚙️ 서버', config: '🔧 설정', test: '🧪 테스트', docs: '📝 문서', other: '📦 기타' };
+    const details = report.categoryDetails || {};
+
+    if (report.totalCount === 0) {
+      reportEl.innerHTML = '<div class="ws-commit-report-empty">변경 내용 없음</div>';
+      return;
+    }
+
+    reportEl.innerHTML = Object.entries(report.byCategory).map(([cat, files]) => {
+      const items = details[cat];
+      const hasDetails = items && items.length > 0;
+      return `<div class="ws-commit-cat">
+        <span class="ws-commit-cat-label">${categoryNames[cat] || cat}</span>
+        ${hasDetails
+          ? items.map((item, idx) => {
+              const file = files[idx];
+              const route = cat === 'ui' && file ? inferRouteFromPath(file.path) : null;
+              return route
+                ? `<div class="ws-commit-cat-item ws-report-nav-item" onclick="navigatePreview('${escHtml(route)}')" title="${escHtml(file.path)} → ${escHtml(route)}">${escHtml(item)} <span class="ws-report-nav-hint">→ 보기</span></div>`
+                : `<div class="ws-commit-cat-item">${escHtml(item)}</div>`;
+            }).join('')
+          : files.map(f => {
+              const route = cat === 'ui' ? inferRouteFromPath(f.path) : null;
+              const label = `${escHtml(f.path.split('/').pop() || f.path)} ${f.status === '새 파일' ? '추가됨' : '수정됨'}`;
+              return route
+                ? `<div class="ws-commit-cat-item ws-report-nav-item" onclick="navigatePreview('${escHtml(route)}')" title="${escHtml(f.path)} → ${escHtml(route)}">${label} <span class="ws-report-nav-hint">→ 보기</span></div>`
+                : `<div class="ws-commit-cat-item">${label}</div>`;
+            }).join('')
+        }
+      </div>`;
+    }).join('');
+    reportEl.dataset.loaded = 'true';
+  } catch {
+    reportEl.innerHTML = '<div class="ws-commit-report-empty">불러오기 실패</div>';
+  }
+}
+
+let reportFetchTimer = null;
+function debounceReportFetch(campName) {
+  if (reportFetchTimer) clearTimeout(reportFetchTimer);
+  reportFetchTimer = setTimeout(() => {
+    fetchAndRenderReport(campName, true);
+  }, 5000);
 }
 
 let previewRefreshTimer = null;
@@ -1466,7 +2022,7 @@ function startWorkspacePolling(name) {
         changesEl.innerHTML = '<span style="color:var(--text-muted);font-size:13px">변경 없음</span>';
       } else {
         changesEl.innerHTML = data.files.map(f =>
-          `<div class="ws-file-item">
+          `<div class="ws-file-item ws-file-clickable" onclick="showDiff('${escHtml(currentWorkspace)}','${escHtml(f.path)}')">
             <span class="changes-status changes-status-${f.status === '수정' ? 'mod' : f.status === '새 파일' ? 'new' : 'del'}">${escHtml(f.status)}</span>
             <span>${escHtml(f.path)}</span>
           </div>`
@@ -1515,20 +2071,28 @@ function renderBrowserErrors() {
   const panel = document.getElementById('ws-browser-errors');
   if (!panel) return;
   const badge = document.getElementById('ws-browser-error-badge');
+  const fixBtn = document.getElementById('ws-fix-btn');
+  // Show fix button if there are browser errors OR server error logs
+  const serverHasErrors = currentWorkspace && (logs.get(currentWorkspace) ?? [])
+    .some(l => l.source !== 'frontend' && l.source !== 'task' && /error|ERR|ENOENT|ECONNREFUSED|TypeError|SyntaxError|Cannot find/i.test(l.text));
   if (browserErrors.length === 0) {
     panel.innerHTML = '<span style="color:var(--text-muted);font-size:12px">에러 없음</span>';
     if (badge) badge.style.display = 'none';
+    if (fixBtn) fixBtn.style.display = serverHasErrors ? '' : 'none';
     return;
   }
   if (badge) {
     badge.style.display = '';
     badge.textContent = browserErrors.length;
   }
+  if (fixBtn) fixBtn.style.display = '';
   panel.innerHTML = browserErrors.slice(-20).reverse().map(e => {
     const loc = e.source ? ` <span style="color:var(--text-muted)">${escHtml(e.source.split('/').pop())}:${e.line || ''}</span>` : '';
+    const stackHtml = e.stack ? `<details class="ws-error-stack"><summary>스택 트레이스</summary><pre>${escHtml(e.stack)}</pre></details>` : '';
     return `<div class="ws-browser-error-item">
       <span class="ws-browser-error-level">${escHtml(e.level)}</span>
       <span class="ws-browser-error-msg">${escHtml(e.message)}</span>${loc}
+      ${stackHtml}
     </div>`;
   }).join('');
 }
@@ -1556,13 +2120,230 @@ window.revertCommit = async function revertCommit(hash) {
   }
 };
 
+/**
+ * Build a structured prompt from browser errors + server logs
+ * that Claude Code can use to diagnose and fix the issue.
+ */
+window.copyFixPrompt = async function copyFixPrompt() {
+  const name = currentWorkspace;
+  if (!name) return;
+
+  const sections = [];
+
+  // 1. Browser errors
+  if (browserErrors.length > 0) {
+    const errs = browserErrors.slice(-10).map(e => {
+      let line = `[${e.level}] ${e.message}`;
+      if (e.source) line += `\n  위치: ${e.source}${e.line ? ':' + e.line : ''}${e.col ? ':' + e.col : ''}`;
+      if (e.stack) line += `\n  스택:\n${e.stack.split('\n').map(s => '    ' + s.trim()).join('\n')}`;
+      return line;
+    }).join('\n\n');
+    sections.push(`## 브라우저 에러 (${browserErrors.length}개)\n\n${errs}`);
+  }
+
+  // 2. Server logs (last 20 lines, stderr/error only)
+  const serverLines = (logs.get(name) ?? [])
+    .filter(l => l.source !== 'frontend' && l.source !== 'task')
+    .slice(-20)
+    .map(l => l.text.trim())
+    .filter(Boolean);
+  if (serverLines.length > 0) {
+    sections.push(`## 서버 로그 (최근)\n\n${serverLines.join('\n')}`);
+  }
+
+  // 3. Current changes context
+  try {
+    const changes = await api('GET', `/api/playgrounds/${name}/changes`);
+    if (changes.files?.length > 0) {
+      const fileList = changes.files.map(f => `- ${f.status} ${f.path}`).join('\n');
+      sections.push(`## 현재 수정된 파일\n\n${fileList}`);
+    }
+  } catch { /* ignore */ }
+
+  if (sections.length === 0) {
+    toast('복사할 에러가 없습니다', 'info');
+    return;
+  }
+
+  const prompt = `아래 에러를 분석하고 수정해줘.
+
+에러를 읽고 근본 원인을 먼저 파악한 다음, 최소한의 변경으로 고쳐줘.
+추측하지 말고 에러 메시지와 스택 트레이스를 근거로 진단해.
+수정 후 관련 파일만 변경하고, 변경 이유를 간단히 설명해줘.
+
+${sections.join('\n\n---\n\n')}`;
+
+  try {
+    await navigator.clipboard.writeText(prompt);
+    toast('📋 에러 프롬프트 복사 완료 — Claude Code에 붙여넣기', 'success');
+  } catch {
+    // Fallback for non-HTTPS
+    const ta = document.createElement('textarea');
+    ta.value = prompt;
+    ta.style.cssText = 'position:fixed;left:-9999px';
+    document.body.appendChild(ta);
+    ta.select();
+    document.execCommand('copy');
+    ta.remove();
+    toast('📋 에러 프롬프트 복사 완료 — Claude Code에 붙여넣기', 'success');
+  }
+};
+
 function clearBrowserErrors() {
   browserErrors.length = 0;
   renderBrowserErrors();
 }
 
-window.wsShip = function() {
+// ---------------------------------------------------------------------------
+// Console Panel
+// ---------------------------------------------------------------------------
+
+/** @type {Array<{level: string, message: string, ts: number}>} */
+const browserConsole = [];
+
+function addBrowserConsole(data) {
+  browserConsole.push({ ...data, ts: Date.now() });
+  if (browserConsole.length > 200) browserConsole.splice(0, browserConsole.length - 200);
+  renderBrowserConsole();
+}
+
+function renderBrowserConsole() {
+  const panel = document.getElementById('ws-console-panel');
+  if (!panel) return;
+  const badge = document.getElementById('ws-console-badge');
+  if (browserConsole.length === 0) {
+    panel.innerHTML = '<span style="color:var(--text-muted);font-size:12px">로그 없음</span>';
+    if (badge) badge.style.display = 'none';
+    return;
+  }
+  if (badge) { badge.style.display = ''; badge.textContent = browserConsole.length; }
+  panel.innerHTML = browserConsole.slice(-50).reverse().map(e => {
+    const cls = e.level === 'warn' ? 'ws-console-warn' : e.level === 'info' ? 'ws-console-info' : 'ws-console-log';
+    return `<div class="ws-console-item ${cls}">${escHtml(e.message)}</div>`;
+  }).join('');
+}
+
+function clearBrowserConsole() {
+  browserConsole.length = 0;
+  renderBrowserConsole();
+}
+
+// ---------------------------------------------------------------------------
+// Network Panel
+// ---------------------------------------------------------------------------
+
+/** @type {Array<{url: string, method: string, status: number, duration: number, error?: string, ts: number}>} */
+const networkRequests = [];
+
+function addNetworkRequest(data) {
+  networkRequests.push({ ...data, ts: Date.now() });
+  if (networkRequests.length > 100) networkRequests.shift();
+  renderNetworkRequests();
+}
+
+function renderNetworkRequests() {
+  const panel = document.getElementById('ws-network-panel');
+  if (!panel) return;
+  const badge = document.getElementById('ws-network-badge');
+  if (networkRequests.length === 0) {
+    panel.innerHTML = '<span style="color:var(--text-muted);font-size:12px">요청 없음</span>';
+    if (badge) badge.style.display = 'none';
+    return;
+  }
+  const failed = networkRequests.filter(r => r.status >= 400 || r.status === 0).length;
+  if (badge) {
+    badge.style.display = failed > 0 ? '' : 'none';
+    badge.textContent = failed;
+  }
+  panel.innerHTML = networkRequests.slice(-30).reverse().map(r => {
+    const statusCls = r.status === 0 ? 'ws-net-err' : r.status >= 400 ? 'ws-net-err' : r.status >= 300 ? 'ws-net-warn' : 'ws-net-ok';
+    const urlShort = r.url.length > 60 ? '...' + r.url.slice(-57) : r.url;
+    return `<div class="ws-net-item">
+      <span class="ws-net-method ws-net-method-${r.method.toLowerCase()}">${escHtml(r.method)}</span>
+      <span class="ws-net-url" title="${escHtml(r.url)}">${escHtml(urlShort)}</span>
+      <span class="ws-net-status ${statusCls}">${r.status || 'ERR'}</span>
+      <span class="ws-net-dur">${r.duration}ms</span>
+    </div>`;
+  }).join('');
+}
+
+function clearNetworkRequests() {
+  networkRequests.length = 0;
+  renderNetworkRequests();
+}
+
+// ---------------------------------------------------------------------------
+// Test Runner Panel
+// ---------------------------------------------------------------------------
+
+let testOutput = '';
+let testRunning = false;
+let testExitCode = null;
+
+function renderTestPanel() {
+  const panel = document.getElementById('ws-test-panel');
+  if (!panel) return;
+  let html = '';
+  if (testRunning) {
+    html += '<div class="ws-test-status ws-test-running">실행 중...</div>';
+  } else if (testExitCode !== null) {
+    html += testExitCode === 0
+      ? '<div class="ws-test-status ws-test-pass">✅ 테스트 통과</div>'
+      : '<div class="ws-test-status ws-test-fail">❌ 테스트 실패 (exit ' + testExitCode + ')</div>';
+  }
+  if (testOutput) {
+    html += `<pre class="ws-test-output">${escHtml(testOutput)}</pre>`;
+  }
+  panel.innerHTML = html || '<span style="color:var(--text-muted);font-size:12px">🧪 버튼을 눌러 테스트 실행</span>';
+  // Auto-scroll
+  const pre = panel.querySelector('pre');
+  if (pre) pre.scrollTop = pre.scrollHeight;
+}
+
+window.wsRunTest = async function wsRunTest() {
   if (!currentWorkspace) return;
+  try {
+    testOutput = '';
+    testRunning = true;
+    testExitCode = null;
+    renderTestPanel();
+    switchDevTab('test');
+    await api('POST', `/api/playgrounds/${currentWorkspace}/test`);
+  } catch (err) {
+    testRunning = false;
+    toast(`테스트 실행 실패: ${err.message}`, 'error');
+  }
+};
+
+// Tab switching for devtools panel
+window.switchDevTab = function switchDevTab(tab) {
+  document.querySelectorAll('.ws-devtab-btn').forEach(b => b.classList.remove('ws-devtab-active'));
+  document.querySelectorAll('.ws-devtab-panel').forEach(p => p.style.display = 'none');
+  document.querySelector(`.ws-devtab-btn[data-tab="${tab}"]`)?.classList.add('ws-devtab-active');
+  const panel = document.getElementById(`ws-devtab-${tab}`);
+  if (panel) panel.style.display = '';
+};
+
+window.wsShip = async function() {
+  if (!currentWorkspace) return;
+  // Fetch report for ship confirmation
+  try {
+    const report = await api('GET', `/api/playgrounds/${currentWorkspace}/change-report?ai=true`);
+    const reportPreview = document.getElementById('ship-report-preview');
+    if (reportPreview && report.totalCount > 0) {
+      let html = '';
+      if (report.humanDescription) {
+        html += `<div class="ship-report-desc">${escHtml(report.humanDescription)}</div>`;
+      }
+      if (report.warnings.length > 0) {
+        html += report.warnings.map(w =>
+          `<div class="ws-report-warning"><span>⚠️</span> ${escHtml(w.message)}</div>`
+        ).join('');
+      }
+      reportPreview.innerHTML = html;
+      reportPreview.style.display = html ? '' : 'none';
+    }
+  } catch { /* non-blocking */ }
   openShipModal(currentWorkspace);
 };
 
@@ -1641,6 +2422,48 @@ window.togglePanel = function() {
   document.getElementById('ws-panel')?.classList.toggle('open');
 };
 
+window.toggleCompare = async function() {
+  const container = document.getElementById('ws-preview-container');
+  const mainPreview = document.getElementById('ws-preview-main');
+  const compareBtn = document.getElementById('ws-compare-btn');
+  if (!container || !mainPreview) return;
+
+  compareMode = !compareMode;
+
+  if (compareMode) {
+    compareBtn.classList.add('btn-active');
+    mainPreview.classList.remove('hidden');
+    container.classList.add('ws-split-view');
+
+    toast('원본 서버를 준비하고 있어요...', 'info');
+    try {
+      const state = await api('POST', '/api/compare/start');
+      if (state.status === 'running' && state.port) {
+        const proxyUrl = `/preview/${state.port}/`;
+        mainPreview.innerHTML = `
+          <div class="ws-preview-label">🏔️ 원본 (main)</div>
+          <iframe src="${escHtml(proxyUrl)}" class="ws-preview-iframe"></iframe>`;
+      } else if (state.status === 'starting') {
+        mainPreview.innerHTML = `
+          <div class="ws-preview-label">🏔️ 원본 (main)</div>
+          <div class="ws-preview-loading">준비 중...</div>`;
+      } else {
+        mainPreview.innerHTML = `
+          <div class="ws-preview-label">🏔️ 원본 (main)</div>
+          <div class="ws-preview-loading">원본 서버를 시작하지 못했어요</div>`;
+      }
+    } catch {
+      mainPreview.innerHTML = `
+        <div class="ws-preview-label">🏔️ 원본 (main)</div>
+        <div class="ws-preview-loading">원본 서버를 시작하지 못했어요</div>`;
+    }
+  } else {
+    compareBtn.classList.remove('btn-active');
+    mainPreview.classList.add('hidden');
+    container.classList.remove('ws-split-view');
+  }
+};
+
 // ---------------------------------------------------------------------------
 // Init
 // ---------------------------------------------------------------------------
@@ -1676,8 +2499,11 @@ async function loadPortal() {
           : 'pending';
         const timeAgo = new Date(item.updatedAt).toLocaleDateString('ko-KR', { month: 'short', day: 'numeric' });
 
+        const onclick = item.camp
+          ? `enterWorkspace('${escHtml(item.camp)}')`
+          : `resumePrWork('${escHtml(item.branch)}')`;
         return `
-        <div class="portal-work-item" onclick="${item.camp ? `enterWorkspace('${escHtml(item.camp)}')` : `window.open('${escHtml(item.prUrl)}','_blank')`}">
+        <div class="portal-work-item" onclick="${onclick}">
           <div class="portal-work-left">
             <span class="portal-work-icon">🟡</span>
             <div>
@@ -1704,8 +2530,66 @@ async function loadPortal() {
   } catch (err) {
     workList.innerHTML = '<div class="portal-empty">작업 목록을 불러올 수 없습니다</div>';
   }
+
+  // Check for stale camps
+  try {
+    const stale = await api('GET', '/api/camps/stale?days=7');
+    const banner = document.getElementById('portal-stale-banner');
+    if (banner && stale.length > 0) {
+      const totalSize = stale.map(s => s.size).join(' + ');
+      banner.style.display = '';
+      banner.innerHTML = `
+        <span>🧹 ${stale.length}개 캠프를 7일 이상 사용하지 않았어요 (${totalSize})</span>
+        <button class="btn btn-ghost btn-sm" onclick="showStaleCleanup()">정리하기</button>
+      `;
+    }
+  } catch { /* ignore */ }
 }
 
+window.showStaleCleanup = async function showStaleCleanup() {
+  try {
+    const stale = await api('GET', '/api/camps/stale?days=7');
+    if (stale.length === 0) { toast('정리할 캠프가 없습니다', 'info'); return; }
+
+    const html = stale.map(s =>
+      `<label class="ws-stale-item">
+        <input type="checkbox" value="${escHtml(s.name)}" checked>
+        <span>${escHtml(s.name)}</span>
+        <span style="color:var(--text-muted);font-size:11px">${escHtml(s.branch)} · ${escHtml(s.size)} · ${s.lastAccessedAt ? new Date(s.lastAccessedAt).toLocaleDateString('ko-KR') : '기록 없음'}</span>
+      </label>`
+    ).join('');
+
+    const modal = document.getElementById('stale-modal');
+    if (!modal) return;
+    document.getElementById('stale-list').innerHTML = html;
+    modal.classList.add('open');
+  } catch (err) {
+    toast(`정리 목록 로드 실패: ${err.message}`, 'error');
+  }
+};
+
+window.confirmStaleCleanup = async function confirmStaleCleanup() {
+  const checked = [...document.querySelectorAll('#stale-list input:checked')].map(el => el.value);
+  if (checked.length === 0) { toast('선택된 캠프가 없습니다', 'info'); return; }
+  if (!confirm(`${checked.length}개 캠프를 삭제합니다. 되돌릴 수 없습니다.`)) return;
+
+  let deleted = 0;
+  for (const name of checked) {
+    try {
+      await api('DELETE', `/api/playgrounds/${name}`);
+      deleted++;
+    } catch { /* continue */ }
+  }
+  toast(`${deleted}개 캠프 정리 완료`, 'success');
+  document.getElementById('stale-modal').classList.remove('open');
+  document.getElementById('portal-stale-banner').style.display = 'none';
+  loadPortal();
+};
+
+window.closeStaleModal = function() {
+  document.getElementById('stale-modal').classList.remove('open');
+};
+
 window.quickStart = async function quickStart() {
   const input = document.getElementById('quickstart-input');
   const description = input.value.trim();
@@ -1735,6 +2619,23 @@ window.quickStart = async function quickStart() {
 };
 
 
+window.resumePrWork = async function resumePrWork(branch) {
+  const name = branch.replace(/^[^/]+\//, '').replace(/[^a-z0-9-]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '').slice(0, 30) || 'pr-camp';
+  toast(`"${name}" 캠프를 만들고 있습니다...`, 'info');
+  try {
+    await api('POST', '/api/playgrounds', { name, branch });
+    await loadPortal();
+    renderAll();
+    enterWorkspace(name);
+  } catch (err) {
+    if (err.message?.includes('이미 있습니다')) {
+      enterWorkspace(name);
+    } else {
+      toast(`캠프 생성 실패: ${err.message}`, 'error');
+    }
+  }
+};
+
 window.autoFix = async function autoFix(name) {
   toast('문제를 분석하고 있습니다...', 'info');
   try {
@@ -2467,9 +3368,11 @@ async function loadActivityTrail() {
       }
     });
 
-    // Tents on rest days (0 commits, not first/last)
+    // Tents on rest days — limit density when most days are rest days
+    const activeDays = days.filter(d => d.commits > 0).length;
+    const tentChance = activeDays < 5 ? 0.85 : 0.5; // fewer active days → fewer tents
     heights.forEach((h, i) => {
-      if (days[i].commits === 0 && i > 0 && i < days.length - 1 && Math.random() > 0.5) {
+      if (days[i].commits === 0 && i > 0 && i < days.length - 1 && Math.random() > tentChance) {
         const x = 20 + i * dayW + dayW / 2 - 4;
         decorations += `
           <rect x="${x + 3}" y="${ground - 8}" width="2" height="2" fill="#6b7394"/>
@@ -2485,9 +3388,9 @@ async function loadActivityTrail() {
       if (datePrs && datePrs.length > 0) {
         const x = 20 + i * dayW + dayW / 2 - 4;
         const h = heights[i];
-        const tooltipText = datePrs.map(p => `#${p.number} ${p.title}`).join('\n');
+        const tooltipText = datePrs.map(p => `#${p.number} ${escHtml(p.title)}`).join('\n');
         prMarkers += `
-          <g class="pr-marker" data-tooltip="${tooltipText.replace(/"/g, '&quot;')}">
+          <g class="pr-marker" data-tooltip="${escHtml(tooltipText)}">
             <rect x="${x}" y="${h - 4}" width="2" height="2" fill="#8B4513"/>
             <rect x="${x + 4}" y="${h - 4}" width="2" height="2" fill="#8B4513"/>
             <rect x="${x + 2}" y="${h - 8}" width="2" height="4" fill="#ff6600"/>
@@ -2520,8 +3423,8 @@ async function loadActivityTrail() {
         <polygon points="${x + 2},${highest.h} ${x + 8},${highest.h + 3} ${x + 2},${highest.h + 6}" fill="#f59e0b"/>`;
     }
 
-    // Sherpa at today (last position)
-    const lastX = 20 + (days.length - 1) * dayW + dayW / 2 - 4;
+    // Sherpa at today (last position, clamped to SVG bounds)
+    const lastX = Math.min(20 + (days.length - 1) * dayW + dayW / 2 - 4, svgW - 24);
     const lastH = heights[heights.length - 1];
     const sherpaY = lastH - 16;
     const sherpa = `