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
2026-10-02 17:06:36 +08:00 · 2026-03-22 13:03:04 +08:00
parent 0a1ec60750
commit 8ebde9dca9
12 changed files with 285 additions and 18 deletions
@@ -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} />;
+}