diff --git a/frontend/app/web-gold/src/components/agents/HistoryPanel.vue b/frontend/app/web-gold/src/components/agents/HistoryPanel.vue
index ef593cc88d..e0fac5c25f 100644
--- a/frontend/app/web-gold/src/components/agents/HistoryPanel.vue
+++ b/frontend/app/web-gold/src/components/agents/HistoryPanel.vue
@@ -321,8 +321,7 @@ watch(() => props.visible, (val) => {
 .history-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(15, 23, 42, 0.4);
-  backdrop-filter: blur(8px);
+  background: rgba(15, 23, 42, 0.5);
   z-index: 2000;
   display: flex;
   align-items: center;
@@ -344,18 +343,19 @@ watch(() => props.visible, (val) => {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  will-change: transform, opacity;
 }
 
 .modal-glow {
   position: absolute;
-  top: -50%;
-  left: -50%;
-  width: 200%;
-  height: 200%;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 200px;
   background: radial-gradient(
-    circle at 30% 20%,
-    rgba(59, 130, 246, 0.08) 0%,
-    transparent 40%
+    ellipse at 30% 0%,
+    rgba(59, 130, 246, 0.06) 0%,
+    transparent 60%
   );
   pointer-events: none;
 }
@@ -442,7 +442,8 @@ watch(() => props.visible, (val) => {
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.2s ease;
+  will-change: transform;
+  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
 
   &:hover {
     background: var(--color-error-100);
@@ -511,6 +512,7 @@ watch(() => props.visible, (val) => {
   inset: 0;
   border-radius: 50%;
   border: 2px solid var(--color-gray-200);
+  will-change: opacity;
   animation: ringPulse 3s ease-in-out infinite;
 
   &.delay-1 {
@@ -521,11 +523,9 @@ watch(() => props.visible, (val) => {
 
 @keyframes ringPulse {
   0%, 100% {
-    transform: scale(1);
     opacity: 0.5;
   }
   50% {
-    transform: scale(1.05);
     opacity: 1;
   }
 }
@@ -565,6 +565,7 @@ watch(() => props.visible, (val) => {
   display: flex;
   flex-direction: column;
   gap: 24px;
+  contain: layout style;
 }
 
 .load-more {
@@ -598,8 +599,9 @@ watch(() => props.visible, (val) => {
 }
 
 .conversation-group {
-  animation: groupFadeIn 0.4s ease-out backwards;
-  animation-delay: calc(var(--group-index) * 0.1s);
+  will-change: opacity;
+  animation: groupFadeIn 0.3s ease-out backwards;
+  animation-delay: calc(var(--group-index) * 0.06s);
 }
 
 @keyframes groupFadeIn {
@@ -648,6 +650,7 @@ watch(() => props.visible, (val) => {
   display: flex;
   flex-direction: column;
   gap: 8px;
+  contain: layout style;
 }
 
 // ========================================
@@ -664,17 +667,15 @@ watch(() => props.visible, (val) => {
   border-radius: 14px;
   cursor: pointer;
   text-align: left;
-  transition: all 0.25s ease;
-  animation: itemFadeIn 0.3s ease-out backwards;
-  animation-delay: calc(var(--group-index) * 0.1s + var(--item-index) * 0.05s);
+  contain: content;
+  will-change: transform, opacity;
+  transition: transform 0.2s ease, border-color 0.2s ease;
+  animation: itemFadeIn 0.25s ease-out backwards;
+  animation-delay: calc(var(--group-index) * 0.06s + var(--item-index) * 0.03s);
 
   &:hover {
     border-color: var(--color-primary-300);
-    background: rgba(59, 130, 246, 0.02);
-    box-shadow:
-      0 4px 12px rgba(59, 130, 246, 0.08),
-      0 0 0 1px rgba(59, 130, 246, 0.1);
-    transform: translateY(-2px);
+    transform: translateY(-1px);
 
     .item-indicator {
       background: var(--color-primary-500);
@@ -691,11 +692,11 @@ watch(() => props.visible, (val) => {
 @keyframes itemFadeIn {
   from {
     opacity: 0;
-    transform: translateX(-8px);
+    transform: translateY(6px);
   }
   to {
     opacity: 1;
-    transform: translateX(0);
+    transform: translateY(0);
   }
 }
 
@@ -705,7 +706,8 @@ watch(() => props.visible, (val) => {
   border-radius: 2px;
   background: var(--color-gray-200);
   flex-shrink: 0;
-  transition: all 0.25s ease;
+  will-change: transform;
+  transition: transform 0.2s ease, background 0.2s ease;
   transform: scaleY(0.6);
 }
 
@@ -758,7 +760,8 @@ watch(() => props.visible, (val) => {
   justify-content: center;
   color: var(--color-gray-300);
   font-size: 10px;
-  transition: all 0.25s ease;
+  will-change: transform;
+  transition: transform 0.2s ease, color 0.2s ease;
 }
 
 // ========================================
@@ -772,11 +775,13 @@ watch(() => props.visible, (val) => {
   display: flex;
   flex-direction: column;
   gap: 24px;
+  contain: layout style;
 }
 
 .timeline-item {
-  animation: msgFadeIn 0.35s ease-out backwards;
-  animation-delay: calc(var(--msg-index) * 0.08s);
+  will-change: opacity;
+  animation: msgFadeIn 0.25s ease-out backwards;
+  animation-delay: calc(var(--msg-index) * 0.04s);
 }
 
 @keyframes msgFadeIn {