Fix truncated URLs in web search results opening broken links

[marksftw]

When web search results are collapsed, URLs were being truncated for display but the truncated text was also used as the href. Now URLs that would be cut by truncation are converted to markdown links that preserve the full URL in the href while showing truncated display text.

Fixes #387

Summary by CodeRabbit

• Bug Fixes

  • Tool and function-call output previews now use smarter truncation that preserves plain URLs and Markdown links, keeping them clickable and improving readability.
  • Previews use cleaner ellipses and avoid cutting through links or link text.

• Notes

  • No changes to public API behavior or external integrations.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

📝 Walkthrough

Walkthrough

Replaces ad-hoc 150-character truncation in UnifiedChat tool output previews with a new helper truncateMarkdownPreservingLinks(text, maxLength) that truncates markdown while avoiding broken or partially-truncated URLs and preserving existing markdown links.

Changes

Cohort / File(s)	Summary
Markdown utility frontend/src/utils/markdown.ts	Added export function truncateMarkdownPreservingLinks(text: string, maxLength: number): string which truncates text to maxLength while preserving clickable plain URLs and existing markdown links (converts truncated plain-URL tails into proper markdown links or truncates before existing markdown links).
Preview usage in chat UI frontend/src/components/UnifiedChat.tsx	Replaced inline 150-character truncation with truncateMarkdownPreservingLinks(output, 150) in two tool output rendering code paths (toolOutput preview and tool_call_output preview).

Sequence Diagram(s)

(omitted)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 I nibble at text with a careful paw,

I lop the tail but leave the law.
Links stay whole, no broken track—
Hop, click, and follow the full-stack. 🥕🔗

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: fixing truncated URLs in web search results that were opening broken links.
Linked Issues check	✅ Passed	The PR directly addresses issue #387 by implementing a solution that preserves full URLs in href attributes while displaying truncated text.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing the truncated URL issue: a new utility function and its integration into the ToolCallRenderer component.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[greptile-apps]

Greptile Summary

Fixed truncated URLs in collapsed web search results by implementing smart truncation that preserves full URLs while showing shortened display text. The solution creates markdown links [shortened...](fullURL) when truncation would cut through a URL, and avoids breaking existing markdown links by truncating before them.

• Created truncateMarkdownPreservingLinks() utility that detects plain URLs and markdown links before truncating
• Applied the utility to tool output previews in UnifiedChat.tsx (2 locations)
• Handles edge cases: URLs inside markdown links, truncation boundaries, and multiple URLs

The implementation correctly solves the reported issue where clicking truncated URLs opened broken links.

Confidence Score: 4/5

• This PR is safe to merge with minimal risk - the fix is well-contained and solves the reported bug
• The implementation is logically sound and handles most edge cases correctly. The regex pattern for URLs has a known limitation with parentheses (already noted in previous threads), but this is unlikely to cause issues in typical web search results. The change is isolated to preview display logic and doesn't affect core functionality.
• No files require special attention

Important Files Changed

Filename	Overview
frontend/src/utils/markdown.ts	New utility function to preserve full URLs when truncating text by converting truncated URLs to markdown links; handles both plain URLs and existing markdown links correctly
frontend/src/components/UnifiedChat.tsx	Replaced simple string truncation with link-preserving truncation in two places where tool outputs are previewed

Sequence Diagram

sequenceDiagram
    participant UC as UnifiedChat
    participant TR as ToolCallRenderer
    participant TM as truncateMarkdownPreservingLinks
    participant MD as Markdown Component

    UC->>TR: Render tool output
    TR->>TR: Get output string
    alt output length > 150
        TR->>TM: truncateMarkdownPreservingLinks(output, 150)
        TM->>TM: Check if text.length <= maxLength
        TM->>TM: Find all markdown link ranges
        TM->>TM: Find all plain URLs (excluding those in markdown)
        alt Truncation falls inside plain URL
            TM->>TM: Convert to [truncated...](fullURL)
            TM-->>TR: Return markdown link
        else Truncation falls inside markdown link
            TM->>TM: Truncate before markdown link
            TM-->>TR: Return truncated text + "..."
        else Safe to truncate
            TM->>TM: Truncate at maxLength
            TM-->>TR: Return text + "..."
        end
    else output length <= 150
        TR->>TR: Use full output as preview
    end
    TR->>MD: Render preview (with preserved URLs)
    MD-->>UC: Display clickable links

Loading

[greptile-apps]

_{1 file reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[cloudflare-workers-and-pages]

Deploying maple with    Cloudflare Pages

Latest commit:	14bfe51
Status:	✅  Deploy successful!
Preview URL:	https://4a840e53.maple-ca8.pages.dev
Branch Preview URL:	https://linkfix.maple-ca8.pages.dev

View logs

[greptile-apps]

Greptile's behavior is changing!

From now on, if a review finishes with no comments, we will not post an additional "statistics" comment to confirm that our review found nothing to comment on. However, you can confirm that we reviewed your changes in the status check section.

_{This feature can be toggled off in your Code Review Settings by deselecting "Create a status check for each PR".}

[AnthonyRonning]

I think these should move to a utility file

[marksftw]

Addressed code review feedback: moved truncateMarkdownPreservingLinks function from UnifiedChat.tsx to a dedicated utility file at frontend/src/utils/markdown.ts.

[AnthonyRonning]

Great, thanks. Please rebase into a single commit since this is a tiny change and only needs to be one commit.

[marksftw]

Done. Commits squashed into one. Tested the fix.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@frontend/src/utils/markdown.ts`:
- Around line 10-43: Precompute all markdown link ranges by iterating
mdLinkRegex (/\[([^\]]*)\]\(([^)]+)\)/g) first and collect their start/end
indices, then when scanning plain URLs with urlRegex use those ranges to skip
any URL match whose index falls inside an existing markdown link (instead of
current brittle isInMarkdownLink heuristic); also reuse the same markdown link
ranges when checking truncation (so when maxLength falls inside a markdown link
range you truncate before the whole link as you do now), and ensure the urls
array only contains plain-URL matches that are not inside any md link range.

[greptile-apps]

_{2 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}