@kodaris/krubble-app-components 1.0.76 → 1.0.78

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,15 +72,27 @@ 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. */
         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
@@ -143,6 +156,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). */
@@ -152,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). */
@@ -163,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) {
@@ -226,6 +286,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() {
@@ -246,11 +325,22 @@ 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 (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 +530,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 +565,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 +610,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';
@@ -594,17 +700,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,
                 },
@@ -635,6 +757,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) {
@@ -649,10 +831,18 @@ 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();
     }
+    /** 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(() => {
@@ -668,16 +858,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 ---
@@ -821,6 +1017,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.
@@ -930,6 +1127,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) {
@@ -945,6 +1150,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;
@@ -1008,6 +1229,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;
@@ -1108,37 +1370,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
@@ -1151,7 +1457,162 @@ 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() {
+        // 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
@@ -1180,7 +1641,9 @@ let KRChatbot = class KRChatbot extends LitElement {
         class=${classMap({
             'panel': true,
             'panel--opened': this.opened,
+            'panel--resizing-debug': this._isDebugResizing,
         })}
+        style=${styleMap(this._debugPanelOpen ? { paddingRight: `${this._debugDrawerWidth}px` } : {})}
         @dragenter=${this._handleDragEnter}
         @dragover=${this._handleDragOver}
         @dragleave=${this._handleDragLeave}
@@ -1253,6 +1716,31 @@ let KRChatbot = class KRChatbot extends LitElement {
             </div>
           </div>
           <div class="header-actions">
+            ${isDebugEnabled ? 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"
@@ -1417,6 +1905,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">
@@ -1516,6 +2035,7 @@ let KRChatbot = class KRChatbot extends LitElement {
           </div>
         </div>
         ${this._skillBrowseOpened ? this._renderSkillBrowse() : nothing}
+        ${isDebugEnabled ? this._renderDebugPanel() : nothing}
       </div>
     `;
     }
@@ -1697,6 +2217,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;
@@ -1726,19 +2251,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;
@@ -1977,6 +2489,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;
@@ -2316,6 +3060,7 @@ KRChatbot.styles = css `
     }
 
     .skill-card {
+      position: relative;
       display: flex;
       flex-direction: column;
       gap: 6px;
@@ -2335,8 +3080,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 {
@@ -2484,6 +3274,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);
@@ -2499,6 +3316,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);