@pheem49/mint 1.16.0 → 1.18.0

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

@@ -1,7 +1,9 @@
-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, useRef, useEffect, useLayoutEffect } from 'react'
+import { createPortal } from 'react-dom'
+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 +53,14 @@ 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 [popoverPos, setPopoverPos] = useState<{
+    top: number
+    left: number
+    width: number
+    maxHeight: number
+  }>({ top: 0, left: 0, width: 280, maxHeight: 320 })
+  const cardRefs = useRef<Map<string, HTMLDivElement>>(new Map())
+  const popoverRef = useRef<HTMLDivElement | null>(null)
 
   const domainGroups = useMemo(() => {
     const groups = groupSourcesByDomain(sources)
@@ -74,6 +73,91 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
     })
   }, [sources])
 
+  const updatePopoverPosition = (domain: string) => {
+    const el = cardRefs.current.get(domain)
+    if (!el) return
+    const r = el.getBoundingClientRect()
+    if (r.bottom < 0 || r.top > window.innerHeight) {
+      setOpenDropdownDomain(null)
+      return
+    }
+    const popoverWidth = Math.min(280, window.innerWidth - 32)
+    const below = Math.max(0, window.innerHeight - r.bottom - 12)
+    const above = Math.max(0, r.top - 12)
+    const openUpward = below < 240 && above > below
+    const maxHeight = Math.min(320, openUpward ? above : below)
+
+    let left = r.left
+    if (left + popoverWidth > window.innerWidth - 16) {
+      left = Math.max(16, r.right - popoverWidth)
+    }
+    left = Math.max(16, Math.min(left, window.innerWidth - popoverWidth - 16))
+
+    const top = openUpward ? Math.max(8, r.top - 6 - maxHeight) : r.bottom + 6
+
+    setPopoverPos({
+      top,
+      left,
+      width: popoverWidth,
+      maxHeight,
+    })
+  }
+
+  const toggleDropdown = (domain: string) => {
+    if (openDropdownDomain === domain) {
+      setOpenDropdownDomain(null)
+      return
+    }
+    updatePopoverPosition(domain)
+    setOpenDropdownDomain(domain)
+  }
+
+  useLayoutEffect(() => {
+    if (!openDropdownDomain) return
+    updatePopoverPosition(openDropdownDomain)
+
+    const onScrollOrResize = (e: Event) => {
+      if (popoverRef.current?.contains(e.target as Node)) return
+      updatePopoverPosition(openDropdownDomain)
+    }
+
+    window.addEventListener('resize', onScrollOrResize)
+    window.addEventListener('scroll', onScrollOrResize, true)
+    return () => {
+      window.removeEventListener('resize', onScrollOrResize)
+      window.removeEventListener('scroll', onScrollOrResize, true)
+    }
+  }, [openDropdownDomain])
+
+  useEffect(() => {
+    if (!openDropdownDomain) return
+
+    const handlePointerDown = (e: PointerEvent) => {
+      const target = e.target as Node
+      const currentCardEl = cardRefs.current.get(openDropdownDomain)
+      if (
+        popoverRef.current &&
+        !popoverRef.current.contains(target) &&
+        (!currentCardEl || !currentCardEl.contains(target))
+      ) {
+        setOpenDropdownDomain(null)
+      }
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setOpenDropdownDomain(null)
+      }
+    }
+
+    document.addEventListener('pointerdown', handlePointerDown)
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown)
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [openDropdownDomain])
+
   if (!sources || sources.length === 0) return null
 
   const MAX_INITIAL_CARDS = 3
@@ -86,9 +170,21 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
     .reduce((sum, g) => sum + g.items.length, 0)
   const remainingSourcesCount = sources.length - shownSourcesCount
   const hiddenGroups = domainGroups.slice(MAX_INITIAL_CARDS)
+  const activeGroup = openDropdownDomain ? domainGroups.find((g) => g.domain === openDropdownDomain) : null
 
   return (
-    <div className="sources-block" style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginBottom: '12px', marginTop: '4px' }}>
+    <div
+      className="sources-block"
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px',
+        marginBottom: '12px',
+        marginTop: '4px',
+        position: openDropdownDomain ? 'relative' : undefined,
+        zIndex: openDropdownDomain ? 30 : undefined,
+      }}
+    >
       {/* Header */}
       <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
         <svg
@@ -100,11 +196,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>
@@ -123,18 +219,27 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
           const extraCount = group.items.length - 1
           const isDropdownOpen = openDropdownDomain === group.domain
 
-          return (
+          const activeGroup = openDropdownDomain ? domainGroups.find((g) => g.domain === openDropdownDomain) : null
+
+  return (
             <div
               key={group.domain}
-              className="source-card-group"
+              ref={(el) => {
+                if (el) cardRefs.current.set(group.domain, el)
+                else cardRefs.current.delete(group.domain)
+              }}
+              className={`source-card-group${isDropdownOpen ? ' is-open' : ''}`}
+              style={{
+                zIndex: isDropdownOpen ? 50 : undefined,
+              }}
             >
               <div
                 className="source-card"
                 style={{
                   justifyContent: 'space-between',
-                  borderRadius: '16px',
+                  borderRadius: 'var(--radius-xl, 18px)',
                   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',
@@ -146,22 +251,25 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
                   const target = e.target as HTMLElement
                   if (extraCount > 0 && target.closest('.extra-badge-btn')) {
                     e.stopPropagation()
-                    setOpenDropdownDomain(isDropdownOpen ? null : group.domain)
+                    toggleDropdown(group.domain)
                     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)'
                 }}
               >
@@ -215,13 +323,13 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
                         alt=""
                         width={14}
                         height={14}
-                        style={{ borderRadius: '3px', flexShrink: 0 }}
+                        style={{ borderRadius: 'var(--radius-xs, 6px)', flexShrink: 0 }}
                         onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = 'none' }}
                       />
                       <span
                         style={{
                           fontSize: '0.73rem',
-                          color: '#94a3b8',
+                          color: 'var(--text-muted)',
                           overflow: 'hidden',
                           textOverflow: 'ellipsis',
                           whiteSpace: 'nowrap',
@@ -239,11 +347,11 @@ 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',
+                          borderRadius: 'var(--radius-xs, 6px)',
                           flexShrink: 0,
                           cursor: 'pointer',
                           display: 'flex',
@@ -252,98 +360,19 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
                         }}
                         onClick={(e) => {
                           e.stopPropagation()
-                          setOpenDropdownDomain(isDropdownOpen ? null : group.domain)
+                          toggleDropdown(group.domain)
                         }}
                       >
                         +{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>
                     )}
                   </div>
                 </div>
               </div>
-
-              {/* Sub-links Popover Dropdown when multi-item domain card clicked */}
-              {isDropdownOpen && extraCount > 0 && (
-                <div
-                  className="source-links-popover"
-                  style={{
-                    position: 'absolute',
-                    top: '100%',
-                    left: 0,
-                    marginTop: '6px',
-                    background: 'var(--bg-overlay)',
-                    border: '1px solid var(--border-default)',
-                    borderRadius: '14px',
-                    boxShadow: '0 10px 25px rgba(0,0,0,0.6)',
-                    zIndex: 40,
-                    padding: '6px',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: '4px',
-                  }}
-                >
-                  <div
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'space-between',
-                      padding: '4px 6px',
-                      borderBottom: '1px solid var(--border-subtle)',
-                    }}
-                  >
-                    <span style={{ fontSize: '0.7rem', fontWeight: 600, color: 'var(--text-muted)' }}>
-                      All links from {group.domain} ({group.items.length})
-                    </span>
-                    <button
-                      type="button"
-                      style={{
-                        background: 'none',
-                        border: 'none',
-                        color: '#64748b',
-                        cursor: 'pointer',
-                        fontSize: '0.8rem',
-                        padding: '0 2px',
-                      }}
-                      onClick={() => setOpenDropdownDomain(null)}
-                    >
-                      ✕
-                    </button>
-                  </div>
-                  {group.items.map((item, itemIdx) => (
-                    <a
-                      key={itemIdx}
-                      href={item.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      style={{
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: '2px',
-                        padding: '6px 8px',
-                        borderRadius: '6px',
-                        color: 'var(--text-primary)',
-                        textDecoration: 'none',
-                        fontSize: '0.75rem',
-                        background: 'var(--bg-surface-soft)',
-                        transition: 'background 0.15s',
-                      }}
-                      onMouseEnter={(e) => { (e.currentTarget as HTMLAnchorElement).style.background = 'var(--bg-surface-hover)' }}
-                      onMouseLeave={(e) => { (e.currentTarget as HTMLAnchorElement).style.background = 'var(--bg-surface-soft)' }}
-                    >
-                      <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' }}>
-                        {item.url}
-                      </div>
-                    </a>
-                  ))}
-                </div>
-              )}
             </div>
           )
         })}
@@ -360,9 +389,9 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
               alignItems: 'center',
               justifyContent: 'space-between',
               padding: '10px 14px',
-              borderRadius: '16px',
+              borderRadius: 'var(--radius-xl, 18px)',
               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 +399,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 +420,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 +430,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 +448,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)'}`,
-              borderRadius: '8px',
+              border: '1px solid var(--border-subtle)',
+              borderRadius: 'var(--radius-sm, 8px)',
               padding: '4px 10px',
-              color: '#94a3b8',
+              color: 'var(--text-secondary)',
               fontSize: '0.73rem',
               fontWeight: 500,
               cursor: 'pointer',
@@ -435,6 +464,116 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
           </button>
         </div>
       )}
+
+      {/* Sub-links Popover Dropdown portaled to document.body so it floats on top of everything */}
+      {activeGroup && typeof document !== 'undefined' && createPortal(
+        <div
+          ref={popoverRef}
+          className="source-links-popover"
+          style={{
+            position: 'fixed',
+            top: popoverPos.top,
+            left: popoverPos.left,
+            width: popoverPos.width,
+            maxHeight: popoverPos.maxHeight,
+            background: 'var(--bg-overlay)',
+            border: '1px solid var(--border-default)',
+            borderRadius: 'var(--radius-lg, 14px)',
+            boxShadow: '0 16px 36px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4)',
+            zIndex: 10000,
+            padding: '6px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '4px',
+            boxSizing: 'border-box',
+            overflow: 'hidden',
+          }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              padding: '4px 6px',
+              borderBottom: '1px solid var(--border-subtle)',
+              flexShrink: 0,
+            }}
+          >
+            <span style={{ fontSize: '0.72rem', fontWeight: 600, color: 'var(--text-muted)' }}>
+              All links from {activeGroup.domain} ({activeGroup.items.length})
+            </span>
+            <button
+              type="button"
+              style={{
+                background: 'none',
+                border: 'none',
+                color: 'var(--text-muted)',
+                cursor: 'pointer',
+                fontSize: '0.85rem',
+                padding: '0 4px',
+                lineHeight: 1,
+                borderRadius: 'var(--radius-xs, 6px)',
+              }}
+              onClick={() => setOpenDropdownDomain(null)}
+              aria-label="Close"
+            >
+              ✕
+            </button>
+          </div>
+          <div
+            className="source-links-popover-list"
+            style={{
+              flex: 1,
+              overflowY: 'auto',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '4px',
+              paddingRight: '2px',
+              overscrollBehavior: 'contain',
+            }}
+          >
+            {activeGroup.items.map((item, itemIdx) => (
+              <a
+                key={itemIdx}
+                href={item.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: '2px',
+                  padding: '6px 8px',
+                  borderRadius: 'var(--radius-sm, 8px)',
+                  color: 'var(--text-primary)',
+                  textDecoration: 'none',
+                  fontSize: '0.75rem',
+                  background: 'var(--bg-surface-soft)',
+                  transition: 'background 0.15s',
+                  flexShrink: 0,
+                }}
+                onClick={(e) => {
+                  e.preventDefault()
+                  void runtimePlatform.openExternal(item.url).catch((err) => {
+                    console.error('Failed to open source URL:', err)
+                    window.open(item.url, '_blank', 'noopener,noreferrer')
+                  })
+                }}
+                onMouseEnter={(e) => { (e.currentTarget as HTMLAnchorElement).style.background = 'var(--bg-surface-hover)' }}
+                onMouseLeave={(e) => { (e.currentTarget as HTMLAnchorElement).style.background = 'var(--bg-surface-soft)' }}
+              >
+                <div style={{ fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  {itemIdx + 1}. {item.title}
+                </div>
+                <div style={{ fontSize: '0.68rem', color: 'var(--text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  {item.url}
+                </div>
+              </a>
+            ))}
+          </div>
+        </div>,
+        document.body
+      )}
     </div>
   )
 })

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,130 @@
+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} defaultOpen={true} />)
+
+    // 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')
+  })
+
+  it('renders file items as draggable and provides a mention button', () => {
+    const changes = [
+      {
+        path: '/workspace/src/CalculationCard.tsx',
+        created: false,
+        additions: 3,
+        deletions: 3,
+        hunks: [],
+      },
+    ]
+
+    const html = renderToStaticMarkup(
+      <TurnFileChanges
+        changes={changes}
+        defaultOpen={true}
+        workspacePath="/workspace"
+        onReferenceFile={() => {}}
+      />
+    )
+
+    // Should have draggable attribute on the file item
+    expect(html).toContain('draggable="true"')
+    expect(html).toContain('data-path="/workspace/src/CalculationCard.tsx"')
+
+    // Should have a mention button
+    expect(html).toContain('file-changes-mention-btn')
+    expect(html).toContain('Reference in chat')
+  })
+
+  it('renders modern collapsed summary pill with counts and Review button (matching Claude/Cursor style)', () => {
+    const changes = [
+      { path: 'file1.py', created: false, additions: 263, deletions: 38, hunks: [] },
+      { path: 'file2.py', created: false, additions: 10, deletions: 2, hunks: [] },
+    ]
+    const html = renderToStaticMarkup(<TurnFileChanges changes={changes} onOpenReview={() => {}} />)
+    expect(html).toContain('2 files changed')
+    expect(html).toContain('+273')
+    expect(html).toContain('-40')
+    expect(html).toContain('file-changes-chevron')
+    expect(html).toContain('file-changes-review-btn')
+    expect(html).toContain('Review')
+    expect(html).not.toContain('file-changes-summary-icon')
+  })
+})