@kodaris/krubble-app-components 1.0.116 → 1.0.117

package/dist/chatbot.js

@@ -339,11 +339,26 @@ let KRChatbot = class KRChatbot extends LitElement {
          */
         this._drawerOpen = false;
         /**
-         * Which view the drawer shows — settings or debug. One drawer holds both; the
-         * header buttons switch this and the content/width swap inside. Never null, so
-         * the content stays visible while the drawer slides shut.
+         * Which view the drawer shows — settings, debug, or a single tool call's full
+         * detail. One drawer holds all three; the header buttons switch settings/debug
+         * and clicking a tool line switches to `toolDetail`. The content/width swap
+         * inside. Never null, so the content stays visible while the drawer slides shut.
          */
         this._drawerView = 'settings';
+        /**
+         * The tool call whose full input/output the `toolDetail` drawer view shows —
+         * the clicked `tool_use` message and its paired `tool_result` message, stored
+         * whole. The render reads `.data.*` off them (and formats for display) so we
+         * don't duplicate the message shape here. Transient — set on click, never
+         * persisted (its bytes can be large and the view is a peek). Null when none.
+         */
+        this._toolDetail = null;
+        /** Which tool-detail block ('input' | 'output') just flashed "Copied" (null = none). */
+        this._toolDetailCopied = null;
+        /** Whether the tool-detail Input section is expanded. Both open on open. */
+        this._toolDetailInputOpen = true;
+        /** Whether the tool-detail Output section is expanded. */
+        this._toolDetailOutputOpen = true;
         /** Current width of the drawer in px (user-resizable, persisted). */
         this._drawerWidth = 430;
         /** True while the user is dragging the drawer's resize handle. */
@@ -862,6 +877,12 @@ let KRChatbot = class KRChatbot extends LitElement {
     }
     _saveState() {
         try {
+            // `toolDetail` is a transient peek, not a saved view — persist only the two
+            // real preference views so a reload never reopens a stale tool.
+            let persistedDrawerView = this._drawerView;
+            if (persistedDrawerView === 'toolDetail') {
+                persistedDrawerView = 'settings';
+            }
             const state = {
                 opened: String(this.opened),
                 message: this._inputValue,
@@ -870,7 +891,7 @@ let KRChatbot = class KRChatbot extends LitElement {
                 showToolInputs: String(this._showToolInputs),
                 showConfirmationInput: String(this._showConfirmationInput),
                 drawerOpen: String(this._drawerOpen),
-                drawerView: this._drawerView,
+                drawerView: persistedDrawerView,
                 drawerWidth: String(this._drawerWidth),
             };
             if (this._panelEl) {
@@ -2013,6 +2034,164 @@ let KRChatbot = class KRChatbot extends LitElement {
         this._drawerOpen = false;
         this._saveState();
     }
+    /**
+     * Open the drawer to a single tool call's full input/output. Called when the
+     * user clicks a tool-activity line in the transcript. Independent of the
+     * `_showToolInputs` setting — this is the on-demand "show me everything for
+     * THIS call" peek, so it works even when inline inputs are hidden. `result` is
+     * the paired `tool_result` message data (may be absent if the tool hasn't
+     * returned yet).
+     */
+    _openToolDetail(use) {
+        // Pair the tool_use to the tool_result that immediately follows it (matched by
+        // toolUseId) — the same pairing the transcript render uses for the ⎿ preview.
+        const next = this.messages[this.messages.indexOf(use) + 1];
+        this._toolDetail = {
+            use,
+            result: null,
+        };
+        if (next?.type === 'tool_result' && next.data?.toolUseId === use.data?.toolUseId) {
+            this._toolDetail.result = next;
+        }
+        this._toolDetailCopied = null;
+        this._toolDetailInputOpen = true;
+        this._toolDetailOutputOpen = true;
+        this._drawerView = 'toolDetail';
+        this._drawerOpen = true;
+        this._saveState();
+        // Reset the panel scroll so a newly-opened tool starts at the top, rather
+        // than inheriting the previous tool's scroll position. Wait for the render.
+        this.updateComplete.then(() => {
+            if (this._drawerBodyEl) {
+                this._drawerBodyEl.scrollTop = 0;
+            }
+        });
+    }
+    /** Toggle the tool-detail Input section open/closed. */
+    _handleToggleToolDetailInput() {
+        this._toolDetailInputOpen = !this._toolDetailInputOpen;
+    }
+    /** Toggle the tool-detail Output section open/closed. */
+    _handleToggleToolDetailOutput() {
+        this._toolDetailOutputOpen = !this._toolDetailOutputOpen;
+    }
+    /**
+     * Pretty-print a tool input/result for the detail view. The values arrive as
+     * strings that usually hold JSON; reindent when they do, otherwise show as-is.
+     * Never throws — falls back to the original text.
+     *
+     * A large/overflowing result is stashed server-side and returned as a preview
+     * wrapped in `<<<uuid_BEGIN>>> … <<<uuid_END>>>` markers, followed by a paging
+     * note. Two things make `JSON.parse` unusable here: the marker wrapper isn't
+     * JSON, and the payload between the markers is a truncated SLICE of a bigger
+     * blob (cut off mid-string), so it never parses on its own. So we reindent the
+     * payload STRUCTURALLY (see `_reindentJson`) rather than parse it, and keep the
+     * markers + note exactly where they were so it still reads as a paged response.
+     */
+    _formatToolJson(value) {
+        if (value === undefined || value === null) {
+            return '';
+        }
+        const raw = String(value);
+        const marker = raw.match(/(<<<[0-9a-f-]+_BEGIN>>>\n?)([\s\S]*?)(\n?<<<[0-9a-f-]+_END>>>)/);
+        if (marker && marker.index != null) {
+            // Splice by index rather than String.replace — the reindented JSON can
+            // contain `$` sequences (e.g. "$dtoRef") that replace() treats as special.
+            const start = marker.index + marker[1].length;
+            const end = start + marker[2].length;
+            return raw.slice(0, start) + this._reindentJson(marker[2]) + raw.slice(end);
+        }
+        return this._reindentJson(raw);
+    }
+    /**
+     * Reindent JSON-ish text for display. Tries a strict parse+stringify first (the
+     * clean path for complete, valid JSON). If that fails — which it does for the
+     * truncated slices returned by the stashed-response pager — it falls back to a
+     * structural walk that inserts newlines/indentation around `{}[],:` while
+     * tracking string state (so braces and commas INSIDE string values, and escaped
+     * quotes, are left alone). This formats even incomplete JSON. Non-JSON text
+     * (no leading `{`/`[`) is returned untouched.
+     */
+    _reindentJson(text) {
+        const trimmed = text.trim();
+        if (!trimmed.startsWith('{') && !trimmed.startsWith('[')) {
+            return text;
+        }
+        try {
+            return JSON.stringify(JSON.parse(trimmed), null, 2);
+        }
+        catch {
+            // Fall through to the tolerant structural reindent below.
+        }
+        let out = '';
+        let depth = 0;
+        let inString = false;
+        let escaped = false;
+        const pad = (level) => '\n' + '  '.repeat(Math.max(0, level));
+        for (let i = 0; i < trimmed.length; i++) {
+            const ch = trimmed[i];
+            if (inString) {
+                out += ch;
+                if (escaped) {
+                    escaped = false;
+                }
+                else if (ch === '\\') {
+                    escaped = true;
+                }
+                else if (ch === '"') {
+                    inString = false;
+                }
+                continue;
+            }
+            if (ch === '"') {
+                inString = true;
+                out += ch;
+            }
+            else if (ch === '{' || ch === '[') {
+                depth++;
+                out += ch + pad(depth);
+            }
+            else if (ch === '}' || ch === ']') {
+                depth--;
+                out += pad(depth) + ch;
+            }
+            else if (ch === ',') {
+                out += ch + pad(depth);
+            }
+            else if (ch === ':') {
+                out += ': ';
+            }
+            else if (ch === ' ' || ch === '\n' || ch === '\t' || ch === '\r') {
+                // Collapse the source's own whitespace between tokens — our pad() owns layout.
+            }
+            else {
+                out += ch;
+            }
+        }
+        return out;
+    }
+    /** Copy the tool-detail Input to the clipboard. Stops propagation so the click
+     *  doesn't also toggle the (parent) section header. */
+    _handleCopyToolDetailInput(e) {
+        e.stopPropagation();
+        this._copyToolDetail('input', this._formatToolJson(this._toolDetail?.use.data?.toolInput));
+    }
+    /** Copy the tool-detail Output to the clipboard (see input handler). */
+    _handleCopyToolDetailOutput(e) {
+        e.stopPropagation();
+        this._copyToolDetail('output', this._formatToolJson(this._toolDetail?.result?.data?.toolResultString));
+    }
+    /** Write one tool-detail block to the clipboard and flash "Copied" on it. */
+    _copyToolDetail(block, content) {
+        navigator.clipboard.writeText(content).then(() => {
+            this._toolDetailCopied = block;
+            setTimeout(() => {
+                if (this._toolDetailCopied === block) {
+                    this._toolDetailCopied = null;
+                }
+            }, 2000);
+        }).catch(() => { });
+    }
     _handleDrawerResizeMouseDown(e) {
         this._isDrawerResizing = true;
         this._drawerResizeStartX = e.clientX;
@@ -2619,6 +2798,16 @@ let KRChatbot = class KRChatbot extends LitElement {
         const isDebug = this._drawerView === 'debug'
             && this.variant === 'inline'
             && this._aiFrameworkConfig.debugTelemetryEnabled === true;
+        let title = 'Settings';
+        let body = this._renderSettingsContent();
+        if (isDebug) {
+            title = 'Debug';
+            body = this._renderDebugContent();
+        }
+        else if (this._drawerView === 'toolDetail' && this._toolDetail) {
+            title = this._toolDetail.use.data?.displayName || this._toolDetail.use.data?.toolName || 'Tool';
+            body = this._renderToolDetailContent();
+        }
         return html `
       <div
         class=${classMap({
@@ -2633,7 +2822,7 @@ let KRChatbot = class KRChatbot extends LitElement {
           @mousedown=${this._handleDrawerResizeMouseDown}
         ></div>
         <div class="drawer__header">
-          <span class="drawer__title">${isDebug ? 'Debug' : 'Settings'}</span>
+          <span class="drawer__title">${title}</span>
           <button
             class="header-action"
             @click=${this._handleCloseDrawer}
@@ -2656,7 +2845,7 @@ let KRChatbot = class KRChatbot extends LitElement {
           </button>
         </div>
         <div class="drawer__body">
-          ${isDebug ? this._renderDebugContent() : this._renderSettingsContent()}
+          ${body}
         </div>
       </div>
     `;
@@ -2690,6 +2879,129 @@ let KRChatbot = class KRChatbot extends LitElement {
       </div>
     `;
     }
+    /**
+     * The Tool detail view's body — the full input and output for one tool call,
+     * pretty-printed in scrollable code blocks with a per-block copy button. This
+     * is the "occasionally see everything" path: the transcript stays terse, and
+     * clicking a tool line drops its complete input/output here, uncapped (the
+     * blocks scroll rather than truncating).
+     */
+    _renderToolDetailContent() {
+        return html `
+      <div class="tool-detail">
+        <div class="tool-detail__section">
+          <button
+            type="button"
+            class="tool-detail__section-head"
+            aria-expanded=${this._toolDetailInputOpen}
+            @click=${this._handleToggleToolDetailInput}
+          >
+            <span class=${classMap({
+            'tool-detail__caret': true,
+            'tool-detail__caret--open': this._toolDetailInputOpen,
+        })}>›</span>
+            <span class="tool-detail__section-title">Input</span>
+            <span
+              class="tool-detail__copy"
+              role="button"
+              @click=${this._handleCopyToolDetailInput}
+            >
+              ${this._toolDetailCopied === 'input'
+            ? html `
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <path d="M20 6 9 17l-5-5" />
+                  </svg>
+                `
+            : html `
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <rect
+                      x="9"
+                      y="9"
+                      width="13"
+                      height="13"
+                      rx="2"
+                    />
+                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                  </svg>
+                `}
+            </span>
+          </button>
+          ${this._toolDetailInputOpen
+            ? html `<pre class="tool-detail__code">${this._formatToolJson(this._toolDetail.use.data?.toolInput) || '(no input)'}</pre>`
+            : nothing}
+        </div>
+        <div class="tool-detail__section">
+          <button
+            type="button"
+            class="tool-detail__section-head"
+            aria-expanded=${this._toolDetailOutputOpen}
+            @click=${this._handleToggleToolDetailOutput}
+          >
+            <span class=${classMap({
+            'tool-detail__caret': true,
+            'tool-detail__caret--open': this._toolDetailOutputOpen,
+        })}>›</span>
+            <span class="tool-detail__section-title">Output</span>
+            <span
+              class="tool-detail__copy"
+              role="button"
+              @click=${this._handleCopyToolDetailOutput}
+            >
+              ${this._toolDetailCopied === 'output'
+            ? html `
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <path d="M20 6 9 17l-5-5" />
+                  </svg>
+                `
+            : html `
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <rect
+                      x="9"
+                      y="9"
+                      width="13"
+                      height="13"
+                      rx="2"
+                    />
+                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                  </svg>
+                `}
+            </span>
+          </button>
+          ${this._toolDetailOutputOpen
+            ? html `<pre class="tool-detail__code">${this._formatToolJson(this._toolDetail.result?.data?.toolResultString) || '(no output yet)'}</pre>`
+            : nothing}
+        </div>
+      </div>
+    `;
+    }
     /** The Debug view's body — telemetry scopes and the per-iteration table. */
     _renderDebugContent() {
         return html `
@@ -3051,8 +3363,17 @@ let KRChatbot = class KRChatbot extends LitElement {
                         catch {
                             formatted = String(result.toolResultString);
                         }
+                        // Cap the inline preview by BOTH lines and characters. Line-only
+                        // truncation blows up on results whose first line is huge (e.g. a
+                        // minified-JSON blob or a stashed-response marker with a 30k-char
+                        // opening line) — 3 lines then still dumps tens of thousands of
+                        // chars into the transcript. Char-cap first (content-blind, like
+                        // the backend chokepoint), then keep at most 3 lines of that.
                         const lines = formatted.split('\n');
                         resultPreview = lines.slice(0, 3).join('\n');
+                        if (resultPreview.length > 200) {
+                            resultPreview = `${resultPreview.slice(0, 200)}…`;
+                        }
                         resultRemainder = Math.max(0, lines.length - 3);
                     }
                 }
@@ -3081,24 +3402,32 @@ let KRChatbot = class KRChatbot extends LitElement {
                 })}>
                     ${msg.type === 'tool_use' ? html `
                       <div class="tool-activity-block">
-                        <div class=${classMap({
+                        <button
+                          type="button"
+                          class=${classMap({
                     'tool-activity': true,
                     'tool-activity--error': result?.toolResultStatus === 'error',
-                })}>
+                })}
+                          @click=${() => this._openToolDetail(msg)}
+                        >
                           <span class="tool-activity__chevron">›</span>
                           <span class="tool-activity__label">${msg.data?.displayName || msg.data?.toolName || 'Tool'}</span>
                           ${inputSummary ? html `<span class="tool-activity__input">(${inputSummary})</span>` : nothing}
-                        </div>
+                        </button>
                         ${this._showToolInputs && result?.toolResultString ? html `
-                          <div class=${classMap({
+                          <button
+                            type="button"
+                            class=${classMap({
                     'tool-activity__result': true,
                     'tool-activity__result--error': result.toolResultStatus === 'error',
-                })}>
+                })}
+                            @click=${() => this._openToolDetail(msg)}
+                          >
                             <span class="tool-activity__connector">⎿</span>
                             <pre class="tool-activity__result-body">${resultPreview}${resultRemainder > 0
                     ? html `\n<span class="tool-activity__more">… +${resultRemainder} lines</span>`
                     : nothing}</pre>
-                          </div>
+                          </button>
                         ` : nothing}
                       </div>
                     ` : nothing}
@@ -3703,6 +4032,102 @@ KRChatbot.styles = css `
       padding: 6px 0;
     }
 
+    /* Tool detail view — the full input/output for one tool call. */
+    .tool-detail {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      padding: 16px 20px;
+    }
+
+    .tool-detail__section {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      min-width: 0;
+    }
+
+    /* Clickable section header — toggles the code block below. Button chrome is
+       stripped so it reads as a heading row. */
+    .tool-detail__section-head {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      appearance: none;
+      background: none;
+      border: none;
+      width: 100%;
+      font-family: inherit;
+      text-align: left;
+      cursor: pointer;
+      border-radius: 4px;
+    }
+
+    .tool-detail__section-head:focus-visible {
+      outline: 2px solid var(--kr-chatbot-primary);
+      outline-offset: 2px;
+    }
+
+    /* Disclosure caret — the same "›" used on tool lines; rotates down when open. */
+    .tool-detail__caret {
+      flex-shrink: 0;
+      font-size: 16px;
+      color: rgba(0, 0, 0, 0.55);
+      transition: transform 0.15s ease;
+    }
+
+    .tool-detail__caret--open {
+      transform: rotate(90deg);
+    }
+
+    .tool-detail__section-title {
+      font-size: 12px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      color: #000000;
+    }
+
+    /* Copy icon-button — same treatment as the per-message copy button. */
+    .tool-detail__copy {
+      margin-left: auto;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 26px;
+      height: 26px;
+      padding: 0;
+      background: none;
+      border: none;
+      border-radius: 6px;
+      color: #000000;
+      cursor: pointer;
+      transition: background-color 0.15s, color 0.15s;
+    }
+
+    .tool-detail__copy:hover {
+      background: rgba(0, 0, 0, 0.06);
+    }
+
+    .tool-detail__copy svg {
+      width: 14px;
+      height: 14px;
+    }
+
+    /* The code block — pretty-printed JSON, shown in full (no inner scroll). The
+       drawer body is the only scroll container, so long inputs/outputs extend the
+       page and you scroll the panel, not a nested box. */
+    .tool-detail__code {
+      margin: 0;
+      padding: 0 18px;
+      font-family: 'SF Mono', 'Fira Code', Monaco, monospace;
+      font-size: 12px;
+      line-height: 1.5;
+      color: #000000;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
     /* Messages */
     /* Full-width scroll container — keeps the scrollbar at the panel edge. */
     .messages {
@@ -3799,6 +4224,9 @@ KRChatbot.styles = css `
     /* Tool-activity line — "the assistant ran X" row in the transcript. Same text
        style as any other message (black, 14px); a leading › chevron marks it as a
        step (in the same text style, not an icon). */
+    /* The tool-activity line and its result preview are <button>s (they open the
+       tool-detail drawer on click) — strip the native button chrome so they read
+       as plain transcript text, then re-add the layout. */
     .tool-activity {
       align-self: flex-start;
       display: flex;
@@ -3808,6 +4236,22 @@ KRChatbot.styles = css `
       color: #000000;
       /* Keep the chevron + name + input on a single line; input truncates if long. */
       white-space: nowrap;
+      /* Button reset */
+      appearance: none;
+      background: none;
+      border: none;
+      margin: 0;
+      padding: 2px 4px;
+      font-family: inherit;
+      text-align: left;
+      cursor: pointer;
+      border-radius: 4px;
+      max-width: 100%;
+    }
+
+    .tool-activity:focus-visible {
+      outline: 2px solid var(--kr-chatbot-primary);
+      outline-offset: 1px;
     }
 
     .tool-activity--error {
@@ -3843,6 +4287,16 @@ KRChatbot.styles = css `
       gap: 4px;
     }
 
+    /* One hover for the whole tool block: hovering anywhere over the header or its
+       result underlines the tool name, input, and result together as a single
+       link, rather than lighting up header and result separately. */
+    .tool-activity-block:hover .tool-activity__label,
+    .tool-activity-block:hover .tool-activity__input,
+    .tool-activity-block:hover .tool-activity__result-body {
+      text-decoration: underline;
+      text-decoration-color: rgba(0, 0, 0, 0.25);
+    }
+
     /* The result block indented under the activity line with a ⎿ tree connector,
        like Claude CLI's tool output preview. Uses the normal message text style
        (14px, black) — only the ⎿ connector is muted. */
@@ -3858,6 +4312,20 @@ KRChatbot.styles = css `
       margin-left: 6px;
       font-size: 14px;
       color: #000000;
+      /* Button reset — this preview row is also a click target for the detail view. */
+      appearance: none;
+      background: none;
+      border: none;
+      padding: 0;
+      font-family: inherit;
+      text-align: left;
+      cursor: pointer;
+    }
+
+    .tool-activity__result:focus-visible {
+      outline: 2px solid var(--kr-chatbot-primary);
+      outline-offset: 1px;
+      border-radius: 4px;
     }
 
     .tool-activity__result--error {
@@ -5323,6 +5791,18 @@ __decorate([
 __decorate([
     state()
 ], KRChatbot.prototype, "_drawerView", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_toolDetail", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_toolDetailCopied", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_toolDetailInputOpen", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_toolDetailOutputOpen", void 0);
 __decorate([
     state()
 ], KRChatbot.prototype, "_drawerWidth", void 0);
@@ -5404,6 +5884,9 @@ __decorate([
 __decorate([
     query('.skill-menu')
 ], KRChatbot.prototype, "_skillMenuEl", void 0);
+__decorate([
+    query('.drawer__body')
+], KRChatbot.prototype, "_drawerBodyEl", void 0);
 KRChatbot = __decorate([
     customElement('kr-chatbot')
 ], KRChatbot);