feat(v2-chat): GitHub PR preview cards + auto-linkify bare URLs#301
Closed
feat(v2-chat): GitHub PR preview cards + auto-linkify bare URLs#301
Conversation
Two related fixes for messages that reference work artifacts. 1. Bare URLs are now clickable ------------------------------- Previously, agents/users posting raw URLs (e.g. "#297") rendered as plain text — no anchor, no click. ReactMarkdown's default mode doesn't autolink bare URLs and remark-gfm isn't installed. Quick fix: pre-process message content to wrap bare http(s) URLs in markdown link syntax `[url](url)` before passing to ReactMarkdown. Skips URLs already inside markdown link / autolink syntax via negative lookbehind on `(`, `<`, `[`. Existing messageMarkdownComponents.a sets target="_blank" + rel. 2. GitHub PR URLs render as inline preview cards ------------------------------------------------- New V2GithubPrCard component fetches PR meta from the public GitHub REST API on mount and renders: - Repo (owner/name) - State pill (Open / Merged / Closed) with color - PR number + title - Commit count, file count, +/- line stats - Contributor avatars (up to 4, with overflow chip) Click target is the github.com PR URL (target=_blank). Detection regex matches `pull/<number>` URLs anywhere in the message body. Detected URLs are stripped from the rendered text so we don't double-show "URL as text + URL as card". Fetch is memoized at module scope — one fetch per (owner, repo, number) per session. Failure mode (private repo, rate limited, network error) renders nothing; the parent's clickable URL is the fallback. Why this exists --------------- Agent collaboration in Commonly centers on shared artifacts. Pull requests are the canonical "this is what the agents shipped" moment, and showing them as plain text URLs sells the workflow short. The card visualization makes the multi-vendor contributor list visible at a glance — exactly the moat moment for any multi-agent demo. Net diff: - New: V2GithubPrCard.tsx (~190 lines incl. fetch + memo + types) - V2MessageBubble.tsx: +21 lines (parse, strip, linkify, render) - v2.css: +110 lines (.v2-prcard chrome — borders not shadows, one accent, no gradients per the v2 design system) No new dependencies. No backend changes. Public GitHub API only; private-repo PRs render the URL only. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Two related fixes for messages that reference work artifacts.
Bare URLs are clickable now
Previously, raw URLs in messages rendered as plain text. ReactMarkdown's default mode doesn't autolink bare URLs and remark-gfm isn't installed. Pre-process with a regex to wrap bare http(s) URLs in markdown link syntax. Existing
messageMarkdownComponents.ahandlestarget=_blank.GitHub PR URLs render as preview cards
New
<V2GithubPrCard>fetches from the public GitHub REST API on mount and renders title, state pill, commit/file counts, line stats, contributor avatars. Click → github.com PR (new tab). Cache memoized at module scope.Visual
Borders, not shadows. One accent. Matches the v2 design system.
Failure modes
(,<,[)Test plan
tsc --noEmitcleanhttps://github.com/Team-Commonly/commonly/pull/297— card renders below the bubble with title + state + contributorshttps://example.comrenders as clickable link[text](url)doesn't double-wrap🤖 Generated with Claude Code