#8880: feat(ui): make URLs clickable in tool output
app: web-ui
stale
Cluster:
UI Enhancements and Fixes
## Fixes
Closes #8812
## What
Makes URLs in tool output clickable in the chat UI while preserving safe HTML rendering.
## Why
Tool output currently renders URLs as plain text, which reduces usability and makes responses harder to interact with. Since tool output may contain arbitrary text, linkification must be handled safely to avoid XSS risks.
## How
- Added a new `linkifyUrls` helper that:
- Escapes all HTML characters in the input text
- Converts `http` and `https` URLs into clickable links
- Updated tool card rendering to apply URL linkification for:
- Collapsed previews
- Inline tool output
- Uses `unsafeHTML` only with fully escaped and controlled HTML content
- Added unit tests covering:
- HTML escaping
- Single and multiple URLs
- URLs with paths and query parameters
- Mixed text and HTML content
- Non-HTTP URLs (ensuring they are not linkified)
## Testing
- Ran tests locally on Windows
- Verified URLs render as clickable links in tool card previews and inline output
- Confirmed HTML is safely escaped and existing behavior remains unchanged
<!-- greptile_comment -->
<h2>Greptile Overview</h2>
<h3>Greptile Summary</h3>
This PR adds URL linkification for tool result text in the chat UI by introducing a `linkifyUrls` helper (escape-then-linkify) and rendering tool output/previews via `unsafeHTML` with the escaped/linkified string. Unit tests were added to validate escaping and basic URL matching.
Overall the approach keeps XSS exposure low by escaping before injecting HTML, but the current URL matching is fairly permissive and may produce broken anchors in common prose (trailing punctuation). Also, switching from text rendering to HTML rendering can change how whitespace/newlines display, which can impact readability of multi-line tool output unless the containers preserve `pre-wrap` or the helper converts newlines.
<h3>Confidence Score: 4/5</h3>
- This PR looks safe to merge; main risk is minor UX regressions in link parsing/rendering rather than security issues.
- The helper escapes HTML before linkification and uses a conservative `http/https`-only regex, which keeps XSS risk low. The remaining concerns are mostly about correctness/usability: URL regex may include trailing punctuation, and HTML rendering may alter whitespace/newline display in tool output.
- ui/src/ui/chat/tool-helpers.ts and ui/src/ui/chat/tool-cards.ts
<!-- greptile_other_comments_section -->
<sub>(3/5) Reply to the agent's comments like "Can you suggest a fix for this @greptileai?" or ask follow-up questions!</sub>
<!-- /greptile_comment -->
Most Similar PRs
#9248: Fix: Webchat UI goes grey/unresponsive after Slack message tool calls
by vishaltandale00 · 2026-02-05
78.5%
#6819: fix(tui): handle unstructured tool results and errors in tool execu...
by TreyDong · 2026-02-02
78.3%
#17448: ui: make tool cards collapsible with inline expansion
by karimStekelenburg · 2026-02-15
77.6%
#16733: fix(ui): avoid injected newlines when tool output is hidden
by jp117 · 2026-02-15
77.5%
#15204: fix(ui): preserve angle-bracketed text in chat
by bufordtjustice2918 · 2026-02-13
77.1%
#21042: fix(ui): render images in tool result messages
by Mellowambience · 2026-02-19
77.1%
#4269: fix: support tool result image format in Control UI
by bobcyw · 2026-01-30
76.3%
#10996: fix(control-ui): hide tool call blocks when thinking/working toggle...
by Annaxiebot · 2026-02-07
75.3%
#20405: feat(ui): KaTeX math rendering, collapsible tool cards, image attac...
by ayaanngandhi · 2026-02-18
75.3%
#8353: fix(ui): display tool calls during webchat streaming
by MarvinDontPanic · 2026-02-03
73.9%