@pheem49/mint 1.16.0 → 1.18.0

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import { TrendingUp, TrendingDown } from 'lucide-react'
 
 export interface StockData {
@@ -16,38 +16,24 @@ export interface StockData {
 
 export default function StockCard({ data }: { data: StockData }) {
   const isPositive = data.change >= 0
-  const accentColor = isPositive ? '#10b981' : '#ef4444'
-
-  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 accentColor = isPositive ? 'var(--status-success, #10b981)' : 'var(--status-error, #ef4444)'
 
   // Theme-aware color tokens
   const t = {
-    cardBg: isDark ? 'rgba(255,255,255,0.03)' : 'rgba(15,23,42,0.04)',
-    cardText: isDark ? '#ffffff' : '#0f172a',
+    cardBg: 'var(--bg-surface-soft)',
+    cardText: 'var(--text-primary)',
     cardBorder: isPositive
-      ? isDark ? 'rgba(16,185,129,0.25)' : 'rgba(16,185,129,0.45)'
-      : isDark ? 'rgba(239,68,68,0.25)' : 'rgba(239,68,68,0.45)',
-    cardShadow: isDark
-      ? '0 8px 32px 0 rgba(0,0,0,0.2)'
-      : '0 4px 20px 0 rgba(15,23,42,0.08)',
-    tagBg: isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.07)',
-    tagColor: isDark ? 'rgba(255,255,255,0.7)' : '#475569',
-    subText: isDark ? 'rgba(255,255,255,0.6)' : '#64748b',
-    divider: isDark ? 'rgba(255,255,255,0.06)' : 'rgba(15,23,42,0.1)',
-    statBg: isDark ? 'rgba(255,255,255,0.04)' : 'rgba(15,23,42,0.05)',
-    statBorder: isDark ? 'rgba(255,255,255,0.04)' : 'rgba(15,23,42,0.1)',
-    statLabel: isDark ? 'rgba(255,255,255,0.55)' : '#64748b',
-    statValue: isDark ? '#ffffff' : '#0f172a',
+      ? 'color-mix(in srgb, var(--status-success, #10b981) 35%, var(--border-subtle))'
+      : 'color-mix(in srgb, var(--status-error, #ef4444) 35%, var(--border-subtle))',
+    cardShadow: 'var(--shadow-md)',
+    tagBg: 'var(--bg-surface-raised)',
+    tagColor: 'var(--text-secondary)',
+    subText: 'var(--text-muted)',
+    divider: 'var(--border-subtle)',
+    statBg: 'var(--bg-surface-raised)',
+    statBorder: 'var(--border-subtle)',
+    statLabel: 'var(--text-muted)',
+    statValue: 'var(--text-primary)',
   }
 
   const formattedPrice = data.price.toLocaleString(undefined, {
@@ -73,10 +59,8 @@ export default function StockCard({ data }: { data: StockData }) {
     <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,
@@ -96,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',
@@ -114,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',
@@ -139,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

@@ -0,0 +1,94 @@
+import React, { lazy, memo, Suspense, useMemo } from 'react'
+import type { AgentProgress } from '../../types'
+
+const WeatherCard = lazy(() => import('./WeatherCard'))
+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[]
+  aiText?: string
+}
+
+const WEATHER_RE = /```weather_json\s*([\s\S]*?)\s*```/
+const STOCK_RE = /```stock_json\s*([\s\S]*?)\s*```/
+const CALC_RE = /```calculation_json\s*([\s\S]*?)\s*```/
+const IMAGE_SEARCH_RE = /```image_search_json\s*([\s\S]*?)\s*```/
+const IMAGE_GEN_RE = /```image_gen_json\s*([\s\S]*?)\s*```/
+const IMAGE_GEN_ACTIONS = new Set(['generate_image', 'image_studio.generate', 'image_generate'])
+
+function parseMatchedJson(result: unknown, regex: RegExp): any | null {
+  const match = typeof result === 'string' && result.match(regex)
+  if (match && match[1]) {
+    try {
+      return JSON.parse(match[1])
+    } catch {}
+  }
+  return null
+}
+
+export function extractToolCardPayloads(progress?: AgentProgress[], aiText?: string) {
+  const skipWeather = Boolean(aiText && (aiText.includes('```weather_json') || aiText.includes('```weather-json')))
+  const skipStock = Boolean(aiText && (aiText.includes('```stock_json') || aiText.includes('```stock-json')))
+  const skipCalc = Boolean(aiText && (aiText.includes('```calculation_json') || aiText.includes('```calculation-json')))
+  const skipImageSearch = Boolean(aiText && (aiText.includes('```image_search_json') || aiText.includes('```image-search-json')))
+  const skipImageGen = Boolean(aiText && (aiText.includes('```image_gen_json') || aiText.includes('```image-gen-json')))
+
+  let weatherData: any = null
+  let stockData: any = null
+  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
+    const actionName = event.data?.action || (event.data as any)?.name || ''
+    const res = event.data?.result || (event.data as any)?.output || ''
+    if (!skipWeather && !weatherData && actionName === 'weather') {
+      weatherData = parseMatchedJson(res, WEATHER_RE)
+    } else if (!skipStock && !stockData && actionName === 'stock') {
+      stockData = parseMatchedJson(res, STOCK_RE)
+    } else if (!skipCalc && !calcData && actionName === 'calculation') {
+      calcData = parseMatchedJson(res, CALC_RE)
+    } else if (!skipImageSearch && !imageSearchData && actionName === 'image_search') {
+      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, planData }
+}
+
+export const ToolResultCards = memo(function ToolResultCards({ progress, aiText }: ToolResultCardsProps) {
+  const { weatherData, stockData, calcData, imageSearchData, imageGenData, planData } = useMemo(
+    () => extractToolCardPayloads(progress, aiText),
+    [progress, aiText],
+  )
+
+  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} />}
+      {imageSearchData && <ImageSearchCard data={imageSearchData} />}
+      {imageGenData && <ImageGenCard data={imageGenData} />}
+    </Suspense>
+  )
+})
+
+export default ToolResultCards

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { resolveMediaUrl } from '../utils/markdown'
+import { resolveMediaUrl } from '../../utils/markdown'
 import {
   MessageSquare,
   Mail,
@@ -127,11 +127,11 @@ export interface UiFeatureData {
 }
 
 const BADGE_THEMES: Record<string, { bg: string; color: string; border: string }> = {
-  green: { bg: 'rgba(16, 185, 129, 0.15)', color: '#34d399', border: 'rgba(16, 185, 129, 0.3)' },
-  blue: { bg: 'rgba(56, 189, 248, 0.15)', color: '#38bdf8', border: 'rgba(56, 189, 248, 0.3)' },
-  purple: { bg: 'rgba(168, 85, 247, 0.15)', color: '#c084fc', border: 'rgba(168, 85, 247, 0.3)' },
-  amber: { bg: 'rgba(245, 158, 11, 0.15)', color: '#fbbf24', border: 'rgba(245, 158, 11, 0.3)' },
-  red: { bg: 'rgba(239, 68, 68, 0.15)', color: '#f87171', border: 'rgba(239, 68, 68, 0.3)' },
+  green: { bg: 'var(--status-success-bg, var(--accent-subtle))', color: 'var(--status-success-fg, var(--interactive-fg))', border: 'var(--status-success-border, var(--accent-border))' },
+  blue: { bg: 'var(--status-info-bg)', color: 'var(--status-info-fg)', border: 'var(--status-info-border)' },
+  purple: { bg: 'var(--status-purple-bg)', color: 'var(--status-purple-fg)', border: 'var(--status-purple-border)' },
+  amber: { bg: 'var(--status-warning-bg)', color: 'var(--status-warning-fg)', border: 'var(--status-warning-border)' },
+  red: { bg: 'var(--status-error-bg)', color: 'var(--status-error-fg)', border: 'var(--status-error-border)' },
 }
 
 export default function UiFeatureCard({ data }: { data: UiFeatureData | UiFeatureItem[] | UiFeatureItem }) {

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

@@ -166,9 +166,9 @@ export default function UiGridCard({ data }: { data: UiGridData | UiGridItem[] }
                       fontWeight: 600,
                       padding: '2px 7px',
                       borderRadius: '999px',
-                      background: 'rgba(16, 185, 129, 0.15)',
-                      color: '#34d399',
-                      border: '1px solid rgba(16, 185, 129, 0.3)',
+                      background: 'var(--accent-subtle)',
+                      color: 'var(--interactive-fg)',
+                      border: '1px solid var(--accent-border)',
                     }}
                   >
                     {item.badge}

package/src/renderer/shared/components/{UiMockupWidget.tsx → 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/{WeatherCard.tsx → cards/WeatherCard.tsx}

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { Droplet } from 'lucide-react';
-import { getWeatherIconUrl } from '../assets/weather-icons';
+import { getWeatherIconUrl } from '../../assets/weather-icons';
 
 export interface WeatherData {
   location: string;
@@ -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/{ApprovalCard.test.tsx → chat/ApprovalCard.test.tsx}

@@ -2,7 +2,7 @@ import React from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { describe, expect, it } from 'vitest'
 import { ApprovalCard } from './ApprovalCard'
-import { requiresExplicitApproval } from '../utils/approval'
+import { requiresExplicitApproval } from '../../utils/approval'
 
 describe('skill approval', () => {
   it('excludes skill proposals from session auto approval while keeping ordinary tool permissions', () => {
@@ -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/{ApprovalCard.tsx → chat/ApprovalCard.tsx}

@@ -4,7 +4,8 @@
  * Shared by both Desktop and Web ChatPanel — do NOT duplicate this.
  */
 import React, { useState, useEffect } from 'react'
-import { renderApprovalDetails, renderDiff } from '../utils/approval'
+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,10 +196,10 @@ export function ApprovalCard({ pendingApproval, onApproval }: Props) {
                     gap: 6,
                     padding: '4px 10px',
                     fontSize: '0.75rem',
-                    borderRadius: '8px',
-                    background: 'rgba(56, 189, 248, 0.12)',
-                    border: '1px solid rgba(56, 189, 248, 0.3)',
-                    color: '#38bdf8',
+                    borderRadius: 'var(--radius-sm, 8px)',
+                    background: 'var(--accent-subtle)',
+                    border: '1px solid var(--accent-border)',
+                    color: 'var(--interactive-fg)',
                     cursor: 'pointer',
                   }}
                 >
@@ -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}
@@ -232,7 +251,7 @@ export function ApprovalCard({ pendingApproval, onApproval }: Props) {
                         </div>
                         <div className="claude-choice-right">
                           {isMultiSelect ? (
-                            <span style={{ fontSize: '1.1rem', color: isSelected ? '#10b981' : 'var(--text-muted)' }}>
+                            <span style={{ fontSize: '1.1rem', color: isSelected ? 'var(--interactive-fg)' : 'var(--text-muted)' }}>
                               {isSelected ? '☑' : '☐'}
                             </span>
                           ) : (
@@ -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%')
+  })
+})