@kodaris/krubble-app-components 1.0.75 → 1.0.77

package/dist/chatbot.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { LitElement, html, css, nothing } from 'lit';
 import { customElement, property, state, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { marked } from 'marked';
@@ -71,6 +72,10 @@ let KRChatbot = class KRChatbot extends LitElement {
         this._dragStartTop = 0;
         this._resizeStartW = 0;
         this._resizeStartH = 0;
+        /** Cursor X at debug-drawer resize start. */
+        this._debugResizeStartX = 0;
+        /** Debug-drawer width at resize start. */
+        this._debugResizeStartW = 0;
         /** Counter for depth-aware dragenter/dragleave tracking. */
         this._dragDepth = 0;
         /** Monotonic id source for pending attachments. */
@@ -143,6 +148,39 @@ let KRChatbot = class KRChatbot extends LitElement {
         this._inputValue = '';
         this._isStreaming = false;
         this._error = '';
+        /**
+         * User-facing context warning text (`CONVERSATION_TOKEN_WARNING`). Shown as a
+         * dismissible banner in all variants. Carries only friendly guidance, no numbers.
+         */
+        this._contextWarning = '';
+        /**
+         * True once the conversation hit the context-window limit
+         * (`CONVERSATION_LIMIT_REACHED`, or `contextExceeded` on load). Drives a
+         * blocking "start a new conversation" notice. User-facing, all variants.
+         */
+        this._contextLimitReached = false;
+        /** Server-provided limit text (`CONVERSATION_LIMIT_REACHED`), if any. */
+        this._contextLimitMessage = '';
+        /**
+         * INTERNAL-ONLY latest telemetry snapshot (last-value-wins). Populated from
+         * `TOKEN_USAGE` events during streaming and hydrated from the conversation
+         * DTO on load. Only surfaced in the `inline` variant's debug panel.
+         */
+        this._telemetry = null;
+        /**
+         * INTERNAL-ONLY per-iteration telemetry log for the debug panel's verbose
+         * table. Append-only within a turn; reset at the start of each send. Each row
+         * may be augmented with its `CACHE_CHECKPOINT` info.
+         */
+        this._iterationLog = [];
+        /** Latest cache-checkpoint info keyed by iteration, for the verbose table. */
+        this._cacheCheckpoints = {};
+        /** Whether the internal debug panel is expanded (off by default). */
+        this._debugPanelOpen = false;
+        /** Current width of the debug drawer in px (user-resizable, persisted). */
+        this._debugDrawerWidth = 430;
+        /** True while the user is dragging the debug drawer's resize handle. */
+        this._isDebugResizing = false;
         /** Images staged in the composer, before the message is sent. */
         this._pendingInternalFiles = [];
         /** True while a file is being dragged over the panel (shows the drop overlay). */
@@ -226,6 +264,25 @@ let KRChatbot = class KRChatbot extends LitElement {
             document.removeEventListener('mouseup', this._handleMouseUp);
             this._saveState();
         };
+        this._handleDebugResizeMouseMove = (e) => {
+            if (!this._isDebugResizing) {
+                return;
+            }
+            // Handle is on the drawer's left edge; dragging left (negative dx) widens it.
+            const dx = e.clientX - this._debugResizeStartX;
+            const minW = 300;
+            // Never let the chat column shrink below 300px — cap the drawer at the
+            // container width minus that reserved chat width.
+            const minChatWidth = 300;
+            const maxW = Math.max(minW, this.offsetWidth - minChatWidth);
+            this._debugDrawerWidth = Math.max(minW, Math.min(this._debugResizeStartW - dx, maxW));
+        };
+        this._handleDebugResizeMouseUp = () => {
+            this._isDebugResizing = false;
+            document.removeEventListener('mousemove', this._handleDebugResizeMouseMove);
+            document.removeEventListener('mouseup', this._handleDebugResizeMouseUp);
+            this._saveState();
+        };
     }
     // --- Lifecycle ---
     connectedCallback() {
@@ -247,10 +304,10 @@ let KRChatbot = class KRChatbot extends LitElement {
             }
         }).catch(() => { });
         // Inline mode fills its container and is always open — the floating widget's
-        // toggle/drag/resize state (including any persisted layout) doesn't apply.
+        // toggle/drag/resize state doesn't apply, but the composer message and debug
+        // drawer state (restored inside _restoreState) do.
         if (this.variant === 'inline') {
             this.opened = true;
-            return;
         }
         this._restoreState();
     }
@@ -440,7 +497,12 @@ let KRChatbot = class KRChatbot extends LitElement {
     }
     _saveState() {
         try {
-            const state = { opened: String(this.opened) };
+            const state = {
+                opened: String(this.opened),
+                message: this._inputValue,
+                debugPanelOpen: String(this._debugPanelOpen),
+                debugDrawerWidth: String(this._debugDrawerWidth),
+            };
             if (this._panelEl) {
                 const s = this._panelEl.style;
                 if (s.left) {
@@ -470,7 +532,17 @@ let KRChatbot = class KRChatbot extends LitElement {
                 return;
             }
             const state = JSON.parse(raw);
-            if (state.opened === 'true') {
+            // Draft text and the debug drawer are persisted for all variants.
+            if (typeof state.message === 'string') {
+                this._inputValue = state.message;
+            }
+            this._debugPanelOpen = state.debugPanelOpen === 'true';
+            const w = Number(state.debugDrawerWidth);
+            if (w >= 300) {
+                this._debugDrawerWidth = w;
+            }
+            // The floating widget's open/layout state doesn't apply to inline mode.
+            if (this.variant !== 'inline' && state.opened === 'true') {
                 this.opened = true;
                 // Apply layout after first render
                 this.updateComplete.then(() => this._applyStoredLayout());
@@ -505,6 +577,7 @@ let KRChatbot = class KRChatbot extends LitElement {
     }
     _handleInputChange(e) {
         this._inputValue = e.target.value;
+        this._saveState();
         // Auto-resize textarea
         const textarea = e.target;
         textarea.style.height = 'auto';
@@ -587,15 +660,26 @@ let KRChatbot = class KRChatbot extends LitElement {
         this._skillRequestId++;
         const requestId = this._skillRequestId;
         const trimmed = query.trim();
-        // multi_match with an empty string matches nothing, so an empty query falls
-        // back to match_all to show everything.
+        // An empty query matches everything; otherwise substring-match the query
+        // against name/code/description. We use case-insensitive wildcard queries on
+        // the `.raw` keyword subfields so "ord" matches anywhere in "Create Order"
+        // (a plain match/multi_match only matches whole tokens). Escape the wildcard
+        // 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 = {
-                multi_match: {
-                    query: trimmed,
-                    fields: ['name^3', 'description^2', 'instructions'],
-                    type: 'best_fields',
+                bool: {
+                    should: [
+                        { wildcard: { 'name.raw': value } },
+                        { wildcard: { 'code.raw': value } },
+                        { wildcard: { 'description.raw': value } },
+                    ],
+                    minimum_should_match: 1,
                 },
             };
         }
@@ -638,6 +722,7 @@ let KRChatbot = class KRChatbot extends LitElement {
     /** Insert `/code ` into the composer and focus it, ready for the message. */
     _handleSkillSelect(skill) {
         this._inputValue = `/${skill.code} `;
+        this._saveState();
         this._skillMenuOpened = false;
         this._skillBrowseOpened = false;
         this._inputEl?.focus();
@@ -810,6 +895,7 @@ let KRChatbot = class KRChatbot extends LitElement {
         };
         this.messages = [...this.messages, userMessage];
         this._inputValue = '';
+        this._saveState();
         this._error = '';
         this._userHasScrolledUp = false;
         // Clear the composer and release its preview object URLs.
@@ -919,6 +1005,14 @@ let KRChatbot = class KRChatbot extends LitElement {
             this._error = '';
             this._inputValue = '';
             this._userHasScrolledUp = false;
+            // Reset conversation-scoped context + telemetry state for the new convo.
+            this._contextWarning = '';
+            this._contextLimitReached = false;
+            this._contextLimitMessage = '';
+            this._telemetry = null;
+            this._iterationLog = [];
+            this._cacheCheckpoints = {};
+            this._saveState();
         });
     }
     _handleMessagesScroll(e) {
@@ -934,6 +1028,22 @@ let KRChatbot = class KRChatbot extends LitElement {
     _handleErrorDismiss() {
         this._error = '';
     }
+    _handleContextWarningDismiss() {
+        this._contextWarning = '';
+    }
+    _handleToggleDebugPanel() {
+        this._debugPanelOpen = !this._debugPanelOpen;
+        this._saveState();
+    }
+    _handleDebugResizeMouseDown(e) {
+        this._isDebugResizing = true;
+        this._debugResizeStartX = e.clientX;
+        this._debugResizeStartW = this._debugDrawerWidth;
+        e.preventDefault();
+        e.stopPropagation();
+        document.addEventListener('mousemove', this._handleDebugResizeMouseMove);
+        document.addEventListener('mouseup', this._handleDebugResizeMouseUp);
+    }
     _readStreamChunk() {
         if (!this._reader) {
             return;
@@ -997,6 +1107,47 @@ let KRChatbot = class KRChatbot extends LitElement {
                     else if (data.type === 'ERROR') {
                         this._handleStreamError(String(data.message || 'Unknown error'));
                     }
+                    else if (data.type === 'CONVERSATION_TOKEN_WARNING') {
+                        // User-facing: friendly "conversation is getting long" guidance.
+                        // Text only, never sent to the model — render verbatim as a banner.
+                        this._contextWarning = String(data.message || '');
+                    }
+                    else if (data.type === 'CONVERSATION_LIMIT_REACHED') {
+                        // User-facing hard stop. Carries finished:true (handled below).
+                        // Clear any soft warning so we don't double-message the user.
+                        this._contextLimitReached = true;
+                        this._contextLimitMessage = String(data.message || '');
+                        this._contextWarning = '';
+                    }
+                    else if (data.type === 'TOKEN_USAGE') {
+                        // INTERNAL-ONLY debug telemetry. Update the panel snapshot and the
+                        // per-iteration log; never render as a chat bubble.
+                        if (data.data) {
+                            const usage = data.data;
+                            this._telemetry = usage;
+                            // A new turn starts at iteration 1 — clear the prior turn's log
+                            // only now (not at send), so it stays visible until fresh data
+                            // actually arrives rather than blanking out on submit.
+                            if (usage.iteration === 1) {
+                                this._iterationLog = [usage];
+                                this._cacheCheckpoints = {};
+                            }
+                            else {
+                                this._iterationLog = [...this._iterationLog, usage];
+                            }
+                        }
+                    }
+                    else if (data.type === 'CACHE_CHECKPOINT') {
+                        // INTERNAL-ONLY debug telemetry. Records when/under which mode the
+                        // history checkpoint was placed, keyed by iteration for the table.
+                        if (data.data) {
+                            const checkpoint = data.data;
+                            this._cacheCheckpoints = {
+                                ...this._cacheCheckpoints,
+                                [checkpoint.iteration]: checkpoint,
+                            };
+                        }
+                    }
                     if (data.finished) {
                         this._isStreaming = false;
                         this._reader = null;
@@ -1140,6 +1291,158 @@ let KRChatbot = class KRChatbot extends LitElement {
         }
         return content;
     }
+    /** Compact integer formatting for the debug panel (e.g. 88928 → "88,928"). */
+    _fmtTokens(n) {
+        if (n == null || isNaN(n)) {
+            return '—';
+        }
+        return n.toLocaleString('en-US');
+    }
+    /** Approximate USD formatting for the debug panel (e.g. 0.1434 → "~$0.1434"). */
+    _fmtCost(n) {
+        if (n == null || isNaN(n)) {
+            return '—';
+        }
+        return '~$' + n.toFixed(4);
+    }
+    /**
+     * INTERNAL-ONLY debug telemetry panel. Rendered only in the inline variant
+     * (guarded by the caller) and only when the user has toggled it open. Shows
+     * three scopes from the latest TOKEN_USAGE event — context gauge, this turn,
+     * lifetime — plus a verbose per-iteration table. Never customer-facing.
+     */
+    _renderDebugPanel() {
+        return html `
+      <div
+        class=${classMap({
+            'debug-drawer': true,
+            'debug-drawer--open': this._debugPanelOpen,
+            'debug-drawer--resizing': this._isDebugResizing,
+        })}
+        style=${styleMap({ width: `${this._debugDrawerWidth}px` })}
+      >
+        <div
+          class="debug-drawer__resize"
+          @mousedown=${this._handleDebugResizeMouseDown}
+        ></div>
+        <div class="debug-drawer__header">
+          <span class="debug-drawer__title">Debug</span>
+          <button
+            class="header-action"
+            @click=${this._handleToggleDebugPanel}
+            title="Close debug panel"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="2"
+              stroke="currentColor"
+              class="header-action-icon"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M6 18 18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
+        <div class="debug-drawer__body">
+          ${this._telemetry ? html `
+            <div class="debug-section">
+              <div class="debug-section__label">Context</div>
+              <div class="debug-gauge">
+                <div class="debug-gauge__bar">
+                  <div
+                    class="debug-gauge__fill"
+                    style=${styleMap({ width: `${Math.min(100, Math.max(0, this._telemetry.contextUsedPercent || 0))}%` })}
+                  ></div>
+                </div>
+                <span class="debug-gauge__text">
+                  ${this._fmtTokens(this._telemetry.currentContextTokens)} / ${this._fmtTokens(this._telemetry.contextWindowTokens)}
+                  · ${this._telemetry.contextUsedPercent ?? 0}%
+                </span>
+              </div>
+            </div>
+
+            <div class="debug-section">
+              <div class="debug-section__label">This turn</div>
+              <div class="debug-metrics">
+                <span class="debug-metrics__key">Input</span>
+                <span class="debug-metrics__val">${this._fmtTokens(this._telemetry.turnInputTokens)}</span>
+                <span class="debug-metrics__key">Output</span>
+                <span class="debug-metrics__val">${this._fmtTokens(this._telemetry.turnOutputTokens)}</span>
+                <span class="debug-metrics__key">Cache read</span>
+                <span class="debug-metrics__val">${this._fmtTokens(this._telemetry.turnCacheReadTokens)}</span>
+                <span class="debug-metrics__key">Hit rate</span>
+                <span class="debug-metrics__val">${this._telemetry.turnHitRate ?? '—'}%</span>
+                <span class="debug-metrics__key">Cost</span>
+                <span class="debug-metrics__val debug-cost">${this._fmtCost(this._telemetry.turnCostUsd)}</span>
+              </div>
+            </div>
+
+            <div class="debug-section">
+              <div class="debug-section__label">Lifetime</div>
+              <div class="debug-metrics">
+                <span class="debug-metrics__key">Input</span>
+                <span class="debug-metrics__val">${this._fmtTokens(this._telemetry.conversationInputTokens)}</span>
+                <span class="debug-metrics__key">Output</span>
+                <span class="debug-metrics__val">${this._fmtTokens(this._telemetry.conversationOutputTokens)}</span>
+                <span class="debug-metrics__key">Cache read</span>
+                <span class="debug-metrics__val">${this._fmtTokens(this._telemetry.conversationCacheReadTokens)}</span>
+                <span class="debug-metrics__key">Cache write</span>
+                <span class="debug-metrics__val">${this._fmtTokens(this._telemetry.conversationCacheWriteTokens)}</span>
+                <span class="debug-metrics__key">Cost so far</span>
+                <span class="debug-metrics__val debug-cost">${this._fmtCost(this._telemetry.conversationCostUsd)}</span>
+              </div>
+            </div>
+          ` : html `
+            <div class="debug-empty">No telemetry yet — send a message to populate.</div>
+          `}
+
+          ${this._iterationLog.length ? html `
+            <div class="debug-section">
+              <div class="debug-section__label">Iterations (this turn)</div>
+              <div class="debug-iterations-scroll">
+                <table class="debug-iterations">
+                  <thead>
+                    <tr>
+                      <th>#</th>
+                      <th>In</th>
+                      <th>Out</th>
+                      <th>Cache R</th>
+                      <th>Cache W</th>
+                      <th>Hit</th>
+                      <th>Cost</th>
+                      <th>Ckpt</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    ${this._iterationLog.map((it) => {
+            const ckpt = this._cacheCheckpoints[it.iteration];
+            return html `
+                        <tr>
+                          <td>${it.iteration}</td>
+                          <td>${this._fmtTokens(it.iterationInput)}</td>
+                          <td>${this._fmtTokens(it.iterationOutput)}</td>
+                          <td>${this._fmtTokens(it.iterationCacheRead)}</td>
+                          <td>${this._fmtTokens(it.iterationCacheWrite)}</td>
+                          <td>${it.iterationHitRate ?? '—'}%</td>
+                          <td class="debug-cost">${this._fmtCost(it.iterationCostUsd)}</td>
+                          <td>${ckpt ? ckpt.mode : '—'}</td>
+                        </tr>
+                      `;
+        })}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          ` : nothing}
+        </div>
+      </div>
+    `;
+    }
     render() {
         return html `
       ${(this.hideToggle || this.variant === 'inline') ? nothing : html `
@@ -1169,7 +1472,9 @@ let KRChatbot = class KRChatbot extends LitElement {
         class=${classMap({
             'panel': true,
             'panel--opened': this.opened,
+            'panel--resizing-debug': this._isDebugResizing,
         })}
+        style=${styleMap(this.variant === 'inline' && this._debugPanelOpen ? { paddingRight: `${this._debugDrawerWidth}px` } : {})}
         @dragenter=${this._handleDragEnter}
         @dragover=${this._handleDragOver}
         @dragleave=${this._handleDragLeave}
@@ -1242,6 +1547,31 @@ let KRChatbot = class KRChatbot extends LitElement {
             </div>
           </div>
           <div class="header-actions">
+            ${this.variant === 'inline' ? html `
+              <button
+                class=${classMap({
+            'header-action': true,
+            'header-action--active': this._debugPanelOpen,
+        })}
+                @click=${this._handleToggleDebugPanel}
+                title="Debug telemetry"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="header-action-icon"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6"
+                  />
+                </svg>
+              </button>
+            ` : nothing}
             ${this.messages.length > 0 ? html `
               <button
                 class="header-action"
@@ -1406,6 +1736,37 @@ let KRChatbot = class KRChatbot extends LitElement {
           </div>
         ` : nothing}
 
+        ${this._contextLimitReached ? html `
+          <div class="context-limit" role="alert">
+            ${this._contextLimitMessage
+            || 'This conversation has reached its limit. Please start a new one to continue.'}
+          </div>
+        ` : this._contextWarning ? html `
+          <div class="context-warning" role="status">
+            <span>${this._contextWarning}</span>
+            <button
+              class="context-warning-dismiss"
+              title="Dismiss"
+              @click=${this._handleContextWarningDismiss}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="2"
+                stroke="currentColor"
+                class="context-warning-dismiss-icon"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M6 18 18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          </div>
+        ` : nothing}
+
         <div class="footer">
           ${this._pendingInternalFiles.length ? html `
             <div class="composer-attachments">
@@ -1505,6 +1866,7 @@ let KRChatbot = class KRChatbot extends LitElement {
           </div>
         </div>
         ${this._skillBrowseOpened ? this._renderSkillBrowse() : nothing}
+        ${this.variant === 'inline' ? this._renderDebugPanel() : nothing}
       </div>
     `;
     }
@@ -1686,6 +2048,11 @@ KRChatbot.styles = css `
       color: #000000;
     }
 
+    .header-action--active {
+      background: rgba(0, 0, 0, 0.08);
+      color: #000000;
+    }
+
     .header-action-icon {
       width: 20px;
       height: 20px;
@@ -1715,19 +2082,6 @@ KRChatbot.styles = css `
       margin-right: auto;
     }
 
-    .messages::-webkit-scrollbar {
-      width: 4px;
-    }
-
-    .messages::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    .messages::-webkit-scrollbar-thumb {
-      background: rgba(0, 0, 0, 0.08);
-      border-radius: 2px;
-    }
-
     .empty {
       flex: 1;
       display: flex;
@@ -1966,6 +2320,238 @@ KRChatbot.styles = css `
       height: 14px;
     }
 
+    /* Context warning banner (user-facing, dismissible, non-blocking) */
+    .context-warning {
+      padding: 8px 16px;
+      background: #fffbeb;
+      color: #92400e;
+      font-size: 13px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      flex-shrink: 0;
+    }
+
+    .context-warning-dismiss {
+      background: none;
+      border: none;
+      color: #92400e;
+      cursor: pointer;
+      padding: 2px;
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
+
+    .context-warning-dismiss-icon {
+      width: 14px;
+      height: 14px;
+    }
+
+    /* Context-limit notice (user-facing, blocking — steers to a new conversation) */
+    .context-limit {
+      padding: 10px 16px;
+      background: var(--kr-chatbot-error-bg);
+      color: var(--kr-chatbot-error-text);
+      font-size: 13px;
+      line-height: 1.5;
+      flex-shrink: 0;
+    }
+
+    /*
+     * INTERNAL-ONLY debug telemetry drawer. A layout drawer docked to the right
+     * of the inline chat — the chat column shrinks to make room; it does not
+     * overlay. Closed by default (width 0), animates open. Not customer-facing —
+     * token counts, cache internals, and approximate cost estimates for internal
+     * debugging. Styled to match the chatbot's light theme (Inter, design tokens).
+     */
+    /*
+     * The chat column reserves space for the drawer by animating padding-right,
+     * so opening the drawer shrinks the chat (header/messages/composer) rather
+     * than overlaying it. Only applies in inline mode.
+     */
+    :host([variant='inline']) .panel {
+      transition: padding-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    /* Track the cursor 1:1 while dragging the drawer's resize handle. */
+    :host([variant='inline']) .panel--resizing-debug {
+      transition: none;
+    }
+
+    .debug-drawer {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      background: var(--kr-chatbot-bg);
+      display: flex;
+      flex-direction: column;
+      transform: translateX(100%);
+      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      color: #000000;
+      z-index: 5;
+    }
+
+    /* While dragging the resize handle, suppress the slide transition so the
+       drawer tracks the cursor 1:1. */
+    .debug-drawer--resizing {
+      transition: none;
+    }
+
+    .debug-drawer--open {
+      transform: translateX(0);
+      box-shadow: -4px 0 20px rgba(10, 26, 46, 0.07);
+    }
+
+    /* Left-edge grab handle for resizing the drawer. */
+    .debug-drawer__resize {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: 10px;
+      cursor: ew-resize;
+      z-index: 10;
+    }
+
+    .debug-drawer__header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 12px 0 20px;
+      height: 64px;
+      flex-shrink: 0;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+    }
+
+    .debug-drawer__title {
+      font-size: 14px;
+      font-weight: 600;
+      color: #000000;
+    }
+
+    .debug-drawer__body {
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: 4px 0;
+    }
+
+    .debug-section {
+      padding: 14px 20px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+    }
+
+    .debug-section:last-child {
+      border-bottom: none;
+    }
+
+    .debug-section__label {
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      color: #000000;
+      font-size: 11px;
+      font-weight: 600;
+      margin-bottom: 10px;
+    }
+
+    /* Context-fullness gauge */
+    .debug-gauge {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .debug-gauge__bar {
+      flex: 1;
+      height: 8px;
+      border-radius: 4px;
+      background: rgb(244 244 244 / 100%);
+      overflow: hidden;
+    }
+
+    .debug-gauge__fill {
+      height: 100%;
+      border-radius: 4px;
+      background: var(--kr-chatbot-primary);
+      transition: width 0.3s ease;
+    }
+
+    .debug-gauge__text {
+      color: #000000;
+      font-size: 12px;
+      white-space: nowrap;
+      font-variant-numeric: tabular-nums;
+    }
+
+    /* Metric rows */
+    .debug-metrics {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      column-gap: 12px;
+      row-gap: 7px;
+      font-size: 13px;
+    }
+
+    .debug-metrics__key {
+      color: #000000;
+    }
+
+    .debug-metrics__val {
+      color: #000000;
+      text-align: right;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .debug-cost {
+      font-weight: 600;
+    }
+
+    /* Per-iteration table (verbose). The wrapper scrolls horizontally on its own
+       so a wide table never forces the whole drawer to scroll sideways. */
+    .debug-iterations-scroll {
+      overflow-x: auto;
+      max-width: 100%;
+    }
+
+    .debug-iterations {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 12px;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .debug-iterations th,
+    .debug-iterations td {
+      padding: 5px 6px;
+      text-align: right;
+      white-space: nowrap;
+    }
+
+    .debug-iterations th {
+      color: #000000;
+      font-weight: 600;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.10);
+    }
+
+    .debug-iterations tbody tr:not(:last-child) td {
+      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    }
+
+    .debug-iterations td:first-child,
+    .debug-iterations th:first-child {
+      text-align: left;
+    }
+
+    .debug-empty {
+      color: #000000;
+      padding: 20px;
+      font-size: 13px;
+      text-align: center;
+    }
+
     /* Footer / Input */
     .footer {
       padding: 16px 16px 16px;
@@ -2473,6 +3059,33 @@ __decorate([
 __decorate([
     state()
 ], KRChatbot.prototype, "_error", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_contextWarning", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_contextLimitReached", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_contextLimitMessage", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_telemetry", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_iterationLog", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_cacheCheckpoints", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_debugPanelOpen", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_debugDrawerWidth", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_isDebugResizing", void 0);
 __decorate([
     state()
 ], KRChatbot.prototype, "_pendingInternalFiles", void 0);