feat: node OS logo and UI fixes (#367)

* chore: update AGENTS.md with next release info

* feat: node OS logo, UI rate fix, and monitor trend updates

AGENTS.md

@@ -1,9 +1,9 @@
 # PROJECT KNOWLEDGE BASE
 
 **Generated:** Sat Mar 21 2026
-**Commit:** 433c8aa
+**Commit:** 0767c9c
 **Branch:** main
-**Tag:** 2.1.9-beta12
+**Tag:** 2.1.9-beta13
 
 ## OVERVIEW
 FLVX (formerly Flux Panel) is a traffic forwarding management system built on a forked GOST v3 stack. It ships as a Go-based admin API (SQLite/PostgreSQL) + Vite/React UI + Go forwarding agent, with optional mobile WebView wrappers.

go-backend/internal/http/handler/monitoring.go

@@ -71,6 +71,7 @@ type monitorNodeListItem struct {
 	Inx         int    `json:"inx"`
 	Name        string `json:"name"`
 	Status      int    `json:"status"`
+	Version     string `json:"version"`
 	UpdatedTime int64  `json:"updatedTime"`
 }
 
@@ -100,6 +101,7 @@ func (h *Handler) monitorNodeListHandler(w http.ResponseWriter, r *http.Request)
 			Inx:         n.Inx,
 			Name:        n.Name,
 			Status:      n.Status,
+			Version:     n.Version.String,
 			UpdatedTime: updated,
 		})
 	}

go-backend/internal/store/repo/repository_monitor_nodes.go

@@ -11,7 +11,7 @@ func (r *Repository) ListMonitorNodes() ([]model.Node, error) {
 		return nil, errors.New("repository not initialized")
 	}
 	var nodes []model.Node
-	err := r.db.Select("id", "inx", "name", "status", "updated_time").
+	err := r.db.Select("id", "inx", "name", "status", "version", "updated_time").
 		Where("is_remote = ?", 0).
 		Order("inx ASC, id ASC").
 		Find(&nodes).Error

go-gost/main.go

@@ -119,7 +119,9 @@ func main() {
 	log := xlogger.NewLogger()
 	logger.SetDefault(log)
 
-	wsReporter := socket.StartWebSocketReporterWithConfig(config.Addr, config.Secret, config.Http, config.Tls, config.Socks, version)
+	distro := socket.DetectDistro()
+	fullVersion := fmt.Sprintf("%s (%s/%s)", version, distro, runtime.GOARCH)
+	wsReporter := socket.StartWebSocketReporterWithConfig(config.Addr, config.Secret, config.Http, config.Tls, config.Socks, fullVersion)
 	defer wsReporter.Stop()
 	service.SetHTTPReportURL(config.Addr, config.Secret)
 

go-gost/x/socket/distro.go

@@ -0,0 +1,21 @@
+package socket
+
+import (
+	"strings"
+
+	"github.com/shirou/gopsutil/v3/host"
+)
+
+// DetectDistro returns the Linux distribution name (e.g. "ubuntu", "centos",
+// "debian"). Falls back to "linux" when detection fails.
+func DetectDistro() string {
+	info, err := host.Info()
+	if err != nil || info == nil {
+		return "linux"
+	}
+	platform := strings.ToLower(strings.TrimSpace(info.Platform))
+	if platform == "" {
+		return "linux"
+	}
+	return platform
+}

go-gost/x/socket/websocket_reporter.go

@@ -348,7 +348,7 @@ func buildWebSocketCandidates(addr string, secret string, version string, http i
 		normalizedAddr = strings.TrimSpace(addr)
 	}
 
-	query := "/system-info?type=1&secret=" + secret + "&version=" + version +
+	query := "/system-info?type=1&secret=" + url.QueryEscape(secret) + "&version=" + url.QueryEscape(version) +
 		"&http=" + strconv.Itoa(http) + "&tls=" + strconv.Itoa(tls) + "&socks=" + strconv.Itoa(socks)
 
 	schemes := []string{"wss", "ws"}

plans/061-node-os-logo.md

@@ -0,0 +1,15 @@
+# Plan 061: Node Logo By OS Type (Linux Distro)
+
+## Objective
+Display different logos for nodes in the 'Monitor - Node - Card/List View' based on their Linux distribution (Ubuntu, Debian, CentOS, Alpine, etc.).
+
+## Tasks
+- [x] Agent: Use `gopsutil/v3/host.Info().Platform` to detect the Linux distro and include it in the version string (`distro.go`).
+- [x] Agent: Update `main.go` to call `socket.DetectDistro()` instead of `runtime.GOOS`.
+- [x] Agent: Ensure version parameter is URL-escaped since it now includes distro info with special chars.
+- [x] Backend: Select `version` column in `ListMonitorNodes`.
+- [x] Backend: Include `version` in `monitorNodeListItem` JSON response.
+- [x] Frontend: Add `version` to TypeScript interfaces (`MonitorNodeApiItem`, `MonitorNode`, `MonitorViewProps`).
+- [x] Frontend: Create `distro-icon.tsx` component with SVG logos for Ubuntu, Debian, CentOS/Rocky/Alma, Alpine, Fedora, Arch/Manjaro, and a default Linux (Tux) fallback.
+- [x] Frontend: Use `DistroIcon` in `ServerCard` (card view) and list view name column with branded colors per distro.
+- [x] All three projects compile cleanly (`go build`, `tsc --noEmit`).

plans/062-release-beta14.md

@@ -0,0 +1,49 @@
+# Plan 062: Commit, PR, Merge and Tag
+
+## Overview
+This plan outlines the steps to commit all changes, create a PR, merge it, and then publish a new tag for the FLVX project.
+
+## Checklist
+- [ ] Check current git status for any unexpected changes
+- [ ] Create a feature branch `feat-node-os-logo-release`
+- [ ] Stage and commit all modifications and untracked files
+- [ ] Push the feature branch to origin
+- [ ] Create a Pull Request (PR) from the feature branch to `main`
+- [ ] Merge the PR to `main`
+- [ ] Update `AGENTS.md` with the new tag and commit hash
+- [ ] Create and push new tag `2.1.9-beta14`
+
+## Detailed Steps
+
+### 1. Create Feature Branch
+```bash
+git checkout -b feat-node-os-logo-release
+```
+
+### 2. Commit all changes
+Add all modified and untracked files:
+```bash
+git add .
+git commit -m "feat: node OS logo support, UI rate overlap fix and tunnel monitoring updates"
+```
+
+### 3. Push and PR
+Push to `origin`:
+```bash
+git push origin feat-node-os-logo-release
+```
+Create PR via `gh pr create` if possible.
+
+### 4. Merge to Main
+```bash
+git checkout main
+git merge feat-node-os-logo-release
+git push origin main
+```
+
+### 5. Create Tag
+Increment the current tag `2.1.9-beta13` to `2.1.9-beta14`.
+```bash
+git tag 2.1.9-beta14
+git push origin 2.1.9-beta14
+```

vite-frontend/src/api/types.ts

@@ -466,6 +466,7 @@ export interface MonitorNodeApiItem {
   inx: number;
   name: string;
   status: number;
+  version?: string;
   updatedTime: number;
 }
 

vite-frontend/src/components/distro-icon.tsx

@@ -0,0 +1,154 @@
+import type { SVGProps } from "react";
+
+// Map of Linux distribution names to their SVG logo components.
+// Version strings from the agent look like "v1.0.0 (ubuntu/amd64)".
+
+const distroColors: Record<string, string> = {
+  ubuntu: "#E95420",
+  debian: "#A81D33",
+  centos: "#262577",
+  rocky: "#10B981",
+  alma: "#0F4266",
+  alpine: "#0D597F",
+  fedora: "#51A2DA",
+  arch: "#1793D1",
+  opensuse: "#73BA25",
+  suse: "#73BA25",
+  rhel: "#EE0000",
+  redhat: "#EE0000",
+  oracle: "#F80000",
+  amazon: "#FF9900",
+  amzn: "#FF9900",
+  kali: "#557C94",
+  mint: "#87CF3E",
+  gentoo: "#54487A",
+  void: "#478061",
+  nixos: "#7EBAE4",
+  manjaro: "#35BF5C",
+};
+
+function UbuntuIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" strokeWidth="1.5" />
+      <circle cx="12" cy="5" r="2" />
+      <circle cx="5.5" cy="15.5" r="2" />
+      <circle cx="18.5" cy="15.5" r="2" />
+      <circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" strokeWidth="1.5" />
+    </svg>
+  );
+}
+
+function DebianIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm3.5 14.5c-1.5 1.2-3 1.5-4.5 1.3-2-.3-3.5-1.5-4.2-3.3-.8-2-.5-4 .8-5.6 1-1.2 2.3-1.9 3.9-2 1.2 0 2 .3 2 .3l-.1 1s-.8-.4-1.7-.3c-2 .1-3.5 1.7-3.4 3.8.1 1.8 1.3 3.2 3 3.5 1.2.2 2.3-.1 3.2-.8l1 2.1z" />
+    </svg>
+  );
+}
+
+function CentOSIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <rect x="3" y="3" width="8" height="8" rx="1" opacity="0.9" />
+      <rect x="13" y="3" width="8" height="8" rx="1" opacity="0.7" />
+      <rect x="3" y="13" width="8" height="8" rx="1" opacity="0.7" />
+      <rect x="13" y="13" width="8" height="8" rx="1" opacity="0.5" />
+      <circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" strokeWidth="1.5" />
+    </svg>
+  );
+}
+
+function AlpineIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <path d="M12 3L2 19h20L12 3zm0 4l6 10H6l6-10z" />
+    </svg>
+  );
+}
+
+function FedoraIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" strokeWidth="1.5" />
+      <path d="M12 6v6h6" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+      <text x="8" y="17" fontSize="6" fontWeight="bold" fill="currentColor">f</text>
+    </svg>
+  );
+}
+
+function ArchIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <path d="M12 2l-2 5c1 1.5 1.5 3 2 5 .5-2 1-3.5 2-5L12 2zM8.5 10C6.5 14 4 17 2 20c2.5-1.5 4.5-2.5 7-3-1-2-1.5-4.5-0.5-7zM15.5 10c1 2.5.5 5-.5 7 2.5.5 4.5 1.5 7 3-2-3-4.5-6-6.5-10z" />
+    </svg>
+  );
+}
+
+function DefaultLinuxIcon(props: SVGProps<SVGSVGElement>) {
+  // Tux-inspired simple penguin outline
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <path d="M12 2C9.8 2 8 4.1 8 6.5c0 1.2.4 2.2 1 3l-1.5 4.5c-.3 1-.5 2-.5 3 0 2.2 2.2 4 5 4s5-1.8 5-4c0-1-.2-2-.5-3L15 9.5c.6-.8 1-1.8 1-3C16 4.1 14.2 2 12 2zm-1.5 6a1 1 0 110-2 1 1 0 010 2zm3 0a1 1 0 110-2 1 1 0 010 2zm-3 3h3l.5 1h-4l.5-1z" />
+    </svg>
+  );
+}
+
+type DistroIconProps = SVGProps<SVGSVGElement> & {
+  distro: string;
+};
+
+/**
+ * Detect the Linux distro from a version string like "v1.0.0 (ubuntu/amd64)"
+ * and return the normalized distro key.
+ */
+export function parseDistroFromVersion(version?: string): string {
+  if (!version) return "linux";
+  const lower = version.toLowerCase();
+
+  // Try to extract from parenthetical format: (distro/arch)
+  const match = lower.match(/\(([^/)\s]+)/);
+  if (match) {
+    return match[1].trim();
+  }
+
+  // Fallback: check for known distro names anywhere in the string
+  const knownDistros = [
+    "ubuntu", "debian", "centos", "rocky", "alma", "alpine",
+    "fedora", "arch", "opensuse", "suse", "rhel", "redhat",
+    "oracle", "amazon", "amzn", "kali", "mint", "gentoo",
+    "void", "nixos", "manjaro",
+  ];
+  for (const d of knownDistros) {
+    if (lower.includes(d)) return d;
+  }
+
+  return "linux";
+}
+
+/**
+ * Returns a branded color for the detected distro.
+ */
+export function getDistroColor(distro: string): string {
+  const key = distro.toLowerCase();
+  for (const [name, color] of Object.entries(distroColors)) {
+    if (key.includes(name)) return color;
+  }
+  return "#6366F1"; // default indigo for unknown linux
+}
+
+/**
+ * Render an SVG icon for the given Linux distribution.
+ */
+export function DistroIcon({ distro, ...props }: DistroIconProps) {
+  const key = distro.toLowerCase();
+
+  if (key.includes("ubuntu")) return <UbuntuIcon {...props} />;
+  if (key.includes("debian")) return <DebianIcon {...props} />;
+  if (key.includes("centos") || key.includes("rocky") || key.includes("alma")) return <CentOSIcon {...props} />;
+  if (key.includes("alpine")) return <AlpineIcon {...props} />;
+  if (key.includes("fedora")) return <FedoraIcon {...props} />;
+  if (key.includes("arch") || key.includes("manjaro")) return <ArchIcon {...props} />;
+
+  return <DefaultLinuxIcon {...props} />;
+}

vite-frontend/src/pages/monitor.tsx

@@ -15,6 +15,7 @@ type MonitorNode = {
   id: number;
   name: string;
   connectionStatus: "online" | "offline";
+  version?: string;
 };
 
 type MonitorTab = "nodes" | "tunnels";
@@ -73,6 +74,7 @@ export default function MonitorPage() {
         id: Number(n.id),
         name: String(n.name ?? ""),
         connectionStatus: n.status === 1 ? "online" : "offline",
+        version: n.version,
       }));
 
     return new Map<number, MonitorNode>(list.map((n) => [n.id, n]));

vite-frontend/src/pages/node/monitor-view.tsx

@@ -27,9 +27,13 @@ import {
   Server,
   Clock,
   ArrowLeft,
+  ArrowUp,
+  ArrowDown,
   Eye,
+
 } from "lucide-react";
 import toast from "react-hot-toast";
+import { DistroIcon, parseDistroFromVersion, getDistroColor } from "@/components/distro-icon";
 
 import {
   getNodeMetrics,
@@ -73,7 +77,7 @@ import { Progress } from "@/shadcn-bridge/heroui/progress";
 import { useNodeRealtime } from "@/pages/node/use-node-realtime";
 
 interface MonitorViewProps {
-  nodeMap: Map<number, { id: number; name: string; connectionStatus: string }>;
+  nodeMap: Map<number, { id: number; name: string; connectionStatus: string; version?: string }>;
   viewMode?: "list" | "grid";
 }
 
@@ -165,6 +169,8 @@ const getColorByUsage = (usage?: number) => {
 
 function ServerCard({ node, metric, onPress }: { node: any; metric: RealtimeNodeMetric | null; onPress?: () => void }) {
   const isOnline = node.connectionStatus === "online";
+  const distro = parseDistroFromVersion(node.version);
+  const distroColor = getDistroColor(distro);
   
   return (
     <Card
@@ -181,7 +187,7 @@ function ServerCard({ node, metric, onPress }: { node: any; metric: RealtimeNode
         <div className="flex items-center gap-3 min-w-0">
           <div className="relative flex-shrink-0">
             <div className="w-10 h-10 rounded-xl bg-default-100 dark:bg-default-50/10 flex items-center justify-center border border-divider">
-              <Server className={`w-5 h-5 ${isOnline ? "text-success" : "text-danger"}`} />
+              <DistroIcon distro={distro} className="w-5 h-5" style={{ color: isOnline ? distroColor : undefined }} />
             </div>
             <span className={`absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-background ${isOnline ? "bg-success" : "bg-danger"}`} />
           </div>
@@ -1104,25 +1110,40 @@ export function MonitorView({ nodeMap, viewMode = "grid" }: MonitorViewProps) {
                           <div className={`w-2 h-2 rounded-full ml-1 ${isOnline ? "bg-success" : "bg-danger"}`} />
                         </TableCell>
                         <TableCell>
-                          <span className="font-semibold text-sm whitespace-nowrap">{node.name}</span>
+                          <div className="flex items-center gap-2">
+                            <DistroIcon distro={parseDistroFromVersion(node.version)} className="w-4 h-4 flex-shrink-0" style={{ color: isOnline ? getDistroColor(parseDistroFromVersion(node.version)) : undefined }} />
+                            <span className="font-semibold text-sm whitespace-nowrap">{node.name}</span>
+                          </div>
                         </TableCell>
                         <TableCell>
-                          <div className="flex flex-col gap-1.5 text-xs whitespace-nowrap">
+                          <div className="flex flex-col gap-2 py-1 text-xs whitespace-nowrap">
-                            <div className="flex items-center gap-1 font-mono text-success-500">
+                            <div className="flex items-center gap-1.5 font-mono text-success-500">
-                              <span className="w-[60px] text-right">{isOnline && metric ? formatBytesPerSecond(metric.netOutSpeed) : "-"}</span> ↑
+                              <span className="w-[86px] text-right inline-block">{isOnline && metric ? formatBytesPerSecond(metric.netOutSpeed) : "-"}</span>
+                              <div className="flex items-center justify-center p-[3px] rounded-full bg-success-50 dark:bg-success-500/10 text-success-500">
+                                <ArrowUp className="w-3 h-3" strokeWidth={2.5} />
+                              </div>
                             </div>
-                            <div className="flex items-center gap-1 font-mono text-primary-500">
+                            <div className="flex items-center gap-1.5 font-mono text-primary-500">
-                              <span className="w-[60px] text-right">{isOnline && metric ? formatBytesPerSecond(metric.netInSpeed) : "-"}</span> ↓
+                              <span className="w-[86px] text-right inline-block">{isOnline && metric ? formatBytesPerSecond(metric.netInSpeed) : "-"}</span>
+                              <div className="flex items-center justify-center p-[3px] rounded-full bg-primary-50 dark:bg-primary-500/10 text-primary-500">
+                                <ArrowDown className="w-3 h-3" strokeWidth={2.5} />
+                              </div>
                             </div>
                           </div>
                         </TableCell>
                         <TableCell>
-                          <div className="flex flex-col gap-1.5 text-xs whitespace-nowrap">
+                          <div className="flex flex-col gap-2 py-1 text-xs whitespace-nowrap">
-                            <div className="flex items-center gap-1 font-mono text-default-600">
+                            <div className="flex items-center gap-1.5 font-mono text-default-600">
-                              <span className="w-[60px] text-right">{isOnline && metric ? formatBytes(metric.netOutBytes) : "-"}</span> ↑
+                              <span className="w-[86px] text-right inline-block">{isOnline && metric ? formatBytes(metric.netOutBytes) : "-"}</span>
+                              <div className="flex items-center justify-center p-[3px] rounded-full bg-default-100 text-default-500 dark:bg-default-100/50">
+                                <ArrowUp className="w-3 h-3" strokeWidth={2.5} />
+                              </div>
                             </div>
-                            <div className="flex items-center gap-1 font-mono text-default-600">
+                            <div className="flex items-center gap-1.5 font-mono text-default-600">
-                              <span className="w-[60px] text-right">{isOnline && metric ? formatBytes(metric.netInBytes) : "-"}</span> ↓
+                              <span className="w-[86px] text-right inline-block">{isOnline && metric ? formatBytes(metric.netInBytes) : "-"}</span>
+                              <div className="flex items-center justify-center p-[3px] rounded-full bg-default-100 text-default-500 dark:bg-default-100/50">
+                                <ArrowDown className="w-3 h-3" strokeWidth={2.5} />
+                              </div>
                             </div>
                           </div>
                         </TableCell>