feat(web): Add Linear issue link card UI for chat responses

[msukkari]

Overview

When Ask Sourcebot generates a response that references a Linear issue (i.e., a linear.app link), the link now renders as a rich card-style UI instead of a plain markdown hyperlink.

Changes

• Add Linear logo SVG asset (packages/web/public/linear.svg) - Using the official Linear logomark with currentColor for theme support
• Create LinearIssueCard component (packages/web/src/features/chat/components/chatThread/linearIssueCard.tsx) - Card-style UI showing:
  • Linear logo
  • Issue identifier (e.g., SOU-818) in monospace font
  • Humanized title extracted from URL slug
  • External link icon
  • Opens in new tab on click
  • Styled with border, muted background, rounded corners, and hover state
• Add custom anchor renderer to MarkdownRenderer - Detects Linear issue URLs with pattern https://linear.app/<org>/issue/<IDENTIFIER>/<slug> and renders them as cards

Screenshots

Linear Issue Card Rendered in Chat

Linear issue card rendered in chat

Card Details (Zoomed)

Zoomed view showing Linear logo, identifier, title, and external link icon

Hover State

Card hover state showing the full Linear URL

Acceptance Criteria

• Linear issue links in chat responses render as a styled card/chip (not a plain hyperlink)
• Card shows: Linear logo, issue identifier (e.g., SOU-818), and humanized title
• Card opens in a new tab on click
• Fallback to a regular link if URL parsing fails
• Works in both light and dark mode (logo uses dark:invert)
• Non-Linear links are unaffected (rendered with default new-tab behavior)

Testing Notes

To test with an LLM, add an Anthropic model to your config.json:

{
    "models": [
        {
            "provider": "anthropic",
            "model": "claude-sonnet-4-20250514",
            "displayName": "Claude Sonnet 4"
        }
    ]
}

And ensure ANTHROPIC_API_KEY is set in your environment or .env.development.local.

Fixes SOU-823

_{To show artifacts inline, enable in settings.}

Linear Issue: SOU-823

  

Summary by CodeRabbit

• New Features
  • Linear issue links in chat responses now display as interactive rich cards with the Linear logo, issue identifier, and title, providing better visibility and context compared to plain hyperlinks.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ec3660fa-b013-4ac3-8ca3-2b9cdc670bba

📥 Commits

Reviewing files that changed from the base of the PR and between afbe045 and e8a04ed.

⛔ Files ignored due to path filters (1)

• packages/web/public/linear.svg is excluded by !**/*.svg

📒 Files selected for processing (3)

• CHANGELOG.md
• packages/web/src/features/chat/components/chatThread/linearIssueCard.tsx
• packages/web/src/features/chat/components/chatThread/markdownRenderer.tsx

---

Walkthrough

This PR introduces a feature that displays Linear issue links in chat responses as rich card-style UI components with Linear logo, identifier, and title instead of plain hyperlinks. Three files are modified: CHANGELOG.md documents the feature, a new LinearIssueCard component renders the card UI, and the markdown renderer detects Linear issue URLs and renders them using the new component.

Changes

Cohort / File(s)	Summary
Documentation CHANGELOG.md	Added entry documenting new Linear issue card display feature in the Unreleased section.
New Component packages/web/src/features/chat/components/chatThread/linearIssueCard.tsx	New React component that renders Linear issue links as styled card UI with logo, issue identifier, title, and external link icon.
Markdown Integration packages/web/src/features/chat/components/chatThread/markdownRenderer.tsx	Enhanced markdown renderer with Linear issue URL regex pattern detection; routes matching URLs to LinearIssueCard component instead of standard external links.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• fix(web): preserve angle-bracketed text in chat user questions #932: Modifies the same markdownRenderer.tsx component's HTML handling—changes to anchor element rendering or props may interact with the new LinearIssueCard integration logic.

Suggested reviewers

• brendan-kellam

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'feat(web): Add Linear issue link card UI for chat responses' directly and clearly describes the main change: adding a card-style UI component for Linear issue links in chat responses.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch cursor/SOU-823-linear-issue-link-cards-681e

---

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.}