add memo to heavy components (#183)

frontend/src/components/tasks/TaskDetails/DisplayConversationEntry.tsx

@@ -1,6 +1,6 @@
 import { useContext, useMemo, useState } from 'react';
 import { DiffCard } from './DiffCard';
-import { MarkdownRenderer } from '@/components/ui/markdown-renderer.tsx';
+import MarkdownRenderer from '@/components/ui/markdown-renderer.tsx';
 import {
   AlertCircle,
   Bot,

frontend/src/components/tasks/TaskDetails/LogsTab/NormalizedConversationViewer.tsx

@@ -2,7 +2,7 @@ import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { Bot, Hammer, ToggleLeft, ToggleRight } from 'lucide-react';
 import { Loader } from '@/components/ui/loader.tsx';
 import { executionProcessesApi } from '@/lib/api.ts';
-import { MarkdownRenderer } from '@/components/ui/markdown-renderer.tsx';
+import MarkdownRenderer from '@/components/ui/markdown-renderer.tsx';
 import type {
   ExecutionProcess,
   NormalizedConversation,

frontend/src/components/tasks/TaskKanbanBoard.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import {
   type DragEndEvent,
   KanbanBoard,
@@ -44,7 +44,7 @@ const statusBoardColors: Record<TaskStatus, string> = {
   cancelled: 'hsl(var(--destructive))',
 };
 
-export function TaskKanbanBoard({
+function TaskKanbanBoard({
   tasks,
   searchQuery = '',
   onDragEnd,
@@ -108,3 +108,5 @@ export function TaskKanbanBoard({
     </KanbanProvider>
   );
 }
+
+export default memo(TaskKanbanBoard);

frontend/src/components/tasks/index.ts

@@ -1,3 +1,2 @@
 export { TaskFormDialog } from './TaskFormDialog';
 export { TaskCard } from './TaskCard';
-export { TaskKanbanBoard } from './TaskKanbanBoard';

frontend/src/components/ui/markdown-renderer.tsx

@@ -1,84 +1,84 @@
-import ReactMarkdown from 'react-markdown';
+import ReactMarkdown, { Components } from 'react-markdown';
+import { memo, useMemo } from 'react';
 
 interface MarkdownRendererProps {
   content: string;
   className?: string;
 }
 
-export function MarkdownRenderer({
+function MarkdownRenderer({ content, className = '' }: MarkdownRendererProps) {
-  content,
+  const components: Components = useMemo(
-  className = '',
+    () => ({
-}: MarkdownRendererProps) {
+      code: ({ children, ...props }) => (
+        <code
+          {...props}
+          className="bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded text-sm font-mono"
+        >
+          {children}
+        </code>
+      ),
+      strong: ({ children, ...props }) => (
+        <strong {...props} className="font-bold">
+          {children}
+        </strong>
+      ),
+      em: ({ children, ...props }) => (
+        <em {...props} className="italic">
+          {children}
+        </em>
+      ),
+      p: ({ children, ...props }) => (
+        <p {...props} className="mb-4 last:mb-0 leading-loose">
+          {children}
+        </p>
+      ),
+      h1: ({ children, ...props }) => (
+        <h1
+          {...props}
+          className="text-lg font-bold mb-4 mt-6 first:mt-0 leading-relaxed"
+        >
+          {children}
+        </h1>
+      ),
+      h2: ({ children, ...props }) => (
+        <h2
+          {...props}
+          className="text-base font-bold mb-3 mt-5 first:mt-0 leading-relaxed"
+        >
+          {children}
+        </h2>
+      ),
+      h3: ({ children, ...props }) => (
+        <h3
+          {...props}
+          className="text-sm font-bold mb-3 mt-4 first:mt-0 leading-relaxed"
+        >
+          {children}
+        </h3>
+      ),
+      ul: ({ children, ...props }) => (
+        <ul {...props} className="list-disc ml-4 mb-2 space-y-1">
+          {children}
+        </ul>
+      ),
+      ol: ({ children, ...props }) => (
+        <ol {...props} className="list-decimal ml-4 mb-2 space-y-1">
+          {children}
+        </ol>
+      ),
+      li: ({ children, ...props }) => (
+        <li {...props} className="mb-1 leading-relaxed">
+          {children}
+        </li>
+      ),
+    }),
+    []
+  );
   return (
     <div className={className}>
-      <ReactMarkdown
+      <ReactMarkdown components={components}>{content}</ReactMarkdown>
-        components={{
-          code: ({ children, ...props }) => (
-            <code
-              {...props}
-              className="bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded text-sm font-mono"
-            >
-              {children}
-            </code>
-          ),
-          strong: ({ children, ...props }) => (
-            <strong {...props} className="font-bold">
-              {children}
-            </strong>
-          ),
-          em: ({ children, ...props }) => (
-            <em {...props} className="italic">
-              {children}
-            </em>
-          ),
-          p: ({ children, ...props }) => (
-            <p {...props} className="mb-4 last:mb-0 leading-loose">
-              {children}
-            </p>
-          ),
-          h1: ({ children, ...props }) => (
-            <h1
-              {...props}
-              className="text-lg font-bold mb-4 mt-6 first:mt-0 leading-relaxed"
-            >
-              {children}
-            </h1>
-          ),
-          h2: ({ children, ...props }) => (
-            <h2
-              {...props}
-              className="text-base font-bold mb-3 mt-5 first:mt-0 leading-relaxed"
-            >
-              {children}
-            </h2>
-          ),
-          h3: ({ children, ...props }) => (
-            <h3
-              {...props}
-              className="text-sm font-bold mb-3 mt-4 first:mt-0 leading-relaxed"
-            >
-              {children}
-            </h3>
-          ),
-          ul: ({ children, ...props }) => (
-            <ul {...props} className="list-disc ml-4 mb-2 space-y-1">
-              {children}
-            </ul>
-          ),
-          ol: ({ children, ...props }) => (
-            <ol {...props} className="list-decimal ml-4 mb-2 space-y-1">
-              {children}
-            </ol>
-          ),
-          li: ({ children, ...props }) => (
-            <li {...props} className="mb-1 leading-relaxed">
-              {children}
-            </li>
-          ),
-        }}
-      >
-        {content}
-      </ReactMarkdown>
     </div>
   );
 }
+
+export default memo(MarkdownRenderer);

frontend/src/pages/project-tasks.tsx

@@ -14,7 +14,7 @@ import {
   getMainContainerClasses,
 } from '@/lib/responsive-config';
 
-import { TaskKanbanBoard } from '@/components/tasks/TaskKanbanBoard';
+import TaskKanbanBoard from '@/components/tasks/TaskKanbanBoard';
 import { TaskDetailsPanel } from '@/components/tasks/TaskDetailsPanel';
 import type {
   CreateTaskAndStart,