@kodaris/krubble-app-components 1.0.78 → 1.0.80

package/dist/krubble-app.umd.js

@@ -5751,7 +5751,7 @@
           /**
            * 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 = {};
@@ -6169,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;
@@ -6200,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;
@@ -6210,7 +6220,23 @@
               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);
           }
@@ -6550,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 = '';
@@ -6618,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);
@@ -6841,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">
@@ -6862,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">
@@ -6870,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)}
                 >
@@ -7182,7 +7248,7 @@
             '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}
@@ -7442,9 +7508,7 @@
               </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.'}
@@ -8030,14 +8094,22 @@
 
     /* 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;
     }
 
@@ -8050,6 +8122,11 @@
       display: flex;
       align-items: center;
       flex-shrink: 0;
+      opacity: 0.7;
+    }
+
+    .context-warning-dismiss:hover {
+      opacity: 1;
     }
 
     .context-warning-dismiss-icon {
@@ -8059,11 +8136,18 @@
 
     /* 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;
     }