feat: add ComponentGrid and ComponentTable components for displaying components in grid and table formats

feat: implement HealthBadge and RoleBadge components for displaying health status and roles

feat: create LogViewer component for streaming logs of services

feat: develop SecretsEditor for managing secrets with CRUD operations

feat: introduce ToolCard component for displaying tool information

style: add global CSS variables and styles for consistent theming

feat: set up API client for handling requests to the backend

feat: implement hooks for fetching components, statuses, and tools

feat: create routes for dashboard, component details, and tools

feat: add service management endpoints for starting, stopping, and restarting services

feat: implement event bus for handling real-time updates via SSE

feat: create health check and logs endpoints for monitoring services

feat: add tests for health and tools endpoints to ensure functionality

chore: update project configuration files and dependencies for better development experience

app/src/components/HealthBadge.tsx

@@ -0,0 +1,32 @@
+import { cn } from "@/lib/utils"
+
+interface HealthBadgeProps {
+  status: "up" | "down" | "unknown"
+  latency?: number | null
+}
+
+export function HealthBadge({ status, latency }: HealthBadgeProps) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1.5 text-xs px-2 py-0.5 rounded-full",
+        status === "up" && "bg-green-800/50 text-green-300",
+        status === "down" && "bg-red-800/50 text-red-300",
+        status === "unknown" && "bg-gray-700/50 text-gray-400",
+      )}
+    >
+      <span
+        className={cn(
+          "w-1.5 h-1.5 rounded-full",
+          status === "up" && "bg-green-400",
+          status === "down" && "bg-red-400",
+          status === "unknown" && "bg-gray-500",
+        )}
+      />
+      {status}
+      {latency != null && status === "up" && (
+        <span className="text-gray-500 ml-0.5">{latency}ms</span>
+      )}
+    </span>
+  )
+}