clawmate 1.2.0 → 1.3.0

package/renderer/js/browser-watcher.js

@@ -0,0 +1,172 @@
+/**
+ * 브라우저 활동 감시 + AI 코멘트 시스템
+ *
+ * 두 가지 모드:
+ *   AI 연결 시: 윈도우 제목 + 화면 캡처 + 커서 위치를 AI에 전송 → AI가 맥락 있는 코멘트 생성
+ *   AI 미연결 시: 프리셋 메시지로 폴백 (자율 모드)
+ *
+ * 동작:
+ *   1. 15초마다 활성 윈도우 제목 + 커서 위치 조회
+ *   2. 브라우저/앱 감지 시 AI에 컨텍스트 리포트 (제목 + 화면 캡처)
+ *   3. AI가 제목/캡처를 분석해서 상황 맞는 코멘트 생성
+ *   4. 자율 모드에서는 프리셋 메시지 폴백
+ */
+const BrowserWatcher = (() => {
+  const CHECK_INTERVAL = 15000;     // 활성 윈도우 체크 주기 (15초)
+  const AI_COOLDOWN = 45000;        // AI 코멘트 쿨다운 (45초)
+  const FALLBACK_COOLDOWN = 90000;  // 자율 모드 코멘트 쿨다운 (90초)
+  const COMMENT_CHANCE = 0.4;       // 코멘트 확률 (40%)
+  const SITE_CHANGE_BONUS = 0.3;    // 사이트 변경 시 추가 확률
+
+  let intervalId = null;
+  let lastCategory = null;
+  let lastCommentTime = 0;
+  let lastTitle = '';
+  let enabled = true;
+
+  function init() {
+    intervalId = setInterval(check, CHECK_INTERVAL);
+    // 첫 체크는 10초 후 (앱 시작 직후는 건너뜀)
+    setTimeout(check, 10000);
+  }
+
+  async function check() {
+    if (!enabled) return;
+    if (typeof Speech === 'undefined') return;
+
+    // sleeping 상태면 참견 안 함
+    if (typeof StateMachine !== 'undefined' && StateMachine.getState() === 'sleeping') return;
+
+    try {
+      const title = await window.clawmate.getActiveWindowTitle();
+      if (!title) return;
+
+      const titleLower = title.toLowerCase();
+      const titleChanged = title !== lastTitle;
+      lastTitle = title;
+
+      const now = Date.now();
+
+      // 카테고리 매칭 (AI/자율 모두 사용)
+      const msgs = window._messages;
+      const match = msgs?.browsing ? findCategory(titleLower, msgs.browsing) : null;
+      const category = match?.category || 'unknown';
+
+      // 쿨다운 체크
+      const isAI = typeof AIController !== 'undefined' && AIController.isConnected();
+      const cooldown = isAI ? AI_COOLDOWN : FALLBACK_COOLDOWN;
+      if (now - lastCommentTime < cooldown) return;
+
+      // 같은 카테고리 + 제목 미변경 시 스킵
+      if (category === lastCategory && !titleChanged) return;
+
+      // 확률 체크
+      let chance = COMMENT_CHANCE;
+      if (titleChanged) chance += SITE_CHANGE_BONUS;
+      if (Math.random() > chance) return;
+
+      // === AI vs 자율 모드 분기 ===
+      if (isAI) {
+        await reportBrowsingToAI(title, category, titleChanged);
+      } else {
+        showFallbackComment(match);
+      }
+
+      lastCategory = category;
+      lastCommentTime = now;
+    } catch {
+      // IPC 실패 무시
+    }
+  }
+
+  /**
+   * AI에 브라우징 컨텍스트 전송
+   * 제목 + 커서 위치 + 화면 캡처를 한번에 전송
+   * AI(OpenClaw 플러그인)가 분석하고 코멘트 생성
+   */
+  async function reportBrowsingToAI(title, category, titleChanged) {
+    if (!window.clawmate.reportToAI) return;
+
+    // 커서 위치 조회
+    let cursorX = 0, cursorY = 0;
+    try {
+      if (window.clawmate.getCursorPosition) {
+        const pos = await window.clawmate.getCursorPosition();
+        cursorX = pos.x;
+        cursorY = pos.y;
+      }
+    } catch {}
+
+    // 화면 캡처 (AI가 페이지 내용을 시각적으로 분석하기 위해)
+    let screenData = null;
+    try {
+      const capture = await window.clawmate.screen.capture();
+      if (capture?.success) {
+        screenData = {
+          image: capture.image,
+          width: capture.width,
+          height: capture.height,
+        };
+      }
+    } catch {}
+
+    // 통합 브라우징 리포트 전송
+    window.clawmate.reportToAI('browsing', {
+      title,
+      category,
+      titleChanged,
+      cursorX,
+      cursorY,
+      screen: screenData,
+      timestamp: Date.now(),
+    });
+  }
+
+  /**
+   * 자율 모드 폴백: 프리셋 메시지 표시
+   */
+  function showFallbackComment(match) {
+    if (!match?.data?.comments) return;
+
+    const comments = match.data.comments;
+    const comment = comments[Math.floor(Math.random() * comments.length)];
+    Speech.show(comment);
+
+    // 50% 확률로 흥분 애니메이션
+    if (typeof StateMachine !== 'undefined') {
+      const state = StateMachine.getState();
+      if ((state === 'idle' || state === 'walking') && Math.random() < 0.5) {
+        StateMachine.forceState('excited');
+        setTimeout(() => {
+          if (StateMachine.getState() === 'excited') StateMachine.forceState('idle');
+        }, 1500);
+      }
+    }
+  }
+
+  /**
+   * 카테고리 매칭 (키워드 기반)
+   * general은 다른 카테고리 매칭 안 될 때만 사용
+   */
+  function findCategory(titleLower, browsingMsgs) {
+    let generalMatch = null;
+    for (const [category, data] of Object.entries(browsingMsgs)) {
+      if (!data.keywords) continue;
+      for (const keyword of data.keywords) {
+        if (titleLower.includes(keyword.toLowerCase())) {
+          if (category === 'general') {
+            generalMatch = { category, data };
+          } else {
+            return { category, data };
+          }
+        }
+      }
+    }
+    return generalMatch;
+  }
+
+  function setEnabled(val) { enabled = val; }
+  function stop() { if (intervalId) clearInterval(intervalId); }
+
+  return { init, stop, setEnabled, check };
+})();

package/renderer/js/character.js

@@ -55,7 +55,7 @@ const Character = (() => {
     ],
 
     walk: [
-      // Frame 0: 왼발 앞
+      // Frame 0: 왼쪽 다리 세트 앞으로 크게 벌림, 집게 열림
       [
         [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
         [0,0,6,6,0,0,0,0,0,0,0,0,6,6,0,0],
@@ -70,17 +70,17 @@ const Character = (() => {
         [0,0,1,2,1,1,1,1,1,1,1,1,2,1,0,0],
         [0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0],
         [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
-        [0,0,3,3,3,0,3,3,3,3,0,0,3,3,3,0],
-        [0,3,3,3,0,0,0,3,3,0,0,0,3,3,3,0],
+        [0,3,3,0,0,0,3,3,3,3,0,0,0,3,3,0],
+        [3,3,0,0,0,0,0,3,3,0,0,0,0,0,3,3],
         [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
       ],
-      // Frame 1: 오른발 앞
+      // Frame 1: 양쪽 다리 모임 (접촉 순간), 집게 반 닫힘
       [
         [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
         [0,0,6,6,0,0,0,0,0,0,0,0,6,6,0,0],
-        [0,6,0,0,6,0,0,0,0,0,0,6,0,0,6,0],
-        [0,6,0,0,6,0,0,0,0,0,0,6,0,0,6,0],
-        [0,0,6,6,0,0,0,0,0,0,0,0,6,6,0,0],
+        [0,0,6,0,6,0,0,0,0,0,0,6,0,6,0,0],
+        [0,0,6,0,6,0,0,0,0,0,0,6,0,6,0,0],
+        [0,0,0,6,6,0,0,0,0,0,0,0,6,6,0,0],
         [0,0,0,6,1,1,0,0,0,0,1,1,6,0,0,0],
         [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
         [0,0,0,1,1,4,5,1,1,4,5,1,1,0,0,0],
@@ -89,11 +89,11 @@ const Character = (() => {
         [0,0,1,2,1,1,1,1,1,1,1,1,2,1,0,0],
         [0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0],
         [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
-        [0,0,0,3,3,3,0,3,3,0,3,3,3,0,0,0],
-        [0,0,0,0,3,3,3,0,0,3,3,3,0,0,0,0],
+        [0,0,0,3,3,0,3,3,3,3,0,3,3,0,0,0],
+        [0,0,0,3,3,0,0,3,3,0,0,3,3,0,0,0],
         [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
       ],
-      // Frame 2: 왼발 뒤
+      // Frame 2: 오른쪽 다리 세트 앞으로 크게 벌림, 집게 닫힘
       [
         [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
         [0,0,6,6,0,0,0,0,0,0,0,0,6,6,0,0],
@@ -108,17 +108,17 @@ const Character = (() => {
         [0,0,1,2,1,1,1,1,1,1,1,1,2,1,0,0],
         [0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0],
         [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
-        [0,0,3,3,3,0,3,3,3,3,0,0,3,3,3,0],
-        [0,3,3,3,0,0,0,3,3,0,0,0,3,3,3,0],
+        [0,0,3,3,0,0,3,3,3,3,0,0,3,3,0,0],
+        [0,3,3,0,0,0,0,3,3,0,0,0,0,3,3,0],
         [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
       ],
-      // Frame 3: 오른발 뒤
+      // Frame 3: 양쪽 다리 모임 (접촉 순간), 집게 반 열림
       [
         [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
         [0,0,6,6,0,0,0,0,0,0,0,0,6,6,0,0],
+        [0,6,0,0,6,0,0,0,0,0,0,6,0,0,6,0],
+        [0,6,0,0,6,0,0,0,0,0,0,6,0,0,6,0],
         [0,0,6,6,0,0,0,0,0,0,0,0,6,6,0,0],
-        [0,0,6,6,0,0,0,0,0,0,0,0,6,6,0,0],
-        [0,0,0,6,6,0,0,0,0,0,0,6,6,0,0,0],
         [0,0,0,6,1,1,0,0,0,0,1,1,6,0,0,0],
         [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
         [0,0,0,1,1,4,5,1,1,4,5,1,1,0,0,0],
@@ -127,14 +127,14 @@ const Character = (() => {
         [0,0,1,2,1,1,1,1,1,1,1,1,2,1,0,0],
         [0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0],
         [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
-        [0,0,0,3,3,3,0,3,3,0,3,3,3,0,0,0],
-        [0,0,0,0,3,3,3,0,0,3,3,3,0,0,0,0],
+        [0,0,0,3,3,0,3,3,3,3,0,3,3,0,0,0],
+        [0,0,0,3,3,0,0,3,3,0,0,3,3,0,0,0],
         [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
       ],
     ],
 
     climb: [
-      // Frame 0: 기어오르기 포즈 1 (옆모습)
+      // Frame 0: 기어오르기 — 윗다리 세트 뻗음, 집게 열림
       [
         [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
         [0,0,0,0,6,6,0,0,0,0,0,0,0,0,0,0],
@@ -147,13 +147,13 @@ const Character = (() => {
         [0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0],
         [0,0,0,1,2,1,1,1,1,0,0,0,0,0,0,0],
         [0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0],
-        [0,0,0,3,3,0,3,3,0,0,0,0,0,0,0,0],
         [0,0,3,3,0,0,0,3,3,0,0,0,0,0,0,0],
+        [0,3,3,0,0,0,0,0,3,3,0,0,0,0,0,0],
         [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
         [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
         [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
       ],
-      // Frame 1: 기어오르기 포즈 2
+      // Frame 1: 기어오르기 — 다리 모임 (교차 순간)
       [
         [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
         [0,0,0,0,6,6,0,0,0,0,0,0,0,0,0,0],
@@ -166,12 +166,50 @@ const Character = (() => {
         [0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0],
         [0,0,0,1,2,1,1,1,1,0,0,0,0,0,0,0],
         [0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0],
-        [0,0,3,3,0,0,0,3,3,0,0,0,0,0,0,0],
+        [0,0,0,3,3,0,3,3,0,0,0,0,0,0,0,0],
         [0,0,0,3,3,0,3,3,0,0,0,0,0,0,0,0],
         [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
         [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
         [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
       ],
+      // Frame 2: 기어오르기 — 아랫다리 세트 뻗음, 집게 닫힘
+      [
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,0,0,6,6,0,0,0,0,0,0,0,0,0,0],
+        [0,0,0,0,6,6,0,0,0,0,0,0,0,0,0,0],
+        [0,0,0,0,6,6,0,0,0,0,0,0,0,0,0,0],
+        [0,0,0,0,6,6,1,1,0,0,0,0,0,0,0,0],
+        [0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0],
+        [0,0,0,0,1,4,5,1,1,0,0,0,0,0,0,0],
+        [0,0,0,0,1,4,5,1,1,1,0,0,0,0,0,0],
+        [0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0],
+        [0,0,0,1,2,1,1,1,1,0,0,0,0,0,0,0],
+        [0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0],
+        [0,0,0,3,3,0,3,3,0,0,0,0,0,0,0,0],
+        [0,0,3,3,0,0,0,3,3,0,0,0,0,0,0,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+      ],
+      // Frame 3: 기어오르기 — 다리 모임 (교차 순간, 반대쪽)
+      [
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,0,0,6,6,0,0,0,0,0,0,0,0,0,0],
+        [0,0,0,0,6,6,0,0,0,0,0,0,0,0,0,0],
+        [0,0,0,0,6,6,0,0,0,0,0,0,0,0,0,0],
+        [0,0,0,0,6,6,1,1,0,0,0,0,0,0,0,0],
+        [0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0],
+        [0,0,0,0,1,4,5,1,1,0,0,0,0,0,0,0],
+        [0,0,0,0,1,4,5,1,1,1,0,0,0,0,0,0],
+        [0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0],
+        [0,0,0,1,2,1,1,1,1,0,0,0,0,0,0,0],
+        [0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0],
+        [0,0,3,3,0,0,0,3,3,0,0,0,0,0,0,0],
+        [0,0,3,3,0,0,0,3,3,0,0,0,0,0,0,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+      ],
     ],
 
     sleep: [
@@ -335,10 +373,12 @@ const Character = (() => {
     jumping: 'excited',    // 점프: excited 프레임셋 재활용
     rappelling: 'climb',   // 레펠: climb 프레임셋 재활용
     falling: 'scared',     // 낙하: scared 프레임셋 재활용
+    custom: 'walk',        // 커스텀 이동: 기본은 walk, 패턴별로 동적 변경 가능
   };
 
   let currentCanvas = null;
   let currentColorMap = null;
+  let originalFrames = null;  // 원본 프레임 백업 (리셋용)
 
   function createCanvas(container) {
     const canvas = document.createElement('canvas');
@@ -395,5 +435,62 @@ const Character = (() => {
     return (FRAMES[frameSet] || FRAMES.idle).length;
   }
 
-  return { createCanvas, setColorMap, renderFrame, getFrameCount, SIZE, FRAMES, STATE_FRAMES };
+  /**
+   * 커스텀 프레임 데이터 설정 (AI 생성 캐릭터용)
+   * 기존 프레임을 백업하고 새 프레임으로 교체
+   */
+  function setCustomFrames(newFrames) {
+    if (!originalFrames) {
+      originalFrames = {};
+      for (const [key, value] of Object.entries(FRAMES)) {
+        originalFrames[key] = JSON.parse(JSON.stringify(value));
+      }
+    }
+    for (const [key, value] of Object.entries(newFrames)) {
+      if (Array.isArray(value) && value.length > 0) {
+        FRAMES[key] = value;
+      }
+    }
+  }
+
+  /**
+   * 캐릭터 데이터 일괄 설정 (색상 + 프레임)
+   * @param {object} data - { colorMap?, frames? }
+   */
+  function setCharacterData(data) {
+    if (data.colorMap) {
+      setColorMap(data.colorMap);
+    }
+    if (data.frames) {
+      setCustomFrames(data.frames);
+    }
+  }
+
+  /**
+   * 원래 캐릭터로 리셋
+   */
+  function resetCharacter() {
+    if (originalFrames) {
+      for (const key of Object.keys(FRAMES)) {
+        delete FRAMES[key];
+      }
+      Object.assign(FRAMES, originalFrames);
+      originalFrames = null;
+    }
+    // 기본 색상으로 리셋
+    setColorMap({
+      primary: '#ff4f40',
+      secondary: '#ff775f',
+      dark: '#8B4513',
+      eye: '#ffffff',
+      pupil: '#111111',
+      claw: '#ff4f40',
+    });
+  }
+
+  return {
+    createCanvas, setColorMap, renderFrame, getFrameCount,
+    setCustomFrames, setCharacterData, resetCharacter,
+    SIZE, FRAMES, STATE_FRAMES,
+  };
 })();