Restructure as single-page about-on-top + chat-below + CTA, loading status

Layout:
- About section now lands at top of the main column (default landing view).
- Chat section follows below; sidebar nav becomes anchor scroll with scroll-spy.
- About ends with a primary CTA button that smooth-scrolls to the chat section.
- Topbar is now sticky and sub-nav inside About sticks below it (top: 56px).
- Chat dock composer is sticky to the bottom of the viewport while in the chat section.

Loading state:
- Bot pending message shows typing dots + a status line that progresses with elapsed
time (Connecting → Waking ZeroGPU → Cold start → Still warming up).
- Subscribes to @gradio/client status events for queue/processing stage updates.

Multi-turn:
- Sends real conversation history to the backend (JSON.stringify on the convo,
excluding pending/error turns), enabling proper follow-up questions.

DOM safety:
- Refactored renderMsg to use createElement + textContent throughout (no innerHTML).
Markdown rendering uses a small tokenizer that emits text nodes / strong / code
elements directly — XSS-safe by construction.

Metadata:
- README title bumped to user-facing 'CyberSecQwen-4B · CTI Specialist' with
the 'Beating an 8B Cisco specialist at half the size' tagline as short_description.

README.md

@@ -1,18 +1,23 @@
 ---
-title: CyberSecQwen Chat
+title: CyberSecQwen-4B · CTI Specialist
 emoji: "\U0001F6E1"
 colorFrom: blue
-colorTo: indigo
+colorTo: gray
 sdk: static
 pinned: false
 license: apache-2.0
-short_description: Polished chat UI for CyberSecQwen-4B
+short_description: Beating an 8B Cisco specialist at half the size
 ---
 
-# CyberSecQwen Chat
+# CyberSecQwen-4B
 
-Static frontend that calls the [`athena129/cybersecqwen-demo`](https://huggingface.co/spaces/athena129/cybersecqwen-demo) Gradio Space (ZeroGPU backend) via `@gradio/client`.
+A 4B-parameter Qwen3 fine-tune specialized for cyber threat intelligence — CWE classification, CVE-to-CWE mapping, code-pattern reasoning. Trained on a single AMD Instinct MI300X.
 
-- Single-file HTML, vanilla JS, no build step
-- Connects to the deployed Gradio backend's `/chat` endpoint
-- Streaming token-by-token via Gradio's submit job iterator
+| Benchmark | Score (n=5, temp 0.3) | vs. Foundation-Sec-Instruct-8B |
+|---|---|---|
+| CTI-RCM | 0.6664 ± 0.0023 | -1.9 pp at half the size |
+| CTI-MCQ | 0.5868 ± 0.0029 | **+8.7 pp at half the size** |
+
+This Space is the polished chat UI. It calls the ZeroGPU backend [`athena129/cybersecqwen-demo`](https://huggingface.co/spaces/athena129/cybersecqwen-demo) via `@gradio/client`. Cold start ~10–20 s, then warm.
+
+→ Model card: [`athena129/CyberSecQwen-4B`](https://huggingface.co/athena129/CyberSecQwen-4B) · Source: [GitHub](https://github.com/GPT-64590/CyberSecQwen-4B)

index.html

@@ -139,13 +139,14 @@
   }
   .status-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent)}
 
-  /* Main */
-  .main{display:flex;flex-direction:column;min-width:0;min-height:0}
+  /* Main — scroll container for the stacked sections (about → chat). */
+  .main{display:flex;flex-direction:column;min-width:0;min-height:0;overflow-y:auto;scroll-behavior:smooth;position:relative}
   .topbar{
     height:56px;flex:none;
     padding:0 28px;border-bottom:1px solid var(--border-soft);
     display:flex;align-items:center;justify-content:space-between;
-    background:rgba(8,8,10,.5);backdrop-filter:blur(8px);
+    background:rgba(8,8,10,.72);backdrop-filter:blur(10px);
+    position:sticky;top:0;z-index:10;
   }
   .topbar h1.section-title{
     margin:0;font-size:13.5px;font-weight:500;color:var(--fg-2);letter-spacing:.005em;
@@ -156,15 +157,49 @@
     display:inline-flex;align-items:center;gap:7px;
   }
 
-  .view{flex:1;min-height:0;overflow:auto;position:relative}
-  .view.no-scroll{overflow:hidden;display:flex;flex-direction:column}
-  .view.no-scroll > .chat-active{flex:1;min-height:0}
+  /* Stacked page sections */
+  .page-section{position:relative;scroll-margin-top:56px}
+  .page-section + .page-section{border-top:1px solid var(--border-soft)}
+  .hidden{display:none !important}
+
+  /* Call-to-action block at end of About */
+  .cta-block{
+    margin:64px auto 0;max-width:560px;
+    padding:36px 32px;
+    border:1px solid var(--accent-border);border-radius:16px;
+    background:radial-gradient(120% 100% at 50% 0%, var(--accent-soft), transparent 70%);
+    text-align:center;
+  }
+  .cta-block h3{
+    margin:0 0 8px;
+    font-family:var(--font-serif);font-weight:400;
+    font-size:30px;line-height:1.15;letter-spacing:-.01em;color:var(--fg);
+  }
+  .cta-block h3 em{font-style:italic;color:var(--accent)}
+  .cta-block p{margin:0 0 22px;color:var(--fg-4);font-size:14.5px;max-width:42ch;margin-left:auto;margin-right:auto}
+  .cta-primary{
+    display:inline-flex;align-items:center;gap:9px;
+    padding:11px 22px;border-radius:10px;
+    background:var(--accent);color:#06181c;font-weight:600;font-size:14px;
+    transition:transform .2s var(--ease-out), filter .15s, box-shadow .2s var(--ease-out);
+    box-shadow: 0 0 0 1px var(--accent-border), 0 0 28px var(--accent-glow);
+  }
+  .cta-primary:hover{transform:translateY(-1px);filter:brightness(1.05)}
+  .cta-primary svg{transition:transform .2s var(--ease-out)}
+  .cta-primary:hover svg{transform:translateY(2px)}
+
+  /* Loading status line under typing indicator */
+  .status-text{
+    margin-top:6px;
+    font-family:var(--font-mono);font-size:11px;color:var(--fg-5);
+    letter-spacing:.02em;
+  }
+  .status-text.warn{color:var(--accent)}
 
-  /* ── CHAT VIEW ─────────────────────────────────────────── */
+  /* ── CHAT SECTION ──────────────────────────────────────── */
   .chat-empty{
-    min-height:100%;
     display:flex;flex-direction:column;align-items:center;justify-content:center;
-    padding:7vh 28px 12vh;
+    padding:64px 28px 80px;
     gap:24px;
   }
   .hero-icon{
@@ -233,16 +268,14 @@
   .chip .kind{font-family:var(--font-mono);font-size:10.5px;color:var(--accent)}
   .chip:hover{transform:translateY(-1px);border-color:var(--accent-border);color:var(--fg-2)}
 
-  /* Active conversation layout */
+  /* Active conversation layout — stacked, dock is sticky-bottom of viewport */
   .chat-active{
     display:flex;flex-direction:column;
-    width:100%;min-height:0;
+    width:100%;
   }
   .thread{
-    flex:1;min-height:0;overflow:auto;
     padding: 28px 28px 32px;
     display:flex;flex-direction:column;align-items:center;
-    scroll-behavior:smooth;
   }
   .thread-inner{width:100%;max-width:720px;display:flex;flex-direction:column;gap:18px}
 
@@ -281,14 +314,13 @@
   .typing i:nth-child(3){animation-delay:.30s}
   @keyframes blink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
 
-  /* Docked composer */
+  /* Docked composer — sticky to viewport bottom while scrolling chat */
   .dock{
     flex:none;
     padding:14px 28px 22px;
     background:linear-gradient(to bottom, transparent, rgba(8,8,10,.85) 22%, var(--bg) 60%);
     display:flex;justify-content:center;
-    margin-top:-32px;
-    position:relative;z-index:2;
+    position:sticky;bottom:0;z-index:4;
     pointer-events:none;
   }
   .dock > .dock-inner{
@@ -309,7 +341,7 @@
   .about{padding:0}
   .about-inner{max-width:880px;margin:0 auto;padding:48px 32px 120px}
   .subnav{
-    position:sticky;top:0;z-index:5;
+    position:sticky;top:56px;z-index:5;
     background:rgba(8,8,10,.78);backdrop-filter:blur(10px);
     border-bottom:1px solid var(--border-soft);
     padding:12px 32px;
@@ -468,14 +500,14 @@
       </div>
 
       <nav class="nav" id="nav">
-        <a href="#/" data-route="/" class="active">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
-          Chat
-        </a>
-        <a href="#/about" data-route="/about">
+        <a href="#about" data-section="about" class="active">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v5h1"/></svg>
           About
         </a>
+        <a href="#chat" data-section="chat">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+          Try the Chat
+        </a>
       </nav>
 
       <div class="side-foot">
@@ -492,80 +524,15 @@
     </aside>
 
     <!-- ── MAIN ────────────────────────────────────────────── -->
-    <main class="main">
+    <main class="main" id="main">
       <header class="topbar">
-        <h1 class="section-title" id="topTitle">Chat</h1>
-        <span class="top-status">cybersecqwen-4b · temp 0.3</span>
+        <h1 class="section-title" id="topTitle">CyberSecQwen-4B</h1>
+        <span class="top-status">4B · CTI specialist · temp 0.3</span>
       </header>
 
-      <div class="view" id="view"><!-- routed content --></div>
-    </main>
-  </div>
-
-  <!-- ── CHAT VIEW (template) ─────────────────────────────── -->
-  <template id="tpl-chat-empty">
-    <div class="chat-empty">
-      <div class="hero-icon" aria-hidden="true">
-        <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/><path d="M9 12l2 2 4-4"/></svg>
-      </div>
-      <h2 class="hero-h1">Map a vulnerability<br/><em>to a CWE.</em></h2>
-      <p class="hero-sub">Paste a snippet, log line, or CVE. The model returns a Common Weakness Enumeration with a one-paragraph rationale.</p>
-
-      <form class="composer" id="composer-empty">
-        <textarea rows="1" id="ta-empty" placeholder="Describe the issue, paste code, or drop a CVE id…"></textarea>
-        <div class="composer-row">
-          <span class="send-hint">↵ to send · ⇧↵ for newline</span>
-          <button class="send-btn" type="submit" id="send-empty" disabled>
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l14-7-7 14-2-5-5-2z"/></svg>
-            Send
-          </button>
-        </div>
-      </form>
-
-      <div class="chips" id="chips">
-        <button class="chip" data-prompt="Explain CWE-120 (classic buffer overflow) with a minimal C example and the standard mitigation.">
-          <span class="kind">CWE</span> Buffer overflow
-        </button>
-        <button class="chip" data-prompt="What CWE underlies the MOVEit Transfer SQL injection chain (CVE-2023-34362)?">
-          <span class="kind">CVE</span> MOVEit
-        </button>
-        <button class="chip" data-prompt="Audit this nginx config snippet for security weaknesses:&#10;server { listen 80; root /var/www; autoindex on; location /api/ { proxy_pass http://127.0.0.1:8000; } }">
-          <span class="kind">CFG</span> nginx audit
-        </button>
-        <button class="chip" data-prompt="Log line: GET /static/../../../etc/passwd HTTP/1.1 200 — what weakness, and how to fix?">
-          <span class="kind">LOG</span> path traversal
-        </button>
-      </div>
-    </div>
-  </template>
-
-  <template id="tpl-chat-active">
-    <div class="chat-active">
-      <div class="thread" id="thread"><div class="thread-inner" id="thread-inner"></div></div>
-      <div class="dock">
-        <div class="dock-inner">
-          <form class="composer" id="composer-dock">
-            <textarea rows="1" id="ta-dock" placeholder="Continue the conversation…"></textarea>
-            <div class="composer-row">
-              <span class="send-hint">↵ to send · ⇧↵ for newline</span>
-              <button class="send-btn" type="submit" id="send-dock" disabled>
-                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l14-7-7 14-2-5-5-2z"/></svg>
-                Send
-              </button>
-            </div>
-          </form>
-          <button class="new-chat" id="newChat" type="button" title="Start a new chat">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
-            New chat
-          </button>
-        </div>
-      </div>
-    </div>
-  </template>
-
-  <!-- ── ABOUT VIEW (template) ────────────────────────────── -->
-  <template id="tpl-about">
-    <div class="about">
+      <!-- ── ABOUT (top) ───────────────────────────────────── -->
+      <section class="page-section about" id="about">
+        <div class="about">
       <div class="subnav">
         <div class="subnav-inner" id="subnav">
           <a href="#performance">Performance</a>
@@ -810,29 +777,102 @@
           <p><strong>License:</strong> Apache 2.0, end-to-end — weights, training code, and the synthetic CVE/CTI Q&amp;A corpus. The decontaminated 2021 CVE→CWE mappings derive from public MITRE/NVD records. Evaluation protocol: <a href="https://arxiv.org/abs/2504.21039" target="_blank" style="color:var(--accent)">Foundation-Sec-8B (arXiv:2504.21039)</a>. Benchmark: <a href="https://github.com/xashru/cti-bench" target="_blank" style="color:var(--accent)">CTI-Bench</a>.</p>
         </section>
 
-      </div>
-    </div>
-  </template>
+        <!-- CTA — links into the chat section below -->
+        <div class="cta-block">
+          <h3>Ready to <em>try it?</em></h3>
+          <p>Test CyberSecQwen-4B on your own prompts below. ZeroGPU; cold start ~10–20 s, then warm.</p>
+          <a href="#chat" class="cta-primary" id="ctaTry">
+            Try the chat
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
+          </a>
+        </div>
+
+      </div><!-- /about-inner -->
+        </div><!-- /about wrapper -->
+      </section><!-- /#about -->
+
+      <!-- ── CHAT (below) ─────────────────────────────────── -->
+      <section class="page-section chat-section" id="chat">
+        <div class="chat-empty" id="chatEmpty">
+          <div class="hero-icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/><path d="M9 12l2 2 4-4"/></svg>
+          </div>
+          <h2 class="hero-h1">Map a vulnerability<br/><em>to a CWE.</em></h2>
+          <p class="hero-sub">Paste a snippet, log line, or CVE. The model returns a Common Weakness Enumeration with a one-paragraph rationale.</p>
+
+          <form class="composer" id="composerEmpty">
+            <textarea rows="1" id="taEmpty" placeholder="Describe the issue, paste code, or drop a CVE id…"></textarea>
+            <div class="composer-row">
+              <span class="send-hint">↵ to send · ⇧↵ for newline</span>
+              <button class="send-btn" type="submit" id="sendEmpty" disabled>
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l14-7-7 14-2-5-5-2z"/></svg>
+                Send
+              </button>
+            </div>
+          </form>
+
+          <div class="chips" id="chips">
+            <button class="chip" data-prompt="What CWE applies to using strcpy without bounds checking? Give a one-paragraph rationale.">
+              <span class="kind">CWE</span> Buffer overflow
+            </button>
+            <button class="chip" data-prompt="What CWE underlies the MOVEit Transfer SQL injection chain (CVE-2023-34362)?">
+              <span class="kind">CVE</span> MOVEit
+            </button>
+            <button class="chip" data-prompt="What CWE applies to: query = 'SELECT * FROM users WHERE id=' + user_id">
+              <span class="kind">CWE</span> SQL injection
+            </button>
+            <button class="chip" data-prompt="Log line: GET /static/../../../etc/passwd HTTP/1.1 200 — what weakness, and how to fix?">
+              <span class="kind">LOG</span> path traversal
+            </button>
+          </div>
+        </div>
+
+        <div class="chat-active hidden" id="chatActive">
+          <div class="thread"><div class="thread-inner" id="threadInner"></div></div>
+          <div class="dock">
+            <div class="dock-inner">
+              <form class="composer" id="composerDock">
+                <textarea rows="1" id="taDock" placeholder="Continue the conversation…"></textarea>
+                <div class="composer-row">
+                  <span class="send-hint">↵ to send · ⇧↵ for newline</span>
+                  <button class="send-btn" type="submit" id="sendDock" disabled>
+                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l14-7-7 14-2-5-5-2z"/></svg>
+                    Send
+                  </button>
+                </div>
+              </form>
+              <button class="new-chat" id="newChat" type="button" title="Start a new chat">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
+                New chat
+              </button>
+            </div>
+          </div>
+        </div>
+      </section><!-- /#chat -->
+
+    </main>
+  </div>
 
 <script>
 /* ─── BACKEND HOOK ────────────────────────────────────────────
    Calls the deployed Gradio Space `athena129/cybersecqwen-demo`
-   via @gradio/client. The backend exposes /chat with signature
-   chat(message: str, history_json: str) -> str (streaming). We
-   pass "[]" for single-turn and surface cumulative output via onChunk.
+   via @gradio/client. The backend exposes /chat with signature:
+     chat(message: str, history_json: str) -> str  (streaming)
+   We send JSON.stringify(history) for multi-turn and subscribe to
+   status events so the loading UI can show queue/cold-start progress.
 */
 const BACKEND_SPACE = "athena129/cybersecqwen-demo";
 let _client = null;
 async function getClient(){
   if (_client) return _client;
   const { Client } = await import("https://esm.sh/@gradio/client@1.10.0");
-  _client = await Client.connect(BACKEND_SPACE);
+  _client = await Client.connect(BACKEND_SPACE, { events: ["data", "status"] });
   return _client;
 }
 
-async function askModel(prompt, onChunk){
+async function askModel(prompt, history, onChunk, onStatus){
   const client = await getClient();
-  const job = client.submit("/chat", [prompt, "[]"]);
+  const job = client.submit("/chat", [prompt, JSON.stringify(history || [])]);
   let lastContent = "";
   for await (const msg of job){
     if (msg.type === "data" && msg.data && Array.isArray(msg.data)){
@@ -841,38 +881,71 @@ async function askModel(prompt, onChunk){
         lastContent = text;
         if (onChunk) onChunk(lastContent);
       }
+    } else if (msg.type === "status" && onStatus){
+      onStatus(msg);
     }
   }
   return { answer: lastContent || "The model returned no output. Try again." };
 }
 
-/* ─── ROUTING ─────────────────────────────────────────────── */
-const view = document.getElementById('view');
-const topTitle = document.getElementById('topTitle');
+/* ─── DOM REFS ────────────────────────────────────────────── */
+const main = document.getElementById('main');
 const navLinks = document.querySelectorAll('#nav a');
-
-let convo = []; // [{role:'user'|'bot', text, pending?}]
-
-function route(){
-  const hash = location.hash || '#/';
-  navLinks.forEach(a => a.classList.toggle('active', a.dataset.route === (hash.replace(/^#/,'') || '/')));
-  if (hash.startsWith('#/about')){
-    topTitle.textContent = 'About';
-    renderAbout();
-  } else {
-    topTitle.textContent = 'Chat';
-    renderChat();
+const aboutSection = document.getElementById('about');
+const chatSection = document.getElementById('chat');
+const chatEmpty = document.getElementById('chatEmpty');
+const chatActive = document.getElementById('chatActive');
+const threadInner = document.getElementById('threadInner');
+
+let convo = []; // [{role:'user'|'bot', text, pending?, statusText?, error?}]
+
+/* ─── DOM HELPERS (no innerHTML, all textContent / appendChild) */
+function el(tag, opts){
+  const e = document.createElement(tag);
+  if (opts){
+    if (opts.cls) e.className = opts.cls;
+    if (opts.text != null) e.textContent = opts.text;
   }
+  return e;
 }
-window.addEventListener('hashchange', route);
 
-/* ─── CHAT ────────────────────────────────────────────────── */
-function renderChat(){
-  view.innerHTML = '';
-  view.classList.toggle('no-scroll', convo.length > 0);
-  if (convo.length === 0) renderEmptyChat(); else renderActiveChat();
+/* Safe markdown — escape implicit, only **bold** and `code` are recognized. */
+function renderMdToFragment(s){
+  const frag = document.createDocumentFragment();
+  let i = 0;
+  while (i < s.length){
+    // **bold**
+    if (s[i] === '*' && s[i+1] === '*'){
+      const end = s.indexOf('**', i + 2);
+      if (end !== -1){
+        frag.appendChild(el('strong', { text: s.slice(i + 2, end) }));
+        i = end + 2;
+        continue;
+      }
+    }
+    // `code`
+    if (s[i] === '`'){
+      const end = s.indexOf('`', i + 1);
+      if (end !== -1){
+        frag.appendChild(el('code', { text: s.slice(i + 1, end) }));
+        i = end + 1;
+        continue;
+      }
+    }
+    // Plain run — find next special char
+    let next = i;
+    while (next < s.length){
+      if (s[next] === '`') break;
+      if (s[next] === '*' && s[next + 1] === '*') break;
+      next++;
+    }
+    frag.appendChild(document.createTextNode(s.slice(i, next)));
+    i = next;
+  }
+  return frag;
 }
 
+/* ─── COMPOSER BINDING ────────────────────────────────────── */
 function bindComposer(form, ta, btn, onSend){
   const update = () => { btn.disabled = ta.value.trim().length === 0; };
   ta.addEventListener('input', () => {
@@ -887,148 +960,201 @@ function bindComposer(form, ta, btn, onSend){
   update();
 }
 
-function renderEmptyChat(){
-  view.appendChild(document.getElementById('tpl-chat-empty').content.cloneNode(true));
-  const form = document.getElementById('composer-empty');
-  const ta = document.getElementById('ta-empty');
-  const btn = document.getElementById('send-empty');
-  bindComposer(form, ta, btn, sendMessage);
-  // focus
-  setTimeout(() => ta.focus(), 30);
-
-  document.querySelectorAll('#chips .chip').forEach(c => {
-    c.addEventListener('click', () => {
-      ta.value = c.dataset.prompt;
-      ta.dispatchEvent(new Event('input'));
-      ta.focus();
-    });
+bindComposer(
+  document.getElementById('composerEmpty'),
+  document.getElementById('taEmpty'),
+  document.getElementById('sendEmpty'),
+  sendMessage,
+);
+bindComposer(
+  document.getElementById('composerDock'),
+  document.getElementById('taDock'),
+  document.getElementById('sendDock'),
+  sendMessage,
+);
+
+document.querySelectorAll('#chips .chip').forEach(c => {
+  c.addEventListener('click', () => {
+    const ta = document.getElementById('taEmpty');
+    ta.value = c.dataset.prompt;
+    ta.dispatchEvent(new Event('input'));
+    ta.focus();
   });
+});
+
+document.getElementById('newChat').addEventListener('click', () => {
+  convo = [];
+  showEmptyState();
+  chatSection.scrollIntoView({ behavior:'smooth', block:'start' });
+});
+
+/* ─── VIEW STATE TOGGLES ──────────────────────────────────── */
+function showEmptyState(){
+  chatActive.classList.add('hidden');
+  chatEmpty.classList.remove('hidden');
+  while (threadInner.firstChild) threadInner.removeChild(threadInner.firstChild);
+  setTimeout(() => document.getElementById('taEmpty')?.focus(), 30);
 }
 
-function renderActiveChat(){
-  view.innerHTML = '';
-  view.classList.add('no-scroll');
-  view.appendChild(document.getElementById('tpl-chat-active').content.cloneNode(true));
-  const inner = document.getElementById('thread-inner');
-  inner.innerHTML = '';
-  convo.forEach(m => inner.appendChild(renderMsg(m)));
-  scrollThread();
-
-  const form = document.getElementById('composer-dock');
-  const ta = document.getElementById('ta-dock');
-  const btn = document.getElementById('send-dock');
-  bindComposer(form, ta, btn, sendMessage);
-  setTimeout(() => ta.focus(), 30);
-
-  document.getElementById('newChat').addEventListener('click', () => {
-    convo = [];
-    renderChat();
-  });
+function showActiveState(){
+  chatEmpty.classList.add('hidden');
+  chatActive.classList.remove('hidden');
 }
 
-function renderMsg(m){
-  const wrap = document.createElement('div');
-  wrap.className = 'msg ' + (m.role === 'user' ? 'user' : 'bot');
+/* ─── MESSAGE RENDERING (DOM API only) ────────────────────── */
+function buildMsg(m){
+  const wrap = el('div', { cls: 'msg ' + (m.role === 'user' ? 'user' : 'bot') });
+  wrap.appendChild(el('span', { cls: 'who', text: m.role === 'user' ? 'You' : 'CyberSecQwen' }));
+
   if (m.role === 'user'){
-    wrap.innerHTML = `<span class="who">You</span><div class="bubble"></div>`;
-    wrap.querySelector('.bubble').textContent = m.text;
+    wrap.appendChild(el('div', { cls: 'bubble', text: m.text }));
+    return wrap;
+  }
+  // bot
+  const body = el('div', { cls: 'body' });
+  if (m.pending){
+    const typing = el('span', { cls: 'typing' });
+    typing.appendChild(el('i'));
+    typing.appendChild(el('i'));
+    typing.appendChild(el('i'));
+    body.appendChild(typing);
+    body.appendChild(el('div', { cls: 'status-text', text: m.statusText || 'Connecting…' }));
+  } else if (m.error){
+    body.appendChild(el('div', { cls: 'status-text warn', text: m.text }));
   } else {
-    wrap.innerHTML = `<span class="who">CyberSecQwen</span><div class="body"></div>`;
-    const body = wrap.querySelector('.body');
-    if (m.pending){
-      body.innerHTML = '<span class="typing"><i></i><i></i><i></i></span>';
-    } else {
-      body.innerHTML = renderMd(m.text);
-    }
+    body.appendChild(renderMdToFragment(m.text));
   }
+  wrap.appendChild(body);
   return wrap;
 }
 
-function renderMd(s){
-  return s
-    .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
-    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-    .replace(/`([^`]+)`/g, '<code>$1</code>');
+function replaceLastMsg(){
+  const last = threadInner.lastElementChild;
+  if (last) last.replaceWith(buildMsg(convo[convo.length - 1]));
 }
 
-function scrollThread(){
-  const t = document.getElementById('thread');
-  if (t) t.scrollTop = t.scrollHeight;
+function appendToThread(m){
+  threadInner.appendChild(buildMsg(m));
 }
 
+/* ─── SEND ─────────────────────────────────────────────────── */
 async function sendMessage(text){
   const wasEmpty = convo.length === 0;
+  if (wasEmpty){ showActiveState(); }
+
   convo.push({ role:'user', text });
-  convo.push({ role:'bot', text:'', pending:true });
+  convo.push({ role:'bot', text:'', pending:true, statusText:'Connecting to backend…' });
+  appendToThread(convo[convo.length - 2]);
+  appendToThread(convo[convo.length - 1]);
+
+  // Reset both composers immediately for responsiveness
+  for (const id of ['taEmpty', 'taDock']){
+    const ta = document.getElementById(id);
+    if (ta){ ta.value = ''; ta.style.height='auto'; ta.dispatchEvent(new Event('input')); }
+  }
 
-  // Always re-render the active chat so the empty-state DOM
-  // (hero, chips, empty composer) is fully removed on first send.
-  renderActiveChat();
-  scrollThread();
+  // Build history from prior turns (exclude the just-added user+pending pair)
+  const hist = convo.slice(0, -2)
+    .filter(m => !m.pending && !m.error)
+    .map(m => ({ role: m.role === 'bot' ? 'assistant' : 'user', content: m.text }));
+
+  // Progressive timer-based status copy if no/few status updates arrive
+  const t0 = Date.now();
+  let statusTimer = setInterval(() => {
+    const last = convo[convo.length - 1];
+    if (!last.pending) return;
+    const elapsed = (Date.now() - t0) / 1000;
+    let copy = last.statusText;
+    if (elapsed > 5  && elapsed <= 12) copy = 'Waking ZeroGPU (cold start ~10–20 s)…';
+    else if (elapsed > 12 && elapsed <= 25) copy = 'Cold start in progress — almost there…';
+    else if (elapsed > 25)                  copy = 'Still warming up — ZeroGPU shared pool can be slow.';
+    if (copy !== last.statusText){
+      last.statusText = copy;
+      replaceLastMsg();
+    }
+  }, 1500);
 
-  // Stream tokens into the last bot message as they arrive.
   const onChunk = (partial) => {
+    if (statusTimer){ clearInterval(statusTimer); statusTimer = null; }
     convo[convo.length - 1] = { role:'bot', text: partial };
-    const inner = document.getElementById('thread-inner');
-    if (!inner) return;
-    const last = inner.lastElementChild;
-    if (last) last.replaceWith(renderMsg(convo[convo.length - 1]));
-    scrollThread();
+    replaceLastMsg();
+  };
+
+  const onStatus = (s) => {
+    const last = convo[convo.length - 1];
+    if (!last.pending) return;
+    let copy = null;
+    if (s.stage === 'pending')         copy = 'Queued…';
+    else if (s.stage === 'processing') copy = 'Generating…';
+    else if (s.stage === 'iterating')  copy = 'Generating…';
+    if (copy && copy !== last.statusText){
+      last.statusText = copy;
+      replaceLastMsg();
+    }
   };
 
   try{
-    const { answer } = await askModel(text, onChunk);
+    const { answer } = await askModel(text, hist, onChunk, onStatus);
     convo[convo.length - 1] = { role:'bot', text: answer };
   } catch (e){
     convo[convo.length - 1] = {
       role:'bot',
-      text: 'The model is unavailable right now. ZeroGPU may be cold-starting (first call after idle takes ~30 s) — try again in a moment.\n\n`' + (e?.message || String(e)) + '`',
+      error: true,
+      text: 'The backend is unavailable right now. ZeroGPU cold start can take ~10–20 s on the first call after idle — try again in a moment. (' + (e?.message || String(e)) + ')',
     };
+  } finally {
+    if (statusTimer){ clearInterval(statusTimer); statusTimer = null; }
   }
-
-  // Final re-render of the bot message in place.
-  const inner = document.getElementById('thread-inner');
-  if (inner){
-    const last = inner.lastElementChild;
-    if (last) last.replaceWith(renderMsg(convo[convo.length - 1]));
-    scrollThread();
-  }
-  // refocus composer
-  const ta = document.getElementById('ta-dock');
-  if (ta){ ta.value = ''; ta.style.height = 'auto'; ta.dispatchEvent(new Event('input')); ta.focus(); }
+  replaceLastMsg();
+  setTimeout(() => document.getElementById('taDock')?.focus(), 30);
 }
 
-/* ─── ABOUT ────────────────────────────────────────────────── */
-function renderAbout(){
-  view.innerHTML = '';
-  view.appendChild(document.getElementById('tpl-about').content.cloneNode(true));
-
-  // Sub-nav scroll-spy + smooth-scroll within the view (the scroll container is .view)
-  const subnav = view.querySelector('#subnav');
-  const links = subnav.querySelectorAll('a');
-  const sections = view.querySelectorAll('.about section');
-
-  links.forEach(a => {
-    a.addEventListener('click', e => {
-      e.preventDefault();
-      const id = a.getAttribute('href').slice(1);
-      const target = view.querySelector('#' + id);
-      if (target) view.scrollTo({ top: target.offsetTop - 60, behavior:'smooth' });
-    });
+/* ─── SIDEBAR NAV: smooth-scroll + scroll-spy ─────────────── */
+navLinks.forEach(a => {
+  a.addEventListener('click', e => {
+    e.preventDefault();
+    const id = a.dataset.section;
+    const target = document.getElementById(id);
+    if (target) main.scrollTo({ top: target.offsetTop, behavior:'smooth' });
   });
+});
+
+const sectionsTop = [aboutSection, chatSection];
+function setActiveNav(){
+  const top = main.scrollTop + 80;
+  let currentId = sectionsTop[0].id;
+  sectionsTop.forEach(s => { if (s.offsetTop <= top) currentId = s.id; });
+  navLinks.forEach(a => a.classList.toggle('active', a.dataset.section === currentId));
+}
+main.addEventListener('scroll', setActiveNav, { passive:true });
+
+/* ─── ABOUT SUB-NAV: scroll-spy within the page ───────────── */
+const subnavLinks = document.querySelectorAll('#subnav a');
+const aboutSubsections = document.querySelectorAll('#about .about-inner > section');
+
+subnavLinks.forEach(a => {
+  a.addEventListener('click', e => {
+    e.preventDefault();
+    const id = a.getAttribute('href').slice(1);
+    const target = document.getElementById(id);
+    if (target) main.scrollTo({ top: target.offsetTop - 110, behavior:'smooth' });
+  });
+});
 
-  const setCurrent = () => {
-    const top = view.scrollTop + 80;
-    let current = sections[0]?.id;
-    sections.forEach(s => { if (s.offsetTop <= top) current = s.id; });
-    links.forEach(a => a.classList.toggle('is-current', a.getAttribute('href') === '#' + current));
-  };
-  view.addEventListener('scroll', setCurrent, { passive:true });
-  setCurrent();
+function setCurrentSubnav(){
+  const top = main.scrollTop + 140;
+  let current = aboutSubsections[0]?.id;
+  aboutSubsections.forEach(s => { if (s.offsetTop <= top) current = s.id; });
+  subnavLinks.forEach(a => a.classList.toggle('is-current', a.getAttribute('href') === '#' + current));
 }
+main.addEventListener('scroll', setCurrentSubnav, { passive:true });
+setCurrentSubnav();
 
-/* ─── BOOT ─────────────────────────────────────────────────── */
-route();
+/* ─── BOOT — handle initial hash, default to top (about) ──── */
+if (location.hash === '#chat'){
+  setTimeout(() => chatSection.scrollIntoView({ block:'start' }), 0);
+}
+setActiveNav();
 </script>
 </body>
 </html>