feat(ui): Service-Badges + Routen-Toggle

Firewall: nftables-Status im Tab-Bar (tabBarExtraContent).
DNS: unbound-Status im Tab-Bar.
Routes: inline Switch statt on/off-Tags.

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

management-ui/src/pages/Firewall/index.tsx

@@ -1,7 +1,9 @@
-import { Tabs } from 'antd'
-import { FireOutlined } from '@ant-design/icons'
+import { Space, Tag, Tabs } from 'antd'
+import { CheckCircleOutlined, CloseCircleOutlined, FireOutlined } from '@ant-design/icons'
 import { useTranslation } from 'react-i18next'
+import { useQuery } from '@tanstack/react-query'
 
+import apiClient, { isEnvelope } from '../../api/client'
 import PageHeader from '../../components/PageHeader'
 import AddressObjectsTab from './AddressObjects'
 import AddressGroupsTab from './AddressGroups'
@@ -12,9 +14,21 @@ import NATRulesTab from './NATRules'
 import SystemRulesCard from './SystemRules'
 import ZonesTab from './Zones'
 
+interface ServiceStatus { label: string; unit: string; active: boolean; state: string }
+
 export default function FirewallPage() {
   const { t } = useTranslation()
 
+  const { data: services } = useQuery({
+    queryKey: ['system', 'services'],
+    queryFn: async () => {
+      const r = await apiClient.get('/system/services')
+      return isEnvelope(r.data) ? (r.data.data as { services: ServiceStatus[] }).services : []
+    },
+    refetchInterval: 30_000,
+  })
+  const nftables = services?.find(s => s.unit === 'nftables.service' || s.unit === 'nftables')
+
   const tabs = [
     { key: 'rules',    label: t('fw.tabs.rules'),    children: <RulesTab /> },
     { key: 'nat',      label: t('fw.tabs.nat'),      children: <NATRulesTab /> },
@@ -33,7 +47,21 @@ export default function FirewallPage() {
         title={t('fw.title')}
         subtitle={t('fw.intro')}
       />
-      <Tabs items={tabs} defaultActiveKey="rules" />
+      <Tabs
+        items={tabs}
+        defaultActiveKey="rules"
+        tabBarExtraContent={nftables && (
+          <Tag
+            icon={nftables.active ? <CheckCircleOutlined /> : <CloseCircleOutlined />}
+            color={nftables.active ? 'green' : 'red'}
+          >
+            <Space size={4}>
+              <span>nftables</span>
+              <span style={{ fontWeight: 400, opacity: 0.85 }}>{nftables.state}</span>
+            </Space>
+          </Tag>
+        )}
+      />
     </div>
   )
 }