added skill configuration: we present llm tools as "Skills" and make

them configurable in the YaCy GUI.
author: Michael Peter Christen <mc@yacy.net> 2026-02-08 21:44:04 +0100
committer: Michael Peter Christen <mc@yacy.net> 2026-02-08 21:44:04 +0100
commit: 2141aef2c882ee9d53a785c9570ac593018bd810 (patch)
tree: acbdd1619862bbd0a1e0436269a3057ff91369d2 /htroot
parent: 9cd693a464b19f8788ba4438d68367b1aed4014b (diff)
4 files changed, 239 insertions, 4 deletions
diff --git a/htroot/AILab.html b/htroot/AILab.html
index caa89d83b..b3462048c 100644
--- a/htroot/AILab.html
+++ b/htroot/AILab.html
@@ -209,6 +209,12 @@
         filter: grayscale(0.2);
         pointer-events: none;
       }
+
+      @media (min-width: 768px) {
+        .quest-body-nowrap {
+          flex-wrap: nowrap;
+        }
+      }
     </style>
   </head>
   <body id="AILab" data-ailab-inference-configured="#[ailab_inference_configured]#">
@@ -222,7 +228,7 @@
         <p>Complete the quests below to unlock YaCy's AI sidekick: bind an inference engine, load production models, feed it with your index, then wire RAG and shields.</p>
         <div class="lab-progress">
           <div class="progress">
-            <div id="labProgressBar" class="progress-bar progress-bar-success" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="width:0%">0 / 5 unlocked</div>
+            <div id="labProgressBar" class="progress-bar progress-bar-success" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="width:0%">0 / 6 unlocked</div>
           </div>
         </div>
       </div>
@@ -306,6 +312,25 @@
           </div>
         </div>
 
+        <div class="bs-callout bs-callout-optional quest-callout status-pending" data-quest="tools" data-status="#[ailab_tools_status]#">
+          <div class="quest-meta">
+            <span class="label label-info">Optional</span>
+            <span class="meta-arrow" aria-hidden="true">→</span>
+            <span class="status-pill">Needs setup</span>
+          </div>
+          <h3>Enable/Disable Sills</h3>
+          <p>Superpowers for the YaCy Chat</p>
+          <div class="quest-body">
+            <div class="quest-visual">
+              <img src="env/grafics/AILab_Matrix.png" alt="Tools configuration" width="128" height="128" />
+            </div>
+            <div class="quest-actions">
+              <a class="btn btn-info btn-sm" href="SkillsConfig_p.html">Open skills configuration</a><br />
+              <span class="quest-note">Tune descriptions and set maxCallsPerTurn per tool (0 disables a tool).</span>
+            </div>
+          </div>
+        </div>
+
         <div class="bs-callout bs-callout-optional quest-callout status-pending" data-quest="shield" data-status="#[ailab_shield_status]#">
           <div class="quest-meta">
             <span class="label label-info">Optional</span>
@@ -314,7 +339,7 @@
           </div>
           <h3>Define a shield</h3>
           <p>Add guardrails: access rates, grant or deny non-localhost access. Activate the front page link for chat to complete this quest.</p>
-          <div class="quest-body">
+          <div class="quest-body quest-body-nowrap">
           <div class="quest-visual">
             <img src="env/grafics/AILab_shield.png" alt="Shield definition" width="128" height="128" />
           </div>
@@ -377,7 +402,7 @@
         });
 
         // Gating: enforce build order
-        const questOrder = ["inference", "model", "index", "rag", "shield"];
+        const questOrder = ["inference", "model", "index", "rag", "tools", "shield"];
         let prerequisitesMet = true;
         questOrder.forEach(function(name) {
           const callout = document.querySelector('.quest-callout[data-quest="' + name + '"]');
@@ -386,6 +411,9 @@
 
           // Only gate by prior quests; index stays clickable even while filling up.
           let locked = !prerequisitesMet;
+          if (name === "tools" || name === "shield") {
+            locked = false;
+          }
           if (name === "model") {
             const inferenceConfigured = document.body.getAttribute("data-ailab-inference-configured") === "1";
             locked = locked || !inferenceConfigured;
@@ -402,7 +430,7 @@
           }
 
           // Block subsequent quests until current one is ready (index must reach threshold to release RAG and later steps).
-          if (s !== "ready" || (name === "index" && indexCount < indexNeeded)) {
+          if (name !== "tools" && (s !== "ready" || (name === "index" && indexCount < indexNeeded))) {
             prerequisitesMet = false;
           }
         });
diff --git a/htroot/LLMSelection_p.html b/htroot/LLMSelection_p.html
index 312386389..493e91fc8 100644
--- a/htroot/LLMSelection_p.html
+++ b/htroot/LLMSelection_p.html
@@ -411,6 +411,12 @@
       function renderModelTable(container, title, rows) {
         if (!container) return;
         container.innerHTML = `<legend>${title}</legend>`;
+        if (title === "Available Models") {
+          const legend = container.querySelector("legend");
+          if (legend) {
+            legend.id = "availableModels";
+          }
+        }
         if (!rows || !rows.length) {
           container.style.display = "none";
           return;
@@ -1167,6 +1173,20 @@
           if (presetService && presetHoststub) {
             loadModelList(true);
           }
+          if (window.location.hash === "#availableModels") {
+            loadModelList(true)
+              .catch(() => null)
+              .finally(() => {
+                window.setTimeout(() => {
+                  const target = document.getElementById("availableModels")
+                      || document.getElementById("availableModelsAnchor")
+                      || document.getElementById("availableModelsContainer");
+                  if (target) {
+                    target.scrollIntoView({ behavior: "smooth", block: "start" });
+                  }
+                }, 0);
+              });
+          }
         } catch (e) {
           console.error("Initialization failed", e);
         }
@@ -1230,6 +1250,7 @@
       <legend>Model Downloads</legend>
       <div id="downloadActivityList"></div>
     </fieldset>
+    <a id="availableModelsAnchor"></a>
     <fieldset id="availableModelsContainer" style="display:none"><a name="availableModels"></a></fieldset>
 
     <fieldset id="productionModelsContainer" style="display: block;"><a name="productionModels"></a><legend>Production Models Matrix</legend>
diff --git a/htroot/SkillsConfig_p.html b/htroot/SkillsConfig_p.html
new file mode 100644
index 000000000..3b8d5a52f
--- /dev/null
+++ b/htroot/SkillsConfig_p.html
@@ -0,0 +1,185 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>YaCy '#[clientname]#': Skills Config</title>
+    #%env/templates/metas.template%#
+    <style type="text/css">
+      .tool-card {
+        border: 1px solid #e6e9ef;
+        border-left: 6px solid #5bc0de;
+        padding: 10px 18px 18px 18px;
+        margin-bottom: 16px;
+        background: #fff;
+        box-shadow: 0 3px 10px rgba(0,0,0,0.06);
+      }
+      .tool-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 10px;
+      }
+      .tool-header h3 {
+        margin: 0;
+        color: #0f2b46;
+      }
+      .tool-limit {
+        display: flex;
+        align-items: stretch;
+        gap: 8px;
+        color: #3b4a5e;
+        white-space: nowrap;
+      }
+      .tool-limit label {
+        display: inline-flex;
+        align-items: center;
+      }
+      .tool-limit input {
+        width: 56px;
+        height: 34px;
+        padding: 6px 8px;
+      }
+      .tool-limit .toggle-button {
+        min-width: 70px;
+        height: 34px;
+        padding: 6px 10px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .tool-description {
+        width: 100%;
+        resize: vertical;
+      }
+      .skills-grid {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 18px;
+        align-items: stretch;
+      }
+      .skills-grid .tool-card {
+        flex: 1 1 48%;
+        min-width: 320px;
+        margin-bottom: 0;
+      }
+      @media (max-width: 767px) {
+        .skills-grid .tool-card {
+          flex-basis: 100%;
+        }
+      }
+    </style>
+  </head>
+  <body id="SkillsConfig">
+    #%env/templates/header.template%#
+    #%env/templates/submenuAI.template%#
+
+    <h2>Skills</h2>
+    <p>Add superpowers to the YaCy Chat. Skills may be disabled by setting maxCallsPerTurn to 0.</p>
+    <!-- Technical naming note: internally these are called tools; in the user experience they are shown as skills. -->
+
+    #(status)#
+    ::<div class="alert alert-success">Tool settings were saved.</div>
+    #(/status)#
+    #(status_hasInvalidMaxCalls)#
+    ::<div class="alert alert-warning">#[status_invalidMaxCalls]# invalid maxCallsPerTurn value(s) were reset to the previous values.</div>
+    #(/status_hasInvalidMaxCalls)#
+
+    <form action="SkillsConfig_p.html" method="post" accept-charset="UTF-8">
+      <input type="hidden" name="save" value="1" />
+
+      <h3>Basic Skills</h3>
+      <div class="skills-grid">
+      #{basic_tools}#
+      <div class="tool-card">
+        <div class="tool-header">
+          <h3><code>#[name]#</code></h3>
+          <div class="tool-limit">
+            <label for="tool-limit-basic-#[name]#">maxCallsPerTurn</label>
+            <input id="tool-limit-basic-#[name]#" type="number" class="form-control max-calls-input" min="0" max="99" name="ai.tools.#[name]#.maxCallsPerTurn" value="#[maxCallsPerTurn]#" />
+            <button type="button" class="btn btn-default toggle-button">disable</button>
+          </div>
+        </div>
+        <textarea class="tool-description form-control" name="ai.tools.#[name]#.description" rows="2">#[description]#</textarea>
+      </div>
+      #{/basic_tools}#
+      </div>
+
+      <h3>Visualization Skills</h3>
+      <div class="skills-grid">
+      #{visualization_tools}#
+      <div class="tool-card">
+        <div class="tool-header">
+          <h3><code>#[name]#</code></h3>
+          <div class="tool-limit">
+            <label for="tool-limit-vis-#[name]#">maxCallsPerTurn</label>
+            <input id="tool-limit-vis-#[name]#" type="number" class="form-control max-calls-input" min="0" max="99" name="ai.tools.#[name]#.maxCallsPerTurn" value="#[maxCallsPerTurn]#" />
+            <button type="button" class="btn btn-default toggle-button">disable</button>
+          </div>
+        </div>
+        <textarea class="tool-description form-control" name="ai.tools.#[name]#.description" rows="2">#[description]#</textarea>
+      </div>
+      #{/visualization_tools}#
+      </div>
+
+      <h3>Data Retrieval Skills</h3>
+      <div class="skills-grid">
+      #{retrieval_tools}#
+      <div class="tool-card">
+        <div class="tool-header">
+          <h3><code>#[name]#</code></h3>
+          <div class="tool-limit">
+            <label for="tool-limit-ret-#[name]#">maxCallsPerTurn</label>
+            <input id="tool-limit-ret-#[name]#" type="number" class="form-control max-calls-input" min="0" max="99" name="ai.tools.#[name]#.maxCallsPerTurn" value="#[maxCallsPerTurn]#" />
+            <button type="button" class="btn btn-default toggle-button">disable</button>
+          </div>
+        </div>
+        <textarea class="tool-description form-control" name="ai.tools.#[name]#.description" rows="2">#[description]#</textarea>
+      </div>
+      #{/retrieval_tools}#
+      </div>
+      <button type="submit" class="btn btn-primary">Save Skills Configuration</button>
+    </form>
+
+    <script type="text/javascript">
+      (function() {
+        function readValue(input) {
+          if (!input) return 0;
+          var value = parseInt(input.value, 10);
+          return isNaN(value) ? 0 : value;
+        }
+
+        function updateToggleLabel(input, button) {
+          if (!input || !button) return;
+          button.textContent = readValue(input) > 0 ? "disable" : "enable";
+        }
+
+        var inputs = document.querySelectorAll(".max-calls-input");
+        Array.prototype.forEach.call(inputs, function(input) {
+          var wrapper = input.parentElement;
+          var button = wrapper ? wrapper.querySelector(".toggle-button") : null;
+          if (!button) return;
+
+          updateToggleLabel(input, button);
+
+          button.addEventListener("click", function() {
+            if (readValue(input) > 0) {
+              input.value = "0";
+            } else {
+              input.value = "1";
+            }
+            updateToggleLabel(input, button);
+          });
+
+          input.addEventListener("input", function() {
+            updateToggleLabel(input, button);
+          });
+          input.addEventListener("change", function() {
+            updateToggleLabel(input, button);
+          });
+        });
+      })();
+    </script>
+
+    #%env/templates/footer.template%#
+  </body>
+</html>
diff --git a/htroot/env/templates/submenuAI.template b/htroot/env/templates/submenuAI.template
index 10a72c935..22e67ad6a 100644
--- a/htroot/env/templates/submenuAI.template
+++ b/htroot/env/templates/submenuAI.template
@@ -4,6 +4,7 @@
     <li><a href="AILab.html" class="MenuItemLink">AI Lab</a></li>
     <li><a href="LLMSelection_p.html" class="MenuItemLink #(authorized)#lock::unlock#(/authorized)#">LLM Selection</a></li>
     <li><a href="RAGConfig_p.html" class="MenuItemLink #(authorized)#lock::unlock#(/authorized)#">RAG Config</a></li>
+    <li><a href="SkillsConfig_p.html" class="MenuItemLink #(authorized)#lock::unlock#(/authorized)#">Skills Config</a></li>
     <li><a href="AIShield_p.html" class="MenuItemLink #(authorized)#lock::unlock#(/authorized)#">AI Shield</a></li>
     <li><a href="yacychat.html" class="MenuItemLink">Chat</a></li>
   </ul>
author	Michael Peter Christen <mc@yacy.net>	2026-02-08 21:44:04 +0100
committer	Michael Peter Christen <mc@yacy.net>	2026-02-08 21:44:04 +0100
commit	2141aef2c882ee9d53a785c9570ac593018bd810 (patch)
tree	acbdd1619862bbd0a1e0436269a3057ff91369d2 /htroot
parent	9cd693a464b19f8788ba4438d68367b1aed4014b (diff)