Visually indicate messages truncated by context

llamafile/server/www/chatbot.css

@@ -675,3 +675,8 @@ ul li:first-child {
   width: 0;
   transition: width 0.2s ease-out;
 }
+
+.ooc {
+  vertical-align: middle;
+  margin-left: 0.2rem;
+}

llamafile/server/www/chatbot.js

@@ -132,6 +132,7 @@ async function handleChatStream(response) {
           try {
             const parsed = JSON.parse(data);
             const content = parsed.choices[0]?.delta?.content || "";
+            const finishReason = parsed.choices[0]?.finish_reason;
 
             // handle prefill progress
             if (parsed.x_prefill_progress !== undefined) {
@@ -154,6 +155,18 @@ async function handleChatStream(response) {
               high.feed(content);
               scrollToBottom();
             }
+
+            // we don't supply max_tokens, so "length" can
+            // only mean that we ran out of context window
+            if (finishReason === "length" && hdom) {
+              let img = hdom.push("IMG", "ooc");
+              img.src = "ooc.svg";
+              img.alt = "🚫";
+              img.title = "Message truncated due to running out of context window. Consider tuning --ctx-size and/or --reserve-tokens";
+              img.width = 16;
+              img.height = 16;
+              hdom.pop();
+            }
           } catch (e) {
             console.error("Error parsing JSON:", e);
           }