From 15f0ef779b13b73b01d97005edabcd814e17f420 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Tue, 23 Dec 2025 09:44:28 +0000
Subject: [PATCH] ux: Add step numbers to agent setup flow. Related to #872

- Step 1: Generate API token (with blue circle)
- Step 2: Installation commands (with green circle when unlocked)
- Shows locked preview of Step 2 before token generation, making it clear
  that installation commands will appear after generating a token
- Addresses user feedback about the unclear agent creation flow
---
 .../src/components/Settings/UnifiedAgents.tsx | 37 +++++++++++++++++--
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/frontend-modern/src/components/Settings/UnifiedAgents.tsx b/frontend-modern/src/components/Settings/UnifiedAgents.tsx
index 6ff64bb98..4fc6d0e33 100644
--- a/frontend-modern/src/components/Settings/UnifiedAgents.tsx
+++ b/frontend-modern/src/components/Settings/UnifiedAgents.tsx
@@ -434,8 +434,11 @@ export const UnifiedAgents: Component = () => {
                     <Show when={requiresToken()}>
                         <div class="space-y-3">
                             <div class="space-y-1">
-                                <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Generate API token</p>
-                                <p class="text-sm text-gray-600 dark:text-gray-400">
+                                <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">
+                                    <span class="inline-flex items-center justify-center w-5 h-5 mr-1.5 rounded-full bg-blue-600 text-white text-xs font-bold">1</span>
+                                    Generate API token
+                                </p>
+                                <p class="text-sm text-gray-600 dark:text-gray-400 ml-6">
                                     Create a fresh token scoped for Host, Docker, and Kubernetes monitoring.
                                 </p>
                             </div>
@@ -496,13 +499,39 @@ export const UnifiedAgents: Component = () => {
                         </div>
                     </Show>
 
+                    {/* Show locked step 2 preview when token required but not yet generated */}
+                    <Show when={requiresToken() && !commandsUnlocked()}>
+                        <div class="space-y-3 opacity-60 pointer-events-none select-none">
+                            <div class="flex items-center justify-between">
+                                <div>
+                                    <h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100">
+                                        <span class="inline-flex items-center justify-center w-5 h-5 mr-1.5 rounded-full bg-gray-400 text-white text-xs font-bold">2</span>
+                                        Installation commands
+                                    </h4>
+                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5 ml-6">Generate a token above to unlock installation commands.</p>
+                                </div>
+                            </div>
+                            <div class="rounded-lg border border-gray-200 bg-gray-50 px-4 py-6 dark:border-gray-700 dark:bg-gray-800/50 text-center">
+                                <svg class="w-8 h-8 mx-auto text-gray-400 dark:text-gray-500 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
+                                </svg>
+                                <p class="text-sm text-gray-500 dark:text-gray-400">Click "Generate token" above to see installation commands</p>
+                            </div>
+                        </div>
+                    </Show>
+
                     <Show when={commandsUnlocked()}>
                         <div class="space-y-3">
                             <div class="space-y-3">
                                 <div class="flex items-center justify-between">
                                     <div>
-                                        <h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Installation commands</h4>
-                                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">The installer auto-detects Docker, Kubernetes, and Proxmox on the target machine.</p>
+                                        <h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100">
+                                            <Show when={requiresToken()}>
+                                                <span class="inline-flex items-center justify-center w-5 h-5 mr-1.5 rounded-full bg-green-600 text-white text-xs font-bold">2</span>
+                                            </Show>
+                                            Installation commands
+                                        </h4>
+                                        <p class={`text-xs text-gray-500 dark:text-gray-400 mt-0.5 ${requiresToken() ? 'ml-6' : ''}`}>The installer auto-detects Docker, Kubernetes, and Proxmox on the target machine.</p>
                                     </div>
                                 </div>