Add Python agent, WebSocket relay, real viewer, enrollment tokens
- WebSocket relay service (FastAPI) bridges agents and viewers - Python agent with screen capture (mss), input control (pynput), script execution, and auto-reconnect - Windows service wrapper, PyInstaller spec, NSIS installer for silent mass deployment (RemoteLink-Setup.exe /S /SERVER= /ENROLL=) - Enrollment token system: admin generates tokens, agents self-register - Real WebSocket viewer replaces simulated canvas - Linux agent binary served from /downloads/remotelink-agent-linux - DB migration 0002: viewer_token on sessions, enrollment_tokens table - Sign-up pages cleaned up (invite-only redirect) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
monoadmin
@@ -1,15 +1,9 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState, useRef, useCallback } from 'react'
|
||||
import { useParams, useRouter } from 'next/navigation'
|
||||
import { useParams, useRouter, useSearchParams } from 'next/navigation'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Maximize2,
|
||||
Minimize2,
|
||||
Monitor,
|
||||
Loader2,
|
||||
AlertCircle,
|
||||
} from 'lucide-react'
|
||||
import { Maximize2, Minimize2, Monitor, Loader2, AlertCircle, WifiOff } from 'lucide-react'
|
||||
import { ViewerToolbar } from '@/components/viewer/toolbar'
|
||||
import { ConnectionStatus } from '@/components/viewer/connection-status'
|
||||
|
||||
@@ -22,12 +16,15 @@ interface Session {
|
||||
connectionType: string | null
|
||||
}
|
||||
|
||||
type ConnectionState = 'connecting' | 'connected' | 'disconnected' | 'error'
|
||||
type ConnectionState = 'connecting' | 'waiting' | 'connected' | 'disconnected' | 'error'
|
||||
|
||||
export default function ViewerPage() {
|
||||
const params = useParams()
|
||||
const searchParams = useSearchParams()
|
||||
const router = useRouter()
|
||||
const sessionId = params.sessionId as string
|
||||
// viewerToken is passed as a query param from the connect flow
|
||||
const viewerToken = searchParams.get('token')
|
||||
|
||||
const [session, setSession] = useState<Session | null>(null)
|
||||
const [connectionState, setConnectionState] = useState<ConnectionState>('connecting')
|
||||
@@ -36,10 +33,16 @@ export default function ViewerPage() {
|
||||
const [quality, setQuality] = useState<'high' | 'medium' | 'low'>('high')
|
||||
const [isMuted, setIsMuted] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [statusMsg, setStatusMsg] = useState('Connecting to relay…')
|
||||
const [fps, setFps] = useState(0)
|
||||
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null)
|
||||
const wsRef = useRef<WebSocket | null>(null)
|
||||
const fpsCounterRef = useRef({ frames: 0, lastTime: Date.now() })
|
||||
const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
|
||||
|
||||
// ── Load session info ──────────────────────────────────────────────────────
|
||||
useEffect(() => {
|
||||
fetch(`/api/sessions/${sessionId}`)
|
||||
.then((r) => r.json())
|
||||
@@ -55,7 +58,6 @@ export default function ViewerPage() {
|
||||
return
|
||||
}
|
||||
setSession(data.session)
|
||||
simulateConnection()
|
||||
})
|
||||
.catch(() => {
|
||||
setError('Failed to load session')
|
||||
@@ -63,109 +65,171 @@ export default function ViewerPage() {
|
||||
})
|
||||
}, [sessionId])
|
||||
|
||||
const simulateConnection = () => {
|
||||
// ── WebSocket connection ───────────────────────────────────────────────────
|
||||
const connectWS = useCallback(() => {
|
||||
if (!viewerToken) return
|
||||
|
||||
const relayHost = process.env.NEXT_PUBLIC_RELAY_URL ||
|
||||
`${window.location.hostname}:8765`
|
||||
const proto = window.location.protocol === 'https:' ? 'wss' : 'ws'
|
||||
const wsUrl = `${proto}://${relayHost}/ws/viewer?session_id=${sessionId}&viewer_token=${viewerToken}`
|
||||
|
||||
setConnectionState('connecting')
|
||||
setTimeout(() => {
|
||||
setConnectionState('connected')
|
||||
startDemoScreen()
|
||||
}, 2000)
|
||||
}
|
||||
setStatusMsg('Connecting to relay…')
|
||||
|
||||
const startDemoScreen = () => {
|
||||
const canvas = canvasRef.current
|
||||
if (!canvas) return
|
||||
const ctx = canvas.getContext('2d')
|
||||
if (!ctx) return
|
||||
const ws = new WebSocket(wsUrl)
|
||||
ws.binaryType = 'arraybuffer'
|
||||
wsRef.current = ws
|
||||
|
||||
canvas.width = 1920
|
||||
canvas.height = 1080
|
||||
|
||||
const draw = () => {
|
||||
ctx.fillStyle = '#1e1e2e'
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height)
|
||||
|
||||
const icons = [
|
||||
{ x: 50, y: 50, label: 'Documents' },
|
||||
{ x: 50, y: 150, label: 'Pictures' },
|
||||
{ x: 50, y: 250, label: 'Downloads' },
|
||||
]
|
||||
ctx.font = '14px system-ui'
|
||||
ctx.textAlign = 'center'
|
||||
icons.forEach((icon) => {
|
||||
ctx.fillStyle = '#313244'
|
||||
ctx.fillRect(icon.x, icon.y, 60, 60)
|
||||
ctx.fillStyle = '#cdd6f4'
|
||||
ctx.fillText(icon.label, icon.x + 30, icon.y + 80)
|
||||
})
|
||||
|
||||
ctx.fillStyle = '#181825'
|
||||
ctx.fillRect(0, canvas.height - 48, canvas.width, 48)
|
||||
ctx.fillStyle = '#89b4fa'
|
||||
ctx.fillRect(10, canvas.height - 40, 40, 32)
|
||||
|
||||
const time = new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })
|
||||
ctx.fillStyle = '#cdd6f4'
|
||||
ctx.font = '14px system-ui'
|
||||
ctx.textAlign = 'right'
|
||||
ctx.fillText(time, canvas.width - 20, canvas.height - 18)
|
||||
|
||||
ctx.fillStyle = '#1e1e2e'
|
||||
ctx.fillRect(300, 100, 800, 500)
|
||||
ctx.strokeStyle = '#313244'
|
||||
ctx.lineWidth = 1
|
||||
ctx.strokeRect(300, 100, 800, 500)
|
||||
ctx.fillStyle = '#181825'
|
||||
ctx.fillRect(300, 100, 800, 32)
|
||||
ctx.fillStyle = '#cdd6f4'
|
||||
ctx.font = '13px system-ui'
|
||||
ctx.textAlign = 'left'
|
||||
ctx.fillText('RemoteLink Agent - Connected', 312, 121)
|
||||
ctx.fillStyle = '#a6adc8'
|
||||
ctx.font = '16px system-ui'
|
||||
ctx.fillText('Remote session active', 320, 180)
|
||||
ctx.fillText('Connection: Secure (WebRTC)', 320, 210)
|
||||
ctx.fillText('Latency: ~45ms', 320, 240)
|
||||
ctx.fillStyle = '#a6e3a1'
|
||||
ctx.beginPath()
|
||||
ctx.arc(320, 280, 6, 0, Math.PI * 2)
|
||||
ctx.fill()
|
||||
ctx.fillStyle = '#cdd6f4'
|
||||
ctx.fillText('Connected to viewer', 335, 285)
|
||||
ws.onopen = () => {
|
||||
setStatusMsg('Waiting for agent…')
|
||||
setConnectionState('waiting')
|
||||
}
|
||||
|
||||
draw()
|
||||
const interval = setInterval(draw, 1000)
|
||||
return () => clearInterval(interval)
|
||||
ws.onmessage = (evt) => {
|
||||
if (evt.data instanceof ArrayBuffer) {
|
||||
// Binary = JPEG frame
|
||||
renderFrame(evt.data)
|
||||
} else {
|
||||
try {
|
||||
const msg = JSON.parse(evt.data as string)
|
||||
handleRelayMessage(msg)
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
}
|
||||
|
||||
ws.onclose = (evt) => {
|
||||
wsRef.current = null
|
||||
if (connectionState !== 'disconnected' && evt.code !== 4001) {
|
||||
setConnectionState('waiting')
|
||||
setStatusMsg('Connection lost — reconnecting…')
|
||||
reconnectTimerRef.current = setTimeout(connectWS, 3000)
|
||||
}
|
||||
}
|
||||
|
||||
ws.onerror = () => {
|
||||
setStatusMsg('Relay connection failed')
|
||||
}
|
||||
}, [sessionId, viewerToken])
|
||||
|
||||
useEffect(() => {
|
||||
if (session && viewerToken) {
|
||||
connectWS()
|
||||
}
|
||||
return () => {
|
||||
wsRef.current?.close()
|
||||
if (reconnectTimerRef.current) clearTimeout(reconnectTimerRef.current)
|
||||
}
|
||||
}, [session, viewerToken, connectWS])
|
||||
|
||||
const handleRelayMessage = (msg: Record<string, unknown>) => {
|
||||
switch (msg.type) {
|
||||
case 'agent_connected':
|
||||
setConnectionState('connected')
|
||||
setStatusMsg('')
|
||||
break
|
||||
case 'agent_offline':
|
||||
setConnectionState('waiting')
|
||||
setStatusMsg('Agent is offline — waiting for connection…')
|
||||
break
|
||||
case 'agent_disconnected':
|
||||
setConnectionState('waiting')
|
||||
setStatusMsg('Agent disconnected — waiting for reconnect…')
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: KeyboardEvent) => {
|
||||
if (connectionState !== 'connected') return
|
||||
console.log('[Viewer] Key pressed:', e.key)
|
||||
},
|
||||
[connectionState]
|
||||
)
|
||||
// ── Frame rendering ────────────────────────────────────────────────────────
|
||||
const renderFrame = useCallback((data: ArrayBuffer) => {
|
||||
const canvas = canvasRef.current
|
||||
if (!canvas) return
|
||||
|
||||
const handleMouseMove = useCallback(
|
||||
(e: React.MouseEvent<HTMLCanvasElement>) => {
|
||||
if (connectionState !== 'connected') return
|
||||
const canvas = canvasRef.current
|
||||
if (!canvas) return
|
||||
const rect = canvas.getBoundingClientRect()
|
||||
const _x = ((e.clientX - rect.left) * canvas.width) / rect.width
|
||||
const _y = ((e.clientY - rect.top) * canvas.height) / rect.height
|
||||
},
|
||||
[connectionState]
|
||||
)
|
||||
const blob = new Blob([data], { type: 'image/jpeg' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const img = new Image()
|
||||
img.onload = () => {
|
||||
const ctx = canvas.getContext('2d')
|
||||
if (!ctx) return
|
||||
if (canvas.width !== img.width || canvas.height !== img.height) {
|
||||
canvas.width = img.width
|
||||
canvas.height = img.height
|
||||
}
|
||||
ctx.drawImage(img, 0, 0)
|
||||
URL.revokeObjectURL(url)
|
||||
|
||||
const handleMouseClick = useCallback(
|
||||
(e: React.MouseEvent<HTMLCanvasElement>) => {
|
||||
if (connectionState !== 'connected') return
|
||||
console.log('[Viewer] Mouse clicked:', e.button)
|
||||
},
|
||||
[connectionState]
|
||||
)
|
||||
// FPS counter
|
||||
const counter = fpsCounterRef.current
|
||||
counter.frames++
|
||||
const now = Date.now()
|
||||
if (now - counter.lastTime >= 1000) {
|
||||
setFps(counter.frames)
|
||||
counter.frames = 0
|
||||
counter.lastTime = now
|
||||
}
|
||||
}
|
||||
img.src = url
|
||||
}, [])
|
||||
|
||||
// ── Input forwarding ───────────────────────────────────────────────────────
|
||||
const sendEvent = useCallback((event: Record<string, unknown>) => {
|
||||
if (wsRef.current?.readyState === WebSocket.OPEN) {
|
||||
wsRef.current.send(JSON.stringify(event))
|
||||
}
|
||||
}, [])
|
||||
|
||||
const getCanvasCoords = useCallback((e: React.MouseEvent<HTMLCanvasElement>) => {
|
||||
const canvas = canvasRef.current!
|
||||
const rect = canvas.getBoundingClientRect()
|
||||
return {
|
||||
x: Math.round(((e.clientX - rect.left) * canvas.width) / rect.width),
|
||||
y: Math.round(((e.clientY - rect.top) * canvas.height) / rect.height),
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleMouseMove = useCallback((e: React.MouseEvent<HTMLCanvasElement>) => {
|
||||
if (connectionState !== 'connected') return
|
||||
const { x, y } = getCanvasCoords(e)
|
||||
sendEvent({ type: 'mouse_move', x, y })
|
||||
}, [connectionState, sendEvent, getCanvasCoords])
|
||||
|
||||
const handleMouseClick = useCallback((e: React.MouseEvent<HTMLCanvasElement>) => {
|
||||
if (connectionState !== 'connected') return
|
||||
const { x, y } = getCanvasCoords(e)
|
||||
sendEvent({
|
||||
type: 'mouse_click',
|
||||
button: e.button === 2 ? 'right' : 'left',
|
||||
double: e.detail === 2,
|
||||
x, y,
|
||||
})
|
||||
}, [connectionState, sendEvent, getCanvasCoords])
|
||||
|
||||
const handleMouseScroll = useCallback((e: React.WheelEvent<HTMLCanvasElement>) => {
|
||||
if (connectionState !== 'connected') return
|
||||
e.preventDefault()
|
||||
sendEvent({ type: 'mouse_scroll', dx: e.deltaX, dy: -e.deltaY })
|
||||
}, [connectionState, sendEvent])
|
||||
|
||||
const handleKeyDown = useCallback((e: KeyboardEvent) => {
|
||||
if (connectionState !== 'connected') return
|
||||
e.preventDefault()
|
||||
const specialKeys = [
|
||||
'Enter', 'Escape', 'Tab', 'Backspace', 'Delete', 'Home', 'End',
|
||||
'PageUp', 'PageDown', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight',
|
||||
'F1','F2','F3','F4','F5','F6','F7','F8','F9','F10','F11','F12',
|
||||
]
|
||||
if (specialKeys.includes(e.key)) {
|
||||
sendEvent({ type: 'key_special', key: e.key.toLowerCase().replace('arrow', '') })
|
||||
} else if (e.key.length === 1) {
|
||||
sendEvent({ type: 'key_press', key: e.key })
|
||||
}
|
||||
}, [connectionState, sendEvent])
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener('keydown', handleKeyDown)
|
||||
return () => document.removeEventListener('keydown', handleKeyDown)
|
||||
}, [handleKeyDown])
|
||||
|
||||
// ── Fullscreen / toolbar auto-hide ─────────────────────────────────────────
|
||||
const toggleFullscreen = async () => {
|
||||
if (!containerRef.current) return
|
||||
if (!document.fullscreenElement) {
|
||||
@@ -177,7 +241,16 @@ export default function ViewerPage() {
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (isFullscreen && connectionState === 'connected') {
|
||||
const timer = setTimeout(() => setShowToolbar(false), 3000)
|
||||
return () => clearTimeout(timer)
|
||||
}
|
||||
}, [isFullscreen, connectionState, showToolbar])
|
||||
|
||||
// ── End session ────────────────────────────────────────────────────────────
|
||||
const endSession = async () => {
|
||||
wsRef.current?.close()
|
||||
if (session) {
|
||||
const duration = Math.floor((Date.now() - new Date(session.startedAt).getTime()) / 1000)
|
||||
await fetch(`/api/sessions/${session.id}`, {
|
||||
@@ -190,18 +263,7 @@ export default function ViewerPage() {
|
||||
router.push('/dashboard/sessions')
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener('keydown', handleKeyDown)
|
||||
return () => document.removeEventListener('keydown', handleKeyDown)
|
||||
}, [handleKeyDown])
|
||||
|
||||
useEffect(() => {
|
||||
if (isFullscreen && connectionState === 'connected') {
|
||||
const timer = setTimeout(() => setShowToolbar(false), 3000)
|
||||
return () => clearTimeout(timer)
|
||||
}
|
||||
}, [isFullscreen, connectionState, showToolbar])
|
||||
|
||||
// ── Render ─────────────────────────────────────────────────────────────────
|
||||
if (error) {
|
||||
return (
|
||||
<div className="min-h-svh bg-background flex items-center justify-center">
|
||||
@@ -228,21 +290,26 @@ export default function ViewerPage() {
|
||||
quality={quality}
|
||||
isMuted={isMuted}
|
||||
onToggleFullscreen={toggleFullscreen}
|
||||
onQualityChange={setQuality}
|
||||
onQualityChange={(q) => {
|
||||
setQuality(q)
|
||||
sendEvent({ type: 'set_quality', quality: q })
|
||||
}}
|
||||
onToggleMute={() => setIsMuted(!isMuted)}
|
||||
onDisconnect={endSession}
|
||||
onReconnect={simulateConnection}
|
||||
onReconnect={connectWS}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex items-center justify-center relative">
|
||||
{connectionState === 'connecting' && (
|
||||
{(connectionState === 'connecting' || connectionState === 'waiting') && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-background/80 z-10">
|
||||
<div className="text-center space-y-4">
|
||||
<Loader2 className="h-12 w-12 animate-spin text-primary mx-auto" />
|
||||
{connectionState === 'waiting'
|
||||
? <WifiOff className="h-12 w-12 text-muted-foreground mx-auto" />
|
||||
: <Loader2 className="h-12 w-12 animate-spin text-primary mx-auto" />}
|
||||
<div>
|
||||
<p className="font-semibold">Connecting to remote machine...</p>
|
||||
<p className="text-sm text-muted-foreground">{session?.machineName || 'Establishing connection'}</p>
|
||||
<p className="font-semibold">{statusMsg}</p>
|
||||
<p className="text-sm text-muted-foreground">{session?.machineName}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -250,13 +317,14 @@ export default function ViewerPage() {
|
||||
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="max-w-full max-h-full object-contain cursor-default"
|
||||
className="max-w-full max-h-full object-contain cursor-crosshair"
|
||||
style={{
|
||||
display: connectionState === 'connected' ? 'block' : 'none',
|
||||
imageRendering: quality === 'low' ? 'pixelated' : 'auto',
|
||||
}}
|
||||
onMouseMove={handleMouseMove}
|
||||
onClick={handleMouseClick}
|
||||
onWheel={handleMouseScroll}
|
||||
onContextMenu={(e) => { e.preventDefault(); handleMouseClick(e) }}
|
||||
/>
|
||||
|
||||
@@ -272,7 +340,7 @@ export default function ViewerPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{connectionState === 'connected' && <ConnectionStatus quality={quality} />}
|
||||
{connectionState === 'connected' && <ConnectionStatus quality={quality} fps={fps} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user