@kodaris/krubble-app-components 1.0.115 → 1.0.117

package/dist/krubble-app.umd.js

@@ -5854,11 +5854,26 @@
            */
           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. */
@@ -6377,6 +6392,12 @@
       }
       _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,
@@ -6385,7 +6406,7 @@
                   showToolInputs: String(this._showToolInputs),
                   showConfirmationInput: String(this._showConfirmationInput),
                   drawerOpen: String(this._drawerOpen),
-                  drawerView: this._drawerView,
+                  drawerView: persistedDrawerView,
                   drawerWidth: String(this._drawerWidth),
               };
               if (this._panelEl) {
@@ -7433,7 +7454,6 @@
               }
           });
       }
-      /** Clear the in-flight confirmation flags (error paths, or once resolved). */
       /**
        * Capture ambient "where is the user / what are they looking at" context at
        * send time, so the AI is grounded without the host passing anything in.
@@ -7529,6 +7549,162 @@
           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') ;
+              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;
@@ -7641,10 +7817,9 @@
                           // deliberately never show). Adopt it as the header label and pass it
                           // up so consumers can update their own chrome, e.g. a breadcrumb.
                           if (data.data?.title) {
-                              const title = String(data.data.title);
-                              this.label = title;
+                              this.label = data.data.title;
                               this.dispatchEvent(new CustomEvent('conversation-title', {
-                                  detail: { title },
+                                  detail: { title: data.data.title },
                                   bubbles: true,
                                   composed: true,
                               }));
@@ -8136,6 +8311,16 @@
           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 b `
       <div
         class=${e({
@@ -8150,7 +8335,7 @@
           @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}
@@ -8173,7 +8358,7 @@
           </button>
         </div>
         <div class="drawer__body">
-          ${isDebug ? this._renderDebugContent() : this._renderSettingsContent()}
+          ${body}
         </div>
       </div>
     `;
@@ -8205,6 +8390,129 @@
           ></kr-checkbox>
         </div>
       </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 b `
+      <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=${e({
+            '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'
+            ? b `
+                  <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>
+                `
+            : b `
+                  <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
+            ? b `<pre class="tool-detail__code">${this._formatToolJson(this._toolDetail.use.data?.toolInput) || '(no input)'}</pre>`
+            : A}
+        </div>
+        <div class="tool-detail__section">
+          <button
+            type="button"
+            class="tool-detail__section-head"
+            aria-expanded=${this._toolDetailOutputOpen}
+            @click=${this._handleToggleToolDetailOutput}
+          >
+            <span class=${e({
+            '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'
+            ? b `
+                  <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>
+                `
+            : b `
+                  <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
+            ? b `<pre class="tool-detail__code">${this._formatToolJson(this._toolDetail.result?.data?.toolResultString) || '(no output yet)'}</pre>`
+            : A}
+        </div>
+      </div>
     `;
       }
       /** The Debug view's body — telemetry scopes and the per-iteration table. */
@@ -8550,9 +8858,9 @@
                 let resultPreview = '';
                 let resultRemainder = 0;
                 if (msg.type === 'tool_use') {
-                    const next = this.messages[index + 1];
-                    if (next && next.type === 'tool_result' && next.data?.toolUseId === msg.data?.toolUseId) {
-                        result = next.data;
+                    if (this.messages[index + 1]?.type === 'tool_result'
+                        && this.messages[index + 1].data?.toolUseId === msg.data?.toolUseId) {
+                        result = this.messages[index + 1].data;
                     }
                     if (this._showToolInputs && msg.data?.toolInput) {
                         inputSummary = String(msg.data.toolInput).replace(/\s+/g, ' ').trim();
@@ -8568,8 +8876,17 @@
                         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);
                     }
                 }
@@ -8598,24 +8915,32 @@
                 })}>
                     ${msg.type === 'tool_use' ? b `
                       <div class="tool-activity-block">
-                        <div class=${e({
+                        <button
+                          type="button"
+                          class=${e({
                     '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 ? b `<span class="tool-activity__input">(${inputSummary})</span>` : A}
-                        </div>
+                        </button>
                         ${this._showToolInputs && result?.toolResultString ? b `
-                          <div class=${e({
+                          <button
+                            type="button"
+                            class=${e({
                     '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
                     ? b `\n<span class="tool-activity__more">… +${resultRemainder} lines</span>`
                     : A}</pre>
-                          </div>
+                          </button>
                         ` : A}
                       </div>
                     ` : A}
@@ -9220,6 +9545,102 @@
       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 {
@@ -9316,6 +9737,9 @@
     /* 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;
@@ -9325,6 +9749,22 @@
       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 {
@@ -9360,6 +9800,16 @@
       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. */
@@ -9375,6 +9825,20 @@
       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 {
@@ -10840,6 +11304,18 @@
   __decorate([
       r()
   ], exports.Chatbot.prototype, "_drawerView", void 0);
+  __decorate([
+      r()
+  ], exports.Chatbot.prototype, "_toolDetail", void 0);
+  __decorate([
+      r()
+  ], exports.Chatbot.prototype, "_toolDetailCopied", void 0);
+  __decorate([
+      r()
+  ], exports.Chatbot.prototype, "_toolDetailInputOpen", void 0);
+  __decorate([
+      r()
+  ], exports.Chatbot.prototype, "_toolDetailOutputOpen", void 0);
   __decorate([
       r()
   ], exports.Chatbot.prototype, "_drawerWidth", void 0);
@@ -10921,6 +11397,9 @@
   __decorate([
       e$3('.skill-menu')
   ], exports.Chatbot.prototype, "_skillMenuEl", void 0);
+  __decorate([
+      e$3('.drawer__body')
+  ], exports.Chatbot.prototype, "_drawerBodyEl", void 0);
   exports.Chatbot = __decorate([
       t$2('kr-chatbot')
   ], exports.Chatbot);