@kodaris/krubble-app-components 1.0.113 → 1.0.114

package/dist/chatbot.js

@@ -12,7 +12,8 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { marked } from 'marked';
 // Importing these named exports also registers their custom elements
-// (kr-dialog, kr-tab-group, kr-tab, kr-text-field) used by the browse dialog.
+// (kr-dialog, kr-tab-group, kr-tab, kr-text-field for the browse dialog;
+// kr-checkbox for the settings panel's Tools toggles).
 import { KRFilePreview, KRSnackbar } from '@kodaris/krubble-components';
 import { KRHttp } from '@kodaris/krubble-http';
 /**
@@ -34,6 +35,28 @@ const CONFIRMATION_DECISIONS = [
         label: 'No',
     },
 ];
+/**
+ * The modes as shown in the composer's mode selector, in menu order. `label` is
+ * the short trigger text (Gemini-style inline label); `description` is the menu
+ * sublabel. Written for a non-technical user — no "guarded tool" jargon.
+ */
+const CHATBOT_MODES = [
+    {
+        mode: 'NORMAL',
+        label: 'Ask',
+        description: 'Asks before making changes',
+    },
+    {
+        mode: 'EDIT',
+        label: 'Auto',
+        description: 'Makes changes automatically',
+    },
+    {
+        mode: 'PLAN',
+        label: 'Plan',
+        description: 'Suggests a plan, makes no changes',
+    },
+];
 /** Image extensions the chatbot renders as thumbnails (used when MIME is absent). */
 const IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
 /**
@@ -108,6 +131,25 @@ let KRChatbot = class KRChatbot extends LitElement {
     constructor() {
         super(...arguments);
         // --- Private properties ---
+        /**
+         * Internal toggle for how the action-confirmation prompt (Rail 3) is presented:
+         * - `false`: the compact card that floats over the messages, pinned above the
+         *   composer — plain-language ask + Yes/Always/No only, no tool arguments.
+         * - `true`: the prompt renders inline in the message stream (Claude-CLI style),
+         *   grows to any height (no inner scroll — the transcript scrolls), and offers a
+         *   "Show details" disclosure of the raw tool input for technical users.
+         * Flip here to switch approaches; the floating path is unchanged when false.
+         */
+        this._inlineConfirm = true;
+        /**
+         * Internal toggle for how the assistant's reasoning ("thinking") is presented:
+         * - `false`: the current collapsible grey "Thinking" disclosure (kept so we can
+         *   revert).
+         * - `true`: reasoning renders as a plain agentic message — same text style as a
+         *   normal assistant reply, no box, no collapse.
+         * Flip here to switch approaches.
+         */
+        this._reasoningAsMessage = true;
         this._reader = null;
         this._decoder = new TextDecoder();
         this._buffer = '';
@@ -291,11 +333,20 @@ let KRChatbot = class KRChatbot extends LitElement {
         this._iterationLog = [];
         /** Latest cache-checkpoint info keyed by iteration, for the verbose table. */
         this._cacheCheckpoints = {};
-        /** Whether the internal debug panel is expanded (off by default). */
-        this._debugPanelOpen = false;
-        /** Current width of the debug drawer in px (user-resizable, persisted). */
+        /**
+         * Whether the side drawer is open (slid in). The drawer stays mounted and
+         * animates via a CSS transform, so this drives the slide and the content push.
+         */
+        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.
+         */
+        this._drawerView = 'settings';
+        /** Current width of the drawer in px (user-resizable, persisted). */
         this._debugDrawerWidth = 430;
-        /** True while the user is dragging the debug drawer's resize handle. */
+        /** True while the user is dragging the drawer's resize handle. */
         this._isDebugResizing = false;
         /** Files staged in the composer, before the message is sent. */
         this._pendingConversationFiles = [];
@@ -346,6 +397,31 @@ let KRChatbot = class KRChatbot extends LitElement {
         this._skillBrowseQuery = '';
         /** True while the mic is live and speech is being transcribed into the composer. */
         this._isDictating = false;
+        /**
+         * Conversation posture for guarded tools (the composer's mode selector). Sent on
+         * each turn's `mode` field and kept in sync with the server's `CONVERSATION_STATE`
+         * event. Defaults to NORMAL (ask before each guarded tool).
+         */
+        this._mode = 'NORMAL';
+        /** Whether the composer's mode menu (Ask / Auto / Plan) is open. */
+        this._modeMenuOpened = false;
+        /**
+         * Whether to show the tools the assistant ran, as activity lines in the
+         * transcript. On by default; a user can hide them from the settings panel.
+         * User-controlled in the settings panel; persisted in localStorage.
+         */
+        this._showTools = true;
+        /**
+         * Whether to also show each tool's inputs and results under its line. Only
+         * has an effect when `_showTools` is on. Off by default.
+         */
+        this._showToolInputs = false;
+        /**
+         * Whether to show the raw tool input inside the confirmation card (the JSON the
+         * model proposed for a guarded action). The plain-language ask + Yes/No always
+         * show; this only reveals the technical detail. Off by default.
+         */
+        this._showConfirmationInput = false;
         /**
          * Close the `/` skill menu when the click lands outside it.
          *
@@ -356,6 +432,14 @@ let KRChatbot = class KRChatbot extends LitElement {
          * inside click would look like an outside one.
          */
         this._handleDocumentClick = (e) => {
+            // Close the mode menu on any click outside the mode selector (the trigger
+            // owns its own toggle, so exclude the whole `.mode` block).
+            if (this._modeMenuOpened) {
+                const modePath = e.composedPath();
+                if (!modePath.some((el) => el instanceof HTMLElement && el.classList.contains('mode'))) {
+                    this._modeMenuOpened = false;
+                }
+            }
             if (!this._skillMenuOpened) {
                 return;
             }
@@ -497,6 +581,36 @@ let KRChatbot = class KRChatbot extends LitElement {
                 return KRHttp.fetch({ url: `/api/system/conversation/${this.conversationId}/messages` })
                     .then((r) => r.json())
                     .then((res) => Promise.all((res?.data || []).map((msg) => {
+                    // Persisted tool_use / tool_result rows — the message IS the row: keep
+                    // the type and parse content into `data`, the same {type, data} shape
+                    // the live stream pushes. The render reads data.* and pairs a result to
+                    // its use by data.toolUseId. No transform, so live and reload match.
+                    if (msg.type === 'tool_use' || msg.type === 'tool_result') {
+                        let data = {};
+                        try {
+                            data = JSON.parse(msg.content || '{}');
+                        }
+                        catch { /* malformed — render a bare line from what we have */ }
+                        return Promise.resolve({
+                            type: msg.type,
+                            content: '',
+                            data,
+                        });
+                    }
+                    // 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') {
+                        let data = {};
+                        try {
+                            data = JSON.parse(msg.content || '{}');
+                        }
+                        catch { /* malformed — render a bare line from what we have */ }
+                        return Promise.resolve({
+                            type: 'action_decision',
+                            content: '',
+                            data,
+                        });
+                    }
                     // Resolve this message's `conversationFileIDs` (a JSON array string of
                     // ids) into full file objects — each fetch response IS the
                     // KRChatbotConversationFile (id + niceName + mimeType), and niceName
@@ -751,7 +865,12 @@ let KRChatbot = class KRChatbot extends LitElement {
             const state = {
                 opened: String(this.opened),
                 message: this._inputValue,
-                debugPanelOpen: String(this._debugPanelOpen),
+                mode: this._mode,
+                showTools: String(this._showTools),
+                showToolInputs: String(this._showToolInputs),
+                showConfirmationInput: String(this._showConfirmationInput),
+                drawerOpen: String(this._drawerOpen),
+                drawerView: this._drawerView,
                 debugDrawerWidth: String(this._debugDrawerWidth),
             };
             if (this._panelEl) {
@@ -792,7 +911,16 @@ let KRChatbot = class KRChatbot extends LitElement {
             if (typeof state.message === 'string' && state.message.trim() !== '/') {
                 this._inputValue = state.message;
             }
-            this._debugPanelOpen = state.debugPanelOpen === 'true';
+            if (state.mode === 'NORMAL' || state.mode === 'EDIT' || state.mode === 'PLAN') {
+                this._mode = state.mode;
+            }
+            this._showTools = state.showTools === 'true';
+            this._showToolInputs = state.showToolInputs === 'true';
+            this._showConfirmationInput = state.showConfirmationInput === 'true';
+            this._drawerOpen = state.drawerOpen === 'true';
+            if (state.drawerView === 'settings' || state.drawerView === 'debug') {
+                this._drawerView = state.drawerView;
+            }
             const w = Number(state.debugDrawerWidth);
             if (w >= 300) {
                 this._debugDrawerWidth = w;
@@ -1095,6 +1223,29 @@ let KRChatbot = class KRChatbot extends LitElement {
         this._skillMenuOpened = true;
         this._searchInvocableSkills('');
     }
+    _handleModeToggle() {
+        this._modeMenuOpened = !this._modeMenuOpened;
+    }
+    _handleModeSelect(mode) {
+        this._mode = mode;
+        this._modeMenuOpened = false;
+        // Persist the choice so it survives a reload, alongside the other composer
+        // state. The server is still the source of truth on the next turn's
+        // CONVERSATION_STATE, but this keeps the selector from flashing the default.
+        this._saveState();
+    }
+    _handleShowToolsChange(e) {
+        this._showTools = e.target.checked;
+        this._saveState();
+    }
+    _handleShowToolInputsChange(e) {
+        this._showToolInputs = e.target.checked;
+        this._saveState();
+    }
+    _handleShowConfirmationInputChange(e) {
+        this._showConfirmationInput = e.target.checked;
+        this._saveState();
+    }
     /**
      * The mic button toggles dictation. Speech is transcribed straight into the
      * composer as editable text — the user still reviews and presses send, so a
@@ -1521,22 +1672,25 @@ let KRChatbot = class KRChatbot extends LitElement {
                 content: '',
             }];
         this._isStreaming = true;
-        // Scroll user's message to the top (Gemini-style).
-        // Set min-height on the assistant message = container height so there's enough
-        // scroll room below the user message to push it to the top.
+        // 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
+        // element, so nothing strands below it. Enough scroll room below the user
+        // message to push it to the top.
         this.updateComplete.then(() => {
             if (!this._messagesEl) {
                 return;
             }
-            // Clear min-height from previous responses
-            this._messagesEl.querySelectorAll('.message--assistant').forEach((el) => {
+            // Clear runway from previous turns.
+            this._messagesEl.querySelectorAll('.agent-turn').forEach((el) => {
                 el.style.minHeight = '';
             });
-            const allMsgEls = this._messagesEl.querySelectorAll('.message');
-            const userMsgEl = allMsgEls[this.messages.length - 2];
-            const assistantMsgEl = allMsgEls[this.messages.length - 1];
-            if (assistantMsgEl) {
-                assistantMsgEl.style.minHeight = this._messagesEl.clientHeight + 'px';
+            const userEls = this._messagesEl.querySelectorAll('.message--user');
+            const userMsgEl = userEls[userEls.length - 1];
+            const turnEls = this._messagesEl.querySelectorAll('.agent-turn');
+            const turnEl = turnEls[turnEls.length - 1];
+            if (turnEl) {
+                turnEl.style.minHeight = this._messagesEl.clientHeight + 'px';
             }
             if (userMsgEl) {
                 this._messagesEl.scrollTop = userMsgEl.offsetTop - this._messagesEl.offsetTop - 24;
@@ -1618,6 +1772,9 @@ let KRChatbot = class KRChatbot extends LitElement {
                     const body = {
                         userText: params.message,
                         fileIds: files.map((f) => f.conversationFileID),
+                        // Posture for guarded tools this turn (Ask / Auto / Plan). The server
+                        // validates and persists it, and only re-sets it when it changes.
+                        mode: this._mode,
                     };
                     // Ground the model in where the user is and what they've highlighted.
                     // Only sent when present so an empty selection / failed capture doesn't
@@ -1716,30 +1873,36 @@ let KRChatbot = class KRChatbot extends LitElement {
         }
         this._confirmationInFlight = true;
         this._error = '';
-        // The batch is being resolved — drop the prompt so the composer unblocks once
-        // this follow-up turn ends, and stream the outcome into a new assistant bubble.
-        this._pendingActions = [];
-        this._confirmationHighlighted = -1;
-        this.messages = [...this.messages, {
-                type: 'assistant',
-                content: '',
-            }];
+        // The decision line is authored by the server (single source of truth): it
+        // persists an `action_decision` row AND streams an `ACTION_DECISION` event
+        // back. We keep the prompt in place — the clicked button shows a loading
+        // spinner — until that event arrives, which is our ack that the server
+        // accepted the decision. The event handler then drops the prompt, appends the
+        // decision line, and the follow-up turn streams into a new assistant bubble.
+        const btn = this._messagesEl?.querySelector(`.confirmation__btn[data-decision="${decision}"]`);
+        btn?.showLoading();
         this._isStreaming = true;
         this._userHasScrolledUp = false;
         this.send({
             message: '',
-            messages: this.messages.slice(0, -1),
+            messages: this.messages,
             conversationFiles: [],
             pageContext: '',
             selectionContext: '',
             confirmation: decision,
         }).then((response) => {
-            this._confirmationInFlight = false;
+            // Leave _confirmationInFlight true — the buttons stay loading until the
+            // streamed ACTION_DECISION event resolves the prompt. Only clear it on an
+            // error path, where no such event will arrive.
             if (!response.ok) {
+                this._confirmationInFlight = false;
+                btn?.reset();
                 this._handleStreamError('Request failed: ' + response.status);
                 return;
             }
             if (!response.body) {
+                this._confirmationInFlight = false;
+                btn?.reset();
                 this._handleStreamError('No response body');
                 return;
             }
@@ -1749,11 +1912,13 @@ let KRChatbot = class KRChatbot extends LitElement {
             this._readStreamChunk();
         }).catch((err) => {
             this._confirmationInFlight = false;
+            btn?.reset();
             if (err.name !== 'AbortError') {
                 this._handleStreamError(err.message);
             }
         });
     }
+    /** 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.
@@ -1827,8 +1992,26 @@ let KRChatbot = class KRChatbot extends LitElement {
     _handleContextWarningDismiss() {
         this._contextWarning = '';
     }
-    _handleToggleDebugPanel() {
-        this._debugPanelOpen = !this._debugPanelOpen;
+    /**
+     * A header button either opens the drawer to its view, switches the view if the
+     * drawer is already open on the other one, or closes the drawer if it's already
+     * showing this view. `_drawerView` is left intact on close so the content stays
+     * visible while the drawer slides shut.
+     */
+    _toggleDrawer(view) {
+        if (this._drawerOpen && this._drawerView === view) {
+            this._drawerOpen = false;
+        }
+        else {
+            this._drawerOpen = true;
+            this._drawerView = view;
+        }
+        this._saveState();
+    }
+    /** Close the drawer. `_drawerView` is left intact so its content stays visible
+     *  while the drawer slides shut. */
+    _handleCloseDrawer() {
+        this._drawerOpen = false;
         this._saveState();
     }
     _handleDebugResizeMouseDown(e) {
@@ -1884,28 +2067,54 @@ let KRChatbot = class KRChatbot extends LitElement {
                     }));
                     if (data.type === 'REASONING_PART') {
                         if (data.message) {
-                            const lastIndex = this.messages.length - 1;
-                            if (lastIndex >= 0 && this.messages[lastIndex].type === 'assistant') {
-                                if (!this.messages[lastIndex].reasoning) {
-                                    this.messages[lastIndex].reasoning = '';
-                                }
-                                this.messages[lastIndex].reasoning += String(data.message);
-                                this.requestUpdate();
+                            // Text after a tool line belongs in a NEW assistant bubble — the
+                            // last message may be a tool line, which text can't append to.
+                            // _ensureAssistantBubble opens a fresh bubble when needed.
+                            const target = this._ensureAssistantBubble();
+                            if (!target.reasoning) {
+                                target.reasoning = '';
                             }
+                            target.reasoning += String(data.message);
+                            this.requestUpdate();
                         }
                     }
                     else if (data.type === 'RESPONSE_PART') {
                         if (data.message) {
-                            const lastIndex = this.messages.length - 1;
-                            if (lastIndex >= 0 && this.messages[lastIndex].type === 'assistant') {
-                                this.messages[lastIndex].content += String(data.message);
-                                this.requestUpdate();
-                            }
+                            this._ensureAssistantBubble().content += String(data.message);
+                            this.requestUpdate();
                         }
                     }
+                    else if (data.type === 'tool_use' || data.type === 'tool_result') {
+                        // Push the event straight into the transcript — the message IS the event
+                        // ({type, data}). The render reads msg.data.* and pairs a tool_result to
+                        // its tool_use by data.toolUseId. Same shape the DB persists and reload
+                        // replays, so live and reload share one representation — no transform.
+                        this.messages.push(data);
+                        this.requestUpdate();
+                    }
+                    else if (data.type === 'action_decision') {
+                        // The server accepted the confirmation decision and authored the record
+                        // (single source of truth). Its arrival is the ack: drop the prompt,
+                        // stop the buttons' loading, and push the event straight in — the render
+                        // reads msg.data.{outcome,tools}. Same type + shape the DB persists, so
+                        // live and reload share one representation.
+                        this._pendingActions = [];
+                        this._confirmationHighlighted = -1;
+                        this._confirmationInFlight = false;
+                        this.messages.push(data);
+                        this.requestUpdate();
+                    }
                     else if (data.type === 'ERROR') {
                         this._handleStreamError(String(data.message || 'Unknown error'));
                     }
+                    else if (data.type === 'CONVERSATION_STATE') {
+                        // Turn-start state sync: the server is the source of truth for the
+                        // conversation's mode (it may have decayed EDIT → NORMAL after idle).
+                        // Adopt it so the composer's selector reflects the real posture.
+                        if (data.data?.mode === 'NORMAL' || data.data?.mode === 'EDIT' || data.data?.mode === 'PLAN') {
+                            this._mode = data.data.mode;
+                        }
+                    }
                     else if (data.type === 'CONVERSATION_TOKEN_WARNING') {
                         // User-facing: friendly "conversation is getting long" guidance.
                         // Text only, never sent to the model — render verbatim as a banner.
@@ -1916,16 +2125,14 @@ let KRChatbot = class KRChatbot extends LitElement {
                         // (it was created with a truncated first-message placeholder that we
                         // 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) {
-                            const title = String(data.data.title || '');
-                            if (title) {
-                                this.label = title;
-                                this.dispatchEvent(new CustomEvent('conversation-title', {
-                                    detail: { title },
-                                    bubbles: true,
-                                    composed: true,
-                                }));
-                            }
+                        if (data.data?.title) {
+                            const title = String(data.data.title);
+                            this.label = title;
+                            this.dispatchEvent(new CustomEvent('conversation-title', {
+                                detail: { title },
+                                bubbles: true,
+                                composed: true,
+                            }));
                         }
                     }
                     else if (data.type === 'CONVERSATION_LIMIT_REACHED') {
@@ -1997,6 +2204,24 @@ let KRChatbot = class KRChatbot extends LitElement {
             }
         });
     }
+    /**
+     * The assistant bubble streamed text should append to. Returns the last message
+     * when it's already an assistant bubble; otherwise (the last message is a tool
+     * line, or there's nothing yet) opens a fresh assistant bubble so post-tool text
+     * doesn't get dropped or glued to a tool line.
+     */
+    _ensureAssistantBubble() {
+        const last = this.messages[this.messages.length - 1];
+        if (last && last.type === 'assistant') {
+            return last;
+        }
+        const bubble = {
+            type: 'assistant',
+            content: '',
+        };
+        this.messages = [...this.messages, bubble];
+        return bubble;
+    }
     /**
      * End the current turn: release the turn lock and the reader. Called on the
      * primary unlock signal (`finished:true`) and the fallback (stream close).
@@ -2021,6 +2246,17 @@ let KRChatbot = class KRChatbot extends LitElement {
                 && !this.messages[lastIndex].reasoning) {
                 this.messages = this.messages.slice(0, -1);
             }
+            // Scroll the confirmation into view so the user actually sees the ask — an
+            // agentic turn can stream many tool lines past the fold, leaving the prompt
+            // below it. `block: 'end'` brings its bottom up to just above the composer.
+            if (this._inlineConfirm) {
+                this.updateComplete.then(() => {
+                    this._messagesEl?.querySelector('.confirmation')?.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'end',
+                    });
+                });
+            }
         }
     }
     _handleStreamError(message) {
@@ -2040,33 +2276,107 @@ let KRChatbot = class KRChatbot extends LitElement {
     }
     // --- Render ---
     /**
-     * The approve/deny card shown when a guarded tool is paused (Rail 3). Floats
+     * The composer's mode selector — a Gemini-style inline label + caret sitting
+     * just before the mic, that opens a small menu (Ask / Auto / Plan). Inline text
+     * rather than a pill so it doesn't grow the single-row composer's height. The
+     * menu opens upward above the trigger.
+     */
+    _renderModeSelector() {
+        const active = CHATBOT_MODES.find((m) => m.mode === this._mode) || CHATBOT_MODES[0];
+        return html `
+      <div class="mode">
+        ${this._modeMenuOpened ? html `
+          <div class="mode-menu">
+            ${CHATBOT_MODES.map((m) => html `
+              <button
+                class=${classMap({
+            'mode-menu__item': true,
+            'mode-menu__item--active': m.mode === this._mode,
+        })}
+                @click=${() => this._handleModeSelect(m.mode)}
+              >
+                <span class="mode-menu__label">${m.label}</span>
+                <span class="mode-menu__desc">${m.description}</span>
+              </button>
+            `)}
+          </div>
+        ` : nothing}
+        <button
+          class="mode-trigger"
+          aria-haspopup="true"
+          aria-expanded=${this._modeMenuOpened ? 'true' : 'false'}
+          @click=${this._handleModeToggle}
+        >
+          <span class="mode-trigger__label">${active.label}</span>
+          <svg
+            class="mode-trigger__caret"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M6 9l6 6 6-6" />
+          </svg>
+        </button>
+      </div>
+    `;
+    }
+    /**
+     * The approve/deny card shown when guarded tools are paused (Rail 3). Floats
      * OVER the messages, anchored just above the composer — not part of the message
      * scroll — so it stays in view while the transcript scrolls behind it.
      *
-     * Written for a non-technical user: one plain-language sentence saying what's
-     * about to happen (the model's schema-required `confirmationMessage`), then a
-     * row of Yes / Always allow / No. Deliberately NO tool code, NO raw
-     * arguments/JSON, and NO separate `description` line — those are noise (or
-     * alarming) to a normal user; the confirmation sentence is the whole story.
+     * Written for a non-technical user. A single action reads as one plain-language
+     * ask (`Run "{tool}"?` + the model's `confirmationMessage`). When the model
+     * batches several guarded tools, they're listed together under one header and
+     * the user accepts or rejects them all at once — the backend decision is
+     * all-or-nothing. Either way: NO tool code, NO raw arguments/JSON — those are
+     * noise (or alarming) to a normal user.
      */
     _renderConfirmation() {
-        // The framework confirms one guarded tool at a time, so we render the first
-        // (and only) pending action.
-        const action = this._pendingActions[0];
-        // Title names the tool being run ("Run {tool}?").
+        // Title: name the single tool, else a generic header for a batch.
         let title = 'Run this action?';
-        if (action) {
-            title = `Run ${action.displayName || action.toolName}?`;
+        if (this._pendingActions.length > 1) {
+            title = 'These actions need your approval';
+        }
+        else if (this._pendingActions[0]) {
+            title = `Run "${this._pendingActions[0].displayName || this._pendingActions[0].toolName}"?`;
         }
         return html `
       <div
-        class="confirmation"
+        class=${classMap({
+            'confirmation': true,
+            'confirmation--inline': this._inlineConfirm,
+        })}
         role="alertdialog"
         aria-label="Confirm before continuing"
       >
         <div class="confirmation__title">${title}</div>
-        <p class="confirmation__message">${action?.confirmationMessage || 'The assistant wants to take an action. Is that OK?'}</p>
+        ${this._pendingActions.length > 1
+            ? html `
+            <ol class="confirmation__list">
+              ${this._pendingActions.map((action) => html `
+                <li class="confirmation__list-item">
+                  <span class="confirmation__list-name">${action.displayName || action.toolName}</span>
+                  ${action.confirmationMessage
+                ? html `<span class="confirmation__list-desc">${action.confirmationMessage}</span>`
+                : nothing}
+                  ${this._showConfirmationInput && this._inlineConfirm && action.input && Object.keys(action.input).length
+                ? html `<pre class="confirmation__details-input">${JSON.stringify(action.input, null, 2)}</pre>`
+                : nothing}
+                </li>
+              `)}
+            </ol>
+          `
+            : html `
+            <p class="confirmation__message">${this._pendingActions[0]?.confirmationMessage || 'The assistant wants to take an action. Is that OK?'}</p>
+            ${this._showConfirmationInput && this._inlineConfirm && this._pendingActions[0]?.input && Object.keys(this._pendingActions[0].input).length
+                ? html `<pre class="confirmation__details-input">${JSON.stringify(this._pendingActions[0].input, null, 2)}</pre>`
+                : nothing}
+          `}
         <div class="confirmation__actions">
           ${CONFIRMATION_DECISIONS.map((option, index) => html `
             <kr-button
@@ -2077,7 +2387,7 @@ let KRChatbot = class KRChatbot extends LitElement {
               variant=${option.decision === 'approve' ? 'flat' : 'outline'}
               color=${option.decision === 'reject' ? 'secondary' : 'primary'}
               size="small"
-              ?disabled=${this._confirmationInFlight}
+              data-decision=${option.decision}
               @click=${() => this._handleConfirmationDecision(option.decision)}
             >${option.label}</kr-button>
           `)}
@@ -2299,26 +2609,37 @@ let KRChatbot = class KRChatbot extends LitElement {
      * three scopes from the latest TOKEN_USAGE event — context gauge, this turn,
      * lifetime — plus a verbose per-iteration table. Never customer-facing.
      */
-    _renderDebugPanel() {
+    /**
+     * The side drawer — one sliding panel that holds both the Settings and Debug
+     * views. The header buttons switch `_drawerView`; the title and body swap
+     * inside. The panel keeps one consistent (resizable) width across both views —
+     * switching views only changes the content, never the panel size.
+     */
+    _renderDrawer() {
+        // The debug view is gated on the server-side flag (inline variant + debug
+        // telemetry enabled); if it's not enabled, the drawer only ever shows settings.
+        const isDebug = this._drawerView === 'debug'
+            && this.variant === 'inline'
+            && this._aiFrameworkConfig.debugTelemetryEnabled === true;
         return html `
       <div
         class=${classMap({
-            'debug-drawer': true,
-            'debug-drawer--open': this._debugPanelOpen,
-            'debug-drawer--resizing': this._isDebugResizing,
+            'drawer': true,
+            'drawer--open': this._drawerOpen,
+            'drawer--resizing': this._isDebugResizing,
         })}
         style=${styleMap({ width: `${this._debugDrawerWidth}px` })}
       >
         <div
-          class="debug-drawer__resize"
+          class="drawer__resize"
           @mousedown=${this._handleDebugResizeMouseDown}
         ></div>
-        <div class="debug-drawer__header">
-          <span class="debug-drawer__title">Debug</span>
+        <div class="drawer__header">
+          <span class="drawer__title">${isDebug ? 'Debug' : 'Settings'}</span>
           <button
             class="header-action"
-            @click=${this._handleToggleDebugPanel}
-            title="Close debug panel"
+            @click=${this._handleCloseDrawer}
+            title="Close"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -2336,105 +2657,163 @@ let KRChatbot = class KRChatbot extends LitElement {
             </svg>
           </button>
         </div>
-        <div class="debug-drawer__body">
-          ${this._telemetry ? html `
-            <div class="debug-section">
-              <div class="debug-section__label">Context</div>
-              <div class="debug-gauge">
-                <div class="debug-gauge__bar">
-                  <div
-                    class="debug-gauge__fill"
-                    style=${styleMap({ width: `${Math.min(100, Math.max(0, this._telemetry.contextUsedPercent || 0))}%` })}
-                  ></div>
-                </div>
-                <span class="debug-gauge__text">
-                  ${this._fmtTokens(this._telemetry.currentContextTokens)} / ${this._fmtTokens(this._telemetry.contextWindowTokens)}
-                  · ${this._telemetry.contextUsedPercent ?? 0}%
-                </span>
-              </div>
+        <div class="drawer__body">
+          ${isDebug ? this._renderDebugContent() : this._renderSettingsContent()}
+        </div>
+      </div>
+    `;
+    }
+    /** The Settings view's body — user preferences, grouped in sections. */
+    _renderSettingsContent() {
+        return html `
+      <div class="settings-section">
+        <div class="settings-section__title">Tools</div>
+        <div class="settings-row">
+          <kr-checkbox
+            label="Show tools"
+            .checked=${this._showTools}
+            @change=${this._handleShowToolsChange}
+          ></kr-checkbox>
+        </div>
+        <div class="settings-row">
+          <kr-checkbox
+            label="Show tool inputs"
+            .checked=${this._showToolInputs}
+            @change=${this._handleShowToolInputsChange}
+          ></kr-checkbox>
+        </div>
+        <div class="settings-row">
+          <kr-checkbox
+            label="Show tool confirmation inputs"
+            .checked=${this._showConfirmationInput}
+            @change=${this._handleShowConfirmationInputChange}
+          ></kr-checkbox>
+        </div>
+      </div>
+    `;
+    }
+    /** The Debug view's body — telemetry scopes and the per-iteration table. */
+    _renderDebugContent() {
+        return html `
+      ${this._telemetry ? html `
+        <div class="debug-section">
+          <div class="debug-section__label">Context</div>
+          <div class="debug-gauge">
+            <div class="debug-gauge__bar">
+              <div
+                class="debug-gauge__fill"
+                style=${styleMap({ width: `${Math.min(100, Math.max(0, this._telemetry.contextUsedPercent || 0))}%` })}
+              ></div>
             </div>
+            <span class="debug-gauge__text">
+              ${this._fmtTokens(this._telemetry.currentContextTokens)} / ${this._fmtTokens(this._telemetry.contextWindowTokens)}
+              · ${this._telemetry.contextUsedPercent ?? 0}%
+            </span>
+          </div>
+        </div>
 
-            <div class="debug-section">
-              <div class="debug-section__label">This turn</div>
-              <div class="debug-metrics">
-                <span class="debug-metrics__key">Input</span>
-                <span class="debug-metrics__val">${this._fmtTokens(this._telemetry.turnInputTokens)}</span>
-                <span class="debug-metrics__key">Output</span>
-                <span class="debug-metrics__val">${this._fmtTokens(this._telemetry.turnOutputTokens)}</span>
-                <span class="debug-metrics__key">Cache read</span>
-                <span class="debug-metrics__val">${this._fmtTokens(this._telemetry.turnCacheReadTokens)}</span>
-                <span class="debug-metrics__key">Hit rate</span>
-                <span class="debug-metrics__val">${this._telemetry.turnHitRate ?? '—'}%</span>
-                <span class="debug-metrics__key">Cost</span>
-                <span class="debug-metrics__val debug-cost">${this._fmtCost(this._telemetry.turnCostUsd)}</span>
-              </div>
-            </div>
+        <div class="debug-section">
+          <div class="debug-section__label">This turn</div>
+          <div class="debug-metrics">
+            <span class="debug-metrics__key">Input</span>
+            <span class="debug-metrics__val">${this._fmtTokens(this._telemetry.turnInputTokens)}</span>
+            <span class="debug-metrics__key">Output</span>
+            <span class="debug-metrics__val">${this._fmtTokens(this._telemetry.turnOutputTokens)}</span>
+            <span class="debug-metrics__key">Cache read</span>
+            <span class="debug-metrics__val">${this._fmtTokens(this._telemetry.turnCacheReadTokens)}</span>
+            <span class="debug-metrics__key">Hit rate</span>
+            <span class="debug-metrics__val">${this._telemetry.turnHitRate ?? '—'}%</span>
+            <span class="debug-metrics__key">Cost</span>
+            <span class="debug-metrics__val debug-cost">${this._fmtCost(this._telemetry.turnCostUsd)}</span>
+          </div>
+        </div>
 
-            <div class="debug-section">
-              <div class="debug-section__label">Lifetime</div>
-              <div class="debug-metrics">
-                <span class="debug-metrics__key">Input</span>
-                <span class="debug-metrics__val">${this._fmtTokens(this._telemetry.conversationInputTokens)}</span>
-                <span class="debug-metrics__key">Output</span>
-                <span class="debug-metrics__val">${this._fmtTokens(this._telemetry.conversationOutputTokens)}</span>
-                <span class="debug-metrics__key">Cache read</span>
-                <span class="debug-metrics__val">${this._fmtTokens(this._telemetry.conversationCacheReadTokens)}</span>
-                <span class="debug-metrics__key">Cache write</span>
-                <span class="debug-metrics__val">${this._fmtTokens(this._telemetry.conversationCacheWriteTokens)}</span>
-                <span class="debug-metrics__key">Cost so far</span>
-                <span class="debug-metrics__val debug-cost">${this._fmtCost(this._telemetry.conversationCostUsd)}</span>
-              </div>
-            </div>
+        <div class="debug-section">
+          <div class="debug-section__label">Lifetime</div>
+          <div class="debug-metrics">
+            <span class="debug-metrics__key">Input</span>
+            <span class="debug-metrics__val">${this._fmtTokens(this._telemetry.conversationInputTokens)}</span>
+            <span class="debug-metrics__key">Output</span>
+            <span class="debug-metrics__val">${this._fmtTokens(this._telemetry.conversationOutputTokens)}</span>
+            <span class="debug-metrics__key">Cache read</span>
+            <span class="debug-metrics__val">${this._fmtTokens(this._telemetry.conversationCacheReadTokens)}</span>
+            <span class="debug-metrics__key">Cache write</span>
+            <span class="debug-metrics__val">${this._fmtTokens(this._telemetry.conversationCacheWriteTokens)}</span>
+            <span class="debug-metrics__key">Cost so far</span>
+            <span class="debug-metrics__val debug-cost">${this._fmtCost(this._telemetry.conversationCostUsd)}</span>
+          </div>
+        </div>
           ` : html `
             <div class="debug-empty">No telemetry yet — send a message to populate.</div>
           `}
 
-          ${this._iterationLog.length ? html `
-            <div class="debug-section">
-              <div class="debug-section__label">Iterations (this turn)</div>
-              <div class="debug-iterations-scroll">
-                <table class="debug-iterations">
-                  <thead>
-                    <tr>
-                      <th>#</th>
-                      <th>In</th>
-                      <th>Out</th>
-                      <th>Cache R</th>
-                      <th>Cache W</th>
-                      <th>Hit</th>
-                      <th>Cost</th>
-                      <th>Ckpt</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    ${this._iterationLog.map((it) => {
+      ${this._iterationLog.length ? html `
+        <div class="debug-section">
+          <div class="debug-section__label">Iterations (this turn)</div>
+          <div class="debug-iterations-scroll">
+            <table class="debug-iterations">
+              <thead>
+                <tr>
+                  <th>#</th>
+                  <th>In</th>
+                  <th>Out</th>
+                  <th>Cache R</th>
+                  <th>Cache W</th>
+                  <th>Hit</th>
+                  <th>Cost</th>
+                  <th>Ckpt</th>
+                </tr>
+              </thead>
+              <tbody>
+                ${this._iterationLog.map((it) => {
             const ckpt = this._cacheCheckpoints[it.iteration];
             return html `
-                        <tr>
-                          <td>${it.iteration}</td>
-                          <td>${this._fmtTokens(it.iterationInput)}</td>
-                          <td>${this._fmtTokens(it.iterationOutput)}</td>
-                          <td>${this._fmtTokens(it.iterationCacheRead)}</td>
-                          <td>${this._fmtTokens(it.iterationCacheWrite)}</td>
-                          <td>${it.iterationHitRate ?? '—'}%</td>
-                          <td class="debug-cost">${this._fmtCost(it.iterationCostUsd)}</td>
-                          <td>${ckpt ? ckpt.mode : '—'}</td>
-                        </tr>
+                    <tr>
+                      <td>${it.iteration}</td>
+                      <td>${this._fmtTokens(it.iterationInput)}</td>
+                      <td>${this._fmtTokens(it.iterationOutput)}</td>
+                      <td>${this._fmtTokens(it.iterationCacheRead)}</td>
+                      <td>${this._fmtTokens(it.iterationCacheWrite)}</td>
+                      <td>${it.iterationHitRate ?? '—'}%</td>
+                      <td class="debug-cost">${this._fmtCost(it.iterationCostUsd)}</td>
+                      <td>${ckpt ? ckpt.mode : '—'}</td>
+                    </tr>
                       `;
         })}
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          ` : nothing}
+              </tbody>
+            </table>
+          </div>
         </div>
-      </div>
+          ` : nothing}
     `;
     }
     render() {
         // Debug affordances (drawer toggle, drawer, /test-* options) require the
         // inline variant AND the server-side debug flag from aiFrameworkConfig.
         const isDebugEnabled = this.variant === 'inline' && this._aiFrameworkConfig.debugTelemetryEnabled === true;
+        // Push the content over by the open drawer's width so the drawer sits beside
+        // the content rather than overlaying it. One consistent (resizable) width for
+        // both views. Only pushes while the drawer is open.
+        const contentPadding = {};
+        if (this._drawerOpen) {
+            contentPadding.paddingRight = `${this._debugDrawerWidth}px`;
+        }
+        // Group the transcript into runs so an agent turn (its reasoning/tool/text/
+        // decision messages, which stream in as separate entries) renders inside ONE
+        // wrapper. The scroll-to-top runway goes on that wrapper, so everything the
+        // turn appends fills the SAME tall element instead of stacking as siblings
+        // below it (which is what stranded tool lines below the fold). A user message
+        // is its own group and is unaffected.
+        const messageGroups = [];
+        this.messages.forEach((msg) => {
+            const lastGroup = messageGroups[messageGroups.length - 1];
+            if (msg.type === 'user' || !lastGroup || lastGroup[0].type === 'user') {
+                messageGroups.push([msg]);
+            }
+            else {
+                lastGroup.push(msg);
+            }
+        });
         return html `
       ${(this.hideToggle || this.variant === 'inline') ? nothing : html `
         <button
@@ -2465,7 +2844,7 @@ let KRChatbot = class KRChatbot extends LitElement {
             'panel--opened': this.opened,
             'panel--resizing-debug': this._isDebugResizing,
         })}
-        style=${styleMap(isDebugEnabled && this._debugPanelOpen ? { paddingRight: `${this._debugDrawerWidth}px` } : {})}
+        style=${styleMap(contentPadding)}
         @dragenter=${this._handleDragEnter}
         @dragover=${this._handleDragOver}
         @dragleave=${this._handleDragLeave}
@@ -2538,13 +2917,35 @@ let KRChatbot = class KRChatbot extends LitElement {
             </div>
           </div>
           <div class="header-actions">
+            <button
+              class="header-action"
+              @click=${() => this._toggleDrawer('settings')}
+              title="Settings"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="header-action-icon"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"
+                />
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+                />
+              </svg>
+            </button>
             ${isDebugEnabled ? html `
               <button
-                class=${classMap({
-            'header-action': true,
-            'header-action--active': this._debugPanelOpen,
-        })}
-                @click=${this._handleToggleDebugPanel}
+                class="header-action"
+                @click=${() => this._toggleDrawer('debug')}
                 title="Debug telemetry"
               >
                 <svg
@@ -2595,141 +2996,302 @@ let KRChatbot = class KRChatbot extends LitElement {
                 <span class="empty-text">What can I help you with?</span>
               </div>
             ` : nothing}
-            ${this.messages.map((msg, index) => html `
-              <div class=${classMap({
-            'message': true,
-            'message--user': msg.type === 'user',
-            'message--assistant': msg.type === 'assistant',
-        })}>
-                ${msg.reasoning ? html `
-                  <details class="reasoning">
-                    <summary>Thinking</summary>
-                    <div class="reasoning-content">${msg.reasoning}</div>
-                  </details>
-                ` : nothing}
-                ${msg.conversationFiles && msg.conversationFiles.length ? html `
-                  <div class="attachments">
-                    ${msg.conversationFiles.map((file) => {
-            const fileName = file.niceName || file.name || 'File';
-            // A stored file is an image by its MIME when it has one, else
-            // by its extension.
-            let isImage = IMAGE_EXTENSIONS.includes(this._getFileExtension(fileName));
-            if (file.mimeType) {
-                isImage = file.mimeType.startsWith('image/');
-            }
-            // An image shows its thumbnail; everything else shows a
-            // file-type tile. Both open the previewer on click — it renders
-            // images, video, PDFs, and text inline, and shows a download
-            // tile for the rest (Office formats), so a click always does
-            // something useful.
-            if (isImage) {
+            ${messageGroups.map((group) => {
+            // A user group is a single message rendered bare. An agent group wraps
+            // its items in one `.agent-turn` so the scroll-to-top runway sits on
+            // that wrapper and the whole turn fills it (no stranded siblings).
+            const items = group.map((msg) => {
+                const index = this.messages.indexOf(msg);
+                // Skip an empty assistant placeholder (no content, no reasoning) —
+                // _send and _ensureAssistantBubble append these to stream into,
+                // but between tool calls with no text they stay empty. An invisible
+                // .message div still occupies a flex-gap slot, doubling the spacing
+                // between tool lines. Keep it only while it's the actively-streaming
+                // last message (it shows the typing dots).
+                if (msg.type === 'assistant'
+                    && !msg.content
+                    && !msg.reasoning
+                    && !(this._isStreaming && msg === this.messages[this.messages.length - 1])) {
+                    return nothing;
+                }
+                // Tool visibility is user-controlled ("Show tools" in the settings
+                // panel). When off, drop the whole tool row so it doesn't leave an
+                // empty flex-gap slot in the transcript.
+                if ((msg.type === 'tool_use' || msg.type === 'tool_result') && !this._showTools) {
+                    return nothing;
+                }
+                // A tool_result renders nothing on its own — its tool_use line pulls
+                // it in (matched by data.toolUseId) and renders it under the ⎿ cliff.
+                if (msg.type === 'tool_result') {
+                    return nothing;
+                }
+                // A tool_use line (Claude-CLI style): header "› ToolName(input)" and,
+                // when "Show tool inputs" is on, the result under a ⎿ cliff pulled
+                // from the next tool_result with the same toolUseId. Precompute the
+                // result and the two display strings (they need statements — JSON
+                // reformat, truncation — that can't live in a template expression).
+                let result;
+                let inputSummary = '';
+                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._showToolInputs && msg.data?.toolInput) {
+                        inputSummary = String(msg.data.toolInput).replace(/\s+/g, ' ').trim();
+                        if (inputSummary.length > 80) {
+                            inputSummary = `${inputSummary.slice(0, 79)}…`;
+                        }
+                    }
+                    if (this._showToolInputs && result?.toolResultString) {
+                        let formatted;
+                        try {
+                            formatted = JSON.stringify(JSON.parse(result.toolResultString), null, 2);
+                        }
+                        catch {
+                            formatted = String(result.toolResultString);
+                        }
+                        const lines = formatted.split('\n');
+                        resultPreview = lines.slice(0, 3).join('\n');
+                        resultRemainder = Math.max(0, lines.length - 3);
+                    }
+                }
+                // A resolved-decision line (Rail 3) — reads "Approved Create AI Tool"
+                // / "Denied …" / "Always allowed …". Precompute the verb and the
+                // friendly tool names (an if/else and a map — not template exprs).
+                let decisionVerb = 'Approved';
+                let decisionTools = [];
+                if (msg.type === 'action_decision') {
+                    if (msg.data?.outcome === 'denied') {
+                        decisionVerb = 'Denied';
+                    }
+                    else if (msg.data?.outcome === 'alwaysAllowed') {
+                        decisionVerb = 'Always allowed';
+                    }
+                    decisionTools = (msg.data?.tools || []).map((t) => t.displayName || t.toolName);
+                }
+                // A tool line and a decision line ARE assistant-side messages —
+                // render them inside the same .message wrapper as everything else so
+                // they share its spacing/structure, not as separate element types.
                 return html `
-                          <button
-                            class="attachment"
-                            type="button"
-                            title=${file.niceName || 'View image'}
-                            @click=${() => this._handleFileOpen(file)}
+                  <div class=${classMap({
+                    'message': true,
+                    'message--user': msg.type === 'user',
+                    'message--assistant': msg.type !== 'user',
+                })}>
+                    ${msg.type === 'tool_use' ? html `
+                      <div class="tool-activity-block">
+                        <div class=${classMap({
+                    'tool-activity': true,
+                    'tool-activity--error': result?.toolResultStatus === 'error',
+                })}>
+                          <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>
+                        ${this._showToolInputs && result?.toolResultString ? html `
+                          <div class=${classMap({
+                    'tool-activity__result': true,
+                    'tool-activity__result--error': result.toolResultStatus === 'error',
+                })}>
+                            <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>
+                        ` : nothing}
+                      </div>
+                    ` : nothing}
+                    ${msg.type === 'action_decision' ? html `
+                      <div class=${classMap({
+                    'decision': true,
+                    'decision--denied': msg.data?.outcome === 'denied',
+                })}>
+                        <span class="decision__icon">
+                          <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          >
+                            ${msg.data?.outcome === 'denied'
+                    ? html `<path d="M18 6 6 18M6 6l12 12" />`
+                    : html `<path d="M20 6 9 17l-5-5" />`}
+                          </svg>
+                        </span>
+                        <span class="decision__label">${decisionVerb}${decisionTools.length ? ' ' + decisionTools.join(', ') : nothing}</span>
+                      </div>
+                    ` : nothing}
+                    ${msg.reasoning ? (this._reasoningAsMessage ? html `
+                      <div class="message-content">${msg.reasoning}</div>
+                    ` : html `
+                      <details class="reasoning">
+                        <summary>Thinking</summary>
+                        <div class="reasoning-content">${msg.reasoning}</div>
+                      </details>
+                    `) : nothing}
+                    ${msg.conversationFiles && msg.conversationFiles.length ? html `
+                      <div class="attachments">
+                        ${msg.conversationFiles.map((file) => {
+                    const fileName = file.niceName || file.name || 'File';
+                    // A stored file is an image by its MIME when it has one, else
+                    // by its extension.
+                    let isImage = IMAGE_EXTENSIONS.includes(this._getFileExtension(fileName));
+                    if (file.mimeType) {
+                        isImage = file.mimeType.startsWith('image/');
+                    }
+                    // An image shows its thumbnail; everything else shows a
+                    // file-type tile. Both open the previewer on click — it renders
+                    // images, video, PDFs, and text inline, and shows a download
+                    // tile for the rest (Office formats), so a click always does
+                    // something useful.
+                    if (isImage) {
+                        return html `
+                              <button
+                                class="attachment"
+                                type="button"
+                                title=${file.niceName || 'View image'}
+                                @click=${() => this._handleFileOpen(file)}
+                              >
+                                <img
+                                  src=${file.previewUrl || `${KRHttp.getBaseUrl()}/api/system/conversationFile/${file.conversationFileID}/view`}
+                                  alt=${file.niceName || ''}
+                                />
+                              </button>
+                            `;
+                    }
+                    return html `
+                            <button
+                              class="attachment attachment--doc attachment--openable"
+                              type="button"
+                              title=${fileName}
+                              @click=${() => this._handleFileOpen(file)}
+                            >
+                              <span class="attachment__type">${this._getFileExtension(fileName) || 'File'}</span>
+                              <span class="attachment__name">${fileName}</span>
+                            </button>
+                          `;
+                })}
+                      </div>
+                    ` : nothing}
+                    ${msg.content ? html `
+                      <div class="message-content">
+                        ${msg.type === 'user'
+                    ? this._renderUserContent(msg.content)
+                    : unsafeHTML(marked.parse(msg.content, { breaks: true }))}
+                      </div>
+                    ` : nothing}
+                    ${msg.type === 'assistant' && this._isStreaming && msg === this.messages[this.messages.length - 1] ? html `
+                      <div class="typing">
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                      </div>
+                    ` : nothing}
+                    ${msg.content ? html `
+                      <button
+                        class="message-copy"
+                        title=${this._copiedIndex === index ? 'Copied' : 'Copy'}
+                        @click=${() => this._handleCopyMessage(msg.content, index)}
+                      >
+                        ${this._copiedIndex === index ? html `
+                          <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
                           >
-                            <img
-                              src=${file.previewUrl || `${KRHttp.getBaseUrl()}/api/system/conversationFile/${file.conversationFileID}/view`}
-                              alt=${file.niceName || ''}
+                            <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"
                             />
-                          </button>
-                        `;
+                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                          </svg>
+                        `}
+                      </button>
+                    ` : nothing}
+                  </div>
+                `;
+            });
+            if (group[0].type === 'user') {
+                return items;
             }
+            // The inline confirmation is this turn's final step, so it renders
+            // INSIDE the agent-turn wrapper (not as a sibling) — it sits right
+            // after the last message and the runway falls below it naturally.
+            // Only on the last group, which is the current (paused) turn.
+            const isLastGroup = group === messageGroups[messageGroups.length - 1];
+            const showConfirmation = isLastGroup && this._pendingActions.length && this._inlineConfirm;
+            // Keep the "thinking" indicator visible while a tool is running or
+            // the model is between steps with no text yet. The trailing empty
+            // assistant bubble shows the dots itself; but once a tool line is
+            // the last message, that bubble is gone — so render the dots here
+            // at the end of the live turn instead. Not while paused for a
+            // confirmation (the ask replaces the indicator).
+            const lastMsg = this.messages[this.messages.length - 1];
+            const showTyping = isLastGroup
+                && this._isStreaming
+                && !this._pendingActions.length
+                && lastMsg?.type !== 'assistant';
             return html `
-                        <button
-                          class="attachment attachment--doc attachment--openable"
-                          type="button"
-                          title=${fileName}
-                          @click=${() => this._handleFileOpen(file)}
-                        >
-                          <span class="attachment__type">${this._getFileExtension(fileName) || 'File'}</span>
-                          <span class="attachment__name">${fileName}</span>
-                        </button>
-                      `;
+                    <div class="agent-turn">
+                      ${items}
+                      ${showTyping ? html `
+                        <div class="typing">
+                          <span></span>
+                          <span></span>
+                          <span></span>
+                        </div>
+                    ` : nothing}
+                      ${showConfirmation ? this._renderConfirmation() : nothing}
+                    </div>
+              `;
         })}
-                  </div>
-                ` : nothing}
-                ${msg.content ? html `
-                  <div class="message-content">
-                    ${msg.type === 'user'
-            ? this._renderUserContent(msg.content)
-            : unsafeHTML(marked.parse(msg.content, { breaks: true }))}
-                  </div>
-                ` : nothing}
-                ${msg.type === 'assistant' && this._isStreaming && msg === this.messages[this.messages.length - 1] ? html `
-                  <div class="typing">
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                  </div>
-                ` : nothing}
-                ${msg.content ? html `
-                  <button
-                    class="message-copy"
-                    title=${this._copiedIndex === index ? 'Copied' : 'Copy'}
-                    @click=${() => this._handleCopyMessage(msg.content, index)}
-                  >
-                    ${this._copiedIndex === index ? 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>
-                    `}
-                  </button>
-                ` : nothing}
               </div>
-            `)}
-          </div>
-        </div>
+              </div>
 
-        ${this._pendingActions.length ? this._renderConfirmation() : nothing}
+              ${this._pendingActions.length && !this._inlineConfirm ? this._renderConfirmation() : nothing}
 
-        ${this._error ? html `
-          <div class="error">
-            <span>${this._error}</span>
-            <button class="error-dismiss" @click=${this._handleErrorDismiss}>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="2"
-                stroke="currentColor"
-                class="error-dismiss-icon"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M6 18 18 6M6 6l12 12"
-                />
-              </svg>
-            </button>
-          </div>
+              ${this._error ? html `
+                <div class="error">
+                  <span>${this._error}</span>
+                  <button class="error-dismiss" @click=${this._handleErrorDismiss}>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke-width="2"
+                      stroke="currentColor"
+                      class="error-dismiss-icon"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M6 18 18 6M6 6l12 12"
+                      />
+                    </svg>
+                  </button>
+                </div>
         ` : this._contextLimitReached ? html `
           <div class="context-limit" role="alert">
             ${this._contextLimitMessage
@@ -2761,68 +3323,68 @@ let KRChatbot = class KRChatbot extends LitElement {
           </div>
         ` : nothing}
 
-        <div class="footer">
-          ${this._pendingConversationFiles.length ? html `
-            <div class="composer-attachments">
-              ${repeat(this._pendingConversationFiles, (p) => p.localId, (p) => html `
-                <div
-                  class=${classMap({
+              <div class="footer">
+              ${this._pendingConversationFiles.length ? html `
+                <div class="composer-attachments">
+                  ${repeat(this._pendingConversationFiles, (p) => p.localId, (p) => html `
+                    <div
+                      class=${classMap({
             chip: true,
             'chip--doc': !p.previewUrl,
         })}
-                  title=${p.name}
-                >
-                  <div
-                    class=${classMap({
+                      title=${p.name}
+                    >
+                      <div
+                        class=${classMap({
             'chip-body': true,
             'chip-body--image': Boolean(p.previewUrl),
         })}
-                  >
-                    ${p.previewUrl
+                      >
+                        ${p.previewUrl
             ? html `<img src=${p.previewUrl} alt=${p.name} />`
             : html `
-                        <span class="chip-type">${this._getFileExtension(p.name) || 'File'}</span>
-                        <span class="chip-name">${p.name}</span>
+                            <span class="chip-type">${this._getFileExtension(p.name) || 'File'}</span>
+                            <span class="chip-name">${p.name}</span>
                       `}
-                  </div>
-                  <button
-                    class="chip-remove"
-                    title="Remove"
-                    @click=${() => this._handlePendingRemove(p.localId)}
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke-width="1.75"
-                      stroke="currentColor"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M6 18 18 6M6 6l12 12"
-                      />
-                    </svg>
-                  </button>
-                </div>
+                      </div>
+                      <button
+                        class="chip-remove"
+                        title="Remove"
+                        @click=${() => this._handlePendingRemove(p.localId)}
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke-width="1.75"
+                          stroke="currentColor"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M6 18 18 6M6 6l12 12"
+                          />
+                        </svg>
+                      </button>
+                    </div>
               `)}
-            </div>
+                </div>
           ` : nothing}
-          <input
-            class="file-input"
-            type="file"
-            accept=${ACCEPTED_FILE_EXTENSIONS.map((ext) => '.' + ext).join(',')}
-            multiple
-            hidden
-            @change=${this._handleFileInputChange}
-          />
-          ${this._skillMenuOpened ? this._renderSkillMenu() : nothing}
-          <div class="input-wrapper">
-            <button
+              <input
+              class="file-input"
+              type="file"
+              accept=${ACCEPTED_FILE_EXTENSIONS.map((ext) => '.' + ext).join(',')}
+              multiple
+              hidden
+              @change=${this._handleFileInputChange}
+              />
+              ${this._skillMenuOpened ? this._renderSkillMenu() : nothing}
+              <div class="input-wrapper">
+              <button
               class="input-plus"
               @click=${this._handlePlusClick}
-            >+</button>
-            <textarea
+              >+</button>
+              <textarea
               class="input"
               .value=${this._inputValue}
               placeholder=${this.placeholder}
@@ -2830,31 +3392,32 @@ let KRChatbot = class KRChatbot extends LitElement {
               @input=${this._handleInputChange}
               @keydown=${this._handleKeyDown}
               @paste=${this._handlePaste}
-            ></textarea>
-            ${window.SpeechRecognition || window.webkitSpeechRecognition ? html `
-              ${this._isDictating ? html `
-                <button
-                  class="mic-stop"
-                  title="Stop dictation"
-                  aria-label="Stop dictation"
-                  @click=${this._handleMicClick}
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="currentColor"
-                    viewBox="0 0 24 24"
-                    class="mic-stop-icon"
-                    aria-hidden="true"
+              ></textarea>
+              ${this._renderModeSelector()}
+              ${window.SpeechRecognition || window.webkitSpeechRecognition ? html `
+                ${this._isDictating ? html `
+                  <button
+                    class="mic-stop"
+                    title="Stop dictation"
+                    aria-label="Stop dictation"
+                    @click=${this._handleMicClick}
                   >
-                    <rect
-                      x="6"
-                      y="6"
-                      width="12"
-                      height="12"
-                      rx="2"
-                    />
-                  </svg>
-                </button>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="currentColor"
+                      viewBox="0 0 24 24"
+                      class="mic-stop-icon"
+                      aria-hidden="true"
+                    >
+                      <rect
+                        x="6"
+                        y="6"
+                        width="12"
+                        height="12"
+                        rx="2"
+                      />
+                    </svg>
+                  </button>
               ` : html `
                 <button
                   class="mic"
@@ -2880,35 +3443,32 @@ let KRChatbot = class KRChatbot extends LitElement {
                 </button>
               `}
             ` : nothing}
-            ${this._isStreaming ? html `
-              <button
-                class="stop"
-                @click=${this._handleStop}
-                title="Stop generating"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  viewBox="0 0 24 24"
-                  class="stop-icon"
+              ${this._isStreaming ? html `
+                <button
+                  class="stop"
+                  @click=${this._handleStop}
+                  title="Stop generating"
                 >
-                  <rect
-                    x="6"
-                    y="6"
-                    width="12"
-                    height="12"
-                    rx="2"
-                  />
-                </svg>
-              </button>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                    class="stop-icon"
+                  >
+                    <rect
+                      x="6"
+                      y="6"
+                      width="12"
+                      height="12"
+                      rx="2"
+                    />
+                  </svg>
+                </button>
             ` : html `
               <button
                 class=${classMap({
             'send': true,
-            // Blocked while a guarded-tool batch awaits a decision — a
-            // normal message would be rejected until it's resolved.
-            'send--disabled': (!this._inputValue.trim() && !this._pendingConversationFiles.length)
-                || this._pendingActions.length > 0,
+            'send--disabled': (!this._inputValue.trim() && !this._pendingConversationFiles.length) || this._pendingActions.length > 0,
         })}
                 @click=${this._handleSubmit}
                 title=${this._pendingActions.length ? 'Approve or deny the pending action first' : 'Send message'}
@@ -2927,12 +3487,12 @@ let KRChatbot = class KRChatbot extends LitElement {
                 </svg>
               </button>
             `}
-          </div>
-        </div>
-        ${this._skillBrowseOpened ? this._renderSkillBrowse() : nothing}
-        ${isDebugEnabled ? this._renderDebugPanel() : nothing}
-      </div>
-    `;
+              </div>
+              </div>
+              ${this._skillBrowseOpened ? this._renderSkillBrowse() : nothing}
+              ${this._renderDrawer()}
+              </div>
+              `;
     }
 };
 KRChatbot.styles = css `
@@ -3045,6 +3605,14 @@ KRChatbot.styles = css `
       box-shadow: none;
       border: none;
       animation: none;
+      /* Reserve space for the drawer by animating padding-right in sync with the
+         drawer's slide, so the chat column shrinks rather than being overlaid. */
+      transition: padding-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    /* Track the cursor 1:1 while dragging the drawer's resize handle. */
+    :host([variant='inline']) .panel--resizing-debug {
+      transition: none;
     }
 
     @keyframes chatbot-panel-in {
@@ -3112,16 +3680,31 @@ KRChatbot.styles = css `
       color: #000000;
     }
 
-    .header-action--active {
-      background: rgba(0, 0, 0, 0.08);
-      color: #000000;
-    }
-
     .header-action-icon {
       width: 20px;
       height: 20px;
     }
 
+    .settings-section {
+      padding: 14px 20px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+    }
+
+    .settings-section:last-child {
+      border-bottom: none;
+    }
+
+    .settings-section__title {
+      font-size: 14px;
+      font-weight: 600;
+      color: #000000;
+      margin-bottom: 12px;
+    }
+
+    .settings-row {
+      padding: 6px 0;
+    }
+
     /* Messages */
     /* Full-width scroll container — keeps the scrollbar at the panel edge. */
     .messages {
@@ -3202,6 +3785,138 @@ KRChatbot.styles = css `
       gap: 24px;
     }
 
+    /* An agent turn wraps all of its messages (reasoning, tool lines, text,
+       decision) so the scroll-to-top runway can sit on the whole turn and content
+       streams inside it instead of stacking as siblings below the runway. A flex
+       column with the same 36px gap as .messages-inner, so item spacing is
+       unchanged whether grouped or not. Full width so its children align exactly
+       as before (assistant left, tool/decision left). */
+    .agent-turn {
+      display: flex;
+      flex-direction: column;
+      gap: 36px;
+      width: 100%;
+    }
+
+    /* 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). */
+    .tool-activity {
+      align-self: flex-start;
+      display: flex;
+      align-items: baseline;
+      gap: 6px;
+      font-size: 14px;
+      color: #000000;
+      /* Keep the chevron + name + input on a single line; input truncates if long. */
+      white-space: nowrap;
+    }
+
+    .tool-activity--error {
+      color: var(--kr-chatbot-error-text);
+    }
+
+    /* Leading chevron — plain text in the same style as the name, so it reads as
+       one label rather than an icon. */
+    .tool-activity__chevron {
+      flex-shrink: 0;
+    }
+
+    /* The tool name never shrinks — it's the input that truncates if the header
+       runs out of room. */
+    .tool-activity__label {
+      flex-shrink: 0;
+    }
+
+    /* The tool input rendered inline in the header, Claude-CLI style:
+       "Read(chatbot.ts)". Same color/font as the tool name — it reads as one
+       label. Truncates with an ellipsis so the header stays on one line. */
+    .tool-activity__input {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: 0;
+    }
+
+    /* Header + result grouped as one unit so the parent .message--assistant 24px
+       gap doesn't push them apart. Rows sit tight together inside. */
+    .tool-activity-block {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    /* 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. */
+    .tool-activity__result {
+      align-self: flex-start;
+      display: flex;
+      gap: 2px;
+      /* Align the ⎿ connector's visible stroke under the first character of the
+         tool name. The name is preceded by the "› " chevron (chevron width + 6px
+         gap ≈ 11px), and the ⎿ glyph carries ~5.6px more internal left bearing
+         than the name's first letter — so net-shift the block right to land the
+         stroke under the name. */
+      margin-left: 6px;
+      font-size: 14px;
+      color: #000000;
+    }
+
+    .tool-activity__result--error {
+      color: var(--kr-chatbot-error-text);
+    }
+
+    .tool-activity__connector {
+      flex-shrink: 0;
+      color: rgba(0, 0, 0, 0.55);
+      user-select: none;
+      /* The ⎿ arm sits near the baseline, ~6px below the result's first-character
+         vertical center. Nudge the glyph up so the arm tip lines up with that center. */
+      transform: translateY(-6px);
+    }
+
+    .tool-activity__result-body {
+      /* Small horizontal gap between the ⎿ arm and the result text so they don't
+         collide (the ⎿ glyph's own arm already extends most of the way). */
+      margin: 0 0 0 6px;
+      white-space: pre-wrap;
+      word-break: break-word;
+      font: inherit;
+    }
+
+    .tool-activity__more {
+      color: rgba(0, 0, 0, 0.4);
+    }
+
+    /* Decision line — the persistent record of an approve/deny (Rail 3). Uses the
+       normal message text style (14px, black); a check/deny icon marks it. */
+    .decision {
+      align-self: flex-start;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 14px;
+      color: #000000;
+    }
+
+    .decision--denied {
+      color: var(--kr-chatbot-error-text);
+    }
+
+    .decision__icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px;
+      height: 16px;
+      flex-shrink: 0;
+    }
+
+    .decision__icon svg {
+      width: 15px;
+      height: 15px;
+    }
+
     /* anywhere, NOT break-word: both break a long unbreakable run (a pasted URL) for
        layout, but only anywhere also shrinks the element's intrinsic min-content width.
        With break-word the URL still reports its full unbroken width as the minimum,
@@ -3483,11 +4198,49 @@ KRChatbot.styles = css `
       overflow-y: auto;
     }
 
+    /* Inline variant (Claude-CLI style): sits IN the message stream as just
+       another assistant message — no card chrome (padding/background/border/
+       radius/shadow), no float offsets, no height cap. It flows and scrolls with
+       the transcript. */
+    .confirmation--inline {
+      position: static;
+      left: auto;
+      right: auto;
+      bottom: auto;
+      z-index: auto;
+      max-width: none;
+      margin: 0;
+      max-height: none;
+      overflow: visible;
+      padding: 0;
+      border: none;
+      border-radius: 0;
+      background: none;
+      box-shadow: none;
+      /* scrollIntoView({ block: 'end' }) aligns the card's bottom to the viewport
+         bottom; this margin makes it stop short so the Yes/No buttons aren't flush
+         against (or clipped by) the fold. */
+      scroll-margin-bottom: 24px;
+    }
+
+    /* The raw arguments, pretty-printed. Wraps rather than scrolling — the whole
+       card grows with the transcript (the point of the inline variant). */
+    .confirmation__details-input {
+      margin: 8px 0 0;
+      border-radius: 6px;
+      color: var(--kr-chatbot-text);
+      font-family: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;
+      font-size: 13px;
+      line-height: 1.5;
+      white-space: pre-wrap;
+      overflow-wrap: anywhere;
+    }
+
     /* "Run {tool}?" heading — names the tool being run. */
     .confirmation__title {
       font-size: 16px;
       font-weight: 600;
-      margin-bottom: 8px;
+      margin-bottom: 12px;
     }
 
     .confirmation__message {
@@ -3496,8 +4249,26 @@ KRChatbot.styles = css `
       line-height: 1.5;
     }
 
-    .confirmation__message + .confirmation__message {
-      margin-top: 6px;
+    /* Batch list: one bullet per pending tool — its name, then the model's
+       plain-language intent under it. */
+    .confirmation__list {
+      margin: 0;
+      padding-left: 20px;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+
+    .confirmation__list-item:not(:last-child) {
+      margin-bottom: 8px;
+    }
+
+    .confirmation__list-name {
+      display: block;
+      font-weight: 600;
+    }
+
+    .confirmation__list-desc {
+      display: block;
     }
 
     /* Buttons in a row; wrap on a narrow panel rather than overflowing the card. */
@@ -3505,45 +4276,34 @@ KRChatbot.styles = css `
       display: flex;
       flex-wrap: wrap;
       align-items: center;
-      gap: 8px;
-      margin-top: 16px;
+      gap: 10px;
+      margin-top: 20px;
     }
 
-    /* Keyboard-highlighted decision — a focus ring around the button host, drawn
+    /* Keyboard-highlighted decision — a focus ring around the button, drawn
        outside its border so it reads over both the flat (Yes) and outline
-       variants without recoloring the button itself. */
+       variants without recoloring or reshaping the button. Don't set
+       border-radius here: that's the button's own (its pill shape); outline
+       follows it and doesn't affect the button's size. */
     .confirmation__btn--highlighted {
-      border-radius: 8px;
       outline: 2px solid var(--kr-chatbot-primary);
       outline-offset: 2px;
     }
 
     /*
-     * INTERNAL-ONLY debug telemetry drawer. A layout drawer docked to the right
-     * of the inline chat — the chat column shrinks to make room; it does not
-     * overlay. Closed by default (width 0), animates open. Not customer-facing —
-     * token counts, cache internals, and approximate cost estimates for internal
-     * debugging. Styled to match the chatbot's light theme (Inter, design tokens).
+     * Side drawer, docked to the right of the inline chat, holding the Settings
+     * and Debug views. The chat column shrinks (padding-right) to make room; the
+     * drawer does not overlay. It stays mounted and slides in/out via a transform,
+     * so opening and closing animate; switching views just swaps the content
+     * inside (no re-slide, no width change). One consistent resizable width across
+     * both views; the width is set inline from _debugDrawerWidth.
      */
-    /*
-     * The chat column reserves space for the drawer by animating padding-right,
-     * so opening the drawer shrinks the chat (header/messages/composer) rather
-     * than overlaying it. Only applies in inline mode.
-     */
-    :host([variant='inline']) .panel {
-      transition: padding-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    /* Track the cursor 1:1 while dragging the drawer's resize handle. */
-    :host([variant='inline']) .panel--resizing-debug {
-      transition: none;
-    }
-
-    .debug-drawer {
+    .drawer {
       position: absolute;
       top: 0;
       right: 0;
       bottom: 0;
+      max-width: 100%;
       background: var(--kr-chatbot-bg);
       display: flex;
       flex-direction: column;
@@ -3555,17 +4315,17 @@ KRChatbot.styles = css `
 
     /* While dragging the resize handle, suppress the slide transition so the
        drawer tracks the cursor 1:1. */
-    .debug-drawer--resizing {
+    .drawer--resizing {
       transition: none;
     }
 
-    .debug-drawer--open {
+    .drawer--open {
       transform: translateX(0);
       box-shadow: -4px 0 20px rgba(10, 26, 46, 0.07);
     }
 
     /* Left-edge grab handle for resizing the drawer. */
-    .debug-drawer__resize {
+    .drawer__resize {
       position: absolute;
       top: 0;
       left: 0;
@@ -3575,7 +4335,7 @@ KRChatbot.styles = css `
       z-index: 10;
     }
 
-    .debug-drawer__header {
+    .drawer__header {
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -3585,13 +4345,13 @@ KRChatbot.styles = css `
       border-bottom: 1px solid rgba(0, 0, 0, 0.08);
     }
 
-    .debug-drawer__title {
+    .drawer__title {
       font-size: 14px;
       font-weight: 600;
       color: #000000;
     }
 
-    .debug-drawer__body {
+    .drawer__body {
       flex: 1;
       overflow-y: auto;
       overflow-x: hidden;
@@ -3800,6 +4560,89 @@ KRChatbot.styles = css `
       margin-right: 4px;
     }
 
+    /* Mode selector — Gemini-style inline label + caret before the mic. Anchors
+       its upward menu; sized so it never grows the single-row composer height. */
+    .mode {
+      position: relative;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+    }
+
+    .mode-trigger {
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+      height: 34px;
+      padding: 0 8px;
+      border: none;
+      background: transparent;
+      color: var(--kr-chatbot-text);
+      border-radius: 17px;
+      cursor: pointer;
+      font: inherit;
+      font-size: 14px;
+      white-space: nowrap;
+      transition: background 0.15s;
+    }
+
+    .mode-trigger:hover {
+      background: #f8f9fc;
+    }
+
+    .mode-trigger__caret {
+      width: 16px;
+      height: 16px;
+      flex-shrink: 0;
+    }
+
+    /* Menu opens upward, anchored to the trigger's right edge. */
+    .mode-menu {
+      position: absolute;
+      bottom: calc(100% + 8px);
+      right: 0;
+      min-width: 220px;
+      background: white;
+      border: 1px solid #b0b0b0;
+      border-radius: 8px;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+      padding: 6px 0;
+      z-index: 10000;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .mode-menu__item {
+      display: flex;
+      flex-direction: column;
+      gap: 1px;
+      width: 100%;
+      padding: 8px 14px;
+      background: none;
+      border: none;
+      text-align: left;
+      cursor: pointer;
+      font: inherit;
+      color: var(--kr-chatbot-text);
+    }
+
+    .mode-menu__item:hover {
+      background: #f3f4f6;
+    }
+
+    .mode-menu__item--active {
+      background: #eef1f6;
+    }
+
+    .mode-menu__label {
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    .mode-menu__desc {
+      font-size: 12px;
+    }
+
     .mic {
       width: 34px;
       height: 34px;
@@ -4478,7 +5321,10 @@ __decorate([
 ], KRChatbot.prototype, "_cacheCheckpoints", void 0);
 __decorate([
     state()
-], KRChatbot.prototype, "_debugPanelOpen", void 0);
+], KRChatbot.prototype, "_drawerOpen", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_drawerView", void 0);
 __decorate([
     state()
 ], KRChatbot.prototype, "_debugDrawerWidth", void 0);
@@ -4527,6 +5373,21 @@ __decorate([
 __decorate([
     state()
 ], KRChatbot.prototype, "_isDictating", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_mode", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_modeMenuOpened", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_showTools", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_showToolInputs", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_showConfirmationInput", void 0);
 __decorate([
     query('.panel')
 ], KRChatbot.prototype, "_panelEl", void 0);