Show Ollama chat processing status

dashboard/dist/index.js

@@ -38,6 +38,11 @@
     if (!value) return "Unknown";
     try { return new Date(value * 1000 || value).toLocaleString(); } catch (_) { return value; }
   }
+  function fmtElapsed(seconds) {
+    var total = Math.max(0, Number(seconds) || 0);
+    if (total < 60) return total + "s";
+    return Math.floor(total / 60) + "m " + String(total % 60).padStart(2, "0") + "s";
+  }
   function Badge(props) { return h("span", { className: "ollama-badge " + (props.tone || "") }, props.children); }
   function Button(props) {
     var buttonProps = Object.assign({}, props);
@@ -131,6 +136,17 @@
     );
   }
 
+  function ThinkingStatus(props) {
+    return h("div", { className: "ollama-thinking-status", role: "status", "aria-live": "polite" },
+      h("div", { className: "ollama-thinking-spinner", "aria-hidden": "true" }, h("span", null), h("span", null), h("span", null)),
+      h("div", { className: "ollama-thinking-copy" },
+        h("strong", null, "Ollama is thinking"),
+        h("span", null, props.stage),
+        h("small", null, "Elapsed ", fmtElapsed(props.elapsed), " · RAM telemetry is updating live")
+      )
+    );
+  }
+
   function readFileAsDataURL(file) {
     return new Promise(function (resolve, reject) { var reader = new FileReader(); reader.onload = function () { resolve({ name: file.name, mime_type: file.type || "application/octet-stream", data_url: reader.result }); }; reader.onerror = reject; reader.readAsDataURL(file); });
   }
@@ -147,9 +163,18 @@
     var samplesState = React.useState([]), samples = samplesState[0], setSamples = samplesState[1];
     var busyState = React.useState(""), busy = busyState[0], setBusy = busyState[1];
     var noticeState = React.useState(null), notice = noticeState[0], setNotice = noticeState[1];
+    var thinkingState = React.useState(null), thinking = thinkingState[0], setThinking = thinkingState[1];
+    var thinkingElapsedState = React.useState(0), thinkingElapsed = thinkingElapsedState[0], setThinkingElapsed = thinkingElapsedState[1];
 
     React.useEffect(function () { if (!model && models[0]) setModel(models[0].name); }, [models, model]);
     React.useEffect(function () { saveChat(model, history); }, [model, history]);
+    React.useEffect(function () {
+      if (!thinking) { setThinkingElapsed(0); return; }
+      function tick() { setThinkingElapsed(Math.floor((Date.now() - thinking.startedAt) / 1000)); }
+      tick();
+      var timer = setInterval(tick, 1000);
+      return function () { clearInterval(timer); };
+    }, [thinking]);
     function clearChat() {
       setHistory([]);
       try { window.localStorage.removeItem(CHAT_STORAGE_KEY); } catch (_) {}
@@ -168,12 +193,13 @@
     function send() {
       if (busy === "send" || !model || (!message.trim() && !attachments.length)) return;
       var outgoing = { role: "user", content: message.trim() || "[Attachments]" }, body = { model: model, message: message, history: history, attachments: attachments };
-      setHistory(function (old) { return old.concat([outgoing]); }); setMessage(""); setBusy("send"); setNotice(null);
-      fetchJSON(API + "/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) }).then(function (result) { var answer = result.message && result.message.content ? result.message.content : "(No response text returned.)"; setHistory(function (old) { return old.concat([{ role: "assistant", content: answer }]); }); setAttachments([]); setRuntime(result.runtime || runtime); setNotice({ ok: "Response complete. Live placement is shown below." }); pollRuntime(); }).catch(function (err) { setNotice({ error: err.message || String(err) }); }).finally(function () { setBusy(""); });
+      setHistory(function (old) { return old.concat([outgoing]); }); setMessage(""); setBusy("send"); setThinking({ startedAt: Date.now(), stage: attachments.length ? "Preparing attachments and sending request to Ollama" : "Sending request to Ollama" }); setNotice(null);
+      fetchJSON(API + "/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) }).then(function (result) { var answer = result.message && result.message.content ? result.message.content : "(No response text returned.)"; setHistory(function (old) { return old.concat([{ role: "assistant", content: answer }]); }); setAttachments([]); setRuntime(result.runtime || runtime); setNotice({ ok: "Response complete. Live placement is shown below." }); pollRuntime(); }).catch(function (err) { setNotice({ error: err.message || String(err) }); }).finally(function () { setThinking(null); setBusy(""); });
     }
     return h("section", { className: "ollama-chat" },
       h("div", { className: "ollama-chat-header" }, h("div", null, h("div", { className: "ollama-eyebrow" }, "LOCAL OLLAMA CHAT"), h("h2", null, "Chat with your selected model"), h("p", null, "Images are sent as Ollama vision inputs; PDFs and web pages are extracted as untrusted document text.")), h("div", { className: "ollama-chat-model" }, h("label", null, "Model", h("select", { value: model, onChange: function (event) { setModel(event.target.value); } }, models.map(function (item) { return h("option", { key: item.name, value: item.name }, item.name + (item.loaded ? " · loaded" : "")); }))), h(Button, { disabled: !model || busy === "load", onClick: loadModel }, busy === "load" ? "Loading…" : "Load model"), h(Button, { className: "secondary", disabled: !history.length || busy === "send", onClick: clearChat }, "Clear chat"))),
       notice && h("div", { className: "ollama-notice " + (notice.error ? "error" : "ok") }, notice.error || notice.ok),
+      thinking && h(ThinkingStatus, { stage: thinkingElapsed < 1 ? thinking.stage : "Ollama is generating the response", elapsed: thinkingElapsed }),
       h(RuntimePanel, { runtime: runtime, samples: samples }),
       h("div", { className: "ollama-chat-layout" },
         h("div", { className: "ollama-conversation" }, history.length ? history.map(function (item, index) { return h("div", { className: "ollama-message " + item.role, key: index }, h("small", null, item.role === "assistant" ? "Ollama" : "You"), h("div", null, item.content)); }) : h(Empty, null, "Start a conversation. The selected model will be loaded into Ollama memory when you load it or send the first message.")),