@kodaris/krubble-app-components 1.0.113 → 1.0.114

package/dist/krubble-app.umd.js

@@ -5550,6 +5550,28 @@
           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'];
   /**
@@ -5624,6 +5646,25 @@
       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 = '';
@@ -5807,11 +5848,20 @@
           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 = [];
@@ -5862,6 +5912,31 @@
           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.
            *
@@ -5872,6 +5947,14 @@
            * 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;
               }
@@ -6013,6 +6096,36 @@
                   return krubbleHttp.Http.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
@@ -6267,7 +6380,12 @@
               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) {
@@ -6308,7 +6426,16 @@
               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;
@@ -6611,6 +6738,29 @@
           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
@@ -7037,22 +7187,25 @@
                   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;
@@ -7134,6 +7287,9 @@
                       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
@@ -7232,30 +7388,36 @@
           }
           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;
               }
@@ -7265,11 +7427,13 @@
               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.
@@ -7343,8 +7507,26 @@
       _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) {
@@ -7400,28 +7582,54 @@
                       }));
                       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.
@@ -7432,16 +7640,14 @@
                           // (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') {
@@ -7513,6 +7719,24 @@
               }
           });
       }
+      /**
+       * 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).
@@ -7537,6 +7761,17 @@
                   && !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) {
@@ -7556,33 +7791,107 @@
       }
       // --- 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 b `
+      <div class="mode">
+        ${this._modeMenuOpened ? b `
+          <div class="mode-menu">
+            ${CHATBOT_MODES.map((m) => b `
+              <button
+                class=${e({
+            '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>
+        ` : A}
+        <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 b `
       <div
-        class="confirmation"
+        class=${e({
+            '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
+            ? b `
+            <ol class="confirmation__list">
+              ${this._pendingActions.map((action) => b `
+                <li class="confirmation__list-item">
+                  <span class="confirmation__list-name">${action.displayName || action.toolName}</span>
+                  ${action.confirmationMessage
+                ? b `<span class="confirmation__list-desc">${action.confirmationMessage}</span>`
+                : A}
+                  ${this._showConfirmationInput && this._inlineConfirm && action.input && Object.keys(action.input).length
+                ? b `<pre class="confirmation__details-input">${JSON.stringify(action.input, null, 2)}</pre>`
+                : A}
+                </li>
+              `)}
+            </ol>
+          `
+            : b `
+            <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
+                ? b `<pre class="confirmation__details-input">${JSON.stringify(this._pendingActions[0].input, null, 2)}</pre>`
+                : A}
+          `}
         <div class="confirmation__actions">
           ${CONFIRMATION_DECISIONS.map((option, index) => b `
             <kr-button
@@ -7593,7 +7902,7 @@
               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>
           `)}
@@ -7815,26 +8124,37 @@
        * 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 b `
       <div
         class=${e({
-            'debug-drawer': true,
-            'debug-drawer--open': this._debugPanelOpen,
-            'debug-drawer--resizing': this._isDebugResizing,
+            'drawer': true,
+            'drawer--open': this._drawerOpen,
+            'drawer--resizing': this._isDebugResizing,
         })}
         style=${o({ 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"
@@ -7852,105 +8172,163 @@
             </svg>
           </button>
         </div>
-        <div class="debug-drawer__body">
-          ${this._telemetry ? b `
-            <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=${o({ 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 b `
+      <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 b `
+      ${this._telemetry ? b `
+        <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=${o({ 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>
           ` : b `
             <div class="debug-empty">No telemetry yet — send a message to populate.</div>
           `}
 
-          ${this._iterationLog.length ? b `
-            <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 ? b `
+        <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 b `
-                        <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>
-          ` : A}
+              </tbody>
+            </table>
+          </div>
         </div>
-      </div>
+          ` : A}
     `;
       }
       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 b `
       ${(this.hideToggle || this.variant === 'inline') ? A : b `
         <button
@@ -7981,7 +8359,7 @@
             'panel--opened': this.opened,
             'panel--resizing-debug': this._isDebugResizing,
         })}
-        style=${o(isDebugEnabled && this._debugPanelOpen ? { paddingRight: `${this._debugDrawerWidth}px` } : {})}
+        style=${o(contentPadding)}
         @dragenter=${this._handleDragEnter}
         @dragover=${this._handleDragOver}
         @dragleave=${this._handleDragLeave}
@@ -8054,13 +8432,35 @@
             </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 ? b `
               <button
-                class=${e({
-            'header-action': true,
-            'header-action--active': this._debugPanelOpen,
-        })}
-                @click=${this._handleToggleDebugPanel}
+                class="header-action"
+                @click=${() => this._toggleDrawer('debug')}
                 title="Debug telemetry"
               >
                 <svg
@@ -8111,141 +8511,302 @@
                 <span class="empty-text">What can I help you with?</span>
               </div>
             ` : A}
-            ${this.messages.map((msg, index) => b `
-              <div class=${e({
-            'message': true,
-            'message--user': msg.type === 'user',
-            'message--assistant': msg.type === 'assistant',
-        })}>
-                ${msg.reasoning ? b `
-                  <details class="reasoning">
-                    <summary>Thinking</summary>
-                    <div class="reasoning-content">${msg.reasoning}</div>
-                  </details>
-                ` : A}
-                ${msg.conversationFiles && msg.conversationFiles.length ? b `
-                  <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 A;
+                }
+                // 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 A;
+                }
+                // 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 A;
+                }
+                // 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 b `
-                          <button
-                            class="attachment"
-                            type="button"
-                            title=${file.niceName || 'View image'}
-                            @click=${() => this._handleFileOpen(file)}
+                  <div class=${e({
+                    'message': true,
+                    'message--user': msg.type === 'user',
+                    'message--assistant': msg.type !== 'user',
+                })}>
+                    ${msg.type === 'tool_use' ? b `
+                      <div class="tool-activity-block">
+                        <div class=${e({
+                    '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 ? b `<span class="tool-activity__input">(${inputSummary})</span>` : A}
+                        </div>
+                        ${this._showToolInputs && result?.toolResultString ? b `
+                          <div class=${e({
+                    '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
+                    ? b `\n<span class="tool-activity__more">… +${resultRemainder} lines</span>`
+                    : A}</pre>
+                          </div>
+                        ` : A}
+                      </div>
+                    ` : A}
+                    ${msg.type === 'action_decision' ? b `
+                      <div class=${e({
+                    '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'
+                    ? b `<path d="M18 6 6 18M6 6l12 12" />`
+                    : b `<path d="M20 6 9 17l-5-5" />`}
+                          </svg>
+                        </span>
+                        <span class="decision__label">${decisionVerb}${decisionTools.length ? ' ' + decisionTools.join(', ') : A}</span>
+                      </div>
+                    ` : A}
+                    ${msg.reasoning ? (this._reasoningAsMessage ? b `
+                      <div class="message-content">${msg.reasoning}</div>
+                    ` : b `
+                      <details class="reasoning">
+                        <summary>Thinking</summary>
+                        <div class="reasoning-content">${msg.reasoning}</div>
+                      </details>
+                    `) : A}
+                    ${msg.conversationFiles && msg.conversationFiles.length ? b `
+                      <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 b `
+                              <button
+                                class="attachment"
+                                type="button"
+                                title=${file.niceName || 'View image'}
+                                @click=${() => this._handleFileOpen(file)}
+                              >
+                                <img
+                                  src=${file.previewUrl || `${krubbleHttp.Http.getBaseUrl()}/api/system/conversationFile/${file.conversationFileID}/view`}
+                                  alt=${file.niceName || ''}
+                                />
+                              </button>
+                            `;
+                    }
+                    return b `
+                            <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>
+                    ` : A}
+                    ${msg.content ? b `
+                      <div class="message-content">
+                        ${msg.type === 'user'
+                    ? this._renderUserContent(msg.content)
+                    : o$1(marked.parse(msg.content, { breaks: true }))}
+                      </div>
+                    ` : A}
+                    ${msg.type === 'assistant' && this._isStreaming && msg === this.messages[this.messages.length - 1] ? b `
+                      <div class="typing">
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                      </div>
+                    ` : A}
+                    ${msg.content ? b `
+                      <button
+                        class="message-copy"
+                        title=${this._copiedIndex === index ? 'Copied' : 'Copy'}
+                        @click=${() => this._handleCopyMessage(msg.content, index)}
+                      >
+                        ${this._copiedIndex === index ? b `
+                          <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
                           >
-                            <img
-                              src=${file.previewUrl || `${krubbleHttp.Http.getBaseUrl()}/api/system/conversationFile/${file.conversationFileID}/view`}
-                              alt=${file.niceName || ''}
+                            <path d="M20 6 9 17l-5-5" />
+                          </svg>
+                        ` : b `
+                          <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          >
+                            <rect
+                              x="9"
+                              y="9"
+                              width="13"
+                              height="13"
+                              rx="2"
                             />
-                          </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>
+                    ` : A}
+                  </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 b `
-                        <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 ? b `
+                        <div class="typing">
+                          <span></span>
+                          <span></span>
+                          <span></span>
+                        </div>
+                    ` : A}
+                      ${showConfirmation ? this._renderConfirmation() : A}
+                    </div>
+              `;
         })}
-                  </div>
-                ` : A}
-                ${msg.content ? b `
-                  <div class="message-content">
-                    ${msg.type === 'user'
-            ? this._renderUserContent(msg.content)
-            : o$1(marked.parse(msg.content, { breaks: true }))}
-                  </div>
-                ` : A}
-                ${msg.type === 'assistant' && this._isStreaming && msg === this.messages[this.messages.length - 1] ? b `
-                  <div class="typing">
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                  </div>
-                ` : A}
-                ${msg.content ? b `
-                  <button
-                    class="message-copy"
-                    title=${this._copiedIndex === index ? 'Copied' : 'Copy'}
-                    @click=${() => this._handleCopyMessage(msg.content, index)}
-                  >
-                    ${this._copiedIndex === index ? b `
-                      <svg
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      >
-                        <path d="M20 6 9 17l-5-5" />
-                      </svg>
-                    ` : b `
-                      <svg
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      >
-                        <rect
-                          x="9"
-                          y="9"
-                          width="13"
-                          height="13"
-                          rx="2"
-                        />
-                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-                      </svg>
-                    `}
-                  </button>
-                ` : A}
               </div>
-            `)}
-          </div>
-        </div>
+              </div>
 
-        ${this._pendingActions.length ? this._renderConfirmation() : A}
+              ${this._pendingActions.length && !this._inlineConfirm ? this._renderConfirmation() : A}
 
-        ${this._error ? b `
-          <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 ? b `
+                <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 ? b `
           <div class="context-limit" role="alert">
             ${this._contextLimitMessage
@@ -8277,68 +8838,68 @@
           </div>
         ` : A}
 
-        <div class="footer">
-          ${this._pendingConversationFiles.length ? b `
-            <div class="composer-attachments">
-              ${c(this._pendingConversationFiles, (p) => p.localId, (p) => b `
-                <div
-                  class=${e({
+              <div class="footer">
+              ${this._pendingConversationFiles.length ? b `
+                <div class="composer-attachments">
+                  ${c(this._pendingConversationFiles, (p) => p.localId, (p) => b `
+                    <div
+                      class=${e({
             chip: true,
             'chip--doc': !p.previewUrl,
         })}
-                  title=${p.name}
-                >
-                  <div
-                    class=${e({
+                      title=${p.name}
+                    >
+                      <div
+                        class=${e({
             'chip-body': true,
             'chip-body--image': Boolean(p.previewUrl),
         })}
-                  >
-                    ${p.previewUrl
+                      >
+                        ${p.previewUrl
             ? b `<img src=${p.previewUrl} alt=${p.name} />`
             : b `
-                        <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>
           ` : A}
-          <input
-            class="file-input"
-            type="file"
-            accept=${ACCEPTED_FILE_EXTENSIONS.map((ext) => '.' + ext).join(',')}
-            multiple
-            hidden
-            @change=${this._handleFileInputChange}
-          />
-          ${this._skillMenuOpened ? this._renderSkillMenu() : A}
-          <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() : A}
+              <div class="input-wrapper">
+              <button
               class="input-plus"
               @click=${this._handlePlusClick}
-            >+</button>
-            <textarea
+              >+</button>
+              <textarea
               class="input"
               .value=${this._inputValue}
               placeholder=${this.placeholder}
@@ -8346,31 +8907,32 @@
               @input=${this._handleInputChange}
               @keydown=${this._handleKeyDown}
               @paste=${this._handlePaste}
-            ></textarea>
-            ${window.SpeechRecognition || window.webkitSpeechRecognition ? b `
-              ${this._isDictating ? b `
-                <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 ? b `
+                ${this._isDictating ? b `
+                  <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>
               ` : b `
                 <button
                   class="mic"
@@ -8396,35 +8958,32 @@
                 </button>
               `}
             ` : A}
-            ${this._isStreaming ? b `
-              <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 ? b `
+                <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>
             ` : b `
               <button
                 class=${e({
             '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'}
@@ -8443,12 +9002,12 @@
                 </svg>
               </button>
             `}
-          </div>
-        </div>
-        ${this._skillBrowseOpened ? this._renderSkillBrowse() : A}
-        ${isDebugEnabled ? this._renderDebugPanel() : A}
-      </div>
-    `;
+              </div>
+              </div>
+              ${this._skillBrowseOpened ? this._renderSkillBrowse() : A}
+              ${this._renderDrawer()}
+              </div>
+              `;
       }
   };
   exports.Chatbot.styles = i$6 `
@@ -8561,6 +9120,14 @@
       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 {
@@ -8628,16 +9195,31 @@
       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 {
@@ -8718,6 +9300,138 @@
       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,
@@ -8999,11 +9713,49 @@
       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 {
@@ -9012,8 +9764,26 @@
       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. */
@@ -9021,45 +9791,34 @@
       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;
@@ -9071,17 +9830,17 @@
 
     /* 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;
@@ -9091,7 +9850,7 @@
       z-index: 10;
     }
 
-    .debug-drawer__header {
+    .drawer__header {
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -9101,13 +9860,13 @@
       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;
@@ -9316,6 +10075,89 @@
       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;
@@ -9994,7 +10836,10 @@
   ], exports.Chatbot.prototype, "_cacheCheckpoints", void 0);
   __decorate([
       r()
-  ], exports.Chatbot.prototype, "_debugPanelOpen", void 0);
+  ], exports.Chatbot.prototype, "_drawerOpen", void 0);
+  __decorate([
+      r()
+  ], exports.Chatbot.prototype, "_drawerView", void 0);
   __decorate([
       r()
   ], exports.Chatbot.prototype, "_debugDrawerWidth", void 0);
@@ -10043,6 +10888,21 @@
   __decorate([
       r()
   ], exports.Chatbot.prototype, "_isDictating", void 0);
+  __decorate([
+      r()
+  ], exports.Chatbot.prototype, "_mode", void 0);
+  __decorate([
+      r()
+  ], exports.Chatbot.prototype, "_modeMenuOpened", void 0);
+  __decorate([
+      r()
+  ], exports.Chatbot.prototype, "_showTools", void 0);
+  __decorate([
+      r()
+  ], exports.Chatbot.prototype, "_showToolInputs", void 0);
+  __decorate([
+      r()
+  ], exports.Chatbot.prototype, "_showConfirmationInput", void 0);
   __decorate([
       e$3('.panel')
   ], exports.Chatbot.prototype, "_panelEl", void 0);