From 8d5c409655142769ae1541151f72a5aeb80fe21a Mon Sep 17 00:00:00 2001
From: bolbol <contact@bolbol.tn>
Date: Fri, 21 Aug 2026 00:06:51 +0100
Subject: [PATCH] feat: iframe recovery overlay, timeout detection, and new tab
 authentication link for cross-origin access blocks

---
 app/templates/index.html |  39 ++++++++++
 static/css/style.css     | 154 +++++++++++++++++++++++++++++++++++++++
 static/js/hub.js         |  61 +++++++++++++++-
 3 files changed, 253 insertions(+), 1 deletion(-)

diff --git a/app/templates/index.html b/app/templates/index.html
index cf893e7..5328f9b 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -167,10 +167,49 @@
 
       <!-- 2. Embedded Iframe View (Used exclusively for DSH Dialogue and DSH Files) -->
       <div id="hub-iframe-wrapper" class="hub-iframe-wrapper" style="display: none;">
+        <!-- Top Iframe Bar -->
+        <div class="hub-iframe-topbar">
+          <div class="hub-iframe-url-pill">
+            <span class="hub-status-dot online"></span>
+            <span id="hub-iframe-target-label">Instance DSH</span>
+          </div>
+          <div class="hub-iframe-topbar-actions">
+            <a id="btn-iframe-external" href="#" target="_blank" rel="noopener noreferrer" class="hub-btn-iframe-action" title="Ouvrir dans un nouvel onglet">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
+              <span>Ouvrir dans un nouvel onglet ↗</span>
+            </a>
+            <button id="btn-iframe-reload" class="hub-btn-iframe-action" type="button" title="Recharger le cadre">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
+              <span>Recharger</span>
+            </button>
+          </div>
+        </div>
+
         <div id="hub-loader" class="hub-loader-overlay">
           <div class="hub-spinner"></div>
           <p style="font-size: 0.85rem; color: var(--hub-text-secondary);">Connexion à l'instance...</p>
         </div>
+
+        <!-- Auth Recovery Notice Banner (Appears if session is expired or frame blocked) -->
+        <div id="hub-iframe-auth-notice" class="hub-iframe-auth-notice" style="display: none;">
+          <div class="hub-auth-notice-content">
+            <span class="hub-auth-notice-icon">🔒</span>
+            <div class="hub-auth-notice-text">
+              <strong>Cadre bloqué ou session Cloudflare requise ?</strong>
+              <span>Si la connexion est refusée par votre navigateur (X-Frame-Options), connectez-vous dans un nouvel onglet puis rechargez.</span>
+            </div>
+            <div class="hub-auth-notice-buttons">
+              <a id="btn-auth-notice-open" href="#" target="_blank" rel="noopener noreferrer" class="hub-btn-auth-action">
+                S'authentifier dans un onglet ↗
+              </a>
+              <button id="btn-auth-notice-reload" type="button" class="hub-btn-auth-reload">
+                Recharger
+              </button>
+              <button id="btn-auth-notice-dismiss" type="button" class="hub-btn-auth-dismiss" title="Masquer">&times;</button>
+            </div>
+          </div>
+        </div>
+
         <iframe 
           id="workspace-iframe" 
           class="hub-workspace-iframe" 
diff --git a/static/css/style.css b/static/css/style.css
index 445dc8c..46aea0f 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -919,10 +919,164 @@ body, html {
 .hub-iframe-wrapper {
   width: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
   position: relative;
+  overflow: hidden;
+}
+
+.hub-iframe-topbar {
+  height: 36px;
+  background-color: var(--hub-bg-sidebar);
+  border-bottom: 1px solid var(--hub-border-subtle);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 1rem;
+  flex-shrink: 0;
+  z-index: 5;
+}
+
+.hub-iframe-url-pill {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--hub-text-secondary);
+}
+
+.hub-iframe-topbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.hub-btn-iframe-action {
+  background: var(--hub-bg-card);
+  border: 1px solid var(--hub-border-subtle);
+  color: var(--hub-text-secondary);
+  font-size: 0.7rem;
+  font-weight: 500;
+  padding: 3px 8px;
+  border-radius: var(--hub-radius-sm);
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.hub-btn-iframe-action:hover {
+  color: var(--hub-text-primary);
+  border-color: var(--hub-border-medium);
+  background: var(--hub-bg-card-hover);
+}
+
+/* Auth Recovery Notice */
+.hub-iframe-auth-notice {
+  position: absolute;
+  top: 44px;
+  left: 1rem;
+  right: 1rem;
+  background: linear-gradient(135deg, rgba(30, 27, 75, 0.95), rgba(15, 23, 42, 0.95));
+  border: 1px solid rgba(99, 102, 241, 0.4);
+  border-radius: var(--hub-radius-md);
+  padding: 0.6rem 1rem;
+  z-index: 20;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(8px);
+  animation: slideDownNotice 0.25s ease-out;
+}
+
+@keyframes slideDownNotice {
+  from { opacity: 0; transform: translateY(-8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.hub-auth-notice-content {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.hub-auth-notice-icon {
+  font-size: 1.1rem;
+}
+
+.hub-auth-notice-text {
+  flex: 1;
+  min-width: 260px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.hub-auth-notice-text strong {
+  font-size: 0.8rem;
+  color: #e0e7ff;
+}
+
+.hub-auth-notice-text span {
+  font-size: 0.72rem;
+  color: #94a3b8;
+}
+
+.hub-auth-notice-buttons {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.hub-btn-auth-action {
+  background: var(--hub-accent-current);
+  color: #ffffff;
+  font-size: 0.72rem;
+  font-weight: 600;
+  padding: 4px 10px;
+  border-radius: var(--hub-radius-sm);
+  text-decoration: none;
+  transition: opacity 0.15s ease;
+  white-space: nowrap;
+}
+
+.hub-btn-auth-action:hover {
+  opacity: 0.9;
+}
+
+.hub-btn-auth-reload {
+  background: transparent;
+  border: 1px solid var(--hub-border-medium);
+  color: var(--hub-text-primary);
+  font-size: 0.72rem;
+  padding: 4px 8px;
+  border-radius: var(--hub-radius-sm);
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.hub-btn-auth-reload:hover {
+  background: var(--hub-bg-card-hover);
+}
+
+.hub-btn-auth-dismiss {
+  background: transparent;
+  border: none;
+  color: var(--hub-text-muted);
+  font-size: 1.1rem;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+}
+
+.hub-btn-auth-dismiss:hover {
+  color: var(--hub-text-primary);
 }
 
 .hub-workspace-iframe {
+  flex: 1;
   width: 100%;
   height: 100%;
   border: none;
diff --git a/static/js/hub.js b/static/js/hub.js
index ad7328c..91d0853 100644
--- a/static/js/hub.js
+++ b/static/js/hub.js
@@ -175,24 +175,83 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   }
 
+  // Iframe Recovery Elements
+  const iframeExternalBtn = document.getElementById('btn-iframe-external');
+  const iframeReloadBtn = document.getElementById('btn-iframe-reload');
+  const iframeTargetLabel = document.getElementById('hub-iframe-target-label');
+  const iframeAuthNotice = document.getElementById('hub-iframe-auth-notice');
+  const btnAuthNoticeOpen = document.getElementById('btn-auth-notice-open');
+  const btnAuthNoticeReload = document.getElementById('btn-auth-notice-reload');
+  const btnAuthNoticeDismiss = document.getElementById('btn-auth-notice-dismiss');
+
+  let currentIframeUrl = '';
+  let iframeLoadTimeout = null;
+
   function showNativeChatView() {
     nativeChatLayout.style.display = 'flex';
     iframeWrapper.style.display = 'none';
+    if (iframeLoadTimeout) clearTimeout(iframeLoadTimeout);
+    if (iframeAuthNotice) iframeAuthNotice.style.display = 'none';
     if (iframe) iframe.src = 'about:blank';
   }
 
   function showIframeView(url) {
     nativeChatLayout.style.display = 'none';
-    iframeWrapper.style.display = 'block';
+    iframeWrapper.style.display = 'flex';
+    currentIframeUrl = url;
+
+    const isFiles = url.includes('files-hub');
+    if (iframeTargetLabel) {
+      iframeTargetLabel.textContent = isFiles 
+        ? 'Explorateur de Fichiers (files-hub.yesminedor.tn)' 
+        : 'Dialogue DeepSeek Harness (dsh-hub.yesminedor.tn)';
+    }
+
+    if (iframeExternalBtn) iframeExternalBtn.href = url;
+    if (btnAuthNoticeOpen) btnAuthNoticeOpen.href = url;
+    if (iframeAuthNotice) iframeAuthNotice.style.display = 'none';
+
     if (loader) loader.classList.remove('hidden');
+
+    if (iframeLoadTimeout) clearTimeout(iframeLoadTimeout);
+    iframeLoadTimeout = setTimeout(() => {
+      if (loader) loader.classList.add('hidden');
+      if (iframeAuthNotice) iframeAuthNotice.style.display = 'block';
+    }, 4500);
+
     if (iframe) {
       iframe.src = url;
       iframe.onload = () => {
         if (loader) loader.classList.add('hidden');
+        try {
+          if (iframe.contentDocument && iframe.contentDocument.title.toLowerCase().includes('cloudflare')) {
+            if (iframeAuthNotice) iframeAuthNotice.style.display = 'block';
+          }
+        } catch (e) {
+          // Cross-origin restriction (expected under Access redirect)
+        }
       };
     }
   }
 
+  if (iframeReloadBtn) {
+    iframeReloadBtn.addEventListener('click', () => {
+      if (currentIframeUrl) showIframeView(currentIframeUrl);
+    });
+  }
+
+  if (btnAuthNoticeReload) {
+    btnAuthNoticeReload.addEventListener('click', () => {
+      if (currentIframeUrl) showIframeView(currentIframeUrl);
+    });
+  }
+
+  if (btnAuthNoticeDismiss) {
+    btnAuthNoticeDismiss.addEventListener('click', () => {
+      if (iframeAuthNotice) iframeAuthNotice.style.display = 'none';
+    });
+  }
+
   // Load Conversations List
   async function loadConversations() {
     convList.innerHTML = '<div class="hub-conv-loading" style="padding: 1rem; color: var(--hub-text-muted); font-size: 0.75rem; text-align: center;">Chargement...</div>';