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/(dashboard)/dashboard/machines/page.tsx

@@ -1,32 +1,63 @@
 import { auth } from '@/auth'
 import { db } from '@/lib/db'
-import { machines } from '@/lib/db/schema'
-import { eq, desc } from 'drizzle-orm'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { machines, groups } from '@/lib/db/schema'
+import { eq, desc, or, ilike, sql } from 'drizzle-orm'
 import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
 import Link from 'next/link'
-import { Download, Laptop, Link2 } from 'lucide-react'
-import { formatDistanceToNow } from 'date-fns'
-import { MachineActions } from '@/components/dashboard/machine-actions'
+import { Download, Laptop } from 'lucide-react'
+import { MachineCard } from '@/components/dashboard/machine-card'
+import { MachinesFilter } from '@/components/dashboard/machines-filter'
 
-export default async function MachinesPage() {
+interface PageProps {
+  searchParams: Promise<{ q?: string; tag?: string; group?: string }>
+}
+
+export default async function MachinesPage({ searchParams }: PageProps) {
   const session = await auth()
-  const machineList = await db
+  const { q, tag, group } = await searchParams
+
+  // Build query conditions
+  const conditions = [eq(machines.userId, session!.user.id)]
+  if (group) conditions.push(eq(machines.groupId, group))
+
+  let machineList = await db
     .select()
     .from(machines)
-    .where(eq(machines.userId, session!.user.id))
+    .where(conditions.length === 1 ? conditions[0] : sql`${conditions.reduce((a, b) => sql`${a} AND ${b}`)}`)
     .orderBy(desc(machines.isOnline), desc(machines.lastSeen))
 
-  const onlineCount = machineList.filter((m) => m.isOnline).length
+  // Text search (filter in JS — avoids complex SQL for small datasets)
+  if (q) {
+    const lower = q.toLowerCase()
+    machineList = machineList.filter(m =>
+      m.name.toLowerCase().includes(lower) ||
+      (m.hostname ?? '').toLowerCase().includes(lower) ||
+      (m.os ?? '').toLowerCase().includes(lower) ||
+      (m.ipAddress ?? '').toLowerCase().includes(lower)
+    )
+  }
+
+  // Tag filter
+  if (tag) {
+    machineList = machineList.filter(m => m.tags?.includes(tag))
+  }
+
+  // Collect all unique tags across machines
+  const allTagsSet = new Set<string>()
+  machineList.forEach(m => (m.tags ?? []).forEach(t => allTagsSet.add(t)))
+  const allTags = [...allTagsSet].sort()
+
+  const onlineCount = machineList.filter(m => m.isOnline).length
+
+  // Fetch groups for group picker and machine card selects
+  const groupList = await db.select({ id: groups.id, name: groups.name }).from(groups).orderBy(groups.name)
 
   return (
     <div className="space-y-6">
       <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
         <div>
           <h2 className="text-2xl font-bold">Machines</h2>
-          <p className="text-muted-foreground">
-            {machineList.length} machine{machineList.length !== 1 ? 's' : ''} registered, {onlineCount} online
-          </p>
         </div>
         <Button asChild>
           <Link href="/download">
@@ -36,79 +67,42 @@ export default async function MachinesPage() {
         </Button>
       </div>
 
+      <MachinesFilter
+        allTags={allTags}
+        groups={groupList}
+        currentSearch={q ?? ''}
+        currentTag={tag ?? ''}
+        currentGroup={group ?? ''}
+        onlineCount={onlineCount}
+        totalCount={machineList.length}
+      />
+
       {machineList.length > 0 ? (
         <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
           {machineList.map((machine) => (
-            <Card key={machine.id} 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">
-                  <div className={`flex h-10 w-10 items-center justify-center rounded-lg ${machine.isOnline ? 'bg-green-500/10 text-green-500' : 'bg-muted text-muted-foreground'}`}>
-                    <Laptop className="h-5 w-5" />
-                  </div>
-                  <div>
-                    <CardTitle className="text-base">{machine.name}</CardTitle>
-                    <CardDescription className="text-xs">{machine.hostname || 'Unknown host'}</CardDescription>
-                  </div>
-                </div>
-                <MachineActions machine={machine} />
-              </CardHeader>
-              <CardContent className="space-y-3">
-                <div className="flex items-center justify-between text-sm">
-                  <span className="text-muted-foreground">Status</span>
-                  <span className={`flex items-center gap-1.5 ${machine.isOnline ? 'text-green-500' : 'text-muted-foreground'}`}>
-                    <span className={`h-2 w-2 rounded-full ${machine.isOnline ? 'bg-green-500' : 'bg-muted-foreground/30'}`} />
-                    {machine.isOnline ? 'Online' : 'Offline'}
-                  </span>
-                </div>
-                <div className="flex items-center justify-between text-sm">
-                  <span className="text-muted-foreground">OS</span>
-                  <span>{machine.os || 'Unknown'} {machine.osVersion || ''}</span>
-                </div>
-                <div className="flex items-center justify-between text-sm">
-                  <span className="text-muted-foreground">Last seen</span>
-                  <span>
-                    {machine.lastSeen
-                      ? formatDistanceToNow(new Date(machine.lastSeen), { addSuffix: true })
-                      : 'Never'}
-                  </span>
-                </div>
-                <div className="flex items-center justify-between text-sm">
-                  <span className="text-muted-foreground">Agent</span>
-                  <span className="font-mono text-xs">{machine.agentVersion || 'N/A'}</span>
-                </div>
-                <div className="pt-2">
-                  <Button className="w-full" size="sm" disabled={!machine.isOnline} asChild={machine.isOnline}>
-                    {machine.isOnline ? (
-                      <Link href={`/viewer/${machine.id}`}>
-                        <Link2 className="mr-2 h-4 w-4" />
-                        Connect
-                      </Link>
-                    ) : (
-                      <>
-                        <Link2 className="mr-2 h-4 w-4" />
-                        Connect
-                      </>
-                    )}
-                  </Button>
-                </div>
-              </CardContent>
-            </Card>
+            <MachineCard key={machine.id} machine={machine} groups={groupList} />
           ))}
         </div>
       ) : (
         <Card className="border-border/50">
           <CardContent className="flex flex-col items-center justify-center py-16">
             <Laptop className="h-12 w-12 text-muted-foreground/30 mb-4" />
-            <h3 className="text-lg font-semibold mb-2">No machines yet</h3>
+            <h3 className="text-lg font-semibold mb-2">
+              {q || tag || group ? 'No machines match your filter' : 'No machines yet'}
+            </h3>
             <p className="text-muted-foreground text-center mb-6 max-w-sm text-balance">
-              Download and install the RemoteLink agent on the machines you want to control remotely.
+              {q || tag || group
+                ? 'Try adjusting your search or filters.'
+                : 'Download and install the RemoteLink agent on the machines you want to control remotely.'}
             </p>
-            <Button asChild>
-              <Link href="/download">
-                <Download className="mr-2 h-4 w-4" />
-                Download Agent
-              </Link>
-            </Button>
+            {!(q || tag || group) && (
+              <Button asChild>
+                <Link href="/download">
+                  <Download className="mr-2 h-4 w-4" />
+                  Download Agent
+                </Link>
+              </Button>
+            )}
           </CardContent>
         </Card>
       )}