clawmate 1.4.0 → 1.4.2

package/main/tray.js

@@ -9,7 +9,7 @@ let tray = null;
 let aiBridge = null;
 
 /**
- * 16x16 Claw 픽셀아트 아이콘 생성
+ * Generate 16x16 Claw pixel art icon
  */
 const CLAW_ICON = [
   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
@@ -41,48 +41,48 @@ const COLOR_MAP = {
 };
 
 /**
- * 캐릭터 프리셋 목록
- * 트레이에서 선택하면 set_character 명령으로 렌더러에 전달
+ * Character preset list
+ * When selected from tray, sent to renderer via set_character command
  */
 const CHARACTER_PRESETS = {
   default: {
-    name: '기본 Claw (빨강)',
+    name: 'Default Claw (Red)',
     colorMap: { primary: '#ff4f40', secondary: '#ff775f', dark: '#8B4513', eye: '#ffffff', pupil: '#111111', claw: '#ff4f40' },
   },
   blue: {
-    name: '파란 Claw',
+    name: 'Blue Claw',
     colorMap: { primary: '#4488ff', secondary: '#6699ff', dark: '#223388', eye: '#ffffff', pupil: '#111111', claw: '#4488ff' },
   },
   green: {
-    name: '초록 Claw',
+    name: 'Green Claw',
     colorMap: { primary: '#44cc44', secondary: '#66dd66', dark: '#226622', eye: '#ffffff', pupil: '#111111', claw: '#44cc44' },
   },
   purple: {
-    name: '보라 Claw',
+    name: 'Purple Claw',
     colorMap: { primary: '#8844cc', secondary: '#aa66dd', dark: '#442266', eye: '#ffffff', pupil: '#111111', claw: '#8844cc' },
   },
   gold: {
-    name: '골드 Claw',
+    name: 'Gold Claw',
     colorMap: { primary: '#ffcc00', secondary: '#ffdd44', dark: '#886600', eye: '#ffffff', pupil: '#111111', claw: '#ffcc00' },
   },
   pink: {
-    name: '핑크 Claw',
+    name: 'Pink Claw',
     colorMap: { primary: '#ff69b4', secondary: '#ff8cc4', dark: '#8B3060', eye: '#ffffff', pupil: '#111111', claw: '#ff69b4' },
   },
   cat: {
-    name: '고양이',
+    name: 'Cat',
     colorMap: { primary: '#ff9944', secondary: '#ffbb66', dark: '#663300', eye: '#88ff88', pupil: '#111111', claw: '#ff9944' },
   },
   robot: {
-    name: '로봇',
+    name: 'Robot',
     colorMap: { primary: '#888888', secondary: '#aaaaaa', dark: '#444444', eye: '#66aaff', pupil: '#0044aa', claw: '#66aaff' },
   },
   ghost: {
-    name: '유령',
+    name: 'Ghost',
     colorMap: { primary: '#ccccff', secondary: '#eeeeff', dark: '#6666aa', eye: '#ff6666', pupil: '#cc0000', claw: '#ccccff' },
   },
   dragon: {
-    name: '드래곤',
+    name: 'Dragon',
     colorMap: { primary: '#cc2222', secondary: '#ff4444', dark: '#661111', eye: '#ffaa00', pupil: '#111111', claw: '#ffaa00' },
   },
 };
@@ -114,7 +114,7 @@ function setupTray(mainWindow, bridge) {
 
   const icon = createClawIcon();
   tray = new Tray(icon);
-  tray.setToolTip('ClawMate - 데스크톱 펫');
+  tray.setToolTip('ClawMate - AI Cyber Body');
 
   function buildMenu() {
     const mode = store.get('mode') || 'pet';
@@ -124,7 +124,7 @@ function setupTray(mainWindow, bridge) {
     const currentChar = store.get('character') || 'default';
     const hasTelegramToken = !!(store.get('telegramToken'));
 
-    // 캐릭터 서브메뉴
+    // Character submenu
     const characterSubmenu = Object.entries(CHARACTER_PRESETS).map(([key, preset]) => ({
       label: preset.name,
       type: 'radio',
@@ -140,7 +140,7 @@ function setupTray(mainWindow, bridge) {
             mainWindow.webContents.send('ai-command', {
               type: 'set_character', payload: {
                 colorMap: preset.colorMap,
-                speech: `${preset.name}(으)로 변신!`,
+                speech: `Transforming into ${preset.name}!`,
               },
             });
           }
@@ -155,18 +155,18 @@ function setupTray(mainWindow, bridge) {
         enabled: false,
       },
       {
-        label: aiConnected ? 'AI: 연결됨' : 'AI: 자율 모드',
+        label: aiConnected ? 'AI: Connected' : 'AI: Autonomous Mode',
         enabled: false,
       },
       { type: 'separator' },
 
-      // === 모드 선택 ===
+      // === Mode Selection ===
       {
-        label: '모드',
+        label: 'Mode',
         submenu: [
           {
-            label: 'Pet 모드 (Clawby)',
-            sublabel: '귀여운 펫을 키우기',
+            label: 'Pet Mode (Clawby)',
+            sublabel: 'Raise a cute pet',
             type: 'radio',
             checked: mode === 'pet',
             click: () => {
@@ -176,8 +176,8 @@ function setupTray(mainWindow, bridge) {
             },
           },
           {
-            label: 'Incarnation 모드 (Claw)',
-            sublabel: '봇이 육체를 얻음',
+            label: 'Incarnation Mode (Claw)',
+            sublabel: 'AI gains a cyber body',
             type: 'radio',
             checked: mode === 'incarnation',
             click: () => {
@@ -187,8 +187,8 @@ function setupTray(mainWindow, bridge) {
             },
           },
           {
-            label: '둘 다 (Pet + Incarnation)',
-            sublabel: '펫도 키우고, 봇 인격도 반영',
+            label: 'Both (Pet + Incarnation)',
+            sublabel: 'Raise pet and reflect AI persona',
             type: 'radio',
             checked: mode === 'both',
             click: () => {
@@ -200,17 +200,17 @@ function setupTray(mainWindow, bridge) {
         ],
       },
 
-      // === 캐릭터 선택 ===
+      // === Character Selection ===
       {
-        label: '캐릭터',
+        label: 'Character',
         submenu: characterSubmenu,
       },
 
       { type: 'separator' },
 
-      // === 설정 ===
+      // === Settings ===
       {
-        label: '파일 상호작용',
+        label: 'File Interaction',
         type: 'checkbox',
         checked: fileInteraction,
         click: (item) => {
@@ -219,7 +219,7 @@ function setupTray(mainWindow, bridge) {
         },
       },
       {
-        label: '컴퓨터 시작 시 자동 실행',
+        label: 'Launch at Startup',
         type: 'checkbox',
         checked: autoStart,
         click: () => {
@@ -230,37 +230,37 @@ function setupTray(mainWindow, bridge) {
 
       { type: 'separator' },
 
-      // === 텔레그램 봇 ===
+      // === Telegram Bot ===
       {
-        label: '텔레그램 봇',
+        label: 'Telegram Bot',
         submenu: [
           {
-            label: hasTelegramToken ? '봇 토큰: 설정됨' : '봇 토큰: 미설정',
+            label: hasTelegramToken ? 'Bot Token: Configured' : 'Bot Token: Not Set',
             enabled: false,
           },
           {
-            label: '봇 토큰 설정...',
+            label: 'Set Bot Token...',
             click: async () => {
               const result = await dialog.showMessageBox({
                 type: 'question',
-                buttons: ['클립보드에서 붙여넣기', '직접 입력', '취소'],
-                title: 'ClawMate 텔레그램 봇',
-                message: '텔레그램 봇 토큰을 설정합니다.',
-                detail: '@BotFather에서 받은 봇 토큰을 입력하세요.\n현재 클립보드 내용을 붙여넣으려면 "클립보드에서 붙여넣기"를 선택하세요.',
+                buttons: ['Paste from Clipboard', 'Manual Entry', 'Cancel'],
+                title: 'ClawMate Telegram Bot',
+                message: 'Set up Telegram bot token.',
+                detail: 'Enter the bot token received from @BotFather.\nSelect "Paste from Clipboard" to paste current clipboard content.',
               });
 
               let token = null;
               if (result.response === 0) {
-                // 클립보드에서 붙여넣기
+                // Paste from clipboard
                 token = clipboard.readText().trim();
               } else if (result.response === 1) {
-                // prompt가 없으므로 클립보드 안내
+                // No prompt available, guide to use clipboard
                 const promptResult = await dialog.showMessageBox({
                   type: 'info',
-                  buttons: ['확인'],
-                  title: '텔레그램 봇 토큰',
-                  message: '봇 토큰을 클립보드에 복사한 후 다시 "봇 토큰 설정"을 선택하세요.',
-                  detail: '텔레그램에서 @BotFather → /newbot → 토큰 복사',
+                  buttons: ['OK'],
+                  title: 'Telegram Bot Token',
+                  message: 'Copy the bot token to clipboard, then select "Set Bot Token" again.',
+                  detail: 'In Telegram: @BotFather -> /newbot -> Copy token',
                 });
                 return;
               } else {
@@ -272,26 +272,26 @@ function setupTray(mainWindow, bridge) {
                 process.env.CLAWMATE_TELEGRAM_TOKEN = token;
                 buildAndSet();
 
-                // 펫 알림
+                // Pet notification
                 if (mainWindow && !mainWindow.isDestroyed()) {
                   mainWindow.webContents.send('ai-command', {
                     type: 'speak',
-                    payload: { text: '텔레그램 봇 토큰 설정 완료!' },
+                    payload: { text: 'Telegram bot token configured!' },
                   });
                 }
               } else {
                 await dialog.showMessageBox({
                   type: 'error',
-                  buttons: ['확인'],
-                  title: '잘못된 토큰',
-                  message: '유효한 텔레그램 봇 토큰이 아닙니다.',
-                  detail: '올바른 형식: 123456789:ABCdefGHIjklMNOpqrsTUVwxyz',
+                  buttons: ['OK'],
+                  title: 'Invalid Token',
+                  message: 'Not a valid Telegram bot token.',
+                  detail: 'Correct format: 123456789:ABCdefGHIjklMNOpqrsTUVwxyz',
                 });
               }
             },
           },
           {
-            label: '봇 토큰 제거',
+            label: 'Remove Bot Token',
             enabled: hasTelegramToken,
             click: () => {
               store.set('telegramToken', '');
@@ -305,13 +305,13 @@ function setupTray(mainWindow, bridge) {
       { type: 'separator' },
 
       {
-        label: '업데이트 확인',
+        label: 'Check for Updates',
         click: async () => {
           await checkForUpdateManual(mainWindow);
         },
       },
       {
-        label: '파일 이동 되돌리기',
+        label: 'Undo File Moves',
         click: async () => {
           const manifest = await getFileManifest();
           const pending = manifest.filter(m => !m.restored);
@@ -321,7 +321,7 @@ function setupTray(mainWindow, bridge) {
       },
       { type: 'separator' },
       {
-        label: '종료',
+        label: 'Quit',
         click: () => {
           app.quit();
         },
@@ -333,7 +333,7 @@ function setupTray(mainWindow, bridge) {
     tray.setContextMenu(buildMenu());
   }
 
-  // AI 연결 상태 변경 시 메뉴 업데이트
+  // Update menu when AI connection state changes
   if (aiBridge) {
     aiBridge.on('connected', () => buildAndSet());
     aiBridge.on('disconnected', () => buildAndSet());
@@ -344,7 +344,7 @@ function setupTray(mainWindow, bridge) {
 }
 
 /**
- * 수동 업데이트 확인
+ * Manual update check
  */
 async function checkForUpdateManual(mainWindow) {
   if (app.isPackaged) {
@@ -352,7 +352,7 @@ async function checkForUpdateManual(mainWindow) {
       const { autoUpdater } = require('electron-updater');
       autoUpdater.checkForUpdatesAndNotify();
     } catch (err) {
-      console.error('[업데이트] electron-updater 실패:', err.message);
+      console.error('[Update] electron-updater failed:', err.message);
     }
   } else {
     try {
@@ -366,7 +366,7 @@ async function checkForUpdateManual(mainWindow) {
         if (mainWindow && !mainWindow.isDestroyed()) {
           mainWindow.webContents.send('ai-command', {
             type: 'speak',
-            payload: { text: `새 버전 v${latest} 사용 가능! (현재: v${current})` },
+            payload: { text: `New version v${latest} available! (current: v${current})` },
           });
         }
         shell.openExternal('https://www.npmjs.com/package/clawmate');
@@ -374,16 +374,16 @@ async function checkForUpdateManual(mainWindow) {
         if (mainWindow && !mainWindow.isDestroyed()) {
           mainWindow.webContents.send('ai-command', {
             type: 'speak',
-            payload: { text: `v${current} — 이미 최신 버전이야!` },
+            payload: { text: `v${current} — already up to date!` },
           });
         }
       }
     } catch (err) {
-      console.error('[업데이트] npm 버전 확인 실패:', err.message);
+      console.error('[Update] npm version check failed:', err.message);
       if (mainWindow && !mainWindow.isDestroyed()) {
         mainWindow.webContents.send('ai-command', {
           type: 'speak',
-          payload: { text: '업데이트 확인 실패...' },
+          payload: { text: 'Update check failed...' },
         });
       }
     }

package/main/updater.js

@@ -1,48 +1,48 @@
 /**
- * ClawMate 자동 업데이트 모듈
+ * ClawMate Auto-Update Module
  *
- * electron-updater를 사용하여 GitHub Releases에서
- * 새 버전이 있으면 자동으로 다운로드하고, 앱 종료 시 설치한다.
- * 개발 모드(app.isPackaged === false)에서는 동작하지 않는다.
+ * Uses electron-updater to automatically download new versions
+ * from GitHub Releases and install on app quit.
+ * Does not run in development mode (app.isPackaged === false).
  */
 const { app } = require('electron');
 const { autoUpdater } = require('electron-updater');
 
 function checkForUpdates() {
-  // 빌드된 앱에서만 동작 (개발 모드 제외)
+  // Only runs in packaged app (excludes dev mode)
   if (!app.isPackaged) return;
 
   autoUpdater.autoDownload = true;
   autoUpdater.autoInstallOnAppQuit = true;
 
   autoUpdater.on('checking-for-update', () => {
-    console.log('[업데이트] 새 버전 확인 중...');
+    console.log('[Update] Checking for new version...');
   });
 
   autoUpdater.on('update-available', (info) => {
-    console.log('[업데이트] 새 버전 발견:', info.version);
+    console.log('[Update] New version found:', info.version);
   });
 
   autoUpdater.on('update-not-available', () => {
-    console.log('[업데이트] 현재 최신 버전입니다.');
+    console.log('[Update] Already up to date.');
   });
 
   autoUpdater.on('download-progress', (progress) => {
-    console.log(`[업데이트] 다운로드 진행: ${Math.round(progress.percent)}%`);
+    console.log(`[Update] Download progress: ${Math.round(progress.percent)}%`);
   });
 
   autoUpdater.on('update-downloaded', (info) => {
-    console.log('[업데이트] 다운로드 완료, 재시작 시 설치됨:', info.version);
+    console.log('[Update] Download complete, will install on restart:', info.version);
   });
 
   autoUpdater.on('error', (err) => {
-    console.error('[업데이트] 오류:', err.message);
+    console.error('[Update] Error:', err.message);
   });
 
-  // 최초 업데이트 확인
+  // Initial update check
   autoUpdater.checkForUpdatesAndNotify();
 
-  // 6시간마다 업데이트 확인
+  // Check for updates every 6 hours
   setInterval(() => {
     autoUpdater.checkForUpdatesAndNotify();
   }, 6 * 60 * 60 * 1000);

package/openclaw.plugin.json

@@ -1,7 +1,7 @@
 {
   "id": "clawmate",
   "name": "ClawMate",
-  "description": "ClawMate - 화면 위의 살아있는 데스크톱 펫",
+  "description": "ClawMate - Give your AI a living body on screen",
   "version": "1.0.0",
   "skills": ["skills/launch-pet"],
   "configSchema": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clawmate",
-  "version": "1.4.0",
-  "description": "ClawMate - AI가 조종하는 화면 위의 살아있는 데스크톱 펫",
+  "version": "1.4.2",
+  "description": "ClawMate - Give your AI a living body on screen",
   "main": "main/index.js",
   "bin": {
     "clawmate": "./skills/launch-pet/index.js"

package/preload/preload.js

@@ -1,40 +1,40 @@
 const { contextBridge, ipcRenderer } = require('electron');
 
 contextBridge.exposeInMainWorld('clawmate', {
-  // 클릭 통과 제어
+  // Click-through control
   setClickThrough: (ignore) => ipcRenderer.send('set-click-through', ignore),
 
-  // 파일 작업
+  // File operations
   getDesktopFiles: () => ipcRenderer.invoke('get-desktop-files'),
   moveFile: (fileName, newPosition) => ipcRenderer.invoke('move-file', fileName, newPosition),
   undoFileMove: (moveId) => ipcRenderer.invoke('undo-file-move', moveId),
   undoAllMoves: () => ipcRenderer.invoke('undo-all-moves'),
   getFileManifest: () => ipcRenderer.invoke('get-file-manifest'),
 
-  // 모드 전환
+  // Mode switching
   getMode: () => ipcRenderer.invoke('get-mode'),
   setMode: (mode) => ipcRenderer.invoke('set-mode', mode),
 
-  // 설정
+  // Settings
   getConfig: () => ipcRenderer.invoke('get-config'),
   setConfig: (key, value) => ipcRenderer.invoke('set-config', key, value),
 
-  // 메모리 (사용자 상호작용 기억)
+  // Memory (user interaction history)
   getMemory: () => ipcRenderer.invoke('get-memory'),
   saveMemory: (data) => ipcRenderer.invoke('save-memory', data),
 
-  // 창 정보
+  // Window info
   getScreenSize: () => ipcRenderer.invoke('get-screen-size'),
 
-  // 열린 윈도우 위치/크기 조회
+  // Open window position/size query
   getWindowPositions: () => ipcRenderer.invoke('get-window-positions'),
 
-  // 화면 캡처
+  // Screen capture
   screen: {
     capture: () => ipcRenderer.invoke('capture-screen'),
   },
 
-  // 이벤트 수신
+  // Event listeners
   onModeChanged: (callback) => {
     ipcRenderer.on('mode-changed', (_, mode) => callback(mode));
   },
@@ -42,14 +42,14 @@ contextBridge.exposeInMainWorld('clawmate', {
     ipcRenderer.on('config-changed', (_, config) => callback(config));
   },
 
-  // === AI 통신 ===
+  // === AI Communication ===
 
-  // AI 명령 수신 (AI → 펫)
+  // Receive AI commands (AI -> Pet)
   onAICommand: (callback) => {
     ipcRenderer.on('ai-command', (_, command) => callback(command));
   },
 
-  // AI 연결/해제 이벤트
+  // AI connect/disconnect events
   onAIConnected: (callback) => {
     ipcRenderer.on('ai-connected', () => callback());
   },
@@ -57,22 +57,22 @@ contextBridge.exposeInMainWorld('clawmate', {
     ipcRenderer.on('ai-disconnected', () => callback());
   },
 
-  // 사용자 이벤트를 AI에 전달 (펫 → AI)
+  // Forward user events to AI (Pet -> AI)
   reportToAI: (event, data) => ipcRenderer.send('report-to-ai', event, data),
 
-  // AI 연결 상태 확인
+  // Check AI connection status
   isAIConnected: () => ipcRenderer.invoke('is-ai-connected'),
 
-  // 메트릭 보고 (렌더러 → main → AI)
+  // Metrics reporting (renderer -> main -> AI)
   reportMetrics: (summary) => ipcRenderer.send('report-metrics', summary),
 
-  // 활성 윈도우 제목 조회 (브라우저 감시)
+  // Get active window title (browser watching)
   getActiveWindowTitle: () => ipcRenderer.invoke('get-active-window-title'),
 
-  // 커서 위치 조회 (화면 좌표)
+  // Get cursor position (screen coordinates)
   getCursorPosition: () => ipcRenderer.invoke('get-cursor-position'),
 
-  // === 스마트 파일 조작 ===
+  // === Smart file operations ===
   parseFileCommand: (text) => ipcRenderer.invoke('parse-file-command', text),
   listFilteredFiles: (sourceDir, filter) => ipcRenderer.invoke('list-filtered-files', sourceDir, filter),
   smartFileOp: (command) => ipcRenderer.invoke('smart-file-op', command),

package/renderer/css/effects.css

@@ -1,6 +1,6 @@
-/* 파티클 및 전환 효과 */
+/* Particle and transition effects */
 
-/* 모드 전환 파티클 */
+/* Mode transition particle */
 .mode-transition-particle {
   position: absolute;
   width: 4px;
@@ -21,7 +21,7 @@
   }
 }
 
-/* 진화 글로우 링 */
+/* Evolution glow ring */
 .evolve-ring {
   position: absolute;
   border-radius: 50%;
@@ -41,7 +41,7 @@
   }
 }
 
-/* 파일 픽업 이펙트 */
+/* File pickup effect */
 .file-pickup-effect {
   position: absolute;
   font-size: 12px;
@@ -57,7 +57,7 @@
   100% { opacity: 0; transform: translateY(-30px); }
 }
 
-/* 꼬리 흔들기 (idle 상태 추가 효과) */
+/* Tail wag (additional idle state effect) */
 .tail-wag {
   animation: wag 0.5s ease-in-out infinite alternate;
 }
@@ -67,7 +67,7 @@
   100% { transform: rotate(5deg); }
 }
 
-/* 진화 단계 전환 — 밝은 플래시 */
+/* Evolution stage transition -- bright flash */
 .evolve-flash {
   position: fixed;
   top: 0;

package/renderer/css/pet.css

@@ -1,4 +1,4 @@
-/* 레펠 실(thread) SVG 레이어 */
+/* Rappel thread SVG layer */
 #thread-svg {
   position: absolute;
   top: 0;
@@ -9,7 +9,7 @@
   z-index: 999;
 }
 
-/* 펫 컨테이너 */
+/* Pet container */
 #pet-container {
   position: absolute;
   width: 64px;
@@ -25,7 +25,7 @@
   image-rendering: crisp-edges;
 }
 
-/* 수면 Z 이펙트 */
+/* Sleep Z effect */
 .sleep-z {
   position: absolute;
   top: -20px;
@@ -57,7 +57,7 @@
   100% { opacity: 0; transform: translateY(-20px) translateX(10px); }
 }
 
-/* 흥분 별 이펙트 */
+/* Excitement star effect */
 .star-effect {
   position: absolute;
   width: 8px;
@@ -74,7 +74,7 @@
   100% { opacity: 0; transform: scale(0.5) translateY(-20px); }
 }
 
-/* 하트 이펙트 (상호작용) */
+/* Heart effect (interaction) */
 .heart-effect {
   position: absolute;
   font-size: 16px;
@@ -88,7 +88,7 @@
   100% { opacity: 0; transform: translateY(-40px) scale(1.2); }
 }
 
-/* 진화 반짝임 이펙트 */
+/* Evolution sparkle effect */
 .evolve-sparkle {
   position: absolute;
   width: 6px;
@@ -104,13 +104,13 @@
   100% { opacity: 0; transform: scale(0) rotate(360deg); }
 }
 
-/* 드래그 중 상태 */
+/* Dragging state */
 #pet-container.dragging {
   cursor: grabbing;
   filter: brightness(1.1);
 }
 
-/* 모드별 글로우 효과 */
+/* Mode-specific glow effect */
 #pet-container.mode-incarnation canvas {
   filter: drop-shadow(0 0 4px rgba(0, 191, 165, 0.6));
 }

package/renderer/css/speech.css

@@ -1,4 +1,4 @@
-/* 말풍선 공통 */
+/* Speech bubble common styles */
 .speech-bubble {
   position: absolute;
   padding: 8px 14px;
@@ -25,7 +25,7 @@
   border-right: 8px solid transparent;
 }
 
-/* Pet 모드 말풍선 — 둥글고 빨간 테두리 */
+/* Pet mode speech bubble -- rounded with red border */
 .speech-pet {
   background: #fff5f5;
   border: 2px solid #ff4f40;
@@ -38,7 +38,7 @@
   border-top: 8px solid #ff4f40;
 }
 
-/* Incarnation 모드 말풍선 — 각지고 틸 발광 */
+/* Incarnation mode speech bubble -- angular with teal glow */
 .speech-incarnation {
   background: #f0fffd;
   border: 2px solid #00BFA5;
@@ -51,12 +51,12 @@
   border-top: 8px solid #00BFA5;
 }
 
-/* 타자기 커서 효과 */
+/* Typewriter cursor effect */
 .speech-text {
   display: inline;
 }
 
-/* 페이드 아웃 */
+/* Fade out */
 .speech-fade {
   animation: speech-disappear 0.5s ease-in forwards;
 }