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

@@ -0,0 +1,74 @@
+/**
+ * Error Boundary Component
+ * Catches and displays errors in the component tree
+ */
+import { Component, ReactNode } from 'react';
+import { AlertTriangle, RefreshCw } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+  
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('Error caught by boundary:', error, errorInfo);
+  }
+  
+  handleReset = () => {
+    this.setState({ hasError: false, error: null });
+  };
+  
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+      
+      return (
+        <div className="flex h-full items-center justify-center p-6">
+          <Card className="max-w-md">
+            <CardHeader>
+              <div className="flex items-center gap-2">
+                <AlertTriangle className="h-6 w-6 text-destructive" />
+                <CardTitle>Something went wrong</CardTitle>
+              </div>
+              <CardDescription>
+                An unexpected error occurred. Please try again.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {this.state.error && (
+                <pre className="rounded-lg bg-muted p-4 text-sm overflow-auto max-h-40">
+                  {this.state.error.message}
+                </pre>
+              )}
+              <Button onClick={this.handleReset} className="w-full">
+                <RefreshCw className="mr-2 h-4 w-4" />
+                Try Again
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      );
+    }
+    
+    return this.props.children;
+  }
+}

src/components/common/LoadingSpinner.tsx

@@ -0,0 +1,36 @@
+/**
+ * Loading Spinner Component
+ * Displays a spinning loader animation
+ */
+import { Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const sizeClasses = {
+  sm: 'h-4 w-4',
+  md: 'h-8 w-8',
+  lg: 'h-12 w-12',
+};
+
+export function LoadingSpinner({ size = 'md', className }: LoadingSpinnerProps) {
+  return (
+    <div className={cn('flex items-center justify-center', className)}>
+      <Loader2 className={cn('animate-spin text-primary', sizeClasses[size])} />
+    </div>
+  );
+}
+
+/**
+ * Full page loading spinner
+ */
+export function PageLoader() {
+  return (
+    <div className="flex h-full items-center justify-center">
+      <LoadingSpinner size="lg" />
+    </div>
+  );
+}

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>
+  );
+}

src/components/layout/Header.tsx

@@ -0,0 +1,75 @@
+/**
+ * Header Component
+ * Top navigation bar with search and actions
+ */
+import { useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { Search, Bell, Moon, Sun, Monitor } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { useSettingsStore } from '@/stores/settings';
+
+// Page titles mapping
+const pageTitles: Record<string, string> = {
+  '/': 'Dashboard',
+  '/chat': 'Chat',
+  '/channels': 'Channels',
+  '/skills': 'Skills',
+  '/cron': 'Cron Tasks',
+  '/settings': 'Settings',
+};
+
+export function Header() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const theme = useSettingsStore((state) => state.theme);
+  const setTheme = useSettingsStore((state) => state.setTheme);
+  
+  const [searchQuery, setSearchQuery] = useState('');
+  
+  // Get current page title
+  const currentTitle = pageTitles[location.pathname] || 'ClawX';
+  
+  // Cycle through themes
+  const cycleTheme = () => {
+    const themes: Array<'light' | 'dark' | 'system'> = ['light', 'dark', 'system'];
+    const currentIndex = themes.indexOf(theme);
+    const nextIndex = (currentIndex + 1) % themes.length;
+    setTheme(themes[nextIndex]);
+  };
+  
+  // Get theme icon
+  const ThemeIcon = theme === 'light' ? Sun : theme === 'dark' ? Moon : Monitor;
+  
+  return (
+    <header className="flex h-14 items-center justify-between border-b bg-background px-6">
+      {/* Page Title */}
+      <h2 className="text-lg font-semibold">{currentTitle}</h2>
+      
+      {/* Actions */}
+      <div className="flex items-center gap-2">
+        {/* Search */}
+        <div className="relative">
+          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            type="search"
+            placeholder="Search..."
+            className="w-64 pl-9"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+        
+        {/* Theme Toggle */}
+        <Button variant="ghost" size="icon" onClick={cycleTheme}>
+          <ThemeIcon className="h-5 w-5" />
+        </Button>
+        
+        {/* Notifications */}
+        <Button variant="ghost" size="icon">
+          <Bell className="h-5 w-5" />
+        </Button>
+      </div>
+    </header>
+  );
+}

src/components/layout/MainLayout.tsx

@@ -0,0 +1,36 @@
+/**
+ * Main Layout Component
+ * Provides the primary app layout with sidebar and content area
+ */
+import { Outlet } from 'react-router-dom';
+import { Sidebar } from './Sidebar';
+import { Header } from './Header';
+import { useSettingsStore } from '@/stores/settings';
+import { cn } from '@/lib/utils';
+
+export function MainLayout() {
+  const sidebarCollapsed = useSettingsStore((state) => state.sidebarCollapsed);
+  
+  return (
+    <div className="flex h-screen overflow-hidden bg-background">
+      {/* Sidebar */}
+      <Sidebar />
+      
+      {/* Main Content Area */}
+      <div
+        className={cn(
+          'flex flex-1 flex-col overflow-hidden transition-all duration-300',
+          sidebarCollapsed ? 'ml-16' : 'ml-64'
+        )}
+      >
+        {/* Header */}
+        <Header />
+        
+        {/* Page Content */}
+        <main className="flex-1 overflow-auto p-6">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}

src/components/layout/Sidebar.tsx

@@ -0,0 +1,206 @@
+/**
+ * Sidebar Component
+ * Navigation sidebar with menu items
+ */
+import { useState, useEffect } from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+import {
+  Home,
+  MessageSquare,
+  Radio,
+  Puzzle,
+  Clock,
+  Settings,
+  ChevronLeft,
+  ChevronRight,
+  Terminal,
+  ExternalLink,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useSettingsStore } from '@/stores/settings';
+import { useGatewayStore } from '@/stores/gateway';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { toast } from 'sonner';
+
+interface NavItemProps {
+  to: string;
+  icon: React.ReactNode;
+  label: string;
+  badge?: string;
+  collapsed?: boolean;
+}
+
+function NavItem({ to, icon, label, badge, collapsed }: NavItemProps) {
+  return (
+    <NavLink
+      to={to}
+      className={({ isActive }) =>
+        cn(
+          'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+          'hover:bg-accent hover:text-accent-foreground',
+          isActive
+            ? 'bg-accent text-accent-foreground'
+            : 'text-muted-foreground',
+          collapsed && 'justify-center px-2'
+        )
+      }
+    >
+      {icon}
+      {!collapsed && (
+        <>
+          <span className="flex-1">{label}</span>
+          {badge && (
+            <Badge variant="secondary" className="ml-auto">
+              {badge}
+            </Badge>
+          )}
+        </>
+      )}
+    </NavLink>
+  );
+}
+
+export function Sidebar() {
+  const location = useLocation();
+  const sidebarCollapsed = useSettingsStore((state) => state.sidebarCollapsed);
+  const setSidebarCollapsed = useSettingsStore((state) => state.setSidebarCollapsed);
+  const devModeUnlocked = useSettingsStore((state) => state.devModeUnlocked);
+  const setDevModeUnlocked = useSettingsStore((state) => state.setDevModeUnlocked);
+  const gatewayStatus = useGatewayStore((state) => state.status);
+  
+  const [versionClicks, setVersionClicks] = useState(0);
+  const [appVersion, setAppVersion] = useState('0.1.0');
+  
+  // Get app version
+  useEffect(() => {
+    window.electron.ipcRenderer.invoke('app:version').then((version) => {
+      setAppVersion(version as string);
+    });
+  }, []);
+  
+  // Handle version click for dev mode unlock
+  const handleVersionClick = () => {
+    const clicks = versionClicks + 1;
+    setVersionClicks(clicks);
+    
+    if (clicks >= 5) {
+      if (!devModeUnlocked) {
+        setDevModeUnlocked(true);
+        toast.success('Developer mode unlocked!');
+      }
+      setVersionClicks(0);
+    }
+    
+    // Reset after 2 seconds of inactivity
+    setTimeout(() => setVersionClicks(0), 2000);
+  };
+  
+  // Open developer console
+  const openDevConsole = () => {
+    window.electron.openExternal('http://localhost:18789');
+  };
+  
+  const navItems = [
+    { to: '/', icon: <Home className="h-5 w-5" />, label: 'Dashboard' },
+    { to: '/chat', icon: <MessageSquare className="h-5 w-5" />, label: 'Chat' },
+    { to: '/channels', icon: <Radio className="h-5 w-5" />, label: 'Channels' },
+    { to: '/skills', icon: <Puzzle className="h-5 w-5" />, label: 'Skills' },
+    { to: '/cron', icon: <Clock className="h-5 w-5" />, label: 'Cron Tasks' },
+    { to: '/settings', icon: <Settings className="h-5 w-5" />, label: 'Settings' },
+  ];
+  
+  return (
+    <aside
+      className={cn(
+        'fixed left-0 top-0 z-40 flex h-screen flex-col border-r bg-background transition-all duration-300',
+        sidebarCollapsed ? 'w-16' : 'w-64'
+      )}
+    >
+      {/* Header with drag region for macOS */}
+      <div className="drag-region flex h-14 items-center border-b px-4">
+        {/* macOS traffic light spacing */}
+        <div className="w-16" />
+        {!sidebarCollapsed && (
+          <h1 className="no-drag text-xl font-bold">ClawX</h1>
+        )}
+      </div>
+      
+      {/* Navigation */}
+      <nav className="flex-1 space-y-1 p-2">
+        {navItems.map((item) => (
+          <NavItem
+            key={item.to}
+            {...item}
+            collapsed={sidebarCollapsed}
+          />
+        ))}
+      </nav>
+      
+      {/* Footer */}
+      <div className="border-t p-2 space-y-2">
+        {/* Gateway Status */}
+        <div
+          className={cn(
+            'flex items-center gap-2 rounded-lg px-3 py-2',
+            sidebarCollapsed && 'justify-center px-2'
+          )}
+        >
+          <div
+            className={cn(
+              'h-2 w-2 rounded-full',
+              gatewayStatus.state === 'running' && 'bg-green-500',
+              gatewayStatus.state === 'starting' && 'bg-yellow-500 animate-pulse',
+              gatewayStatus.state === 'stopped' && 'bg-gray-400',
+              gatewayStatus.state === 'error' && 'bg-red-500'
+            )}
+          />
+          {!sidebarCollapsed && (
+            <span className="text-xs text-muted-foreground">
+              Gateway: {gatewayStatus.state}
+            </span>
+          )}
+        </div>
+        
+        {/* Developer Mode Button */}
+        {devModeUnlocked && !sidebarCollapsed && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="w-full justify-start"
+            onClick={openDevConsole}
+          >
+            <Terminal className="h-4 w-4 mr-2" />
+            Developer Console
+            <ExternalLink className="h-3 w-3 ml-auto" />
+          </Button>
+        )}
+        
+        {/* Version */}
+        <button
+          onClick={handleVersionClick}
+          className={cn(
+            'w-full text-xs text-muted-foreground hover:text-foreground transition-colors',
+            sidebarCollapsed ? 'text-center' : 'px-3'
+          )}
+        >
+          {sidebarCollapsed ? `v${appVersion.split('.')[0]}` : `ClawX v${appVersion}`}
+        </button>
+        
+        {/* Collapse Toggle */}
+        <Button
+          variant="ghost"
+          size="icon"
+          className="w-full"
+          onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+        >
+          {sidebarCollapsed ? (
+            <ChevronRight className="h-4 w-4" />
+          ) : (
+            <ChevronLeft className="h-4 w-4" />
+          )}
+        </Button>
+      </div>
+    </aside>
+  );
+}

src/components/ui/badge.tsx

@@ -0,0 +1,43 @@
+/**
+ * Badge Component
+ * Based on shadcn/ui badge
+ */
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+        success:
+          'border-transparent bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100',
+        warning:
+          'border-transparent bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

src/components/ui/button.tsx

@@ -0,0 +1,59 @@
+/**
+ * Button Component
+ * Based on shadcn/ui button
+ */
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

src/components/ui/card.tsx

@@ -0,0 +1,82 @@
+/**
+ * Card Component
+ * Based on shadcn/ui card
+ */
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'rounded-lg border bg-card text-card-foreground shadow-sm',
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
+    {...props}
+  />
+));
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      'text-2xl font-semibold leading-none tracking-tight',
+      className
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex items-center p-6 pt-0', className)}
+    {...props}
+  />
+));
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

src/components/ui/input.tsx

@@ -0,0 +1,28 @@
+/**
+ * Input Component
+ * Based on shadcn/ui input
+ */
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = 'Input';
+
+export { Input };

src/components/ui/label.tsx

@@ -0,0 +1,27 @@
+/**
+ * Label Component
+ * Based on shadcn/ui label
+ */
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const labelVariants = cva(
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

src/components/ui/separator.tsx

@@ -0,0 +1,32 @@
+/**
+ * Separator Component
+ * Based on shadcn/ui separator
+ */
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { cn } from '@/lib/utils';
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

src/components/ui/switch.tsx

@@ -0,0 +1,30 @@
+/**
+ * Switch Component
+ * Based on shadcn/ui switch
+ */
+import * as React from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import { cn } from '@/lib/utils';
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };