feat: Service cards with inline toggles + updated docs

Service cards now have:
- Public/Private toggle (switches reach)
- Subdomains toggle (include *.domain)
- TLS badge (passthrough vs terminate, read-only for now)
- Inline status details (DNS, Proxy, TLS status)
- Deregister button
- Add Service form with toggles instead of dropdowns

The card speaks the user's language (public/private, subdomains on/off)
not implementation details (tcp-passthrough vs http, reach: internal).

Also updated docs/registrations.md:
- Added "User-facing concepts" section mapping API fields to toggles
- Added batch deregister endpoint
- Added backend.health field
- Cleaner examples

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

web/src/components/ServicesComponent.tsx

@@ -6,11 +6,12 @@ import { Input, Label } from './ui';
 import { Alert, AlertDescription } from './ui/alert';
 import { Textarea } from './ui/textarea';
 import { Badge } from './ui/badge';
+import { Switch } from './ui/switch';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from './ui/collapsible';
 import {
   Globe, Loader2, AlertCircle, CheckCircle, Play, RotateCw,
-  Plus, Trash2, X, ChevronDown, ChevronRight, ChevronUp,
+  Plus, Trash2, X, ChevronDown, ChevronUp,
 } from 'lucide-react';
 import { useConfig } from '../hooks';
 import { useHaproxy } from '../hooks/useHaproxy';
@@ -33,24 +34,10 @@ function StatusDot({ status, label }: { status: 'ok' | 'error' | 'na'; label: st
 }
 
 function getTlsStatus(service: RegisteredService, certDomains: Set<string>): 'ok' | 'error' | 'na' {
-  // Passthrough: Central doesn't handle TLS — grey (not applicable)
   if (service.tls === 'passthrough' || service.backend.type === 'tcp-passthrough') return 'na';
-  // Terminate: Central handles TLS — green if cert exists, red if missing
   return certDomains.has(service.domain) ? 'ok' : 'error';
 }
 
-function getProxyLabel(service: RegisteredService): string {
-  if (service.backend.type === 'tcp-passthrough') {
-    return `L4 SNI passthrough${service.subdomains ? ' + wildcard' : ''}`;
-  }
-  return `L7 HTTP reverse proxy`;
-}
-
-function getTlsLabel(service: RegisteredService, certDomains: Set<string>): string {
-  if (service.tls === 'passthrough' || service.backend.type === 'tcp-passthrough') return 'passthrough (backend handles)';
-  return certDomains.has(service.domain) ? 'terminate (cert provisioned)' : 'terminate (cert missing)';
-}
-
 export function ServicesComponent() {
   const queryClient = useQueryClient();
   const { config: globalConfig } = useConfig();
@@ -69,12 +56,12 @@ export function ServicesComponent() {
   const [advancedConfig, setAdvancedConfig] = useState('');
   const [loadingAdvanced, setLoadingAdvanced] = useState(false);
 
-  // Add service form state
+  // Add form state
   const [newDomain, setNewDomain] = useState('');
   const [newBackendAddr, setNewBackendAddr] = useState('');
-  const [newBackendType, setNewBackendType] = useState<string>('tcp-passthrough');
   const [newReach, setNewReach] = useState<string>('public');
   const [newSubdomains, setNewSubdomains] = useState(false);
+  const [newTls, setNewTls] = useState<string>('passthrough');
 
   const certDomains = new Set<string>(
     (certStatus?.certs ?? []).filter(c => c.cert.exists).map(c => c.domain)
@@ -82,15 +69,20 @@ export function ServicesComponent() {
   const publicIp = ddnsStatus?.currentIP;
 
   const registerMutation = useMutation({
-    mutationFn: (svc: { domain: string; backend: { address: string; type: string }; reach: string; subdomains: boolean; source: string }) =>
-      servicesApi.register(svc),
+    mutationFn: (svc: Record<string, unknown>) => servicesApi.register(svc as any),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['services'] });
       setShowAddForm(false);
-      setNewDomain(''); setNewBackendAddr(''); setNewBackendType('tcp-passthrough'); setNewReach('public'); setNewSubdomains(false);
+      setNewDomain(''); setNewBackendAddr(''); setNewReach('public'); setNewSubdomains(false); setNewTls('passthrough');
     },
   });
 
+  const updateMutation = useMutation({
+    mutationFn: ({ domain, updates }: { domain: string; updates: Record<string, unknown> }) =>
+      servicesApi.register({ ...(services.find(s => s.domain === domain) ?? {}), ...updates } as any),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['services'] }),
+  });
+
   const deregisterMutation = useMutation({
     mutationFn: (domain: string) => servicesApi.deregister(domain),
     onSuccess: () => queryClient.invalidateQueries({ queryKey: ['services'] }),
@@ -100,22 +92,27 @@ export function ServicesComponent() {
     title: 'Services',
     description: (
       <p className="leading-relaxed">
-        Each service represents a domain that Wild Central manages. When a service is registered,
-        Central creates DNS entries, proxy routes, and optionally provisions TLS certificates
-        and public DNS records.
+        Each service is a domain that Wild Central manages. Central provides DNS resolution,
+        proxy routing, TLS certificates, and public DNS records based on how you configure each service.
       </p>
     ),
   });
 
+  const toggleExpand = (domain: string) => {
+    setExpandedDomains(prev => {
+      const next = new Set(prev);
+      if (next.has(domain)) next.delete(domain); else next.add(domain);
+      return next;
+    });
+  };
+
   const handleShowAdvanced = async () => {
     if (!showAdvanced) {
       setLoadingAdvanced(true);
       try {
         const result = await haproxyApi.getConfig();
         setAdvancedConfig(result.content || '');
-      } catch {
-        setAdvancedConfig('# Could not load HAProxy config');
-      }
+      } catch { setAdvancedConfig('# Could not load HAProxy config'); }
       setLoadingAdvanced(false);
     }
     setShowAdvanced(!showAdvanced);
@@ -123,7 +120,7 @@ export function ServicesComponent() {
 
   return (
     <div className="space-y-4">
-      {/* Page header */}
+      {/* Header */}
       <div className="flex items-center justify-between mb-2">
         <div className="flex items-center gap-4">
           <div className="p-2 bg-primary/10 rounded-lg">
@@ -135,15 +132,14 @@ export function ServicesComponent() {
           </div>
         </div>
         <Button onClick={() => setShowAddForm(!showAddForm)} className="gap-1">
-          <Plus className="h-4 w-4" />
-          Add Service
+          <Plus className="h-4 w-4" />Add Service
         </Button>
       </div>
 
-      {/* Add Service Form */}
+      {/* Add Form */}
       {showAddForm && (
         <Card className="border-dashed border-primary/50">
-          <CardContent className="p-4 space-y-3">
+          <CardContent className="p-4 space-y-4">
             <div className="grid grid-cols-2 gap-3">
               <div>
                 <Label className="text-xs">Domain</Label>
@@ -153,44 +149,35 @@ export function ServicesComponent() {
                 <Label className="text-xs">Backend (host:port)</Label>
                 <Input value={newBackendAddr} onChange={e => setNewBackendAddr(e.target.value)} placeholder="192.168.8.240:443" className="mt-1 font-mono" />
               </div>
-              <div>
-                <Label className="text-xs">Type</Label>
-                <Select value={newBackendType} onValueChange={setNewBackendType}>
-                  <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
+            </div>
+            <div className="flex items-center gap-6">
+              <label className="flex items-center gap-2 text-sm">
+                <Switch checked={newReach === 'public'} onCheckedChange={v => setNewReach(v ? 'public' : 'internal')} />
+                Public
+              </label>
+              <label className="flex items-center gap-2 text-sm">
+                <Switch checked={newSubdomains} onCheckedChange={setNewSubdomains} />
+                Include subdomains
+              </label>
+              <div className="flex items-center gap-2 text-sm">
+                <span className="text-muted-foreground">TLS:</span>
+                <Select value={newTls} onValueChange={setNewTls}>
+                  <SelectTrigger className="h-8 w-36"><SelectValue /></SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="tcp-passthrough">L4 TCP Passthrough</SelectItem>
-                    <SelectItem value="http">L7 HTTP Reverse Proxy</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-              <div>
-                <Label className="text-xs">Reach</Label>
-                <Select value={newReach} onValueChange={setNewReach}>
-                  <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="public">Public (LAN + Internet)</SelectItem>
-                    <SelectItem value="internal">Internal (LAN only)</SelectItem>
+                    <SelectItem value="passthrough">Passthrough</SelectItem>
+                    <SelectItem value="terminate">Terminate</SelectItem>
                   </SelectContent>
                 </Select>
               </div>
             </div>
-            <label className="flex items-center gap-2 text-sm">
-              <input type="checkbox" checked={newSubdomains} onChange={e => setNewSubdomains(e.target.checked)} className="rounded" />
-              Include wildcard subdomains (*.domain)
-            </label>
             <div className="flex gap-2 justify-end">
               <Button variant="outline" size="sm" onClick={() => setShowAddForm(false)}><X className="h-3 w-3 mr-1" />Cancel</Button>
-              <Button
-                size="sm"
-                disabled={!newDomain || !newBackendAddr || registerMutation.isPending}
+              <Button size="sm" disabled={!newDomain || !newBackendAddr || registerMutation.isPending}
                 onClick={() => registerMutation.mutate({
                   domain: newDomain,
-                  backend: { address: newBackendAddr, type: newBackendType },
-                  reach: newReach,
-                  subdomains: newSubdomains,
-                  source: 'manual',
-                })}
-              >
+                  backend: { address: newBackendAddr, type: newTls === 'passthrough' ? 'tcp-passthrough' : 'http' },
+                  reach: newReach, subdomains: newSubdomains, tls: newTls, source: 'manual',
+                })}>
                 {registerMutation.isPending ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : <Plus className="h-3 w-3 mr-1" />}
                 Register
               </Button>
@@ -207,15 +194,12 @@ export function ServicesComponent() {
         </Card>
       )}
 
-      {/* Empty state */}
+      {/* Empty */}
       {!isServicesLoading && services.length === 0 && (
         <Card className="p-8 text-center">
           <Globe className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
           <h3 className="text-lg font-medium mb-2">No Services</h3>
-          <p className="text-muted-foreground mb-4">
-            Services appear here when Wild Cloud or Wild Works registers domains,
-            or add one manually.
-          </p>
+          <p className="text-muted-foreground">Services appear when Wild Cloud or Wild Works registers domains, or add one manually.</p>
         </Card>
       )}
 
@@ -224,32 +208,18 @@ export function ServicesComponent() {
         const isExpanded = expandedDomains.has(service.domain);
         const tlsStatus = getTlsStatus(service, certDomains);
         const ddnsStatus2 = service.reach === 'public' ? 'ok' as const : 'na' as const;
+        const isPassthrough = service.tls === 'passthrough' || service.backend.type === 'tcp-passthrough';
+        const backendHost = service.backend.address.split(':')[0];
 
         return (
-          <Card key={service.domain} className="overflow-hidden">
-            <button
-              type="button"
-              onClick={() => setExpandedDomains(prev => {
-                const next = new Set(prev);
-                if (next.has(service.domain)) next.delete(service.domain);
-                else next.add(service.domain);
-                return next;
-              })}
-              className="w-full px-4 py-3 text-left hover:bg-muted/30 transition-colors"
-            >
+          <Card key={service.domain}>
+            {/* Header — always visible */}
+            <button type="button" onClick={() => toggleExpand(service.domain)} className="w-full px-4 py-3 text-left hover:bg-muted/30 transition-colors">
               <div className="flex items-center justify-between gap-2">
                 <div className="flex items-center gap-2 min-w-0">
-                  {isExpanded ? <ChevronDown className="h-4 w-4 text-muted-foreground shrink-0" />
-                    : <ChevronRight className="h-4 w-4 text-muted-foreground shrink-0" />}
                   <span className="font-mono text-sm font-medium truncate">
                     {service.subdomains ? `*.${service.domain}` : service.domain}
                   </span>
-                  <Badge variant="outline" className="text-xs h-5 shrink-0">
-                    {service.backend.type === 'tcp-passthrough' ? 'L4' : 'L7'}
-                  </Badge>
-                  <Badge variant={service.reach === 'public' ? 'success' : 'default'} className="text-xs h-5 shrink-0">
-                    {service.reach}
-                  </Badge>
                 </div>
                 <div className="flex items-center gap-3 shrink-0">
                   <StatusDot status="ok" label="DNS" />
@@ -260,15 +230,48 @@ export function ServicesComponent() {
               </div>
             </button>
 
+            {/* Expanded — controls + status */}
             {isExpanded && (
-              <CardContent className="pt-0 pb-4 px-4 space-y-3">
-                <div className="border rounded-lg divide-y text-sm ml-6">
+              <CardContent className="pt-0 pb-4 px-4 space-y-4">
+                {/* Controls */}
+                <div className="flex flex-wrap items-center gap-x-6 gap-y-3 py-2">
+                  <div>
+                    <Label className="text-xs text-muted-foreground">Backend</Label>
+                    <div className="font-mono text-sm mt-0.5">{service.backend.address}</div>
+                  </div>
+
+                  <div className="flex items-center gap-2">
+                    <Switch
+                      checked={service.reach === 'public'}
+                      onCheckedChange={v => updateMutation.mutate({ domain: service.domain, updates: { reach: v ? 'public' : 'internal' } })}
+                      disabled={updateMutation.isPending}
+                    />
+                    <Label className="text-sm">{service.reach === 'public' ? 'Public' : 'Private'}</Label>
+                  </div>
+
+                  <div className="flex items-center gap-2">
+                    <Switch
+                      checked={service.subdomains}
+                      onCheckedChange={v => updateMutation.mutate({ domain: service.domain, updates: { subdomains: v } })}
+                      disabled={updateMutation.isPending}
+                    />
+                    <Label className="text-sm">Subdomains</Label>
+                  </div>
+
+                  <div className="flex items-center gap-2">
+                    <Label className="text-xs text-muted-foreground">TLS</Label>
+                    <Badge variant={isPassthrough ? 'secondary' : 'default'} className="text-xs">
+                      {isPassthrough ? 'Passthrough' : 'Terminate'}
+                    </Badge>
+                  </div>
+                </div>
+
+                {/* Status details */}
+                <div className="border rounded-lg divide-y text-sm">
                   <div className="flex items-center justify-between px-3 py-1.5">
                     <span className="text-muted-foreground">DNS (LAN)</span>
                     <span className="font-mono text-xs">
-                      {service.backend.type === 'tcp-passthrough'
-                        ? `→ ${service.backend.address.split(':')[0]}`
-                        : `→ ${globalConfig?.cloud?.dnsmasq?.ip ?? '(Central IP)'}`}
+                      {service.domain} → {isPassthrough ? backendHost : (globalConfig?.cloud?.dnsmasq?.ip ?? 'Central')}
                     </span>
                   </div>
                   {service.reach === 'public' && (
@@ -279,28 +282,26 @@ export function ServicesComponent() {
                   )}
                   <div className="flex items-center justify-between px-3 py-1.5">
                     <span className="text-muted-foreground">Proxy</span>
-                    <span className="font-mono text-xs">{getProxyLabel(service)}</span>
+                    <span className="font-mono text-xs">
+                      {isPassthrough ? 'L4 SNI' : 'L7 HTTP'}{service.subdomains ? ' + wildcard' : ''}
+                    </span>
                   </div>
                   <div className="flex items-center justify-between px-3 py-1.5">
                     <span className="text-muted-foreground">TLS</span>
-                    <span className="font-mono text-xs">{getTlsLabel(service, certDomains)}</span>
+                    <span className="font-mono text-xs">
+                      {isPassthrough ? 'backend handles' : (certDomains.has(service.domain) ? 'cert provisioned' : 'cert missing')}
+                    </span>
                   </div>
                 </div>
 
-                <div className="flex items-center justify-between ml-6 text-xs text-muted-foreground">
-                  <div className="flex gap-4">
-                    <span>Backend: <span className="font-mono text-foreground">{service.backend.address}</span></span>
-                    <span>Source: <span className="text-foreground">{service.source}</span></span>
-                  </div>
-                  <Button
-                    variant="ghost"
-                    size="sm"
+                {/* Footer */}
+                <div className="flex items-center justify-between text-xs text-muted-foreground">
+                  <span>Source: {service.source}</span>
+                  <Button variant="ghost" size="sm"
                     className="h-7 text-xs text-red-500 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950/20"
-                    onClick={(e) => { e.stopPropagation(); deregisterMutation.mutate(service.domain); }}
-                    disabled={deregisterMutation.isPending}
-                  >
-                    {deregisterMutation.isPending ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : <Trash2 className="h-3 w-3 mr-1" />}
-                    Deregister
+                    onClick={e => { e.stopPropagation(); deregisterMutation.mutate(service.domain); }}
+                    disabled={deregisterMutation.isPending}>
+                    <Trash2 className="h-3 w-3 mr-1" />Deregister
                   </Button>
                 </div>
               </CardContent>
@@ -341,7 +342,7 @@ export function ServicesComponent() {
               {haproxyGenerateError && (
                 <Alert variant="error"><AlertCircle className="h-4 w-4" /><AlertDescription>{(haproxyGenerateError as Error).message}</AlertDescription></Alert>
               )}
-              <Textarea value={advancedConfig} readOnly className="font-mono text-xs min-h-[200px]" placeholder="# haproxy configuration" />
+              <Textarea value={advancedConfig} readOnly className="font-mono text-xs min-h-[200px]" />
             </CardContent>
           </CollapsibleContent>
         </Card>