[BUG] Clicking links in announcement dialog opens two browser windows

[zml9167]

Problem (one or two sentences)

When clicking on URL links (such as GitHub, X, Discord, Reddit) in the announcement dialog that appears after clicking the version number, two identical browser windows/tabs are opened.

Context (who is affected and when)

Users of the Roo Code VSCode extension who click on links in the announcement dialog will experience duplicate browser tabs being opened.

Reproduction steps

1. Open VSCode and navigate to the Roo Code extension panel
2. Click on the version number (e.g., v3.xx.x) to trigger the announcement dialog
3. Click on any link in the dialog (GitHub, X, Discord, Reddit, etc.)
4. Observe the browser behavior

Expected result

Perhaps this is not a big problem, but for me, opening a window is enough.

Actual result

opens two browser windows

Variations tried (optional)

No response

App Version

v3.51.0

API Provider (optional)

None

Model Used (optional)

No response

Roo Code Task Links (optional)

No response

Relevant logs or errors (optional)

[zml9167]

[roomote-v0]

I've analyzed this issue and here's my proposed implementation plan:

Root Cause: In webview-ui/src/components/chat/Announcement.tsx, the SocialLink, GitHubLink, and CareersLink components use VSCodeLink (from @vscode/webview-ui-toolkit/react) with both:

1. An href attribute pointing to the external URL
2. An onClick handler that calls e.preventDefault() and sends an openExternal message via vscode.postMessage()

The problem is that VSCode webviews have built-in handling that automatically opens external href links in the browser. The e.preventDefault() call does not prevent this webview-level behavior. So when a user clicks a link, both the webview's native href handling AND the explicit openExternal postMessage open the URL, resulting in two browser tabs.

Proposed Fix: Remove the href attribute from all three link components (SocialLink, GitHubLink, CareersLink) so only the onClick -> postMessage -> vscode.env.openExternal() path is used. This ensures exactly one browser tab opens. The links will use href="#" (or no href) to maintain accessible styling while preventing the duplicate navigation.

Files to modify:

• webview-ui/src/components/chat/Announcement.tsx - Remove external URLs from href props on the three link components
• webview-ui/src/components/chat/__tests__/Announcement.spec.tsx - Update tests if needed

Please mention @roomote in a comment saying that you approve this plan, and I'll proceed with the implementation.

[zml9167]

This issue was created by AI, and it even provided a suggested Fix.

Technical Analysis

The issue is in webview-ui/src/components/chat/Announcement.tsx file. The SocialLink, GitHubLink, and CareersLink components all set both href attribute and onClick event handler:

• The href attribute triggers the default link behavior
• The onClick handler sends a message via vscode.postMessage({ type: "openExternal", url: ... }) to open the URL

Although e.preventDefault() is called in the onClick handler, the VSCodeLink component in the VSCode webview environment may still trigger the default link behavior, causing the URL to be opened twice.

---

Suggested Fix

English:
Change the href attribute to # and rely solely on the onClick event handler to open the URL via vscode.postMessage, avoiding the default link behavior being triggered twice.

---

Affected Code

File: webview-ui/src/components/chat/Announcement.tsx

Lines 91-124:

const SocialLink = ({ icon, label, href }: { icon: ReactNode; label: string; href: string }) => (
  <VSCodeLink
    href={href}  // <-- Should be href="#"
    className="inline-flex items-center gap-1"
    onClick={(e) => {
      e.preventDefault()
      vscode.postMessage({ type: "openExternal", url: href })
    }}>
    {icon}
    <span className="sr-only">{label}</span>
  </VSCodeLink>
)

const GitHubLink = ({ children }: { children?: ReactNode }) => (
  <VSCodeLink
    href="https://github.com/RooCodeInc/Roo-Code"  // <-- Should be href="#"
    onClick={(e) => {
      e.preventDefault()
      vscode.postMessage({ type: "openExternal", url: "https://github.com/RooCodeInc/Roo-Code" })
    }}>
    {children}
  </VSCodeLink>
)

const CareersLink = ({ children }: { children?: ReactNode }) => (
  <VSCodeLink
    href="https://careers.roocode.com"  // <-- Should be href="#"
    onClick={(e) => {
      e.preventDefault()
      vscode.postMessage({ type: "openExternal", url: "https://careers.roocode.com" })
    }}>
    {children}
  </VSCodeLink>
)

---

Labels

• bug
• webview
• frontend