chore(guide): opt guide frontend optimization (#88)

Author: hazeone

README.md

@@ -19,12 +19,13 @@
 </p>
 
 <p align="center">
-  <img src="https://img.shields.io/badge/platform-macOS%20%7C%20Windows%20%7C%20Linux-blue" alt="Platform" />
+  <img src="https://img.shields.io/badge/platform-MacOS%20%7C%20Windows%20%7C%20Linux-blue" alt="Platform" />
   <img src="https://img.shields.io/badge/electron-40+-47848F?logo=electron" alt="Electron" />
   <img src="https://img.shields.io/badge/react-19-61DAFB?logo=react" alt="React" />
   <a href="https://discord.com/invite/84Kex3GGAh" target="_blank">
   <img src="https://img.shields.io/discord/1399603591471435907?logo=discord&labelColor=%20%235462eb&logoColor=%20%23f5f5f5&color=%20%235462eb" alt="chat on Discord" />
   </a>
+  <img src="https://img.shields.io/github/downloads/ValueCell-ai/ClawX/total?color=%23027DEB" alt="Downloads" />
   <img src="https://img.shields.io/badge/license-MIT-green" alt="License" />
 </p>
 

README.zh-CN.md

@@ -19,12 +19,13 @@
 </p>
 
 <p align="center">
-  <img src="https://img.shields.io/badge/platform-macOS%20%7C%20Windows%20%7C%20Linux-blue" alt="Platform" />
+  <img src="https://img.shields.io/badge/platform-MacOS%20%7C%20Windows%20%7C%20Linux-blue" alt="Platform" />
   <img src="https://img.shields.io/badge/electron-40+-47848F?logo=electron" alt="Electron" />
   <img src="https://img.shields.io/badge/react-19-61DAFB?logo=react" alt="React" />
   <a href="https://discord.com/invite/84Kex3GGAh" target="_blank">
   <img src="https://img.shields.io/discord/1399603591471435907?logo=discord&labelColor=%20%235462eb&logoColor=%20%23f5f5f5&color=%20%235462eb" alt="chat on Discord" />
   </a>
+  <img src="https://img.shields.io/github/downloads/ValueCell-ai/ClawX/total?color=%23027DEB" alt="Downloads" />
   <img src="https://img.shields.io/badge/license-MIT-green" alt="License" />
 </p>
 

src/pages/Setup/index.tsx

@@ -23,6 +23,7 @@ import {
 import { TitleBar } from '@/components/layout/TitleBar';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
 import { Label } from '@/components/ui/label';
 import { cn } from '@/lib/utils';
 import { useGatewayStore } from '@/stores/gateway';
@@ -559,27 +560,43 @@ function RuntimeContent({ onStatusChange }: RuntimeContentProps) {
     }
   };
 
+  const ERROR_TRUNCATE_LEN = 30;
+
   const renderStatus = (status: 'checking' | 'success' | 'error', message: string) => {
     if (status === 'checking') {
       return (
-        <span className="flex items-center gap-2 text-yellow-400">
-          <Loader2 className="h-4 w-4 animate-spin" />
+        <span className="flex items-center gap-2 text-yellow-400 whitespace-nowrap">
+          <Loader2 className="h-5 w-5 flex-shrink-0 animate-spin" />
           {message || 'Checking...'}
         </span>
       );
     }
     if (status === 'success') {
       return (
-        <span className="flex items-center gap-2 text-green-400">
-          <CheckCircle2 className="h-4 w-4" />
+        <span className="flex items-center gap-2 text-green-400 whitespace-nowrap">
+          <CheckCircle2 className="h-5 w-5 flex-shrink-0" />
           {message}
         </span>
       );
     }
+
+    const isLong = message.length > ERROR_TRUNCATE_LEN;
+    const displayMsg = isLong ? message.slice(0, ERROR_TRUNCATE_LEN) : message;
+
     return (
-      <span className="flex items-center gap-2 text-red-400">
-        <XCircle className="h-4 w-4" />
-        {message}
+      <span className="flex items-center gap-2 text-red-400 whitespace-nowrap">
+        <XCircle className="h-5 w-5 flex-shrink-0" />
+        <span>{displayMsg}</span>
+        {isLong && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="cursor-pointer text-red-300 hover:text-red-200 font-medium">...</span>
+            </TooltipTrigger>
+            <TooltipContent side="top" className="max-w-sm whitespace-normal break-words text-xs">
+              {message}
+            </TooltipContent>
+          </Tooltip>
+        )}
       </span>
     );
   };
@@ -599,31 +616,37 @@ function RuntimeContent({ onStatusChange }: RuntimeContentProps) {
         </div>
       </div>
       <div className="space-y-3">
-        <div className="flex items-center justify-between p-3 rounded-lg bg-white/5">
-          <span>{t('runtime.nodejs')}</span>
-          {renderStatus(checks.nodejs.status, checks.nodejs.message)}
+        <div className="grid grid-cols-[1fr_auto] items-center gap-4 p-3 rounded-lg bg-muted/50">
+          <span className="text-left">{t('runtime.nodejs')}</span>
+          <div className="flex justify-end">
+            {renderStatus(checks.nodejs.status, checks.nodejs.message)}
+          </div>
         </div>
-        <div className="flex items-center justify-between p-3 rounded-lg bg-muted/50">
-          <div>
+        <div className="grid grid-cols-[1fr_auto] items-center gap-4 p-3 rounded-lg bg-muted/50">
+          <div className="text-left min-w-0">
             <span>{t('runtime.openclaw')}</span>
             {openclawDir && (
-              <p className="text-xs text-muted-foreground mt-0.5 font-mono truncate max-w-[300px]">
+              <p className="text-xs text-muted-foreground mt-0.5 font-mono break-all">
                 {openclawDir}
               </p>
             )}
           </div>
-          {renderStatus(checks.openclaw.status, checks.openclaw.message)}
+          <div className="flex justify-end self-start mt-0.5">
+            {renderStatus(checks.openclaw.status, checks.openclaw.message)}
+          </div>
         </div>
-        <div className="flex items-center justify-between p-3 rounded-lg bg-muted/50">
-          <div className="flex items-center gap-2">
+        <div className="grid grid-cols-[1fr_auto] items-center gap-4 p-3 rounded-lg bg-muted/50">
+          <div className="flex items-center gap-2 text-left">
             <span>Gateway Service</span>
             {checks.gateway.status === 'error' && (
               <Button variant="outline" size="sm" onClick={handleStartGateway}>
                 Start Gateway
               </Button>
             )}
           </div>
-          {renderStatus(checks.gateway.status, checks.gateway.message)}
+          <div className="flex justify-end">
+            {renderStatus(checks.gateway.status, checks.gateway.message)}
+          </div>
         </div>
       </div>