From ff784cc7724a9420221edbfa6c50cb8cdedea22e Mon Sep 17 00:00:00 2001
From: Ryan Walker <solarcloud7@gmail.com>
Date: Sun, 8 Mar 2026 14:44:42 -0500
Subject: [PATCH] Differentiate RCON output for improved clarity (#864)

* #793 - Differentiate RCON output

* -removed <div>
-simplified animation logic.
-removed box-shadow in favor of outline

* -remove Rube Goldberg machine
-removed un needed .css rule

* removed redundant null check

* added an extra line  (2 spaces between imports and rest of file)

---------

Co-authored-by: Solar <solar@homelab.local>
---
 packages/web_ui/src/components/InstanceRcon.tsx | 7 +++++--
 packages/web_ui/src/style.css                   | 6 ++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/web_ui/src/components/InstanceRcon.tsx b/packages/web_ui/src/components/InstanceRcon.tsx
index 75245f88..62702787 100644
--- a/packages/web_ui/src/components/InstanceRcon.tsx
+++ b/packages/web_ui/src/components/InstanceRcon.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React, { useContext, useRef, useState } from "react";
 import { Input, Typography } from "antd";
 
 import * as lib from "@clusterio/lib";
@@ -17,6 +17,7 @@ export default function InstanceRcon(props: InstanceRconProps) {
 	let control = useContext(ControlContext);
 	let [output, setOutput] = useState<string|null>(null);
 	let [running, setRunning] = useState(false);
+	let resultRef = useRef<HTMLDivElement>(null);
 
 	async function sendCommand(command: string) {
 		if (!command) {
@@ -31,6 +32,8 @@ export default function InstanceRcon(props: InstanceRconProps) {
 				new lib.InstanceSendRconRequest(command),
 			);
 			setOutput(result);
+			const animation = resultRef.current?.children[0]?.getAnimations()[0];
+			if (animation) { animation.currentTime = 0; }
 		} finally {
 			setRunning(false);
 		}
@@ -39,7 +42,7 @@ export default function InstanceRcon(props: InstanceRconProps) {
 	return <>
 		{output && <>
 			<Title level={5}>Rcon result</Title>
-			<Paragraph code className="rcon-result">{output}</Paragraph>
+			<Paragraph ref={resultRef} code className="rcon-result">{output}</Paragraph>
 		</>}
 		<Input.Search
 			disabled={props.disabled}
diff --git a/packages/web_ui/src/style.css b/packages/web_ui/src/style.css
index b082d447..937c4cd9 100644
--- a/packages/web_ui/src/style.css
+++ b/packages/web_ui/src/style.css
@@ -204,6 +204,12 @@ body {
 	max-height: 200px;
 	overflow-y: auto;
 	white-space: pre-wrap;
+	animation: rcon-highlight 1s ease-out forwards;
+}
+
+@keyframes rcon-highlight {
+	0%   { outline: 3px solid #1668dc; }
+	100% { outline: 3px solid transparent; }
 }
 
 /* see https://blog.eqrion.net/pin-to-bottom/ for how scroll anchors works */