sanjang 0.3.2 → 0.3.3

package/dashboard/app.js

@@ -22,6 +22,29 @@ let currentWorkspace = null;
 /** @type {number|null} polling interval for workspace changes */
 let wsPollingInterval = null;
 
+const SHERPA_QUOTES = [
+  "요구사항 또 바뀌었댜... 뭐 그러려니 하쥬",
+  "'간단한 건데~' 그 말이 제일 무섭댜",
+  "CEO가 데모 전날 피드백 줬어유. 다 뜯으래유.",
+  "이거 금방 되쥬? 네... 산도 금방 오르쥬.",
+  "스펙 확정이랬는디... 또 바뀌었댜",
+  "우선순위 1이 열두 개여유. 산봉우리가 열두 개.",
+  "디자인 안 나왔는디 개발 먼저 하래유",
+  "어제 합의한 거 오늘 모른댜. 나도 모르겠댜.",
+  "v1인디 왜 v3 기능을 넣으래유",
+  "PRD 다섯 번째 바뀌는 중이여유. 난 여그 서있쥬.",
+  "아 그거 빼자고 한 거... 다시 넣는댜. 그러쥬 뭐.",
+  "고객이 원한댜. 근디 고객이 누구여.",
+  "MVP라며유. M이 자꾸 빠져유.",
+  "이번엔 진짜 마지막 수정이래유. 네 번째 마지막.",
+  "배포하면 쉬는 거 아니었어유?",
+  "'빨리 한번 해봐유' 3주째 하는 중이쥬.",
+  "피벗이래유. 하산 아니래유. 글쎄유.",
+  "개발 부채가 배낭보다 무겁댜. 그래도 가야쥬.",
+  "야근이여유? 셰르파는 원래 이러쥬 뭐.",
+  "롤백한 거 아무도 모르쥬? 나도 모른댜.",
+];
+
 // ---------------------------------------------------------------------------
 // Utility
 // ---------------------------------------------------------------------------
@@ -1280,7 +1303,7 @@ function renderBlocks(files) {
   }
   container.innerHTML = files.map(f => {
     const type = f.status === '수정' ? 'mod' : f.status === '새 파일' ? 'new' : 'del';
-    return `<div class="ws-block ws-block-${type}" title="${f.path}"></div>`;
+    return `<div class="ws-block ws-block-${type}" title="${escHtml(f.path)}"></div>`;
   }).join('');
   container.classList.toggle('ws-blocks-wobble', files.length >= 5);
 }
@@ -1614,48 +1637,6 @@ window.togglePanel = function() {
 // ---------------------------------------------------------------------------
 
 
-async function loadSuggestions() {
-  const section = document.getElementById('portal-suggestions-section');
-  const list = document.getElementById('portal-suggestions');
-  if (!section || !list) return;
-
-  try {
-    const suggestions = await api('GET', '/api/suggestions');
-    if (!suggestions || suggestions.length === 0) {
-      section.style.display = 'none';
-      return;
-    }
-
-    // Exclude "recent" commits (noise) and deduplicate with "이어하기"
-    const workTitles = new Set([...playgrounds.values()].map(p => p.branch));
-    const filtered = suggestions
-      .filter(item => item.type !== 'recent')
-      .filter(item => !workTitles.has(item.action))
-      .slice(0, 5);
-
-    if (filtered.length === 0) {
-      section.style.display = 'none';
-      return;
-    }
-
-    const iconMap = { issue: '🔵', pr: '🟡' };
-    list.innerHTML = filtered.map(item => {
-      const icon = iconMap[item.type] || '⚪';
-      return `
-      <div class="portal-work-item">
-        <div class="portal-work-left">
-          <span class="portal-work-icon">${icon}</span>
-          <div>
-            <div class="portal-work-title">${escHtml(item.title)}</div>
-          </div>
-        </div>
-      </div>`;
-    }).join('');
-    section.style.display = '';
-  } catch {
-    section.style.display = 'none';
-  }
-}
 async function loadPortal() {
   const workList = document.getElementById('portal-work');
   if (!workList) return;
@@ -1863,6 +1844,284 @@ function showOnboarding() {
   show();
 }
 
+// ---------------------------------------------------------------------------
+// Sherpa Quote Rotation
+// ---------------------------------------------------------------------------
+
+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]];
+  }
+
+  let idx = 0;
+  // Set initial random quote
+  el.textContent = quotes[idx];
+
+  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);
+  }, 8000);
+}
+
+// ---------------------------------------------------------------------------
+// Activity Trail
+// ---------------------------------------------------------------------------
+
+async function loadActivityTrail() {
+  const container = document.getElementById('activity-trail');
+  const section = document.getElementById('activity-trail-section');
+  if (!container || !section) return;
+
+  try {
+    const data = await api('GET', '/api/activity');
+    if (!data || !data.daily || data.daily.length === 0) {
+      section.style.display = 'none';
+      return;
+    }
+
+    section.style.display = '';
+    const days = data.daily;
+    const prs = data.mergedPrs || [];
+    const streak = data.streak || 0;
+    const totalCommits = days.reduce((s, d) => s + d.commits, 0);
+
+    // Calculate terrain heights
+    const maxCommits = Math.max(...days.map(d => d.commits), 1);
+    const svgW = 680, svgH = 180;
+    const ground = 150, ceiling = 35;
+    const dayW = (svgW - 40) / days.length; // 20px padding each side
+
+    // Map commits to Y coordinate (more commits = higher = lower Y)
+    const heights = days.map(d => {
+      if (d.commits === 0) return ground;
+      return ground - ((d.commits / maxCommits) * (ground - ceiling));
+    });
+
+    // Build stepped polyline points (pixel staircase)
+    let terrainPoints = `20,${ground} `;
+    heights.forEach((h, i) => {
+      const x = 20 + i * dayW;
+      const xEnd = 20 + (i + 1) * dayW;
+      terrainPoints += `${x},${h} ${xEnd},${h} `;
+    });
+    terrainPoints += `${20 + days.length * dayW},${ground}`;
+
+    // PR merge dates set for lookup
+    const prByDate = {};
+    prs.forEach(pr => {
+      const date = pr.mergedAt.split('T')[0];
+      if (!prByDate[date]) prByDate[date] = [];
+      prByDate[date].push(pr);
+    });
+
+    // Build pixel decorations
+    let decorations = '';
+
+    // Stars
+    const starPositions = [[45,8],[130,14],[220,6],[350,10],[480,5],[560,16],[640,8]];
+    starPositions.forEach(([x,y]) => {
+      decorations += `<rect x="${x}" y="${y}" width="2" height="2" fill="#fff" opacity="${0.2 + Math.random() * 0.3}"/>`;
+    });
+
+    // Snow on high peaks (top 20%)
+    const threshold = ceiling + (ground - ceiling) * 0.3;
+    heights.forEach((h, i) => {
+      if (h < threshold) {
+        const x = 20 + i * dayW + dayW / 2 - 3;
+        decorations += `<rect x="${x}" y="${h}" width="6" height="2" fill="rgba(255,255,255,0.2)"/>`;
+      }
+    });
+
+    // Trees on low terrain
+    heights.forEach((h, i) => {
+      if (h > ground - 30 && h < ground && days[i].commits > 0 && Math.random() > 0.7) {
+        const x = 20 + i * dayW + dayW / 2;
+        decorations += `
+          <rect x="${x}" y="${h - 8}" width="2" height="8" fill="#3d5a3d"/>
+          <rect x="${x - 2}" y="${h - 12}" width="6" height="4" fill="#4a7a4a"/>
+          <rect x="${x}" y="${h - 16}" width="2" height="4" fill="#5b8c5a"/>`;
+      }
+    });
+
+    // Tents on rest days (0 commits, not first/last)
+    heights.forEach((h, i) => {
+      if (days[i].commits === 0 && i > 0 && i < days.length - 1 && Math.random() > 0.5) {
+        const x = 20 + i * dayW + dayW / 2 - 4;
+        decorations += `
+          <rect x="${x + 3}" y="${ground - 8}" width="2" height="2" fill="#6b7394"/>
+          <rect x="${x + 1}" y="${ground - 6}" width="6" height="2" fill="#6b7394"/>
+          <rect x="${x}" y="${ground - 4}" width="8" height="2" fill="#4a5170"/>`;
+      }
+    });
+
+    // PR campfires + tooltip triggers
+    let prMarkers = '';
+    days.forEach((d, i) => {
+      const datePrs = prByDate[d.date];
+      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');
+        prMarkers += `
+          <g class="pr-marker" data-tooltip="${tooltipText.replace(/"/g, '&quot;')}">
+            <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"/>
+            <rect x="${x}" y="${h - 10}" width="2" height="2" fill="#ffcc00"/>
+            <rect x="${x + 4}" y="${h - 12}" width="2" height="4" fill="#ff9900"/>
+            <rect x="${x + 2}" y="${h - 14}" width="2" height="4" fill="#ffcc00"/>
+            <circle cx="${x + 3}" cy="${h - 8}" r="6" fill="#ff9900" opacity="0.06"/>
+          </g>`;
+      }
+    });
+
+    // Coins on top 3 peaks
+    const peakIndices = heights
+      .map((h, i) => ({ h, i }))
+      .sort((a, b) => a.h - b.h)
+      .slice(0, 3);
+    peakIndices.forEach(({ h, i }) => {
+      const x = 20 + i * dayW + dayW / 2 - 3;
+      decorations += `
+        <rect x="${x}" y="${h - 10}" width="6" height="6" fill="#f59e0b" opacity="0.7"/>
+        <rect x="${x + 2}" y="${h - 8}" width="2" height="2" fill="#0a0c11"/>`;
+    });
+
+    // Flag on highest peak
+    const highest = peakIndices[0];
+    if (highest) {
+      const x = 20 + highest.i * dayW + dayW / 2;
+      decorations += `
+        <rect x="${x}" y="${highest.h}" width="2" height="14" fill="#f59e0b"/>
+        <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;
+    const lastH = heights[heights.length - 1];
+    const sherpaY = lastH - 16;
+    const sherpa = `
+      <g transform="translate(${lastX}, ${sherpaY})">
+        <rect x="2" y="0" width="4" height="2" fill="#5b8c5a"/>
+        <rect x="0" y="2" width="8" height="2" fill="#5b8c5a"/>
+        <rect x="2" y="4" width="4" height="4" fill="#ffcc88"/>
+        <rect x="2" y="8" width="4" height="4" fill="#e74c3c"/>
+        <rect x="0" y="8" width="2" height="2" fill="#e74c3c"/>
+        <rect x="6" y="8" width="2" height="4" fill="#8B6914"/>
+        <rect x="2" y="12" width="2" height="2" fill="#5b4a3a"/>
+        <rect x="4" y="12" width="2" height="2" fill="#5b4a3a"/>
+      </g>`;
+
+    // Week labels
+    let weekLabels = '';
+    const weekSize = 7;
+    for (let w = 0; w < Math.floor(days.length / weekSize); w++) {
+      const x = 20 + (w * weekSize + 3) * dayW;
+      const weeksAgo = Math.floor(days.length / weekSize) - w - 1;
+      const label = weeksAgo === 0 ? '이번 주' : `${weeksAgo}주 전`;
+      weekLabels += `<text x="${x}" y="170" font-size="8" fill="#4a5170" font-family="Outfit,sans-serif" text-anchor="middle">${label}</text>`;
+    }
+
+    // Pixel clouds
+    const clouds = `
+      <g opacity="0.08">
+        <rect x="80" y="20" width="4" height="4" fill="#fff"/>
+        <rect x="84" y="18" width="8" height="4" fill="#fff"/>
+        <rect x="88" y="16" width="4" height="4" fill="#fff"/>
+        <rect x="92" y="18" width="4" height="4" fill="#fff"/>
+        <rect x="76" y="22" width="24" height="4" fill="#fff"/>
+      </g>
+      <g opacity="0.06">
+        <rect x="420" y="14" width="4" height="4" fill="#fff"/>
+        <rect x="424" y="12" width="8" height="4" fill="#fff"/>
+        <rect x="432" y="14" width="4" height="4" fill="#fff"/>
+        <rect x="416" y="18" width="24" height="4" fill="#fff"/>
+      </g>`;
+
+    // PR tooltip container (CSS positioned)
+    const tooltip = `<div class="activity-tooltip" id="activity-tooltip" style="display:none;position:absolute;background:#1c2030;border:1px solid #2a2f42;border-radius:6px;padding:8px 12px;font-size:12px;color:#e4e8f0;pointer-events:none;white-space:nowrap;z-index:10;max-width:320px;box-shadow:0 4px 12px rgba(0,0,0,0.4);"></div>`;
+
+    const svg = `
+      <svg viewBox="0 0 ${svgW} ${svgH}" style="display:block;width:100%;" xmlns="http://www.w3.org/2000/svg">
+        <rect x="0" y="0" width="${svgW}" height="${svgH}" fill="#080a10"/>
+        ${clouds}
+        ${decorations}
+        <defs>
+          <linearGradient id="trailFill" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="#5b8c5a" stop-opacity="0.25"/>
+            <stop offset="100%" stop-color="#5b8c5a" stop-opacity="0.03"/>
+          </linearGradient>
+        </defs>
+        <polygon fill="url(#trailFill)" points="${terrainPoints}"/>
+        <polyline fill="none" stroke="#5b8c5a" stroke-width="2" points="${terrainPoints.split(` ${20 + days.length * dayW},${ground}`)[0]}"/>
+        <line x1="16" y1="${ground}" x2="${svgW - 16}" y2="${ground}" stroke="#1c2030" stroke-width="1"/>
+        ${prMarkers}
+        ${sherpa}
+        ${weekLabels}
+      </svg>`;
+
+    const streakText = streak > 0 ? `🔥 연속 ${streak}일째 등반 중` : '⛺ 오늘은 쉬는 날';
+    const periodText = `최근 4주 · 커밋 ${totalCommits}개 · PR ${prs.length}개`;
+
+    container.innerHTML = `
+      <div style="position:relative;">
+        ${svg}
+        ${tooltip}
+      </div>
+      <div class="activity-info">
+        <div class="activity-streak">${streakText}</div>
+        <div class="activity-period">${periodText}</div>
+      </div>`;
+
+    // Add PR tooltip hover handlers
+    container.querySelectorAll('.pr-marker').forEach(marker => {
+      marker.style.cursor = 'pointer';
+      marker.addEventListener('mouseenter', (e) => {
+        const tip = document.getElementById('activity-tooltip');
+        if (!tip) return;
+        tip.innerHTML = marker.getAttribute('data-tooltip').split('\n').map(l => escHtml(l)).join('<br>');
+        tip.style.display = 'block';
+        const rect = marker.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+        let left = rect.left - containerRect.left;
+        // Prevent overflow on right edge
+        const tipWidth = tip.offsetWidth;
+        if (left + tipWidth > containerRect.width) {
+          left = containerRect.width - tipWidth - 8;
+        }
+        if (left < 8) left = 8;
+        tip.style.left = left + 'px';
+        tip.style.top = (rect.top - containerRect.top - 40) + 'px';
+      });
+      marker.addEventListener('mouseleave', () => {
+        const tip = document.getElementById('activity-tooltip');
+        if (tip) tip.style.display = 'none';
+      });
+    });
+
+  } catch {
+    if (section) section.style.display = 'none';
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Init
 // ---------------------------------------------------------------------------
@@ -1878,7 +2137,8 @@ async function init() {
   }
   renderAll();
   loadPortal();
-  loadSuggestions();
+  startSherpaQuotes();
+  loadActivityTrail();
   connectWs();
 
   // Show onboarding for first-time users

package/dashboard/index.html

@@ -17,6 +17,44 @@
 
   <!-- Portal Home -->
   <div id="portal">
+    <!-- 베이스캠프 씬 -->
+    <div class="portal-section" id="basecamp-scene">
+      <div class="bc-scene">
+        <!-- Stars -->
+        <div class="bc-star twinkle" style="top:8%;left:12%"></div>
+        <div class="bc-star twinkle-slow" style="top:15%;left:30%"></div>
+        <div class="bc-star twinkle" style="top:5%;left:48%"></div>
+        <div class="bc-star twinkle-slow" style="top:20%;left:65%"></div>
+        <div class="bc-star twinkle" style="top:10%;left:80%"></div>
+        <div class="bc-star twinkle-slow" style="top:25%;left:92%"></div>
+        <div class="bc-star twinkle" style="top:18%;left:5%"></div>
+        <div class="bc-star twinkle-slow" style="top:6%;left:72%"></div>
+        <div class="bc-star twinkle" style="top:22%;left:42%"></div>
+        <div class="bc-star twinkle-slow" style="top:12%;left:55%"></div>
+
+        <!-- Mountains -->
+        <div class="bc-mountain bc-mountain-back"></div>
+        <div class="bc-mountain bc-mountain-front"></div>
+
+        <!-- Snow caps -->
+        <div class="bc-snow" style="bottom:64px;left:48%;width:12px"></div>
+        <div class="bc-snow" style="bottom:60px;left:50%;width:8px"></div>
+        <div class="bc-snow" style="bottom:56px;left:46%;width:4px"></div>
+
+        <!-- Campfire glow + campfire -->
+        <div class="bc-glow"></div>
+        <div class="bc-campfire"></div>
+
+        <!-- Sherpa -->
+        <div class="bc-sherpa"></div>
+
+        <!-- Speech bubble -->
+        <div class="bc-speech fade-in" id="sherpa-speech">
+          <span id="sherpa-quote">요구사항 또 바뀌었댜... 뭐 그러려니 하쥬</span>
+        </div>
+      </div>
+    </div>
+
     <!-- 새로 시작 (핵심 액션, 맨 위) -->
     <div class="portal-section">
       <div class="portal-quickstart">
@@ -34,17 +72,16 @@
       <div id="portal-work" class="portal-work-list"></div>
     </div>
 
-    <!-- 추천 작업 (최대 5개, 이어하기와 중복 제거) -->
-    <div class="portal-section" id="portal-suggestions-section" style="display:none">
-      <h2 class="portal-section-title">이런 걸 해볼 수 있어요</h2>
-      <div id="portal-suggestions" class="portal-work-list"></div>
-    </div>
-
     <!-- 기존 캠프가 있으면 아래에 카드 그리드 표시 -->
     <div id="portal-camps-section" class="portal-section hidden">
       <h2 class="portal-section-title">캠프</h2>
       <div class="grid" id="grid"></div>
     </div>
+
+    <!-- 활동 지형도 -->
+    <div class="portal-section" id="activity-trail-section" style="display:none">
+      <div id="activity-trail"></div>
+    </div>
   </div>
 
   <!-- Workspace View (full-screen preview + slide panel) -->

package/dashboard/style.css

@@ -2110,3 +2110,309 @@ header.hidden {
   color: var(--text-muted, #666);
   flex: 1;
 }
+
+/* ============================================================
+   Basecamp Scene
+   ============================================================ */
+
+.bc-scene {
+  position: relative;
+  height: 200px;
+  background: linear-gradient(180deg, #080a10 0%, #0c0e14 60%, #12151e 100%);
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid #1c2030;
+}
+
+/* Stars */
+.bc-star {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  background: #fff;
+  image-rendering: pixelated;
+}
+
+.bc-star.twinkle {
+  animation: twinkle 2s steps(2) infinite;
+}
+
+.bc-star.twinkle-slow {
+  animation: twinkle 3.5s steps(2) infinite 0.8s;
+}
+
+@keyframes twinkle {
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 0.1; }
+}
+
+/* Mountains */
+.bc-mountain {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  image-rendering: pixelated;
+}
+
+.bc-mountain-back {
+  height: 100px;
+  background: #1a1d2a;
+  clip-path: polygon(
+    0% 100%, 0% 70%, 5% 70%, 5% 60%, 10% 60%, 10% 50%, 15% 50%, 15% 40%,
+    20% 40%, 20% 35%, 25% 35%, 25% 45%, 30% 45%, 30% 55%, 35% 55%, 35% 50%,
+    40% 50%, 40% 35%, 45% 35%, 45% 25%, 50% 25%, 50% 20%, 55% 20%, 55% 30%,
+    60% 30%, 60% 40%, 65% 40%, 65% 50%, 70% 50%, 70% 40%, 75% 40%, 75% 50%,
+    80% 50%, 80% 60%, 85% 60%, 85% 70%, 90% 70%, 90% 80%, 95% 80%, 100% 80%,
+    100% 100%
+  );
+}
+
+.bc-mountain-front {
+  height: 80px;
+  background: #12151e;
+  clip-path: polygon(
+    0% 100%, 0% 80%, 5% 80%, 5% 70%, 10% 70%, 10% 55%, 15% 55%, 15% 45%,
+    20% 45%, 20% 40%, 25% 40%, 25% 50%, 30% 50%, 30% 60%, 35% 60%, 35% 55%,
+    40% 55%, 40% 40%, 45% 40%, 45% 30%, 48% 30%, 48% 25%, 52% 25%, 52% 20%,
+    55% 20%, 55% 30%, 58% 30%, 58% 40%, 62% 40%, 62% 50%, 65% 50%, 65% 45%,
+    70% 45%, 70% 35%, 75% 35%, 75% 45%, 80% 45%, 80% 55%, 85% 55%, 85% 65%,
+    90% 65%, 90% 75%, 95% 75%, 95% 85%, 100% 85%, 100% 100%
+  );
+}
+
+/* Snow caps */
+.bc-snow {
+  position: absolute;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.25);
+  image-rendering: pixelated;
+}
+
+/* Campfire glow */
+.bc-glow {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80px;
+  height: 40px;
+  background: radial-gradient(ellipse at center bottom, rgba(255, 140, 50, 0.15) 0%, transparent 70%);
+  animation: glow-pulse 2s ease infinite;
+}
+
+@keyframes glow-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+
+/* Campfire pixel */
+.bc-campfire {
+  position: absolute;
+  bottom: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 4px;
+  height: 4px;
+  background: #8b4513;
+  image-rendering: pixelated;
+  box-shadow:
+    -4px 0 0 #8b4513,
+     4px 0 0 #8b4513,
+     0 -4px 0 #ff6600,
+    -4px -4px 0 #ff8800,
+     4px -4px 0 #ff8800,
+     0 -8px 0 #ffaa00,
+    -4px -8px 0 #ff6600,
+     4px -8px 0 #ff6600,
+     0 -12px 0 #ffcc00;
+  animation: bc-fire 0.4s steps(1) infinite;
+}
+
+@keyframes bc-fire {
+  0% {
+    box-shadow:
+      -4px 0 0 #8b4513,
+       4px 0 0 #8b4513,
+       0 -4px 0 #ff6600,
+      -4px -4px 0 #ff8800,
+       4px -4px 0 #ff8800,
+       0 -8px 0 #ffaa00,
+      -4px -8px 0 #ff6600,
+       4px -8px 0 #ff6600,
+       0 -12px 0 #ffcc00;
+  }
+  50% {
+    box-shadow:
+      -4px 0 0 #8b4513,
+       4px 0 0 #8b4513,
+       0 -4px 0 #ff8800,
+      -4px -4px 0 #ff6600,
+       4px -4px 0 #ffaa00,
+       0 -8px 0 #ff6600,
+      -4px -8px 0 #ffcc00,
+       4px -8px 0 #ff8800,
+       0 -12px 0 #ff6600;
+  }
+}
+
+/* Sherpa pixel character (idle pose) */
+.bc-sherpa {
+  position: absolute;
+  bottom: 16px;
+  left: calc(50% + 24px);
+  width: 4px;
+  height: 4px;
+  background: transparent;
+  image-rendering: pixelated;
+  box-shadow:
+    /* Hat */
+     0 -20px 0 #e74c3c,
+    -4px -20px 0 #e74c3c,
+     4px -20px 0 #e74c3c,
+    -4px -24px 0 #e74c3c,
+     0 -24px 0 #e74c3c,
+     4px -24px 0 #e74c3c,
+    /* Face */
+    -4px -16px 0 #f5c6a0,
+     0 -16px 0 #f5c6a0,
+     4px -16px 0 #f5c6a0,
+    /* Body */
+    -4px -12px 0 #3498db,
+     0 -12px 0 #3498db,
+     4px -12px 0 #3498db,
+    -4px -8px 0 #3498db,
+     0 -8px 0 #3498db,
+     4px -8px 0 #3498db,
+    /* Backpack */
+     8px -12px 0 #8b6914,
+     8px -8px 0 #8b6914,
+    /* Legs */
+    -4px -4px 0 #2c3e50,
+     0 -4px 0 #2c3e50,
+    -4px 0 0 #2c3e50,
+     4px 0 0 #2c3e50;
+  animation: sherpa-idle 1s steps(1) infinite;
+}
+
+@keyframes sherpa-idle {
+  0%, 100% {
+    box-shadow:
+       0 -20px 0 #e74c3c,
+      -4px -20px 0 #e74c3c,
+       4px -20px 0 #e74c3c,
+      -4px -24px 0 #e74c3c,
+       0 -24px 0 #e74c3c,
+       4px -24px 0 #e74c3c,
+      -4px -16px 0 #f5c6a0,
+       0 -16px 0 #f5c6a0,
+       4px -16px 0 #f5c6a0,
+      -4px -12px 0 #3498db,
+       0 -12px 0 #3498db,
+       4px -12px 0 #3498db,
+      -4px -8px 0 #3498db,
+       0 -8px 0 #3498db,
+       4px -8px 0 #3498db,
+       8px -12px 0 #8b6914,
+       8px -8px 0 #8b6914,
+      -4px -4px 0 #2c3e50,
+       0 -4px 0 #2c3e50,
+      -4px 0 0 #2c3e50,
+       4px 0 0 #2c3e50;
+  }
+  50% {
+    box-shadow:
+       0 -20px 0 #e74c3c,
+      -4px -20px 0 #e74c3c,
+       4px -20px 0 #e74c3c,
+      -4px -24px 0 #e74c3c,
+       0 -24px 0 #e74c3c,
+       4px -24px 0 #e74c3c,
+      -4px -16px 0 #f5c6a0,
+       0 -16px 0 #f5c6a0,
+       4px -16px 0 #f5c6a0,
+      -4px -12px 0 #3498db,
+       0 -12px 0 #3498db,
+       4px -12px 0 #3498db,
+      -4px -8px 0 #3498db,
+       0 -8px 0 #3498db,
+       4px -8px 0 #3498db,
+       8px -12px 0 #8b6914,
+       8px -8px 0 #8b6914,
+      -4px -4px 0 #2c3e50,
+       4px -4px 0 #2c3e50,
+      -4px 0 0 #2c3e50,
+       0 0 0 #2c3e50;
+  }
+}
+
+/* Speech bubble */
+.bc-speech {
+  position: absolute;
+  bottom: 52px;
+  left: calc(50% + 8px);
+  background: #1c2030;
+  border: 1px solid #2a2f42;
+  border-radius: 8px;
+  padding: 6px 10px;
+  font-size: 11px;
+  white-space: nowrap;
+  color: var(--text-secondary);
+  animation: bubble-float 3s ease-in-out infinite;
+}
+
+.bc-speech::after {
+  content: '';
+  position: absolute;
+  bottom: -6px;
+  left: 20px;
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid #1c2030;
+}
+
+@keyframes bubble-float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-3px); }
+}
+
+.bc-speech.fade-out {
+  opacity: 0;
+  transition: opacity 0.5s;
+}
+
+.bc-speech.fade-in {
+  opacity: 1;
+  transition: opacity 0.5s;
+}
+
+/* ============================================================
+   Activity Trail
+   ============================================================ */
+
+#activity-trail {
+  background: #0a0c11;
+  border: 1px solid #1c2030;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.activity-info {
+  padding: 12px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.activity-streak {
+  font-size: 13px;
+  color: #8fbc8f;
+  font-weight: 600;
+}
+
+.activity-period {
+  font-size: 11px;
+  color: var(--text-muted);
+}

package/dist/lib/server.js

@@ -304,10 +304,13 @@ export async function createApp(projectRoot, options = {}) {
         if (!Number.isFinite(targetPort) || targetPort < 1000 || targetPort > 65535) {
             return res.status(400).send("Invalid port");
         }
-        // Find camp name by port
+        // Only allow proxying to known camp ports (prevent SSRF to arbitrary local services)
         const camps = getAll();
         const camp = camps.find(c => c.fePort === targetPort);
-        const campName = camp?.name ?? "unknown";
+        if (!camp) {
+            return res.status(403).send("이 포트는 활성 캠프가 아닙니다.");
+        }
+        const campName = camp.name;
         const targetPath = req.url || "/";
         const proxyReq = httpRequest({ hostname: "127.0.0.1", port: targetPort, path: targetPath, method: req.method, headers: { ...req.headers, host: `localhost:${targetPort}` } }, (proxyRes) => {
             const contentType = proxyRes.headers["content-type"] || "";
@@ -1357,6 +1360,70 @@ export async function createApp(projectRoot, options = {}) {
         }
         res.json({ fixed: false, description: fix?.description ?? "자동으로 고칠 수 있는 문제를 찾지 못했습니다." });
     });
+    let activityCache = null;
+    const ACTIVITY_CACHE_TTL = 5 * 60 * 1000; // 5 minutes
+    app.get("/api/activity", (_req, res) => {
+        if (activityCache && Date.now() - activityCache.ts < ACTIVITY_CACHE_TTL) {
+            return res.json(activityCache.data);
+        }
+        // --- daily commits (last 4 weeks) ---
+        const gitLog = spawnSync("git", ["log", "--since=4 weeks ago", "--format=%ad", "--date=short"], {
+            cwd: projectRoot,
+            stdio: "pipe",
+            encoding: "utf8",
+        });
+        const commitDates = (gitLog.status === 0 ? gitLog.stdout : "").trim().split("\n").filter(Boolean);
+        const countByDate = new Map();
+        for (const d of commitDates) {
+            countByDate.set(d, (countByDate.get(d) ?? 0) + 1);
+        }
+        // Fill missing days in the 4-week window
+        const daily = [];
+        const now = new Date();
+        for (let i = 27; i >= 0; i--) {
+            const d = new Date(now);
+            d.setDate(d.getDate() - i);
+            const key = d.toISOString().slice(0, 10);
+            daily.push({ date: key, commits: countByDate.get(key) ?? 0 });
+        }
+        // --- merged PRs ---
+        let mergedPrs = [];
+        const ghResult = spawnSync("gh", ["pr", "list", "--state", "merged", "--limit", "10", "--json", "number,title,mergedAt"], {
+            cwd: projectRoot,
+            stdio: "pipe",
+            encoding: "utf8",
+        });
+        if (ghResult.status === 0 && ghResult.stdout) {
+            try {
+                const parsed = JSON.parse(ghResult.stdout);
+                mergedPrs = parsed;
+            }
+            catch {
+                // malformed JSON — keep empty
+            }
+        }
+        // --- streak (consecutive days with commits, backward from today) ---
+        let streak = 0;
+        const todayStr = now.toISOString().slice(0, 10);
+        for (let i = 0; i <= 27; i++) {
+            const d = new Date(now);
+            d.setDate(d.getDate() - i);
+            const key = d.toISOString().slice(0, 10);
+            if ((countByDate.get(key) ?? 0) > 0) {
+                streak++;
+            }
+            else if (key === todayStr) {
+                // Today having 0 commits is ok — streak can start from yesterday
+                continue;
+            }
+            else {
+                break;
+            }
+        }
+        const data = { daily, mergedPrs, streak };
+        activityCache = { data, ts: Date.now() };
+        res.json(data);
+    });
     // SPA fallback
     app.get("*", (_req, res) => {
         res.sendFile(join(dashboardDir, "index.html"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanjang",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Local dev environment manager for vibe coders",
   "type": "module",
   "bin": {