feat(release-notes): add release notes feature with modal and button

Add comprehensive release notes functionality including a modal for displaying version changes, an auto-checker for unviewed releases, a manual button in settings, and build-time generation from CHANGELOG.md. Includes new components, types, hooks, internationalization support, and Storybook stories for testing.

Author: hassoncs

.changeset/nine-moments-rule.md

@@ -0,0 +1,5 @@
+---
+"kilo-code": minor
+---
+
+Add a button to view the latest release notes to the extension

.kilocode/rules/reactRules.md

@@ -0,0 +1,60 @@
+// kilocode_change - new file: Storybook story for Release Notes Modal component
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { ReleaseNotesModal } from "@/components/release-notes/ReleaseNotesModal"
+import { sampleReleaseNotes } from "./sampleReleaseNotes"
+
+const meta = {
+	title: "Components/ReleaseNotesModal",
+	component: ReleaseNotesModal,
+	argTypes: {
+		isOpen: {
+			control: { type: "boolean" },
+		},
+		loading: {
+			control: { type: "boolean" },
+		},
+		currentVersion: {
+			control: { type: "text" },
+		},
+	},
+	parameters: {
+		disableChromaticDualThemeSnapshot: true,
+	},
+	args: {
+		isOpen: true,
+		currentVersion: "4.106.0",
+		releases: sampleReleaseNotes,
+		loading: false,
+		onClose: () => console.log("Modal closed"),
+		onMarkAsViewed: (version: string) => console.log("Version marked as viewed:", version),
+	},
+} satisfies Meta<typeof ReleaseNotesModal>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		releases: sampleReleaseNotes,
+	},
+}
+
+export const SingleRelease: Story = {
+	args: {
+		releases: [sampleReleaseNotes[0]],
+	},
+}
+
+export const Loading: Story = {
+	args: {
+		releases: [],
+		loading: true,
+	},
+}
+
+export const EmptyReleases: Story = {
+	args: {
+		releases: [],
+		loading: false,
+	},
+}

apps/storybook/stories/ReleaseNotesModal.stories.tsx

@@ -0,0 +1,51 @@
+// kilocode_change - new file: Storybook story for Show Release Notes Button Inner component
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { fn } from "storybook/test"
+import { ShowReleaseNotesButtonInner } from "@/components/release-notes/ShowReleaseNotesButtonInner"
+import { Bell } from "lucide-react"
+
+const meta = {
+	title: "Components/ShowReleaseNotesButton",
+	component: ShowReleaseNotesButtonInner,
+	parameters: {
+		layout: "centered",
+	},
+	decorators: [
+		(Story) => (
+			<div className="p-4">
+				<Story />
+			</div>
+		),
+	],
+	argTypes: {
+		buttonText: {
+			control: { type: "text" },
+		},
+		showBadge: {
+			control: { type: "boolean" },
+		},
+		className: {
+			control: { type: "text" },
+		},
+	},
+	args: {
+		onClick: fn(),
+	},
+} satisfies Meta<typeof ShowReleaseNotesButtonInner>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		buttonText: "View Release Notes",
+		showBadge: false,
+	},
+}
+
+export const WithBadge: Story = {
+	args: {
+		buttonText: "View Release Notes",
+		showBadge: true,
+	},
+}

apps/storybook/stories/ShowReleaseNotesButton.stories.tsx

@@ -0,0 +1,39 @@
+// kilocode_change - new file: Sample release notes data for Storybook testing
+import { ReleaseNote } from "@roo-code/types"
+
+export const sampleReleaseNotes: ReleaseNote[] = [
+	{
+		version: "4.106.0",
+		changes: [
+			{
+				description: "Preliminary support for native tool calling (a.k.a native function calling) was added",
+				prNumber: 2833,
+				commitHash: "0b8ef46",
+				author: "mcowger",
+			},
+			{
+				description: "CMD-I now invokes the agent so you can give it more complex prompts",
+				prNumber: 3050,
+				commitHash: "357d438",
+				author: "markijbema",
+			},
+		],
+	},
+	{
+		version: "4.105.0",
+		changes: [
+			{
+				description: "Improve the edit chat area to allow context and file drag and drop when editing messages",
+				prNumber: 3005,
+				commitHash: "b87ae9c",
+				author: "kevinvandijk",
+			},
+			{
+				description: "A warning is now shown when the webview memory usage crosses 90% of the limit",
+				prNumber: 3046,
+				commitHash: "1bd934f",
+				author: "chrarnoldus",
+			},
+		],
+	},
+]

apps/storybook/stories/sampleReleaseNotes.tsx

@@ -175,6 +175,7 @@ export const globalSettingsSchema = z.object({
 	customSupportPrompts: customSupportPromptsSchema.optional(),
 	enhancementApiConfigId: z.string().optional(),
 	dismissedNotificationIds: z.string().array().optional(), // kilocode_change
+	lastViewedReleaseVersion: z.string().optional(), // kilocode_change
 	commitMessageApiConfigId: z.string().optional(), // kilocode_change
 	terminalCommandApiConfigId: z.string().optional(), // kilocode_change
 	ghostServiceSettings: ghostServiceSettingsSchema, // kilocode_change

packages/types/src/global-settings.ts

@@ -25,6 +25,7 @@ export * from "./type-fu.js"
 export * from "./vscode.js"
 export * from "./kilocode/kilocode.js"
 export * from "./kilocode/native-function-calling.js"
+export * from "./release-notes.js" // kilocode_change
 export * from "./usage-tracker.js" // kilocode_change
 
 export * from "./providers/index.js"

packages/types/src/index.ts

@@ -0,0 +1,17 @@
+// kilocode_change - new file
+export interface ReleaseItem {
+	description: string
+	prNumber?: number
+	commitHash?: string
+	author?: string
+}
+
+export interface ReleaseNote {
+	version: string
+	changes: ReleaseItem[]
+}
+
+export interface ReleaseData {
+	currentVersion: string
+	releases: ReleaseNote[]
+}

packages/types/src/release-notes.ts

@@ -360,6 +360,7 @@ export type ExtensionState = Pick<
 	| "commitMessageApiConfigId" // kilocode_change
 	| "terminalCommandApiConfigId" // kilocode_change
 	| "dismissedNotificationIds" // kilocode_change
+	| "lastViewedReleaseVersion" // kilocode_change
 	| "ghostServiceSettings" // kilocode_change
 	| "autoPurgeEnabled" // kilocode_change
 	| "autoPurgeDefaultRetentionDays" // kilocode_change