Implement scene-based chapter quest progression

src/components/CharacterPanel.tsx

@@ -25,6 +25,7 @@ import {
   getEquipmentRarityLabel,
   getEquipmentSlotLabel,
 } from '../data/equipmentEffects';
+import { buildMedievalNpcVisualFromCustomWorldVisual } from '../data/medievalNpcVisuals';
 import type { CharacterChatTarget } from '../hooks/useStoryGeneration';
 import { getResourceLabelsForWorld } from '../services/customWorldPresentation';
 import {
@@ -61,6 +62,7 @@ import {
   StatusRow,
 } from './CharacterInfoShared';
 import type { GameCanvasEntitySelection } from './GameCanvas';
+import { MedievalNpcAnimator } from './MedievalNpcAnimator';
 import { PixelIcon } from './PixelIcon';
 
 interface CharacterPanelProps {
@@ -613,15 +615,22 @@ export function CharacterPanel({
                   >
                     <div className="flex flex-col items-center text-center">
                       <div className="flex h-36 w-full max-w-[15rem] items-end justify-center overflow-hidden rounded-2xl border border-white/10 bg-black/20 sm:h-40">
-                        <CharacterAnimator
-                          state={AnimationState.IDLE}
-                          character={selectedMember.character}
-                          className="h-full w-full"
-                          imageClassName="object-bottom"
-                          style={getCharacterDetailSpriteStyle(
-                            selectedMember.character,
-                          )}
-                        />
+                        {selectedMember.character.visual ? (
+                          <MedievalNpcAnimator
+                            visualSpec={buildMedievalNpcVisualFromCustomWorldVisual(selectedMember.character.visual)}
+                            scale={2.08}
+                          />
+                        ) : (
+                          <CharacterAnimator
+                            state={AnimationState.IDLE}
+                            character={selectedMember.character}
+                            className="h-full w-full"
+                            imageClassName="object-bottom"
+                            style={getCharacterDetailSpriteStyle(
+                              selectedMember.character,
+                            )}
+                          />
+                        )}
                       </div>
                       <div className="mt-3 text-base font-bold text-white">
                         {selectedMember.character.name}