refactor(characters): drive shared UI from active character

src/app/_components/__tests__/tailwind-components.test.tsx

@@ -48,7 +48,13 @@ describe("shared Tailwind components", () => {
 
   it("renders CharacterAvatar with dynamic sizing and image utilities", () => {
     const html = renderToStaticMarkup(
-      <CharacterAvatar size={48} imageSize={96} className="custom-avatar" />,
+      <CharacterAvatar
+        src="/images/avatar/maya.png"
+        alt="Maya Tan"
+        size={48}
+        imageSize={96}
+        className="custom-avatar"
+      />,
     );
 
     expect(html).toContain("inline-flex");
@@ -56,7 +62,7 @@ describe("shared Tailwind components", () => {
     expect(html).toContain("width:48px");
     expect(html).toContain("height:48px");
     expect(html).toContain("size-full object-cover");
-    expect(html).toContain("%2Fimages%2Favatar%2Felio.png");
+    expect(html).toContain("%2Fimages%2Favatar%2Fmaya.png");
   });
 
   it("renders UserMessageAvatar custom and fallback images", () => {