llm_meta_widget 0.2.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f32625e105ab751f473e79517d113c8b84465e676cddaab0f3db861c8f3e563e
-  data.tar.gz: 249d09f198b93e1b8382b2f5ef719736b260fc4c0c2f53d77e68c203b8e236b2
+  metadata.gz: 20aa5babd648e80015577ece5c815b37f6fe5e06d6136c91647f49831016833b
+  data.tar.gz: 8dfc055787110255fbf32368bc3f29cf11b3be178477dac9dadf08243a48d096
 SHA512:
-  metadata.gz: 841f81296bed31dbe0ebd7c67253b08990be954a0e5b6939f0563c3d97cb525b8826654149350dbae4afd74ce5b61750058f289c9df25ed4fca5b577783db72b
-  data.tar.gz: ced44aaf75dc424014f878360a4f769247cda1856abb7ffde7e3d66e829e8ae953e1c5b0ba21aea6521abab19b10ac821631e490d9ca47cba7876ea41b5ef8d1
+  metadata.gz: 2545397e740fefb805c8b8b3f9c90ca78814d71b2138f91a35afd38e1499f9bace74428faaf9160cbda4d9a5b51421a81f16f51df82c7ce88389d07acb97293d
+  data.tar.gz: a05e51a8b8e94a0153d5c7612901cba9ff2f31beb3142e656852cfa43c87b65ecc513d42c2a6a7a9b2a7ef6b0be3f240ec067bd468afd4b320684089cddfff3b

data/Rakefile

@@ -1,6 +1,9 @@
 # `rake build` / `rake release`, used by .github/workflows/gem_release.yml.
 # The widget has no Ruby test suite of its own: its logic is the browser
-# orchestrator, tested with `node --test` (see `rake test_js`).
+# orchestrator, tested with `node --test` (see `rake test_js`) and linted
+# with eslint (`rake lint_js`). The lint covers the panel's script too, by
+# extracting it from the ERB — three bugs reached a browser through that gap
+# before it existed: an undefined variable, a stale import, a redeclared one.
 require "bundler/gem_tasks"
 
 desc "Run the orchestrator's JavaScript tests"
@@ -8,4 +11,10 @@ task :test_js do
   sh "node --test app/assets/javascripts/llm_meta_widget/orchestrator.test.mjs"
 end
 
-task default: :test_js
+desc "Lint the widget's JavaScript, including the panel script inside the ERB"
+task :lint_js do
+  sh "npm install --silent" unless Dir.exist?("node_modules")
+  sh "npm run lint"
+end
+
+task default: [ :lint_js, :test_js ]

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

@@ -446,8 +446,22 @@ export async function runChatLoop(opts) {
     const localOut = await dispatchLocalToolCalls(localCalls, aiActions)
     allDispatched.push(...localOut.dispatched)
 
-    // Class 2: host-wide — direct MCP JSON-RPC POST to the host's own endpoint
+    // A page action's outcome goes back to the model like any other tool
+    // result. It used to be dropped, on the grounds that a write to the page
+    // has nothing to report — but a turn whose only calls were page actions
+    // then ended the loop, so any task that writes to the page and THEN needs
+    // a tool ("select these dictionaries, now annotate") was cut off after
+    // the write. It also means a failed action is something the model can
+    // see and correct, instead of a red mark only the user notices.
     const roundTripResults = []
+    for (const { toolCall, error } of localOut.dispatched) {
+      roundTripResults.push({
+        tc: toolCall,
+        result: error ? { error: String(error.message || error) } : { ok: true, applied: toolCall.name }
+      })
+    }
+
+    // Class 2: host-wide — direct MCP JSON-RPC POST to the host's own endpoint
     for (const tc of hostWideCalls) {
       const tool = hostWideByName[tc.name]
       const args = coerceArguments(tc.arguments)
@@ -490,9 +504,10 @@ export async function runChatLoop(opts) {
       toolCalls: turnResult.toolCalls
     })
 
-    // Terminate when there's nothing to feed back. Locals (Class 3) are
-    // fire-and-forget; unknowns can't be handled; only Class 2 + Class 1
-    // execution produces tool results the LLM should see.
+    // Terminate when there's nothing to feed back: a turn with no tool calls
+    // at all, or one whose only calls were unknown. Anything that executed —
+    // page action, host tool or proxied tool — produces a result the model
+    // sees, and gets another round to act on.
     if (roundTripResults.length === 0) {
       return {
         content: turnResult.content,
@@ -780,38 +795,50 @@ function parseSseFrame(raw) {
 // ---- static-primitives extension ---------------------------------------
 //
 // Prototype of `io.modelcontextprotocol/static-primitives` (the SEP-2127
-// follow-on): two optional fields a server may declare on a resources/list
-// entry. `sizeBytes` is the byte length of the payload resources/read would
-// return, so a client can decide whether to attach it BEFORE fetching it.
-// `attachmentHint` says how often attaching is worth it.
+// follow-on). Three optional fields a server may declare on a resources/list
+// entry:
+//
+//   sizeBytes  - byte length of the payload resources/read would return, so a
+//                client can decide whether to attach it BEFORE fetching it.
+//   volatility - "stable" (content fixed) or "volatile" (varies between
+//                turns, so a client re-reads it each turn).
+//   autoAttach - may a client attach this without the user asking for it?
 //
-// Both are optional, and a server that declares neither must behave exactly
-// as it did before the extension existed: fetch, trim to budget, attach once.
+// volatility and autoAttach are separate on purpose. Whether content changes
+// says nothing about whether it may be attached unasked, and the client needs
+// autoAttach as a boolean anyway, because its own byte budget can withhold a
+// resource the server was happy to hand over.
+//
+// All three are optional, and a server declaring none must behave exactly as
+// it did before the extension existed: fetch once, trim to budget, attach on
+// the first turn only.
 export const STATIC_PRIMITIVES_META = "io.modelcontextprotocol/static-primitives"
 
-const ATTACHMENT_HINTS = [ "once", "each-turn", "on-demand" ]
+const VOLATILITIES = [ "stable", "volatile" ]
 
 export function resourceHints(entry) {
   const meta = (entry && entry._meta && entry._meta[STATIC_PRIMITIVES_META]) || {}
-  const hint = meta.attachmentHint
   return {
     // A non-numeric or absent size means "unknown", never 0 — 0 would read
     // as a free resource and sail through every budget check.
     sizeBytes: typeof meta.sizeBytes === "number" && isFinite(meta.sizeBytes) ? meta.sizeBytes : null,
-    attachmentHint: ATTACHMENT_HINTS.indexOf(hint) === -1 ? "once" : hint
+    volatility: VOLATILITIES.indexOf(meta.volatility) === -1 ? "stable" : meta.volatility,
+    autoAttach: typeof meta.autoAttach === "boolean" ? meta.autoAttach : true
   }
 }
 
 // The pre-flight decision, made from the resources/list entry alone.
 // `fetch: false` means the bytes never cross the wire at all.
 export function planResourceAttachment(entry, budgetBytes) {
-  const { sizeBytes, attachmentHint } = resourceHints(entry)
-  const base = { sizeBytes, attachmentHint, uri: entry && entry.uri }
+  const { sizeBytes, volatility, autoAttach } = resourceHints(entry)
+  const base = { sizeBytes, volatility, uri: entry && entry.uri }
 
-  if (attachmentHint === "on-demand") {
-    return { ...base, fetch: false, autoAttach: false, reason: "on-demand" }
+  if (!autoAttach) {
+    return { ...base, fetch: false, autoAttach: false, reason: "not-auto-attach" }
   }
   if (sizeBytes !== null && sizeBytes > budgetBytes) {
+    // The client's budget overrides the server's willingness — which is why
+    // autoAttach has to be a boolean here rather than a restatement of a hint.
     return { ...base, fetch: false, autoAttach: false, reason: "over-budget" }
   }
   return {
@@ -824,24 +851,6 @@ export function planResourceAttachment(entry, budgetBytes) {
   }
 }
 
-// Per-turn gate. Replaces a single `sent` boolean, which silently assumed
-// every resource was "once" and would have re-sent nothing for a resource
-// whose content actually varies between turns.
-export function createResourceAttacher(plan) {
-  let attachedOnce = false
-  return {
-    // Returns whether to attach on THIS turn, and records the answer.
-    take() {
-      if (!plan || !plan.autoAttach) return false
-      if (plan.attachmentHint === "each-turn") return true
-      if (attachedOnce) return false
-      attachedOnce = true
-      return true
-    },
-    get attachmentHint() { return plan ? plan.attachmentHint : null }
-  }
-}
-
 // Safety net for a server that declares no size: shrink an oversized
 // catalog to its names rather than dropping it, and hard-truncate anything
 // that is not a recognised catalog shape.
@@ -858,38 +867,77 @@ export function trimResourceText(text, maxBytes) {
   return text.slice(0, maxBytes) + "\n…truncated"
 }
 
-// The whole discovery sequence for one endpoint's reference resource, kept
-// here rather than in the panel so the decision AND the call site are
-// testable together: a gate that nothing consults is the failure mode this
-// replaces. `list` and `read` are injected so a test can assert that an
-// over-budget resource is never read.
+// Read one resource and shape it for the system prompt. The trim is applied
+// on every read, not just the first: a declared size can go stale, and a
+// volatile resource is a fresh gamble each turn.
+async function readResourceContext({ endpoint, uri, name, read, budgetBytes }) {
+  try {
+    const result = await read({ endpoint, uri })
+    const entry = ((result && result.contents) || [])[0]
+    if (!entry || !entry.text) return null
+    return { uri, name: name || uri, text: trimResourceText(entry.text, budgetBytes) }
+  } catch (e) {
+    // Optional context — a failed read must never block the widget.
+    return null
+  }
+}
+
+// The discovery sequence for one endpoint's reference resource, kept here
+// rather than in the panel so the decision AND the call site are testable
+// together: a gate nothing consults is exactly the bug this shape prevents.
+//
+// A volatile resource is NOT read here. Its content is only meaningful for
+// the turn it is attached to, so reading it at boot would buy a copy that is
+// already suspect by the time anyone sends a message.
 export async function loadHostResource({ endpoint, budgetBytes, list, read, onSkip }) {
   const resources = await list({ endpoint })
   const candidate = (resources || []).filter((r) => (r.mimeType || "") === "application/json")[0]
   if (!candidate) return null
 
   const plan = planResourceAttachment(candidate, budgetBytes)
+  plan.name = candidate.name || candidate.uri
+  // Carried so a volatile re-read knows where to go: discovery happens once
+  // at boot, but the fetch it authorises happens on every later turn.
+  plan.endpoint = endpoint
   if (!plan.fetch) {
     if (onSkip) onSkip(plan)
     return { plan, context: null }
   }
+  if (plan.volatility === "volatile") return { plan, context: null }
 
-  try {
-    const result = await read({ endpoint, uri: candidate.uri })
-    const entry = ((result && result.contents) || [])[0]
-    if (!entry || !entry.text) return { plan, context: null }
-    return {
-      plan,
-      context: {
-        uri: candidate.uri,
-        name: candidate.name || candidate.uri,
-        text: trimResourceText(entry.text, budgetBytes)
-      }
-    }
-  } catch (e) {
-    // Optional context — a failed read must never block the widget.
-    return { plan, context: null }
+  const context = await readResourceContext({
+    endpoint, uri: candidate.uri, name: plan.name, read, budgetBytes
+  })
+  return { plan, context }
+}
+
+export function resourceContextLines(context) {
+  if (!context) return []
+  return [ "", "Reference data — " + context.name + " (" + context.uri + "):", context.text ]
+}
+
+// What to attach on THIS turn.
+//
+// `volatility` governs RE-FETCHING, not re-inclusion: a stable resource is
+// read once and then re-used, but it stays in every turn's system prompt for
+// as long as the conversation lasts. Showing it only on the first turn put
+// the reference data in the one turn that could not use it — the model then
+// spent several tool calls rediscovering what it had already been given,
+// which costs more tokens than simply keeping it.
+//
+// Whether a resource is affordable at all is decided once, from sizeBytes,
+// before it is ever fetched.
+export async function resourceLinesForTurn({ plan, cached, endpoint, read, budgetBytes }) {
+  if (!plan || !plan.autoAttach) return { lines: [], cached }
+
+  if (plan.volatility === "volatile") {
+    const fresh = await readResourceContext({
+      endpoint, uri: plan.uri, name: plan.name, read, budgetBytes
+    })
+    return fresh ? { lines: resourceContextLines(fresh), cached: fresh } : { lines: [], cached }
   }
+
+  return { lines: resourceContextLines(cached), cached }
 }
 
 // ---- prompt templates ---------------------------------------------------
@@ -930,6 +978,16 @@ export function resolvePromptArguments(prompt, state) {
   return { args, missing }
 }
 
+// What a template will take from the page, and what it will have to ask for.
+// Shown to a first-time visitor so the offer is concrete rather than a bare
+// verb: they can see that the text box is empty before they click.
+export function promptArgumentSummary(prompt, state) {
+  return ((prompt && prompt.arguments) || []).map((arg) => {
+    const value = promptArgFromState(arg.name, state)
+    return { name: arg.name, value, filled: value.length > 0, required: !!arg.required }
+  })
+}
+
 export function promptButtonProps(prompt) {
   return {
     label: prompt.title || prompt.name,
@@ -937,9 +995,3 @@ export function promptButtonProps(prompt) {
   }
 }
 
-// The per-turn attach decision AND its formatting, so the two cannot drift
-// apart: asking whether to attach is what consumes the turn.
-export function nextResourceContextLines(context, attacher) {
-  if (!context || !attacher || !attacher.take()) return []
-  return [ "", "Reference data — " + context.name + " (" + context.uri + "):", context.text ]
-}

data/app/assets/stylesheets/llm_meta_widget/conversation.css

@@ -181,3 +181,51 @@
 	max-height: 10em;
 	overflow-y: auto;
 }
+
+/* ---- "working" signals, ported from llm_meta_chat's chats.css ------------
+ *
+ * The wait is often long on local models — a tool round re-processes the
+ * whole prompt plus the tool results before the first token — so a still
+ * label reads as a hang. Same class names as the chat app, so the two
+ * surfaces behave identically. */
+.message-role .role-spinner {
+  display: inline-block;
+  animation: role-working-spin 1.8s linear infinite;
+  transform-origin: 50% 50%;
+}
+
+@keyframes role-working-spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+/* Staggered three-dot indicator on the reasoning summary while thinking is
+ * still streaming. Hidden unless .thinking-active is present. */
+.thinking-dots {
+  display: none;
+  margin-left: 0.35em;
+  letter-spacing: 0.15em;
+  font-weight: bold;
+}
+
+.message-thinking.thinking-active .thinking-dots { display: inline-block; }
+
+.message-thinking.thinking-active .thinking-dots span {
+  display: inline-block;
+  opacity: 0.25;
+  animation: thinking-dot 1.4s ease-in-out infinite;
+}
+
+.message-thinking.thinking-active .thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
+.message-thinking.thinking-active .thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes thinking-dot {
+  0%, 60%, 100% { opacity: 0.25; }
+  30%           { opacity: 1; }
+}
+
+/* Respect a reader's motion preference: keep the label, drop the movement. */
+@media (prefers-reduced-motion: reduce) {
+  .message-role .role-spinner,
+  .message-thinking.thinking-active .thinking-dots span { animation: none; }
+}

data/app/helpers/llm_meta_widget/widget_helper.rb

@@ -35,7 +35,11 @@ module LlmMetaWidget
       # anon" (all Ollama models / all public_to_anonymous MCP servers).
       # Pass arrays to curate.
       models:                  nil,   # e.g. ["qwen3-6-35b-fast", "qwen3-6-35b-no-think"]
-      hub_tools:               nil    # e.g. ["togomcp", "pubdictionaries"] — MCP server names
+      hub_tools:               nil,   # e.g. ["togomcp", "pubdictionaries"] — MCP server names
+      # First thing a visitor sees when the panel opens, above the offered
+      # prompt templates. nil → a generic line. A blank panel tells a
+      # first-time visitor nothing about what the assistant can do for them.
+      greeting:                nil
     }.freeze
 
     def llm_meta_widget(base_url:, model:, **overrides)

data/app/views/llm_meta_widget/_chat_panel.html.erb

@@ -268,6 +268,59 @@
 		border-radius: 8px;
 		padding: 8px;
 	}
+	#llm-meta-widget-chat .message-content details > summary {
+		cursor: pointer;
+		font-weight: 600;
+	}
+	#llm-meta-widget-chat .lmw-sent-text {
+		margin-top: 6px;
+		font-size: 12px;
+		opacity: 0.8;
+		white-space: pre-wrap;
+	}
+
+	/* Opening state: greeting + the offers themselves. Shown until the first
+	 * real turn, and again after Clear. */
+	#llm-meta-widget-chat .lmw-welcome { padding: 4px 2px 2px; }
+	#llm-meta-widget-chat .lmw-welcome-hello {
+		margin: 0 0 12px;
+		font-size: 14px;
+		line-height: 1.5;
+		color: #374151;
+	}
+	#llm-meta-widget-chat .lmw-welcome-card {
+		background-color: #f9fafb;
+		border: 1px solid #e5e7eb;
+		border-radius: 8px;
+		padding: 10px 12px;
+		margin-bottom: 8px;
+	}
+	#llm-meta-widget-chat .lmw-welcome-start {
+		background-color: #eff6ff;
+		color: #1d4ed8;
+		border: 1px solid #bfdbfe;
+		border-radius: 999px;
+		padding: 4px 12px;
+		font-size: 13px;
+		font-family: inherit;
+		cursor: pointer;
+	}
+	#llm-meta-widget-chat .lmw-welcome-start:hover { background-color: #dbeafe; }
+	#llm-meta-widget-chat .lmw-welcome-why {
+		margin: 8px 0 0;
+		font-size: 13px;
+		line-height: 1.45;
+		color: #4b5563;
+	}
+	#llm-meta-widget-chat .lmw-welcome-slots {
+		margin: 8px 0 0;
+		padding-left: 16px;
+		font-size: 12px;
+		color: #6b7280;
+	}
+	#llm-meta-widget-chat .lmw-welcome-slots li { margin-bottom: 2px; }
+	#llm-meta-widget-chat .lmw-welcome-slots li.filled { color: #047857; }
+
 	/* Server-offered prompt templates. The row is display:none in markup and
 	 * gets its display back only when a prompt actually exists, so the inline
 	 * style and this rule have to agree on "flex". */
@@ -398,8 +451,8 @@
 <script type="module">
 	import { runChatLoop, fetchMcpManifest, listMcpPrompts, getMcpPrompt,
 	         listMcpResources, readMcpResource, promptMessagesToText,
-	         loadHostResource, createResourceAttacher, resolvePromptArguments,
-	         promptButtonProps, nextResourceContextLines } from "<%= orchestrator_path %>";
+	         loadHostResource, resourceLinesForTurn, resolvePromptArguments,
+	         promptButtonProps, promptArgumentSummary } from "<%= orchestrator_path %>";
 	import { marked } from "/llm_meta_widget_assets/marked.esm.js";
 
 	// Standard prose settings — GFM (tables, autolinks, strikethrough),
@@ -411,6 +464,7 @@
 	var API_KEY_UUID           = <%= api_key_uuid.to_json.html_safe %>;
 	var MODEL                  = <%= model.to_json.html_safe %>;
 	var ACTIONS_SCHEMA_ID      = <%= actions_schema_id.to_json.html_safe %>;
+	var GREETING               = <%= greeting.to_json.html_safe %>;
 	var STATE_GLOBAL           = <%= state_global.to_json.html_safe %>;
 	var ACTIONS_GLOBAL         = <%= actions_global.to_json.html_safe %>;
 	var REMOTE_TOOLS_SCHEMA_ID = <%= remote_tools_schema_id.to_json.html_safe %>;
@@ -755,7 +809,6 @@
 	var hostWideTools = [];
 	var hostWidePrompts = [];
 	var resourceContext = null;   // payload of the host's reference resource
-	var resourceAttacher = null;  // per-turn gate, built from the server's hint
 	var resourcePlan = null;      // the pre-flight decision, kept so Clear can re-arm the gate
 
 	// Beyond ~2k tokens a reference resource starts crowding out the
@@ -763,9 +816,6 @@
 	// is 218 dictionaries / ~35KB / ~10k tokens.
 	var RESOURCE_BUDGET_BYTES = 8000;
 
-	// Set when a server declared a resource we deliberately did not attach,
-	// so the reason is inspectable rather than a silent absence.
-	var resourceSkip = null;
 
 	var wellKnownReady = (async function() {
 		var urls = WELL_KNOWN_URLS === null
@@ -789,7 +839,7 @@
 			var prompts = await listMcpPrompts({ endpoint: endpoint });
 			hostWidePrompts = hostWidePrompts.concat(prompts);
 
-			if (resourceContext === null) {
+			if (resourcePlan === null) {
 				// Listing, size gate and read all live in the orchestrator, where
 				// they are tested together — a gate nothing consults is exactly
 				// the bug this shape prevents.
@@ -799,19 +849,21 @@
 					list:        listMcpResources,
 					read:        readMcpResource,
 					onSkip: function(plan) {
-						resourceSkip = plan;
 						console.info("[llm_meta_widget] not attaching " + plan.uri +
 						             " (" + plan.reason + ", sizeBytes=" + plan.sizeBytes + ")");
 					}
 				});
-				if (loaded && loaded.context) {
-					resourceContext  = loaded.context;
-					resourcePlan     = loaded.plan;
-					resourceAttacher = createResourceAttacher(loaded.plan);
+				// A volatile resource comes back with no context — it is read
+				// per turn instead — so the plan, not the payload, is what says
+				// whether this endpoint offered anything worth attaching.
+				if (loaded && loaded.plan && loaded.plan.fetch) {
+					resourceContext = loaded.context;
+					resourcePlan    = loaded.plan;
 				}
 			}
 		}
 		renderPromptButtons();
+		renderWelcome();
 	})();
 
 	// ---- server-offered prompt templates --------------------------------
@@ -841,6 +893,66 @@
 		promptsEl.style.display = "";
 	}
 
+	// A blank panel tells a first-time visitor nothing. Open with a greeting
+	// and the offers themselves — each template showing what it will take from
+	// the page and what it will ask for — so the assistant is the page's way
+	// in rather than a box you must already know how to talk to.
+	function renderWelcome() {
+		if (!historyEl || historyEl.querySelector(".message")) return;
+		historyEl.textContent = "";
+
+		var box = document.createElement("div");
+		box.className = "lmw-welcome";
+
+		var hello = document.createElement("p");
+		hello.className = "lmw-welcome-hello";
+		hello.textContent = GREETING ||
+			"Hi — I can work this page for you. Tell me what you need in your own words" +
+			(hostWidePrompts.length ? ", or start with one of these:" : ".");
+		box.appendChild(hello);
+
+		var state = window[STATE_GLOBAL] || {};
+		hostWidePrompts.forEach(function(prompt) {
+			var props = promptButtonProps(prompt);
+			var card  = document.createElement("div");
+			card.className = "lmw-welcome-card";
+
+			var start = document.createElement("button");
+			start.type = "button";
+			start.className = "lmw-welcome-start";
+			start.textContent = props.label;
+			start.addEventListener("click", function() { runPromptTemplate(prompt, start); });
+			card.appendChild(start);
+
+			if (prompt.description) {
+				var why = document.createElement("p");
+				why.className = "lmw-welcome-why";
+				why.textContent = prompt.description;
+				card.appendChild(why);
+			}
+
+			// Name the placeholders, filled or not, so the offer is concrete:
+			// a newcomer can see the text box is empty before clicking.
+			var summary = promptArgumentSummary(prompt, state);
+			if (summary.length) {
+				var slots = document.createElement("ul");
+				slots.className = "lmw-welcome-slots";
+				summary.forEach(function(slot) {
+					var li = document.createElement("li");
+					li.className = slot.filled ? "filled" : "empty";
+					li.textContent = slot.filled
+						? slot.name + ": " + (slot.value.length > 60 ? slot.value.slice(0, 60) + "…" : slot.value)
+						: slot.name + ": not set yet — I'll ask, or work it out";
+					slots.appendChild(li);
+				});
+				card.appendChild(slots);
+			}
+			box.appendChild(card);
+		});
+
+		historyEl.appendChild(box);
+	}
+
 	async function runPromptTemplate(prompt, button) {
 		var resolved = resolvePromptArguments(prompt, window[STATE_GLOBAL] || {});
 		var args = resolved.args;
@@ -860,6 +972,7 @@
 			var text = promptMessagesToText(result);
 			if (!text) { appendTurn("error", "The server returned an empty prompt."); return; }
 			inputEl.value = text;
+			pendingTurnLabel = promptButtonProps(prompt).label;
 			if (typeof formEl.requestSubmit === "function") formEl.requestSubmit();
 			else formEl.dispatchEvent(new Event("submit", { cancelable: true }));
 		} catch (e) {
@@ -869,13 +982,22 @@
 		}
 	}
 
-	function appendTurn(role, text) {
+	// Set just before a template submits, so its turn is labelled by what the
+	// user actually did — "Annotate text" — instead of showing a paragraph of
+	// server-written instructions as though they had typed it. The instructions
+	// stay one click away rather than hidden: what was sent is what is shown.
+	var pendingTurnLabel = null;
+
+	function appendTurn(role, text, turnLabel) {
 		// Class names mirror llm_meta_chat's chats/_message.html.erb —
 		// `.message.<role>`, `.message-role`, `.message-content` — so the
 		// shared conversation.css styles apply directly (see the <link>
 		// above). The .lmw-* prefix is reserved for widget-CHROME classes
 		// (header, clear button, scroll region, input area) that aren't
 		// part of the shared conversation surface.
+		var welcome = historyEl.querySelector(".lmw-welcome");
+		if (welcome) welcome.remove();
+
 		var div = document.createElement("div");
 		div.className = "message " + role;
 		var label = document.createElement("div");
@@ -888,12 +1010,25 @@
 		// content is rendered as markdown but only after the assistant's
 		// text is streamed in via renderMarkdownInto — this appendTurn
 		// creates the empty container.
-		body.textContent = text;
+		if (turnLabel) {
+			var details = document.createElement("details");
+			var summary = document.createElement("summary");
+			summary.textContent = turnLabel;
+			var full = document.createElement("div");
+			full.className = "lmw-sent-text";
+			full.textContent = text;
+			details.appendChild(summary);
+			details.appendChild(full);
+			body.appendChild(details);
+		} else {
+			body.textContent = text;
+		}
 		div.appendChild(label);
 		div.appendChild(document.createTextNode(" "));
 		div.appendChild(body);
 		historyEl.appendChild(div);
 		historyEl.scrollTop = historyEl.scrollHeight;
+		body.roleLabel = label;   // so a turn in flight can show it is working
 		return body;
 	}
 
@@ -918,6 +1053,23 @@
 		return role;
 	}
 
+	// While a turn is in flight the assistant's label becomes a turning gear.
+	// Same markup and class names as llm_meta_chat's message_stream_controller,
+	// so the shared conversation.css drives both. Without it there is no sign
+	// whether the assistant is still working or has quietly stopped — and on a
+	// local model a tool round can take a long time before the first token.
+	function markWorking(label) {
+		if (!label || label.classList.contains("is-working")) return;
+		label.innerHTML = '<span class="role-spinner" aria-hidden="true">\u2699\uFE0F</span> Working…';
+		label.classList.add("is-working");
+	}
+
+	function markDone(label) {
+		if (!label || !label.classList.contains("is-working")) return;
+		label.classList.remove("is-working");
+		label.textContent = roleLabel("assistant");
+	}
+
 	var currentThinkingBlock = null;
 	var currentThinkingBody  = null;
 
@@ -928,8 +1080,17 @@
 		var details = document.createElement("details");
 		details.className = "message-thinking";
 		details.open = true;
+		details.classList.add("thinking-active");
 		var summary = document.createElement("summary");
 		summary.textContent = "🤔 thinking…";
+		var dots = document.createElement("span");
+		dots.className = "thinking-dots";
+		for (var i = 0; i < 3; i++) {
+			var dot = document.createElement("span");
+			dot.textContent = ".";
+			dots.appendChild(dot);
+		}
+		summary.appendChild(dots);
 		var body = document.createElement("div");
 		body.className = "message-thinking-content";
 		details.appendChild(summary);
@@ -943,6 +1104,7 @@
 
 	function collapseThinkingBlock() {
 		if (currentThinkingBlock) {
+			currentThinkingBlock.classList.remove("thinking-active");
 			currentThinkingBlock.open = false;
 			var summary = currentThinkingBlock.querySelector("summary");
 			if (summary) summary.textContent = "🤔 thinking (finished)";
@@ -960,28 +1122,35 @@
 		return out;
 	}
 
-	function currentSystemPrompt() {
+	function currentSystemPrompt(resourceLines) {
 		return [
 			"You are integrated into a web page as an AI assistant. You have tools available to change page state or fetch information.",
 			"",
 			"RULES for tool use:",
 			"1. If the user's question can be answered from the Current page state below, answer directly with a plain-text response — do NOT invoke a tool.",
 			"2. If the user requests a state change, or needs information not in the page state, invoke the matching tool via a function call. Do not describe your intent in text without actually invoking (a textual promise like \"I will add X\" is a failure).",
-			"3. After a tool returns a result, YOUR NEXT MESSAGE MUST BE A PLAIN-TEXT ANSWER using that result. DO NOT emit another tool call.",
-			"4. NEVER call the SAME tool twice in a row with the same or similar arguments — its earlier result is already in the conversation history.",
+			"3. After a tool returns a result, use it: either take the next step the task needs, or — if the task is done — answer in plain text. Do not stop silently after a tool call.",
+			"4. NEVER repeat a call you have already made with the same or similar arguments — its result is already in the conversation history.",
 			"",
 			"Current page state:",
 			JSON.stringify(currentPageState(), null, 2)
-		].concat(resourceContextLines()).join("\n");
+		].concat(resourceLines || []).join("\n");
 	}
 
-	// How often the resource is attached is the SERVER's call, via the
-	// extension's attachmentHint: 'once' for static reference data (the
-	// default, and what a hint-unaware server gets), 'each-turn' for content
-	// that varies. The attacher records each turn's answer, replacing a
-	// client-side boolean that assumed every resource was static.
-	function resourceContextLines() {
-		return nextResourceContextLines(resourceContext, resourceAttacher);
+	// Runs once per send, before the system prompt is built: a volatile
+	// resource is re-read here, a stable one re-uses the copy taken at boot.
+	// Either way it is attached to every turn — the server's hint governs
+	// re-FETCHING; how often to include it is this client's call.
+	async function resourceLinesForThisTurn() {
+		var turn = await resourceLinesForTurn({
+			plan:        resourcePlan,
+			cached:      resourceContext,
+			endpoint:    resourcePlan && resourcePlan.endpoint,
+			read:        readMcpResource,
+			budgetBytes: RESOURCE_BUDGET_BYTES
+		});
+		resourceContext = turn.cached;
+		return turn.lines;
 	}
 
 	// Per-turn AbortController — lets the Clear button (or a new submit)
@@ -992,9 +1161,7 @@
 		if (currentAbort) { try { currentAbort.abort(); } catch (e) { /* noop */ } }
 		conversation = [];
 		historyEl.innerHTML = "";
-		// Clear starts a new conversation, so a 'once' resource is owed to it
-		// again — the old boolean stayed latched and silently withheld it.
-		if (resourcePlan) resourceAttacher = createResourceAttacher(resourcePlan);
+		renderWelcome();
 	});
 
 	// Enter submits, Shift+Enter inserts a newline — matches llm_meta_chat's
@@ -1008,17 +1175,19 @@
 		}
 	});
 
-	formEl.addEventListener("submit", async function(e) {
-		e.preventDefault();
+	formEl.addEventListener("submit", async function(event) {
+		event.preventDefault();
 		var userText = inputEl.value.trim();
 		if (!userText) return;
 		inputEl.value = "";
-		appendTurn("user", userText);
+		appendTurn("user", userText, pendingTurnLabel);
+		pendingTurnLabel = null;
 
 		if (currentAbort) { try { currentAbort.abort(); } catch (e) { /* noop */ } }
 		currentAbort = new AbortController();
 
 		var assistantBody = appendTurn("assistant", "");
+		markWorking(assistantBody.roleLabel);
 		var assistantMarkdown = "";  // accumulate raw markdown, re-render on each delta
 
 		try {
@@ -1028,7 +1197,8 @@
 			// it as sent.
 			await wellKnownReady;
 
-			var messages = [{ role: "system", content: currentSystemPrompt() }]
+			var resourceLines = await resourceLinesForThisTurn();
+			var messages = [{ role: "system", content: currentSystemPrompt(resourceLines) }]
 				.concat(conversation)
 				.concat([{ role: "user", content: userText }]);
 
@@ -1043,7 +1213,16 @@
 				aiActions:     window[ACTIONS_GLOBAL] || {},
 				maxRounds:     MAX_ROUNDS,
 				signal:        currentAbort.signal,
+				onPhase: function(name) {
+					// 'thinking' covers the long silence before the first
+					// token; 'responding' means text is on its way.
+					if (name === "responding") markDone(assistantBody.roleLabel);
+					else markWorking(assistantBody.roleLabel);
+				},
 				onRoundStart: function(roundIdx) {
+					// A new round means more work: tool results are going back
+					// to the model, which is the longest wait of all.
+					markWorking(assistantBody.roleLabel);
 					// Loop mechanics are debugging info, not user-facing signal.
 					// Reuse the same assistant bubble across rounds — text just
 					// keeps streaming into it (accumulating markdown). Weaker
@@ -1060,6 +1239,7 @@
 					historyEl.scrollTop = historyEl.scrollHeight;
 				},
 				onTextDelta: function(delta) {
+					markDone(assistantBody.roleLabel);
 					collapseThinkingBlock();
 					assistantMarkdown += delta;
 					renderMarkdownInto(assistantBody, assistantMarkdown);
@@ -1110,6 +1290,12 @@
 				appendTurn("error", err.message);
 			}
 		} finally {
+			// Whatever happened — answered, aborted, threw, or returned
+			// nothing at all — the turn is over and the label must stop
+			// claiming otherwise. A spinner left running is a worse lie than
+			// no spinner: it says "still working" about a turn that ended.
+			markDone(assistantBody.roleLabel);
+			collapseThinkingBlock();
 			currentAbort = null;
 		}
 	});

data/lib/llm_meta_widget/version.rb

@@ -1,3 +1,3 @@
 module LlmMetaWidget
-  VERSION = "0.2.0"
+  VERSION = "0.4.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: llm_meta_widget
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.4.0
 platform: ruby
 authors:
 - jdkim