improve hermes visuals and tool monitor

src/components/AvatarModelLoader.tsx

@@ -58,7 +58,7 @@ const LoadedGlbAvatar: React.FC<{
     }
   });
 
-  return <primitive object={scene} scale={1} />;
+  return <primitive object={scene} scale={0.48} />;
 };
 
 export const AvatarModelLoader: React.FC<AvatarModelLoaderProps> = ({ avatarId, emotion, isSpeaking }) => {

src/components/EveModel.tsx

@@ -452,8 +452,8 @@ export const EveModel: React.FC<EveModelProps> = ({ emotion, isSpeaking, avatarI
     const center = new THREE.Vector3();
     localBox.getCenter(center);
 
-    // Normalize height to exactly 2.4 units in scene space
-    const targetHeight = 2.4;
+    // Normalize height conservatively so the avatar stays inside the right panel.
+    const targetHeight = 1.18;
     const scaleFactor = targetHeight / (size.y || 1);
     clonedObj.scale.setScalar(scaleFactor);
 
@@ -760,7 +760,7 @@ export const EveModel: React.FC<EveModelProps> = ({ emotion, isSpeaking, avatarI
   });
 
   return (
-    <group ref={modelRef} scale={1.0} position={[0, 0.22, 0]}>
+    <group ref={modelRef} scale={1.0} position={[0, -0.28, 0]}>
       <primitive object={clonedObj} />
     </group>
   );

src/components/ThreeCanvas.tsx

@@ -4,6 +4,14 @@ import { OrbitControls } from '@react-three/drei';
 import { AvatarModelLoader } from './AvatarModelLoader';
 import { EveEmotion, EveAvatar } from '../services/emotionService';
 
+export interface ToolEvent {
+  id: string;
+  label: string;
+  detail?: string;
+  status: 'idle' | 'running' | 'done' | 'error';
+  ts: number;
+}
+
 interface ThreeCanvasProps {
   emotion: EveEmotion;
   isSpeaking: boolean;
@@ -14,10 +22,13 @@ export const ThreeCanvas: React.FC<ThreeCanvasProps> = ({ emotion, isSpeaking, a
   return (
     <div style={{ width: '100%', height: '100%', position: 'relative' }}>
       <Canvas
-        camera={{ position: [0, 0, 4.6], fov: 45 }}
-        gl={{ alpha: true, antialias: true }}
+        camera={{ position: [0, 0.05, 6.2], fov: 36 }}
+        gl={{ alpha: true, antialias: true, premultipliedAlpha: false }}
+        onCreated={({ gl }) => {
+          gl.setClearColor(0x000000, 0);
+        }}
         dpr={[1, 2]}
-        style={{ background: 'transparent' }}
+        style={{ background: 'transparent', backgroundColor: 'transparent' }}
       >
         {/* Soft ambient — dark space base */}
         <ambientLight intensity={0.6} color="#b0c8e8" />
@@ -46,8 +57,8 @@ export const ThreeCanvas: React.FC<ThreeCanvasProps> = ({ emotion, isSpeaking, a
         {/* OrbitControls calibrated to prevent clipping or losing focus */}
         <OrbitControls 
           enableZoom={true} 
-          minDistance={2.2}
-          maxDistance={5.5}
+          minDistance={5.2}
+          maxDistance={7.2}
           enablePan={false} 
           autoRotate={false}
           maxPolarAngle={Math.PI / 1.7}