Separate thinking and improve load status

dist/assets/index-CrZUE5nI.css

@@ -0,0 +1 @@
+:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#f4f0e8;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#10100f;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.4}*{box-sizing:border-box}body{background:linear-gradient(#39453a38,#0000 360px),#10100f;min-width:320px;min-height:100vh;margin:0}button,input,textarea,select{font:inherit}button{border:0}.app{width:min(1180px,100vw - 32px);margin:0 auto;padding:24px 0 36px}.topbar{justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;display:flex}.brand{align-items:center;gap:12px;display:flex}.mark{color:#15170f;background:#d7ff7a;border:1px solid #f4f0e829;border-radius:8px;place-items:center;width:38px;height:38px;font-weight:800;display:grid}h1,h2,h3,p{margin:0}h1{letter-spacing:0;font-size:19px;font-weight:720}.subtle{color:#a7a093;font-size:13px}.actions{align-items:center;gap:8px;display:flex;position:relative}.icon-button,.button{color:#f4f0e8;cursor:pointer;background:#24231f;border:1px solid #f4f0e81f;border-radius:8px;justify-content:center;align-items:center;gap:8px;min-height:38px;padding:0 14px;display:inline-flex}.icon-button{width:38px;padding:0}.icon-button svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8px;width:18px;height:18px}.settings-popover{z-index:10;width:min(430px,100vw - 32px);padding:16px;position:absolute;top:46px;right:0;box-shadow:0 18px 42px #00000061}.settings-popover h2{margin-bottom:8px;font-size:15px;font-weight:720}.button.primary{color:#15170f;background:#d7ff7a;border-color:#d7ff7a;font-weight:740}.button.danger{color:#ffd9d9;background:#3a2525;border-color:#6e3737}.button:disabled,.icon-button:disabled{cursor:not-allowed;opacity:.55}.shell{grid-template-columns:minmax(0,1fr) 340px;gap:18px;display:grid}.panel{background:#1a1916f0;border:1px solid #f4f0e81f;border-radius:8px}.chat-panel{grid-template-rows:auto minmax(0,1fr) auto;min-height:690px;display:grid}.status-strip{background:#f4f0e814;border-bottom:1px solid #f4f0e81a;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;display:grid}.metric{background:#1a1916;min-width:0;padding:12px 14px}.metric span{color:#a7a093;text-transform:uppercase;font-size:11px;display:block}.metric strong{text-overflow:ellipsis;white-space:nowrap;margin-top:2px;font-size:14px;font-weight:680;display:block;overflow:hidden}.messages{padding:18px;overflow:auto}.message-list{flex-direction:column;gap:14px;display:flex}.message{white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid #f4f0e81a;border-radius:8px;max-width:86%;padding:13px 14px}.message.user{background:#243124;align-self:flex-end}.message.assistant{background:#22211d;align-self:flex-start}.answer-text{white-space:pre-wrap}.thinking-block{border-bottom:1px solid #f4f0e814;margin-bottom:10px;padding-bottom:10px}.thinking-toggle{color:#c9c1b2;cursor:pointer;background:#181815;border-radius:7px;align-items:center;gap:7px;min-height:28px;padding:0 8px;font-size:12px;display:inline-flex}.thinking-arrow{color:#d7ff7a;font-weight:800}.thinking-content{color:#a7a093;white-space:pre-wrap;background:#141411;border-radius:7px;max-height:240px;margin-top:8px;padding:10px;font-size:12px;overflow:auto}.empty{color:#a7a093;text-align:center;place-items:center;min-height:340px;display:grid}.composer{border-top:1px solid #f4f0e81a;gap:10px;padding:14px;display:grid}textarea,input,select{color:#f4f0e8;background:#121210;border:1px solid #f4f0e81f;border-radius:8px;outline:none;width:100%}textarea:focus,input:focus,select:focus{border-color:#d7ff7acc;box-shadow:0 0 0 3px #d7ff7a1f}textarea{resize:vertical;min-height:96px;padding:12px}input,select{min-height:38px;padding:0 10px}.composer-row{justify-content:space-between;align-items:center;gap:10px;display:flex}.file-chip{color:#a7a093;flex:1;align-items:center;gap:8px;min-width:0;font-size:13px;display:flex}.file-chip input{display:none}.chip-button{color:#f4f0e8;cursor:pointer;background:#24231f;border-radius:8px;align-items:center;gap:7px;min-height:34px;padding:0 10px;display:inline-flex}.file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.side{flex-direction:column;gap:14px;display:flex}.card{padding:16px}.card h2{margin-bottom:10px;font-size:15px;font-weight:720}.field{gap:6px;margin-top:12px;display:grid}.field label{color:#c9c1b2;font-size:12px;font-weight:650}.field-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.progress{background:#11110f;border-radius:999px;height:10px;overflow:hidden}.bar{border-radius:inherit;background:#d7ff7a;width:0%;height:100%;transition:width .18s}.indeterminate .bar{background:linear-gradient(90deg,#d7ff7a59,#d7ff7a,#d7ff7a59) 0 0/200% 100%;animation:1.1s linear infinite load-sweep}@keyframes load-sweep{0%{background-position:200% 0}to{background-position:0 0}}.log{color:#c9c1b2;white-space:pre-wrap;background:#11110f;border-radius:8px;min-height:106px;max-height:190px;padding:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;overflow:auto}.pill-row{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.pill{color:#c9c1b2;border:1px solid #f4f0e81f;border-radius:999px;padding:5px 9px;font-size:12px}.source{overflow-wrap:anywhere}@media (max-width:900px){.app{width:min(100vw - 20px,720px);padding-top:14px}.shell{grid-template-columns:1fr}.status-strip{grid-template-columns:1fr 1fr}.message{max-width:94%}.topbar{flex-direction:column;align-items:flex-start}.actions{justify-content:flex-end;align-self:stretch}}

dist/assets/wllama-ByHMPmd7.wasm

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a3e827b9fc3536fd1b061eee8b130e46f6366d25b062438a791d8b17b2a72a30
+size 7308965

dist/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Gemma 4 WebGPU</title>
+    <link rel="preconnect" href="https://huggingface.co" />
+    <script type="module" crossorigin src="./assets/index-fRU50Fl0.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-CrZUE5nI.css">
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

src/main.ts

@@ -22,17 +22,29 @@ type Role = "user" | "assistant";
 type ChatEntry = {
   role: Role;
   content: string;
+  thinking?: string;
+  thinkingOpen?: boolean;
 };
 
-type StreamText = {
-  text: string;
-  replace: boolean;
+type StreamParts = {
+  answer: string;
+  thinking: string;
+  replaceAnswer: boolean;
+  replaceThinking: boolean;
 };
 
+type ThinkParseState = {
+  inThinking: boolean;
+  tagBuffer: string;
+};
+
+type LoadPhase = "idle" | "preparing" | "downloading" | "initializing" | "ready" | "error";
+
 type LoadStats = {
   loaded: number;
   total: number;
   startedAt: number;
+  phaseStartedAt: number;
   doneAt?: number;
 };
 
@@ -44,8 +56,9 @@ const app = root;
 let wllama: Wllama | null = null;
 let modelLoaded = false;
 let loading = false;
+let loadPhase: LoadPhase = "idle";
 let generating = false;
-let loadStats: LoadStats = { loaded: 0, total: TOTAL_DOWNLOAD_BYTES, startedAt: 0 };
+let loadStats: LoadStats = { loaded: 0, total: TOTAL_DOWNLOAD_BYTES, startedAt: 0, phaseStartedAt: 0 };
 let chat: ChatEntry[] = [];
 let imageFile: File | null = null;
 let abortController: AbortController | null = null;
@@ -62,6 +75,7 @@ const state = {
   maxTokens: Number(params.get("maxTokens") || 384),
   temperature: Number(params.get("temperature") || 0.7),
   topP: Number(params.get("topP") || 0.95),
+  thinking: params.get("thinking") === "hidden" ? "hidden" : "collapsed",
   seed: Number(params.get("seed") || -1),
   prompt:
     params.get("prompt") ||
@@ -91,11 +105,55 @@ function elapsedLoadSeconds(): number {
   return (end - loadStats.startedAt) / 1000;
 }
 
+function elapsedPhaseSeconds(): number {
+  if (!loadStats.phaseStartedAt) return 0;
+  return (performance.now() - loadStats.phaseStartedAt) / 1000;
+}
+
+function setLoadPhase(phase: LoadPhase): void {
+  if (loadPhase === phase) return;
+  loadPhase = phase;
+  loadStats.phaseStartedAt = performance.now();
+}
+
 function loadPercent(): number {
   if (!loadStats.total) return 0;
   return Math.max(0, Math.min(100, (loadStats.loaded / loadStats.total) * 100));
 }
 
+function statusLabel(): string {
+  if (modelLoaded) return "ready";
+  if (!loading) return loadPhase === "error" ? "error" : "idle";
+  if (loadPhase === "downloading") return "downloading";
+  if (loadPhase === "initializing") return "initializing";
+  return "preparing";
+}
+
+function loadTitle(): string {
+  if (modelLoaded) return "Model ready";
+  if (loadPhase === "preparing") return "Preparing runtime";
+  if (loadPhase === "downloading") return "Downloading model assets";
+  if (loadPhase === "initializing") return "Loading model into WebGPU";
+  if (loadPhase === "error") return "Load failed";
+  return "Download model assets";
+}
+
+function loadDetail(progress: number): string {
+  if (modelLoaded) return `Ready in ${formatSeconds(elapsedLoadSeconds())}`;
+  if (loading && loadPhase === "preparing") {
+    return `Starting browser runtime | ${formatSeconds(elapsedPhaseSeconds())}`;
+  }
+  if (loading && loadPhase === "downloading") {
+    return `${progress.toFixed(1)}% | ${formatBytes(loadStats.loaded)} / ${formatBytes(loadStats.total)} | ${formatBytes(
+      loadStats.loaded / Math.max(elapsedLoadSeconds(), 0.1)
+    )}/s`;
+  }
+  if (loading && loadPhase === "initializing") {
+    return `Download complete | Initializing ${formatSeconds(elapsedPhaseSeconds())}`;
+  }
+  return "4.34 GB";
+}
+
 function webgpuStatus(): string {
   if (!("gpu" in navigator)) return "unavailable";
   return modelLoaded && wllama?.isSupportWebGPU() ? "ready" : "available";
@@ -132,16 +190,38 @@ function appendLog(message: string): void {
   el.scrollTop = el.scrollHeight;
 }
 
+function renderMessage(item: ChatEntry, index: number): string {
+  if (item.role === "user") {
+    return `<div class="message user">${escapeHtml(item.content)}</div>`;
+  }
+
+  const thinking = item.thinking?.trim() || "";
+  const shouldShowThinking = state.thinking === "collapsed" && thinking.length > 0;
+  const arrow = item.thinkingOpen ? "^" : "v";
+  const thinkingBlock = shouldShowThinking
+    ? `<div class="thinking-block">
+        <button class="thinking-toggle" type="button" data-thinking-index="${index}">
+          <span>Thinking...</span>
+          <span class="thinking-arrow">${arrow}</span>
+        </button>
+        ${
+          item.thinkingOpen
+            ? `<div class="thinking-content">${escapeHtml(thinking)}</div>`
+            : ""
+        }
+      </div>`
+    : "";
+  const answer = item.content.trim()
+    ? escapeHtml(item.content)
+    : `<span class="subtle">Waiting for response...</span>`;
+
+  return `<div class="message assistant">${thinkingBlock}<div class="answer-text">${answer}</div></div>`;
+}
+
 function render(): void {
   const progress = loadPercent();
-  const loadLabel = modelLoaded
-    ? "Model ready"
-    : loading
-      ? `${formatBytes(loadStats.loaded)} / ${formatBytes(loadStats.total)}`
-      : "Download model assets";
-  const loadSub = loading
-    ? `${progress.toFixed(1)}% | ${formatBytes(loadStats.loaded / Math.max(elapsedLoadSeconds(), 0.1))}/s | ${formatSeconds(elapsedLoadSeconds())}`
-    : "4.34 GB";
+  const progressClass = loadPhase === "initializing" ? "progress indeterminate" : "progress";
+  const barWidth = loadPhase === "preparing" && loading ? 8 : loadPhase === "initializing" ? 100 : progress;
 
   app.innerHTML = `
     <main class="app">
@@ -180,7 +260,7 @@ function render(): void {
       <section class="shell">
         <section class="panel chat-panel">
           <div class="status-strip">
-            <div class="metric"><span>Status</span><strong>${modelLoaded ? "ready" : loading ? "loading" : "idle"}</strong></div>
+            <div class="metric"><span>Status</span><strong>${statusLabel()}</strong></div>
             <div class="metric"><span>WebGPU</span><strong>${webgpuStatus()}</strong></div>
             <div class="metric"><span>Prompt</span><strong>${lastTimings ? `${lastTimings.prompt_per_second.toFixed(1)} tok/s` : "-"}</strong></div>
             <div class="metric"><span>Generate</span><strong>${lastTimings ? `${lastTimings.predicted_per_second.toFixed(1)} tok/s` : "-"}</strong></div>
@@ -190,7 +270,7 @@ function render(): void {
             ${
               chat.length
                 ? `<div class="message-list">${chat
-                    .map((item) => `<div class="message ${item.role}">${escapeHtml(item.content)}</div>`)
+                    .map((item, index) => renderMessage(item, index))
                     .join("")}</div>`
                 : `<div class="empty"><div><h2>Ask Gemma 4 locally</h2><p class="subtle">Download once, then chat from browser cache.</p></div></div>`
             }
@@ -216,11 +296,11 @@ function render(): void {
 
         <aside class="side">
           <section class="panel card">
-            <h2>${loadLabel}</h2>
-            <p class="subtle">${loadSub}</p>
+            <h2>${loadTitle()}</h2>
+            <p class="subtle">${loadDetail(progress)}</p>
             <div class="field">
-              <div class="progress" aria-label="Download progress">
-                <div class="bar" style="width: ${progress}%"></div>
+              <div class="${progressClass}" aria-label="Model loading progress">
+                <div class="bar" style="width: ${barWidth}%"></div>
               </div>
             </div>
             ${!loading && !modelLoaded ? `<div class="field"><button class="button primary" id="loadButton">Start download</button></div>` : ""}
@@ -248,6 +328,13 @@ function render(): void {
                 <input id="seed" type="number" step="1" value="${state.seed}" />
               </div>
             </div>
+            <div class="field">
+              <label for="thinking">Thinking</label>
+              <select id="thinking">
+                <option value="collapsed" ${state.thinking === "collapsed" ? "selected" : ""}>Show collapsed</option>
+                <option value="hidden" ${state.thinking === "hidden" ? "selected" : ""}>Hide</option>
+              </select>
+            </div>
           </section>
 
           <section class="panel card">
@@ -316,6 +403,7 @@ function syncInputs(): void {
   state.maxTokens = getNumberValue("maxTokens", state.maxTokens);
   state.temperature = getNumberValue("temperature", state.temperature);
   state.topP = getNumberValue("topP", state.topP);
+  state.thinking = getInputValue("thinking", state.thinking) === "hidden" ? "hidden" : "collapsed";
   state.seed = getNumberValue("seed", state.seed);
 }
 
@@ -369,7 +457,23 @@ function bindEvents(): void {
     render();
   });
 
+  document.querySelector<HTMLSelectElement>("#thinking")?.addEventListener("change", () => {
+    syncInputs();
+    render();
+  });
+
+  document.querySelectorAll<HTMLButtonElement>("[data-thinking-index]").forEach((button) => {
+    button.addEventListener("click", () => {
+      const index = Number(button.dataset.thinkingIndex);
+      const entry = chat[index];
+      if (!entry || entry.role !== "assistant") return;
+      entry.thinkingOpen = !entry.thinkingOpen;
+      render();
+    });
+  });
+
   document.querySelector<HTMLButtonElement>("#googleSingleButton")?.addEventListener("click", () => {
+    syncInputs();
     state.llmUrl = GOOGLE_SINGLE_GGUF;
     modelLoaded = false;
     render();
@@ -382,8 +486,10 @@ async function loadModel(): Promise<void> {
   syncInputs();
 
   loading = true;
-  loadStats = { loaded: 0, total: TOTAL_DOWNLOAD_BYTES, startedAt: performance.now() };
-  currentLog = "Creating Wllama runtime...";
+  const startedAt = performance.now();
+  loadStats = { loaded: 0, total: TOTAL_DOWNLOAD_BYTES, startedAt, phaseStartedAt: startedAt };
+  setLoadPhase("preparing");
+  currentLog = "Preparing browser runtime...";
   render();
 
   try {
@@ -401,7 +507,7 @@ async function loadModel(): Promise<void> {
       appendLog("WebGPU is not available. Wllama may fall back or fail depending on this browser.");
     }
 
-    appendLog(`Loading ${state.llmUrl}`);
+    appendLog(`Model source: ${state.llmUrl}`);
     await wllama.loadModelFromUrl(
       {
         url: state.llmUrl,
@@ -421,7 +527,21 @@ async function loadModel(): Promise<void> {
         progressCallback: ({ loaded, total }) => {
           loadStats.loaded = loaded;
           loadStats.total = total || loadStats.total || TOTAL_DOWNLOAD_BYTES;
-          currentLog = `Downloading model assets...\n${formatBytes(loadStats.loaded)} / ${formatBytes(loadStats.total)}`;
+          if (loadStats.total && loadStats.loaded >= loadStats.total) {
+            setLoadPhase("initializing");
+            currentLog = [
+              "Download complete.",
+              `Initializing WebGPU model for ${formatSeconds(elapsedPhaseSeconds())}`,
+              "This step loads weights and builds GPU resources.",
+            ].join("\n");
+          } else {
+            setLoadPhase("downloading");
+            currentLog = [
+              "Downloading model assets...",
+              `${formatBytes(loadStats.loaded)} / ${formatBytes(loadStats.total)}`,
+              `${formatBytes(loadStats.loaded / Math.max(elapsedLoadSeconds(), 0.1))}/s`,
+            ].join("\n");
+          }
           render();
         },
       }
@@ -429,6 +549,7 @@ async function loadModel(): Promise<void> {
 
     loadStats.doneAt = performance.now();
     modelLoaded = true;
+    setLoadPhase("ready");
     currentLog = [
       `Loaded in ${formatSeconds(elapsedLoadSeconds())}`,
       `libllama ${Wllama.getLibllamaVersion()}`,
@@ -436,6 +557,7 @@ async function loadModel(): Promise<void> {
       `modalities image=${safeSupport("image")} audio=${safeSupport("audio")}`,
     ].join("\n");
   } catch (error) {
+    setLoadPhase("error");
     currentLog = `Load failed:\n${errorToText(error)}`;
     modelLoaded = false;
     void wllama?.exit().catch(() => undefined);
@@ -493,6 +615,7 @@ async function sendMessage(): Promise<void> {
   abortController = new AbortController();
   lastTimings = undefined;
   const startedAt = performance.now();
+  const thinkParser: ThinkParseState = { inThinking: false, tagBuffer: "" };
   render();
 
   try {
@@ -500,8 +623,18 @@ async function sendMessage(): Promise<void> {
       role: "user",
       content,
     } as ChatCompletionMessage;
+    const thinkingInstruction =
+      state.thinking === "hidden"
+        ? ([
+            {
+              role: "system",
+              content: "Answer directly. Do not include thinking, reasoning traces, or <think> sections.",
+            },
+          ] as ChatCompletionMessage[])
+        : [];
     const request: ChatCompletionParams = {
       messages: [
+        ...thinkingInstruction,
         ...history,
         userTurn,
       ],
@@ -518,16 +651,22 @@ async function sendMessage(): Promise<void> {
       stream: true,
       abortSignal: abortController.signal,
       onData: (chunk: ChatCompletionChunk) => {
-        const delta = extractStreamText(chunk);
+        const delta = extractStreamParts(chunk, thinkParser);
         lastTimings = chunk.timings || lastTimings;
         const assistant = chat[assistantIndex];
-        if (assistant?.role === "assistant" && delta.text) {
-          assistant.content = delta.replace ? delta.text : assistant.content + delta.text;
+        if (assistant?.role === "assistant") {
+          if (delta.answer) {
+            assistant.content = delta.replaceAnswer ? delta.answer : assistant.content + delta.answer;
+          }
+          if (delta.thinking) {
+            assistant.thinking = delta.replaceThinking ? delta.thinking : `${assistant.thinking || ""}${delta.thinking}`;
+          }
         }
         const elapsed = (performance.now() - startedAt) / 1000;
         currentLog = [
           `Generating ${formatSeconds(elapsed)}`,
-          assistant?.content ? `Visible text ${assistant.content.length} chars` : "Waiting for text delta...",
+          assistant?.content ? `Answer ${assistant.content.length} chars` : "Waiting for answer text...",
+          assistant?.thinking ? `Thinking ${assistant.thinking.length} chars` : "",
           lastTimings ? `Prompt ${lastTimings.prompt_per_second.toFixed(1)} tok/s` : "",
           lastTimings ? `Output ${lastTimings.predicted_per_second.toFixed(1)} tok/s` : "",
         ]
@@ -537,6 +676,11 @@ async function sendMessage(): Promise<void> {
       },
     });
     const assistant = chat[assistantIndex];
+    const flushed = flushThinkParser(thinkParser);
+    if (assistant?.role === "assistant") {
+      if (flushed.answer) assistant.content += flushed.answer;
+      if (flushed.thinking) assistant.thinking = `${assistant.thinking || ""}${flushed.thinking}`;
+    }
     if (assistant?.role === "assistant" && !assistant.content.trim()) {
       currentLog = "Stream returned timings but no visible text. Fetching final response...";
       render();
@@ -545,7 +689,9 @@ async function sendMessage(): Promise<void> {
         stream: false,
         abortSignal: abortController.signal,
       });
-      assistant.content = extractFinalText(response);
+      const finalParts = extractFinalParts(response);
+      assistant.content = finalParts.answer;
+      assistant.thinking = finalParts.thinking || assistant.thinking;
     }
     const elapsed = (performance.now() - startedAt) / 1000;
     currentLog = formatDoneLog(elapsed, lastTimings);
@@ -595,7 +741,69 @@ function textFromValue(value: unknown): string {
   return "";
 }
 
-function extractStreamText(chunk: unknown): StreamText {
+function splitTaggedThinking(text: string, state: ThinkParseState): { answer: string; thinking: string } {
+  let answer = "";
+  let thinking = "";
+  const tags = ["<think>", "</think>", "<thinking>", "</thinking>"];
+
+  const pushText = (value: string) => {
+    if (state.inThinking) {
+      thinking += value;
+    } else {
+      answer += value;
+    }
+  };
+
+  for (const char of text) {
+    if (state.tagBuffer) {
+      state.tagBuffer += char;
+      const lower = state.tagBuffer.toLowerCase();
+      if (lower === "<think>" || lower === "<thinking>") {
+        state.inThinking = true;
+        state.tagBuffer = "";
+        continue;
+      }
+      if (lower === "</think>" || lower === "</thinking>") {
+        state.inThinking = false;
+        state.tagBuffer = "";
+        continue;
+      }
+      if (tags.some((tag) => tag.startsWith(lower))) {
+        continue;
+      }
+      pushText(state.tagBuffer);
+      state.tagBuffer = "";
+      continue;
+    }
+
+    if (char === "<") {
+      state.tagBuffer = char;
+      continue;
+    }
+    pushText(char);
+  }
+
+  return { answer, thinking };
+}
+
+function flushThinkParser(state: ThinkParseState): { answer: string; thinking: string } {
+  if (!state.tagBuffer) return { answer: "", thinking: "" };
+  const pending = state.tagBuffer;
+  state.tagBuffer = "";
+  return state.inThinking ? { answer: "", thinking: pending } : { answer: pending, thinking: "" };
+}
+
+function splitCompleteTaggedThinking(text: string): { answer: string; thinking: string } {
+  const parser: ThinkParseState = { inThinking: false, tagBuffer: "" };
+  const parts = splitTaggedThinking(text, parser);
+  const flushed = flushThinkParser(parser);
+  return {
+    answer: parts.answer + flushed.answer,
+    thinking: parts.thinking + flushed.thinking,
+  };
+}
+
+function extractStreamParts(chunk: unknown, state: ThinkParseState): StreamParts {
   const data = chunk as Record<string, unknown>;
   const choices = Array.isArray(data.choices) ? (data.choices as Array<Record<string, unknown>>) : [];
   const choice = choices[0] || {};
@@ -603,9 +811,16 @@ function extractStreamText(chunk: unknown): StreamText {
   const message = (choice.message && typeof choice.message === "object" ? choice.message : {}) as Record<string, unknown>;
   const token = (data.token && typeof data.token === "object" ? data.token : {}) as Record<string, unknown>;
 
+  const explicitThinking =
+    textFromValue(delta.reasoning_content) ||
+    textFromValue(delta.thinking) ||
+    textFromValue(message.reasoning_content) ||
+    textFromValue(message.thinking) ||
+    textFromValue(data.reasoning_content) ||
+    textFromValue(data.thinking);
+
   const appendText =
     textFromValue(delta.content) ||
-    textFromValue(delta.reasoning_content) ||
     textFromValue(delta.text) ||
     textFromValue(choice.text) ||
     textFromValue(data.content) ||
@@ -613,18 +828,27 @@ function extractStreamText(chunk: unknown): StreamText {
     textFromValue(data.text) ||
     textFromValue(token.text);
 
-  if (appendText) return { text: appendText, replace: false };
-
-  const replacementText =
-    textFromValue(message.content) ||
-    textFromValue(message.reasoning_content) ||
-    textFromValue(data.message);
+  const replacementText = textFromValue(message.content) || textFromValue(data.message);
+  const appendParts = splitTaggedThinking(appendText, state);
+  const replacementParts = replacementText ? splitCompleteTaggedThinking(replacementText) : { answer: "", thinking: "" };
 
-  return { text: replacementText, replace: Boolean(replacementText) };
+  return {
+    answer: appendParts.answer || replacementParts.answer,
+    thinking: explicitThinking || appendParts.thinking || replacementParts.thinking,
+    replaceAnswer: Boolean(replacementParts.answer),
+    replaceThinking: Boolean(explicitThinking || replacementParts.thinking),
+  };
 }
 
-function extractFinalText(response: ChatCompletionResponse): string {
-  return textFromValue(response.choices?.[0]?.message?.content);
+function extractFinalParts(response: ChatCompletionResponse): { answer: string; thinking: string } {
+  const message = response.choices?.[0]?.message as unknown as Record<string, unknown> | undefined;
+  const content = textFromValue(message?.content);
+  const explicitThinking = textFromValue(message?.reasoning_content) || textFromValue(message?.thinking);
+  const parsed = splitCompleteTaggedThinking(content);
+  return {
+    answer: parsed.answer,
+    thinking: explicitThinking || parsed.thinking,
+  };
 }
 
 render();

src/style.css

@@ -236,6 +236,46 @@ h1 {
   background: #22211d;
 }
 
+.answer-text {
+  white-space: pre-wrap;
+}
+
+.thinking-block {
+  margin-bottom: 10px;
+  border-bottom: 1px solid rgba(244, 240, 232, 0.08);
+  padding-bottom: 10px;
+}
+
+.thinking-toggle {
+  display: inline-flex;
+  min-height: 28px;
+  align-items: center;
+  gap: 7px;
+  border-radius: 7px;
+  padding: 0 8px;
+  background: #181815;
+  color: #c9c1b2;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.thinking-arrow {
+  color: #d7ff7a;
+  font-weight: 800;
+}
+
+.thinking-content {
+  margin-top: 8px;
+  max-height: 240px;
+  overflow: auto;
+  border-radius: 7px;
+  padding: 10px;
+  background: #141411;
+  color: #a7a093;
+  font-size: 12px;
+  white-space: pre-wrap;
+}
+
 .empty {
   display: grid;
   min-height: 340px;
@@ -369,6 +409,21 @@ select {
   transition: width 180ms ease;
 }
 
+.indeterminate .bar {
+  background: linear-gradient(90deg, rgba(215, 255, 122, 0.35), #d7ff7a, rgba(215, 255, 122, 0.35));
+  background-size: 200% 100%;
+  animation: load-sweep 1.1s linear infinite;
+}
+
+@keyframes load-sweep {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+
 .log {
   min-height: 106px;
   max-height: 190px;