UI: direct Gradio SSE adapter, bidi lists, no page overflow

diba-ui.css

@@ -10,7 +10,7 @@
   --accent: #4CB58C; --accent-ink: #0B1511; --accent-soft: #1E3A2F; --danger: #F2B8B5; --shadow: 0 6px 24px rgba(0, 0, 0, .35);
 }
 
-html, body { height: 100%; }
+html, body { height: 100%; margin: 0; }
 body.diba-lock { overflow: hidden !important; }
 #diba-root, #diba-root * { box-sizing: border-box; }
 #diba-root {

diba-ui.js

@@ -155,16 +155,35 @@
     }
   }
 
-  let gradioClient = null;
+  // Gradio REST streaming protocol: POST /gradio_api/call/<api> -> {event_id}; GET .../<event_id> -> SSE (generating|complete|error)
+  let gradioWarm = false;
   async function* streamGradio(messages) {
-    if (!gradioClient) { const mod = await import(CDN.gradio); gradioClient = await mod.Client.connect(window.location.origin + window.location.pathname.replace(/\/$/, "")); }
-    const job = gradioClient.submit("/chat_stream", [JSON.stringify(messages.slice(-16)), S.settings.temperature, S.settings.max_tokens]);
-    S.controller.signal.addEventListener("abort", () => { try { job.cancel(); } catch (e) { /* already done */ } });
-    for await (const m of job) {
-      if (S.controller.signal.aborted) return;
-      if (m.type === "data" && m.data && typeof m.data[0] === "string") yield m.data[0];
-      if (m.type === "status" && m.stage === "error") throw new Error(m.message || "error");
-      if (m.type === "status" && m.stage === "complete") return;
+    const base = window.location.origin + window.location.pathname.replace(/\/+$/, "");
+    const signal = S.controller.signal;
+    const start = await fetch(base + "/gradio_api/call/chat_stream", {
+      method: "POST", headers: { "Content-Type": "application/json" }, signal,
+      body: JSON.stringify({ data: [JSON.stringify(messages.slice(-16)), S.settings.temperature, S.settings.max_tokens] }),
+    });
+    if (!start.ok) throw new Error("HTTP " + start.status);
+    const { event_id } = await start.json();
+    const res = await fetch(base + "/gradio_api/call/chat_stream/" + event_id, { signal });
+    if (!res.ok || !res.body) throw new Error("HTTP " + res.status);
+    const reader = res.body.getReader(); const dec = new TextDecoder(); let buf = ""; let event = "";
+    for (;;) {
+      const { value, done } = await reader.read(); if (done) return;
+      buf += dec.decode(value, { stream: true });
+      let i;
+      while ((i = buf.indexOf("\n")) >= 0) {
+        const line = buf.slice(0, i).replace(/\r$/, ""); buf = buf.slice(i + 1);
+        if (line.startsWith("event:")) { event = line.slice(6).trim(); continue; }
+        if (!line.startsWith("data:")) continue;
+        const raw = line.slice(5).trim();
+        if (event === "error") throw new Error(raw || "gradio error");
+        if (event === "generating" || event === "complete") {
+          try { const arr = JSON.parse(raw); if (Array.isArray(arr) && typeof arr[0] === "string") { gradioWarm = true; yield arr[0]; } } catch (e) { /* heartbeat */ }
+          if (event === "complete") return;
+        }
+      }
     }
   }
 
@@ -284,7 +303,7 @@
   async function runAssistant() {
     const c = current(); if (!c) return;
     const history = c.messages.filter((m) => !m.error && m.content).map((m) => ({ role: m.role, content: m.content }));
-    const bot = { role: "assistant", content: "", pending: true, cold: BACKEND === "gradio" && !gradioClient };
+    const bot = { role: "assistant", content: "", pending: true, cold: BACKEND === "gradio" && !gradioWarm };
     c.messages.push(bot); renderThread(); toBottom(true);
     S.streaming = true; S.controller = new AbortController(); setSendState();
     let frame = 0; let latest = "";
@@ -376,6 +395,8 @@
     applyChrome(); toBottom(true); setSendState();
     Promise.all([loadScript(CDN.marked), loadScript(CDN.purify), loadScript(CDN.hljs)]).then(() => { renderThread(); toBottom(true); }).catch(() => { /* plain text fallback */ });
     if (window.innerWidth > 820) el.input.focus();
+    const autoQ = qp.get("q");            // test hook: ?q=... sends one message on load
+    if (autoQ && location.hash !== "#demo") setTimeout(() => { newChat(); sendMessage(autoQ); }, 1200);
   }
   if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", boot); else boot();
 })();