From eb66f1de4aa5fac37280fced6bf16b108544c37f Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Sat, 20 Dec 2025 19:04:14 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20fix:=20restore=20text=20selectio?=
 =?UTF-8?q?n=20in=20init=20hook=20output?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The flex-col-reverse approach for auto-scroll broke text selection
because the DOM order was reversed from visual order.

Reverts to using a <pre> element for proper text selection while
adding a simple useEffect to auto-scroll to bottom while running.

---
_Generated with `mux` • Model: `anthropic:claude-opus-4-5` • Thinking: `high`_
---
 .../components/Messages/InitMessage.tsx       | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/browser/components/Messages/InitMessage.tsx b/src/browser/components/Messages/InitMessage.tsx
index a122ac7a3..7a3154d80 100644
--- a/src/browser/components/Messages/InitMessage.tsx
+++ b/src/browser/components/Messages/InitMessage.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import { cn } from "@/common/lib/utils";
 import type { DisplayedMessage } from "@/common/types/message";
 import { Loader2, Wrench, CheckCircle2, AlertCircle } from "lucide-react";
@@ -22,6 +22,14 @@ export const InitMessage = React.memo<InitMessageProps>(({ message, className })
   const isError = message.status === "error";
   const isRunning = message.status === "running";
   const isSuccess = message.status === "success";
+  const preRef = useRef<HTMLPreElement>(null);
+
+  // Auto-scroll to bottom while running
+  useEffect(() => {
+    if (isRunning && preRef.current) {
+      preRef.current.scrollTop = preRef.current.scrollHeight;
+    }
+  }, [isRunning, message.lines.length]);
 
   const durationText =
     message.durationMs !== null ? ` in ${formatDuration(message.durationMs)}` : "";
@@ -65,20 +73,16 @@ export const InitMessage = React.memo<InitMessageProps>(({ message, className })
       </div>
       <div className="text-muted mt-1 truncate font-mono text-[11px]">{message.hookPath}</div>
       {message.lines.length > 0 && (
-        <div
+        <pre
+          ref={preRef}
           className={cn(
-            "m-0 mt-2.5 flex max-h-[120px] flex-col-reverse overflow-auto rounded-sm",
-            "bg-black/30 px-2 py-1.5 font-mono text-[11px] leading-relaxed",
+            "m-0 mt-2.5 max-h-[120px] overflow-auto rounded-sm",
+            "bg-black/30 px-2 py-1.5 font-mono text-[11px] leading-relaxed whitespace-pre-wrap",
             isError ? "text-danger-soft" : "text-light"
           )}
         >
-          {/* flex-col-reverse with reversed array auto-scrolls to bottom */}
-          {message.lines.toReversed().map((line, i) => (
-            <div key={i} className="whitespace-pre-wrap">
-              {line}
-            </div>
-          ))}
-        </div>
+          {message.lines.join("\n")}
+        </pre>
       )}
     </div>
   );