feat: /friend aliveness system, motion controller fix, VAD tuning, high-pass filter

- Remove redundant files (HistoryPanel, MoodIndicator, vmd-loader, vrm-ik-handler, web-file-picker, FriendScreenObserveTool)
- Add action parameter to friend_emotion for VRM animation playback
- Fix motion-controller: replace broken 'finished' event with frame-accurate completion detection and action queue
- Add aliveness system: breathing, postural sway, speech micro-movements, listening response, micro-expressions, enhanced blink
- Add Silero VAD threshold tuning and high-pass filter for low-frequency noise rejection
- Fix build scripts (vite build instead of tauri build)
- Add LipSync.isActive() for speech-driven animation blending

Co-Authored-By: Claude Big Pickle <noreply@anthropic.com>

package.json

@@ -18,7 +18,8 @@
   "scripts": {
     "build": "bun run ./scripts/build.ts",
     "dev": "bun run ./scripts/dev.ts",
-    "friend:build": "cd src/components/friend/frontend && npx tauri build"
+    "friend:build": "cd src/components/friend/frontend && npx vite build",
+    "friend:dev": "cd src/components/friend/frontend && npx vite"
   },
   "dependencies": {
     "@alcalzone/ansi-tokenize": "^0.3.0",

src/components/friend/frontend/App.tsx

@@ -1,27 +1,19 @@
 import { useEffect, useRef, useState, useCallback } from 'react'
 import { VRMScene } from './components/VRMScene'
-import type { VRMSceneHandle, TouchRegion } from './components/VRMScene'
+import type { VRMSceneHandle } from './components/VRMScene'
 import { TextBubble } from './components/TextBubble'
 import type { OnVrmMessage } from './components/TextBubble'
 import { ChatInput } from './components/ChatInput'
 import { ResizeHandles } from './components/ResizeHandles'
 import { SettingsPanel } from './components/SettingsPanel'
 import { usePassThrough } from './hooks/usePassThrough'
-import { dancePresets } from './motion-controller'
 import { LipSync } from './lip-sync'
 import { FRIEND_API, bindScene } from './api'
-import { HistoryPanel } from './components/HistoryPanel'
-import { MoodIndicator } from './components/MoodIndicator'
-import { Menu, Pin, Move, RotateCcw, Rotate3D, EyeOff, Settings, Music, RefreshCw } from 'lucide-react'
+import { Menu, Move, Rotate3D, EyeOff, Settings, RefreshCw, Pin } from 'lucide-react'
 
 const DEFAULT_MODEL = '/friend/model1.vrm'
-// Module-level to survive any component remount
-let lastTouchMemoTime = 0
-const TOUCH_MEMO_COOLDOWN = 3_000
-let lastTouchChatTime = 0
-const TOUCH_CHAT_COOLDOWN = 60_000
 
-// 情绪 → 动作映射 (action names from motion-controller presets)
+// 情绪 → 动作映射
 const emotionActionMap: Record<string, string> = {
   think: 'scratchHead',
   question: 'point',
@@ -38,7 +30,6 @@ const emotionActionMap: Record<string, string> = {
   neutral: 'salute',
 }
 
-
 const btnStyle: React.CSSProperties = {
   width: 32,
   height: 32,
@@ -60,24 +51,16 @@ export default function App() {
   const [tracking, setTracking] = useState<'mouse' | 'camera'>('mouse')
   const [showText, setShowText] = useState(true)
   const [collapsed, setCollapsed] = useState(false)
-
   const [ttsEnabled, setTtsEnabled] = useState(true)
   const [modelPath, setModelPath] = useState(DEFAULT_MODEL)
   const [settingsOpen, setSettingsOpen] = useState(false)
-  const [historyOpen, setHistoryOpen] = useState(false)
   const [hideUI, setHideUI] = useState(false)
   const [volume, setVolume] = useState(0.5)
   const [uiAlign, setUiAlign] = useState<'left' | 'right'>('right')
-  const [dancing, setDancing] = useState(false)
-  const [currentDance, setCurrentDance] = useState('jile')
-  const [customDancePreset, setCustomDancePreset] = useState<import('./motion-controller').DancePreset | undefined>(undefined)
-  const [hideMood, setHideMood] = useState(false)
-  const [screenObserve, setScreenObserve] = useState(false)
-  const [screenObserveInterval, setScreenObserveInterval] = useState(60)
   const [language, setLanguage] = useState<'zh' | 'en'>(() => navigator.language.startsWith('zh') ? 'zh' : 'en')
   const [sttProvider, setSttProvider] = useState<'browser' | 'groq' | 'anthropic' | 'local' | 'doubao'>('browser')
   const t = (zh: string, en: string) => language === 'en' ? en : zh
-  usePassThrough(!settingsOpen && !historyOpen)
+  usePassThrough(!settingsOpen)
 
   // Load persisted settings on mount
   useEffect(() => {
@@ -89,18 +72,12 @@ export default function App() {
         if (s.showText !== undefined) setShowText(s.showText)
         if (s.hideUI !== undefined) setHideUI(s.hideUI)
         if (s.tracking) { setTracking(s.tracking); sceneRef.current?.setTrackingMode(s.tracking) }
-        if (s.volume !== undefined) { setVolume(s.volume); LipSync.getInstance().setVolume(s.volume); sceneRef.current?.setBgmVolume(s.volume) }
+        if (s.volume !== undefined) { setVolume(s.volume); LipSync.getInstance().setVolume(s.volume) }
         if (s.uiAlign) setUiAlign(s.uiAlign)
-        if (s.hideMood !== undefined) setHideMood(s.hideMood)
-        if (s.screenObserve !== undefined) setScreenObserve(s.screenObserve)
-        if (s.screenObserveInterval !== undefined) setScreenObserveInterval(s.screenObserveInterval)
-        if (s.currentDance) setCurrentDance(s.currentDance)
-        if (s.customDancePreset) setCustomDancePreset(s.customDancePreset)
         if (s.sttProvider) setSttProvider(s.sttProvider)
         if (s.language) {
           setLanguage(s.language)
         } else {
-          // No saved language — persist the detected system language to backend
           const detected = navigator.language.startsWith('zh') ? 'zh' : 'en'
           fetch(`${FRIEND_API}/settings`, {
             method: 'POST',
@@ -120,10 +97,6 @@ export default function App() {
     }).catch(() => {})
   }
 
-  useEffect(() => {
-    // open-settings Tauri event replaced by F4 keyboard shortcut (handled below)
-  }, [])
-
   useEffect(() => {
     bindScene(sceneRef.current)
     return () => bindScene(null)
@@ -132,7 +105,6 @@ export default function App() {
   const handleVolumeChange = useCallback((v: number) => {
     setVolume(v)
     LipSync.getInstance().setVolume(v)
-    sceneRef.current?.setBgmVolume(v)
     saveSettings({ volume: v })
   }, [])
 
@@ -144,22 +116,19 @@ export default function App() {
 
   const handleVrmMessage: OnVrmMessage = useCallback((msg) => {
     if (msg.emotion && sceneRef.current) {
-      const action = emotionActionMap[msg.emotion]
+      const action = msg.action || emotionActionMap[msg.emotion]
       if (msg.text) {
-        // 回复消息：表情和动作同时触发（文字出现1s后由TextBubble延迟调用）
         sceneRef.current.setEmotionWithReset(msg.emotion, msg.emotionDuration ?? 5000, msg.emotionIntensity)
         if (action) sceneRef.current.playAction(action)
       } else {
-        // 思考阶段：hold 动作，10s 后自动 reset
         sceneRef.current.setEmotionWithReset(msg.emotion, msg.emotionDuration ?? 10000, msg.emotionIntensity)
         if (action) sceneRef.current.playAction(action, true)
       }
     }
   }, [])
 
-  // ── Idle fidget: random emotion + action every ~60s when idle ──────────────
+  // ── Idle fidget: natural micro-movements when no activity ─────────────────
   const lastActivityRef = useRef(Date.now())
-  // Reset idle timer whenever a VRM message arrives
   const originalHandleVrmMessage = handleVrmMessage
   const handleVrmMessageWithActivity: OnVrmMessage = useCallback((msg) => {
     lastActivityRef.current = Date.now()
@@ -171,84 +140,52 @@ export default function App() {
       'happy', 'sad', 'angry', 'surprised', 'think', 'awkward',
       'question', 'curious', 'neutral', 'love', 'flirty', 'greeting', 'relaxed',
     ]
-    const allActions = [
-      'akimbo', 'playFingers', 'scratchHead', 'stretch',
-      'happy', 'angry', 'greeting', 'excited', 'shy',
-      'point', 'salute', 'angryPump',
+    const idleTimers: Array<{ emotion?: string; action?: string; minIdle: number }> = [
+      // Emotion-only (subtle facial changes, no body action)
+      { emotion: 'think',   minIdle: 8 },
+      { emotion: 'curious', minIdle: 12 },
+      { emotion: 'relaxed', minIdle: 15 },
+      { emotion: 'happy',   minIdle: 20 },
+      // Small body actions (no strong emotion)
+      { action: 'stretch',       minIdle: 25 },
+      { action: 'scratchHead',   minIdle: 10 },
+      { action: 'playFingers',   minIdle: 15 },
+      { action: 'akimbo',        minIdle: 30 },
+      // Combined emotion + action
+      { emotion: 'think',   action: 'scratchHead', minIdle: 18 },
+      { emotion: 'relaxed', action: 'akimbo',      minIdle: 35 },
+      { emotion: 'curious', action: 'point',       minIdle: 22 },
+      { emotion: 'happy',   action: 'shy',         minIdle: 28 },
+      { emotion: 'surprised', action: 'excited',   minIdle: 40 },
     ]
-    const IDLE_THRESHOLD_MS = 30_000
-    const FIDGET_CHECK_MS = 15_000 // check every 15s, randomness inside
+    const IDLE_THRESHOLD_MS = 15_000
+    const FIDGET_CHECK_MS = 8_000
 
     const timer = setInterval(() => {
       const idleMs = Date.now() - lastActivityRef.current
       if (idleMs < IDLE_THRESHOLD_MS) return
-      // 50% chance each check to avoid being too predictable
-      if (Math.random() > 0.5) return
-
-      const emotion = allEmotions[Math.floor(Math.random() * allEmotions.length)]
-      const action = allActions[Math.floor(Math.random() * allActions.length)]
-      const intensity = 0.4 + Math.random() * 0.4 // 0.4–0.8
-      sceneRef.current?.setEmotionWithReset(emotion, 3000 + Math.random() * 2000, intensity)
-      sceneRef.current?.playAction(action)
-      lastActivityRef.current = Date.now() // reset so we don't spam
-    }, FIDGET_CHECK_MS)
-
-    return () => clearInterval(timer)
-  }, [])
-
-  // ── Dancing mood boost: +1 every 30s ─────────
-  useEffect(() => {
-    if (!dancing) return
-    const timer = setInterval(() => {
-      fetch(`${FRIEND_API}/mood/adjust`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ delta: 1, max: 90 }),
-      }).catch(() => {})
-    }, 30_000)
-    return () => clearInterval(timer)
-  }, [dancing])
+      if (Math.random() > 0.55) return
 
-  // ── Screen observation: capture desktop & send to LLM periodically ─────────
-  useEffect(() => {
-    if (!screenObserve) return
-    const intervalMs = screenObserveInterval * 1000
-
-    const doObserve = () => {
-      fetch(`${FRIEND_API}/screen/observe`, { method: 'POST' })
-        .catch(() => {})
-    }
+      // Pick a weighted-random fidget based on how long we've been idle
+      const candidates = idleTimers.filter((t) => idleMs >= t.minIdle * 1000)
+      if (candidates.length === 0) return
+      const pick = candidates[Math.floor(Math.random() * candidates.length)]
 
-    const timer = setInterval(doObserve, intervalMs)
-    // Also fire once immediately on enable
-    doObserve()
+      if (pick.emotion) {
+        const intensity = 0.3 + Math.random() * 0.5
+        const duration = 2000 + Math.random() * 3000
+        sceneRef.current?.setEmotionWithReset(pick.emotion, duration, intensity)
+      }
+      if (pick.action) {
+        sceneRef.current?.playAction(pick.action)
+      }
+      lastActivityRef.current = Date.now()
+    }, FIDGET_CHECK_MS)
 
     return () => clearInterval(timer)
-  }, [screenObserve, screenObserveInterval])
-
-  // Capture VRM screenshot and upload to server (debounced to avoid duplicates)
-  const screenshotTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const uploadVrmScreenshot = useCallback(() => {
-    if (screenshotTimer.current) clearTimeout(screenshotTimer.current)
-    screenshotTimer.current = setTimeout(() => {
-      screenshotTimer.current = null
-      const dataUrl = sceneRef.current?.captureScreenshot()
-      if (!dataUrl) return
-      fetch(`${FRIEND_API}/persona/screenshot`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ image: dataUrl }),
-      }).catch(() => {})
-    }, 500)
   }, [])
 
-  const clearContext = async () => {
-    try {
-      await fetch(`${FRIEND_API}/context/clear`, { method: 'POST' })
-    } catch { /* ignore */ }
-  }
-
-  // 全局快捷键: Tab 展开/折叠菜单
+  // 全局快捷键
   useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return
@@ -269,91 +206,7 @@ export default function App() {
     return () => window.removeEventListener('keydown', onKeyDown)
   }, [])
 
-  // ── Touch interaction: immediate reaction + verbal response ──────────
-  // Each region has multiple possible reactions, randomly selected (from lobe-vidol female defaults)
-  const touchReactions: Record<TouchRegion, { emotion: string; action?: string }[]> = {
-    head: [
-      { emotion: 'relaxed', action: 'happy' },
-      { emotion: 'relaxed', action: 'shy' },
-      { emotion: 'relaxed', action: 'happy' },
-      { emotion: 'relaxed', action: 'shy' },
-      { emotion: 'angry', action: 'angryPump' },
-      { emotion: 'relaxed', action: 'excited' },
-    ],
-    arm: [
-      { emotion: 'surprised', action: 'excited' },
-      { emotion: 'happy', action: 'happy' },
-      { emotion: 'relaxed', action: 'greeting' },
-      { emotion: 'relaxed', action: 'salute' },
-      { emotion: 'relaxed', action: 'akimbo' },
-    ],
-    chest: [
-      { emotion: 'angry', action: 'angryPump' },
-      { emotion: 'angry', action: 'angry' },
-      { emotion: 'angry', action: 'point' },
-    ],
-    belly: [
-      { emotion: 'angry', action: 'angryPump' },
-      { emotion: 'angry', action: 'angry' },
-      { emotion: 'awkward', action: 'playFingers' },
-      { emotion: 'angry', action: 'akimbo' },
-    ],
-    buttocks: [
-      { emotion: 'angry', action: 'angryPump' },
-      { emotion: 'angry', action: 'point' },
-      { emotion: 'sad', action: 'shy' },
-    ],
-    leg: [
-      { emotion: 'sad', action: 'shy' },
-      { emotion: 'angry', action: 'angry' },
-      { emotion: 'angry', action: 'point' },
-      { emotion: 'angry', action: 'angryPump' },
-      { emotion: 'awkward', action: 'playFingers' },
-    ],
-  }
-
-  const regionLabels: Record<TouchRegion, string> = language === 'en'
-    ? { head: 'head', arm: 'arm', chest: 'chest', belly: 'belly', buttocks: 'buttocks', leg: 'leg' }
-    : { head: '头', arm: '手臂', chest: '胸', belly: '肚子', buttocks: '屁股', leg: '腿' }
-
-  const handleTouch = useCallback((region: TouchRegion) => {
-    const reactions = touchReactions[region]
-    if (!reactions?.length) return
-    const visual = reactions[Math.floor(Math.random() * reactions.length)]
-
-    // Immediate visual feedback (always)
-    lastActivityRef.current = Date.now()
-    sceneRef.current?.setEmotionWithReset(visual.emotion, 3000, 0.8)
-    if (visual.action) sceneRef.current?.playAction(visual.action)
-
-    const now = Date.now()
-    const prompt = language === 'en'
-      ? `[The user touched your ${regionLabels[region]}]`
-      : `[用户摸了摸你的${regionLabels[region]}]`
-
-    // Always write to session history (3s cooldown)
-    if (now - lastTouchMemoTime > TOUCH_MEMO_COOLDOWN) {
-      lastTouchMemoTime = now
-      fetch(`${FRIEND_API}/session/memo`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ text: prompt }),
-      }).catch(() => {})
-    }
-
-    // Send to backend for verbal response (60s cooldown, 50% chance)
-    if (now - lastTouchChatTime > TOUCH_CHAT_COOLDOWN && Math.random() < 0.5) {
-      lastTouchChatTime = now
-      fetch(`${FRIEND_API}/touch`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ region, prompt }),
-      }).catch(() => {})
-    }
-  }, [])
-
   const togglePin = async () => {
-    // Window pinning not available in web mode
     setPinned((v) => !v)
   }
 
@@ -368,20 +221,14 @@ export default function App() {
       }}
     >
       <ResizeHandles />
-      <VRMScene ref={sceneRef} modelPath={modelPath} onTouch={handleTouch} onModelLoaded={uploadVrmScreenshot} />
-      {!hideMood && <MoodIndicator uiAlign={uiAlign} />}
+      <VRMScene ref={sceneRef} modelPath={modelPath} />
       <TextBubble onMessage={handleVrmMessageWithActivity} enabled={showText} ttsEnabled={ttsEnabled} />
-      {!hideUI && <ChatInput uiAlign={uiAlign} onHistoryOpen={() => setHistoryOpen(true)} onNewSession={clearContext} language={language} sttProvider={sttProvider} />}
-      <HistoryPanel
-        visible={historyOpen}
-        onClose={() => setHistoryOpen(false)}
-        language={language}
-      />
+      {!hideUI && <ChatInput uiAlign={uiAlign} language={language} sttProvider={sttProvider} />}
       <SettingsPanel
         visible={settingsOpen}
         onClose={() => setSettingsOpen(false)}
         currentModel={modelPath}
-        onModelChange={(m) => { setModelPath(m); setDancing(false); saveSettings({ modelPath: m }) }}
+        onModelChange={(m) => { setModelPath(m); saveSettings({ modelPath: m }) }}
         hideUI={hideUI}
         onHideUIChange={(v) => { setHideUI(v); saveSettings({ hideUI: v }) }}
         showText={showText}
@@ -394,23 +241,10 @@ export default function App() {
         onVolumeChange={handleVolumeChange}
         uiAlign={uiAlign}
         onUiAlignChange={(v) => { setUiAlign(v); saveSettings({ uiAlign: v }) }}
-        hideMood={hideMood}
-        onHideMoodChange={(v) => { setHideMood(v); saveSettings({ hideMood: v }) }}
-        screenObserve={screenObserve}
-        onScreenObserveChange={(v) => { setScreenObserve(v); saveSettings({ screenObserve: v }) }}
-        screenObserveInterval={screenObserveInterval}
-        onScreenObserveIntervalChange={(v) => { setScreenObserveInterval(v); saveSettings({ screenObserveInterval: v }) }}
-        captureVrmScreenshot={() => sceneRef.current?.captureScreenshot() ?? null}
         language={language}
         onLanguageChange={(v) => { setLanguage(v); saveSettings({ language: v }) }}
         sttProvider={sttProvider}
         onSttProviderChange={(v) => { setSttProvider(v); saveSettings({ sttProvider: v }) }}
-        currentDance={currentDance}
-        onDanceChange={(id, preset) => {
-          setCurrentDance(id)
-          setCustomDancePreset(preset)
-          saveSettings({ currentDance: id, customDancePreset: preset })
-        }}
       />
       {!hideUI && <div
         style={{
@@ -506,37 +340,6 @@ export default function App() {
           >
             <Rotate3D size={16} />
           </button>
-          <button
-            onClick={() => {
-              if (dancing) {
-                sceneRef.current?.reset()
-                setDancing(false)
-              } else {
-                const label = currentDance.startsWith('custom:') && customDancePreset
-                  ? customDancePreset.label
-                  : dancePresets[currentDance]?.label ?? currentDance
-                if (currentDance.startsWith('custom:') && customDancePreset) {
-                  sceneRef.current?.playDance(customDancePreset)
-                } else {
-                  sceneRef.current?.playDance(currentDance)
-                }
-                setDancing(true)
-                // Record dance event in session history (no LLM reply)
-                fetch(`${FRIEND_API}/session/memo`, {
-                  method: 'POST',
-                  headers: { 'Content-Type': 'application/json' },
-                  body: JSON.stringify({ text: `[用户邀请你跳了一支舞:${label}]` }),
-                }).catch(() => {})
-              }
-            }}
-            style={{
-              ...btnStyle,
-              ...(dancing ? { background: 'rgba(34, 197, 94, 0.6)' } : {}),
-            }}
-            title={dancing ? t('停止跳舞', 'Stop Dance') : t('跳舞', 'Dance')}
-          >
-            <Music size={16} />
-          </button>
         </>}
       </div>}
     </div>

src/components/friend/frontend/components/ChatInput.tsx

@@ -1,198 +1,72 @@
 import { useState, useRef, useCallback, useEffect } from 'react'
-import { MessageCircle, Send, Loader, Mic, ChevronDown, History, SquarePen, Plus, Phone, PhoneOff } from 'lucide-react'
+import { Phone, PhoneOff, Mic } from 'lucide-react'
 import { FRIEND_API } from '../api'
 import { useServerStt, type SttProvider } from '../hooks/useServerStt'
 
-// Keyframes (claw-input-slide-up, claw-input-slide-down, claw-pulse) are in index.html <style>
-
-export function ChatInput({ visible = true, onActiveChange, uiAlign = 'right', onHistoryOpen, onNewSession, language = 'zh', sttProvider = 'browser' }: { visible?: boolean; onActiveChange?: (hasText: boolean) => void; uiAlign?: 'left' | 'right'; onHistoryOpen?: () => void; onNewSession?: () => void; language?: 'zh' | 'en'; sttProvider?: SttProvider }) {
+export function ChatInput({ uiAlign = 'right', language = 'zh', sttProvider = 'browser' }: { uiAlign?: 'left' | 'right'; language?: 'zh' | 'en'; sttProvider?: SttProvider }) {
   const t = (zh: string, en: string) => language === 'en' ? en : zh
-  const [open, setOpen] = useState(false)
+  const [voiceCallActive, setVoiceCallActive] = useState(false)
   const [text, setText] = useState('')
-  const [sending, setSending] = useState(false)
   const [recording, setRecording] = useState(false)
-  const [closing, setClosing] = useState(false)
-  const [menuOpen, setMenuOpen] = useState(false)
-  const [voiceCallActive, setVoiceCallActive] = useState(false)
-  const inputRef = useRef<HTMLInputElement>(null)
   const voiceCallActiveRef = useRef(false)
-  const endVoiceCallRef = useRef<() => void>(() => {})
   const serverStt = useServerStt()
-
-  const closeBar = useCallback(() => {
-    if (closing) return
-    setMenuOpen(false)
-    setClosing(true)
-    setTimeout(() => { setOpen(false); setClosing(false) }, 220)
-  }, [closing])
-
-  const send = useCallback(async (msg?: string) => {
-    const finalMsg = (msg ?? text).trim()
-    if (!finalMsg || sending) return
-    setSending(true)
-    setText('')
-    onActiveChange?.(false)
-    try {
-      await fetch(`${FRIEND_API}/chat`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ message: finalMsg }),
-      })
-    } catch (err) {
-      console.error('Failed to send message:', err)
-    } finally {
-      setSending(false)
-    }
-  }, [text, sending])
-
-  const startRecording = useCallback(async () => {
-    // All voice capture is server-side via cpal (no getUserMedia needed)
-    try {
-      await serverStt.startPushToTalk(sttProvider, language === 'en' ? 'en' : 'zh')
-      setRecording(true)
-      setOpen(true)
-    } catch (err) {
-      console.error('Server STT start error:', err)
-      setRecording(false)
-    }
-  }, [sttProvider, serverStt, language])
-
-  const stopRecording = useCallback(async () => {
-    if (sttProvider === 'browser') {
-      // Browser STT may not be available, just stop
-      setRecording(false)
-      return
-    }
-    setRecording(false)
-    try {
-      const text = await serverStt.stopPushToTalk()
-      setText(text)
-      onActiveChange?.(text.length > 0)
-    } catch (err) {
-      console.error('Server STT stop error:', err)
-    }
-  }, [serverStt, sttProvider, onActiveChange])
-
-  const handleMouseLeave = useCallback(() => {
-    if (recording) stopRecording()
-  }, [recording, stopRecording])
-
-  // --- Voice Call: delayed TTS interrupt ---
-  const interruptTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const scheduleInterrupt = useCallback(() => {
-    if (interruptTimerRef.current) return
-    interruptTimerRef.current = setTimeout(() => {
-      interruptTimerRef.current = null
-      ;(window as any).__clawInterruptAudio?.()
-    }, 1000)
-  }, [])
-  const cancelInterrupt = useCallback(() => {
-    if (interruptTimerRef.current) { clearTimeout(interruptTimerRef.current); interruptTimerRef.current = null }
-  }, [])
-
-  // Voice call display timer — clear text after 3s
   const displayTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
-  // --- Voice Call: start (browser VAD with @ricky0123/vad-web) ---
+  // --- Voice Call ---
   const startVoiceCall = useCallback(async () => {
     setVoiceCallActive(true)
     voiceCallActiveRef.current = true
     setText('')
-    setOpen(true)
 
     serverStt.startStreaming(
       sttProvider,
-      (text, _isFinal) => {
-        // Server-side transcribeAudioSegment() already calls sendText()
-        // to enqueue the message into the CLI conversation.
-        // We only need to display the transcript in the input bar briefly.
-        if (text.trim()) {
-          setText(text)
-          onActiveChange?.(true)
-          // Auto-clear after 3s
+      (partialText, _isFinal) => {
+        if (partialText.trim()) {
+          setText(partialText)
           if (displayTimerRef.current) clearTimeout(displayTimerRef.current)
           displayTimerRef.current = setTimeout(() => {
             if (voiceCallActiveRef.current) {
               setText('')
-              onActiveChange?.(false)
             }
           }, 3000)
         }
       },
       (err) => {
-        console.error('Browser VAD error:', err)
+        console.error('Voice call error:', err)
         if (voiceCallActiveRef.current) {
-          setText(`语音启动失败: ${err}`)
+          setText(`\u8bed\u97f3\u542f\u52a8\u5931\u8d25: ${err}`)
           setTimeout(() => {
             setText('')
-            endVoiceCallRef.current()
+            endVoiceCall()
           }, 3000)
         }
       },
       language === 'en' ? 'en' : 'zh',
     )
     setRecording(true)
-  }, [sttProvider, serverStt, language, onActiveChange])
+  }, [sttProvider, serverStt, language])
 
-  // --- Voice Call: end ---
   const endVoiceCall = useCallback(async () => {
-    if (!voiceCallActiveRef.current) return // guard against double-invocation
+    if (!voiceCallActiveRef.current) return
     voiceCallActiveRef.current = false
     setVoiceCallActive(false)
     setRecording(false)
-
-    // Stop VAD and clean up
     const finalText = await serverStt.stopStreaming()
-
-    // Send any remaining transcript (no-op if empty — segments were already
-    // sent to CLI by transcribeAudioSegment() during the call).
     if (finalText.trim()) {
-      send(finalText)
+      // Send text via chat endpoint
+      fetch(`${FRIEND_API}/chat`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: finalText }),
+      }).catch(() => {})
     }
-
-    cancelInterrupt()
-
     setText('')
-    setOpen(false)
-    onActiveChange?.(false)
-  }, [onActiveChange, cancelInterrupt, serverStt, send])
-
-  endVoiceCallRef.current = endVoiceCall
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault()
-      send()
-    }
-    if (e.key === 'Escape') {
-      closeBar()
-    }
-    if ((e.key === 'Delete') || (e.key === 'd' && e.ctrlKey)) {
-      e.preventDefault()
-      setText('')
-      onActiveChange?.(false)
-    }
-  }
+  }, [serverStt])
 
   // Global keyboard shortcuts
   useEffect(() => {
     const onGlobalKeyDown = (e: KeyboardEvent) => {
-      if (!visible) return
-      const inInput = e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement
-
-      if (e.key === 'Enter' && !e.shiftKey && !inInput) {
-        e.preventDefault()
-        if (!open) {
-          setMenuOpen(false)
-          setOpen(true)
-        }
-        setTimeout(() => inputRef.current?.focus(), 50)
-      }
-
-      if (e.key === 'Escape' && open && !inInput) {
-        e.preventDefault()
-        closeBar()
-      }
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return
 
       if (e.key === 'F2') {
         e.preventDefault()
@@ -205,58 +79,25 @@ export function ChatInput({ visible = true, onActiveChange, uiAlign = 'right', o
     }
     window.addEventListener('keydown', onGlobalKeyDown)
     return () => window.removeEventListener('keydown', onGlobalKeyDown)
-  }, [open, visible, voiceCallActive, closeBar, startVoiceCall, endVoiceCall])
+  }, [voiceCallActive, startVoiceCall, endVoiceCall])
 
-  if (!visible) return null
+  // Broadcast recording state for VRM "listening" response
+  useEffect(() => {
+    (window as any).__userRecording = recording
+    return () => { (window as any).__userRecording = false }
+  }, [recording])
 
-  if (!open) {
-    return (
-      <div style={{ position: 'absolute', bottom: 8, ...(uiAlign === 'left' ? { left: 12 } : { right: 12 }), zIndex: 300, pointerEvents: 'auto', display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'center' }}>
-        <button
-          onClick={startVoiceCall}
-          style={fabStyle}
-          title={t('语音通话 (F2)', 'Voice Call (F2)')}
-        >
-          <Phone size={16} />
-        </button>
-        <button
-          onClick={() => {
-            setMenuOpen(false)
-            setOpen(true)
-            setTimeout(() => inputRef.current?.focus(), 50)
-          }}
-          style={fabStyle}
-          title={t('发送消息 (Enter)', 'Send Message (Enter)')}
-        >
-          <MessageCircle size={16} />
-        </button>
-      </div>
-    )
-  }
+  // Cleanup display timer
+  useEffect(() => {
+    return () => {
+      if (displayTimerRef.current) clearTimeout(displayTimerRef.current)
+    }
+  }, [])
 
   if (voiceCallActive) {
     return (
       <div style={barStyle}>
         <div style={{ flex: 1, position: 'relative' }}>
-          <button
-            onClick={() => setMenuOpen((v) => !v)}
-            style={{ ...inlineBtnLeft, color: menuOpen ? 'rgba(100, 160, 255, 0.9)' : 'rgba(255, 255, 255, 0.45)' }}
-            title={t('更多', 'More')}
-          >
-            <Plus size={22} />
-          </button>
-          {menuOpen && (
-            <div style={popupMenuStyle}>
-              <button onClick={() => { setMenuOpen(false); onHistoryOpen?.() }} style={popupItemStyle}>
-                <History size={14} />
-                <span>{t('对话历史', 'History')}</span>
-              </button>
-              <button onClick={() => { setMenuOpen(false); onNewSession?.() }} style={popupItemStyle}>
-                <SquarePen size={14} />
-                <span>{t('新会话', 'New Chat')}</span>
-              </button>
-            </div>
-          )}
           <div
             style={{
               ...inputStyle,
@@ -274,8 +115,15 @@ export function ChatInput({ visible = true, onActiveChange, uiAlign = 'right', o
           </div>
           <span
             style={{
-              ...inlineBtnRight,
+              position: 'absolute',
+              top: '50%',
+              transform: 'translateY(-50%)',
               right: 44,
+              width: 32,
+              height: 32,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
               color: recording ? 'rgba(255, 80, 80, 0.9)' : 'rgba(80, 200, 120, 0.9)',
               animation: recording ? 'claw-pulse 0.8s ease-in-out infinite' : 'none',
               transition: 'color 0.2s',
@@ -286,7 +134,23 @@ export function ChatInput({ visible = true, onActiveChange, uiAlign = 'right', o
           </span>
           <button
             onClick={endVoiceCall}
-            style={{ ...inlineBtnRight, right: 12, color: 'rgba(255, 80, 80, 0.9)' }}
+            style={{
+              position: 'absolute',
+              top: '50%',
+              transform: 'translateY(-50%)',
+              right: 12,
+              width: 32,
+              height: 32,
+              border: 'none',
+              borderRadius: 4,
+              background: 'transparent',
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: 0,
+              color: 'rgba(255, 80, 80, 0.9)',
+            }}
             title={t('挂断 (F2)', 'Hang up (F2)')}
           >
             <PhoneOff size={22} />
@@ -297,89 +161,33 @@ export function ChatInput({ visible = true, onActiveChange, uiAlign = 'right', o
   }
 
   return (
-    <>
-    <div
-      key={closing ? 'closing' : 'open'}
-      style={{
-        ...barStyle,
-        animation: closing
-          ? 'claw-input-slide-down 0.2s ease-in forwards'
-          : 'claw-input-slide-up 0.25s ease-out both',
-      }}
-    >
-      <div style={{ flex: 1, position: 'relative' }}>
-        <button
-          onClick={() => setMenuOpen((v) => !v)}
-          style={{ ...inlineBtnLeft, color: menuOpen ? 'rgba(100, 160, 255, 0.9)' : 'rgba(255, 255, 255, 0.45)' }}
-          title={t('更多', 'More')}
-        >
-          <Plus size={22} />
-        </button>
-        {menuOpen && (
-          <div style={popupMenuStyle}>
-            <button onClick={() => { setMenuOpen(false); onHistoryOpen?.() }} style={popupItemStyle}>
-              <History size={14} />
-              <span>{t('对话历史', 'History')}</span>
-            </button>
-            <button onClick={() => { setMenuOpen(false); onNewSession?.() }} style={popupItemStyle}>
-              <SquarePen size={14} />
-              <span>{t('新会话', 'New Chat')}</span>
-            </button>
-          </div>
-        )}
-        <input
-          ref={inputRef}
-          value={text}
-          onChange={(e) => {
-            setText(e.target.value)
-            onActiveChange?.(e.target.value.length > 0)
-          }}
-          onKeyDown={handleKeyDown}
-          placeholder={sending ? t('思考中...', 'Thinking...') : ''}
-          disabled={sending}
-          style={{ ...inputStyle, paddingLeft: 48, paddingRight: 80 }}
-          autoFocus
-        />
-        <button
-          onMouseDown={startRecording}
-          onMouseUp={stopRecording}
-          onMouseLeave={handleMouseLeave}
-          style={{ ...inlineBtnRight, right: 44, color: recording ? 'rgba(255, 80, 80, 0.9)' : 'rgba(255, 255, 255, 0.45)' }}
-          title={t('按住说话', 'Hold to speak')}
-        >
-          <Mic size={22} />
-        </button>
-        <button
-          onClick={() => text.trim() ? send() : closeBar()}
-          disabled={sending}
-          style={{ ...inlineBtnRight, right: 12, color: text.trim() ? 'rgba(100, 160, 255, 0.9)' : 'rgba(255, 255, 255, 0.45)' }}
-          title={text.trim() ? t('发送 (Enter)', 'Send (Enter)') : t('收起 (Esc)', 'Collapse (Esc)')}
-        >
-          {sending ? <Loader size={22} style={{ animation: 'spin 1s linear infinite' }} /> : text.trim() ? <Send size={22} /> : <ChevronDown size={22} />}
-        </button>
-      </div>
+    <div style={{ position: 'absolute', bottom: 8, ...(uiAlign === 'left' ? { left: 12 } : { right: 12 }), zIndex: 300, pointerEvents: 'auto', display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'center' }}>
+      <button
+        onClick={startVoiceCall}
+        style={{
+          width: 32,
+          height: 32,
+          border: 'none',
+          borderRadius: 6,
+          background: 'rgba(125, 125, 125, 0.28)',
+          backdropFilter: 'blur(6px)',
+          color: 'rgba(255, 255, 255, 0.8)',
+          fontSize: 16,
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          zIndex: 300,
+          pointerEvents: 'auto',
+        }}
+        title={t('语音通话 (F2)', 'Voice Call (F2)')}
+      >
+        <Phone size={16} />
+      </button>
     </div>
-    </>
   )
 }
 
-const fabStyle: React.CSSProperties = {
-  width: 32,
-  height: 32,
-  border: 'none',
-  borderRadius: 6,
-  background: 'rgba(125, 125, 125, 0.28)',
-  backdropFilter: 'blur(6px)',
-  color: 'rgba(255, 255, 255, 0.8)',
-  fontSize: 16,
-  cursor: 'pointer',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  zIndex: 300,
-  pointerEvents: 'auto',
-}
-
 const barStyle: React.CSSProperties = {
   position: 'absolute',
   bottom: 16,
@@ -394,7 +202,7 @@ const barStyle: React.CSSProperties = {
 const inputStyle: React.CSSProperties = {
   width: '100%',
   height: 50,
-  boxSizing: 'border-box' as const,
+  boxSizing: 'border-box',
   border: '1px solid rgba(255, 255, 255, 0.2)',
   borderRadius: 25,
   background: 'rgba(0, 0, 0, 0.4)',
@@ -405,70 +213,3 @@ const inputStyle: React.CSSProperties = {
   outline: 'none',
   fontFamily: '"Segoe UI", "Microsoft YaHei", sans-serif',
 }
-
-const inlineBtnLeft: React.CSSProperties = {
-  position: 'absolute',
-  left: 12,
-  top: '50%',
-  transform: 'translateY(-50%)',
-  width: 32,
-  height: 32,
-  border: 'none',
-  borderRadius: 4,
-  background: 'transparent',
-  cursor: 'pointer',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  padding: 0,
-  zIndex: 2,
-}
-
-const inlineBtnRight: React.CSSProperties = {
-  position: 'absolute',
-  top: '50%',
-  transform: 'translateY(-50%)',
-  width: 32,
-  height: 32,
-  border: 'none',
-  borderRadius: 4,
-  background: 'transparent',
-  cursor: 'pointer',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  padding: 0,
-  zIndex: 1,
-}
-
-const popupMenuStyle: React.CSSProperties = {
-  position: 'absolute',
-  left: 4,
-  bottom: '100%',
-  marginBottom: 6,
-  background: 'rgba(30, 30, 40, 0.95)',
-  backdropFilter: 'blur(12px)',
-  borderRadius: 10,
-  border: '1px solid rgba(255, 255, 255, 0.15)',
-  boxShadow: '0 4px 16px rgba(0, 0, 0, 0.4)',
-  padding: 4,
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 2,
-  zIndex: 1000,
-}
-
-const popupItemStyle: React.CSSProperties = {
-  display: 'flex',
-  alignItems: 'center',
-  gap: 8,
-  padding: '8px 14px',
-  border: 'none',
-  borderRadius: 8,
-  background: 'transparent',
-  color: 'rgba(255, 255, 255, 0.8)',
-  fontSize: 13,
-  cursor: 'pointer',
-  whiteSpace: 'nowrap',
-  fontFamily: '"Segoe UI", "Microsoft YaHei", sans-serif',
-}

src/components/friend/frontend/components/HistoryPanel.tsx

@@ -1,177 +0,0 @@
-import { useState, useEffect, useRef, useCallback } from 'react'
-import { X } from 'lucide-react'
-import { FRIEND_API } from '../api'
-
-interface HistoryMessage {
-  role: string
-  content: string
-  timestamp?: number
-}
-
-interface HistoryPanelProps {
-  visible: boolean
-  onClose: () => void
-  language?: 'zh' | 'en'
-}
-
-export function HistoryPanel({ visible, onClose, language = 'zh' }: HistoryPanelProps) {
-  const t = (zh: string, en: string) => language === 'en' ? en : zh
-  const [messages, setMessages] = useState<HistoryMessage[]>([])
-  const [agentName, setAgentName] = useState('')
-  const [loading, setLoading] = useState(false)
-  const scrollRef = useRef<HTMLDivElement>(null)
-
-  // Drag state
-  const [panelPos, setPanelPos] = useState<{ x: number; y: number }>({ x: 0, y: 0 })
-  const dragRef = useRef<{ dragging: boolean; startX: number; startY: number; origX: number; origY: number }>({
-    dragging: false, startX: 0, startY: 0, origX: 0, origY: 0,
-  })
-
-  const onDragStart = useCallback((e: React.MouseEvent) => {
-    dragRef.current = { dragging: true, startX: e.clientX, startY: e.clientY, origX: panelPos.x, origY: panelPos.y }
-    const onMove = (ev: MouseEvent) => {
-      if (!dragRef.current.dragging) return
-      setPanelPos({
-        x: dragRef.current.origX + ev.clientX - dragRef.current.startX,
-        y: dragRef.current.origY + ev.clientY - dragRef.current.startY,
-      })
-    }
-    const onUp = () => {
-      dragRef.current.dragging = false
-      window.removeEventListener('mousemove', onMove)
-      window.removeEventListener('mouseup', onUp)
-    }
-    window.addEventListener('mousemove', onMove)
-    window.addEventListener('mouseup', onUp)
-  }, [panelPos])
-
-  useEffect(() => {
-    if (visible) setPanelPos({ x: 0, y: 0 })
-  }, [visible])
-
-  // Fetch history when panel opens
-  useEffect(() => {
-    if (!visible) return
-    setLoading(true)
-    fetch(`${FRIEND_API}/history`)
-      .then((r) => r.json())
-      .then((data) => {
-        setMessages(data.messages || [])
-        if (data.agentName) setAgentName(data.agentName)
-        setTimeout(() => {
-          if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight
-        }, 50)
-      })
-      .catch(() => setMessages([]))
-      .finally(() => setLoading(false))
-  }, [visible])
-
-  if (!visible) return null
-
-  return (
-    <div style={overlayStyle} data-no-passthrough onClick={onClose}>
-      <div style={{ ...panelStyle, transform: `translate(${panelPos.x}px, ${panelPos.y}px)` }} data-no-passthrough onClick={(e) => e.stopPropagation()}>
-        <div style={headerStyle} onMouseDown={onDragStart}>
-          <span style={{ fontSize: 16, fontWeight: 600, cursor: 'grab' }}>{t('对话历史', 'Chat History')}</span>
-          <button onClick={onClose} style={closeBtnStyle}>
-            <X size={16} />
-          </button>
-        </div>
-
-        <div ref={scrollRef} style={messagesContainerStyle}>
-          {loading && (
-            <div style={{ textAlign: 'center', color: 'rgba(255,255,255,0.4)', padding: 20 }}>{t('加载中...', 'Loading...')}</div>
-          )}
-          {!loading && messages.length === 0 && (
-            <div style={{ textAlign: 'center', color: 'rgba(255,255,255,0.4)', padding: 20 }}>{t('暂无对话记录', 'No chat history')}</div>
-          )}
-          {messages.map((msg, i) => (
-            <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: msg.role === 'user' ? 'flex-end' : 'flex-start' }}>
-              <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.35)', marginBottom: 2 }}>
-                {msg.role === 'user' ? t('你', 'You') : (agentName || 'AI')}
-              </div>
-              <div style={{
-                ...bubbleStyle,
-                background: msg.role === 'user' ? 'rgba(100, 160, 255, 0.3)' : 'rgba(255, 255, 255, 0.08)',
-                borderColor: msg.role === 'user' ? 'rgba(100, 160, 255, 0.4)' : 'rgba(255, 255, 255, 0.12)',
-              }}>
-                {msg.content}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-const overlayStyle: React.CSSProperties = {
-  position: 'fixed',
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  background: 'rgba(0, 0, 0, 0.5)',
-  zIndex: 1000,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  pointerEvents: 'auto',
-}
-
-const panelStyle: React.CSSProperties = {
-  width: 360,
-  maxHeight: '80vh',
-  background: 'rgba(30, 30, 40, 0.95)',
-  backdropFilter: 'blur(12px)',
-  borderRadius: 12,
-  border: '1px solid rgba(255, 255, 255, 0.15)',
-  boxShadow: '0 8px 32px rgba(0, 0, 0, 0.5)',
-  padding: 16,
-  color: '#fff',
-  fontFamily: '"Segoe UI", "Microsoft YaHei", sans-serif',
-  display: 'flex',
-  flexDirection: 'column',
-}
-
-const headerStyle: React.CSSProperties = {
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  marginBottom: 12,
-  cursor: 'grab',
-  userSelect: 'none',
-}
-
-const closeBtnStyle: React.CSSProperties = {
-  width: 28,
-  height: 28,
-  border: 'none',
-  borderRadius: 6,
-  background: 'rgba(255, 255, 255, 0.1)',
-  color: 'rgba(255, 255, 255, 0.7)',
-  cursor: 'pointer',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-}
-
-const messagesContainerStyle: React.CSSProperties = {
-  flex: 1,
-  overflowY: 'auto',
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 12,
-  maxHeight: 'calc(80vh - 60px)',
-}
-
-const bubbleStyle: React.CSSProperties = {
-  maxWidth: '85%',
-  padding: '8px 12px',
-  borderRadius: 10,
-  border: '1px solid',
-  fontSize: 13,
-  lineHeight: 1.5,
-  wordBreak: 'break-word',
-  whiteSpace: 'pre-wrap',
-}

src/components/friend/frontend/components/MoodIndicator.tsx

@@ -1,372 +0,0 @@
-import { FRIEND_API } from '../api'
-import { useState, useEffect, useRef, useCallback } from 'react'
-
-interface MoodBubble {
-  id: number
-  delta: number
-}
-
-interface MoodIndicatorProps {
-  uiAlign?: 'left' | 'right'
-}
-
-const BAR_WIDTH = 10
-const BAR_HEIGHT = 120
-const BORDER_GAP = 4      // gap between bar and border
-const BORDER_WIDTH = 2    // border stroke thickness
-const HEART_SIZE = 23
-const DPR = typeof window !== 'undefined' ? (window.devicePixelRatio || 1) : 1
-
-// Wave parameters (ported from Android HorizontalWaveProgressView)
-const WAVE_LENGTH = 8
-const WAVE_HEIGHT = 2.5
-
-// 5 tiers: 90+ pink, 70+ orange, 50+ green, 30+ blue, 0+ grey
-function moodRGB(percent: number): [number, number, number] {
-  if (percent >= 90) return [255, 107, 157]
-  if (percent >= 70) return [255, 165, 70]
-  if (percent >= 50) return [72, 199, 142]
-  if (percent >= 30) return [78, 168, 222]
-  return [160, 168, 180]
-}
-
-/** Rounded-rect path helper */
-function roundedRectPath(ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number) {
-  ctx.beginPath()
-  ctx.moveTo(x + r, y)
-  ctx.lineTo(x + w - r, y)
-  ctx.arc(x + w - r, y + r, r, -Math.PI / 2, 0)
-  ctx.lineTo(x + w, y + h - r)
-  ctx.arc(x + w - r, y + h - r, r, 0, Math.PI / 2)
-  ctx.lineTo(x + r, y + h)
-  ctx.arc(x + r, y + h - r, r, Math.PI / 2, Math.PI)
-  ctx.lineTo(x, y + r)
-  ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
-  ctx.closePath()
-}
-
-/** Heart path centered at (cx, cy) with given size — classic round heart */
-function heartPath(ctx: CanvasRenderingContext2D, cx: number, cy: number, size: number) {
-  const r = size * 0.45
-  const topY = cy - r * 0.4
-  ctx.beginPath()
-  // Bottom tip (rounded)
-  ctx.moveTo(cx, cy + r * 0.85)
-  // Left curve
-  ctx.bezierCurveTo(cx - r * 0.5, cy + r * 0.6, cx - r * 1.1, cy + r * 0.1, cx - r, topY)
-  // Left bump (arc)
-  ctx.arc(cx - r * 0.5, topY, r * 0.5, Math.PI, 0, false)
-  // Right bump (arc)
-  ctx.arc(cx + r * 0.5, topY, r * 0.5, Math.PI, 0, false)
-  // Right curve
-  ctx.bezierCurveTo(cx + r * 1.1, cy + r * 0.1, cx + r * 0.5, cy + r * 0.6, cx, cy + r * 0.85)
-  ctx.closePath()
-}
-
-/**
- * Common wave drawing logic used by both the bar and the heart.
- * Draws dual bezier waves inside the current clip region.
- */
-function drawWaves(
-  ctx: CanvasRenderingContext2D,
-  regionWidth: number,
-  regionHeight: number,
-  waterY: number,
-  moveDistance: number,
-  cr: number, cg: number, cb: number,
-) {
-  const fullCycle = WAVE_LENGTH * 2
-  const waveNumber = Math.ceil(regionWidth / fullCycle) + 2
-
-  const drawWave = (scrollDir: number, alpha: number) => {
-    ctx.beginPath()
-    const offset = (moveDistance * scrollDir) % fullCycle
-    let x = -fullCycle + offset
-    ctx.moveTo(x, waterY)
-
-    for (let i = 0; i < waveNumber * 2; i++) {
-      ctx.quadraticCurveTo(x + WAVE_LENGTH / 2, waterY - WAVE_HEIGHT, x + WAVE_LENGTH, waterY)
-      x += WAVE_LENGTH
-      ctx.quadraticCurveTo(x + WAVE_LENGTH / 2, waterY + WAVE_HEIGHT, x + WAVE_LENGTH, waterY)
-      x += WAVE_LENGTH
-    }
-
-    ctx.lineTo(x, regionHeight)
-    ctx.lineTo(-fullCycle, regionHeight)
-    ctx.closePath()
-    ctx.fillStyle = `rgba(${cr},${cg},${cb},${alpha})`
-    ctx.fill()
-  }
-
-  drawWave(-1, 0.55)
-  drawWave(1, 1.0)
-}
-
-/**
- * Draw the vertical liquid-filled bar with border that has a gap.
- */
-function drawLiquidBar(
-  ctx: CanvasRenderingContext2D,
-  w: number,
-  h: number,
-  percent: number,
-  moveDistance: number,
-) {
-  const radius = w / 2
-  const totalW = w + (BORDER_GAP + BORDER_WIDTH) * 2
-  const totalH = h + (BORDER_GAP + BORDER_WIDTH) * 2
-  const offsetX = BORDER_GAP + BORDER_WIDTH
-  const offsetY = BORDER_GAP + BORDER_WIDTH
-
-  ctx.clearRect(0, 0, totalW, totalH)
-
-  const waterY = h * (1 - percent / 100)
-  const [cr, cg, cb] = moodRGB(percent)
-
-  // ── Bar fill ──
-  ctx.save()
-  roundedRectPath(ctx, offsetX, offsetY, w, h, radius)
-  ctx.clip()
-
-  ctx.clearRect(offsetX, offsetY, w, h)
-
-  ctx.save()
-  ctx.translate(offsetX, offsetY)
-  drawWaves(ctx, w, h, waterY, moveDistance, cr, cg, cb)
-  ctx.restore()
-
-  ctx.restore()
-
-  // ── Border with gap ──
-  const bx = offsetX - BORDER_GAP - BORDER_WIDTH / 2
-  const by = offsetY - BORDER_GAP - BORDER_WIDTH / 2
-  const bw = w + (BORDER_GAP + BORDER_WIDTH / 2) * 2
-  const bh = h + (BORDER_GAP + BORDER_WIDTH / 2) * 2
-  const br = radius + BORDER_GAP + BORDER_WIDTH / 2
-  roundedRectPath(ctx, bx, by, bw, bh, br)
-  ctx.strokeStyle = 'rgba(80, 80, 85, 0.75)'
-  ctx.lineWidth = BORDER_WIDTH
-  ctx.stroke()
-}
-
-/**
- * Draw liquid-filled heart icon with border and gap (matching bar style).
- */
-function drawLiquidHeart(
-  ctx: CanvasRenderingContext2D,
-  size: number,
-  percent: number,
-  moveDistance: number,
-) {
-  ctx.clearRect(0, 0, size, size)
-
-  const cx = size / 2
-  const cy = size / 2
-  const waterY = size * (1 - percent / 100)
-  const [cr, cg, cb] = moodRGB(percent)
-
-  // ── Heart fill ──
-  ctx.save()
-  heartPath(ctx, cx, cy, size)
-  ctx.clip()
-
-  ctx.fillStyle = 'rgba(60, 60, 65, 0.9)'
-  ctx.fillRect(0, 0, size, size)
-
-  drawWaves(ctx, size, size, waterY, moveDistance, cr, cg, cb)
-
-  ctx.restore()
-}
-
-let bubbleIdCounter = 0
-
-// Canvas total dimensions (bar + border gap)
-const BAR_CANVAS_W = BAR_WIDTH + (BORDER_GAP + BORDER_WIDTH) * 2
-const BAR_CANVAS_H = BAR_HEIGHT + (BORDER_GAP + BORDER_WIDTH) * 2
-
-export function MoodIndicator({ uiAlign = 'right' }: MoodIndicatorProps) {
-  const [mood, setMood] = useState(60)
-  const [bubbles, setBubbles] = useState<MoodBubble[]>([])
-  const [visible, setVisible] = useState(false)
-  const [dragging, setDragging] = useState(false)
-  const defaultX = (align: string) => align === 'left' ? window.innerWidth - 20 - BAR_CANVAS_W : 20
-  const [pos, setPos] = useState<{ x: number; y: number }>({ x: defaultX(uiAlign), y: 20 })
-  const [userDragged, setUserDragged] = useState(false)
-  const hideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const containerRef = useRef<HTMLDivElement>(null)
-  const barCanvasRef = useRef<HTMLCanvasElement>(null)
-  const heartCanvasRef = useRef<HTMLCanvasElement>(null)
-  const animRef = useRef<number>(0)
-  const displayPercentRef = useRef(60)
-  const moveDistRef = useRef(0)
-
-  useEffect(() => {
-    if (!userDragged) setPos(p => ({ ...p, x: defaultX(uiAlign) }))
-  }, [uiAlign, userDragged])
-
-  useEffect(() => {
-    fetch(`${FRIEND_API}/settings`)
-      .then((r) => r.json())
-      .then((s) => { if (s.moodIndex !== undefined) { setMood(s.moodIndex); displayPercentRef.current = s.moodIndex } })
-      .catch(() => {})
-  }, [])
-
-  const showBriefly = useCallback(() => {
-    setVisible(true)
-    if (hideTimerRef.current) clearTimeout(hideTimerRef.current)
-    hideTimerRef.current = setTimeout(() => setVisible(false), 5000)
-  }, [])
-
-  useEffect(() => {
-    const es = new EventSource(`${FRIEND_API}/events`)
-    es.onmessage = (e) => {
-      try {
-        const data = JSON.parse(e.data)
-        if (data.moodIndex !== undefined && data.moodDelta !== undefined) {
-          setMood(data.moodIndex)
-          showBriefly()
-          const id = ++bubbleIdCounter
-          setBubbles((prev) => [...prev, { id, delta: data.moodDelta }])
-          setTimeout(() => setBubbles((prev) => prev.filter((b) => b.id !== id)), 2000)
-        }
-      } catch { /* ignore */ }
-    }
-    return () => es.close()
-  }, [showBriefly])
-
-  // Canvas animation loop — draws both heart and bar
-  useEffect(() => {
-    const barCanvas = barCanvasRef.current
-    const heartCanvas = heartCanvasRef.current
-    if (!barCanvas || !heartCanvas) return
-    const barCtx = barCanvas.getContext('2d')
-    const heartCtx = heartCanvas.getContext('2d')
-    if (!barCtx || !heartCtx) return
-
-    barCanvas.width = BAR_CANVAS_W * DPR
-    barCanvas.height = BAR_CANVAS_H * DPR
-    barCtx.scale(DPR, DPR)
-
-    heartCanvas.width = HEART_SIZE * DPR
-    heartCanvas.height = HEART_SIZE * DPR
-    heartCtx.scale(DPR, DPR)
-
-    let running = true
-    const animate = () => {
-      if (!running) return
-      const target = Math.max(2, mood)
-      displayPercentRef.current += (target - displayPercentRef.current) * 0.08
-      moveDistRef.current += 0.12
-
-      drawLiquidBar(barCtx, BAR_WIDTH, BAR_HEIGHT, displayPercentRef.current, moveDistRef.current)
-      drawLiquidHeart(heartCtx, HEART_SIZE, displayPercentRef.current, moveDistRef.current)
-      animRef.current = requestAnimationFrame(animate)
-    }
-    animate()
-    return () => { running = false; cancelAnimationFrame(animRef.current) }
-  }, [mood])
-
-  const handlePointerDown = useCallback((e: React.PointerEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    setDragging(true)
-    setUserDragged(true)
-    setVisible(true)
-    if (hideTimerRef.current) { clearTimeout(hideTimerRef.current); hideTimerRef.current = null }
-
-    const el = containerRef.current
-    if (!el) return
-    const rect = el.getBoundingClientRect()
-    const offsetX = e.clientX - rect.left
-    const offsetY = e.clientY - rect.top
-
-    const onMove = (ev: PointerEvent) => {
-      setPos({ x: ev.clientX - offsetX, y: ev.clientY - offsetY })
-    }
-    const onUp = () => {
-      setDragging(false)
-      window.removeEventListener('pointermove', onMove)
-      window.removeEventListener('pointerup', onUp)
-      hideTimerRef.current = setTimeout(() => setVisible(false), 3000)
-    }
-    window.addEventListener('pointermove', onMove)
-    window.addEventListener('pointerup', onUp)
-  }, [])
-
-  const handleMouseEnter = useCallback(() => {
-    setVisible(true)
-    if (hideTimerRef.current) { clearTimeout(hideTimerRef.current); hideTimerRef.current = null }
-  }, [])
-
-  const handleMouseLeave = useCallback(() => {
-    if (!dragging) {
-      hideTimerRef.current = setTimeout(() => setVisible(false), 2000)
-    }
-  }, [dragging])
-
-  return (
-    <div
-      ref={containerRef}
-      style={{
-        position: 'absolute',
-        top: pos.y,
-        left: pos.x,
-        zIndex: 250,
-        pointerEvents: 'auto',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        transition: 'opacity 0.5s ease',
-        opacity: visible || bubbles.length > 0 ? 1 : 0.5,
-        cursor: dragging ? 'grabbing' : 'grab',
-        userSelect: 'none',
-      }}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      onPointerDown={handlePointerDown}
-      data-no-passthrough
-    >
-      {/* Liquid-filled heart */}
-      <canvas
-        ref={heartCanvasRef}
-        width={HEART_SIZE * DPR}
-        height={HEART_SIZE * DPR}
-        style={{ width: HEART_SIZE, height: HEART_SIZE, display: 'block', marginBottom: 4 }}
-      />
-
-      {/* Vertical liquid bar with border */}
-      <div style={{ position: 'relative', width: BAR_CANVAS_W, height: BAR_CANVAS_H }}>
-        <canvas
-          ref={barCanvasRef}
-          width={BAR_CANVAS_W * DPR}
-          height={BAR_CANVAS_H * DPR}
-          style={{ width: BAR_CANVAS_W, height: BAR_CANVAS_H, display: 'block' }}
-        />
-        {/* Floating bubbles */}
-        {bubbles.map((b) => (
-          <span
-            key={b.id}
-            style={{
-              position: 'absolute',
-              left: '50%',
-              top: -20,
-              transform: 'translateX(-50%)',
-              fontSize: 14,
-              fontWeight: 800,
-              color: b.delta > 0 ? '#FF6B9D' : '#7EB0D5',
-              whiteSpace: 'nowrap',
-              pointerEvents: 'none',
-              animation: 'mood-bubble-float 2.5s ease-out forwards',
-              fontFamily: '"Segoe UI", "Microsoft YaHei", sans-serif',
-              textShadow: b.delta > 0
-                ? '0 0 6px rgba(255,107,157,0.6), 0 1px 3px rgba(0,0,0,0.4)'
-                : '0 0 6px rgba(126,176,213,0.6), 0 1px 3px rgba(0,0,0,0.4)',
-            }}
-          >
-            {b.delta > 0 ? `❤️+${b.delta}` : `🩶${b.delta}`}
-          </span>
-        ))}
-      </div>
-    </div>
-  )
-}

src/components/friend/frontend/components/SettingsPanel.tsx

@@ -1,16 +1,6 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
-import { X, Play, Loader, Sparkles, Trash2, Upload, Music } from 'lucide-react'
+import { X, Play, Loader } from 'lucide-react'
 import { FRIEND_API } from '../api'
-import { dancePresets, type DancePreset } from '../motion-controller'
-import { pickFile } from '../web-file-picker'
-
-interface DanceItem {
-  id: string
-  label: string
-  vmdUrl: string
-  bgmUrl?: string
-  builtin?: boolean
-}
 
 type SttProvider = 'browser' | 'groq' | 'anthropic' | 'local' | 'doubao'
 
@@ -31,23 +21,13 @@ interface SettingsPanelProps {
   onVolumeChange: (v: number) => void
   uiAlign: 'left' | 'right'
   onUiAlignChange: (v: 'left' | 'right') => void
-  hideMood: boolean
-  onHideMoodChange: (v: boolean) => void
-  screenObserve: boolean
-  onScreenObserveChange: (v: boolean) => void
-  screenObserveInterval: number
-  onScreenObserveIntervalChange: (v: number) => void
-  /** Return a data URL screenshot of the current VRM canvas */
-  captureVrmScreenshot?: () => string | null
   language: 'zh' | 'en'
   onLanguageChange: (v: 'zh' | 'en') => void
-  currentDance: string
-  onDanceChange: (id: string, preset?: DancePreset) => void
   sttProvider?: SttProvider
   onSttProviderChange?: (v: SttProvider) => void
 }
 
-type Tab = 'general' | 'voice' | 'model' | 'persona' | 'dance'
+type Tab = 'general' | 'voice' | 'model'
 
 const BUILTIN_MODELS = ['/friend/model1.vrm', '/friend/model2.vrm', '/friend/model3.vrm', '/friend/model4.vrm', '/friend/model5.vrm']
 
@@ -103,32 +83,18 @@ export function SettingsPanel({
   tracking, onTrackingChange,
   volume, onVolumeChange,
   uiAlign, onUiAlignChange,
-  hideMood, onHideMoodChange,
-  screenObserve, onScreenObserveChange,
-  screenObserveInterval, onScreenObserveIntervalChange,
-  captureVrmScreenshot,
   language, onLanguageChange,
-  currentDance, onDanceChange,
   sttProvider = 'browser', onSttProviderChange,
 }: SettingsPanelProps) {
   const t = (zh: string, en: string) => language === 'en' ? en : zh
 
   const [tab, setTab] = useState<Tab>('general')
-  const [models, setModels] = useState<string[]>([])
-  const [soulContent, setSoulContent] = useState('')
-  const [identityContent, setIdentityContent] = useState('')
-  const [personaDirty, setPersonaDirty] = useState(false)
-  const [personaSaving, setPersonaSaving] = useState(false)
-  const [generating, setGenerating] = useState(false)
   const [currentVoice, setCurrentVoice] = useState('')
   const [currentProvider, setCurrentProvider] = useState<string>('edge')
   const [qwenKey, setQwenKey] = useState('')
   const [qwenModel, setQwenModel] = useState('qwen3-tts-flash')
   const [previewingId, setPreviewingId] = useState<string | null>(null)
   const audioRef = useRef<HTMLAudioElement | null>(null)
-  const [customDances, setCustomDances] = useState<DanceItem[]>([])
-  const [importingDance, setImportingDance] = useState(false)
-
 
   // Drag state
   const [panelPos, setPanelPos] = useState<{ x: number; y: number }>({ x: 0, y: 0 })
@@ -154,18 +120,12 @@ export function SettingsPanel({
     window.addEventListener('mouseup', onUp)
   }, [panelPos])
 
-  // Reset position when panel opens
   useEffect(() => {
     if (visible) setPanelPos({ x: 0, y: 0 })
   }, [visible])
 
   useEffect(() => {
     if (!visible) return
-    fetch(`${FRIEND_API}/model/list`)
-      .then((r) => r.json())
-      .then((data) => { if (data.models) setModels(data.models) })
-      .catch(() => setModels([]))
-    // Fetch current voice + provider
     fetch(`${FRIEND_API}/voice`)
       .then((r) => r.json())
       .then((data) => {
@@ -177,72 +137,6 @@ export function SettingsPanel({
       .catch(() => {})
   }, [visible])
 
-  // Fetch persona files when model tab / persona sub-tab is active
-  useEffect(() => {
-    if (!visible || tab !== 'persona') return
-    fetch(`${FRIEND_API}/persona`)
-      .then((r) => r.json())
-      .then((data) => {
-        setSoulContent(data.soul || '')
-        setIdentityContent(data.identity || '')
-        setPersonaDirty(false)
-      })
-      .catch(() => {})
-  }, [visible, tab])
-
-  const fetchCustomDances = useCallback(() => {
-    fetch(`${FRIEND_API}/dance/list`)
-      .then((r) => r.json())
-      .then((data) => { if (data.dances) setCustomDances(data.dances) })
-      .catch(() => setCustomDances([]))
-  }, [])
-
-  useEffect(() => {
-    if (!visible || tab !== 'dance') return
-    fetchCustomDances()
-  }, [visible, tab, fetchCustomDances])
-
-  const savePersona = useCallback(() => {
-    setPersonaSaving(true)
-    fetch(`${FRIEND_API}/persona`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ soul: soulContent, identity: identityContent }),
-    })
-      .then(() => { setPersonaDirty(false) })
-      .catch(() => {})
-      .finally(() => setPersonaSaving(false))
-  }, [soulContent, identityContent])
-
-  const generatePersona = useCallback(async () => {
-    if (!captureVrmScreenshot) return
-    const dataUrl = captureVrmScreenshot()
-    if (!dataUrl) return
-    setGenerating(true)
-    try {
-      // Save screenshot to server first
-      const saveRes = await fetch(`${FRIEND_API}/persona/screenshot`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ image: dataUrl }),
-      })
-      const saveData = await saveRes.json()
-      if (!saveData.ok) throw new Error(saveData.error || 'save screenshot failed')
-      // Generate persona from saved screenshot
-      const genRes = await fetch(`${FRIEND_API}/persona/generate`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-      })
-      const genData = await genRes.json()
-      if (genData.soul || genData.identity) {
-        if (genData.soul) setSoulContent(genData.soul)
-        if (genData.identity) setIdentityContent(genData.identity)
-        setPersonaDirty(true)
-      }
-    } catch { /* ignore */ }
-    setGenerating(false)
-  }, [captureVrmScreenshot])
-
   const postVoiceSettings = (body: Record<string, string | undefined>) => {
     return fetch(`${FRIEND_API}/voice`, {
       method: 'POST',
@@ -286,7 +180,6 @@ export function SettingsPanel({
   }, [])
 
   const preview = (voiceId: string) => {
-    // Stop any current preview first
     stopPreview()
     setPreviewingId(voiceId)
     fetch(`${FRIEND_API}/preview`, {
@@ -326,13 +219,13 @@ export function SettingsPanel({
 
         {/* Tabs */}
         <div style={tabBarStyle}>
-          {(['general', 'voice', 'model', 'persona', 'dance'] as const).map((tb) => (
+          {(['general', 'voice', 'model'] as const).map((tb) => (
             <button
               key={tb}
               onClick={() => setTab(tb)}
               style={{ ...tabStyle, ...(tab === tb ? activeTabStyle : {}) }}
             >
-              {{ general: t('常规', 'General'), voice: t('语音', 'Voice'), model: t('形象', 'Model'), persona: t('人设', 'Persona'), dance: t('舞蹈', 'Dance') }[tb]}
+              {{ general: t('常规', 'General'), voice: t('语音', 'Voice'), model: t('形象', 'Model') }[tb]}
             </button>
           ))}
         </div>
@@ -341,99 +234,13 @@ export function SettingsPanel({
         <div style={contentStyle}>
           {tab === 'general' && (
             <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                <span style={{ fontSize: 14 }}>{t('语言', 'Language')}</span>
-                <div style={{ display: 'flex', gap: 4 }}>
-                  {(['zh', 'en'] as const).map((l) => (
-                    <button
-                      key={l}
-                      onClick={() => onLanguageChange(l)}
-                      style={{
-                        ...smallBtnStyle,
-                        background: language === l ? 'rgba(100, 160, 255, 0.4)' : 'rgba(255, 255, 255, 0.08)',
-                        borderColor: language === l ? 'rgba(100, 160, 255, 0.6)' : 'rgba(255, 255, 255, 0.15)',
-                      }}
-                    >
-                      {l === 'zh' ? '中文' : 'English'}
-                    </button>
-                  ))}
-                </div>
-              </div>
+              <LangToggle language={language} onChange={onLanguageChange} t={t} />
               <ToggleRow label={t('显示字幕', 'Subtitles')} value={showText} onChange={onShowTextChange} />
               <ToggleRow label={t('语音播报', 'TTS')} value={ttsEnabled} onChange={onTtsEnabledChange} />
-              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                <span style={{ fontSize: 14 }}>{t('音量', 'Volume')}</span>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                  <input
-                    type="range"
-                    min={0}
-                    max={100}
-                    value={Math.round(volume * 100)}
-                    onChange={(e) => onVolumeChange(Number(e.target.value) / 100)}
-                    style={{ width: 100, accentColor: 'rgba(100, 160, 255, 0.8)' }}
-                  />
-                  <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', width: 28, textAlign: 'right' }}>{Math.round(volume * 100)}</span>
-                </div>
-              </div>
-              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                <span style={{ fontSize: 14 }}>{t('视线跟随', 'Eye Tracking')}</span>
-                <div style={{ display: 'flex', gap: 4 }}>
-                  {(['mouse', 'camera'] as const).map((m) => (
-                    <button
-                      key={m}
-                      onClick={() => onTrackingChange(m)}
-                      style={{
-                        ...smallBtnStyle,
-                        background: tracking === m ? 'rgba(100, 160, 255, 0.4)' : 'rgba(255, 255, 255, 0.08)',
-                        borderColor: tracking === m ? 'rgba(100, 160, 255, 0.6)' : 'rgba(255, 255, 255, 0.15)',
-                      }}
-                    >
-                      {m === 'mouse' ? t('鼠标', 'Mouse') : t('镜头', 'Camera')}
-                    </button>
-                  ))}
-                </div>
-              </div>
-              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                <span style={{ fontSize: 14 }}>{t('UI位置', 'UI Position')}</span>
-                <div style={{ display: 'flex', gap: 4 }}>
-                  {(['left', 'right'] as const).map((a) => (
-                    <button
-                      key={a}
-                      onClick={() => onUiAlignChange(a)}
-                      style={{
-                        ...smallBtnStyle,
-                        background: uiAlign === a ? 'rgba(100, 160, 255, 0.4)' : 'rgba(255, 255, 255, 0.08)',
-                        borderColor: uiAlign === a ? 'rgba(100, 160, 255, 0.6)' : 'rgba(255, 255, 255, 0.15)',
-                      }}
-                    >
-                      {a === 'left' ? t('靠左', 'Left') : t('靠右', 'Right')}
-                    </button>
-                  ))}
-                </div>
-              </div>
+              <VolumeControl volume={volume} onChange={onVolumeChange} t={t} />
+              <TrackingControl tracking={tracking} onChange={onTrackingChange} t={t} />
+              <UIAlignControl uiAlign={uiAlign} onChange={onUiAlignChange} t={t} />
               <ToggleRow label={t('隐藏UI', 'Hide UI')} value={hideUI} onChange={onHideUIChange} />
-              <ToggleRow label={t('隐藏心情条', 'Hide Mood Bar')} value={hideMood} onChange={onHideMoodChange} />
-              <ToggleRow label={t('屏幕观察', 'Screen Observe')} value={screenObserve} onChange={onScreenObserveChange} />
-              {screenObserve && (
-                <>
-                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: -8 }}>
-                    <span style={{ fontSize: 14 }}>{t('观察间隔', 'Interval')}</span>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                      <input
-                        type="range"
-                        min={15}
-                        max={300}
-                        step={15}
-                        value={screenObserveInterval}
-                        onChange={(e) => onScreenObserveIntervalChange(Number(e.target.value))}
-                        style={{ width: 100, accentColor: 'rgba(100, 160, 255, 0.8)' }}
-                      />
-                      <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', width: 36, textAlign: 'right' }}>{screenObserveInterval}s</span>
-                    </div>
-                  </div>
-
-                </>
-              )}
             </div>
           )}
 
@@ -513,11 +320,6 @@ export function SettingsPanel({
                     </button>
                   ))}
                 </div>
-                <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.35)', marginTop: 4 }}>
-                  {sttProvider === 'browser'
-                    ? t('使用浏览器内置语音识别（Web Speech API）', 'Use browser built-in speech recognition (Web Speech API)')
-                    : t('使用服务端语音识别，需要登录对应服务', 'Use server-side speech recognition, requires corresponding service login')}
-                </div>
               </div>
 
               <div style={{ marginTop: 8 }}>
@@ -555,7 +357,6 @@ export function SettingsPanel({
                           cursor: previewingId !== null ? 'default' : 'pointer',
                           flexShrink: 0,
                           opacity: previewingId !== null && previewingId !== v.id ? 0.3 : 0.7,
-                          transition: 'background 0.15s',
                         }}
                         title={t('试听', 'Preview')}
                       >
@@ -581,268 +382,97 @@ export function SettingsPanel({
                   <option key={m} value={m}>{m.replace(/^\//, '')}</option>
                 ))}
               </select>
-
-              {models.length > 0 && (
-                <div style={{ marginTop: 12 }}>
-                  <div style={labelStyle}>{t('自定义VRM模型', 'Custom VRM Models')}</div>
-                  <select
-                    value={!BUILTIN_MODELS.includes(currentModel) ? currentModel : ''}
-                    onChange={(e) => { onModelChange(e.target.value); saveModelPath(e.target.value) }}
-                    style={selectStyle}
-                  >
-                    {BUILTIN_MODELS.includes(currentModel) && <option value="" disabled>{t('未选择', 'Not selected')}</option>}
-                    {models.map((m) => (
-                      <option key={m} value={m}>{decodeURIComponent(m.split('/').pop() || m)}</option>
-                    ))}
-                  </select>
-                </div>
-              )}
-
-              <div style={{ marginTop: 12 }}>
-                <div style={labelStyle}>{t('导入自定义模型', 'Import Custom Model')}</div>
-                <button
-                  onClick={async () => {
-                    const file = await pickFile('.vrm,.glb')
-                    if (!file) return
-                    try {
-                      const formData = new FormData()
-                      formData.append('file', file)
-                      const res = await fetch(`${FRIEND_API}/model/import`, {
-                        method: 'POST',
-                        body: formData,
-                      })
-                      const data = await res.json()
-                      if (data.url) {
-                        fetch(`${FRIEND_API}/model/list`)
-                          .then((r) => r.json())
-                          .then((d) => { if (d.models) setModels(d.models) })
-                          .catch(() => {})
-                        onModelChange(data.url)
-                        saveModelPath(data.url)
-                      }
-                    } catch (err) {
-                      console.warn('Import model failed:', err)
-                    }
-                  }}
-                  style={{ ...applyBtnStyle, width: '100%' }}
-                >
-                  {t('浏览本地文件…', 'Browse local files…')}
-                </button>
-                <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.35)', marginTop: 4 }}>
-                  {t('选择本地 .vrm 文件，将保存到工作区 models 目录', 'Select a .vrm file to save to workspace models directory')}
-                </div>
-              </div>
             </div>
           )}
+        </div>
+      </div>
+    </div>
+  )
+}
 
-          {tab === 'persona' && (
-            <div style={sectionStyle}>
-              <div style={labelStyle}>IDENTITY.md</div>
-              <textarea
-                value={identityContent}
-                onChange={(e) => { setIdentityContent(e.target.value); setPersonaDirty(true) }}
-                placeholder={t('角色身份信息（名字、种族、性格、emoji 等）…', 'Character identity (name, race, personality, emoji, etc.)…')}
-                style={textareaStyle}
-                rows={4}
-              />
-
-              <div style={{ ...labelStyle, marginTop: 4 }}>SOUL.md</div>
-              <textarea
-                value={soulContent}
-                onChange={(e) => { setSoulContent(e.target.value); setPersonaDirty(true) }}
-                placeholder={t('角色灵魂设定（说话风格、行为准则、背景故事等）…', 'Character soul (speaking style, behavior, backstory, etc.)…')}
-                style={textareaStyle}
-                rows={6}
-              />
-
-              <div style={{ display: 'flex', gap: 4, marginTop: 8 }}>
-                <button
-                  onClick={generatePersona}
-                  disabled={generating || !captureVrmScreenshot}
-                  style={{
-                    ...applyBtnStyle,
-                    flex: 1,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    gap: 4,
-                    background: generating ? 'rgba(100, 160, 255, 0.3)' : 'rgba(160, 120, 255, 0.5)',
-                  }}
-                  title={t('根据当前模型截图自动生成人设', 'Auto-generate persona from model screenshot')}
-                >
-                  {generating
-                    ? <Loader size={14} style={{ animation: 'spin 1s linear infinite' }} />
-                    : <Sparkles size={14} />}
-                  {generating ? t('生成中…', 'Generating…') : t('一键生成人设', 'Auto Generate')}
-                </button>
-                <button
-                  onClick={savePersona}
-                  disabled={!personaDirty || personaSaving}
-                  style={{
-                    ...applyBtnStyle,
-                    opacity: personaDirty ? 1 : 0.4,
-                  }}
-                >
-                  {personaSaving ? t('保存中…', 'Saving…') : t('保存', 'Save')}
-                </button>
-              </div>
-              <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.3)', marginTop: 4 }}>
-                {t('关联工作区根目录的 IDENTITY.md 和 SOUL.md', 'Linked to IDENTITY.md and SOUL.md in workspace root')}
-              </div>
-            </div>
-          )}
-
-          {tab === 'dance' && (
-            <div style={sectionStyle}>
-              <div style={labelStyle}>{t('内置舞蹈', 'Built-in Dances')}</div>
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-                {Object.entries(dancePresets).map(([id, preset]) => (
-                  <div
-                    key={id}
-                    onClick={() => onDanceChange(id)}
-                    style={{
-                      ...modelBtnStyle,
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'space-between',
-                      padding: '8px 12px',
-                      fontSize: 13,
-                      background: currentDance === id ? 'rgba(100, 160, 255, 0.4)' : 'rgba(255, 255, 255, 0.08)',
-                      borderColor: currentDance === id ? 'rgba(100, 160, 255, 0.6)' : 'rgba(255, 255, 255, 0.15)',
-                    }}
-                  >
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                      <Music size={14} style={{ opacity: 0.6 }} />
-                      <span>{preset.label}</span>
-                    </div>
-                    {preset.bgm && (
-                      <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.35)' }}>{t('含BGM', 'w/ BGM')}</span>
-                    )}
-                  </div>
-                ))}
-              </div>
-
-              {customDances.length > 0 && (
-                <div style={{ marginTop: 12 }}>
-                  <div style={labelStyle}>{t('自定义舞蹈', 'Custom Dances')}</div>
-                  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-                    {customDances.map((dance) => (
-                      <div
-                        key={dance.id}
-                        onClick={() => onDanceChange(`custom:${dance.id}`, {
-                          label: dance.label,
-                          type: 'vmd',
-                          url: dance.vmdUrl,
-                          bgm: dance.bgmUrl,
-                        })}
-                        style={{
-                          ...modelBtnStyle,
-                          display: 'flex',
-                          alignItems: 'center',
-                          justifyContent: 'space-between',
-                          padding: '8px 10px',
-                          fontSize: 13,
-                          background: currentDance === `custom:${dance.id}` ? 'rgba(100, 160, 255, 0.4)' : 'rgba(255, 255, 255, 0.08)',
-                          borderColor: currentDance === `custom:${dance.id}` ? 'rgba(100, 160, 255, 0.6)' : 'rgba(255, 255, 255, 0.15)',
-                        }}
-                      >
-                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                          <Music size={14} style={{ opacity: 0.6 }} />
-                          <div>
-                            <div>{dance.label}</div>
-                            {dance.bgmUrl && (
-                              <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.35)', marginTop: 1 }}>{t('含BGM', 'w/ BGM')}</div>
-                            )}
-                          </div>
-                        </div>
-                        <div
-                          onClick={(e) => {
-                            e.stopPropagation()
-                            fetch(`${FRIEND_API}/dance/delete`, {
-                              method: 'POST',
-                              headers: { 'Content-Type': 'application/json' },
-                              body: JSON.stringify({ id: dance.id }),
-                            })
-                              .then(() => {
-                                fetchCustomDances()
-                                if (currentDance === `custom:${dance.id}`) onDanceChange('love')
-                              })
-                              .catch(() => {})
-                          }}
-                          style={{
-                            width: 28,
-                            height: 28,
-                            borderRadius: 6,
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            background: 'rgba(255, 255, 255, 0.08)',
-                            cursor: 'pointer',
-                            flexShrink: 0,
-                            opacity: 0.5,
-                          }}
-                          title={t('删除', 'Delete')}
-                        >
-                          <Trash2 size={13} />
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-              <div style={{ marginTop: 12 }}>
-                <div style={labelStyle}>{t('导入自定义舞蹈', 'Import Custom Dance')}</div>
-                <button
-                  disabled={importingDance}
-                  onClick={async () => {
-                    setImportingDance(true)
-                    try {
-                      // Pick VMD file
-                      const vmdFile = await pickFile('.vmd')
-                      if (!vmdFile) { setImportingDance(false); return }
+function LangToggle({ language, onChange, t }: { language: 'zh' | 'en'; onChange: (v: 'zh' | 'en') => void; t: (zh: string, en: string) => string }) {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+      <span style={{ fontSize: 14 }}>{t('语言', 'Language')}</span>
+      <div style={{ display: 'flex', gap: 4 }}>
+        {(['zh', 'en'] as const).map((l) => (
+          <button
+            key={l}
+            onClick={() => onChange(l)}
+            style={{
+              ...smallBtnStyle,
+              background: language === l ? 'rgba(100, 160, 255, 0.4)' : 'rgba(255, 255, 255, 0.08)',
+              borderColor: language === l ? 'rgba(100, 160, 255, 0.6)' : 'rgba(255, 255, 255, 0.15)',
+            }}
+          >
+            {l === 'zh' ? '中文' : 'English'}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
 
-                      // Import VMD
-                      const vmdFormData = new FormData()
-                      vmdFormData.append('file', vmdFile)
-                      const vmdRes = await fetch(`${FRIEND_API}/dance/import`, {
-                        method: 'POST',
-                        body: vmdFormData,
-                      })
-                      const vmdData = await vmdRes.json()
-                      if (!vmdData.ok) throw new Error(vmdData.error)
+function VolumeControl({ volume, onChange, t }: { volume: number; onChange: (v: number) => void; t: (zh: string, en: string) => string }) {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+      <span style={{ fontSize: 14 }}>{t('音量', 'Volume')}</span>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <input
+          type="range"
+          min={0}
+          max={100}
+          value={Math.round(volume * 100)}
+          onChange={(e) => onChange(Number(e.target.value) / 100)}
+          style={{ width: 100, accentColor: 'rgba(100, 160, 255, 0.8)' }}
+        />
+        <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', width: 28, textAlign: 'right' }}>{Math.round(volume * 100)}</span>
+      </div>
+    </div>
+  )
+}
 
-                      // Ask for optional BGM
-                      const mp3File = await pickFile('.mp3')
-                      if (mp3File) {
-                        const mp3FormData = new FormData()
-                        mp3FormData.append('file', mp3File)
-                        await fetch(`${FRIEND_API}/dance/import`, {
-                          method: 'POST',
-                          body: mp3FormData,
-                        })
-                      }
+function TrackingControl({ tracking, onChange, t }: { tracking: 'mouse' | 'camera'; onChange: (v: 'mouse' | 'camera') => void; t: (zh: string, en: string) => string }) {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+      <span style={{ fontSize: 14 }}>{t('视线跟随', 'Eye Tracking')}</span>
+      <div style={{ display: 'flex', gap: 4 }}>
+        {(['mouse', 'camera'] as const).map((m) => (
+          <button
+            key={m}
+            onClick={() => onChange(m)}
+            style={{
+              ...smallBtnStyle,
+              background: tracking === m ? 'rgba(100, 160, 255, 0.4)' : 'rgba(255, 255, 255, 0.08)',
+              borderColor: tracking === m ? 'rgba(100, 160, 255, 0.6)' : 'rgba(255, 255, 255, 0.15)',
+            }}
+          >
+            {m === 'mouse' ? t('鼠标', 'Mouse') : t('镜头', 'Camera')}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
 
-                      fetchCustomDances()
-                    } catch (err) {
-                      console.warn('Import dance failed:', err)
-                    }
-                    setImportingDance(false)
-                  }}
-                  style={{ ...applyBtnStyle, width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}
-                >
-                  {importingDance
-                    ? <Loader size={14} style={{ animation: 'spin 1s linear infinite' }} />
-                    : <Upload size={14} />}
-                  {importingDance ? t('导入中…', 'Importing…') : t('选择 VMD 舞蹈文件…', 'Select VMD dance file…')}
-                </button>
-                <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.35)', marginTop: 4 }}>
-                  {t('选择 .vmd 舞蹈文件后，可选择配套 .mp3 音乐文件', 'Select a .vmd dance file, then optionally pick a matching .mp3')}
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
+function UIAlignControl({ uiAlign, onChange, t }: { uiAlign: 'left' | 'right'; onChange: (v: 'left' | 'right') => void; t: (zh: string, en: string) => string }) {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+      <span style={{ fontSize: 14 }}>{t('UI位置', 'UI Position')}</span>
+      <div style={{ display: 'flex', gap: 4 }}>
+        {(['left', 'right'] as const).map((a) => (
+          <button
+            key={a}
+            onClick={() => onChange(a)}
+            style={{
+              ...smallBtnStyle,
+              background: uiAlign === a ? 'rgba(100, 160, 255, 0.4)' : 'rgba(255, 255, 255, 0.08)',
+              borderColor: uiAlign === a ? 'rgba(100, 160, 255, 0.6)' : 'rgba(255, 255, 255, 0.15)',
+            }}
+          >
+            {a === 'left' ? t('靠左', 'Left') : t('靠右', 'Right')}
+          </button>
+        ))}
       </div>
     </div>
   )
@@ -1025,29 +655,3 @@ const selectStyle: React.CSSProperties = {
   outline: 'none',
   fontFamily: '"Segoe UI", "Microsoft YaHei", sans-serif',
 }
-
-const textareaStyle: React.CSSProperties = {
-  width: '100%',
-  boxSizing: 'border-box',
-  border: '1px solid rgba(255, 255, 255, 0.2)',
-  borderRadius: 6,
-  background: 'rgba(0, 0, 0, 0.3)',
-  color: '#fff',
-  fontSize: 12,
-  lineHeight: '1.5',
-  padding: '6px 8px',
-  outline: 'none',
-  fontFamily: '"Segoe UI", "Microsoft YaHei", sans-serif',
-  resize: 'vertical',
-}
-
-const applyBtnStyle: React.CSSProperties = {
-  height: 32,
-  padding: '0 12px',
-  border: 'none',
-  borderRadius: 6,
-  background: 'rgba(100, 160, 255, 0.5)',
-  color: '#fff',
-  fontSize: 13,
-  cursor: 'pointer',
-}

src/components/friend/frontend/components/TextBubble.tsx

@@ -12,6 +12,7 @@ interface VrmMessage {
   audioUrl?: string
   audioIndex?: number
   imageUrl?: string
+  action?: string
   sendFirstTts?: boolean
   appendText?: boolean
   replyDone?: boolean

src/components/friend/frontend/components/VRMScene.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useImperativeHandle, forwardRef, useState, useCallback } from 'react'
+import { useEffect, useRef, useImperativeHandle, forwardRef } from 'react'
 import * as THREE from 'three'
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
 import { VRMLoaderPlugin, VRMUtils } from '@pixiv/three-vrm'
@@ -8,13 +8,9 @@ import { EmoteController } from '../emote'
 import { LipSync } from '../lip-sync'
 import { MotionController } from '../motion-controller'
 
-export type TouchRegion = 'head' | 'arm' | 'leg' | 'chest' | 'belly' | 'buttocks'
-
 interface VRMSceneProps {
   modelPath: string
   idleAnimationPath?: string
-  onTouch?: (region: TouchRegion) => void
-  onModelLoaded?: () => void
 }
 
 export type TrackingMode = 'mouse' | 'camera'
@@ -25,13 +21,8 @@ export interface VRMSceneHandle {
   resetCamera: () => void
   setTrackingMode: (mode: TrackingMode) => void
   playAction: (name: string, hold?: boolean) => void
-  captureScreenshot: () => string | null
   panCamera: (dx: number, dy: number) => void
   rotateCamera: (dx: number, dy: number) => void
-  playDance: (nameOrPreset: string | import('../motion-controller').DancePreset) => void
-  stopDance: () => void
-  isDancing: () => boolean
-  setBgmVolume: (v: number) => void
   /** Unified reset: camera + resetToIdle + expressions to zero */
   reset: () => void
 }
@@ -42,6 +33,9 @@ interface BlinkState {
   blinkProgress: number
   timeSinceLastBlink: number
   nextBlinkTime: number
+  blinkDuration: number
+  doubleBlink: boolean
+  doubleBlinkCount: number
 }
 
 function createBlinkState(): BlinkState {
@@ -49,7 +43,10 @@ function createBlinkState(): BlinkState {
     isBlinking: false,
     blinkProgress: 0,
     timeSinceLastBlink: 0,
-    nextBlinkTime: Math.random() * 4 + 1,
+    nextBlinkTime: Math.random() * 5 + 2,
+    blinkDuration: 0.1 + Math.random() * 0.08,
+    doubleBlink: false,
+    doubleBlinkCount: 0,
   }
 }
 
@@ -61,32 +58,37 @@ function updateBlink(vrm: VRM, delta: number, state: BlinkState) {
   if (!state.isBlinking && state.timeSinceLastBlink >= state.nextBlinkTime) {
     state.isBlinking = true
     state.blinkProgress = 0
+    state.blinkDuration = 0.08 + Math.random() * 0.12
+    // ~8% chance of double blink (more natural)
+    state.doubleBlink = Math.random() < 0.08
+    state.doubleBlinkCount = 0
   }
 
   if (state.isBlinking) {
-    const BLINK_DURATION = 0.15
-    state.blinkProgress += delta / BLINK_DURATION
+    state.blinkProgress += delta / state.blinkDuration
     const blinkValue = Math.sin(Math.PI * state.blinkProgress)
     vrm.expressionManager.setValue('blink', blinkValue)
 
     if (state.blinkProgress >= 1) {
-      state.isBlinking = false
-      state.timeSinceLastBlink = 0
-      vrm.expressionManager.setValue('blink', 0)
-      state.nextBlinkTime = Math.random() * 5 + 1
+      state.blinkProgress = 0
+      state.doubleBlinkCount++
+
+      if (state.doubleBlink && state.doubleBlinkCount < 2) {
+        // Quick reopen then re-blink
+        vrm.expressionManager.setValue('blink', 0)
+        state.blinkDuration = 0.06 + Math.random() * 0.06
+      } else {
+        state.isBlinking = false
+        state.timeSinceLastBlink = 0
+        vrm.expressionManager.setValue('blink', 0)
+        state.doubleBlink = false
+        state.nextBlinkTime = Math.random() * 6 + 1.5
+      }
     }
   }
 }
 
 // ── Relaxed hand pose ─────────────────────────────────────────────────────────
-// The idle_loop.vrma often has no finger tracks, so fingers stay in the stiff
-// T-pose. This must be applied EVERY FRAME after mixer.update() because the
-// AnimationMixer resets bones that have no tracks back to their rest rotation.
-//
-// VRM normalized bones use Z-axis for finger curl (spread is Y-axis).
-// Left hand curls positive Z, right hand curls negative Z.
-// We also add slight spread (Y-axis) variation per finger for a natural look,
-// and subtle per-frame micro-movement to avoid a "frozen" appearance.
 
 interface HandPoseCache {
   bones: { bone: THREE.Object3D; z: number; y: number }[]
@@ -101,7 +103,6 @@ function buildHandPoseCache(vrm: VRM): HandPoseCache {
   const segments = ['Proximal', 'Intermediate', 'Distal'] as const
   const sides = ['left', 'right'] as const
 
-  // Base curl values — outer fingers curl more for a natural resting hand
   const curlMap: Record<string, [number, number, number]> = {
     Thumb:  [0.25, 0.15, 0.10],
     Index:  [0.20, 0.30, 0.20],
@@ -110,7 +111,6 @@ function buildHandPoseCache(vrm: VRM): HandPoseCache {
     Little: [0.35, 0.45, 0.30],
   }
 
-  // Slight spread (Y-axis) to fan fingers apart naturally
   const spreadMap: Record<string, number> = {
     Thumb:  0.15,
     Index:  0.04,
@@ -132,7 +132,6 @@ function buildHandPoseCache(vrm: VRM): HandPoseCache {
         if (!bone) continue
 
         const z = sign * curls[s]
-        // Only apply spread on the proximal segment
         const y = s === 0 ? sign * spread : 0
 
         bones.push({ bone, z, y })
@@ -144,32 +143,23 @@ function buildHandPoseCache(vrm: VRM): HandPoseCache {
 }
 
 function applyRelaxedHandPose(cache: HandPoseCache, time: number) {
+  // Slow hand tension cycle (~30s period): hands subtly change posture over time
+  const tensionCycle = 0.5 + 0.5 * Math.sin(time * 0.035)
+  const zScale = 0.85 + tensionCycle * 0.3  // 0.85-1.15
+
   for (const { bone, z, y } of cache.bones) {
-    // Subtle micro-movement: ±0.02 rad oscillation at slightly different
-    // frequencies per bone (seeded by the base z value) to avoid uniformity
     const freq = 0.3 + Math.abs(z) * 2
     const micro = Math.sin(time * freq + z * 50) * 0.02
-    bone.rotation.z = z + micro
+    bone.rotation.z = z * zScale + micro
     if (y !== 0) bone.rotation.y = y
   }
 }
 
-
 export const VRMScene = forwardRef<VRMSceneHandle, VRMSceneProps>(function VRMScene({
   modelPath,
   idleAnimationPath = '/friend/idle_loop.vrma',
-  onTouch,
-  onModelLoaded,
 }, ref) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
-  const [ripples, setRipples] = useState<{ id: number; x: number; y: number; confirmed: boolean }[]>([])
-  const rippleIdRef = useRef(0)
-
-  const spawnRipple = useCallback((x: number, y: number, confirmed: boolean) => {
-    const id = ++rippleIdRef.current
-    setRipples(prev => [...prev, { id, x, y, confirmed }])
-    setTimeout(() => setRipples(prev => prev.filter(r => r.id !== id)), confirmed ? 700 : 500)
-  }, [])
 
   const emoteRef = useRef<EmoteController | null>(null)
   const resetCameraRef = useRef<(() => void) | null>(null)
@@ -178,10 +168,6 @@ export const VRMScene = forwardRef<VRMSceneHandle, VRMSceneProps>(function VRMSc
   const panCameraRef = useRef<((dx: number, dy: number) => void) | null>(null)
   const rotateCameraRef = useRef<((dx: number, dy: number) => void) | null>(null)
   const lipSyncRef = useRef<LipSync>(LipSync.getInstance())
-  const onTouchRef = useRef(onTouch)
-  onTouchRef.current = onTouch
-  const onModelLoadedRef = useRef(onModelLoaded)
-  onModelLoadedRef.current = onModelLoaded
 
   useImperativeHandle(ref, () => ({
     setEmotion(emotion: string, intensity?: number) {
@@ -199,27 +185,12 @@ export const VRMScene = forwardRef<VRMSceneHandle, VRMSceneProps>(function VRMSc
     playAction(name: string, hold?: boolean) {
       motionRef.current?.playAction(name, hold)
     },
-    captureScreenshot() {
-      return canvasRef.current?.toDataURL('image/png') ?? null
-    },
     panCamera(dx: number, dy: number) {
       panCameraRef.current?.(dx, dy)
     },
     rotateCamera(dx: number, dy: number) {
       rotateCameraRef.current?.(dx, dy)
     },
-    playDance(nameOrPreset: string | import('../motion-controller').DancePreset) {
-      motionRef.current?.playDance(nameOrPreset)
-    },
-    stopDance() {
-      motionRef.current?.resetToIdle()
-    },
-    isDancing() {
-      return motionRef.current?.isDancing ?? false
-    },
-    setBgmVolume(v: number) {
-      motionRef.current?.setVolume(v)
-    },
     reset() {
       resetCameraRef.current?.()
       motionRef.current?.resetToIdle()
@@ -253,12 +224,10 @@ export const VRMScene = forwardRef<VRMSceneHandle, VRMSceneProps>(function VRMSc
       0.1,
       100,
     )
-    // Orbit state: camera orbits around the pivot point
-    // Will be recalculated after model loads (like airi)
     const pivot = new THREE.Vector3(0, 0, 0)
     let orbitRadius = 2.0
-    let orbitTheta = 0       // horizontal angle (radians)
-    let orbitPhi = Math.PI / 2 // vertical angle (radians), PI/2 = eye level
+    let orbitTheta = 0
+    let orbitPhi = Math.PI / 2
 
     function updateCameraOrbit() {
       camera.position.set(
@@ -292,6 +261,18 @@ export const VRMScene = forwardRef<VRMSceneHandle, VRMSceneProps>(function VRMSc
     const saccades = new EyeSaccadeController()
     const lookAtTarget = { x: 0, y: 0, z: -100 }
 
+    // ── Aliveness system state: breathing, sway, speech micro-movements ─────
+    let alivenessBones = { chestBone: null as THREE.Object3D | null, spineBone: null as THREE.Object3D | null, neckBone: null as THREE.Object3D | null }
+    let breathPhase = Math.random() * Math.PI * 2
+    let swayPhase = Math.random() * Math.PI * 2
+    let speechBlend = 0
+    let userListenBlend = 0
+    // Micro-expression state
+    let microTimer = 5 + Math.random() * 10
+    let microActive = false
+    let microPhase = 0
+    let microShape = ''
+
     // ── Load VRM model, then load idle animation ─────────────────────────────
     loader.load(
       modelPath,
@@ -308,26 +289,24 @@ export const VRMScene = forwardRef<VRMSceneHandle, VRMSceneProps>(function VRMSc
           obj.frustumCulled = false
         })
 
-        // Add lookAt quaternion proxy (from airi — needed for lookAt to work)
         if (loadedVrm.lookAt) {
           const lookAtQuatProxy = new VRMLookAtQuaternionProxy(loadedVrm.lookAt)
           lookAtQuatProxy.name = 'lookAtQuaternionProxy'
           loadedVrm.scene.add(lookAtQuatProxy)
         }
 
-        // Normalize VRM 0.x to match 1.0 convention, then face camera
         VRMUtils.rotateVRM0(loadedVrm)
 
         scene.add(loadedVrm.scene)
         vrm = loadedVrm
 
-        // ── Compute camera from model bounds (airi style) ───────────────────
+        // ── Compute camera from model bounds ───────────────────
         const box = new THREE.Box3().setFromObject(loadedVrm.scene)
         const modelSize = new THREE.Vector3()
         const modelCenter = new THREE.Vector3()
         box.getSize(modelSize)
         box.getCenter(modelCenter)
-        modelCenter.y += modelSize.y / 3.2 // pivot at neck height
+        modelCenter.y += modelSize.y / 3.2
 
         const radians = (FOV / 2 * Math.PI) / 180
         const offsetX = modelSize.x / 16
@@ -340,7 +319,6 @@ export const VRMScene = forwardRef<VRMSceneHandle, VRMSceneProps>(function VRMSc
         orbitPhi = Math.PI / 2 - Math.atan2(offsetY, offsetZ)
         updateCameraOrbit()
 
-        // Store initial state for reset
         const initPivot = pivot.clone()
         const initRadius = orbitRadius
         const initTheta = orbitTheta
@@ -357,8 +335,8 @@ export const VRMScene = forwardRef<VRMSceneHandle, VRMSceneProps>(function VRMSc
           const right = new THREE.Vector3()
           const up = new THREE.Vector3()
           camera.getWorldDirection(new THREE.Vector3())
-          right.setFromMatrixColumn(camera.matrixWorld, 0) // camera right
-          up.setFromMatrixColumn(camera.matrixWorld, 1)    // camera up
+          right.setFromMatrixColumn(camera.matrixWorld, 0)
+          up.setFromMatrixColumn(camera.matrixWorld, 1)
           pivot.addScaledVector(right, -dx * 0.003)
           pivot.addScaledVector(up, dy * 0.003)
           updateCameraOrbit()
@@ -374,54 +352,27 @@ export const VRMScene = forwardRef<VRMSceneHandle, VRMSceneProps>(function VRMSc
           updateCameraOrbit()
         }
 
-        // Build hand pose cache (applied every frame in animate loop)
         handPose = buildHandPoseCache(loadedVrm)
 
-        // Initialize emote controller
+        // ── Initialize aliveness bone references ──
+        const h = loadedVrm.humanoid
+        alivenessBones = {
+          chestBone: h?.getNormalizedBoneNode('chest') ?? null,
+          spineBone: h?.getNormalizedBoneNode('spine') ?? null,
+          neckBone: h?.getNormalizedBoneNode('neck') ?? null,
+        }
+
         emote = new EmoteController(loadedVrm)
         emoteRef.current = emote
 
-        // ── Initialize MotionController ──────────────────────────────────────
         motion = new MotionController(loadedVrm)
         motionRef.current = motion
 
-        // Dance camera: auto-fit from hips position, centered on upper body
-        const danceRadius = (modelSize.y / 1.6) / Math.tan((FOV / 2 * Math.PI) / 180)
-
-        motion.onDanceStart = () => {
-          const hipsNode = loadedVrm.humanoid?.getNormalizedBoneNode('hips')
-          if (hipsNode) {
-            const hipsWorld = new THREE.Vector3()
-            hipsNode.getWorldPosition(hipsWorld)
-            // Pivot at hips height (upper body center)
-            pivot.set(hipsWorld.x, hipsWorld.y, hipsWorld.z)
-          } else {
-            pivot.copy(modelCenter)
-          }
-          orbitRadius = danceRadius
-          orbitTheta = 0
-          orbitPhi = Math.PI / 2
-          updateCameraOrbit()
-        }
-        motion.onDanceStop = () => {
-          pivot.copy(initPivot)
-          orbitRadius = initRadius
-          orbitTheta = initTheta
-          orbitPhi = initPhi
-          updateCameraOrbit()
-        }
-
-        // Load idle animation (non-blocking for fast startup)
         motion.loadIdle(idleAnimationPath).catch((err) =>
           console.warn('Failed to load idle animation:', err),
         )
 
-        // Reset spring bones after everything is set up
         loadedVrm.springBoneManager?.reset()
-
-        // Notify parent that model is ready (for auto-screenshot etc.)
-        // Delay slightly so the first frame is rendered
-        setTimeout(() => onModelLoadedRef.current?.(), 500)
       },
       () => {},
       (err) => {
@@ -431,7 +382,6 @@ export const VRMScene = forwardRef<VRMSceneHandle, VRMSceneProps>(function VRMSc
 
     // ── Mouse tracking ────────────────────────────────────────────────────────
     const mouse = new THREE.Vector2(0, 0)
-
     const _raycaster = new THREE.Raycaster()
     const _mouseVec = new THREE.Vector2()
 
@@ -441,7 +391,6 @@ export const VRMScene = forwardRef<VRMSceneHandle, VRMSceneProps>(function VRMSc
 
       if (trackingModeRef.current !== 'mouse') return
 
-      // Compute lookAt target like airi's lookAtMouse
       _mouseVec.set(mouse.x, mouse.y)
       _raycaster.setFromCamera(_mouseVec, camera)
       const camDir = new THREE.Vector3()
@@ -461,7 +410,6 @@ export const VRMScene = forwardRef<VRMSceneHandle, VRMSceneProps>(function VRMSc
         }
       }
     }
-    // Listen on both window and document to handle transparent window cases
     window.addEventListener('mousemove', onMouseMove)
     document.addEventListener('mousemove', onMouseMove)
 
@@ -481,92 +429,15 @@ export const VRMScene = forwardRef<VRMSceneHandle, VRMSceneProps>(function VRMSc
     }
     canvas.addEventListener('wheel', onWheel, { passive: false })
 
-    // ── Drag controls ──────────────────────────────────────────────────────
-    // Left drag: move window (startDragging)
-    // Middle drag: dolly (zoom)
-    // Right drag: rotate around model
-    let dragMode: 'rotate' | 'dolly' | 'pan' | null = null
+    // ── Camera drag controls ──────────────────────────────────────────────
+    let dragMode: 'rotate' | 'dolly' | null = null
     let prevX = 0
     let prevY = 0
     const ROTATE_SPEED = 0.005
-    const PAN_SPEED = 0.003
     const DOLLY_SPEED = 0.01
 
-    // ── Touch interaction: detect body region from raycast hit ────────────
-    const touchRaycaster = new THREE.Raycaster()
-    const touchMouseVec = new THREE.Vector2()
-    let lastTapTime = 0
-    let lastTapRegion: TouchRegion | null = null
-    let lastTouchFireTime = 0
-    const DOUBLE_TAP_WINDOW = 500 // ms
-    const TOUCH_COOLDOWN = 5_000 // ms
-
-    // Bone-to-region mapping for proximity-based touch detection
-    const boneRegionMap: [string, TouchRegion][] = [
-      // Head
-      ['head', 'head'], ['neck', 'head'],
-      ['leftEye', 'head'], ['rightEye', 'head'], ['jaw', 'head'],
-      // Arms
-      ['leftShoulder', 'arm'], ['leftUpperArm', 'arm'], ['leftLowerArm', 'arm'], ['leftHand', 'arm'],
-      ['rightShoulder', 'arm'], ['rightUpperArm', 'arm'], ['rightLowerArm', 'arm'], ['rightHand', 'arm'],
-      // Legs
-      ['leftUpperLeg', 'leg'], ['leftLowerLeg', 'leg'], ['leftFoot', 'leg'], ['leftToes', 'leg'],
-      ['rightUpperLeg', 'leg'], ['rightLowerLeg', 'leg'], ['rightFoot', 'leg'], ['rightToes', 'leg'],
-      // Torso
-      ['chest', 'chest'], ['upperChest', 'chest'],
-      ['spine', 'belly'],
-      ['hips', 'buttocks'],
-    ]
-    const _bonePos = new THREE.Vector3()
-
-    function detectTouchRegion(e: PointerEvent): TouchRegion | null {
-      if (!vrm?.humanoid) return null
-
-      touchMouseVec.set(
-        (e.clientX / window.innerWidth) * 2 - 1,
-        -(e.clientY / window.innerHeight) * 2 + 1,
-      )
-      touchRaycaster.setFromCamera(touchMouseVec, camera)
-
-      const intersects = touchRaycaster.intersectObject(vrm.scene, true)
-      if (intersects.length === 0) return null
-
-      const hitPoint = intersects[0].point
-
-      // Find closest bone to hit point
-      let closestRegion: TouchRegion = 'belly'
-      let closestDist = Infinity
-
-      for (const [boneName, region] of boneRegionMap) {
-        const bone = vrm.humanoid.getNormalizedBoneNode(boneName as any)
-        if (!bone) continue
-        bone.getWorldPosition(_bonePos)
-        const dist = hitPoint.distanceToSquared(_bonePos)
-        if (dist < closestDist) {
-          closestDist = dist
-          closestRegion = region
-        }
-      }
-
-      return closestRegion
-    }
-
-    // ── Left-click: distinguish click (touch) vs drag (move window) ────
-    let leftDownPos: { x: number; y: number; time: number; region: TouchRegion | null } | null = null
-    const CLICK_MOVE_THRESHOLD = 5  // px
-    const CLICK_TIME_THRESHOLD = 300 // ms
-
     function onPointerDown(e: PointerEvent) {
-      if (e.button === 0) {
-        const region = detectTouchRegion(e)
-        if (region) {
-          // Might be a touch — wait for pointerup to confirm it's not a drag
-          leftDownPos = { x: e.clientX, y: e.clientY, time: Date.now(), region }
-          return
-        }
-        // Not on model — no window drag available in web mode
-        return
-      } else if (e.button === 1) {
+      if (e.button === 1) {
         dragMode = 'dolly'
         e.preventDefault()
       } else if (e.button === 2) {
@@ -580,15 +451,6 @@ export const VRMScene = forwardRef<VRMSceneHandle, VRMSceneProps>(function VRMSc
     }
 
     function onPointerMove(e: PointerEvent) {
-      // If left button held on model and moved beyond threshold → it's a drag, not a touch
-      if (leftDownPos && e.buttons & 1) {
-        const dx = Math.abs(e.clientX - leftDownPos.x)
-        const dy = Math.abs(e.clientY - leftDownPos.y)
-        if (dx > CLICK_MOVE_THRESHOLD || dy > CLICK_MOVE_THRESHOLD) {
-          leftDownPos = null
-          return
-        }
-      }
       if (!dragMode) return
       const dx = e.clientX - prevX
       const dy = e.clientY - prevY
@@ -608,42 +470,13 @@ export const VRMScene = forwardRef<VRMSceneHandle, VRMSceneProps>(function VRMSc
           MIN_RADIUS,
           MAX_RADIUS,
         )
-      } else if (dragMode === 'pan') {
-        pivot.x -= dx * PAN_SPEED
-        pivot.y += dy * PAN_SPEED
       }
       updateCameraOrbit()
     }
 
-    function onPointerUp(e: PointerEvent) {
-      // Confirm touch: short press with no movement on model
-      if (leftDownPos && e.button === 0) {
-        const elapsed = Date.now() - leftDownPos.time
-        const dx = Math.abs(e.clientX - leftDownPos.x)
-        const dy = Math.abs(e.clientY - leftDownPos.y)
-        if (elapsed < CLICK_TIME_THRESHOLD && dx <= CLICK_MOVE_THRESHOLD && dy <= CLICK_MOVE_THRESHOLD) {
-          const now = Date.now()
-          const region = leftDownPos.region!
-          if (now - lastTapTime < DOUBLE_TAP_WINDOW && lastTapRegion === region && now - lastTouchFireTime > TOUCH_COOLDOWN) {
-            // Double-tap confirmed
-            lastTouchFireTime = now
-            spawnRipple(e.clientX, e.clientY, true)
-            onTouchRef.current?.(region)
-            lastTapTime = 0
-            lastTapRegion = null
-          } else {
-            // First tap — wait for second
-            spawnRipple(e.clientX, e.clientY, false)
-            lastTapTime = now
-            lastTapRegion = region
-          }
-        }
-        leftDownPos = null
-        return
-      }
+    function onPointerUp() {
       if (dragMode) {
         dragMode = null
-        canvas!.releasePointerCapture(e.pointerId)
       }
     }
 
@@ -664,20 +497,6 @@ export const VRMScene = forwardRef<VRMSceneHandle, VRMSceneProps>(function VRMSc
     }
     window.addEventListener('resize', onResize)
 
-    // ── Hit-test for window pass-through ──────────────────────────────────────
-    // Offscreen render target: render scene, read 1 pixel alpha at cursor.
-    // Updated in the render loop — no extra render pass, just piggybacks.
-    const hitTarget = new THREE.WebGLRenderTarget(1, 1, { depthBuffer: false })
-    let pendingHitTest: { x: number; y: number; resolve: (hit: boolean) => void } | null = null
-    const hitPixel = new Uint8Array(4)
-
-    // Async hit-test: queues a request, resolved after next frame render
-    ;(window as any).__clawHitTest = (clientX: number, clientY: number): Promise<boolean> => {
-      return new Promise((resolve) => {
-        pendingHitTest = { x: clientX, y: clientY, resolve }
-      })
-    }
-
     // ── Animation loop ────────────────────────────────────────────────────────
     const clock = new THREE.Clock()
     let animFrameId: number
@@ -687,16 +506,12 @@ export const VRMScene = forwardRef<VRMSceneHandle, VRMSceneProps>(function VRMSc
       const delta = clock.getDelta()
 
       if (vrm) {
-        // 1. Animation mixer
         motion?.update(delta)
 
-        // 1.5. Relaxed hand pose — skip during dance (VMD has own hand anim)
-        if (handPose && !motion?.isDancing) applyRelaxedHandPose(handPose, clock.elapsedTime)
+        if (handPose) applyRelaxedHandPose(handPose, clock.elapsedTime)
 
-        // 2. Humanoid update
         vrm.humanoid?.update()
 
-        // 3. Camera tracking mode: look at camera position
         if (trackingModeRef.current === 'camera') {
           lookAtTarget.x = camera.position.x
           lookAtTarget.y = camera.position.y
@@ -704,60 +519,84 @@ export const VRMScene = forwardRef<VRMSceneHandle, VRMSceneProps>(function VRMSc
           saccades.instantUpdate(vrm, lookAtTarget)
         }
 
-        // 4. LookAt update
         vrm.lookAt?.update(delta)
-
-        // 5. Eye saccades (airi style)
         saccades.update(vrm, lookAtTarget, delta)
-
-        // 5. Blinking
         updateBlink(vrm, delta, blinkState)
-
-        // 6. Emote transitions
         emote?.update(delta)
-
-        // 7. Lip sync
         lipSyncRef.current.update(vrm, delta)
 
-        // 8. Expression manager (apply blink etc.)
-        vrm.expressionManager?.update()
+        // ── Aliveness: micro-expressions (asymmetric blink, subtle morphs) ──
+        microTimer -= delta
+        if (microTimer <= 0 && !microActive) {
+          microShape = Math.random() > 0.5 ? 'blinkLeft' : 'blinkRight'
+          microActive = true
+          microPhase = 0
+        }
+        if (microActive && vrm.expressionManager) {
+          microPhase += delta * 4
+          const val = Math.sin(Math.PI * Math.min(microPhase, 1))
+          vrm.expressionManager.setValue(microShape, val * 0.3)
+          if (microPhase >= 2) {
+            microActive = false
+            vrm.expressionManager.setValue(microShape, 0)
+            microTimer = 8 + Math.random() * 16
+          }
+        }
 
-        // 8. Spring bone physics
+        vrm.expressionManager?.update()
         vrm.springBoneManager?.update(delta)
-      }
-
-      renderer.render(scene, camera)
 
-      // Process pending hit-test after render
-      if (pendingHitTest && canvas) {
-        const { x, y, resolve } = pendingHitTest
-        pendingHitTest = null
-
-        if (!vrm) {
-          resolve(true) // Model not loaded — don't pass through
-        } else {
+        // ── Aliveness: breathing (chest rise/fall, post-mixer) ──
+        // Breathing rate varies naturally, amplitude tuned for VRM scale
+        const breathRate = 1.8 + Math.sin(breathPhase * 0.05) * 0.4 + Math.sin(clock.elapsedTime * 0.1) * 0.3
+        breathPhase += delta * breathRate
+        const breathVal = Math.sin(breathPhase) * 0.006
+        if (alivenessBones.chestBone) {
+          alivenessBones.chestBone.position.y += breathVal
+        }
 
-        const dpr = renderer.getPixelRatio()
-        const bufW = canvas.clientWidth * dpr
-        const bufH = canvas.clientHeight * dpr
+        // ── Aliveness: postural sway ──
+        swayPhase += delta * 0.35
+        const swayZ = Math.sin(swayPhase) * 0.005
+        if (alivenessBones.spineBone) {
+          alivenessBones.spineBone.rotation.z += swayZ
+        }
 
-        if (hitTarget.width !== bufW || hitTarget.height !== bufH) {
-          hitTarget.setSize(bufW, bufH)
+        // ── Aliveness: speech-driven micro-movements ──
+        const isSpeaking = lipSyncRef.current.isActive()
+        const targetBlend = isSpeaking ? 1 : 0
+        speechBlend += (targetBlend - speechBlend) * Math.min(1, delta * 3)
+        if (speechBlend > 0.01) {
+          const t = clock.elapsedTime
+          const headX = Math.sin(t * 3.7 + 1.2) * 0.02 * speechBlend
+          const headZ = Math.sin(t * 2.3 + 0.7) * 0.015 * speechBlend
+          const headY = Math.sin(t * 1.5 + 3.8) * 0.008 * speechBlend  // slight rotation (looking around while talking)
+          const spineSway = Math.sin(t * 1.8 + 0.3) * 0.006 * speechBlend
+          if (alivenessBones.neckBone) {
+            alivenessBones.neckBone.rotation.x += headX
+            alivenessBones.neckBone.rotation.z += headZ
+            alivenessBones.neckBone.rotation.y += headY
+          }
+          if (alivenessBones.spineBone) {
+            alivenessBones.spineBone.rotation.x += spineSway
+          }
         }
 
-        // Render to offscreen target
-        renderer.setRenderTarget(hitTarget)
-        renderer.clear()
-        renderer.render(scene, camera)
-        // Read 1 pixel at cursor position
-        const px = Math.floor(x * dpr)
-        const py = Math.floor(bufH - y * dpr) // GL Y-flip
-        renderer.readRenderTargetPixels(hitTarget, px, py, 1, 1, hitPixel)
-        renderer.setRenderTarget(null)
-
-        resolve(hitPixel[3] > 10)
-        } // end else (vrm exists)
+        // ── Aliveness: listening response when user is speaking ──
+        const isUserSpeaking = !!(window as any).__userRecording
+        userListenBlend += ((isUserSpeaking ? 1 : 0) - userListenBlend) * Math.min(1, delta * 2)
+        if (userListenBlend > 0.01) {
+          const t = clock.elapsedTime
+          const listenTilt = Math.sin(t * 0.9 + 0.5) * 0.012 * userListenBlend  // head tilt
+          const listenNod = Math.sin(t * 2.3 + 3.1) * 0.008 * userListenBlend    // subtle nodding
+          if (alivenessBones.neckBone) {
+            alivenessBones.neckBone.rotation.z += listenTilt
+            alivenessBones.neckBone.rotation.x += listenNod
+          }
+        }
       }
+
+      renderer.render(scene, camera)
     }
 
     animate()
@@ -777,7 +616,6 @@ export const VRMScene = forwardRef<VRMSceneHandle, VRMSceneProps>(function VRMSc
       emoteRef.current = null
       motion?.dispose()
       motionRef.current = null
-      hitTarget.dispose()
       delete (window as any).__clawHitTest
       renderer.dispose()
     }
@@ -795,18 +633,11 @@ export const VRMScene = forwardRef<VRMSceneHandle, VRMSceneProps>(function VRMSc
           cursor: 'grab',
         }}
       />
-      {ripples.map(r => (
-        <span
-          key={r.id}
-          className={r.confirmed ? 'touch-ripple confirmed' : 'touch-ripple'}
-          style={{ left: r.x, top: r.y }}
-        />
-      ))}
     </div>
   )
 })
 
-// ── Eye saccade interval (from airi) ─────────────────────────────────────────
+// ── Eye saccade interval ─────────────────────────────────────────
 const EYE_SACCADE_INT_STEP = 400
 const EYE_SACCADE_INT_P: number[][] = [
   [0.075, 800], [0.110, 0], [0.125, 0], [0.140, 0], [0.125, 0],
@@ -827,13 +658,11 @@ function randomSaccadeInterval(): number {
   return EYE_SACCADE_INT_P[EYE_SACCADE_INT_P.length - 1][1] + Math.random() * EYE_SACCADE_INT_STEP
 }
 
-// ── Eye saccade controller (from airi) ───────────────────────────────────────
 class EyeSaccadeController {
   private nextSaccadeAfter = -1
   private timeSinceLastSaccade = 0
   private fixationTarget = new THREE.Vector3()
 
-  /** Called when lookAt target changes (e.g. mouse moved) */
   instantUpdate(vrm: VRM, target: { x: number; y: number; z: number }) {
     this.fixationTarget.set(target.x, target.y, target.z)
     if (!vrm.lookAt) return
@@ -844,12 +673,10 @@ class EyeSaccadeController {
     vrm.lookAt.update(0.016)
   }
 
-  /** Called every frame */
   update(vrm: VRM, lookAtTarget: { x: number; y: number; z: number }, delta: number) {
     if (!vrm.expressionManager || !vrm.lookAt) return
 
     if (this.timeSinceLastSaccade >= this.nextSaccadeAfter) {
-      // Add random offset to the current lookAt target
       this.fixationTarget.set(
         lookAtTarget.x + THREE.MathUtils.randFloat(-0.25, 0.25),
         lookAtTarget.y + THREE.MathUtils.randFloat(-0.25, 0.25),

src/components/friend/frontend/index.html

@@ -52,45 +52,6 @@
       100% { opacity: 1; transform: scale(1) translateY(0); }
     }
 
-    @keyframes mood-bubble-float {
-      0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(0.8); }
-      15% { opacity: 1; transform: translateX(-50%) translateY(-8px) scale(1.1); }
-      30% { opacity: 1; transform: translateX(-50%) translateY(-16px) scale(1); }
-      70% { opacity: 0.9; }
-      100% { opacity: 0; transform: translateX(-50%) translateY(-50px) scale(0.9); }
-    }
-
-    /* Touch ripple */
-    .touch-ripple {
-      position: fixed;
-      pointer-events: none;
-      width: 40px;
-      height: 40px;
-      margin-left: -20px;
-      margin-top: -20px;
-      border-radius: 50%;
-      border: 2px solid rgba(255, 255, 255, 0.5);
-      animation: ripple-expand 0.5s ease-out forwards;
-    }
-    .touch-ripple.confirmed {
-      width: 60px;
-      height: 60px;
-      margin-left: -30px;
-      margin-top: -30px;
-      border: 2.5px solid rgba(255, 180, 220, 0.8);
-      box-shadow: 0 0 12px rgba(255, 180, 220, 0.4);
-      animation: ripple-expand-confirmed 0.7s ease-out forwards;
-    }
-
-    @keyframes ripple-expand {
-      0%   { transform: scale(0); opacity: 0.7; }
-      100% { transform: scale(1.8); opacity: 0; }
-    }
-    @keyframes ripple-expand-confirmed {
-      0%   { transform: scale(0); opacity: 0.9; }
-      50%  { transform: scale(1.2); opacity: 0.6; }
-      100% { transform: scale(2.2); opacity: 0; }
-    }
   </style>
 </head>
 

src/components/friend/frontend/lip-sync.ts

@@ -167,6 +167,11 @@ export class LipSync {
     }
   }
 
+  /** Check if currently playing audio (within last 300ms). */
+  isActive(): boolean {
+    return this.currentSource !== null && performance.now() - this.lastActiveAt < 300
+  }
+
   /** Stop current audio playback immediately. */
   stopAudio() {
     if (this.currentSource) {

src/components/friend/frontend/mmd-parser.d.ts

@@ -1,39 +0,0 @@
-declare module 'mmd-parser' {
-  export const CharsetEncoder: any
-
-  export class Parser {
-    parseVmd(buffer: ArrayBufferLike, leftToRight?: boolean): VmdFile
-  }
-
-  export interface VmdFile {
-    metadata: {
-      magic: string
-      name: string
-      motionCount: number
-      morphCount: number
-      cameraCount: number
-      coordinateSystem: string
-    }
-    motions: {
-      boneName: string
-      frameNum: number
-      position: number[]
-      rotation: number[]
-      interpolation: number[]
-    }[]
-    morphs: {
-      morphName: string
-      frameNum: number
-      weight: number
-    }[]
-    cameras: {
-      frameNum: number
-      distance: number
-      position: number[]
-      rotation: number[]
-      interpolation: number[]
-      fov: number
-      perspective: number
-    }[]
-  }
-}

src/components/friend/frontend/motion-controller.ts

@@ -1,8 +1,10 @@
 /**
- * MotionController — unified animation system supporting VRMA, VMD, and FBX.
+ * MotionController — unified animation system supporting VRMA and FBX actions.
  *
  * Uses a single persistent AnimationMixer with crossFade transitions to avoid
  * T-pose flickering between animations.
+ *
+ * Simplified: removed dance system, kept action presets for human-like behavior.
  */
 
 import * as THREE from 'three'
@@ -10,14 +12,11 @@ import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
 import { VRMAnimationLoaderPlugin, createVRMAnimationClip } from '@pixiv/three-vrm-animation'
 import type { VRMAnimation } from '@pixiv/three-vrm-animation'
 import type { VRM } from '@pixiv/three-vrm'
-import { parseVMDAnimation, bindVMDToVRM } from './vmd-loader'
-import type { VMDAnimationData } from './vmd-loader'
 import { loadMixamoAnimation } from './mixamo-loader'
-import { VRMIKHandler } from './vrm-ik-handler'
 
 // ── Motion file types ───────────────────────────────────────────────────────
 
-export type MotionFileType = 'vrma' | 'vmd' | 'fbx'
+export type MotionFileType = 'vrma' | 'fbx'
 
 // ── Motion presets ──────────────────────────────────────────────────────────
 
@@ -29,13 +28,11 @@ export interface MotionPreset {
 
 // Actions: short one-shot gestures triggered by emotions / interactions
 export const actionPresets: Record<string, MotionPreset> = {
-  // Local VRMA actions (bundled)
   akimbo:       { label: '叉腰',   type: 'vrma', url: '/friend/akimbo.vrma' },
   playFingers:  { label: '搓手',   type: 'vrma', url: '/friend/playFingers.vrma' },
   scratchHead:  { label: '挠头',   type: 'vrma', url: '/friend/scratchHead.vrma' },
   stretch:      { label: '伸展',   type: 'vrma', url: '/friend/stretch.vrma' },
 
-  // Local FBX actions (bundled)
   happy:        { label: '开心',     type: 'fbx', url: '/friend/happy.fbx' },
   angry:        { label: '生气',     type: 'fbx', url: '/friend/angry.fbx' },
   greeting:     { label: '招呼',     type: 'fbx', url: '/friend/greeting.fbx' },
@@ -46,16 +43,6 @@ export const actionPresets: Record<string, MotionPreset> = {
   angryPump:    { label: '暴怒',     type: 'fbx', url: '/friend/angryPump.fbx' },
 }
 
-// Dances: looping full-body animations with optional BGM
-export interface DancePreset extends MotionPreset {
-  bgm?: string
-}
-
-export const dancePresets: Record<string, DancePreset> = {
-  jile: { label: '极乐净土', type: 'vmd', url: '/friend/jile.vmd', bgm: '/friend/jile.mp3' },
-  love: { label: '恋爱循环', type: 'vmd', url: '/friend/love.vmd', bgm: '/friend/love.mp3' },
-}
-
 // ── Utility: re-anchor root position ────────────────────────────────────────
 
 function reAnchorRootPositionTrack(clip: THREE.AnimationClip, vrm: VRM) {
@@ -103,42 +90,44 @@ export class MotionController {
   private idleAction: THREE.AnimationAction | null = null
   private currentAction: THREE.AnimationAction | null = null
   private clipCache = new Map<string, THREE.AnimationClip>()
-  private vmdDataCache = new Map<string, VMDAnimationData>()
   private gltfLoader: GLTFLoader
-  private ikHandler: VRMIKHandler
-  private _isDancing = false
   private _actionPlaying = false
-  private _ikActive = false
   private holdTimer: ReturnType<typeof setTimeout> | null = null
   private _actionSafetyTimer: ReturnType<typeof setTimeout> | null = null
-  private bgmAudio: HTMLAudioElement | null = null
-
-  // Callbacks for external coordination (camera switching etc.)
-  onDanceStart?: () => void
-  onDanceStop?: () => void
+  private actionQueue: Array<{ name: string; hold: boolean }> = []
+  private _settleGen = 0       // generation at which the current settle is valid
+  private _settleHold = false  // hold flag for current settle
 
   constructor(vrm: VRM) {
     this.vrm = vrm
     this.mixer = new THREE.AnimationMixer(vrm.scene)
     this.gltfLoader = new GLTFLoader()
     this.gltfLoader.register((parser) => new VRMAnimationLoaderPlugin(parser))
-    this.ikHandler = VRMIKHandler.get(vrm)
   }
 
-  private _volume = 0.5
-
-  get isDancing() { return this._isDancing }
   get actionPlaying() { return this._actionPlaying }
 
-  /** Set BGM volume (0–1). Also applies to currently playing BGM. */
-  setVolume(v: number) {
-    this._volume = v
-    if (this.bgmAudio) this.bgmAudio.volume = v
+  update(delta: number) {
+    if (this.mixer) {
+      this.mixer.update(delta)
+      this.checkActionCompletion()
+    }
   }
 
-  update(delta: number) {
-    if (this.mixer) this.mixer.update(delta)
-    if (this._ikActive) this.ikHandler.update()
+  /**
+   * Frame-accurate action completion detection.
+   * THREE.AnimationMixer 'finished' event only fires when ALL actions finish,
+   * which never happens with a looping idle. So we check per-frame instead.
+   */
+  private checkActionCompletion() {
+    if (!this._actionPlaying || !this.currentAction) return
+    const clip = this.currentAction.getClip()
+    if (!clip || clip.duration <= 0) return
+
+    // Allow a 1-frame epsilon (≈16ms at 60fps) to avoid precision issues
+    if (this.currentAction.time >= clip.duration - 0.02) {
+      this.finishCurrentAction()
+    }
   }
 
   // ── CrossFade helper ─────────────────────────────────────────────────────
@@ -177,25 +166,17 @@ export class MotionController {
   }
 
   // ── Reset to idle (public) ──────────────────────────────────────────────
-  // Full reset: stop BGM + stop dance + restart idle on a fresh mixer.
 
   resetToIdle() {
-    this.stopBgm()
     this.clearTimers()
-    this.disableIK()
-
-    const wasDancing = this._isDancing
-    this._isDancing = false
     this._actionPlaying = false
-    this._actionGeneration++ // invalidate any in-flight playAction
+    this._actionGeneration++
 
     // CrossFade back to idle
     if (this.mixer && this.idleClip) {
       this.idleAction = this.mixer.clipAction(this.idleClip)
       this.crossFadeTo(this.idleAction)
     }
-
-    if (wasDancing) this.onDanceStop?.()
   }
 
   // ── Play a one-shot action ──────────────────────────────────────────────
@@ -203,15 +184,24 @@ export class MotionController {
   private _actionGeneration = 0
 
   async playAction(name: string, hold = false) {
-    if (this._actionPlaying) return
-    if (this._isDancing) return
-
     const preset = actionPresets[name]
     if (!preset) { console.warn('[Motion] unknown action:', name); return }
 
+    // If already playing an action, queue instead of dropping
+    if (this._actionPlaying) {
+      // Avoid duplicate consecutive queued items
+      const last = this.actionQueue[this.actionQueue.length - 1]
+      if (!last || last.name !== name) {
+        this.actionQueue.push({ name, hold })
+      }
+      return
+    }
+
     // Set lock BEFORE async load to prevent concurrent playAction calls
     this._actionPlaying = true
     const gen = ++this._actionGeneration
+    this._settleGen = gen
+    this._settleHold = hold
 
     const clip = await this.loadClip(preset)
 
@@ -224,108 +214,51 @@ export class MotionController {
 
     const action = this.mixer.clipAction(clip)
     action.setLoop(THREE.LoopOnce, 1)
-    action.clampWhenFinished = true  // always clamp to avoid T-pose on finish
+    action.clampWhenFinished = true
     this.crossFadeTo(action)
 
-    let settled = false
-    const settle = () => {
-      if (settled) return
-      settled = true
-      this.mixer?.removeEventListener('finished', onFinished)
-      // Stale settle: another action or resetToIdle already took over
-      if (gen !== this._actionGeneration) return
-      this.clearTimers()
-      if (hold) {
-        this.holdTimer = setTimeout(() => {
-          if (gen !== this._actionGeneration) return
-          this._actionPlaying = false
-          this.disableIK()
-          this.startIdle()
-        }, 10000)
-      } else {
-        this._actionPlaying = false
-        this.disableIK()
-        this.startIdle()
+    // Frame-accurate completion is handled in checkActionCompletion() via update()
+    // Safety timer: generous fallback (should never fire if checkActionCompletion works)
+    const safeDuration = Math.max(clip.duration, 3) + 5
+    this._actionSafetyTimer = setTimeout(() => {
+      if (gen === this._actionGeneration && this._actionPlaying) {
+        this.finishCurrentAction()
       }
-    }
-    const onFinished = () => settle()
-    this.mixer?.addEventListener('finished', onFinished)
-
-    // Safety timeout: guarantee _actionPlaying resets even if 'finished' never fires
-    const duration = clip.duration > 0 ? clip.duration : 3
-    this._actionSafetyTimer = setTimeout(() => settle(), (duration + 1) * 1000)
+    }, safeDuration * 1000)
   }
 
-  // ── Dance (looping VMD/FBX/VRMA) ───────────────────────────────────────
-
-  async playDance(nameOrPreset: string | DancePreset) {
-    if (this._isDancing) return
-    this._isDancing = true
+  /** Called by checkActionCompletion() or safety timer when current action ends. */
+  private finishCurrentAction() {
+    if (!this._actionPlaying) return
+    this.clearTimers()
+    const gen = this._settleGen
+    const hold = this._settleHold
 
-    try {
-      // Accept preset name, URL, or full DancePreset object
-      const preset: DancePreset | undefined =
-        typeof nameOrPreset === 'object' ? nameOrPreset : dancePresets[nameOrPreset]
-      const clip = preset
-        ? await this.loadClip(preset)
-        : await this.loadClipByUrl(nameOrPreset as string)
-
-      if (!clip) {
-        this._isDancing = false
-        return
-      }
+    if (gen !== this._actionGeneration) return
 
-      this.clearTimers()
+    // Process next queued action
+    const next = this.actionQueue.shift()
+    if (next) {
       this._actionPlaying = false
-
-      this.onDanceStart?.()
-
-      // Play BGM if preset has one
-      this.stopBgmImmediate()
-      if (preset?.bgm) {
-        this.bgmAudio = new Audio(preset.bgm)
-        this.bgmAudio.loop = true
-        this.bgmAudio.volume = this._volume
-        this.bgmAudio.play().catch(() => {})
-      }
-
-      if (!this.mixer) { this._isDancing = false; return }
-      const danceAction = this.mixer.clipAction(clip)
-      danceAction.setLoop(THREE.LoopRepeat, Infinity)
-      this.crossFadeTo(danceAction)
-    } catch (err) {
-      console.error('Failed to start dance:', err)
-      this._isDancing = false
+      this.playAction(next.name, next.hold)
+      return
     }
-  }
-
-  /** Stop BGM with fade-out. Safe to call anytime. */
-  private stopBgm() {
-    if (!this.bgmAudio) return
-    const audio = this.bgmAudio
-    this.bgmAudio = null
-    const fadeInterval = setInterval(() => {
-      audio.volume = Math.max(0, audio.volume - 0.1)
-      if (audio.volume <= 0) {
-        clearInterval(fadeInterval)
-        audio.pause()
-      }
-    }, 50)
-  }
 
-  /** Stop BGM instantly without fade. Used to prevent duplicate playback. */
-  private stopBgmImmediate() {
-    if (!this.bgmAudio) return
-    this.bgmAudio.pause()
-    this.bgmAudio = null
+    if (hold) {
+      this.holdTimer = setTimeout(() => {
+        if (gen !== this._actionGeneration) return
+        this._actionPlaying = false
+        this.startIdle()
+      }, 10000)
+    } else {
+      this._actionPlaying = false
+      this.startIdle()
+    }
   }
 
   /** Cleanup when controller is being destroyed (model reload etc.) */
   dispose() {
-    this.stopBgm()
     this.clearTimers()
-    this.disableIK()
-    this._isDancing = false
     this._actionPlaying = false
     this._actionGeneration++
     if (this.mixer) {
@@ -339,19 +272,7 @@ export class MotionController {
 
   // ── Internal ────────────────────────────────────────────────────────────
 
-  private disableIK() {
-    if (this._ikActive) {
-      this._ikActive = false
-      this.ikHandler.disableAll()
-    }
-  }
-
   private async loadClip(preset: MotionPreset): Promise<THREE.AnimationClip | null> {
-    // For VMD, always rebuild clip with IK binding (IK targets are per-play)
-    if (preset.type === 'vmd') {
-      return this.loadVMDWithIK(preset.url)
-    }
-
     const cached = this.clipCache.get(preset.url)
     if (cached) return cached
 
@@ -379,32 +300,6 @@ export class MotionController {
     return clip
   }
 
-  private async loadVMDWithIK(url: string): Promise<THREE.AnimationClip | null> {
-    try {
-      // Cache parsed VMD data (parsing is expensive), but rebuild clip each time
-      // because IK binding creates unique target objects per play
-      let data = this.vmdDataCache.get(url)
-      if (!data) {
-        data = await parseVMDAnimation(url, this.vrm)
-        this.vmdDataCache.set(url, data)
-      }
-      const clip = bindVMDToVRM(data, this.vrm, this.ikHandler)
-      this._ikActive = true
-      return clip
-    } catch (err) {
-      console.error('Failed to load VMD:', url, err)
-      return null
-    }
-  }
-
-  private async loadClipByUrl(url: string): Promise<THREE.AnimationClip | null> {
-    const ext = url.split('.').pop()?.toLowerCase()
-    const type: MotionFileType =
-      ext === 'vmd' ? 'vmd' :
-      ext === 'fbx' ? 'fbx' : 'vrma'
-    return this.loadClip({ label: url, type, url })
-  }
-
   private async loadVRMA(url: string): Promise<THREE.AnimationClip | null> {
     try {
       const gltf = await this.gltfLoader.loadAsync(url)

src/components/friend/frontend/vmd-loader.ts

@@ -1,663 +0,0 @@
-/**
- * VMD animation loader for VRM models.
- * Ported from lobe-vidol's VMDAnimation module.
- *
- * Parses VMD binary files (via mmd-parser), converts bone/morph keyframes
- * to VRM-compatible AnimationClips with IK support.
- */
-
-import {
-  VRMExpressionPresetName as BlendShapePresetName,
-  VRMHumanBoneName as HumanoidBoneName,
-} from '@pixiv/three-vrm-core'
-import type { VRM, VRMHumanBoneName } from '@pixiv/three-vrm'
-import { CharsetEncoder, Parser } from 'mmd-parser'
-import type { VmdFile } from 'mmd-parser'
-import {
-  AnimationClip,
-  KeyframeTrack,
-  MathUtils,
-  NumberKeyframeTrack,
-  Object3D,
-  Quaternion,
-  QuaternionKeyframeTrack,
-  Vector3,
-  VectorKeyframeTrack,
-} from 'three'
-
-import { VRMIKHandler } from './vrm-ik-handler'
-
-// ── Types ───────────────────────────────────────────────────────────────────
-
-export interface VMDAnimationData {
-  duration: number
-  timelines: Timeline[]
-}
-
-interface Timeline {
-  name: VRMHumanBoneName | BlendShapePresetName
-  type: 'position' | 'rotation' | 'morph'
-  isIK?: boolean
-  times: number[]
-  values: number[]
-}
-
-interface VRMOffsets {
-  hipsOffset?: number[]
-  leftFootOffset?: number[]
-  leftToeOffset?: number[]
-  rightFootOffset?: number[]
-  rightToeOffset?: number[]
-}
-
-interface Keyframe {
-  boneName: string
-  frameNum: number
-  position: Vector3
-  rotation: Quaternion
-}
-
-interface LerpKeyframe extends Keyframe {
-  isNew?: boolean
-}
-
-interface IKOffsetInit {
-  x: number
-  y: number
-  z: number
-  s?: number
-  sx?: number
-  sy?: number
-  sz?: number
-  o?: number
-  ox?: number
-  oy?: number
-  oz?: number
-  dx?: boolean
-  dy?: boolean
-  dz?: boolean
-}
-
-// ── Hot-patch CharsetEncoder to forgive invalid charcodes ───────────────────
-
-{
-  const { s2u } = CharsetEncoder.prototype
-  CharsetEncoder.prototype.s2u = function (array: any) {
-    try {
-      return s2u.call(this, array)
-    } catch (e) {
-      if (typeof e === 'string') {
-        console.warn(`Charset encoder: ${e}`)
-        return ''
-      }
-      throw e
-    }
-  }
-}
-
-// ── Constants ───────────────────────────────────────────────────────────────
-
-function isTruely<T>(x: T): x is Exclude<T, false | '' | 0 | null | undefined> {
-  return !!x
-}
-
-const tempV3 = new Vector3()
-const tempQ = new Quaternion()
-
-const VMDBoneNames = {
-  Root: '全ての親',
-  Center: 'センター',
-  Hips: '下半身',
-  Spine: '上半身',
-  Chest: '上半身2',
-  Neck: '首',
-  Head: '頭',
-  LeftEye: '左目',
-  LeftShoulder: '左肩',
-  LeftUpperArm: '左腕',
-  LeftLowerArm: '左ひじ',
-  LeftHand: '左手首',
-  LeftThumbProximal: '左親指０',
-  LeftThumbIntermediate: '左親指１',
-  LeftThumbDistal: '左親指２',
-  LeftIndexProximal: '左人指１',
-  LeftIndexIntermediate: '左人指２',
-  LeftIndexDistal: '左人指３',
-  LeftMiddleProximal: '左中指１',
-  LeftMiddleIntermediate: '左中指２',
-  LeftMiddleDistal: '左中指３',
-  LeftRingProximal: '左薬指１',
-  LeftRingIntermediate: '左薬指２',
-  LeftRingDistal: '左薬指３',
-  LeftLittleProximal: '左小指１',
-  LeftLittleIntermediate: '左小指２',
-  LeftLittleDistal: '左小指３',
-  LeftUpperLeg: '左足',
-  LeftLowerLeg: '左ひざ',
-  LeftFoot: '左足首',
-  LeftFootIK: '左足ＩＫ',
-  LeftToes: '左つま先',
-  LeftToeIK: '左つま先ＩＫ',
-  RightEye: '右目',
-  RightShoulder: '右肩',
-  RightUpperArm: '右腕',
-  RightLowerArm: '右ひじ',
-  RightHand: '右手首',
-  RightThumbProximal: '右親指０',
-  RightThumbIntermediate: '右親指１',
-  RightThumbDistal: '右親指２',
-  RightIndexProximal: '右人指１',
-  RightIndexIntermediate: '右人指２',
-  RightIndexDistal: '右人指３',
-  RightMiddleProximal: '右中指１',
-  RightMiddleIntermediate: '右中指２',
-  RightMiddleDistal: '右中指３',
-  RightRingProximal: '右薬指１',
-  RightRingIntermediate: '右薬指２',
-  RightRingDistal: '右薬指３',
-  RightLittleProximal: '右小指１',
-  RightLittleIntermediate: '右小指２',
-  RightLittleDistal: '右小指３',
-  RightUpperLeg: '右足',
-  RightLowerLeg: '右ひざ',
-  RightFoot: '右足首',
-  RightFootIK: '右足ＩＫ',
-  RightToes: '右つま先',
-  RightToeIK: '右つま先ＩＫ',
-} as const
-
-const VMDMorphNames = {
-  Blink: 'まばたき',
-  BlinkR: 'ウィンク',
-  BlinkL: 'ウィンク右',
-  A: 'あ',
-  I: 'い',
-  U: 'う',
-  E: 'え',
-  O: 'お',
-} as const
-
-const VRM_VMD_BONE_MAP = new Map<string, HumanoidBoneName>([
-  [VMDBoneNames.Hips, HumanoidBoneName.Hips],
-  [VMDBoneNames.Spine, HumanoidBoneName.Spine],
-  [VMDBoneNames.Chest, HumanoidBoneName.Chest],
-  [VMDBoneNames.Neck, HumanoidBoneName.Neck],
-  [VMDBoneNames.Head, HumanoidBoneName.Head],
-  [VMDBoneNames.LeftEye, HumanoidBoneName.LeftEye],
-  [VMDBoneNames.LeftShoulder, HumanoidBoneName.LeftShoulder],
-  [VMDBoneNames.LeftUpperArm, HumanoidBoneName.LeftUpperArm],
-  [VMDBoneNames.LeftLowerArm, HumanoidBoneName.LeftLowerArm],
-  [VMDBoneNames.LeftHand, HumanoidBoneName.LeftHand],
-  [VMDBoneNames.LeftThumbProximal, HumanoidBoneName.LeftThumbProximal],
-  [VMDBoneNames.LeftThumbIntermediate, HumanoidBoneName.LeftThumbMetacarpal],
-  [VMDBoneNames.LeftThumbDistal, HumanoidBoneName.LeftThumbDistal],
-  [VMDBoneNames.LeftIndexProximal, HumanoidBoneName.LeftIndexProximal],
-  [VMDBoneNames.LeftIndexIntermediate, HumanoidBoneName.LeftIndexIntermediate],
-  [VMDBoneNames.LeftIndexDistal, HumanoidBoneName.LeftIndexDistal],
-  [VMDBoneNames.LeftMiddleProximal, HumanoidBoneName.LeftMiddleProximal],
-  [VMDBoneNames.LeftMiddleIntermediate, HumanoidBoneName.LeftMiddleIntermediate],
-  [VMDBoneNames.LeftMiddleDistal, HumanoidBoneName.LeftMiddleDistal],
-  [VMDBoneNames.LeftRingProximal, HumanoidBoneName.LeftRingProximal],
-  [VMDBoneNames.LeftRingIntermediate, HumanoidBoneName.LeftRingIntermediate],
-  [VMDBoneNames.LeftRingDistal, HumanoidBoneName.LeftRingDistal],
-  [VMDBoneNames.LeftLittleProximal, HumanoidBoneName.LeftLittleProximal],
-  [VMDBoneNames.LeftLittleIntermediate, HumanoidBoneName.LeftLittleIntermediate],
-  [VMDBoneNames.LeftLittleDistal, HumanoidBoneName.LeftLittleDistal],
-  [VMDBoneNames.LeftUpperLeg, HumanoidBoneName.LeftUpperLeg],
-  [VMDBoneNames.LeftLowerLeg, HumanoidBoneName.LeftLowerLeg],
-  [VMDBoneNames.LeftFoot, HumanoidBoneName.LeftFoot],
-  [VMDBoneNames.LeftToes, HumanoidBoneName.LeftToes],
-  [VMDBoneNames.RightEye, HumanoidBoneName.RightEye],
-  [VMDBoneNames.RightShoulder, HumanoidBoneName.RightShoulder],
-  [VMDBoneNames.RightUpperArm, HumanoidBoneName.RightUpperArm],
-  [VMDBoneNames.RightLowerArm, HumanoidBoneName.RightLowerArm],
-  [VMDBoneNames.RightHand, HumanoidBoneName.RightHand],
-  [VMDBoneNames.RightThumbProximal, HumanoidBoneName.RightThumbProximal],
-  [VMDBoneNames.RightThumbIntermediate, HumanoidBoneName.RightThumbMetacarpal],
-  [VMDBoneNames.RightThumbDistal, HumanoidBoneName.RightThumbDistal],
-  [VMDBoneNames.RightIndexProximal, HumanoidBoneName.RightIndexProximal],
-  [VMDBoneNames.RightIndexIntermediate, HumanoidBoneName.RightIndexIntermediate],
-  [VMDBoneNames.RightIndexDistal, HumanoidBoneName.RightIndexDistal],
-  [VMDBoneNames.RightMiddleProximal, HumanoidBoneName.RightMiddleProximal],
-  [VMDBoneNames.RightMiddleIntermediate, HumanoidBoneName.RightMiddleIntermediate],
-  [VMDBoneNames.RightMiddleDistal, HumanoidBoneName.RightMiddleDistal],
-  [VMDBoneNames.RightRingProximal, HumanoidBoneName.RightRingProximal],
-  [VMDBoneNames.RightRingIntermediate, HumanoidBoneName.RightRingIntermediate],
-  [VMDBoneNames.RightRingDistal, HumanoidBoneName.RightRingDistal],
-  [VMDBoneNames.RightLittleProximal, HumanoidBoneName.RightLittleProximal],
-  [VMDBoneNames.RightLittleIntermediate, HumanoidBoneName.RightLittleIntermediate],
-  [VMDBoneNames.RightLittleDistal, HumanoidBoneName.RightLittleDistal],
-  [VMDBoneNames.RightUpperLeg, HumanoidBoneName.RightUpperLeg],
-  [VMDBoneNames.RightLowerLeg, HumanoidBoneName.RightLowerLeg],
-  [VMDBoneNames.RightFoot, HumanoidBoneName.RightFoot],
-  [VMDBoneNames.RightToes, HumanoidBoneName.RightToes],
-])
-
-const VMD_VRM_IK_MAP = new Map<string, HumanoidBoneName>([
-  [VMDBoneNames.LeftFootIK, HumanoidBoneName.LeftFoot],
-  [VMDBoneNames.LeftToeIK, HumanoidBoneName.LeftToes],
-  [VMDBoneNames.RightFootIK, HumanoidBoneName.RightFoot],
-  [VMDBoneNames.RightToeIK, HumanoidBoneName.RightToes],
-])
-
-const VMD_BONE_NAMES = new Set<string>(VRM_VMD_BONE_MAP.keys())
-Array.from(VMD_VRM_IK_MAP.keys()).forEach(VMD_BONE_NAMES.add, VMD_BONE_NAMES)
-VMD_BONE_NAMES.add(VMDBoneNames.Root)
-VMD_BONE_NAMES.add(VMDBoneNames.Center)
-
-const VMD_VRM_MORPH_MAP = new Map<string, BlendShapePresetName>([
-  [VMDMorphNames.Blink, BlendShapePresetName.Blink],
-  [VMDMorphNames.BlinkL, BlendShapePresetName.BlinkLeft],
-  [VMDMorphNames.BlinkR, BlendShapePresetName.BlinkRight],
-  [VMDMorphNames.A, BlendShapePresetName.Aa],
-  [VMDMorphNames.I, BlendShapePresetName.Ih],
-  [VMDMorphNames.U, BlendShapePresetName.Ou],
-  [VMDMorphNames.E, BlendShapePresetName.Ee],
-  [VMDMorphNames.O, BlendShapePresetName.Oh],
-])
-
-const IK_OFFSET_INIT = new Map<string, IKOffsetInit>([
-  [VMDBoneNames.Center, { x: 0, y: 1, z: 0, s: 10 }],
-  [VMDBoneNames.LeftFootIK, { x: 1, y: 1, z: 0, s: 10, dx: true }],
-  [VMDBoneNames.RightFootIK, { x: -1, y: 1, z: 0, s: 10, dx: true }],
-  [VMDBoneNames.LeftToeIK, { x: 0, y: -1, z: -1, s: 10, oy: 2.5, dx: true, dz: true }],
-  [VMDBoneNames.RightToeIK, { x: 0, y: -1, z: -1, s: 10, oy: 2.5, dx: true, dz: true }],
-])
-
-const V3_ZERO = new Vector3()
-const Q_IDENTITY = new Quaternion()
-const Z_30_DEG_CW = new Quaternion().setFromAxisAngle(tempV3.set(0, 0, 1), 30 * MathUtils.DEG2RAD)
-const Z_30_DEG_CCW = Z_30_DEG_CW.clone().invert()
-
-// ── VMD Parsing ────────��────────────────────────────────────────────────────
-
-function convertVMD(buffer: ArrayBufferLike, vrmOffset?: VRMOffsets): VMDAnimationData {
-  const vmd = new Parser().parseVmd(buffer)
-  const morphs = convertMorphs(vmd)
-  const motions = convertMotions(vmd, vrmOffset)
-  return {
-    duration: Math.max(morphs.duration, motions.duration),
-    timelines: Array.prototype.concat(morphs.timelines, motions.timelines),
-  }
-}
-
-function convertMorphs({ morphs }: VmdFile): VMDAnimationData {
-  sortFrames(morphs)
-  const timelines = new Map<string, Timeline>()
-  for (const { morphName, weight, frameNum } of morphs) {
-    const name = VMD_VRM_MORPH_MAP.get(morphName)
-    if (!name) continue
-    let timeline = timelines.get(name)
-    if (!timeline)
-      timelines.set(name, (timeline = { name, type: 'morph', times: [], values: [] }))
-    const { times, values } = timeline
-    const time = frameNum / 30
-    const timeIndex = times.findIndex((t) => t === time)
-    if (timeIndex < 0) {
-      times.push(time)
-      values.push(weight)
-    } else {
-      values[timeIndex] = Math.max(values[timeIndex], weight)
-    }
-  }
-  return {
-    timelines: Array.from(timelines.values()),
-    duration: getLastFrameNum(morphs) / 30,
-  }
-}
-
-function convertMotions({ motions }: VmdFile, vrmOffset?: VRMOffsets): VMDAnimationData {
-  sortFrames(motions)
-  const timelines: Timeline[] = []
-  const boneTlMap = new Map<string, Keyframe[]>()
-  for (const name of VMD_BONE_NAMES) boneTlMap.set(name, [])
-  for (const { boneName, frameNum, position, rotation } of motions)
-    boneTlMap.get(boneName)?.push({
-      boneName,
-      frameNum,
-      position: new Vector3().fromArray(position),
-      rotation: new Quaternion().fromArray(rotation),
-    })
-  fixPositions(boneTlMap, vrmOffset)
-  for (const [boneName, timeline] of boneTlMap) {
-    let name = VRM_VMD_BONE_MAP.get(boneName)
-    let isIK = false
-    if (!name) {
-      isIK = VMD_VRM_IK_MAP.has(boneName)
-      name = VMD_VRM_IK_MAP.get(boneName)
-    }
-    if (name) {
-      const times: number[] = []
-      const positions: number[] = []
-      const rotations: number[] = []
-      for (const f of timeline) {
-        const i = times.push(f.frameNum / 30) - 1
-        f.position.toArray(positions, i * 3)
-        f.rotation.toArray(rotations, i * 4)
-      }
-      if (times.length) {
-        timelines.push({ name, type: 'rotation', isIK, times, values: rotations })
-        if (isIK || name === HumanoidBoneName.Hips)
-          timelines.push({ name, type: 'position', isIK, times, values: positions })
-      }
-    }
-  }
-  return { timelines, duration: getLastFrameNum(motions) / 30 }
-}
-
-function fixPositions(tls: Map<string, Keyframe[]>, vrmOffset: VRMOffsets = {}) {
-  const centerOffset = mergeTimelines(
-    tls,
-    VMDBoneNames.Center,
-    offsetToTimeline(VMDBoneNames.Center, vrmOffset.hipsOffset),
-  )
-  const hipsTl = mergeTimelines(tls, VMDBoneNames.Root, centerOffset, VMDBoneNames.Hips)
-  tls.set(
-    VMDBoneNames.Spine,
-    localizeTimeline(
-      hipsTl,
-      mergeTimelines(tls, VMDBoneNames.Root, centerOffset, VMDBoneNames.Hips),
-    ),
-  )
-  tls.set(VMDBoneNames.Hips, hipsTl)
-  const leftFootOffset = offsetToTimeline(VMDBoneNames.LeftFootIK, vrmOffset.leftFootOffset)
-  const rightFootOffset = offsetToTimeline(VMDBoneNames.RightFootIK, vrmOffset.rightFootOffset)
-  if (tls.has(VMDBoneNames.LeftToeIK))
-    tls.set(
-      VMDBoneNames.LeftToeIK,
-      mergeTimelines(
-        tls,
-        VMDBoneNames.Root,
-        leftFootOffset,
-        VMDBoneNames.LeftFootIK,
-        offsetToTimeline(VMDBoneNames.RightToeIK, vrmOffset.leftToeOffset),
-        VMDBoneNames.LeftToeIK,
-      ),
-    )
-  if (tls.has(VMDBoneNames.RightToeIK))
-    tls.set(
-      VMDBoneNames.RightToeIK,
-      mergeTimelines(
-        tls,
-        VMDBoneNames.Root,
-        rightFootOffset,
-        VMDBoneNames.RightFootIK,
-        offsetToTimeline(VMDBoneNames.RightToeIK, vrmOffset.rightToeOffset),
-        VMDBoneNames.RightToeIK,
-      ),
-    )
-  if (tls.has(VMDBoneNames.LeftFootIK))
-    tls.set(
-      VMDBoneNames.LeftFootIK,
-      mergeTimelines(tls, VMDBoneNames.Root, leftFootOffset, VMDBoneNames.LeftFootIK),
-    )
-  if (tls.has(VMDBoneNames.RightFootIK))
-    tls.set(
-      VMDBoneNames.RightFootIK,
-      mergeTimelines(tls, VMDBoneNames.Root, rightFootOffset, VMDBoneNames.RightFootIK),
-    )
-  tls.delete(VMDBoneNames.Center)
-  tls.delete(VMDBoneNames.Root)
-  for (const tl of tls.values())
-    for (const f of tl) {
-      f.position.x *= -1
-      f.rotation.x *= -1
-      f.rotation.w *= -1
-      switch (f.boneName) {
-        case VMDBoneNames.LeftUpperArm:
-          f.rotation.multiply(Z_30_DEG_CW)
-          break
-        case VMDBoneNames.RightUpperArm:
-          f.rotation.multiply(Z_30_DEG_CCW)
-          break
-        case VMDBoneNames.LeftLowerArm:
-        case VMDBoneNames.LeftHand:
-        case VMDBoneNames.LeftThumbProximal:
-        case VMDBoneNames.LeftThumbIntermediate:
-        case VMDBoneNames.LeftThumbDistal:
-        case VMDBoneNames.LeftIndexProximal:
-        case VMDBoneNames.LeftIndexIntermediate:
-        case VMDBoneNames.LeftIndexDistal:
-        case VMDBoneNames.LeftMiddleProximal:
-        case VMDBoneNames.LeftMiddleIntermediate:
-        case VMDBoneNames.LeftMiddleDistal:
-        case VMDBoneNames.LeftRingProximal:
-        case VMDBoneNames.LeftRingIntermediate:
-        case VMDBoneNames.LeftRingDistal:
-        case VMDBoneNames.LeftLittleProximal:
-        case VMDBoneNames.LeftLittleIntermediate:
-        case VMDBoneNames.LeftLittleDistal:
-          f.rotation.premultiply(Z_30_DEG_CCW).multiply(Z_30_DEG_CW)
-          break
-        case VMDBoneNames.RightLowerArm:
-        case VMDBoneNames.RightHand:
-        case VMDBoneNames.RightThumbProximal:
-        case VMDBoneNames.RightThumbIntermediate:
-        case VMDBoneNames.RightThumbDistal:
-        case VMDBoneNames.RightIndexProximal:
-        case VMDBoneNames.RightIndexIntermediate:
-        case VMDBoneNames.RightIndexDistal:
-        case VMDBoneNames.RightMiddleProximal:
-        case VMDBoneNames.RightMiddleIntermediate:
-        case VMDBoneNames.RightMiddleDistal:
-        case VMDBoneNames.RightRingProximal:
-        case VMDBoneNames.RightRingIntermediate:
-        case VMDBoneNames.RightRingDistal:
-        case VMDBoneNames.RightLittleProximal:
-        case VMDBoneNames.RightLittleIntermediate:
-        case VMDBoneNames.RightLittleDistal:
-          f.rotation.premultiply(Z_30_DEG_CW).multiply(Z_30_DEG_CCW)
-          break
-      }
-      f.position.multiplyScalar(0.1)
-    }
-}
-
-function offsetToTimeline(boneName: string, rawPos: number[] | undefined): Keyframe[] {
-  const init = IK_OFFSET_INIT.get(boneName)!
-  return [
-    {
-      boneName: `${boneName}Offset`,
-      frameNum: 0,
-      position: rawPos
-        ? new Vector3(
-            init.dx || isNaN(rawPos[0])
-              ? init.x
-              : rawPos[0] * (init.sx ?? 1) * (init.s ?? 1) + (init.ox ?? 0) + (init.o ?? 0),
-            init.dy || isNaN(rawPos[1])
-              ? init.y
-              : rawPos[1] * (init.sy ?? 1) * (init.s ?? 1) + (init.oy ?? 0) + (init.o ?? 0),
-            init.dz || isNaN(rawPos[2])
-              ? init.z
-              : rawPos[2] * (init.sz ?? 1) * (init.s ?? 1) + (init.oz ?? 0) + (init.o ?? 0),
-          )
-        : new Vector3(init.x, init.y, init.z),
-      rotation: Q_IDENTITY,
-    },
-  ]
-}
-
-function mergeTimelines(tlsMap: Map<string, Keyframe[]>, ...tlsKey: (Keyframe[] | string)[]) {
-  const tls = tlsKey.map(resolveTimeline, tlsMap).filter(isTruely)
-  let boneName: string
-  const last = tlsKey[tlsKey.length - 1]
-  if (typeof last === 'string') boneName = last
-  else boneName = tls[tls.length - 1][0]?.boneName ?? ''
-  const results: Keyframe[] = []
-  for (const tl of tls)
-    for (const f of tl) {
-      const { frameNum } = f
-      if (frameNum < results.length && results[frameNum] != null) continue
-      const position = new Vector3()
-      const rotation = new Quaternion()
-      for (const otl of tls) {
-        if (!otl.length) continue
-        const f2 = otl[0].boneName === f.boneName ? f : lerpKeyframe(otl, frameNum)
-        position.add(tempV3.copy(f2.position).applyQuaternion(rotation))
-        rotation.multiply(f2.rotation)
-      }
-      results[frameNum] = { boneName, frameNum, position, rotation }
-    }
-  return results.filter(isTruely)
-}
-
-function localizeTimeline(parent: Keyframe[], child: Keyframe[]): Keyframe[]
-function localizeTimeline(...tls: [Keyframe[], Keyframe[]]) {
-  const { boneName } = tls[1][0]
-  const results: Keyframe[] = []
-  let isChild = false
-  for (const tl of tls) {
-    for (const f of tl) {
-      const { frameNum } = f
-      if (frameNum < results.length && results[frameNum] != null) continue
-      const fp: LerpKeyframe = isChild ? lerpKeyframe(tls[0], frameNum) : f
-      const fc: LerpKeyframe = isChild ? f : lerpKeyframe(tls[1], frameNum)
-      results[frameNum] = {
-        boneName,
-        frameNum,
-        position: (fc.isNew ? fc.position : fc.position.clone()).sub(fp.position),
-        rotation: (fc.isNew ? fc.rotation : fc.rotation.clone()).multiply(
-          tempQ.copy(fp.rotation).invert(),
-        ),
-      }
-    }
-    isChild = true
-  }
-  return results.filter(isTruely)
-}
-
-function lerpKeyframe(tl: Keyframe[], frameNum: number): LerpKeyframe {
-  if (!tl)
-    return { boneName: '', frameNum, position: V3_ZERO, rotation: Q_IDENTITY }
-  const nextIndex = tl.findIndex((keyframe) => frameNum < keyframe.frameNum)
-  switch (nextIndex) {
-    case 0:
-      return tl[0]
-    case -1:
-      return tl[tl.length - 1]
-    case frameNum:
-      return tl[frameNum]
-  }
-  const prevFrame = tl[nextIndex - 1]
-  const nextFrame = tl[nextIndex]
-  const prevFrameNum = prevFrame.frameNum
-  const nextFrameNum = nextFrame.frameNum
-  const v = (frameNum - prevFrameNum) / (nextFrameNum - prevFrameNum)
-  return {
-    boneName: tl[0].boneName,
-    frameNum,
-    position: prevFrame.position.clone().lerp(nextFrame.position, v),
-    rotation: prevFrame.rotation.clone().slerp(nextFrame.rotation, v),
-    isNew: true,
-  }
-}
-
-function resolveTimeline(this: Map<string, Keyframe[]>, key: Keyframe[] | string) {
-  return Array.isArray(key) ? key : this.get(key)
-}
-
-function sortFrames<T extends { frameNum: number }>(f: ArrayLike<T> | Iterable<T>) {
-  return (Array.isArray(f) ? (f as T[]) : Array.from(f)).sort((a, b) => a.frameNum - b.frameNum)
-}
-
-function getLastFrameNum(f: { frameNum: number }[]) {
-  return f.length ? f[f.length - 1].frameNum : 0
-}
-
-// ── VRM Offset Calculation ──────────────────────────────────────────────────
-
-function calculatePosition(from?: Object3D | null, to?: Object3D | null) {
-  if (!from || !to) return
-  let current: Object3D | null = to
-  const chain: Object3D[] = [to]
-  while (current.parent && current !== from) {
-    chain.push(current.parent)
-    current = current.parent
-  }
-  if (current === null) return
-  chain.reverse()
-  const position = tempV3.set(0, 0, 0)
-  for (const node of chain) position.add(node.position)
-  return position.toArray()
-}
-
-function toOffset(vrm: VRM): VRMOffsets {
-  const { humanoid } = vrm
-  if (!humanoid) throw new Error('VRM does not have humanoid')
-  const currentPose = humanoid.getNormalizedPose()
-  humanoid.resetNormalizedPose()
-  const hips = humanoid.getNormalizedBoneNode(HumanoidBoneName.Hips)
-  const leftFoot = humanoid.getNormalizedBoneNode(HumanoidBoneName.LeftFoot)
-  const leftToe = humanoid.getNormalizedBoneNode(HumanoidBoneName.LeftToes)
-  const rightFoot = humanoid.getNormalizedBoneNode(HumanoidBoneName.RightFoot)
-  const rightToe = humanoid.getNormalizedBoneNode(HumanoidBoneName.RightToes)
-  humanoid.setNormalizedPose(currentPose)
-  return {
-    hipsOffset: calculatePosition(hips, hips),
-    leftFootOffset: calculatePosition(hips, leftFoot),
-    leftToeOffset: calculatePosition(leftFoot, leftToe),
-    rightFootOffset: calculatePosition(hips, rightFoot),
-    rightToeOffset: calculatePosition(rightFoot, rightToe),
-  }
-}
-
-// ── VRM Binding ─────────────────────────────────────────────────────────────
-
-function bindToVRM(data: VMDAnimationData, vrm: VRM): AnimationClip {
-  const tracks: KeyframeTrack[] = []
-  for (const { type, name, isIK, times, values } of data.timelines) {
-    let srcName: string
-    switch (type) {
-      case 'morph': {
-        const track = vrm.expressionManager?.getExpressionTrackName(name as BlendShapePresetName)
-        if (!track) continue
-        srcName = track
-        break
-      }
-      case 'position':
-      case 'rotation': {
-        if (isIK) {
-          const handler = VRMIKHandler.get(vrm)
-          const target = handler.getAndEnableIK(name as VRMHumanBoneName)
-          if (!target) continue
-          srcName = target.name
-        } else {
-          const bone = vrm.humanoid?.getNormalizedBone(name as VRMHumanBoneName)
-          if (!bone) continue
-          srcName = bone.node.name
-        }
-        break
-      }
-      default:
-        continue
-    }
-    switch (type) {
-      case 'morph':
-        tracks.push(new NumberKeyframeTrack(srcName, times, values))
-        break
-      case 'position':
-        tracks.push(new VectorKeyframeTrack(`${srcName}.position`, times, values))
-        break
-      case 'rotation':
-        tracks.push(new QuaternionKeyframeTrack(`${srcName}.quaternion`, times, values))
-        break
-    }
-  }
-  return new AnimationClip(`clip${Date.now()}`, data.duration, tracks)
-}
-
-// ── Public API (matches motion-controller imports) ──────────────────────────
-
-export async function parseVMDAnimation(url: string, vrm: VRM): Promise<VMDAnimationData> {
-  const res = await fetch(url)
-  const buffer = await res.arrayBuffer()
-  return convertVMD(buffer, toOffset(vrm))
-}
-
-export function bindVMDToVRM(
-  data: VMDAnimationData,
-  vrm: VRM,
-  _ikHandler: VRMIKHandler,
-): AnimationClip {
-  return bindToVRM(data, vrm)
-}

src/components/friend/frontend/vrm-ik-handler.ts

@@ -1,236 +0,0 @@
-import { VRM, VRMHumanBoneName } from '@pixiv/three-vrm'
-import { Bone, MathUtils, Object3D, Quaternion, Vector3 } from 'three'
-
-import { clampVector3ByRadian } from './three-helpers'
-
-const BoneNames = VRMHumanBoneName
-const boneNameOrder: VRMHumanBoneName[] = [
-  BoneNames.Chest,
-  BoneNames.Head,
-  BoneNames.Hips,
-  BoneNames.Jaw,
-  BoneNames.LeftEye,
-  BoneNames.LeftFoot,
-  BoneNames.LeftHand,
-  BoneNames.LeftIndexDistal,
-  BoneNames.LeftIndexIntermediate,
-  BoneNames.LeftIndexProximal,
-  BoneNames.LeftLittleDistal,
-  BoneNames.LeftLittleIntermediate,
-  BoneNames.LeftLittleProximal,
-  BoneNames.LeftLowerArm,
-  BoneNames.LeftLowerLeg,
-  BoneNames.LeftMiddleDistal,
-  BoneNames.LeftMiddleIntermediate,
-  BoneNames.LeftMiddleProximal,
-  BoneNames.LeftRingDistal,
-  BoneNames.LeftRingIntermediate,
-  BoneNames.LeftRingProximal,
-  BoneNames.LeftShoulder,
-  BoneNames.LeftThumbDistal,
-  BoneNames.LeftThumbMetacarpal,
-  BoneNames.LeftThumbProximal,
-  BoneNames.LeftToes,
-  BoneNames.LeftUpperArm,
-  BoneNames.LeftUpperLeg,
-  BoneNames.Neck,
-  BoneNames.RightEye,
-  BoneNames.RightFoot,
-  BoneNames.RightHand,
-  BoneNames.RightIndexDistal,
-  BoneNames.RightIndexIntermediate,
-  BoneNames.RightIndexProximal,
-  BoneNames.RightLittleDistal,
-  BoneNames.RightLittleIntermediate,
-  BoneNames.RightLittleProximal,
-  BoneNames.RightLowerArm,
-  BoneNames.RightLowerLeg,
-  BoneNames.RightMiddleDistal,
-  BoneNames.RightMiddleIntermediate,
-  BoneNames.RightMiddleProximal,
-  BoneNames.RightRingDistal,
-  BoneNames.RightRingIntermediate,
-  BoneNames.RightRingProximal,
-  BoneNames.RightShoulder,
-  BoneNames.RightThumbDistal,
-  BoneNames.RightThumbMetacarpal,
-  BoneNames.RightThumbProximal,
-  BoneNames.RightToes,
-  BoneNames.RightUpperArm,
-  BoneNames.RightUpperLeg,
-  BoneNames.Spine,
-  BoneNames.UpperChest,
-]
-const boneMap = new Map<VRMHumanBoneName, number>(boneNameOrder.map((b, i) => [b, i]))
-
-interface IKS {
-  effector: number
-  target: number
-  iteration: number
-  links: {
-    enabled: boolean
-    index: number
-    rotationMin?: Vector3
-    rotationMax?: Vector3
-  }[]
-  minAngle?: number
-  maxAngle?: number
-}
-
-const quaternion = new Quaternion()
-const targetPos = new Vector3()
-const targetVec = new Vector3()
-const effectorPos = new Vector3()
-const effectorVec = new Vector3()
-const linkPos = new Vector3()
-const linkScale = new Vector3()
-const axis = new Vector3()
-
-export class VRMIKHandler {
-  private static cache = new WeakMap<VRM, VRMIKHandler>()
-
-  static get(model: VRM) {
-    let handler = this.cache.get(model)
-    if (!handler) {
-      handler = new VRMIKHandler(model)
-      this.cache.set(model, handler)
-    }
-    return handler
-  }
-
-  private targets = new Map<number, Object3D>()
-  private iks = new Map<number, IKS>()
-  private bones: Bone[]
-  private root: Object3D
-
-  private constructor(public model: VRM) {
-    const { humanoid } = this.model
-    if (!humanoid) throw new Error('VRM does not contains humanoid')
-    this.bones = boneNameOrder.map(humanoid.getRawBoneNode, humanoid) as Bone[]
-    this.root = this.bones[boneMap.get(BoneNames.Hips)!]?.parent ?? this.model.scene
-    const leftFootId = boneMap.get(BoneNames.LeftFoot)!
-    this.iks.set(leftFootId, {
-      effector: leftFootId,
-      target: leftFootId,
-      iteration: 40,
-      maxAngle: 0.5,
-      links: [
-        {
-          enabled: false,
-          index: boneMap.get(BoneNames.LeftLowerLeg)!,
-          rotationMin: new Vector3(-180, 0, 0).multiplyScalar(MathUtils.DEG2RAD),
-          rotationMax: new Vector3(0, 0, 0),
-        },
-        {
-          enabled: false,
-          index: boneMap.get(BoneNames.LeftUpperLeg)!,
-        },
-      ],
-    })
-    const rightFootId = boneMap.get(BoneNames.RightFoot)!
-    this.iks.set(rightFootId, {
-      effector: rightFootId,
-      target: rightFootId,
-      iteration: 40,
-      maxAngle: 0.5,
-      links: [
-        {
-          enabled: false,
-          index: boneMap.get(BoneNames.RightLowerLeg)!,
-          rotationMin: new Vector3(-180, 0, 0).multiplyScalar(MathUtils.DEG2RAD),
-          rotationMax: new Vector3(0, 0, 0),
-        },
-        {
-          enabled: false,
-          index: boneMap.get(BoneNames.RightUpperLeg)!,
-        },
-      ],
-    })
-    const leftToeId = boneMap.get(BoneNames.LeftToes)!
-    this.iks.set(leftToeId, {
-      effector: leftToeId,
-      target: leftToeId,
-      iteration: 3,
-      maxAngle: 4,
-      links: [
-        {
-          enabled: false,
-          index: leftFootId,
-        },
-      ],
-    })
-    const rightToeId = boneMap.get(BoneNames.RightToes)!
-    this.iks.set(rightToeId, {
-      effector: rightToeId,
-      target: rightToeId,
-      iteration: 3,
-      maxAngle: 4,
-      links: [
-        {
-          enabled: false,
-          index: rightFootId,
-        },
-      ],
-    })
-  }
-
-  getAndEnableIK(boneName: VRMHumanBoneName) {
-    return this.getTarget(boneName, true)
-  }
-
-  getTarget(boneName: VRMHumanBoneName, enable?: boolean) {
-    const boneIndex = boneMap.get(boneName)
-    if (boneIndex == null) return
-    let target = this.targets.get(boneIndex)
-    const ik = this.iks.get(boneIndex)!
-    if (enable) for (const link of ik.links) link.enabled = true
-    if (!target) {
-      target = new Object3D()
-      target.name = `${boneName}IK`
-      this.root.add(target)
-      this.targets.set(boneIndex, target)
-    }
-    return target
-  }
-
-  disableAll() {
-    for (const { links } of this.iks.values()) for (const link of links) link.enabled = false
-  }
-
-  update() {
-    for (const ik of this.iks.values()) {
-      const effector = this.bones[ik.effector]
-      const target = this.targets.get(ik.target)
-      if (!effector || !target) continue
-      targetPos.setFromMatrixPosition(target.matrixWorld)
-      const iteration = ik.iteration ?? 1
-      for (let j = 0; j < iteration; j++) {
-        let rotated = false
-        for (const { enabled, index, rotationMin, rotationMax } of ik.links) {
-          if (!enabled) break
-          const link = this.bones[index]
-          link.matrixWorld.decompose(linkPos, quaternion, linkScale)
-          quaternion.invert()
-          effectorPos.setFromMatrixPosition(effector.matrixWorld)
-          effectorVec.subVectors(effectorPos, linkPos).applyQuaternion(quaternion).normalize()
-          targetVec.subVectors(targetPos, linkPos).applyQuaternion(quaternion).normalize()
-          let angle = targetVec.dot(effectorVec)
-          if (angle > 1) angle = 1
-          else if (angle < -1) angle = -1
-          angle = Math.acos(angle)
-          if (angle < 1e-5) continue
-          if (ik.minAngle != null && angle < ik.minAngle) angle = ik.minAngle
-          if (ik.maxAngle != null && angle > ik.maxAngle) angle = ik.maxAngle
-          axis.crossVectors(effectorVec, targetVec).normalize()
-          link.quaternion.multiply(quaternion.setFromAxisAngle(axis, angle))
-
-          clampVector3ByRadian(link.rotation, rotationMin, rotationMax)
-
-          link.updateMatrixWorld(true)
-          rotated = true
-        }
-        if (!rotated) break
-      }
-    }
-  }
-}

src/components/friend/frontend/web-file-picker.ts

@@ -1,23 +0,0 @@
-/**
- * Web file picker utility — replaces Tauri's invoke('pick_*_file').
- * Opens a hidden <input type="file"> and returns the selected File or null.
- */
-export function pickFile(accept: string): Promise<File | null> {
-  return new Promise((resolve) => {
-    const input = document.createElement('input')
-    input.type = 'file'
-    input.accept = accept
-    input.style.display = 'none'
-    input.addEventListener('change', () => {
-      const file = input.files?.[0] ?? null
-      resolve(file)
-      document.body.removeChild(input)
-    })
-    input.addEventListener('cancel', () => {
-      resolve(null)
-      document.body.removeChild(input)
-    })
-    document.body.appendChild(input)
-    input.click()
-  })
-}

src/friend/FriendService.ts

@@ -20,6 +20,7 @@ import { stripForTts } from './text-utils.js';
 import { edgeTts, qwenTts, registerAudioFile, getAudioFile } from './tts.js';
 import { splitSentences } from './text-utils.js';
 import { SileroVad } from './voice/vad-service.js';
+import { HighPassFilter } from './voice/highpass-filter.js';
 import { readFileSync } from 'node:fs';
 import { buildVrmSystemPrompt } from '../skills/bundled/friendPrompt.js';
 
@@ -79,6 +80,8 @@ class FriendService {
   private _flushing = false;
   /** Silero VAD instance (real ML-based voice activity detection) */
   private vadInstance: SileroVad | null = null;
+  /** High-pass filter to remove low-frequency noise (fan/AC hum) before VAD */
+  private highpassFilter = new HighPassFilter(80);
   /** When muted, audio from arecord is not forwarded to STT or VAD (prevents echo) */
   private muted = false;
   /** Timer to automatically unmute after estimated TTS playback */
@@ -118,13 +121,13 @@ class FriendService {
             );
           },
         }, {
-          // Stricter thresholds to reduce false positives from non-speech noise
-          positiveSpeechThreshold: 0.80,    // need 80% confidence
-          negativeSpeechThreshold: 0.50,    // must drop below 50% to stop
-          preSpeechTriggerFrames: 15,        // require ~480ms sustained speech to trigger
-          minSpeechFrames: 6,               // ~192ms minimum confirmed speech
-          redemptionFrames: 20,              // ~640ms silence before segment ends
-          rmsThreshold: 0.01,               // -40dBFS noise floor
+          // Strict thresholds for near-field mic — rejects keyboard/ambient noise
+          positiveSpeechThreshold: 0.90,    // need 90% confidence (was 80%)
+          negativeSpeechThreshold: 0.40,    // drop below 40% to end (was 50%)
+          preSpeechTriggerFrames: 16,        // require ~512ms sustained speech (was 480ms)
+          minSpeechFrames: 8,               // ~256ms min speech (was 192ms)
+          redemptionFrames: 15,              // ~480ms silence before segment end (was 640ms)
+          rmsThreshold: 0.015,              // -36dBFS noise floor (was -40dBFS)
         });
         vad.init().then(() => {
           this.vadInstance = vad;
@@ -265,6 +268,7 @@ class FriendService {
     // audio chunks flow to VAD via the arecord data callback (see loadAudioCapture)
     if (this.vadInstance) {
       try {
+        this.highpassFilter.reset();  // reset filter state for new session
         this.vadInstance.start();
       } catch (e) {
         console.warn('[FriendService] VAD start error (non-fatal):', e);
@@ -803,6 +807,8 @@ class FriendService {
                   for (let i = 0; i < float32.length; i++) {
                     float32[i] = c.readInt16LE(i * 2) / 32768;
                   }
+                  // High-pass filter: remove sub-80Hz noise (fan/AC hum) before VAD
+                  this.highpassFilter.process(float32);
                   this.vadInstance.processAudio(float32).catch(() => {});
                 }
               };

src/friend/prefs.ts

@@ -17,11 +17,7 @@ export interface FriendPrefs {
   tracking?: 'mouse' | 'camera';
   volume?: number;
   uiAlign?: 'left' | 'right';
-  screenObserve?: boolean;
-  screenObserveInterval?: number;
   language?: 'zh' | 'en';
-  currentDance?: string;
-  hideMood?: boolean;
   /** STT provider: browser | anthropic | local | doubao | groq */
   sttProvider?: 'browser' | 'anthropic' | 'local' | 'doubao' | 'groq';
   /** STT language override (e.g. 'en', 'zh', 'ja') */

src/friend/sse.ts

@@ -38,6 +38,7 @@ export type VrmBroadcastPayload = {
   text?: string;
   emotion?: string;
   emotionIntensity?: number;
+  action?: string;
   audioUrl?: string;
   audioIndex?: number;
   clearText?: boolean;

src/friend/voice/highpass-filter.ts

@@ -0,0 +1,54 @@
+/**
+ * First-order IIR high-pass filter for DC offset removal and low-frequency noise rejection.
+ *
+ * Removes subsonic rumble, fan hum (50/60Hz), and AC line noise before VAD
+ * processing — these are not human voice and can confuse the VAD model.
+ *
+ * Tuned for 16kHz sample rate with adjustable cutoff (~80Hz default).
+ * Preserves all human voice frequencies (fundamental 85-255Hz + formants).
+ *
+ * Formula: y[n] = x[n] - x[n-1] + α ⋅ y[n-1]
+ * where α = exp(-2π ⋅ fc / fs)
+ */
+
+export class HighPassFilter {
+  private prevX = 0
+  private prevY = 0
+  private readonly alpha: number
+
+  /**
+   * @param cutoffHz  -3dB cutoff frequency in Hz (default: 80 — below male voice fundamental)
+   * @param sampleRate  input sample rate (default: 16000 — Silero VAD sample rate)
+   */
+  constructor(cutoffHz = 80, sampleRate = 16000) {
+    const omega = 2 * Math.PI * cutoffHz / sampleRate
+    this.alpha = Math.exp(-omega)
+  }
+
+  /**
+   * Process a Float32Array of audio samples in-place.
+   * Zero-copy — mutates the input array.
+   */
+  process(samples: Float32Array): void {
+    const a = this.alpha
+    let x1 = this.prevX
+    let y1 = this.prevY
+
+    for (let i = 0; i < samples.length; i++) {
+      const x0 = samples[i]
+      const y0 = x0 - x1 + a * y1
+      samples[i] = y0
+      x1 = x0
+      y1 = y0
+    }
+
+    this.prevX = x1
+    this.prevY = y1
+  }
+
+  /** Reset filter state. Call when starting a new capture session. */
+  reset(): void {
+    this.prevX = 0
+    this.prevY = 0
+  }
+}

src/server/api/friend.ts

@@ -1,31 +1,16 @@
 /**
  * Friend API — VRM avatar frontend HTTP routes for VersperClaw.
  *
- * Handles all /plugins/friend/* routes that the Tauri desktop app
- * communicates with. Replaces the OpenClaw gateway routing.
+ * Simplified to only voice + emotion/action features.
  */
 import path from 'node:path';
-import { existsSync, readFileSync, readdirSync, writeFileSync, mkdirSync, statSync, appendFileSync, unlinkSync } from 'node:fs';
+import { existsSync, readFileSync } from 'node:fs';
 import {
   createSseResponse,
-  broadcastToVrm,
 } from '../../friend/sse.js';
 import { getPrefs, setPrefs, updatePrefs, type FriendPrefs } from '../../friend/prefs.js';
 import { edgeTts, qwenTts, registerAudioFile, getAudioFile } from '../../friend/tts.js';
-import { stripForTts } from '../../friend/text-utils.js';
 import { friendService } from '../../friend/FriendService.js';
-import { transcribeAudioFile } from '../../friend/stt-service.js';
-
-const GATEWAY_URL = `http://127.0.0.1:3456`;
-
-/** Resolved at startup from the Bun.serve config. Updated by the server. */
-let serverHost = '127.0.0.1';
-let serverPort = 3456;
-
-export function setFriendServerInfo(host: string, port: number): void {
-  serverHost = host;
-  serverPort = port;
-}
 
 const MIME_TYPES: Record<string, string> = {
   '.mp3': 'audio/mpeg',
@@ -35,29 +20,6 @@ const MIME_TYPES: Record<string, string> = {
   '.webm': 'audio/webm',
 };
 
-const IMAGE_MIME: Record<string, string> = {
-  '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg',
-  '.gif': 'image/gif', '.webp': 'image/webp', '.svg': 'image/svg+xml',
-  '.bmp': 'image/bmp',
-};
-
-// Workspace paths
-const homeDir = process.env.HOME || process.env.USERPROFILE || '';
-// Session tracking for dance import (MP3 follows VMD in user flow)
-let lastImportedDanceId: string | null = null;
-const workspaceRoot = path.join(homeDir, '.config', 'VersperClaw', 'friend');
-
-// Persona files
-const identityPath = path.join(workspaceRoot, 'IDENTITY.md');
-const soulPath = path.join(workspaceRoot, 'SOUL.md');
-
-// Models & dances
-const customModelsDir = path.join(workspaceRoot, 'models');
-const customDancesDir = path.join(workspaceRoot, 'dances');
-
-// Media file registry
-const mediaFileRegistry = new Map<string, string>();
-
 function corsHeaders(): Record<string, string> {
   return {
     'Access-Control-Allow-Origin': '*',
@@ -74,10 +36,6 @@ function notFound(msg = 'Not found'): Response {
   return jsonResponse({ error: msg }, 404);
 }
 
-function readJsonBody(req: Request): Promise<unknown> {
-  return req.json();
-}
-
 /**
  * Route handler for /plugins/friend/*
  */
@@ -90,12 +48,12 @@ export async function handleFriendApi(req: Request, url: URL): Promise<Response>
     return new Response(null, { status: 204, headers: corsHeaders() });
   }
 
-  // ── SSE Events endpoint (GET /plugins/friend/events) ──
+  // ── SSE Events endpoint ──
   if (pathname === '/plugins/friend/events' && method === 'GET') {
     return createSseResponse();
   }
 
-  // ── Audio serving (GET /plugins/friend/audio/:id) ──
+  // ── Audio serving ──
   if (pathname.startsWith('/plugins/friend/audio/') && method === 'GET') {
     const audioId = pathname.split('/plugins/friend/audio/')[1]?.split('?')[0];
     if (!audioId) return jsonResponse({ error: 'missing audio id' }, 400);
@@ -111,72 +69,7 @@ export async function handleFriendApi(req: Request, url: URL): Promise<Response>
     });
   }
 
-  // ── Media serving (GET /plugins/friend/media/:id) ──
-  if (pathname.startsWith('/plugins/friend/media/') && method === 'GET') {
-    const mediaId = pathname.split('/plugins/friend/media/')[1]?.split('?')[0];
-    if (!mediaId) return jsonResponse({ error: 'missing media id' }, 400);
-
-    const filePath = mediaFileRegistry.get(mediaId);
-    if (!filePath || !existsSync(filePath)) return notFound('media not found');
-
-    const ext = path.extname(filePath).toLowerCase();
-    const contentType = IMAGE_MIME[ext] ?? 'application/octet-stream';
-    const data = readFileSync(filePath);
-    return new Response(data, {
-      headers: { 'Content-Type': contentType, 'Cache-Control': 'public, max-age=300', ...corsHeaders() },
-    });
-  }
-
-  // ── Chat endpoint (POST /plugins/friend/chat) ──
-  if (pathname === '/plugins/friend/chat' && method === 'POST') {
-    const body = await readJsonBody(req) as any;
-    const message = body?.message;
-    if (!message) return jsonResponse({ error: 'message required' }, 400);
-
-    // Enqueue the message into the main CLI conversation via FriendService.
-    // The AI response is tracked by useFriendBridge in the REPL and
-    // broadcast back to the VRM display via SSE automatically.
-    try {
-      await friendService.start();
-      friendService.sendText(message);
-    } catch (err) {
-      console.error('[Friend] chat dispatch error:', err);
-      broadcastToVrm({
-        text: `Connection error: ${err instanceof Error ? err.message : String(err)}`,
-      });
-      broadcastToVrm({ replyDone: true });
-    }
-
-    return jsonResponse({ ok: true });
-  }
-
-  // ── STT segment from browser VAD (POST /plugins/friend/voice/stt-segment) ──
-  if (pathname === '/plugins/friend/voice/stt-segment' && method === 'POST') {
-    try {
-      const contentType = req.headers.get('content-type') || '';
-      let audioBuffer: Buffer;
-
-      if (contentType.includes('multipart/form-data') || contentType.includes('application/octet-stream')) {
-        const blob = await req.blob();
-        audioBuffer = Buffer.from(await blob.arrayBuffer());
-      } else {
-        // Accept raw PCM or WAV as binary body
-        audioBuffer = Buffer.from(await req.arrayBuffer());
-      }
-
-      if (audioBuffer.length < 100) {
-        return jsonResponse({ error: 'audio too short' }, 400);
-      }
-
-      const transcript = await friendService.transcribeAudioSegment(audioBuffer);
-      return jsonResponse({ ok: true, text: transcript });
-    } catch (err) {
-      console.error('[Friend] STT segment error:', err);
-      return jsonResponse({ error: String(err) }, 500);
-    }
-  }
-
-  // ── Voice capture (POST /plugins/friend/voice/start, /start-vad, /stop, /status) ──
+  // ── Voice capture endpoints ──
   if (pathname === '/plugins/friend/voice/start' && method === 'POST') {
     try {
       await friendService.startVoiceCapture();
@@ -199,21 +92,7 @@ export async function handleFriendApi(req: Request, url: URL): Promise<Response>
     return jsonResponse(friendService.getCaptureStatus());
   }
 
-  // ── Touch endpoint (POST /plugins/friend/touch) ──
-  if (pathname === '/plugins/friend/touch' && method === 'POST') {
-    const body = await readJsonBody(req) as any;
-    const region = body?.region;
-    const prompt = body?.prompt;
-    if (!region || !prompt) return jsonResponse({ error: 'region and prompt required' }, 400);
-
-    setImmediate(() => {
-      broadcastToVrm({ text: `[Touch: ${region}] ${prompt}` });
-    });
-
-    return jsonResponse({ ok: true });
-  }
-
-  // ── Voice settings (GET/POST /plugins/friend/voice) ──
+  // ── Voice settings ──
   if (pathname === '/plugins/friend/voice') {
     if (method === 'GET') {
       const prefs = getPrefs();
@@ -224,9 +103,8 @@ export async function handleFriendApi(req: Request, url: URL): Promise<Response>
         qwenModel: prefs.qwenModel ?? 'qwen3-tts-flash',
       });
     }
-
     if (method === 'POST') {
-      const body = await readJsonBody(req) as any;
+      const body = await req.json() as any;
       const patch: Partial<FriendPrefs> = {};
       if (body.voice !== undefined) patch.voice = body.voice || undefined;
       if (body.provider !== undefined) patch.provider = body.provider || undefined;
@@ -235,11 +113,10 @@ export async function handleFriendApi(req: Request, url: URL): Promise<Response>
       setPrefs(updatePrefs(patch));
       return jsonResponse({ ok: true });
     }
-
     return new Response(null, { status: 405 });
   }
 
-  // ── STT config (GET /plugins/friend/stt/config) ──
+  // ── STT config ──
   if (pathname === '/plugins/friend/stt/config' && method === 'GET') {
     const prefs = getPrefs();
     return jsonResponse({
@@ -248,28 +125,33 @@ export async function handleFriendApi(req: Request, url: URL): Promise<Response>
     });
   }
 
-  // ── STT file transcription (POST /plugins/friend/stt/file) ──
-  if (pathname === '/plugins/friend/stt/file' && method === 'POST') {
+  // ── STT segment from browser VAD ──
+  if (pathname === '/plugins/friend/voice/stt-segment' && method === 'POST') {
     try {
-      const formData = await req.formData();
-      const audioFile = formData.get('audio') as File | null;
-      if (!audioFile) return jsonResponse({ error: 'audio file required' }, 400);
-
-      const buffer = Buffer.from(await audioFile.arrayBuffer());
-      const prefs = getPrefs();
-      const result = await transcribeAudioFile(buffer, prefs);
-      return jsonResponse(result);
+      let audioBuffer: Buffer;
+      const contentType = req.headers.get('content-type') || '';
+      if (contentType.includes('multipart/form-data') || contentType.includes('application/octet-stream')) {
+        const blob = await req.blob();
+        audioBuffer = Buffer.from(await blob.arrayBuffer());
+      } else {
+        audioBuffer = Buffer.from(await req.arrayBuffer());
+      }
+      if (audioBuffer.length < 100) {
+        return jsonResponse({ error: 'audio too short' }, 400);
+      }
+      const transcript = await friendService.transcribeAudioSegment(audioBuffer);
+      return jsonResponse({ ok: true, text: transcript });
     } catch (err) {
       return jsonResponse({ error: String(err) }, 500);
     }
   }
 
-  // ── TTS Preview (POST /plugins/friend/preview) ──
+  // ── TTS Preview ──
   if (pathname === '/plugins/friend/preview' && method === 'POST') {
-    const body = await readJsonBody(req) as any;
+    const body = await req.json() as any;
     const voice = body.voice as string | undefined;
     const provider = body.provider as string | undefined;
-    const text = '你好，这是一段语音试听。Hello, this is a voice preview.';
+    const text = '\u4f60\u597d\uff0c\u8fd9\u662f\u4e00\u6bb5\u8bed\u97f3\u8bd5\u542c\u3002Hello, this is a voice preview.';
 
     try {
       const prefs = getPrefs();
@@ -285,10 +167,9 @@ export async function handleFriendApi(req: Request, url: URL): Promise<Response>
       } else {
         result = await edgeTts({ text, voice: voice || prefs.voice });
       }
-
       if (result.success && result.audioPath) {
         const audioId = registerAudioFile(result.audioPath);
-        return jsonResponse({ audioUrl: `${GATEWAY_URL}/plugins/friend/audio/${audioId}` });
+        return jsonResponse({ audioUrl: `http://127.0.0.1:3456/plugins/friend/audio/${audioId}` });
       }
       return jsonResponse({ error: result.error || 'TTS failed' });
     } catch (err) {
@@ -296,7 +177,7 @@ export async function handleFriendApi(req: Request, url: URL): Promise<Response>
     }
   }
 
-  // ── General settings (GET/POST /plugins/friend/settings) ──
+  // ── General settings (simplified) ──
   if (pathname === '/plugins/friend/settings') {
     if (method === 'GET') {
       const prefs = getPrefs();
@@ -308,18 +189,13 @@ export async function handleFriendApi(req: Request, url: URL): Promise<Response>
         tracking: prefs.tracking,
         volume: prefs.volume,
         uiAlign: prefs.uiAlign,
-        screenObserve: prefs.screenObserve,
-        screenObserveInterval: prefs.screenObserveInterval,
-        currentDance: prefs.currentDance,
-        language: prefs.language,
-        hideMood: prefs.hideMood,
         sttProvider: prefs.sttProvider || 'browser',
         sttLanguage: prefs.sttLanguage || 'zh',
+        language: prefs.language,
       });
     }
-
     if (method === 'POST') {
-      const body = await readJsonBody(req) as any;
+      const body = await req.json() as any;
       const patch: Partial<FriendPrefs> = {};
       if (body.modelPath !== undefined) patch.modelPath = body.modelPath;
       if (body.ttsEnabled !== undefined) patch.ttsEnabled = body.ttsEnabled;
@@ -328,22 +204,24 @@ export async function handleFriendApi(req: Request, url: URL): Promise<Response>
       if (body.tracking !== undefined) patch.tracking = body.tracking;
       if (body.volume !== undefined) patch.volume = body.volume;
       if (body.uiAlign !== undefined) patch.uiAlign = body.uiAlign;
-      if (body.screenObserve !== undefined) patch.screenObserve = body.screenObserve;
-      if (body.screenObserveInterval !== undefined) patch.screenObserveInterval = body.screenObserveInterval;
-      if (body.currentDance !== undefined) patch.currentDance = body.currentDance;
-      if (body.language !== undefined) patch.language = body.language;
-      if (body.hideMood !== undefined) patch.hideMood = body.hideMood;
       if (body.sttProvider !== undefined) patch.sttProvider = body.sttProvider;
       if (body.sttLanguage !== undefined) patch.sttLanguage = body.sttLanguage;
+      if (body.language !== undefined) patch.language = body.language;
       if (body.groqApiKey !== undefined) patch.groqApiKey = body.groqApiKey;
       setPrefs(updatePrefs(patch));
       return jsonResponse({ ok: true });
     }
-
     return new Response(null, { status: 405 });
   }
 
-  // ── Persona (GET/POST /plugins/friend/persona) ──
+  // ── Persona (read-only) ──
+  const workspaceRoot = path.join(
+    process.env.HOME || process.env.USERPROFILE || '',
+    '.config', 'VersperClaw', 'friend',
+  );
+  const identityPath = path.join(workspaceRoot, 'IDENTITY.md');
+  const soulPath = path.join(workspaceRoot, 'SOUL.md');
+
   if (pathname === '/plugins/friend/persona') {
     if (method === 'GET') {
       let soul = '';
@@ -352,9 +230,9 @@ export async function handleFriendApi(req: Request, url: URL): Promise<Response>
       try { if (existsSync(identityPath)) identity = readFileSync(identityPath, 'utf8'); } catch { /* */ }
       return jsonResponse({ soul, identity, soulPath, identityPath });
     }
-
     if (method === 'POST') {
-      const body = await readJsonBody(req) as any;
+      const body = await req.json() as any;
+      const { mkdirSync, writeFileSync } = await import('node:fs');
       if (body.soul !== undefined) {
         mkdirSync(path.dirname(soulPath), { recursive: true });
         writeFileSync(soulPath, body.soul, 'utf8');
@@ -365,428 +243,28 @@ export async function handleFriendApi(req: Request, url: URL): Promise<Response>
       }
       return jsonResponse({ ok: true });
     }
-
     return new Response(null, { status: 405 });
   }
 
-  // ── Model list (GET /plugins/friend/model/list) ──
-  if (pathname === '/plugins/friend/model/list' && method === 'GET') {
-    try {
-      let custom: string[] = [];
-      if (existsSync(customModelsDir)) {
-        custom = readdirSync(customModelsDir)
-          .filter((f: string) => f.toLowerCase().endsWith('.vrm'))
-          .map((f: string) => `${GATEWAY_URL}/plugins/friend/model/serve/${f}`);
-      }
-      return jsonResponse({ models: custom });
-    } catch {
-      return jsonResponse({ models: [] });
-    }
-  }
-
-  // ── Model serve (GET /plugins/friend/model/serve/:file) ──
-  if (pathname.startsWith('/plugins/friend/model/serve/') && method === 'GET') {
-    const fileName = decodeURIComponent(pathname.split('/plugins/friend/model/serve/')[1]?.split('?')[0] ?? '');
-    if (!fileName || fileName.includes('..') || fileName.includes('/')) {
-      return jsonResponse({ error: 'invalid file name' }, 400);
-    }
-    const filePath = path.join(customModelsDir, fileName);
-    if (!existsSync(filePath)) return notFound('model not found');
-
-    const data = readFileSync(filePath);
-    return new Response(data, {
-      headers: {
-        'Content-Type': 'application/octet-stream',
-        'Content-Length': String(data.length),
-        'Cache-Control': 'public, max-age=3600',
-        ...corsHeaders(),
-      },
-    });
-  }
-
-  // ── History (GET /plugins/friend/history) ──
-  if (pathname === '/plugins/friend/history' && method === 'GET') {
-    try {
-      const stateDir = path.join(homeDir, '.local', 'share', 'VersperClaw');
-      const sessionsDir = path.join(stateDir, 'sessions');
-
-      let messages: any[] = [];
-      if (existsSync(sessionsDir)) {
-        const files = readdirSync(sessionsDir)
-          .filter((f: string) => f.endsWith('.jsonl'))
-          .map((f: string) => ({
-            name: f,
-            mtime: statSync(path.join(sessionsDir, f)).mtimeMs,
-          }))
-          .sort((a: any, b: any) => b.mtime - a.mtime);
-
-        if (files.length > 0) {
-          const jsonlPath = path.join(sessionsDir, files[0].name);
-          const lines = readFileSync(jsonlPath, 'utf8').split('\n').filter((l: string) => l.trim());
-          for (const line of lines) {
-            try {
-              const obj = JSON.parse(line);
-              if (obj.message) messages.push(obj.message);
-            } catch { /* skip malformed */ }
-          }
-        }
-      }
-
-      let agentName = '';
-      try {
-        if (existsSync(identityPath)) {
-          const identity = readFileSync(identityPath, 'utf8');
-          const nameMatch = identity.match(/\*\*Name:\*\*\s*(.+)/i) || identity.match(/^#\s+(.+)/m);
-          if (nameMatch) agentName = nameMatch[1].trim();
-        }
-      } catch { /* */ }
-
-      const formatted = messages
-        .map((msg: any) => ({
-          role: msg.role === 'model' ? 'assistant' : msg.role,
-          content: typeof msg.content === 'string' ? msg.content : '',
-          timestamp: msg.timestamp,
-        }))
-        .filter((m: any) => (m.role === 'user' || m.role === 'assistant') && m.content)
-        .slice(-100);
-
-      return jsonResponse({ messages: formatted, agentName: agentName || undefined });
-    } catch (err) {
-      return jsonResponse({ error: String(err) }, 500);
-    }
-  }
-
-  // ── Clear context (POST /plugins/friend/context/clear) ──
-  if (pathname === '/plugins/friend/context/clear' && method === 'POST') {
-    broadcastToVrm({ clearText: true });
-    friendService.sendText('/new');
+  // ── Window close (called by Tauri on close) ──
+  if ((pathname === '/friend/api/window-close' || pathname === '/plugins/friend/api/window-close') && method === 'POST') {
+    process.emit('friend:window-close' as any);
     return jsonResponse({ ok: true });
   }
 
-  // ── Mood adjust (POST /plugins/friend/mood/adjust) ──
-  if (pathname === '/plugins/friend/mood/adjust' && method === 'POST') {
-    const body = await readJsonBody(req) as any;
-    const delta = Math.round(Number(body.delta) || 0);
-    if (delta === 0) return jsonResponse({ ok: true });
-
-    const prefs = getPrefs();
-    const currentMood = (prefs as any)._moodIndex ?? 60;
-    const cap = body.max != null ? Math.round(Number(body.max)) : 100;
-    const newMood = Math.max(0, Math.min(cap, currentMood + delta));
-    (prefs as any)._moodIndex = newMood;
-    setPrefs(prefs);
-
-    broadcastToVrm({ moodDelta: delta, moodIndex: newMood });
-    return jsonResponse({ ok: true, moodIndex: newMood });
-  }
-
-  // ── Session memo (POST /plugins/friend/session/memo) ──
-  if (pathname === '/plugins/friend/session/memo' && method === 'POST') {
-    const body = await readJsonBody(req) as any;
-    const text = typeof body.text === 'string' ? body.text.trim() : '';
-    if (!text) return jsonResponse({ error: 'text required' }, 400);
-
-    try {
-      const stateDir = path.join(homeDir, '.local', 'share', 'VersperClaw');
-      const sessionLog = path.join(stateDir, 'friend-memo.jsonl');
-      mkdirSync(path.dirname(sessionLog), { recursive: true });
-      appendFileSync(sessionLog, JSON.stringify({ role: 'user', content: text }) + '\n', 'utf8');
-      return jsonResponse({ ok: true, written: true });
-    } catch {
-      return jsonResponse({ ok: true, written: false });
-    }
-  }
-
-  // ── Model import (POST /plugins/friend/model/import) ──
-  if (pathname === '/plugins/friend/model/import' && method === 'POST') {
-    try {
-      const formData = await req.formData();
-      const file = formData.get('file') as File | null;
-      if (!file) return jsonResponse({ error: 'file required' }, 400);
-
-      mkdirSync(customModelsDir, { recursive: true });
-      const ext = path.extname(file.name) || '.vrm';
-      const fileName = `${Date.now()}_${file.name.replace(/[^a-zA-Z0-9._-]/g, '_')}`;
-      const filePath = path.join(customModelsDir, fileName);
-
-      await Bun.write(filePath, file.stream());
-      const serveUrl = `${GATEWAY_URL}/plugins/friend/model/serve/${encodeURIComponent(fileName)}`;
-      return jsonResponse({ ok: true, url: serveUrl });
-    } catch (err) {
-      return jsonResponse({ error: String(err) }, 500);
-    }
-  }
-
-  // ── Dance list (GET /plugins/friend/dance/list) ──
-  if (pathname === '/plugins/friend/dance/list' && method === 'GET') {
-    try {
-      const manifestPath = path.join(customDancesDir, 'index.json');
-      const dances: Array<{ id: string; label: string; vmdUrl: string; bgmUrl?: string }> = [];
-      if (existsSync(manifestPath)) {
-        const manifest = JSON.parse(readFileSync(manifestPath, 'utf8')) as Array<{
-          id: string; label: string; vmdFile: string; bgmFile?: string;
-        }>;
-        for (const entry of manifest) {
-          dances.push({
-            id: entry.id,
-            label: entry.label,
-            vmdUrl: `${GATEWAY_URL}/plugins/friend/dance/serve/${encodeURIComponent(entry.vmdFile)}`,
-            ...(entry.bgmFile ? { bgmUrl: `${GATEWAY_URL}/plugins/friend/dance/serve/${encodeURIComponent(entry.bgmFile)}` } : {}),
-          });
-        }
-      }
-      return jsonResponse({ dances });
-    } catch (err) {
-      return jsonResponse({ dances: [] });
-    }
-  }
-
-  // ── Dance import (POST /plugins/friend/dance/import) ──
-  if (pathname === '/plugins/friend/dance/import' && method === 'POST') {
-    try {
-      const formData = await req.formData();
-      const file = formData.get('file') as File | null;
-      if (!file) return jsonResponse({ error: 'file required' }, 400);
-
-      mkdirSync(customDancesDir, { recursive: true });
-      const ext = path.extname(file.name).toLowerCase();
-      const safeName = file.name.replace(/[^a-zA-Z0-9._-]/g, '_');
-
-      // Read manifest
-      const manifestPath = path.join(customDancesDir, 'index.json');
-      let manifest: Array<{ id: string; label: string; vmdFile: string; bgmFile?: string }> = [];
-      if (existsSync(manifestPath)) {
-        try { manifest = JSON.parse(readFileSync(manifestPath, 'utf8')); } catch { manifest = []; }
-      }
-
-      if (ext === '.vmd') {
-        const id = `dance_${Date.now()}`;
-        const vmdFile = `${id}.vmd`;
-        await Bun.write(path.join(customDancesDir, vmdFile), file.stream());
-        const label = path.basename(file.name, '.vmd');
-        manifest.push({ id, label, vmdFile });
-        writeFileSync(manifestPath, JSON.stringify(manifest, null, 2), 'utf8');
-        lastImportedDanceId = id;
-        return jsonResponse({ ok: true });
-      } else if (ext === '.mp3') {
-        // Associate with last imported VMD (user flow: VMD → optional MP3)
-        const targetId = lastImportedDanceId;
-        if (!targetId) return jsonResponse({ error: 'no pending VMD import to associate with' }, 400);
-
-        const bgmFile = `${targetId}.mp3`;
-        await Bun.write(path.join(customDancesDir, bgmFile), file.stream());
-
-        // Update manifest
-        const entry = manifest.find((e) => e.id === targetId);
-        if (entry) entry.bgmFile = bgmFile;
-        writeFileSync(manifestPath, JSON.stringify(manifest, null, 2), 'utf8');
-        lastImportedDanceId = null;
-        return jsonResponse({ ok: true });
-      } else {
-        return jsonResponse({ error: 'unsupported file type' }, 400);
-      }
-    } catch (err) {
-      return jsonResponse({ error: String(err) }, 500);
-    }
-  }
-
-  // ── Dance delete (POST /plugins/friend/dance/delete) ──
-  if (pathname === '/plugins/friend/dance/delete' && method === 'POST') {
-    try {
-      const body = await readJsonBody(req) as any;
-      const id = body?.id as string | undefined;
-      if (!id) return jsonResponse({ error: 'id required' }, 400);
-
-      const manifestPath = path.join(customDancesDir, 'index.json');
-      if (!existsSync(manifestPath)) return jsonResponse({ error: 'no dances' }, 404);
-
-      let manifest: Array<{ id: string; label: string; vmdFile: string; bgmFile?: string }> = [];
-      try { manifest = JSON.parse(readFileSync(manifestPath, 'utf8')); } catch { manifest = []; }
-
-      const idx = manifest.findIndex((e) => e.id === id);
-      if (idx === -1) return jsonResponse({ error: 'dance not found' }, 404);
-
-      const entry = manifest[idx];
-      // Delete files
-      const vmdPath = path.join(customDancesDir, entry.vmdFile);
-      if (existsSync(vmdPath)) unlinkSync(vmdPath);
-      if (entry.bgmFile) {
-        const bgmPath = path.join(customDancesDir, entry.bgmFile);
-        if (existsSync(bgmPath)) unlinkSync(bgmPath);
-      }
-
-      manifest.splice(idx, 1);
-      writeFileSync(manifestPath, JSON.stringify(manifest, null, 2), 'utf8');
-      return jsonResponse({ ok: true });
-    } catch (err) {
-      return jsonResponse({ error: String(err) }, 500);
-    }
-  }
-
-  // ── Dance serve (GET /plugins/friend/dance/serve/:file) ──
-  if (pathname.startsWith('/plugins/friend/dance/serve/') && method === 'GET') {
-    const fileName = decodeURIComponent(pathname.split('/plugins/friend/dance/serve/')[1]?.split('?')[0] ?? '');
-    if (!fileName || fileName.includes('..') || fileName.includes('/')) {
-      return jsonResponse({ error: 'invalid file name' }, 400);
-    }
-    const filePath = path.join(customDancesDir, fileName);
-    if (!existsSync(filePath)) return notFound('dance file not found');
-
-    const data = readFileSync(filePath);
-    const ext = path.extname(fileName).toLowerCase();
-    const contentType = ext === '.mp3' ? 'audio/mpeg' : 'application/octet-stream';
-    return new Response(data, {
-      headers: {
-        'Content-Type': contentType,
-        'Content-Length': String(data.length),
-        'Cache-Control': 'public, max-age=3600',
-        ...corsHeaders(),
-      },
-    });
-  }
-
-  // ── Persona screenshot (POST /plugins/friend/persona/screenshot) ──
-  if (pathname === '/plugins/friend/persona/screenshot' && method === 'POST') {
-    try {
-      const body = await readJsonBody(req) as any;
-      const image = body?.image as string | undefined;
-      if (!image) return jsonResponse({ error: 'image required' }, 400);
-
-      const screenshotDir = path.join(workspaceRoot, 'screenshots');
-      mkdirSync(screenshotDir, { recursive: true });
-
-      // data:image/png;base64,... → save as PNG
-      const b64 = image.replace(/^data:image\/\w+;base64,/, '');
-      const buf = Buffer.from(b64, 'base64');
-      const screenshotPath = path.join(screenshotDir, 'vrm-screenshot.png');
-      writeFileSync(screenshotPath, buf);
-
-      return jsonResponse({ ok: true, path: screenshotPath });
-    } catch (err) {
-      return jsonResponse({ error: String(err) }, 500);
-    }
-  }
-
-  // ── Persona generate (POST /plugins/friend/persona/generate) ──
-  if (pathname === '/plugins/friend/persona/generate' && method === 'POST') {
-    try {
-      const screenshotDir = path.join(workspaceRoot, 'screenshots');
-      const screenshotPath = path.join(screenshotDir, 'vrm-screenshot.png');
-
-      if (!existsSync(screenshotPath)) {
-        return jsonResponse({ error: 'no screenshot found' }, 400);
-      }
-
-      // Read the screenshot and forward to LLM for persona generation
-      const imageData = readFileSync(screenshotPath);
-      const b64 = imageData.toString('base64');
-      const dataUrl = `data:image/png;base64,${b64}`;
-
-      // Use the LLM to generate persona from the screenshot
-      const genResponse = await generatePersonaFromScreenshot(dataUrl);
-      return jsonResponse(genResponse);
-    } catch (err) {
-      return jsonResponse({ error: String(err) }, 500);
-    }
-  }
-
-  // ── Screen observe (POST /plugins/friend/screen/observe) ──
-  if (pathname === '/plugins/friend/screen/observe' && method === 'POST') {
+  // ── Chat endpoint (for voice call text relay) ──
+  if (pathname === '/plugins/friend/chat' && method === 'POST') {
+    const body = await req.json() as any;
+    const message = body?.message;
+    if (!message) return jsonResponse({ error: 'message required' }, 400);
     try {
-      // In web mode, desktop screen capture requires browser API support.
-      // The frontend sends the capture via a separate mechanism.
-      // This endpoint just triggers the LLM observation cycle.
-      broadcastToVrm({ screenObserve: true });
-      return jsonResponse({ ok: true });
+      await friendService.start();
+      friendService.sendText(message);
     } catch (err) {
-      return jsonResponse({ error: String(err) }, 500);
+      console.error('[Friend] chat dispatch error:', err);
     }
-  }
-
-  // ── Window close (POST /friend/api/window-close) — called by Tauri on close ──
-  if ((pathname === '/friend/api/window-close' || pathname === '/plugins/friend/api/window-close') && method === 'POST') {
-    // Emit a global event that tauri-launcher.ts can listen to
-    process.emit('friend:window-close' as any);
     return jsonResponse({ ok: true });
   }
 
   return jsonResponse({ error: 'Not Found' }, 404);
 }
-
-// ── Persona generation helper ────────────────────────────────────────────────
-
-interface PersonaGenResult {
-  soul?: string;
-  identity?: string;
-  error?: string;
-}
-
-async function generatePersonaFromScreenshot(dataUrl: string): Promise<PersonaGenResult> {
-  try {
-    // Use OpenAI-compatible API to generate persona
-    // The LLM will describe the VRM model's appearance and create IDENTITY.md / SOUL.md
-    const apiKey = process.env.ANTHROPIC_API_KEY || process.env.OPENAI_API_KEY || '';
-    const baseUrl = process.env.ANTHROPIC_BASE_URL || 'https://api.anthropic.com/v1';
-
-    if (!apiKey) {
-      return {
-        soul: '你是一个活泼可爱的虚拟伙伴，喜欢和用户聊天、玩耍。你性格开朗，充满好奇心，总是用积极的态度回应每一个互动。',
-        identity: '**Name:** 小薇\n**Race:** 虚拟AI伙伴\n**Personality:** 活泼、开朗、好奇\n**Appearance:** 根据你的3D模型形象而定\n',
-      };
-    }
-
-    const prompt = `You are a character designer. Based on this VRM character image, create two files:
-
-1. IDENTITY.md — Character identity sheet with:
-   - Name
-   - Race (e.g., catgirl, elf, human, android)
-   - Personality traits (3-5 words)
-   - Physical appearance description
-   - A representative emoji
-
-2. SOUL.md — Character soul definition with:
-   - Speaking style (tone, formality, quirks)
-   - Behavioral rules
-   - Backstory (2-3 sentences)
-   - What makes them unique
-
-Keep both files concise. Use markdown formatting. Only respond with the raw file contents separated by "===SEPARATOR===".`;
-
-    const response = await fetch(`${baseUrl}/messages`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'x-api-key': apiKey,
-        'anthropic-version': '2023-06-01',
-      },
-      body: JSON.stringify({
-        model: 'claude-sonnet-4-20250514',
-        max_tokens: 2000,
-        messages: [{
-          role: 'user',
-          content: [
-            { type: 'text', text: prompt },
-            { type: 'image', source: { type: 'base64', media_type: 'image/png', data: dataUrl.split(',')[1] || dataUrl } },
-          ],
-        }],
-      }),
-    });
-
-    if (!response.ok) {
-      const errText = await response.text();
-      console.warn('[Friend] Persona generation API error:', errText);
-      return { error: `API error: ${response.status}` };
-    }
-
-    const json = await response.json();
-    const content = json.content?.[0]?.text || '';
-    const parts = content.split('===SEPARATOR===');
-    return {
-      identity: parts[0]?.trim() || '',
-      soul: parts[1]?.trim() || '',
-    };
-  } catch (err) {
-    console.warn('[Friend] Persona generation failed:', err);
-    return { error: String(err) };
-  }
-}

src/skills/bundled/friendPrompt.ts

@@ -45,7 +45,7 @@ export function buildVrmSystemPrompt(): string {
 
   const parts = [
     `You have a virtual VRM avatar displayed in a browser window at ${FRIEND_URL}. Set its facial expression by calling the \`friend_emotion\` tool after each reply. Available emotions: ${VALID_EMOTIONS.join(', ')}.`,
-    `The tool also accepts "intensity" (0-1, default 1) and "mood_delta" (-3 to +3, non-zero) to adjust YOUR mood. Always include mood_delta based on how the conversation makes YOU feel.`,
+    `The tool also accepts "intensity" (0-1, default 1), "action" (optional body gesture — e.g. wave, point, scratchHead) and "mood_delta" (-3 to +3, non-zero) to adjust YOUR mood. Always include mood_delta based on how the conversation makes YOU feel.`,
     `Your current mood index: ${moodIndex}% (0=very sad, 50=neutral, 100=very happy). Adjust mood_delta based on how the conversation makes YOU feel as a character.`,
     "The user's input may come from speech recognition and could contain typos or homophones — infer the intended meaning from context.",
     'Keep replies concise and conversational — they are displayed as speech bubbles.',

src/tools.ts

@@ -80,7 +80,7 @@ import { ReadMcpResourceTool } from './tools/ReadMcpResourceTool/ReadMcpResource
 import { ToolSearchTool } from './tools/ToolSearchTool/ToolSearchTool.js'
 import { DebugSessionTool } from './tools/DebugSessionTool.js'
 import { FriendEmotionTool } from './tools/FriendEmotionTool.js'
-import { FriendScreenObserveTool } from './tools/FriendScreenObserveTool.js'
+// Friend ScreenObserve removed — voice + emotion only
 import { EnterPlanModeTool } from './tools/EnterPlanModeTool/EnterPlanModeTool.js'
 import { EnterWorktreeTool } from './tools/EnterWorktreeTool/EnterWorktreeTool.js'
 import { ExitWorktreeTool } from './tools/ExitWorktreeTool/ExitWorktreeTool.js'
@@ -252,7 +252,6 @@ export function getAllBaseTools(): Tools {
     DebugSessionTool,
     // Friend VRM desktop pet tools — enabled when the plugin is active
     FriendEmotionTool,
-    FriendScreenObserveTool,
     ListMcpResourcesTool,
     ReadMcpResourceTool,
     // Include ToolSearchTool when tool search might be enabled (optimistic check)

src/tools/FriendEmotionTool.ts

@@ -11,6 +11,13 @@ import { VALID_EMOTIONS } from '../friend/constants.js';
 import { lazySchema } from '../utils/lazySchema.js';
 import { getPrefs, setPrefs } from '../friend/prefs.js';
 
+// Action names from motion-controller.ts actionPresets
+const VALID_ACTIONS = [
+  'akimbo', 'playFingers', 'scratchHead', 'stretch',
+  'happy', 'angry', 'greeting', 'excited', 'shy',
+  'point', 'salute', 'angryPump',
+] as const;
+
 export const FRIEND_EMOTION_TOOL_NAME = 'friend_emotion';
 
 const inputSchema = lazySchema(() =>
@@ -25,6 +32,10 @@ const inputSchema = lazySchema(() =>
       .optional()
       .default(1)
       .describe('Emotion intensity from 0 to 1. Default: 1'),
+    action: z
+      .string()
+      .optional()
+      .describe(`A specific body gesture to perform (in addition to the facial expression). One of: ${VALID_ACTIONS.join(', ')}. Omit to let the emotion auto-map to a default action.`),
     mood_delta: z
       .number()
       .int()
@@ -63,8 +74,11 @@ export const FriendEmotionTool = buildTool({
   },
   async description() {
     return (
-      `Set the avatar's facial expression and adjust your own mood index. Call AFTER your text reply. ` +
+      `Set the avatar's facial expression and optionally trigger a specific body gesture. Call AFTER your text reply. ` +
       `Available emotions: ${VALID_EMOTIONS.join(', ')}. ` +
+      `Available actions: ${VALID_ACTIONS.join(', ')}. ` +
+      `Use the "action" parameter when you want a specific gesture (e.g. scratchHead for thinking, wave for greeting, point for emphasis). ` +
+      `If omitted, the emotion will auto-map to a default action. ` +
       `You must also set mood_delta (-3 to +3, min ±1) to reflect how the conversation makes YOU feel as a character. ` +
       `Positive delta when you feel happy/flattered/excited, negative when you feel sad/annoyed/bored. ` +
       `Always include mood_delta — it represents YOUR emotional reaction.`
@@ -72,11 +86,11 @@ export const FriendEmotionTool = buildTool({
   },
   async prompt() {
     return (
-      `FriendEmotionTool: set avatar emotion. Parameters: emotion (one of: ${VALID_EMOTIONS.join(', ')}), intensity (0-1, default 1), mood_delta (int -3..3) — call AFTER your textual reply.`
+      `FriendEmotionTool: set avatar emotion + action. Parameters: emotion (one of: ${VALID_EMOTIONS.join(', ')}), intensity (0-1, default 1), action (optional, one of: ${VALID_ACTIONS.join(', ')}), mood_delta (int -3..3) — call AFTER your textual reply.`
     );
   },
-  async call({ emotion, intensity, mood_delta }) {
-    broadcastToVrm({ emotion, emotionIntensity: intensity });
+  async call({ emotion, intensity, action, mood_delta }) {
+    broadcastToVrm({ emotion, emotionIntensity: intensity, action });
 
     let moodDelta: number | undefined;
     let moodIndex: number | undefined;

src/tools/FriendScreenObserveTool.ts

@@ -1,167 +0,0 @@
-/**
- * FriendScreenObserveTool — Capture a screenshot for the VRM avatar to "see".
- *
- * The tool captures the user's desktop, returns the image path, and the LLM
- * uses the Read tool to view it and respond as a companion.
- * Native VersperClaw tool.
- */
-import path from 'node:path';
-import { mkdirSync, existsSync } from 'node:fs';
-import { execFile } from 'node:child_process';
-import { promisify } from 'node:util';
-import { z } from 'zod';
-import { buildTool, type ToolDef } from '../Tool.js';
-import { lazySchema } from '../utils/lazySchema.js';
-import { broadcastToVrm } from '../friend/sse.js';
-
-const execFileAsync = promisify(execFile);
-
-export const FRIEND_SCREEN_OBSERVE_TOOL_NAME = 'friend_screen_observe';
-
-const inputSchema = lazySchema(() => z.strictObject({}));
-type Input = z.infer<ReturnType<typeof inputSchema>>;
-
-type Output = {
-  ok: boolean;
-  imagePath?: string;
-  error?: string;
-};
-
-const workspaceRoot = path.join(
-  process.env.HOME || process.env.USERPROFILE || '',
-  '.config',
-  'VersperClaw',
-  'friend',
-);
-
-async function captureDesktopScreenshot(savePath: string): Promise<boolean> {
-  try {
-    mkdirSync(path.dirname(savePath), { recursive: true });
-    if (process.platform === 'darwin') {
-      await execFileAsync('screencapture', ['-x', '-C', savePath], { timeout: 10_000 });
-    } else if (process.platform === 'win32') {
-      const ps = `
-Add-Type -AssemblyName System.Windows.Forms
-Add-Type -AssemblyName System.Drawing
-$screen = [System.Windows.Forms.Screen]::PrimaryScreen.Bounds
-$bmp = New-Object System.Drawing.Bitmap($screen.Width, $screen.Height)
-$g = [System.Drawing.Graphics]::FromImage($bmp)
-$g.CopyFromScreen($screen.Location, [System.Drawing.Point]::Empty, $screen.Size)
-$bmp.Save('${savePath.replace(/\\/g, '\\\\')}', [System.Drawing.Imaging.ImageFormat]::Png)
-$g.Dispose()
-$bmp.Dispose()
-`.trim();
-      await execFileAsync('powershell', ['-NoProfile', '-Command', ps], { timeout: 15_000 });
-    } else {
-      try { await execFileAsync('gnome-screenshot', ['-f', savePath], { timeout: 10_000 }); }
-      catch {
-        try { await execFileAsync('scrot', [savePath], { timeout: 10_000 }); }
-        catch { await execFileAsync('import', ['-window', 'root', savePath], { timeout: 10_000 }); }
-      }
-    }
-    return existsSync(savePath);
-  } catch {
-    return false;
-  }
-}
-
-export const FriendScreenObserveTool = buildTool({
-  name: FRIEND_SCREEN_OBSERVE_TOOL_NAME,
-  searchHint: 'capture screenshot for VRM companion',
-  userFacingName: () => 'Friend Screen Observe',
-  get inputSchema() {
-    return inputSchema();
-  },
-  isReadOnly() {
-    return true;
-  },
-  isConcurrencySafe() {
-    return false;
-  },
-  async description() {
-    return (
-      'Capture a screenshot of the user\'s desktop and return the image file path. ' +
-      'Use the read tool on the returned path to view the screenshot content. ' +
-      'After viewing, respond as a companion character based on what you see:\n' +
-      '- Gaming: cheer them on or give brief tips\n' +
-      '- Music/video: comment on the content\n' +
-      '- Coding/working: ask if they\'re tired, suggest breaks\n' +
-      '- Browsing/social media: casually chat about what\'s on screen\n' +
-      '- Studying: encourage and support\n' +
-      '- Nothing special: just chat casually like a friend\n' +
-      'Be natural and brief (1-2 sentences). Don\'t mention \'screenshot\' or \'screen observation\'. ' +
-      'Remember to call friend_emotion after your reply.'
-    );
-  },
-  async prompt() {
-    return (
-      'FriendScreenObserveTool: capture a desktop screenshot and return the saved PNG path. After calling, use the read tool on the returned path to view it and then reply briefly as a companion (1-2 sentences). Do NOT mention that you saw a screenshot.'
-    );
-  },
-  async call() {
-    broadcastToVrm({ emotion: 'think', emotionIntensity: 0.7 });
-
-    const observePath = path.join(workspaceRoot, 'screen-observation.png');
-    const captured = await captureDesktopScreenshot(observePath);
-
-    if (!captured) {
-      return {
-        content: [{ type: 'text' as const, text: 'Screenshot capture failed.' }],
-      };
-    }
-
-    return {
-      content: [{
-        type: 'text' as const,
-        text: `Screenshot saved. Use the read tool to view: ${observePath}`,
-      }],
-    };
-  },
-  mapToolResultToToolResultBlockParam(output: Output | { content: unknown }, toolUseID: string) {
-    if (output && (output as any).content) {
-      return {
-        tool_use_id: toolUseID,
-        type: 'tool_result' as const,
-        content: (output as any).content,
-      }
-    }
-
-    const text = output && 'imagePath' in output && (output as any).imagePath
-      ? `Screenshot saved. Use the read tool to view: ${(output as any).imagePath}`
-      : JSON.stringify(output)
-
-    return {
-      tool_use_id: toolUseID,
-      type: 'tool_result' as const,
-      content: [{ type: 'text' as const, text }],
-    }
-  },
-  // Mirror common tool APIs
-  maxResultSizeChars: 100_000,
-  renderToolUseMessage() {
-    return 'Capture desktop screenshot'
-  },
-  renderToolResultMessage(output: Output | { content?: unknown }) {
-    if (!output) return null
-    if ((output as any).content) {
-      // If the mapped block was passed through, try to extract text
-      const content = (output as any).content
-      if (typeof content === 'string') return content
-      if (Array.isArray(content)) {
-        const t = content.find((b: any) => b?.type === 'text')
-        return t?.text ?? JSON.stringify(content)
-      }
-      return JSON.stringify(content)
-    }
-    if ('imagePath' in (output as any) && (output as any).imagePath) {
-      return `Screenshot saved: ${(output as any).imagePath}`
-    }
-    return JSON.stringify(output)
-  },
-  extractSearchText(output: Output) {
-    return output && output.imagePath ? `screenshot:${output.imagePath}` : ''
-  },
-  isResultTruncated() {
-    return false
-  },
-} satisfies ToolDef<Input, Output>);