feat(web): React SPA with realtime task detail over WebSocket

Vite + React 19 + TS console-style operator UI: hash-routed Login, Endpoints, Tasks, and TaskDetail (realtime accounts table over /ws, Run gated on all accounts testing ok on both sides). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MMHQTtnQtQqL8muAXHr9kd
2026-07-01 19:01:05 +07:00
parent 4c57848c35
commit 1a451f9dbb
22 changed files with 3175 additions and 0 deletions
@@ -0,0 +1,88 @@
+import { useEffect, useState } from 'react'
+import './app.css'
+import { logout } from './api'
+import { Login } from './pages/Login'
+import { Endpoints } from './pages/Endpoints'
+import { Tasks } from './pages/Tasks'
+import { TaskDetail } from './pages/TaskDetail'
+
+type Route =
+  | { name: 'login' }
+  | { name: 'tasks' }
+  | { name: 'endpoints' }
+  | { name: 'task'; id: number }
+  | { name: 'notfound' }
+
+function parseRoute(hash: string): Route {
+  const path = hash.replace(/^#/, '') || '/'
+  if (path === '/login') return { name: 'login' }
+  if (path === '/') return { name: 'tasks' }
+  if (path === '/endpoints') return { name: 'endpoints' }
+  const m = path.match(/^\/tasks\/(\d+)$/)
+  if (m) return { name: 'task', id: Number(m[1]) }
+  return { name: 'notfound' }
+}
+
+function useHashRoute(): Route {
+  const [hash, setHash] = useState(location.hash)
+  useEffect(() => {
+    const onChange = () => setHash(location.hash)
+    window.addEventListener('hashchange', onChange)
+    return () => window.removeEventListener('hashchange', onChange)
+  }, [])
+  return parseRoute(hash)
+}
+
+function App() {
+  const route = useHashRoute()
+
+  if (route.name === 'login') {
+    return <Login onSuccess={() => (location.hash = '#/')} />
+  }
+
+  function handleLogout() {
+    logout()
+      .catch(() => {})
+      .finally(() => (location.hash = '#/login'))
+  }
+
+  return (
+    <div className="shell">
+      <header className="topbar">
+        <div className="brand">
+          <span className="bracket">[</span>IMAP<span className="dim">/COPIER</span>
+          <span className="bracket">]</span>
+        </div>
+        <nav className="topnav">
+          <a href="#/" className={route.name === 'tasks' || route.name === 'task' ? 'active' : ''}>
+            Tasks
+          </a>
+          <a href="#/endpoints" className={route.name === 'endpoints' ? 'active' : ''}>
+            Endpoints
+          </a>
+        </nav>
+        <div className="session-indicator">
+          <span className="pulse-dot" /> session active
+        </div>
+        <button className="btn btn-ghost" onClick={handleLogout}>
+          Logout
+        </button>
+      </header>
+      <main className="main">
+        {route.name === 'tasks' && <Tasks />}
+        {route.name === 'endpoints' && <Endpoints />}
+        {route.name === 'task' && <TaskDetail id={route.id} />}
+        {route.name === 'notfound' && (
+          <div className="panel">
+            <p>Unknown route.</p>
+            <a className="crumb" href="#/">
+              ← back to tasks
+            </a>
+          </div>
+        )}
+      </main>
+    </div>
+  )
+}
+
+export default App