llm_meta_widget 0.6.0 → 0.7.0

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

@@ -220,7 +220,7 @@ function indexOfEither(str, a, b) {
 }
 
 // ---------------------------------------------------------------------------
-// runTurn — one LLM turn + fire-and-forget local dispatch
+// runTurn — one LLM turn + local dispatch, results fed back
 // ---------------------------------------------------------------------------
 //
 // The Piece-B primitive: driven by `singleLlmCall`, then after `done` invokes
@@ -290,7 +290,7 @@ export async function dispatchLocalToolCalls(toolCalls, aiActions) {
 //   1. call `singleLlmCall` with merged local_tools (Class 2 + 3 schemas) +
 //      tool_ids (Class 1 references)
 //   2. classify emitted tool_calls by name (aiActions → hostWide → remote → unknown)
-//   3. dispatch Class 3 fire-and-forget
+//   3. dispatch Class 3 locally, keeping each outcome as a tool result
 //   4. dispatch Class 2 via direct MCP; Class 1 via meta-server proxy;
 //      collect results in emission order
 //   5. if any round-trip results, append assistant-with-tool_calls turn and
@@ -458,7 +458,7 @@ export async function runChatLoop(opts) {
       }
     }
 
-    // Class 3: locals — fire-and-forget
+    // Class 3: locals — dispatched here, round-tripped just below
     const localOut = await dispatchLocalToolCalls(localCalls, aiActions)
     allDispatched.push(...localOut.dispatched)
 

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

@@ -0,0 +1,363 @@
+/* The chat panel's own styles. Extracted from _chat_panel.html.erb when the
+   panel became a custom element; bundled into the element so a non-Rails host
+   serves no stylesheet of its own. Conversation-surface styles (bubbles, role
+   labels, thinking blocks) stay in conversation.css. */
+	/* 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; }

data/app/controllers/llm_meta_widget/assets_controller.rb

@@ -16,6 +16,13 @@ module LlmMetaWidget
     # side effects and no authenticated context to protect.
     skip_forgery_protection
 
+    # The bundled element. Generated by `npm run build`, committed, and shipped
+    # in the gem — a gem cannot run a build step on install, so the artefact has
+    # to be in the package. `npm test` fails if it drifts from its sources.
+    ELEMENT_PATH = File.expand_path("../../assets/javascripts/llm_meta_widget/llm-meta-widget.js", __dir__).freeze
+    ELEMENT_BODY = File.read(ELEMENT_PATH).freeze
+    ELEMENT_ETAG = %("#{Digest::SHA1.hexdigest(ELEMENT_BODY)}").freeze
+
     ORCHESTRATOR_PATH = File.expand_path("../../assets/javascripts/llm_meta_widget/orchestrator.js", __dir__).freeze
     ORCHESTRATOR_BODY = File.read(ORCHESTRATOR_PATH).freeze
     ORCHESTRATOR_ETAG = %("#{Digest::SHA1.hexdigest(ORCHESTRATOR_BODY)}").freeze
@@ -33,6 +40,10 @@ module LlmMetaWidget
     MARKED_BODY = File.read(MARKED_PATH).freeze
     MARKED_ETAG = %("#{Digest::SHA1.hexdigest(MARKED_BODY)}").freeze
 
+    def element
+      serve_asset(ELEMENT_BODY, ELEMENT_ETAG, "text/javascript")
+    end
+
     def orchestrator
       serve_asset(ORCHESTRATOR_BODY, ORCHESTRATOR_ETAG, "text/javascript")
     end

data/app/helpers/llm_meta_widget/widget_helper.rb

@@ -1,16 +1,23 @@
 module LlmMetaWidget
   # Renders the client-orchestrated chat widget on the current page.
   #
-  #   <%= llm_meta_widget(base_url: "https://llmbranch.dbcls.jp",
-  #                       model:    "qwen3-6-35b-fast") %>
+  #   <%= llm_meta_widget(llm_url:      "https://llmbranch.dbcls.jp",
+  #                       tool_hub_url: "https://llmbranch.dbcls.jp",
+  #                       model:        "qwen3-6-35b-fast") %>
+  #
+  # `llm_url` answers the chat; `tool_hub_url` names an llm_meta_server whose
+  # registered MCP tools to offer and is optional — absent means none, which
+  # does not disable page actions or the host's own .well-known/mcp.json.
   #
   # The host page must ALSO provide:
   #   - <script type="application/json" id="ai-actions">…</script> — local
   #     action schemas (name/description/input_schema each).
   #   - window.aiState — reader functions called each turn to build the
   #     system prompt with current page state.
-  #   - window.aiActions — action implementations invoked fire-and-forget
-  #     when the LLM emits a matching tool_call.
+  #   - window.aiActions — action implementations invoked when the LLM emits
+  #     a matching tool_call. Since 0.4.0 each one's outcome is fed back as a
+  #     tool result and the turn continues, so a flow may write to the page
+  #     and then keep working.
   #
   # See llm_meta_widget's README for the three MCP-tool classes it supports
   # (page-embedded aiActions / host-wide well-known / hub-registered).
@@ -28,7 +35,9 @@ module LlmMetaWidget
       #                  .well-known/mcp.json are unaffected.
       llm_provider:            "llm_meta_server",
       tool_hub_url:            nil,
-      orchestrator_path:       "/llm_meta_widget_assets/orchestrator.js",
+      # The one module a page loads. Override to serve it from a CDN
+      # instead of this gem (same file, published to npm).
+      element_path:            "/llm_meta_widget_assets/llm-meta-widget.js",
       actions_schema_id:       "ai-actions",
       state_global:            "aiState",
       actions_global:          "aiActions",
@@ -53,6 +62,26 @@ module LlmMetaWidget
       greeting:                nil
     }.freeze
 
+    # Renders `name="value"`, or nothing when the value is absent. Attribute
+    # omission is meaningful to the element: an omitted allowlist means "no
+    # allowlist", and an omitted well-known-urls means "auto-discover".
+    def tag_attr(name, value)
+      return "".html_safe if value.nil? || value.to_s.empty?
+
+      %(#{name}="#{ERB::Util.html_escape(value)}").html_safe
+    end
+
+    # well-known-urls is tri-state, and `[]` must survive as an EMPTY attribute
+    # rather than be dropped the way tag_attr drops blanks:
+    #   nil   -> omitted            -> auto-discover same-origin
+    #   []    -> well-known-urls="" -> discovery off
+    #   [a,b] -> "a,b"              -> fetch those
+    def well_known_attr(urls)
+      return "".html_safe if urls.nil?
+
+      %(well-known-urls="#{ERB::Util.html_escape(Array(urls).join(","))}").html_safe
+    end
+
     def llm_meta_widget(llm_url:, model:, **overrides)
       locals = DEFAULTS.merge(llm_url: llm_url, model: model, **overrides)
       provider = locals[:llm_provider].to_s