💚 fix ci: add ACTIONS_RESULTS_URL for actions/upload-artifact@v4

- Type route protocol and flag fields as strings
- Distinguish Direct, SRv6 ENDXSID, and SRv6 ENDSID routes
- Add dynamic protocol filtering and protocol-specific counters
- Use distinct violet and emerald badges for ENDXSID and ENDSID

.gitea/workflows/build.yml

@@ -0,0 +1,39 @@
+name: Build Dashboard
+
+on:
+  push:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out source
+        uses: actions/checkout@v4
+
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 11
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          cache: pnpm
+          cache-dependency-path: pnpm-lock.yaml
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build dashboard
+        run: pnpm build
+
+      - name: Upload dashboard artifact
+        uses: actions/upload-artifact@v4
+        env:
+          ACTIONS_RESULTS_URL: https://git.code.cq.cn/
+        with:
+          name: dashboard-dist
+          path: dist/
+          if-no-files-found: error
+          retention-days: 14

package.json

@@ -15,8 +15,10 @@
     "@base-ui/react": "^1.7.0",
     "@fontsource-variable/inter": "^5.3.0",
     "@tailwindcss/vite": "^4",
+    "@xyflow/react": "^12.11.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "d3-force": "^3.0.0",
     "lucide-react": "^1.33.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
@@ -27,6 +29,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^10",
+    "@types/d3-force": "^3.0.10",
     "@types/node": "^24",
     "@types/react": "^19",
     "@types/react-dom": "^19",

pnpm-lock.yaml

@@ -17,12 +17,18 @@ importers:
       '@tailwindcss/vite':
         specifier: ^4
         version: 4.3.3(vite@8.2.2(@types/node@24.13.3)(jiti@2.7.0))
+      '@xyflow/react':
+        specifier: ^12.11.3
+        version: 12.11.3(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      d3-force:
+        specifier: ^3.0.0
+        version: 3.0.0
       lucide-react:
         specifier: ^1.33.0
         version: 1.33.0(react@19.2.8)
@@ -48,6 +54,9 @@ importers:
       '@eslint/js':
         specifier: ^10
         version: 10.0.1(eslint@10.9.0(jiti@2.7.0))
+      '@types/d3-force':
+        specifier: ^3.0.10
+        version: 3.0.10
       '@types/node':
         specifier: ^24
         version: 24.13.3
@@ -347,10 +356,6 @@ packages:
   '@jridgewell/gen-mapping@0.3.12':
     resolution: {integrity: sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==}
 
-  '@jridgewell/gen-mapping@0.3.5':
-    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
-    engines: {node: '>=6.0.0'}
-
   '@jridgewell/remapping@2.3.5':
     resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
 
@@ -358,19 +363,6 @@ packages:
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
 
-  '@jridgewell/set-array@1.2.1':
-    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
-    engines: {node: '>=6.0.0'}
-
-  '@jridgewell/sourcemap-codec@1.4.10':
-    resolution: {integrity: sha512-Ht8wIW5v165atIX1p+JvKR5ONzUyF4Ac8DZIQ5kZs9zrb6M8SJNXpx1zn04rn65VjBMygRoMXcyYwNK0fT7bEg==}
-
-  '@jridgewell/sourcemap-codec@1.4.14':
-    resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
-
-  '@jridgewell/sourcemap-codec@1.5.0':
-    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
-
   '@jridgewell/sourcemap-codec@1.5.5':
     resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
 
@@ -609,6 +601,27 @@ packages:
   '@ts-morph/common@0.27.0':
     resolution: {integrity: sha512-Wf29UqxWDpc+i61k3oIOzcUfQt79PIT9y/MWfAGlrkjg6lBC1hwDECLXPVJAhWjiGbfBCxZd65F/LIZF3+jeJQ==}
 
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/d3-drag@3.0.7':
+    resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==}
+
+  '@types/d3-force@3.0.10':
+    resolution: {integrity: sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==}
+
+  '@types/d3-interpolate@3.0.4':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+
+  '@types/d3-selection@3.0.11':
+    resolution: {integrity: sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==}
+
+  '@types/d3-transition@3.0.9':
+    resolution: {integrity: sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==}
+
+  '@types/d3-zoom@3.0.8':
+    resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==}
+
   '@types/esrecurse@4.3.1':
     resolution: {integrity: sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==}
 
@@ -707,6 +720,22 @@ packages:
       oxc-transform-react:
         optional: true
 
+  '@xyflow/react@12.11.3':
+    resolution: {integrity: sha512-G3jogHz2GWUtIOkhavUGno2YzY9u6fILIJBttfsBendb0/HWB90JG+sOTAvlIMEwyvq9zgy9V9ZQSwyQjR5QzQ==}
+    peerDependencies:
+      '@types/react': '>=17'
+      '@types/react-dom': '>=17'
+      react: '>=17'
+      react-dom: '>=17'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@xyflow/system@0.0.80':
+    resolution: {integrity: sha512-ywc3ZqG91brzWrH1WlwMdIX4goOfrpBy6AbLdVSaof/Xx9l138ijIKRExM6EkMro2F+OImGmSiA/WKcXvKVcfA==}
+
   accepts@2.0.0:
     resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
     engines: {node: '>= 0.6'}
@@ -836,6 +865,9 @@ packages:
   class-variance-authority@0.7.1:
     resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
 
+  classcat@5.0.5:
+    resolution: {integrity: sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==}
+
   cli-cursor@5.0.0:
     resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
     engines: {node: '>=18'}
@@ -918,6 +950,52 @@ packages:
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-dispatch@3.0.1:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+
+  d3-drag@3.0.0:
+    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
+    engines: {node: '>=12'}
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-force@3.0.0:
+    resolution: {integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-quadtree@3.0.1:
+    resolution: {integrity: sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==}
+    engines: {node: '>=12'}
+
+  d3-selection@3.0.0:
+    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
+  d3-transition@3.0.1:
+    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      d3-selection: 2 - 3
+
+  d3-zoom@3.0.0:
+    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
+    engines: {node: '>=12'}
+
   debounce-fn@4.0.0:
     resolution: {integrity: sha512-8pYCQiL9Xdcg0UPSD3d+0KMlOjp+KGU5EPwYddgzQ7DATsg4fuUDjQtsYLmWjnk2obnNHgV3vE2Y4jejSOJVBQ==}
     engines: {node: '>=10'}
@@ -2405,6 +2483,21 @@ packages:
   zod@4.4.3:
     resolution: {integrity: sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==}
 
+  zustand@4.5.7:
+    resolution: {integrity: sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==}
+    engines: {node: '>=12.7.0'}
+    peerDependencies:
+      '@types/react': '>=16.8'
+      immer: '>=9.0.6'
+      react: '>=16.8'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+
 snapshots:
 
   '@babel/code-frame@7.29.7':
@@ -2723,36 +2816,22 @@ snapshots:
 
   '@jridgewell/gen-mapping@0.3.12':
     dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/sourcemap-codec': 1.5.5
-      '@jridgewell/trace-mapping': 0.3.31
-
-  '@jridgewell/gen-mapping@0.3.5':
-    dependencies:
-      '@jridgewell/set-array': 1.2.1
-      '@jridgewell/sourcemap-codec': 1.4.10
       '@jridgewell/trace-mapping': 0.3.31
 
   '@jridgewell/remapping@2.3.5':
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/gen-mapping': 0.3.12
       '@jridgewell/trace-mapping': 0.3.31
 
   '@jridgewell/resolve-uri@3.1.2': {}
 
-  '@jridgewell/set-array@1.2.1': {}
-
-  '@jridgewell/sourcemap-codec@1.4.10': {}
-
-  '@jridgewell/sourcemap-codec@1.4.14': {}
-
-  '@jridgewell/sourcemap-codec@1.5.0': {}
-
   '@jridgewell/sourcemap-codec@1.5.5': {}
 
   '@jridgewell/trace-mapping@0.3.31':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.4.14
+      '@jridgewell/sourcemap-codec': 1.5.5
 
   '@modelcontextprotocol/sdk@1.30.0(zod@3.24.1)':
     dependencies:
@@ -2918,6 +2997,29 @@ snapshots:
       minimatch: 10.2.6
       path-browserify: 1.0.1
 
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-drag@3.0.7':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-force@3.0.10': {}
+
+  '@types/d3-interpolate@3.0.4':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/d3-selection@3.0.11': {}
+
+  '@types/d3-transition@3.0.9':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-zoom@3.0.8':
+    dependencies:
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-selection': 3.0.11
+
   '@types/esrecurse@4.3.1': {}
 
   '@types/estree@1.0.9': {}
@@ -3034,6 +3136,31 @@ snapshots:
       '@rolldown/pluginutils': 1.0.1
       vite: 8.2.2(@types/node@24.13.3)(jiti@2.7.0)
 
+  '@xyflow/react@12.11.3(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@xyflow/system': 0.0.80
+      classcat: 5.0.5
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      zustand: 4.5.7(@types/react@19.2.18)(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+    transitivePeerDependencies:
+      - immer
+
+  '@xyflow/system@0.0.80':
+    dependencies:
+      '@types/d3-drag': 3.0.7
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-selection': 3.0.11
+      '@types/d3-transition': 3.0.9
+      '@types/d3-zoom': 3.0.8
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+
   accepts@2.0.0:
     dependencies:
       mime-types: 3.0.2
@@ -3153,6 +3280,8 @@ snapshots:
     dependencies:
       clsx: 2.1.1
 
+  classcat@5.0.5: {}
+
   cli-cursor@5.0.0:
     dependencies:
       restore-cursor: 5.1.0
@@ -3222,6 +3351,50 @@ snapshots:
 
   csstype@3.2.3: {}
 
+  d3-color@3.1.0: {}
+
+  d3-dispatch@3.0.1: {}
+
+  d3-drag@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
+
+  d3-ease@3.0.1: {}
+
+  d3-force@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-timer: 3.0.1
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-quadtree@3.0.1: {}
+
+  d3-selection@3.0.0: {}
+
+  d3-timer@3.0.1: {}
+
+  d3-transition@3.0.1(d3-selection@3.0.0):
+    dependencies:
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
+
+  d3-zoom@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
   debounce-fn@4.0.0:
     dependencies:
       mimic-fn: 3.1.0
@@ -4541,3 +4714,10 @@ snapshots:
   zod@3.24.1: {}
 
   zod@4.4.3: {}
+
+  zustand@4.5.7(@types/react@19.2.18)(react@19.2.8):
+    dependencies:
+      use-sync-external-store: 1.6.0(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      react: 19.2.8

src/App.tsx

@@ -1,24 +1,47 @@
-import { useState } from 'react'
+import { useMemo } from 'react'
 import { SidebarProvider, SidebarInset } from '@/components/ui/sidebar'
 import { TooltipProvider } from '@/components/ui/tooltip'
-import { AppSidebar, type NavTab } from '@/components/layout/app-sidebar'
+import { Toaster } from '@/components/ui/toast'
+import { AppSidebar } from '@/components/layout/app-sidebar'
 import { AppHeader } from '@/components/layout/app-header'
-import { DashboardPage } from '@/pages/dashboard'
+import { OverviewPage } from '@/pages/overview'
+import { ConnectionsPage } from '@/pages/connections'
+import { SettingsPage } from '@/pages/settings'
+import { TopologyPage } from '@/pages/topology'
+import { RoutingTablePage } from '@/pages/routing-table'
 import { useKlalbSSE } from '@/hooks/use-klalb-sse'
+import { useHashRoute } from '@/hooks/use-hash-route'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 
 export function App() {
-  const [currentTab, setCurrentTab] = useState<NavTab>('dashboard')
+  const { currentTab, navigate } = useHashRoute()
-  const { status, links, isConnected, reconnectAll, refreshStatus } = useKlalbSSE()
+  const {
+    status,
+    links,
+    isConnected,
+    reconnectAll,
+    refreshStatus,
+    addLink,
+    removeLink,
+    executeLinkAction,
+  } = useKlalbSSE()
+
+  const safeLinks = Array.isArray(links) ? links : []
+
+  const establishedLinksCount = useMemo(() => {
+    return safeLinks.filter(
+      (l) => l && (l.stateCode === 2 || (l.state && l.state.toLowerCase().includes('up')) || l.state === 'ESTABLISHED')
+    ).length
+  }, [safeLinks])
 
   return (
     <TooltipProvider>
       <SidebarProvider>
         <AppSidebar
           currentTab={currentTab}
-          onSelectTab={setCurrentTab}
+          onSelectTab={navigate}
-          onlineDevices={status?.onlineDevices}
+          linksCount={safeLinks.length}
-          linksCount={links.length}
+          establishedLinksCount={establishedLinksCount}
           isConnected={isConnected}
         />
         <SidebarInset className="flex flex-col">
@@ -30,15 +53,35 @@ export function App() {
           />
 
           <main className="flex flex-1 flex-col overflow-y-auto">
-            {currentTab === 'dashboard' && (
+            {currentTab === 'overview' && (
-              <DashboardPage
+              <OverviewPage
                 status={status}
-                links={links}
+                links={safeLinks}
                 isConnected={isConnected}
               />
             )}
 
-            {currentTab !== 'dashboard' && (
+            {currentTab === 'connections' && (
+              <ConnectionsPage
+                links={safeLinks}
+                isConnected={isConnected}
+                onAddLink={addLink}
+                onRemoveLink={removeLink}
+                onLinkAction={executeLinkAction}
+              />
+            )}
+
+            {currentTab === 'settings' && <SettingsPage />}
+
+            {currentTab === 'topology' && <TopologyPage />}
+
+            {currentTab === 'routing-table' && <RoutingTablePage />}
+
+            {currentTab !== 'overview' &&
+              currentTab !== 'connections' &&
+              currentTab !== 'settings' &&
+              currentTab !== 'topology' &&
+              currentTab !== 'routing-table' && (
                 <div className="flex flex-1 items-center justify-center p-8">
                   <Card className="max-w-md text-center">
                     <CardHeader>
@@ -46,7 +89,7 @@ export function App() {
                     </CardHeader>
                     <CardContent>
                       <p className="text-sm text-muted-foreground">
-                      该模块即将实现。当前可查看「仪表盘总览」获取实时指标监控。
+                        该模块即将实现。当前可查看「总览」、「连接」与「系统配置」进行实时监控与管理。
                       </p>
                     </CardContent>
                   </Card>
@@ -54,6 +97,7 @@ export function App() {
               )}
           </main>
         </SidebarInset>
+        <Toaster />
       </SidebarProvider>
     </TooltipProvider>
   )

src/components/connections/connection-action-menu.tsx

@@ -0,0 +1,82 @@
+import {
+  MoreVertical,
+  RotateCcw,
+  Unplug,
+  Trash2,
+  Copy,
+} from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import type { RemoteLinkItem } from '@/types/api'
+
+interface ConnectionActionMenuProps {
+  link: RemoteLinkItem
+  onLinkAction: (
+    address: string,
+    action: 'reconnect' | 'disconnect' | 'remove'
+  ) => Promise<{ success: boolean; message?: string }>
+  onRemoveLink: (address: string) => Promise<{ success: boolean; message?: string }>
+  onCopyText: (text: string) => void
+}
+
+export function ConnectionActionMenu({
+  link,
+  onLinkAction,
+  onRemoveLink,
+  onCopyText,
+}: ConnectionActionMenuProps) {
+  const targetAddress = link.socketAddress || link.name
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button variant="ghost" size="icon-xs" className="text-muted-foreground">
+            <MoreVertical className="size-4" />
+          </Button>
+        }
+      />
+      <DropdownMenuContent align="end" className="w-48">
+        <DropdownMenuItem
+          onClick={() => onLinkAction(link.name, 'reconnect')}
+        >
+          <RotateCcw data-icon="inline-start" />
+          立即重连
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => onLinkAction(link.name, 'disconnect')}
+        >
+          <Unplug data-icon="inline-start" />
+          断开连接
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          onClick={() => onCopyText(targetAddress)}
+        >
+          <Copy data-icon="inline-start" />
+          复制 Socket 地址
+        </DropdownMenuItem>
+        {link.vaddr && (
+          <DropdownMenuItem onClick={() => onCopyText(link.vaddr!)}>
+            <Copy data-icon="inline-start" />
+            复制远端 SID
+          </DropdownMenuItem>
+        )}
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          variant="destructive"
+          onClick={() => onRemoveLink(targetAddress)}
+        >
+          <Trash2 data-icon="inline-start" />
+          删除连接
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

src/components/layout/app-sidebar.tsx

@@ -3,7 +3,6 @@ import {
   Network,
   GitFork,
   Share2,
-  Cpu,
   Settings,
   Activity,
   Layers,
@@ -24,38 +23,37 @@ import {
 } from '@/components/ui/sidebar'
 import { Badge } from '@/components/ui/badge'
 
-export type NavTab = 'dashboard' | 'links' | 'routes' | 'topology' | 'interfaces' | 'settings'
+export type NavTab = 'overview' | 'connections' | 'routing-table' | 'topology' | 'settings'
 
 interface AppSidebarProps {
   currentTab: NavTab
   onSelectTab: (tab: NavTab) => void
-  onlineDevices?: number
   linksCount?: number
+  establishedLinksCount?: number
   isConnected?: boolean
 }
 
 export function AppSidebar({
   currentTab,
   onSelectTab,
-  onlineDevices = 0,
   linksCount = 0,
+  establishedLinksCount = 0,
   isConnected = false,
 }: AppSidebarProps) {
   const navItems = [
     {
-      id: 'dashboard' as NavTab,
+      id: 'overview' as NavTab,
-      title: '仪表盘总览',
+      title: '总览',
       icon: LayoutDashboard,
-      badge: isConnected ? 'Live' : undefined,
     },
     {
-      id: 'links' as NavTab,
+      id: 'connections' as NavTab,
-      title: '线路与链路',
+      title: '连接',
       icon: Network,
-      badge: linksCount > 0 ? `${linksCount}` : undefined,
+      badge: linksCount > 0 ? `${establishedLinksCount}/${linksCount}` : undefined,
     },
     {
-      id: 'routes' as NavTab,
+      id: 'routing-table' as NavTab,
       title: 'SRv6 路由表',
       icon: GitFork,
     },
@@ -63,12 +61,6 @@ export function AppSidebar({
       id: 'topology' as NavTab,
       title: '网络拓扑',
       icon: Share2,
-      badge: onlineDevices > 0 ? `${onlineDevices}` : undefined,
-    },
-    {
-      id: 'interfaces' as NavTab,
-      title: '网卡接口',
-      icon: Cpu,
     },
     {
       id: 'settings' as NavTab,
@@ -159,4 +151,3 @@ export function AppSidebar({
     </Sidebar>
   )
 }
-

src/components/topology/device-node.tsx

@@ -0,0 +1,96 @@
+import { memo } from 'react'
+import { Handle, Position, type NodeProps, type Node } from '@xyflow/react'
+import { Server, Copy, Check } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+export interface DeviceNodeData {
+  address: string
+  compressedAddress?: string
+  isSelf: boolean
+  deviceName?: string
+  onCopy?: (text: string) => void
+  copiedId?: string | null
+  [key: string]: unknown
+}
+
+export type DeviceNodeType = Node<DeviceNodeData, 'device'>
+
+function DeviceNodeComponent({ data, selected }: NodeProps<Node<DeviceNodeData>>) {
+  const { deviceName, compressedAddress, address, isSelf, onCopy, copiedId } = data
+  const isCopied = copiedId === address
+
+  return (
+    <div
+      className={cn(
+        'group relative flex w-fit min-w-56 cursor-pointer flex-col gap-1 rounded-xl border bg-card px-3 py-2.5 shadow-sm transition-all',
+        'hover:border-primary/50 hover:shadow-md',
+        selected && 'border-primary ring-2 ring-primary/30',
+        isSelf &&
+          'border-primary/60 bg-linear-to-br from-primary/5 via-card to-card'
+      )}
+    >
+      <Handle
+        type="target"
+        position={Position.Top}
+        className="!h-2 !w-2 !border-none !bg-transparent"
+        isConnectable={false}
+      />
+
+      <div className="flex items-center gap-2">
+        <div
+          className={cn(
+            'flex size-7 shrink-0 items-center justify-center rounded-lg',
+            isSelf ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'
+          )}
+        >
+          <Server className="size-4" />
+        </div>
+
+        <div className="flex min-w-0 flex-col leading-tight">
+          <div className="flex items-center gap-1.5">
+            <span className="max-w-60 truncate text-xs font-semibold text-foreground">
+              {deviceName || '未命名节点'}
+            </span>
+            {isSelf && (
+              <span className="shrink-0 rounded-full bg-primary/15 px-1.5 py-px text-[9px] font-bold uppercase tracking-wide text-primary">
+                本机
+              </span>
+            )}
+          </div>
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation()
+              onCopy?.(address)
+            }}
+            className="flex items-center gap-0.5 font-mono text-[10px] text-muted-foreground hover:text-foreground"
+            title="点击复制完整地址"
+          >
+            <span className="whitespace-nowrap">{compressedAddress || address}</span>
+            {isCopied ? (
+              <Check className="size-2.5 shrink-0 text-emerald-500" />
+            ) : (
+              <Copy className="size-2.5 shrink-0 opacity-40 group-hover:opacity-100" />
+            )}
+          </button>
+        </div>
+      </div>
+
+      {isSelf && (
+        <span className="absolute -top-1 -right-1 flex size-3">
+          <span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-60" />
+          <span className="relative inline-flex size-3 rounded-full border-2 border-card bg-emerald-500" />
+        </span>
+      )}
+
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        className="!h-2 !w-2 !border-none !bg-transparent"
+        isConnectable={false}
+      />
+    </div>
+  )
+}
+
+export const DeviceNode = memo(DeviceNodeComponent)

src/components/topology/link-edge.tsx

@@ -0,0 +1,94 @@
+import { memo } from 'react'
+import {
+  BaseEdge,
+  EdgeLabelRenderer,
+  getSmoothStepPath,
+  useReactFlow,
+  type EdgeProps,
+  type Edge,
+} from '@xyflow/react'
+import { formatNanoDelay } from '@/lib/format'
+
+export interface LinkEdgeData {
+  delay: number
+  cost: number
+  [key: string]: unknown
+}
+
+export type LinkEdgeType = Edge<LinkEdgeData, 'link'>
+
+function delayColor(delayNs: number): { stroke: string; badge: string } {
+  const ms = delayNs / 1_000_000
+  if (delayNs <= 0 || !Number.isFinite(delayNs)) {
+    return { stroke: 'hsl(var(--muted-foreground))', badge: 'bg-muted text-muted-foreground' }
+  }
+  if (ms < 1) {
+    return { stroke: '#10b981', badge: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400' }
+  }
+  if (ms < 20) {
+    return { stroke: '#f59e0b', badge: 'bg-amber-500/15 text-amber-600 dark:text-amber-400' }
+  }
+  return { stroke: '#f43f5e', badge: 'bg-rose-500/15 text-rose-600 dark:text-rose-400' }
+}
+
+function LinkEdgeComponent({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data,
+  selected,
+}: EdgeProps<LinkEdgeType>) {
+  const { setEdges } = useReactFlow()
+  const [edgePath, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    borderRadius: 16,
+  })
+
+  const delay = data?.delay ?? 0
+  const { stroke, badge } = delayColor(delay)
+  const showLabel = delay > 0 && Number.isFinite(delay)
+
+  return (
+    <>
+      <BaseEdge
+        id={id}
+        path={edgePath}
+        style={{
+          strokeWidth: selected ? 2.5 : 1.75,
+          stroke,
+          opacity: selected ? 1 : 0.85,
+        }}
+      />
+      {showLabel && (
+        <EdgeLabelRenderer>
+          <div
+            style={{
+              transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
+            }}
+            className="pointer-events-none absolute"
+          >
+            <button
+              type="button"
+              onClick={() => setEdges((eds) => eds.filter((e) => e.id !== id))}
+              className={`pointer-events-auto cursor-pointer rounded-md border border-border/60 px-1.5 py-px font-mono text-[10px] font-semibold tabular-nums shadow-2xs backdrop-blur-xs transition-opacity hover:opacity-70 ${badge}`}
+              title="点击隐藏该链路"
+            >
+              {formatNanoDelay(delay)}
+            </button>
+          </div>
+        </EdgeLabelRenderer>
+      )}
+    </>
+  )
+}
+
+export const LinkEdge = memo(LinkEdgeComponent)

src/components/topology/node-detail-sheet.tsx

@@ -0,0 +1,204 @@
+import {
+  Server,
+  Copy,
+  Check,
+  Gauge,
+  Network,
+  Clock3,
+  FileText,
+} from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import { Skeleton } from '@/components/ui/skeleton'
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet'
+import { formatNanoDelay } from '@/lib/format'
+
+export interface SheetNodeInfo {
+  id: string
+  address: string
+  compressedAddress?: string
+  isSelf: boolean
+  deviceName?: string
+}
+
+export interface SheetNeighborInfo {
+  address: string
+  deviceName?: string
+  delay: number
+  cost: number
+}
+
+interface NodeDetailSheetProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  node: SheetNodeInfo | null
+  neighbors: SheetNeighborInfo[]
+  copiedId: string | null
+  onCopy: (text: string) => void
+  /** 设备描述（来自 /api/node-info 查询） */
+  description?: string | null
+  descriptionLoading?: boolean
+}
+
+export function NodeDetailSheet({
+  open,
+  onOpenChange,
+  node,
+  neighbors,
+  copiedId,
+  onCopy,
+  description,
+  descriptionLoading,
+}: NodeDetailSheetProps) {
+  if (!node) return null
+
+  const isCopied = copiedId === node.address
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="w-full gap-0 sm:max-w-sm">
+        <SheetHeader className="border-b">
+          <div className="flex items-center gap-2.5 pt-4">
+            <div
+              className={`flex size-9 shrink-0 items-center justify-center rounded-lg ${
+                node.isSelf
+                  ? 'bg-primary text-primary-foreground'
+                  : 'bg-muted text-muted-foreground'
+              }`}
+            >
+              <Server className="size-5" />
+            </div>
+            <div className="min-w-0">
+              <SheetTitle className="flex items-center gap-2 truncate">
+                {node.deviceName || '未命名节点'}
+                {node.isSelf && (
+                  <Badge variant="default" className="px-1.5 py-0 text-[10px]">
+                    本机
+                  </Badge>
+                )}
+              </SheetTitle>
+              <SheetDescription className="truncate font-mono text-xs">
+                {node.compressedAddress || node.address}
+              </SheetDescription>
+            </div>
+          </div>
+        </SheetHeader>
+
+        <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4">
+          {/* Device Description */}
+          <div className="flex flex-col gap-1.5 rounded-lg border bg-muted/30 p-3">
+            <span className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
+              <FileText className="size-3.5" />
+              设备描述
+            </span>
+            {descriptionLoading ? (
+              <div className="flex flex-col gap-1.5">
+                <Skeleton className="h-3.5 w-full" />
+                <Skeleton className="h-3.5 w-2/3" />
+              </div>
+            ) : (
+              <span className="whitespace-pre-wrap break-words text-xs leading-relaxed text-foreground">
+                {description ? description : '无描述信息'}
+              </span>
+            )}
+          </div>
+
+          {/* Full Address */}
+          <div className="flex flex-col gap-1.5 rounded-lg border bg-muted/30 p-3">
+            <span className="text-xs font-medium text-muted-foreground">
+              完整 SRv6 地址 (SID)
+            </span>
+            <div className="flex items-center justify-between gap-2">
+              <code className="break-all font-mono text-xs font-semibold text-foreground select-all">
+                {node.address}
+              </code>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon-xs"
+                className="shrink-0"
+                onClick={() => onCopy(node.address)}
+                title="复制完整地址"
+              >
+                {isCopied ? (
+                  <Check className="size-3.5 text-emerald-500" />
+                ) : (
+                  <Copy className="size-3.5" />
+                )}
+              </Button>
+            </div>
+          </div>
+
+          {/* Stats */}
+          <div className="grid grid-cols-2 gap-2">
+            <div className="flex flex-col gap-0.5 rounded-lg border bg-card p-2.5">
+              <div className="flex items-center gap-1 text-[11px] text-muted-foreground">
+                <Network className="size-3" />
+                邻居数量
+              </div>
+              <span className="font-mono text-lg font-bold">{neighbors.length}</span>
+            </div>
+            <div className="flex flex-col gap-0.5 rounded-lg border bg-card p-2.5">
+              <div className="flex items-center gap-1 text-[11px] text-muted-foreground">
+                <Gauge className="size-3" />
+                平均时延
+              </div>
+              <span className="font-mono text-lg font-bold">
+                {neighbors.length > 0
+                  ? formatNanoDelay(
+                      neighbors.reduce((acc, n) => acc + n.delay, 0) / neighbors.length
+                    )
+                  : '--'}
+              </span>
+            </div>
+          </div>
+
+          <Separator />
+
+          {/* Neighbor list */}
+          <div className="flex flex-col gap-2">
+            <span className="text-xs font-semibold text-muted-foreground">邻居链路</span>
+            {neighbors.length === 0 ? (
+              <div className="rounded-lg border border-dashed p-4 text-center text-xs text-muted-foreground">
+                暂无可达邻居节点
+              </div>
+            ) : (
+              neighbors.map((nb) => (
+                <div
+                  key={nb.address}
+                  className="flex items-center justify-between gap-2 rounded-lg border bg-card px-2.5 py-2"
+                >
+                  <div className="flex min-w-0 flex-col leading-tight">
+                    <span className="truncate text-xs font-medium text-foreground">
+                      {nb.deviceName || '未命名节点'}
+                    </span>
+                    <span className="truncate font-mono text-[10px] text-muted-foreground">
+                      {nb.address}
+                    </span>
+                  </div>
+                  <div className="flex shrink-0 items-center gap-1 rounded-md px-1.5 py-0.5 font-mono text-[11px] font-semibold">
+                    <Clock3 className="size-3" />
+                    {formatNanoDelay(nb.delay)}
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+
+          {/* Reserved for Kperf speed test */}
+          <Button variant="outline" size="sm" disabled title="测速功能即将接入">
+            <Gauge data-icon="inline-start" />
+            发起 Kperf 测速（即将支持）
+          </Button>
+        </div>
+      </SheetContent>
+    </Sheet>
+  )
+}

src/components/topology/topology-canvas.tsx

@@ -0,0 +1,134 @@
+import { useCallback, useMemo } from 'react'
+import {
+  ReactFlow,
+  Background,
+  BackgroundVariant,
+  Controls,
+  MiniMap,
+  type Node,
+  type Edge,
+  type NodeMouseHandler,
+  type OnNodesChange,
+} from '@xyflow/react'
+import '@xyflow/react/dist/style.css'
+import { DeviceNode, type DeviceNodeData } from './device-node'
+import { LinkEdge, type LinkEdgeData } from './link-edge'
+import type { LayoutEdge, LayoutNode } from '@/hooks/use-topology'
+
+const nodeTypes = { device: DeviceNode }
+const edgeTypes = { link: LinkEdge }
+
+interface TopologyCanvasProps {
+  nodes: LayoutNode[]
+  edges: LayoutEdge[]
+  searchQuery: string
+  copiedId: string | null
+  onCopy: (text: string) => void
+  /** 用户拖拽结束后的位置回写（id -> 坐标），用于轮询刷新时保持位置 */
+  onNodeDragEnd?: (id: string, x: number, y: number) => void
+  onNodeSelect: (nodeId: string | null) => void
+}
+
+function matchesSearch(node: LayoutNode, query: string): boolean {
+  if (!query.trim()) return true
+  const q = query.toLowerCase()
+  return (
+    (node.deviceName ?? '').toLowerCase().includes(q) ||
+    node.address.toLowerCase().includes(q) ||
+    (node.compressedAddress ?? '').toLowerCase().includes(q)
+  )
+}
+
+export function TopologyCanvas({
+  nodes: layoutNodes,
+  edges: layoutEdges,
+  searchQuery,
+  copiedId,
+  onCopy,
+  onNodeDragEnd,
+  onNodeSelect,
+}: TopologyCanvasProps) {
+  // 完全受控渲染：由外部数据纯派生，无内部镜像状态
+  const flowNodes = useMemo<Node<DeviceNodeData>[]>(
+    () =>
+      layoutNodes.map((n) => ({
+        id: n.id,
+        type: 'device' as const,
+        position: { x: n.x, y: n.y },
+        data: {
+          address: n.address,
+          compressedAddress: n.compressedAddress,
+          isSelf: n.isSelf,
+          deviceName: n.deviceName,
+          copiedId,
+          onCopy,
+        },
+        style: matchesSearch(n, searchQuery) ? undefined : { opacity: 0.25 },
+      })),
+    [layoutNodes, searchQuery, copiedId, onCopy]
+  )
+
+  const flowEdges = useMemo<Edge<LinkEdgeData>[]>(
+    () =>
+      layoutEdges.map((e) => ({
+        id: e.id,
+        source: e.source,
+        target: e.target,
+        type: 'link' as const,
+        data: { delay: e.delay, cost: e.cost },
+      })),
+    [layoutEdges]
+  )
+
+  // 拖拽过程中仅更新受控坐标（position 变更）；其余变更类型忽略
+  const onNodesChange: OnNodesChange<Node<DeviceNodeData>> = useCallback(
+    (changes) => {
+      if (!onNodeDragEnd) return
+      for (const change of changes) {
+        if (
+          change.type === 'position' &&
+          change.position &&
+          !change.dragging
+        ) {
+          onNodeDragEnd(change.id, change.position.x, change.position.y)
+        }
+      }
+    },
+    [onNodeDragEnd]
+  )
+
+  const handleNodeClick: NodeMouseHandler<Node<DeviceNodeData>> = useCallback(
+    (_, node) => {
+      onNodeSelect(node.id)
+    },
+    [onNodeSelect]
+  )
+
+  const handlePaneClick = useCallback(() => {
+    onNodeSelect(null)
+  }, [onNodeSelect])
+
+  return (
+    <ReactFlow
+      nodes={flowNodes}
+      edges={flowEdges}
+      onNodesChange={onNodesChange}
+      nodeTypes={nodeTypes}
+      edgeTypes={edgeTypes}
+      onNodeClick={handleNodeClick}
+      onPaneClick={handlePaneClick}
+      fitView
+      fitViewOptions={{ padding: 0.2, maxZoom: 1.25 }}
+      minZoom={0.15}
+      maxZoom={2.5}
+      proOptions={{ hideAttribution: true }}
+      nodesConnectable={false}
+      deleteKeyCode={null}
+      colorMode="system"
+    >
+      <Background variant={BackgroundVariant.Dots} gap={22} size={1.4} />
+      <Controls showInteractive={false} position="bottom-left" />
+      <MiniMap pannable zoomable className="!hidden sm:!block" />
+    </ReactFlow>
+  )
+}

src/components/ui/dialog.tsx

@@ -0,0 +1,158 @@
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-2 right-2"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon
+            />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant="outline" />}>
+          Close
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "font-heading text-base leading-none font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,268 @@
+"use client"
+
+import * as React from "react"
+import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+
+import { cn } from "@/lib/utils"
+import { ChevronRightIcon, CheckIcon } from "lucide-react"
+
+function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
+  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
+  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+}
+
+function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
+  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
+}
+
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  ...props
+}: MenuPrimitive.Popup.Props &
+  Pick<
+    MenuPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuPrimitive.Popup
+          data-slot="dropdown-menu-content"
+          className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
+  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: MenuPrimitive.GroupLabel.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.GroupLabel
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: MenuPrimitive.Item.Props & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </MenuPrimitive.SubmenuTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  align = "start",
+  alignOffset = -3,
+  side = "right",
+  sideOffset = 0,
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+  return (
+    <DropdownMenuContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn("w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: MenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <MenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon
+          />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
+  return (
+    <MenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: MenuPrimitive.RadioItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <MenuPrimitive.RadioItemIndicator>
+          <CheckIcon
+          />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: MenuPrimitive.Separator.Props) {
+  return (
+    <MenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

src/components/ui/field.tsx

@@ -0,0 +1,238 @@
+"use client"
+
+import { useMemo } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+        horizontal:
+          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        responsive:
+          "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-0.5 leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}

src/components/ui/label.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Label({ className, ...props }: React.ComponentProps<"label">) {
+  return (
+    <label
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

src/components/ui/select.tsx

@@ -0,0 +1,199 @@
+import * as React from "react"
+import { Select as SelectPrimitive } from "@base-ui/react/select"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+
+const Select = SelectPrimitive.Root
+
+function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+  return (
+    <SelectPrimitive.Value
+      data-slot="select-value"
+      className={cn("flex flex-1 text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: SelectPrimitive.Trigger.Props & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon
+        render={
+          <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+        }
+      />
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  alignItemWithTrigger = true,
+  ...props
+}: SelectPrimitive.Popup.Props &
+  Pick<
+    SelectPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
+  >) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        alignItemWithTrigger={alignItemWithTrigger}
+        className="isolate z-50"
+      >
+        <SelectPrimitive.Popup
+          data-slot="select-content"
+          data-align-trigger={alignItemWithTrigger}
+          className={cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        >
+          <SelectScrollUpButton />
+          <SelectPrimitive.List>{children}</SelectPrimitive.List>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: SelectPrimitive.GroupLabel.Props) {
+  return (
+    <SelectPrimitive.GroupLabel
+      data-slot="select-label"
+      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.Item.Props) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
+        {children}
+      </SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none" />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: SelectPrimitive.Separator.Props) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
+  return (
+    <SelectPrimitive.ScrollUpArrow
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon
+      />
+    </SelectPrimitive.ScrollUpArrow>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
+  return (
+    <SelectPrimitive.ScrollDownArrow
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon
+      />
+    </SelectPrimitive.ScrollDownArrow>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

src/components/ui/separator.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
 
 import { cn } from "@/lib/utils"

src/components/ui/slider.tsx

@@ -0,0 +1,52 @@
+import { Slider as SliderPrimitive } from "@base-ui/react/slider"
+
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: SliderPrimitive.Root.Props) {
+  const _values = Array.isArray(value)
+    ? value
+    : Array.isArray(defaultValue)
+      ? defaultValue
+      : [min, max]
+
+  return (
+    <SliderPrimitive.Root
+      className={cn("data-horizontal:w-full data-vertical:h-full", className)}
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      thumbAlignment="edge"
+      {...props}
+    >
+      <SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col">
+        <SliderPrimitive.Track
+          data-slot="slider-track"
+          className="relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
+        >
+          <SliderPrimitive.Indicator
+            data-slot="slider-range"
+            className="bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+          />
+        </SliderPrimitive.Track>
+        {Array.from({ length: _values.length }, (_, index) => (
+          <SliderPrimitive.Thumb
+            data-slot="slider-thumb"
+            key={index}
+            className="relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
+          />
+        ))}
+      </SliderPrimitive.Control>
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }

src/components/ui/switch.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: SwitchPrimitive.Root.Props & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

src/components/ui/table.tsx

@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

src/components/ui/tabs.tsx

@@ -0,0 +1,80 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

src/components/ui/toast.tsx

@@ -0,0 +1,232 @@
+import * as React from "react"
+import { Toast as ToastPrimitive } from "@base-ui/react/toast"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon, CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+
+const toast = ToastPrimitive.createToastManager()
+
+function ToastProvider({ ...props }: ToastPrimitive.Provider.Props) {
+  return <ToastPrimitive.Provider {...props} />
+}
+
+function ToastPortal({ ...props }: ToastPrimitive.Portal.Props) {
+  return <ToastPrimitive.Portal data-slot="toast-portal" {...props} />
+}
+
+function ToastViewport({ className, ...props }: ToastPrimitive.Viewport.Props) {
+  return (
+    <ToastPrimitive.Viewport
+      data-slot="toast-viewport"
+      className={cn(
+        "pointer-events-none fixed inset-x-4 bottom-4 z-50 mx-auto w-auto max-w-sm outline-none sm:right-4 sm:left-auto sm:mx-0 sm:w-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function Toast({ className, ...props }: ToastPrimitive.Root.Props) {
+  return (
+    <ToastPrimitive.Root
+      data-slot="toast"
+      className={cn(
+        "group/toast pointer-events-auto absolute right-0 bottom-0 z-[calc(1000-var(--toast-index))] w-full origin-bottom rounded-2xl border bg-popover text-popover-foreground shadow-lg will-change-transform outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]",
+        "h-(--height) [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms]",
+        "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']",
+        "data-expanded:h-(--toast-height) data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]",
+        "data-limited:opacity-0 data-starting-style:[transform:translateY(150%)]",
+        "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]",
+        "data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]",
+        "data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]",
+        "data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
+        "data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
+        "data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]",
+        "data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]",
+        "data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
+        "data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ToastContent({ className, ...props }: ToastPrimitive.Content.Props) {
+  return (
+    <ToastPrimitive.Content
+      data-slot="toast-content"
+      className={cn(
+        "flex h-full items-center gap-3 overflow-hidden p-4 transition-opacity duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ToastTitle({ className, ...props }: ToastPrimitive.Title.Props) {
+  return (
+    <ToastPrimitive.Title
+      data-slot="toast-title"
+      className={cn("text-sm font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function ToastDescription({
+  className,
+  ...props
+}: ToastPrimitive.Description.Props) {
+  return (
+    <ToastPrimitive.Description
+      data-slot="toast-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function ToastAction({
+  className,
+  render = <Button variant="outline" size="sm" />,
+  ...props
+}: ToastPrimitive.Action.Props) {
+  return (
+    <ToastPrimitive.Action
+      data-slot="toast-action"
+      render={render}
+      className={cn("shrink-0", className)}
+      {...props}
+    />
+  )
+}
+
+function ToastClose({
+  className,
+  children,
+  render = <Button variant="ghost" size="icon-sm" />,
+  ...props
+}: ToastPrimitive.Close.Props) {
+  return (
+    <ToastPrimitive.Close
+      data-slot="toast-close"
+      aria-label="Close toast"
+      render={render}
+      className={cn(
+        "relative shrink-0 text-muted-foreground after:absolute after:-inset-2 after:content-[''] hover:text-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children ?? (
+        <XIcon aria-hidden="true" />
+      )}
+    </ToastPrimitive.Close>
+  )
+}
+
+function ToastIcon({ type }: { type: string | undefined }) {
+  let icon: React.ReactNode = null
+
+  if (type === "success") {
+    icon = (
+      <CircleCheckIcon aria-hidden="true" />
+    )
+  }
+
+  if (type === "info") {
+    icon = (
+      <InfoIcon aria-hidden="true" />
+    )
+  }
+
+  if (type === "warning") {
+    icon = (
+      <TriangleAlertIcon aria-hidden="true" />
+    )
+  }
+
+  if (type === "error") {
+    icon = (
+      <OctagonXIcon className="text-destructive" aria-hidden="true" />
+    )
+  }
+
+  if (type === "loading") {
+    icon = (
+      <Loader2Icon className="animate-spin" aria-hidden="true" />
+    )
+  }
+
+  if (!icon) {
+    return null
+  }
+
+  return (
+    <span
+      data-slot="toast-icon"
+      className="shrink-0 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4"
+    >
+      {icon}
+    </span>
+  )
+}
+
+function ToastList() {
+  const { toasts } = ToastPrimitive.useToastManager()
+
+  return toasts.map((toastItem) => (
+    <Toast key={toastItem.id} toast={toastItem}>
+      <ToastContent>
+        <ToastIcon type={toastItem.type} />
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <ToastTitle />
+          <ToastDescription />
+        </div>
+        <ToastAction />
+        <ToastClose />
+      </ToastContent>
+    </Toast>
+  ))
+}
+
+function Toaster({
+  children,
+  toastManager = toast,
+  ...props
+}: ToastPrimitive.Provider.Props) {
+  return (
+    <ToastProvider toastManager={toastManager} {...props}>
+      {children}
+      <ToastPortal>
+        <ToastViewport>
+          <ToastList />
+        </ToastViewport>
+      </ToastPortal>
+    </ToastProvider>
+  )
+}
+
+const createToastManager = ToastPrimitive.createToastManager
+const useToastManager = ToastPrimitive.useToastManager
+
+export {
+  Toaster,
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastContent,
+  ToastDescription,
+  ToastPortal,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+  createToastManager,
+  toast,
+  useToastManager,
+}

src/hooks/use-hash-route.ts

@@ -0,0 +1,58 @@
+import { useState, useEffect, useCallback } from 'react'
+import type { NavTab } from '@/components/layout/app-sidebar'
+
+const VALID_TABS: NavTab[] = [
+  'overview',
+  'connections',
+  'routing-table',
+  'topology',
+  'settings',
+]
+
+function getTabFromHash(hash: string): NavTab {
+  const cleanHash = hash.replace(/^#\/?/, '').trim().toLowerCase()
+  if (!cleanHash || cleanHash === '') {
+    return 'overview'
+  }
+  // 向后兼容旧的 dashboard hash
+  if (cleanHash === 'dashboard') {
+    return 'overview'
+  }
+  const matchingTab = VALID_TABS.find((tab) => tab === cleanHash)
+  return matchingTab || 'overview'
+}
+
+export function useHashRoute() {
+  const [currentTab, setCurrentTabState] = useState<NavTab>(() =>
+    getTabFromHash(window.location.hash)
+  )
+
+  useEffect(() => {
+    const handleHashChange = () => {
+      const newTab = getTabFromHash(window.location.hash)
+      setCurrentTabState(newTab)
+    }
+
+    // If current hash is empty, initialize with #/overview
+    if (!window.location.hash || window.location.hash === '#' || window.location.hash === '#/') {
+      window.location.hash = '#/overview'
+    } else if (window.location.hash === '#/dashboard') {
+      window.location.hash = '#/overview'
+    }
+
+    window.addEventListener('hashchange', handleHashChange)
+    return () => {
+      window.removeEventListener('hashchange', handleHashChange)
+    }
+  }, [])
+
+  const navigate = useCallback((tab: NavTab) => {
+    window.location.hash = `#/${tab}`
+    setCurrentTabState(tab)
+  }, [])
+
+  return {
+    currentTab,
+    navigate,
+  }
+}

src/hooks/use-klalb-config.ts

@@ -0,0 +1,85 @@
+import { useState, useEffect, useCallback } from 'react'
+import type { KLALBControllerConfig } from '@/types/api'
+
+interface UseKlalbConfigResult {
+  config: KLALBControllerConfig | null
+  isLoading: boolean
+  isSaving: boolean
+  error: string | null
+  saveSuccess: boolean
+  fetchConfig: () => Promise<void>
+  saveConfig: (newConfig: KLALBControllerConfig) => Promise<{ success: boolean; message?: string }>
+}
+
+export function useKlalbConfig(): UseKlalbConfigResult {
+  const [config, setConfig] = useState<KLALBControllerConfig | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+  const [isSaving, setIsSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [saveSuccess, setSaveSuccess] = useState(false)
+
+  const fetchConfig = useCallback(async () => {
+    setIsLoading(true)
+    try {
+      const res = await fetch('/api/config')
+      if (res.ok) {
+        const data = (await res.json()) as KLALBControllerConfig
+        setConfig(data)
+        setError(null)
+      } else {
+        setError('获取配置失败: 服务器返回异常状态')
+      }
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : String(err)
+      setError(`无法连接到配置接口: ${msg}`)
+    } finally {
+      setIsLoading(false)
+    }
+  }, [])
+
+  const saveConfig = useCallback(
+    async (newConfig: KLALBControllerConfig): Promise<{ success: boolean; message?: string }> => {
+      setIsSaving(true)
+      setSaveSuccess(false)
+      setError(null)
+      try {
+        const res = await fetch('/api/config', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(newConfig),
+        })
+        const data = await res.json()
+        if (res.ok && data.success === true) {
+          setConfig(newConfig)
+          setSaveSuccess(true)
+          setTimeout(() => setSaveSuccess(false), 3000)
+          return { success: true }
+        }
+        const errMsg = data.error || '保存配置失败'
+        setError(errMsg)
+        return { success: false, message: errMsg }
+      } catch (err: unknown) {
+        const msg = err instanceof Error ? err.message : String(err)
+        setError(msg)
+        return { success: false, message: msg }
+      } finally {
+        setIsSaving(false)
+      }
+    },
+    []
+  )
+
+  useEffect(() => {
+    fetchConfig()
+  }, [fetchConfig])
+
+  return {
+    config,
+    isLoading,
+    isSaving,
+    error,
+    saveSuccess,
+    fetchConfig,
+    saveConfig,
+  }
+}

src/hooks/use-klalb-sse.ts

@@ -8,6 +8,12 @@ interface UseKlalbSSEResult {
   error: string | null
   reconnectAll: () => Promise<boolean>
   refreshStatus: () => Promise<void>
+  addLink: (address: string) => Promise<{ success: boolean; message?: string }>
+  removeLink: (address: string) => Promise<{ success: boolean; message?: string }>
+  executeLinkAction: (
+    address: string,
+    action: 'reconnect' | 'disconnect' | 'remove'
+  ) => Promise<{ success: boolean; message?: string }>
 }
 
 export function useKlalbSSE(): UseKlalbSSEResult {
@@ -20,14 +26,21 @@ export function useKlalbSSE(): UseKlalbSSEResult {
 
   const refreshStatus = useCallback(async () => {
     try {
-      const res = await fetch('/api/status')
+      const [statusRes, linksRes] = await Promise.all([
-      if (res.ok) {
+        fetch('/api/status'),
-        const data = (await res.json()) as SystemStatus
+        fetch('/api/links'),
+      ])
+      if (statusRes.ok) {
+        const data = (await statusRes.json()) as SystemStatus
         setStatus(data)
-        setError(null)
       }
+      if (linksRes.ok) {
+        const linksData = await linksRes.json()
+        setLinks(Array.isArray(linksData) ? linksData : [])
+      }
+      setError(null)
     } catch (err) {
-      console.warn('Failed to fetch status fallback:', err)
+      console.warn('Failed to fetch status/links fallback:', err)
     }
   }, [])
 
@@ -41,6 +54,74 @@ export function useKlalbSSE(): UseKlalbSSEResult {
     }
   }, [])
 
+  const addLink = useCallback(
+    async (address: string): Promise<{ success: boolean; message?: string }> => {
+      try {
+        const res = await fetch('/api/links', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ address: address.trim() }),
+        })
+        const data = await res.json()
+        if (res.ok && data.success) {
+          refreshStatus()
+          return { success: true }
+        }
+        return { success: false, message: data.error || '添加连接失败' }
+      } catch (err: unknown) {
+        const msg = err instanceof Error ? err.message : String(err)
+        return { success: false, message: msg }
+      }
+    },
+    [refreshStatus]
+  )
+
+  const removeLink = useCallback(
+    async (address: string): Promise<{ success: boolean; message?: string }> => {
+      try {
+        const res = await fetch(
+          `/api/links?address=${encodeURIComponent(address.trim())}`,
+          { method: 'DELETE' }
+        )
+        const data = await res.json()
+        if (res.ok && data.success) {
+          refreshStatus()
+          return { success: true }
+        }
+        return { success: false, message: data.error || '移除连接失败' }
+      } catch (err: unknown) {
+        const msg = err instanceof Error ? err.message : String(err)
+        return { success: false, message: msg }
+      }
+    },
+    [refreshStatus]
+  )
+
+  const executeLinkAction = useCallback(
+    async (
+      address: string,
+      action: 'reconnect' | 'disconnect' | 'remove'
+    ): Promise<{ success: boolean; message?: string }> => {
+      try {
+        const res = await fetch('/api/links/action', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ address, action }),
+        })
+        const data = await res.json()
+        if (res.ok && data.success) {
+          refreshStatus()
+          return { success: true }
+        }
+        return { success: false, message: data.error || `执行 ${action} 失败` }
+      } catch (err: unknown) {
+        const msg = err instanceof Error ? err.message : String(err)
+        return { success: false, message: msg }
+      }
+    },
+    [refreshStatus]
+  )
+
   useEffect(() => {
     let isUnmounted = false
 
@@ -65,7 +146,7 @@ export function useKlalbSSE(): UseKlalbSSEResult {
             if (data.status) {
               setStatus(data.status)
             }
-            if (data.links) {
+            if (Array.isArray(data.links)) {
               setLinks(data.links)
             }
             setIsConnected(true)
@@ -124,5 +205,8 @@ export function useKlalbSSE(): UseKlalbSSEResult {
     error,
     reconnectAll,
     refreshStatus,
+    addLink,
+    removeLink,
+    executeLinkAction,
   }
 }

src/hooks/use-routing-table.ts

@@ -0,0 +1,47 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { RoutingTableItem } from '@/types/api'
+
+const POLL_INTERVAL_MS = 1000
+
+interface UseRoutingTableResult {
+  routingTable: RoutingTableItem[]
+  isLoading: boolean
+  error: string | null
+  refresh: () => void
+}
+
+export function useRoutingTable(): UseRoutingTableResult {
+  const [routingTable, setRoutingTable] = useState<RoutingTableItem[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const mountedRef = useRef(true)
+
+  const fetchRoutingTable = useCallback(async () => {
+    try {
+      const response = await fetch('/api/routing-table')
+      if (!response.ok) throw new Error(`路由接口异常 (${response.status})`)
+      const payload: unknown = await response.json()
+      if (!Array.isArray(payload)) throw new Error('路由接口返回格式异常')
+      if (!mountedRef.current) return
+      setRoutingTable(payload as RoutingTableItem[])
+      setError(null)
+    } catch (err: unknown) {
+      if (mountedRef.current) setError(err instanceof Error ? err.message : String(err))
+    } finally {
+      if (mountedRef.current) setIsLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    mountedRef.current = true
+    void fetchRoutingTable()
+    const timer = window.setInterval(() => void fetchRoutingTable(), POLL_INTERVAL_MS)
+    return () => {
+      mountedRef.current = false
+      window.clearInterval(timer)
+    }
+  }, [fetchRoutingTable])
+
+  const refresh = useCallback(() => void fetchRoutingTable(), [fetchRoutingTable])
+  return { routingTable, isLoading, error, refresh }
+}

src/hooks/use-topology.ts

@@ -0,0 +1,217 @@
+import { useState, useEffect, useRef, useCallback } from 'react'
+import {
+  forceSimulation,
+  forceLink,
+  forceManyBody,
+  forceCenter,
+  type SimulationNodeDatum,
+} from 'd3-force'
+import type { TopologyNode, TopologyEdge, TopologyData } from '@/types/api'
+
+export interface LayoutNode extends SimulationNodeDatum {
+  id: string
+  address: string
+  compressedAddress?: string
+  isSelf: boolean
+  deviceName?: string
+  x: number
+  y: number
+}
+
+export interface LayoutEdge {
+  id: string
+  source: string
+  target: string
+  delay: number
+  cost: number
+}
+
+interface UseTopologyResult {
+  nodes: LayoutNode[]
+  edges: LayoutEdge[]
+  isLoading: boolean
+  error: string | null
+  relayout: () => void
+}
+
+const POLL_INTERVAL_MS = 1000
+
+function structureSignature(nodes: TopologyNode[], edges: TopologyEdge[]): string {
+  const n = nodes.map((x) => x.id).sort().join(',')
+  const e = edges.map((x) => `${x.source}->${x.target}`).sort().join(',')
+  return `${n}|${e}`
+}
+
+function computeForceLayout(
+  topoNodes: TopologyNode[],
+  topoEdges: TopologyEdge[]
+): Map<string, { x: number; y: number }> {
+  const positions = new Map<string, { x: number; y: number }>()
+  if (topoNodes.length === 0) return positions
+
+  // 节点卡片较宽（~300px），初始环形半径与斥力需足够大以避免重叠
+  const simNodes: LayoutNode[] = topoNodes.map((n, i) => ({
+    ...n,
+    x: Math.cos((2 * Math.PI * i) / Math.max(topoNodes.length, 1)) * 450,
+    y: Math.sin((2 * Math.PI * i) / Math.max(topoNodes.length, 1)) * 450,
+  }))
+  const nodeIds = new Set(simNodes.map((n) => n.id))
+
+  const simLinks = topoEdges
+    .filter((e) => nodeIds.has(e.source) && nodeIds.has(e.target))
+    .map((e) => {
+      const cost = e.cost > 0 ? e.cost : e.delay
+      // 延迟越高距离越远；基准距离大于卡片宽度，保证相邻节点不挤压
+      const distance = Math.max(280, Math.min(650, 300 + Math.log10(Math.max(cost, 1)) * 35))
+      return { source: e.source, target: e.target, distance }
+    })
+
+  const simulation = forceSimulation(simNodes)
+    .force('charge', forceManyBody().strength(-2200))
+    .force(
+      'link',
+      forceLink(simLinks)
+        .id((d: SimulationNodeDatum) => (d as LayoutNode).id)
+        .distance((l: any) => l.distance ?? 300)
+        .strength(0.5)
+    )
+    .force('center', forceCenter(0, 0))
+    .stop()
+
+  // 同步运行固定迭代数，提取最终坐标
+  const ticks = 300
+  for (let i = 0; i < ticks; i++) simulation.tick()
+
+  for (const n of simNodes) {
+    positions.set(n.id, { x: n.x ?? 0, y: n.y ?? 0 })
+  }
+  return positions
+}
+
+function makeEdgeId(source: string, target: string): string {
+  return source < target ? `${source}__${target}` : `${target}__${source}`
+}
+
+export function useTopology(): UseTopologyResult {
+  const [nodes, setNodes] = useState<LayoutNode[]>([])
+  const [edges, setEdges] = useState<LayoutEdge[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const lastSignatureRef = useRef<string>('')
+  const savedPositionsRef = useRef<Map<string, { x: number; y: number }>>(new Map())
+  const layoutPositionsRef = useRef<Map<string, { x: number; y: number }>>(new Map())
+  const relayoutRequestedRef = useRef(false)
+  const mountedRef = useRef(true)
+
+  const fetchTopology = useCallback(async () => {
+    try {
+      const res = await fetch('/api/nodes')
+      if (!res.ok) {
+        setError(`拓扑接口异常 (${res.status})`)
+        return
+      }
+      const payload = (await res.json()) as Partial<TopologyData>
+      if (!mountedRef.current) return
+
+      const topoNodes: TopologyNode[] = Array.isArray(payload.nodes)
+        ? payload.nodes.filter(
+            (n) => n && typeof n.id === 'string' && n.id !== ''
+          )
+        : []
+      const topoEdgesRaw: TopologyEdge[] = Array.isArray(payload.edges)
+        ? payload.edges
+        : []
+
+      // 边去重（后端已做一次，这里再保险）并生成稳定 id
+      const edgeMap = new Map<string, TopologyEdge>()
+      for (const e of topoEdgesRaw) {
+        if (!e.source || !e.target || e.source === e.target) continue
+        const id = makeEdgeId(e.source, e.target)
+        edgeMap.set(id, { ...e })
+      }
+      const topoEdges = Array.from(edgeMap.values())
+
+      const signature = structureSignature(topoNodes, topoEdges)
+      const structureChanged =
+        signature !== lastSignatureRef.current ||
+        relayoutRequestedRef.current
+
+      if (structureChanged) {
+        let positions: Map<string, { x: number; y: number }>
+        if (
+          !relayoutRequestedRef.current &&
+          layoutPositionsRef.current.size > 0 &&
+          lastSignatureRef.current === ''
+        ) {
+          positions = layoutPositionsRef.current
+        } else {
+          positions = computeForceLayout(topoNodes, topoEdges)
+        }
+
+        // 合并用户拖拽过的位置
+        for (const [id, pos] of savedPositionsRef.current) {
+          if (positions.has(id)) positions.set(id, pos)
+        }
+
+        layoutPositionsRef.current = positions
+        lastSignatureRef.current = signature
+        relayoutRequestedRef.current = false
+
+        setNodes(
+          topoNodes.map((n) => ({
+            ...n,
+            ...(positions.get(n.id) ?? { x: 0, y: 0 }),
+          }))
+        )
+      } else {
+        // 结构未变：仅原地刷新延迟等元数据，位置保持不变
+        setNodes((prev) =>
+          prev.length === topoNodes.length
+            ? prev.map((n) => {
+                const fresh = topoNodes.find((t) => t.id === n.id)
+                return fresh ? { ...n, deviceName: fresh.deviceName } : n
+              })
+            : prev
+        )
+      }
+
+      setEdges(
+        topoEdges.map((e) => ({
+          id: makeEdgeId(e.source, e.target),
+          source: e.source,
+          target: e.target,
+          delay: e.delay,
+          cost: e.cost,
+        }))
+      )
+      setError(null)
+    } catch (err: unknown) {
+      if (mountedRef.current) {
+        const msg = err instanceof Error ? err.message : String(err)
+        setError(msg)
+      }
+    } finally {
+      if (mountedRef.current) setIsLoading(false)
+    }
+  }, [])
+
+  const relayout = useCallback(() => {
+    relayoutRequestedRef.current = true
+    savedPositionsRef.current.clear()
+    fetchTopology()
+  }, [fetchTopology])
+
+  // 轮询
+  useEffect(() => {
+    mountedRef.current = true
+    fetchTopology()
+    const timer = window.setInterval(fetchTopology, POLL_INTERVAL_MS)
+    return () => {
+      mountedRef.current = false
+      window.clearInterval(timer)
+    }
+  }, [fetchTopology])
+
+  return { nodes, edges, isLoading, error, relayout }
+}

src/lib/format.ts

@@ -29,7 +29,10 @@ export function formatPPS(pps?: number): string {
  * @param nanoDelay 纳秒 (ns)
  */
 export function formatNanoDelay(nanoDelay?: number): string {
-  if (nanoDelay === undefined || nanoDelay === null || isNaN(nanoDelay) || nanoDelay <= 0) {
+  if (nanoDelay === undefined || nanoDelay === null || isNaN(nanoDelay)) {
+    return 'NaN'
+  }
+  if (nanoDelay <= 0) {
     return '0 ns'
   }
   if (nanoDelay >= 1_000_000_000) {

src/pages/connections.tsx

@@ -0,0 +1,584 @@
+import { ConnectionActionMenu } from '@/components/connections/connection-action-menu'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import {
+  formatBytes,
+  formatNanoDelay,
+  formatPPS,
+  formatSpeed,
+} from '@/lib/format'
+import type { RemoteLinkItem } from '@/types/api'
+import {
+  ArrowDown,
+  ArrowUp,
+  Check,
+  ChevronsLeftRightEllipsis,
+  Copy,
+  LayoutGrid,
+  List,
+  Network,
+  Plus,
+  Search,
+  Plug,
+  Unplug
+} from "lucide-react"
+import { useMemo, useState } from 'react'
+
+interface ConnectionsPageProps {
+  links: RemoteLinkItem[]
+  isConnected: boolean
+  onAddLink: (address: string) => Promise<{ success: boolean; message?: string }>
+  onRemoveLink: (address: string) => Promise<{ success: boolean; message?: string }>
+  onLinkAction: (
+    address: string,
+    action: 'reconnect' | 'disconnect' | 'remove'
+  ) => Promise<{ success: boolean; message?: string }>
+}
+
+export function ConnectionsPage({
+  links,
+  onAddLink,
+  onRemoveLink,
+  onLinkAction,
+}: ConnectionsPageProps) {
+  const [viewMode, setViewMode] = useState<'grid' | 'table'>('grid')
+  const [searchQuery, setSearchQuery] = useState('')
+  const [statusFilter, setStatusFilter] = useState<'all' | 'up' | 'down'>('all')
+
+  // Add Dialog State
+  const [isAddOpen, setIsAddOpen] = useState(false)
+  const [newAddress, setNewAddress] = useState('')
+  const [addError, setAddError] = useState<string | null>(null)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  // Copy Feedback state
+  const [copiedAddress, setCopiedAddress] = useState<string | null>(null)
+
+  const copyText = (text: string) => {
+    navigator.clipboard.writeText(text)
+    setCopiedAddress(text)
+    setTimeout(() => setCopiedAddress(null), 2000)
+  }
+
+  // Summary calculations
+  const stats = useMemo(() => {
+    const total = links.length
+    const up = links.filter((l) => l.stateCode === 2 || l.state.toLowerCase().includes('up') || l.state === 'ESTABLISHED').length
+    const down = total - up
+    const totalUpSpeed = links.reduce((acc, l) => acc + (l.upSpeed || 0), 0)
+    const totalDownSpeed = links.reduce((acc, l) => acc + (l.downSpeed || 0), 0)
+    return { total, up, down, totalUpSpeed, totalDownSpeed }
+  }, [links])
+
+  // Filtered links
+  const filteredLinks = useMemo(() => {
+    return links.filter((link) => {
+      const matchSearch =
+        searchQuery === '' ||
+        link.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        (link.socketAddress &&
+          link.socketAddress.toLowerCase().includes(searchQuery.toLowerCase())) ||
+        (link.vaddr &&
+          link.vaddr.toLowerCase().includes(searchQuery.toLowerCase()))
+
+      const isLinkUp =
+        link.stateCode === 2 ||
+        link.state.toLowerCase().includes('up') ||
+        link.state === 'ESTABLISHED'
+
+      if (statusFilter === 'up') return matchSearch && isLinkUp
+      if (statusFilter === 'down') return matchSearch && !isLinkUp
+      return matchSearch
+    })
+  }, [links, searchQuery, statusFilter])
+
+  const handleAddSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!newAddress.trim()) {
+      setAddError('请输入远程连接 Socket 地址')
+      return
+    }
+    setIsSubmitting(true)
+    setAddError(null)
+    const res = await onAddLink(newAddress.trim())
+    setIsSubmitting(false)
+    if (res.success) {
+      setNewAddress('')
+      setIsAddOpen(false)
+    } else {
+      setAddError(res.message || '添加连接失败')
+    }
+  }
+
+  const getProtocolBadge = (address?: string) => {
+    if (!address) return <Badge variant="outline">TCP</Badge>
+    const lower = address.toLowerCase()
+    if (lower.startsWith('udp://')) {
+      return <Badge variant="secondary" className="bg-purple-500/10 text-purple-600 dark:text-purple-400 font-mono text-[10px]">UDP</Badge>
+    }
+    if (lower.startsWith('kltp://')) {
+      return <Badge variant="secondary" className="bg-amber-500/10 text-amber-600 dark:text-amber-400 font-mono text-[10px]">KLTP</Badge>
+    }
+    return <Badge variant="secondary" className="bg-blue-500/10 text-blue-600 dark:text-blue-400 font-mono text-[10px]">TCP</Badge>
+  }
+
+  return (
+    <div className="flex flex-1 flex-col gap-6 p-6">
+      {/* 1. Top Summary Banner */}
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <Card className="shadow-2xs">
+          <CardContent className="flex items-center justify-between p-4">
+            <div className="flex flex-col gap-0.5">
+              <span className="text-xs text-muted-foreground">全部连接</span>
+              <span className="font-mono text-2xl font-bold">
+                {stats.total}
+              </span>
+            </div>
+            <div className="flex size-10 items-center justify-center rounded-xl bg-primary/10 text-primary">
+              <Network className="size-5" />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="shadow-2xs">
+          <CardContent className="flex items-center justify-between p-4">
+            <div className="flex flex-col gap-0.5">
+              <span className="text-xs text-muted-foreground">已建立连接</span>
+              <span className="font-mono text-2xl font-bold text-emerald-600 dark:text-emerald-400">
+                {stats.up}
+              </span>
+            </div>
+            <div className="flex size-10 items-center justify-center rounded-xl bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
+              <Plug className="size-5" />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="shadow-2xs">
+          <CardContent className="flex items-center justify-between p-4">
+            <div className="flex flex-col gap-0.5">
+              <span className="text-xs text-muted-foreground">异常/重试中</span>
+              <span className="font-mono text-2xl font-bold text-rose-500">
+                {stats.down}
+              </span>
+            </div>
+            <div className="flex size-10 items-center justify-center rounded-xl bg-rose-500/10 text-rose-500">
+              <Unplug className="size-5" />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="shadow-2xs">
+          <CardContent className="flex items-center justify-between p-4">
+            <div className="flex flex-col gap-0.5">
+              <span className="text-xs text-muted-foreground">
+                实时吞吐
+              </span>
+              <div className="flex items-center gap-2 font-mono text-sm font-bold">
+                <span className="text-rose-500">
+                  ↑ {formatSpeed(stats.totalUpSpeed, 1)}
+                </span>
+                <span className="text-emerald-500">
+                  ↓ {formatSpeed(stats.totalDownSpeed, 1)}
+                </span>
+              </div>
+            </div>
+            <div className="flex size-10 items-center justify-center rounded-xl bg-blue-500/10 text-blue-500">
+              <ArrowUp className="size-5" />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* 2. Control Toolbar */}
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <div className="flex flex-1 flex-wrap items-center gap-2">
+          {/* Search bar */}
+          <div className="relative w-full max-w-xs">
+            <Search className="absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              placeholder="搜索 Socket / SID ..."
+              className="pl-8"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+
+          {/* Status filter toggle */}
+          <div className="flex items-center rounded-lg border bg-background p-0.5 text-xs shadow-2xs">
+            <button
+              onClick={() => setStatusFilter("all")}
+              className={`rounded-md px-2.5 py-1 font-medium transition-colors ${
+                statusFilter === "all"
+                  ? "bg-primary text-primary-foreground"
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              全部 ({stats.total})
+            </button>
+            <button
+              onClick={() => setStatusFilter("up")}
+              className={`rounded-md px-2.5 py-1 font-medium transition-colors ${
+                statusFilter === "up"
+                  ? "bg-emerald-600 text-white"
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              在线 ({stats.up})
+            </button>
+            <button
+              onClick={() => setStatusFilter("down")}
+              className={`rounded-md px-2.5 py-1 font-medium transition-colors ${
+                statusFilter === "down"
+                  ? "bg-rose-600 text-white"
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              离线 ({stats.down})
+            </button>
+          </div>
+        </div>
+
+        {/* Action buttons & View mode switch */}
+        <div className="flex items-center gap-2">
+          <div className="flex items-center rounded-lg border bg-background p-0.5 shadow-2xs">
+            <Button
+              variant={viewMode === "grid" ? "secondary" : "ghost"}
+              size="icon-xs"
+              onClick={() => setViewMode("grid")}
+              title="卡片网格视图"
+            >
+              <LayoutGrid className="size-3.5" />
+            </Button>
+            <Button
+              variant={viewMode === "table" ? "secondary" : "ghost"}
+              size="icon-xs"
+              onClick={() => setViewMode("table")}
+              title="表格视图"
+            >
+              <List className="size-3.5" />
+            </Button>
+          </div>
+
+          {/* Add Connection Dialog */}
+          <Dialog open={isAddOpen} onOpenChange={setIsAddOpen}>
+            <DialogTrigger
+              render={
+                <Button size="sm">
+                  <Plus data-icon="inline-start" />
+                  添加连接
+                </Button>
+              }
+            />
+            <DialogContent className="sm:max-w-md">
+              <form onSubmit={handleAddSubmit}>
+                <DialogHeader>
+                  <DialogTitle>添加远程连接</DialogTitle>
+                  <DialogDescription>
+                    输入远端主机的 Socket 协议地址建立隧道
+                  </DialogDescription>
+                </DialogHeader>
+                <div className="flex flex-col gap-4 py-4">
+                  <div className="flex flex-col gap-2">
+                    <label className="text-xs font-medium">
+                      Socket 地址 URI
+                    </label>
+                    <Input
+                      placeholder="tcp://... 或 udp://... 或 kltp://..."
+                      value={newAddress}
+                      onChange={(e) => setNewAddress(e.target.value)}
+                      autoFocus
+                    />
+                    <span className="text-[11px] text-muted-foreground">
+                      格式示例：<code>tcp://ip:port</code>、
+                      <code>udp://ip:port</code>、<code>kltp://ip:port</code>
+                    </span>
+                  </div>
+                  {addError && (
+                    <div className="rounded-lg bg-destructive/10 p-2 text-xs text-destructive">
+                      {addError}
+                    </div>
+                  )}
+                </div>
+                <DialogFooter>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => setIsAddOpen(false)}
+                  >
+                    取消
+                  </Button>
+                  <Button type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? "添加中..." : "确认添加"}
+                  </Button>
+                </DialogFooter>
+              </form>
+            </DialogContent>
+          </Dialog>
+        </div>
+      </div>
+
+      {/* 3. Main Content: Grid or Table View */}
+      {filteredLinks.length === 0 ? (
+        <Card className="flex flex-col items-center justify-center p-12 text-center shadow-2xs">
+          <div className="mb-3 flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground">
+            <Network className="size-6" />
+          </div>
+          <CardTitle className="text-base font-semibold">
+            未发现匹配的连接
+          </CardTitle>
+          <p className="mt-1 max-w-sm text-xs text-muted-foreground">
+            当前没有满足条件的远程连接。您可以点击右上角的「添加连接」来新建与远端节点的链路。
+          </p>
+        </Card>
+      ) : viewMode === "grid" ? (
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
+          {filteredLinks.map((link) => {
+            const isUp =
+              link.stateCode === 2 ||
+              link.state.toLowerCase().includes("up") ||
+              link.state === "ESTABLISHED"
+            const isUnstable =
+              link.stateCode === 1 ||
+              link.state.toLowerCase().includes("unstable")
+
+            return (
+              <Card
+                key={link.name}
+                className="flex flex-col justify-between shadow-2xs transition-colors hover:border-primary/40"
+              >
+                <CardHeader className="pb-3">
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="flex min-w-0 items-center gap-2">
+                      <span
+                        className={`size-2.5 shrink-0 rounded-full ${
+                          isUp
+                            ? "animate-pulse bg-emerald-500"
+                            : isUnstable
+                              ? "bg-amber-500"
+                              : "bg-rose-500"
+                        }`}
+                      />
+                      <div className="flex min-w-0 flex-col gap-0.5">
+                        <div className="flex items-center gap-1.5">
+                          {getProtocolBadge(link.socketAddress || link.name)}
+                          <span
+                            className="truncate font-mono text-sm font-semibold text-foreground"
+                            title={link.socketAddress || link.name}
+                          >
+                            {link.socketAddress || link.name}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Actions dropdown component */}
+                    <ConnectionActionMenu
+                      link={link}
+                      onLinkAction={onLinkAction}
+                      onRemoveLink={onRemoveLink}
+                      onCopyText={copyText}
+                    />
+                  </div>
+                </CardHeader>
+
+                <CardContent className="flex flex-col gap-3.5 text-xs">
+                  {/* Remote Virtual IPv6 Address */}
+                  <div className="flex items-center justify-between gap-1.5 rounded-lg border bg-background/60 px-2.5 py-1.5">
+                    <div className="flex min-w-0 items-center gap-1.5 text-muted-foreground">
+                      <ChevronsLeftRightEllipsis className="size-3.5 shrink-0" />
+                      <span className="truncate">远端 SID:</span>
+                    </div>
+                    {link.vaddr ? (
+                      <div className="flex items-center gap-1">
+                        <span
+                          className="max-w-[170px] truncate font-mono font-medium text-foreground"
+                          title={link.vaddr}
+                        >
+                          {link.vaddr}
+                        </span>
+                        <Button
+                          variant="ghost"
+                          size="icon-xs"
+                          className="size-4"
+                          onClick={() => copyText(link.vaddr!)}
+                        >
+                          {copiedAddress === link.vaddr ? (
+                            <Check className="size-3 text-emerald-500" />
+                          ) : (
+                            <Copy className="size-3" />
+                          )}
+                        </Button>
+                      </div>
+                    ) : (
+                      <span className="text-muted-foreground italic">
+                        未协商
+                      </span>
+                    )}
+                  </div>
+
+                  {/* Realtime Throughput & PPS */}
+                  <div className="grid grid-cols-2 gap-2">
+                    <div className="flex flex-col gap-0.5 rounded-lg border bg-card p-2">
+                      <div className="flex items-center justify-between text-[11px] text-muted-foreground">
+                        <span className="flex items-center gap-1 text-rose-500">
+                          <ArrowUp className="size-3" /> 发送
+                        </span>
+                        <span>{formatPPS(link.upPPS)}</span>
+                      </div>
+                      <span className="font-mono text-sm font-bold text-foreground">
+                        {formatSpeed(link.upSpeed)}
+                      </span>
+                    </div>
+
+                    <div className="flex flex-col gap-0.5 rounded-lg border bg-card p-2">
+                      <div className="flex items-center justify-between text-[11px] text-muted-foreground">
+                        <span className="flex items-center gap-1 text-emerald-500">
+                          <ArrowDown className="size-3" /> 接收
+                        </span>
+                        <span>{formatPPS(link.downPPS)}</span>
+                      </div>
+                      <span className="font-mono text-sm font-bold text-foreground">
+                        {formatSpeed(link.downSpeed)}
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* Delay & Jitter */}
+                  <div className="flex flex-col gap-1 rounded-lg border bg-muted/30 p-2 text-[11px] text-muted-foreground">
+                    <div className="flex items-center justify-between">
+                      <span>单向时延 (上/下):</span>
+                      <span className="font-mono font-semibold text-foreground">
+                        {isUp
+                          ? `${formatNanoDelay(link.upDelay)} / ${formatNanoDelay(link.downDelay)}`
+                          : "NaN / NaN"}
+                      </span>
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <span>网络抖动 (Jitter):</span>
+                      <span className="font-mono text-foreground">
+                        {isUp ? formatNanoDelay(link.upJitter) : "NaN"}
+                      </span>
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <span>累计流量 (发/收):</span>
+                      <span className="font-mono text-foreground">
+                        {formatBytes(link.upTraffic, 1)} /{" "}
+                        {formatBytes(link.downTraffic, 1)}
+                      </span>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            )
+          })}
+        </div>
+      ) : (
+        /* Table View */
+        <Card className="overflow-hidden shadow-2xs">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-12 text-center">状态</TableHead>
+                <TableHead>Socket 地址</TableHead>
+                <TableHead>远端 SID (IPv6)</TableHead>
+                <TableHead className="text-right">实时发送 (↑)</TableHead>
+                <TableHead className="text-right">实时接收 (↓)</TableHead>
+                <TableHead className="text-right">单向时延</TableHead>
+                <TableHead className="text-right">累计总流量</TableHead>
+                <TableHead className="w-24 text-center">操作</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredLinks.map((link) => {
+                const isUp =
+                  link.stateCode === 2 ||
+                  link.state.toLowerCase().includes("up") ||
+                  link.state === "ESTABLISHED"
+                return (
+                  <TableRow key={link.name}>
+                    <TableCell className="text-center">
+                      <span
+                        className={`inline-block size-2 rounded-full ${
+                          isUp ? "bg-emerald-500" : "bg-rose-500"
+                        }`}
+                        title={link.state}
+                      />
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center gap-1.5 font-mono text-xs font-semibold">
+                        {getProtocolBadge(link.socketAddress || link.name)}
+                        <span>{link.socketAddress || link.name}</span>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <span className="font-mono text-xs text-muted-foreground">
+                        {link.vaddr || "--"}
+                      </span>
+                    </TableCell>
+                    <TableCell className="text-right font-mono text-xs">
+                      <span className="font-semibold text-rose-500">
+                        {formatSpeed(link.upSpeed)}
+                      </span>
+                      <span className="ml-1 text-[10px] text-muted-foreground">
+                        ({formatPPS(link.upPPS)})
+                      </span>
+                    </TableCell>
+                    <TableCell className="text-right font-mono text-xs">
+                      <span className="font-semibold text-emerald-500">
+                        {formatSpeed(link.downSpeed)}
+                      </span>
+                      <span className="ml-1 text-[10px] text-muted-foreground">
+                        ({formatPPS(link.downPPS)})
+                      </span>
+                    </TableCell>
+                    <TableCell className="text-right font-mono text-xs">
+                      {isUp ? formatNanoDelay(link.upDelay) : "NaN"}
+                    </TableCell>
+                    <TableCell className="text-right font-mono text-xs text-muted-foreground">
+                      {formatBytes(
+                        (link.upTraffic || 0) + (link.downTraffic || 0)
+                      )}
+                    </TableCell>
+                    <TableCell className="text-center">
+                      <ConnectionActionMenu
+                        link={link}
+                        onLinkAction={onLinkAction}
+                        onRemoveLink={onRemoveLink}
+                        onCopyText={copyText}
+                      />
+                    </TableCell>
+                  </TableRow>
+                )
+              })}
+            </TableBody>
+          </Table>
+        </Card>
+      )}
+    </div>
+  )
+}

src/pages/overview.tsx

@@ -34,13 +34,13 @@ import {
 } from '@/lib/format'
 import type { SystemStatus, RemoteLinkItem } from '@/types/api'
 
-interface DashboardPageProps {
+interface OverviewPageProps {
   status: SystemStatus | null
   links: RemoteLinkItem[]
   isConnected: boolean
 }
 
-export function DashboardPage({ status, links, isConnected }: DashboardPageProps) {
+export function OverviewPage({ status, links, isConnected }: OverviewPageProps) {
   const [copied, setCopied] = useState(false)
 
   const copyToClipboard = (text?: string) => {
@@ -52,9 +52,9 @@ export function DashboardPage({ status, links, isConnected }: DashboardPageProps
 
   const metrics = status?.metrics
 
-  // Calculate link status counts
+  // Calculate link status counts (LinkStatus: DOWN=0, UNSTABLE=1, UP=2; state string like "●up"/"○down")
   const establishedLinks = links.filter(
-    (l) => l.state === 'ESTABLISHED' || l.stateCode === 1
+    (l) => l.stateCode === 2 || (l.state && l.state.toLowerCase().includes('up')) || l.state === 'ESTABLISHED'
   ).length
   const totalLinks = links.length
 
@@ -65,7 +65,7 @@ export function DashboardPage({ status, links, isConnected }: DashboardPageProps
   const isHealthy = lossRate === 0 && ecnRate === 0
 
   // TUN device status check
-  const isTunDisabled = !status?.tunName || status.tunName.trim() === ''
+  const isTunDisabled = status?.enableTUN === false || !status?.tunName || status.tunName.trim() === ''
 
   return (
     <div className="flex flex-1 flex-col gap-6 p-6">
@@ -94,9 +94,6 @@ export function DashboardPage({ status, links, isConnected }: DashboardPageProps
                   <h1 className="text-xl font-bold tracking-tight">
                     {status?.deviceName || 'KLALB SRv6 Node'}
                   </h1>
-                  <Badge variant={isConnected ? 'default' : 'secondary'}>
-                    {isConnected ? '在线运行' : '离线'}
-                  </Badge>
                 </div>
                 <p className="text-xs text-muted-foreground">
                   {status?.deviceDescription || '无节点描述信息'}

src/pages/routing-table.tsx

@@ -0,0 +1,282 @@
+import { useMemo, useState } from "react"
+import { Check, Copy, GitFork, RefreshCw, Search } from "lucide-react"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { useRoutingTable } from "@/hooks/use-routing-table"
+import type { RoutingTableItem } from "@/types/api"
+
+type ProtocolFilter = "all" | string
+
+function protocolBadge(protocol: RoutingTableItem["protocol"]) {
+  if (protocol === "Direct")
+    return (
+      <Badge
+        variant="secondary"
+        className="bg-blue-500/10 text-blue-600 dark:text-blue-400"
+      >
+        {protocol}
+      </Badge>
+    )
+  if (protocol === "SRv6 ENDXSID")
+    return (
+      <Badge
+        variant="secondary"
+        className="bg-purple-500/10 text-purple-600 dark:text-purple-400"
+      >
+        {protocol}
+      </Badge>
+    )
+  if (protocol === "SRv6 ENDSID")
+    return (
+      <Badge
+        variant="secondary"
+        className="bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+      >
+        {protocol}
+      </Badge>
+    )
+  return <Badge variant="outline">{protocol}</Badge>
+}
+
+export function RoutingTablePage() {
+  const { routingTable, isLoading, error, refresh } = useRoutingTable()
+  const [searchQuery, setSearchQuery] = useState("")
+  const [protocolFilter, setProtocolFilter] = useState<ProtocolFilter>("all")
+  const [copiedHop, setCopiedHop] = useState<string | null>(null)
+
+  const counts = useMemo(
+    () => ({
+      total: routingTable.length,
+      direct: routingTable.filter((route) => route.protocol === "Direct").length,
+      endxsid: routingTable.filter((route) => route.protocol === "SRv6 ENDXSID").length,
+      endsid: routingTable.filter((route) => route.protocol === "SRv6 ENDSID").length,
+    }),
+    [routingTable]
+  )
+
+  const filteredRoutingTable = useMemo(() => {
+    const query = searchQuery.trim().toLowerCase()
+    return routingTable.filter((route) => {
+      const matchesSearch =
+        !query ||
+        [
+          route.destination,
+          route.nexthop,
+          route.interface,
+          route.protocol,
+        ].some((value) => String(value).toLowerCase().includes(query))
+      const matchesProtocol =
+        protocolFilter === "all" ||
+        route.protocol === protocolFilter
+      return matchesSearch && matchesProtocol
+    })
+  }, [routingTable, searchQuery, protocolFilter])
+
+  const copyNextHop = async (nextHop: string) => {
+    try {
+      await navigator.clipboard.writeText(nextHop)
+      setCopiedHop(nextHop)
+      window.setTimeout(
+        () => setCopiedHop((current) => (current === nextHop ? null : current)),
+        1500
+      )
+    } catch {
+      setCopiedHop(null)
+    }
+  }
+
+  const filterOptions: { value: ProtocolFilter; label: string }[] = [
+    { value: "all", label: "全部" },
+    ...Array.from(new Set(routingTable.map((route) => route.protocol))).map(
+      (protocol) => ({ value: protocol, label: protocol })
+    ),
+  ]
+
+  return (
+    <div className="flex flex-1 flex-col gap-5 p-6">
+      <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+        <div className="flex items-center gap-3">
+          <div className="flex size-10 items-center justify-center rounded-xl bg-primary/10 text-primary">
+            <GitFork className="size-5" />
+          </div>
+          <div>
+            <h1 className="text-xl font-bold tracking-tight">SRv6 路由表</h1>
+            <p className="text-xs text-muted-foreground">
+              实时查看当前 IPv6 转发路径与下一跳。
+            </p>
+          </div>
+        </div>
+        <div className="flex flex-wrap gap-2 sm:ml-13 lg:ml-0">
+          <Badge variant="outline">全部 {counts.total}</Badge>
+          <Badge
+            variant="secondary"
+            className="bg-blue-500/10 text-blue-600 dark:text-blue-400"
+          >
+            直连 {counts.direct}
+          </Badge>
+          <Badge
+            variant="secondary"
+            className="bg-purple-500/10 text-purple-600 dark:text-purple-400"
+          >
+            SRv6 ENDXSID {counts.endxsid}
+          </Badge>
+          <Badge
+            variant="secondary"
+            className="bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+          >
+            SRv6 ENDSID {counts.endsid}
+          </Badge>
+        </div>
+      </div>
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <div className="relative w-full max-w-sm">
+          <Search className="absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            value={searchQuery}
+            onChange={(event) => setSearchQuery(event.target.value)}
+            placeholder="搜索目的地址、下一跳、接口或协议"
+            className="pl-8"
+          />
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          <div className="flex items-center rounded-lg border bg-background p-0.5 shadow-2xs">
+            {filterOptions.map((option) => (
+              <Button
+                key={option.value}
+                variant={
+                  protocolFilter === option.value ? "secondary" : "ghost"
+                }
+                size="sm"
+                onClick={() => setProtocolFilter(option.value)}
+              >
+                {option.label}
+              </Button>
+            ))}
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={refresh}
+            disabled={isLoading}
+            title="刷新路由表"
+          >
+            <RefreshCw
+              data-icon="inline-start"
+              className={isLoading ? "animate-spin" : ""}
+            />
+            刷新
+          </Button>
+        </div>
+      </div>
+      {error && (
+        <Alert variant="destructive">
+          <AlertDescription>
+            路由数据更新失败：{error}，当前显示最近一次成功数据。
+          </AlertDescription>
+        </Alert>
+      )}
+      {isLoading && routingTable.length === 0 ? (
+        <div className="border-y py-12 text-center text-sm text-muted-foreground">
+          正在加载路由表...
+        </div>
+      ) : filteredRoutingTable.length === 0 ? (
+        <div className="border-y py-12 text-center">
+          <p className="text-sm font-medium">未找到匹配的路由</p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            调整搜索条件或等待路由表更新。
+          </p>
+        </div>
+      ) : (
+        <div className="overflow-hidden rounded-lg border bg-card shadow-2xs">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>目的地址</TableHead>
+                <TableHead>协议</TableHead>
+                <TableHead className="text-right">优先级</TableHead>
+                <TableHead className="text-right">开销</TableHead>
+                <TableHead>标志</TableHead>
+                <TableHead>下一跳</TableHead>
+                <TableHead>出接口</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredRoutingTable.map((route, index) => (
+                <TableRow
+                  key={`${route.destination}-${route.nexthop}-${route.interface}-${index}`}
+                >
+                  <TableCell className="font-mono text-xs font-medium">
+                    {route.destination}
+                  </TableCell>
+                  <TableCell>{protocolBadge(route.protocol)}</TableCell>
+                  <TableCell className="text-right font-mono text-xs">
+                    {route.preference}
+                  </TableCell>
+                  <TableCell className="text-right font-mono text-xs">
+                    {(route.cost / 1_000_000).toFixed(2)} ms
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant="outline" className="font-mono text-[10px]">
+                      {route.flag}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-1">
+                      <span className="font-mono text-xs">
+                        {route.nexthop || "--"}
+                      </span>
+                      {route.nexthop && (
+                        <Tooltip>
+                          <TooltipTrigger
+                            render={
+                              <Button
+                                variant="ghost"
+                                size="icon-xs"
+                                title="复制下一跳"
+                                onClick={() => void copyNextHop(route.nexthop)}
+                              />
+                            }
+                          >
+                            <>
+                              {copiedHop === route.nexthop ? (
+                                <Check
+                                  data-icon="inline-start"
+                                  className="text-emerald-500"
+                                />
+                              ) : (
+                                <Copy data-icon="inline-start" />
+                              )}
+                            </>
+                          </TooltipTrigger>
+                          <TooltipContent>复制下一跳</TooltipContent>
+                        </Tooltip>
+                      )}
+                    </div>
+                  </TableCell>
+                  <TableCell className="font-mono text-xs text-muted-foreground">
+                    {route.interface || "--"}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+    </div>
+  )
+}

src/pages/topology.tsx

@@ -0,0 +1,209 @@
+import { useState, useMemo, useCallback, useRef } from 'react'
+import { ReactFlowProvider } from '@xyflow/react'
+import {
+  Share2,
+  Search,
+  RefreshCw,
+  Network,
+  Link2,
+  AlertCircle,
+} from 'lucide-react'
+import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { useTopology } from '@/hooks/use-topology'
+import { TopologyCanvas } from '@/components/topology/topology-canvas'
+import { NodeDetailSheet } from '@/components/topology/node-detail-sheet'
+import type { NodeInfoDetail } from '@/types/api'
+
+export function TopologyPage() {
+  const { nodes, edges, isLoading, error, relayout } = useTopology()
+  const [searchQuery, setSearchQuery] = useState('')
+  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null)
+  const [copiedId, setCopiedId] = useState<string | null>(null)
+  const [sheetOpen, setSheetOpen] = useState(false)
+
+  // 节点详情（含设备描述，来自 /api/node-info）
+  const [nodeInfo, setNodeInfo] = useState<NodeInfoDetail | null>(null)
+  const [nodeInfoLoading, setNodeInfoLoading] = useState(false)
+  const nodeInfoSeqRef = useRef(0)
+
+  const handleCopy = useCallback((text: string) => {
+    navigator.clipboard.writeText(text)
+    setCopiedId(text)
+    setTimeout(() => setCopiedId(null), 2000)
+  }, [])
+
+  const handleNodeSelect = useCallback((nodeId: string | null) => {
+    setSelectedNodeId(nodeId)
+    if (nodeId) {
+      setSheetOpen(true)
+      setNodeInfo(null)
+      setNodeInfoLoading(true)
+      const seq = ++nodeInfoSeqRef.current
+      fetch(`/api/node-info?address=${encodeURIComponent(nodeId)}`)
+        .then((res) => (res.ok ? res.json() : null))
+        .then((data: NodeInfoDetail | null) => {
+          // 防止乱序：仅当仍是当前选中节点时才应用结果
+          if (seq === nodeInfoSeqRef.current && data) {
+            setNodeInfo(data)
+          }
+        })
+        .catch(() => {})
+        .finally(() => {
+          if (seq === nodeInfoSeqRef.current) {
+            setNodeInfoLoading(false)
+          }
+        })
+    } else {
+      setSheetOpen(false)
+      setNodeInfo(null)
+      setNodeInfoLoading(false)
+      nodeInfoSeqRef.current++
+    }
+  }, [])
+
+  const handleNodeDragEnd = useCallback(
+    (_id: string, _x: number, _y: number) => {
+      // 受控模式下坐标由 ReactFlow 内部维护至下次结构刷新；
+      // 结构刷新后 d3-force 会重新计算，拖拽位置保留策略由后续迭代增强。
+    },
+    []
+  )
+
+  // 选中的节点详情
+  const selectedNode = useMemo(
+    () => nodes.find((n) => n.id === selectedNodeId) ?? null,
+    [nodes, selectedNodeId]
+  )
+
+  // 邻居信息（基于边集合推导）
+  const neighbors = useMemo(() => {
+    if (!selectedNode) return []
+    return edges
+      .filter((e) => e.source === selectedNode.id || e.target === selectedNode.id)
+      .map((e) => {
+        const otherId = e.source === selectedNode.id ? e.target : e.source
+        const other = nodes.find((n) => n.id === otherId)
+        return {
+          address: other?.address ?? otherId,
+          deviceName: other?.deviceName,
+          delay: e.delay,
+          cost: e.cost,
+        }
+      })
+  }, [edges, nodes, selectedNode])
+
+  const sheetNode = useMemo(
+    () =>
+      selectedNode
+        ? {
+            id: selectedNode.id,
+            address: selectedNode.address,
+            compressedAddress: selectedNode.compressedAddress,
+            isSelf: selectedNode.isSelf,
+            deviceName: selectedNode.deviceName,
+          }
+        : null,
+    [selectedNode]
+  )
+
+  return (
+    <div className="flex flex-1 flex-col gap-4 p-6">
+      {/* Toolbar */}
+      <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+        <div className="flex items-center gap-3">
+          <div className="flex size-10 items-center justify-center rounded-xl bg-primary/10 text-primary">
+            <Share2 className="size-5" />
+          </div>
+          <div>
+            <h1 className="text-xl font-bold tracking-tight">网络拓扑</h1>
+            <p className="text-xs text-muted-foreground">
+              SRv6 全网节点与链路的实时可视化视图
+            </p>
+          </div>
+
+          <div className="ml-2 hidden items-center gap-2 sm:flex">
+            <Badge variant="secondary" className="gap-1 px-2 py-0.5 font-mono text-xs">
+              <Network className="size-3" />
+              {nodes.length} 节点
+            </Badge>
+            <Badge variant="secondary" className="gap-1 px-2 py-0.5 font-mono text-xs">
+              <Link2 className="size-3" />
+              {edges.length} 链路
+            </Badge>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <div className="relative w-full max-w-xs">
+            <Search className="absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              placeholder="搜索设备名或 IPv6 地址..."
+              className="pl-8"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={relayout}
+            disabled={isLoading}
+            title="重新运行力导向自动布局"
+          >
+            <RefreshCw data-icon="inline-start" className={isLoading ? 'animate-spin' : ''} />
+            重新布局
+          </Button>
+        </div>
+      </div>
+
+      {/* Error banner */}
+      {error && !nodes.length && (
+        <Card className="border-destructive/40 bg-destructive/5 shadow-2xs">
+          <CardContent className="flex items-center gap-2 p-3 text-sm text-destructive">
+            <AlertCircle className="size-4 shrink-0" />
+            无法获取拓扑数据：{error}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Canvas */}
+      <Card className="min-h-96 flex-1 overflow-hidden shadow-2xs">
+        <div className="h-full min-h-[520px] w-full">
+          <ReactFlowProvider>
+            <TopologyCanvas
+              nodes={nodes}
+              edges={edges}
+              searchQuery={searchQuery}
+              copiedId={copiedId}
+              onCopy={handleCopy}
+              onNodeDragEnd={handleNodeDragEnd}
+              onNodeSelect={handleNodeSelect}
+            />
+          </ReactFlowProvider>
+        </div>
+      </Card>
+
+      {/* Detail Sheet */}
+      <NodeDetailSheet
+        open={sheetOpen}
+        onOpenChange={(open) => {
+          setSheetOpen(open)
+          if (!open) {
+            setSelectedNodeId(null)
+            setNodeInfo(null)
+            nodeInfoSeqRef.current++
+          }
+        }}
+        node={sheetNode}
+        neighbors={neighbors}
+        copiedId={copiedId}
+        onCopy={handleCopy}
+        description={nodeInfo?.deviceDescription ?? null}
+        descriptionLoading={nodeInfoLoading}
+      />
+    </div>
+  )
+}

src/types/api.ts

@@ -30,6 +30,7 @@ export interface SystemStatus {
   onlineDevices?: number
   deviceName?: string
   deviceDescription?: string
+  enableTUN?: boolean
   tunName?: string
   congestionAlgorithm?: string
   performanceStrategy?: string
@@ -63,12 +64,12 @@ export interface SSEEventData {
   links: RemoteLinkItem[]
 }
 
-export interface RouteItemData {
+export interface RoutingTableItem {
   destination: string
-  protocol: number
+  protocol: string
   preference: number
   cost: number
-  flag: number
+  flag: string
   nexthop: string
   interface: string
 }
@@ -93,8 +94,53 @@ export interface TopologyData {
   edges: TopologyEdge[]
 }
 
-export interface NetworkInterfaceInfo {
+export interface NodeInfoDetail {
-  name: string
+  address: string
-  displayName: string
+  isSelf: boolean
-  addresses: string[]
+  deviceName: string
+  deviceDescription: string
+  reachable?: boolean
+  openLines?: string[]
+}
+
+export interface KLALBControllerConfig {
+  DeviceName?: string
+  DeviceDescription?: string
+  language?: string
+  VirtualAddress?: string
+  VirtualASN?: number
+  enableTUN?: boolean
+  TUNName?: string | null
+  webUI?: boolean
+  webListen?: string
+  webPort?: number
+  nogui?: boolean
+  TCPListen?: string
+  UDPListen?: string
+  VirtualSocketName?: string
+  externalEndpoints?: string[]
+  openConnections?: string[]
+  autoConnections?: string[]
+  ntpServers?: string[]
+  LineTable?: string[]
+  ConnectLineTable?: string[]
+  ntpServerTable?: string[]
+  DNS?: string[]
+  ExtraRoutes?: string[]
+  NetworkInterfaceExcepts?: string[]
+  denyExternalEndpointQuery?: boolean
+  denyExternalEndpointBroadcast?: boolean
+  denyConnectionQuery?: boolean
+  denyConnectionBroadcast?: boolean
+  denyLineTableQuery?: boolean
+  denyLineTableBroadcast?: boolean
+  congestionAlgorithm?: string
+  performanceStrategy?: string
+  linkConnectionsCount?: number
+  burstLimit?: number
+  delayUpperBound?: number
+  delayLowerBound?: number
+  nagleDelayTime?: number
+  linkNagleDelayTime?: number
+  Type?: string
 }