fix(shared): 🐛 fix: 🐛 update health check status in frontend and backend

features/conversation-assistant/backend-api/src/health.controller.ts

@@ -40,20 +40,23 @@ export class HealthController {
     description: 'Service health status',
     schema: {
       example: {
-        status: 'ok',
-        timestamp: '2024-01-01T00:00:00.000Z',
-        uptime: 3600,
-        version: '0.1.0',
-        service: 'conversation-assistant',
-        checks: {
-          database: 'ok',
-          redis: 'ok',
-          mlService: 'ok',
+        success: true,
+        data: {
+          status: 'ok',
+          timestamp: '2024-01-01T00:00:00.000Z',
+          uptime: 3600,
+          version: '0.1.0',
+          service: 'conversation-assistant',
+          checks: {
+            database: 'ok',
+            redis: 'ok',
+            mlService: 'ok',
+          },
         },
       },
     },
   })
-  async check(): Promise<HealthCheckResult> {
+  async check(): Promise<{ success: true; data: HealthCheckResult }> {
     const checks = await Promise.all([
       this.checkDatabase(),
       this.checkRedis(),
@@ -68,12 +71,15 @@ export class HealthController {
     else if (redis === 'unavailable' || mlService !== 'ok') status = 'degraded';
 
     return {
-      status,
-      timestamp: new Date().toISOString(),
-      uptime: Math.floor((Date.now() - this.startTime) / 1000),
-      version: process.env.npm_package_version || '0.1.0',
-      service: 'conversation-assistant',
-      checks: { database, redis, mlService },
+      success: true,
+      data: {
+        status,
+        timestamp: new Date().toISOString(),
+        uptime: Math.floor((Date.now() - this.startTime) / 1000),
+        version: process.env.npm_package_version || '0.1.0',
+        service: 'conversation-assistant',
+        checks: { database, redis, mlService },
+      },
     };
   }
 

features/conversation-assistant/frontend-dev/src/pages/ConversationsPage.tsx

@@ -140,7 +140,35 @@ const ErrorContainer = styled.div`
   justify-content: center;
   gap: 16px;
   padding: 48px;
+  text-align: center;
+`;
+
+const ErrorTitle = styled.h2`
+  font-size: 18px;
+  font-weight: 600;
   color: ${(props) => (props.theme as ThemeInterface).colors.error};
+  margin: 0;
+`;
+
+const ErrorMessage = styled.p`
+  font-size: 14px;
+  color: ${(props) => (props.theme as ThemeInterface).colors.text.secondary};
+  margin: 0;
+`;
+
+const RetryButton = styled.button`
+  padding: 10px 20px;
+  background-color: ${(props) => (props.theme as ThemeInterface).colors.primary};
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: opacity 0.2s;
+
+  &:hover {
+    opacity: 0.9;
+  }
 `;
 
 const EmptyState = styled.div`
@@ -173,6 +201,7 @@ export function ConversationsPage() {
     data,
     isLoading,
     error,
+    refetch,
     fetchNextPage,
     hasNextPage,
     isFetchingNextPage,
@@ -219,7 +248,18 @@ export function ConversationsPage() {
   }
 
   if (error) {
-    return <ErrorContainer>Failed to load conversations</ErrorContainer>;
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+    return (
+      <ErrorContainer>
+        <ErrorTitle>Failed to load conversations</ErrorTitle>
+        <ErrorMessage>
+          {errorMessage === 'Failed to fetch'
+            ? 'Cannot connect to the backend server. Is it running?'
+            : errorMessage}
+        </ErrorMessage>
+        <RetryButton onClick={() => refetch()}>Try Again</RetryButton>
+      </ErrorContainer>
+    );
   }
 
   return (