feat(SyntaxHighlighting): Improve stability of syntax highlighting so it doesn't flicker.

.github/copilot-instructions.md

@@ -152,3 +152,4 @@ When working on this codebase, you might need to:
   - `/quantizor/markdown-to-jsx` for Markdown to JSX conversion
   - `/context7/headlessui_com` for Headless UI components
   - `/tailwindlabs/tailwindcss.com` for Tailwind CSS documentation
+  - `/vercel/next.js` for Next.js documentation

src/components/MarkdownRenderer.tsx

@@ -181,25 +181,6 @@ const CodeBlock = ({
   className?: string;
   children: React.ReactNode;
 }) => {
-  // Determine dark mode based on html.dark class so custom themes are respected
-  const [isDark, setIsDark] = useState(false);
-  useEffect(() => {
-    const getIsDark = () =>
-      typeof document !== 'undefined' &&
-      document.documentElement.classList.contains('dark');
-
-    setIsDark(getIsDark());
-
-    const observer = new MutationObserver(() => setIsDark(getIsDark()));
-    if (typeof document !== 'undefined') {
-      observer.observe(document.documentElement, {
-        attributes: true,
-        attributeFilter: ['class'],
-      });
-    }
-    return () => observer.disconnect();
-  }, []);
-
   // Extract language from className (format could be "language-javascript" or "lang-javascript")
   let language = '';
   if (className) {
@@ -219,7 +200,9 @@ const CodeBlock = ({
     setTimeout(() => setIsCopied(false), 2000);
   };
 
-  // Choose syntax highlighting style based on actual dark/light class
+  const root = document.documentElement;
+  const isDark = root.classList.contains('dark');
+
   const syntaxStyle = isDark ? oneDark : oneLight;
   const backgroundStyle = isDark ? '#1c1c1c' : '#fafafa';
 
@@ -248,10 +231,10 @@ const CodeBlock = ({
           borderRadius: 0,
           backgroundColor: backgroundStyle,
         }}
-        wrapLines={true}
+        wrapLines
-        wrapLongLines={true}
+        wrapLongLines
         showLineNumbers={language !== '' && content.split('\n').length > 1}
-        useInlineStyles={true}
+        useInlineStyles
         PreTag="div"
       >
         {content}

src/lib/search/simplifiedAgent.ts

@@ -18,7 +18,10 @@ import {
 } from '@/lib/tools/agents';
 import { formatDateForLLM } from '../utils';
 import { getModelName } from '../utils/modelUtils';
-import { removeThinkingBlocks, removeThinkingBlocksFromMessages } from '../utils/contentUtils';
+import {
+  removeThinkingBlocks,
+  removeThinkingBlocksFromMessages,
+} from '../utils/contentUtils';
 import { getLangfuseCallbacks } from '@/lib/tracing/langfuse';
 
 /**
@@ -499,7 +502,10 @@ Use all available tools strategically to provide comprehensive, well-researched,
       console.log(`SimplifiedAgent: Focus mode: ${focusMode}`);
       console.log(`SimplifiedAgent: File IDs: ${fileIds.join(', ')}`);
 
-      const messagesHistory = [...removeThinkingBlocksFromMessages(history), new HumanMessage(query)];
+      const messagesHistory = [
+        ...removeThinkingBlocksFromMessages(history),
+        new HumanMessage(query),
+      ];
       // Initialize agent with the provided focus mode and file context
       // Pass the number of messages that will be sent to the LLM so prompts can adapt.
       const llmMessagesCount = messagesHistory.length;