Add GPON stick compatibility dialog to SFP tweaks (#596)

* Add Zyxel PMG3000-D20B pre-flight instructions dialog to SFP tweaks

* Restructure dialog for general GPON stick guidance with Zyxel-specific commands

* Add removal guidance to GPON compatibility alert

* Fix HTML comment to match broadened dialog scope

* Fix modal scrolling on mobile - allow overlay to scroll when content exceeds viewport

Author: tvancott42

src/NetworkOptimizer.Web/Components/Pages/PerformanceTweaks.razor

@@ -323,7 +323,7 @@
                     @if (def.Id == "sfp-sgmiiplus" || def.Id == "sfp-sgmiiplus-port6")
                     {
                         <div class="alert alert-warning" style="margin-top: 0.75rem;">
-                            <strong>Compatibility note:</strong> Zyxel PMG3000-D20B support is currently being tested. If you have this module (or another GPON stick that may not negotiate 2.5 G cleanly with the UniFi host), feel free to try the patch, but be prepared to remove it if the link doesn't come up and stabilize.
+                            <strong>GPON stick compatibility:</strong> Some SFP GPON ONTs (particularly the Zyxel PMG3000-D20B) may not negotiate 2.5 G cleanly with the UniFi host without extra configuration. If your stick won't link up after deploying, <a href="javascript:void(0)" @onclick="() => _showZyxelInstructions = true" @onclick:stopPropagation="true" class="pt-inline-link">check these pre-flight steps</a>, and Remove the SFP tweak to restore the link if all else fails.
                         </div>
                     }
 
@@ -524,6 +524,57 @@
     </div>
 }
 
+<!-- GPON Stick Pre-Flight Instructions Modal -->
+@if (_showZyxelInstructions)
+{
+    <div class="pt-modal-overlay" @onclick="() => _showZyxelInstructions = false">
+        <div class="pt-modal pt-modal-wide" @onclick:stopPropagation="true">
+            <div class="pt-modal-header">
+                <h3>GPON Stick Compatibility - Pre-Flight Steps</h3>
+            </div>
+            <div class="pt-modal-body pt-instructions">
+                <p>Some GPON ONT SFP modules default to a link mode that won't negotiate 2.5 G with the UniFi host. If your stick doesn't link up after deploying the SGMII+ patch, you likely need to switch it to 2.5/1 G auto-negotiation mode first.</p>
+
+                <p>The general process is:</p>
+                <ol>
+                    <li>SSH into your SFP stick and configure it for 2.5/1 G auto-negotiation</li>
+                    <li>Deploy the SGMII+ patch from this page</li>
+                    <li>If it links up, persist the configuration so it survives SFP reboots</li>
+                </ol>
+                <p>The exact commands vary by stick. If yours isn't listed below, check your stick's documentation or community wiki for the equivalent auto-negotiation command.</p>
+
+                <h4>If it doesn't work</h4>
+                <p>If the link and data path don't come up after deploying, use the Remove button on the tweak card to unload the module - this should restore normal functionality. If the link still doesn't recover after removal, reboot the SFP stick.</p>
+
+                <h4>Zyxel PMG3000-D20B</h4>
+
+                <p><strong>Configure auto-negotiation.</strong> SSH to the stick and run:</p>
+                <pre><code>linuxshell
+onu lanpcs 0 1 -1 4 15 1 0 5 0 0 1518 1 3 0 0 0</code></pre>
+                <p>The <code>linuxshell</code> command breaks out of the Zyxel CLI into a Linux shell. The <code>onu lanpcs</code> command switches the SFP interface to 2.5/1 G auto-negotiation mode. It resets on SFP reboot, so you always have a way out.</p>
+
+                <p><strong>Deploy the patch.</strong> Come back here and deploy the SGMII+ patch. After about a minute, the link should come up and you should have data path again.</p>
+
+                <p><strong>Persist across reboots.</strong> If it works, make the command run automatically on every SFP boot. SSH to the stick again and run:</p>
+                <pre><code># Enter the Linux shell first (if a new SSH session)
+linuxshell
+
+# Check if the boot script file already exists
+ls -la /var/config/run-syslog.sh</code></pre>
+
+                <p>If the file <strong>does not exist</strong> (you see "No such file or directory"):</p>
+                <pre><code>echo 'onu lanpcs 0 1 -1 4 15 1 0 5 0 0 1518 1 3 0 0 0' > /var/config/run-syslog.sh</code></pre>
+
+                <p>If the file <strong>already exists</strong>, safely append the command:</p>
+                <pre><code>grep -q 'lanpcs' /var/config/run-syslog.sh 2>/dev/null || echo 'onu lanpcs 0 1 -1 4 15 1 0 5 0 0 1518 1 3 0 0 0' >> /var/config/run-syslog.sh</code></pre>
+            </div>
+            <div class="pt-modal-footer">
+                <button class="btn btn-primary btn-sm" @onclick="() => _showZyxelInstructions = false">Got It</button>
+            </div>
+        </div>
+    </div>
+}
+
 <style>
     .pt-container {
         display: flex;
@@ -723,17 +774,20 @@
         bottom: 0;
         background: rgba(0, 0, 0, 0.6);
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         justify-content: center;
         z-index: 1000;
-        padding: 1rem;
+        padding: 2rem 1rem;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
     }
 
     .pt-modal {
         background: var(--bg-secondary);
         border-radius: 0.75rem;
         max-width: 540px;
         width: 100%;
+        margin: auto 0;
         box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
     }
 
@@ -800,6 +854,66 @@
             width: 100%;
         }
     }
+
+    /* Inline action link */
+    .pt-inline-link {
+        color: var(--primary-color);
+        text-decoration: underline;
+        cursor: pointer;
+    }
+
+    .pt-inline-link:hover {
+        color: var(--primary-hover);
+    }
+
+    /* Wide modal variant */
+    .pt-modal-wide {
+        max-width: 640px;
+    }
+
+    /* Instructional modal body */
+    .pt-instructions h4 {
+        color: var(--text-primary);
+        font-size: 0.95rem;
+        margin: 1.25rem 0 0.5rem 0;
+    }
+
+    .pt-instructions h4:first-child {
+        margin-top: 0;
+    }
+
+    .pt-instructions p {
+        color: var(--text-secondary);
+        font-size: 0.85rem;
+        line-height: 1.5;
+        margin: 0 0 0.5rem 0;
+    }
+
+    .pt-instructions pre {
+        background: var(--bg-primary);
+        border-radius: 0.375rem;
+        padding: 0.75rem 1rem;
+        margin: 0.5rem 0 0.75rem 0;
+        overflow-x: auto;
+    }
+
+    .pt-instructions code {
+        font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
+        font-size: 0.8rem;
+        color: var(--text-primary);
+    }
+
+    .pt-instructions ol {
+        color: var(--text-secondary);
+        font-size: 0.85rem;
+        line-height: 1.5;
+        margin: 0 0 0.75rem 0;
+        padding-left: 1.25rem;
+    }
+
+    .pt-instructions li {
+        margin-bottom: 0.25rem;
+    }
 </style>
 
 @code {
@@ -819,6 +933,7 @@
     private bool _confirmRisk;
     private bool _showRemoveConfirm;
     private string? _pendingRemoveTweakId;
+    private bool _showZyxelInstructions;
     private bool _allConfirmed => _confirmBackup && _confirmBackupDownloaded && _confirmWarranty && _confirmRisk;
     private bool _canDeploy => _status?.UdmBootInstalled == true && _status?.FirmwareSupported == true;
     private List<string> _deploySteps = new();