@pheem49/mint 1.16.0 → 1.17.0

package/src/renderer/shared/components/{SourcesBlock.tsx → chat/SourcesBlock.tsx}

@@ -1,7 +1,8 @@
-import React, { useState, useMemo, useEffect } from 'react'
-import type { WebSearchSource } from '../utils/agentActivity'
-import { resolveMediaUrl } from '../utils/markdown'
-import '../css/sources-block.css'
+import React, { useState, useMemo } from 'react'
+import type { WebSearchSource } from '../../utils/agentActivity'
+import { resolveMediaUrl } from '../../utils/markdown'
+import { runtimePlatform } from '../../platform'
+import '../../css/sources-block.css'
 
 export interface SourcesBlockProps {
   sources: WebSearchSource[]
@@ -51,17 +52,6 @@ export function groupSourcesByDomain(sources: WebSearchSource[]): DomainGroup[]
 export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function SourcesBlock({ sources }) {
   const [isExpanded, setIsExpanded] = useState(false)
   const [openDropdownDomain, setOpenDropdownDomain] = useState<string | null>(null)
-  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 domainGroups = useMemo(() => {
     const groups = groupSourcesByDomain(sources)
@@ -100,11 +90,11 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
           strokeWidth="2"
           strokeLinecap="round"
           strokeLinejoin="round"
-          style={{ color: '#94a3b8' }}
+          style={{ color: 'var(--text-muted)' }}
         >
           <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
         </svg>
-        <span style={{ fontSize: '0.85rem', fontWeight: 600, color: isDark ? '#f1f5f9' : '#0f172a', letterSpacing: '0.01em' }}>
+        <span style={{ fontSize: '0.85rem', fontWeight: 600, color: 'var(--text-primary)', letterSpacing: '0.01em' }}>
           Sources
         </span>
       </div>
@@ -134,7 +124,7 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
                   justifyContent: 'space-between',
                   borderRadius: '16px',
                   background: 'var(--bg-surface-soft)',
-                  border: `1px solid ${isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.1)'}`,
+                  border: '1px solid var(--border-subtle)',
                   transition: 'all 0.15s ease',
                   cursor: 'pointer',
                   minHeight: '68px',
@@ -150,18 +140,21 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
                     return
                   }
                   // Otherwise open primary link
-                  window.open(primaryItem.url, '_blank', 'noopener,noreferrer')
+                  void runtimePlatform.openExternal(primaryItem.url).catch((err) => {
+                    console.error('Failed to open source URL:', err)
+                    window.open(primaryItem.url, '_blank', 'noopener,noreferrer')
+                  })
                 }}
                 onMouseEnter={(e) => {
                   const el = e.currentTarget
                   el.style.background = 'var(--bg-surface-hover)'
-                  el.style.borderColor = isDark ? 'rgba(255,255,255,0.16)' : 'rgba(15,23,42,0.2)'
+                  el.style.borderColor = 'var(--border-strong)'
                   el.style.transform = 'translateY(-1px)'
                 }}
                 onMouseLeave={(e) => {
                   const el = e.currentTarget
                   el.style.background = 'var(--bg-surface-soft)'
-                  el.style.borderColor = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.1)'
+                  el.style.borderColor = 'var(--border-subtle)'
                   el.style.transform = 'translateY(0)'
                 }}
               >
@@ -221,7 +214,7 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
                       <span
                         style={{
                           fontSize: '0.73rem',
-                          color: '#94a3b8',
+                          color: 'var(--text-muted)',
                           overflow: 'hidden',
                           textOverflow: 'ellipsis',
                           whiteSpace: 'nowrap',
@@ -239,9 +232,9 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
                         style={{
                           fontSize: '0.68rem',
                           fontWeight: 600,
-                          color: '#38bdf8',
-                          background: 'rgba(56, 189, 248, 0.12)',
-                          border: '1px solid rgba(56, 189, 248, 0.3)',
+                          color: 'var(--interactive-fg)',
+                          background: 'var(--accent-subtle)',
+                          border: '1px solid var(--accent-border)',
                           padding: '1px 6px',
                           borderRadius: '4px',
                           flexShrink: 0,
@@ -258,7 +251,7 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
                         +{extraCount}
                       </button>
                     ) : (
-                      <span style={{ fontSize: '0.7rem', color: '#64748b', fontWeight: 500, flexShrink: 0 }}>
+                      <span style={{ fontSize: '0.7rem', color: 'var(--text-muted)', fontWeight: 500, flexShrink: 0 }}>
                         •{groupIdx + 1}
                       </span>
                     )}
@@ -278,7 +271,7 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
                     background: 'var(--bg-overlay)',
                     border: '1px solid var(--border-default)',
                     borderRadius: '14px',
-                    boxShadow: '0 10px 25px rgba(0,0,0,0.6)',
+                    boxShadow: 'var(--shadow-lg)',
                     zIndex: 40,
                     padding: '6px',
                     display: 'flex',
@@ -303,7 +296,7 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
                       style={{
                         background: 'none',
                         border: 'none',
-                        color: '#64748b',
+                        color: 'var(--text-muted)',
                         cursor: 'pointer',
                         fontSize: '0.8rem',
                         padding: '0 2px',
@@ -337,7 +330,7 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
                       <div style={{ fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                         {itemIdx + 1}. {item.title}
                       </div>
-                      <div style={{ fontSize: '0.68rem', color: '#64748b', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                      <div style={{ fontSize: '0.68rem', color: 'var(--text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                         {item.url}
                       </div>
                     </a>
@@ -362,7 +355,7 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
               padding: '10px 14px',
               borderRadius: '16px',
               background: 'var(--bg-surface-soft)',
-              border: `1px solid ${isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.1)'}`,
+              border: '1px solid var(--border-subtle)',
               cursor: 'pointer',
               transition: 'all 0.15s ease',
               boxSizing: 'border-box',
@@ -370,13 +363,13 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
             onMouseEnter={(e) => {
               const el = e.currentTarget
               el.style.background = 'var(--bg-surface-hover)'
-              el.style.borderColor = isDark ? 'rgba(255,255,255,0.16)' : 'rgba(15,23,42,0.2)'
+              el.style.borderColor = 'var(--border-strong)'
               el.style.transform = 'translateY(-1px)'
             }}
             onMouseLeave={(e) => {
               const el = e.currentTarget
               el.style.background = 'var(--bg-surface-soft)'
-              el.style.borderColor = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.1)'
+              el.style.borderColor = 'var(--border-subtle)'
               el.style.transform = 'translateY(0)'
             }}
           >
@@ -391,9 +384,9 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
                   height={18}
                   style={{
                     borderRadius: '50%',
-                    border: '1.5px solid #18181b',
+                    border: '1.5px solid var(--bg-surface)',
                     marginLeft: idx === 0 ? 0 : '-6px',
-                    background: '#27272a',
+                    background: 'var(--bg-surface-raised)',
                     objectFit: 'cover',
                   }}
                   onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = 'none' }}
@@ -401,7 +394,7 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
               ))}
             </div>
 
-            <span style={{ fontSize: '0.78rem', fontWeight: 500, color: '#94a3b8', marginLeft: '8px' }}>
+            <span style={{ fontSize: '0.78rem', fontWeight: 500, color: 'var(--text-secondary)', marginLeft: '8px' }}>
               View {remainingSourcesCount} more
             </span>
           </button>
@@ -419,10 +412,10 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
             }}
             style={{
               background: 'var(--bg-surface-soft)',
-              border: `1px solid ${isDark ? 'rgba(255,255,255,0.1)' : 'rgba(15,23,42,0.12)'}`,
+              border: '1px solid var(--border-subtle)',
               borderRadius: '8px',
               padding: '4px 10px',
-              color: '#94a3b8',
+              color: 'var(--text-secondary)',
               fontSize: '0.73rem',
               fontWeight: 500,
               cursor: 'pointer',

package/src/renderer/shared/components/{ThinkingBlock.tsx → chat/ThinkingBlock.tsx}

@@ -5,7 +5,7 @@
  */
 import { useEffect, useRef, useState } from 'react'
 import { Brain, ChevronRight } from 'lucide-react'
-import { renderFormattedMessage } from '../utils/markdown'
+import { renderFormattedMessage } from '../../utils/markdown'
 
 const THINKING_LABELS = {
   live: 'Thinking…',

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

@@ -0,0 +1,86 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import TurnFileChanges, { getCommonDirectory } from './TurnFileChanges'
+
+describe('getCommonDirectory', () => {
+  it('returns empty string for empty array', () => {
+    expect(getCommonDirectory([])).toBe('')
+  })
+
+  it('returns directory for single file path', () => {
+    expect(getCommonDirectory(['/home/user/project/file.ts'])).toBe('/home/user/project')
+  })
+
+  it('extracts common directory across multiple paths', () => {
+    const paths = [
+      '/home/pheem49/Downloads/Cosplay/probe_api.py',
+      '/home/pheem49/Downloads/Cosplay/scan_bundle.py',
+      '/home/pheem49/Downloads/Cosplay/fetch_api.py',
+    ]
+    expect(getCommonDirectory(paths)).toBe('/home/pheem49/Downloads/Cosplay')
+  })
+
+  it('extracts common root when files are in subfolders', () => {
+    const paths = [
+      '/workspace/src/components/App.tsx',
+      '/workspace/src/utils/math.ts',
+    ]
+    expect(getCommonDirectory(paths)).toBe('/workspace/src')
+  })
+})
+
+describe('TurnFileChanges UI refinement', () => {
+  it('renders common directory in summary header and hides redundant dir in file rows', () => {
+    const changes = [
+      {
+        path: '/home/pheem49/Downloads/Cosplay/probe_api.py',
+        created: true,
+        additions: 37,
+        deletions: 0,
+        hunks: [],
+      },
+      {
+        path: '/home/pheem49/Downloads/Cosplay/scan_bundle.py',
+        created: true,
+        additions: 18,
+        deletions: 0,
+        hunks: [],
+      },
+      {
+        path: '/home/pheem49/Downloads/Cosplay/fetch_api.py',
+        created: true,
+        additions: 18,
+        deletions: 0,
+        hunks: [],
+      },
+      {
+        path: '/home/pheem49/Downloads/Cosplay/main.py',
+        created: true,
+        additions: 22,
+        deletions: 0,
+        hunks: [],
+      },
+    ]
+
+    const html = renderToStaticMarkup(<TurnFileChanges changes={changes} />)
+
+    // Summary label and common directory in header
+    expect(html).toContain('4 files created')
+    expect(html).toContain('file-changes-common-dir')
+    expect(html).toContain('/home/pheem49/Downloads/Cosplay')
+
+    // Filenames without repetitive full paths
+    expect(html).toContain('probe_api.py')
+    expect(html).toContain('scan_bundle.py')
+    expect(html).toContain('fetch_api.py')
+
+    // Rounded green chip for new files
+    expect(html).toContain('file-changes-chip-new')
+    expect(html).toContain('New file')
+    expect(html).not.toContain('[NEW FILE]')
+
+    // Show more button
+    expect(html).toContain('Show 1 more file')
+  })
+})