sanjang 0.3.4 → 0.3.6

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,12 +83,34 @@
         <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 — full screen -->
-    <div class="ws-preview-full" id="ws-preview"></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>
+      <div class="ws-preview-main hidden" id="ws-preview-main">
+        <div class="ws-preview-label">🏔️ 원본 (main)</div>
+      </div>
+    </div>
 
     <!-- Slide panel — right side -->
     <div class="ws-panel" id="ws-panel">
@@ -100,19 +129,49 @@
             <div id="ws-changes"></div>
           </details>
         </div>
+        <div class="workspace-section ws-report-section" id="ws-report-section" style="display:none">
+          <h3>📋 변경 리포트</h3>
+          <div class="ws-report-summary" id="ws-report-summary"></div>
+          <div class="ws-report-warnings" id="ws-report-warnings"></div>
+          <div class="ws-report-categories" id="ws-report-categories"></div>
+        </div>
         <div class="workspace-section">
           <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>
-        </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">
@@ -132,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>
@@ -201,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">
@@ -212,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">
@@ -219,6 +331,7 @@
       <p id="ship-file-count" style="font-size:13px;color:var(--text-muted);margin-bottom:12px"></p>
 
       <div class="form-group">
+          <div id="ship-report-preview" class="ship-report-preview" style="display:none"></div>
         <label class="form-label" for="ship-message">뭘 바꿨나요? (한 줄로)</label>
         <input
           class="form-input"
@@ -256,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에게 맡기기 (추천)