[优化] 字段修复

docker-compose.yaml

@@ -1,5 +1,5 @@
 services:
-  openflare-agent:
+  agent:
     build:
         context: .
         dockerfile: openflare_agent/Dockerfile
@@ -22,7 +22,7 @@ services:
     extra_hosts:
       - "host.docker.internal:host-gateway"
 
-  openflare-relay:
+  relay:
     build:
       context: .
       dockerfile: openflare_relay/Dockerfile
@@ -37,7 +37,7 @@ services:
       - "host.docker.internal:host-gateway"
 
 
-  openflare-flared:
+  flared:
     build:
       context: .
       dockerfile: openflared/Dockerfile

openflare_agent/internal/protocol/agent_api.go

@@ -72,8 +72,8 @@ type NodePayload struct {
 	NodeID                string                        `json:"node_id"`
 	Name                  string                        `json:"name"`
 	IP                    string                        `json:"ip"`
-	Version               string                        `json:"agent_version"`
+	Version               string                        `json:"version"`
-	ExtVersion            string                        `json:"nginx_version"`
+	ExtVersion            string                        `json:"ext_version"`
 	CurrentVersion        string                        `json:"current_version"`
 	LastError             string                        `json:"last_error"`
 	OpenrestyStatus       string                        `json:"openresty_status"`

openflare_relay/internal/relay/runner.go

@@ -52,36 +52,63 @@ func (r *Runner) Run(ctx context.Context) error {
 }
 
 func (r *Runner) handleConnection(ctx context.Context, conn *wsclient.Connection) {
+	// Send pings at 2× heartbeat interval to keep the server-side read deadline
+	// from expiring (server closes the WS if no data arrives within ~30 s).
+	pingInterval := r.Config.HeartbeatInterval.Duration() * 2
+	pingTicker := time.NewTicker(pingInterval)
+	defer pingTicker.Stop()
+
+	messages := make(chan service.WSMessage, 8)
+	readDone := make(chan error, 1)
+	go func() {
+		for {
+			msg, err := conn.Receive()
+			if err != nil {
+				readDone <- err
+				return
+			}
+			select {
+			case messages <- msg:
+			case <-ctx.Done():
+				readDone <- ctx.Err()
+				return
+			}
+		}
+	}()
+
 	for {
 		select {
 		case <-ctx.Done():
 			return
-		default:
+		case err := <-readDone:
-		}
-
-		msg, err := conn.Receive()
-		if err != nil {
 			slog.Error("relay ws receive failed", "error", err)
 			return
-		}
+		case <-pingTicker.C:
-
+			if err := conn.SendPing(); err != nil {
-		switch msg.Type {
+				slog.Error("relay ws send ping failed", "error", err)
-		case "ping":
+				return
-			_ = conn.SendPong()
-		case "relay_config":
-			payloadBytes, ok := msg.Payload.(json.RawMessage)
-			if !ok {
-				slog.Error("invalid relay_config payload type")
-				continue
 			}
-			var cfg service.RelayConfig
+		case msg := <-messages:
-			if err := json.Unmarshal(payloadBytes, &cfg); err != nil {
+			switch msg.Type {
-				slog.Error("failed to unmarshal relay_config", "error", err)
+			case "ping":
-				continue
+				_ = conn.SendPong()
+			case "pong":
+				slog.Debug("relay ws pong received")
+			case "relay_config":
+				payloadBytes, ok := msg.Payload.(json.RawMessage)
+				if !ok {
+					slog.Error("invalid relay_config payload type")
+					continue
+				}
+				var cfg service.RelayConfig
+				if err := json.Unmarshal(payloadBytes, &cfg); err != nil {
+					slog.Error("failed to unmarshal relay_config", "error", err)
+					continue
+				}
+				r.FrpsManager.UpdateConfig(&cfg)
+			default:
+				slog.Debug("ignored unknown ws message type", "type", msg.Type)
 			}
-			r.FrpsManager.UpdateConfig(&cfg)
-		default:
-			slog.Debug("ignored unknown ws message type", "type", msg.Type)
 		}
 	}
 }

openflare_relay/internal/wsclient/client.go

@@ -90,6 +90,16 @@ func buildWebsocketURL(baseURL string) (string, error) {
 	return parsed.String(), nil
 }
 
+func (conn *Connection) SendPing() error {
+	if conn == nil || conn.conn == nil {
+		return errors.New("relay ws connection is nil")
+	}
+	slog.Debug("relay ws sending ping")
+	return websocket.JSON.Send(conn.conn, service.WSMessage{
+		Type: "ping",
+	})
+}
+
 func (conn *Connection) SendPong() error {
 	if conn == nil || conn.conn == nil {
 		return errors.New("relay ws connection is nil")

openflare_server/web/features/nodes/components/node-detail-page.tsx

@@ -405,12 +405,12 @@ function EdgeNodeDetailPage({ node }: { node: NodeItem }) {
 
   const normalizedServerUrl = getServerUrl(serverUrl);
   const nodeInstallCommand =
-    normalizedServerUrl && node.agent_token
+    normalizedServerUrl && node.access_token
-      ? buildNodeInstallCommand(normalizedServerUrl, node.agent_token)
+      ? buildNodeInstallCommand(normalizedServerUrl, node.access_token)
       : '';
   const nodeDockerInstallCommand =
-    normalizedServerUrl && node.agent_token
+    normalizedServerUrl && node.access_token
-      ? buildNodeDockerInstallCommand(normalizedServerUrl, node.agent_token)
+      ? buildNodeDockerInstallCommand(normalizedServerUrl, node.access_token)
       : '';
   const updateMode = getUpdateMode(node);
   const selectedAgentRelease =
@@ -1446,7 +1446,7 @@ function EdgeNodeDetailPage({ node }: { node: NodeItem }) {
                         Agent Token
                       </p>
                       <p className="mt-2 text-sm break-all text-[var(--foreground-primary)]">
-                        {node.agent_token || '暂无'}
+                        {node.access_token || '暂无'}
                       </p>
                     </div>
                   </div>

openflare_server/web/features/nodes/components/nodes-page.tsx

@@ -1,441 +1,456 @@
 'use client';
 
 import Link from 'next/link';
-import { useSearchParams } from 'next/navigation';
+import {useSearchParams} from 'next/navigation';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
-import { useMemo, useState } from 'react';
+import {useMemo, useState} from 'react';
 
-import { EmptyState } from '@/components/feedback/empty-state';
+import {EmptyState} from '@/components/feedback/empty-state';
-import { ErrorState } from '@/components/feedback/error-state';
+import {ErrorState} from '@/components/feedback/error-state';
-import { InlineMessage } from '@/components/feedback/inline-message';
+import {InlineMessage} from '@/components/feedback/inline-message';
-import { LoadingState } from '@/components/feedback/loading-state';
+import {LoadingState} from '@/components/feedback/loading-state';
-import { PageHeader } from '@/components/layout/page-header';
+import {PageHeader} from '@/components/layout/page-header';
-import { AppCard } from '@/components/ui/app-card';
+import {AppCard} from '@/components/ui/app-card';
-import { StatusBadge } from '@/components/ui/status-badge';
+import {StatusBadge} from '@/components/ui/status-badge';
-import { getConfigVersions } from '@/features/config-versions/api/config-versions';
+import {getConfigVersions} from '@/features/config-versions/api/config-versions';
+import {createNode, deleteNode, getNodes, updateNode,} from '@/features/nodes/api/nodes';
+import {NodeEditorModal} from '@/features/nodes/components/node-editor-modal';
+import type {NodeItem, NodeMutationPayload} from '@/features/nodes/types';
+import {DangerButton, SecondaryButton,} from '@/features/shared/components/resource-primitives';
+import {formatDateTime, formatRelativeTime} from '@/lib/utils/date';
 import {
-  createNode,
+    getApplyLabel,
-  deleteNode,
+    getApplyVariant,
-  getNodes,
+    getNodeStatusLabel,
-  updateNode,
+    getNodeStatusVariant,
-} from '@/features/nodes/api/nodes';
+    getOpenrestyStatusLabel,
-import { NodeEditorModal } from '@/features/nodes/components/node-editor-modal';
+    getOpenrestyStatusVariant,
-import type { NodeItem, NodeMutationPayload } from '@/features/nodes/types';
+    getRelayStatusLabel,
-import {
+    getRelayStatusVariant,
-  DangerButton,
+    isMeaningfulTime,
-  SecondaryButton,
+    isNodeAbnormal,
-} from '@/features/shared/components/resource-primitives';
+    isWSConnectedLastSeen,
-import { formatDateTime, formatRelativeTime } from '@/lib/utils/date';
-import {
-  getApplyLabel,
-  getApplyVariant,
-  getNodeStatusLabel,
-  getNodeStatusVariant,
-  getOpenrestyStatusLabel,
-  getOpenrestyStatusVariant,
-  getRelayStatusLabel,
-  getRelayStatusVariant,
-  isMeaningfulTime,
-  isWSConnectedLastSeen,
 } from '@/features/nodes/utils';
 
 const nodesQueryKey = ['nodes'];
-const supportedRiskFilters = [
+const supportedNodeFilters = ['all', 'edge', 'relay', 'tunnel', 'abnormal'] as const;
-  'all',
-  'offline',
-  'unhealthy',
-  'lagging',
-] as const;
 
-type NodeRiskFilter = (typeof supportedRiskFilters)[number];
+type NodeFilter = (typeof supportedNodeFilters)[number];
 
 type FeedbackState = {
-  tone: 'info' | 'success' | 'danger';
+    tone: 'info' | 'success' | 'danger';
-  message: string;
+    message: string;
 };
 
 function getErrorMessage(error: unknown) {
-  return error instanceof Error ? error.message : '请求失败，请稍后重试。';
+    return error instanceof Error ? error.message : '请求失败，请稍后重试。';
 }
 
 export function NodesPage() {
-  const searchParams = useSearchParams();
+    const searchParams = useSearchParams();
-  const queryClient = useQueryClient();
+    const queryClient = useQueryClient();
-  const [feedback, setFeedback] = useState<FeedbackState | null>(null);
+    const [feedback, setFeedback] = useState<FeedbackState | null>(null);
-  const [editingNode, setEditingNode] = useState<NodeItem | null>(null);
+    const [editingNode, setEditingNode] = useState<NodeItem | null>(null);
-  const [isEditorOpen, setIsEditorOpen] = useState(false);
+    const [isEditorOpen, setIsEditorOpen] = useState(false);
 
-  const nodesQuery = useQuery({
+    const nodesQuery = useQuery({
-    queryKey: nodesQueryKey,
+        queryKey: nodesQueryKey,
-    queryFn: getNodes,
+        queryFn: getNodes,
-    refetchInterval: 5000,
+        refetchInterval: 5000,
-  });
+    });
 
-  const configVersionsQuery = useQuery({
+    const configVersionsQuery = useQuery({
-    queryKey: ['config-versions'],
+        queryKey: ['config-versions'],
-    queryFn: getConfigVersions,
+        queryFn: getConfigVersions,
-    refetchInterval: 5000,
+        refetchInterval: 5000,
-  });
+    });
 
-  const saveMutation = useMutation({
+    const saveMutation = useMutation({
-    mutationFn: async (payload: NodeMutationPayload) => {
+        mutationFn: async (payload: NodeMutationPayload) => {
-      return editingNode
+            return editingNode
-        ? updateNode(editingNode.id, payload)
+                ? updateNode(editingNode.id, payload)
-        : createNode(payload);
+                : createNode(payload);
-    },
+        },
-    onSuccess: async () => {
+        onSuccess: async () => {
-      setFeedback({
+            setFeedback({
-        tone: 'success',
+                tone: 'success',
-        message: editingNode ? '节点已更新。' : '节点已创建。',
+                message: editingNode ? '节点已更新。' : '节点已创建。',
-      });
+            });
-      setEditingNode(null);
+            setEditingNode(null);
-      setIsEditorOpen(false);
+            setIsEditorOpen(false);
-      await queryClient.invalidateQueries({ queryKey: nodesQueryKey });
+            await queryClient.invalidateQueries({queryKey: nodesQueryKey});
-    },
+        },
-    onError: (error) => {
+        onError: (error) => {
-      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+            setFeedback({tone: 'danger', message: getErrorMessage(error)});
-    },
+        },
-  });
+    });
 
-  const deleteMutation = useMutation({
+    const deleteMutation = useMutation({
-    mutationFn: deleteNode,
+        mutationFn: deleteNode,
-    onSuccess: async () => {
+        onSuccess: async () => {
-      setFeedback({ tone: 'success', message: '节点已删除。' });
+            setFeedback({tone: 'success', message: '节点已删除。'});
-      setEditingNode(null);
+            setEditingNode(null);
-      await queryClient.invalidateQueries({ queryKey: nodesQueryKey });
+            await queryClient.invalidateQueries({queryKey: nodesQueryKey});
-    },
+        },
-    onError: (error) => {
+        onError: (error) => {
-      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+            setFeedback({tone: 'danger', message: getErrorMessage(error)});
-    },
+        },
-  });
+    });
 
-  const nodes = useMemo(() => nodesQuery.data ?? [], [nodesQuery.data]);
+    const nodes = useMemo(() => nodesQuery.data ?? [], [nodesQuery.data]);
-  const activeVersion = useMemo(
+    const activeVersion = useMemo(
-    () =>
+        () =>
-      (configVersionsQuery.data ?? []).find((item) => item.is_active)
+            (configVersionsQuery.data ?? []).find((item) => item.is_active)
-        ?.version ?? '',
+                ?.version ?? '',
-    [configVersionsQuery.data],
+        [configVersionsQuery.data],
-  );
+    );
-  const riskFilter = useMemo<NodeRiskFilter>(() => {
+    const nodeFilter = useMemo<NodeFilter>(() => {
-    const current = searchParams.get('risk')?.trim().toLowerCase() ?? 'all';
+        const current = searchParams.get('filter')?.trim().toLowerCase() ?? '';
-    return supportedRiskFilters.includes(current as NodeRiskFilter)
+        if (supportedNodeFilters.includes(current as NodeFilter)) {
-      ? (current as NodeRiskFilter)
+            return current as NodeFilter;
-      : 'all';
+        }
-  }, [searchParams]);
-  const filteredNodes = useMemo(() => {
-    switch (riskFilter) {
-      case 'offline':
-        return nodes.filter((node) => node.status === 'offline');
-      case 'unhealthy':
-        return nodes.filter((node) => node.openresty_status === 'unhealthy');
-      case 'lagging':
-        return nodes.filter((node) => {
-          if (!activeVersion) {
-            return false;
-          }
-          return node.current_version !== activeVersion;
-        });
-      default:
-        return nodes;
-    }
-  }, [activeVersion, nodes, riskFilter]);
 
-  const filterDescription = useMemo(() => {
+        const legacyRisk = searchParams.get('risk')?.trim().toLowerCase() ?? '';
-    switch (riskFilter) {
+        if (
-      case 'offline':
+            legacyRisk === 'offline' ||
-        return '当前仅展示离线节点。';
+            legacyRisk === 'unhealthy' ||
-      case 'unhealthy':
+            legacyRisk === 'lagging'
-        return '当前仅展示 OpenResty 异常节点。';
+        ) {
-      case 'lagging':
+            return 'abnormal';
-        return activeVersion
+        }
-          ? `当前仅展示未追平激活版本 ${activeVersion} 的节点。`
-          : '当前没有激活版本，无法筛选配置落后节点。';
-      default:
-        return '列表每 5 秒自动刷新一次。';
-    }
-  }, [activeVersion, riskFilter]);
 
-  const handleReset = () => {
+        return 'all';
-    setFeedback(null);
+    }, [searchParams]);
-    setEditingNode(null);
+    const filteredNodes = useMemo(() => {
-    setIsEditorOpen(false);
+        switch (nodeFilter) {
-  };
+            case 'all':
+                return nodes;
+            case 'relay':
+                return nodes.filter((node) => node.node_type === 'tunnel_relay');
+            case 'tunnel':
+                return nodes.filter((node) => node.node_type === 'tunnel_client');
+            case 'abnormal':
+                return nodes.filter((node) => isNodeAbnormal(node, activeVersion));
+            case 'edge':
+            default:
+                return nodes.filter((node) => node.node_type === 'edge_node');
+        }
+    }, [activeVersion, nodeFilter, nodes]);
 
-  const handleCreate = () => {
+    const filterDescription = useMemo(() => {
-    setFeedback(null);
+        switch (nodeFilter) {
-    setEditingNode(null);
+            case 'all':
-    setIsEditorOpen(true);
+                return '当前展示全部节点。';
-  };
+            case 'relay':
+                return '当前仅展示 Relay 节点。';
+            case 'tunnel':
+                return '当前仅展示 Tunnel 节点。';
+            case 'abnormal':
+                return activeVersion
+                    ? `当前仅展示异常节点（离线、运行异常或未追平激活版本 ${activeVersion}）。`
+                    : '当前仅展示异常节点（离线或运行异常）。';
+            case 'edge':
+            default:
+                return '当前仅展示 Edge 节点。';
+        }
+    }, [activeVersion, nodeFilter]);
 
-  const handleEdit = (node: NodeItem) => {
+    const handleReset = () => {
-    setFeedback(null);
+        setFeedback(null);
-    setEditingNode(node);
+        setEditingNode(null);
-    setIsEditorOpen(true);
+        setIsEditorOpen(false);
-  };
+    };
 
-  const handleDelete = (nodeId: number, nodeName: string) => {
+    const handleCreate = () => {
-    if (
+        setFeedback(null);
-      !window.confirm(
+        setEditingNode(null);
-        `确认删除节点“${nodeName}”吗？删除后该节点需要重新创建并重新接入。`,
+        setIsEditorOpen(true);
-      )
+    };
-    ) {
-      return;
-    }
 
-    setFeedback(null);
+    const handleEdit = (node: NodeItem) => {
-    deleteMutation.mutate(nodeId);
+        setFeedback(null);
-  };
+        setEditingNode(node);
-  return (
+        setIsEditorOpen(true);
-    <>
+    };
-      <div className="space-y-6">
-        <PageHeader
-          title="节点管理"
-          description="显示节点相关信息。"
-          action={
-            <>
-              <SecondaryButton type="button" onClick={handleCreate}>
-                新增节点
-              </SecondaryButton>
-              <Link
-                href="/apply-log"
-                className="inline-flex items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-3 text-sm font-medium text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"
-              >
-                应用记录
-              </Link>
-            </>
-          }
-        />
 
-        {feedback ? (
+    const handleDelete = (nodeId: number, nodeName: string) => {
-          <InlineMessage
+        if (
-            tone={feedback.tone}
+            !window.confirm(
-            message={feedback.message}
+                `确认删除节点“${nodeName}”吗？删除后该节点需要重新创建并重新接入。`,
-            onClear={() => setFeedback(null)}
+            )
-          />
+        ) {
-        ) : null}
+            return;
+        }
 
-        <AppCard
+        setFeedback(null);
-          title="节点列表"
+        deleteMutation.mutate(nodeId);
-          description={filterDescription}
+    };
-          action={
+    return (
-            <SecondaryButton
+        <>
-              type="button"
+            <div className="space-y-6">
-              onClick={() =>
+                <PageHeader
-                void queryClient.invalidateQueries({ queryKey: nodesQueryKey })
+                    title="节点管理"
-              }
+                    description="显示节点相关信息。"
-            >
+                    action={
-              立即刷新
+                        <>
-            </SecondaryButton>
+                            <SecondaryButton type="button" onClick={handleCreate}>
-          }
+                                新增节点
-        >
+                            </SecondaryButton>
-          {nodesQuery.isLoading ? (
+                            <Link
-            <LoadingState />
+                                href="/apply-log"
-          ) : nodesQuery.isError ? (
+                                className="inline-flex items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-3 text-sm font-medium text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"
-            <ErrorState
+                            >
-              title="节点列表加载失败"
+                                应用记录
-              description={getErrorMessage(nodesQuery.error)}
+                            </Link>
-            />
+                        </>
-          ) : filteredNodes.length === 0 ? (
+                    }
-            <EmptyState
+                />
-              title={riskFilter === 'all' ? '暂无节点' : '当前筛选无结果'}
+
-              description={
+                {feedback ? (
-                riskFilter === 'all'
+                    <InlineMessage
-                  ? '请先创建一个节点，然后进入详情页查看专属部署命令。'
+                        tone={feedback.tone}
-                  : '可以返回总览继续排查，或切换到全部节点查看完整列表。'
+                        message={feedback.message}
-              }
+                        onClear={() => setFeedback(null)}
-            />
+                    />
-          ) : (
+                ) : null}
-            <div className="space-y-4">
+
-              <div className="flex flex-wrap gap-2">
+                <AppCard
-                <Link
+                    title="节点列表"
-                  href="/node"
+                    description={filterDescription}
-                  className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
+                    action={
-                    riskFilter === 'all'
+                        <SecondaryButton
-                      ? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
+                            type="button"
-                      : 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
+                            onClick={() =>
-                  }`}
+                                void queryClient.invalidateQueries({queryKey: nodesQueryKey})
+                            }
+                        >
+                            立即刷新
+                        </SecondaryButton>
+                    }
                 >
-                  全部节点
+                    {nodesQuery.isLoading ? (
-                </Link>
+                        <LoadingState/>
-                <Link
+                    ) : nodesQuery.isError ? (
-                  href="/node?risk=offline"
+                        <ErrorState
-                  className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
+                            title="节点列表加载失败"
-                    riskFilter === 'offline'
+                            description={getErrorMessage(nodesQuery.error)}
-                      ? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
+                        />
-                      : 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
+                    ) : filteredNodes.length === 0 ? (
-                  }`}
+                        <EmptyState
-                >
+                            title={nodes.length === 0 ? '暂无节点' : '当前筛选无结果'}
-                  离线节点
+                            description={
-                </Link>
+                                nodes.length === 0
-                <Link
+                                    ? '请先创建一个节点，然后进入详情页查看专属部署命令。'
-                  href="/node?risk=unhealthy"
+                                    : '可以返回总览继续排查，或切换到其他筛选查看完整列表。'
-                  className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
+                            }
-                    riskFilter === 'unhealthy'
+                        />
-                      ? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
+                    ) : (
-                      : 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
+                        <div className="space-y-4">
-                  }`}
+                            <div className="flex flex-wrap gap-2">
-                >
+                                <Link
-                  OpenResty 异常
+                                    href="/node"
-                </Link>
+                                    className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
-                <Link
+                                        nodeFilter === 'all'
-                  href="/node?risk=lagging"
+                                            ? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
-                  className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
+                                            : 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
-                    riskFilter === 'lagging'
+                                    }`}
-                      ? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
+                                >
-                      : 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
+                                    全部节点
-                  }`}
+                                </Link>
-                >
+                                <Link
-                  配置落后
+                                    href="/node?filter=edge"
-                </Link>
+                                    className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
-              </div>
+                                        nodeFilter === 'edge'
+                                            ? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
+                                            : 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
+                                    }`}
+                                >
+                                    Edge
+                                </Link>
+                                <Link
+                                    href="/node?filter=relay"
+                                    className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
+                                        nodeFilter === 'relay'
+                                            ? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
+                                            : 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
+                                    }`}
+                                >
+                                    Relay
+                                </Link>
+                                <Link
+                                    href="/node?filter=tunnel"
+                                    className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
+                                        nodeFilter === 'tunnel'
+                                            ? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
+                                            : 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
+                                    }`}
+                                >
+                                    Tunnel
+                                </Link>
+                                <Link
+                                    href="/node?filter=abnormal"
+                                    className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
+                                        nodeFilter === 'abnormal'
+                                            ? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
+                                            : 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
+                                    }`}
+                                >
+                                    异常
+                                </Link>
+                            </div>
 
-              <div className="overflow-x-auto">
+                            <div className="overflow-x-auto">
-                <table className="min-w-full divide-y divide-[var(--border-default)] text-left text-sm">
+                                <table className="min-w-full divide-y divide-[var(--border-default)] text-left text-sm">
-                  <thead>
+                                    <thead>
-                    <tr className="text-[var(--foreground-secondary)]">
+                                    <tr className="text-[var(--foreground-secondary)]">
-                      <th className="px-3 py-3 font-medium">节点</th>
+                                        <th className="px-3 py-3 font-medium">节点</th>
-                      <th className="px-3 py-3 font-medium">状态</th>
+                                        <th className="px-3 py-3 font-medium">状态</th>
-                      <th className="px-3 py-3 font-medium">
+                                        <th className="px-3 py-3 font-medium">Version</th>
-                        Version
+                                        <th className="px-3 py-3 font-medium">运行健康</th>
-                      </th>
+                                        <th className="px-3 py-3 font-medium">当前版本</th>
-                      <th className="px-3 py-3 font-medium">运行健康</th>
+                                        <th className="px-3 py-3 font-medium">最近应用</th>
-                      <th className="px-3 py-3 font-medium">当前版本</th>
+                                        <th className="px-3 py-3 font-medium">最近心跳</th>
-                      <th className="px-3 py-3 font-medium">最近应用</th>
+                                        <th className="px-3 py-3 font-medium">操作</th>
-                      <th className="px-3 py-3 font-medium">最近心跳</th>
+                                    </tr>
-                      <th className="px-3 py-3 font-medium">操作</th>
+                                    </thead>
-                    </tr>
+                                    <tbody className="divide-y divide-[var(--border-default)]">
-                  </thead>
+                                    {filteredNodes.map((node) => (
-                  <tbody className="divide-y divide-[var(--border-default)]">
+                                        <tr key={node.id} className="align-top">
-                    {filteredNodes.map((node) => (
+                                            <td className="px-3 py-4">
-                      <tr key={node.id} className="align-top">
+                                                <div className="space-y-1">
-                        <td className="px-3 py-4">
+                                                    <div className="flex items-center gap-2">
-                          <div className="space-y-1">
+                                                        <p className="font-medium text-[var(--foreground-primary)]">
-                            <div className="flex items-center gap-2">
+                                                            {node.name}
-                              <p className="font-medium text-[var(--foreground-primary)]">
+                                                        </p>
-                                {node.name}
+                                                        {node.node_type === 'tunnel_relay' ? (
-                              </p>
+                                                            <span
-                              {node.node_type === 'tunnel_relay' ? (
+                                                                className="rounded-full border border-blue-500/20 bg-blue-50 px-2 py-0.5 text-xs text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
-                                <span className="rounded-full border border-blue-500/20 bg-blue-50 px-2 py-0.5 text-xs text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
                                   Relay
                                 </span>
-                              ) : node.node_type === 'tunnel_client' ? (
+                                                        ) : node.node_type === 'tunnel_client' ? (
-                                <span className="rounded-full border border-purple-500/20 bg-purple-50 px-2 py-0.5 text-xs text-purple-700 dark:bg-purple-900/30 dark:text-purple-300">
+                                                            <span
+                                                                className="rounded-full border border-purple-500/20 bg-purple-50 px-2 py-0.5 text-xs text-purple-700 dark:bg-purple-900/30 dark:text-purple-300">
                                   Client
                                 </span>
-                              ) : (
+                                                        ) : (
-                                <span className="rounded-full border border-gray-500/20 bg-gray-50 px-2 py-0.5 text-xs text-gray-700 dark:bg-gray-800/50 dark:text-gray-300">
+                                                            <span
+                                                                className="rounded-full border border-gray-500/20 bg-gray-50 px-2 py-0.5 text-xs text-gray-700 dark:bg-gray-800/50 dark:text-gray-300">
                                   Edge
                                 </span>
-                              )}
+                                                        )}
+                                                    </div>
+                                                    <p className="text-xs text-[var(--foreground-secondary)]">
+                                                        IP：{node.ip || 'null'}
+                                                        {node.ip_manual_override ? '（已锁定）' : ''}
+                                                    </p>
+                                                    <p className="text-xs text-[var(--foreground-secondary)]">
+                                                        位置：{node.geo_name || '未配置地图点位'}
+                                                    </p>
+                                                </div>
+                                            </td>
+                                            <td className="px-3 py-4">
+                                                <StatusBadge
+                                                    label={getNodeStatusLabel(node.status)}
+                                                    variant={getNodeStatusVariant(node.status)}
+                                                />
+                                            </td>
+                                            <td className="px-3 py-4 text-sm text-[var(--foreground-secondary)]">
+                                                {node.version || 'unknown'}
+                                            </td>
+                                            <td className="px-3 py-4">
+                                                <div className="space-y-2">
+                                                    {node.node_type === 'tunnel_relay' ? (
+                                                        <StatusBadge
+                                                            label={getRelayStatusLabel(node.relay_status)}
+                                                            variant={getRelayStatusVariant(
+                                                                node.relay_status,
+                                                            )}
+                                                        />
+                                                    ) : node.node_type === 'tunnel_client' ? (
+                                                        <span className="text-sm text-[var(--foreground-secondary)]">
+                                -
+                              </span>
+                                                    ) : (
+                                                        <StatusBadge
+                                                            label={getOpenrestyStatusLabel(
+                                                                node.openresty_status,
+                                                            )}
+                                                            variant={getOpenrestyStatusVariant(
+                                                                node.openresty_status,
+                                                            )}
+                                                        />
+                                                    )}
+                                                </div>
+                                            </td>
+                                            <td className="px-3 py-4 text-[var(--foreground-secondary)]">
+                                                {node.current_version || '未应用'}
+                                            </td>
+                                            <td className="px-3 py-4">
+                                                <div className="space-y-2">
+                                                    <StatusBadge
+                                                        label={getApplyLabel(node.latest_apply_result)}
+                                                        variant={getApplyVariant(
+                                                            node.latest_apply_result,
+                                                        )}
+                                                    />
+                                                </div>
+                                            </td>
+                                            <td className="px-3 py-4 text-[var(--foreground-secondary)]">
+                                                {isWSConnectedLastSeen(node.last_seen_at)
+                                                    ? 'WS 已连接'
+                                                    : isMeaningfulTime(node.last_seen_at)
+                                                        ? `${formatRelativeTime(
+                                                            node.last_seen_at,
+                                                        )} · ${formatDateTime(node.last_seen_at)}`
+                                                        : '暂无'}
+                                            </td>
+                                            <td className="px-3 py-4">
+                                                <div className="flex flex-wrap gap-2">
+                                                    <Link
+                                                        href={`/node/detail?id=${node.id}`}
+                                                        className="inline-flex items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-3 py-2 text-xs font-medium text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"
+                                                    >
+                                                        详情
+                                                    </Link>
+                                                    <SecondaryButton
+                                                        type="button"
+                                                        onClick={() => handleEdit(node)}
+                                                        className="px-3 py-2 text-xs"
+                                                    >
+                                                        编辑
+                                                    </SecondaryButton>
+                                                    <DangerButton
+                                                        type="button"
+                                                        onClick={() => handleDelete(node.id, node.name)}
+                                                        disabled={deleteMutation.isPending}
+                                                        className="px-3 py-2 text-xs"
+                                                    >
+                                                        删除
+                                                    </DangerButton>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    ))}
+                                    </tbody>
+                                </table>
                             </div>
-                            <p className="text-xs text-[var(--foreground-secondary)]">
+                        </div>
-                              IP：{node.ip || 'null'}
+                    )}
-                              {node.ip_manual_override ? '（已锁定）' : ''}
+                </AppCard>
-                            </p>
-                            <p className="text-xs text-[var(--foreground-secondary)]">
-                              位置：{node.geo_name || '未配置地图点位'}
-                            </p>
-                          </div>
-                        </td>
-                        <td className="px-3 py-4">
-                          <StatusBadge
-                            label={getNodeStatusLabel(node.status)}
-                            variant={getNodeStatusVariant(node.status)}
-                          />
-                        </td>
-                        <td className="px-3 py-4 text-sm text-[var(--foreground-secondary)]">
-                          {node.version || 'unknown'}
-                        </td>
-                        <td className="px-3 py-4">
-                          <div className="space-y-2">
-                            {node.node_type === 'tunnel_relay' ? (
-                              <StatusBadge
-                                label={getRelayStatusLabel(node.relay_status)}
-                                variant={getRelayStatusVariant(node.relay_status)}
-                              />
-                            ) : node.node_type === 'tunnel_client' ? (
-                              <span className="text-sm text-[var(--foreground-secondary)]">-</span>
-                            ) : (
-                              <StatusBadge
-                                label={getOpenrestyStatusLabel(
-                                  node.openresty_status,
-                                )}
-                                variant={getOpenrestyStatusVariant(
-                                  node.openresty_status,
-                                )}
-                              />
-                            )}
-                          </div>
-                        </td>
-                        <td className="px-3 py-4 text-[var(--foreground-secondary)]">
-                          {node.current_version || '未应用'}
-                        </td>
-                        <td className="px-3 py-4">
-                          <div className="space-y-2">
-                            <StatusBadge
-                              label={getApplyLabel(node.latest_apply_result)}
-                              variant={getApplyVariant(
-                                node.latest_apply_result,
-                              )}
-                            />
-                          </div>
-                        </td>
-                        <td className="px-3 py-4 text-[var(--foreground-secondary)]">
-                          {isWSConnectedLastSeen(node.last_seen_at)
-                            ? 'WS 已连接'
-                            : isMeaningfulTime(node.last_seen_at)
-                              ? `${formatRelativeTime(
-                                  node.last_seen_at,
-                                )} · ${formatDateTime(node.last_seen_at)}`
-                              : '暂无'}
-                        </td>
-                        <td className="px-3 py-4">
-                          <div className="flex flex-wrap gap-2">
-                            <Link
-                              href={`/node/detail?id=${node.id}`}
-                              className="inline-flex items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-3 py-2 text-xs font-medium text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"
-                            >
-                              详情
-                            </Link>
-                            <SecondaryButton
-                              type="button"
-                              onClick={() => handleEdit(node)}
-                              className="px-3 py-2 text-xs"
-                            >
-                              编辑
-                            </SecondaryButton>
-                            <DangerButton
-                              type="button"
-                              onClick={() => handleDelete(node.id, node.name)}
-                              disabled={deleteMutation.isPending}
-                              className="px-3 py-2 text-xs"
-                            >
-                              删除
-                            </DangerButton>
-                          </div>
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
             </div>
-          )}
+            <NodeEditorModal
-        </AppCard>
+                isOpen={isEditorOpen}
-      </div>
+                node={editingNode}
-      <NodeEditorModal
+                isSubmitting={saveMutation.isPending}
-        isOpen={isEditorOpen}
+                title={editingNode ? '编辑节点' : '新增节点'}
-        node={editingNode}
+                onClose={handleReset}
-        isSubmitting={saveMutation.isPending}
+                description="预创建节点后可在详情页查看专属 Token、部署命令与更新控制。"
-        title={editingNode ? '编辑节点' : '新增节点'}
+                submitLabel={editingNode ? '保存修改' : '新增节点'}
-        onClose={handleReset}
+                onSubmit={(payload) => {
-        description="预创建节点后可在详情页查看专属 Token、部署命令与更新控制。"
+                    setFeedback(null);
-        submitLabel={editingNode ? '保存修改' : '新增节点'}
+                    saveMutation.mutate(payload);
-        onSubmit={(payload) => {
+                }}
-          setFeedback(null);
+            />
-          saveMutation.mutate(payload);
+        </>
-        }}
+    );
-      />
-    </>
-  );
 }

openflare_server/web/features/nodes/components/relay-detail-page.tsx

@@ -27,10 +27,7 @@ import {
   updateNode,
 } from '@/features/nodes/api/nodes';
 import { NodeEditorModal } from '@/features/nodes/components/node-editor-modal';
-import type {
+import type { NodeItem, NodeAgentReleaseInfo } from '@/features/nodes/types';
-  NodeItem,
-  NodeAgentReleaseInfo,
-} from '@/features/nodes/types';
 import {
   CodeBlock,
   DangerButton,
@@ -50,6 +47,7 @@ import {
   getServerUrl,
   getUpdateMode,
   isMeaningfulTime,
+  isWSConnectedLastSeen,
 } from '@/features/nodes/utils';
 import {
   copyToClipboard,
@@ -216,9 +214,11 @@ export function RelayDetailPage({ node }: { node: NodeItem }) {
   });
 
   const handleDelete = () => {
-    if (!window.confirm(
+    if (
-      `确认删除中继节点“${node.name}”吗？删除后该节点需要重新创建并重新接入。`,
+      !window.confirm(
-    )) {
+        `确认删除中继节点“${node.name}”吗？删除后该节点需要重新创建并重新接入。`,
+      )
+    ) {
       return;
     }
     setFeedback(null);
@@ -265,7 +265,12 @@ export function RelayDetailPage({ node }: { node: NodeItem }) {
       default:
         return observability?.health_events ?? [];
     }
-  }, [activeHealthEvents, healthEventFilter, observability?.health_events, resolvedHealthEvents]);
+  }, [
+    activeHealthEvents,
+    healthEventFilter,
+    observability?.health_events,
+    resolvedHealthEvents,
+  ]);
 
   const tabs = useMemo(
     () =>
@@ -290,12 +295,12 @@ export function RelayDetailPage({ node }: { node: NodeItem }) {
 
   const normalizedServerUrl = getServerUrl(serverUrl);
   const relayInstallCommand =
-    normalizedServerUrl && node.agent_token
+    normalizedServerUrl && node.access_token
-      ? buildRelayInstallCommand(normalizedServerUrl, node.agent_token)
+      ? buildRelayInstallCommand(normalizedServerUrl, node.access_token)
       : '';
   const relayDockerInstallCommand =
-    normalizedServerUrl && node.agent_token
+    normalizedServerUrl && node.access_token
-      ? buildRelayDockerInstallCommand(normalizedServerUrl, node.agent_token)
+      ? buildRelayDockerInstallCommand(normalizedServerUrl, node.access_token)
       : '';
 
   const updateMode = getUpdateMode(node);
@@ -570,7 +575,9 @@ export function RelayDetailPage({ node }: { node: NodeItem }) {
                           总内存
                         </p>
                         <p className="mt-2 text-sm text-[var(--foreground-primary)]">
-                          {formatBytes(observability.profile.total_memory_bytes)}
+                          {formatBytes(
+                            observability.profile.total_memory_bytes,
+                          )}
                         </p>
                       </div>
                       <div>
@@ -614,7 +621,9 @@ export function RelayDetailPage({ node }: { node: NodeItem }) {
                     <div className="grid gap-4 md:grid-cols-2">
                       <MetricBar
                         label="CPU"
-                        value={formatPercent(latestMetricSnapshot.cpu_usage_percent)}
+                        value={formatPercent(
+                          latestMetricSnapshot.cpu_usage_percent,
+                        )}
                         progress={latestMetricSnapshot.cpu_usage_percent}
                         hint={
                           isMeaningfulTime(latestMetricSnapshot.captured_at)
@@ -723,8 +732,12 @@ export function RelayDetailPage({ node }: { node: NodeItem }) {
                             variant={getHealthEventVariant(event)}
                           />
                           <StatusBadge
-                            label={event.status === 'active' ? '活动中' : '已恢复'}
+                            label={
-                            variant={event.status === 'active' ? 'warning' : 'success'}
+                              event.status === 'active' ? '活动中' : '已恢复'
+                            }
+                            variant={
+                              event.status === 'active' ? 'warning' : 'success'
+                            }
                           />
                         </div>
                         <p className="mt-3 text-sm text-[var(--foreground-secondary)]">
@@ -768,17 +781,26 @@ export function RelayDetailPage({ node }: { node: NodeItem }) {
             </div>
 
             <div className="grid gap-6 xl:grid-cols-1">
-              <AppCard title="隧道活跃通道状态" description="展示中继节点上活跃并连接的 frps 网络隧道代理。">
+              <AppCard
+                title="隧道活跃通道状态"
+                description="展示中继节点上活跃并连接的 frps 网络隧道代理。"
+              >
                 {observability?.relay_dashboard?.proxies?.length ? (
                   <div className="overflow-x-auto">
                     <table className="w-full text-left text-sm text-[var(--foreground-secondary)]">
                       <thead className="border-b border-[var(--border-default)]">
                         <tr>
-                          <th className="px-4 py-3 font-medium">代理名称 (Proxy Name)</th>
+                          <th className="px-4 py-3 font-medium">
+                            代理名称 (Proxy Name)
+                          </th>
                           <th className="px-4 py-3 font-medium">代理类型</th>
                           <th className="px-4 py-3 font-medium">在线状态</th>
-                          <th className="px-4 py-3 font-medium">客户端接入地址</th>
+                          <th className="px-4 py-3 font-medium">
-                          <th className="px-4 py-3 font-medium">最近连接时间</th>
+                            客户端接入地址
+                          </th>
+                          <th className="px-4 py-3 font-medium">
+                            最近连接时间
+                          </th>
                         </tr>
                       </thead>
                       <tbody className="divide-y divide-[var(--border-default)]">
@@ -790,8 +812,12 @@ export function RelayDetailPage({ node }: { node: NodeItem }) {
                             <td className="px-4 py-3">{proxy.type}</td>
                             <td className="px-4 py-3">
                               <StatusBadge
-                                label={proxy.status === 'online' ? '在线' : '离线'}
+                                label={
-                                variant={proxy.status === 'online' ? 'success' : 'info'}
+                                  proxy.status === 'online' ? '在线' : '离线'
+                                }
+                                variant={
+                                  proxy.status === 'online' ? 'success' : 'info'
+                                }
                               />
                             </td>
                             <td className="px-4 py-3">{proxy.client_addr}</td>
@@ -894,7 +920,9 @@ export function RelayDetailPage({ node }: { node: NodeItem }) {
                     </p>
                     <div className="mt-3 flex flex-wrap items-center gap-3">
                       <StatusBadge
-                        label={isTargetVersionApplied ? '已追平目标版本' : '同步落后'}
+                        label={
+                          isTargetVersionApplied ? '已追平目标版本' : '同步落后'
+                        }
                         variant={isTargetVersionApplied ? 'success' : 'warning'}
                       />
                     </div>
@@ -989,7 +1017,7 @@ export function RelayDetailPage({ node }: { node: NodeItem }) {
                         Discovery Token (中继注册 Token)
                       </p>
                       <p className="mt-2 text-sm break-all text-[var(--foreground-primary)]">
-                        {node.agent_token || '暂无'}
+                        {node.access_token || '暂无'}
                       </p>
                     </div>
                   </div>
@@ -1045,6 +1073,18 @@ export function RelayDetailPage({ node }: { node: NodeItem }) {
                     </p>
                     <p className="mt-1">{node.relay_bind_port || '—'}</p>
                   </div>
+                  <div>
+                    <p className="font-medium text-[var(--foreground-primary)]">
+                      最后心跳
+                    </p>
+                    <p className="mt-1">
+                      {isWSConnectedLastSeen(node.last_seen_at)
+                        ? 'WS 已连接'
+                        : isMeaningfulTime(node.last_seen_at)
+                          ? `${formatRelativeTime(node.last_seen_at)} · ${formatDateTime(node.last_seen_at)}`
+                          : '暂无'}
+                    </p>
+                  </div>
                   <div>
                     <p className="font-medium text-[var(--foreground-primary)]">
                       中继节点最近错误
@@ -1199,12 +1239,8 @@ export function RelayDetailPage({ node }: { node: NodeItem }) {
           />
         ) : (
           <div className="space-y-3 text-sm text-[var(--foreground-secondary)]">
-            <p>
+            <p>该操作会删除此中继节点在控制端记录的所有健康诊断事件历史。</p>
-              该操作会删除此中继节点在控制端记录的所有健康诊断事件历史。
+            <p>这不会影响节点在后续运行中继续捕捉并上报新的故障。</p>
-            </p>
-            <p>
-              这不会影响节点在后续运行中继续捕捉并上报新的故障。
-            </p>
           </div>
         )}
       </AppModal>
@@ -1273,8 +1309,12 @@ export function RelayDetailPage({ node }: { node: NodeItem }) {
                   {selectedReleaseChannel === 'preview' ? '预览版' : '正式版'}
                 </p>
                 <StatusBadge
-                  label={selectedReleaseChannel === 'preview' ? 'Preview' : 'Stable'}
+                  label={
-                  variant={selectedReleaseChannel === 'preview' ? 'warning' : 'info'}
+                    selectedReleaseChannel === 'preview' ? 'Preview' : 'Stable'
+                  }
+                  variant={
+                    selectedReleaseChannel === 'preview' ? 'warning' : 'info'
+                  }
                 />
               </div>
             </AppCard>
@@ -1327,7 +1367,9 @@ export function RelayDetailPage({ node }: { node: NodeItem }) {
                         ? '发现可升级版本'
                         : '当前已是最新版本'
                     }
-                    variant={selectedAgentRelease.has_update ? 'warning' : 'success'}
+                    variant={
+                      selectedAgentRelease.has_update ? 'warning' : 'success'
+                    }
                   />
                   {selectedAgentRelease.prerelease ? (
                     <StatusBadge label="Preview 发布" variant="warning" />

openflare_server/web/features/nodes/types.ts

@@ -19,7 +19,7 @@ export interface NodeItem {
   geo_latitude?: number | null;
   geo_longitude?: number | null;
   geo_manual_override: boolean;
-  agent_token: string;
+  access_token: string;
   auto_update_enabled: boolean;
   update_requested: boolean;
   update_channel: ReleaseChannel;

openflare_server/web/features/nodes/utils.ts

@@ -112,6 +112,26 @@ export function getOpenrestyStatusLabel(status: NodeItem['openresty_status']) {
   return '未知';
 }
 
+export function isNodeAbnormal(node: NodeItem, activeVersion?: string) {
+  if (node.status === 'offline') {
+    return true;
+  }
+
+  if (activeVersion && node.current_version !== activeVersion) {
+    return true;
+  }
+
+  if (node.node_type === 'tunnel_relay') {
+    return node.relay_status === 'unhealthy';
+  }
+
+  if (node.node_type === 'edge_node') {
+    return node.openresty_status === 'unhealthy';
+  }
+
+  return false;
+}
+
 function parseVersionParts(version: string) {
   const normalized = version.trim().replace(/^v/i, '');
   if (!normalized || normalized.toLowerCase() === 'unknown') {
@@ -220,7 +240,10 @@ export function getRelayStatusLabel(status: string | null | undefined) {
 const relayInstallerScriptUrl =
   'https://raw.githubusercontent.com/Rain-kl/OpenFlare/main/scripts/install-relay.sh';
 
-export function buildRelayInstallCommand(serverUrl: string, discoveryToken: string) {
+export function buildRelayInstallCommand(
+  serverUrl: string,
+  discoveryToken: string,
+) {
   return [
     `curl -fsSL ${relayInstallerScriptUrl} | bash -s -- \\`,
     `  --server-url ${serverUrl} \\`,
@@ -244,7 +267,10 @@ export function buildRelayDockerInstallCommand(
   ].join('\n');
 }
 
-export function buildTunnelInstallCommand(serverUrl: string, tunnelToken: string) {
+export function buildTunnelInstallCommand(
+  serverUrl: string,
+  tunnelToken: string,
+) {
   const flaredInstallerScriptUrl =
     'https://raw.githubusercontent.com/Rain-kl/OpenFlare/main/scripts/install-flared.sh';
   return [

openflare_server/web/tests/unit/nodes-utils.test.ts

@@ -0,0 +1,104 @@
+import { describe, expect, it } from 'vitest';
+
+import type { NodeItem } from '@/features/nodes/types';
+import { isNodeAbnormal } from '@/features/nodes/utils';
+
+function buildNode(overrides: Partial<NodeItem> = {}): NodeItem {
+  return {
+    id: 1,
+    node_id: 'node-1',
+    node_type: 'edge_node',
+    name: 'node-1',
+    ip: '127.0.0.1',
+    ip_manual_override: false,
+    relay_bind_port: 7000,
+    relay_client_access_addr: '',
+    relay_agent_access_addr: '',
+    relay_client_proxy_url: '',
+    relay_auth_token: '',
+    relay_status: 'healthy',
+    relay_frps_connections: 0,
+    relay_frps_proxy_count: 0,
+    geo_name: '',
+    geo_latitude: null,
+    geo_longitude: null,
+    geo_manual_override: false,
+    access_token: '',
+    auto_update_enabled: false,
+    update_requested: false,
+    update_channel: 'stable',
+    update_tag: '',
+    restart_openresty_requested: false,
+    version: '1.0.0',
+    ext_version: '',
+    openresty_status: 'healthy',
+    openresty_message: '',
+    status: 'online',
+    current_version: '20260601-001',
+    last_seen_at: '',
+    last_error: '',
+    latest_apply_result: '',
+    latest_apply_message: '',
+    latest_apply_checksum: '',
+    latest_main_config_checksum: '',
+    latest_route_config_checksum: '',
+    latest_support_file_count: 0,
+    latest_apply_at: null,
+    created_at: '',
+    updated_at: '',
+    ...overrides,
+  };
+}
+
+describe('isNodeAbnormal', () => {
+  it('treats offline nodes as abnormal', () => {
+    expect(
+      isNodeAbnormal(buildNode({ status: 'offline' }), '20260601-001'),
+    ).toBe(true);
+  });
+
+  it('treats unhealthy edge nodes as abnormal', () => {
+    expect(
+      isNodeAbnormal(
+        buildNode({ node_type: 'edge_node', openresty_status: 'unhealthy' }),
+        '20260601-001',
+      ),
+    ).toBe(true);
+  });
+
+  it('treats unhealthy relay nodes as abnormal', () => {
+    expect(
+      isNodeAbnormal(
+        buildNode({ node_type: 'tunnel_relay', relay_status: 'unhealthy' }),
+        '20260601-001',
+      ),
+    ).toBe(true);
+  });
+
+  it('treats nodes behind the active version as abnormal', () => {
+    expect(
+      isNodeAbnormal(
+        buildNode({
+          node_type: 'tunnel_client',
+          current_version: '20260531-001',
+        }),
+        '20260601-001',
+      ),
+    ).toBe(true);
+  });
+
+  it('ignores version lag when there is no active version', () => {
+    expect(
+      isNodeAbnormal(
+        buildNode({
+          node_type: 'tunnel_client',
+          current_version: '20260531-001',
+        }),
+      ),
+    ).toBe(false);
+  });
+
+  it('keeps healthy synced nodes out of the abnormal filter', () => {
+    expect(isNodeAbnormal(buildNode(), '20260601-001')).toBe(false);
+  });
+});