fix(ui): visually distinguish system messages in webchat

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,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;

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)) {