agent-robot-avatar 0.2.0 → 0.3.0

package/src/agent-robot-avatar-antenna.js

@@ -1,7 +1,7 @@
 import AgentRobotAvatar, { registerAvatarExtension } from './agent-robot-avatar-extension-host.js';
+import { DEFAULT_HEAD_HEIGHT_SCALE, flattenHeadPoints } from './agent-robot-avatar-geometry.js';
 
 const SVG_NS = 'http://www.w3.org/2000/svg';
-const HEAD_HEIGHT_SCALE = 0.9;
 const ANTENNA_DEFAULTS = Object.freeze({
   x: 120,
   y: 12,
@@ -35,40 +35,10 @@ function antennaHome() {
   };
 }
 
-function smooth01(t) {
-  t = Math.max(0, Math.min(1, t));
-  return t * t * (3 - 2 * t);
-}
-
 function flattenHead(instance) {
   if (instance._headFlattenedR32 || !instance._headShape || !instance._baseHeadPoints?.length) return;
 
-  const source = instance._baseHeadPoints.map(point => ({ x: point.x, y: point.y }));
-  const minY = Math.min(...source.map(point => point.y));
-  const maxY = Math.max(...source.map(point => point.y));
-  const height = maxY - minY;
-  const centerY = (minY + maxY) / 2;
-  const inset = height * (1 - HEAD_HEIGHT_SCALE) / 2;
-
-  const upperLockY = minY + height * 0.40;
-  const lowerLockY = maxY - height * 0.40;
-
-  const flattened = source.map(point => {
-    let shiftY = 0;
-    if (point.y <= upperLockY) {
-      shiftY = inset;
-    } else if (point.y < centerY) {
-      const t = (centerY - point.y) / Math.max(0.001, centerY - upperLockY);
-      shiftY = inset * smooth01(t);
-    } else if (point.y >= lowerLockY) {
-      shiftY = -inset;
-    } else if (point.y > centerY) {
-      const t = (point.y - centerY) / Math.max(0.001, lowerLockY - centerY);
-      shiftY = -inset * smooth01(t);
-    }
-    return { x: point.x, y: point.y + shiftY };
-  });
-
+  const flattened = flattenHeadPoints(instance._baseHeadPoints, DEFAULT_HEAD_HEIGHT_SCALE);
   const path = typeof instance._pointsToPath === 'function'
     ? instance._pointsToPath(flattened)
     : `M ${flattened.map((point, index) => `${index ? 'L ' : ''}${point.x.toFixed(2)} ${point.y.toFixed(2)}`).join(' ')} Z`;
@@ -135,24 +105,33 @@ function updateAntenna(instance, now) {
   const dot = instance._antennaDot;
   const target = antennaTarget(instance);
 
-  if (!spring.initialized) {
+  if (instance._isReducedMotion?.()) {
     spring.x = target.x;
     spring.y = target.y;
+    spring.vx = 0;
+    spring.vy = 0;
     spring.last = now;
     spring.initialized = true;
-  }
+  } else {
+    if (!spring.initialized) {
+      spring.x = target.x;
+      spring.y = target.y;
+      spring.last = now;
+      spring.initialized = true;
+    }
+
+    const dt = Math.max(0.001, Math.min(0.05, (now - spring.last) / 1000 || 0.033));
+    spring.last = now;
 
-  const dt = Math.max(0.001, Math.min(0.05, (now - spring.last) / 1000 || 0.033));
-  spring.last = now;
-
-  const stiffness = configNumber('stiffness', ANTENNA_DEFAULTS.stiffness, 5, 300);
-  const damping = configNumber('damping', ANTENNA_DEFAULTS.damping, 0.5, 40);
-  const ax = (target.x - spring.x) * stiffness - spring.vx * damping;
-  const ay = (target.y - spring.y) * stiffness - spring.vy * damping;
-  spring.vx += ax * dt;
-  spring.vy += ay * dt;
-  spring.x += spring.vx * dt;
-  spring.y += spring.vy * dt;
+    const stiffness = configNumber('stiffness', ANTENNA_DEFAULTS.stiffness, 5, 300);
+    const damping = configNumber('damping', ANTENNA_DEFAULTS.damping, 0.5, 40);
+    const ax = (target.x - spring.x) * stiffness - spring.vx * damping;
+    const ay = (target.y - spring.y) * stiffness - spring.vy * damping;
+    spring.vx += ax * dt;
+    spring.vy += ay * dt;
+    spring.x += spring.vx * dt;
+    spring.y += spring.vy * dt;
+  }
 
   dot.setAttribute('cx', spring.x.toFixed(2));
   dot.setAttribute('cy', spring.y.toFixed(2));

package/src/agent-robot-avatar-core.js

@@ -142,6 +142,7 @@ const AgentRobotAvatar = (() => {
       this._inputWanted = false;
       this._sleeping = false;
       this._idleTimer = null;
+      this._pendingWaits = new Map();
       this._boredRoutine = null;
       this._boredLookSpeed = null;
       this._autoSleepMs = Number(this.getAttribute('auto-sleep')) || 0;
@@ -169,6 +170,7 @@ const AgentRobotAvatar = (() => {
       this.addEventListener('pointerdown', this._boundDragStart);
       this.addEventListener('click', this._boundClickCapture, true);
       this._running = !document.hidden;
+      this._lastActivity = performance.now();
       this._resumeFrames();
     }
 
@@ -176,6 +178,20 @@ const AgentRobotAvatar = (() => {
       unregisterConnectedFace(this);
       this.removeEventListener('pointerdown', this._boundDragStart);
       this.removeEventListener('click', this._boundClickCapture, true);
+      // Removal cancels work; reattachment starts idle with appearance settings intact.
+      this._resetToIdle(false);
+      this._blinkAnim = null;
+      this._blink = 1;
+      this._pointer.active = false;
+      this._pointer.influence = 0;
+      const drag = this._dragJelly;
+      if (drag.pointerId != null) {
+        try { this.releasePointerCapture(drag.pointerId); } catch (_) {}
+      }
+      drag.active = false;
+      drag.pointerId = null;
+      this._finishDragReturn(null);
+      this._suppressClick = false;
       this._running = false;
       cancelAnimationFrame(this._raf);
       this._raf = 0;
@@ -184,11 +200,18 @@ const AgentRobotAvatar = (() => {
     static get observedAttributes() { return ['color','size','auto-sleep']; }
     attributeChangedCallback(name, oldV, newV) {
       if (oldV === newV) return;
-      if (name === 'color' && this._head) this._head.setAttribute('fill', newV || '#08090b');
+      if (name === 'color') this._applyColor(newV);
       if (name === 'size') this.style.setProperty('--face-size', `${Number(newV)||112}px`);
       if (name === 'auto-sleep') this._autoSleepMs = Number(newV) || 0;
     }
 
+    _applyColor(value) {
+      const color = value || '#08090b';
+      for (const part of [this._head, this._leftTop, this._rightTop, this._leftBottom, this._rightBottom, this._antennaDot]) {
+        if (part) part.setAttribute('fill', color);
+      }
+    }
+
     _renderShell() {
       this.shadowRoot.innerHTML = `
         <style>
@@ -246,10 +269,7 @@ const AgentRobotAvatar = (() => {
       this._rightTop = this.shadowRoot.getElementById('rightTop');
       this._leftBottom = this.shadowRoot.getElementById('leftBottom');
       this._rightBottom = this.shadowRoot.getElementById('rightBottom');
-      const c = this.getAttribute('color') || '#08090b';
-      this._head.setAttribute('fill', c);
-      [this._leftTop,this._rightTop,this._leftBottom,this._rightBottom].forEach(el=>el.setAttribute('fill',c));
-      this.style.setProperty('--face-size', `${Number(this.getAttribute('size'))||112}px`);
+      this._applyColor(this.getAttribute('color'));
       this._baseHeadPathD = this._headShape.getAttribute('d');
       this._baseHeadPoints = this._parseHeadPoints(this._baseHeadPathD);
     }
@@ -511,8 +531,14 @@ const AgentRobotAvatar = (() => {
     }
 
     reset() {
+      return this._resetToIdle();
+    }
+
+    _resetToIdle(notify = true) {
+      this._resetExtensionEffects?.();
       this._inputWanted = false;
       ++this._transitionToken;
+      this._cancelPendingWaits();
       this._boredRoutine = null;
       this._boredLookSpeed = null;
       this._sleeping = false;
@@ -520,7 +546,7 @@ const AgentRobotAvatar = (() => {
       this._eyeBob = null;
       this._angryEyeDrop = null;
       this._surpriseShake = null;
-      this.setState('idle');
+      this.setState('idle', { notify, duration: notify ? 320 : 0 });
       return this;
     }
 
@@ -531,7 +557,7 @@ const AgentRobotAvatar = (() => {
       this._sleeping = name === 'sleep';
       if (name === 'idle' && !opts.keepGazeLock) this._releaseExpressionLock();
       this._startMorph(POSES[name], opts.duration ?? (name==='surprise'?170:320), opts.ease || EASE.outQuint);
-      this.dispatchEvent(new CustomEvent('face-state', {detail:{state:name}}));
+      if (opts.notify !== false) this.dispatchEvent(new CustomEvent('face-state', {detail:{state:name}}));
       return this;
     }
 
@@ -559,6 +585,7 @@ const AgentRobotAvatar = (() => {
       } else {
         if (!(await this._prepareExpression({normalizePose:true, duration:180, pause:320}))) return;
       }
+      const token = this._transitionToken;
       this.setState('happy', {duration: fromDrag ? 180 : 220, keepGazeLock:true});
       this._eyeBob = {start: performance.now(), duration: 620, amp: 8};
       this._animateHead([
@@ -567,6 +594,7 @@ const AgentRobotAvatar = (() => {
         {transform:'translateY(0px)'}
       ], 760);
       await this._wait(980);
+      if (token !== this._transitionToken) return;
       this._eyeBob = null;
       if (this._state==='happy') await this._returnToIdle(520);
     }
@@ -575,6 +603,7 @@ const AgentRobotAvatar = (() => {
       this.noteActivity();
       this._inputWanted = false;
       if (!(await this._prepareExpression({normalizePose:true, duration:180, pause:320}))) return;
+      const token = this._transitionToken;
       this.setState('sad', {duration:320, keepGazeLock:true});
       this._eyeBob = {start: performance.now(), duration: 700, amp: 7};
       this._animateHead([
@@ -583,6 +612,7 @@ const AgentRobotAvatar = (() => {
         {transform:'translateY(0px)'}
       ], 820);
       await this._wait(1180);
+      if (token !== this._transitionToken) return;
       this._eyeBob = null;
       if (this._state==='sad') {
         await this._returnToIdle(560);
@@ -605,6 +635,7 @@ const AgentRobotAvatar = (() => {
       } else {
         if (!(await this._prepareExpression({normalizePose:true, duration:180, pause:320}))) return;
       }
+      const token = this._transitionToken;
       this.setState('angry', {duration: fromDrag ? 180 : 280, keepGazeLock:true});
       this._angryEyeDrop = {start: performance.now(), duration:680, amount:4.8};
       this._animateHead([
@@ -613,6 +644,7 @@ const AgentRobotAvatar = (() => {
         {transform:'translateY(0px)'}
       ], 820);
       await this._wait(980);
+      if (token !== this._transitionToken) return;
       this._angryEyeDrop = null;
       if (this._state==='angry') await this._returnToIdle(500);
     }
@@ -621,17 +653,19 @@ const AgentRobotAvatar = (() => {
       this.noteActivity();
       this._inputWanted = false;
       if (!(await this._prepareExpression({normalizePose:true, duration:180, pause:320}))) return;
+      const token = this._transitionToken;
       this._surpriseShake = null;
       const pre = {...POSES.idle, w:34, h:36, rx:18};
       this._startMorph(pre, 235, EASE.inOutCubic);
       await this._wait(235);
-      if (this._state!=='idle') return;
+      if (token !== this._transitionToken || this._state!=='idle') return;
       this.setState('surprise', {duration:175, ease:EASE.outQuint, keepGazeLock:true});
       this._animateHead([{transform:'scale(1)'},{transform:'scale(1.035)'}], 175);
       await this._wait(175);
-      if (this._state!=='surprise') return;
+      if (token !== this._transitionToken || this._state!=='surprise') return;
       this._surpriseShake = {start: performance.now(), duration:420};
       await this._wait(420);
+      if (token !== this._transitionToken) return;
       this._surpriseShake = null;
       if (this._state==='surprise') {
         this._animateHead([{transform:'scale(1.035)'},{transform:'scale(1)'}], 430);
@@ -643,6 +677,7 @@ const AgentRobotAvatar = (() => {
       this.noteActivity();
       this._inputWanted = false;
       if (!(await this._prepareExpression({normalizePose:true, duration:180, pause:320}))) return;
+      const token = this._transitionToken;
       this._eyeNod = {start: performance.now(), duration: 760};
       this._animateHead([
         {transform:'translateY(0px)'},
@@ -650,6 +685,7 @@ const AgentRobotAvatar = (() => {
         {transform:'translateY(0px)'}
       ], 920);
       await this._wait(860);
+      if (token !== this._transitionToken) return;
       this._eyeNod = null;
       this._releaseExpressionLock();
     }
@@ -657,21 +693,22 @@ const AgentRobotAvatar = (() => {
     async sleep() {
       if (this._sleeping) return;
       if (!(await this._prepareExpression({normalizePose:true, duration:160}))) return;
+      const token = this._transitionToken;
       this._blinkAnim = null;
       this._blink = 1;
       this._nextBlinkAt = performance.now() + 10000;
       this.setState('sleepy', {duration:940, ease:EASE.inOutCubic, keepGazeLock:true});
       await this._wait(980);
-      if (this._state !== 'sleepy') return;
+      if (token !== this._transitionToken || this._state !== 'sleepy') return;
       const reopen = {...POSES.idle, topY:-22, bottomY:36};
       this._startMorph(reopen, 105, EASE.outQuint);
       await this._wait(120);
-      if (this._state !== 'sleepy') return;
+      if (token !== this._transitionToken || this._state !== 'sleepy') return;
       this.setState('sleepy', {duration:820, ease:EASE.inOutCubic, keepGazeLock:true});
       await this._wait(870);
-      if (this._state !== 'sleepy') return;
+      if (token !== this._transitionToken || this._state !== 'sleepy') return;
       await this._wait(120);
-      if (this._state !== 'sleepy') return;
+      if (token !== this._transitionToken || this._state !== 'sleepy') return;
       this._animateHead([{transform:'translateY(0)'},{transform:'translateY(4px)'}],980);
       this._startMorph(POSES.sleep, 980, EASE.inOutCubic);
       this._state = 'sleep';
@@ -682,6 +719,7 @@ const AgentRobotAvatar = (() => {
 
     async wake() {
       if (!this._sleeping && this._state!=='sleep') return;
+      const token = ++this._transitionToken;
       this._expressionLock = true;
       this._sleeping = false;
       this._animateHead([
@@ -691,9 +729,12 @@ const AgentRobotAvatar = (() => {
       ], 500);
       this.setState('sleepy', {duration:240, keepGazeLock:true});
       await this._wait(260);
+      if (token !== this._transitionToken) return;
       this.setState('surprise', {duration:120, keepGazeLock:true});
       await this._wait(190);
+      if (token !== this._transitionToken) return;
       await this._returnToIdle(300);
+      if (token !== this._transitionToken) return;
       this._lastActivity = performance.now();
     }
 
@@ -715,18 +756,40 @@ const AgentRobotAvatar = (() => {
 
     _animateHead(frames, duration) {
       if (!this._headMotion.animate) return;
+      const token = this._transitionToken;
       const anim = this._headMotion.animate(frames, {duration, easing:'cubic-bezier(.16,1,.3,1)', fill:'forwards'});
-      anim.onfinish = () => { this._headMotion.style.transform = frames[frames.length-1].transform || ''; };
+      anim.onfinish = () => {
+        if (token === this._transitionToken) {
+          this._headMotion.style.transform = frames[frames.length-1].transform || '';
+        }
+      };
       return anim;
     }
 
-    _wait(ms) { return new Promise(r=>setTimeout(r,ms)); }
+    _wait(ms) {
+      return new Promise(resolve => {
+        const timer = setTimeout(() => {
+          this._pendingWaits.delete(timer);
+          resolve();
+        }, ms);
+        this._pendingWaits.set(timer, resolve);
+      });
+    }
+
+    _cancelPendingWaits() {
+      for (const [timer, resolve] of this._pendingWaits) {
+        clearTimeout(timer);
+        resolve();
+      }
+      this._pendingWaits.clear();
+    }
 
     async _returnToIdle(duration=320, ease=EASE.outQuint) {
+      const token = this._transitionToken;
       this.setState('idle', {duration, ease, keepGazeLock:true});
       this._headCenteringUntil = Math.max(this._headCenteringUntil || 0, performance.now() + duration);
       await this._wait(duration);
-      if (this._state === 'idle') this._releaseExpressionLock();
+      if (token === this._transitionToken && this._state === 'idle') this._releaseExpressionLock();
     }
 
     async _prepareExpression({normalizePose=true, duration=180, pause=320}={}) {
@@ -848,7 +911,7 @@ const AgentRobotAvatar = (() => {
     }
 
     _autoSleep(now) {
-      if (!this._autoSleepMs || this._sleeping || ['input','happy','sad','surprise'].includes(this._state)) return;
+      if (!this._autoSleepMs || this._sleeping || this._expressionLock || ['input','happy','sad','surprise'].includes(this._state)) return;
       if (now - this._lastActivity > this._autoSleepMs) this.sleep();
     }
 

package/src/agent-robot-avatar-extension-host.js

@@ -58,9 +58,14 @@ proto.play = function(name) {
   return result;
 };
 
+// Called dynamically by core reset and disconnect; custom-element lifecycle
+// callbacks themselves were already registered before extensions loaded.
+proto._resetExtensionEffects = function() {
+  for (const hook of resetHooks) hook.call(this);
+};
+
 proto.reset = function() {
   this._resumeFrames?.();
-  for (const hook of resetHooks) hook.call(this);
   return baseReset.call(this);
 };
 

package/src/agent-robot-avatar-failure.js

@@ -13,6 +13,7 @@ function dispatchFailureState(instance, state) {
 
 function animateFailureHead(instance, frames, duration) {
   if (!instance._headMotion?.animate) return null;
+  const token = instance._transitionToken;
   instance._headMotion.style.transformBox = 'view-box';
   instance._headMotion.style.transformOrigin = '120px 120px';
   const anim = instance._headMotion.animate(frames, {
@@ -21,7 +22,9 @@ function animateFailureHead(instance, frames, duration) {
     fill: 'forwards',
   });
   anim.onfinish = () => {
-    instance._headMotion.style.transform = frames[frames.length - 1].transform || '';
+    if (token === instance._transitionToken) {
+      instance._headMotion.style.transform = frames[frames.length - 1].transform || '';
+    }
   };
   return anim;
 }
@@ -95,6 +98,7 @@ proto.failure = async function() {
     { transform: 'translateY(0px)' },
   ], recover);
   if (this._state === 'sad') await this._returnToIdle(recover);
+  if (token !== this._transitionToken) return;
   this._failureFx = null;
 };
 

package/src/agent-robot-avatar-geometry.js

@@ -0,0 +1,40 @@
+const DEFAULT_HEAD_HEIGHT_SCALE = 0.9;
+
+const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+const smooth01 = value => {
+  const t = clamp(value, 0, 1);
+  return t * t * (3 - 2 * t);
+};
+
+function flattenHeadPoints(points, heightScale = DEFAULT_HEAD_HEIGHT_SCALE) {
+  if (!points?.length) return [];
+  const source = points.map(point => ({ x: point.x, y: point.y }));
+  const minY = Math.min(...source.map(point => point.y));
+  const maxY = Math.max(...source.map(point => point.y));
+  const height = maxY - minY;
+  if (!(height > 0)) return source;
+
+  const scale = clamp(Number(heightScale), 0.1, 1);
+  const centerY = (minY + maxY) / 2;
+  const inset = height * (1 - scale) / 2;
+  const upperLockY = minY + height * 0.40;
+  const lowerLockY = maxY - height * 0.40;
+
+  return source.map(point => {
+    let shiftY = 0;
+    if (point.y <= upperLockY) {
+      shiftY = inset;
+    } else if (point.y < centerY) {
+      const t = (centerY - point.y) / Math.max(0.001, centerY - upperLockY);
+      shiftY = inset * smooth01(t);
+    } else if (point.y >= lowerLockY) {
+      shiftY = -inset;
+    } else if (point.y > centerY) {
+      const t = (point.y - centerY) / Math.max(0.001, lowerLockY - centerY);
+      shiftY = -inset * smooth01(t);
+    }
+    return { x: point.x, y: point.y + shiftY };
+  });
+}
+
+export { DEFAULT_HEAD_HEIGHT_SCALE, flattenHeadPoints };

package/src/agent-robot-avatar-head-roundness.js

@@ -1,47 +1,14 @@
 import AgentRobotAvatar from './agent-robot-avatar-extension-host.js';
+import { flattenHeadPoints } from './agent-robot-avatar-geometry.js';
 import { VERSION } from './agent-robot-avatar-version.js';
 
 const proto = AgentRobotAvatar.prototype;
-const HEAD_HEIGHT_SCALE = 0.9;
 const DEFAULT_ROUNDNESS = 50;
 
 function clamp(value, min, max) {
   return Math.max(min, Math.min(max, value));
 }
 
-function smooth01(t) {
-  t = clamp(t, 0, 1);
-  return t * t * (3 - 2 * t);
-}
-
-function flattenPoints(points) {
-  if (!points?.length) return [];
-  const source = points.map(point => ({ x: point.x, y: point.y }));
-  const minY = Math.min(...source.map(point => point.y));
-  const maxY = Math.max(...source.map(point => point.y));
-  const height = maxY - minY;
-  const centerY = (minY + maxY) / 2;
-  const inset = height * (1 - HEAD_HEIGHT_SCALE) / 2;
-  const upperLockY = minY + height * 0.40;
-  const lowerLockY = maxY - height * 0.40;
-
-  return source.map(point => {
-    let shiftY = 0;
-    if (point.y <= upperLockY) {
-      shiftY = inset;
-    } else if (point.y < centerY) {
-      const t = (centerY - point.y) / Math.max(0.001, centerY - upperLockY);
-      shiftY = inset * smooth01(t);
-    } else if (point.y >= lowerLockY) {
-      shiftY = -inset;
-    } else if (point.y > centerY) {
-      const t = (point.y - centerY) / Math.max(0.001, lowerLockY - centerY);
-      shiftY = -inset * smooth01(t);
-    }
-    return { x: point.x, y: point.y + shiftY };
-  });
-}
-
 function ensureDefaultGeometry(instance) {
   if (!instance?._headShape || !instance._baseHeadPoints?.length) return false;
   if (instance._headRoundnessDefaultPoints?.length) return true;
@@ -49,7 +16,7 @@ function ensureDefaultGeometry(instance) {
   let points = instance._baseHeadPoints.map(point => ({ x: point.x, y: point.y }));
 
   if (!instance._headFlattenedR32) {
-    points = flattenPoints(points);
+    points = flattenHeadPoints(points);
     instance._headFlattenedR32 = true;
     instance._baseHeadPoints = points.map(point => ({ ...point }));
     instance._baseHeadPathD = instance._pointsToPath(points);

package/src/agent-robot-avatar-inspect.js

@@ -31,46 +31,54 @@ const INSPECT_DEFAULTS = Object.freeze({
   open: 260,
 });
 
+const INSPECT_BOUNDS = Object.freeze({
+  aperture: [6, 40],
+  scanOffset: [0, 24],
+  prepPause: [0, 2400],
+  close: [40, 2400],
+  holdClosed: [0, 2400],
+  down1: [40, 2400],
+  holdDown1: [0, 2400],
+  up1: [40, 2400],
+  holdUp1: [0, 2400],
+  center1: [40, 2400],
+  holdCenter: [0, 2400],
+  down2: [40, 2400],
+  holdDown2: [0, 2400],
+  up2: [40, 2400],
+  holdUp2: [0, 2400],
+  center2: [40, 2400],
+  holdAfter: [0, 2400],
+  open: [40, 2400],
+});
+
 const runtimeWindow = typeof window !== 'undefined' ? window : null;
 const inspectConfig = (runtimeWindow?.AgentRobotAvatarInspectConfig && typeof runtimeWindow.AgentRobotAvatarInspectConfig === 'object')
   ? runtimeWindow.AgentRobotAvatarInspectConfig
   : {};
-for (const [key, value] of Object.entries(INSPECT_DEFAULTS)) {
-  inspectConfig[key] = value;
+
+function normalizeConfigValue(key, value) {
+  const fallback = INSPECT_DEFAULTS[key];
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric)) return fallback;
+  const [min, max] = INSPECT_BOUNDS[key];
+  return Math.max(min, Math.min(max, numeric));
+}
+
+for (const key of Object.keys(INSPECT_DEFAULTS)) {
+  inspectConfig[key] = normalizeConfigValue(key, inspectConfig[key]);
 }
 if (runtimeWindow) {
   runtimeWindow.AgentRobotAvatarInspectConfig = inspectConfig;
   runtimeWindow.AgentRobotAvatarInspectDefaults = INSPECT_DEFAULTS;
 }
 
-function configNumber(key, fallback, min, max) {
-  const value = Number(inspectConfig[key]);
-  if (!Number.isFinite(value)) return fallback;
-  return Math.max(min, Math.min(max, value));
-}
-
 function currentInspectConfig() {
-  const duration = key => configNumber(key, INSPECT_DEFAULTS[key], 0, 2400);
-  return {
-    aperture: configNumber('aperture', INSPECT_DEFAULTS.aperture, 6, 40),
-    scanOffset: configNumber('scanOffset', INSPECT_DEFAULTS.scanOffset, 0, 24),
-    prepPause: duration('prepPause'),
-    close: Math.max(40, duration('close')),
-    holdClosed: duration('holdClosed'),
-    down1: Math.max(40, duration('down1')),
-    holdDown1: duration('holdDown1'),
-    up1: Math.max(40, duration('up1')),
-    holdUp1: duration('holdUp1'),
-    center1: Math.max(40, duration('center1')),
-    holdCenter: duration('holdCenter'),
-    down2: Math.max(40, duration('down2')),
-    holdDown2: duration('holdDown2'),
-    up2: Math.max(40, duration('up2')),
-    holdUp2: duration('holdUp2'),
-    center2: Math.max(40, duration('center2')),
-    holdAfter: duration('holdAfter'),
-    open: Math.max(40, duration('open')),
-  };
+  const config = {};
+  for (const key of Object.keys(INSPECT_DEFAULTS)) {
+    config[key] = normalizeConfigValue(key, inspectConfig[key]);
+  }
+  return config;
 }
 
 function dispatchInspectState(instance, state) {
@@ -122,6 +130,7 @@ function verticalShift(elapsed, phases, offset) {
 // Keep the R60 head motion unchanged: down, up past center, then back to center.
 function animateInspectHead(instance, phases) {
   if (!instance._headMotion?.animate) return;
+  const token = instance._transitionToken;
   const start = phases.down1Start;
   const end = phases.center1End;
   const duration = Math.max(1, end - start);
@@ -142,7 +151,9 @@ function animateInspectHead(instance, phases) {
     easing: 'linear',
     fill: 'forwards',
   });
-  anim.onfinish = () => { instance._headMotion.style.transform = 'translateY(0px)'; };
+  anim.onfinish = () => {
+    if (token === instance._transitionToken) instance._headMotion.style.transform = 'translateY(0px)';
+  };
 }
 
 proto.inspect = async function() {