sanjang 0.3.5 → 0.3.7

package/dashboard/index.html

@@ -12,7 +12,7 @@
   <!-- Header -->
   <header>
     <h1>산장 <span id="project-name" style="font-weight:400;color:var(--text-muted);font-size:0.6em"></span></h1>
-    <button class="btn btn-primary" onclick="document.getElementById('quickstart-input').focus();document.getElementById('quickstart-input').scrollIntoView({behavior:'smooth'})">+ 새 캠프</button>
+    <button class="btn btn-primary" onclick="openNewModal()">+ 새 캠프</button>
   </header>
 
   <!-- Portal Home -->
@@ -31,9 +31,13 @@
       </div>
     </div>
 
+    <!-- Stale camp banner -->
+    <div class="portal-stale-banner" id="portal-stale-banner" style="display:none"></div>
+
     <!-- 새로 시작 (핵심 액션, 맨 위) -->
     <div class="portal-section">
       <div class="portal-quickstart">
+        <label for="quickstart-input" class="sr-only">뭘 하고 싶어?</label>
         <input class="form-input portal-quickstart-input" id="quickstart-input"
           type="text" placeholder="뭘 하고 싶어? (예: 로그인 버튼 색상 변경)"
           autocomplete="off" spellcheck="false"
@@ -65,7 +69,10 @@
     <!-- Top bar — minimal, over the preview -->
     <div class="ws-topbar">
       <button class="btn btn-ghost btn-sm" onclick="exitWorkspace()">← 목록</button>
-      <span class="workspace-title" id="ws-title"></span>
+      <div class="ws-camp-switcher">
+        <button class="ws-camp-switch-btn" id="ws-title" onclick="toggleCampSwitcher()"></button>
+        <div class="ws-camp-dropdown" id="ws-camp-dropdown"></div>
+      </div>
       <span class="workspace-status" id="ws-status"></span>
       <div class="ws-mini-char" id="ws-mini-char"></div>
       <div class="ws-quest" id="ws-quest">
@@ -76,11 +83,27 @@
         <div class="ws-quest-step" id="ws-step-ship"><div class="ws-quest-dot"></div><span>보내기</span></div>
       </div>
       <div style="flex:1"></div>
+      <button class="btn btn-sub btn-sm" id="ws-test-btn" onclick="wsRunTest()">🧪 테스트</button>
       <button class="btn btn-sub btn-sm" id="ws-terminal-btn" onclick="wsOpenTerminal()">💻 터미널</button>
       <button class="btn btn-sub btn-sm" id="ws-compare-btn" onclick="toggleCompare()" title="원본과 비교">🔀 비교</button>
       <button class="btn btn-sub btn-sm" onclick="togglePanel()">⛰ 패널</button>
     </div>
 
+    <!-- Preview toolbar — URL bar + viewport switcher -->
+    <div class="ws-preview-toolbar" id="ws-preview-toolbar" style="display:none">
+      <div class="ws-url-bar">
+        <button class="ws-url-back" onclick="previewBack()" title="뒤로">←</button>
+        <button class="ws-url-refresh" onclick="previewRefresh()" title="새로고침">↻</button>
+        <input class="ws-url-input" id="ws-url-input" type="text" placeholder="/" spellcheck="false"
+          onkeydown="if(event.key==='Enter')navigatePreview(this.value)">
+      </div>
+      <div class="ws-viewport-switcher">
+        <button class="ws-vp-btn ws-vp-active" onclick="setViewport('desktop')" title="데스크탑">🖥</button>
+        <button class="ws-vp-btn" onclick="setViewport('tablet')" title="태블릿">📱</button>
+        <button class="ws-vp-btn" onclick="setViewport('mobile')" title="모바일">📲</button>
+      </div>
+    </div>
+
     <!-- Preview — full screen with optional split -->
     <div class="ws-preview-container" id="ws-preview-container">
       <div class="ws-preview-full" id="ws-preview"></div>
@@ -116,16 +139,39 @@
           <h3>📜 세이브 기록</h3>
           <div id="ws-actions"></div>
         </div>
-        <details class="workspace-section ws-log-details">
-          <summary>🔴 브라우저 에러 <span class="ws-error-badge" id="ws-browser-error-badge" style="display:none">0</span></summary>
-          <div class="ws-browser-error-panel" id="ws-browser-errors">
-            <span style="color:var(--text-muted);font-size:12px">에러 없음</span>
+        <details class="workspace-section ws-log-details" open>
+          <summary>🛠 개발자 도구</summary>
+          <div class="ws-devtabs">
+            <button class="ws-devtab-btn ws-devtab-active" data-tab="errors" onclick="switchDevTab('errors')">🔴 에러 <span class="ws-error-badge" id="ws-browser-error-badge" style="display:none">0</span></button>
+            <button class="ws-devtab-btn" data-tab="console" onclick="switchDevTab('console')">콘솔 <span class="ws-devtab-badge" id="ws-console-badge" style="display:none">0</span></button>
+            <button class="ws-devtab-btn" data-tab="network" onclick="switchDevTab('network')">네트워크 <span class="ws-devtab-badge" id="ws-network-badge" style="display:none">0</span></button>
+            <button class="ws-devtab-btn" data-tab="test" onclick="switchDevTab('test')">🧪 테스트 <span class="ws-devtab-badge ws-test-badge" id="ws-test-badge" style="display:none"></span></button>
+            <button class="ws-devtab-btn" data-tab="log" onclick="switchDevTab('log')">📜 로그</button>
+          </div>
+          <div class="ws-devtab-panel" id="ws-devtab-errors">
+            <div class="ws-browser-error-panel" id="ws-browser-errors">
+              <span style="color:var(--text-muted);font-size:12px">에러 없음</span>
+            </div>
+            <button class="btn btn-fix" id="ws-fix-btn" onclick="copyFixPrompt()" style="display:none">🩹 고쳐줘 — 클립보드 복사</button>
+          </div>
+          <div class="ws-devtab-panel" id="ws-devtab-console" style="display:none">
+            <div class="ws-console-panel" id="ws-console-panel">
+              <span style="color:var(--text-muted);font-size:12px">로그 없음</span>
+            </div>
+          </div>
+          <div class="ws-devtab-panel" id="ws-devtab-network" style="display:none">
+            <div class="ws-network-panel" id="ws-network-panel">
+              <span style="color:var(--text-muted);font-size:12px">요청 없음</span>
+            </div>
+          </div>
+          <div class="ws-devtab-panel" id="ws-devtab-test" style="display:none">
+            <div class="ws-test-panel" id="ws-test-panel">
+              <span style="color:var(--text-muted);font-size:12px">🧪 버튼을 눌러 테스트 실행</span>
+            </div>
+          </div>
+          <div class="ws-devtab-panel" id="ws-devtab-log" style="display:none">
+            <div class="ws-log-panel" id="ws-log"><pre></pre></div>
           </div>
-          <button class="btn btn-fix" id="ws-fix-btn" onclick="copyFixPrompt()" style="display:none">🩹 고쳐줘 — 클립보드 복사</button>
-        </details>
-        <details class="workspace-section ws-log-details">
-          <summary>📜 로그</summary>
-          <div class="ws-log-panel" id="ws-log"><pre></pre></div>
         </details>
       </div>
       <div class="ws-panel-actions">
@@ -145,39 +191,68 @@
     <div class="modal" role="dialog" aria-modal="true" aria-labelledby="new-pg-modal-title">
       <h2 id="new-pg-modal-title">새 캠프</h2>
 
-      <div class="form-group">
-        <label class="form-label" for="new-pg-name">이름</label>
-        <input
-          class="form-input"
-          id="new-pg-name"
-          type="text"
-          placeholder="예: my-feature"
-          autocomplete="off"
-          spellcheck="false"
-        >
-        <span class="form-hint">소문자, 숫자, 하이픈만 사용 가능</span>
-        <span id="new-pg-name-error" style="color: var(--status-error-fg); font-size: 12px;"></span>
+      <div class="new-camp-tabs">
+        <button class="new-camp-tab active" data-tab="quick" onclick="switchNewCampTab('quick')">뭘 하고 싶어?</button>
+        <button class="new-camp-tab" data-tab="branch" onclick="switchNewCampTab('branch')">브랜치 선택</button>
       </div>
 
-      <div class="form-group">
-        <label class="form-label" for="new-pg-branch">브랜치</label>
-        <div class="branch-picker" id="branch-picker">
+      <!-- 탭 1: 자연어 퀵스타트 -->
+      <div class="new-camp-panel" id="new-camp-quick">
+        <div class="form-group">
+          <label for="modal-quickstart-input" class="sr-only">뭘 하고 싶어?</label>
           <input
             class="form-input"
-            id="new-pg-branch"
+            id="modal-quickstart-input"
             type="text"
-            placeholder="브랜치 이름 검색..."
+            placeholder="예: 로그인 버튼 색상 변경"
             autocomplete="off"
             spellcheck="false"
+            onkeydown="if(event.key==='Enter')modalQuickStart()"
           >
-          <div class="branch-dropdown" id="branch-dropdown"></div>
+          <span class="form-hint">AI가 브랜치 이름과 캠프를 자동으로 만들어줍니다</span>
+        </div>
+        <div class="modal-actions">
+          <button class="btn btn-ghost" onclick="closeNewModal()">취소</button>
+          <button class="btn btn-primary" id="modal-quickstart-btn" onclick="modalQuickStart()">시작</button>
         </div>
-        <span class="form-hint" id="branch-count"></span>
       </div>
 
-      <div class="modal-actions">
-        <button class="btn btn-ghost" onclick="closeNewModal()">취소</button>
-        <button class="btn btn-primary" id="create-pg-btn" onclick="createPg()">생성</button>
+      <!-- 탭 2: 기존 브랜치 선택 -->
+      <div class="new-camp-panel" id="new-camp-branch" style="display:none">
+        <div class="form-group">
+          <label class="form-label" for="new-pg-name">이름</label>
+          <input
+            class="form-input"
+            id="new-pg-name"
+            type="text"
+            placeholder="예: my-feature"
+            autocomplete="off"
+            spellcheck="false"
+          >
+          <span class="form-hint">소문자, 숫자, 하이픈만 사용 가능</span>
+          <span id="new-pg-name-error" style="color: var(--status-error-fg); font-size: 12px;"></span>
+        </div>
+
+        <div class="form-group">
+          <label class="form-label" for="new-pg-branch">브랜치</label>
+          <div class="branch-picker" id="branch-picker">
+            <input
+              class="form-input"
+              id="new-pg-branch"
+              type="text"
+              placeholder="브랜치 이름 검색..."
+              autocomplete="off"
+              spellcheck="false"
+            >
+            <div class="branch-dropdown" id="branch-dropdown"></div>
+          </div>
+          <span class="form-hint" id="branch-count"></span>
+        </div>
+
+        <div class="modal-actions">
+          <button class="btn btn-ghost" onclick="closeNewModal()">취소</button>
+          <button class="btn btn-primary" id="create-pg-btn" onclick="createPg()">생성</button>
+        </div>
       </div>
     </div>
   </div>
@@ -214,6 +289,19 @@
     </div>
   </div>
 
+  <!-- Stale Cleanup Modal -->
+  <div class="modal-backdrop" id="stale-modal">
+    <div class="modal" role="dialog" aria-modal="true">
+      <h2>캠프 정리</h2>
+      <p style="font-size:13px;color:var(--text-muted);margin-bottom:12px">삭제할 캠프를 선택하세요. 이 작업은 되돌릴 수 없습니다.</p>
+      <div id="stale-list"></div>
+      <div class="modal-actions">
+        <button class="btn btn-ghost" onclick="closeStaleModal()">취소</button>
+        <button class="btn btn-danger" onclick="confirmStaleCleanup()">삭제</button>
+      </div>
+    </div>
+  </div>
+
   <!-- Changes Modal -->
   <div class="modal-backdrop" id="changes-modal">
     <div class="modal" role="dialog" aria-modal="true">
@@ -225,6 +313,17 @@
     </div>
   </div>
 
+  <!-- Diff Modal -->
+  <div class="modal-backdrop" id="diff-modal">
+    <div class="modal modal-wide" role="dialog" aria-modal="true">
+      <h2 id="diff-modal-title">변경 내용</h2>
+      <div class="diff-content" id="diff-content"></div>
+      <div class="modal-actions">
+        <button class="btn btn-ghost" onclick="closeDiffModal()">닫기</button>
+      </div>
+    </div>
+  </div>
+
   <!-- Ship Modal -->
   <div class="modal-backdrop" id="ship-modal">
     <div class="modal" role="dialog" aria-modal="true">
@@ -270,13 +369,13 @@
 
   <!-- Conflict Modal -->
   <div class="modal-backdrop" id="conflict-modal">
-    <div class="modal" role="dialog" aria-modal="true">
+    <div class="modal modal-wide" role="dialog" aria-modal="true">
       <h2>충돌이 발생했어요</h2>
       <p style="font-size:13px;color:var(--text-muted);margin-bottom:12px">
-        팀의 변경사항과 내 변경사항이 같은 부분을 수정해서 충돌이 생겼어요.
+        같은 파일을 동시에 수정해서 충돌이 생겼어요. 파일별로 선택하거나, 한꺼번에 해결할 수 있어요.
       </p>
-      <div id="conflict-files" style="margin-bottom:16px"></div>
-      <p style="font-size:13px;margin-bottom:16px">어떻게 할까요?</p>
+      <div id="conflict-files" style="margin-bottom:16px;max-height:50vh;overflow:auto"></div>
+      <p style="font-size:13px;margin-bottom:16px">또는 한꺼번에:</p>
       <div style="display:flex;flex-direction:column;gap:8px">
         <button class="btn btn-primary" onclick="resolveConflict('claude')">
           Claude에게 맡기기 (추천)

package/dashboard/style.css

@@ -7,6 +7,18 @@
 
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Outfit:wght@400;500;600;700&display=swap');
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border: 0;
+}
+
 *, *::before, *::after {
   box-sizing: border-box;
   margin: 0;
@@ -684,6 +696,35 @@ header h1::before {
   letter-spacing: -0.01em;
 }
 
+.new-camp-tabs {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--border);
+  margin: -8px 0 0;
+}
+
+.new-camp-tab {
+  flex: 1;
+  padding: 8px 12px;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--text-muted);
+  font-size: 13px;
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.new-camp-tab:hover {
+  color: var(--text-primary);
+}
+
+.new-camp-tab.active {
+  color: var(--text-primary);
+  border-bottom-color: var(--accent);
+  font-weight: 500;
+}
+
 /* Form elements */
 .form-group {
   display: flex;
@@ -968,6 +1009,49 @@ header h1::before {
   font-weight: 600;
 }
 
+/* Camp switcher dropdown */
+.ws-camp-switcher { position: relative; }
+.ws-camp-switch-btn {
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  padding: 4px 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+  cursor: pointer;
+}
+.ws-camp-switch-btn:hover { border-color: var(--border-subtle); background: var(--surface); }
+.ws-camp-switch-btn::after { content: ' ▾'; font-size: 10px; color: var(--text-muted); }
+.ws-camp-dropdown {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  min-width: 220px;
+  background: var(--bg);
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+  padding: 4px;
+  margin-top: 4px;
+}
+.ws-camp-dropdown.open { display: block; }
+.ws-camp-dd-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+}
+.ws-camp-dd-item:hover { background: var(--surface); }
+.ws-camp-dd-name { font-weight: 500; color: var(--text); }
+.ws-camp-dd-branch { color: var(--text-muted); font-size: 11px; margin-left: auto; }
+.ws-camp-dd-empty { padding: 12px; color: var(--text-muted); font-size: 12px; text-align: center; }
+
 /* Preview — full screen behind topbar */
 .ws-preview-full {
   position: absolute;
@@ -1074,6 +1158,7 @@ header h1::before {
   padding: 3px 0;
   border-bottom: 1px solid var(--border-subtle);
   display: flex;
+  flex-wrap: wrap;
   gap: 6px;
   align-items: baseline;
 }
@@ -1090,6 +1175,32 @@ header h1::before {
   word-break: break-all;
 }
 
+.ws-error-stack {
+  width: 100%;
+  margin-top: 2px;
+}
+
+.ws-error-stack summary {
+  cursor: pointer;
+  color: var(--text-muted);
+  font-size: 10px;
+  user-select: none;
+}
+
+.ws-error-stack pre {
+  margin: 4px 0 0;
+  padding: 6px 8px;
+  background: rgba(0,0,0,0.3);
+  border-radius: 4px;
+  font-size: 10px;
+  line-height: 1.5;
+  color: var(--text-secondary);
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 150px;
+  overflow-y: auto;
+}
+
 .btn-fix {
   display: block;
   width: 100%;
@@ -1107,13 +1218,70 @@ header h1::before {
 .btn-fix:hover { opacity: 0.9; transform: translateY(-1px); }
 .btn-fix:active { transform: translateY(0); }
 
-.ws-error-badge {
+.ws-error-badge, .ws-devtab-badge {
   background: #ef4444;
   color: white;
   font-size: 10px;
   padding: 1px 6px;
   border-radius: 10px;
-  margin-left: 6px;
+  margin-left: 4px;
+}
+
+/* Devtools tabs */
+.ws-devtabs {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--border-subtle);
+  margin-bottom: 8px;
+}
+.ws-devtab-btn {
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  padding: 6px 10px;
+  font-size: 12px;
+  color: var(--text-muted);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.ws-devtab-btn:hover { color: var(--text); }
+.ws-devtab-btn.ws-devtab-active { color: var(--text); border-bottom-color: var(--accent); }
+.ws-devtab-panel { max-height: 300px; overflow-y: auto; }
+
+/* Console panel */
+.ws-console-panel { padding: 4px 8px; font-size: 11px; font-family: var(--font-mono); }
+.ws-console-item { padding: 2px 0; border-bottom: 1px solid var(--border-subtle); word-break: break-all; }
+.ws-console-log { color: var(--text); }
+.ws-console-warn { color: #f59e0b; }
+.ws-console-info { color: #3b82f6; }
+
+/* Network panel */
+.ws-network-panel { padding: 4px 8px; font-size: 11px; font-family: var(--font-mono); }
+.ws-net-item { display: flex; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid var(--border-subtle); }
+.ws-net-method { font-weight: 600; font-size: 10px; padding: 1px 4px; border-radius: 3px; flex-shrink: 0; }
+.ws-net-method-get { color: #22c55e; }
+.ws-net-method-post { color: #3b82f6; }
+.ws-net-method-put { color: #f59e0b; }
+.ws-net-method-delete { color: #ef4444; }
+.ws-net-method-patch { color: #a855f7; }
+.ws-net-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
+.ws-net-status { font-weight: 600; flex-shrink: 0; }
+.ws-net-ok { color: #22c55e; }
+.ws-net-warn { color: #f59e0b; }
+.ws-net-err { color: #ef4444; }
+.ws-net-dur { color: var(--text-muted); flex-shrink: 0; }
+
+/* Test runner panel */
+.ws-test-panel { padding: 4px 8px; font-size: 12px; }
+.ws-test-status { padding: 8px; font-weight: 600; border-radius: 6px; margin-bottom: 8px; }
+.ws-test-running { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
+.ws-test-pass { background: #dcfce7; color: #166534; }
+.ws-test-fail { background: #fef2f2; color: #991b1b; }
+.ws-test-output { max-height: 250px; overflow: auto; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-all; padding: 8px; background: var(--surface); border-radius: 6px; }
+.ws-test-badge { font-size: 10px; }
+@media (prefers-color-scheme: dark) {
+  .ws-test-pass { background: #052e16; color: #86efac; }
+  .ws-test-fail { background: #450a0a; color: #fca5a5; }
 }
 
 .ws-file-item {
@@ -1123,6 +1291,62 @@ header h1::before {
   padding: 3px 0;
   font-size: 13px;
 }
+/* Stale camp banner + cleanup */
+.portal-stale-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  margin: 0 16px;
+  background: color-mix(in srgb, #f59e0b 12%, transparent);
+  border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
+  border-radius: 8px;
+  font-size: 13px;
+  color: var(--text);
+}
+.ws-stale-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: 13px;
+  cursor: pointer;
+}
+.ws-stale-item:last-child { border-bottom: none; }
+.ws-stale-item input { flex-shrink: 0; }
+
+/* Conflict resolution */
+.conflict-file { border: 1px solid var(--border-subtle); border-radius: 8px; margin-bottom: 8px; overflow: hidden; transition: opacity 0.3s; }
+.conflict-file-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--surface); }
+.conflict-file-header code { font-size: 12px; }
+.conflict-file-actions { display: flex; gap: 4px; }
+.conflict-section { display: flex; gap: 0; }
+.conflict-side { flex: 1; padding: 8px; font-size: 11px; overflow: auto; }
+.conflict-side pre { margin: 0; white-space: pre-wrap; word-break: break-all; font-family: var(--font-mono); font-size: 11px; }
+.conflict-side-label { font-size: 10px; font-weight: 600; margin-bottom: 4px; }
+.conflict-ours { background: color-mix(in srgb, #3b82f6 10%, transparent); border-right: 1px solid var(--border-subtle); }
+.conflict-ours .conflict-side-label { color: #3b82f6; }
+.conflict-theirs { background: color-mix(in srgb, #f59e0b 10%, transparent); }
+.conflict-theirs .conflict-side-label { color: #f59e0b; }
+
+.ws-file-clickable { cursor: pointer; border-radius: 4px; padding: 3px 4px; }
+.ws-file-clickable:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
+
+/* Diff modal */
+.modal-wide { max-width: 720px; width: 90vw; }
+.diff-content { max-height: 60vh; overflow: auto; }
+.diff-header { font-size: 13px; font-weight: 600; color: var(--text-muted); padding: 8px 0 4px; }
+.diff-pre { margin: 0; font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; }
+.diff-line { padding: 0 8px; }
+.diff-line-add { background: #dcfce7; color: #166534; }
+.diff-line-del { background: #fef2f2; color: #991b1b; }
+.diff-line-hunk { background: var(--surface); color: var(--accent); font-weight: 600; margin-top: 8px; }
+.diff-line-meta { color: var(--text-muted); font-weight: 600; }
+@media (prefers-color-scheme: dark) {
+  .diff-line-add { background: #052e16; color: #86efac; }
+  .diff-line-del { background: #450a0a; color: #fca5a5; }
+}
 
 .ws-action-item {
   font-size: 13px;
@@ -2226,17 +2450,82 @@ details.ws-commit-item[open] .ws-commit-arrow { transform: rotate(90deg); }
 .ws-commit-cat-item { color: var(--text-muted); padding-left: 12px; position: relative; line-height: 1.5; }
 .ws-commit-cat-item::before { content: '•'; position: absolute; left: 3px; color: var(--text-muted); }
 
+/* Preview toolbar — URL bar + viewport switcher */
+.ws-preview-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  background: var(--bg);
+  border-bottom: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+}
+.ws-url-bar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+}
+.ws-url-back, .ws-url-refresh {
+  background: none;
+  border: 1px solid var(--border-subtle);
+  border-radius: 4px;
+  width: 28px;
+  height: 28px;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.ws-url-back:hover, .ws-url-refresh:hover { background: var(--surface); color: var(--text); }
+.ws-url-input {
+  flex: 1;
+  min-width: 0;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 4px;
+  background: var(--surface);
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+.ws-url-input:focus { outline: none; border-color: var(--accent); }
+.ws-viewport-switcher {
+  display: flex;
+  gap: 2px;
+  flex-shrink: 0;
+}
+.ws-vp-btn {
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  width: 28px;
+  height: 28px;
+  cursor: pointer;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ws-vp-btn:hover { background: var(--surface); }
+.ws-vp-btn.ws-vp-active { background: var(--surface); border-color: var(--accent); }
+
 /* Split-view compare */
 .ws-preview-container { position: relative; flex: 1; display: flex; }
 .ws-preview-container .ws-preview-full { flex: 1; }
 .ws-preview-main { display: none; flex: 1; flex-direction: column; border-left: 2px solid var(--accent); position: relative; }
 .ws-preview-main.hidden { display: none !important; }
 .ws-split-view .ws-preview-full,
-.ws-split-view .ws-preview-main { flex: 1; display: flex; flex-direction: column; }
+.ws-split-view .ws-preview-main { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; }
+.ws-split-view .ws-preview-iframe { width: 100%; height: 100%; border: none; }
 .ws-preview-label { position: absolute; top: 8px; left: 8px; z-index: 10; background: var(--surface); padding: 2px 8px; border-radius: 4px; font-size: 11px; color: var(--text-muted); pointer-events: none; }
 .ws-preview-loading { display: flex; align-items: center; justify-content: center; flex: 1; color: var(--text-muted); font-size: 14px; }
 .btn-active { background: var(--accent) !important; color: white !important; }
-.ws-split-view .ws-preview-full { position: relative; }
 .ws-split-view .ws-preview-full::before {
   content: '⛺ 내 캠프';
   position: absolute; top: 8px; left: 8px; z-index: 10;