sanjang 0.3.5 → 0.3.7

package/dashboard/app.js

@@ -60,14 +60,52 @@ function navigatePreview(route) {
     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;
   }
+  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();
 
@@ -211,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;
     }
@@ -300,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;
@@ -320,7 +404,7 @@ 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>`;
@@ -815,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');
@@ -825,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 {
@@ -861,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');
 };
@@ -1013,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;
@@ -1152,6 +1332,7 @@ window.shipPg = async function shipPg() {
 // ---------------------------------------------------------------------------
 
 let conflictCampName = null;
+let conflictDetails = [];
 
 window.syncPg = async function syncPg(name) {
   if (!confirm('팀의 최신 변경사항을 가져올까요?')) return;
@@ -1159,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 {
@@ -1176,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');
@@ -1219,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();
@@ -1236,6 +1477,8 @@ function exitWorkspace() {
   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; }
@@ -1248,6 +1491,71 @@ 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;
@@ -1286,6 +1594,11 @@ async function fetchAndRenderReport(campName, withAi = false) {
     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) {
@@ -1381,7 +1694,7 @@ 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>`
@@ -1421,22 +1734,44 @@ 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}/`;
-    previewEl.innerHTML = `
-      <iframe src="${escHtml(proxyUrl)}" class="ws-preview-iframe"></iframe>
-      <div class="ws-preview-fallback" style="display:none">
-        <a href="${escHtml(previewUrl)}" target="_blank" class="btn btn-primary">
-          새 탭에서 열기 → ${escHtml(previewUrl)}
-        </a>
-      </div>`;
-    const iframe = previewEl.querySelector('iframe');
-    iframe.addEventListener('error', () => {
-      iframe.style.display = 'none';
-      previewEl.querySelector('.ws-preview-fallback').style.display = 'flex';
-    });
+    const hasExtension = !!window.__SANJANG_EXTENSION__;
+    if (hasExtension) {
+      previewEl.innerHTML = `
+        <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;">
+          <div style="font-size:48px">⛰</div>
+          <div style="color:var(--text-muted);font-size:14px;text-align:center;">
+            확장이 설치되어 있어유!<br>
+            dev 서버를 직접 볼 수 있어유.
+          </div>
+          <a href="${escHtml(previewUrl)}" target="_blank" class="btn btn-primary" style="text-decoration:none">
+            새 탭에서 열기 → ${escHtml(previewUrl)}
+          </a>
+        </div>`;
+      if (previewToolbar) previewToolbar.style.display = 'none';
+    } else {
+      // No extension — use iframe+proxy fallback
+      const port = new URL(previewUrl).port || '80';
+      const proxyUrl = `/preview/${port}/`;
+      previewEl.innerHTML = `
+        <iframe src="${escHtml(proxyUrl)}" class="ws-preview-iframe"></iframe>
+        <div class="ws-preview-fallback" style="display:none">
+          <a href="${escHtml(previewUrl)}" target="_blank" class="btn btn-primary">
+            새 탭에서 열기 → ${escHtml(previewUrl)}
+          </a>
+        </div>`;
+      const iframe = previewEl.querySelector('iframe');
+      iframe.addEventListener('error', () => {
+        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:
@@ -1704,7 +2039,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>`
@@ -1770,9 +2105,11 @@ function renderBrowserErrors() {
   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('');
 }
@@ -1815,6 +2152,7 @@ window.copyFixPrompt = async function copyFixPrompt() {
     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}`);
@@ -1873,6 +2211,136 @@ function clearBrowserErrors() {
   renderBrowserErrors();
 }
 
+// ---------------------------------------------------------------------------
+// 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
@@ -2048,8 +2516,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>
@@ -2076,8 +2547,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();
@@ -2107,6 +2636,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 {