From 1353a848d78f96147114e332b9e5964f6d7837c8 Mon Sep 17 00:00:00 2001
From: Glucksberg <markuscontasul@gmail.com>
Date: Mon, 26 Jan 2026 04:21:11 +0000
Subject: [PATCH] fix(ui): visually distinguish system messages in webchat
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add distinct styling for system role messages in the webchat UI.
System messages now appear centered with muted styling, clearly
differentiated from user and assistant messages.

- Add 'system' roleClass to renderMessageGroup and renderAvatar
- Add CSS styles for .chat-group.system and .chat-avatar.system
- Use info icon (ℹ) for system message avatars

Closes #2001
---
 ui/src/styles/chat/grouped.css   | 34 ++++++++++++++++++++++++++++++++
 ui/src/ui/chat/grouped-render.ts | 18 ++++++++++++-----
 2 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/ui/src/styles/chat/grouped.css b/ui/src/styles/chat/grouped.css
index 39b641826..16ee6d872 100644
--- a/ui/src/styles/chat/grouped.css
+++ b/ui/src/styles/chat/grouped.css
@@ -34,6 +34,34 @@
   justify-content: flex-end;
 }
 
+/* System messages centered with muted styling */
+.chat-group.system {
+  justify-content: center;
+  margin-left: 16px;
+}
+
+.chat-group.system .chat-group-messages {
+  align-items: center;
+  max-width: min(600px, calc(100% - 60px));
+}
+
+.chat-group.system .chat-bubble {
+  background: var(--secondary);
+  border: 1px solid var(--border);
+  font-size: 13px;
+  color: var(--muted);
+  padding: 8px 12px;
+}
+
+.chat-group.system .chat-group-footer {
+  justify-content: center;
+}
+
+.chat-group.system .chat-sender-name {
+  color: var(--muted);
+  opacity: 0.8;
+}
+
 /* Footer at bottom of message group (role + time) */
 .chat-group-footer {
   display: flex;
@@ -89,6 +117,12 @@
   color: var(--muted);
 }
 
+.chat-avatar.system {
+  background: var(--border);
+  color: var(--muted);
+  font-size: 16px;
+}
+
 /* Image avatar support */
 img.chat-avatar {
   display: block;
diff --git a/ui/src/ui/chat/grouped-render.ts b/ui/src/ui/chat/grouped-render.ts
index 4a9ccec14..e18014a0b 100644
--- a/ui/src/ui/chat/grouped-render.ts
+++ b/ui/src/ui/chat/grouped-render.ts
@@ -120,13 +120,17 @@ export function renderMessageGroup(
       ? "You"
       : normalizedRole === "assistant"
         ? assistantName
-        : normalizedRole;
+        : normalizedRole === "system"
+          ? "System"
+          : normalizedRole;
   const roleClass =
     normalizedRole === "user"
       ? "user"
       : normalizedRole === "assistant"
         ? "assistant"
-        : "other";
+        : normalizedRole === "system"
+          ? "system"
+          : "other";
   const timestamp = new Date(group.timestamp).toLocaleTimeString([], {
     hour: "numeric",
     minute: "2-digit",
@@ -173,15 +177,19 @@ function renderAvatar(
         ? assistantName.charAt(0).toUpperCase() || "A"
         : normalized === "tool"
           ? "⚙"
-          : "?";
+          : normalized === "system"
+            ? "ℹ"
+            : "?";
   const className =
     normalized === "user"
       ? "user"
       : normalized === "assistant"
         ? "assistant"
-      : normalized === "tool"
+        : normalized === "tool"
           ? "tool"
-          : "other";
+          : normalized === "system"
+            ? "system"
+            : "other";
 
   if (assistantAvatar && normalized === "assistant") {
     if (isAvatarUrl(assistantAvatar)) {