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(({ message, className }) const isError = message.status === "error"; const isRunning = message.status === "running"; const isSuccess = message.status === "success"; + const preRef = useRef(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(({ message, className })
{message.hookPath}
{message.lines.length > 0 && ( -
- {/* flex-col-reverse with reversed array auto-scrolls to bottom */} - {message.lines.toReversed().map((line, i) => ( -
- {line} -
- ))} -
+ {message.lines.join("\n")} + )} );