Completes local-dev-master-slave-setup: dual-instance frontend tooling, module-capability gating, and master/slave protocol self-healing fixes

Frontend (Unit 2 completion): dual dev-server tooling (pnpm dev:slave,
pnpm dev:all), per-instance browser tab titles, and a backend
capability check (SystemController + useSystemCapabilities +
ModuleGuard) so a Master-only page is hidden on a slave instance
instead of assuming every backend has every module.

Master/slave protocol fixes surfaced by actually running master and
slave side by side locally:
- Deactivating a CMS instance (Inactive) now releases the slave's
  master gate instead of leaving it stuck on its last pushed status.
- The periodic integrity check now also re-pushes status to every
  reachable slave (previously URL-verification only) and runs once
  immediately on startup.
- Added the originally-specified (but never implemented) slave-pull
  path: a slave now periodically polls its own status from the master
  (GET /api/v1/SlaveStatus) and fails open to Available if the master
  is unreachable for too long, complementing the existing push.
- The slave's own Settings page can no longer "successfully" change
  local availability while the master controls it; it's now locked
  with an explanatory banner and the backend rejects the write with
  409 instead of silently no-op'ing it.
- CMS instance status badges now match the dashboard's color/icon
  styling instead of a plain grey badge.

Also corrected the master-cms-module design docs to match this
as-built behavior, and flagged (without a full rewrite) a larger,
pre-existing divergence between its inception-stage application
design and what construction actually built.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/src/components/cms/CmsInstanceList.tsx

@@ -1,6 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import { MoreHorizontal } from 'lucide-react';
-import { Badge } from '@/components/ui/badge';
+import { MoreHorizontal, CheckCircle, XCircle, MinusCircle } from 'lucide-react';
 import {
     Table,
     TableBody,
@@ -18,11 +17,23 @@ import {
 import { Button } from '@/components/ui/button';
 import type { CmsInstance, CmsInstanceStatus } from '@/api/types';
 
-function statusBadgeVariant(status: CmsInstanceStatus) {
-    if (status === 'Available') return 'secondary';
-    if (status === 'NotAvailable') return 'destructive';
-    return 'outline';
-}
+const STATUS_BADGE_CONFIG: Record<
+    CmsInstanceStatus,
+    { colorClass: string; Icon: React.ComponentType<{ className?: string }> }
+> = {
+    Available: {
+        colorClass: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
+        Icon: CheckCircle,
+    },
+    NotAvailable: {
+        colorClass: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
+        Icon: XCircle,
+    },
+    Inactive: {
+        colorClass: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300',
+        Icon: MinusCircle,
+    },
+};
 
 function formatDate(iso: string | null): string {
     if (!iso) return '—';
@@ -50,7 +61,9 @@ export function CmsInstanceList({ instances, onSetStatus }: CmsInstanceListProps
                 </TableRow>
             </TableHeader>
             <TableBody>
-                {instances.map((instance) => (
+                {instances.map((instance) => {
+                    const { colorClass, Icon } = STATUS_BADGE_CONFIG[instance.status];
+                    return (
                     <TableRow
                         key={instance.id}
                         data-testid="cms-instance-row"
@@ -59,12 +72,13 @@ export function CmsInstanceList({ instances, onSetStatus }: CmsInstanceListProps
                         <TableCell>{instance.name}</TableCell>
                         <TableCell>{instance.url}</TableCell>
                         <TableCell>
-                            <Badge
-                                variant={statusBadgeVariant(instance.status)}
+                            <div
                                 data-testid="cms-instance-status-badge"
+                                className={`inline-flex items-center gap-2 rounded-full px-3 py-1 text-sm font-medium ${colorClass}`}
                             >
-                                {t(`cms.status.${instance.status}`)}
-                            </Badge>
+                                <Icon className="size-4" />
+                                <span>{t(`cms.status.${instance.status}`)}</span>
+                            </div>
                         </TableCell>
                         <TableCell>{formatDate(instance.lastContactedAt)}</TableCell>
                         <TableCell>{instance.disableMessage ?? '—'}</TableCell>
@@ -90,7 +104,8 @@ export function CmsInstanceList({ instances, onSetStatus }: CmsInstanceListProps
                             </DropdownMenu>
                         </TableCell>
                     </TableRow>
-                ))}
+                    );
+                })}
             </TableBody>
         </Table>
     );