@kodaris/krubble-app-components 1.0.77 → 1.0.79

package/dist/chatbot.js

@@ -81,10 +81,18 @@ let KRChatbot = class KRChatbot extends LitElement {
         /** 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
@@ -190,10 +198,24 @@ let KRChatbot = class KRChatbot extends LitElement {
         /** 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). */
@@ -201,11 +223,11 @@ let KRChatbot = class KRChatbot extends LitElement {
         /** 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) {
@@ -303,6 +325,17 @@ let KRChatbot = class KRChatbot extends LitElement {
                 this.messages = messages;
             }
         }).catch(() => { });
+        // Fetch the framework config on load (debugTelemetryEnabled, v2ChatEnabled,
+        // registryServer). debugTelemetryEnabled gates the debug affordances and is
+        // known before any message.
+        KRHttp.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.
@@ -597,11 +630,16 @@ let KRChatbot = class KRChatbot extends LitElement {
         }
     }
     _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;
@@ -628,8 +666,13 @@ let KRChatbot = class KRChatbot extends LitElement {
             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;
@@ -638,7 +681,23 @@ let KRChatbot = class KRChatbot extends LitElement {
             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);
         }
@@ -667,17 +726,33 @@ let KRChatbot = class KRChatbot extends LitElement {
         // 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,
                 },
@@ -708,6 +783,66 @@ let KRChatbot = class KRChatbot extends LitElement {
             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;
+        KRHttp.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();
+        KRHttp.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) {
@@ -727,6 +862,13 @@ let KRChatbot = class KRChatbot extends LitElement {
         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(() => {
@@ -742,16 +884,22 @@ let KRChatbot = class KRChatbot extends LitElement {
         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 ---
@@ -889,9 +1037,21 @@ let KRChatbot = class KRChatbot extends LitElement {
         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 = '';
@@ -957,9 +1117,9 @@ let KRChatbot = class KRChatbot extends LitElement {
             };
         }
         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);
@@ -1180,6 +1340,14 @@ let KRChatbot = class KRChatbot extends LitElement {
     /** 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 html `
       <div class="skill-menu">
         <div class="skill-menu__actions">
@@ -1201,6 +1369,26 @@ let KRChatbot = class KRChatbot extends LitElement {
           >
             Browse All Skills
           </button>
+          ${debugActions ? html `
+            <button
+              class=${classMap({
+            'skill-menu__action': true,
+            'skill-menu__item--highlighted': this._skillHighlighted === 2,
+        })}
+              @click=${() => this._activateSkillMenuItem(2)}
+            >
+              Test: context warning
+            </button>
+            <button
+              class=${classMap({
+            'skill-menu__action': true,
+            'skill-menu__item--highlighted': this._skillHighlighted === 3,
+        })}
+              @click=${() => this._activateSkillMenuItem(3)}
+            >
+              Test: context limit
+            </button>
+          ` : nothing}
         </div>
         ${skills.length ? html `
           <ul class="skill-menu__list">
@@ -1209,7 +1397,7 @@ let KRChatbot = class KRChatbot extends LitElement {
                 <button
                   class=${classMap({
             'skill-menu__item': true,
-            'skill-menu__item--highlighted': index + 2 === this._skillHighlighted,
+            'skill-menu__item--highlighted': index + actionCount === this._skillHighlighted,
         })}
                   @click=${() => this._handleSkillSelect(skill)}
                 >
@@ -1248,37 +1436,81 @@ let KRChatbot = class KRChatbot extends LitElement {
               ${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 nothing;
         }
         return html `
       <div class="skill-browse__grid">
         ${skills.map((skill) => html `
-          <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 ? html `
               <span class="skill-card__desc">${skill.description}</span>
             ` : nothing}
-          </button>
+            ${global ? this._renderSkillInstall(skill) : nothing}
+          </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 html `
+      <button
+        class=${classMap({
+            '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>
+    `;
+    }
     /**
      * Render a user message, highlighting a leading `/skill-code` token (like the
      * way Claude highlights slash commands). The composer only inserts valid skill
@@ -1444,6 +1676,9 @@ let KRChatbot = class KRChatbot extends LitElement {
     `;
     }
     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 html `
       ${(this.hideToggle || this.variant === 'inline') ? nothing : html `
         <button
@@ -1474,7 +1709,7 @@ let KRChatbot = class KRChatbot extends LitElement {
             'panel--opened': this.opened,
             'panel--resizing-debug': this._isDebugResizing,
         })}
-        style=${styleMap(this.variant === 'inline' && this._debugPanelOpen ? { paddingRight: `${this._debugDrawerWidth}px` } : {})}
+        style=${styleMap(isDebugEnabled && this._debugPanelOpen ? { paddingRight: `${this._debugDrawerWidth}px` } : {})}
         @dragenter=${this._handleDragEnter}
         @dragover=${this._handleDragOver}
         @dragleave=${this._handleDragLeave}
@@ -1547,7 +1782,7 @@ let KRChatbot = class KRChatbot extends LitElement {
             </div>
           </div>
           <div class="header-actions">
-            ${this.variant === 'inline' ? html `
+            ${isDebugEnabled ? html `
               <button
                 class=${classMap({
             'header-action': true,
@@ -1866,7 +2101,7 @@ let KRChatbot = class KRChatbot extends LitElement {
           </div>
         </div>
         ${this._skillBrowseOpened ? this._renderSkillBrowse() : nothing}
-        ${this.variant === 'inline' ? this._renderDebugPanel() : nothing}
+        ${isDebugEnabled ? this._renderDebugPanel() : nothing}
       </div>
     `;
     }
@@ -2891,6 +3126,7 @@ KRChatbot.styles = css `
     }
 
     .skill-card {
+      position: relative;
       display: flex;
       flex-direction: column;
       gap: 6px;
@@ -2910,8 +3146,53 @@ KRChatbot.styles = css `
       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 {
@@ -3101,6 +3382,12 @@ __decorate([
 __decorate([
     state()
 ], KRChatbot.prototype, "_skillResults", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_globalSkillResults", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_aiFrameworkConfig", void 0);
 __decorate([
     state()
 ], KRChatbot.prototype, "_skillHighlighted", void 0);