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/DNS/index.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Alert, Button, Drawer, Form, Input, InputNumber, Modal, Select, Space, Switch, Tabs, Tag, Typography, message } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
-import { GlobalOutlined, NodeIndexOutlined, PlusOutlined, SettingOutlined } from '@ant-design/icons'
+import { CheckCircleOutlined, CloseCircleOutlined, GlobalOutlined, NodeIndexOutlined, PlusOutlined, SettingOutlined } from '@ant-design/icons'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 
@@ -71,8 +71,21 @@ async function listSystemInterfaces(): Promise<SystemIface[]> {
   return (r.data.data as { interfaces?: SystemIface[] }).interfaces ?? []
 }
 
+interface ServiceStatus { label: string; unit: string; active: boolean; state: string }
+
 export default function DNSPage() {
   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 unbound = services?.find(s => s.unit === 'unbound.service' || s.unit === 'unbound')
+
   return (
     <div>
       <PageHeader
@@ -82,6 +95,17 @@ export default function DNSPage() {
       />
       <Tabs
         defaultActiveKey="zones"
+        tabBarExtraContent={unbound && (
+          <Tag
+            icon={unbound.active ? <CheckCircleOutlined /> : <CloseCircleOutlined />}
+            color={unbound.active ? 'green' : 'red'}
+          >
+            <Space size={4}>
+              <span>unbound</span>
+              <span style={{ fontWeight: 400, opacity: 0.85 }}>{unbound.state}</span>
+            </Space>
+          </Tag>
+        )}
         items={[
           { key: 'zones',    label: <span><NodeIndexOutlined /> {t('dns.tabs.zones')}</span>,    children: <ZonesTab /> },
           { key: 'settings', label: <span><SettingOutlined /> {t('dns.tabs.settings')}</span>,  children: <SettingsTab /> },