feat(webui): render markdown in generic and web-fetch tool outputs (#3469)

* feat(webui): render markdown in generic and web-fetch tool outputs

Agent and other tool call outputs were wrapped in raw <pre> blocks,
leaving markdown-formatted text (code blocks, lists, bold) as unrendered
characters in HTML exports. Route long GenericToolCall output and
WebFetchToolCall success output through MarkdownRenderer, and add
collapse/expand affordance to long generic output for readability.

Closes #2520

Co-Authored-By: Qwen-Coder <noreply@alibabacloud.com>

* fix(webui): move tool-output mask-image to inline style, disable file-link in webfetch

Tailwind's static scanner can't emit classes built from template-string
interpolation (max-h-[${n}px], [mask-image:...] with runtime values),
so the collapsed-state fade on GenericToolCall and WebFetchToolCall
output cards was not actually applied at runtime — only the inline
maxHeight was collapsing content. Move both max-height and mask-image
to inline style, and add -webkit-mask-image for Safari.

Also pass enableFileLinks={false} to MarkdownRenderer for WebFetch
output so raw fetched text keeps file-like strings (README.md, URLs
ending in .md, etc.) as literal output instead of converting them to
local workspace links.

Co-Authored-By: Qwen-Coder <noreply@alibabacloud.com>

* fix(webui): disable file-link in generic tool-call output

Align GenericToolCall markdown rendering with WebFetchToolCall by
passing enableFileLinks={false}. Without a click handler wired, file-like
strings (e.g. README.md) would render as clickable links that do nothing,
which is a misleading affordance in the tool-call display/export context.

Co-Authored-By: Qwen-Coder <noreply@alibabacloud.com>

---------

Co-authored-by: Qwen-Coder <noreply@alibabacloud.com>

packages/webui/src/components/toolcalls/WebFetchToolCall.tsx

@@ -16,6 +16,7 @@ import {
 } from './shared/index.js';
 import type { BaseToolCallProps } from './shared/index.js';
 import { getToolDisplayLabel } from './labelUtils.js';
+import { MarkdownRenderer } from '../messages/MarkdownRenderer/MarkdownRenderer.js';
 
 type WebVariant = 'fetch' | 'search';
 
@@ -70,24 +71,28 @@ const OutputCard: FC<{
             OUT
           </div>
           <div
-            className={`whitespace-pre-wrap break-words m-0 p-1 overflow-hidden ${
-              !isExpanded && isLongContent
-                ? `max-h-[${COLLAPSED_HEIGHT}px] [mask-image:linear-gradient(to_bottom,var(--app-primary-background)_80px,transparent_${COLLAPSED_HEIGHT}px)]`
-                : ''
+            className={`break-words m-0 p-1 overflow-hidden ${
+              isError ? 'whitespace-pre-wrap' : ''
             }`}
             style={
               !isExpanded && isLongContent
-                ? { maxHeight: `${COLLAPSED_HEIGHT}px` }
+                ? {
+                    maxHeight: `${COLLAPSED_HEIGHT}px`,
+                    maskImage: `linear-gradient(to bottom, var(--app-primary-background) 80px, transparent ${COLLAPSED_HEIGHT}px)`,
+                    WebkitMaskImage: `linear-gradient(to bottom, var(--app-primary-background) 80px, transparent ${COLLAPSED_HEIGHT}px)`,
+                  }
                 : undefined
             }
           >
-            <pre
-              className={`m-0 overflow-hidden font-mono text-[0.85em] ${
-                isError ? 'text-[#c74e39]' : ''
-              }`}
-            >
-              {content}
-            </pre>
+            {isError ? (
+              <pre className="m-0 overflow-hidden font-mono text-[0.85em] text-[#c74e39]">
+                {content}
+              </pre>
+            ) : (
+              <div className="text-[0.85em]">
+                <MarkdownRenderer content={content} enableFileLinks={false} />
+              </div>
+            )}
           </div>
         </div>