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/admin/page.tsx

@@ -13,7 +13,7 @@ import {
 } from '@/components/ui/card'
 import {
   UserPlus, Copy, Check, Trash2, Clock, CheckCircle2,
-  Loader2, KeyRound, Ban, Infinity, Hash,
+  Loader2, KeyRound, Ban, Infinity, Hash, FolderOpen, Plus,
 } from 'lucide-react'
 
 // ── Shared helper ─────────────────────────────────────────────────────────────
@@ -421,23 +421,135 @@ function EnrollmentSection() {
   )
 }
 
+// ── Groups ────────────────────────────────────────────────────────────────────
+
+interface Group {
+  id: string
+  name: string
+  description: string | null
+  created_at: string
+}
+
+function GroupsSection() {
+  const [groups, setGroups] = useState<Group[]>([])
+  const [name, setName] = useState('')
+  const [description, setDescription] = useState('')
+  const [isLoading, setIsLoading] = useState(true)
+  const [isCreating, setIsCreating] = useState(false)
+
+  const fetchGroups = useCallback(async () => {
+    const res = await fetch('/api/groups')
+    const data = await res.json()
+    if (res.ok) setGroups(data.groups ?? [])
+    setIsLoading(false)
+  }, [])
+
+  useEffect(() => { fetchGroups() }, [fetchGroups])
+
+  const handleCreate = async (e: React.SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    if (!name.trim()) return
+    setIsCreating(true)
+    await fetch('/api/groups', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name, description }),
+    })
+    setName(''); setDescription('')
+    await fetchGroups()
+    setIsCreating(false)
+  }
+
+  const handleDelete = async (id: string) => {
+    await fetch('/api/groups', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id }),
+    })
+    await fetchGroups()
+  }
+
+  return (
+    <div className="space-y-6">
+      <Card className="border-border/50">
+        <CardHeader>
+          <CardTitle className="text-base">Create Group</CardTitle>
+          <CardDescription>Groups let you organise machines and control which technicians have access to them.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleCreate} className="space-y-3">
+            <div>
+              <Label htmlFor="group-name">Name</Label>
+              <Input id="group-name" value={name} onChange={e => setName(e.target.value)} placeholder="e.g. Client — Acme Corp" className="mt-1" />
+            </div>
+            <div>
+              <Label htmlFor="group-desc">Description (optional)</Label>
+              <Input id="group-desc" value={description} onChange={e => setDescription(e.target.value)} placeholder="Optional description" className="mt-1" />
+            </div>
+            <Button type="submit" disabled={isCreating || !name.trim()}>
+              {isCreating ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Plus className="mr-2 h-4 w-4" />}
+              Create Group
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+
+      <Card className="border-border/50">
+        <CardHeader>
+          <CardTitle className="text-base">Groups</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {isLoading ? (
+            <div className="flex items-center gap-2 text-muted-foreground text-sm"><Loader2 className="h-4 w-4 animate-spin" /> Loading…</div>
+          ) : groups.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No groups yet. Create one above.</p>
+          ) : (
+            <div className="space-y-2">
+              {groups.map(g => (
+                <div key={g.id} className="flex items-center justify-between gap-4 p-3 rounded-lg border border-border/50">
+                  <div className="flex items-center gap-3">
+                    <FolderOpen className="h-4 w-4 text-muted-foreground" />
+                    <div>
+                      <p className="text-sm font-medium">{g.name}</p>
+                      {g.description && <p className="text-xs text-muted-foreground">{g.description}</p>}
+                    </div>
+                  </div>
+                  <Button variant="ghost" size="icon" className="h-7 w-7 text-destructive hover:text-destructive hover:bg-destructive/10" onClick={() => handleDelete(g.id)}>
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
 // ── Page ──────────────────────────────────────────────────────────────────────
 
-type Tab = 'invites' | 'enrollment'
+type Tab = 'invites' | 'enrollment' | 'groups'
 
 export default function AdminPage() {
   const [tab, setTab] = useState<Tab>('invites')
 
+  const tabLabels: Record<Tab, string> = {
+    invites: 'User invites',
+    enrollment: 'Agent enrollment',
+    groups: 'Groups',
+  }
+
   return (
     <div className="space-y-6 max-w-2xl">
       <div>
         <h2 className="text-2xl font-bold">Admin</h2>
-        <p className="text-muted-foreground">Manage users and agent deployment</p>
+        <p className="text-muted-foreground">Manage users, agent deployment, and machine groups</p>
       </div>
 
       {/* Tab bar */}
       <div className="flex gap-1 p-1 rounded-lg bg-muted/50 w-fit">
-        {(['invites', 'enrollment'] as Tab[]).map((t) => (
+        {(['invites', 'enrollment', 'groups'] as Tab[]).map((t) => (
           <button
             key={t}
             onClick={() => setTab(t)}
@@ -447,12 +559,14 @@ export default function AdminPage() {
                 : 'text-muted-foreground hover:text-foreground'
             }`}
           >
-            {t === 'invites' ? 'User invites' : 'Agent enrollment'}
+            {tabLabels[t]}
           </button>
         ))}
       </div>
 
-      {tab === 'invites' ? <InvitesSection /> : <EnrollmentSection />}
+      {tab === 'invites' && <InvitesSection />}
+      {tab === 'enrollment' && <EnrollmentSection />}
+      {tab === 'groups' && <GroupsSection />}
     </div>
   )
 }

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>
       )}