From 9dc2b78da9cb83e043427fe41511c0216799cc32 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Fri, 24 Oct 2025 11:10:26 +0000
Subject: [PATCH] feat: add OS icons to host platform selection

Add FOSS icons (Tux penguin for Linux, Apple for macOS, Windows logo) to platform selection buttons. Icons are displayed in colored boxes matching the active/inactive state, providing better visual identification of each OS platform.

Icons sourced from Simple Icons (CC0 license).
---
 .../src/components/Settings/HostAgents.tsx    | 34 +++++++++++++++++--
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/frontend-modern/src/components/Settings/HostAgents.tsx b/frontend-modern/src/components/Settings/HostAgents.tsx
index fc26681..c8de952 100644
--- a/frontend-modern/src/components/Settings/HostAgents.tsx
+++ b/frontend-modern/src/components/Settings/HostAgents.tsx
@@ -20,21 +20,36 @@ interface HostAgentsProps {
 
 type HostPlatform = 'linux' | 'macos' | 'windows';
 
-const hostPlatformOptions: { id: HostPlatform; label: string; description: string }[] = [
+const hostPlatformOptions: { id: HostPlatform; label: string; description: string; icon: JSX.Element }[] = [
   {
     id: 'linux',
     label: 'Linux',
     description: 'Download the static binary and enable the systemd service on Debian, Ubuntu, RHEL, Arch, and more.',
+    icon: (
+      <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M12.504 0c-.155 0-.315.008-.48.021-4.226.333-3.105 4.807-3.17 6.298-.076 1.092-.3 1.953-1.05 3.02-.885 1.051-2.127 2.75-2.716 4.521-.278.832-.41 1.684-.287 2.489.035.23.05.448.078.671.145 1.16.692 1.83 1.529 2.472.836.642 1.943 1.17 3.074 1.17.074 0 .148-.002.221-.007.86-.064 1.49-.433 1.944-1.078.45-.641.726-1.475.904-2.364.179-.891.241-1.846.241-2.65 0-.804.062-1.759.241-2.65.178-.889.454-1.723.904-2.364.454-.645 1.084-1.014 1.944-1.078.073-.005.147-.007.221-.007 1.131 0 2.238.528 3.074 1.17.837.642 1.384 1.312 1.529 2.472.028.223.043.441.078.671.123.805-.009 1.657-.287 2.489-.589 1.771-1.831 3.47-2.716 4.521-.75 1.067-.974 1.928-1.05 3.02-.065 1.491 1.056 5.965-3.17 6.298-.165.013-.325.021-.48.021z" />
+      </svg>
+    ),
   },
   {
     id: 'macos',
     label: 'macOS',
     description: 'Use the universal binary with launchd to keep desktops and hosts reporting in the background.',
+    icon: (
+      <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M14.94 5.19A4.38 4.38 0 0 0 16 2a4.44 4.44 0 0 0-3 1.52 4.17 4.17 0 0 0-1 3.09 3.69 3.69 0 0 0 2.94-1.42zm2.52 7.44a4.51 4.51 0 0 1 2.16-3.81 4.66 4.66 0 0 0-3.66-2c-1.56-.16-3 .91-3.83.91s-2-.89-3.3-.87A4.92 4.92 0 0 0 4.69 9.39C2.93 12.45 4.24 17 6 19.47c.8 1.21 1.8 2.58 3.12 2.53s1.75-.82 3.28-.82 2 .82 3.3.79 2.22-1.24 3.06-2.45a11 11 0 0 0 1.38-2.85 4.41 4.41 0 0 1-2.68-4.08z" />
+      </svg>
+    ),
   },
   {
     id: 'windows',
     label: 'Windows',
     description: 'Native Windows service with automatic startup. PowerShell script handles binary download and service installation.',
+    icon: (
+      <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801" />
+      </svg>
+    ),
   },
 ];
 
@@ -331,7 +346,7 @@ export const HostAgents: Component<HostAgentsProps> = (props) => {
                       return (
                         <button
                           type="button"
-                          class={`flex flex-col items-start gap-2 rounded-lg border transition-colors p-4 text-left shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 ${
+                          class={`flex flex-col items-start gap-3 rounded-lg border transition-colors p-4 text-left shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 ${
                             isActive()
                               ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
                               : 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 hover:border-blue-300 dark:hover:border-blue-500'
@@ -344,7 +359,20 @@ export const HostAgents: Component<HostAgentsProps> = (props) => {
                             setStepTwoComplete(false);
                           }}
                         >
-                          <p class="font-semibold text-gray-900 dark:text-gray-100">{option.label}</p>
+                          <div class="flex items-center gap-3">
+                            <div
+                              class={`rounded-md p-2 ${
+                                isActive()
+                                  ? 'bg-blue-600 text-white'
+                                  : 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-200'
+                              }`}
+                            >
+                              {option.icon}
+                            </div>
+                            <div class="flex-1">
+                              <p class="font-semibold text-gray-900 dark:text-gray-100">{option.label}</p>
+                            </div>
+                          </div>
                           <p class="text-xs text-gray-600 dark:text-gray-400">{option.description}</p>
                         </button>
                       );