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/RoleBadge.tsx

@@ -0,0 +1,26 @@
+import { cn } from "@/lib/utils"
+import { ROLE_DESCRIPTIONS } from "@/lib/labels"
+
+const roleColors: Record<string, string> = {
+  service: "bg-green-700 text-white",
+  tool: "bg-blue-700 text-white",
+  worker: "bg-blue-500 text-white",
+  job: "bg-purple-700 text-white",
+  frontend: "bg-yellow-600 text-black",
+  remote: "bg-gray-600 text-gray-200",
+  containerized: "bg-orange-600 text-black",
+}
+
+export function RoleBadge({ role }: { role: string }) {
+  return (
+    <span
+      className={cn(
+        "inline-block text-[0.65rem] font-semibold uppercase px-1.5 py-0.5 rounded",
+        roleColors[role] ?? "bg-gray-600 text-gray-200",
+      )}
+      title={ROLE_DESCRIPTIONS[role]}
+    >
+      {role}
+    </span>
+  )
+}