llm_meta_widget 0.1.0

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

@@ -0,0 +1,962 @@
+<%# Chat-panel widget for the client-orchestrated flow. Render via the %>
+<%# llm_meta_widget helper — see llm_meta_widget_helper.rb for options. %>
+<%# %>
+<%# 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. %>
+<%# %>
+<%# 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). %>
+<%#   (b) window.aiState — reader functions called each turn. %>
+<%#   (c) window.aiActions — action implementations invoked after the LLM %>
+<%#       turn completes. %>
+<%# %>
+<%# 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 .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">
+		<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 } 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 });
+
+	var META_BASE              = <%= base_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 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 ENABLE_MODEL_PICKER    = <%= enable_model_picker.to_json.html_safe %>;
+	var ENABLE_TOOL_PICKER     = <%= enable_tool_picker.to_json.html_safe %>;
+	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
+
+	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 (w > 0 && h > 0) {
+				root.style.width  = w + "px";
+				root.style.height = h + "px";
+			}
+		} catch (e) { /* noop */ }
+	}
+	function saveCurrentSize() {
+		try {
+			var rect = root.getBoundingClientRect();
+			localStorage.setItem(STORAGE_KEY_SIZE,
+				Math.round(rect.width) + "x" + Math.round(rect.height));
+		} 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() {
+		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";
+	}
+
+	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);
+
+	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 ro = new ResizeObserver(function() {
+			if (root.classList.contains("lmw-collapsed")) return;
+			positionAtBottomRight();
+			saveCurrentSize();
+		});
+		ro.observe(root);
+	}
+
+	var conversation = [];  // [{role, content}, ...] — grows across turns
+	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) {
+			tasks.push(fetch(META_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(META_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 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);
+		}
+	})();
+
+	function appendTurn(role, text) {
+		// 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 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.
+		body.textContent = text;
+		div.appendChild(label);
+		div.appendChild(document.createTextNode(" "));
+		div.appendChild(body);
+		historyEl.appendChild(div);
+		historyEl.scrollTop = historyEl.scrollHeight;
+		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;
+	}
+
+	var currentThinkingBlock = null;
+	var currentThinkingBody  = 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;
+		var summary = document.createElement("summary");
+		summary.textContent = "🤔 thinking…";
+		var body = document.createElement("div");
+		body.className = "message-thinking-content";
+		details.appendChild(summary);
+		details.appendChild(body);
+		historyEl.appendChild(details);
+		historyEl.scrollTop = historyEl.scrollHeight;
+		currentThinkingBlock = details;
+		currentThinkingBody  = body;
+		return body;
+	}
+
+	function collapseThinkingBlock() {
+		if (currentThinkingBlock) {
+			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() {
+		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.",
+			"",
+			"Current page state:",
+			JSON.stringify(currentPageState(), null, 2)
+		].join("\n");
+	}
+
+	// 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 = [];
+		historyEl.innerHTML = "";
+	});
+
+	// 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(e) {
+		e.preventDefault();
+		var userText = inputEl.value.trim();
+		if (!userText) return;
+		inputEl.value = "";
+		appendTurn("user", userText);
+
+		if (currentAbort) { try { currentAbort.abort(); } catch (e) { /* noop */ } }
+		currentAbort = new AbortController();
+
+		var messages = [{ role: "system", content: currentSystemPrompt() }]
+			.concat(conversation)
+			.concat([{ role: "user", content: userText }]);
+
+		var assistantBody = appendTurn("assistant", "");
+		var assistantMarkdown = "";  // accumulate raw markdown, re-render on each delta
+
+		try {
+			await wellKnownReady;
+
+			var result = await runChatLoop({
+				baseUrl:       META_BASE,
+				apiKeyUuid:    API_KEY_UUID,
+				modelName:     MODEL,
+				messages:      messages,
+				localTools:    localTools,
+				remoteTools:   remoteTools,
+				hostWideTools: hostWideTools,
+				aiActions:     window[ACTIONS_GLOBAL] || {},
+				maxRounds:     MAX_ROUNDS,
+				signal:        currentAbort.signal,
+				onRoundStart: function(roundIdx) {
+					// 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) {
+					collapseThinkingBlock();
+					assistantMarkdown += delta;
+					renderMarkdownInto(assistantBody, assistantMarkdown);
+					historyEl.scrollTop = historyEl.scrollHeight;
+				}
+			});
+			conversation.push({ role: "user",      content: userText });
+			conversation.push({ role: "assistant", content: result.content });
+
+			// Append a compact "tools used" footer INSIDE the assistant
+			// bubble so users have visual confirmation of what the LLM
+			// actually did — especially important when the LLM's own text
+			// is incomplete (e.g. "Let me first search…" with no follow-up
+			// synthesis, common with weaker tool-use models).
+			if (result.dispatched.length > 0) {
+				var chips = document.createElement("div");
+				chips.className = "lmw-tool-chips";
+				result.dispatched.forEach(function(d) {
+					var chip = document.createElement("span");
+					chip.className = "lmw-tool-chip" + (d.error ? " error" : "");
+					chip.textContent = (d.error ? "❌ " : "🔧 ") + d.toolCall.name;
+					if (d.error) chip.title = d.error.message;
+					chips.appendChild(chip);
+				});
+				assistantBody.appendChild(chips);
+			}
+
+			// 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 {
+			currentAbort = null;
+		}
+	});
+</script>