From f8aa3cdaae988f54cf27a897d28ac2bab86a379a Mon Sep 17 00:00:00 2001
From: ojy <ed_it@eadeco.com.my>
Date: Wed, 13 May 2026 07:58:09 +0000
Subject: [PATCH] Vol Surface: move HV-vs-IV card into the toolbar row

User wanted the comparison sitting alongside the Lookup / Expiry /
Load Surface controls instead of in the page header. Now it lives
on the right side of the toolbar row (ms-sm-auto), still hidden
until data is loaded.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/surface.html | 49 ++++++++++++++++++++++---------------------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/frontend/surface.html b/frontend/surface.html
index 7295d4d..c52c821 100644
--- a/frontend/surface.html
+++ b/frontend/surface.html
@@ -346,29 +346,6 @@
               <h2 class="page-title">Volatility Surface</h2>
               <div class="text-secondary mt-1">IV skew analysis and term structure</div>
             </div>
-            <div class="col-auto" x-show="hasData" x-cloak>
-              <div class="hviv-card">
-                <div class="hviv-head">
-                  <span class="hviv-title">HV vs IV</span>
-                  <span class="hviv-badge" :class="hvIvVerdict.cls" x-text="hvIvVerdict.label"></span>
-                </div>
-                <div class="hviv-row atm">
-                  <span class="label">ATM IV</span>
-                  <span class="val" x-text="formatPct(currentMetrics.atmIV)"></span>
-                  <span class="spread">&nbsp;</span>
-                </div>
-                <template x-for="w in hvRows" :key="w.key">
-                  <div class="hviv-row">
-                    <span class="label" x-text="w.label"></span>
-                    <span class="val" x-text="w.value > 0 ? formatPct(w.value) : '—'"></span>
-                    <span class="spread"
-                          :class="w.value > 0 ? (w.spread >= 0 ? 'positive' : 'negative') : ''"
-                          x-text="w.value > 0 ? ((w.spread >= 0 ? '+' : '') + (w.spread * 100).toFixed(1) + ' pts') : ''"></span>
-                  </div>
-                </template>
-                <div class="hviv-foot" x-text="hvIvFooter"></div>
-              </div>
-            </div>
           </div>
         </div>
       </div>
@@ -436,7 +413,7 @@
                   </button>
                 </div>
 
-                <div class="col-12 col-sm-auto ms-sm-auto" x-show="errorMsg" x-cloak>
+                <div class="col-12 col-sm-auto" x-show="errorMsg" x-cloak>
                   <div class="alert alert-danger mb-0 py-2 px-3" role="alert">
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                       fill="none" stroke="currentColor" stroke-width="2" class="me-1">
@@ -447,6 +424,30 @@
                     <span x-text="errorMsg"></span>
                   </div>
                 </div>
+
+                <div class="col-12 col-sm-auto ms-sm-auto" x-show="hasData" x-cloak>
+                  <div class="hviv-card">
+                    <div class="hviv-head">
+                      <span class="hviv-title">HV vs IV</span>
+                      <span class="hviv-badge" :class="hvIvVerdict.cls" x-text="hvIvVerdict.label"></span>
+                    </div>
+                    <div class="hviv-row atm">
+                      <span class="label">ATM IV</span>
+                      <span class="val" x-text="formatPct(currentMetrics.atmIV)"></span>
+                      <span class="spread">&nbsp;</span>
+                    </div>
+                    <template x-for="w in hvRows" :key="w.key">
+                      <div class="hviv-row">
+                        <span class="label" x-text="w.label"></span>
+                        <span class="val" x-text="w.value > 0 ? formatPct(w.value) : '—'"></span>
+                        <span class="spread"
+                              :class="w.value > 0 ? (w.spread >= 0 ? 'positive' : 'negative') : ''"
+                              x-text="w.value > 0 ? ((w.spread >= 0 ? '+' : '') + (w.spread * 100).toFixed(1) + ' pts') : ''"></span>
+                      </div>
+                    </template>
+                    <div class="hviv-foot" x-text="hvIvFooter"></div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>