@kodaris/krubble-app-components 1.0.116 → 1.0.118

package/dist/chatbot.js

@@ -153,6 +153,21 @@ let KRChatbot = class KRChatbot extends LitElement {
         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;
@@ -339,11 +354,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. */
@@ -597,6 +627,20 @@ let KRChatbot = class KRChatbot extends LitElement {
                             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') {
@@ -639,6 +683,16 @@ let KRChatbot = class KRChatbot extends LitElement {
             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
@@ -862,6 +916,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 +930,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) {
@@ -1672,6 +1732,10 @@ let KRChatbot = class KRChatbot extends LitElement {
                 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
@@ -1882,6 +1946,10 @@ let KRChatbot = class KRChatbot extends LitElement {
         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: '',
@@ -2013,6 +2081,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;
@@ -2028,11 +2254,18 @@ let KRChatbot = class KRChatbot extends LitElement {
         }
         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 });
@@ -2185,7 +2418,9 @@ let KRChatbot = class KRChatbot extends LitElement {
                     }
                     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();
                     }
                 }
@@ -2197,9 +2432,110 @@ let KRChatbot = class KRChatbot extends LitElement {
             }
             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;
+        KRHttp.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);
         });
     }
     /**
@@ -2619,6 +2955,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 +2979,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 +3002,7 @@ let KRChatbot = class KRChatbot extends LitElement {
           </button>
         </div>
         <div class="drawer__body">
-          ${isDebug ? this._renderDebugContent() : this._renderSettingsContent()}
+          ${body}
         </div>
       </div>
     `;
@@ -2690,6 +3036,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 +3520,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 +3559,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 +4189,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 +4381,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 +4393,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 +4444,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 +4469,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 +5948,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 +6041,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);