@pheem49/mint 1.17.0 → 1.18.0

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

@@ -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)',
@@ -93,7 +93,7 @@ export default function ImageSearchCard({ data }: { data: ImageSearchData }) {
       style={{
         background: cardBg,
         color: cardText,
-        borderRadius: '12px',
+        borderRadius: 'var(--radius-xl, 18px)',
         padding: '16px 20px',
         margin: '12px 0',
         boxShadow: 'var(--shadow-md)',

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

@@ -210,7 +210,7 @@ export default function MermaidCard({ code }: { code: string }) {
       style={{
         background: 'var(--bg-surface-soft)',
         color: 'var(--text-primary)',
-        borderRadius: '12px',
+        borderRadius: 'var(--radius-xl, 18px)',
         padding: '16px 20px',
         margin: '12px 0',
         boxShadow: 'var(--shadow-md)',

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

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

@@ -60,7 +60,7 @@ export default function StockCard({ data }: { data: StockData }) {
       style={{
         background: t.cardBg,
         color: t.cardText,
-        borderRadius: '12px',
+        borderRadius: 'var(--radius-xl, 18px)',
         padding: '16px 20px',
         margin: '12px 0',
         boxShadow: t.cardShadow,
@@ -80,7 +80,7 @@ export default function StockCard({ data }: { data: StockData }) {
                 fontSize: '11px',
                 fontWeight: 700,
                 padding: '2px 6px',
-                borderRadius: '4px',
+                borderRadius: 'var(--radius-2xs, 4px)',
                 background: t.tagBg,
                 color: t.tagColor,
                 textTransform: 'none',
@@ -98,7 +98,7 @@ export default function StockCard({ data }: { data: StockData }) {
             background: isPositive ? 'rgba(16, 185, 129, 0.12)' : 'rgba(239, 68, 68, 0.12)',
             border: `1px solid ${isPositive ? 'rgba(16, 185, 129, 0.3)' : 'rgba(239, 68, 68, 0.3)'}`,
             padding: '4px 10px',
-            borderRadius: '20px',
+            borderRadius: 'var(--radius-full, 9999px)',
             display: 'flex',
             alignItems: 'center',
             gap: '4px',
@@ -123,26 +123,26 @@ export default function StockCard({ data }: { data: StockData }) {
 
       {/* Stats Grid */}
       <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '8px' }}>
-        <div style={{ background: t.statBg, borderRadius: '8px', padding: '8px 10px', border: `1px solid ${t.statBorder}` }}>
+        <div style={{ background: t.statBg, borderRadius: 'var(--radius-sm, 8px)', padding: '8px 10px', border: `1px solid ${t.statBorder}` }}>
           <p style={{ margin: 0, fontSize: '10px', color: t.statLabel, textTransform: 'none' }}>Day high</p>
           <p style={{ margin: '2px 0 0', fontSize: '12px', fontWeight: 700, color: t.statValue }}>
             {data.dayHigh ? `${currencySymbol}${data.dayHigh.toFixed(2)}` : 'N/A'}
           </p>
         </div>
 
-        <div style={{ background: t.statBg, borderRadius: '8px', padding: '8px 10px', border: `1px solid ${t.statBorder}` }}>
+        <div style={{ background: t.statBg, borderRadius: 'var(--radius-sm, 8px)', padding: '8px 10px', border: `1px solid ${t.statBorder}` }}>
           <p style={{ margin: 0, fontSize: '10px', color: t.statLabel, textTransform: 'none' }}>Day low</p>
           <p style={{ margin: '2px 0 0', fontSize: '12px', fontWeight: 700, color: t.statValue }}>
             {data.dayLow ? `${currencySymbol}${data.dayLow.toFixed(2)}` : 'N/A'}
           </p>
         </div>
 
-        <div style={{ background: t.statBg, borderRadius: '8px', padding: '8px 10px', border: `1px solid ${t.statBorder}` }}>
+        <div style={{ background: t.statBg, borderRadius: 'var(--radius-sm, 8px)', padding: '8px 10px', border: `1px solid ${t.statBorder}` }}>
           <p style={{ margin: 0, fontSize: '10px', color: t.statLabel, textTransform: 'none' }}>Market cap</p>
           <p style={{ margin: '2px 0 0', fontSize: '12px', fontWeight: 700, color: t.statValue }}>{formatLargeNum(data.marketCap)}</p>
         </div>
 
-        <div style={{ background: t.statBg, borderRadius: '8px', padding: '8px 10px', border: `1px solid ${t.statBorder}` }}>
+        <div style={{ background: t.statBg, borderRadius: 'var(--radius-sm, 8px)', padding: '8px 10px', border: `1px solid ${t.statBorder}` }}>
           <p style={{ margin: 0, fontSize: '10px', color: t.statLabel, textTransform: 'none' }}>Volume</p>
           <p style={{ margin: '2px 0 0', fontSize: '12px', fontWeight: 700, color: t.statValue }}>{formatLargeNum(data.volume)}</p>
         </div>

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

@@ -6,6 +6,7 @@ const StockCard = lazy(() => import('./StockCard'))
 const CalculationCard = lazy(() => import('./CalculationCard'))
 const ImageSearchCard = lazy(() => import('./ImageSearchCard'))
 const ImageGenCard = lazy(() => import('./ImageGenCard'))
+const PlanCard = lazy(() => import('./PlanCard'))
 
 export interface ToolResultCardsProps {
   progress?: AgentProgress[]
@@ -41,6 +42,7 @@ export function extractToolCardPayloads(progress?: AgentProgress[], aiText?: str
   let calcData: any = null
   let imageSearchData: any = null
   let imageGenData: any = null
+  let planData: string | null = null
 
   for (const event of progress || []) {
     if (event.type !== 'ToolEnd') continue
@@ -56,24 +58,30 @@ export function extractToolCardPayloads(progress?: AgentProgress[], aiText?: str
       imageSearchData = parseMatchedJson(res, IMAGE_SEARCH_RE)
     } else if (!skipImageGen && !imageGenData && IMAGE_GEN_ACTIONS.has(actionName)) {
       imageGenData = parseMatchedJson(res, IMAGE_GEN_RE)
+    } else if (!planData && actionName === 'exit_plan_mode') {
+      const raw = (event.data?.input as any)?.plan || (event.data as any)?.plan
+      if (typeof raw === 'string' && raw.trim()) {
+        planData = raw.trim()
+      }
     }
   }
 
-  return { weatherData, stockData, calcData, imageSearchData, imageGenData }
+  return { weatherData, stockData, calcData, imageSearchData, imageGenData, planData }
 }
 
 export const ToolResultCards = memo(function ToolResultCards({ progress, aiText }: ToolResultCardsProps) {
-  const { weatherData, stockData, calcData, imageSearchData, imageGenData } = useMemo(
+  const { weatherData, stockData, calcData, imageSearchData, imageGenData, planData } = useMemo(
     () => extractToolCardPayloads(progress, aiText),
     [progress, aiText],
   )
 
-  if (!weatherData && !stockData && !calcData && !imageSearchData && !imageGenData) {
+  if (!weatherData && !stockData && !calcData && !imageSearchData && !imageGenData && !planData) {
     return null
   }
 
   return (
     <Suspense fallback={null}>
+      {planData && <PlanCard plan={planData} />}
       {weatherData && <WeatherCard data={weatherData} />}
       {stockData && <StockCard data={stockData} />}
       {calcData && <CalculationCard data={calcData} />}

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

@@ -30,11 +30,11 @@ export default function UiMockupWidget({ data }: { data: UiMockupData }) {
 
   const title = data.title || 'App Preview'
   const subtitle = data.subtitle
-  const dropzoneText = data.dropzoneText || 'ลากไฟล์มาวางที่นี่'
-  const dropzoneHint = data.dropzoneHint || 'หรือเลือกไฟล์จากอุปกรณ์ของคุณ'
-  const buttonText = data.buttonText || 'เลือกไฟล์'
+  const dropzoneText = data.dropzoneText || 'Drag files here'
+  const dropzoneHint = data.dropzoneHint || 'or choose files from your device'
+  const buttonText = data.buttonText || 'Choose file'
   const disclaimer =
-    data.disclaimer || 'ตัวอย่างแนวคิด UI เท่านั้น ยังไม่ใช่เครื่องมือที่ประมวลผลไฟล์ได้จริง'
+    data.disclaimer || 'UI mockup preview only, not a live file processor'
 
   // Options state
   let initialOptions: Array<{ label: string; current: string; choices: string[] }> = []

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

@@ -94,7 +94,7 @@ export default function WeatherCard({ data }: { data: WeatherData }) {
       style={{
         background: weatherInfo.gradient,
         color: '#ffffff',
-        borderRadius: '12px',
+        borderRadius: 'var(--radius-xl, 18px)',
         padding: '16px 20px',
         margin: '12px 0',
         boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.4)',
@@ -161,7 +161,7 @@ export default function WeatherCard({ data }: { data: WeatherData }) {
                 alignItems: 'center',
                 background: 'rgba(255, 255, 255, 0.12)',
                 backdropFilter: 'blur(4px)',
-                borderRadius: '8px',
+                borderRadius: 'var(--radius-sm, 8px)',
                 padding: '8px 4px',
               }}
             >
@@ -187,7 +187,7 @@ export default function WeatherCard({ data }: { data: WeatherData }) {
           style={{
             background: 'rgba(255, 255, 255, 0.12)',
             backdropFilter: 'blur(4px)',
-            borderRadius: '8px',
+            borderRadius: 'var(--radius-sm, 8px)',
             padding: '8px 10px',
           }}
         >
@@ -199,7 +199,7 @@ export default function WeatherCard({ data }: { data: WeatherData }) {
           style={{
             background: 'rgba(255, 255, 255, 0.12)',
             backdropFilter: 'blur(4px)',
-            borderRadius: '8px',
+            borderRadius: 'var(--radius-sm, 8px)',
             padding: '8px 10px',
           }}
         >
@@ -211,7 +211,7 @@ export default function WeatherCard({ data }: { data: WeatherData }) {
           style={{
             background: 'rgba(255, 255, 255, 0.12)',
             backdropFilter: 'blur(4px)',
-            borderRadius: '8px',
+            borderRadius: 'var(--radius-sm, 8px)',
             padding: '8px 10px',
           }}
         >

package/src/renderer/shared/components/chat/ApprovalCard.test.tsx

@@ -21,4 +21,15 @@ describe('skill approval', () => {
     expect(html).toContain('Reject')
     expect(html).not.toContain('Always allow for this session')
   })
+
+  it('renders plan review card with markdown body and approve/deny actions', () => {
+    const html = renderToStaticMarkup(<ApprovalCard
+      pendingApproval={{ approval: { ExitPlanMode: { plan: '## Implementation Steps\n- [ ] Step 1\n- [x] Step 2' } } }}
+      onApproval={() => {}}
+    />)
+    expect(html).toContain('Plan Review')
+    expect(html).toContain('Approve and proceed')
+    expect(html).toContain('Deny (keep planning)')
+    expect(html).not.toContain('Always allow for this session')
+  })
 })

package/src/renderer/shared/components/chat/ApprovalCard.tsx

@@ -5,6 +5,7 @@
  */
 import React, { useState, useEffect } from 'react'
 import { renderApprovalDetails, renderDiff } from '../../utils/approval'
+import { FormattedMessage } from '../../utils/markdown'
 import { DiffReviewModal } from './DiffReviewModal'
 
 interface Props {
@@ -32,6 +33,8 @@ export function ApprovalCard({ pendingApproval, onApproval }: Props) {
   const targetFilePath = skillWrite?.path || writeFile?.path || applyPatch?.path || 'Code Change'
   const diffText = skillWrite?.diff || writeFile?.diff || applyPatch?.diff
   const isAskUser = !!pendingApproval.approval?.AskUser
+  const isExitPlan = !!pendingApproval.approval?.ExitPlanMode
+  const isEnterPlan = !!pendingApproval.approval?.EnterPlanMode
   const mcpTool = pendingApproval.approval?.McpTool
   const MCP_ALLOW_ALL_SENTINEL = '__mcp_allow_all__'
   const askOptions: AskUserOption[] = Array.isArray(pendingApproval.approval?.AskUser?.options)
@@ -58,6 +61,8 @@ export function ApprovalCard({ pendingApproval, onApproval }: Props) {
 
   // Get badge label based on action type
   const getToolMeta = () => {
+    if (isExitPlan) return { badge: 'Plan Review', badgeClass: 'plan' }
+    if (isEnterPlan) return { badge: 'Plan Mode', badgeClass: 'plan' }
     if (skillWrite) return { badge: 'Skill Change', badgeClass: 'edit' }
     if (runShell) return { badge: 'Run Command', badgeClass: details.isDangerous ? 'dangerous' : 'command' }
     if (writeFile || applyPatch) return { badge: 'File Edit', badgeClass: 'edit' }
@@ -95,6 +100,16 @@ export function ApprovalCard({ pendingApproval, onApproval }: Props) {
           action: () => onApproval(false),
         },
       ]
+    : isExitPlan
+    ? [
+        { key: '1', title: 'Approve and proceed', variant: 'approve', action: () => onApproval(true, false) },
+        { key: '2', title: 'Deny (keep planning)', variant: 'cancel', action: () => onApproval(false) },
+      ]
+    : isEnterPlan
+    ? [
+        { key: '1', title: 'Enter plan mode', variant: 'approve', action: () => onApproval(true, false) },
+        { key: '2', title: 'Cancel', variant: 'cancel', action: () => onApproval(false) },
+      ]
     : [
         {
           key: '1',
@@ -181,7 +196,7 @@ export function ApprovalCard({ pendingApproval, onApproval }: Props) {
                     gap: 6,
                     padding: '4px 10px',
                     fontSize: '0.75rem',
-                    borderRadius: '8px',
+                    borderRadius: 'var(--radius-sm, 8px)',
                     background: 'var(--accent-subtle)',
                     border: '1px solid var(--accent-border)',
                     color: 'var(--interactive-fg)',
@@ -193,6 +208,10 @@ export function ApprovalCard({ pendingApproval, onApproval }: Props) {
               </div>
               {renderDiff(diffText)}
             </div>
+          ) : isExitPlan ? (
+            <div className="approval-content-box plan-review-content" style={{ maxHeight: '360px', overflowY: 'auto' }}>
+              <FormattedMessage text={details.body} />
+            </div>
           ) : (
             <div className={`approval-content-box ${isAskUser ? 'question-text' : ''}`}>
               {details.body}
@@ -273,7 +292,7 @@ export function ApprovalCard({ pendingApproval, onApproval }: Props) {
                     <button
                       type="button"
                       className="approval-btn approval-btn-approve"
-                      style={{ whiteSpace: 'nowrap', padding: '9px 16px', borderRadius: '8px' }}
+                      style={{ whiteSpace: 'nowrap', padding: '9px 16px', borderRadius: 'var(--radius-sm, 8px)' }}
                       disabled={isMultiSelect ? selectedOptions.size === 0 && !askAnswer.trim() : !askAnswer.trim()}
                       onClick={() =>
                         onApproval(true, false, isMultiSelect ? buildMultiSelectAnswer() : askAnswer.trim())

package/src/renderer/shared/components/chat/ArtifactCards.test.tsx

@@ -0,0 +1,69 @@
+/// <reference path="../../env.d.ts" />
+import { describe, it, expect, vi } from 'vitest'
+// @ts-ignore react-dom/server lacks types without @types/react-dom
+import { renderToStaticMarkup } from 'react-dom/server'
+import React from 'react'
+import { ArtifactCards, extractArtifacts } from './ArtifactCards'
+
+describe('ArtifactCards', () => {
+  it('extracts pdf and pptx files explicitly mentioned in aiText and converts to workspace-relative path', () => {
+    const aiText = 'ไฟล์สไลด์: `/home/pheem49/vscode/Project/Demo/AI_and_CLI_Presentation.pdf` และ `slides.pptx` รวมถึง `index.html`'
+    const artifacts = extractArtifacts([], aiText, '/home/pheem49/vscode/Project/Demo')
+    // Only PDF and PPTX, index.html must be ignored
+    expect(artifacts.length).toBe(2)
+    // AI_and_CLI_Presentation.pdf should have relative path
+    const pdf = artifacts.find(a => a.name === 'AI_and_CLI_Presentation.pdf')
+    expect(pdf).toBeDefined()
+    expect(pdf?.path).toBe('AI_and_CLI_Presentation.pdf')
+    expect(pdf?.type).toBe('pdf')
+
+    const pptx = artifacts.find(a => a.name === 'slides.pptx')
+    expect(pptx).toBeDefined()
+    expect(pptx?.type).toBe('presentation')
+  })
+
+  it('does not extract random files from terminal ls or shell output', () => {
+    const progress: any[] = [
+      {
+        type: 'ToolEnd',
+        data: {
+          action: 'run_shell',
+          input: { command: 'ls -la' },
+          result: 'file1.pdf file2.pdf old_presentation.pdf',
+        },
+      },
+    ]
+    // If aiText doesn't mention them, no cards are created
+    const artifacts = extractArtifacts(progress, 'ฉันได้ตรวจสอบโฟลเดอร์เรียบร้อยแล้วค่ะ', '/home/user')
+    expect(artifacts.length).toBe(0)
+  })
+
+  it('renders card with relative file path and Open in Side Panel button', () => {
+    const onOpenArtifact = vi.fn()
+    const aiText = 'สร้างไฟล์เสร็จแล้ว: `/home/user/workspace/presentation.pdf`'
+    const html = renderToStaticMarkup(
+      <ArtifactCards
+        aiText={aiText}
+        workspacePath="/home/user/workspace"
+        onOpenArtifact={onOpenArtifact}
+      />
+    )
+
+    expect(html).toContain('presentation.pdf')
+    expect(html).toContain('PDF')
+    expect(html).toContain('Open in Side Panel')
+  })
+
+  it('renders cards with draggable attribute so users can drag into chat', () => {
+    const aiText = 'ไฟล์สไลด์: `presentation.pdf`'
+    const html = renderToStaticMarkup(
+      <ArtifactCards
+        aiText={aiText}
+        workspacePath="/home/user/workspace"
+        onOpenArtifact={() => {}}
+      />
+    )
+    expect(html).toMatch(/class="chat-artifact-card[^"]*"[^>]*draggable="true"/)
+    expect(html).toContain('width:100%')
+  })
+})