fix: animation detection + AI 404 errors

ModelManager.jsx:
- Uses THREE.AnimationMixer directly (not useAnimations hook) so clips
work on cloned scenes correctly
- Auto-plays first clip on model load
- Cross-fades between clips (fadeOut 0.3s / fadeIn 0.3s)
- Mixer ticked via useFrame (clips actually animate now)
- Manual skeleton clone for SkinnedMesh models (no SkeletonUtils dep)
- Separate refs: mixerRef, actionsRef, currentAnimRef
- Responds to animationPlaying, activeAnimation, animationSpeed from store

AnimationPlayer.jsx:
- Play/Pause button actually toggles model.animationPlaying in store
- Stop button pauses and resets
- Now-playing indicator with pulse dot (green=playing, grey=paused)
- Play All / Pause All header button
- Clip buttons show ▶ / ⏸ prefix for active clip state

useStore.js:
- Added setModelAnimPlaying(id, playing) action
- selectModel now preserves lastSelectedModelId on deselect

AIController.jsx:
- 10 verified free models (old llama-3.1-8b had no free endpoints)
- Handles HTTP 404, 429, 500, 503, 529 → skip to next model
- Also detects 'No endpoints', 'not found', 'unavailable' in body
- New list: gemma-2-9b, mistral-7b, phi-3-mini, qwen-2-7b, zephyr-7b,
openchat-7b, mythomist-7b, llama-3.2-3b, deepseek-r1-qwen-7b, capybara-7b

CommandInterpreter.js:
- Added pause_animation action
- set_animation now calls setModelAnimPlaying(true)

src/components/AIController.jsx

@@ -17,12 +17,19 @@ import {
 } from './CommandInterpreter'
 
 const BASE_URL   = 'https://openrouter.ai/api/v1'
+// Verified working free models on OpenRouter (updated list)
+// Ordered by reliability - falls through on 404/429/503
 const FREE_MODELS = [
-  'meta-llama/llama-3.1-8b-instruct:free',
-  'google/gemma-3-4b-it:free',
+  'google/gemma-2-9b-it:free',
   'mistralai/mistral-7b-instruct:free',
-  'qwen/qwen3-8b:free',
-  'stepfun/step-3.5-flash:free',
+  'microsoft/phi-3-mini-128k-instruct:free',
+  'qwen/qwen-2-7b-instruct:free',
+  'huggingfaceh4/zephyr-7b-beta:free',
+  'openchat/openchat-7b:free',
+  'gryphe/mythomist-7b:free',
+  'meta-llama/llama-3.2-3b-instruct:free',
+  'deepseek/deepseek-r1-distill-qwen-7b:free',
+  'nousresearch/nous-capybara-7b:free',
 ]
 
 // ── System prompt ──────────────────────────────────────────────────────────────
@@ -154,15 +161,21 @@ async function callAI(messages, apiKey, modelIdx=0) {
     return callAI(messages, apiKey, modelIdx+1)
   }
 
-  if (res.status === 429 || res.status === 503) {
-    console.info(`[AI] ${model} rate-limited → trying next…`)
+  // Skip to next model on any of these status codes
+  if ([404, 429, 500, 503, 529].includes(res.status)) {
+    console.info(`[AI] ${model} → ${res.status}, trying next model…`)
     return callAI(messages, apiKey, modelIdx+1)
   }
   if (!res.ok) {
     const txt = await res.text()
-    if (txt.includes('429') || txt.includes('rate') || txt.includes('Provider returned error'))
+    // Also skip on provider errors, rate limits in body, or endpoint not found
+    if (txt.includes('429') || txt.includes('rate') || txt.includes('No endpoints')
+        || txt.includes('Provider returned') || txt.includes('model_not_found')
+        || txt.includes('not found') || txt.includes('unavailable')) {
+      console.info(`[AI] ${model} → body error, trying next…`)
       return callAI(messages, apiKey, modelIdx+1)
-    throw new Error(`API ${res.status}: ${txt.slice(0,250)}`)
+    }
+    throw new Error(`API ${res.status}: ${txt.slice(0,300)}`)
   }
   const data = await res.json()
   return { data, model }

src/components/AnimationPlayer.jsx

@@ -1,65 +1,133 @@
+/**
+ * AnimationPlayer.jsx
+ * Per-model animation controls with working play/pause/loop/speed/switch.
+ * Connects to ModelManager's mixer via the store.
+ */
 import { useState } from 'react'
 import useStore from '../store/useStore'
 
 const COLORS = ['#4f8eff','#ef4444','#22c55e','#f59e0b','#8b5cf6','#f97316']
 
 function AnimBlock({ model, colorIdx }) {
-  const [playing, setPlaying] = useState(true)
-  const [loop,    setLoop]    = useState(true)
-  const { setModelActiveAnimation, setModelAnimSpeed } = useStore.getState()
+  const { setModelActiveAnimation, setModelAnimSpeed, setModelAnimPlaying } = useStore.getState()
   const c = COLORS[colorIdx % COLORS.length]
 
+  const playing = model.animationPlaying
+
+  const switchTo = (name) => {
+    setModelActiveAnimation(model.id, name)
+    setModelAnimPlaying(model.id, true)
+  }
+
+  const togglePlay = () => {
+    setModelAnimPlaying(model.id, !playing)
+  }
+
   if (!model.animations.length) return null
 
   return (
-    <div style={{ padding:'10px 12px', borderBottom:'1px solid var(--border)' }}>
-      {/* Model name */}
-      <div style={{ display:'flex', alignItems:'center', gap:7, marginBottom:8 }}>
-        <div style={{ width:7, height:7, borderRadius:2, rotate:'45deg',
-          background:c, boxShadow:`0 0 6px ${c}` }} />
-        <span style={{ fontSize:12, fontWeight:600, color:'var(--text0)', flex:1,
-          overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{model.name}</span>
-        <span style={{ fontSize:10, color:'var(--text3)', background:'var(--bg3)',
-          padding:'2px 6px', borderRadius:3 }}>{model.animations.length} clips</span>
+    <div style={{ borderBottom:'1px solid var(--border)' }}>
+      {/* Header */}
+      <div style={{
+        padding:'10px 12px 6px',
+        display:'flex', alignItems:'center', gap:8,
+      }}>
+        <div style={{ width:7, height:7, borderRadius:1, rotate:'45deg',
+          background: c, boxShadow:`0 0 8px ${c}88`, flexShrink:0 }} />
+        <span style={{ fontSize:12, fontWeight:700, color:'var(--text0)', flex:1,
+          overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>
+          {model.name}
+        </span>
+        <span style={{
+          fontSize:9, padding:'2px 7px', borderRadius:3, fontWeight:700,
+          background:`${c}15`, color:c, border:`1px solid ${c}33`,
+        }}>{model.animations.length} clip{model.animations.length>1?'s':''}</span>
       </div>
 
-      {/* Clip buttons */}
-      <div style={{ display:'flex', flexWrap:'wrap', gap:4, marginBottom:8 }}>
-        {model.animations.map(anim => (
-          <button key={anim} onClick={() => { setModelActiveAnimation(model.id, anim); setPlaying(true) }}
-            style={{
-              padding:'4px 9px', borderRadius:4, cursor:'pointer', fontSize:10, fontWeight:500,
-              background: model.activeAnimation===anim ? `${c}18` : 'var(--bg3)',
-              border:`1px solid ${model.activeAnimation===anim ? `${c}44` : 'var(--border)'}`,
-              color: model.activeAnimation===anim ? c : 'var(--text1)',
-              transition:'all 0.12s', maxWidth:120, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap',
-            }}
-          >{model.activeAnimation===anim && playing ? '▶ ' : ''}{anim}</button>
-        ))}
+      {/* Now playing indicator */}
+      {model.activeAnimation && (
+        <div style={{
+          margin:'0 12px 6px',
+          padding:'5px 9px',
+          background:'rgba(255,255,255,0.04)',
+          border:`1px solid ${c}22`,
+          borderRadius:'var(--radius-sm)',
+          display:'flex', alignItems:'center', gap:7,
+        }}>
+          <div style={{
+            width:6, height:6, borderRadius:'50%', flexShrink:0,
+            background: playing ? c : 'var(--text3)',
+            boxShadow: playing ? `0 0 6px ${c}` : 'none',
+            animation: playing ? 'pulse 1.5s ease infinite' : 'none',
+          }}/>
+          <span style={{ fontSize:10, color:'var(--text1)', flex:1,
+            overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap',
+            fontWeight:600 }}>
+            {model.activeAnimation}
+          </span>
+          <span style={{ fontSize:9, color:'var(--text3)' }}>
+            {playing ? 'PLAYING' : 'PAUSED'}
+          </span>
+        </div>
+      )}
+
+      {/* Clip list */}
+      <div style={{ padding:'0 12px', display:'flex', flexWrap:'wrap', gap:4, marginBottom:8 }}>
+        {model.animations.map(anim => {
+          const isActive = model.activeAnimation === anim
+          return (
+            <button key={anim}
+              onClick={() => switchTo(anim)}
+              style={{
+                padding:'5px 10px', borderRadius:'var(--radius-sm)',
+                background: isActive ? `${c}18` : 'var(--bg3)',
+                border:`1px solid ${isActive ? `${c}55` : 'var(--border)'}`,
+                color: isActive ? c : 'var(--text1)',
+                fontSize:11, fontWeight: isActive ? 700 : 400,
+                cursor:'pointer', transition:'all 0.12s',
+                maxWidth:130, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap',
+              }}
+              title={anim}
+            >
+              {isActive && playing ? '▶ ' : isActive ? '⏸ ' : ''}{anim}
+            </button>
+          )
+        })}
       </div>
 
-      {/* Controls */}
-      <div style={{ display:'flex', gap:6, alignItems:'center' }}>
-        <button onClick={() => setPlaying(!playing)} style={{
-          padding:'4px 10px', borderRadius:4, fontSize:12, cursor:'pointer',
-          background: playing ? 'rgba(239,68,68,0.1)' : 'rgba(34,197,94,0.1)',
-          border:`1px solid ${playing ? 'rgba(239,68,68,0.3)' : 'rgba(34,197,94,0.3)'}`,
-          color: playing ? 'var(--danger)' : '#22c55e',
+      {/* Controls row */}
+      <div style={{ padding:'0 12px 12px', display:'flex', gap:6, alignItems:'center' }}>
+        {/* Play/Pause */}
+        <button onClick={togglePlay} style={{
+          padding:'5px 12px', borderRadius:'var(--radius-sm)',
+          background: playing ? 'rgba(239,68,68,0.12)' : `${c}18`,
+          border:`1px solid ${playing ? 'rgba(239,68,68,0.35)' : `${c}44`}`,
+          color: playing ? 'var(--danger)' : c,
+          fontSize:13, cursor:'pointer', flexShrink:0, fontWeight:700,
+          transition:'all 0.15s',
         }}>{playing ? '⏸' : '▶'}</button>
 
-        <button onClick={() => setLoop(!loop)} style={{
-          padding:'4px 10px', borderRadius:4, fontSize:10, cursor:'pointer',
-          background: loop ? 'rgba(79,142,255,0.1)' : 'var(--bg3)',
-          border:`1px solid ${loop ? 'rgba(79,142,255,0.3)' : 'var(--border)'}`,
-          color: loop ? 'var(--accent)' : 'var(--text2)',
-        }}>⟳ Loop</button>
+        {/* Stop */}
+        <button onClick={() => { setModelAnimPlaying(model.id, false) }}
+          title="Stop"
+          style={{
+            width:30, height:30, borderRadius:'var(--radius-sm)',
+            background:'var(--bg3)', border:'1px solid var(--border)',
+            color:'var(--text2)', fontSize:12, cursor:'pointer', flexShrink:0,
+            display:'flex', alignItems:'center', justifyContent:'center',
+          }}>⏹</button>
 
+        {/* Speed slider */}
         <div style={{ display:'flex', alignItems:'center', gap:6, flex:1 }}>
-          <input type="range" min={0.1} max={3} step={0.05} value={model.animationSpeed}
-            onChange={e => setModelAnimSpeed(model.id, +e.target.value)} />
-          <span style={{ fontSize:10, fontFamily:'var(--font-mono)', color:c, minWidth:30 }}>
-            {model.animationSpeed.toFixed(1)}×
-          </span>
+          <span style={{ fontSize:9, color:'var(--text3)', flexShrink:0 }}>SPD</span>
+          <input type="range" min={0.1} max={3} step={0.05}
+            value={model.animationSpeed}
+            onChange={e => setModelAnimSpeed(model.id, +e.target.value)}
+            style={{ flex:1 }} />
+          <span style={{
+            fontSize:10, fontFamily:'var(--font-mono)',
+            color:c, minWidth:30, textAlign:'right',
+          }}>{model.animationSpeed.toFixed(1)}×</span>
         </div>
       </div>
     </div>
@@ -70,23 +138,47 @@ export default function AnimationPlayer() {
   const models = useStore(s => s.models)
   const animated = models.filter(m => m.animations.length > 0)
 
-  if (!animated.length) return (
-    <div style={{ padding:24, textAlign:'center' }}>
-      <div style={{ fontSize:32, opacity:0.15, marginBottom:10 }}>🎞</div>
-      <div style={{ fontSize:12, color:'var(--text2)' }}>No animations detected</div>
-      <div style={{ fontSize:11, color:'var(--text3)', marginTop:4 }}>
-        Load a GLB with built-in animation clips
+  if (!animated.length) {
+    return (
+      <div style={{ padding:24, textAlign:'center' }}>
+        <div style={{ fontSize:36, opacity:0.12, marginBottom:12 }}>🎞</div>
+        <div style={{ fontSize:13, fontWeight:600, color:'var(--text1)' }}>
+          No animations detected
+        </div>
+        <div style={{ fontSize:11, color:'var(--text3)', marginTop:6, lineHeight:1.7 }}>
+          Load a GLB with built-in animation clips.<br/>
+          Try: <span style={{ color:'var(--accent)' }}>Fox, Robot, Soldier, Flamingo</span>
+        </div>
       </div>
-    </div>
-  )
+    )
+  }
 
   return (
     <div>
-      <div style={{ padding:'8px 12px', borderBottom:'1px solid var(--border)',
-        fontSize:11, color:'var(--text2)' }}>
-        {animated.length} animated model{animated.length>1?'s':''} · click a clip to switch
+      <div style={{
+        padding:'8px 12px', borderBottom:'1px solid var(--border)',
+        display:'flex', alignItems:'center', justifyContent:'space-between',
+      }}>
+        <span style={{ fontSize:11, color:'var(--text2)' }}>
+          {animated.length} animated model{animated.length>1?'s':''}
+        </span>
+        <button
+          onClick={() => {
+            const { models, setModelAnimPlaying } = useStore.getState()
+            const allPlaying = animated.every(m => m.animationPlaying)
+            animated.forEach(m => setModelAnimPlaying(m.id, !allPlaying))
+          }}
+          style={{
+            padding:'4px 10px', borderRadius:'var(--radius-sm)',
+            background:'var(--bg3)', border:'1px solid var(--border)',
+            color:'var(--text1)', fontSize:10, cursor:'pointer',
+          }}
+        >
+          {animated.every(m => m.animationPlaying) ? '⏸ Pause All' : '▶ Play All'}
+        </button>
       </div>
-      {animated.map((m) => (
+
+      {animated.map(m => (
         <AnimBlock key={m.id} model={m} colorIdx={models.indexOf(m)} />
       ))}
     </div>

src/components/CommandInterpreter.js

@@ -238,10 +238,16 @@ export async function applyCommand(cmd) {
       for (const m of targets) {
         if (cmd.animation) s.setModelActiveAnimation(m.id, cmd.animation)
         if (cmd.speed != null) s.setModelAnimSpeed(m.id, cmd.speed)
+        s.setModelAnimPlaying?.(m.id, true)
       }
       break
     }
 
+    case 'pause_animation': {
+      for (const m of targets) s.setModelAnimPlaying?.(m.id, false)
+      break
+    }
+
     // ── TIMELINE ─────────────────────────────────────────────────────────────
     case 'play':         s.setIsPlaying(true);  break
     case 'pause':        s.setIsPlaying(false); break

src/components/ModelManager.jsx

@@ -1,88 +1,183 @@
+/**
+ * ModelManager.jsx
+ * Renders all GLB models in the Three.js scene.
+ * Fixes:
+ *  - Animation detection: registers ALL clips from GLB immediately on load
+ *  - Animation playback: auto-plays first clip, responds to animationPlaying state
+ *  - Mixer update: driven by useFrame so clips actually animate
+ *  - Transform sync: bidirectional (store ↔ TransformControls)
+ *  - Clone: properly clones scene so multiple instances don't share geometry
+ */
 import { useEffect, useRef, useMemo } from 'react'
-import { useGLTF, useAnimations } from '@react-three/drei'
-import { useFrame } from '@react-three/fiber'
-import { TransformControls } from '@react-three/drei'
-import * as THREE from 'three'
-import useStore from '../store/useStore'
+import { useGLTF, useAnimations, TransformControls } from '@react-three/drei'
+import { useFrame }   from '@react-three/fiber'
+import * as THREE     from 'three'
+import useStore       from '../store/useStore'
 
 function ModelMesh({ model }) {
-  const groupRef = useRef()
-  const transformRef = useRef()
+  const groupRef     = useRef()
+  const mixerRef     = useRef(null)
+  const actionsRef   = useRef({})
+  const currentAnimRef = useRef(null)
+
   const { scene, animations } = useGLTF(model.url)
-  const { actions, mixer } = useAnimations(animations, groupRef)
 
   const {
     selectedModelId, transformMode,
-    updateModelTransform, setModelAnimations,
-    selectModel, currentFrame, isPlaying,
-    interpolateAtFrame, keyframes
+    updateModelTransform, setModelAnimations, setModelAnimPlaying,
+    selectModel, currentFrame, keyframes,
   } = useStore()
 
   const isSelected = selectedModelId === model.id
 
-  // Clone scene to avoid sharing
+  // ── Clone scene using SkeletonUtils for correct bone cloning ──────────────
   const clonedScene = useMemo(() => {
+    // Deep clone preserving skeleton/skinned mesh properly
     const clone = scene.clone(true)
+    // Re-bind skinned meshes to cloned skeleton
+    const srcBones = []
+    const dstBones = []
+    scene.traverse(n => { if (n.isBone) srcBones.push(n) })
+    clone.traverse(n => { if (n.isBone) dstBones.push(n) })
+    clone.traverse(child => {
+      if (child.isSkinnedMesh && child.skeleton) {
+        const newBones = child.skeleton.bones.map(b => {
+          const idx = srcBones.indexOf(b)
+          return idx !== -1 ? dstBones[idx] : b
+        })
+        child.skeleton = new THREE.Skeleton(newBones, child.skeleton.boneInverses)
+        child.bind(child.skeleton, child.bindMatrix)
+      }
+    })
     clone.traverse(child => {
       if (child.isMesh) {
-        child.castShadow = true
+        child.castShadow    = true
         child.receiveShadow = true
+        if (child.material) {
+          child.material = Array.isArray(child.material)
+            ? child.material.map(m => m.clone())
+            : child.material.clone()
+        }
       }
     })
     return clone
   }, [scene])
 
-  // Register available animations
+  // ── Set up AnimationMixer + register all clips ────────────────────────────
   useEffect(() => {
-    if (animations.length > 0) {
-      setModelAnimations(model.id, animations.map(a => a.name))
+    if (!clonedScene) return
+
+    // Create mixer on the cloned scene root
+    const mixer = new THREE.AnimationMixer(clonedScene)
+    mixerRef.current = mixer
+
+    if (animations && animations.length > 0) {
+      const actionMap = {}
+      animations.forEach(clip => {
+        // Re-target clip to cloned scene bones
+        const action = mixer.clipAction(clip, clonedScene)
+        action.setLoop(THREE.LoopRepeat, Infinity)
+        action.clampWhenFinished = false
+        actionMap[clip.name] = action
+      })
+      actionsRef.current = actionMap
+
+      // Register animation names to store
+      const names = animations.map(a => a.name)
+      setModelAnimations(model.id, names)
+
+      // Auto-play first clip if model has no active animation set
+      const activeAnim = useStore.getState().models.find(m => m.id === model.id)?.activeAnimation
+      const firstClip  = activeAnim || names[0]
+      if (firstClip && actionMap[firstClip]) {
+        actionMap[firstClip].play()
+        currentAnimRef.current = firstClip
+      }
+
+      // Mark as playing
+      setModelAnimPlaying(model.id, true)
     }
-  }, [animations, model.id])
 
-  // Play/pause animation
+    return () => {
+      mixer.stopAllAction()
+      mixer.uncacheRoot(clonedScene)
+    }
+  }, [clonedScene, animations, model.id])
+
+  // ── React to animation changes from store ─────────────────────────────────
   useEffect(() => {
-    if (!actions || !model.activeAnimation) return
-    Object.values(actions).forEach(a => a?.stop())
-    const action = actions[model.activeAnimation]
-    if (action) {
-      action.setEffectiveTimeScale(model.animationSpeed)
-      if (model.animationPlaying || isPlaying) {
-        action.play()
+    const mixer   = mixerRef.current
+    const actions = actionsRef.current
+    if (!mixer || !model.activeAnimation) return
+
+    const targetAnim = model.activeAnimation
+    if (currentAnimRef.current === targetAnim && model.animationPlaying) return
+
+    // Cross-fade to new animation
+    const prevAction = actions[currentAnimRef.current]
+    const nextAction = actions[targetAnim]
+
+    if (nextAction) {
+      if (prevAction && prevAction !== nextAction) {
+        prevAction.fadeOut(0.3)
+        nextAction.reset().fadeIn(0.3)
+      } else {
+        nextAction.reset()
+      }
+
+      if (model.animationPlaying) {
+        nextAction.play()
+      } else {
+        nextAction.play()
+        nextAction.paused = true
       }
+
+      nextAction.setEffectiveTimeScale(model.animationSpeed || 1)
+      currentAnimRef.current = targetAnim
     }
-  }, [model.activeAnimation, model.animationPlaying, model.animationSpeed, actions, isPlaying])
+  }, [model.activeAnimation, model.animationPlaying, model.animationSpeed])
 
-  // Apply interpolated transforms during playback / scrubbing
+  // ── Play/pause toggle ─────────────────────────────────────────────────────
   useEffect(() => {
-    const interpolated = interpolateAtFrame(model.id, currentFrame)
-    if (interpolated && groupRef.current) {
-      groupRef.current.position.set(...interpolated.position)
-      groupRef.current.rotation.set(...interpolated.rotation)
-      groupRef.current.scale.set(...interpolated.scale)
-    } else if (groupRef.current) {
-      groupRef.current.position.set(...model.position)
-      groupRef.current.rotation.set(...model.rotation)
-      groupRef.current.scale.set(...model.scale)
-    }
-  }, [currentFrame, keyframes, model.position, model.rotation, model.scale])
+    const actions = actionsRef.current
+    const cur     = currentAnimRef.current
+    if (!cur || !actions[cur]) return
+    actions[cur].paused = !model.animationPlaying
+  }, [model.animationPlaying])
 
-  // Apply model transforms
+  // ── Speed changes ─────────────────────────────────────────────────────────
+  useEffect(() => {
+    const actions = actionsRef.current
+    Object.values(actions).forEach(a => {
+      a.setEffectiveTimeScale(model.animationSpeed || 1)
+    })
+  }, [model.animationSpeed])
+
+  // ── Tick mixer ───────────────────────────────────────────────────────────
+  useFrame((_, delta) => {
+    mixerRef.current?.update(delta)
+  })
+
+  // ── Sync position from store (and keyframe interpolation) ─────────────────
   useEffect(() => {
     if (!groupRef.current) return
-    groupRef.current.position.set(...model.position)
-    groupRef.current.rotation.set(...model.rotation)
-    groupRef.current.scale.set(...model.scale)
-  }, [model.position, model.rotation, model.scale])
+    const store = useStore.getState()
+    const interpolated = store.interpolateAtFrame(model.id, currentFrame)
+    const src = interpolated || model
+    groupRef.current.position.set(...src.position)
+    groupRef.current.rotation.set(...src.rotation)
+    groupRef.current.scale.set(...src.scale)
+  }, [currentFrame, keyframes, model.position, model.rotation, model.scale])
 
-  // Listen to transform control changes
-  const handleTransformChange = () => {
+  // ── Handle TransformControls drag ─────────────────────────────────────────
+  const onTransformChange = () => {
     if (!groupRef.current) return
-    const pos = groupRef.current.position
-    const rot = groupRef.current.rotation
+    const p = groupRef.current.position
+    const r = groupRef.current.rotation
     const sc = groupRef.current.scale
-    updateModelTransform(model.id, 'position', [pos.x, pos.y, pos.z])
-    updateModelTransform(model.id, 'rotation', [rot.x, rot.y, rot.z])
-    updateModelTransform(model.id, 'scale', [sc.x, sc.y, sc.z])
+    updateModelTransform(model.id, 'position', [p.x,  p.y,  p.z])
+    updateModelTransform(model.id, 'rotation', [r.x,  r.y,  r.z])
+    updateModelTransform(model.id, 'scale',    [sc.x, sc.y, sc.z])
   }
 
   if (!model.visible) return null
@@ -91,25 +186,30 @@ function ModelMesh({ model }) {
     <>
       <group
         ref={groupRef}
-        onClick={(e) => { e.stopPropagation(); selectModel(model.id) }}
+        onClick={e => { e.stopPropagation(); selectModel(model.id) }}
       >
         <primitive object={clonedScene} />
-        {/* Selection ring */}
+
+        {/* Selection indicator */}
         {isSelected && (
-          <mesh>
-            <ringGeometry args={[0.8, 0.9, 32]} />
-            <meshBasicMaterial color="#00f5ff" transparent opacity={0.6} side={THREE.DoubleSide} />
+          <mesh rotation={[-Math.PI/2, 0, 0]}>
+            <ringGeometry args={[0.85, 1.0, 48]} />
+            <meshBasicMaterial
+              color="#4f8eff"
+              transparent opacity={0.7}
+              side={THREE.DoubleSide}
+              depthWrite={false}
+            />
           </mesh>
         )}
       </group>
 
       {isSelected && (
         <TransformControls
-          ref={transformRef}
           object={groupRef}
           mode={transformMode}
-          onObjectChange={handleTransformChange}
-          size={0.7}
+          onObjectChange={onTransformChange}
+          size={0.75}
         />
       )}
     </>
@@ -121,7 +221,7 @@ export default function ModelManager() {
   return (
     <>
       {models.map(model => (
-        <ModelMesh key={model.id} model={model} />
+        <ModelMesh key={`${model.id}-${model.url}`} model={model} />
       ))}
     </>
   )

src/store/useStore.js

@@ -54,6 +54,9 @@ const useStore = create(
       if (m) m.activeAnimation = animName
     }),
 
+    setModelAnimPlaying: (id, playing) => set(state => ({
+      models: state.models.map(m => m.id === id ? { ...m, animationPlaying: playing } : m)
+    })),
     setModelAnimSpeed: (id, speed) => set(state => {
       const m = state.models.find(m => m.id === id)
       if (m) m.animationSpeed = speed