@pheem49/mint 1.16.0 → 1.18.0

package/src/renderer/shared/components/{ModalErrorBoundary.tsx → app/ModalErrorBoundary.tsx}

@@ -74,10 +74,10 @@ export default class ModalErrorBoundary extends React.Component<Props, State> {
             <div
               style={{
                 fontSize: '0.75rem',
-                color: '#ef4444',
-                background: 'rgba(239, 68, 68, 0.1)',
+                color: 'var(--status-error, #ef4444)',
+                background: 'color-mix(in srgb, var(--status-error, #ef4444) 12%, transparent)',
                 padding: '6px 12px',
-                borderRadius: 6,
+                borderRadius: 'var(--radius-xs, 6px)',
                 maxWidth: 460,
                 wordBreak: 'break-word',
               }}
@@ -91,10 +91,10 @@ export default class ModalErrorBoundary extends React.Component<Props, State> {
               onClick={this.handleRetry}
               style={{
                 padding: '8px 20px',
-                borderRadius: 8,
+                borderRadius: 'var(--radius-sm, 8px)',
                 border: 'none',
-                background: '#10b981',
-                color: '#ffffff',
+                background: 'var(--accent, #10b981)',
+                color: 'var(--text-on-accent, #ffffff)',
                 fontWeight: 600,
                 cursor: 'pointer',
                 fontSize: '0.9rem',
@@ -107,8 +107,8 @@ export default class ModalErrorBoundary extends React.Component<Props, State> {
               onClick={() => this.props.onClose?.()}
               style={{
                 padding: '8px 20px',
-                borderRadius: 8,
-                border: '1px solid rgba(255, 255, 255, 0.15)',
+                borderRadius: 'var(--radius-sm, 8px)',
+                border: '1px solid var(--border-default, rgba(255, 255, 255, 0.15))',
                 background: 'transparent',
                 color: 'var(--text-main, #e4e4e7)',
                 cursor: 'pointer',

package/src/renderer/shared/components/{CalculationCard.tsx → cards/CalculationCard.tsx}

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import { Calculator } from 'lucide-react'
 
 export interface CalculationData {
@@ -11,41 +11,27 @@ export default function CalculationCard({ data }: { data: CalculationData }) {
     ? (Number.isInteger(data.result) ? data.result.toLocaleString() : data.result.toLocaleString(undefined, { maximumFractionDigits: 6 }))
     : String(data.result)
 
-  const [isDark, setIsDark] = useState(
-    () => (document.documentElement.getAttribute('data-theme') || 'dark') !== 'light'
-  )
-
-  useEffect(() => {
-    const observer = new MutationObserver(() => {
-      setIsDark((document.documentElement.getAttribute('data-theme') || 'dark') !== 'light')
-    })
-    observer.observe(document.documentElement, { attributeFilter: ['data-theme'] })
-    return () => observer.disconnect()
-  }, [])
-
   const t = {
-    cardBg: isDark ? 'rgba(255,255,255,0.03)' : 'rgba(15,23,42,0.04)',
-    cardText: isDark ? '#f8fafc' : '#0f172a',
-    cardBorder: isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.12)',
-    cardShadow: isDark ? '0 8px 32px 0 rgba(0,0,0,0.2)' : '0 4px 20px 0 rgba(15,23,42,0.08)',
-    labelColor: isDark ? 'rgba(255,255,255,0.6)' : '#64748b',
-    exprBg: isDark ? 'rgba(255,255,255,0.04)' : 'rgba(15,23,42,0.05)',
-    exprBorder: isDark ? 'rgba(255,255,255,0.06)' : 'rgba(15,23,42,0.1)',
-    exprText: isDark ? '#cbd5e1' : '#334155',
-    dividerColor: isDark ? 'rgba(255,255,255,0.4)' : '#94a3b8',
-    resultBg: isDark ? 'rgba(255,255,255,0.04)' : 'rgba(15,23,42,0.05)',
-    resultBorder: isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.12)',
-    resultText: isDark ? '#ffffff' : '#0f172a',
+    cardBg: 'var(--bg-surface-soft)',
+    cardText: 'var(--text-primary)',
+    cardBorder: 'var(--border-subtle)',
+    cardShadow: 'var(--shadow-md)',
+    labelColor: 'var(--text-muted)',
+    exprBg: 'var(--bg-surface-raised)',
+    exprBorder: 'var(--border-subtle)',
+    exprText: 'var(--text-secondary)',
+    dividerColor: 'var(--text-muted)',
+    resultBg: 'var(--bg-surface-raised)',
+    resultBorder: 'var(--border-default)',
+    resultText: 'var(--text-primary)',
   }
 
   return (
     <div
       style={{
         background: t.cardBg,
-        backdropFilter: 'blur(16px)',
-        WebkitBackdropFilter: 'blur(16px)',
         color: t.cardText,
-        borderRadius: '12px',
+        borderRadius: 'var(--radius-xl, 18px)',
         padding: '16px 20px',
         margin: '12px 0',
         boxShadow: t.cardShadow,
@@ -66,7 +52,7 @@ export default function CalculationCard({ data }: { data: CalculationData }) {
         style={{
           background: t.exprBg,
           border: `1px solid ${t.exprBorder}`,
-          borderRadius: '8px',
+          borderRadius: 'var(--radius-sm, 8px)',
           padding: '10px 14px',
           fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
           fontSize: '14px',
@@ -87,7 +73,7 @@ export default function CalculationCard({ data }: { data: CalculationData }) {
         style={{
           background: t.resultBg,
           border: `1px solid ${t.resultBorder}`,
-          borderRadius: '10px',
+          borderRadius: 'var(--radius-md, 10px)',
           padding: '12px 18px',
         }}
       >

package/src/renderer/shared/components/{ImageGenCard.tsx → cards/ImageGenCard.tsx}

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import { Sparkles } from 'lucide-react'
 
 export interface ImageGenHit {
@@ -41,7 +41,7 @@ function GeneratedImageTile({ url, single }: { url: string; single: boolean }) {
       style={{
         position: 'relative',
         display: 'block',
-        borderRadius: '10px',
+        borderRadius: 'var(--radius-md, 10px)',
         overflow: 'hidden',
         aspectRatio: single ? undefined : '1 / 1',
         background: 'var(--surface-strong)',
@@ -68,36 +68,23 @@ function GeneratedImageTile({ url, single }: { url: string; single: boolean }) {
 export default function ImageGenCard({ data }: { data: ImageGenData }) {
   const images = (data?.images ?? []).filter((img) => img?.url)
 
-  const [isDark, setIsDark] = useState(
-    () => (document.documentElement.getAttribute('data-theme') || 'dark') !== 'light'
-  )
-  useEffect(() => {
-    const observer = new MutationObserver(() => {
-      setIsDark((document.documentElement.getAttribute('data-theme') || 'dark') !== 'light')
-    })
-    observer.observe(document.documentElement, { attributeFilter: ['data-theme'] })
-    return () => observer.disconnect()
-  }, [])
-
-  const cardBg = isDark ? 'rgba(255,255,255,0.03)' : 'rgba(15,23,42,0.04)'
-  const cardBorder = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.12)'
-  const cardText = isDark ? '#f8fafc' : '#0f172a'
-  const labelColor = isDark ? 'rgba(255,255,255,0.6)' : '#64748b'
-  const metaColor = isDark ? 'rgba(255,255,255,0.5)' : '#94a3b8'
-  const promptColor = isDark ? 'rgba(255,255,255,0.7)' : '#475569'
-  const emptyColor = isDark ? 'rgba(255,255,255,0.5)' : '#94a3b8'
+  const cardBg = 'var(--bg-surface-soft)'
+  const cardBorder = 'var(--border-subtle)'
+  const cardText = 'var(--text-primary)'
+  const labelColor = 'var(--text-muted)'
+  const metaColor = 'var(--text-muted)'
+  const promptColor = 'var(--text-secondary)'
+  const emptyColor = 'var(--text-muted)'
 
   return (
     <div
       style={{
         background: cardBg,
-        backdropFilter: 'blur(16px)',
-        WebkitBackdropFilter: 'blur(16px)',
         color: cardText,
-        borderRadius: '12px',
+        borderRadius: 'var(--radius-xl, 18px)',
         padding: '16px 20px',
         margin: '12px 0',
-        boxShadow: isDark ? '0 8px 32px 0 rgba(0,0,0,0.2)' : '0 4px 20px 0 rgba(15,23,42,0.08)',
+        boxShadow: 'var(--shadow-md)',
         border: `1px solid ${cardBorder}`,
         fontFamily: 'system-ui, -apple-system, sans-serif',
       }}

package/src/renderer/shared/components/{ImageSearchCard.tsx → cards/ImageSearchCard.tsx}

@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import { Images } from 'lucide-react'
-import { resolveMediaUrl } from '../utils/markdown'
+import { resolveMediaUrl } from '../../utils/markdown'
 
 export interface ImageSearchHit {
   title: string
@@ -30,7 +30,7 @@ function ImageTile({ image }: { image: ImageSearchHit }) {
         display: 'flex',
         flex: '0 0 116px',
         flexDirection: 'column',
-        borderRadius: '10px',
+        borderRadius: 'var(--radius-md, 10px)',
         overflow: 'hidden',
         background: 'var(--surface-strong)',
         border: '1px solid var(--border)',
@@ -81,35 +81,22 @@ function ImageTile({ image }: { image: ImageSearchHit }) {
 export default function ImageSearchCard({ data }: { data: ImageSearchData }) {
   const images = (data?.images ?? []).filter((img) => img.thumbnailUrl || img.imageUrl)
 
-  const [isDark, setIsDark] = useState(
-    () => (document.documentElement.getAttribute('data-theme') || 'dark') !== 'light'
-  )
-  useEffect(() => {
-    const observer = new MutationObserver(() => {
-      setIsDark((document.documentElement.getAttribute('data-theme') || 'dark') !== 'light')
-    })
-    observer.observe(document.documentElement, { attributeFilter: ['data-theme'] })
-    return () => observer.disconnect()
-  }, [])
-
-  const cardBg = isDark ? 'rgba(255,255,255,0.03)' : 'rgba(15,23,42,0.04)'
-  const cardBorder = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.12)'
-  const cardText = isDark ? '#f8fafc' : '#0f172a'
-  const labelColor = isDark ? 'rgba(255,255,255,0.6)' : '#64748b'
-  const queryColor = isDark ? 'rgba(255,255,255,0.8)' : '#334155'
-  const emptyColor = isDark ? 'rgba(255,255,255,0.5)' : '#94a3b8'
+  const cardBg = 'var(--bg-surface-soft)'
+  const cardBorder = 'var(--border-subtle)'
+  const cardText = 'var(--text-primary)'
+  const labelColor = 'var(--text-muted)'
+  const queryColor = 'var(--text-secondary)'
+  const emptyColor = 'var(--text-muted)'
 
   return (
     <div
       style={{
         background: cardBg,
-        backdropFilter: 'blur(16px)',
-        WebkitBackdropFilter: 'blur(16px)',
         color: cardText,
-        borderRadius: '12px',
+        borderRadius: 'var(--radius-xl, 18px)',
         padding: '16px 20px',
         margin: '12px 0',
-        boxShadow: isDark ? '0 8px 32px 0 rgba(0,0,0,0.2)' : '0 4px 20px 0 rgba(15,23,42,0.08)',
+        boxShadow: 'var(--shadow-md)',
         border: `1px solid ${cardBorder}`,
         fontFamily: 'system-ui, -apple-system, sans-serif',
       }}

package/src/renderer/shared/components/{MermaidCard.tsx → cards/MermaidCard.tsx}

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { Workflow } from 'lucide-react'
-import { ChatCodeBlock } from './ChatCodeBlock'
+import { ChatCodeBlock } from '../chat/ChatCodeBlock'
 
 let diagramCounter = 0
 
@@ -28,7 +28,9 @@ function enqueueMermaidRender<T>(task: () => Promise<T>): Promise<T> {
 const svgCache = new Map<string, string>()
 function cacheKey(code: string): string {
   const theme = document.documentElement.getAttribute('data-theme') || 'dark'
-  return `${theme}::${code}`
+  const accent = document.documentElement.getAttribute('data-accent') || 'mint'
+  const mode = document.documentElement.getAttribute('data-accent-mode') || ''
+  return `${theme}::${accent}::${mode}::${code}`
 }
 
 function buildMermaidTheme(): Record<string, string> {
@@ -63,17 +65,35 @@ function cleanupOrphanMermaidNodes(): void {
 
 type Status = 'loading' | 'ready' | 'error'
 
+let sharedThemeObserver: MutationObserver | null = null
+const themeSubscribers = new Set<() => void>()
+
+export function subscribeThemeChanges(listener: () => void): () => void {
+  themeSubscribers.add(listener)
+  if (!sharedThemeObserver && typeof MutationObserver !== 'undefined' && typeof document !== 'undefined' && document.documentElement) {
+    sharedThemeObserver = new MutationObserver(() => {
+      themeSubscribers.forEach((fn) => fn())
+    })
+    sharedThemeObserver.observe(document.documentElement, {
+      attributeFilter: ['data-theme', 'data-accent', 'data-accent-mode'],
+    })
+  }
+  return () => {
+    themeSubscribers.delete(listener)
+    if (themeSubscribers.size === 0 && sharedThemeObserver) {
+      sharedThemeObserver.disconnect()
+      sharedThemeObserver = null
+    }
+  }
+}
+
 export default function MermaidCard({ code }: { code: string }) {
   const [status, setStatus] = useState<Status>('loading')
   const [svg, setSvg] = useState<string>('')
   const [copied, setCopied] = useState(false)
-  const [isDark, setIsDark] = useState(
-    () => (document.documentElement.getAttribute('data-theme') || 'dark') !== 'light'
-  )
 
   useEffect(() => {
     let cancelled = false
-    let observer: MutationObserver | null = null
     let debounceTimer: ReturnType<typeof setTimeout> | null = null
 
     async function render() {
@@ -145,16 +165,14 @@ export default function MermaidCard({ code }: { code: string }) {
       debounceTimer = setTimeout(render, 400)
     }
 
-    observer = new MutationObserver(() => {
-      setIsDark((document.documentElement.getAttribute('data-theme') || 'dark') !== 'light')
+    const unsubscribeTheme = subscribeThemeChanges(() => {
       render()
     })
-    observer.observe(document.documentElement, { attributeFilter: ['data-theme'] })
 
     return () => {
       cancelled = true
       if (debounceTimer) clearTimeout(debounceTimer)
-      observer?.disconnect()
+      unsubscribeTheme()
       cleanupOrphanMermaidNodes()
     }
   }, [code])
@@ -190,28 +208,26 @@ export default function MermaidCard({ code }: { code: string }) {
   return (
     <div
       style={{
-        background: isDark ? 'rgba(255,255,255,0.03)' : 'rgba(15,23,42,0.04)',
-        backdropFilter: 'blur(16px)',
-        WebkitBackdropFilter: 'blur(16px)',
-        color: isDark ? '#f8fafc' : '#0f172a',
-        borderRadius: '12px',
+        background: 'var(--bg-surface-soft)',
+        color: 'var(--text-primary)',
+        borderRadius: 'var(--radius-xl, 18px)',
         padding: '16px 20px',
         margin: '12px 0',
-        boxShadow: isDark ? '0 8px 32px 0 rgba(0,0,0,0.2)' : '0 4px 20px 0 rgba(15,23,42,0.08)',
-        border: `1px solid ${isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.12)'}`,
+        boxShadow: 'var(--shadow-md)',
+        border: '1px solid var(--border-subtle)',
         fontFamily: 'system-ui, -apple-system, sans-serif',
         minWidth: 0,
         maxWidth: '100%',
       }}
     >
       <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
-        <Workflow size={16} strokeWidth={2} style={{ opacity: 0.9, color: isDark ? 'rgba(255,255,255,0.6)' : '#64748b' }} />
+        <Workflow size={16} strokeWidth={2} style={{ opacity: 0.9, color: 'var(--text-muted)' }} />
         <span
           style={{
             fontSize: '11px',
             fontWeight: 700,
             letterSpacing: '0.8px',
-            color: isDark ? 'rgba(255,255,255,0.6)' : '#64748b',
+            color: 'var(--text-muted)',
           }}
         >
           DIAGRAM
@@ -227,7 +243,7 @@ export default function MermaidCard({ code }: { code: string }) {
             </button>
             <button type="button" onClick={handleCopy} title="Copy diagram source" className="chat-code-action-btn">
               {copied ? (
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--interactive-fg)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                   <polyline points="20 6 9 17 4 12" />
                 </svg>
               ) : (
@@ -248,8 +264,8 @@ export default function MermaidCard({ code }: { code: string }) {
               width: '20px',
               height: '20px',
               borderRadius: '50%',
-              border: `2px solid ${isDark ? 'rgba(255,255,255,0.15)' : 'rgba(15,23,42,0.12)'}`,
-              borderTopColor: 'var(--accent, #10b981)',
+              border: '2px solid var(--border-default)',
+              borderTopColor: 'var(--accent)',
               animation: 'mermaid-card-spin 0.8s linear infinite',
             }}
           />

package/src/renderer/shared/components/cards/PlanCard.test.tsx

@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest'
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { PlanCard } from './PlanCard'
+import { extractToolCardPayloads } from './ToolResultCards'
+import type { AgentProgress } from '../../types'
+
+describe('PlanCard and ToolResultCards plan extraction', () => {
+  it('extracts planData from exit_plan_mode ToolEnd event', () => {
+    const progress: AgentProgress[] = [
+      {
+        type: 'ToolEnd',
+        data: {
+          action: 'exit_plan_mode',
+          input: { plan: '## Implementation Plan\n1. Step one\n2. Step two' },
+          result: 'Plan approved by user',
+        },
+      },
+    ]
+
+    const payloads = extractToolCardPayloads(progress, 'Proceeding with the implementation.')
+    expect(payloads.planData).toBe('## Implementation Plan\n1. Step one\n2. Step two')
+  })
+
+  it('renders PlanCard with Proposed Plan title, Plan badge, and markdown content', () => {
+    const sample = '## Objectives\n- [ ] Task 1: Initialize\n- [x] Task 2: Complete'
+    const html = renderToStaticMarkup(<PlanCard plan={sample} />)
+
+    expect(html).toContain('Proposed Plan')
+    expect(html).toContain('approval-badge-chip plan')
+    expect(html).toContain('Plan')
+    expect(html).toContain('Objectives')
+    expect(html).toContain('Task 1: Initialize')
+    expect(html).toContain('Task 2: Complete')
+  })
+
+  it('returns null if plan is empty', () => {
+    const html = renderToStaticMarkup(<PlanCard plan="   " />)
+    expect(html).toBe('')
+  })
+})

package/src/renderer/shared/components/cards/PlanCard.tsx

@@ -0,0 +1,32 @@
+import React, { memo } from 'react'
+import { FormattedMessage } from '../../utils/markdown'
+
+export interface PlanCardProps {
+  plan: string
+}
+
+export const PlanCard = memo(function PlanCard({ plan }: PlanCardProps) {
+  if (!plan || !plan.trim()) return null
+
+  return (
+    <div
+      className="action-card approval-card plan-inline-card"
+      style={{ width: '100%', alignItems: 'stretch', textAlign: 'left', marginBottom: '12px' }}
+    >
+      <div className="approval-card-header" style={{ width: '100%', textAlign: 'left' }}>
+        <div className="approval-title-group" style={{ textAlign: 'left' }}>
+          <div className="approval-title-text" style={{ textAlign: 'left' }}>Proposed Plan</div>
+        </div>
+        <span className="approval-badge-chip plan">
+          Plan
+        </span>
+      </div>
+
+      <div className="approval-content-box plan-review-content" style={{ maxHeight: '420px', overflowY: 'auto' }}>
+        <FormattedMessage text={plan.trim()} />
+      </div>
+    </div>
+  )
+})
+
+export default PlanCard

package/src/renderer/shared/components/cards/ReleaseNotesCard.test.tsx

@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest'
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { ReleaseNotesCard } from './ReleaseNotesCard'
+import { renderFormattedMessage } from '../../utils/markdown'
+
+describe('ReleaseNotesCard', () => {
+  it('renders release notes with framed card, version badge, and sections', () => {
+    const sample = `# Release Notes - Mint Agent v1.18.0\n\n## Smart Thinking\n- **Safe Non-Text Filter**: Excludes media\n- **Unrestricted**: All models`
+    const html = renderToStaticMarkup(<ReleaseNotesCard markdown={sample} />)
+
+    expect(html).toContain('release-notes-card')
+    expect(html).toContain('v1.18.0')
+    expect(html).toContain('Release Notes')
+    expect(html).toContain('Smart Thinking')
+    expect(html).toContain('Safe Non-Text Filter')
+    expect(html).toContain('Excludes media')
+  })
+
+  it('renders through renderFormattedMessage seamlessly', () => {
+    const sample = `# Release Notes - Mint Agent v1.18.0\n\n## UI Ergonomics\n- **Code Blocks**: Clean copying`
+    const node = renderFormattedMessage(sample)
+    const html = renderToStaticMarkup(<>{node}</>)
+
+    expect(html).toContain('release-notes-card')
+    expect(html).toContain('UI Ergonomics')
+    expect(html).toContain('Clean copying')
+  })
+})

package/src/renderer/shared/components/cards/ReleaseNotesCard.tsx

@@ -0,0 +1,137 @@
+import React, { useMemo } from 'react'
+import { Rocket } from 'lucide-react'
+
+export interface ReleaseNotesCardProps {
+  markdown: string
+}
+
+interface ReleaseSection {
+  title: string
+  items: { title: string; desc: string; subItems?: string[] }[]
+}
+
+export function ReleaseNotesCard({ markdown }: ReleaseNotesCardProps) {
+  const { version, sections } = useMemo(() => {
+    let version = 'Latest'
+    const sections: ReleaseSection[] = []
+    let currentSection: ReleaseSection | null = null
+    let currentItem: { title: string; desc: string; subItems?: string[] } | null = null
+
+    for (const rawLine of markdown.split('\n')) {
+      const line = rawLine.trim()
+      if (!line) continue
+
+      if (line.startsWith('# ')) {
+        const vMatch = line.match(/v\d+\.\d+(?:\.\d+)?/i)
+        if (vMatch) version = vMatch[0]
+        continue
+      }
+
+      if (line.startsWith('## ')) {
+        if (currentItem && currentSection) {
+          currentSection.items.push(currentItem)
+          currentItem = null
+        }
+        if (currentSection) {
+          sections.push(currentSection)
+        }
+        currentSection = {
+          title: line.replace(/^##\s+/, '').trim(),
+          items: [],
+        }
+        continue
+      }
+
+      const indent = rawLine.length - rawLine.trimStart().length
+      if (line.startsWith('- ') || line.startsWith('* ')) {
+        const content = line.slice(2).trim()
+        if (indent >= 2 && currentItem) {
+          if (!currentItem.subItems) currentItem.subItems = []
+          currentItem.subItems.push(content)
+          continue
+        }
+        if (currentItem && currentSection) {
+          currentSection.items.push(currentItem)
+        }
+        const boldMatch = content.match(/^\*\*([^*]+)\*\*:\s*(.*)$/)
+        if (boldMatch) {
+          currentItem = {
+            title: boldMatch[1],
+            desc: boldMatch[2],
+          }
+        } else {
+          currentItem = {
+            title: '',
+            desc: content,
+          }
+        }
+        continue
+      }
+
+      if (currentItem) {
+        currentItem.desc += ' ' + line
+      }
+    }
+
+    if (currentItem && currentSection) {
+      currentSection.items.push(currentItem)
+    }
+    if (currentSection) {
+      sections.push(currentSection)
+    }
+
+    return { version, sections }
+  }, [markdown])
+
+  return (
+    <div className="release-notes-card">
+      <div className="release-notes-header">
+        <div className="release-notes-title">
+          <Rocket size={18} className="release-notes-icon" />
+          <span>Release Notes</span>
+          <span className="release-notes-version-badge">{version}</span>
+        </div>
+        <span className="release-notes-count-badge">
+          {sections.length} Highlights
+        </span>
+      </div>
+      <div className="release-notes-track">
+        <div className="release-notes-bar" />
+      </div>
+      <div className="release-notes-body">
+        {sections.map((section, sIdx) => (
+          <div key={sIdx} className="release-notes-section">
+            <div className="release-notes-section-title">
+              <span className="release-notes-bullet">●</span>
+              <span>{section.title}</span>
+            </div>
+            <div className="release-notes-items">
+              {section.items.map((item, iIdx) => (
+                <div key={iIdx} className="release-notes-item">
+                  <div className="release-notes-item-header">
+                    <span className="release-notes-item-bullet">•</span>
+                    {item.title ? (
+                      <span className="release-notes-item-title">{item.title}:</span>
+                    ) : null}
+                    <span className="release-notes-item-desc">{item.desc}</span>
+                  </div>
+                  {item.subItems && item.subItems.length > 0 && (
+                    <div className="release-notes-subitems">
+                      {item.subItems.map((sub, subIdx) => (
+                        <div key={subIdx} className="release-notes-subitem">
+                          <span className="release-notes-subitem-bullet">›</span>
+                          <span>{sub.replace(/\*\*/g, '')}</span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+export default ReleaseNotesCard