feat: add toggle to show/hide thinking and tool call messages

- Add showThinkingAndTools preference to ChatContext (default false, persisted in localStorage)
- Filter thinking and tool_call messages in MessageList based on preference
- Add toggle switch in Settings > Other panel

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

frontend/src/routes/SettingsPage.tsx

@@ -5,6 +5,7 @@ import type { PromptFile } from "../api/prompts";
 import * as settingsApi from "../api/settings";
 import { useAvatars } from "../context/AvatarContext";
 import { useBootstrap } from "../context/BootstrapContext";
+import { useChatContext } from "../context/ChatContext";
 import type { AgentToolInfo, EnvironmentInfo, EnvironmentToolsInfo, ExtensionInfo, McpServerInfo, RuntimeInfo, SettingsPaneId, SkillInfo } from "../types/events";
 import type { McpToolInfo } from "../types/events";
 import { renderMarkdown } from "../utils/markdown";
@@ -309,6 +310,7 @@ function McpToolItem({
 export function SettingsPage() {
 	const { markRouteReady } = useBootstrap();
 	const { updateAvatars } = useAvatars();
+	const { showThinkingAndTools, toggleShowThinkingAndTools } = useChatContext();
 	const [activePane, setActivePane] = useState<SettingsPaneId>("prompt");
 	const [systemPrompt, setSystemPrompt] = useState("");
 	const [systemPromptPath, setSystemPromptPath] = useState("");
@@ -1348,6 +1350,23 @@ export function SettingsPage() {
 									<p className={styles.fieldHint}>
 										留空则不显示对应头像。仅支持 http / https 图片链接。
 									</p>
+									<div className={styles.field}>
+										<span className={styles.fieldLabel}>显示思考过程与工具调用</span>
+										<label className={styles.skillToggle}>
+											<input
+												type="checkbox"
+												checked={showThinkingAndTools}
+												onChange={toggleShowThinkingAndTools}
+											/>
+											<span className={styles.skillToggleUi} aria-hidden />
+											<span className={styles.skillToggleLabel}>
+												{showThinkingAndTools ? "已开启" : "已关闭"}
+											</span>
+										</label>
+										<p className={styles.fieldHint}>
+											开启后在对话中显示 AI 的思考过程和工具调用详情，默认关闭。
+										</p>
+									</div>
 								</div>
 								{statusText && activePane === "other" ? (
 									<div className={`${styles.status} ${statusClass}`}>{statusText}</div>