show chat run errors as agent messages (#887)

packages/client/src/components/hermes/chat/MessageItem.vue

@@ -34,6 +34,7 @@ const { t } = useI18n();
 const toast = useMessage();
 
 const isSystem = computed(() => props.message.role === "system");
+const isAgentError = computed(() => props.message.role === "assistant" && props.message.systemType === "error");
 
 const effectiveHeadingIdPrefix = computed(() => props.headingIdPrefix || `msg-${props.message.id}`);
 const isCommandMessage = computed(() => props.message.role === "command" || props.message.systemType === "command");
@@ -790,6 +791,7 @@ onBeforeUnmount(() => {
             class="message-bubble"
             :class="{
               system: isSystem,
+              'agent-error': isAgentError,
               command: isCommandMessage,
               'command-error': isCommandError,
               'speech-playing': isPlayingThisMessage && !isPausedThisMessage,
@@ -1043,6 +1045,12 @@ onBeforeUnmount(() => {
       background-color: $msg-assistant-bg;
       border-radius: 10px;
     }
+
+    .message-bubble.agent-error {
+      color: $error;
+      background-color: rgba(var(--error-rgb), 0.06);
+      border: 1px solid rgba(var(--error-rgb), 0.2);
+    }
   }
 
   &.tool {
@@ -1120,6 +1128,20 @@ onBeforeUnmount(() => {
     background-color: rgba(var(--warning-rgb), 0.06);
   }
 
+  &.agent-error {
+    color: $error;
+    background-color: rgba(var(--error-rgb), 0.06);
+    border: 1px solid rgba(var(--error-rgb), 0.2);
+
+    :deep(.markdown-body),
+    :deep(.markdown-body p),
+    :deep(.markdown-body li),
+    :deep(.markdown-body strong),
+    :deep(.markdown-body code) {
+      color: $error;
+    }
+  }
+
   &.speech-playing {
     box-shadow:
       0 0 0 2px #ff6b6b,

packages/client/src/components/hermes/group-chat/GroupMessageItem.vue

@@ -41,6 +41,12 @@ const isAgent = computed(() => {
     return props.agents.some(a => a.agentId === props.message.senderId || a.name === props.message.senderName)
 })
 
+const isAgentError = computed(() => {
+    if (props.message.role !== 'assistant') return false
+    if (props.message.finish_reason === 'error') return true
+    return /^Error:\s*/i.test(props.message.content || '')
+})
+
 const isSelf = computed(() => {
     return !!props.currentUserId && props.message.senderId === props.currentUserId
 })
@@ -443,6 +449,7 @@ onBeforeUnmount(() => {
                 class="msg-content"
                 :class="{
                     'agent-content': isAgent,
+                    'agent-error': isAgentError,
                     'speech-playing': isPlayingThisMessage && !isPausedThisMessage,
                 }"
             >
@@ -548,6 +555,20 @@ onBeforeUnmount(() => {
         background-color: rgba(var(--accent-primary-rgb), 0.06);
     }
 
+    &.agent .msg-content.agent-error {
+        color: $error;
+        background-color: rgba(var(--error-rgb), 0.06);
+        border: 1px solid rgba(var(--error-rgb), 0.2);
+
+        :deep(.markdown-body),
+        :deep(.markdown-body p),
+        :deep(.markdown-body li),
+        :deep(.markdown-body strong),
+        :deep(.markdown-body code) {
+            color: $error;
+        }
+    }
+
     &.self .msg-content {
         background-color: rgba(var(--accent-primary-rgb), 0.1);
     }
@@ -834,6 +855,20 @@ onBeforeUnmount(() => {
         animation: rainbow-glow 4s linear infinite;
     }
 
+    &.agent-error {
+        color: $error;
+        background-color: rgba(var(--error-rgb), 0.06);
+        border: 1px solid rgba(var(--error-rgb), 0.2);
+
+        :deep(.markdown-body),
+        :deep(.markdown-body p),
+        :deep(.markdown-body li),
+        :deep(.markdown-body strong),
+        :deep(.markdown-body code) {
+            color: $error;
+        }
+    }
+
     :deep(.mention-highlight) {
         color: #409eff;
         font-weight: 600;