@kodaris/krubble-app-components 1.0.77 → 1.0.78

package/dist/krubble-app.umd.js

@@ -5620,10 +5620,18 @@
           /** Monotonic id source for pending attachments. */
           this._pendingSeq = 0;
           /**
-           * Request-id guard for skill searches — bumped on each search so out-of-order
-           * responses are dropped (mirrors the kr-combo-box `_requestId` pattern).
+           * Request-id guards for skill searches — bumped on each search so out-of-order
+           * 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._globalSkillRequestId = 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
+           * in place; call requestUpdate() after changing it to re-render.
+           */
+          this._globalSkillPending = new Set();
           // --- @property (public API) ---
           /**
            * Callback function for sending messages. Receives the user's message and
@@ -5729,10 +5737,24 @@
           /** Current `/` query (text after the slash), sent to `_searchSkills`. */
           this._skillQuery = '';
           /**
-           * Latest skill search results. Shared by the `/` menu and the browse dialog —
-           * they're mutually exclusive (opening browse closes the menu), so one buffer.
+           * Latest org skill search results (this instance's own skills). Backs the `/`
+           * menu and the browse dialog's "Your Org" tab.
            */
           this._skillResults = [];
+          /**
+           * Latest shared-Kodaris (global) skill results, for the browse dialog's
+           * "Kodaris" tab. Kept separate from `_skillResults` 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 = [];
+          /**
+           * 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
+           * options — known up front, before any message.
+           */
+          this._aiFrameworkConfig = {};
           /** Highlighted item in the skill menu for keyboard navigation (-1 = none). */
           this._skillHighlighted = 0;
           /** Index of the message whose copy button just flashed "Copied" (-1 = none). */
@@ -5740,11 +5762,11 @@
           /** Whether the "Browse all skills" dialog is open. */
           this._skillBrowseOpened = false;
           /**
-           * Active tab in the browse dialog. `org` lists this org's skills (searched via
-           * `_searchSkills`); `kodaris` is the shared global catalog, added later.
+           * Active tab in the browse dialog. `org` shows `_skillResults` (this instance's
+           * skills); `kodaris` shows `_globalSkillResults` (the shared global catalog).
            */
           this._skillBrowseSource = 'org';
-          /** Search text in the browse dialog, sent to `_searchSkills`. */
+          /** Search text in the browse dialog, routed to the active tab's search. */
           this._skillBrowseQuery = '';
           this._handleMouseMove = (e) => {
               if (this._isDragging) {
@@ -5842,6 +5864,17 @@
                   this.messages = messages;
               }
           }).catch(() => { });
+          // Fetch the framework config on load (debugTelemetryEnabled, v2ChatEnabled,
+          // registryServer). debugTelemetryEnabled gates the debug affordances and is
+          // known before any message.
+          krubbleHttp.Http.fetch({
+              url: '/api/system/integration/aws/bedrock/aiFrameworkConfig',
+          })
+              .then((r) => r.json())
+              .then((res) => {
+              this._aiFrameworkConfig = res?.data || {};
+          })
+              .catch(() => { });
           // Inline mode fills its container and is always open — the floating widget's
           // toggle/drag/resize state doesn't apply, but the composer message and debug
           // drawer state (restored inside _restoreState) do.
@@ -6206,17 +6239,33 @@
           // specials so user input is treated literally, then wrap with `*...*`.
           let must = { match_all: {} };
           if (trimmed) {
-              const pattern = `*${trimmed.replace(/([*?\\])/g, '\\$1')}*`;
-              const value = {
-                  value: pattern,
-                  case_insensitive: true,
-              };
               must = {
                   bool: {
                       should: [
-                          { wildcard: { 'name.raw': value } },
-                          { wildcard: { 'code.raw': value } },
-                          { wildcard: { 'description.raw': value } },
+                          {
+                              wildcard: {
+                                  'name.raw': {
+                                      value: `*${trimmed.replace(/([*?\\])/g, '\\$1')}*`,
+                                      case_insensitive: true,
+                                  }
+                              }
+                          },
+                          {
+                              wildcard: {
+                                  'code.raw': {
+                                      value: `*${trimmed.replace(/([*?\\])/g, '\\$1')}*`,
+                                      case_insensitive: true,
+                                  }
+                              }
+                          },
+                          {
+                              wildcard: {
+                                  'description.raw': {
+                                      value: `*${trimmed.replace(/([*?\\])/g, '\\$1')}*`,
+                                      case_insensitive: true,
+                                  }
+                              }
+                          },
                       ],
                       minimum_should_match: 1,
                   },
@@ -6247,6 +6296,66 @@
               console.error('kr-chatbot: skill search failed', error);
           });
       }
+      /**
+       * Search the shared Kodaris global-skill registry into `_globalSkillResults`
+       * (the browse dialog's "Kodaris" tab). Unlike `/aiskills/search`,
+       * `/aiskills/global/search` returns a digested list
+       * (`data: [{ code, name, description, enabled }]`) already in `KRChatbotSkill`
+       * shape, so no `_source` lifting is needed. Only the browse dialog calls this
+       * (the `/` menu is org-only), so it isn't run per slash keystroke.
+       */
+      _searchGlobalSkills(query) {
+          this._globalSkillRequestId++;
+          const requestId = this._globalSkillRequestId;
+          krubbleHttp.Http.fetch({
+              url: '/api/system/opensearch/aiskills/global/search',
+              method: 'POST',
+              body: { query: query.trim() },
+          })
+              .then((r) => r.json())
+              .then((res) => {
+              // Ignore a stale response superseded by a newer search.
+              if (requestId !== this._globalSkillRequestId) {
+                  return;
+              }
+              this._globalSkillResults = (res?.data || []);
+          })
+              .catch((error) => {
+              console.error('kr-chatbot: global skill search failed', error);
+          });
+      }
+      /**
+       * Enable or disable a global skill on this instance via
+       * `/aiskills/global/{code}/enabled`, then reflect the server's result on the
+       * 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.
+          e.stopPropagation();
+          if (this._globalSkillPending.has(skill.code)) {
+              return;
+          }
+          this._globalSkillPending.add(skill.code);
+          this.requestUpdate();
+          krubbleHttp.Http.fetch({
+              url: `/api/system/opensearch/aiskills/global/${encodeURIComponent(skill.code)}/enabled`,
+              method: 'POST',
+              body: { enabled: !skill.enabled },
+          })
+              .then((r) => r.json())
+              .then((res) => {
+              // Reflect the server's returned flag on the card.
+              skill.enabled = res?.data?.enabled;
+              this.requestUpdate();
+          })
+              .catch((error) => {
+              console.error('kr-chatbot: global skill enable failed', error);
+          })
+              .finally(() => {
+              this._globalSkillPending.delete(skill.code);
+              this.requestUpdate();
+          });
+      }
       /** The `+` button toggles the skill/attachment menu open (showing all skills). */
       _handlePlusClick() {
           if (this._skillMenuOpened) {
@@ -6266,6 +6375,13 @@
           this._skillBrowseOpened = false;
           this._inputEl?.focus();
       }
+      /** Activate a skill card via keyboard (Enter/Space), since it's a div role=button. */
+      _handleSkillCardKeydown(e, skill) {
+          if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              this._handleSkillSelect(skill);
+          }
+      }
       /** Copy a message's text to the clipboard and briefly flash "Copied". */
       _handleCopyMessage(content, index) {
           navigator.clipboard.writeText(content).then(() => {
@@ -6281,16 +6397,22 @@
           this._skillMenuOpened = false;
           this._skillBrowseQuery = '';
           this._skillBrowseOpened = true;
+          // Fill both tabs up front so switching between them is instant, not stale.
           this._searchSkills('');
+          this._searchGlobalSkills('');
       }
       _handleSkillBrowseClose() {
           this._skillBrowseOpened = false;
       }
       _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._searchGlobalSkills(this._skillBrowseQuery);
       }
       _handleSkillBrowseTabChange(e) {
+          // Both buffers are kept current by open/search, so switching just swaps which
+          // one is shown — no re-search needed.
           this._skillBrowseSource = e.detail.activeTabId;
       }
       // --- Attachments ---
@@ -6787,35 +6909,79 @@
               ${this._renderSkillGrid()}
             </kr-tab>
             <kr-tab id="kodaris" label="Kodaris">
-              <div class="skill-browse__empty">
-                Shared Kodaris skills are coming soon.
-              </div>
+              ${this._renderSkillGrid(true)}
             </kr-tab>
           </kr-tab-group>
         </div>
       </kr-dialog>
     `;
       }
-      /** The card grid of this org's skill search results for the browse dialog. */
-      _renderSkillGrid() {
-          const skills = this._skillResults;
+      /**
+       * 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).
+       */
+      _renderSkillGrid(global = false) {
+          let skills = this._skillResults;
+          if (global) {
+              skills = this._globalSkillResults;
+          }
           if (!skills.length) {
               return A;
           }
           return b `
       <div class="skill-browse__grid">
         ${skills.map((skill) => b `
-          <button
+          <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}
-          </button>
+            ${global ? this._renderSkillInstall(skill) : A}
+          </div>
         `)}
       </div>
+    `;
+      }
+      /**
+       * 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.
+       */
+      _renderSkillInstall(skill) {
+          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)}
+      >
+        <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>
     `;
       }
       /**
@@ -6983,6 +7149,9 @@
     `;
       }
       render() {
+          // Debug affordances (drawer toggle, drawer, /test-* options) require the
+          // inline variant AND the server-side debug flag from aiFrameworkConfig.
+          const isDebugEnabled = this.variant === 'inline' && this._aiFrameworkConfig.debugTelemetryEnabled === true;
           return b `
       ${(this.hideToggle || this.variant === 'inline') ? A : b `
         <button
@@ -7013,7 +7182,7 @@
             'panel--opened': this.opened,
             'panel--resizing-debug': this._isDebugResizing,
         })}
-        style=${o(this.variant === 'inline' && this._debugPanelOpen ? { paddingRight: `${this._debugDrawerWidth}px` } : {})}
+        style=${o(this._debugPanelOpen ? { paddingRight: `${this._debugDrawerWidth}px` } : {})}
         @dragenter=${this._handleDragEnter}
         @dragover=${this._handleDragOver}
         @dragleave=${this._handleDragLeave}
@@ -7086,7 +7255,7 @@
             </div>
           </div>
           <div class="header-actions">
-            ${this.variant === 'inline' ? b `
+            ${isDebugEnabled ? b `
               <button
                 class=${e({
             'header-action': true,
@@ -7405,7 +7574,7 @@
           </div>
         </div>
         ${this._skillBrowseOpened ? this._renderSkillBrowse() : A}
-        ${this.variant === 'inline' ? this._renderDebugPanel() : A}
+        ${isDebugEnabled ? this._renderDebugPanel() : A}
       </div>
     `;
       }
@@ -8430,6 +8599,7 @@
     }
 
     .skill-card {
+      position: relative;
       display: flex;
       flex-direction: column;
       gap: 6px;
@@ -8449,8 +8619,53 @@
       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;
+      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;
+    }
+
+    .skill-card__install-icon {
+      width: 15px;
+      height: 15px;
+    }
+
     .skill-card__name {
       font-weight: 600;
+      /* Leave room for the corner install button on global cards. */
+      padding-right: 28px;
     }
 
     .skill-card__desc {
@@ -8640,6 +8855,12 @@
   __decorate([
       r()
   ], exports.Chatbot.prototype, "_skillResults", void 0);
+  __decorate([
+      r()
+  ], exports.Chatbot.prototype, "_globalSkillResults", void 0);
+  __decorate([
+      r()
+  ], exports.Chatbot.prototype, "_aiFrameworkConfig", void 0);
   __decorate([
       r()
   ], exports.Chatbot.prototype, "_skillHighlighted", void 0);