Add ScreenConnect-parity features (high + medium)

Viewer:
- Toolbar: Ctrl+Alt+Del, clipboard paste, monitor picker, file transfer, chat, WoL buttons
- Multi-monitor: agent sends monitor_list on connect, viewer can switch via dropdown
- Clipboard sync: agent polls local clipboard → sends to viewer; viewer paste → agent sets remote clipboard
- File transfer panel: drag-drop upload to agent, directory browser, download files from remote
- Chat panel: bidirectional text chat forwarded through relay

Agent:
- Multi-monitor capture with set_monitor/set_quality message handlers
- exec_key_combo for Ctrl+Alt+Del and arbitrary combos
- Clipboard polling via pyperclip (both directions)
- File upload/download/list_files with base64 chunked protocol
- Attended mode (--attended): zenity/kdialog/PowerShell consent dialog before accepting stream
- Auto-update: heartbeat checks version, downloads new binary and exec-replaces self (Linux)
- Reports MAC address on registration (for WoL)

Relay:
- Forwards monitor_list, clipboard_content, file_chunk, file_list, chat_message agent→viewer
- Session recording: when RECORDING_DIR env set, saves JPEG frames as .remrec files
- ALLOWED_ORIGINS CORS now set from NEXT_PUBLIC_APP_URL in docker-compose

Database:
- groups table (id, name, description, created_by)
- machines: group_id, mac_address, notes, tags text[]
- Migration 0003 applied

Dashboard:
- Machines page: search, tag filter, group filter, inline notes/tags/rename editing
- MachineCard: inline tag management, group picker, notes textarea
- Admin page: new Groups tab (create/list/delete groups)
- API: PATCH /api/machines/[id] (name, notes, tags, groupId)
- API: GET/POST/DELETE /api/groups
- API: POST /api/machines/wol (broadcast magic packet)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/viewer/[sessionId]/page.tsx

@@ -3,9 +3,11 @@
 import { useEffect, useState, useRef, useCallback } from 'react'
 import { useParams, useRouter, useSearchParams } from 'next/navigation'
 import { Button } from '@/components/ui/button'
-import { Maximize2, Minimize2, Monitor, Loader2, AlertCircle, WifiOff } from 'lucide-react'
+import { Monitor, Loader2, AlertCircle, WifiOff } from 'lucide-react'
 import { ViewerToolbar } from '@/components/viewer/toolbar'
 import { ConnectionStatus } from '@/components/viewer/connection-status'
+import { FileTransferPanel } from '@/components/viewer/file-transfer-panel'
+import { ChatPanel } from '@/components/viewer/chat-panel'
 
 interface Session {
   id: string
@@ -16,6 +18,13 @@ interface Session {
   connectionType: string | null
 }
 
+interface MonitorInfo {
+  index: number
+  width: number
+  height: number
+  primary: boolean
+}
+
 type ConnectionState = 'connecting' | 'waiting' | 'connected' | 'disconnected' | 'error'
 
 export default function ViewerPage() {
@@ -23,7 +32,6 @@ export default function ViewerPage() {
   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)
@@ -31,46 +39,43 @@ export default function ViewerPage() {
   const [isFullscreen, setIsFullscreen] = useState(false)
   const [showToolbar, setShowToolbar] = useState(true)
   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 [monitors, setMonitors] = useState<MonitorInfo[]>([])
+  const [activeMonitor, setActiveMonitor] = useState(0)
+  const [showFileTransfer, setShowFileTransfer] = useState(false)
+  const [showChat, setShowChat] = useState(false)
+  const [lastAgentMsg, setLastAgentMsg] = useState<Record<string, unknown> | null>(null)
 
   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)
+  const connectionStateRef = useRef<ConnectionState>('connecting')
+
+  // Keep ref in sync so closures can read current value
+  useEffect(() => { connectionStateRef.current = connectionState }, [connectionState])
 
   // ── Load session info ──────────────────────────────────────────────────────
   useEffect(() => {
     fetch(`/api/sessions/${sessionId}`)
       .then((r) => r.json())
       .then((data) => {
-        if (!data.session) {
-          setError('Session not found')
-          setConnectionState('error')
-          return
-        }
-        if (data.session.endedAt) {
-          setError('This session has ended')
-          setConnectionState('disconnected')
-          return
-        }
+        if (!data.session) { setError('Session not found'); setConnectionState('error'); return }
+        if (data.session.endedAt) { setError('This session has ended'); setConnectionState('disconnected'); return }
         setSession(data.session)
       })
-      .catch(() => {
-        setError('Failed to load session')
-        setConnectionState('error')
-      })
+      .catch(() => { setError('Failed to load session'); setConnectionState('error') })
   }, [sessionId])
 
   // ── WebSocket connection ───────────────────────────────────────────────────
   const connectWS = useCallback(() => {
     if (!viewerToken) return
+    if (reconnectTimerRef.current) { clearTimeout(reconnectTimerRef.current); reconnectTimerRef.current = null }
 
-    const relayHost = process.env.NEXT_PUBLIC_RELAY_URL ||
-      `${window.location.hostname}:8765`
+    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}`
 
@@ -81,14 +86,10 @@ export default function ViewerPage() {
     ws.binaryType = 'arraybuffer'
     wsRef.current = ws
 
-    ws.onopen = () => {
-      setStatusMsg('Waiting for agent…')
-      setConnectionState('waiting')
-    }
+    ws.onopen = () => { setStatusMsg('Waiting for agent…'); setConnectionState('waiting') }
 
     ws.onmessage = (evt) => {
       if (evt.data instanceof ArrayBuffer) {
-        // Binary = JPEG frame
         renderFrame(evt.data)
       } else {
         try {
@@ -100,22 +101,18 @@ export default function ViewerPage() {
 
     ws.onclose = (evt) => {
       wsRef.current = null
-      if (connectionState !== 'disconnected' && evt.code !== 4001) {
+      if (connectionStateRef.current !== 'disconnected' && evt.code !== 4001) {
         setConnectionState('waiting')
         setStatusMsg('Connection lost — reconnecting…')
         reconnectTimerRef.current = setTimeout(connectWS, 3000)
       }
     }
 
-    ws.onerror = () => {
-      setStatusMsg('Relay connection failed')
-    }
-  }, [sessionId, viewerToken])
+    ws.onerror = () => { setStatusMsg('Relay connection failed') }
+  }, [sessionId, viewerToken]) // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
-    if (session && viewerToken) {
-      connectWS()
-    }
+    if (session && viewerToken) connectWS()
     return () => {
       wsRef.current?.close()
       if (reconnectTimerRef.current) clearTimeout(reconnectTimerRef.current)
@@ -136,6 +133,18 @@ export default function ViewerPage() {
         setConnectionState('waiting')
         setStatusMsg('Agent disconnected — waiting for reconnect…')
         break
+      case 'monitor_list':
+        setMonitors((msg.monitors as MonitorInfo[]) ?? [])
+        break
+      case 'clipboard_content':
+        // Write agent clipboard to browser clipboard
+        navigator.clipboard.writeText(msg.content as string).catch(() => {})
+        break
+      case 'file_chunk':
+      case 'file_list':
+      case 'chat_message':
+        setLastAgentMsg(msg)
+        break
     }
   }
 
@@ -143,7 +152,6 @@ export default function ViewerPage() {
   const renderFrame = useCallback((data: ArrayBuffer) => {
     const canvas = canvasRef.current
     if (!canvas) return
-
     const blob = new Blob([data], { type: 'image/jpeg' })
     const url = URL.createObjectURL(blob)
     const img = new Image()
@@ -156,8 +164,6 @@ export default function ViewerPage() {
       }
       ctx.drawImage(img, 0, 0)
       URL.revokeObjectURL(url)
-
-      // FPS counter
       const counter = fpsCounterRef.current
       counter.frames++
       const now = Date.now()
@@ -195,12 +201,7 @@ export default function ViewerPage() {
   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,
-    })
+    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>) => {
@@ -229,6 +230,30 @@ export default function ViewerPage() {
     return () => document.removeEventListener('keydown', handleKeyDown)
   }, [handleKeyDown])
 
+  // ── Toolbar actions ────────────────────────────────────────────────────────
+  const handleCtrlAltDel = useCallback(() => {
+    sendEvent({ type: 'exec_key_combo', keys: ['ctrl_l', 'alt_l', 'delete'] })
+  }, [sendEvent])
+
+  const handleClipboardPaste = useCallback(async () => {
+    try {
+      const text = await navigator.clipboard.readText()
+      sendEvent({ type: 'clipboard_paste', content: text })
+    } catch {
+      // clipboard permission denied — ignore
+    }
+  }, [sendEvent])
+
+  const handleMonitorChange = useCallback((index: number) => {
+    setActiveMonitor(index)
+    sendEvent({ type: 'set_monitor', index })
+  }, [sendEvent])
+
+  const handleQualityChange = useCallback((q: 'high' | 'medium' | 'low') => {
+    setQuality(q)
+    sendEvent({ type: 'set_quality', quality: q })
+  }, [sendEvent])
+
   // ── Fullscreen / toolbar auto-hide ─────────────────────────────────────────
   const toggleFullscreen = async () => {
     if (!containerRef.current) return
@@ -245,8 +270,10 @@ export default function ViewerPage() {
     if (isFullscreen && connectionState === 'connected') {
       const timer = setTimeout(() => setShowToolbar(false), 3000)
       return () => clearTimeout(timer)
+    } else {
+      setShowToolbar(true)
     }
-  }, [isFullscreen, connectionState, showToolbar])
+  }, [isFullscreen, connectionState])
 
   // ── End session ────────────────────────────────────────────────────────────
   const endSession = async () => {
@@ -282,61 +309,91 @@ export default function ViewerPage() {
       className="min-h-svh bg-black flex flex-col"
       onMouseMove={() => isFullscreen && setShowToolbar(true)}
     >
-      <div className={`transition-opacity duration-300 ${showToolbar ? 'opacity-100' : 'opacity-0'}`}>
+      <div className={`transition-opacity duration-300 ${showToolbar ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}>
         <ViewerToolbar
           session={session}
           connectionState={connectionState}
           isFullscreen={isFullscreen}
           quality={quality}
-          isMuted={isMuted}
+          isMuted={true}
+          monitors={monitors}
+          activeMonitor={activeMonitor}
           onToggleFullscreen={toggleFullscreen}
-          onQualityChange={(q) => {
-            setQuality(q)
-            sendEvent({ type: 'set_quality', quality: q })
-          }}
-          onToggleMute={() => setIsMuted(!isMuted)}
+          onQualityChange={handleQualityChange}
+          onToggleMute={() => {}}
           onDisconnect={endSession}
           onReconnect={connectWS}
+          onCtrlAltDel={handleCtrlAltDel}
+          onClipboardPaste={handleClipboardPaste}
+          onMonitorChange={handleMonitorChange}
+          onToggleFileTransfer={() => setShowFileTransfer(v => !v)}
+          onToggleChat={() => setShowChat(v => !v)}
+          onWakeOnLan={session?.machineId ? async () => {
+            await fetch('/api/machines/wol', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ machineId: session.machineId }),
+            })
+          } : undefined}
         />
       </div>
 
-      <div className="flex-1 flex items-center justify-center relative">
-        {(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">
-              {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">{statusMsg}</p>
-                <p className="text-sm text-muted-foreground">{session?.machineName}</p>
+      <div className="flex flex-1 overflow-hidden">
+        {/* Main canvas area */}
+        <div className="flex-1 flex items-center justify-center relative">
+          {(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">
+                {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">{statusMsg}</p>
+                  <p className="text-sm text-muted-foreground">{session?.machineName}</p>
+                </div>
               </div>
             </div>
-          </div>
-        )}
+          )}
 
-        <canvas
-          ref={canvasRef}
-          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) }}
-        />
+          <canvas
+            ref={canvasRef}
+            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) }}
+          />
 
-        {connectionState === 'disconnected' && (
-          <div className="text-center space-y-4">
-            <Monitor className="h-16 w-16 text-muted-foreground mx-auto" />
-            <div>
-              <p className="font-semibold">Session Ended</p>
-              <p className="text-sm text-muted-foreground">The remote connection has been closed</p>
+          {connectionState === 'disconnected' && (
+            <div className="text-center space-y-4">
+              <Monitor className="h-16 w-16 text-muted-foreground mx-auto" />
+              <div>
+                <p className="font-semibold">Session Ended</p>
+                <p className="text-sm text-muted-foreground">The remote connection has been closed</p>
+              </div>
+              <Button onClick={() => router.push('/dashboard')}>Return to Dashboard</Button>
             </div>
-            <Button onClick={() => router.push('/dashboard')}>Return to Dashboard</Button>
-          </div>
+          )}
+        </div>
+
+        {/* Sidebars */}
+        {showFileTransfer && connectionState === 'connected' && (
+          <FileTransferPanel
+            onClose={() => setShowFileTransfer(false)}
+            sendEvent={sendEvent}
+            incomingMessage={lastAgentMsg}
+          />
+        )}
+        {showChat && connectionState === 'connected' && (
+          <ChatPanel
+            onClose={() => setShowChat(false)}
+            sendEvent={sendEvent}
+            incomingMessage={lastAgentMsg}
+          />
         )}
       </div>