@pheem49/mint 1.17.0 → 1.18.0

package/src/renderer/shared/utils/markdown.tsx

@@ -19,6 +19,8 @@ const MermaidCard = lazy(() => import('../components/cards/MermaidCard'))
 const UiGridCard = lazy(() => import('../components/cards/UiGridCard'))
 const UiFeatureCard = lazy(() => import('../components/cards/UiFeatureCard'))
 const UiMockupWidget = lazy(() => import('../components/cards/UiMockupWidget'))
+import { ReleaseNotesCard } from '../components/cards/ReleaseNotesCard'
+import { materialFileIcon, getExtension } from './fileIcons'
 import {
   Info,
   Lightbulb,
@@ -215,6 +217,47 @@ function highlightMentions(node: ReactNode, keyPrefix = 'm'): ReactNode {
     return parts.map((part, i) => {
       if (i % 2 === 1) {
         if (part.startsWith('@')) {
+          const rawName = part.slice(1)
+          const ext = getExtension(rawName)
+          if (ext) {
+            const iconUrl = materialFileIcon(rawName, ext)
+            return (
+              <span
+                key={`${keyPrefix}-${i}`}
+                className="chat-mention chat-file-mention"
+                title={rawName}
+              >
+                {iconUrl ? (
+                  <img
+                    src={iconUrl}
+                    alt=""
+                    width="13"
+                    height="13"
+                    style={{ width: 13, height: 13, flexShrink: 0, objectFit: 'contain' }}
+                    aria-hidden="true"
+                    draggable={false}
+                  />
+                ) : (
+                  <svg
+                    width="12"
+                    height="12"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    style={{ flexShrink: 0 }}
+                    aria-hidden="true"
+                  >
+                    <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
+                    <polyline points="14 2 14 8 20 8" />
+                  </svg>
+                )}
+                <span>{rawName}</span>
+              </span>
+            )
+          }
           return (
             <span key={`${keyPrefix}-${i}`} className="chat-mention">
               {part}
@@ -259,18 +302,20 @@ function findCodeHastNode(preNode: unknown): { properties?: { className?: unknow
 /** Clones each `<li>` child with `ordered`/`index` props so `li` can render a bullet or a number without shared state. */
 function tagListItems(children: ReactNode, opts: { ordered: boolean; start?: number }): ReactNode {
   // `Children.toArray` can include stray whitespace text nodes between <li> siblings (from
-  // loose-list formatting) — those must not consume a number, so index only real elements.
+  // loose-list formatting) — filter those out so they don't produce extra blank lines in pre-wrap.
   let n = 0
-  return Children.toArray(children).map((child) => {
-    if (!isValidElement(child)) return child
-    const index = (opts.start ?? 1) + n
-    n += 1
-    return cloneElement(child as ReactElement<{ ordered?: boolean; index?: number }>, {
-      key: child.key ?? index,
-      ordered: opts.ordered,
-      index,
+  return Children.toArray(children)
+    .filter((child) => isValidElement(child) || (typeof child === 'string' && child.trim() !== ''))
+    .map((child) => {
+      if (!isValidElement(child)) return child
+      const index = (opts.start ?? 1) + n
+      n += 1
+      return cloneElement(child as ReactElement<{ ordered?: boolean; index?: number }>, {
+        key: child.key ?? index,
+        ordered: opts.ordered,
+        index,
+      })
     })
-  })
 }
 
 /** Strips leading/trailing whitespace-only text-node children (the same stray "\n" nodes
@@ -409,7 +454,7 @@ function renderAlertBox(type: string, children: ReactNode): ReactNode {
       style={{
         margin: '14px 0',
         padding: '12px 16px',
-        borderRadius: '10px',
+        borderRadius: 'var(--radius-lg, 14px)',
         borderLeft: `4px solid ${config.border}`,
         borderTop: `1px solid ${config.borderSubtle}`,
         borderRight: `1px solid ${config.borderSubtle}`,
@@ -473,7 +518,7 @@ export function ChatMediaImage({
         className="chat-media-card chat-media-card--failed"
         style={{
           margin: '6px 0 10px',
-          borderRadius: '10px',
+          borderRadius: 'var(--radius-lg, 14px)',
           padding: '10px 14px',
           border: '1px solid var(--border, rgba(255,255,255,0.12))',
           background: 'var(--panel-bg, #141416)',
@@ -495,7 +540,7 @@ export function ChatMediaImage({
               flexShrink: 0,
               fontSize: '0.78rem',
               padding: '3px 8px',
-              borderRadius: '6px',
+              borderRadius: 'var(--radius-xs, 6px)',
               background: 'var(--bg-surface-soft, rgba(255,255,255,0.06))',
               border: '1px solid var(--border, rgba(255,255,255,0.12))',
               color: 'var(--interactive-fg-hover, #38bdf8)',
@@ -528,7 +573,7 @@ export function ChatMediaImage({
       <div
         className="chat-media-card chat-media-card--thumbnail"
         data-load-stage={stage}
-        style={{ margin: '6px 0 10px', borderRadius: '10px', overflow: 'hidden', border: '1px solid var(--border, rgba(255,255,255,0.12))', background: 'var(--panel-bg, #141416)', maxWidth: '420px' }}
+        style={{ margin: '6px 0 10px', borderRadius: 'var(--radius-lg, 14px)', overflow: 'hidden', border: '1px solid var(--border, rgba(255,255,255,0.12))', background: 'var(--panel-bg, #141416)', maxWidth: '420px' }}
       >
         <a href={pageUrl} target="_blank" rel="noopener noreferrer" title={sourceUrl ? `Open source page: ${label}` : label} style={{ display: 'flex', justifyContent: 'center', textDecoration: 'none' }}>
           <img
@@ -555,12 +600,12 @@ export function ChatMediaImage({
     )
   }
   return (
-    <div className="chat-media-card" style={{ margin: '10px 0', borderRadius: '12px', overflow: 'hidden', border: '1px solid var(--border, rgba(255,255,255,0.12))', background: 'var(--panel-bg, #141416)' }}>
+    <div className="chat-media-card" style={{ margin: '10px 0', borderRadius: 'var(--radius-xl, 18px)', overflow: 'hidden', border: '1px solid var(--border, rgba(255,255,255,0.12))', background: 'var(--panel-bg, #141416)' }}>
       <img
         src={directUrl}
         alt={label}
         referrerPolicy="no-referrer"
-        style={{ width: '100%', maxHeight: '420px', objectFit: 'contain', display: 'block', borderRadius: '8px' }}
+        style={{ width: '100%', maxHeight: '420px', objectFit: 'contain', display: 'block', borderRadius: 'var(--radius-md, 10px)' }}
         onError={handleImageError}
       />
     </div>
@@ -705,7 +750,7 @@ const mdComponents = {
     return renderCodeCard(lang, codeText)
   },
   table: ({ children }) => (
-    <div className="chat-table-container" style={{ overflowX: 'auto', margin: '14px 0', width: '100%', borderRadius: '8px', border: '1px solid var(--border-light, rgba(255, 255, 255, 0.12))', background: 'var(--panel-bg)', boxShadow: 'var(--shadow-sm, 0 4px 12px rgba(0, 0, 0, 0.15))' }}>
+    <div className="chat-table-container" style={{ overflowX: 'auto', margin: '14px 0', width: '100%', borderRadius: 'var(--radius-md, 10px)', border: '1px solid var(--border-light, rgba(255, 255, 255, 0.12))', background: 'var(--panel-bg)', boxShadow: 'var(--shadow-sm, 0 4px 12px rgba(0, 0, 0, 0.15))' }}>
       <table className="chat-table" style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.86rem', textAlign: 'left', lineHeight: '1.5' }}>
         {children}
       </table>
@@ -827,6 +872,14 @@ export function renderFormattedMessage(text: string, webSources: WebSearchSource
   const displayText = readableAssistantText(text.replace(/\r\n?/g, '\n'))
   if (!displayText) return null
 
+  if (displayText.trimStart().startsWith('# Release Notes')) {
+    return (
+      <div className="chat-formatted-body">
+        <ReleaseNotesCard markdown={displayText} />
+      </div>
+    )
+  }
+
   const segments = splitVideoSegments(displayText)
   const sourceByImage = new Map(
     webSources.filter((source) => source.imageUrl).map((source) => [resolveMediaUrl(source.imageUrl!), source.url]),
@@ -844,8 +897,8 @@ export function renderFormattedMessage(text: string, webSources: WebSearchSource
       {segments.map((segment, i) => {
         if (segment.type === 'video') {
           return (
-            <div key={`video-${i}`} className="chat-media-card" style={{ margin: '10px 0', borderRadius: '12px', overflow: 'hidden', border: '1px solid var(--border, rgba(255,255,255,0.12))', background: '#000' }}>
-              <video controls src={resolveMediaUrl(segment.src)} style={{ width: '100%', maxHeight: '400px', borderRadius: '8px', display: 'block' }} />
+            <div key={`video-${i}`} className="chat-media-card" style={{ margin: '10px 0', borderRadius: 'var(--radius-xl, 18px)', overflow: 'hidden', border: '1px solid var(--border, rgba(255,255,255,0.12))', background: '#000' }}>
+              <video controls src={resolveMediaUrl(segment.src)} style={{ width: '100%', maxHeight: '400px', borderRadius: 'var(--radius-md, 10px)', display: 'block' }} />
             </div>
           )
         }

package/src/renderer/shared/utils/markdown.webImages.test.tsx

@@ -61,6 +61,7 @@ describe('web search image links', () => {
       calcData: { result: 42 },
       imageSearchData: null,
       imageGenData: null,
+      planData: null,
     })
     expect(extractToolCardPayloads(progress, '```weather_json\n{"city":"Bangkok"}\n```').weatherData).toBeNull()
   })
@@ -159,4 +160,19 @@ describe('web search image links', () => {
     expect(html).toContain('/api/proxy-image?url=https%3A%2F%2Fpbs.twimg.com%2Fprofile_banners%2F1366430884698546176%2F1684330404%2F1500x500')
     expect(html).toContain('alt="Banner Image"')
   })
+
+  it('renders file mention with material icon and strips @ symbol', () => {
+    const html = renderToStaticMarkup(renderFormattedMessage('ดูไฟล์ @generate_harness_pdf.py ให้หน่อย'))
+    expect(html).toContain('class="chat-mention chat-file-mention"')
+    expect(html).toContain('generate_harness_pdf.py')
+    expect(html).not.toContain('@generate_harness_pdf.py')
+  })
+
+  it('preserves @ for non-file mentions like @web or @agent', () => {
+    const html = renderToStaticMarkup(renderFormattedMessage('ถาม @agent หรือค้น @web'))
+    expect(html).toContain('class="chat-mention"')
+    expect(html).toContain('@agent')
+    expect(html).toContain('@web')
+    expect(html).not.toContain('chat-file-mention')
+  })
 })

package/src/renderer/shared/utils/mcpResults.test.tsx

@@ -112,3 +112,32 @@ it('renders warning banner with icon and accessible status', () => {
   expect(html).toContain('Model input was resized/compressed')
 })
 
+describe('artifacts-only mode', () => {
+  it('hides raw calls and discovery when in artifacts-only mode', () => {
+    const progress: any[] = [
+      { type: 'ToolDiscovery', data: { server: 'chrome-devtools', tool: 'navigate_page', message: 'Tool definition ready; preparing the command.' } },
+      { type: 'ToolStart', data: { callId: '1', action: 'mcp_tool', input: { server: 'chrome-devtools', tool: 'navigate_page' } } },
+      { type: 'ToolEnd', data: { callId: '1', action: 'mcp_tool', input: { server: 'chrome-devtools', tool: 'navigate_page' }, status: 'success', result: 'ok' } },
+    ]
+    const fullHtml = renderToStaticMarkup(<McpToolResults progress={progress} />)
+    expect(fullHtml).toContain('chrome-devtools/navigate_page')
+    expect(fullHtml).toContain('Completed')
+
+    const cleanHtml = renderToStaticMarkup(<McpToolResults progress={progress} mode="artifacts-only" />)
+    expect(cleanHtml).toBe('')
+  })
+
+  it('preserves artifacts and warnings in artifacts-only mode', () => {
+    const progress: any[] = [
+      { type: 'ToolStart', data: { callId: '1', action: 'mcp_tool', input: { server: 'chrome-devtools', tool: 'screenshot' } } },
+      { type: 'ToolArtifacts', data: { callId: '1', artifacts: [{ id: 'shot', kind: 'link', name: 'page.png', uri: 'https://example.com/shot.png' }], warnings: ['high resolution'] } },
+      { type: 'ToolEnd', data: { callId: '1', action: 'mcp_tool', input: { server: 'chrome-devtools', tool: 'screenshot' }, status: 'success', result: 'ok' } },
+    ]
+    const html = renderToStaticMarkup(<McpToolResults progress={progress} mode="artifacts-only" />)
+    expect(html).not.toContain('Completed')
+    expect(html).toContain('page.png')
+    expect(html).toContain('high resolution')
+  })
+})
+
+

package/src/renderer/shared/utils/slashCommandProcessor.ts

@@ -8,7 +8,7 @@
 
 export interface SlashCommandExecutionResult {
   handled: boolean
-  action?: 'open_image_picker' | 'paste_image' | 'generate_veo' | 'system_message' | 'resume_session' | 'open_settings'
+  action?: 'open_image_picker' | 'paste_image' | 'generate_veo' | 'system_message' | 'resume_session' | 'open_settings' | 'start_voice'
   payload?: any
   systemText?: string
 }
@@ -45,6 +45,9 @@ export function executeSlashCommand(input: string): SlashCommandExecutionResult
     case '/onboard':
       return { handled: true, action: 'open_settings' }
 
+    case '/voice':
+      return { handled: true, action: 'start_voice', payload: { mode: rest } }
+
     case '/veo': {
       if (!rest) {
         return {

package/src/renderer/shared/utils/syntaxHighlight.test.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import { renderToStaticMarkup } from 'react-dom/server'
-import { renderHighlightedCode } from './syntaxHighlight'
+import { renderHighlightedCode, tokenizeLine } from './syntaxHighlight'
 
 describe('highlight reuse', () => {
   it('reuses unchanged code across rerenders and message remounts', () => {
@@ -19,4 +19,14 @@ describe('highlight reuse', () => {
     for (let i = 0; i < 100; i++) renderHighlightedCode(`const other = ${i}`, 'typescript')
     expect(renderHighlightedCode('const evicted = 0', 'typescript')).not.toBe(first)
   })
+  it('tokenizes JSX/TSX tags, attributes, and Python diff lines with appropriate tokens', () => {
+    const tsxTokens = tokenizeLine('<svg width="14" height="14">', 'tsx')
+    expect(tsxTokens.some((t) => t.type === 'token-tag' && t.text === '<')).toBe(true)
+    expect(tsxTokens.some((t) => t.type === 'token-tag' && t.text === 'svg')).toBe(true)
+    expect(tsxTokens.some((t) => t.type === 'token-property' && t.text === 'width')).toBe(true)
+    expect(tsxTokens.some((t) => t.type === 'token-string' && t.text === '"14"')).toBe(true)
+
+    const pyTokens = tokenizeLine('import os', 'py')
+    expect(pyTokens.some((t) => t.type === 'token-keyword' && t.text === 'import')).toBe(true)
+  })
 })

package/src/renderer/shared/utils/syntaxHighlight.tsx

@@ -270,6 +270,41 @@ function tokenizeGeneral(line: string, lang: string): Token[] {
       continue
     }
 
+    // HTML / JSX / TSX tags
+    if (line[i] === '<' && (lang === 'html' || lang === 'javascript' || lang === 'typescript')) {
+      if (line[i + 1] === '/') {
+        tokens.push({ type: 'token-tag', text: '</' })
+        i += 2
+        let tag = ''
+        while (i < len && /[a-zA-Z0-9_\-]/.test(line[i])) {
+          tag += line[i]
+          i++
+        }
+        if (tag) tokens.push({ type: 'token-tag', text: tag })
+        continue
+      } else if (/[a-zA-Z]/.test(line[i + 1])) {
+        tokens.push({ type: 'token-tag', text: '<' })
+        i++
+        let tag = ''
+        while (i < len && /[a-zA-Z0-9_\-]/.test(line[i])) {
+          tag += line[i]
+          i++
+        }
+        if (tag) tokens.push({ type: 'token-tag', text: tag })
+        continue
+      }
+    }
+    if ((lang === 'html' || lang === 'javascript' || lang === 'typescript') && line.slice(i, i + 2) === '/>') {
+      tokens.push({ type: 'token-tag', text: '/>' })
+      i += 2
+      continue
+    }
+    if ((lang === 'html' || lang === 'javascript' || lang === 'typescript') && line[i] === '>') {
+      tokens.push({ type: 'token-tag', text: '>' })
+      i++
+      continue
+    }
+
     // Words / Identifiers / Keywords
     if (/[a-zA-Z_$]/.test(line[i])) {
       let word = ''
@@ -293,11 +328,17 @@ function tokenizeGeneral(line: string, lang: string): Token[] {
         tokens.push({ type: 'token-keyword', text: word })
       } else if (['true', 'false', 'null', 'undefined', 'None', 'True', 'False'].includes(word)) {
         tokens.push({ type: 'token-boolean', text: word })
+      } else if (lang === 'python' && ['self', 'cls'].includes(word)) {
+        tokens.push({ type: 'token-variable', text: word })
       } else {
-        // Function call check
+        // Attribute / property check (e.g. attr="val", key: value)
         let peek = i
         while (peek < len && /\s/.test(line[peek])) peek++
-        if (peek < len && line[peek] === '(') {
+        if (peek < len && line[peek] === '=' && line[peek + 1] !== '=' && line[peek + 1] !== '>') {
+          tokens.push({ type: 'token-property', text: word })
+        } else if (peek < len && line[peek] === ':' && line[peek + 1] !== ':') {
+          tokens.push({ type: 'token-property', text: word })
+        } else if (peek < len && line[peek] === '(') {
           tokens.push({ type: 'token-function', text: word })
         } else if (/^[A-Z][a-zA-Z0-9_]*$/.test(word)) {
           tokens.push({ type: 'token-type', text: word })
@@ -308,7 +349,14 @@ function tokenizeGeneral(line: string, lang: string): Token[] {
       continue
     }
 
-    // Punctuation & Operators
+    // Operators
+    if (['=', '+', '-', '*', '/', '%', '!', '&', '|', '^', '?', ':', '~'].includes(line[i])) {
+      tokens.push({ type: 'token-operator', text: line[i] })
+      i++
+      continue
+    }
+
+    // Punctuation
     tokens.push({ type: 'token-punctuation', text: line[i] })
     i++
   }