@kodaris/krubble-app-components 1.0.78 → 1.0.80

package/dist/krubble-app.bundled.js

@@ -5748,7 +5748,7 @@ let KRChatbot = class KRChatbot extends i$3 {
         /**
          * 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 = {};
@@ -6166,11 +6166,16 @@ let KRChatbot = class KRChatbot extends i$3 {
         }
     }
     _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;
@@ -6197,8 +6202,13 @@ let KRChatbot = class KRChatbot extends i$3 {
             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;
@@ -6207,7 +6217,23 @@ let KRChatbot = class KRChatbot extends i$3 {
             this._handleSkillBrowseOpen();
             return;
         }
-        const skill = this._skillResults[index - 2];
+        if (debugActions && index === 2) {
+            this._skillMenuOpened = false;
+            this._send({
+                message: '/test-context-warning',
+                internalFiles: [],
+            });
+            return;
+        }
+        if (debugActions && index === 3) {
+            this._skillMenuOpened = false;
+            this._send({
+                message: '/test-context-limit',
+                internalFiles: [],
+            });
+            return;
+        }
+        const skill = this._skillResults[index - actionCount];
         if (skill) {
             this._handleSkillSelect(skill);
         }
@@ -6547,9 +6573,21 @@ let KRChatbot = class KRChatbot extends i$3 {
         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 = '';
@@ -6615,9 +6653,9 @@ let KRChatbot = class KRChatbot extends i$3 {
             };
         }
         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);
@@ -6838,6 +6876,14 @@ let KRChatbot = class KRChatbot extends i$3 {
     /** 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">
@@ -6859,6 +6905,26 @@ let KRChatbot = class KRChatbot extends i$3 {
           >
             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">
@@ -6867,7 +6933,7 @@ let KRChatbot = class KRChatbot extends i$3 {
                 <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)}
                 >
@@ -7179,7 +7245,7 @@ let KRChatbot = class KRChatbot extends i$3 {
             'panel--opened': this.opened,
             'panel--resizing-debug': this._isDebugResizing,
         })}
-        style=${o(this._debugPanelOpen ? { paddingRight: `${this._debugDrawerWidth}px` } : {})}
+        style=${o(isDebugEnabled && this._debugPanelOpen ? { paddingRight: `${this._debugDrawerWidth}px` } : {})}
         @dragenter=${this._handleDragEnter}
         @dragover=${this._handleDragOver}
         @dragleave=${this._handleDragLeave}
@@ -7439,9 +7505,7 @@ let KRChatbot = class KRChatbot extends i$3 {
               </svg>
             </button>
           </div>
-        ` : A}
-
-        ${this._contextLimitReached ? b `
+        ` : this._contextLimitReached ? b `
           <div class="context-limit" role="alert">
             ${this._contextLimitMessage
             || 'This conversation has reached its limit. Please start a new one to continue.'}
@@ -8027,14 +8091,22 @@ KRChatbot.styles = i$6 `
 
     /* 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;
     }
 
@@ -8047,6 +8119,11 @@ KRChatbot.styles = i$6 `
       display: flex;
       align-items: center;
       flex-shrink: 0;
+      opacity: 0.7;
+    }
+
+    .context-warning-dismiss:hover {
+      opacity: 1;
     }
 
     .context-warning-dismiss-icon {
@@ -8056,11 +8133,18 @@ KRChatbot.styles = i$6 `
 
     /* 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;
     }