@kodaris/krubble-app-components 1.0.116 → 1.0.118

package/dist/krubble-app.umd.js

@@ -2484,8 +2484,7 @@
 
     .nav {
       width: 200px;
-      background: white;
-      border-right: 1px solid #e5e7eb;
+      background: #f3f7fcbf;
       display: flex;
       flex-direction: column;
       flex-shrink: 0;
@@ -5668,6 +5667,21 @@
           this._reader = null;
           this._decoder = new TextDecoder();
           this._buffer = '';
+          /**
+           * True once the current turn ended cleanly (a `finished:true` chunk arrived).
+           * Distinguishes a real completion from a dropped stream: if the SSE stream
+           * closes (`result.done`) while this is still false, the turn is NOT over — the
+           * connection dropped (5-min emitter timeout, tab was backgrounded, network
+           * blip) — so we reconnect instead of unlocking the composer. Reset per turn.
+           */
+          this._turnFinishedCleanly = false;
+          /**
+           * Consecutive failed reconnect attempts for the current drop. Bounds the retry
+           * loop so a genuinely dead turn (server gone) can't spin forever — after the
+           * cap we give up and finish the turn. Reset when a reconnect succeeds or a new
+           * turn starts.
+           */
+          this._reconnectAttempts = 0;
           this._userHasScrolledUp = false;
           this._isDragging = false;
           this._isResizing = false;
@@ -5854,11 +5868,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. */
@@ -6112,6 +6141,20 @@
                               data,
                           });
                       }
+                      // Persisted reasoning row — the DB stores the model's thinking as its own
+                      // row with the text in `content` and type "reasoning". Live, reasoning
+                      // instead arrives as REASONING_PART deltas accumulated onto an assistant
+                      // bubble's `reasoning` property, which is the ONLY shape the render shows
+                      // (via msg.reasoning). Map the DB row into that same shape — an assistant
+                      // bubble carrying the text in `reasoning` — so reloaded/reconciled
+                      // reasoning renders identically to live instead of vanishing.
+                      if (msg.type === 'reasoning') {
+                          return Promise.resolve({
+                              type: 'assistant',
+                              content: '',
+                              reasoning: msg.content || '',
+                          });
+                      }
                       // A persisted approve/deny record — content is {outcome, tools:[...]}.
                       // Keep the type, parse content into `data`; the render reads msg.data.*.
                       if (msg.type === 'action_decision') {
@@ -6154,6 +6197,16 @@
               if (messages && messages.length) {
                   this.messages = messages;
               }
+              // A turn may still be running server-side for this conversation (the page was
+              // reloaded mid-turn, or opened on another device while a turn streams). After
+              // the transcript loads, try to attach to that live turn: _reconnectStream hits
+              // the read-only attach endpoint — 200 resumes streaming (locks the composer +
+              // shows the typing indicator so the user knows the AI is still working), 204
+              // means nothing is running (stays idle). Only meaningful with a pinned
+              // conversation and the built-in stream (a custom `send` owns its own turns).
+              if (this.conversationId && !this._isStreaming) {
+                  this._reconnectStream();
+              }
           }).catch(() => { });
           // Fetch the framework config on load (debugTelemetryEnabled, v2ChatEnabled,
           // registryServer). debugTelemetryEnabled gates the debug affordances and is
@@ -6377,6 +6430,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 +6444,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) {
@@ -7187,6 +7246,10 @@
                   content: '',
               }];
           this._isStreaming = true;
+          // Fresh turn: not yet finished, no reconnects used. These gate the drop-vs-done
+          // decision in _readStreamChunk when the stream closes.
+          this._turnFinishedCleanly = false;
+          this._reconnectAttempts = 0;
           // Scroll user's message to the top (Gemini-style). The runway (min-height =
           // viewport) goes on the agent-turn WRAPPER, not an individual message — the
           // whole turn (reasoning, tool lines, text, decision) streams inside that one
@@ -7397,6 +7460,10 @@
           const btn = this._messagesEl?.querySelector(`.confirmation__btn[data-decision="${decision}"]`);
           btn?.showLoading();
           this._isStreaming = true;
+          // Fresh turn (confirmation decision runs a model turn too): reset the
+          // drop-vs-done gates used by _readStreamChunk.
+          this._turnFinishedCleanly = false;
+          this._reconnectAttempts = 0;
           this._userHasScrolledUp = false;
           this.send({
               message: '',
@@ -7528,6 +7595,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;
@@ -7543,11 +7766,18 @@
           }
           this._reader.read().then((result) => {
               if (result.done) {
-                  // Fallback unlock: the stream closed without a `finished:true` chunk
-                  // (network drop, server crash, the 5-min emitter timeout). Treat it as
-                  // the turn ending so a dropped stream never wedges the composer — the
-                  // server self-heals its turn lock and bounces any premature send.
-                  this._finishStream();
+                  // The stream closed. Two very different cases:
+                  // 1. A `finished:true` chunk already arrived (_turnFinishedCleanly) — the
+                  //    turn is genuinely over; finishing was already handled below. Nothing to do.
+                  // 2. No finished chunk yet — the connection DROPPED mid-turn (5-min emitter
+                  //    timeout, tab backgrounded, network blip) but the server-side turn is
+                  //    still running. Do NOT unlock the composer (that's the old bug that made
+                  //    the input look ready while the AI was still working). Reconnect to the
+                  //    live stream and keep receiving events.
+                  if (this._turnFinishedCleanly) {
+                      return;
+                  }
+                  this._reconnectStream();
                   return;
               }
               this._buffer = this._buffer + this._decoder.decode(result.value, { stream: true });
@@ -7700,7 +7930,9 @@
                       }
                       if (data.finished) {
                           // Primary unlock signal: the turn is over and the server released
-                          // the turn lock. The SSE stream closes right after this chunk.
+                          // the turn lock. The SSE stream closes right after this chunk. Mark
+                          // it clean so the imminent `result.done` doesn't trigger a reconnect.
+                          this._turnFinishedCleanly = true;
                           this._finishStream();
                       }
                   }
@@ -7712,9 +7944,110 @@
               }
               this._readStreamChunk();
           }).catch((err) => {
-              if (err.name !== 'AbortError') {
-                  this._handleStreamError(err.message);
+              if (err.name === 'AbortError') {
+                  return;
+              }
+              // A read error mid-turn is a drop, not a completion — reconnect (same as a
+              // clean `done` without a finished chunk) unless the turn already finished.
+              if (!this._turnFinishedCleanly) {
+                  this._reconnectStream();
+                  return;
+              }
+              this._handleStreamError(err.message);
+          });
+      }
+      /**
+       * Reconnect to an in-flight turn after the SSE stream dropped without finishing
+       * (5-min emitter timeout, tab backgrounded, network blip). Hits the read-only
+       * `/stream/attach/{conversationID}` endpoint, which re-attaches a fresh SSE
+       * connection to the still-running server-side turn without starting anything new.
+       *
+       * - 200 with a body → resume reading; the turn's events keep flowing (events
+       *   emitted during the gap are not replayed, so the live text may jump forward —
+       *   the full transcript reconciles from the DB when the turn ends).
+       * - 204 → no live turn: it already finished server-side while we were
+       *   disconnected. Reload the transcript so the final answer appears, then unlock.
+       * - failure / retry cap hit → give up and finish so the composer never wedges.
+       *
+       * The composer stays locked (`_isStreaming` untouched) throughout, so the input
+       * never looks ready while the AI is still working.
+       */
+      _reconnectStream() {
+          // Without a pinned conversation there's nothing to re-attach to (a custom
+          // `send` owns its own targeting). Fall back to finishing.
+          if (!this.conversationId) {
+              this._finishStream();
+              return;
+          }
+          // Bound the retries so a genuinely dead turn can't loop forever.
+          if (this._reconnectAttempts >= 5) {
+              this._handleStreamError('Lost connection to the assistant. Please reload the conversation.');
+              return;
+          }
+          this._reconnectAttempts = this._reconnectAttempts + 1;
+          krubbleHttp.Http.fetch({
+              url: `/api/system/integration/aws/bedrock/stream/attach/${this.conversationId}`,
+              method: 'GET',
+              headers: { Accept: 'text/event-stream' },
+          }).then((response) => {
+              // 204 No Content: the turn finished server-side during the gap. Pull the
+              // final transcript from the DB (via the same `load` callback the component
+              // initializes with) so the answer that streamed during the disconnect
+              // appears, then unlock.
+              if (response.status === 204) {
+                  this._reconnectAttempts = 0;
+                  if (this.load) {
+                      this.load().then((messages) => {
+                          this.messages = messages;
+                          this.requestUpdate();
+                      }).catch(() => {
+                          // Reload failed — leave the transcript as-is; the user can refresh manually.
+                      });
+                  }
+                  this._finishStream();
+                  return;
               }
+              if (!response.ok || !response.body) {
+                  // Transient failure — back off and try again on the same drop.
+                  setTimeout(() => this._reconnectStream(), 1000);
+                  return;
+              }
+              // Re-attached to the live turn: reset the retry counter and resume reading
+              // into the same buffer/decoder from the fresh stream. Mark streaming so the
+              // composer locks and the typing indicator shows — load-triggered attaches (a
+              // page reloaded mid-turn) start with _isStreaming false, so this is what
+              // surfaces "the AI is still working"; on a mid-session drop it's already true
+              // (a no-op).
+              this._reconnectAttempts = 0;
+              this._isStreaming = true;
+              this._reader = response.body.getReader();
+              this._decoder = new TextDecoder();
+              this._buffer = '';
+              // Close the gap: events the turn emitted between the drop and this re-attach
+              // aren't replayed on the live stream. Every COMPLETED iteration during the
+              // gap was persisted (assistant text, tool_use/tool_result rows), so reload the
+              // transcript from the DB to backfill them, THEN start reading live. Ordering
+              // matters — the reader buffers incoming bytes until _readStreamChunk runs, so
+              // starting live only after the async reload resolves prevents the reload from
+              // clobbering freshly-streamed chunks. Only the current in-flight iteration's
+              // partial text is missing from the reload; it streams live from here.
+              if (this.load) {
+                  this.load().then((messages) => {
+                      this.messages = messages;
+                      this.requestUpdate();
+                      this._readStreamChunk();
+                  }).catch(() => {
+                      // Reload failed — go live anyway; the gap's completed iterations just
+                      // won't show until the next full reload, but the turn keeps streaming.
+                      this._readStreamChunk();
+                  });
+              }
+              else {
+                  this._readStreamChunk();
+              }
+          }).catch(() => {
+              // Network error reaching the attach endpoint — back off and retry.
+              setTimeout(() => this._reconnectStream(), 1000);
           });
       }
       /**
@@ -8134,6 +8467,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({
@@ -8148,7 +8491,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}
@@ -8171,7 +8514,7 @@
           </button>
         </div>
         <div class="drawer__body">
-          ${isDebug ? this._renderDebugContent() : this._renderSettingsContent()}
+          ${body}
         </div>
       </div>
     `;
@@ -8203,6 +8546,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. */
@@ -8566,8 +9032,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);
                     }
                 }
@@ -8596,24 +9071,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}
@@ -9218,6 +9701,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 {
@@ -9314,6 +9893,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;
@@ -9323,6 +9905,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 {
@@ -9358,6 +9956,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. */
@@ -9373,6 +9981,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 {
@@ -10838,6 +11460,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);
@@ -10919,6 +11553,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);