feat(ui-tars): update ErrorMessage ui component

Author: ZhaoHeh

apps/ui-tars/src/main/services/runAgent.ts

@@ -165,7 +165,8 @@ export const runAgent = async (
     signal: abortController?.signal,
     operator: operator,
     onData: handleData,
-    onError: ({ error }) => {
+    onError: (params) => {
+      const { error } = params;
       logger.error('[onGUIAgentError]', settings, error);
       setState({
         ...getState(),

apps/ui-tars/src/renderer/src/components/RunMessages/Messages.tsx

@@ -4,6 +4,7 @@
  */
 import { AlertCircle, Camera, Loader2 } from 'lucide-react';
 import { Button } from '@renderer/components/ui/button';
+import { GUIAgentError, ErrorStatusEnum } from '@ui-tars/shared/types';
 
 export const HumanTextMessage = ({ text }: { text: string }) => {
   return (
@@ -27,13 +28,46 @@ export const ScreenshotMessage = ({ onClick }: ScreenshotMessageProps) => {
 };
 
 export const ErrorMessage = ({ text }: { text: string }) => {
+  let parsedError: GUIAgentError | null = null;
+  try {
+    const parsed = JSON.parse(text);
+    if (parsed && typeof parsed === 'object' && 'code' in parsed) {
+      parsedError = parsed as GUIAgentError;
+    }
+  } catch {
+    // ignore
+  }
+
   return (
     <div className="flex flex-col gap-2 my-4 p-4 bg-red-500/10 border border-red-500/20 rounded-lg">
       <div className="flex items-center gap-2">
         <AlertCircle className="w-5 h-5 text-red-500 shrink-0" />
-        <span className="font-medium text-red-500">Error</span>
+        <span className="font-medium text-red-500">
+          {parsedError
+            ? ErrorStatusEnum[parsedError.code] || 'UNKNOWN_ERROR'
+            : 'Error'}
+        </span>
       </div>
-      <div className="text-sm text-red-500/90 break-all">{text}</div>
+      {parsedError ? (
+        <div className="flex flex-col gap-1">
+          <div className="text-sm text-red-500/90 font-medium">
+            {parsedError.message}
+          </div>
+          {parsedError.stack ? (
+            <div className="text-xs text-red-500/70 font-mono mt-2">
+              {parsedError.stack}
+            </div>
+          ) : (
+            parsedError.detail && (
+              <div className="text-xs text-red-500/70 font-mono mt-2">
+                {parsedError.detail}
+              </div>
+            )
+          )}
+        </div>
+      ) : (
+        <div className="text-sm text-red-500/90 break-all">{text}</div>
+      )}
     </div>
   );
 };