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>

components/dashboard/machine-card.tsx

@@ -0,0 +1,280 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { Card, CardContent, CardHeader } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { Badge } from '@/components/ui/badge'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import {
+  Laptop,
+  Link2,
+  MoreHorizontal,
+  Trash2,
+  Edit3,
+  Check,
+  X,
+  Tag,
+  StickyNote,
+} from 'lucide-react'
+import { formatDistanceToNow } from 'date-fns'
+import Link from 'next/link'
+
+interface Group {
+  id: string
+  name: string
+}
+
+interface Machine {
+  id: string
+  name: string
+  hostname: string | null
+  os: string | null
+  osVersion: string | null
+  agentVersion: string | null
+  lastSeen: Date | null
+  isOnline: boolean
+  tags: string[] | null
+  notes: string | null
+  groupId: string | null
+}
+
+interface MachineCardProps {
+  machine: Machine
+  groups: Group[]
+}
+
+const TAG_COLORS: Record<string, string> = {
+  server: 'bg-blue-500/10 text-blue-500 border-blue-500/20',
+  windows: 'bg-cyan-500/10 text-cyan-500 border-cyan-500/20',
+  linux: 'bg-orange-500/10 text-orange-500 border-orange-500/20',
+  mac: 'bg-gray-500/10 text-gray-400 border-gray-500/20',
+  workstation: 'bg-purple-500/10 text-purple-500 border-purple-500/20',
+  laptop: 'bg-green-500/10 text-green-500 border-green-500/20',
+}
+
+function tagColor(tag: string) {
+  return TAG_COLORS[tag.toLowerCase()] || 'bg-muted text-muted-foreground border-border/50'
+}
+
+export function MachineCard({ machine, groups }: MachineCardProps) {
+  const router = useRouter()
+  const [editing, setEditing] = useState(false)
+  const [name, setName] = useState(machine.name)
+  const [notes, setNotes] = useState(machine.notes ?? '')
+  const [tagInput, setTagInput] = useState('')
+  const [tags, setTags] = useState<string[]>(machine.tags ?? [])
+  const [groupId, setGroupId] = useState(machine.groupId ?? '')
+  const [saving, setSaving] = useState(false)
+  const [showNotes, setShowNotes] = useState(false)
+
+  const save = async () => {
+    setSaving(true)
+    await fetch(`/api/machines/${machine.id}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name, notes: notes || null, tags, groupId: groupId || null }),
+    })
+    setSaving(false)
+    setEditing(false)
+    router.refresh()
+  }
+
+  const cancel = () => {
+    setName(machine.name)
+    setNotes(machine.notes ?? '')
+    setTags(machine.tags ?? [])
+    setGroupId(machine.groupId ?? '')
+    setEditing(false)
+  }
+
+  const addTag = () => {
+    const t = tagInput.trim().toLowerCase().replace(/\s+/g, '-')
+    if (t && !tags.includes(t)) setTags([...tags, t])
+    setTagInput('')
+  }
+
+  const removeTag = (t: string) => setTags(tags.filter(x => x !== t))
+
+  const deleteMachine = async () => {
+    if (!confirm(`Delete "${machine.name}"? This cannot be undone.`)) return
+    await fetch(`/api/machines/${machine.id}`, { method: 'DELETE' })
+    router.refresh()
+  }
+
+  const currentGroup = groups.find(g => g.id === (groupId || machine.groupId))
+
+  return (
+    <Card className="border-border/50">
+      <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2">
+        <div className="flex items-center gap-3 min-w-0">
+          <div className={`flex h-10 w-10 items-center justify-center rounded-lg shrink-0 ${machine.isOnline ? 'bg-green-500/10 text-green-500' : 'bg-muted text-muted-foreground'}`}>
+            <Laptop className="h-5 w-5" />
+          </div>
+          <div className="min-w-0">
+            {editing ? (
+              <Input
+                value={name}
+                onChange={e => setName(e.target.value)}
+                className="h-7 text-sm font-semibold"
+                autoFocus
+              />
+            ) : (
+              <p className="text-sm font-semibold truncate">{machine.name}</p>
+            )}
+            <p className="text-xs text-muted-foreground truncate">{machine.hostname || 'Unknown host'}</p>
+          </div>
+        </div>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" className="h-7 w-7 shrink-0">
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => setEditing(true)}>
+              <Edit3 className="mr-2 h-4 w-4" />
+              Edit
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => setShowNotes(v => !v)}>
+              <StickyNote className="mr-2 h-4 w-4" />
+              {showNotes ? 'Hide notes' : 'Show notes'}
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={deleteMachine} className="text-destructive">
+              <Trash2 className="mr-2 h-4 w-4" />
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </CardHeader>
+
+      <CardContent className="space-y-3">
+        {/* Tags */}
+        <div className="flex flex-wrap gap-1 min-h-5">
+          {tags.map(t => (
+            <Badge
+              key={t}
+              variant="outline"
+              className={`text-xs py-0 h-5 ${tagColor(t)}`}
+            >
+              {t}
+              {editing && (
+                <button onClick={() => removeTag(t)} className="ml-1 hover:text-destructive">
+                  <X className="h-2.5 w-2.5" />
+                </button>
+              )}
+            </Badge>
+          ))}
+          {editing && (
+            <div className="flex gap-1">
+              <Input
+                value={tagInput}
+                onChange={e => setTagInput(e.target.value)}
+                onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); addTag() } }}
+                placeholder="Add tag…"
+                className="h-5 text-xs py-0 px-1.5 w-20"
+              />
+              <Button size="sm" variant="ghost" className="h-5 px-1" onClick={addTag}>
+                <Tag className="h-3 w-3" />
+              </Button>
+            </div>
+          )}
+        </div>
+
+        {/* Group */}
+        {editing ? (
+          <div>
+            <label className="text-xs text-muted-foreground">Group</label>
+            <select
+              value={groupId}
+              onChange={e => setGroupId(e.target.value)}
+              className="mt-0.5 w-full text-xs rounded border border-border bg-background px-2 py-1"
+            >
+              <option value="">No group</option>
+              {groups.map(g => (
+                <option key={g.id} value={g.id}>{g.name}</option>
+              ))}
+            </select>
+          </div>
+        ) : currentGroup ? (
+          <p className="text-xs text-muted-foreground">Group: {currentGroup.name}</p>
+        ) : null}
+
+        {/* Stats */}
+        <div className="grid grid-cols-2 gap-1 text-xs">
+          <div className="text-muted-foreground">Status</div>
+          <div className={`flex items-center gap-1.5 ${machine.isOnline ? 'text-green-500' : 'text-muted-foreground'}`}>
+            <span className={`h-1.5 w-1.5 rounded-full ${machine.isOnline ? 'bg-green-500' : 'bg-muted-foreground/30'}`} />
+            {machine.isOnline ? 'Online' : 'Offline'}
+          </div>
+          <div className="text-muted-foreground">OS</div>
+          <div className="truncate">{machine.os || 'Unknown'} {machine.osVersion || ''}</div>
+          <div className="text-muted-foreground">Last seen</div>
+          <div className="truncate">
+            {machine.lastSeen ? formatDistanceToNow(new Date(machine.lastSeen), { addSuffix: true }) : 'Never'}
+          </div>
+          <div className="text-muted-foreground">Agent</div>
+          <div className="font-mono">{machine.agentVersion || 'N/A'}</div>
+        </div>
+
+        {/* Notes */}
+        {(showNotes || editing) && (
+          <div>
+            {editing ? (
+              <Textarea
+                value={notes}
+                onChange={e => setNotes(e.target.value)}
+                placeholder="Add notes about this machine…"
+                className="text-xs min-h-16 resize-none"
+              />
+            ) : notes ? (
+              <p className="text-xs text-muted-foreground bg-muted/30 rounded p-2">{notes}</p>
+            ) : (
+              <p className="text-xs text-muted-foreground italic">No notes</p>
+            )}
+          </div>
+        )}
+
+        {/* Edit controls */}
+        {editing && (
+          <div className="flex gap-2">
+            <Button size="sm" className="flex-1 h-7 text-xs" onClick={save} disabled={saving}>
+              <Check className="mr-1 h-3 w-3" />
+              {saving ? 'Saving…' : 'Save'}
+            </Button>
+            <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={cancel}>
+              Cancel
+            </Button>
+          </div>
+        )}
+
+        {/* Connect */}
+        {!editing && (
+          <Button className="w-full" size="sm" disabled={!machine.isOnline} asChild={machine.isOnline}>
+            {machine.isOnline ? (
+              <Link href={`/dashboard/connect?machineId=${machine.id}`}>
+                <Link2 className="mr-2 h-4 w-4" />
+                Connect
+              </Link>
+            ) : (
+              <>
+                <Link2 className="mr-2 h-4 w-4" />
+                Connect
+              </>
+            )}
+          </Button>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

components/dashboard/machines-filter.tsx

@@ -0,0 +1,108 @@
+'use client'
+
+import { useRouter, usePathname, useSearchParams } from 'next/navigation'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Search, X } from 'lucide-react'
+import { useTransition } from 'react'
+
+interface Group {
+  id: string
+  name: string
+}
+
+interface MachinesFilterProps {
+  allTags: string[]
+  groups: Group[]
+  currentSearch: string
+  currentTag: string
+  currentGroup: string
+  onlineCount: number
+  totalCount: number
+}
+
+export function MachinesFilter({
+  allTags,
+  groups,
+  currentSearch,
+  currentTag,
+  currentGroup,
+  onlineCount,
+  totalCount,
+}: MachinesFilterProps) {
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const [, startTransition] = useTransition()
+
+  const update = (key: string, value: string) => {
+    const params = new URLSearchParams(searchParams.toString())
+    if (value) params.set(key, value)
+    else params.delete(key)
+    startTransition(() => router.push(`${pathname}?${params.toString()}`))
+  }
+
+  const clearAll = () => {
+    startTransition(() => router.push(pathname))
+  }
+
+  const hasFilters = currentSearch || currentTag || currentGroup
+
+  return (
+    <div className="space-y-3">
+      <div className="flex flex-col sm:flex-row gap-2">
+        <div className="relative flex-1">
+          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search machines…"
+            defaultValue={currentSearch}
+            onChange={e => update('q', e.target.value)}
+            className="pl-8"
+          />
+        </div>
+
+        {groups.length > 0 && (
+          <select
+            value={currentGroup}
+            onChange={e => update('group', e.target.value)}
+            className="rounded-md border border-input bg-background px-3 py-2 text-sm"
+          >
+            <option value="">All groups</option>
+            {groups.map(g => (
+              <option key={g.id} value={g.id}>{g.name}</option>
+            ))}
+          </select>
+        )}
+
+        <div className="flex items-center gap-2 text-sm text-muted-foreground whitespace-nowrap">
+          <span className="text-green-500 font-medium">{onlineCount} online</span>
+          <span>/ {totalCount} total</span>
+        </div>
+      </div>
+
+      {/* Tag filter pills */}
+      {allTags.length > 0 && (
+        <div className="flex flex-wrap gap-1.5 items-center">
+          <span className="text-xs text-muted-foreground">Filter:</span>
+          {allTags.map(tag => (
+            <Badge
+              key={tag}
+              variant={currentTag === tag ? 'default' : 'outline'}
+              className="cursor-pointer text-xs h-5 py-0"
+              onClick={() => update('tag', currentTag === tag ? '' : tag)}
+            >
+              {tag}
+            </Badge>
+          ))}
+          {hasFilters && (
+            <Button variant="ghost" size="sm" className="h-5 px-1.5 text-xs" onClick={clearAll}>
+              <X className="h-3 w-3 mr-1" />
+              Clear
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

components/viewer/chat-panel.tsx

@@ -0,0 +1,105 @@
+'use client'
+
+import { useState, useEffect, useRef } from 'react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { X, Send } from 'lucide-react'
+
+interface ChatMessage {
+  id: string
+  from: 'technician' | 'agent'
+  text: string
+  timestamp: Date
+}
+
+interface ChatPanelProps {
+  onClose: () => void
+  sendEvent: (event: Record<string, unknown>) => void
+  incomingMessage: Record<string, unknown> | null
+}
+
+export function ChatPanel({ onClose, sendEvent, incomingMessage }: ChatPanelProps) {
+  const [messages, setMessages] = useState<ChatMessage[]>([])
+  const [input, setInput] = useState('')
+  const scrollRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!incomingMessage) return
+    if (incomingMessage.type === 'chat_message') {
+      setMessages(prev => [...prev, {
+        id: crypto.randomUUID(),
+        from: 'agent',
+        text: incomingMessage.text as string,
+        timestamp: new Date(),
+      }])
+    }
+  }, [incomingMessage])
+
+  useEffect(() => {
+    // Auto-scroll to bottom on new messages
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight
+    }
+  }, [messages])
+
+  const send = () => {
+    const text = input.trim()
+    if (!text) return
+    sendEvent({ type: 'chat_message', text })
+    setMessages(prev => [...prev, {
+      id: crypto.randomUUID(),
+      from: 'technician',
+      text,
+      timestamp: new Date(),
+    }])
+    setInput('')
+  }
+
+  const fmt = (d: Date) =>
+    d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+
+  return (
+    <div className="w-72 border-l border-border/50 bg-card flex flex-col h-full">
+      <div className="flex items-center justify-between p-3 border-b border-border/50">
+        <span className="text-sm font-medium">Session Chat</span>
+        <Button variant="ghost" size="icon" className="h-6 w-6" onClick={onClose}>
+          <X className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+
+      <div ref={scrollRef} className="flex-1 overflow-y-auto p-3 space-y-3">
+        {messages.length === 0 && (
+          <p className="text-xs text-muted-foreground text-center pt-8">
+            Messages sent here are forwarded to the remote machine.
+          </p>
+        )}
+        {messages.map((m) => (
+          <div key={m.id} className={`flex flex-col gap-0.5 ${m.from === 'technician' ? 'items-end' : 'items-start'}`}>
+            <div className={`max-w-[85%] rounded-lg px-3 py-1.5 text-xs ${
+              m.from === 'technician'
+                ? 'bg-primary text-primary-foreground'
+                : 'bg-muted text-foreground'
+            }`}>
+              {m.text}
+            </div>
+            <span className="text-[10px] text-muted-foreground">{fmt(m.timestamp)}</span>
+          </div>
+        ))}
+      </div>
+
+      <div className="p-2 border-t border-border/50 flex gap-1.5">
+        <Input
+          value={input}
+          onChange={e => setInput(e.target.value)}
+          onKeyDown={e => { if (e.key === 'Enter') send() }}
+          placeholder="Type a message…"
+          className="h-8 text-xs"
+        />
+        <Button size="icon" className="h-8 w-8 shrink-0" onClick={send} disabled={!input.trim()}>
+          <Send className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+    </div>
+  )
+}

components/viewer/file-transfer-panel.tsx

@@ -0,0 +1,296 @@
+'use client'
+
+import { useState, useRef, useCallback, useEffect } from 'react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import {
+  Folder,
+  File,
+  Upload,
+  Download,
+  ChevronRight,
+  ArrowLeft,
+  X,
+  CheckCircle2,
+  AlertCircle,
+  Loader2,
+} from 'lucide-react'
+
+interface FileEntry {
+  name: string
+  is_dir: boolean
+  size: number
+  path: string
+}
+
+interface TransferItem {
+  id: string
+  name: string
+  direction: 'upload' | 'download'
+  status: 'pending' | 'transferring' | 'done' | 'error'
+  progress: number
+  error?: string
+}
+
+interface FileTransferPanelProps {
+  onClose: () => void
+  sendEvent: (event: Record<string, unknown>) => void
+  incomingMessage: Record<string, unknown> | null
+}
+
+export function FileTransferPanel({ onClose, sendEvent, incomingMessage }: FileTransferPanelProps) {
+  const [remotePath, setRemotePath] = useState('~')
+  const [remoteEntries, setRemoteEntries] = useState<FileEntry[]>([])
+  const [remoteParent, setRemoteParent] = useState<string | null>(null)
+  const [transfers, setTransfers] = useState<TransferItem[]>([])
+  const [isDragOver, setIsDragOver] = useState(false)
+  const [isLoadingDir, setIsLoadingDir] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  // Download accumulation: transfer_id → {chunks: string[], filename: string, size: number}
+  const downloadBuffers = useRef<Record<string, {chunks: string[], filename: string, size: number}>>({})
+
+  const browseRemote = useCallback((path: string) => {
+    setIsLoadingDir(true)
+    sendEvent({ type: 'list_files', path })
+  }, [sendEvent])
+
+  useEffect(() => {
+    browseRemote('~')
+  }, [browseRemote])
+
+  // Handle incoming relay messages
+  useEffect(() => {
+    if (!incomingMessage) return
+    const msg = incomingMessage
+
+    if (msg.type === 'file_list') {
+      setIsLoadingDir(false)
+      setRemotePath(msg.path as string)
+      setRemoteParent((msg.parent as string) ?? null)
+      setRemoteEntries((msg.entries as FileEntry[]) ?? [])
+    }
+
+    if (msg.type === 'file_chunk') {
+      const tid = msg.transfer_id as string || ''
+      const done = msg.done as boolean
+
+      if (msg.upload_complete) {
+        setTransfers(prev => prev.map(t =>
+          t.id === tid ? { ...t, status: 'done', progress: 100 } : t
+        ))
+        return
+      }
+
+      if (msg.error) {
+        setTransfers(prev => prev.map(t =>
+          t.id === tid ? { ...t, status: 'error', error: msg.error as string } : t
+        ))
+        return
+      }
+
+      // Download chunks
+      const filename = msg.filename as string || 'download'
+      const totalSize = msg.size as number || 0
+      const chunk = msg.chunk as string || ''
+
+      if (!downloadBuffers.current[tid]) {
+        downloadBuffers.current[tid] = { chunks: [], filename, size: totalSize }
+      }
+      if (chunk) {
+        downloadBuffers.current[tid].chunks.push(chunk)
+        const received = downloadBuffers.current[tid].chunks.reduce((sum, c) => sum + c.length * 0.75, 0)
+        const progress = totalSize > 0 ? Math.min(99, Math.round((received / totalSize) * 100)) : 50
+        setTransfers(prev => prev.map(t =>
+          t.id === tid ? { ...t, status: 'transferring', progress } : t
+        ))
+      }
+
+      if (done) {
+        const buf = downloadBuffers.current[tid]
+        if (buf) {
+          delete downloadBuffers.current[tid]
+          // Decode base64 chunks and create blob
+          const binaryChunks = buf.chunks.map(c => {
+            const binary = atob(c)
+            const bytes = new Uint8Array(binary.length)
+            for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i)
+            return bytes
+          })
+          const blob = new Blob(binaryChunks)
+          const url = URL.createObjectURL(blob)
+          const a = document.createElement('a')
+          a.href = url
+          a.download = buf.filename
+          a.click()
+          URL.revokeObjectURL(url)
+          setTransfers(prev => prev.map(t =>
+            t.id === tid ? { ...t, status: 'done', progress: 100 } : t
+          ))
+        }
+      }
+    }
+  }, [incomingMessage])
+
+  const uploadFiles = useCallback(async (files: FileList | File[]) => {
+    const fileArr = Array.from(files)
+    for (const file of fileArr) {
+      const tid = crypto.randomUUID()
+      setTransfers(prev => [{ id: tid, name: file.name, direction: 'upload', status: 'pending', progress: 0 }, ...prev])
+
+      const destPath = remotePath === '~' ? '~/Downloads' : remotePath
+      sendEvent({ type: 'file_upload_start', transfer_id: tid, filename: file.name, dest_path: destPath })
+
+      const CHUNK = 65536
+      const reader = file.stream().getReader()
+      let seq = 0
+      let sent = 0
+      const total = file.size
+
+      const pump = async () => {
+        while (true) {
+          const { done, value } = await reader.read()
+          if (done) break
+          // Convert to base64
+          const b64 = btoa(String.fromCharCode(...value))
+          sendEvent({ type: 'file_upload_chunk', transfer_id: tid, seq: seq++, chunk: b64 })
+          sent += value.length
+          const progress = Math.min(99, Math.round((sent / total) * 100))
+          setTransfers(prev => prev.map(t => t.id === tid ? { ...t, status: 'transferring', progress } : t))
+        }
+      }
+      await pump()
+      sendEvent({ type: 'file_upload_end', transfer_id: tid })
+    }
+  }, [sendEvent, remotePath])
+
+  const downloadFile = useCallback((entry: FileEntry) => {
+    const tid = crypto.randomUUID()
+    setTransfers(prev => [{ id: tid, name: entry.name, direction: 'download', status: 'pending', progress: 0 }, ...prev])
+    downloadBuffers.current[tid] = { chunks: [], filename: entry.name, size: entry.size }
+    sendEvent({ type: 'file_download', path: entry.path, transfer_id: tid })
+  }, [sendEvent])
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    setIsDragOver(false)
+    if (e.dataTransfer.files.length > 0) uploadFiles(e.dataTransfer.files)
+  }, [uploadFiles])
+
+  const formatSize = (bytes: number) => {
+    if (bytes < 1024) return `${bytes} B`
+    if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)} KB`
+    return `${(bytes / 1048576).toFixed(1)} MB`
+  }
+
+  return (
+    <div className="w-80 border-l border-border/50 bg-card flex flex-col h-full">
+      {/* Header */}
+      <div className="flex items-center justify-between p-3 border-b border-border/50">
+        <span className="text-sm font-medium">File Transfer</span>
+        <Button variant="ghost" size="icon" className="h-6 w-6" onClick={onClose}>
+          <X className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+
+      {/* Remote file browser */}
+      <div className="flex flex-col flex-1 min-h-0">
+        <div className="p-2 border-b border-border/50">
+          <div className="flex items-center gap-1 mb-1.5">
+            {remoteParent && (
+              <Button variant="ghost" size="icon" className="h-6 w-6 shrink-0" onClick={() => browseRemote(remoteParent)}>
+                <ArrowLeft className="h-3.5 w-3.5" />
+              </Button>
+            )}
+            <span className="text-xs text-muted-foreground truncate flex-1 font-mono">{remotePath}</span>
+            {isLoadingDir && <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground shrink-0" />}
+          </div>
+        </div>
+
+        <ScrollArea className="flex-1">
+          <div className="p-1">
+            {remoteEntries.map((entry) => (
+              <div
+                key={entry.path}
+                className="flex items-center gap-2 px-2 py-1 rounded hover:bg-muted/50 cursor-pointer group"
+                onClick={() => entry.is_dir ? browseRemote(entry.path) : undefined}
+              >
+                {entry.is_dir
+                  ? <Folder className="h-4 w-4 text-blue-400 shrink-0" />
+                  : <File className="h-4 w-4 text-muted-foreground shrink-0" />
+                }
+                <span className="text-xs truncate flex-1">{entry.name}</span>
+                {!entry.is_dir && (
+                  <>
+                    <span className="text-xs text-muted-foreground shrink-0">{formatSize(entry.size)}</span>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-5 w-5 opacity-0 group-hover:opacity-100 shrink-0"
+                      onClick={(e) => { e.stopPropagation(); downloadFile(entry) }}
+                      title="Download"
+                    >
+                      <Download className="h-3 w-3" />
+                    </Button>
+                  </>
+                )}
+                {entry.is_dir && <ChevronRight className="h-3.5 w-3.5 text-muted-foreground shrink-0" />}
+              </div>
+            ))}
+            {remoteEntries.length === 0 && !isLoadingDir && (
+              <p className="text-xs text-muted-foreground text-center py-4">Empty directory</p>
+            )}
+          </div>
+        </ScrollArea>
+
+        {/* Upload drop zone */}
+        <div
+          className={`m-2 border-2 border-dashed rounded-lg p-3 text-center transition-colors cursor-pointer ${
+            isDragOver ? 'border-primary bg-primary/5' : 'border-border/50 hover:border-border'
+          }`}
+          onDragOver={(e) => { e.preventDefault(); setIsDragOver(true) }}
+          onDragLeave={() => setIsDragOver(false)}
+          onDrop={handleDrop}
+          onClick={() => fileInputRef.current?.click()}
+        >
+          <Upload className="h-4 w-4 mx-auto mb-1 text-muted-foreground" />
+          <p className="text-xs text-muted-foreground">Drop files to upload</p>
+          <p className="text-xs text-muted-foreground">or click to browse</p>
+          <input
+            ref={fileInputRef}
+            type="file"
+            multiple
+            className="hidden"
+            onChange={(e) => e.target.files && uploadFiles(e.target.files)}
+          />
+        </div>
+      </div>
+
+      {/* Transfer queue */}
+      {transfers.length > 0 && (
+        <div className="border-t border-border/50">
+          <div className="p-2">
+            <p className="text-xs font-medium text-muted-foreground mb-1">Transfers</p>
+            <div className="space-y-1 max-h-36 overflow-y-auto">
+              {transfers.map((t) => (
+                <div key={t.id} className="flex items-center gap-2 text-xs">
+                  {t.direction === 'upload'
+                    ? <Upload className="h-3 w-3 text-muted-foreground shrink-0" />
+                    : <Download className="h-3 w-3 text-muted-foreground shrink-0" />
+                  }
+                  <span className="truncate flex-1">{t.name}</span>
+                  {t.status === 'done' && <CheckCircle2 className="h-3 w-3 text-green-500 shrink-0" />}
+                  {t.status === 'error' && <AlertCircle className="h-3 w-3 text-destructive shrink-0" />}
+                  {t.status === 'transferring' && (
+                    <span className="shrink-0 text-muted-foreground">{t.progress}%</span>
+                  )}
+                  {t.status === 'pending' && <Loader2 className="h-3 w-3 animate-spin shrink-0" />}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

components/viewer/toolbar.tsx

@@ -9,32 +9,41 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { 
-  Maximize2, 
-  Minimize2, 
-  Monitor, 
-  Volume2, 
-  VolumeX,
-  Settings,
-  X,
-  RefreshCw,
+import {
+  Maximize2,
+  Minimize2,
+  Monitor,
   Signal,
   SignalLow,
   SignalMedium,
   Keyboard,
   MousePointer2,
   Loader2,
-  CheckCircle2
+  CheckCircle2,
+  RefreshCw,
+  X,
+  Clipboard,
+  FolderOpen,
+  ChevronDown,
+  MessageSquare,
+  Zap,
 } from 'lucide-react'
 
+interface MonitorInfo {
+  index: number
+  width: number
+  height: number
+  primary: boolean
+}
+
 interface Session {
   id: string
-  machine_id: string | null
-  machine_name: string | null
-  started_at: string
+  machineId: string | null
+  machineName: string | null
+  startedAt: string
 }
 
-type ConnectionState = 'connecting' | 'connected' | 'disconnected' | 'error'
+type ConnectionState = 'connecting' | 'waiting' | 'connected' | 'disconnected' | 'error'
 
 interface ViewerToolbarProps {
   session: Session | null
@@ -42,11 +51,20 @@ interface ViewerToolbarProps {
   isFullscreen: boolean
   quality: 'high' | 'medium' | 'low'
   isMuted: boolean
+  monitors: MonitorInfo[]
+  activeMonitor: number
   onToggleFullscreen: () => void
   onQualityChange: (quality: 'high' | 'medium' | 'low') => void
   onToggleMute: () => void
   onDisconnect: () => void
   onReconnect: () => void
+  onCtrlAltDel: () => void
+  onClipboardPaste: () => void
+  onMonitorChange: (index: number) => void
+  onToggleFileTransfer: () => void
+  onToggleChat: () => void
+  onWakeOnLan?: () => void
+  machineName?: string
 }
 
 export function ViewerToolbar({
@@ -54,13 +72,21 @@ export function ViewerToolbar({
   connectionState,
   isFullscreen,
   quality,
-  isMuted,
+  monitors,
+  activeMonitor,
   onToggleFullscreen,
   onQualityChange,
-  onToggleMute,
   onDisconnect,
   onReconnect,
+  onCtrlAltDel,
+  onClipboardPaste,
+  onMonitorChange,
+  onToggleFileTransfer,
+  onToggleChat,
+  onWakeOnLan,
 }: ViewerToolbarProps) {
+  const connected = connectionState === 'connected'
+
   const getQualityIcon = () => {
     switch (quality) {
       case 'high': return Signal
@@ -73,28 +99,35 @@ export function ViewerToolbar({
     switch (connectionState) {
       case 'connecting':
         return (
-          <span className="flex items-center gap-2 text-yellow-500">
+          <span className="flex items-center gap-1.5 text-yellow-500 text-xs">
             <Loader2 className="h-3 w-3 animate-spin" />
             Connecting
           </span>
         )
+      case 'waiting':
+        return (
+          <span className="flex items-center gap-1.5 text-yellow-500 text-xs">
+            <span className="h-2 w-2 rounded-full bg-yellow-500 animate-pulse" />
+            Waiting for agent
+          </span>
+        )
       case 'connected':
         return (
-          <span className="flex items-center gap-2 text-green-500">
+          <span className="flex items-center gap-1.5 text-green-500 text-xs">
             <span className="h-2 w-2 rounded-full bg-green-500" />
             Connected
           </span>
         )
       case 'disconnected':
         return (
-          <span className="flex items-center gap-2 text-muted-foreground">
+          <span className="flex items-center gap-1.5 text-muted-foreground text-xs">
             <span className="h-2 w-2 rounded-full bg-muted-foreground" />
             Disconnected
           </span>
         )
       case 'error':
         return (
-          <span className="flex items-center gap-2 text-destructive">
+          <span className="flex items-center gap-1.5 text-destructive text-xs">
             <span className="h-2 w-2 rounded-full bg-destructive" />
             Error
           </span>
@@ -105,32 +138,108 @@ export function ViewerToolbar({
   const QualityIcon = getQualityIcon()
 
   return (
-    <div className="flex items-center justify-between h-12 px-4 bg-card/95 backdrop-blur border-b border-border/50">
-      {/* Left section */}
-      <div className="flex items-center gap-4">
-        <div className="flex items-center gap-2">
-          <Monitor className="h-4 w-4 text-primary" />
-          <span className="font-medium text-sm">
-            {session?.machine_name || 'Remote Machine'}
+    <div className="flex items-center justify-between h-12 px-4 bg-card/95 backdrop-blur border-b border-border/50 gap-2">
+      {/* Left: machine name + status */}
+      <div className="flex items-center gap-4 min-w-0">
+        <div className="flex items-center gap-2 min-w-0">
+          <Monitor className="h-4 w-4 text-primary shrink-0" />
+          <span className="font-medium text-sm truncate">
+            {session?.machineName || 'Remote Machine'}
           </span>
         </div>
-        <div className="text-sm">
-          {getConnectionBadge()}
-        </div>
+        <div className="shrink-0">{getConnectionBadge()}</div>
       </div>
 
-      {/* Right section */}
-      <div className="flex items-center gap-1">
+      {/* Right: controls */}
+      <div className="flex items-center gap-1 shrink-0">
         {/* Input indicators */}
-        <div className="flex items-center gap-2 px-3 border-r border-border/50 mr-2">
-          <MousePointer2 className="h-4 w-4 text-muted-foreground" />
-          <Keyboard className="h-4 w-4 text-muted-foreground" />
+        <div className="flex items-center gap-1.5 px-2 border-r border-border/50 mr-1">
+          <MousePointer2 className="h-3.5 w-3.5 text-muted-foreground" />
+          <Keyboard className="h-3.5 w-3.5 text-muted-foreground" />
         </div>
 
+        {/* Monitor picker (only shown when multiple monitors) */}
+        {connected && monitors.length > 1 && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="sm" className="h-8 gap-1 px-2 text-xs">
+                <Monitor className="h-3.5 w-3.5" />
+                {monitors[activeMonitor]
+                  ? `${monitors[activeMonitor].width}×${monitors[activeMonitor].height}`
+                  : 'Monitor'}
+                <ChevronDown className="h-3 w-3 opacity-50" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuLabel>Select Monitor</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              {monitors.map((m) => (
+                <DropdownMenuItem key={m.index} onClick={() => onMonitorChange(m.index)}>
+                  <Monitor className="mr-2 h-4 w-4" />
+                  {m.primary ? 'Primary' : `Display ${m.index + 1}`}
+                  <span className="ml-auto text-xs text-muted-foreground">{m.width}×{m.height}</span>
+                  {activeMonitor === m.index && <CheckCircle2 className="ml-2 h-4 w-4 text-primary" />}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+
+        {/* Ctrl+Alt+Del */}
+        {connected && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-8 px-2 text-xs font-mono"
+            onClick={onCtrlAltDel}
+            title="Send Ctrl+Alt+Del"
+          >
+            CAD
+          </Button>
+        )}
+
+        {/* Clipboard paste */}
+        {connected && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8"
+            onClick={onClipboardPaste}
+            title="Paste clipboard to remote"
+          >
+            <Clipboard className="h-4 w-4" />
+            <span className="sr-only">Paste clipboard</span>
+          </Button>
+        )}
+
+        {/* File transfer */}
+        {connected && (
+          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onToggleFileTransfer} title="File transfer">
+            <FolderOpen className="h-4 w-4" />
+            <span className="sr-only">File transfer</span>
+          </Button>
+        )}
+
+        {/* Chat */}
+        {connected && (
+          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onToggleChat} title="Session chat">
+            <MessageSquare className="h-4 w-4" />
+            <span className="sr-only">Chat</span>
+          </Button>
+        )}
+
+        {/* Wake-on-LAN (shown when agent is offline) */}
+        {!connected && onWakeOnLan && (
+          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onWakeOnLan} title="Wake on LAN">
+            <Zap className="h-4 w-4 text-yellow-500" />
+            <span className="sr-only">Wake on LAN</span>
+          </Button>
+        )}
+
         {/* Quality selector */}
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon" className="h-8 w-8">
+            <Button variant="ghost" size="icon" className="h-8 w-8" title="Stream quality">
               <QualityIcon className="h-4 w-4" />
               <span className="sr-only">Quality</span>
             </Button>
@@ -156,43 +265,27 @@ export function ViewerToolbar({
           </DropdownMenuContent>
         </DropdownMenu>
 
-        {/* Mute toggle */}
-        <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onToggleMute}>
-          {isMuted ? (
-            <VolumeX className="h-4 w-4" />
-          ) : (
-            <Volume2 className="h-4 w-4" />
-          )}
-          <span className="sr-only">{isMuted ? 'Unmute' : 'Mute'}</span>
-        </Button>
-
         {/* Fullscreen toggle */}
-        <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onToggleFullscreen}>
-          {isFullscreen ? (
-            <Minimize2 className="h-4 w-4" />
-          ) : (
-            <Maximize2 className="h-4 w-4" />
-          )}
-          <span className="sr-only">{isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}</span>
+        <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onToggleFullscreen} title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}>
+          {isFullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
         </Button>
 
         {/* Reconnect */}
-        {connectionState === 'disconnected' && (
-          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onReconnect}>
+        {(connectionState === 'disconnected' || connectionState === 'waiting') && (
+          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onReconnect} title="Reconnect">
             <RefreshCw className="h-4 w-4" />
-            <span className="sr-only">Reconnect</span>
           </Button>
         )}
 
         {/* Disconnect */}
-        <Button 
-          variant="ghost" 
-          size="icon" 
+        <Button
+          variant="ghost"
+          size="icon"
           className="h-8 w-8 text-destructive hover:text-destructive hover:bg-destructive/10"
           onClick={onDisconnect}
+          title="End session"
         >
           <X className="h-4 w-4" />
-          <span className="sr-only">Disconnect</span>
         </Button>
       </div>
     </div>