feat(core): initialize project skeleton with Electron + React + TypeScript

Set up the complete project foundation for ClawX, a graphical AI assistant:

- Electron main process with IPC handlers, menu, tray, and gateway management
- React renderer with routing, layout components, and page scaffolding
- Zustand state management for gateway, settings, channels, skills, chat, and cron
- shadcn/ui components with Tailwind CSS and CSS variable theming
- Build tooling with Vite, electron-builder, and TypeScript configuration
- Testing setup with Vitest and Playwright
- Development configurations (ESLint, Prettier, gitignore, env example)

src/components/common/StatusBadge.tsx

@@ -0,0 +1,46 @@
+/**
+ * Status Badge Component
+ * Displays connection/state status with color coding
+ */
+import { cn } from '@/lib/utils';
+import { Badge } from '@/components/ui/badge';
+
+type Status = 'connected' | 'disconnected' | 'connecting' | 'error' | 'running' | 'stopped' | 'starting';
+
+interface StatusBadgeProps {
+  status: Status;
+  label?: string;
+  showDot?: boolean;
+}
+
+const statusConfig: Record<Status, { label: string; variant: 'success' | 'secondary' | 'warning' | 'destructive' }> = {
+  connected: { label: 'Connected', variant: 'success' },
+  running: { label: 'Running', variant: 'success' },
+  disconnected: { label: 'Disconnected', variant: 'secondary' },
+  stopped: { label: 'Stopped', variant: 'secondary' },
+  connecting: { label: 'Connecting', variant: 'warning' },
+  starting: { label: 'Starting', variant: 'warning' },
+  error: { label: 'Error', variant: 'destructive' },
+};
+
+export function StatusBadge({ status, label, showDot = true }: StatusBadgeProps) {
+  const config = statusConfig[status];
+  const displayLabel = label || config.label;
+  
+  return (
+    <Badge variant={config.variant} className="gap-1.5">
+      {showDot && (
+        <span
+          className={cn(
+            'h-1.5 w-1.5 rounded-full',
+            config.variant === 'success' && 'bg-green-600',
+            config.variant === 'secondary' && 'bg-gray-400',
+            config.variant === 'warning' && 'bg-yellow-600 animate-pulse',
+            config.variant === 'destructive' && 'bg-red-600'
+          )}
+        />
+      )}
+      {displayLabel}
+    </Badge>
+  );
+}