openclaw · aleiby · Feb 18, 2026
diff --git a/ui/src/i18n/locales/en.ts b/ui/src/i18n/locales/en.ts
@@ -104,6 +104,7 @@ export const en: TranslationMap = {
     disconnected: "Disconnected from gateway.",
     refreshTitle: "Refresh chat data",
     thinkingToggle: "Toggle assistant thinking/working output",
+    toolUseToggle: "Toggle tool use messages",
     focusToggle: "Toggle focus mode (hide sidebar + page header)",
     onboardingDisabled: "Disabled during onboarding",
   },

diff --git a/ui/src/ui/app-gateway.node.test.ts b/ui/src/ui/app-gateway.node.test.ts
@@ -52,6 +52,7 @@ function createHost() {
       theme: "system",
       chatFocusMode: false,
       chatShowThinking: true,
+      chatShowToolUse: true,
       splitRatio: 0.6,
       navCollapsed: false,
       navGroupsCollapsed: {},

diff --git a/ui/src/ui/app-render.helpers.ts b/ui/src/ui/app-render.helpers.ts
@@ -90,8 +90,10 @@ export function renderChatControls(state: AppViewState) {
     mainSessionKey,
   );
   const disableThinkingToggle = state.onboarding;
+  const disableToolUseToggle = state.onboarding;
   const disableFocusToggle = state.onboarding;
   const showThinking = state.onboarding ? false : state.settings.chatShowThinking;
+  const showToolUse = state.onboarding ? false : state.settings.chatShowToolUse;
   const focusActive = state.onboarding ? true : state.settings.chatFocusMode;
   // Refresh icon
   const refreshIcon = html`
@@ -209,6 +211,23 @@ export function renderChatControls(state: AppViewState) {
       >
         ${icons.brain}
       </button>
+      <button
+        class="btn btn--sm btn--icon ${showToolUse ? "active" : ""}"
+        ?disabled=${disableToolUseToggle}
+        @click=${() => {
+          if (disableToolUseToggle) {
+            return;
+          }
+          state.applySettings({
+            ...state.settings,
+            chatShowToolUse: !state.settings.chatShowToolUse,
+          });
+        }}
+        aria-pressed=${showToolUse}
+        title=${disableToolUseToggle ? t("chat.onboardingDisabled") : t("chat.toolUseToggle")}
+      >
+        ${icons.wrench}
+      </button>
       <button
         class="btn btn--sm btn--icon ${focusActive ? "active" : ""}"
         ?disabled=${disableFocusToggle}

diff --git a/ui/src/ui/app-render.ts b/ui/src/ui/app-render.ts
@@ -96,6 +96,7 @@ export function renderApp(state: AppViewState) {
   const isChat = state.tab === "chat";
   const chatFocus = isChat && (state.settings.chatFocusMode || state.onboarding);
   const showThinking = state.onboarding ? false : state.settings.chatShowThinking;
+  const showToolUse = state.onboarding ? false : state.settings.chatShowToolUse;
   const assistantAvatarUrl = resolveAssistantAvatarUrl(state);
   const chatAvatarUrl = state.chatAvatarUrl ?? assistantAvatarUrl ?? null;
   const configValue =
@@ -808,6 +809,7 @@ export function renderApp(state: AppViewState) {
                 },
                 thinkingLevel: state.chatThinkingLevel,
                 showThinking,
+                showToolUse,
                 loading: state.chatLoading,
                 sending: state.chatSending,
                 compactionStatus: state.compactionStatus,

diff --git a/ui/src/ui/app-settings.test.ts b/ui/src/ui/app-settings.test.ts
@@ -16,6 +16,7 @@ const createHost = (tab: Tab): SettingsHost => ({
     theme: "system",
     chatFocusMode: false,
     chatShowThinking: true,
+    chatShowToolUse: true,
     splitRatio: 0.6,
     navCollapsed: false,
     navGroupsCollapsed: {},

diff --git a/ui/src/ui/chat/grouped-render.ts b/ui/src/ui/chat/grouped-render.ts
@@ -92,7 +92,7 @@ export function renderStreamingGroup(
             content: [{ type: "text", text }],
             timestamp: startedAt,
           },
-          { isStreaming: true, showReasoning: false },
+          { isStreaming: true, showReasoning: false, showToolUse: true },
           onOpenSidebar,
         )}
         <div class="chat-group-footer">
@@ -109,6 +109,7 @@ export function renderMessageGroup(
   opts: {
     onOpenSidebar?: (content: string) => void;
     showReasoning: boolean;
+    showToolUse?: boolean;
     assistantName?: string;
     assistantAvatar?: string | null;
   },
@@ -141,6 +142,7 @@ export function renderMessageGroup(
             {
               isStreaming: group.isStreaming && index === group.messages.length - 1,
               showReasoning: opts.showReasoning,
+              showToolUse: opts.showToolUse ?? true,
             },
             opts.onOpenSidebar,
           ),
@@ -218,7 +220,7 @@ function renderMessageImages(images: ImageBlock[]) {
 
 function renderGroupedMessage(
   message: unknown,
-  opts: { isStreaming: boolean; showReasoning: boolean },
+  opts: { isStreaming: boolean; showReasoning: boolean; showToolUse: boolean },
   onOpenSidebar?: (content: string) => void,
 ) {
   const m = message as Record<string, unknown>;
@@ -253,10 +255,14 @@ function renderGroupedMessage(
     .join(" ");
 
   if (!markdown && hasToolCards && isToolResult) {
+    if (!opts.showToolUse) {
+      return nothing;
+    }
     return html`${toolCards.map((card) => renderToolCardSidebar(card, onOpenSidebar))}`;
   }
 
-  if (!markdown && !hasToolCards && !hasImages) {
+  const visibleToolCards = hasToolCards && opts.showToolUse;
+  if (!markdown && !visibleToolCards && !hasImages) {
     return nothing;
   }
 
@@ -276,7 +282,7 @@ function renderGroupedMessage(
           ? html`<div class="chat-text" dir="${detectTextDirection(markdown)}">${unsafeHTML(toSanitizedMarkdownHtml(markdown))}</div>`
           : nothing
       }
-      ${toolCards.map((card) => renderToolCardSidebar(card, onOpenSidebar))}
+      ${opts.showToolUse ? toolCards.map((card) => renderToolCardSidebar(card, onOpenSidebar)) : nothing}
     </div>
   `;
 }
diff --git a/ui/src/ui/storage.ts b/ui/src/ui/storage.ts
@@ -11,6 +11,7 @@ export type UiSettings = {
   theme: ThemeMode;
   chatFocusMode: boolean;
   chatShowThinking: boolean;
+  chatShowToolUse: boolean;
   splitRatio: number; // Sidebar split ratio (0.4 to 0.7, default 0.6)
   navCollapsed: boolean; // Collapsible sidebar state
   navGroupsCollapsed: Record<string, boolean>; // Which nav groups are collapsed
@@ -31,6 +32,7 @@ export function loadSettings(): UiSettings {
     theme: "system",
     chatFocusMode: false,
     chatShowThinking: true,
+    chatShowToolUse: true,
     splitRatio: 0.6,
     navCollapsed: false,
     navGroupsCollapsed: {},
@@ -67,6 +69,10 @@ export function loadSettings(): UiSettings {
         typeof parsed.chatShowThinking === "boolean"
           ? parsed.chatShowThinking
           : defaults.chatShowThinking,
+      chatShowToolUse:
+        typeof parsed.chatShowToolUse === "boolean"
+          ? parsed.chatShowToolUse
+          : defaults.chatShowToolUse,
       splitRatio:
         typeof parsed.splitRatio === "number" &&
         parsed.splitRatio >= 0.4 &&

diff --git a/ui/src/ui/views/chat.test.ts b/ui/src/ui/views/chat.test.ts
@@ -19,6 +19,7 @@ function createProps(overrides: Partial<ChatProps> = {}): ChatProps {
     onSessionKeyChange: () => undefined,
     thinkingLevel: null,
     showThinking: false,
+    showToolUse: true,
     loading: false,
     sending: false,
     canAbort: false,

diff --git a/ui/src/ui/views/chat.ts b/ui/src/ui/views/chat.ts
@@ -26,6 +26,7 @@ export type ChatProps = {
   onSessionKeyChange: (next: string) => void;
   thinkingLevel: string | null;
   showThinking: boolean;
+  showToolUse: boolean;
   loading: boolean;
   sending: boolean;
   canAbort?: boolean;
@@ -252,6 +253,7 @@ export function renderChat(props: ChatProps) {
             return renderMessageGroup(item, {
               onOpenSidebar: props.onOpenSidebar,
               showReasoning,
+              showToolUse: props.showToolUse,
               assistantName: props.assistantName,
               assistantAvatar: assistantIdentity.avatar,
             });
@@ -504,7 +506,7 @@ function buildChatItems(props: ChatProps): Array<ChatItem | MessageGroup> {
       continue;
     }
 
-    if (!props.showThinking && normalized.role.toLowerCase() === "toolresult") {
+    if (!props.showToolUse && normalized.role.toLowerCase() === "toolresult") {
       continue;
     }
 
@@ -514,7 +516,7 @@ function buildChatItems(props: ChatProps): Array<ChatItem | MessageGroup> {
       message: msg,
     });
   }
-  if (props.showThinking) {
+  if (props.showToolUse) {
     for (let i = 0; i < tools.length; i++) {
       items.push({
         kind: "message",