feat(chat): implement native hub chat with sqlite conversations store, SSE streaming and DSH 5th universe integration

app/templates/index.html

@@ -8,7 +8,7 @@
       <div class="hub-brand-left">
         <div class="hub-logo-icon">H</div>
         <div class="hub-brand-text">Hermes Hub</div>
-        <div class="hub-brand-badge">v1.0</div>
+        <div class="hub-brand-badge">v2.0</div>
       </div>
       <button id="btn-toggle-sidebar" class="hub-collapse-btn" type="button" aria-label="Replier la barre latérale" title="Replier la barre latérale">
         <svg class="hub-collapse-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
@@ -29,6 +29,7 @@
           data-scope="{{ u.scope }}"
           data-tagline="{{ u.tagline }}"
           data-supports-files="{{ 'true' if u.supports_files else 'false' }}"
+          data-is-external="{{ 'true' if u.is_external_app else 'false' }}"
           title="{{ u.name }} — {{ u.tagline }}"
           style="--item-accent: var({{ u.accent_token }});"
         >
@@ -69,38 +70,104 @@
       </div>
       
       <div class="hub-topbar-right">
-        <!-- Sélecteur Toggle Mode DSH (Claude Design - Univers Nabil) -->
-        <div id="nabil-mode-toggle" role="tablist" aria-label="Mode du canvas" class="hub-mode-toggle">
+        <!-- Sélecteur Toggle Mode DSH (Univers Nabil) -->
+        <div id="nabil-mode-toggle" role="tablist" aria-label="Mode du canvas" class="hub-mode-toggle" style="display: none;">
           <button id="tab-session" role="tab" aria-selected="true" class="hub-mode-tab active" type="button">
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="square"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
-            <span>Session</span>
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
+            <span>Chat Natif</span>
           </button>
           <div class="hub-mode-divider"></div>
           <button id="tab-files" role="tab" aria-selected="false" class="hub-mode-tab" type="button">
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="square"><path d="M4 20h14a2 2 0 0 0 2-2V9H12L10 6H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1z"></path></svg>
-            <span>Explorateur DSH</span>
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M4 20h14a2 2 0 0 0 2-2V9H12L10 6H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1z"></path></svg>
+            <span>Fichiers DSH</span>
           </button>
         </div>
 
-        <span id="hub-security-badge" style="font-size: 0.75rem; color: var(--hub-text-muted);">Session sécurisée VPS ↔ NAS</span>
+        <span id="hub-security-badge" style="font-size: 0.75rem; color: var(--hub-text-muted);">Session Cloudflare Access Active</span>
       </div>
     </header>
 
-    <!-- Canvas / Iframe Container -->
+    <!-- Canvas Container -->
     <div class="hub-canvas">
-      <!-- Loading Indicator -->
-      <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 Hermes...</p>
+      <!-- 1. Native Chat Two-Column Interface -->
+      <div id="hub-native-chat" class="hub-native-chat-layout">
+        <!-- Sub-sidebar Conversations -->
+        <div class="hub-conv-sidebar">
+          <div class="hub-conv-header">
+            <button id="btn-new-chat" class="hub-btn-new-chat" type="button">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+              <span>Nouvelle discussion</span>
+            </button>
+          </div>
+          
+          <div class="hub-conv-search-wrap">
+            <input id="hub-conv-search" class="hub-conv-search-input" type="text" placeholder="Filtrer les discussions..." />
+          </div>
+
+          <div id="hub-conv-list" class="hub-conv-list">
+            <!-- Dynamically populated via JS -->
+            <div class="hub-conv-loading">Chargement des conversations...</div>
+          </div>
+        </div>
+
+        <!-- Right Main Chat Pane -->
+        <div class="hub-chat-pane">
+          <!-- Active Conversation Header -->
+          <div class="hub-chat-header">
+            <div class="hub-chat-header-info">
+              <span id="current-chat-title" class="hub-chat-header-title">Nouvelle conversation</span>
+              <span id="current-chat-status" class="hub-chat-header-status">Prêt</span>
+            </div>
+            <div class="hub-chat-header-actions">
+              <button id="btn-pin-active" class="hub-btn-icon" title="Épingler cette discussion">📌</button>
+              <button id="btn-rename-active" class="hub-btn-icon" title="Renommer">✏️</button>
+              <button id="btn-delete-active" class="hub-btn-icon hub-btn-danger" title="Supprimer la discussion">🗑️</button>
+            </div>
+          </div>
+
+          <!-- Messages Scroll View -->
+          <div id="hub-messages-container" class="hub-messages-container">
+            <div class="hub-empty-state">
+              <div class="hub-empty-icon">💬</div>
+              <h3>Discussion avec <span id="empty-state-name">Hermes</span></h3>
+              <p>Posez une question ou donnez une instruction pour démarrer la session.</p>
+            </div>
+          </div>
+
+          <!-- Chat Input Footer -->
+          <div class="hub-chat-input-wrapper">
+            <form id="hub-chat-form" class="hub-chat-form">
+              <textarea 
+                id="hub-chat-input" 
+                class="hub-chat-textarea" 
+                placeholder="Envoyer un message à Hermes... (Entrée pour envoyer, Maj+Entrée pour saut de ligne)"
+                rows="1"
+              ></textarea>
+              <button id="btn-send-msg" class="hub-btn-send" type="submit" aria-label="Envoyer">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+              </button>
+              <button id="btn-stop-msg" class="hub-btn-stop" type="button" style="display: none;" aria-label="Arrêter la réponse">
+                <div class="hub-stop-square"></div>
+              </button>
+            </form>
+            <div class="hub-chat-input-hint">Hermes Agent Hub • Réponse en streaming direct</div>
+          </div>
+        </div>
       </div>
 
-      <!-- Isolated Workspace View -->
-      <iframe 
-        id="workspace-iframe" 
-        class="hub-workspace-iframe" 
-        src="about:blank"
-        title="Hermes Workspace Frame"
-      ></iframe>
+      <!-- 2. Embedded Iframe View (Used for DSH client and DSH Filebrowser) -->
+      <div id="hub-iframe-wrapper" class="hub-iframe-wrapper" style="display: none;">
+        <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>
+        <iframe 
+          id="workspace-iframe" 
+          class="hub-workspace-iframe" 
+          src="about:blank"
+          title="Hermes Workspace Frame"
+        ></iframe>
+      </div>
     </div>
   </main>
 </div>