@kodaris/krubble-app-components 1.0.77 → 1.0.79

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.
@@ -6136,11 +6169,16 @@
           }
       }
       _handleKeyDown(e) {
-          // When the skill menu is open, arrow keys / Enter / Escape drive it. The two
-          // top actions (Attach Files, Browse All Skills) are index 0 and 1, then the
-          // filtered skills follow — all navigable as one list.
+          // When the skill menu is open, arrow keys / Enter / Escape drive it. The top
+          // actions (Attach Files, Browse All Skills, plus the two debug test triggers
+          // when enabled) come first, then the filtered skills — all one navigable list.
           if (this._skillMenuOpened) {
-              const count = 2 + this._skillResults.length;
+              const debugActions = this.variant === 'inline' && this._aiFrameworkConfig.debugTelemetryEnabled === true;
+              let actionCount = 2;
+              if (debugActions) {
+                  actionCount = 4;
+              }
+              const count = actionCount + this._skillResults.length;
               if (e.key === 'ArrowDown') {
                   e.preventDefault();
                   this._skillHighlighted = (this._skillHighlighted + 1) % count;
@@ -6167,8 +6205,13 @@
               this._handleSubmit();
           }
       }
-      /** Run the skill-menu item at the given flat index (0/1 = actions, then skills). */
+      /** Run the skill-menu item at the given flat index (actions first, then skills). */
       _activateSkillMenuItem(index) {
+          const debugActions = this.variant === 'inline' && this._aiFrameworkConfig.debugTelemetryEnabled === true;
+          let actionCount = 2;
+          if (debugActions) {
+              actionCount = 4;
+          }
           if (index === 0) {
               this._openFilePicker();
               return;
@@ -6177,7 +6220,23 @@
               this._handleSkillBrowseOpen();
               return;
           }
-          const skill = this._skillResults[index - 2];
+          if (debugActions && index === 2) {
+              this._skillMenuOpened = false;
+              this._send({
+                  message: '/test-warning',
+                  internalFiles: [],
+              });
+              return;
+          }
+          if (debugActions && index === 3) {
+              this._skillMenuOpened = false;
+              this._send({
+                  message: '/test-limit',
+                  internalFiles: [],
+              });
+              return;
+          }
+          const skill = this._skillResults[index - actionCount];
           if (skill) {
               this._handleSkillSelect(skill);
           }
@@ -6206,17 +6265,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 +6322,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 +6401,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 +6423,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 ---
@@ -6428,9 +6576,21 @@
           if (submitEvent.defaultPrevented) {
               return;
           }
+          this._send({
+              message: messageText,
+              internalFiles
+          });
+      }
+      /**
+       * Append the user message and stream the response. Split out of `_handleSubmit`
+       * so debug test triggers can send a specific message without going through the
+       * composer input. `_handleSubmit` owns reading/validating the composer and
+       * firing the cancelable `message-submit` event; this owns the send + stream.
+       */
+      _send(params) {
           const userMessage = {
               type: 'user',
-              content: messageText,
+              content: params.message,
           };
           this.messages = [...this.messages, userMessage];
           this._inputValue = '';
@@ -6496,9 +6656,9 @@
               };
           }
           this.send({
-              message: messageText,
+              message: params.message,
               messages: this.messages.slice(0, -1),
-              internalFiles,
+              internalFiles: params.internalFiles,
           }).then((response) => {
               if (!response.ok) {
                   this._handleStreamError('Request failed: ' + response.status);
@@ -6719,6 +6879,14 @@
       /** The `/` skill menu shown above the composer while typing a slash command. */
       _renderSkillMenu() {
           const skills = this._skillResults;
+          // 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.
+          const debugActions = this.variant === 'inline' && this._aiFrameworkConfig.debugTelemetryEnabled === true;
+          let actionCount = 2;
+          if (debugActions) {
+              actionCount = 4;
+          }
           return b `
       <div class="skill-menu">
         <div class="skill-menu__actions">
@@ -6740,6 +6908,26 @@
           >
             Browse All Skills
           </button>
+          ${debugActions ? b `
+            <button
+              class=${e({
+            'skill-menu__action': true,
+            'skill-menu__item--highlighted': this._skillHighlighted === 2,
+        })}
+              @click=${() => this._activateSkillMenuItem(2)}
+            >
+              Test: context warning
+            </button>
+            <button
+              class=${e({
+            'skill-menu__action': true,
+            'skill-menu__item--highlighted': this._skillHighlighted === 3,
+        })}
+              @click=${() => this._activateSkillMenuItem(3)}
+            >
+              Test: context limit
+            </button>
+          ` : A}
         </div>
         ${skills.length ? b `
           <ul class="skill-menu__list">
@@ -6748,7 +6936,7 @@
                 <button
                   class=${e({
             'skill-menu__item': true,
-            'skill-menu__item--highlighted': index + 2 === this._skillHighlighted,
+            'skill-menu__item--highlighted': index + actionCount === this._skillHighlighted,
         })}
                   @click=${() => this._handleSkillSelect(skill)}
                 >
@@ -6787,35 +6975,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 +7215,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 +7248,7 @@
             'panel--opened': this.opened,
             'panel--resizing-debug': this._isDebugResizing,
         })}
-        style=${o(this.variant === 'inline' && this._debugPanelOpen ? { paddingRight: `${this._debugDrawerWidth}px` } : {})}
+        style=${o(isDebugEnabled && this._debugPanelOpen ? { paddingRight: `${this._debugDrawerWidth}px` } : {})}
         @dragenter=${this._handleDragEnter}
         @dragover=${this._handleDragOver}
         @dragleave=${this._handleDragLeave}
@@ -7086,7 +7321,7 @@
             </div>
           </div>
           <div class="header-actions">
-            ${this.variant === 'inline' ? b `
+            ${isDebugEnabled ? b `
               <button
                 class=${e({
             'header-action': true,
@@ -7405,7 +7640,7 @@
           </div>
         </div>
         ${this._skillBrowseOpened ? this._renderSkillBrowse() : A}
-        ${this.variant === 'inline' ? this._renderDebugPanel() : A}
+        ${isDebugEnabled ? this._renderDebugPanel() : A}
       </div>
     `;
       }
@@ -8430,6 +8665,7 @@
     }
 
     .skill-card {
+      position: relative;
       display: flex;
       flex-direction: column;
       gap: 6px;
@@ -8449,8 +8685,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 +8921,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);