Embed brand logo image, fix blocking client connection and style header buttons

static/app.js

@@ -77,14 +77,15 @@ async function initializeApp() {
         dom.apiKeyInput.value = STATE.apiKey;
     }
 
-    // 2. Connect Gradio Client
-    try {
-        STATE.gradioClient = await Client.connect(window.location.origin);
-        console.log("Successfully connected to Gradio.Server backend.");
-    } catch (e) {
-        console.error("Gradio Client Connection Failed:", e);
-        appendSystemLog("Gradio Server connection is restricted.", true);
-    }
+    // 2. Connect Gradio Client in background (Non-blocking)
+    Client.connect(window.location.origin)
+        .then(client => {
+            STATE.gradioClient = client;
+            console.log("Successfully connected to Gradio.Server backend.");
+        })
+        .catch(e => {
+            console.error("Gradio Client Connection Failed:", e);
+        });
 
     // 3. Register Sidebar Drawer Slide Events (Drawer + Overlay)
     dom.btnToggleRight.addEventListener("click", () => toggleSettingsDrawer(true));
@@ -410,7 +411,7 @@ async function triggerPromptSubmission(inputElement) {
     // 3. Connect API Call
     try {
         if (!STATE.gradioClient) {
-            throw new Error("Gradio server is not connected.");
+            throw new Error("Gradio server is initializing. Please wait a few seconds and try sending again.");
         }
 
         const responseId = appendAssistantPlaceholderBubble();

static/index.html

@@ -24,11 +24,7 @@
             <!-- Top Navigation Bar -->
             <header class="workspace-header">
                 <div class="header-brand">
-                    <svg viewBox="0 0 100 100" width="24" height="24" fill="currentColor">
-                        <circle cx="50" cy="50" r="46" fill="#111827"/>
-                        <path d="M35 30 C35 30, 48 40, 48 55 C48 70, 35 70, 35 70" stroke="#ffffff" stroke-width="8" stroke-linecap="round" fill="none"/>
-                        <circle cx="62" cy="50" r="7" fill="#ffffff"/>
-                    </svg>
+                    <img src="https://cdn-avatars.huggingface.co/v1/production/uploads/644f7e6233ac8f46fa0b9e26/CmF2ocXhkr2UtHXgmwq7-.png" alt="Step-3.7-Flash Logo" class="brand-logo-img">
                     <span class="brand-name">Step-3.7-Flash</span>
                 </div>
                 

static/style.css

@@ -112,6 +112,14 @@ body {
     gap: 10px;
 }
 
+.brand-logo-img {
+    width: 24px;
+    height: 24px;
+    object-fit: contain;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
 .brand-name {
     font-family: var(--font-heading);
     font-size: 15px;