feat(ui): add dynamic window title and sprite-based project/file icons (#529)

* feat(ui): add dynamic titles and sprite-based project/file icons

* feat(files): add viewer syntax fallback and tab file icons

* fix(files): restore file viewer highlighting and add diff file icons

* feat(git): add file icons and async file-viewer syntax fallback

* fix(files): force codemirror token colors in file viewer

* feat(files): add shiki view mode for file viewer

* fix(files): force codemirror parse after programmatic content updates

* feat(files): support markdown frontmatter preview

* feat(chat): use pierre diffs for tool previews

* feat(chat): add configurable beautiful-mermaid rendering

* feat(perf): virtualize chat rendering and add react-scan toggle

* feat(build): enable React Compiler in Vite React apps

* fix(chat): reduce rerenders from tooltips and streamed activity

* fix(ui): make MessageList React Compiler safe

* chore(ui): batch commit remaining pending ui updates

* fix: polish chat and diff preview rendering

- Keep Mermaid action buttons fixed while diagram content scrolls
- Align Diff All Files headers and match Git-style path truncation
- Default chat tool diffs to unified view with lightweight indicators disabled

* fix: preserve file tree expansion and delay git action label collapse

* fix: refine project icon controls in settings

---------

Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>

packages/ui/src/components/chat/ChatMessage.tsx

@@ -30,20 +30,37 @@ import { copyTextToClipboard } from '@/lib/clipboard';
 const ToolOutputDialog = React.lazy(() => import('./message/ToolOutputDialog'));
 
 const DETAILED_DEFAULT_TOOLS = new Set(['task', 'edit', 'multiedit', 'write', 'apply_patch', 'bash', 'todowrite']);
+const EXPANDED_TOOLS_CACHE_MAX = 4000;
+const expandedToolsStateCache = new Map<string, Set<string>>();
+
+const readExpandedToolsCache = (messageId: string): Set<string> => {
+    const cached = expandedToolsStateCache.get(messageId);
+    return cached ? new Set(cached) : new Set();
+};
+
+const writeExpandedToolsCache = (messageId: string, value: Set<string>): void => {
+    if (expandedToolsStateCache.size >= EXPANDED_TOOLS_CACHE_MAX && !expandedToolsStateCache.has(messageId)) {
+        const oldest = expandedToolsStateCache.keys().next().value;
+        if (typeof oldest === 'string') {
+            expandedToolsStateCache.delete(oldest);
+        }
+    }
+    expandedToolsStateCache.set(messageId, new Set(value));
+};
 
 const isDetailedDefaultTool = (toolName: unknown): boolean =>
     typeof toolName === 'string' && DETAILED_DEFAULT_TOOLS.has(toolName.toLowerCase());
 
 function useStickyDisplayValue<T>(value: T | null | undefined): T | null | undefined {
-    const ref = React.useRef<{ hasValue: boolean; value: T | null | undefined }>({ hasValue: false, value: undefined as T | null | undefined });
+    const [stickyValue, setStickyValue] = React.useState<T | null | undefined>(value);
 
-    if (value !== undefined && value !== null) {
-        if (!ref.current.hasValue || ref.current.value !== value) {
-            ref.current = { hasValue: true, value };
+    React.useEffect(() => {
+        if (value !== undefined && value !== null) {
+            setStickyValue(value);
         }
-    }
+    }, [value]);
 
-    return ref.current.hasValue ? ref.current.value : value;
+    return value ?? stickyValue;
 }
 
 const getMessageInfoProp = (info: unknown, key: string): unknown => {
@@ -129,7 +146,7 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
 
     const [copiedCode, setCopiedCode] = React.useState<string | null>(null);
     const [copiedMessage, setCopiedMessage] = React.useState(false);
-    const [expandedTools, setExpandedTools] = React.useState<Set<string>>(new Set());
+    const [expandedTools, setExpandedTools] = React.useState<Set<string>>(() => readExpandedToolsCache(message.info.id));
     const [popupContent, setPopupContent] = React.useState<ToolPopupContent>({
         open: false,
         title: '',
@@ -137,8 +154,13 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
     });
 
     React.useEffect(() => {
+        setExpandedTools(readExpandedToolsCache(message.info.id));
+    }, [message.info.id]);
+
+    React.useEffect(() => {
+        expandedToolsStateCache.clear();
         setExpandedTools(new Set());
-    }, [message.info.id, toolCallExpansion]);
+    }, [toolCallExpansion]);
 
     const messageRole = React.useMemo(() => deriveMessageRole(message.info), [message.info]);
     const isUser = messageRole.isUser;
@@ -517,8 +539,7 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
         return freshnessDetector.shouldAnimateMessage(message.info, currentSessionId || message.info.sessionID);
     }, [message.info, currentSessionId, isUser]);
 
-    // Track if this message should show header to prevent flickering
-    const shouldShowHeaderRef = React.useRef(false);
+    const [hasStartedStreamingHeader, setHasStartedStreamingHeader] = React.useState(false);
 
     const previousRole = React.useMemo(() => {
         if (!previousMessage) return null;
@@ -546,6 +567,22 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
         return isStreamingMessage ? 'streaming' : 'completed';
     }, [isMessageCompleted, lifecyclePhase, isStreamingMessage]);
 
+    React.useEffect(() => {
+        setHasStartedStreamingHeader(false);
+    }, [message.info.id]);
+
+    React.useEffect(() => {
+        const headerMessageId = turnGroupingContext?.headerMessageId;
+        if (isUser || !headerMessageId || headerMessageId !== message.info.id) {
+            return;
+        }
+
+        const isCurrentlyStreaming = streamPhase === 'streaming' || streamPhase === 'cooldown';
+        if (isCurrentlyStreaming) {
+            setHasStartedStreamingHeader(true);
+        }
+    }, [isUser, message.info.id, streamPhase, turnGroupingContext?.headerMessageId]);
+
     const shouldShowHeader = React.useMemo(() => {
         if (isUser) return true;
 
@@ -563,15 +600,7 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
 
                 // For streaming messages: show header when streaming starts and keep it visible
                 const isCurrentlyStreaming = streamPhase === 'streaming' || streamPhase === 'cooldown';
-                const hasStartedStreaming = shouldShowHeaderRef.current;
-
-                // Update the ref when streaming starts
-                if (isCurrentlyStreaming && !hasStartedStreaming) {
-                    shouldShowHeaderRef.current = true;
-                }
-
-                // Show header if streaming has started or is currently active
-                return hasStartedStreaming || isCurrentlyStreaming;
+                return hasStartedStreamingHeader || isCurrentlyStreaming;
             }
 
             // For non-first assistant messages, don't show header
@@ -581,7 +610,7 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
         // Fallback to original logic when turn grouping is not available
         if (!previousRole) return true;
         return previousRole.isUser;
-    }, [isUser, previousRole, turnGroupingContext, streamPhase, message.info]);
+    }, [hasStartedStreamingHeader, isUser, previousRole, turnGroupingContext, streamPhase, message.info]);
 
     const handleCopyCode = React.useCallback((code: string) => {
         void copyTextToClipboard(code).then((result) => {
@@ -626,16 +655,17 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
             ? turnGroupingContext.summaryBody
             : assistantSummaryFromStore;
 
-    const assistantSummaryRef = React.useRef<string | undefined>(undefined);
-    if (assistantSummaryCandidate && assistantSummaryCandidate.trim().length > 0) {
-        assistantSummaryRef.current = assistantSummaryCandidate;
-    }
-    const prevUserMessageIdForCopy = React.useRef(userMessageIdForTurn);
-    if (prevUserMessageIdForCopy.current !== userMessageIdForTurn) {
-        prevUserMessageIdForCopy.current = userMessageIdForTurn;
-        assistantSummaryRef.current = undefined;
-    }
-    const assistantSummaryForCopy = assistantSummaryRef.current;
+    const [assistantSummaryForCopy, setAssistantSummaryForCopy] = React.useState<string | undefined>(undefined);
+
+    React.useEffect(() => {
+        setAssistantSummaryForCopy(undefined);
+    }, [userMessageIdForTurn]);
+
+    React.useEffect(() => {
+        if (assistantSummaryCandidate && assistantSummaryCandidate.trim().length > 0) {
+            setAssistantSummaryForCopy(assistantSummaryCandidate);
+        }
+    }, [assistantSummaryCandidate]);
 
     const assistantErrorText = React.useMemo(() => {
         if (isUser) {
@@ -742,9 +772,10 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
             } else {
                 next.add(toolId);
             }
+            writeExpandedToolsCache(message.info.id, next);
             return next;
         });
-    }, []);
+    }, [message.info.id]);
 
     const resolvedAnimationHandlers = animationHandlers ?? null;
     const hasAnnouncedAuxiliaryScrollRef = React.useRef(false);