feat: Add instructions for registering new CrowdSec agents

web/src/components/CrowdSecComponent.tsx

@@ -9,10 +9,9 @@ import { Alert, AlertDescription } from './ui/alert';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
 import {
   ShieldAlert, Loader2, AlertCircle, CheckCircle, Ban, X, Trash2,
-  BookOpen, Shield, Activity, Zap, RefreshCw, Globe,
+  BookOpen, Shield, Activity, Zap, RefreshCw, Globe, Terminal,
 } from 'lucide-react';
 import { Badge } from './ui/badge';
-// Instance provisioning removed — Central-only mode
 import { useCrowdSec } from '../hooks/useCrowdSec';
 import type { AddDecisionRequest, CrowdSecAlert } from '../services/api/networking';
 
@@ -562,9 +561,8 @@ export function CrowdSecComponent() {
             </CardHeader>
             <CardContent className="space-y-3">
               <p className="text-sm text-muted-foreground">
-                <strong>Agents</strong> are CrowdSec engines running inside your k8s clusters. They analyze
-                logs, detect threats, and report to this LAPI. Each provisioned Wild Cloud instance registers
-                one agent here.
+                <strong>Agents</strong> are CrowdSec engines that analyze logs, detect threats, and report
+                to this LAPI. Each machine or cluster running CrowdSec registers an agent here.
               </p>
               {status.machines.length === 0 ? (
                 <p className="text-sm text-muted-foreground text-center py-3">No agents registered. Provision an instance below.</p>
@@ -679,6 +677,42 @@ export function CrowdSecComponent() {
             </CardContent>
           </Card>
 
+          {/* Registering Agents */}
+          <Card className="border-dashed">
+            <CardHeader>
+              <div className="flex items-center gap-2">
+                <Terminal className="h-4 w-4 text-muted-foreground" />
+                <CardTitle>Registering New Agents</CardTitle>
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-3 text-sm text-muted-foreground">
+              <p>
+                To connect a new CrowdSec agent to this LAPI, register a machine and bouncer via the API,
+                then configure the remote agent to use these credentials.
+              </p>
+              <div className="space-y-2">
+                <p className="font-medium text-foreground">1. Register a machine (agent)</p>
+                <pre className="bg-muted rounded-md p-3 font-mono text-xs overflow-x-auto">
+{`curl -X POST /api/v1/crowdsec/machines \\
+  -H "Content-Type: application/json" \\
+  -d '{"name": "my-agent", "password": "a-strong-password"}'`}
+                </pre>
+              </div>
+              <div className="space-y-2">
+                <p className="font-medium text-foreground">2. Register a bouncer</p>
+                <pre className="bg-muted rounded-md p-3 font-mono text-xs overflow-x-auto">
+{`curl -X POST /api/v1/crowdsec/bouncers \\
+  -H "Content-Type: application/json" \\
+  -d '{"name": "my-bouncer", "apiKey": "a-bouncer-api-key"}'`}
+                </pre>
+              </div>
+              <p>
+                Then configure the remote CrowdSec agent with the LAPI URL (<code className="font-mono bg-muted px-1 rounded">http://{'<central-ip>'}:8080</code>)
+                and the credentials above. The agent will appear in the Registered Agents list once it connects.
+              </p>
+            </CardContent>
+          </Card>
+
         </>
       )}
     </div>