Skip to content

Commit 0bdefe1

Browse files
authored
🤖 fix: restore text selection in init hook output (#1253)
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`_
1 parent 473bbbf commit 0bdefe1

File tree

1 file changed

+15
-11
lines changed

1 file changed

+15
-11
lines changed

src/browser/components/Messages/InitMessage.tsx

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import React, { useEffect, useRef } from "react";
22
import { cn } from "@/common/lib/utils";
33
import type { DisplayedMessage } from "@/common/types/message";
44
import { Loader2, Wrench, CheckCircle2, AlertCircle } from "lucide-react";
@@ -22,6 +22,14 @@ export const InitMessage = React.memo<InitMessageProps>(({ message, className })
2222
const isError = message.status === "error";
2323
const isRunning = message.status === "running";
2424
const isSuccess = message.status === "success";
25+
const preRef = useRef<HTMLPreElement>(null);
26+
27+
// Auto-scroll to bottom while running
28+
useEffect(() => {
29+
if (isRunning && preRef.current) {
30+
preRef.current.scrollTop = preRef.current.scrollHeight;
31+
}
32+
}, [isRunning, message.lines.length]);
2533

2634
const durationText =
2735
message.durationMs !== null ? ` in ${formatDuration(message.durationMs)}` : "";
@@ -65,20 +73,16 @@ export const InitMessage = React.memo<InitMessageProps>(({ message, className })
6573
</div>
6674
<div className="text-muted mt-1 truncate font-mono text-[11px]">{message.hookPath}</div>
6775
{message.lines.length > 0 && (
68-
<div
76+
<pre
77+
ref={preRef}
6978
className={cn(
70-
"m-0 mt-2.5 flex max-h-[120px] flex-col-reverse overflow-auto rounded-sm",
71-
"bg-black/30 px-2 py-1.5 font-mono text-[11px] leading-relaxed",
79+
"m-0 mt-2.5 max-h-[120px] overflow-auto rounded-sm",
80+
"bg-black/30 px-2 py-1.5 font-mono text-[11px] leading-relaxed whitespace-pre-wrap",
7281
isError ? "text-danger-soft" : "text-light"
7382
)}
7483
>
75-
{/* flex-col-reverse with reversed array auto-scrolls to bottom */}
76-
{message.lines.toReversed().map((line, i) => (
77-
<div key={i} className="whitespace-pre-wrap">
78-
{line}
79-
</div>
80-
))}
81-
</div>
84+
{message.lines.join("\n")}
85+
</pre>
8286
)}
8387
</div>
8488
);

0 commit comments

Comments
 (0)