sanjang 0.3.4 → 0.3.5

package/README.md

@@ -1,22 +1,31 @@
 # 산장 (Sanjang)
 
-> 바이브코더를 위한 로컬 개발 환경 매니저
+> 비개발자가 AI로 코드를 고치고 PR을 보낼 수 있는 로컬 개발 환경
 
-브랜치 하나로 격리된 dev 환경을 띄우고, 프리뷰하고, 관리하는 도구입니다.
-Git worktree 기반으로 동시에 여러 작업 환경(캠프)을 운영할 수 있습니다.
+"로그인 버튼 색상 변경"이라고 입력하면, 격리된 작업 환경(캠프)이 만들어지고, AI가 코드를 고치고, 결과를 바로 프리뷰하고, 팀에 PR로 보낼 수 있습니다.
 
 ## 주요 기능
 
-- **포털 홈**: 이어하기(열린 PR + 캠프)와 새로 시작(자연어 퀵스타트)로 대시보드 첫 화면 구성
-- **캠프 생성**: 브랜치 선택 → 자동 worktree + 의존성 설치 + dev 서버 시작
-- **의존성 캐시**: `init` 시 node_modules 프리빌드, 캠프 생성 시 캐시 클론으로 수초 만에 완료
-- **멀티앱 감지**: 모노레포에서 여러 앱을 자동 감지하고 init 시 인터랙티브 선택
-- **포트 자동 관리**: 캠프마다 다른 포트 자동 할당, 충돌 없음
-- **대시보드**: 브라우저에서 모든 캠프 상태 확인 + 시작/중지/삭제
-- **스냅샷**: 현재 상태 저장/복원 (git stash 기반)
-- **일 시키기**: 대시보드에서 Claude에게 작업 지시 (claude -p 연동)
-- **팀에 보내기**: 변경사항 commit + push → PR 생성 플로우
-- **프로젝트 자동 감지**: Next.js, Vite, SvelteKit, Angular, shadow-cljs, Turborepo 등 자동 인식
+### 만들기
+- **자연어 퀵스타트**: "대시보드 필터 추가"라고 입력하면 브랜치+캠프 자동 생성
+- **캠프 격리**: 각 작업이 독립된 환경에서 실행 — 서로 영향 없음
+- **프로젝트 자동 감지**: Next.js, Vite, SvelteKit, Angular, Turborepo 등 인식
+
+### 확인하기
+- **내장 프리뷰**: 대시보드 안에서 바로 결과 확인 (프록시 기반, iframe)
+- **비교 모드**: 원본(main)과 내 변경을 나란히 비교
+- **AI 변경 리포트**: "로그인 버튼이 보라색으로 바뀌었어요" — 비개발자도 이해할 수 있는 설명
+- **화면 항목 → 프리뷰 이동**: 리포트에서 UI 항목 클릭하면 해당 화면으로 바로 이동
+
+### 고치기
+- **자가 치유**: 서버 에러 자동 감지 → 패턴 매칭 → 자동 수정 → 재시작
+- **고쳐줘 버튼**: 브라우저 에러 + 서버 로그를 모아 Claude Code용 프롬프트로 클립보드 복사
+- **세이브 & 되돌리기**: 작업을 세이브하고, 문제가 생기면 원클릭 되돌리기
+- **오토세이브**: 5분간 변경 없으면 자동 세이브
+
+### 보내기
+- **팀에 보내기**: 세이브 → commit + push → PR 생성
+- **AI PR 설명**: diff를 분석해서 리뷰어가 이해하기 쉬운 PR 본문 자동 생성
 
 ---
 
@@ -183,6 +192,9 @@ export default {
 | **산장** | 이 도구 전체. 대시보드 서버 + 캠프 매니저 |
 | **캠프** | 개별 작업 환경. git worktree + dev 서버 |
 | **포털** | 대시보드 첫 화면. 이어하기 + 새로 시작 |
+| **세이브** | 작업 저장 (git commit). 되돌리기 가능 |
+| **변경 리포트** | AI가 생성하는 변경사항 요약. 카테고리별 설명 |
+| **자가 치유** | 에러 패턴 감지 → 자동 수정 → 재시작 |
 | **스냅샷** | 캠프의 현재 상태를 저장한 것 (git stash) |
 | **캐시** | 의존성 프리빌드. 캠프 생성 속도 향상 |
 

package/dashboard/app.js

@@ -12,6 +12,62 @@ 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();
+    toast(`${route} 로 이동`, 'info');
+  } catch {
+    // cross-origin — reload with new path
+    const src = iframe.src.replace(/\/preview\/(\d+)\/.*/, `/preview/$1${route}`);
+    iframe.src = src;
+  }
+}
+
 /** @type {Map<string, Array>} diagnostics keyed by playground name */
 const diagnostics = new Map();
 
@@ -22,6 +78,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 = [
   "요구사항 또 바뀌었댜... 뭐 그러려니 하쥬",
   "'간단한 건데~' 그 말이 제일 무섭댜",
@@ -218,6 +279,7 @@ function handleWsMessage(msg) {
     case 'playground-saved': {
       if (!name) break;
       toast(`💾 세이브됨: ${data?.message || ''}`, 'success');
+      if (currentWorkspace === name) transitionReportToSaved();
       break;
     }
 
@@ -225,6 +287,7 @@ function handleWsMessage(msg) {
       if (!name) break;
       toast('💾 오토세이브 완료', 'success');
       if (currentWorkspace === name) {
+        transitionReportToSaved();
         api('POST', `/api/playgrounds/${name}/enter`).then(renderWorkspace).catch(() => {});
       }
       break;
@@ -263,8 +326,8 @@ function handleWsMessage(msg) {
           </div>`;
         }).join('');
         renderBlocks(data.files);
-        // Debounced AI summary fetch
-        debounceSummaryFetch(name);
+        // Debounced AI report fetch
+        debounceReportFetch(name);
       }
 
       updateChangeSummary(data.count, data.ts);
@@ -272,6 +335,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;
+    }
   }
 }
 
@@ -1153,6 +1229,14 @@ 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');
+  lastReport = null;
   currentWorkspace = null;
   if (wsPollingInterval) { clearInterval(wsPollingInterval); wsPollingInterval = null; }
   document.getElementById('workspace').classList.add('hidden');
@@ -1164,6 +1248,108 @@ function exitWorkspace() {
 }
 window.exitWorkspace = exitWorkspace;
 
+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}`;
+    }
+
+    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 +1373,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}개 파일 수정 중`;
@@ -1200,10 +1387,9 @@ function renderWorkspace(data) {
       </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 +1397,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 {
@@ -1426,15 +1622,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;
@@ -1515,15 +1753,21 @@ 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>` : '';
     return `<div class="ws-browser-error-item">
@@ -1556,13 +1800,99 @@ 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 : ''}`;
+      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() {
+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 +1971,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
 // ---------------------------------------------------------------------------
@@ -2467,9 +2839,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 +2859,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 +2894,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 = `