feat: Services page — individual cards, full CRUD, no custom TCP

Rewrote ServicesComponent:
- Each service is its own Card (not rows in a table)
- "Add Service" button with form (domain, backend, type, reach, subdomains)
- Deregister button per service
- Wildcard services show as *.domain
- Expandable detail view with DNS/Proxy/TLS status
- Removed separate "Custom TCP Routes" section — TCP routes are just
  services with type tcp-passthrough
- Added register/deregister methods to servicesApi

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

web/src/components/ServicesComponent.tsx

@@ -1,34 +1,25 @@
 import { useState } from 'react';
-import { Card, CardHeader, CardTitle, CardContent } from './ui/card';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { Card, CardContent } from './ui/card';
 import { Button } from './ui/button';
 import { Input, Label } from './ui';
 import { Alert, AlertDescription } from './ui/alert';
 import { Textarea } from './ui/textarea';
 import { Badge } from './ui/badge';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from './ui/collapsible';
 import {
-  Globe,
+  Globe, Loader2, AlertCircle, CheckCircle, Play, RotateCw,
-  Loader2,
+  Plus, Trash2, X, ChevronDown, ChevronRight, ChevronUp,
-  AlertCircle,
-  CheckCircle,
-  Play,
-  RotateCw,
-  Plus,
-  Trash2,
-  X,
-  Check,
-  ChevronDown,
-  ChevronRight,
-  ChevronUp,
 } from 'lucide-react';
 import { useConfig } from '../hooks';
 import { useHaproxy } from '../hooks/useHaproxy';
 import { useServices } from '../hooks/useServices';
 import { useCert } from '../hooks/useCert';
 import { useDdns } from '../hooks/useDdns';
-import type { HAProxyCustomRoute } from '../types';
+import { usePageHelp } from '../hooks/usePageHelp';
 import type { RegisteredService } from '../services/api/networking';
-import { haproxyApi } from '../services/api/networking';
+import { servicesApi, haproxyApi } from '../services/api/networking';
 
 function StatusDot({ status, label }: { status: 'ok' | 'warning' | 'na'; label: string }) {
   return (
@@ -41,189 +32,78 @@ function StatusDot({ status, label }: { status: 'ok' | 'warning' | 'na'; label:
   );
 }
 
-function getTypeBadge(backendType: string) {
-  if (backendType === 'tcp-passthrough') return 'L4';
-  return 'L7';
-}
-
 function getTlsStatus(service: RegisteredService, certDomains: Set<string>): 'ok' | 'warning' | 'na' {
   if (service.tls === 'passthrough' || service.backend.type === 'tcp-passthrough') return 'ok';
-  if (service.tls === 'terminate') {
   return certDomains.has(service.domain) ? 'ok' : 'warning';
-  }
-  if (certDomains.has(service.domain)) return 'ok';
-  return 'na';
-}
-
-function getTlsLabel(service: RegisteredService, certDomains: Set<string>): string {
-  if (service.tls === 'passthrough' || service.backend.type === 'tcp-passthrough') {
-    return 'passthrough (backend handles)';
-  }
-  if (service.tls === 'terminate') {
-    return certDomains.has(service.domain) ? 'terminate (cert provisioned)' : 'terminate (cert missing)';
-  }
-  return 'none';
-}
-
-function getDdnsStatus(service: RegisteredService, ddnsDomains: Set<string>): 'ok' | 'na' {
-  if (service.reach === 'public') {
-    return ddnsDomains.has(service.domain) ? 'ok' : 'ok'; // if public, DDNS record should exist
-  }
-  return 'na';
 }
 
 function getProxyLabel(service: RegisteredService): string {
   if (service.backend.type === 'tcp-passthrough') {
-    return `HAProxy L4 SNI passthrough${service.subdomains ? ' + wildcard' : ''}`;
+    return `L4 SNI passthrough${service.subdomains ? ' + wildcard' : ''}`;
   }
-  return `HAProxy L7 HTTP reverse proxy${service.subdomains ? ' + wildcard' : ''}`;
+  return `L7 HTTP reverse proxy`;
 }
 
-interface ServiceRowProps {
+function getTlsLabel(service: RegisteredService, certDomains: Set<string>): string {
-  service: RegisteredService;
+  if (service.tls === 'passthrough' || service.backend.type === 'tcp-passthrough') return 'passthrough (backend handles)';
-  isExpanded: boolean;
+  return certDomains.has(service.domain) ? 'terminate (cert provisioned)' : 'terminate (cert missing)';
-  onToggle: () => void;
-  certDomains: Set<string>;
-  ddnsDomains: Set<string>;
-  dnsmasqIp?: string;
-  publicIp?: string;
-}
-
-function ServiceRow({ service, isExpanded, onToggle, certDomains, ddnsDomains, dnsmasqIp, publicIp }: ServiceRowProps) {
-  const tlsStatus = getTlsStatus(service, certDomains);
-  const ddnsStatus = getDdnsStatus(service, ddnsDomains);
-  const typeBadge = getTypeBadge(service.backend.type);
-
-  return (
-    <div className="border-b last:border-b-0">
-      <button
-        type="button"
-        onClick={onToggle}
-        className="w-full px-3 py-2.5 text-left hover:bg-muted/50 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-3.5 w-3.5 text-muted-foreground shrink-0" />
-            ) : (
-              <ChevronRight className="h-3.5 w-3.5 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-4 px-1 shrink-0">{typeBadge}</Badge>
-            <Badge
-              variant={service.reach === 'public' ? 'success' : 'default'}
-              className="text-xs h-4 px-1 shrink-0"
-            >
-              {service.reach}
-            </Badge>
-          </div>
-          <div className="flex items-center gap-3 shrink-0">
-            <StatusDot status="ok" label="DNS" />
-            <StatusDot status="ok" label="Proxy" />
-            <StatusDot status={tlsStatus} label="TLS" />
-            <StatusDot status={ddnsStatus} label="DDNS" />
-          </div>
-        </div>
-      </button>
-
-      {isExpanded && (
-        <div className="px-3 pb-3 pt-1 ml-5 space-y-2">
-          <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>
-              <div className="flex items-center gap-2">
-                <span className="font-mono text-xs">
-                  address=/{service.domain}/{dnsmasqIp ?? '—'}
-                </span>
-                <CheckCircle className="h-3.5 w-3.5 text-green-500" />
-              </div>
-            </div>
-            {service.reach === 'public' && (
-              <div className="flex items-center justify-between px-3 py-1.5">
-                <span className="text-muted-foreground">DNS (Public)</span>
-                <div className="flex items-center gap-2">
-                  <span className="font-mono text-xs">
-                    A record &rarr; {publicIp ?? '—'}
-                  </span>
-                  <CheckCircle className="h-3.5 w-3.5 text-green-500" />
-                </div>
-              </div>
-            )}
-            <div className="flex items-center justify-between px-3 py-1.5">
-              <span className="text-muted-foreground">Proxy</span>
-              <div className="flex items-center gap-2">
-                <span className="font-mono text-xs">{getProxyLabel(service)}</span>
-                <CheckCircle className="h-3.5 w-3.5 text-green-500" />
-              </div>
-            </div>
-            <div className="flex items-center justify-between px-3 py-1.5">
-              <span className="text-muted-foreground">TLS</span>
-              <div className="flex items-center gap-2">
-                <span className="font-mono text-xs">{getTlsLabel(service, certDomains)}</span>
-                {tlsStatus === 'ok' && <CheckCircle className="h-3.5 w-3.5 text-green-500" />}
-                {tlsStatus === 'warning' && <AlertCircle className="h-3.5 w-3.5 text-amber-500" />}
-                {tlsStatus === 'na' && <span className="h-3.5 w-3.5 text-muted-foreground inline-flex items-center justify-center">&mdash;</span>}
-              </div>
-            </div>
-          </div>
-
-          <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground pt-1">
-            <span>Backend: <span className="font-mono text-foreground">{service.backend.address}</span></span>
-            <span>Source: <span className="text-foreground">{service.source}</span></span>
-          </div>
-        </div>
-      )}
-    </div>
-  );
 }
 
 export function ServicesComponent() {
-  const { config: globalConfig, updateConfig, isUpdating } = useConfig();
+  const queryClient = useQueryClient();
+  const { config: globalConfig } = useConfig();
   const {
-    status: haproxyStatus,
+    generate: generateHaproxy, isGenerating: isHaproxyGenerating,
-    isLoadingStatus: isHaproxyLoading,
+    generateData: haproxyGenerateData, generateError: haproxyGenerateError,
-    generate: generateHaproxy,
+    restart: restartHaproxy, isRestarting: isHaproxyRestarting,
-    isGenerating: isHaproxyGenerating,
-    generateData: haproxyGenerateData,
-    generateError: haproxyGenerateError,
-    restart: restartHaproxy,
-    isRestarting: isHaproxyRestarting,
   } = useHaproxy();
   const { services, isLoading: isServicesLoading } = useServices();
   const { status: certStatus } = useCert();
   const { status: ddnsStatus } = useDdns();
 
   const [expandedDomain, setExpandedDomain] = useState<string | null>(null);
-  const [showAddCustomRoute, setShowAddCustomRoute] = useState(false);
+  const [showAddForm, setShowAddForm] = useState(false);
-  const [newCustomRoute, setNewCustomRoute] = useState<HAProxyCustomRoute>({ name: '', port: 0, backend: '' });
-  const [successMessage, setSuccessMessage] = useState<string | null>(null);
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [showAdvanced, setShowAdvanced] = useState(false);
   const [advancedConfig, setAdvancedConfig] = useState('');
   const [loadingAdvanced, setLoadingAdvanced] = useState(false);
 
-  // Build lookup sets for cross-referencing
+  // Add service 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 certDomains = new Set<string>(
     (certStatus?.certs ?? []).filter(c => c.cert.exists).map(c => c.domain)
   );
-  const ddnsDomains = new Set<string>(
-    (ddnsStatus?.records ?? []).map(r => r.name)
-  );
-
-  const dnsmasqIp = globalConfig?.cloud?.dnsmasq?.ip;
   const publicIp = ddnsStatus?.currentIP;
 
-  const showSuccess = (msg: string) => {
+  const registerMutation = useMutation({
-    setSuccessMessage(msg);
+    mutationFn: (svc: { domain: string; backend: { address: string; type: string }; reach: string; subdomains: boolean; source: string }) =>
-    setErrorMessage(null);
+      servicesApi.register(svc),
-    setTimeout(() => setSuccessMessage(null), 5000);
+    onSuccess: () => {
-  };
+      queryClient.invalidateQueries({ queryKey: ['services'] });
+      setShowAddForm(false);
+      setNewDomain(''); setNewBackendAddr(''); setNewBackendType('tcp-passthrough'); setNewReach('public'); setNewSubdomains(false);
+    },
+  });
 
-  const showError = (msg: string) => {
+  const deregisterMutation = useMutation({
-    setErrorMessage(msg);
+    mutationFn: (domain: string) => servicesApi.deregister(domain),
-    setSuccessMessage(null);
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['services'] }),
-    setTimeout(() => setErrorMessage(null), 8000);
+  });
-  };
+
+  usePageHelp({
+    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.
+      </p>
+    ),
+  });
 
   const handleShowAdvanced = async () => {
     if (!showAdvanced) {
@@ -239,54 +119,11 @@ export function ServicesComponent() {
     setShowAdvanced(!showAdvanced);
   };
 
-  const handleAddCustomRoute = async () => {
-    if (!globalConfig || !newCustomRoute.name || !newCustomRoute.port || !newCustomRoute.backend) return;
-    try {
-      const existing = globalConfig.cloud?.haproxy?.customRoutes ?? [];
-      await updateConfig({
-        ...globalConfig,
-        cloud: {
-          ...globalConfig.cloud,
-          haproxy: {
-            ...globalConfig.cloud?.haproxy,
-            customRoutes: [...existing, newCustomRoute],
-          },
-        },
-      });
-      setNewCustomRoute({ name: '', port: 0, backend: '' });
-      setShowAddCustomRoute(false);
-      generateHaproxy();
-      showSuccess(`Custom route "${newCustomRoute.name}" added`);
-    } catch (e) {
-      showError(`Failed to add route: ${e instanceof Error ? e.message : String(e)}`);
-    }
-  };
-
-  const handleDeleteCustomRoute = async (name: string) => {
-    if (!globalConfig) return;
-    try {
-      const updated = (globalConfig.cloud?.haproxy?.customRoutes ?? []).filter(r => r.name !== name);
-      await updateConfig({
-        ...globalConfig,
-        cloud: {
-          ...globalConfig.cloud,
-          haproxy: {
-            ...globalConfig.cloud?.haproxy,
-            customRoutes: updated,
-          },
-        },
-      });
-      generateHaproxy();
-      showSuccess(`Custom route "${name}" removed`);
-    } catch (e) {
-      showError(`Failed to delete route: ${e instanceof Error ? e.message : String(e)}`);
-    }
-  };
-
   return (
-    <div className="space-y-6">
+    <div className="space-y-4">
       {/* Page header */}
-      <div className="flex items-center gap-4 mb-6">
+      <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">
             <Globe className="h-6 w-6 text-primary" />
           </div>
@@ -295,202 +132,209 @@ export function ServicesComponent() {
             <p className="text-muted-foreground">Registered domains and their networking status</p>
           </div>
         </div>
-
+        <Button onClick={() => setShowAddForm(!showAddForm)} className="gap-1">
-      {/* Alerts */}
+          <Plus className="h-4 w-4" />
-      {successMessage && (
+          Add Service
-        <Alert className="border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-950/20">
-          <CheckCircle className="h-4 w-4 text-green-600" />
-          <AlertDescription className="text-green-700 dark:text-green-300">{successMessage}</AlertDescription>
-        </Alert>
-      )}
-      {errorMessage && (
-        <Alert variant="error">
-          <AlertCircle className="h-4 w-4" />
-          <AlertDescription>{errorMessage}</AlertDescription>
-        </Alert>
-      )}
-
-      {/* Service List */}
-      <Card>
-        <CardHeader>
-          <div className="flex items-center justify-between">
-            <CardTitle>Registered Services</CardTitle>
-            {isHaproxyLoading ? (
-              <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
-            ) : (
-              <Badge variant={haproxyStatus?.status === 'active' ? 'success' : 'warning'} className="gap-1">
-                {haproxyStatus?.status === 'active' && <CheckCircle className="h-3 w-3" />}
-                {haproxyStatus?.status === 'active' ? 'Active' : haproxyStatus?.status ?? 'Stopped'}
-              </Badge>
-            )}
-          </div>
-        </CardHeader>
-        <CardContent>
-          {isServicesLoading ? (
-            <div className="flex items-center gap-2 text-sm text-muted-foreground">
-              <Loader2 className="h-4 w-4 animate-spin" />Loading services...
-            </div>
-          ) : services.length > 0 ? (
-            <div className="border rounded-lg text-sm">
-              {services.map(s => (
-                <ServiceRow
-                  key={s.domain}
-                  service={s}
-                  isExpanded={expandedDomain === s.domain}
-                  onToggle={() => setExpandedDomain(expandedDomain === s.domain ? null : s.domain)}
-                  certDomains={certDomains}
-                  ddnsDomains={ddnsDomains}
-                  dnsmasqIp={dnsmasqIp}
-                  publicIp={publicIp}
-                />
-              ))}
-            </div>
-          ) : (
-            <p className="text-xs text-muted-foreground">
-              No services registered. Services appear here when Wild Cloud or Wild Works registers them.
-            </p>
-          )}
-        </CardContent>
-      </Card>
-
-      {/* Custom TCP Routes */}
-      <Card>
-        <CardHeader>
-          <div className="flex items-center justify-between">
-            <CardTitle>Custom TCP Routes</CardTitle>
-            <Button size="sm" variant="outline" onClick={() => setShowAddCustomRoute(!showAddCustomRoute)} className="gap-1">
-              <Plus className="h-3 w-3" />
-              Add
         </Button>
       </div>
-        </CardHeader>
+
-        <CardContent className="space-y-3">
+      {/* Add Service Form */}
-          {showAddCustomRoute && (
+      {showAddForm && (
-            <Card className="p-3 border-dashed">
+        <Card className="border-dashed border-primary/50">
-              <div className="grid grid-cols-3 gap-2 mb-2">
+          <CardContent className="p-4 space-y-3">
+            <div className="grid grid-cols-2 gap-3">
               <div>
-                  <Label className="text-xs">Name</Label>
+                <Label className="text-xs">Domain</Label>
-                  <Input
+                <Input value={newDomain} onChange={e => setNewDomain(e.target.value)} placeholder="cloud.payne.io" className="mt-1 font-mono" />
-                    value={newCustomRoute.name}
-                    onChange={e => setNewCustomRoute(r => ({ ...r, name: e.target.value }))}
-                    placeholder="e.g. civil_ssh"
-                    className="mt-1 text-xs font-mono"
-                  />
-                </div>
-                <div>
-                  <Label className="text-xs">Listen Port</Label>
-                  <Input
-                    type="number"
-                    value={newCustomRoute.port || ''}
-                    onChange={e => setNewCustomRoute(r => ({ ...r, port: parseInt(e.target.value) || 0 }))}
-                    placeholder="2222"
-                    className="mt-1 text-xs font-mono"
-                  />
               </div>
               <div>
                 <Label className="text-xs">Backend (host:port)</Label>
-                  <Input
+                <Input value={newBackendAddr} onChange={e => setNewBackendAddr(e.target.value)} placeholder="192.168.8.240:443" className="mt-1 font-mono" />
-                    value={newCustomRoute.backend}
+              </div>
-                    onChange={e => setNewCustomRoute(r => ({ ...r, backend: e.target.value }))}
+              <div>
-                    placeholder="192.168.8.10:22"
+                <Label className="text-xs">Type</Label>
-                    className="mt-1 text-xs font-mono"
+                <Select value={newBackendType} onValueChange={setNewBackendType}>
-                  />
+                  <SelectTrigger className="mt-1"><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>
+                  </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={() => setShowAddCustomRoute(false)}>
+              <Button variant="outline" size="sm" onClick={() => setShowAddForm(false)}><X className="h-3 w-3 mr-1" />Cancel</Button>
-                  <X className="h-3 w-3 mr-1" />Cancel
-                </Button>
               <Button
                 size="sm"
-                  onClick={handleAddCustomRoute}
+                disabled={!newDomain || !newBackendAddr || registerMutation.isPending}
-                  disabled={!newCustomRoute.name || !newCustomRoute.port || !newCustomRoute.backend || isUpdating}
+                onClick={() => registerMutation.mutate({
+                  domain: newDomain,
+                  backend: { address: newBackendAddr, type: newBackendType },
+                  reach: newReach,
+                  subdomains: newSubdomains,
+                  source: 'manual',
+                })}
               >
-                  {isUpdating ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : <Check className="h-3 w-3 mr-1" />}
+                {registerMutation.isPending ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : <Plus className="h-3 w-3 mr-1" />}
-                  Add
+                Register
               </Button>
             </div>
+          </CardContent>
         </Card>
       )}
-          {(globalConfig?.cloud?.haproxy?.customRoutes ?? []).length === 0 ? (
+
-            <p className="text-xs text-muted-foreground">No custom routes configured.</p>
+      {/* Loading */}
-          ) : (
+      {isServicesLoading && (
-            <div className="border rounded-lg divide-y text-xs">
+        <Card className="p-8 text-center">
-              {(globalConfig?.cloud?.haproxy?.customRoutes ?? []).map(r => (
+          <Loader2 className="h-8 w-8 text-primary mx-auto mb-2 animate-spin" />
-                <div key={r.name} className="flex items-center justify-between px-3 py-1.5">
+          <p className="text-sm text-muted-foreground">Loading services...</p>
-                  <div className="flex items-center gap-3">
+        </Card>
-                    <span className="font-mono font-medium">{r.name}</span>
+      )}
-                    <span className="text-muted-foreground font-mono">:{r.port} &rarr; {r.backend}</span>
+
+      {/* Empty state */}
+      {!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>
+        </Card>
+      )}
+
+      {/* Service Cards */}
+      {services.map(service => {
+        const isExpanded = expandedDomain === service.domain;
+        const tlsStatus = getTlsStatus(service, certDomains);
+        const ddnsStatus2 = service.reach === 'public' ? 'ok' as const : 'na' as const;
+
+        return (
+          <Card key={service.domain} className="overflow-hidden">
+            <button
+              type="button"
+              onClick={() => setExpandedDomain(isExpanded ? null : 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" />
+                  <StatusDot status="ok" label="Proxy" />
+                  <StatusDot status={tlsStatus} label="TLS" />
+                  <StatusDot status={ddnsStatus2} label="DDNS" />
+                </div>
+              </div>
+            </button>
+
+            {isExpanded && (
+              <CardContent className="pt-0 pb-4 px-4 space-y-3">
+                <div className="border rounded-lg divide-y text-sm ml-6">
+                  <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)'}`}
+                    </span>
+                  </div>
+                  {service.reach === 'public' && (
+                    <div className="flex items-center justify-between px-3 py-1.5">
+                      <span className="text-muted-foreground">DNS (Public)</span>
+                      <span className="font-mono text-xs">A record → {publicIp ?? '—'}</span>
+                    </div>
+                  )}
+                  <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>
+                  </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>
+                  </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"
-                    className="h-6 w-6 p-0 text-muted-foreground hover:text-red-500"
+                    className="h-7 text-xs text-red-500 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950/20"
-                    onClick={() => handleDeleteCustomRoute(r.name)}
+                    onClick={(e) => { e.stopPropagation(); deregisterMutation.mutate(service.domain); }}
+                    disabled={deregisterMutation.isPending}
                   >
-                    <Trash2 className="h-3 w-3" />
+                    {deregisterMutation.isPending ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : <Trash2 className="h-3 w-3 mr-1" />}
+                    Deregister
                   </Button>
                 </div>
-              ))}
-            </div>
-          )}
               </CardContent>
+            )}
           </Card>
+        );
+      })}
 
       {/* Advanced */}
       <Collapsible open={showAdvanced} onOpenChange={handleShowAdvanced}>
         <Card>
-          <CardHeader>
           <CollapsibleTrigger asChild>
-              <button type="button" className="flex items-center justify-between w-full text-left">
+            <button type="button" className="flex items-center justify-between w-full text-left px-4 py-3">
-                <CardTitle>Advanced</CardTitle>
+              <span className="text-sm font-medium">Advanced</span>
-                {loadingAdvanced ? (
+              {loadingAdvanced ? <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
-                  <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                : showAdvanced ? <ChevronUp className="h-4 w-4 text-muted-foreground" />
-                ) : showAdvanced ? (
+                : <ChevronDown className="h-4 w-4 text-muted-foreground" />}
-                  <ChevronUp className="h-4 w-4 text-muted-foreground" />
-                ) : (
-                  <ChevronDown className="h-4 w-4 text-muted-foreground" />
-                )}
             </button>
           </CollapsibleTrigger>
-          </CardHeader>
           <CollapsibleContent>
             <CardContent className="space-y-4 pt-0">
               <div className="flex gap-2">
-                <Button onClick={() => generateHaproxy()} disabled={isHaproxyGenerating} className="gap-2">
+                <Button onClick={() => generateHaproxy()} disabled={isHaproxyGenerating} size="sm" className="gap-1">
-                  {isHaproxyGenerating ? <Loader2 className="h-4 w-4 animate-spin" /> : <Play className="h-4 w-4" />}
+                  {isHaproxyGenerating ? <Loader2 className="h-3 w-3 animate-spin" /> : <Play className="h-3 w-3" />}
-                  Generate &amp; Apply HAProxy
+                  Generate & Apply
                 </Button>
-                <Button variant="outline" onClick={() => restartHaproxy()} disabled={isHaproxyRestarting} className="gap-2">
+                <Button variant="outline" onClick={() => restartHaproxy()} disabled={isHaproxyRestarting} size="sm" className="gap-1">
-                  {isHaproxyRestarting ? <Loader2 className="h-4 w-4 animate-spin" /> : <RotateCw className="h-4 w-4" />}
+                  {isHaproxyRestarting ? <Loader2 className="h-3 w-3 animate-spin" /> : <RotateCw className="h-3 w-3" />}
                   Restart HAProxy
                 </Button>
               </div>
-
               {haproxyGenerateData && (
                 <Alert className="border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-950/20">
                   <CheckCircle className="h-4 w-4 text-green-600" />
-                  <AlertDescription className="text-green-700 dark:text-green-300">
+                  <AlertDescription className="text-green-700 dark:text-green-300">{haproxyGenerateData.message}</AlertDescription>
-                    {haproxyGenerateData.message}
-                  </AlertDescription>
                 </Alert>
               )}
               {haproxyGenerateError && (
-                <Alert variant="error">
+                <Alert variant="error"><AlertCircle className="h-4 w-4" /><AlertDescription>{(haproxyGenerateError as Error).message}</AlertDescription></Alert>
-                  <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" />
-              <div className="space-y-2">
-                <span className="text-sm font-medium">Generated config file</span>
-                <Textarea
-                  value={advancedConfig}
-                  readOnly
-                  className="font-mono text-xs min-h-[300px]"
-                  placeholder="# haproxy configuration"
-                />
-              </div>
             </CardContent>
           </CollapsibleContent>
         </Card>

web/src/services/api/networking.ts

@@ -19,6 +19,12 @@ export const servicesApi = {
   async list(): Promise<{ services: RegisteredService[] }> {
     return apiClient.get('/api/v1/services');
   },
+  async register(svc: { domain: string; backend: { address: string; type: string; health?: string }; reach: string; subdomains?: boolean; source?: string }): Promise<{ message: string; service: RegisteredService }> {
+    return apiClient.post('/api/v1/services', svc);
+  },
+  async deregister(domain: string): Promise<{ message: string }> {
+    return apiClient.delete(`/api/v1/services/${domain}`);
+  },
 };
 
 // HAProxy