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>

app/(dashboard)/dashboard/admin/page.tsx

@@ -11,7 +11,34 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card'
-import { UserPlus, Copy, Check, Trash2, Clock, CheckCircle2, Loader2 } from 'lucide-react'
+import {
+  UserPlus, Copy, Check, Trash2, Clock, CheckCircle2,
+  Loader2, KeyRound, Ban, Infinity, Hash,
+} from 'lucide-react'
+
+// ── Shared helper ─────────────────────────────────────────────────────────────
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false)
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="h-7 px-2"
+      onClick={async () => {
+        await navigator.clipboard.writeText(text)
+        setCopied(true)
+        setTimeout(() => setCopied(false), 2000)
+      }}
+    >
+      {copied
+        ? <Check className="h-3.5 w-3.5 text-green-500" />
+        : <Copy className="h-3.5 w-3.5" />}
+    </Button>
+  )
+}
+
+// ── Invites ───────────────────────────────────────────────────────────────────
 
 interface Invite {
   id: string
@@ -28,30 +55,14 @@ function inviteStatus(invite: Invite): 'used' | 'expired' | 'pending' {
   return 'pending'
 }
 
-function CopyButton({ text }: { text: string }) {
-  const [copied, setCopied] = useState(false)
-
-  const handleCopy = async () => {
-    await navigator.clipboard.writeText(text)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
-  }
-
-  return (
-    <Button variant="ghost" size="sm" onClick={handleCopy} className="h-7 px-2">
-      {copied ? <Check className="h-3.5 w-3.5 text-green-500" /> : <Copy className="h-3.5 w-3.5" />}
-    </Button>
-  )
-}
-
-export default function AdminPage() {
+function InvitesSection() {
   const [invites, setInvites] = useState<Invite[]>([])
   const [email, setEmail] = useState('')
   const [isLoading, setIsLoading] = useState(true)
   const [isCreating, setIsCreating] = useState(false)
   const [error, setError] = useState<string | null>(null)
-  const [successEmail, setSuccessEmail] = useState<string | null>(null)
   const [newToken, setNewToken] = useState<string | null>(null)
+  const [successEmail, setSuccessEmail] = useState<string | null>(null)
 
   const fetchInvites = useCallback(async () => {
     try {
@@ -63,17 +74,12 @@ export default function AdminPage() {
     }
   }, [])
 
-  useEffect(() => {
-    fetchInvites()
-  }, [fetchInvites])
+  useEffect(() => { fetchInvites() }, [fetchInvites])
 
-  const handleCreate = async (e: React.FormEvent) => {
+  const handleCreate = async (e: React.SyntheticEvent<HTMLFormElement>) => {
     e.preventDefault()
-    setError(null)
-    setSuccessEmail(null)
-    setNewToken(null)
+    setError(null); setSuccessEmail(null); setNewToken(null)
     setIsCreating(true)
-
     try {
       const res = await fetch('/api/invites', {
         method: 'POST',
@@ -81,12 +87,7 @@ export default function AdminPage() {
         body: JSON.stringify({ email }),
       })
       const data = await res.json()
-
-      if (!res.ok) {
-        setError(data.error)
-        return
-      }
-
+      if (!res.ok) { setError(data.error); return }
       setSuccessEmail(email)
       setNewToken(data.invite.token)
       setEmail('')
@@ -99,95 +100,48 @@ export default function AdminPage() {
   }
 
   const handleDelete = async (id: string) => {
-    const res = await fetch('/api/invites', {
+    await fetch('/api/invites', {
       method: 'DELETE',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ id }),
     })
-    if (res.ok) await fetchInvites()
+    await fetchInvites()
   }
 
-  const inviteUrl = (token: string) =>
-    `${window.location.origin}/auth/invite/${token}`
+  const inviteUrl = (token: string) => `${window.location.origin}/auth/invite/${token}`
 
   const statusBadge = (invite: Invite) => {
-    const status = inviteStatus(invite)
-    if (status === 'used')
-      return (
-        <span className="flex items-center gap-1 text-xs text-green-500">
-          <CheckCircle2 className="h-3 w-3" /> Used
-        </span>
-      )
-    if (status === 'expired')
-      return (
-        <span className="flex items-center gap-1 text-xs text-muted-foreground">
-          <Clock className="h-3 w-3" /> Expired
-        </span>
-      )
-    return (
-      <span className="flex items-center gap-1 text-xs text-primary">
-        <Clock className="h-3 w-3" /> Pending
-      </span>
-    )
+    const s = inviteStatus(invite)
+    if (s === 'used') return <span className="flex items-center gap-1 text-xs text-green-500"><CheckCircle2 className="h-3 w-3" /> Used</span>
+    if (s === 'expired') return <span className="flex items-center gap-1 text-xs text-muted-foreground"><Clock className="h-3 w-3" /> Expired</span>
+    return <span className="flex items-center gap-1 text-xs text-primary"><Clock className="h-3 w-3" /> Pending</span>
   }
 
   return (
-    <div className="space-y-6 max-w-2xl">
-      <div>
-        <h2 className="text-2xl font-bold">Admin</h2>
-        <p className="text-muted-foreground">Manage user invitations</p>
-      </div>
-
-      {/* Create invite */}
+    <div className="space-y-4">
       <Card className="border-border/50">
         <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <UserPlus className="h-5 w-5" />
-            Invite user
-          </CardTitle>
-          <CardDescription>
-            Send an invite link to a new user. Links expire after 7 days.
-          </CardDescription>
+          <CardTitle className="flex items-center gap-2"><UserPlus className="h-5 w-5" />Invite user</CardTitle>
+          <CardDescription>Send an invite link to a new user. Links expire after 7 days.</CardDescription>
         </CardHeader>
         <CardContent>
           <form onSubmit={handleCreate} className="space-y-4">
             <div className="grid gap-2">
               <Label htmlFor="email">Email address</Label>
               <div className="flex gap-2">
-                <Input
-                  id="email"
-                  type="email"
-                  placeholder="user@company.com"
-                  required
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  className="bg-secondary/50"
-                />
+                <Input id="email" type="email" placeholder="user@company.com" required value={email}
+                  onChange={(e) => setEmail(e.target.value)} className="bg-secondary/50" />
                 <Button type="submit" disabled={isCreating}>
-                  {isCreating ? (
-                    <Loader2 className="h-4 w-4 animate-spin" />
-                  ) : (
-                    'Send invite'
-                  )}
+                  {isCreating ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Send invite'}
                 </Button>
               </div>
             </div>
-
-            {error && (
-              <div className="rounded-md bg-destructive/10 border border-destructive/20 p-3">
-                <p className="text-sm text-destructive">{error}</p>
-              </div>
-            )}
-
+            {error && <div className="rounded-md bg-destructive/10 border border-destructive/20 p-3"><p className="text-sm text-destructive">{error}</p></div>}
             {newToken && successEmail && (
               <div className="rounded-md bg-green-500/10 border border-green-500/20 p-3 space-y-2">
-                <p className="text-sm text-green-500 font-medium">
-                  Invite created for {successEmail}
-                </p>
+                <p className="text-sm text-green-500 font-medium">Invite created for {successEmail}</p>
                 <div className="flex items-center gap-2">
-                  <code className="text-xs text-muted-foreground truncate flex-1 bg-muted/50 px-2 py-1 rounded">
-                    {inviteUrl(newToken)}
-                  </code>
+                  <code className="text-xs text-muted-foreground truncate flex-1 bg-muted/50 px-2 py-1 rounded">{inviteUrl(newToken)}</code>
                   <CopyButton text={inviteUrl(newToken)} />
                 </div>
               </div>
@@ -196,7 +150,6 @@ export default function AdminPage() {
         </CardContent>
       </Card>
 
-      {/* Invites list */}
       <Card className="border-border/50">
         <CardHeader>
           <CardTitle>Invitations</CardTitle>
@@ -204,41 +157,26 @@ export default function AdminPage() {
         </CardHeader>
         <CardContent>
           {isLoading ? (
-            <div className="flex justify-center py-8">
-              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-            </div>
+            <div className="flex justify-center py-8"><Loader2 className="h-6 w-6 animate-spin text-muted-foreground" /></div>
           ) : invites.length === 0 ? (
-            <p className="text-sm text-muted-foreground text-center py-8">
-              No invitations yet
-            </p>
+            <p className="text-sm text-muted-foreground text-center py-8">No invitations yet</p>
           ) : (
             <div className="space-y-2">
               {invites.map((invite) => {
                 const status = inviteStatus(invite)
                 return (
-                  <div
-                    key={invite.id}
-                    className="flex items-center justify-between p-3 rounded-lg bg-muted/30"
-                  >
+                  <div key={invite.id} className="flex items-center justify-between p-3 rounded-lg bg-muted/30">
                     <div className="flex-1 min-w-0">
                       <p className="text-sm font-medium truncate">{invite.email}</p>
                       <div className="flex items-center gap-3 mt-0.5">
                         {statusBadge(invite)}
-                        <span className="text-xs text-muted-foreground">
-                          {new Date(invite.created_at).toLocaleDateString()}
-                        </span>
+                        <span className="text-xs text-muted-foreground">{new Date(invite.created_at).toLocaleDateString()}</span>
                       </div>
                     </div>
                     <div className="flex items-center gap-1 ml-3">
-                      {status === 'pending' && (
-                        <CopyButton text={inviteUrl(invite.token)} />
-                      )}
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        className="h-7 px-2 text-muted-foreground hover:text-destructive"
-                        onClick={() => handleDelete(invite.id)}
-                      >
+                      {status === 'pending' && <CopyButton text={inviteUrl(invite.token)} />}
+                      <Button variant="ghost" size="sm" className="h-7 px-2 text-muted-foreground hover:text-destructive"
+                        onClick={() => handleDelete(invite.id)}>
                         <Trash2 className="h-3.5 w-3.5" />
                       </Button>
                     </div>
@@ -252,3 +190,269 @@ export default function AdminPage() {
     </div>
   )
 }
+
+// ── Enrollment tokens ─────────────────────────────────────────────────────────
+
+interface EnrollmentToken {
+  id: string
+  token: string
+  label: string | null
+  created_at: string
+  expires_at: string | null
+  used_count: number
+  max_uses: number | null
+  revoked_at: string | null
+}
+
+function tokenStatus(t: EnrollmentToken): 'active' | 'revoked' | 'expired' | 'exhausted' {
+  if (t.revoked_at) return 'revoked'
+  if (t.expires_at && new Date(t.expires_at) < new Date()) return 'expired'
+  if (t.max_uses !== null && t.used_count >= t.max_uses) return 'exhausted'
+  return 'active'
+}
+
+function EnrollmentSection() {
+  const [tokens, setTokens] = useState<EnrollmentToken[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [isCreating, setIsCreating] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [newToken, setNewToken] = useState<EnrollmentToken | null>(null)
+
+  // form state
+  const [label, setLabel] = useState('')
+  const [expiresInDays, setExpiresInDays] = useState('')
+  const [maxUses, setMaxUses] = useState('')
+
+  const fetchTokens = useCallback(async () => {
+    try {
+      const res = await fetch('/api/enrollment-tokens')
+      const data = await res.json()
+      if (res.ok) setTokens(data.tokens)
+    } finally {
+      setIsLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { fetchTokens() }, [fetchTokens])
+
+  const handleCreate = async (e: React.SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    setError(null); setNewToken(null)
+    setIsCreating(true)
+    try {
+      const res = await fetch('/api/enrollment-tokens', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          label: label || undefined,
+          expiresInDays: expiresInDays ? parseInt(expiresInDays) : undefined,
+          maxUses: maxUses ? parseInt(maxUses) : undefined,
+        }),
+      })
+      const data = await res.json()
+      if (!res.ok) { setError(data.error); return }
+      setNewToken(data.token)
+      setLabel(''); setExpiresInDays(''); setMaxUses('')
+      await fetchTokens()
+    } catch {
+      setError('Network error. Please try again.')
+    } finally {
+      setIsCreating(false)
+    }
+  }
+
+  const handleRevoke = async (id: string) => {
+    await fetch('/api/enrollment-tokens', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id }),
+    })
+    await fetchTokens()
+  }
+
+  const statusBadge = (t: EnrollmentToken) => {
+    const s = tokenStatus(t)
+    const styles: Record<string, string> = {
+      active: 'text-green-500',
+      revoked: 'text-destructive',
+      expired: 'text-muted-foreground',
+      exhausted: 'text-yellow-500',
+    }
+    const labels: Record<string, string> = {
+      active: 'Active',
+      revoked: 'Revoked',
+      expired: 'Expired',
+      exhausted: 'Exhausted',
+    }
+    return <span className={`text-xs font-medium ${styles[s]}`}>{labels[s]}</span>
+  }
+
+  const agentCommand = (token: string) =>
+    `python agent.py --server ${window.location.origin} --enroll ${token}`
+
+  return (
+    <div className="space-y-4">
+      <Card className="border-border/50">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2"><KeyRound className="h-5 w-5" />Create enrollment token</CardTitle>
+          <CardDescription>
+            Tokens let agents self-register. Share the token or use it in a silent installer for mass deployment.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleCreate} className="space-y-4">
+            <div className="grid gap-2">
+              <Label htmlFor="token-label">Label <span className="text-muted-foreground font-normal">(optional)</span></Label>
+              <Input id="token-label" placeholder="e.g. Office PCs batch 1"
+                value={label} onChange={(e) => setLabel(e.target.value)} className="bg-secondary/50" />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div className="grid gap-2">
+                <Label htmlFor="expires">Expires after <span className="text-muted-foreground font-normal">(days, blank = never)</span></Label>
+                <Input id="expires" type="number" min="1" placeholder="Never"
+                  value={expiresInDays} onChange={(e) => setExpiresInDays(e.target.value)} className="bg-secondary/50" />
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="max-uses">Max uses <span className="text-muted-foreground font-normal">(blank = unlimited)</span></Label>
+                <Input id="max-uses" type="number" min="1" placeholder="Unlimited"
+                  value={maxUses} onChange={(e) => setMaxUses(e.target.value)} className="bg-secondary/50" />
+              </div>
+            </div>
+
+            {error && <div className="rounded-md bg-destructive/10 border border-destructive/20 p-3"><p className="text-sm text-destructive">{error}</p></div>}
+
+            <Button type="submit" disabled={isCreating}>
+              {isCreating ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Generate token'}
+            </Button>
+          </form>
+
+          {newToken && (
+            <div className="mt-4 rounded-md bg-green-500/10 border border-green-500/20 p-4 space-y-3">
+              <p className="text-sm text-green-500 font-medium">Token created</p>
+
+              <div>
+                <p className="text-xs text-muted-foreground mb-1">Token</p>
+                <div className="flex items-center gap-2">
+                  <code className="text-xs bg-muted/50 px-2 py-1 rounded flex-1 truncate font-mono">{newToken.token}</code>
+                  <CopyButton text={newToken.token} />
+                </div>
+              </div>
+
+              <div>
+                <p className="text-xs text-muted-foreground mb-1">Agent command</p>
+                <div className="flex items-center gap-2">
+                  <code className="text-xs bg-muted/50 px-2 py-1 rounded flex-1 truncate font-mono">{agentCommand(newToken.token)}</code>
+                  <CopyButton text={agentCommand(newToken.token)} />
+                </div>
+              </div>
+
+              <div>
+                <p className="text-xs text-muted-foreground mb-1">Silent Windows installer</p>
+                <div className="flex items-center gap-2">
+                  <code className="text-xs bg-muted/50 px-2 py-1 rounded flex-1 truncate font-mono">
+                    {`RemoteLink-Setup.exe /S /SERVER=${window.location.origin} /ENROLL=${newToken.token}`}
+                  </code>
+                  <CopyButton text={`RemoteLink-Setup.exe /S /SERVER=${window.location.origin} /ENROLL=${newToken.token}`} />
+                </div>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card className="border-border/50">
+        <CardHeader>
+          <CardTitle>Enrollment tokens</CardTitle>
+          <CardDescription>Manage tokens used to register new agents</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {isLoading ? (
+            <div className="flex justify-center py-8"><Loader2 className="h-6 w-6 animate-spin text-muted-foreground" /></div>
+          ) : tokens.length === 0 ? (
+            <p className="text-sm text-muted-foreground text-center py-8">No enrollment tokens yet</p>
+          ) : (
+            <div className="space-y-2">
+              {tokens.map((t) => {
+                const status = tokenStatus(t)
+                const isActive = status === 'active'
+                return (
+                  <div key={t.id} className={`flex items-center justify-between p-3 rounded-lg bg-muted/30 ${!isActive ? 'opacity-60' : ''}`}>
+                    <div className="flex-1 min-w-0 space-y-1">
+                      <div className="flex items-center gap-2">
+                        <p className="text-sm font-medium truncate">{t.label || <span className="text-muted-foreground italic">Unlabelled</span>}</p>
+                        {statusBadge(t)}
+                      </div>
+                      <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                        <span className="font-mono truncate max-w-[160px]">{t.token}</span>
+                        <span className="flex items-center gap-1">
+                          <Hash className="h-3 w-3" />
+                          {t.used_count} use{t.used_count !== 1 ? 's' : ''}
+                          {t.max_uses !== null ? ` / ${t.max_uses}` : ''}
+                        </span>
+                        {t.expires_at ? (
+                          <span className="flex items-center gap-1">
+                            <Clock className="h-3 w-3" />
+                            {new Date(t.expires_at) > new Date()
+                              ? `Expires ${new Date(t.expires_at).toLocaleDateString()}`
+                              : `Expired ${new Date(t.expires_at).toLocaleDateString()}`}
+                          </span>
+                        ) : (
+                          <span className="flex items-center gap-1"><Infinity className="h-3 w-3" /> No expiry</span>
+                        )}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-1 ml-3 shrink-0">
+                      {isActive && <CopyButton text={t.token} />}
+                      {isActive && (
+                        <Button variant="ghost" size="sm" className="h-7 px-2 text-muted-foreground hover:text-destructive"
+                          onClick={() => handleRevoke(t.id)} title="Revoke token">
+                          <Ban className="h-3.5 w-3.5" />
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+// ── Page ──────────────────────────────────────────────────────────────────────
+
+type Tab = 'invites' | 'enrollment'
+
+export default function AdminPage() {
+  const [tab, setTab] = useState<Tab>('invites')
+
+  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>
+      </div>
+
+      {/* Tab bar */}
+      <div className="flex gap-1 p-1 rounded-lg bg-muted/50 w-fit">
+        {(['invites', 'enrollment'] as Tab[]).map((t) => (
+          <button
+            key={t}
+            onClick={() => setTab(t)}
+            className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${
+              tab === t
+                ? 'bg-background shadow-sm text-foreground'
+                : 'text-muted-foreground hover:text-foreground'
+            }`}
+          >
+            {t === 'invites' ? 'User invites' : 'Agent enrollment'}
+          </button>
+        ))}
+      </div>
+
+      {tab === 'invites' ? <InvitesSection /> : <EnrollmentSection />}
+    </div>
+  )
+}