llm_meta_widget 0.6.1 → 0.7.0

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

@@ -1,1473 +1,46 @@
-<%# Chat-panel widget for the client-orchestrated flow. Render via the %>
-<%# llm_meta_widget helper — see llm_meta_widget_helper.rb for options. %>
+<%# Renders the widget as a custom element. Everything that used to live here — %>
+<%# 360 lines of CSS, 21 lines of markup and 1,450 lines of script — moved into %>
+<%# app/assets/javascripts/llm_meta_widget/element.js and is bundled into one %>
+<%# ES module, so a non-Rails host can use the same widget with two lines of %>
+<%# HTML. See docs/custom-element-distribution.md. %>
 <%# %>
-<%# Required locals: base_url, model. %>
-<%# Optional locals (helper defaults): %>
-<%#   api_key_uuid, orchestrator_path, actions_schema_id, state_global, %>
-<%#   actions_global, remote_tools_schema_id, well_known_urls, max_rounds. %>
+<%# Render via the llm_meta_widget helper, which maps its keyword options onto %>
+<%# the attributes below — see app/helpers/llm_meta_widget/widget_helper.rb. %>
 <%# %>
-<%# The host page must ALSO provide: %>
-<%#   (a) a JSON schema block with id = actions_schema_id, listing the %>
-<%#       local action set (name/description/input_schema each). %>
+<%# The host page must still provide, because these belong to the host and not %>
+<%# to the element: %>
+<%#   (a) a JSON schema block with id = actions_schema_id, listing the local %>
+<%#       action set (name/description/input_schema each). %>
 <%#   (b) window.aiState — reader functions called each turn. %>
-<%#   (c) window.aiActions — action implementations invoked after the LLM %>
-<%#       turn completes. %>
+<%#   (c) window.aiActions — action implementations invoked after the LLM turn. %>
 <%# %>
 <%# NOTE on ERB comments: DO NOT consolidate these lines into one <%_# ... %_> %>
 <%# block. Rails-ERB comment blocks terminate at the FIRST closing `%_>`, so %>
 <%# any nested <%_= ... %_> inside cuts them short and the trailing lines leak %>
-<%# into rendered HTML — including any literal `<script>` text, which then %>
-<%# swallows the widget div. One line per comment keeps them self-terminating. %>
-
-<%# Bubble/thinking/role-label styles come from the shared conversation.css %>
-<%# — the canonical "chat conversation" surface owned by this gem. See %>
-<%# comment in /llm_meta_widget_assets/conversation.css. The widget's %>
-<%# outer div opts in via class="llm-meta-conversation" (below). %>
-<link rel="stylesheet" href="/llm_meta_widget_assets/conversation.css">
-
-<style>
-	/* Widget-specific chrome — floating container, header, scroll region,
-	 * input area. Everything BUBBLE / THINKING / ROLE-related lives in the
-	 * shared conversation.css above. */
-	#llm-meta-widget-chat {
-		/* Positioned via JS on open (see setOpen()) so top/left are set in
-		 * pixels — required for CSS `resize: both` to grow correctly
-		 * (bottom/right anchoring blocks the resize handle from being
-		 * dragged outward from viewport corner). */
-		position: fixed;
-		width: 40em; height: 55vh;
-		min-width: 24em; min-height: 16em;
-		max-width: calc(100vw - 2em); max-height: calc(100vh - 2em);
-		background: #ffffff;
-		border: 1px solid #e5e7eb;
-		border-radius: 8px;
-		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-		padding: 10px;
-		z-index: 9999;
-		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-		font-size: 14px;
-		color: #1f2937;
-		display: flex; flex-direction: column;
-		/* Native drag-to-resize handle appears at bottom-right when
-		 * overflow != visible. overflow:hidden clips at widget edge; the
-		 * inner .lmw-messages has its own scroll so no content is lost. */
-		resize: both;
-		overflow: hidden;
-	}
-	#llm-meta-widget-chat.lmw-collapsed { display: none; }
-
-	/* Collapsed-state toggle — a small floating chat-bubble button in the
-	 * bottom-right corner. Always in the DOM; visible only when the chat
-	 * panel is collapsed. Click to open the chat panel; the panel's × button
-	 * collapses back to this. State persists across page loads via
-	 * localStorage (see the JS below). */
-	#llm-meta-widget-toggle {
-		position: fixed; bottom: 1em; right: 1em;
-		width: 52px; height: 52px;
-		border-radius: 26px;
-		background-color: #3b82f6;
-		color: white;
-		border: none;
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
-		cursor: pointer;
-		z-index: 9999;
-		display: flex; align-items: center; justify-content: center;
-		transition: background-color 0.15s, transform 0.1s;
-	}
-	#llm-meta-widget-toggle:hover { background-color: #2563eb; }
-	#llm-meta-widget-toggle:active { transform: scale(0.96); }
-	#llm-meta-widget-toggle.lmw-hidden { display: none; }
-	#llm-meta-widget-toggle svg { display: block; }
-
-	/* Header hide/close: a subtle "−" button that collapses to the toggle
-	 * bubble. Sits between the "clear" button and title. */
-	#llm-meta-widget-chat .lmw-hide {
-		background: none; border: none;
-		color: #6b7280;
-		font: inherit; font-size: 18px; line-height: 1;
-		cursor: pointer;
-		padding: 0 8px;
-		transition: color 0.15s;
-	}
-	#llm-meta-widget-chat .lmw-hide:hover { color: #1f2937; }
-	#llm-meta-widget-chat .lmw-header {
-		display: flex; justify-content: space-between; align-items: center;
-		gap: 8px;
-		padding-bottom: 8px; margin-bottom: 8px;
-		border-bottom: 2px solid #e5e7eb;
-	}
-	#llm-meta-widget-chat .lmw-header-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
-
-	/* Level-1 pickers row — matches chat.aibranch.org's input-container
-	 * convention (attach / model / tools / settings in a horizontal row
-	 * below the textarea). We only render model + tools for now. Uses
-	 * relative positioning so the tools <details> panel can drop down
-	 * as a floating overlay instead of pushing the input area around. */
-	#llm-meta-widget-chat .lmw-input-controls {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		margin-top: 6px;
-		position: relative;
-		min-height: 26px;
-	}
-	#llm-meta-widget-chat .lmw-title { font-weight: 600; color: #1f2937; }
-
-	/* Level-1 model picker — compact <select> next to the title.
-	 * Populated by JS on widget open from GET /api/llms (anon path
-	 * returns Ollama-only). Hidden entirely if enable_model_picker
-	 * is false at the helper call site. */
-	#llm-meta-widget-chat .lmw-model-picker {
-		font: inherit; font-size: 12px;
-		padding: 3px 6px;
-		border: 1px solid #d1d5db;
-		border-radius: 4px;
-		background: #f9fafb;
-		color: #374151;
-		cursor: pointer;
-		max-width: 12em;
-		text-overflow: ellipsis;
-	}
-	#llm-meta-widget-chat .lmw-model-picker:focus {
-		outline: none;
-		border-color: #3b82f6;
-		box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
-	}
-
-	/* Level-1 tools picker — inline chip in the input-controls row (same
-	 * convention as chat.aibranch.org). The tools list drops down as a
-	 * floating overlay above the input, so opening the panel doesn't
-	 * push the textarea around. Populated by JS on widget open from
-	 * GET /api/mcp_servers (anon path returns public_to_anonymous MCP
-	 * servers with their tools inline). One checkbox per SERVER —
-	 * toggling enables/disables ALL of its tools. */
-	#llm-meta-widget-chat .lmw-tools-picker {
-		position: relative;   /* anchor for the absolutely-positioned list */
-	}
-	#llm-meta-widget-chat .lmw-tools-picker > summary {
-		list-style: none;
-		cursor: pointer;
-		padding: 3px 8px;
-		font-size: 12px;
-		color: #374151;
-		background: #f9fafb;
-		border: 1px solid #d1d5db;
-		border-radius: 4px;
-		display: inline-flex; align-items: center; gap: 6px;
-	}
-	#llm-meta-widget-chat .lmw-tools-picker > summary:hover { background: #f3f4f6; }
-	#llm-meta-widget-chat .lmw-tools-picker > summary::-webkit-details-marker { display: none; }
-	#llm-meta-widget-chat .lmw-tools-picker[open] > summary {
-		background: #eff6ff;
-		border-color: #93c5fd;
-	}
-	#llm-meta-widget-chat .lmw-tools-count {
-		display: inline-block;
-		background: #0ea5e9;
-		color: #fff;
-		font-size: 10px;
-		padding: 0 5px;
-		border-radius: 8px;
-		min-width: 14px;
-		text-align: center;
-	}
-	#llm-meta-widget-chat .lmw-tools-count.lmw-tools-count-zero {
-		background: #d1d5db;
-		color: #6b7280;
-	}
-	/* Floating dropdown panel — sits above the input area when open so
-	 * expanding never shifts the textarea. Bottom-anchored so it opens
-	 * UPWARD (natural direction since we're at the panel's bottom). */
-	#llm-meta-widget-chat .lmw-tools-list {
-		position: absolute;
-		bottom: calc(100% + 4px);
-		left: 0;
-		min-width: 220px;
-		max-height: 12em;
-		overflow-y: auto;
-		background: #ffffff;
-		border: 1px solid #d1d5db;
-		border-radius: 6px;
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
-		padding: 4px 0;
-		z-index: 10;
-	}
-	#llm-meta-widget-chat .lmw-tools-item {
-		display: flex; align-items: center; gap: 6px;
-		padding: 4px 10px;
-		font-size: 12px;
-		color: #374151;
-		cursor: pointer;
-	}
-	#llm-meta-widget-chat .lmw-tools-item:hover { background: #eff6ff; }
-	#llm-meta-widget-chat .lmw-tools-item input[type="checkbox"] { margin: 0; }
-	#llm-meta-widget-chat .lmw-tools-empty {
-		padding: 6px 10px;
-		font-size: 12px;
-		color: #94a3b8;
-		font-style: italic;
-	}
-	/* Two-level tool selection — mirrors chat.aibranch.org's tool_selector.
-	 * Server row (bulk checkbox + name + count + caret) is clickable to
-	 * expand its children. Individual tool rows are indented one level. */
-	#llm-meta-widget-chat .lmw-tools-server + .lmw-tools-server {
-		border-top: 1px solid #f1f5f9;
-	}
-	#llm-meta-widget-chat .lmw-tools-server-row {
-		display: flex; align-items: center; gap: 6px;
-		padding: 4px 10px;
-		font-size: 12px;
-		font-weight: 500;
-		color: #1f2937;
-		cursor: pointer;
-	}
-	#llm-meta-widget-chat .lmw-tools-server-row:hover { background: #eff6ff; }
-	#llm-meta-widget-chat .lmw-tools-server-name  { flex: 1; }
-	#llm-meta-widget-chat .lmw-tools-server-caret {
-		color: #94a3b8;
-		font-size: 10px;
-		line-height: 1;
-		flex-shrink: 0;
-	}
-	#llm-meta-widget-chat .lmw-tools-item-child {
-		padding-left: 26px;  /* align tool checkboxes past the server bulk checkbox */
-		font-size: 12px;
-		color: #4b5563;
-	}
-	#llm-meta-widget-chat .lmw-clear {
-		background: #ef4444; color: white; border: none;
-		padding: 4px 10px; border-radius: 6px; cursor: pointer;
-		font: inherit; font-size: 12px;
-		transition: background-color 0.15s;
-	}
-	#llm-meta-widget-chat .lmw-clear:hover { background: #dc2626; }
-
-	#llm-meta-widget-chat .lmw-messages {
-		flex: 1; overflow-y: auto;
-		padding: 10px;
-		background-color: #f9fafb;
-		border-radius: 8px;
-		margin-bottom: 8px;
-		min-height: 6em;
-		/* No max-height — messages grows with the widget (which the user
-		 * can drag to any size). A hard cap here would leave an ugly gap
-		 * between the messages area and the input on tall widget sizes. */
-	}
-	#llm-meta-widget-chat .lmw-messages::-webkit-scrollbar { width: 8px; }
-	#llm-meta-widget-chat .lmw-messages::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
-	#llm-meta-widget-chat .lmw-messages::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
-	#llm-meta-widget-chat .lmw-messages::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
-
-	/* Input area — mirrors llm_meta_chat's .chat-input-container +
-	 * .chat-input + .send-button so it reads as the same UI. Multi-line
-	 * textarea with an absolutely-positioned paper-plane send button
-	 * (SVG inlined so no external icon-font dep). */
-	#llm-meta-widget-chat .lmw-input-container {
-		background-color: white;
-		border: 2px solid #e5e7eb;
-		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". */
-	#llm-meta-widget-chat .lmw-prompts {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 6px;
-		margin-bottom: 8px;
-	}
-	#llm-meta-widget-chat .lmw-prompt {
-		background-color: #eff6ff;
-		color: #1d4ed8;
-		border: 1px solid #bfdbfe;
-		border-radius: 999px;
-		padding: 4px 12px;
-		font-size: 12px;
-		font-family: inherit;
-		cursor: pointer;
-		transition: background-color 0.2s, border-color 0.2s;
-	}
-	#llm-meta-widget-chat .lmw-prompt:hover:not(:disabled) {
-		background-color: #dbeafe;
-		border-color: #93c5fd;
-	}
-	#llm-meta-widget-chat .lmw-prompt:disabled { opacity: 0.5; cursor: default; }
-	#llm-meta-widget-chat .lmw-form { display: flex; flex-direction: column; gap: 8px; }
-	#llm-meta-widget-chat .lmw-input-wrapper { position: relative; flex: 1; }
-	#llm-meta-widget-chat .lmw-input {
-		width: 100%;
-		padding: 10px 48px 10px 10px;
-		border: 1px solid #d1d5db;
-		border-radius: 6px;
-		font-size: 14px;
-		font-family: inherit;
-		resize: vertical;
-		min-height: 44px;
-		box-sizing: border-box;
-		transition: border-color 0.2s, box-shadow 0.2s;
-	}
-	#llm-meta-widget-chat .lmw-input:focus {
-		outline: none;
-		border-color: #3b82f6;
-		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-	}
-	#llm-meta-widget-chat .lmw-send {
-		position: absolute;
-		bottom: 6px;
-		right: 6px;
-		background-color: #3b82f6;
-		color: white;
-		border: none;
-		width: 32px;
-		height: 32px;
-		padding: 0;
-		border-radius: 6px;
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		transition: background-color 0.15s, opacity 0.15s;
-	}
-	#llm-meta-widget-chat .lmw-send:hover { background-color: #2563eb; }
-	#llm-meta-widget-chat .lmw-send:disabled { opacity: 0.5; cursor: not-allowed; }
-	#llm-meta-widget-chat .lmw-send svg { display: block; }
-</style>
-
-<%# Floating toggle — visible when the chat panel is collapsed. See CSS above. %>
-<button type="button" id="llm-meta-widget-toggle" title="Open AI assistant" aria-label="Open AI assistant">
-	<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
-		<path d="M2 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-3l-3.5 3.5V12H4a2 2 0 0 1-2-2V4Zm3 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm3 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm3 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z"/>
-	</svg>
-</button>
-
-<div id="llm-meta-widget-chat" class="llm-meta-conversation">
-	<div class="lmw-header">
-		<span class="lmw-title">AI assistant</span>
-		<div class="lmw-header-right">
-			<button type="button" class="lmw-clear" title="Clear conversation">clear</button>
-			<button type="button" class="lmw-hide" title="Hide">−</button>
-		</div>
-	</div>
-	<div class="lmw-messages"></div>
-	<div class="lmw-input-container">
-		<%# Server-offered prompt templates (MCP prompts/list). Hidden until a
-		    host MCP server actually offers one, so a tools-only server leaves
-		    the widget exactly as it was. %>
-		<div class="lmw-prompts" style="display:none"></div>
-		<form class="lmw-form">
-			<div class="lmw-input-wrapper">
-				<textarea class="lmw-input" placeholder="Enter your message..." rows="2" autocomplete="off"></textarea>
-				<button type="submit" class="lmw-send" title="Send message">
-					<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
-						<path d="M15.964.686a.5.5 0 0 0-.65-.65L.293 6.011a.513.513 0 0 0 .002.947l4.708 1.878 8.94-6.94-6.94 8.94 1.879 4.708c.163.407.756.416.951.016l6.13-13.884Z"/>
-					</svg>
-				</button>
-			</div>
-			<%# Level-1 pickers — model + tools sit inline BELOW the textarea, %>
-			<%# same layout convention as chat.aibranch.org's input area. Each %>
-			<%# picker is hidden by CSS if its enable_* flag is false at the %>
-			<%# helper call site (level-0 minimalist mode). %>
-			<% if enable_model_picker || enable_tool_picker %>
-				<div class="lmw-input-controls">
-					<% if enable_model_picker %>
-						<%# Populated by JS on widget open from GET /api/llms (anon → Ollama-only). %>
-						<select class="lmw-model-picker" title="Select model" aria-label="Select model" style="display:none">
-						</select>
-					<% end %>
-					<% if enable_tool_picker %>
-						<%# Populated by JS on widget open from GET /api/mcp_servers. Each %>
-						<%# checkbox toggles ALL tools on that server. Selections are %>
-						<%# session-scoped (not persisted across widget reloads). %>
-						<details class="lmw-tools-picker">
-							<summary>
-								🔧 Tools
-								<span class="lmw-tools-count lmw-tools-count-zero">0</span>
-							</summary>
-							<div class="lmw-tools-list">
-								<div class="lmw-tools-empty">Loading…</div>
-							</div>
-						</details>
-					<% end %>
-				</div>
-			<% end %>
-		</form>
-	</div>
-</div>
-
-<script type="module">
-	import { runChatLoop, fetchMcpManifest, listMcpPrompts, getMcpPrompt,
-	         listMcpResources, readMcpResource, promptMessagesToText,
-	         loadHostResource, resourceLinesForTurn, resolvePromptArguments,
-	         promptButtonProps, promptArgumentSummary, fetchOllamaModels,
-	         createConversationStore, conversationKeyFor } from "<%= orchestrator_path %>";
-	import { marked } from "/llm_meta_widget_assets/marked.esm.js";
-
-	// Standard prose settings — GFM (tables, autolinks, strikethrough),
-	// break single newlines into <br> so streamed LLM output that uses
-	// bare newlines still reads naturally.
-	marked.setOptions({ gfm: true, breaks: true });
-
-	// Two endpoints, two jobs: one answers the chat, the other registers the
-	// MCP tools on offer. They are usually the same llm_meta_server, but need
-	// not be — an adopter can run their own Ollama and still borrow a hub's
-	// tools, or use no hub at all.
-	var LLM_BASE               = <%= llm_url.to_json.html_safe %>;
-	var TOOL_HUB_BASE          = <%= tool_hub_url.to_json.html_safe %>;
-	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 %>;
-	var MAX_ROUNDS             = <%= max_rounds.to_json.html_safe %>;
-	var WELL_KNOWN_URLS        = <%= raw(well_known_urls.nil? ? "null" : well_known_urls.to_json) %>;
-	var LLM_PROVIDER           = <%= llm_provider.to_json.html_safe %>;
-	var ENABLE_MODEL_PICKER    = <%= enable_model_picker.to_json.html_safe %>;
-	// Class 1 tools are registered on a hub, so the picker needs one — which
-	// is independent of who answers the chat. Page actions and the host's own
-	// .well-known MCP work regardless.
-	var ENABLE_TOOL_PICKER     = <%= enable_tool_picker.to_json.html_safe %> && <%= tool_hub_url.to_json.html_safe %> !== null;
-	var MODEL_ALLOWLIST        = <%= raw(models.nil?    ? "null" : models.to_json) %>;
-	var HUB_TOOLS_ALLOWLIST    = <%= raw(hub_tools.nil? ? "null" : hub_tools.to_json) %>;
-
-	var root         = document.getElementById("llm-meta-widget-chat");
-	var toggleBtn    = document.getElementById("llm-meta-widget-toggle");
-	var historyEl    = root.querySelector(".lmw-messages");
-	var formEl       = root.querySelector(".lmw-form");
-	var inputEl      = root.querySelector(".lmw-input");
-	var clearBtn     = root.querySelector(".lmw-clear");
-	var hideBtn      = root.querySelector(".lmw-hide");
-	var modelPicker  = root.querySelector(".lmw-model-picker");   // null when disabled
-	var toolsPicker  = root.querySelector(".lmw-tools-picker");   // null when disabled
-	var toolsListEl  = root.querySelector(".lmw-tools-list");     // null when disabled
-	var toolsCountEl = root.querySelector(".lmw-tools-count");    // null when disabled
-
-	// Persistence keys — open/close state + resized geometry (width/height).
-	// Position is re-computed each open so the widget lands at bottom-right
-	// of the CURRENT viewport (not wherever the user resized it last time).
-	// Size is preserved because that's a user preference; position is a
-	// spawn convention.
-	var STORAGE_KEY_OPEN = "llm_meta_widget:open";
-	var STORAGE_KEY_SIZE = "llm_meta_widget:size";  // stored as "WxH" in px
-
-	// Floors matching the CSS min-width/min-height (24em / 16em). A panel
-	// measured mid-layout reports a few pixels; saving that produced a sliver
-	// anchored off the bottom of the window, and — worse — it was stored, so
-	// every later visit reopened at the sliver size. Sizes below the floor are
-	// neither saved nor honoured, which also heals a value already stored.
-	var MIN_SAVED_WIDTH  = 320;
-	var MIN_SAVED_HEIGHT = 240;
-
-	function plausibleSize(w, h) {
-		return w >= MIN_SAVED_WIDTH && h >= MIN_SAVED_HEIGHT &&
-		       w <= window.innerWidth * 2 && h <= window.innerHeight * 2;
-	}
-
-	function applyStoredSize() {
-		try {
-			var raw = localStorage.getItem(STORAGE_KEY_SIZE);
-			if (!raw) return;
-			var parts = raw.split("x");
-			var w = parseInt(parts[0], 10), h = parseInt(parts[1], 10);
-			if (!plausibleSize(w, h)) {
-				localStorage.removeItem(STORAGE_KEY_SIZE);   // heal a bad value
-				return;
-			}
-			root.style.width  = w + "px";
-			root.style.height = h + "px";
-		} catch (e) { /* noop */ }
-	}
-	function saveCurrentSize() {
-		try {
-			var rect = root.getBoundingClientRect();
-			var w = Math.round(rect.width), h = Math.round(rect.height);
-			if (!plausibleSize(w, h)) return;   // layout noise, not a choice
-			localStorage.setItem(STORAGE_KEY_SIZE, w + "x" + h);
-		} catch (e) { /* noop */ }
-	}
-
-	// Anchor the widget at bottom-right of the viewport, given whatever
-	// size it currently has. Uses top/left in pixels (required for CSS
-	// `resize: both` — a bottom/right-pinned element can't be dragged out
-	// past the viewport edge to grow).
-	function positionAtBottomRight(attempt) {
-		var margin = 16;  // ~1em from the viewport edges
-		var rect = root.getBoundingClientRect();
-		var top  = Math.max(margin, window.innerHeight - rect.height - margin);
-		var left = Math.max(margin, window.innerWidth  - rect.width  - margin);
-		root.style.top  = top  + "px";
-		root.style.left = left + "px";
-
-		// Measured before layout settled: the panel reports a sliver and gets
-		// anchored to the very bottom of the window. Re-measure next frame.
-		var tries = attempt || 0;
-		if (rect.height < MIN_SAVED_HEIGHT && tries < 3 && typeof requestAnimationFrame === "function") {
-			requestAnimationFrame(function() { positionAtBottomRight(tries + 1); });
-		}
-	}
-
-	function setOpen(open) {
-		if (open) {
-			applyStoredSize();          // restore user's preferred size (if any)
-			root.classList.remove("lmw-collapsed");
-			toggleBtn.classList.add("lmw-hidden");
-			// Position AFTER unhiding so getBoundingClientRect returns real size.
-			positionAtBottomRight();
-			try { inputEl.focus(); } catch (e) { /* noop */ }
-			// Fire-and-forget the hub-picker fetch on first open; subsequent
-			// opens are no-ops (pickerLoaded flag). We deliberately don't
-			// await — the widget is immediately usable with the initial MODEL
-			// and no hub tools; pickers populate a moment later.
-			ensurePickerLoaded().catch(function(e) { console.warn("[widget] picker load failed:", e); });
-		} else {
-			saveCurrentSize();          // capture whatever the user resized to
-			root.classList.add("lmw-collapsed");
-			toggleBtn.classList.remove("lmw-hidden");
-		}
-		try { localStorage.setItem(STORAGE_KEY_OPEN, open ? "1" : "0"); } catch (e) { /* noop */ }
-	}
-	var initialOpen = false;
-	try { initialOpen = localStorage.getItem(STORAGE_KEY_OPEN) === "1"; } catch (e) { /* noop */ }
-	setOpen(initialOpen);
-	window.addEventListener("resize", function() {
-		if (!root.classList.contains("lmw-collapsed")) positionAtBottomRight();
-	});
-
-	toggleBtn.addEventListener("click", function() { setOpen(true); });
-	hideBtn.addEventListener("click", function() { setOpen(false); });
-
-	// Persist size on every resize interaction. ResizeObserver fires
-	// continuously during a drag; save + reposition on each tick so the
-	// widget stays anchored to bottom-right as the user grows it.
-	if (typeof ResizeObserver === "function") {
-		var sawFirstResizeTick = false;
-		var ro = new ResizeObserver(function() {
-			if (root.classList.contains("lmw-collapsed")) return;
-			positionAtBottomRight();
-			// ResizeObserver always delivers an initial observation, and that
-			// one reports whatever the layout happened to be mid-boot. Only
-			// later ticks can be a user dragging the corner.
-			if (!sawFirstResizeTick) { sawFirstResizeTick = true; return; }
-			saveCurrentSize();
-		});
-		ro.observe(root);
-	}
-
-	// [{role, content, tools}] — grows across turns. `tools` is for the
-	// transcript only; the model is sent role and content.
-	var conversation = [];
-
-	// A page action that navigates used to take the conversation with it. The
-	// transcript lives in sessionStorage — per tab, gone when the tab closes —
-	// keyed by path, so submitting a form and landing back on the same page
-	// with a new query string keeps the thread.
-	var conversationStore = createConversationStore({
-		storage: window.sessionStorage,
-		key:     conversationKeyFor(window.location)
-	});
-
-	function persistConversation() {
-		conversationStore.save({
-			turns: conversation,
-			open:  !root.classList.contains("lmw-collapsed"),
-			model: MODEL
-		});
-	}
-	var actionsSchemaEl = document.getElementById(ACTIONS_SCHEMA_ID);
-	var localTools = actionsSchemaEl ? JSON.parse(actionsSchemaEl.textContent) : [];
-	var remoteToolsEl = document.getElementById(REMOTE_TOOLS_SCHEMA_ID);
-	// remoteTools is a mutable live list: starts from the schema-provided
-	// baseline (if any), then the level-1 picker adds/removes entries as
-	// the visitor toggles server checkboxes. Passed to runChatLoop on
-	// every submit so the current selection is respected turn-by-turn.
-	var remoteTools = remoteToolsEl ? JSON.parse(remoteToolsEl.textContent) : [];
-
-	// Level-1 picker caches. hubMcpServers[] is the list of anon-visible
-	// servers fetched from GET /api/mcp_servers; each server has an
-	// embedded `tools` array. selectedToolIds is the set of *individual*
-	// tool ids currently ON — same granularity as chat.aibranch.org's
-	// tool_selector: each tool can be toggled individually, and each
-	// server has a bulk-toggle checkbox that reflects/drives its children's
-	// state (all-on / indeterminate / all-off).
-	var hubMcpServers = [];
-	var selectedToolIds = new Set();
-
-	function anyAllowedByAllowlist(name, allowlist) {
-		return allowlist === null || allowlist.indexOf(name) >= 0;
-	}
-
-	function refreshRemoteToolsFromPicker() {
-		// Flatten every SELECTED tool (across all servers) into remoteTools,
-		// adapted to runChatLoop's expected { id, name, description, input_schema }.
-		var flat = [];
-		hubMcpServers.forEach(function(s) {
-			(s.tools || []).forEach(function(t) {
-				if (!selectedToolIds.has(t.id)) return;
-				flat.push({
-					id:           t.id,
-					name:         t.name,
-					description:  t.description,
-					input_schema: t.input_schema
-				});
-			});
-		});
-		remoteTools = flat;
-		if (toolsCountEl) {
-			toolsCountEl.textContent = flat.length;
-			toolsCountEl.classList.toggle("lmw-tools-count-zero", flat.length === 0);
-		}
-	}
-
-	// Reflect the mix of child-tool states onto a server's bulk checkbox
-	// (checked / indeterminate / unchecked). Called after any child
-	// checkbox change, and after applying a bulk toggle.
-	function refreshServerBulkCheckbox(server, bulkCheckbox) {
-		var tools = server.tools || [];
-		var n = tools.length;
-		if (n === 0) { bulkCheckbox.checked = false; bulkCheckbox.indeterminate = false; return; }
-		var onCount = 0;
-		tools.forEach(function(t) { if (selectedToolIds.has(t.id)) onCount++; });
-		bulkCheckbox.checked       = (onCount === n);
-		bulkCheckbox.indeterminate = (onCount > 0 && onCount < n);
-	}
-
-	async function loadHubResourcesForPickers() {
-		// Called once on first widget open (idempotent — pickerLoaded flag
-		// below). Fetches models + MCP servers from the hub's anon endpoints
-		// and populates each picker. Non-fatal if either fetch fails (widget
-		// still works with the initial `model:` + no hub tools).
-		var tasks = [];
-
-		if (ENABLE_MODEL_PICKER && modelPicker && LLM_PROVIDER === "ollama") {
-			// No hub to ask: Ollama lists its own models.
-			tasks.push(fetchOllamaModels({ baseUrl: LLM_BASE }).then(function(names) {
-				var flat = names
-					.filter(function(n) { return anyAllowedByAllowlist(n, MODEL_ALLOWLIST); })
-					.map(function(n) { return { value: n, label: n }; });
-				if (!flat.some(function(m) { return m.value === MODEL; })) {
-					flat.unshift({ value: MODEL, label: MODEL });
-				}
-				modelPicker.innerHTML = "";
-				flat.forEach(function(m) {
-					var opt = document.createElement("option");
-					opt.value = m.value;
-					opt.textContent = m.label;
-					if (m.value === MODEL) opt.selected = true;
-					modelPicker.appendChild(opt);
-				});
-				if (flat.length > 1) modelPicker.style.display = "";
-			}));
-		} else if (ENABLE_MODEL_PICKER && modelPicker) {
-			tasks.push(fetch(LLM_BASE + "/api/llms", { headers: { "Accept": "application/json" } })
-				.then(function(r) { return r.ok ? r.json() : { llms: [] }; })
-				.then(function(payload) {
-					// /api/llms is heterogeneous per family:
-					//   - OpenAI/Anthropic/Google: `models: [{ name, display_name, ... }]`
-					//   - Ollama:                   `available_models: [{ value, label, ... }]`
-					// Anon widget uses api_key_uuid = "ollama-local" so only Ollama models
-					// are invocable; filter to that family and use its subshape.
-					var flat = [];
-					(payload.llms || []).forEach(function(llm) {
-						if (llm.family !== "ollama") return;
-						(llm.available_models || []).forEach(function(m) {
-							if (anyAllowedByAllowlist(m.value, MODEL_ALLOWLIST)) {
-								flat.push({ value: m.value, label: m.label });
-							}
-						});
-					});
-					// Ensure the host-configured MODEL is in the list even if the
-					// server doesn't return it — visitor should always see the
-					// current selection, and we don't want to silently switch.
-					if (!flat.some(function(m) { return m.value === MODEL; })) {
-						flat.unshift({ value: MODEL, label: MODEL });
-					}
-					modelPicker.innerHTML = "";
-					flat.forEach(function(m) {
-						var opt = document.createElement("option");
-						opt.value = m.value;
-						opt.textContent = m.label;
-						if (m.value === MODEL) opt.selected = true;
-						modelPicker.appendChild(opt);
-					});
-					if (flat.length > 1) modelPicker.style.display = "";
-				})
-				.catch(function(e) { console.warn("[widget] model list fetch failed:", e); }));
-		}
-
-		if (ENABLE_TOOL_PICKER && toolsListEl) {
-			tasks.push(fetch(TOOL_HUB_BASE + "/api/mcp_servers", { headers: { "Accept": "application/json" } })
-				.then(function(r) { return r.ok ? r.json() : { mcp_servers: [] }; })
-				.then(function(payload) {
-					hubMcpServers = (payload.mcp_servers || []).filter(function(s) {
-						return anyAllowedByAllowlist(s.name, HUB_TOOLS_ALLOWLIST);
-					});
-					toolsListEl.innerHTML = "";
-					if (hubMcpServers.length === 0) {
-						var empty = document.createElement("div");
-						empty.className = "lmw-tools-empty";
-						empty.textContent = "No hub-registered tools available.";
-						toolsListEl.appendChild(empty);
-						return;
-					}
-					hubMcpServers.forEach(function(s) {
-						var serverBlock = document.createElement("div");
-						serverBlock.className = "lmw-tools-server";
-
-						// Server header row: bulk checkbox + name + tool count + expand caret.
-						// Bulk checkbox toggles ALL of the server's tools at once and reflects
-						// the mix of child states (indeterminate when partial).
-						var headerRow = document.createElement("div");
-						headerRow.className = "lmw-tools-server-row";
-
-						var bulkCb = document.createElement("input");
-						bulkCb.type = "checkbox";
-						bulkCb.className = "lmw-tools-server-bulk";
-						bulkCb.title = "Enable all tools on this server";
-						bulkCb.addEventListener("click", function(e) {
-							// Prevent header-row click from toggling expand.
-							e.stopPropagation();
-						});
-						bulkCb.addEventListener("change", function() {
-							var shouldOn = bulkCb.checked;
-							(s.tools || []).forEach(function(t) {
-								if (shouldOn) selectedToolIds.add(t.id);
-								else          selectedToolIds.delete(t.id);
-							});
-							bulkCb.indeterminate = false;
-							// Sync every visible individual checkbox for this server.
-							childList.querySelectorAll('input[type="checkbox"]').forEach(function(cb) {
-								cb.checked = shouldOn;
-							});
-							refreshRemoteToolsFromPicker();
-						});
-
-						var nameSpan = document.createElement("span");
-						nameSpan.className = "lmw-tools-server-name";
-						var toolCount = (s.tools || []).length;
-						nameSpan.textContent = s.name + " (" + toolCount + " tool" + (toolCount === 1 ? "" : "s") + ")";
-
-						var caret = document.createElement("span");
-						caret.className = "lmw-tools-server-caret";
-						caret.textContent = "▸";
-
-						headerRow.appendChild(bulkCb);
-						headerRow.appendChild(nameSpan);
-						headerRow.appendChild(caret);
-
-						// Individual-tool rows — one checkbox per tool, indented.
-						// Hidden by default; header click expands. This mirrors
-						// chat.aibranch.org's lazy-expand server UX.
-						var childList = document.createElement("div");
-						childList.className = "lmw-tools-server-children";
-						childList.style.display = "none";
-
-						(s.tools || []).forEach(function(t) {
-							var toolLabel = document.createElement("label");
-							toolLabel.className = "lmw-tools-item lmw-tools-item-child";
-							toolLabel.title = t.description || t.name;
-							var cb = document.createElement("input");
-							cb.type = "checkbox";
-							cb.value = t.id;
-							cb.checked = selectedToolIds.has(t.id);
-							cb.addEventListener("change", function() {
-								if (cb.checked) selectedToolIds.add(t.id);
-								else            selectedToolIds.delete(t.id);
-								refreshServerBulkCheckbox(s, bulkCb);
-								refreshRemoteToolsFromPicker();
-							});
-							var span = document.createElement("span");
-							span.textContent = t.name;
-							toolLabel.appendChild(cb);
-							toolLabel.appendChild(span);
-							childList.appendChild(toolLabel);
-						});
-
-						headerRow.addEventListener("click", function() {
-							var isOpen = childList.style.display !== "none";
-							childList.style.display = isOpen ? "none" : "block";
-							caret.textContent = isOpen ? "▸" : "▾";
-						});
-
-						serverBlock.appendChild(headerRow);
-						serverBlock.appendChild(childList);
-						toolsListEl.appendChild(serverBlock);
-
-						// Initial bulk-checkbox state (all unchecked at first render).
-						refreshServerBulkCheckbox(s, bulkCb);
-					});
-					refreshRemoteToolsFromPicker();
-				})
-				.catch(function(e) { console.warn("[widget] MCP server list fetch failed:", e); }));
-		}
-
-		await Promise.all(tasks);
-	}
-
-	if (modelPicker) {
-		modelPicker.addEventListener("change", function() { MODEL = modelPicker.value; });
-	}
-
-	// Close the tools dropdown on any click outside its area. Native
-	// <details> only closes on summary re-click; visitors expect a
-	// dropdown/popover to dismiss on outside click, matching native
-	// select/menu behavior. `.contains(target)` includes the summary
-	// AND the drop-down list (both are descendants of the <details>).
-	if (toolsPicker) {
-		document.addEventListener("click", function(e) {
-			if (!toolsPicker.open) return;
-			if (toolsPicker.contains(e.target)) return;
-			toolsPicker.open = false;
-		});
-	}
-
-	var pickerLoaded = false;
-	async function ensurePickerLoaded() {
-		if (pickerLoaded) return;
-		pickerLoaded = true;   // set first so parallel opens don't double-fetch
-		try { await loadHubResourcesForPickers(); }
-		catch (e) { pickerLoaded = false; throw e; }
-	}
-
-	// Fetch well-known MCP manifests at boot. Auto-discovers same origin
-	// if WELL_KNOWN_URLS is null; empty array disables entirely.
-	var hostWideTools = [];
-	var hostWidePrompts = [];
-	var resourceContext = null;   // payload of the host's reference resource
-	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
-	// conversation on a 32k-context local model — production PubDictionaries
-	// is 218 dictionaries / ~35KB / ~10k tokens.
-	var RESOURCE_BUDGET_BYTES = 8000;
-
-
-	// Before anything asynchronous: if this page was navigated away from and
-	// back, the visitor should see their conversation immediately.
-	restoreConversation();
-
-	var wellKnownReady = (async function() {
-		var urls = WELL_KNOWN_URLS === null
-			? [ window.location.origin + "/.well-known/mcp.json" ]
-			: WELL_KNOWN_URLS;
-		for (var i = 0; i < urls.length; i++) {
-			var tools = await fetchMcpManifest(urls[i]);
-			hostWideTools = hostWideTools.concat(tools);
-		}
-
-		// The manifest publishes TOOLS only, so the endpoints are learned from
-		// them. A server offering only prompts or resources is invisible here —
-		// worth knowing when deciding what a static manifest should carry.
-		var endpoints = [];
-		hostWideTools.forEach(function(t) {
-			if (t.endpoint && endpoints.indexOf(t.endpoint) === -1) endpoints.push(t.endpoint);
-		});
-
-		for (var j = 0; j < endpoints.length; j++) {
-			var endpoint = endpoints[j];
-			var prompts = await listMcpPrompts({ endpoint: endpoint });
-			hostWidePrompts = hostWidePrompts.concat(prompts);
-
-			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.
-				var loaded = await loadHostResource({
-					endpoint:    endpoint,
-					budgetBytes: RESOURCE_BUDGET_BYTES,
-					list:        listMcpResources,
-					read:        readMcpResource,
-					onSkip: function(plan) {
-						console.info("[llm_meta_widget] not attaching " + plan.uri +
-						             " (" + plan.reason + ", sizeBytes=" + plan.sizeBytes + ")");
-					}
-				});
-				// 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 --------------------------------
-	//
-	// One button per prompt the host's MCP server offers. Clicking it fills
-	// the prompt's arguments from page state, asks the server to materialise
-	// the message (prompts/get), then drops the text into the textarea and
-	// submits — so it travels the exact path a typed message does.
-
-	var promptsEl = root.querySelector(".lmw-prompts");
-
-	function renderPromptButtons() {
-		if (!promptsEl) return;
-		promptsEl.textContent = "";
-		if (!hostWidePrompts.length) { promptsEl.style.display = "none"; return; }
-
-		hostWidePrompts.forEach(function(prompt) {
-			var props = promptButtonProps(prompt);
-			var button = document.createElement("button");
-			button.type = "button";
-			button.className = "lmw-prompt";
-			button.textContent = props.label;
-			button.title = props.title;
-			button.addEventListener("click", function() { runPromptTemplate(prompt, button); });
-			promptsEl.appendChild(button);
-		});
-		promptsEl.style.display = "";
-	}
-
-	// Put a saved transcript back on screen: the same bubbles, the same
-	// markdown, and the same record of which tools ran. Called once at boot,
-	// before the welcome block, which is only for a genuinely fresh start.
-	function restoreConversation() {
-		var saved = conversationStore.load();
-		if (!saved || !saved.turns.length) return false;
-
-		conversation = saved.turns;
-		saved.turns.forEach(function(turn) {
-			var body = appendTurn(turn.role, turn.role === "assistant" ? "" : turn.content);
-			if (turn.role === "assistant") renderMarkdownInto(body, turn.content || "");
-			if (!turn.tools || !turn.tools.length) return;
-			var row = document.createElement("div");
-			row.className = "lmw-tool-chips";
-			turn.tools.forEach(function(tool) {
-				var chip = document.createElement("span");
-				chip.className = "lmw-tool-chip" + (tool.error ? " error" : "");
-				chip.textContent = (tool.error ? "❌ " : "🔧 ") + tool.name;
-				row.appendChild(chip);
-			});
-			if (body.parentNode) body.parentNode.appendChild(row);
-		});
-		historyEl.scrollTop = historyEl.scrollHeight;
-		return true;
-	}
-
-	// 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() {
-		// A restored transcript is not a fresh start; the greeting would push
-		// the conversation the visitor is mid-way through off the screen.
-		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;
-		var missing = resolved.missing;
-
-		// Say which page field is empty rather than letting the server answer
-		// -32602 for something the user can actually fix on screen.
-		if (missing.length) {
-			appendTurn("error", "Cannot run \"" + (prompt.title || prompt.name) + "\" yet — nothing to use for: " +
-			                     missing.join(", ") + ". Fill that in on the page first.");
-			return;
-		}
-
-		button.disabled = true;
-		try {
-			var result = await getMcpPrompt({ endpoint: prompt.endpoint, name: prompt.name, args: args });
-			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) {
-			appendTurn("error", "Prompt failed: " + (e && e.message ? e.message : e));
-		} finally {
-			button.disabled = false;
-		}
-	}
-
-	// 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");
-		label.className = "message-role";
-		label.textContent = roleLabel(role);
-		var body = document.createElement("div");
-		body.className = "message-content";
-		// User / system / error turns render as plain text (safe from any
-		// injection via user input or server-supplied strings). Assistant
-		// content is rendered as markdown but only after the assistant's
-		// text is streamed in via renderMarkdownInto — this appendTurn
-		// creates the empty container.
-		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;
-	}
-
-	// Render a raw-markdown buffer into an element's innerHTML. marked's
-	// default HTML output escapes user content, so passing arbitrary
-	// LLM output is safe against XSS. Called per-delta so streaming
-	// assistant text formats live (headings/lists/code blocks/etc.).
-	function renderMarkdownInto(el, mdText) {
-		try { el.innerHTML = marked.parse(mdText); }
-		catch (e) { el.textContent = mdText; }  // fall back to raw on parse error
-	}
-
-	// Role labels mirror llm_meta_chat's chats/_message.html.erb:
-	//   user      → "👤 You"
-	//   assistant → "🤖 <model>"
-	// so the widget reads as the same UI as the full chat host.
-	function roleLabel(role) {
-		if (role === "user")      return "👤 You";
-		if (role === "assistant") return "🤖 " + MODEL;
-		if (role === "system")    return "• system";
-		if (role === "error")     return "⚠ error";
-		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");
-	}
-
-	// Tool chips, written as the tools run rather than assembled at the end.
-	// The end-of-turn footer was invisible for as long as the turn lasted —
-	// minutes on a thinking model — so a visitor watched tools execute with
-	// no idea which ones.
-	var liveChips = null;      // the container inside the current bubble
-	var pendingChips = [];     // chips awaiting their outcome, oldest first
-
-	function chipRow() {
-		if (liveChips && liveChips.parentNode) return liveChips;
-		if (!activeAssistantBody || !activeAssistantBody.parentNode) return null;
-		liveChips = document.createElement("div");
-		liveChips.className = "lmw-tool-chips";
-		// Inside the bubble but OUTSIDE .message-content: every text delta
-		// re-renders that element's markdown from scratch, which silently
-		// erased any chip already written into it.
-		activeAssistantBody.parentNode.appendChild(liveChips);
-		return liveChips;
-	}
-
-	function announceToolCall(toolCall) {
-		var row = chipRow();
-		if (!row) return;
-		var chip = document.createElement("span");
-		chip.className = "lmw-tool-chip running";
-		chip.textContent = "⏳ " + toolCall.name;
-		chip.dataset.tool = toolCall.name;
-		row.appendChild(chip);
-		pendingChips.push(chip);
-		historyEl.scrollTop = historyEl.scrollHeight;
-	}
-
-	function resolveToolCall(outcome) {
-		// Match by name, oldest first: ids are not always echoed back, and a
-		// repeated name resolves in call order.
-		var idx = pendingChips.findIndex(function(c) { return c.dataset.tool === outcome.toolCall.name; });
-		var chip = idx === -1 ? null : pendingChips.splice(idx, 1)[0];
-		if (!chip) return;
-		chip.className = "lmw-tool-chip" + (outcome.error ? " error" : "");
-		chip.textContent = (outcome.error ? "❌ " : "🔧 ") + outcome.toolCall.name;
-		if (outcome.error) chip.title = outcome.error.message || String(outcome.error);
-	}
-
-	var currentThinkingBlock = null;
-	var currentThinkingBody  = null;
-	// The assistant bubble of the turn in flight. Reasoning belongs ABOVE that
-	// bubble's content, the way llm_meta_chat places it — appending it to the
-	// transcript instead left it below the answer it was reasoning towards.
-	var activeAssistantBody  = null;
-
-	function ensureThinkingBlock() {
-		if (currentThinkingBody) return currentThinkingBody;
-		// Class names match llm_meta_chat's .message-thinking pattern so
-		// the shared conversation.css applies directly.
-		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);
-		details.appendChild(body);
-		if (activeAssistantBody && activeAssistantBody.parentNode) {
-			activeAssistantBody.parentNode.insertBefore(details, activeAssistantBody);
-		} else {
-			historyEl.appendChild(details);
-		}
-		historyEl.scrollTop = historyEl.scrollHeight;
-		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 = "🤔 thinking (finished)";
-		}
-		currentThinkingBlock = null;
-		currentThinkingBody  = null;
-	}
-
-	function currentPageState() {
-		var reader = window[STATE_GLOBAL] || {};
-		var out = {};
-		Object.keys(reader).forEach(function(k) {
-			try { out[k] = reader[k](); } catch (e) { out[k] = "<error: " + e.message + ">"; }
-		});
-		return out;
-	}
-
-	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, 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(resourceLines || []).join("\n");
-	}
-
-	// 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)
-	// terminate an in-flight runChatLoop.
-	var currentAbort = null;
-
-	clearBtn.addEventListener("click", function() {
-		if (currentAbort) { try { currentAbort.abort(); } catch (e) { /* noop */ } }
-		conversation = [];
-		conversationStore.clear();
-		historyEl.innerHTML = "";
-		renderWelcome();
-	});
-
-	// Enter submits, Shift+Enter inserts a newline — matches llm_meta_chat's
-	// input UX so users can type multi-line prompts without accidentally
-	// firing the form.
-	inputEl.addEventListener("keydown", function(e) {
-		if (e.key === "Enter" && !e.shiftKey && !e.isComposing) {
-			e.preventDefault();
-			if (typeof formEl.requestSubmit === "function") formEl.requestSubmit();
-			else formEl.dispatchEvent(new Event("submit", { cancelable: true }));
-		}
-	});
-
-	formEl.addEventListener("submit", async function(event) {
-		event.preventDefault();
-		var userText = inputEl.value.trim();
-		if (!userText) return;
-		inputEl.value = "";
-		appendTurn("user", userText, pendingTurnLabel);
-		pendingTurnLabel = null;
-
-		if (currentAbort) { try { currentAbort.abort(); } catch (e) { /* noop */ } }
-		currentAbort = new AbortController();
-
-		var assistantBody = appendTurn("assistant", "");
-		activeAssistantBody = assistantBody;
-		liveChips = null;
-		pendingChips = [];
-		markWorking(assistantBody.roleLabel);
-		var assistantMarkdown = "";  // accumulate raw markdown, re-render on each delta
-
-		try {
-			// Discovery has to finish before the system prompt is built: the
-			// resource catalog is attached to the first turn only, so building
-			// messages first would silently ship that turn without it AND mark
-			// it as sent.
-			await wellKnownReady;
-
-			var resourceLines = await resourceLinesForThisTurn();
-			var messages = [{ role: "system", content: currentSystemPrompt(resourceLines) }]
-				.concat(conversation.map(function(t) { return { role: t.role, content: t.content }; }))
-				.concat([{ role: "user", content: userText }]);
-
-			var result = await runChatLoop({
-				baseUrl:       LLM_BASE,
-				toolHubUrl:    TOOL_HUB_BASE,
-				apiKeyUuid:    API_KEY_UUID,
-				modelName:     MODEL,
-				messages:      messages,
-				localTools:    localTools,
-				remoteTools:   remoteTools,
-				hostWideTools: hostWideTools,
-				aiActions:     window[ACTIONS_GLOBAL] || {},
-				maxRounds:     MAX_ROUNDS,
-				provider:      LLM_PROVIDER === "ollama" ? "ollama" : "hub",
-				signal:        currentAbort.signal,
-				onToolCall: function(toolCall) { announceToolCall(toolCall); },
-				onToolDispatched: function(outcome) { resolveToolCall(outcome); },
-				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
-					// models sometimes emit tool_calls in >1 round instead of
-					// synthesizing right away; keeping one bubble makes the
-					// resulting conversation read as ONE reply rather than a
-					// debug trace with round separators.
-					collapseThinkingBlock();
-				},
-				onThinkingDelta: function(delta) {
-					var body = ensureThinkingBlock();
-					body.appendChild(document.createTextNode(delta));
-					body.scrollTop = body.scrollHeight;
-					historyEl.scrollTop = historyEl.scrollHeight;
-				},
-				onTextDelta: function(delta) {
-					markDone(assistantBody.roleLabel);
-					collapseThinkingBlock();
-					assistantMarkdown += delta;
-					renderMarkdownInto(assistantBody, assistantMarkdown);
-					historyEl.scrollTop = historyEl.scrollHeight;
-				}
-			});
-			conversation.push({ role: "user", content: userText });
-			conversation.push({
-				role:    "assistant",
-				content: result.content,
-				// Kept so a restored transcript still shows what ran — losing
-				// that record is what made a navigating action unbearable.
-				tools:   result.dispatched.map(function(d) {
-					return d.error ? { name: d.toolCall.name, error: true } : { name: d.toolCall.name };
-				})
-			});
-			persistConversation();
-
-			// Anything still pending never reported an outcome (a class that
-			// does not round-trip, or a dispatch that vanished). Reconcile
-			// from the loop's own record so no chip is left spinning.
-			result.dispatched.forEach(function(d) { resolveToolCall(d); });
-			pendingChips.forEach(function(chip) {
-				chip.className = "lmw-tool-chip";
-				chip.textContent = "🔧 " + chip.dataset.tool;
-			});
-			pendingChips = [];
-
-			// Skipped = LLM tried a tool that doesn't exist. Real signal.
-			if (result.skipped.length > 0) {
-				appendTurn("system", "Not available on this page: " +
-					result.skipped.map(function(t) { return t.name; }).join(", "));
-			}
-			// Loop termination reasons:
-			//   "duplicate_tool_calls" — LLM re-called an already-invoked
-			//     tool; the earlier round's dispatch already produced the
-			//     answer/effect, so we silently absorb this (no user warning).
-			//   otherwise (e.g. max_rounds) — the loop hit a real hard cap
-			//     that likely truncated the response; user should know.
-			if (result.stopped_reason && result.stopped_reason !== "duplicate_tool_calls") {
-				appendTurn("system",
-					"The assistant reached its tool-use limit before finishing. " +
-					"The reply above may be incomplete — try asking again or rephrasing.");
-			}
-		} catch (err) {
-			if (err.name === "AbortError" || /aborted/i.test(err.message || "")) {
-				appendTurn("system", "⏹ stopped");
-			} else {
-				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();
-			activeAssistantBody = null;
-			currentAbort = null;
-		}
-	});
-</script>
+<%# into rendered HTML. One line per comment keeps them self-terminating. %>
+<script type="module" src="<%= element_path %>"></script>
+<llm-meta-widget
+  llm-url="<%= llm_url %>"
+  model="<%= model %>"
+  <%= tag_attr("tool-hub-url", tool_hub_url) %>
+  <%= tag_attr("llm-provider", llm_provider) %>
+  <%= tag_attr("api-key-uuid", api_key_uuid) %>
+  <%= tag_attr("greeting", greeting) %>
+  <%= tag_attr("max-rounds", max_rounds) %>
+  <%= tag_attr("actions-schema-id", actions_schema_id) %>
+  <%= tag_attr("state-global", state_global) %>
+  <%= tag_attr("actions-global", actions_global) %>
+  <%= tag_attr("remote-tools-schema-id", remote_tools_schema_id) %>
+  <%# Pickers default to true in the element, so only emit the disabling value. %>
+  <%= enable_model_picker ? "" : 'enable-model-picker="false"'.html_safe %>
+  <%= enable_tool_picker ? "" : 'enable-tool-picker="false"'.html_safe %>
+  <%# Allowlists: nil omits the attribute, which the element reads as "no %>
+  <%# allowlist". An empty array would mean the same thing, so it omits too. %>
+  <%= tag_attr("models", Array(models).join(",").presence) %>
+  <%= tag_attr("hub-tools", Array(hub_tools).join(",").presence) %>
+  <%# well-known-urls is tri-state and this is the mapping that preserves it: %>
+  <%#   nil   -> attribute omitted  -> auto-discover same-origin %>
+  <%#   []    -> well-known-urls="" -> discovery off %>
+  <%#   [a,b] -> "a,b"              -> fetch those %>
+  <%= well_known_attr(well_known_urls) %>
+></llm-meta-widget>