From 1cefc57388214a191a88e623cc423debdf034ac4 Mon Sep 17 00:00:00 2001
From: Louis Knight-Webb <louis@bloop.ai>
Date: Tue, 24 Jun 2025 17:35:21 +0100
Subject: [PATCH] Task attempt e53d007c-1ce1-4e50-affc-f0e48532a28b - Final
 changes

---
 .../src/components/tasks/TaskDetailsPanel.tsx | 28 +++++++++----------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/tasks/TaskDetailsPanel.tsx b/frontend/src/components/tasks/TaskDetailsPanel.tsx
index cd54e1ba..b0119054 100644
--- a/frontend/src/components/tasks/TaskDetailsPanel.tsx
+++ b/frontend/src/components/tasks/TaskDetailsPanel.tsx
@@ -315,6 +315,18 @@ export function TaskDetailsPanel({
     selectedAttempt?.id,
   ]);
 
+  // Memoize processed dev server logs to prevent stuttering
+  const processedDevServerLogs = useMemo(() => {
+    if (!devServerDetails) return "No output yet...";
+    
+    const stdout = devServerDetails.stdout || "";
+    const stderr = devServerDetails.stderr || "";
+    const allOutput = stdout + (stderr ? "\n" + stderr : "");
+    const lines = allOutput.split("\n").filter((line) => line.trim());
+    const lastLines = lines.slice(-10);
+    return lastLines.length > 0 ? lastLines.join("\n") : "No output yet...";
+  }, [devServerDetails?.stdout, devServerDetails?.stderr]);
+
   // Set default executor from config
   useEffect(() => {
     if (config) {
@@ -1009,21 +1021,7 @@ export function TaskDetailsPanel({
                                         Dev Server Logs (Last 10 lines):
                                       </p>
                                       <pre className="text-xs bg-muted p-2 rounded max-h-64 overflow-y-auto whitespace-pre-wrap">
-                                        {(() => {
-                                          const stdout =
-                                            devServerDetails.stdout || "";
-                                          const stderr =
-                                            devServerDetails.stderr || "";
-                                          const allOutput =
-                                            stdout + (stderr ? "\n" + stderr : "");
-                                          const lines = allOutput
-                                            .split("\n")
-                                            .filter((line) => line.trim());
-                                          const lastLines = lines.slice(-10);
-                                          return lastLines.length > 0
-                                            ? lastLines.join("\n")
-                                            : "No output yet...";
-                                        })()}
+                                      {processedDevServerLogs}
                                       </pre>
                                     </div>
                                   ) : runningDevServer ? (