@kodaris/krubble-app-components 1.0.79 → 1.0.81

package/dist/krubble-app.umd.js

@@ -5624,8 +5624,9 @@
            * responses are dropped (mirrors the kr-combo-box `_requestId` pattern). Org and
            * global searches run concurrently into separate buffers, so each has its own.
            */
-          this._skillRequestId = 0;
+          this._orgSkillRequestId = 0;
           this._globalSkillRequestId = 0;
+          this._invocableSkillRequestId = 0;
           /**
            * Codes of global skills with an in-flight enable/disable request. The `+`
            * button reads this to show a pending state and ignore repeat clicks. Mutated
@@ -5734,24 +5735,31 @@
           this._isDraggingFile = false;
           /** Whether the `/` skill menu is open above the composer. */
           this._skillMenuOpened = false;
-          /** Current `/` query (text after the slash), sent to `_searchSkills`. */
+          /** Current `/` query (text after the slash), sent to `_searchOrgSkills`. */
           this._skillQuery = '';
           /**
-           * Latest org skill search results (this instance's own skills). Backs the `/`
-           * menu and the browse dialog's "Your Org" tab.
+           * Latest org skill search results (this instance's own skills). Backs the
+           * browse dialog's "Your Org" tab only — global skills never appear here.
            */
-          this._skillResults = [];
+          this._orgSkills = [];
           /**
            * Latest shared-Kodaris (global) skill results, for the browse dialog's
-           * "Kodaris" tab. Kept separate from `_skillResults` so switching tabs shows
+           * "Kodaris" tab. Kept separate from `_orgSkills` so switching tabs shows
            * fresh results immediately instead of the other tab's stale list — the browse
            * search fills both buffers at once.
            */
-          this._globalSkillResults = [];
+          this._globalSkills = [];
+          /**
+           * Latest results for the `/` composer menu: this instance's own org skills PLUS
+           * the global skills installed on it (both are invocable by code). A separate
+           * buffer from the two browse-tab lists so merging installed globals into the
+           * menu never leaks them into the "Your Org" tab.
+           */
+          this._invocableSkills = [];
           /**
            * AI framework UI config flags fetched from `aiFrameworkConfig` on connect.
            * `debugTelemetryEnabled` (same server-side gate as TOKEN_USAGE emission) turns
-           * on the debug drawer toggle and the `/test-warning` / `/test-limit` composer
+           * on the debug drawer toggle and the `/test-context-warning` / `/test-context-limit` composer
            * options — known up front, before any message.
            */
           this._aiFrameworkConfig = {};
@@ -5762,8 +5770,8 @@
           /** Whether the "Browse all skills" dialog is open. */
           this._skillBrowseOpened = false;
           /**
-           * Active tab in the browse dialog. `org` shows `_skillResults` (this instance's
-           * skills); `kodaris` shows `_globalSkillResults` (the shared global catalog).
+           * Active tab in the browse dialog. `org` shows `_orgSkills` (this instance's
+           * skills); `kodaris` shows `_globalSkills` (the shared global catalog).
            */
           this._skillBrowseSource = 'org';
           /** Search text in the browse dialog, routed to the active tab's search. */
@@ -6156,13 +6164,14 @@
           textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
           // Open the skill menu while the message is a `/` command being typed (a
           // leading slash with no space yet). The text after the slash is the search
-          // query, run server-side via `_searchSkills`.
+          // query, run server-side via `_searchInvocableSkills`.
+          // (org skills + installed globals — everything invocable by /code)
           const slashMatch = this._inputValue.match(/^\/(\S*)$/);
           if (slashMatch) {
               this._skillMenuOpened = true;
               this._skillQuery = slashMatch[1];
               this._skillHighlighted = 0;
-              this._searchSkills(this._skillQuery);
+              this._searchInvocableSkills(this._skillQuery);
           }
           else {
               this._skillMenuOpened = false;
@@ -6178,7 +6187,7 @@
               if (debugActions) {
                   actionCount = 4;
               }
-              const count = actionCount + this._skillResults.length;
+              const count = actionCount + this._invocableSkills.length;
               if (e.key === 'ArrowDown') {
                   e.preventDefault();
                   this._skillHighlighted = (this._skillHighlighted + 1) % count;
@@ -6223,7 +6232,7 @@
           if (debugActions && index === 2) {
               this._skillMenuOpened = false;
               this._send({
-                  message: '/test-warning',
+                  message: '/test-context-warning',
                   internalFiles: [],
               });
               return;
@@ -6231,19 +6240,19 @@
           if (debugActions && index === 3) {
               this._skillMenuOpened = false;
               this._send({
-                  message: '/test-limit',
+                  message: '/test-context-limit',
                   internalFiles: [],
               });
               return;
           }
-          const skill = this._skillResults[index - actionCount];
+          const skill = this._invocableSkills[index - actionCount];
           if (skill) {
               this._handleSkillSelect(skill);
           }
       }
       // --- Skills ---
       /**
-       * Search the Kodaris AI skills index and store the results in `_skillResults`.
+       * Search the Kodaris AI skills index and store the results in `_orgSkills`.
        * The `/` menu and the browse dialog both call this; results are shared since
        * the two are never open at once. Mirrors the backend's own skill search (BM25
        * over name^3/description^2/instructions, active-only) so the menu ranks skills
@@ -6254,9 +6263,9 @@
        * that arrive out of order. `/aiskills/search` returns a raw OpenSearch response,
        * so we lift each hit's `_source` (already in KRChatbotSkill shape) out.
        */
-      _searchSkills(query) {
-          this._skillRequestId++;
-          const requestId = this._skillRequestId;
+      _searchOrgSkills(query) {
+          this._orgSkillRequestId++;
+          const requestId = this._orgSkillRequestId;
           const trimmed = query.trim();
           // An empty query matches everything; otherwise substring-match the query
           // against name/code/description. We use case-insensitive wildcard queries on
@@ -6306,6 +6315,11 @@
                       bool: {
                           must: [must],
                           filter: [{ term: { active: true } }],
+                          // The "Your Org" tab lists only this instance's own skills. Globally-
+                          // published skills belong to the "Kodaris" tab (fed by the registry),
+                          // so exclude them here. Documents without the field aren't matched by
+                          // the term, so ordinary org skills are kept.
+                          must_not: [{ term: { globalPublished: true } }],
                       },
                   },
               },
@@ -6313,17 +6327,106 @@
               .then((r) => r.json())
               .then((res) => {
               // Ignore a stale response superseded by a newer search.
-              if (requestId !== this._skillRequestId) {
+              if (requestId !== this._orgSkillRequestId) {
                   return;
               }
-              this._skillResults = (res?.data?.hits?.hits || []).map((hit) => hit._source);
+              this._orgSkills = (res?.data?.hits?.hits || []).map((hit) => hit._source);
           })
               .catch((error) => {
               console.error('kr-chatbot: skill search failed', error);
           });
       }
       /**
-       * Search the shared Kodaris global-skill registry into `_globalSkillResults`
+       * Search skills for the `/` composer menu into `_invocableSkills`: this instance's
+       * own org skills PLUS the global skills installed on it, since both are
+       * invocable by code. They come from two indexes (the local aiskills search and
+       * the registry search filtered client-side to enabled), so we fire both and
+       * concat — org skills first, then installed globals. Skill codes are unique
+       * across the two, so no dedup is needed. Kept out of `_orgSkills` so
+       * installed globals never leak into the browse dialog's "Your Org" tab.
+       * (Cross-list relevance ranking is a later concern; for now org skills lead.)
+       */
+      _searchInvocableSkills(query) {
+          this._invocableSkillRequestId++;
+          const requestId = this._invocableSkillRequestId;
+          // Same wildcard matching as _searchOrgSkills (see there for the rationale).
+          let must = { match_all: {} };
+          if (query.trim()) {
+              must = {
+                  bool: {
+                      should: [
+                          {
+                              wildcard: {
+                                  'name.raw': {
+                                      value: `*${query.trim().replace(/([*?\\])/g, '\\$1')}*`,
+                                      case_insensitive: true,
+                                  }
+                              }
+                          },
+                          {
+                              wildcard: {
+                                  'code.raw': {
+                                      value: `*${query.trim().replace(/([*?\\])/g, '\\$1')}*`,
+                                      case_insensitive: true,
+                                  }
+                              }
+                          },
+                          {
+                              wildcard: {
+                                  'description.raw': {
+                                      value: `*${query.trim().replace(/([*?\\])/g, '\\$1')}*`,
+                                      case_insensitive: true,
+                                  }
+                              }
+                          },
+                      ],
+                      minimum_should_match: 1,
+                  },
+              };
+          }
+          // Org skills — this instance's own catalog (globalPublished excluded).
+          const orgSearch = krubbleHttp.Http.fetch({
+              url: '/api/system/opensearch/aiskills/search',
+              method: 'POST',
+              body: {
+                  size: 100,
+                  query: {
+                      bool: {
+                          must: [must],
+                          filter: [{ term: { active: true } }],
+                          must_not: [{ term: { globalPublished: true } }],
+                      },
+                  },
+              },
+          })
+              .then((r) => r.json())
+              .then((res) => (res?.data?.hits?.hits || []).map((hit) => hit._source))
+              .catch((error) => {
+              console.error('kr-chatbot: invocable skill search failed', error);
+              return [];
+          });
+          // Installed globals — the registry catalog, kept only where enabled=true.
+          const globalSearch = krubbleHttp.Http.fetch({
+              url: '/api/system/opensearch/aiskills/global/search',
+              method: 'POST',
+              body: { query: query.trim() },
+          })
+              .then((r) => r.json())
+              .then((res) => (res?.data || []).filter((s) => !!s.enabled))
+              .catch((error) => {
+              console.error('kr-chatbot: installed global skill search failed', error);
+              return [];
+          });
+          Promise.all([orgSearch, globalSearch]).then(([orgSkills, globalSkills]) => {
+              // Ignore a stale response superseded by a newer search.
+              if (requestId !== this._invocableSkillRequestId) {
+                  return;
+              }
+              this._invocableSkills = [...orgSkills, ...globalSkills];
+          });
+      }
+      /**
+       * Search the shared Kodaris global-skill registry into `_globalSkills`
        * (the browse dialog's "Kodaris" tab). Unlike `/aiskills/search`,
        * `/aiskills/global/search` returns a digested list
        * (`data: [{ code, name, description, enabled }]`) already in `KRChatbotSkill`
@@ -6344,7 +6447,7 @@
               if (requestId !== this._globalSkillRequestId) {
                   return;
               }
-              this._globalSkillResults = (res?.data || []);
+              this._globalSkills = (res?.data || []);
           })
               .catch((error) => {
               console.error('kr-chatbot: global skill search failed', error);
@@ -6356,13 +6459,16 @@
        * matching card. Ignores clicks while a request for the same code is pending.
        */
       _handleGlobalSkillEnable(skill, e) {
-          // The card body inserts the skill; the `+` button must not also do that.
+          // The card body inserts the skill; the install button must not also do that.
           e.stopPropagation();
           if (this._globalSkillPending.has(skill.code)) {
               return;
           }
+          // Drive the clicked button's own spinner (KRButton disables itself while
+          // loading, so a second click can't fire until the request settles).
+          const btn = e.currentTarget;
           this._globalSkillPending.add(skill.code);
-          this.requestUpdate();
+          btn?.showLoading();
           krubbleHttp.Http.fetch({
               url: `/api/system/opensearch/aiskills/global/${encodeURIComponent(skill.code)}/enabled`,
               method: 'POST',
@@ -6370,16 +6476,18 @@
           })
               .then((r) => r.json())
               .then((res) => {
-              // Reflect the server's returned flag on the card.
+              // Reflect the server's returned flag on the card. The button label/style
+              // re-render from skill.enabled; reset() clears the spinner to idle.
               skill.enabled = res?.data?.enabled;
+              btn?.reset();
               this.requestUpdate();
           })
               .catch((error) => {
               console.error('kr-chatbot: global skill enable failed', error);
+              btn?.showError('Error');
           })
               .finally(() => {
               this._globalSkillPending.delete(skill.code);
-              this.requestUpdate();
           });
       }
       /** The `+` button toggles the skill/attachment menu open (showing all skills). */
@@ -6391,7 +6499,7 @@
           this._skillQuery = '';
           this._skillHighlighted = 0;
           this._skillMenuOpened = true;
-          this._searchSkills('');
+          this._searchInvocableSkills('');
       }
       /** Insert `/code ` into the composer and focus it, ready for the message. */
       _handleSkillSelect(skill) {
@@ -6424,7 +6532,7 @@
           this._skillBrowseQuery = '';
           this._skillBrowseOpened = true;
           // Fill both tabs up front so switching between them is instant, not stale.
-          this._searchSkills('');
+          this._searchOrgSkills('');
           this._searchGlobalSkills('');
       }
       _handleSkillBrowseClose() {
@@ -6433,7 +6541,7 @@
       _handleSkillBrowseSearch(e) {
           this._skillBrowseQuery = e.target.value;
           // Filter both catalogs so whichever tab the user switches to is already current.
-          this._searchSkills(this._skillBrowseQuery);
+          this._searchOrgSkills(this._skillBrowseQuery);
           this._searchGlobalSkills(this._skillBrowseQuery);
       }
       _handleSkillBrowseTabChange(e) {
@@ -6878,7 +6986,7 @@
       // --- Render ---
       /** The `/` skill menu shown above the composer while typing a slash command. */
       _renderSkillMenu() {
-          const skills = this._skillResults;
+          const skills = this._invocableSkills;
           // Debug test triggers are extra actions after Attach Files / Browse. The
           // flat keyboard index counts actions first, then skills, so the skills'
           // index offset is the number of actions shown.
@@ -6916,7 +7024,7 @@
         })}
               @click=${() => this._activateSkillMenuItem(2)}
             >
-              Test: context warning
+              Test Context Warning
             </button>
             <button
               class=${e({
@@ -6925,7 +7033,7 @@
         })}
               @click=${() => this._activateSkillMenuItem(3)}
             >
-              Test: context limit
+              Test Context Limit
             </button>
           ` : A}
         </div>
@@ -6985,69 +7093,71 @@
       /**
        * The card grid of skill search results for the browse dialog. Clicking a card
        * inserts `/code ` into the composer. In the shared-Kodaris (`global`) tab each
-       * card also gets a `+` install button that enables the skill on this instance
-       * (turning into a ✓ once installed).
+       * card also gets a footer row with an Enabled toggle that installs/removes the
+       * skill on this instance.
        */
       _renderSkillGrid(global = false) {
-          let skills = this._skillResults;
+          let skills = this._orgSkills;
           if (global) {
-              skills = this._globalSkillResults;
+              skills = this._globalSkills;
           }
           if (!skills.length) {
               return A;
           }
           return b `
       <div class="skill-browse__grid">
-        ${skills.map((skill) => b `
-          <div
-            class="skill-card"
-            role="button"
-            tabindex="0"
-            @click=${() => this._handleSkillSelect(skill)}
-            @keydown=${(e) => this._handleSkillCardKeydown(e, skill)}
-          >
-            <span class="skill-card__name">${skill.name}</span>
-            ${skill.description ? b `
-              <span class="skill-card__desc">${skill.description}</span>
-            ` : A}
-            ${global ? this._renderSkillInstall(skill) : A}
-          </div>
-        `)}
+        ${skills.map((skill) => {
+            // A global skill must be installed before it can be chosen — inserting
+            // /code for a skill not enabled on this instance would just fail. So an
+            // uninstalled global card does nothing on click; only its Install button
+            // is interactive.
+            const selectable = !global || !!skill.enabled;
+            return b `
+            <div
+              class="skill-card"
+              role=${selectable ? 'button' : A}
+              tabindex=${selectable ? 0 : A}
+              @click=${selectable ? () => this._handleSkillSelect(skill) : A}
+              @keydown=${selectable ? (e) => this._handleSkillCardKeydown(e, skill) : A}
+            >
+              <span class="skill-card__name">${skill.name}</span>
+              ${skill.description ? b `
+                <span class="skill-card__desc">${skill.description}</span>
+              ` : A}
+              ${global ? this._renderSkillToggle(skill) : A}
+            </div>
+          `;
+        })}
       </div>
     `;
       }
+      /** Keep a click on the card footer from bubbling to the card's insert handler. */
+      _stopFooterClick(e) {
+          e.stopPropagation();
+      }
       /**
-       * The install affordance on a global skill card: a `+` button that enables the
-       * skill on this instance, showing a ✓ once installed and a disabled state
-       * while the enable/disable request is in flight.
+       * The install affordance on a global skill card: a footer row with an
+       * install/remove button. The button owns its own spinner via KRButton's
+       * showLoading()/showError() while the enable/disable request is in flight, so
+       * the async call has clear feedback. Clicks are stopped from bubbling so the
+       * button never also inserts the skill (the card body does that).
        */
-      _renderSkillInstall(skill) {
+      _renderSkillToggle(skill) {
+          const on = !!skill.enabled;
           return b `
-      <button
-        class=${e({
-            'skill-card__install': true,
-            'skill-card__install--installed': !!skill.enabled,
-        })}
-        ?disabled=${this._globalSkillPending.has(skill.code)}
-        title=${!!skill.enabled ? 'Installed — click to remove' : 'Install this skill'}
-        aria-label=${!!skill.enabled ? 'Remove skill' : 'Install skill'}
-        @click=${(e) => this._handleGlobalSkillEnable(skill, e)}
+      <div
+        class="skill-card__footer"
+        @click=${this._stopFooterClick}
       >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="2"
-          stroke="currentColor"
-          class="skill-card__install-icon"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d=${!!skill.enabled ? 'm4.5 12.75 6 6 9-13.5' : 'M12 4.5v15m7.5-7.5h-15'}
-          />
-        </svg>
-      </button>
+        <span class="skill-card__price">Free</span>
+        <kr-button
+          class="skill-card__install-btn"
+          size="small"
+          variant=${on ? 'outline' : 'flat'}
+          color=${on ? 'secondary' : 'primary'}
+          @click=${(e) => this._handleGlobalSkillEnable(skill, e)}
+        >${on ? 'Uninstall' : 'Install'}</kr-button>
+      </div>
     `;
       }
       /**
@@ -7508,9 +7618,7 @@
               </svg>
             </button>
           </div>
-        ` : A}
-
-        ${this._contextLimitReached ? b `
+        ` : this._contextLimitReached ? b `
           <div class="context-limit" role="alert">
             ${this._contextLimitMessage
             || 'This conversation has reached its limit. Please start a new one to continue.'}
@@ -8096,14 +8204,22 @@
 
     /* Context warning banner (user-facing, dismissible, non-blocking) */
     .context-warning {
-      padding: 8px 16px;
+      /* Match the message text column: 768px cap minus its 32px side padding
+         (704px), and viewport minus that padding on narrower screens. */
+      width: 100%;
+      max-width: 735px;
+      margin: 8px auto 0;
+      padding: 10px 14px;
+      border: 1px solid #fde68a;
+      border-radius: 8px;
       background: #fffbeb;
       color: #92400e;
       font-size: 13px;
+      line-height: 1.4;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      gap: 8px;
+      gap: 10px;
       flex-shrink: 0;
     }
 
@@ -8116,6 +8232,11 @@
       display: flex;
       align-items: center;
       flex-shrink: 0;
+      opacity: 0.7;
+    }
+
+    .context-warning-dismiss:hover {
+      opacity: 1;
     }
 
     .context-warning-dismiss-icon {
@@ -8125,11 +8246,18 @@
 
     /* Context-limit notice (user-facing, blocking — steers to a new conversation) */
     .context-limit {
-      padding: 10px 16px;
+      /* Match the message text column: 768px cap minus its 32px side padding
+         (704px), and viewport minus that padding on narrower screens. */
+      width: 100%;
+      max-width: 735px;
+      margin: 8px auto 0;
+      padding: 10px 14px;
+      border: 1px solid #fecaca;
+      border-radius: 8px;
       background: var(--kr-chatbot-error-bg);
       color: var(--kr-chatbot-error-text);
       font-size: 13px;
-      line-height: 1.5;
+      line-height: 1.4;
       flex-shrink: 0;
     }
 
@@ -8657,7 +8785,7 @@
       height: 100%;
       overflow-y: auto;
       display: grid;
-      grid-template-columns: repeat(3, 1fr);
+      grid-template-columns: repeat(2, 1fr);
       grid-auto-rows: min-content;
       align-content: start;
       gap: 12px;
@@ -8685,53 +8813,31 @@
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
     }
 
-    /* Install button on global skill cards. Absolutely positioned in the corner
-       so it sits above the card's own click target; leave room via the name's
-       padding-right below. */
-    .skill-card__install {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      display: inline-flex;
+    /* Footer row on global skill cards: install button on the left, price on the
+       right. margin-top:auto pins it to the bottom so cards in a row align their
+       footers regardless of description length. Negative horizontal margins
+       (matching the card's 14px padding) pull the top border out to the full
+       card width; the content is re-padded horizontally to stay inset. */
+    .skill-card__footer {
+      display: flex;
       align-items: center;
-      justify-content: center;
-      width: 24px;
-      height: 24px;
-      padding: 0;
-      border: 1px solid #d1d5db;
-      border-radius: 6px;
-      background: white;
-      color: #374151;
-      cursor: pointer;
-      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
-    }
-
-    .skill-card__install:hover:not(:disabled) {
-      border-color: var(--kr-chatbot-primary);
-      color: var(--kr-chatbot-primary);
-    }
-
-    .skill-card__install:disabled {
-      opacity: 0.5;
-      cursor: default;
-    }
-
-    /* Installed state: filled check. */
-    .skill-card__install--installed {
-      background: var(--kr-chatbot-primary);
-      border-color: var(--kr-chatbot-primary);
-      color: white;
+      justify-content: space-between;
+      gap: 8px;
+      margin-top: 8px;
+      margin-left: -14px;
+      margin-right: -14px;
+      padding: 14px 14px 0;
+      border-top: 1px solid #e5e7eb;
     }
 
-    .skill-card__install-icon {
-      width: 15px;
-      height: 15px;
+    .skill-card__price {
+      font-size: 13px;
+      font-weight: 600;
+      color: #000000;
     }
 
     .skill-card__name {
       font-weight: 600;
-      /* Leave room for the corner install button on global cards. */
-      padding-right: 28px;
     }
 
     .skill-card__desc {
@@ -8920,10 +9026,13 @@
   ], exports.Chatbot.prototype, "_skillQuery", void 0);
   __decorate([
       r()
-  ], exports.Chatbot.prototype, "_skillResults", void 0);
+  ], exports.Chatbot.prototype, "_orgSkills", void 0);
+  __decorate([
+      r()
+  ], exports.Chatbot.prototype, "_globalSkills", void 0);
   __decorate([
       r()
-  ], exports.Chatbot.prototype, "_globalSkillResults", void 0);
+  ], exports.Chatbot.prototype, "_invocableSkills", void 0);
   __decorate([
       r()
   ], exports.Chatbot.prototype, "_aiFrameworkConfig", void 0);