feat(webview): persistent NEW badge over version indicator for new announcements

[roomote]

Implements a persistent "NEW" badge over the version number on the welcome/hero screen when a new announcement triggers. Clicking the version opens the announcement modal and clears the badge. The badge persists across reloads until acknowledged.

Key changes:

• UI badge in VersionIndicator
• Welcome screen render and click handler in ChatView
• Webview <-> extension acknowledgement wiring in App and webviewMessageHandler
• Cross-session storage via lastAcknowledgedAnnouncementId in global-settings.ts and badge state from ClineProvider

Tests:

• Webview UI suite passes (webview-ui).

---

Important

Adds a persistent "NEW" badge over the version indicator for new announcements, which persists across sessions until acknowledged by the user.

• Behavior:
  • Adds a persistent "NEW" badge over the version indicator in VersionIndicator when a new announcement is available.
  • Clicking the version indicator opens the announcement modal and clears the badge.
  • Badge state persists across sessions until acknowledged.
• UI Components:
  • VersionIndicator updated to show "NEW" badge when showBadge is true.
  • ChatView and App handle badge visibility and click events to update state and notify the extension.
• State Management:
  • Uses lastAcknowledgedAnnouncementId in global-settings.ts to track badge state.
  • Updates in ClineProvider and webviewMessageHandler to manage cross-session badge persistence.

^{This description was created by for e402468. You can customize this summary. It will automatically update as commits are pushed.}

[roomote]

I reviewed my own code and found it surprisingly not terrible, which is suspicious.

[roomote]

Missing aria-label for the badge. Screen reader users won't know what "NEW" refers to. Consider adding:

Suggested change

	<span
	<span
	// The badge uses VS Code theme variables to blend with light/dark themes
	aria-label="New announcement available"
	className="absolute -top-1.5 -right-1.5 rounded-full bg-vscode-button-background text-vscode-button-foreground text-[10px] leading-none px-1.5 py-0.5 shadow ring-2 ring-vscode-editor-background select-none">

[roomote]

Is this intentional? The badge state syncs from extension state but could be overridden by local state changes. The comment suggests it's intentional to allow immediate local clearing, but this could create a race condition if the extension state updates at the same time. Consider using a more explicit state management pattern or documenting this behavior more clearly.

[roomote]

The "NEW" text is hardcoded. Could this be made configurable or use i18n for localization? Something like t('common:badge.new') would make it more flexible for international users.

[roomote]

Consider extracting these badge styles to a reusable component or at least a constant. This long className string could be:

const BADGE_STYLES = "absolute -top-1.5 -right-1.5 rounded-full bg-vscode-button-background text-vscode-button-foreground text-[10px] leading-none px-1.5 py-0.5 shadow ring-2 ring-vscode-editor-background select-none"

This would improve maintainability and reusability.

[hannesrudolph]

@roomote-agent The little "new" is handy but the placement of the version indicator seems to have gotten buggered up

[roomote]

Hi @hannesrudolph, I see the issue with the version indicator placement. Let me investigate and fix this for you.

[roomote]

Hi @hannesrudolph, I've fixed the version indicator placement issue!

The problem was that the VersionIndicator was positioned inside a nested container with its own padding and layout constraints. I moved it to be a direct child of the main welcome screen container (the div with relative positioning) to ensure proper absolute positioning.

Changes made:

• Moved VersionIndicator component from line 1833 to line 1818 in ChatView.tsx
• This places it as a direct child of the main welcome screen container
• The absolute positioning (top-2 right-3) now works correctly relative to the entire welcome area

The fix has been pushed to the PR branch and all tests are passing. CI checks are currently running and looking good so far. The version indicator should now be properly positioned in the top-right corner of the welcome screen.