sanjang 0.3.3 → 0.3.5

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 {
@@ -1241,9 +1437,22 @@ function renderWorkspace(data) {
       previewEl.querySelector('.ws-preview-fallback').style.display = 'flex';
     });
   } else {
-    previewEl.innerHTML = `<span style="color:var(--text-muted);font-size:13px">
-      서버가 실행 중이 아닙니다. 먼저 시작해주세요.
-    </span>`;
+    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:
+          /* tent peak */
+          12px 0 0 #6b7394,
+          8px 4px 0 #6b7394, 12px 4px 0 #6b7394, 16px 4px 0 #6b7394,
+          4px 8px 0 #6b7394, 8px 8px 0 #6b7394, 12px 8px 0 #6b7394, 16px 8px 0 #6b7394, 20px 8px 0 #6b7394,
+          0px 12px 0 #4a5170, 4px 12px 0 #4a5170, 8px 12px 0 #4a5170, 12px 12px 0 #4a5170, 16px 12px 0 #4a5170, 20px 12px 0 #4a5170, 24px 12px 0 #4a5170,
+          /* zzz */
+          36px 0 0 #4a5170, 40px 4px 0 #4a5170, 36px 8px 0 #4a5170;
+          transform:scale(2);margin-bottom:8px;
+        "></div>
+        <div style="color:var(--text-muted);font-size:14px;text-align:center;margin-top:24px;">
+          캠프가 자고 있어유... zzZ
+        </div>
+      </div>`;
   }
 
   // Terminal button label
@@ -1413,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;
@@ -1502,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">
@@ -1543,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);
 };
 
@@ -1628,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
 // ---------------------------------------------------------------------------
@@ -1737,150 +2122,643 @@ window.autoFix = async function autoFix(name) {
 };
 
 // ---------------------------------------------------------------------------
-// Onboarding Tutorial
+// Sherpa Guide Mode (replaces overlay onboarding)
 // ---------------------------------------------------------------------------
 
 const ONBOARDING_KEY = 'sanjang-onboarded';
 
-const onboardingSteps = [
-  {
-    target: '#quickstart-input',
-    title: '캠프 만들기',
-    text: '하고 싶은 걸 입력하면 AI가 캠프를 자동으로 만들어줘요.',
-    position: 'bottom',
-  },
-  {
-    target: '#ws-preview',
-    title: '프리뷰 확인',
-    text: '캠프에 들어가면 전체화면으로 프리뷰를 볼 수 있어요.',
-    position: 'center',
-    waitForWorkspace: true,
-  },
-  {
-    target: '#ws-save-btn',
-    title: '세이브하기',
-    text: '변경사항이 있으면 세이브 버튼으로 저장해요. 게임 세이브처럼요!',
-    position: 'left',
-    waitForWorkspace: true,
-  },
+const SHERPA_GUIDE = [
+  "여기에 하고 싶은 거 적으면 되유. AI가 캠프 만들어줄겨.",
+  "캠프 들어가면 프리뷰 전체화면으로 보여유. 편하쥬?",
+  "세이브는 게임 세이브처럼 저장이여유. 💾 버튼 누르면 되유.",
+  "팀에 보내기 누르면 PR 만들어주유. 셰르파가 다 해줄겨.",
+  "그럼 이제 시작해봐유. 화이팅이여유~ 🏔️",
 ];
 
-function showOnboarding() {
-  if (localStorage.getItem(ONBOARDING_KEY)) return;
-  let step = 0;
+// ---------------------------------------------------------------------------
+// Sherpa Mode System (guide ↔ grumpy toggle)
+// ---------------------------------------------------------------------------
 
-  function show() {
-    // Remove previous
-    document.querySelector('.onboarding-overlay')?.remove();
+let sherpaInterval = null;
+let sherpaMode = 'grumpy'; // 'guide' or 'grumpy'
+let sherpaQueue = [];
+let sherpaIdx = 0;
 
-    if (step >= onboardingSteps.length) {
-      localStorage.setItem(ONBOARDING_KEY, '1');
-      return;
-    }
+function shuffleArray(arr) {
+  const a = [...arr];
+  for (let i = a.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [a[i], a[j]] = [a[j], a[i]];
+  }
+  return a;
+}
 
-    const s = onboardingSteps[step];
+function setSherpaMode(mode) {
+  sherpaMode = mode;
+  sherpaIdx = 0;
+  sherpaQueue = mode === 'guide' ? [...SHERPA_GUIDE] : shuffleArray(SHERPA_QUOTES);
 
-    // Skip workspace steps if not in workspace
-    if (s.waitForWorkspace && !currentWorkspace) {
-      step++;
-      show();
-      return;
-    }
+  const el = document.getElementById('sherpa-quote');
+  const speech = document.getElementById('sherpa-speech');
+  if (!el || !speech) return;
 
-    const el = document.querySelector(s.target);
-    if (!el) { step++; show(); return; }
-
-    const overlay = document.createElement('div');
-    overlay.className = 'onboarding-overlay';
-
-    const rect = el.getBoundingClientRect();
-    const highlight = document.createElement('div');
-    highlight.className = 'onboarding-highlight';
-    highlight.style.top = `${rect.top - 4}px`;
-    highlight.style.left = `${rect.left - 4}px`;
-    highlight.style.width = `${rect.width + 8}px`;
-    highlight.style.height = `${rect.height + 8}px`;
-    overlay.appendChild(highlight);
-
-    const tooltip = document.createElement('div');
-    tooltip.className = 'onboarding-tooltip';
-    tooltip.innerHTML = `
-      <div class="onboarding-title">${s.title}</div>
-      <div class="onboarding-text">${s.text}</div>
-      <div class="onboarding-actions">
-        <span class="onboarding-step">${step + 1}/${onboardingSteps.length}</span>
-        <button class="btn btn-ghost btn-sm" onclick="skipOnboarding()">건너뛰기</button>
-        <button class="btn btn-primary btn-sm" onclick="nextOnboardingStep()">${step === onboardingSteps.length - 1 ? '완료' : '다음'}</button>
-      </div>`;
+  // Visual mode indicator
+  speech.classList.toggle('guide-mode', mode === 'guide');
 
-    // Position tooltip near target
-    if (s.position === 'bottom') {
-      tooltip.style.top = `${rect.bottom + 12}px`;
-      tooltip.style.left = `${Math.max(12, rect.left)}px`;
-    } else if (s.position === 'left') {
-      tooltip.style.top = `${rect.top}px`;
-      tooltip.style.right = `${window.innerWidth - rect.left + 12}px`;
-    } else {
-      tooltip.style.top = '50%';
-      tooltip.style.left = '50%';
-      tooltip.style.transform = 'translate(-50%, -50%)';
+  // Fade transition to first message
+  el.style.opacity = '0';
+  setTimeout(() => {
+    el.textContent = sherpaQueue[0];
+    el.style.opacity = '1';
+  }, 300);
+}
+
+function advanceSherpa() {
+  const el = document.getElementById('sherpa-quote');
+  if (!el) return;
+
+  el.style.opacity = '0';
+  setTimeout(() => {
+    sherpaIdx++;
+    if (sherpaIdx >= sherpaQueue.length) {
+      if (sherpaMode === 'guide') {
+        // Guide done → switch to grumpy
+        localStorage.setItem(ONBOARDING_KEY, '1');
+        setSherpaMode('grumpy');
+        return;
+      }
+      // Reshuffle grumpy quotes
+      sherpaQueue = shuffleArray(SHERPA_QUOTES);
+      sherpaIdx = 0;
     }
+    el.textContent = sherpaQueue[sherpaIdx];
+    el.style.opacity = '1';
+  }, 500);
+}
+
+// ---------------------------------------------------------------------------
+// Basecamp Scene — Time-based Himalaya SVG
+// ---------------------------------------------------------------------------
+
+const SCENE_THEMES = {
+  dawn: {
+    skyGradient: [['0%','#050810'],['60%','#0a1028'],['100%','#141830']],
+    farRange: '#1a2040',
+    midRange: '#141a30',
+    ground: '#12151e',
+    snowColor: 'rgba(200,215,240,0.35)',
+    snowHighlight: 'rgba(220,230,250,0.4)',
+  },
+  morning: {
+    skyGradient: [['0%','#1a2540'],['40%','#2d3a5c'],['70%','#5c4a6e'],['100%','#c4785a']],
+    farRange: '#2a3058',
+    midRange: '#1e2444',
+    ground: '#12151e',
+    snowColor: 'rgba(255,220,180,0.45)',
+    snowHighlight: 'rgba(255,200,150,0.55)',
+  },
+  day: {
+    skyGradient: [['0%','#1a3050'],['50%','#2a4a6a'],['100%','#3a5a7a']],
+    farRange: '#253a58',
+    midRange: '#1a2e48',
+    ground: '#12151e',
+    snowColor: 'rgba(255,255,255,0.5)',
+    snowHighlight: 'rgba(255,255,255,0.6)',
+  },
+  evening: {
+    skyGradient: [['0%','#060810'],['40%','#0e1530'],['75%','#1a1535'],['100%','#12151e']],
+    farRange: '#182040',
+    midRange: '#121830',
+    ground: '#12151e',
+    snowColor: 'rgba(200,180,230,0.35)',
+    snowHighlight: 'rgba(220,200,240,0.4)',
+  },
+};
 
-    overlay.appendChild(tooltip);
-    document.body.appendChild(overlay);
+function renderBasecampScene() {
+  const container = document.getElementById('bc-scene-container');
+  if (!container) return;
+
+  const P = 4; // pixel size (4px grid)
+  const hour = new Date().getHours();
+  let period;
+  if (hour >= 0 && hour < 6) period = 'dawn';
+  else if (hour >= 6 && hour < 12) period = 'morning';
+  else if (hour >= 12 && hour < 18) period = 'day';
+  else period = 'evening';
+
+  const theme = SCENE_THEMES[period];
+
+  // Build gradient stops
+  const stops = theme.skyGradient.map(([offset, color]) =>
+    `<stop offset="${offset}" stop-color="${color}"/>`
+  ).join('');
+
+  // --- Stars ---
+  let starsHtml = '';
+  if (period === 'dawn') {
+    const starPositions = [
+      [45,18],[120,30],[200,12],[280,25],[360,8],[440,22],[520,15],[590,28],[150,40],[400,35],[60,42],[500,38],[330,10]
+    ];
+    starsHtml = starPositions.map(([x,y]) =>
+      `<rect x="${x}" y="${y}" width="2" height="2" fill="#fff" opacity="${0.4 + Math.random()*0.4}"><animate attributeName="opacity" values="${0.3};${0.8};${0.3}" dur="${1.5 + Math.random()*2}s" repeatCount="indefinite"/></rect>`
+    ).join('');
+    // Crescent moon (pixel)
+    starsHtml += `
+      <rect x="576" y="20" width="${P}" height="${P}" fill="#c8cee6" opacity="0.3"/>
+      <rect x="580" y="16" width="${P}" height="${P}" fill="#c8cee6" opacity="0.3"/>
+      <rect x="580" y="20" width="${P}" height="${P}" fill="#c8cee6" opacity="0.25"/>
+      <rect x="584" y="16" width="${P}" height="${P}" fill="#c8cee6" opacity="0.3"/>
+      <rect x="584" y="20" width="${P}" height="${P}" fill="#c8cee6" opacity="0.15"/>
+      <rect x="588" y="20" width="${P}" height="${P}" fill="#c8cee6" opacity="0.3"/>
+      <rect x="580" y="24" width="${P}" height="${P}" fill="#c8cee6" opacity="0.25"/>
+      <rect x="584" y="24" width="${P}" height="${P}" fill="#c8cee6" opacity="0.3"/>
+    `;
+  } else if (period === 'morning') {
+    const starPositions = [[120,20],[400,15],[550,30]];
+    starsHtml = starPositions.map(([x,y]) =>
+      `<rect x="${x}" y="${y}" width="2" height="2" fill="#fff" opacity="0.2"/>`
+    ).join('');
+  } else if (period === 'day') {
+    // Pixel clouds (4px grid)
+    starsHtml = `
+      <g opacity="0.12">
+        <rect x="104" y="28" width="8" height="4" fill="#fff"/>
+        <rect x="100" y="32" width="16" height="4" fill="#fff"/>
+        <rect x="108" y="36" width="4" height="4" fill="#fff"/>
+        <rect x="436" y="24" width="12" height="4" fill="#fff"/>
+        <rect x="432" y="28" width="20" height="4" fill="#fff"/>
+        <rect x="440" y="32" width="8" height="4" fill="#fff"/>
+      </g>
+    `;
+  } else {
+    const starPositions = [
+      [80,15],[160,35],[250,10],[340,28],[430,18],[510,32],[590,12],[140,45],[380,40],[620,25]
+    ];
+    starsHtml = starPositions.map(([x,y]) =>
+      `<rect x="${x}" y="${y}" width="2" height="2" fill="#fff" opacity="${0.3 + Math.random()*0.5}"><animate attributeName="opacity" values="${0.2};${0.7};${0.2}" dur="${2 + Math.random()*2}s" repeatCount="indefinite"/></rect>`
+    ).join('');
   }
 
-  window.nextOnboardingStep = function() {
-    step++;
-    show();
-  };
+  // --- Mountains ---
+  const farRangePoly = `0,220 0,150 20,150 20,140 40,140 40,125 55,125 55,115 70,115 70,105 85,105 85,95
+    95,95 95,85 105,85 105,80 115,80 115,85 125,85 125,95 135,95 135,105
+    150,105 150,115 165,115 165,125 180,125 180,135 200,135 200,145 220,145
+    220,135 235,135 235,120 250,120 250,105 260,105 260,90 270,90 270,78 280,78
+    280,70 288,70 288,62 295,62 295,56 302,56 302,50 308,50 308,45 314,45
+    314,50 320,50 320,56 326,56 326,65 335,65 335,78 345,78 345,90
+    355,90 355,105 370,105 370,120 385,120 385,135 400,135
+    400,125 415,125 415,110 425,110 425,98 435,98 435,88 445,88 445,78
+    450,78 450,70 456,70 456,64 462,64 462,58 466,58 466,54 470,54
+    470,50 474,50 474,46 478,46 478,50 482,50 482,56 486,56
+    486,64 492,64 492,72 498,72 498,82 508,82 508,95 518,95
+    518,108 530,108 530,120 545,120 545,135 560,135
+    560,125 570,125 570,112 580,112 580,100 590,100 590,88 598,88 598,78
+    605,78 605,70 612,70 612,76 618,76 618,85 625,85 625,95
+    635,95 635,108 645,108 645,120 658,120 658,135 680,135 680,220`;
+
+  const midRangePoly = `0,220 0,170 30,170 30,160 60,160 60,152 80,152 80,160 110,160 110,168
+    140,168 140,158 160,158 160,148 175,148 175,140 188,140 188,135 198,135 198,140
+    210,140 210,150 230,150 230,162 260,162 260,155 280,155 280,145 295,145 295,138
+    310,138 310,145 330,145 330,155 350,155 350,165
+    380,165 380,155 400,155 400,148 415,148 415,140 425,140 425,135 432,135 432,140
+    440,140 440,150 460,150 460,160 480,160 480,168
+    510,168 510,158 530,158 530,148 545,148 545,142 555,142 555,148
+    565,148 565,158 585,158 585,165 610,165 610,158 630,158 630,165 660,165 660,170 680,170 680,220`;
+
+  // --- Snow caps (4px grid) ---
+  const snowCaps = `
+    <!-- Main peak snow -->
+    <rect x="308" y="45" width="${P*2}" height="${P}" fill="${theme.snowHighlight}"/>
+    <rect x="304" y="49" width="${P*4}" height="${P}" fill="${theme.snowColor}"/>
+    <!-- Second peak snow -->
+    <rect x="474" y="46" width="${P*2}" height="${P}" fill="${theme.snowHighlight}"/>
+    <rect x="470" y="50" width="${P*4}" height="${P}" fill="${theme.snowColor}"/>
+    <!-- Smaller peaks -->
+    <rect x="104" y="80" width="${P*2}" height="${P}" fill="${theme.snowHighlight}"/>
+    <rect x="604" y="70" width="${P*2}" height="${P}" fill="${theme.snowHighlight}"/>
+    <!-- Mid-range snow -->
+    <rect x="188" y="135" width="${P*2}" height="${P}" fill="${theme.snowColor}" opacity="0.5"/>
+    <rect x="424" y="135" width="${P*2}" height="${P}" fill="${theme.snowColor}" opacity="0.5"/>
+    <rect x="544" y="142" width="${P*2}" height="${P}" fill="${theme.snowColor}" opacity="0.5"/>
+  `;
+
+  // --- Ground + texture ---
+  const groundHtml = `
+    <rect x="0" y="185" width="680" height="35" fill="${theme.ground}"/>
+    <rect x="50" y="188" width="8" height="3" fill="#1a1d28" opacity="0.5"/>
+    <rect x="200" y="190" width="6" height="2" fill="#1a1d28" opacity="0.4"/>
+    <rect x="350" y="187" width="10" height="3" fill="#1a1d28" opacity="0.5"/>
+    <rect x="500" y="191" width="7" height="2" fill="#1a1d28" opacity="0.4"/>
+    <rect x="620" y="189" width="5" height="3" fill="#1a1d28" opacity="0.5"/>
+  `;
+
+  // --- Shared basecamp elements (all 4px grid pixel art) ---
+
+  const tents = `
+    <!-- Yellow expedition tent (pixel pyramid) -->
+    <g>
+      <rect x="88" y="172" width="${P}" height="${P}" fill="#c8a820"/>
+      <rect x="84" y="176" width="${P}" height="${P}" fill="#c8a820"/>
+      <rect x="88" y="176" width="${P}" height="${P}" fill="#a08818"/>
+      <rect x="92" y="176" width="${P}" height="${P}" fill="#c8a820"/>
+      <rect x="80" y="180" width="${P}" height="${P}" fill="#c8a820"/>
+      <rect x="84" y="180" width="${P}" height="${P}" fill="#c8a820"/>
+      <rect x="88" y="180" width="${P}" height="${P}" fill="#2c2210"/>
+      <rect x="92" y="180" width="${P}" height="${P}" fill="#c8a820"/>
+      <rect x="96" y="180" width="${P}" height="${P}" fill="#c8a820"/>
+    </g>
+    <!-- Blue dome tent (pixel) -->
+    <g>
+      <rect x="520" y="176" width="${P}" height="${P}" fill="#2855a0"/>
+      <rect x="524" y="176" width="${P}" height="${P}" fill="#2855a0"/>
+      <rect x="516" y="180" width="${P}" height="${P}" fill="#2855a0"/>
+      <rect x="520" y="180" width="${P}" height="${P}" fill="#2855a0"/>
+      <rect x="524" y="180" width="${P}" height="${P}" fill="#1a2040"/>
+      <rect x="528" y="180" width="${P}" height="${P}" fill="#2855a0"/>
+      <rect x="532" y="180" width="${P}" height="${P}" fill="#2855a0"/>
+    </g>
+    <!-- Green small tent (pixel) -->
+    <g>
+      <rect x="580" y="176" width="${P}" height="${P}" fill="#1e8040"/>
+      <rect x="576" y="180" width="${P}" height="${P}" fill="#1e8040"/>
+      <rect x="580" y="180" width="${P}" height="${P}" fill="#166030"/>
+      <rect x="584" y="180" width="${P}" height="${P}" fill="#1e8040"/>
+    </g>
+    <!-- Red expedition tent (pixel) -->
+    <g>
+      <rect x="448" y="172" width="${P}" height="${P}" fill="#b83030"/>
+      <rect x="444" y="176" width="${P}" height="${P}" fill="#b83030"/>
+      <rect x="448" y="176" width="${P}" height="${P}" fill="#902020"/>
+      <rect x="452" y="176" width="${P}" height="${P}" fill="#b83030"/>
+      <rect x="440" y="180" width="${P}" height="${P}" fill="#b83030"/>
+      <rect x="444" y="180" width="${P}" height="${P}" fill="#b83030"/>
+      <rect x="448" y="180" width="${P}" height="${P}" fill="#401010"/>
+      <rect x="452" y="180" width="${P}" height="${P}" fill="#b83030"/>
+      <rect x="456" y="180" width="${P}" height="${P}" fill="#b83030"/>
+    </g>
+  `;
+
+  const flagColors = ['#e74c3c','#f39c12','#fff','#2ecc71','#3498db'];
+  const prayerFlags1 = flagColors.map((c, i) =>
+    `<rect x="${156 + i*8}" y="172" width="${P}" height="${P}" fill="${c}" opacity="0.7"/>`
+  ).join('') + flagColors.map((c, i) =>
+    `<rect x="${156 + i*8}" y="168" width="${P}" height="1" fill="#4a5170" opacity="0.5"/>`
+  ).join('');
+
+  const prayerFlags2 = flagColors.map((c, i) =>
+    `<rect x="${420 + i*8}" y="168" width="${P}" height="${P}" fill="${c}" opacity="0.6"/>`
+  ).join('') + flagColors.map((c, i) =>
+    `<rect x="${420 + i*8}" y="164" width="${P}" height="1" fill="#4a5170" opacity="0.4"/>`
+  ).join('');
+
+  const supplies = `
+    <!-- Supply crates (pixel) -->
+    <rect x="128" y="180" width="${P*2}" height="${P}" fill="#6b4a28"/>
+    <rect x="128" y="180" width="${P*2}" height="1" fill="#8b6a38"/>
+    <rect x="128" y="176" width="${P*2}" height="${P}" fill="#5a3a20"/>
+    <rect x="128" y="176" width="${P*2}" height="1" fill="#7a5a30"/>
+    <rect x="136" y="180" width="${P}" height="${P}" fill="#5a3a20"/>
+    <!-- Oxygen tanks (pixel) -->
+    <rect x="472" y="180" width="${P}" height="${P}" fill="#4a6a8a"/>
+    <rect x="472" y="176" width="${P}" height="${P}" fill="#6a8aaa"/>
+    <rect x="476" y="180" width="${P}" height="${P}" fill="#4a6a8a"/>
+    <rect x="476" y="176" width="${P}" height="${P}" fill="#6a8aaa"/>
+    <!-- Signpost (pixel) -->
+    <rect x="300" y="172" width="${P}" height="${P*3}" fill="#5a4a30"/>
+    <rect x="296" y="172" width="${P*3}" height="${P}" fill="#6b5a38"/>
+    <rect x="308" y="173" width="${P}" height="2" fill="#6b5a38"/>
+    <!-- Rope coil (pixel) -->
+    <rect x="600" y="176" width="${P}" height="${P}" fill="#8b7a50"/>
+    <rect x="604" y="176" width="${P}" height="${P}" fill="#8b7a50"/>
+    <rect x="596" y="180" width="${P}" height="${P}" fill="#8b7a50"/>
+    <rect x="608" y="180" width="${P}" height="${P}" fill="#8b7a50"/>
+    <rect x="600" y="184" width="${P}" height="${P}" fill="#8b7a50"/>
+    <rect x="604" y="184" width="${P}" height="${P}" fill="#8b7a50"/>
+    <!-- Ice axe (pixel) -->
+    <rect x="144" y="168" width="${P}" height="${P}" fill="#8090b0"/>
+    <rect x="144" y="172" width="${P}" height="${P}" fill="#6b5a38"/>
+    <rect x="144" y="176" width="${P}" height="${P}" fill="#6b5a38"/>
+    <rect x="140" y="168" width="${P}" height="${P}" fill="#aab0c0"/>
+  `;
+
+  // --- Stone ring around campfire (4px grid) ---
+  const stoneRing = `
+    <rect x="320" y="184" width="${P}" height="${P}" fill="#3a3a40"/>
+    <rect x="324" y="184" width="${P}" height="${P}" fill="#454550"/>
+    <rect x="336" y="184" width="${P}" height="${P}" fill="#454550"/>
+    <rect x="340" y="184" width="${P}" height="${P}" fill="#3a3a40"/>
+    <rect x="318" y="180" width="${P}" height="${P}" fill="#454550"/>
+    <rect x="342" y="180" width="${P}" height="${P}" fill="#3a3a40"/>
+  `;
+
+  // --- Campfire (period-specific) ---
+  let campfireHtml = '';
+  if (period === 'dawn') {
+    // Dim embers (pixel)
+    campfireHtml = `
+      ${stoneRing}
+      <rect x="328" y="180" width="${P}" height="${P}" fill="#8b2200" opacity="0.5"/>
+      <rect x="332" y="180" width="${P}" height="${P}" fill="#a03000" opacity="0.4"/>
+    `;
+  } else if (period === 'morning') {
+    // Smoke only (pixel)
+    campfireHtml = `
+      ${stoneRing}
+      <rect x="328" y="180" width="${P}" height="${P}" fill="#5a4a30"/>
+      <rect x="332" y="180" width="${P}" height="${P}" fill="#5a4a30"/>
+      <rect x="328" y="176" width="${P}" height="${P}" fill="#4a5170" opacity="0.2"/>
+      <rect x="332" y="172" width="${P}" height="${P}" fill="#4a5170" opacity="0.15"/>
+      <rect x="328" y="168" width="${P}" height="${P}" fill="#4a5170" opacity="0.1"/>
+    `;
+  } else if (period === 'day') {
+    // No fire, just logs (pixel)
+    campfireHtml = `
+      ${stoneRing}
+      <rect x="324" y="180" width="${P*3}" height="${P}" fill="#5a4a30"/>
+      <rect x="328" y="176" width="${P*2}" height="${P}" fill="#6b4a28"/>
+    `;
+  } else {
+    // Full fire with glow (all 4px pixel)
+    campfireHtml = `
+      ${stoneRing}
+      <!-- Glow (rect-based) -->
+      <rect x="316" y="168" width="${P*7}" height="${P*4}" fill="#ff8c32" opacity="0.04"/>
+      <rect x="320" y="172" width="${P*5}" height="${P*3}" fill="#ff6600" opacity="0.06"/>
+      <!-- Logs -->
+      <rect x="324" y="180" width="${P*3}" height="${P}" fill="#5a3a20"/>
+      <rect x="326" y="180" width="${P*3}" height="${P}" fill="#6b4a28"/>
+      <!-- Flames (pixel, animated with steps) -->
+      <rect x="328" y="176" width="${P}" height="${P}" fill="#ff6600">
+        <animate attributeName="opacity" values="1;0.6;1" dur="0.4s" steps="2" repeatCount="indefinite"/>
+      </rect>
+      <rect x="332" y="172" width="${P}" height="${P}" fill="#ffcc00">
+        <animate attributeName="opacity" values="0.8;1;0.6" dur="0.5s" steps="2" repeatCount="indefinite"/>
+      </rect>
+      <rect x="332" y="176" width="${P}" height="${P}" fill="#ff8800"/>
+      <rect x="328" y="172" width="${P}" height="${P}" fill="#ff9900" opacity="0.7">
+        <animate attributeName="opacity" values="0.7;0.3;0.7" dur="0.35s" steps="2" repeatCount="indefinite"/>
+      </rect>
+      <rect x="336" y="176" width="${P}" height="${P}" fill="#ff6600" opacity="0.6"/>
+      <rect x="330" y="168" width="${P}" height="${P}" fill="#ff6600" opacity="0.4">
+        <animate attributeName="opacity" values="0.4;0.1;0.4" dur="0.6s" steps="2" repeatCount="indefinite"/>
+      </rect>
+      <!-- Smoke (pixel) -->
+      <rect x="332" y="164" width="${P}" height="${P}" fill="#4a5170" opacity="0.15">
+        <animate attributeName="opacity" values="0.15;0.05;0.15" dur="2s" repeatCount="indefinite"/>
+      </rect>
+      <rect x="328" y="160" width="${P}" height="${P}" fill="#4a5170" opacity="0.08"/>
+    `;
+  }
 
-  window.skipOnboarding = function() {
-    document.querySelector('.onboarding-overlay')?.remove();
-    localStorage.setItem(ONBOARDING_KEY, '1');
-  };
+  // --- Sherpa (period-specific) ---
+  let sherpaHtml = '';
+  if (period === 'dawn') {
+    // Sleeping horizontally
+    sherpaHtml = `
+      <g transform="translate(345, 178)">
+        <!-- Body lying flat -->
+        <rect x="0" y="0" width="4" height="4" fill="#3498db"/>
+        <rect x="4" y="0" width="4" height="4" fill="#3498db"/>
+        <rect x="8" y="0" width="4" height="4" fill="#3498db"/>
+        <rect x="12" y="0" width="4" height="4" fill="#2c3e50"/>
+        <rect x="16" y="0" width="4" height="4" fill="#2c3e50"/>
+        <!-- Head -->
+        <rect x="-4" y="-1" width="4" height="4" fill="#f5c6a0"/>
+        <!-- Hat flat -->
+        <rect x="-8" y="-2" width="4" height="4" fill="#e74c3c"/>
+        <!-- Zzz (pixel) -->
+        <rect x="8" y="-8" width="${P}" height="${P}" fill="#8888aa" opacity="0.5"/>
+        <rect x="12" y="-12" width="${P}" height="${P}" fill="#8888aa" opacity="0.4"/>
+        <rect x="14" y="-16" width="${P}" height="${P}" fill="#8888aa" opacity="0.3"/>
+        <rect x="16" y="-20" width="${P}" height="${P}" fill="#8888aa" opacity="0.2"/>
+      </g>
+    `;
+  } else if (period === 'morning') {
+    // Stretching (arms raised)
+    sherpaHtml = `
+      <g transform="translate(345, 170)">
+        <!-- Hat -->
+        <rect x="0" y="-8" width="4" height="4" fill="#e74c3c"/>
+        <rect x="-4" y="-8" width="4" height="4" fill="#e74c3c"/>
+        <rect x="4" y="-8" width="4" height="4" fill="#e74c3c"/>
+        <!-- Face -->
+        <rect x="-4" y="-4" width="4" height="4" fill="#f5c6a0"/>
+        <rect x="0" y="-4" width="4" height="4" fill="#f5c6a0"/>
+        <rect x="4" y="-4" width="4" height="4" fill="#f5c6a0"/>
+        <!-- Body -->
+        <rect x="-4" y="0" width="4" height="4" fill="#3498db"/>
+        <rect x="0" y="0" width="4" height="4" fill="#3498db"/>
+        <rect x="4" y="0" width="4" height="4" fill="#3498db"/>
+        <!-- Arms raised -->
+        <rect x="-8" y="-8" width="4" height="4" fill="#3498db"/>
+        <rect x="8" y="-4" width="4" height="4" fill="#3498db"/>
+        <!-- Lower body -->
+        <rect x="-4" y="4" width="4" height="4" fill="#3498db"/>
+        <rect x="0" y="4" width="4" height="4" fill="#3498db"/>
+        <rect x="4" y="4" width="4" height="4" fill="#3498db"/>
+        <!-- Legs -->
+        <rect x="-4" y="8" width="4" height="4" fill="#2c3e50"/>
+        <rect x="4" y="8" width="4" height="4" fill="#2c3e50"/>
+      </g>
+    `;
+  } else if (period === 'day') {
+    // Walking pose with backpack
+    sherpaHtml = `
+      <g transform="translate(355, 166)">
+        <!-- Hat -->
+        <rect x="0" y="-8" width="4" height="4" fill="#e74c3c"/>
+        <rect x="-4" y="-8" width="4" height="4" fill="#e74c3c"/>
+        <rect x="4" y="-8" width="4" height="4" fill="#e74c3c"/>
+        <!-- Face -->
+        <rect x="-4" y="-4" width="4" height="4" fill="#f5c6a0"/>
+        <rect x="0" y="-4" width="4" height="4" fill="#f5c6a0"/>
+        <rect x="4" y="-4" width="4" height="4" fill="#f5c6a0"/>
+        <!-- Body -->
+        <rect x="-4" y="0" width="4" height="4" fill="#3498db"/>
+        <rect x="0" y="0" width="4" height="4" fill="#3498db"/>
+        <rect x="4" y="0" width="4" height="4" fill="#3498db"/>
+        <rect x="-4" y="4" width="4" height="4" fill="#3498db"/>
+        <rect x="0" y="4" width="4" height="4" fill="#3498db"/>
+        <rect x="4" y="4" width="4" height="4" fill="#3498db"/>
+        <!-- Backpack -->
+        <rect x="8" y="0" width="4" height="4" fill="#8b6914"/>
+        <rect x="8" y="4" width="4" height="4" fill="#8b6914"/>
+        <!-- Legs (walking) -->
+        <rect x="-4" y="8" width="4" height="4" fill="#2c3e50"/>
+        <rect x="0" y="8" width="4" height="4" fill="#2c3e50"/>
+        <rect x="4" y="12" width="4" height="4" fill="#2c3e50"/>
+        <rect x="-4" y="12" width="4" height="4" fill="#2c3e50"/>
+      </g>
+    `;
+  } else {
+    // Sitting with mug
+    sherpaHtml = `
+      <g transform="translate(345, 170)">
+        <!-- Hat -->
+        <rect x="0" y="-8" width="4" height="4" fill="#e74c3c"/>
+        <rect x="-4" y="-8" width="4" height="4" fill="#e74c3c"/>
+        <rect x="4" y="-8" width="4" height="4" fill="#e74c3c"/>
+        <!-- Face -->
+        <rect x="-4" y="-4" width="4" height="4" fill="#f5c6a0"/>
+        <rect x="0" y="-4" width="4" height="4" fill="#f5c6a0"/>
+        <rect x="4" y="-4" width="4" height="4" fill="#f5c6a0"/>
+        <!-- Body -->
+        <rect x="-4" y="0" width="4" height="4" fill="#3498db"/>
+        <rect x="0" y="0" width="4" height="4" fill="#3498db"/>
+        <rect x="4" y="0" width="4" height="4" fill="#3498db"/>
+        <!-- Backpack -->
+        <rect x="8" y="0" width="4" height="4" fill="#8b6914"/>
+        <!-- Sitting legs -->
+        <rect x="-4" y="4" width="4" height="4" fill="#2c3e50"/>
+        <rect x="0" y="4" width="4" height="4" fill="#2c3e50"/>
+        <!-- Mug (pixel) -->
+        <rect x="-8" y="0" width="${P}" height="${P}" fill="#ddd"/>
+        <rect x="-12" y="0" width="${P}" height="${P}" fill="#ddd" opacity="0.5"/>
+        <!-- Steam (pixel) -->
+        <rect x="-8" y="-4" width="${P}" height="${P}" fill="#4a5170" opacity="0.2">
+          <animate attributeName="opacity" values="0.2;0.05;0.2" dur="2s" repeatCount="indefinite"/>
+        </rect>
+      </g>
+    `;
+  }
 
-  // Start first step (only if on portal/quickstart visible)
-  show();
-}
+  // --- Distant climber (day and evening only) ---
+  let distantClimber = '';
+  if (period === 'day' || period === 'evening') {
+    const climbOpacity = period === 'day' ? 0.6 : 0.5;
+    distantClimber = `
+      <g transform="translate(612, 148)" opacity="${climbOpacity}">
+        <rect x="0" y="0" width="${P}" height="${P}" fill="#f5c6a0"/>
+        <rect x="0" y="4" width="${P}" height="${P}" fill="#c84040"/>
+        <rect x="0" y="8" width="${P}" height="${P}" fill="#2c3e50"/>
+        <rect x="4" y="0" width="${P}" height="${P}" fill="#8090b0" opacity="0.5"/>
+        <rect x="4" y="4" width="${P}" height="${P}" fill="#8090b0" opacity="0.4"/>
+      </g>
+    `;
+  }
 
-// ---------------------------------------------------------------------------
-// Sherpa Quote Rotation
-// ---------------------------------------------------------------------------
+  // --- Tent glow (dawn only) ---
+  let tentGlow = '';
+  if (period === 'dawn') {
+    tentGlow = `<rect x="88" y="180" width="4" height="4" fill="#ffcc44" opacity="0.3"/>`;
+  }
+
+  // --- Sunrise glow (morning only) ---
+  let sunriseGlow = '';
+  if (period === 'morning') {
+    sunriseGlow = `<rect x="360" y="140" width="280" height="60" fill="#e8834a" opacity="0.06"/>
+      <rect x="400" y="160" width="200" height="40" fill="#f5a060" opacity="0.05"/>`;
+  }
+
+  // --- Assemble SVG ---
+  const svgString = `
+    <svg viewBox="0 0 680 220" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" style="image-rendering:pixelated">
+      <defs>
+        <linearGradient id="bc-sky" x1="0" y1="0" x2="0" y2="1">
+          ${stops}
+        </linearGradient>
+      </defs>
+
+      <!-- Sky -->
+      <rect width="680" height="220" fill="url(#bc-sky)"/>
+
+      ${sunriseGlow}
+
+      <!-- Stars / clouds -->
+      ${starsHtml}
+
+      <!-- Far range mountains -->
+      <polygon points="${farRangePoly}" fill="${theme.farRange}"/>
+
+      <!-- Snow caps -->
+      ${snowCaps}
+
+      <!-- Mid range mountains -->
+      <polygon points="${midRangePoly}" fill="${theme.midRange}"/>
+
+      <!-- Ground -->
+      ${groundHtml}
+
+      <!-- Tent glow -->
+      ${tentGlow}
+
+      <!-- Tents -->
+      ${tents}
+
+      <!-- Prayer flags -->
+      ${prayerFlags1}
+      ${prayerFlags2}
+
+      <!-- Supplies & gear -->
+      ${supplies}
+
+      <!-- Campfire -->
+      ${campfireHtml}
+
+      <!-- Sherpa -->
+      ${sherpaHtml}
+
+      <!-- Distant climber -->
+      ${distantClimber}
+    </svg>
+  `;
+
+  container.innerHTML = svgString;
+}
 
 function startSherpaQuotes() {
   const el = document.getElementById('sherpa-quote');
   if (!el) return;
 
-  // Shuffle array (Fisher-Yates)
-  let quotes = [...SHERPA_QUOTES];
-  for (let i = quotes.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [quotes[i], quotes[j]] = [quotes[j], quotes[i]];
-  }
+  const isFirstVisit = !localStorage.getItem(ONBOARDING_KEY);
 
-  let idx = 0;
-  // Set initial random quote
-  el.textContent = quotes[idx];
+  if (isFirstVisit) {
+    // First visit: start with tap prompt, then guide on click
+    sherpaMode = 'intro';
+    el.textContent = '나를 눌러보세유~';
+  } else {
+    setSherpaMode('grumpy');
+  }
 
-  setInterval(() => {
-    el.style.opacity = '0';
-    setTimeout(() => {
-      idx++;
-      if (idx >= quotes.length) {
-        // Reshuffle
-        for (let i = quotes.length - 1; i > 0; i--) {
-          const j = Math.floor(Math.random() * (i + 1));
-          [quotes[i], quotes[j]] = [quotes[j], quotes[i]];
-        }
-        idx = 0;
-      }
-      el.textContent = quotes[idx];
-      el.style.opacity = '1';
-    }, 500);
+  // Start rotation timer
+  if (sherpaInterval) clearInterval(sherpaInterval);
+  sherpaInterval = setInterval(() => {
+    if (sherpaMode === 'intro') return; // Don't rotate during intro
+    advanceSherpa();
   }, 8000);
 }
 
+window.toggleSherpaMode = function() {
+  const speech = document.getElementById('sherpa-speech');
+  const el = document.getElementById('sherpa-quote');
+  if (!el || !speech) return;
+
+  if (sherpaMode === 'intro') {
+    // First click ever: enter guide mode
+    setSherpaMode('guide');
+    return;
+  }
+
+  // Toggle between guide and grumpy
+  const newMode = sherpaMode === 'guide' ? 'grumpy' : 'guide';
+
+  // Brief mode-switch message
+  el.style.opacity = '0';
+  setTimeout(() => {
+    if (newMode === 'guide') {
+      el.textContent = '가이드 모드여유~ 사용법 알려줄겨 📋';
+    } else {
+      el.textContent = '다시 푸념 모드여유... 😮‍💨';
+    }
+    el.style.opacity = '1';
+
+    setTimeout(() => {
+      setSherpaMode(newMode);
+    }, 2000);
+  }, 300);
+};
+
 // ---------------------------------------------------------------------------
 // Activity Trail
 // ---------------------------------------------------------------------------
@@ -1961,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"/>
@@ -1979,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"/>
@@ -2014,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 = `
@@ -2137,12 +3017,11 @@ async function init() {
   }
   renderAll();
   loadPortal();
+  renderBasecampScene();
   startSherpaQuotes();
   loadActivityTrail();
   connectWs();
 
-  // Show onboarding for first-time users
-  setTimeout(showOnboarding, 500);
 }
 
 document.addEventListener('DOMContentLoaded', init);