refactor: migrate frontend from Vue 3 to React 19

- Replace Vue 3 with React 19
- Use TanStack Router and Query
- MoonShadow-inspired layout with sidebar navigation
- Lucide icons (stroke-width: 1.5)
- Framer Motion animations
- Theme support (dark/light)
- Vite 7 + pnpm build system

web/src/pages/Dashboard.tsx

@@ -0,0 +1,68 @@
+import { useQuery } from '@tanstack/react-query'
+import { Activity, Cpu, HardDrive, MemoryStick, Clock } from 'lucide-react'
+import { request } from '@/api'
+
+interface MonitorStats {
+  host: {
+    cpu_percent: number
+    mem_percent: number
+    disk_percent: number
+    uptime: number
+  }
+  scheduler: {
+    scheduled: number
+    running: number
+    queue_size: number
+  }
+}
+
+export default function Dashboard() {
+  const { data: stats, isLoading } = useQuery({
+    queryKey: ['monitor'],
+    queryFn: () => request<MonitorStats>('/monitor/stats'),
+    refetchInterval: 5000,
+  })
+
+  if (isLoading) {
+    return <div style={{ color: 'var(--text-muted)' }}>Loading...</div>
+  }
+
+  const formatUptime = (seconds: number) => {
+    const days = Math.floor(seconds / 86400)
+    const hours = Math.floor((seconds % 86400) / 3600)
+    if (days > 0) return `${days}d ${hours}h`
+    return `${hours}h`
+  }
+
+  return (
+    <div>
+      <h1 style={{ fontSize: 24, fontWeight: 600, marginBottom: 24 }}>Dashboard</h1>
+      
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 16 }}>
+        <Card icon={Cpu} label="CPU" value={`${stats?.host.cpu_percent || 0}%`} />
+        <Card icon={MemoryStick} label="Memory" value={`${stats?.host.mem_percent || 0}%`} />
+        <Card icon={HardDrive} label="Disk" value={`${stats?.host.disk_percent || 0}%`} />
+        <Card icon={Clock} label="Uptime" value={formatUptime(stats?.host.uptime || 0)} />
+        <Card icon={Activity} label="Scheduled" value={stats?.scheduler.scheduled || 0} />
+        <Card icon={Activity} label="Running" value={stats?.scheduler.running || 0} />
+      </div>
+    </div>
+  )
+}
+
+function Card({ icon: Icon, label, value }: { icon: any; label: string; value: string | number }) {
+  return (
+    <div style={{
+      background: 'var(--bg-secondary)',
+      border: '1px solid var(--border)',
+      borderRadius: 8,
+      padding: 16,
+    }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
+        <Icon size={18} strokeWidth={1.5} style={{ color: 'var(--text-secondary)' }} />
+        <span style={{ color: 'var(--text-secondary)', fontSize: 13 }}>{label}</span>
+      </div>
+      <div style={{ fontSize: 24, fontWeight: 600 }}>{value}</div>
+    </div>
+  )
+}

web/src/pages/Interconnect.tsx

@@ -0,0 +1,8 @@
+export default function Interconnect() {
+  return (
+    <div>
+      <h1 style={{ fontSize: 24, fontWeight: 600, marginBottom: 24 }}>Interconnect</h1>
+      <p style={{ color: 'var(--text-secondary)' }}>Node management coming soon...</p>
+    </div>
+  )
+}

web/src/pages/Logs.tsx

@@ -0,0 +1,8 @@
+export default function Logs() {
+  return (
+    <div>
+      <h1 style={{ fontSize: 24, fontWeight: 600, marginBottom: 24 }}>Logs</h1>
+      <p style={{ color: 'var(--text-secondary)' }}>Log viewer coming soon...</p>
+    </div>
+  )
+}

web/src/pages/Scripts.tsx

@@ -0,0 +1,8 @@
+export default function Scripts() {
+  return (
+    <div>
+      <h1 style={{ fontSize: 24, fontWeight: 600, marginBottom: 24 }}>Scripts</h1>
+      <p style={{ color: 'var(--text-secondary)' }}>Script management coming soon...</p>
+    </div>
+  )
+}

web/src/pages/Settings.tsx

@@ -0,0 +1,8 @@
+export default function Settings() {
+  return (
+    <div>
+      <h1 style={{ fontSize: 24, fontWeight: 600, marginBottom: 24 }}>Settings</h1>
+      <p style={{ color: 'var(--text-secondary)' }}>Settings coming soon...</p>
+    </div>
+  )
+}

web/src/pages/Tasks.tsx

@@ -0,0 +1,8 @@
+export default function Tasks() {
+  return (
+    <div>
+      <h1 style={{ fontSize: 24, fontWeight: 600, marginBottom: 24 }}>Tasks</h1>
+      <p style={{ color: 'var(--text-secondary)' }}>Task management coming soon...</p>
+    </div>
+  )
+}

web/src/pages/Terminal.tsx

@@ -0,0 +1,8 @@
+export default function Terminal() {
+  return (
+    <div>
+      <h1 style={{ fontSize: 24, fontWeight: 600, marginBottom: 24 }}>Terminal</h1>
+      <p style={{ color: 'var(--text-secondary)' }}>Web terminal coming soon...</p>
+    </div>
+  )
+}