feat(chat): add tool call visibility toggle

Add a persisted chat action toggle so users can hide noisy tool call cards while keeping normal message flow intact.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: AaronZ345

console/src/locales/en.json

@@ -3198,6 +3198,8 @@
     "newChatTooltip": "New chat",
     "searchTooltip": "Search all chats",
     "chatHistoryTooltip": "Chat history",
+    "hideToolCallsTooltip": "Hide tool calls",
+    "showToolCallsTooltip": "Show tool calls",
     "wideModeTooltip": "Wide mode",
     "normalModeTooltip": "Normal mode",
     "allChats": "All Chats",

console/src/locales/id.json

@@ -629,6 +629,8 @@
     "newChatTooltip": "Chat baru",
     "searchTooltip": "Cari semua chat",
     "chatHistoryTooltip": "Riwayat chat",
+    "hideToolCallsTooltip": "Sembunyikan panggilan alat",
+    "showToolCallsTooltip": "Tampilkan panggilan alat",
     "wideModeTooltip": "Mode lebar",
     "normalModeTooltip": "Mode normal",
     "allChats": "Semua Chat",

console/src/locales/ja.json

@@ -2612,6 +2612,8 @@
     "newChatTooltip": "新しいチャット",
     "searchTooltip": "すべてのチャットを検索",
     "chatHistoryTooltip": "チャット履歴",
+    "hideToolCallsTooltip": "ツール呼び出しを非表示",
+    "showToolCallsTooltip": "ツール呼び出しを表示",
     "wideModeTooltip": "ワイドモード",
     "normalModeTooltip": "標準モード",
     "allChats": "すべてのチャット",

console/src/locales/pt-BR.json

@@ -2856,6 +2856,8 @@
     "newChatTooltip": "Novo Chat",
     "searchTooltip": "Pesquisar Todos chats",
     "chatHistoryTooltip": "Chat history",
+    "hideToolCallsTooltip": "Hide tool calls",
+    "showToolCallsTooltip": "Show tool calls",
     "wideModeTooltip": "Modo amplo",
     "normalModeTooltip": "Modo normal",
     "allChats": "Todos Chats",

console/src/locales/ru.json

@@ -2627,6 +2627,8 @@
     "newChatTooltip": "Новый чат",
     "searchTooltip": "Поиск во всех чатах",
     "chatHistoryTooltip": "История чатов",
+    "hideToolCallsTooltip": "Скрыть вызовы инструментов",
+    "showToolCallsTooltip": "Показать вызовы инструментов",
     "wideModeTooltip": "Широкий режим",
     "normalModeTooltip": "Обычный режим",
     "allChats": "Все чаты",

console/src/locales/vi.json

@@ -645,6 +645,8 @@
     "newChatTooltip": "Cuộc trò chuyện mới",
     "searchTooltip": "Tìm kiếm tất cả cuộc trò chuyện",
     "chatHistoryTooltip": "Lịch sử trò chuyện",
+    "hideToolCallsTooltip": "Ẩn lệnh gọi công cụ",
+    "showToolCallsTooltip": "Hiện lệnh gọi công cụ",
     "allChats": "Tất cả cuộc trò chuyện",
     "createNewChat": "Tạo cuộc trò chuyện mới",
     "pinDrawer": "Ghim",

console/src/locales/zh.json

@@ -3055,6 +3055,8 @@
     "newChatTooltip": "新建聊天",
     "searchTooltip": "搜索所有聊天",
     "chatHistoryTooltip": "聊天历史",
+    "hideToolCallsTooltip": "隐藏工具调用",
+    "showToolCallsTooltip": "显示工具调用",
     "wideModeTooltip": "宽屏模式",
     "normalModeTooltip": "正常模式",
     "allChats": "全部聊天",

console/src/pages/Chat/ChatPage.coverage.test.tsx

@@ -192,7 +192,15 @@ vi.mock("./ModelSelector", () => ({
 }));
 
 vi.mock("./components/ChatActionGroup", () => ({
-  default: () => <div data-testid="action-group" />,
+  default: (props: any) => (
+    <div data-testid="action-group">
+      <button
+        data-testid="toggle-tool-calls"
+        data-show-tool-calls={String(props.showToolCalls)}
+        onClick={props.onToggleToolCalls}
+      />
+    </div>
+  ),
 }));
 
 vi.mock("./components/ChatHeaderTitle", () => ({
@@ -501,6 +509,7 @@ vi.mock("./utils", async () => {
 describe("ChatPage coverage", () => {
   beforeEach(() => {
     chatExtensions.__resetForTests();
+    localStorage.clear();
     capturedOptions = null;
     mockListProviders.mockResolvedValue([
       {
@@ -1417,6 +1426,35 @@ describe("ChatPage coverage", () => {
     expect(typeof capturedOptions.customToolRenderConfig).toBe("object");
   });
 
+  it("disables tool call rendering from the chat action toggle", async () => {
+    renderWithProviders(<ChatPage />, {
+      initialEntries: ["/chat/test-session"],
+    });
+    await screen.findByTestId("chat-ui");
+
+    expect(screen.getByTestId("toggle-tool-calls")).toHaveAttribute(
+      "data-show-tool-calls",
+      "true",
+    );
+
+    await act(async () => {
+      screen
+        .getByTestId("toggle-tool-calls")
+        .dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+
+    expect(screen.getByTestId("toggle-tool-calls")).toHaveAttribute(
+      "data-show-tool-calls",
+      "false",
+    );
+    expect(
+      capturedOptions.customToolRenderConfig.any_tool_name({
+        data: { content: [] },
+      }),
+    ).toBeNull();
+    expect(localStorage.getItem("qwenpaw_show_tool_calls")).toBe("false");
+  });
+
   // ── cards config ───────────────────────────────────────────────────────
   it("cards config has host wrappers", async () => {
     renderWithProviders(<ChatPage />, {

console/src/pages/Chat/components/ChatActionGroup/ChatActionGroup.test.tsx

@@ -77,4 +77,23 @@ describe("ChatActionGroup", () => {
     button?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
     expect(onToggleWorkspace).toHaveBeenCalledOnce();
   });
+
+  it("renders and toggles the tool call visibility button", () => {
+    const onToggleToolCalls = vi.fn();
+    renderWithProviders(
+      <ChatActionGroup
+        showToolCalls={false}
+        onToggleToolCalls={onToggleToolCalls}
+      />,
+    );
+
+    const button = document.querySelector(
+      'button[aria-label="chat.showToolCallsTooltip"]',
+    ) as HTMLButtonElement | null;
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute("aria-pressed", "false");
+
+    button?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(onToggleToolCalls).toHaveBeenCalledOnce();
+  });
 });

console/src/pages/Chat/components/ChatActionGroup/index.tsx

@@ -9,7 +9,7 @@ import {
 } from "@ant-design/icons";
 import { useTranslation } from "react-i18next";
 import { Dropdown, Flex, Tooltip } from "antd";
-import { Files } from "lucide-react";
+import { Eye, EyeOff, Files } from "lucide-react";
 import type { MenuProps } from "antd";
 import { useCreateNewSession } from "../../hooks/useCreateNewSession";
 import { useIsMobile } from "../../../../hooks/useIsMobile";
@@ -24,6 +24,8 @@ interface ChatActionGroupProps {
   workspaceOpen?: boolean;
   isWideMode?: boolean;
   onToggleWideMode?: () => void;
+  showToolCalls?: boolean;
+  onToggleToolCalls?: () => void;
 }
 
 const ChatActionGroup: React.FC<ChatActionGroupProps> = ({
@@ -33,6 +35,8 @@ const ChatActionGroup: React.FC<ChatActionGroupProps> = ({
   workspaceOpen = false,
   isWideMode = false,
   onToggleWideMode,
+  showToolCalls = true,
+  onToggleToolCalls,
 }) => {
   const { t } = useTranslation();
 
@@ -112,6 +116,50 @@ const ChatActionGroup: React.FC<ChatActionGroupProps> = ({
           />
         </Tooltip>
       )}
+      {onToggleToolCalls && (
+        <Tooltip
+          title={t(
+            showToolCalls
+              ? "chat.hideToolCallsTooltip"
+              : "chat.showToolCallsTooltip",
+          )}
+          mouseEnterDelay={0.5}
+        >
+          <IconButton
+            bordered={false}
+            aria-label={t(
+              showToolCalls
+                ? "chat.hideToolCallsTooltip"
+                : "chat.showToolCallsTooltip",
+            )}
+            aria-pressed={showToolCalls}
+            icon={
+              showToolCalls ? (
+                <Eye
+                  size={16}
+                  strokeWidth={2}
+                  style={{ width: 16, height: 16 }}
+                />
+              ) : (
+                <EyeOff
+                  size={16}
+                  strokeWidth={2}
+                  style={{ width: 16, height: 16 }}
+                />
+              )
+            }
+            style={{
+              width: 32,
+              height: 32,
+              padding: 0,
+              ...(showToolCalls
+                ? undefined
+                : { color: "var(--color-primary, #ff9d4d)" }),
+            }}
+            onClick={onToggleToolCalls}
+          />
+        </Tooltip>
+      )}
 
       {/* History + WideMode: inline when NOT compact */}
       {!isCompact && onToggleHistory && (