Improve the formatting of tool calls, show thinking, treat Reasoning and Thinking as the same thing (sorry Kant) (#7626)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

ui/desktop/src/components/GooseMessage.tsx

@@ -5,7 +5,7 @@ import MarkdownContent from './MarkdownContent';
 import ToolCallWithResponse from './ToolCallWithResponse';
 import {
   getTextAndImageContent,
-  getReasoningContent,
+  getThinkingContent,
   getToolRequests,
   getToolResponses,
   getToolConfirmationContent,
@@ -48,7 +48,7 @@ export default function GooseMessage({
   const contentRef = useRef<HTMLDivElement | null>(null);
 
   let { textContent, imagePaths } = getTextAndImageContent(message);
-  const reasoningContent = getReasoningContent(message);
+  const thinkingContent = getThinkingContent(message);
 
   const splitChainOfThought = (text: string): { displayText: string; cotText: string | null } => {
     const regex = /<think>([\s\S]*?)<\/think>/i;
@@ -131,26 +131,16 @@ export default function GooseMessage({
   return (
     <div className="goose-message flex w-[90%] justify-start min-w-0">
       <div className="flex flex-col w-full min-w-0">
-        {reasoningContent && (
-          <details className="mb-2">
-            <summary className="cursor-pointer text-xs text-textSubtle select-none">
-              Show reasoning
-            </summary>
-            <div className="mt-2 text-sm">
-              <MarkdownContent content={reasoningContent} />
-            </div>
-          </details>
+        {thinkingContent && (
+          <div className="mb-2 text-xs text-gray-400/70 italic">
+            <MarkdownContent content={thinkingContent} />
+          </div>
         )}
 
         {cotText && (
-          <details className="bg-background-secondary border border-border-primary rounded p-2 mb-2">
-            <summary className="cursor-pointer text-sm text-text-secondary select-none">
-              Show thinking
-            </summary>
-            <div className="mt-2">
-              <MarkdownContent content={cotText} />
-            </div>
-          </details>
+          <div className="mb-2 text-sm text-gray-400 italic">
+            <MarkdownContent content={cotText} />
+          </div>
         )}
 
         {(displayText.trim() || imagePaths.length > 0) && (