From a9f3ff803789d4a238bab2ba4c30d5eeb883250d Mon Sep 17 00:00:00 2001
From: NicolasCantu <nicolas.cantu@pm.me>
Date: Thu, 23 Oct 2025 21:16:15 +0200
Subject: [PATCH] Display existing processes in status field
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Motivations :**
- User wants to see each retrieved process displayed as a message in the status field
- Need to show process information after authentication or initialization

**Modifications :**
- Added displayExistingProcesses() function to fetch and display processes
- Modified handleMainPairing() to call displayExistingProcesses() after authentication
- Modified initHomePage() to display processes even if authentication fails
- Each process shows: ID (truncated), states count, members count, last update
- Processes displayed in scrollable container with styled cards

**Pages affectées :**
- src/pages/home/home.ts
---
 src/pages/home/home.ts | 70 +++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 69 insertions(+), 1 deletion(-)

diff --git a/src/pages/home/home.ts b/src/pages/home/home.ts
index 715c57f..2ada4b5 100755
--- a/src/pages/home/home.ts
+++ b/src/pages/home/home.ts
@@ -153,6 +153,10 @@ export async function initHomePage(): Promise<void> {
     console.log('🔐 Auto-triggering WebAuthn authentication...');
     await handleMainPairing();
 
+    // Display existing processes even if authentication fails
+    console.log('📊 Displaying existing processes...');
+    await displayExistingProcesses();
+
     // Hide loading spinner after initialization
     console.log('🔧 Hiding loading spinner...');
     hideHomeLoadingSpinner();
@@ -581,15 +585,79 @@ async function handleMainPairing(): Promise<void> {
     // Now proceed with pairing process
     await prepareAndSendPairingTx();
 
+    // Display any existing processes in the status field
+    await displayExistingProcesses();
+
   } catch (error) {
     console.error('Pairing failed:', error);
-
+    
     if (mainStatus) {
       mainStatus.innerHTML = '<span style="color: var(--error-color)">❌ Authentication failed</span>';
     }
   }
 }
 
+// Display existing processes in the status field
+async function displayExistingProcesses(): Promise<void> {
+  try {
+    const service = await Services.getInstance();
+    const processes = await service.getProcesses();
+    
+    const container = getCorrectDOM('login-4nk-component') as HTMLElement;
+    const mainStatus = container.querySelector('#main-status') as HTMLElement;
+    
+    if (!mainStatus) {
+      console.warn('Main status element not found');
+      return;
+    }
+    
+    const processCount = Object.keys(processes).length;
+    console.log(`📊 Found ${processCount} existing processes`);
+    
+    if (processCount === 0) {
+      if (mainStatus) {
+        mainStatus.innerHTML = '<span style="color: var(--info-color)">📋 No existing processes found</span>';
+      }
+      return;
+    }
+    
+    // Create a list of processes to display
+    let processesHtml = `<div style="text-align: left; max-height: 200px; overflow-y: auto; border: 1px solid #e9ecef; border-radius: 8px; padding: 10px; background: #f8f9fa;">
+      <h4 style="margin: 0 0 10px 0; color: var(--primary-color);">📋 Existing Processes (${processCount})</h4>`;
+    
+    for (const [processId, process] of Object.entries(processes)) {
+      const processInfo = {
+        id: processId.substring(0, 8) + '...',
+        states: process.states?.length || 0,
+        members: Object.keys(process.members || {}).length,
+        lastUpdate: process.last_update || 'Unknown'
+      };
+      
+      processesHtml += `
+        <div style="margin: 8px 0; padding: 8px; background: white; border-radius: 4px; border-left: 3px solid var(--primary-color);">
+          <strong>Process:</strong> ${processInfo.id}<br>
+          <small style="color: #666;">
+            States: ${processInfo.states} | Members: ${processInfo.members} | Updated: ${processInfo.lastUpdate}
+          </small>
+        </div>`;
+    }
+    
+    processesHtml += '</div>';
+    
+    if (mainStatus) {
+      mainStatus.innerHTML = processesHtml;
+    }
+    
+  } catch (error) {
+    console.error('❌ Error displaying processes:', error);
+    const container = getCorrectDOM('login-4nk-component') as HTMLElement;
+    const mainStatus = container.querySelector('#main-status') as HTMLElement;
+    if (mainStatus) {
+      mainStatus.innerHTML = '<span style="color: var(--error-color)">❌ Error loading processes</span>';
+    }
+  }
+}
+
 // Account Actions
 export function setupAccountActions(): void {
   const container = getCorrectDOM('login-4nk-component') as HTMLElement;