Add PIN setup screenshot generation for client console

Co-authored-by: dorkmo <[email protected]>

Author: Copilot

.github/workflows/html-render.yml

@@ -243,10 +243,30 @@ jobs:
                       sample_json = json.dumps(sample_clients_data)
                       html_content = html_content.replace('refreshData();', f'applyServerData({sample_json});')
                   
-                  # For client console, inject sample data
+                  # For client console, inject sample data and create TWO versions
                   elif const_name == 'CLIENT_CONSOLE_HTML':
                       sample_json = json.dumps(sample_clients_data)
-                      html_content = html_content.replace('refreshData();', f'applyServerData({sample_json}, "dev:client001");')
+                      
+                      # Version 1: With PIN modal showing (PIN setup view)
+                      html_with_pin = html_content.replace('refreshData();', f'''
+// Inject sample data
+applyServerData({sample_json}, "dev:client001");
+
+// Show PIN setup modal immediately for preview
+setTimeout(() => {{
+  pinState.configured = false;
+  pinState.value = '';
+  showPinModal('setup');
+}}, 100);
+''')
+                      
+                      # Version 2: Without PIN modal (unlocked view)
+                      html_unlocked = html_content.replace('refreshData();', f'''
+// Inject sample data and simulate unlocked state
+pinState.configured = true;
+pinState.value = '1234';  // Simulated unlocked state
+applyServerData({sample_json}, "dev:client001");
+''')
                   
                   # For serial monitor, inject sample log data
                   elif const_name == 'SERIAL_MONITOR_HTML':
@@ -284,11 +304,26 @@ jobs:
                       # Just render the page without API calls
                       html_content = html_content.replace('loadData();', '// Sample data mode - loadData() disabled for static preview')
 
+                  # Write the primary version
                   output_file = f'{output_dir}/{file_name}.html'
                   with open(output_file, 'w', encoding='utf-8') as out:
                       out.write(html_content)
 
                   print(f'Extracted {file_name} HTML: {len(html_content)} bytes')
+                  
+                  # For CLIENT_CONSOLE_HTML, also write the additional versions
+                  if const_name == 'CLIENT_CONSOLE_HTML':
+                      # Write the PIN setup version
+                      output_file_pin = f'{output_dir}/client-console-pin-setup.html'
+                      with open(output_file_pin, 'w', encoding='utf-8') as out:
+                          out.write(html_with_pin)
+                      print(f'Extracted client-console-pin-setup HTML: {len(html_with_pin)} bytes')
+                      
+                      # Write the unlocked version (overwrite the main one)
+                      output_file_unlocked = f'{output_dir}/{file_name}.html'
+                      with open(output_file_unlocked, 'w', encoding='utf-8') as out:
+                          out.write(html_unlocked)
+                      print(f'Extracted client-console (unlocked) HTML: {len(html_unlocked)} bytes')
           EOF
 
       - name: Extract and render HTML for 112025 Viewer
@@ -577,8 +612,13 @@ jobs:
 
           ![Dashboard](screenshots/dashboard.png)
 
+          ## Client Console - PIN Setup
+          PIN setup modal shown on first access to secure the configuration interface.
+
+          ![Client Console - PIN Setup](screenshots/client-console-pin-setup.png)
+
           ## Client Console
-          Configuration management interface for remote clients with PIN-protected controls.
+          Configuration management interface for remote clients with PIN-protected controls (unlocked view).
 
           ![Client Console](screenshots/client-console.png)