@pheem49/mint 1.16.0 → 1.18.0

package/src/renderer/shared/components/activity/AskUserActivityCard.test.tsx

@@ -0,0 +1,122 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { AskUserActivityCard } from './AskUserActivityCard'
+import { AgentActivityTable } from './AgentActivityTable'
+import { activitiesFrom } from '../../utils/agentActivity'
+
+describe('AskUserActivityCard', () => {
+  it('returns null when questions list is empty', () => {
+    const html = renderToStaticMarkup(<AskUserActivityCard questions={[]} />)
+    expect(html).toBe('')
+  })
+
+  it('renders single question card with "1 question" header and answer', () => {
+    const html = renderToStaticMarkup(
+      <AskUserActivityCard
+        questions={[
+          {
+            question: 'Which framework should we use?',
+            answer: 'React + TypeScript',
+          },
+        ]}
+      />,
+    )
+
+    expect(html).toContain('1 question')
+    expect(html).toContain('Which framework should we use?')
+    expect(html).toContain('React + TypeScript')
+    expect(html).toContain('modern-ask-user-card')
+    expect(html).toContain('modern-ask-user-header')
+  })
+
+  it('renders multi-question card matching user design with "3 questions"', () => {
+    const html = renderToStaticMarkup(
+      <AskUserActivityCard
+        questions={[
+          {
+            question: 'คุณต้องการใช้ภาษาและเทคโนโลยีใดในการสร้าง MCP Server (Hardware Tooling)?',
+            answer: '(Recommended) Python (ใช้ FastMCP / mcp SDK + pyserial + psutil) — พัฒนาไวและมีไลบรารีฮาร์ดแวร์/OS ครบครัน',
+          },
+          {
+            question: 'คุณต้องการให้สร้างโมดูลใดบ้างในเวอร์ชันแรกนี้?',
+            answer: 'USB / Serial Bridge, Hardware Flashing & Toolchains, Process & Port Management',
+          },
+          {
+            question: 'สำหรับฝั่ง Toolchain & Flashing คุณใช้งานเครื่องมือตัวไหนเป็นหลัก?',
+            answer: 'Arduino CLI (arduino-cli), PlatformIO (pio), ESP-IDF / esptool',
+          },
+        ]}
+      />,
+    )
+
+    expect(html).toContain('3 questions')
+    expect(html).toContain('คุณต้องการใช้ภาษาและเทคโนโลยีใดในการสร้าง MCP Server')
+    expect(html).toContain('(Recommended) Python')
+    expect(html).toContain('คุณต้องการให้สร้างโมดูลใดบ้างในเวอร์ชันแรกนี้?')
+    expect(html).toContain('USB / Serial Bridge')
+    expect(html).toContain('Toolchain')
+    expect(html).toContain('Flashing คุณใช้งานเครื่องมือตัวไหนเป็นหลัก?')
+    expect(html).toContain('Arduino CLI')
+  })
+
+  it('renders optional header in headerText if specified', () => {
+    const html = renderToStaticMarkup(
+      <AskUserActivityCard
+        header="MCP Config"
+        questions={[
+          {
+            question: 'Port number?',
+            answer: '3000',
+          },
+        ]}
+      />,
+    )
+
+    expect(html).toContain('1 question · MCP Config')
+    expect(html).toContain('Port number?')
+    expect(html).toContain('3000')
+  })
+
+  it('renders within AgentActivityTable when activity is answered (done)', () => {
+    const view = activitiesFrom([
+      {
+        type: 'ToolStart',
+        data: {
+          action: 'ask_user',
+          input: { query: 'Which model should be used?' },
+        },
+      },
+      {
+        type: 'ToolEnd',
+        data: {
+          action: 'ask_user',
+          result: 'User answered: Gemini 2.5 Pro',
+        },
+      },
+    ])
+
+    const html = renderToStaticMarkup(<AgentActivityTable activityView={view} />)
+    expect(html).toContain('modern-ask-user-card')
+    expect(html).toContain('1 question')
+    expect(html).toContain('Which model should be used?')
+    expect(html).toContain('Gemini 2.5 Pro')
+  })
+
+  it('renders standard active item while ask_user is waiting to be answered', () => {
+    const view = activitiesFrom([
+      {
+        type: 'ToolStart',
+        data: {
+          action: 'ask_user',
+          input: { query: 'Waiting for your answer...' },
+        },
+      },
+    ])
+
+    const html = renderToStaticMarkup(<AgentActivityTable activityView={view} />)
+    expect(html).not.toContain('modern-ask-user-card')
+    expect(html).toContain('Asked')
+    expect(html).toContain('Waiting for your answer...')
+  })
+})

package/src/renderer/shared/components/activity/AskUserActivityCard.tsx

@@ -0,0 +1,70 @@
+/**
+ * shared/components/activity/AskUserActivityCard.tsx
+ * Sleek questions & answers card rendered in the agent activity timeline after
+ * the user has answered an ask_user prompt.
+ * Shared across Desktop and Web — do NOT duplicate.
+ */
+import React, { memo } from 'react'
+import type { AskUserItem } from '../../utils/agentActivity'
+import { renderFormattedMessage } from '../../utils/markdown'
+
+export interface AskUserActivityCardProps {
+  questions: AskUserItem[]
+  header?: string
+  className?: string
+}
+
+export const AskUserActivityCard = memo(function AskUserActivityCard({
+  questions,
+  header,
+  className,
+}: AskUserActivityCardProps) {
+  if (!questions || questions.length === 0) return null
+
+  const count = questions.length
+  const countLabel = count === 1 ? '1 question' : `${count} questions`
+  const headerText = header ? `${countLabel} · ${header}` : countLabel
+
+  return (
+    <div
+      className={`modern-ask-user-card ${className || ''}`.trim()}
+      data-testid="ask-user-activity-card"
+    >
+      <div className="modern-ask-user-header">
+        <span className="modern-ask-user-header-icon" aria-hidden="true">
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="modern-ask-user-icon"
+          >
+            <rect x="3" y="3" width="18" height="18" rx="4" />
+            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+            <line x1="12" y1="17" x2="12.01" y2="17" strokeWidth="2.5" />
+          </svg>
+        </span>
+        <span className="modern-ask-user-header-text">{headerText}</span>
+      </div>
+
+      <div className="modern-ask-user-items">
+        {questions.map((item, index) => (
+          <div key={index} className="modern-ask-user-item">
+            <div className="modern-ask-user-question">
+              {renderFormattedMessage(item.question) ?? item.question}
+            </div>
+            {item.answer && (
+              <div className="modern-ask-user-answer">
+                {renderFormattedMessage(item.answer) ?? item.answer}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+})

package/src/renderer/shared/components/{McpToolResults.tsx → activity/McpToolResults.tsx}

@@ -1,9 +1,10 @@
 import { memo, useEffect, useMemo, useRef, useState } from 'react'
-import type { AgentProgress, McpArtifact } from '../types'
-import { mediaPlatform } from '../platform'
-import '../css/mcp-results.css'
+import { Info, X } from 'lucide-react'
+import type { AgentProgress, McpArtifact } from '../../types'
+import { mediaPlatform } from '../../platform'
+import '../../css/mcp-results.css'
 
-function Artifact({ artifact }: { artifact: McpArtifact }) {
+function Artifact({ artifact, chatId }: { artifact: McpArtifact; chatId?: string }) {
   const [src, setSrc] = useState('')
   const [error, setError] = useState('')
   const dialog = useRef<HTMLDialogElement>(null)
@@ -11,12 +12,12 @@ function Artifact({ artifact }: { artifact: McpArtifact }) {
     if (artifact.kind === 'link') return
     let active = true
     let loaded = ''
-    mediaPlatform.readMcpArtifact(artifact.id).then(url => {
+    mediaPlatform.readMcpArtifact(artifact.id, chatId).then(url => {
       if (!active) { if (url.startsWith('blob:')) URL.revokeObjectURL(url); return }
       loaded = url; setSrc(url)
     }).catch(() => { if (active) setError('Attachment unavailable') })
     return () => { active = false; if (loaded.startsWith('blob:')) URL.revokeObjectURL(loaded) }
-  }, [artifact.id, artifact.kind])
+  }, [artifact.id, artifact.kind, chatId])
   if (artifact.kind === 'link') {
     // Custom resource URIs are copied as text; only web URLs are navigable.
     return /^https?:\/\//i.test(artifact.uri || '')
@@ -28,17 +29,38 @@ function Artifact({ artifact }: { artifact: McpArtifact }) {
       <button type="button" className="mcp-image-button" onClick={() => dialog.current?.showModal()} aria-label={`View ${artifact.name}`}>
         <img src={src} alt={artifact.name} onError={() => setError('Image unavailable')} />
       </button>
-      <dialog ref={dialog} className="mcp-image-dialog" aria-label={artifact.name}>
-        <button type="button" onClick={() => dialog.current?.close()}>Close</button>
+      <dialog ref={dialog} className="mcp-image-dialog" aria-label={artifact.name}
+        onClose={() => dialog.current?.close()} onClick={event => { if (event.target === event.currentTarget) dialog.current?.close() }}>
+        <header>
+          <span title={artifact.name}>{artifact.name}</span>
+          <button type="button" aria-label="Close" onClick={() => dialog.current?.close()}><X size={18} /></button>
+        </header>
         <img src={src} alt={artifact.name} />
       </dialog>
     </>}
     {src ? <a href={src} download={artifact.name}>{artifact.name} · {(artifact.size / 1024).toFixed(1)} KB</a> : <span>{artifact.name} · {error || 'Loading attachment…'}</span>}
+    {artifact.metadata?.url && <span title={artifact.metadata.url}>{artifact.metadata.url}</span>}
+    {!!artifact.metadata?.width && !!artifact.metadata?.height && <span>{artifact.metadata.width} × {artifact.metadata.height}</span>}
+    {artifact.metadata?.capturedAt && <time dateTime={artifact.metadata.capturedAt}>{artifact.metadata.capturedAt}</time>}
     {error && src && <span role="status">{error}</span>}
   </div>
 }
 
-export default memo(function McpToolResults({ progress, running = false, interrupted = false }: { progress: AgentProgress[]; running?: boolean; interrupted?: boolean }) {
+export interface McpToolResultsProps {
+  progress: AgentProgress[]
+  running?: boolean
+  interrupted?: boolean
+  chatId?: string
+  mode?: 'full' | 'artifacts-only'
+}
+
+export default memo(function McpToolResults({
+  progress,
+  running = false,
+  interrupted = false,
+  chatId,
+  mode = 'full',
+}: McpToolResultsProps) {
   const [, tick] = useState(0)
   const started = useRef(new Map<string, number>())
   const { calls, discovery, artifacts, warnings } = useMemo(() => {
@@ -69,14 +91,41 @@ export default memo(function McpToolResults({ progress, running = false, interru
     }
     return { calls, discovery, artifacts, warnings }
   }, [progress])
+  const displayedArtifacts = useMemo(() => {
+    return [...artifacts.values()].filter(artifact => artifact.server !== 'view_image')
+  }, [artifacts])
   const hasActiveCalls = running && [...calls.values()].some(call => !call.status)
   useEffect(() => {
     if (!hasActiveCalls) return
     const timer = setInterval(() => tick(n => n + 1), 1000)
     return () => clearInterval(timer)
   }, [hasActiveCalls])
-  if (!calls.size && !artifacts.size && !warnings.size && !discovery.size) return null
-  return <section className="mcp-results" aria-label="MCP results">
+  const isOnlyWarnings = !calls.size && !displayedArtifacts.length && !discovery.size && warnings.size > 0
+
+  if (mode === 'artifacts-only') {
+    if (!displayedArtifacts.length && !warnings.size) return null
+    const artifactsOnlyWarnings = !displayedArtifacts.length && warnings.size > 0
+    return (
+      <section className={`mcp-results${artifactsOnlyWarnings ? ' mcp-results-compact' : ''}`} aria-label="MCP results">
+        {displayedArtifacts.length > 0 && (
+          <div className="mcp-artifacts">
+            {displayedArtifacts.map(artifact => (
+              <Artifact key={artifact.id} artifact={artifact} chatId={chatId} />
+            ))}
+          </div>
+        )}
+        {[...warnings].map(warning => (
+          <div key={warning} className="mcp-warning-banner" role="status">
+            <Info size={14} className="mcp-warning-icon" aria-hidden="true" />
+            <span className="mcp-warning-text">{warning}</span>
+          </div>
+        ))}
+      </section>
+    )
+  }
+
+  if (!calls.size && !displayedArtifacts.length && !warnings.size && !discovery.size) return null
+  return <section className={`mcp-results${isOnlyWarnings ? ' mcp-results-compact' : ''}`} aria-label="MCP results">
     {[...discovery].map(([label,message])=><div key={label} className="mcp-call-status" role="status"><strong>{label}</strong><span>{message}</span></div>)}
     {[...calls].map(([id, call]) => {
       const active = running && !call.status
@@ -85,6 +134,7 @@ export default memo(function McpToolResults({ progress, running = false, interru
       const deviceLabel=call.device && (active && !interrupted || ['verified','failed','unconfirmed'].includes(call.device.state)) ? ({accepted:'Command accepted; awaiting device confirmation',running:'Awaiting device completion',verified:'Device completion verified',failed:'Device reported failure',unconfirmed:'Device completion unconfirmed'}[call.device.state]) : undefined
       const status = call.status === 'cancelled' || (!call.status && interrupted) ? 'Stopped waiting; remote work may still be running.'
         : call.status === 'timed_out' ? 'Timed out; remote completion is unconfirmed.'
+        : call.status === 'skipped' ? 'Skipped'
         : call.status === 'failed' ? 'Failed' : call.status === 'success' ? 'Completed' : active ? `Working · ${elapsed}s` : 'Interrupted; result unconfirmed'
       return <div key={id} className="mcp-call-status" role="status">
         <strong>{call.label}</strong><span>{deviceLabel || status}</span>
@@ -93,7 +143,13 @@ export default memo(function McpToolResults({ progress, running = false, interru
         {active && percent !== undefined && <progress max={100} value={percent} aria-label={`${call.label} progress`}>{percent}%</progress>}
       </div>
     })}
-    <div className="mcp-artifacts">{[...artifacts.values()].map(artifact => <Artifact key={artifact.id} artifact={artifact} />)}</div>
-    {[...warnings].map(warning => <p key={warning} role="status">{warning}</p>)}
+    {displayedArtifacts.length > 0 && <div className="mcp-artifacts">{displayedArtifacts.map(artifact => <Artifact key={artifact.id} artifact={artifact} chatId={chatId} />)}</div>}
+    {[...warnings].map(warning => (
+      <div key={warning} className="mcp-warning-banner" role="status">
+        <Info size={14} className="mcp-warning-icon" aria-hidden="true" />
+        <span className="mcp-warning-text">{warning}</span>
+      </div>
+    ))}
   </section>
 })
+

package/src/renderer/shared/components/{PlanChecklistWidget.tsx → activity/PlanChecklistWidget.tsx}

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { ActivePlan } from '../types'
+import type { ActivePlan } from '../../types'
 import { CheckCircle2, Circle, Loader2, XCircle, ListTodo } from 'lucide-react'
 
 interface PlanChecklistWidgetProps {
@@ -64,7 +64,7 @@ export function PlanChecklistWidget({ plan, className = '' }: PlanChecklistWidge
                 )}
                 {isFailed && <XCircle style={{ width: '14px', height: '14px', color: 'var(--status-error, #ef4444)' }} />}
                 {!isDone && !isRunning && !isFailed && (
-                  <Circle style={{ width: '14px', height: '14px', color: 'rgba(255, 255, 255, 0.3)' }} />
+                  <Circle style={{ width: '14px', height: '14px', color: 'var(--text-muted)' }} />
                 )}
               </span>
               <span className="plan-task-text">{task.title}</span>

package/src/renderer/shared/components/activity/RunSummaryDashboard.test.tsx

@@ -0,0 +1,127 @@
+import { describe, it, expect } from 'vitest'
+// @ts-ignore react-dom/server lacks types without @types/react-dom
+import { renderToStaticMarkup } from 'react-dom/server'
+import React from 'react'
+import { RunSummaryDashboard, formatRunDuration } from './RunSummaryDashboard'
+import type { RunTelemetrySummary } from '../../types'
+
+describe('RunSummaryDashboard and formatRunDuration', () => {
+  it('formats duration correctly under 60 seconds', () => {
+    expect(formatRunDuration(14.5)).toEqual({ value: '14.5s' })
+    expect(formatRunDuration(0.8)).toEqual({ value: '0.8s' })
+  })
+
+  it('formats duration into minutes and seconds when >= 60 seconds', () => {
+    const formatted = formatRunDuration(81.8)
+    expect(formatted.value).toBe('1m 21.8s')
+    expect(formatted.subtext).toBe('81.8s')
+
+    const formatted60 = formatRunDuration(60.0)
+    expect(formatted60.value).toBe('1m 00.0s')
+    expect(formatted60.subtext).toBe('60.0s')
+  })
+
+  it('formats duration with hours when >= 3600 seconds', () => {
+    const formatted = formatRunDuration(3665)
+    expect(formatted.value).toBe('1h 1m')
+    expect(formatted.subtext).toBe('3665.0s')
+  })
+
+  it('renders Duration with minute breakdown and raw seconds in subtext', () => {
+    const mockSummary: RunTelemetrySummary = {
+      runId: 'test-run-123',
+      task: 'test-task',
+      outcome: 'SUCCESS',
+      durationSecs: 81.8,
+      totalTokens: 12500,
+      toolCallsCount: 5,
+      retriesCount: 1,
+      filesChanged: ['a.txt', 'b.txt'],
+      filesCreated: ['b.txt'],
+      toolTimeline: [],
+    }
+
+    const html = renderToStaticMarkup(<RunSummaryDashboard summary={mockSummary} />)
+
+    expect(html).toContain('Run summary')
+    expect(html).toContain('1m 21.8s')
+    expect(html).toContain('· 81.8s')
+    expect(html).toContain('12.5k')
+    expect(html).toContain('Success')
+    expect(html).not.toContain('Tool call timeline')
+  })
+
+  it('renders Completed badge with success class for PARTIAL outcome', () => {
+    const summary: RunTelemetrySummary = {
+      runId: 'r3',
+      task: 'casual chat',
+      outcome: 'PARTIAL',
+      durationSecs: 2.1,
+      totalTokens: 1200,
+      toolCallsCount: 0,
+      retriesCount: 0,
+      filesChanged: [],
+      filesCreated: [],
+      toolTimeline: [],
+    }
+    const html = renderToStaticMarkup(<RunSummaryDashboard summary={summary} />)
+    expect(html).toContain('run-summary-badge success')
+    expect(html).toContain('Completed')
+    expect(html).not.toContain('Failure')
+  })
+
+  it('renders Verified badge with success class for VERIFIED outcome', () => {
+    const summary: RunTelemetrySummary = {
+      runId: 'r4',
+      task: 'verified task',
+      outcome: 'VERIFIED',
+      durationSecs: 15.0,
+      totalTokens: 5000,
+      toolCallsCount: 2,
+      retriesCount: 0,
+      filesChanged: [],
+      filesCreated: [],
+      toolTimeline: [],
+    }
+    const html = renderToStaticMarkup(<RunSummaryDashboard summary={summary} />)
+    expect(html).toContain('run-summary-badge success')
+    expect(html).toContain('Verified')
+  })
+
+  it('renders Failure badge with failure class for FAILED outcome', () => {
+    const summary: RunTelemetrySummary = {
+      runId: 'r5',
+      task: 'failed task',
+      outcome: 'FAILED',
+      durationSecs: 5.0,
+      totalTokens: 2000,
+      toolCallsCount: 1,
+      retriesCount: 0,
+      filesChanged: [],
+      filesCreated: [],
+      toolTimeline: [],
+    }
+    const html = renderToStaticMarkup(<RunSummaryDashboard summary={summary} />)
+    expect(html).toContain('run-summary-badge failure')
+    expect(html).toContain('Failure')
+  })
+
+  it('renders Export Trajectory action button in header', () => {
+    const summary: RunTelemetrySummary = {
+      runId: 'run-traj-42',
+      task: 'export trajectory test',
+      outcome: 'SUCCESS',
+      durationSecs: 3.2,
+      totalTokens: 1500,
+      toolCallsCount: 2,
+      retriesCount: 0,
+      filesChanged: ['src/app.ts'],
+      filesCreated: [],
+      toolTimeline: [],
+    }
+    const html = renderToStaticMarkup(<RunSummaryDashboard summary={summary} />)
+    expect(html).toContain('run-summary-export-btn')
+    expect(html).toContain('Export Trajectory')
+    expect(html).toContain('title="Export SWE-bench / Agent Protocol compliant trajectory JSON"')
+  })
+})