Visual redesign: design system, refined ops console aesthetic

- Full component library (Button, Input, Label, Select, Modal, Table, Badge, Card, etc.)
- Tailwind design tokens: IBM Plex Sans + JetBrains Mono, teal accent, semantic status colors
- NavBar with logo, responsive hamburger menu, real logout
- All pages redesigned: Login, Dashboard (KPI cards), Machines, SyncPairs, JobHistory, JobDetail, SSHKeys, Settings
- Fixed: hover:bg-gray-750 dead class, window.location.href navigation bug
- Replaced alert()/confirm() with sonner toasts and accessible modals
- Added ErrorBoundary, skip link, accessible modal dialogs (Radix)
- Icons: lucide-react throughout, copy/download buttons
- 1.0.5 → 1.0.6

web/tailwind.config.js

@@ -1,8 +1,78 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  darkMode: 'class',
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        canvas: {
+          DEFAULT: '#080808',
+          raised: '#121212',
+        },
+        surface: {
+          DEFAULT: '#0f0f0f',
+          hover: '#1a1a1a',
+          raised: '#1a1a1a',
+          border: '#262626',
+        },
+        accent: {
+          DEFAULT: '#2dd4bf',
+          hover: '#5eead4',
+          muted: '#0d9488',
+          foreground: '#0f0f0f',
+        },
+        fg: {
+          DEFAULT: '#f5f5f5',
+          muted: '#a3a3a3',
+          subtle: '#737373',
+        },
+        border: {
+          DEFAULT: '#262626',
+          subtle: '#1f1f1f',
+        },
+        status: {
+          running: '#10b981',
+          pending: '#fbbf24',
+          waking: '#fbbf24',
+          success: '#10b981',
+          error: '#f43f5e',
+          info: '#38bdf8',
+          neutral: '#71717a',
+        },
+      },
+      fontFamily: {
+        sans: ['"IBM Plex Sans"', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+        mono: ['"JetBrains Mono"', 'ui-monospace', 'SFMono-Regular', 'monospace'],
+      },
+      boxShadow: {
+        card: '0 0 0 1px rgba(38, 38, 38, 1), 0 2px 8px rgba(0, 0, 0, 0.4)',
+        'card-hover': '0 0 0 1px rgba(45, 212, 191, 0.3), 0 4px 16px rgba(0, 0, 0, 0.5)',
+        glow: '0 0 20px rgba(45, 212, 191, 0.15)',
+        'glow-error': '0 0 20px rgba(244, 63, 94, 0.15)',
+      },
+      borderRadius: {
+        card: '0.5rem',
+      },
+      animation: {
+        'fade-in': 'fadeIn 200ms ease-out',
+        'scale-in': 'scaleIn 200ms ease-out',
+        'slide-up': 'slideUp 200ms ease-out',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        scaleIn: {
+          '0%': { opacity: '0', transform: 'scale(0.95)' },
+          '100%': { opacity: '1', transform: 'scale(1)' },
+        },
+        slideUp: {
+          '0%': { opacity: '0', transform: 'translateY(8px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+      },
+    },
   },
   plugins: [],
 }