@kodaris/krubble-app-components 1.0.79 → 1.0.81

package/dist/chatbot.js

@@ -85,8 +85,9 @@ let KRChatbot = class KRChatbot extends LitElement {
          * 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
@@ -195,24 +196,31 @@ let KRChatbot = class KRChatbot extends LitElement {
         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 = {};
@@ -223,8 +231,8 @@ let KRChatbot = class KRChatbot extends LitElement {
         /** 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. */
@@ -617,13 +625,14 @@ let KRChatbot = class KRChatbot extends LitElement {
         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;
@@ -639,7 +648,7 @@ let KRChatbot = class KRChatbot extends LitElement {
             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;
@@ -684,7 +693,7 @@ let KRChatbot = class KRChatbot extends LitElement {
         if (debugActions && index === 2) {
             this._skillMenuOpened = false;
             this._send({
-                message: '/test-warning',
+                message: '/test-context-warning',
                 internalFiles: [],
             });
             return;
@@ -692,19 +701,19 @@ let KRChatbot = class KRChatbot extends LitElement {
         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
@@ -715,9 +724,9 @@ let KRChatbot = class KRChatbot extends LitElement {
      * 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
@@ -767,6 +776,11 @@ let KRChatbot = class KRChatbot extends LitElement {
                     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 } }],
                     },
                 },
             },
@@ -774,17 +788,106 @@ let KRChatbot = class KRChatbot extends LitElement {
             .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 = KRHttp.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 = KRHttp.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`
@@ -805,7 +908,7 @@ let KRChatbot = class KRChatbot extends LitElement {
             if (requestId !== this._globalSkillRequestId) {
                 return;
             }
-            this._globalSkillResults = (res?.data || []);
+            this._globalSkills = (res?.data || []);
         })
             .catch((error) => {
             console.error('kr-chatbot: global skill search failed', error);
@@ -817,13 +920,16 @@ let KRChatbot = class KRChatbot extends LitElement {
      * 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();
         KRHttp.fetch({
             url: `/api/system/opensearch/aiskills/global/${encodeURIComponent(skill.code)}/enabled`,
             method: 'POST',
@@ -831,16 +937,18 @@ let KRChatbot = class KRChatbot extends LitElement {
         })
             .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). */
@@ -852,7 +960,7 @@ let KRChatbot = class KRChatbot extends LitElement {
         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) {
@@ -885,7 +993,7 @@ let KRChatbot = class KRChatbot extends LitElement {
         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() {
@@ -894,7 +1002,7 @@ let KRChatbot = class KRChatbot extends LitElement {
     _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) {
@@ -1339,7 +1447,7 @@ let KRChatbot = class KRChatbot extends LitElement {
     // --- 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.
@@ -1377,7 +1485,7 @@ let KRChatbot = class KRChatbot extends LitElement {
         })}
               @click=${() => this._activateSkillMenuItem(2)}
             >
-              Test: context warning
+              Test Context Warning
             </button>
             <button
               class=${classMap({
@@ -1386,7 +1494,7 @@ let KRChatbot = class KRChatbot extends LitElement {
         })}
               @click=${() => this._activateSkillMenuItem(3)}
             >
-              Test: context limit
+              Test Context Limit
             </button>
           ` : nothing}
         </div>
@@ -1446,69 +1554,71 @@ let KRChatbot = class KRChatbot extends LitElement {
     /**
      * 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 nothing;
         }
         return html `
       <div class="skill-browse__grid">
-        ${skills.map((skill) => html `
-          <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}
-            ${global ? this._renderSkillInstall(skill) : nothing}
-          </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 html `
+            <div
+              class="skill-card"
+              role=${selectable ? 'button' : nothing}
+              tabindex=${selectable ? 0 : nothing}
+              @click=${selectable ? () => this._handleSkillSelect(skill) : nothing}
+              @keydown=${selectable ? (e) => this._handleSkillCardKeydown(e, skill) : nothing}
+            >
+              <span class="skill-card__name">${skill.name}</span>
+              ${skill.description ? html `
+                <span class="skill-card__desc">${skill.description}</span>
+              ` : nothing}
+              ${global ? this._renderSkillToggle(skill) : nothing}
+            </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 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)}
+      <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>
     `;
     }
     /**
@@ -1969,9 +2079,7 @@ let KRChatbot = class KRChatbot extends LitElement {
               </svg>
             </button>
           </div>
-        ` : nothing}
-
-        ${this._contextLimitReached ? html `
+        ` : this._contextLimitReached ? html `
           <div class="context-limit" role="alert">
             ${this._contextLimitMessage
             || 'This conversation has reached its limit. Please start a new one to continue.'}
@@ -2557,14 +2665,22 @@ KRChatbot.styles = css `
 
     /* 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;
     }
 
@@ -2577,6 +2693,11 @@ KRChatbot.styles = css `
       display: flex;
       align-items: center;
       flex-shrink: 0;
+      opacity: 0.7;
+    }
+
+    .context-warning-dismiss:hover {
+      opacity: 1;
     }
 
     .context-warning-dismiss-icon {
@@ -2586,11 +2707,18 @@ KRChatbot.styles = css `
 
     /* 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;
     }
 
@@ -3118,7 +3246,7 @@ KRChatbot.styles = css `
       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;
@@ -3146,53 +3274,31 @@ 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;
+    /* 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 {
@@ -3381,10 +3487,13 @@ __decorate([
 ], KRChatbot.prototype, "_skillQuery", void 0);
 __decorate([
     state()
-], KRChatbot.prototype, "_skillResults", void 0);
+], KRChatbot.prototype, "_orgSkills", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_globalSkills", void 0);
 __decorate([
     state()
-], KRChatbot.prototype, "_globalSkillResults", void 0);
+], KRChatbot.prototype, "_invocableSkills", void 0);
 __decorate([
     state()
 ], KRChatbot.prototype, "_aiFrameworkConfig", void 0);