Show reasoning in collapsible block; simplify header nav

app.py

@@ -71,13 +71,7 @@ def chat(message: str,
     reply = ""
     for token in streamer:
         reply += token
-        # Model may emit a reasoning preamble ending with an
-        # "assistant to=user" marker before the final response.
-        if "to=user" in reply:
-            final = reply.rsplit("to=user", 1)[1].strip()
-        else:
-            final = ""
-        yield final if final else "💭 thinking…"
+        yield reply  # raw stream; frontend splits reasoning from final reply
     thread.join()
 
 

index.html

@@ -63,6 +63,9 @@
   .bot { align-self: flex-start; background: var(--card); border: 1px solid var(--border); color: #eef2fb; border-bottom-left-radius: 6px; }
   .msg img { max-width: 240px; border-radius: 12px; display: block; margin-bottom: 8px; }
   .sys { align-self: center; color: var(--muted); font-size: 12px; background: none; }
+  .reasoning { margin-bottom: 8px; border-left: 2px solid var(--border); padding-left: 10px; }
+  .reasoning summary { cursor: pointer; color: #8ab4ff; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
+  .reasoning-body { color: var(--muted); font-size: 13px; font-style: italic; margin-top: 6px; white-space: pre-wrap; }
   .bot.typing span::after { content: "▊"; animation: blink 1s steps(1) infinite; color: #8ab4ff; }
   @keyframes blink { 50% { opacity: 0; } }
 
@@ -121,10 +124,7 @@
   </div>
   <nav>
     <a href="https://huggingface.co/meta-models/Muse-Glimmer-30B" target="_blank">Model Card</a>
-    <a href="https://arxiv.org/abs/2602.06036" target="_blank">DFlash Paper</a>
-    <a href="https://arxiv.org/abs/2504.13181" target="_blank">Perception Encoder</a>
   </nav>
-  <button class="cta" onclick="document.getElementById('input').focus()">Try Muse Glimmer</button>
 </header>
 
 <div class="orb">
@@ -216,6 +216,37 @@ function addMsg(role, text, imgUrl) {
   return t;
 }
 
+// Render a bot message, splitting the model's reasoning preamble
+// (everything before the "to=user" marker) into a collapsible block.
+function renderBot(div, raw) {
+  div.innerHTML = "";
+  let reasoning = "", final = raw;
+  if (raw.includes("to=user")) {
+    const idx = raw.lastIndexOf("to=user");
+    reasoning = raw.slice(0, idx).replace(/\.?assistant\s*$/, "").trim();
+    final = raw.slice(idx + "to=user".length).trim();
+  } else {
+    reasoning = raw.trim();
+    final = "";
+  }
+  if (reasoning) {
+    const det = document.createElement("details");
+    det.className = "reasoning";
+    det.open = !final;  // expand while still thinking, collapse once answer starts
+    const sum = document.createElement("summary");
+    sum.textContent = final ? "Reasoning" : "Thinking…";
+    det.appendChild(sum);
+    const body = document.createElement("div");
+    body.className = "reasoning-body";
+    body.textContent = reasoning;
+    det.appendChild(body);
+    div.appendChild(det);
+  }
+  const t = document.createElement("span");
+  t.textContent = final || "💭 thinking…";
+  div.appendChild(t);
+}
+
 function setBusy(b) {
   sendBtn.style.display = b ? "none" : "";
   stopBtn.style.display = b ? "" : "none";
@@ -233,8 +264,8 @@ async function send() {
   input.style.height = "auto";
   setBusy(true);
 
-  const botSpan = addMsg("bot", "");
-  botSpan.parentElement.classList.add("typing");
+  const botDiv = addMsg("bot", "").parentElement;
+  botDiv.classList.add("typing");
   try {
     currentJob = client.submit("/chat", {
       message: text,
@@ -251,16 +282,16 @@ async function send() {
       }
       if (event.type === "data") {
         finalText = event.data[0];
-        botSpan.textContent = finalText;
+        renderBot(botDiv, finalText);
         chatEl.scrollTop = chatEl.scrollHeight;
       }
     }
     history.push({ role: "user", content: text || "[image]" });
     history.push({ role: "assistant", content: finalText });
   } catch (e) {
-    botSpan.textContent = "⚠️ " + (e.message || e);
+    botDiv.textContent = "⚠️ " + (e.message || e);
   } finally {
-    botSpan.parentElement.classList.remove("typing");
+    botDiv.classList.remove("typing");
     setBusy(false);
     clearImage();
     queueEl.textContent = "—";