@aibranch/llm-meta-widget 0.12.0 → 0.12.2

package/README.md

@@ -61,7 +61,7 @@ Option 3 if it does not.
 
 ```ruby
 # Gemfile
-gem "llm_meta_widget", "~> 0.12.0"
+gem "llm_meta_widget", "~> 0.12.2"
 ```
 
 ```bash

package/app/assets/javascripts/llm_meta_widget/llm-meta-widget.js

@@ -178,6 +178,8 @@ async function runChatLoop(opts) {
     // Called when a tool result is dropped to make room, so the panel can say
     // so rather than the context quietly thinning.
     onContextEvicted,
+    // Called when one oversized result is shortened, so the panel can say so.
+    onContextTruncated,
     // "hub" (default) talks to llm_meta_server; "ollama" talks straight to an
     // Ollama, with no server component of ours in between. The loop is the
     // same either way — only the call is swapped.
@@ -211,6 +213,7 @@ async function runChatLoop(opts) {
   const mergedLocalTools = Object.values(inlineByName);
   const rounds = [];
   const evicted = [];
+  const truncatedResults = [];
   const toolsTokens = estimateToolsTokens([].concat(
     singleOpts.localTools || [],
     remoteTools || [],
@@ -246,6 +249,15 @@ async function runChatLoop(opts) {
   for (let round = 0; round < maxRounds; round++) {
     if (signal?.aborted) throw new DOMException("aborted", "AbortError");
     onRoundStart?.(round);
+    const capped = truncateOversizedToolResults({
+      messages,
+      window: contextWindow,
+      truncated: truncatedResults
+    });
+    if (capped.messages !== messages) {
+      messages = capped.messages;
+      onContextTruncated?.(truncatedResults.slice());
+    }
     const room = evictOldToolResults({
       messages,
       window: contextWindow,
@@ -255,7 +267,7 @@ async function runChatLoop(opts) {
     });
     if (room.messages !== messages) {
       messages = room.messages;
-      onContextEvicted?.(evicted.slice());
+      onContextEvicted?.({ dropped: evicted.slice(), needed: room.needed, window: room.window });
     }
     const call = provider === "ollama" ? ollamaChatCall : singleLlmCall;
     const turnResult = await call({
@@ -589,17 +601,29 @@ function parseSseFrame(raw) {
 var STATIC_PRIMITIVES_META = "io.modelcontextprotocol/static-primitives";
 var PAGE_CARD_MEDIA_TYPE = "application/mcp-static-primitives+json";
 var RESOURCE_SHARE_OF_WINDOW = 0.0625;
+var RESOURCE_BYTES_PER_TOKEN = 4;
 function resourceBudgetBytes(window2, { floor = 8e3, cap = 64e3 } = {}) {
   if (!window2 || !Number.isFinite(window2)) return floor;
-  const share = Math.round(window2 * RESOURCE_SHARE_OF_WINDOW * CHARS_PER_TOKEN);
+  const share = Math.round(window2 * RESOURCE_SHARE_OF_WINDOW * RESOURCE_BYTES_PER_TOKEN);
   return Math.min(cap, Math.max(floor, share));
 }
-var CHARS_PER_TOKEN = 4;
+var PROSE_CHARS_PER_TOKEN = 3.5;
+var DENSE_CHARS_PER_TOKEN = 1.6;
+var CJK_CHARS_PER_TOKEN = 1;
 var MESSAGE_OVERHEAD_TOKENS = 4;
+var CJK_PATTERN = /[\u3000-\u30ff\u3400-\u4dbf\u4e00-\u9fff\uac00-\ud7af\uf900-\ufaff\uff00-\uffef]/g;
+var PROSE_PATTERN = /[A-Za-z \n\t]/g;
+function estimateTextTokens(text) {
+  const str = typeof text === "string" ? text : String(text ?? "");
+  const cjk = (str.match(CJK_PATTERN) || []).length;
+  const prose = (str.match(PROSE_PATTERN) || []).length;
+  const dense = str.length - cjk - prose;
+  return Math.ceil(cjk / CJK_CHARS_PER_TOKEN + prose / PROSE_CHARS_PER_TOKEN + dense / DENSE_CHARS_PER_TOKEN);
+}
 function estimateTokens(messages) {
   return (messages || []).reduce((sum, m) => {
     const content = typeof m?.content === "string" ? m.content : JSON.stringify(m?.content ?? "");
-    return sum + Math.ceil(content.length / CHARS_PER_TOKEN) + MESSAGE_OVERHEAD_TOKENS;
+    return sum + estimateTextTokens(content) + MESSAGE_OVERHEAD_TOKENS;
   }, 0);
 }
 function estimateToolsTokens(tools) {
@@ -608,12 +632,36 @@ function estimateToolsTokens(tools) {
     description: t?.description,
     schema: t?.input_schema || t?.inputSchema
   })).join("");
-  return Math.ceil(text.length / CHARS_PER_TOKEN);
+  return estimateTextTokens(text);
+}
+var MAX_TOOL_RESULT_SHARE = 0.4;
+function truncateOversizedToolResults({
+  messages,
+  window: window2,
+  share = MAX_TOOL_RESULT_SHARE,
+  truncated = []
+} = {}) {
+  if (!window2 || !Number.isFinite(window2)) return { messages, truncated };
+  const cap = Math.floor(window2 * share);
+  let out = null;
+  (messages || []).forEach((m, i) => {
+    if (m?.role !== "tool" || typeof m.content !== "string") return;
+    const tokens = estimateTextTokens(m.content);
+    if (tokens <= cap) return;
+    const keep = Math.max(1, Math.floor(m.content.length * cap / tokens));
+    out = out || messages.slice();
+    truncated.push({ name: m.name, fromTokens: tokens, toTokens: cap });
+    out[i] = Object.assign({}, m, {
+      content: m.content.slice(0, keep) + "\n\n[truncated: " + keep + " of " + m.content.length + " characters shown. One tool result may use at most " + Math.round(share * 100) + "% of the context window. Call the tool again with a narrower query to see more.]"
+    });
+  });
+  return { messages: out || messages, truncated };
 }
 function evictOldToolResults({ messages, window: window2, reserve = 0, dropped = [] }) {
   if (!window2 || !Number.isFinite(window2)) return { messages, dropped };
   const budget = window2 - reserve;
-  if (estimateTokens(messages) <= budget) return { messages, dropped };
+  const needed = estimateTokens(messages) + reserve;
+  if (estimateTokens(messages) <= budget) return { messages, dropped, needed, window: window2 };
   const out = messages.slice();
   for (let i = 0; i < out.length; i++) {
     if (estimateTokens(out) <= budget) break;
@@ -625,7 +673,7 @@ function evictOldToolResults({ messages, window: window2, reserve = 0, dropped =
       content: "[dropped to make room in the context window. Call the tool again if you still need it, with a narrower query.]"
     });
   }
-  return { messages: out, dropped };
+  return { messages: out, dropped, needed, window: window2 };
 }
 function modelWindowFrom(payload, modelId) {
   for (const family of payload && payload.llms || []) {
@@ -3940,19 +3988,15 @@ function boot(cfg) {
   var toggleBtn = document.getElementById("llm-meta-widget-toggle");
   var historyEl = root.querySelector(".lmw-messages");
   var SCROLL_PIN_SLACK = 40;
-  var followingOutput = true;
+  function thousands(n) {
+    return (Math.round(n / 1e3) * 1e3).toLocaleString("en-US");
+  }
   function atBottom() {
     return historyEl.scrollHeight - historyEl.scrollTop - historyEl.clientHeight <= SCROLL_PIN_SLACK;
   }
   function pinToBottom() {
     historyEl.scrollTop = historyEl.scrollHeight;
   }
-  function pinIfFollowing() {
-    if (followingOutput) pinToBottom();
-  }
-  historyEl.addEventListener("scroll", function() {
-    followingOutput = atBottom();
-  });
   var formEl = root.querySelector(".lmw-form");
   var inputEl = root.querySelector(".lmw-input");
   var clearBtn = root.querySelector(".lmw-clear");
@@ -4505,6 +4549,7 @@ function boot(cfg) {
   }
   var pendingTurnLabel = null;
   function appendTurn(role, text, turnLabel) {
+    var following = atBottom();
     var welcome = historyEl.querySelector(".lmw-welcome");
     if (welcome) welcome.remove();
     var div = document.createElement("div");
@@ -4531,7 +4576,7 @@ function boot(cfg) {
     div.appendChild(document.createTextNode(" "));
     div.appendChild(body);
     historyEl.appendChild(div);
-    pinIfFollowing();
+    if (role === "user" || following) pinToBottom();
     body.roleLabel = label;
     return body;
   }
@@ -4581,6 +4626,7 @@ function boot(cfg) {
     return liveChips;
   }
   function announceToolCall(toolCall) {
+    var following = atBottom();
     var row = chipRow();
     if (!row) return;
     var chip = document.createElement("span");
@@ -4589,7 +4635,7 @@ function boot(cfg) {
     chip.dataset.tool = toolCall.name;
     row.appendChild(chip);
     pendingChips.push(chip);
-    pinIfFollowing();
+    if (following) pinToBottom();
   }
   function resolveToolCall(outcome) {
     var idx = pendingChips.findIndex(function(c) {
@@ -4605,6 +4651,7 @@ function boot(cfg) {
   var currentThinkingBody = null;
   var activeAssistantBody = null;
   function ensureThinkingBlock() {
+    var following = atBottom();
     if (currentThinkingBody) return currentThinkingBody;
     var details = document.createElement("details");
     details.className = "message-thinking";
@@ -4629,20 +4676,33 @@ function boot(cfg) {
     } else {
       historyEl.appendChild(details);
     }
-    pinIfFollowing();
+    if (following) pinToBottom();
     currentThinkingBlock = details;
     currentThinkingBody = body;
     return body;
   }
   function collapseThinkingBlock() {
-    if (currentThinkingBlock) {
-      currentThinkingBlock.classList.remove("thinking-active");
-      currentThinkingBlock.open = false;
-      var summary = currentThinkingBlock.querySelector("summary");
-      if (summary) summary.textContent = "\u{1F914} thinking (finished)";
-    }
+    var block2 = currentThinkingBlock;
     currentThinkingBlock = null;
     currentThinkingBody = null;
+    if (!block2) return;
+    block2.classList.remove("thinking-active");
+    var summary = block2.querySelector("summary");
+    if (summary) summary.textContent = "\u{1F914} thinking (finished)";
+    var body = block2.querySelector(".message-thinking-content");
+    if (body) {
+      body.style.overflow = "visible";
+      body.style.maxHeight = "none";
+    }
+    if (typeof requestAnimationFrame !== "function") {
+      block2.open = false;
+      return;
+    }
+    requestAnimationFrame(function() {
+      requestAnimationFrame(function() {
+        block2.open = false;
+      });
+    });
   }
   function stateReaders() {
     var declared = window[STATE_GLOBAL] || {};
@@ -4746,7 +4806,6 @@ function boot(cfg) {
     var userText = inputEl.value.trim();
     if (!userText) return;
     inputEl.value = "";
-    followingOutput = true;
     appendTurn("user", userText, pendingTurnLabel);
     pendingTurnLabel = null;
     if (currentAbort) {
@@ -4786,10 +4845,18 @@ function boot(cfg) {
         contextWindow: modelWindow,
         provider: LLM_PROVIDER === "ollama" ? "ollama" : "hub",
         signal: currentAbort.signal,
-        onContextEvicted: function(dropped) {
-          var last = dropped[dropped.length - 1];
-          var name = last && last.name ? last.name : "tool";
-          appendTurn("system", "Dropped an earlier " + name + " result to make room in the model's context. Ask again if you need it.");
+        onContextTruncated: function(list2) {
+          var cut = list2[list2.length - 1] || {};
+          appendTurn("system", "Shortened an oversized " + (cut.name || "tool") + " result to fit the context: " + thousands(cut.fromTokens || 0) + " tokens, where one result may use at most " + thousands(cut.toTokens || 0) + ". Ask again with a narrower question for the complete result.");
+        },
+        onContextEvicted: function(info) {
+          var dropped = info.dropped || [];
+          var names = dropped.map(function(d) {
+            return d.name || "a tool";
+          });
+          var what = names.length === 1 ? "the earliest tool result (" + names[0] + ")" : "the " + names.length + " earliest tool results (" + names.join(", ") + ")";
+          var sizes = info.needed && info.window ? " About " + thousands(info.needed) + " tokens were needed and " + thousands(info.window) + " fit in " + MODEL + "'s context." : "";
+          appendTurn("system", "Dropped " + what + " to make room." + sizes + " Ask again, or narrow the question, for an answer based on complete tool results.");
         },
         onToolCall: function(toolCall) {
           announceToolCall(toolCall);
@@ -4809,19 +4876,21 @@ function boot(cfg) {
           collapseThinkingBlock();
         },
         onThinkingDelta: function(delta) {
+          var following = atBottom();
           var body = ensureThinkingBlock();
           body.appendChild(document.createTextNode(delta));
           body.scrollTop = body.scrollHeight;
-          pinIfFollowing();
+          if (following) pinToBottom();
         },
         onTextDelta: function(delta) {
+          var following = atBottom();
           markDone(assistantBody.roleLabel);
           collapseThinkingBlock();
           assistantMarkdown += delta;
           renderMarkdownInto(assistantBody, assistantMarkdown);
           liveTurn.content = assistantMarkdown;
           persistSoon();
-          pinIfFollowing();
+          if (following) pinToBottom();
         }
       });
       liveTurn.content = result.content;

package/app/assets/javascripts/llm_meta_widget/orchestrator.js

@@ -335,6 +335,8 @@ export async function runChatLoop(opts) {
     // Called when a tool result is dropped to make room, so the panel can say
     // so rather than the context quietly thinning.
     onContextEvicted,
+    // Called when one oversized result is shortened, so the panel can say so.
+    onContextTruncated,
     // "hub" (default) talks to llm_meta_server; "ollama" talks straight to an
     // Ollama, with no server component of ours in between. The loop is the
     // same either way — only the call is swapped.
@@ -377,6 +379,7 @@ export async function runChatLoop(opts) {
 
   const rounds = []
   const evicted = []
+  const truncatedResults = []
   // Fixed for the turn: the declared tool set does not change between rounds.
   const toolsTokens = estimateToolsTokens([].concat(
   	singleOpts.localTools || [], remoteTools || [], hostWideTools || []))
@@ -422,6 +425,16 @@ export async function runChatLoop(opts) {
     onRoundStart?.(round)
 
     // The loop is the same whoever answers; only the call differs.
+    // One oversized result is capped first: it frees hundreds of times more
+    // than dropping old results, and keeps what the model asked for.
+    const capped = truncateOversizedToolResults({
+    	messages, window: contextWindow, truncated: truncatedResults
+    });
+    if (capped.messages !== messages) {
+    	messages = capped.messages;
+    	onContextTruncated?.(truncatedResults.slice());
+    }
+
     // Make room before sending, rather than after being refused. Only old
     // tool results are given up; see evictOldToolResults.
     const room = evictOldToolResults({
@@ -431,7 +444,7 @@ export async function runChatLoop(opts) {
     });
     if (room.messages !== messages) {
     	messages = room.messages;
-    	onContextEvicted?.(evicted.slice());
+    	onContextEvicted?.({ dropped: evicted.slice(), needed: room.needed, window: room.window });
     }
 
     const call = provider === "ollama" ? ollamaChatCall : singleLlmCall
@@ -937,23 +950,53 @@ export const PAGE_CARD_MEDIA_TYPE = "application/mcp-static-primitives+json"
 // is already generous and a 1M-token model does not need 250 KB of it.
 export const RESOURCE_SHARE_OF_WINDOW = 0.0625
 
+// Bytes per token for SIZING that budget — not the estimator above, which
+// measures real text. Kept at four so the budget stays exactly what it was
+// (8 KB on a 32k model): how many tokens those bytes become depends on the
+// resource, and re-sizing budgets is not this constant's job.
+export const RESOURCE_BYTES_PER_TOKEN = 4
+
 export function resourceBudgetBytes(window, { floor = 8000, cap = 64_000 } = {}) {
   if (!window || !Number.isFinite(window)) return floor
-  const share = Math.round(window * RESOURCE_SHARE_OF_WINDOW * CHARS_PER_TOKEN)
+  const share = Math.round(window * RESOURCE_SHARE_OF_WINDOW * RESOURCE_BYTES_PER_TOKEN)
   return Math.min(cap, Math.max(floor, share))
 }
 
-// A rough token count, the same shape the hub's own estimator uses: characters
-// over four, plus a fixed cost per message. Deliberately approximate — it is
-// used to decide "drop the oldest tool result", never to fill the window
-// exactly, and it errs high so the decision is made early rather than late.
-export const CHARS_PER_TOKEN = 4
+// A rough token count, the same three classes the hub's estimator uses.
+//
+// One ratio cannot describe both prose and a tool result. Letters and spaces
+// tokenize at roughly 3.5 characters each; digits, punctuation and symbols go
+// much denser, and a JSON tool result is mostly those.
+//
+// Measured against a real refusal (2026-10-17): a 289,101-character request
+// the provider counted as 135,291 tokens was 33% letters, 16% digits and 45%
+// punctuation. At a flat four characters per token that is 72,275 — 53% of the
+// truth — so nothing was evicted and the provider refused the turn instead.
+// These classes put it at 106%: high, which is the safe direction here, since
+// underestimating means the turn dies while overestimating only gives up an
+// old tool result slightly early.
+export const PROSE_CHARS_PER_TOKEN = 3.5
+export const DENSE_CHARS_PER_TOKEN = 1.6
+export const CJK_CHARS_PER_TOKEN = 1
 export const MESSAGE_OVERHEAD_TOKENS = 4
 
+const CJK_PATTERN = /[\u3000-\u30ff\u3400-\u4dbf\u4e00-\u9fff\uac00-\ud7af\uf900-\ufaff\uff00-\uffef]/g
+const PROSE_PATTERN = /[A-Za-z \n\t]/g
+
+export function estimateTextTokens(text) {
+  const str = typeof text === "string" ? text : String(text ?? "")
+  const cjk = (str.match(CJK_PATTERN) || []).length
+  const prose = (str.match(PROSE_PATTERN) || []).length
+  const dense = str.length - cjk - prose
+  return Math.ceil(cjk / CJK_CHARS_PER_TOKEN +
+                   prose / PROSE_CHARS_PER_TOKEN +
+                   dense / DENSE_CHARS_PER_TOKEN)
+}
+
 export function estimateTokens(messages) {
   return (messages || []).reduce((sum, m) => {
     const content = typeof m?.content === "string" ? m.content : JSON.stringify(m?.content ?? "")
-    return sum + Math.ceil(content.length / CHARS_PER_TOKEN) + MESSAGE_OVERHEAD_TOKENS
+    return sum + estimateTextTokens(content) + MESSAGE_OVERHEAD_TOKENS
   }, 0)
 }
 
@@ -969,7 +1012,57 @@ export function estimateToolsTokens(tools) {
   const text = (tools || []).map((t) => JSON.stringify({
     name: t?.name, description: t?.description, schema: t?.input_schema || t?.inputSchema
   })).join("")
-  return Math.ceil(text.length / CHARS_PER_TOKEN)
+  // Counted with the same classes: a schema is JSON, which is the dense case.
+  return estimateTextTokens(text)
+}
+
+// A single tool result may use at most this share of the window.
+//
+// Measured over 179 real tool results (2026-10-17): the median is 2.1% of the
+// window and the 90th percentile 20%, but one `togovar_search_variant` result
+// came to 94% — 120,667 tokens — and alone could not coexist with a
+// conversation. All six over-budget requests in that sample were caused by one
+// oversized result, so capping it clears every one of them while touching only
+// 4.5% of results at all.
+//
+// 40% keeps a useful prefix of even the worst result (42% of it) and still
+// leaves most of the window for the conversation, the schemas and the answer.
+export const MAX_TOOL_RESULT_SHARE = 0.4
+
+// Shortens any single tool result that exceeds that share.
+//
+// This runs BEFORE eviction, because it is strictly the better move: on the
+// audited turn it frees ~69,000 tokens from one result, where dropping the
+// oldest results freed 160 and lost two results the model had asked for. The
+// model is told what happened, in the result itself, so it can narrow its
+// query instead of assuming it received everything.
+export function truncateOversizedToolResults({ messages, window,
+                                               share = MAX_TOOL_RESULT_SHARE,
+                                               truncated = [] } = {}) {
+  if (!window || !Number.isFinite(window)) return { messages, truncated }
+
+  const cap = Math.floor(window * share)
+  let out = null
+
+  ;(messages || []).forEach((m, i) => {
+    if (m?.role !== "tool" || typeof m.content !== "string") return
+    const tokens = estimateTextTokens(m.content)
+    if (tokens <= cap) return
+
+    // Scale the cut by the measured ratio rather than a fixed chars-per-token,
+    // so a dense result is cut by what it actually costs.
+    const keep = Math.max(1, Math.floor(m.content.length * cap / tokens))
+    out = out || messages.slice()
+    truncated.push({ name: m.name, fromTokens: tokens, toTokens: cap })
+    out[i] = Object.assign({}, m, {
+      content: m.content.slice(0, keep) +
+        "\n\n[truncated: " + keep + " of " + m.content.length + " characters shown. " +
+        "One tool result may use at most " + Math.round(share * 100) +
+        "% of the context window. Call the tool again with a narrower query to see more.]"
+    })
+  })
+
+  return { messages: out || messages, truncated }
 }
 
 // Makes room for the next round by dropping the OLDEST tool results, which is
@@ -990,7 +1083,12 @@ export function evictOldToolResults({ messages, window, reserve = 0, dropped = [
   if (!window || !Number.isFinite(window)) return { messages, dropped }
 
   const budget = window - reserve
-  if (estimateTokens(messages) <= budget) return { messages, dropped }
+  // What the whole turn would have needed, against what the model holds. The
+  // panel shows both, because "an old result was dropped" on its own tells a
+  // reader nothing about whether to retry, shorten the question, or change
+  // model.
+  const needed = estimateTokens(messages) + reserve
+  if (estimateTokens(messages) <= budget) return { messages, dropped, needed, window }
 
   const out = messages.slice()
   for (let i = 0; i < out.length; i++) {
@@ -1005,7 +1103,7 @@ export function evictOldToolResults({ messages, window, reserve = 0, dropped = [
                "if you still need it, with a narrower query.]"
     })
   }
-  return { messages: out, dropped }
+  return { messages: out, dropped, needed, window }
 }
 
 export function modelWindowFrom(payload, modelId) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aibranch/llm-meta-widget",
-  "version": "0.12.0",
+  "version": "0.12.2",
   "//version": "Must stay in step with lib/llm_meta_widget/version.rb. Two independently versioned copies of the same client is the drift docs/custom-element-distribution.md warns about: bump both, release both.",
   "description": "Embeddable browser chat widget: a custom element that discovers tools at page, origin and hub scope and dispatches each tool call to the right one. Two lines of HTML on any host, Rails or not.",
   "keywords": [