Skip to content

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

Draft
msukkari wants to merge 2 commits intomainfrom
cursor/SOU-823-linear-issue-link-cards-681e
Draft

feat(web): Add Linear issue link card UI for chat responses#1060
msukkari wants to merge 2 commits intomainfrom
cursor/SOU-823-linear-issue-link-cards-681e

Conversation

@msukkari
Copy link
Copy Markdown
Contributor

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)

Fixes SOU-823

Linear Issue: SOU-823

Open in Web Open in Cursor 

- Add Linear logo SVG asset
- Create LinearIssueCard component with card-style UI showing:
  - Linear logo
  - Issue identifier (e.g. SOU-818) in monospace font
  - Humanized title from URL slug
  - External link icon
- Add custom anchor renderer to MarkdownRenderer that detects
  Linear issue URLs and renders them as cards instead of plain links
- Regular links continue to work normally with new-tab behavior

Co-authored-by: Michael Sukkarieh <msukkari@users.noreply.github.com>
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Mar 28, 2026

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ae2127d5-106f-4e15-aa38-80b58d405723

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 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

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

Co-authored-by: Michael Sukkarieh <msukkari@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants