perf(renderer): reduce costly blur transitions

src/renderer/components/chat/ChatHistory.tsx

@@ -865,7 +865,7 @@ export const ChatHistory = ({ tabId }: ChatHistoryProps): JSX.Element => {
                 onClick={() => setContextPanelVisible(!isContextPanelVisible)}
                 onMouseEnter={() => setIsContextButtonHovered(true)}
                 onMouseLeave={() => setIsContextButtonHovered(false)}
-                className="pointer-events-auto flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs shadow-lg backdrop-blur-md transition-colors"
+                className="pointer-events-auto flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs shadow-lg transition-colors"
                 style={{
                   backgroundColor: isContextPanelVisible
                     ? 'var(--context-btn-active-bg)'
@@ -997,7 +997,7 @@ export const ChatHistory = ({ tabId }: ChatHistoryProps): JSX.Element => {
               scrollToBottom('smooth');
               setShowScrollButton(false);
             }}
-            className="absolute bottom-5 z-20 flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs shadow-lg backdrop-blur-md transition-all"
+            className="absolute bottom-5 z-20 flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs shadow-lg transition-colors"
             style={{
               right: '1rem',
               backgroundColor: 'var(--context-btn-bg)',

src/renderer/components/chat/ChatHistoryItem.tsx

@@ -76,7 +76,7 @@ const ChatHistoryItemInner = ({
       return (
         <div
           ref={registerChatItemRef(item.group.id)}
-          className={`rounded-lg transition-all ease-out ${hl.className} ${enterClass}`}
+          className={`rounded-lg transition-[background-color,box-shadow] ease-out ${hl.className} ${enterClass}`}
           style={{ ...transitionStyle, ...(hl.style ?? {}) }}
         >
           <UserChatGroup userGroup={item.group} />
@@ -94,7 +94,7 @@ const ChatHistoryItemInner = ({
       return (
         <div
           ref={registerChatItemRef(item.group.id)}
-          className={`rounded-lg transition-all ease-out ${hl.className} ${enterClass}`}
+          className={`rounded-lg transition-[background-color,box-shadow] ease-out ${hl.className} ${enterClass}`}
           style={{ ...transitionStyle, ...(hl.style ?? {}) }}
         >
           <SystemChatGroup systemGroup={item.group} />
@@ -116,7 +116,7 @@ const ChatHistoryItemInner = ({
       return (
         <div
           ref={registerAIGroupRef(item.group.id)}
-          className={`rounded-lg transition-all ease-out ${hl.className} ${enterClass}`}
+          className={`rounded-lg transition-[background-color,box-shadow] ease-out ${hl.className} ${enterClass}`}
           style={{ ...transitionStyle, ...(hl.style ?? {}) }}
         >
           <AIChatGroup

src/renderer/components/chat/items/BaseItem.tsx

@@ -100,7 +100,7 @@ export const BaseItem: React.FC<BaseItemProps> = ({
 }) => {
   return (
     <div
-      className={`rounded transition-all duration-300 ${highlightClasses}`}
+      className={`rounded transition-[background-color,box-shadow] duration-300 ${highlightClasses}`}
       style={highlightStyle}
     >
       {/* Clickable Header */}

src/renderer/components/chat/items/MetricsPill.tsx

@@ -152,7 +152,6 @@ export const MetricsPill = ({
             style={{
               ...tooltipStyle,
               border: `1px solid ${TAG_BORDER}`,
-              backdropFilter: 'blur(8px)',
             }}
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}

src/renderer/components/chat/items/SubagentItem.tsx

@@ -265,7 +265,7 @@ export const SubagentItem: React.FC<SubagentItemProps> = ({
   return (
     <div
       ref={outerCardRef}
-      className={`overflow-hidden rounded-md transition-all duration-300 ${outerHighlight.className}`}
+      className={`overflow-hidden rounded-md transition-[background-color,box-shadow] duration-300 ${outerHighlight.className}`}
       style={{
         backgroundColor: CARD_BG,
         border: CARD_BORDER_STYLE,

src/renderer/components/chat/items/TeammateMessageItem.tsx

@@ -145,7 +145,7 @@ export const TeammateMessageItem: React.FC<TeammateMessageItemProps> = ({
 
   return (
     <div
-      className={`overflow-hidden rounded-md transition-all duration-300 ${highlightClasses}`}
+      className={`overflow-hidden rounded-md transition-[background-color,box-shadow] duration-300 ${highlightClasses}`}
       style={{
         backgroundColor: CARD_BG,
         border: CARD_BORDER_STYLE,

src/renderer/components/search/CommandPalette.tsx

@@ -443,7 +443,7 @@ export const CommandPalette = (): React.JSX.Element | null => {
   return (
     <div
       role="presentation"
-      className="fixed inset-0 z-50 flex items-start justify-center bg-black/60 pt-[15vh] backdrop-blur-sm"
+      className="fixed inset-0 z-50 flex items-start justify-center bg-black/60 pt-[15vh]"
       onClick={handleBackdropClick}
     >
       <div className="w-full max-w-2xl overflow-hidden rounded-xl border border-border bg-surface shadow-2xl">

src/renderer/hooks/useTheme.ts

@@ -89,12 +89,24 @@ export function useTheme(): {
   // Apply theme class to document root
   useEffect(() => {
     const root = document.documentElement;
+    const body = document.body;
+
+    body.classList.add('theme-transitioning');
 
     // Remove existing theme classes
     root.classList.remove('dark', 'light');
 
     // Add new theme class
     root.classList.add(resolvedTheme);
+
+    const timer = window.setTimeout(() => {
+      body.classList.remove('theme-transitioning');
+    }, 250);
+
+    return () => {
+      window.clearTimeout(timer);
+      body.classList.remove('theme-transitioning');
+    };
   }, [resolvedTheme]);
 
   return {

src/renderer/index.css

@@ -763,6 +763,9 @@ body {
   -moz-osx-font-smoothing: grayscale;
   background-color: var(--color-surface);
   color: var(--color-text);
+}
+
+body.theme-transitioning {
   transition:
     background-color 0.2s ease,
     color 0.2s ease;