@pheem49/mint 1.15.0 → 1.17.0

package/src/renderer/shared/components/chat/SourcesBlock.tsx

@@ -0,0 +1,435 @@
+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[]
+}
+
+export interface DomainGroup {
+  domain: string
+  displayDomain: string
+  faviconUrl: string
+  items: WebSearchSource[]
+}
+
+/**
+ * Groups web search sources by their domain name.
+ * e.g., multiple results from `tmd.go.th` will be combined into 1 DomainGroup.
+ */
+export function groupSourcesByDomain(sources: WebSearchSource[]): DomainGroup[] {
+  const groupsMap = new Map<string, DomainGroup>()
+
+  for (const src of sources) {
+    const domainKey = src.domain.toLowerCase().trim()
+    if (!groupsMap.has(domainKey)) {
+      // Format display domain (e.g., facebook.com -> facebook, instagram.com -> instagram)
+      let displayDomain = domainKey
+      if (/^[^.]+\.com$/i.test(displayDomain)) {
+        displayDomain = displayDomain.replace(/\.com$/i, '')
+      } else if (/^[^.]+\.org$/i.test(displayDomain)) {
+        displayDomain = displayDomain.replace(/\.org$/i, '')
+      } else if (/^[^.]+\.net$/i.test(displayDomain)) {
+        displayDomain = displayDomain.replace(/\.net$/i, '')
+      }
+
+      groupsMap.set(domainKey, {
+        domain: src.domain,
+        displayDomain,
+        faviconUrl: src.faviconUrl,
+        items: [src],
+      })
+    } else {
+      groupsMap.get(domainKey)!.items.push(src)
+    }
+  }
+
+  return Array.from(groupsMap.values())
+}
+
+export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function SourcesBlock({ sources }) {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [openDropdownDomain, setOpenDropdownDomain] = useState<string | null>(null)
+
+  const domainGroups = useMemo(() => {
+    const groups = groupSourcesByDomain(sources)
+    // Show groups whose card will render a thumbnail first (stable sort keeps
+    // original ordering within each bucket).
+    return [...groups].sort((a, b) => {
+      const aHasImage = a.items[0]?.imageUrl ? 1 : 0
+      const bHasImage = b.items[0]?.imageUrl ? 1 : 0
+      return bHasImage - aHasImage
+    })
+  }, [sources])
+
+  if (!sources || sources.length === 0) return null
+
+  const MAX_INITIAL_CARDS = 3
+
+  const visibleGroups = isExpanded ? domainGroups : domainGroups.slice(0, MAX_INITIAL_CARDS)
+
+  // Calculate remaining total sources count for "View X more" badge
+  const shownSourcesCount = domainGroups
+    .slice(0, MAX_INITIAL_CARDS)
+    .reduce((sum, g) => sum + g.items.length, 0)
+  const remainingSourcesCount = sources.length - shownSourcesCount
+  const hiddenGroups = domainGroups.slice(MAX_INITIAL_CARDS)
+
+  return (
+    <div className="sources-block" style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginBottom: '12px', marginTop: '4px' }}>
+      {/* Header */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          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: 'var(--text-primary)', letterSpacing: '0.01em' }}>
+          Sources
+        </span>
+      </div>
+
+      {/* Domain Cards Container (wraps to next line if exceeding frame width) */}
+      <div
+        className="sources-cards"
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: '8px',
+        }}
+      >
+        {visibleGroups.map((group, groupIdx) => {
+          const primaryItem = group.items[0]
+          const extraCount = group.items.length - 1
+          const isDropdownOpen = openDropdownDomain === group.domain
+
+          return (
+            <div
+              key={group.domain}
+              className="source-card-group"
+            >
+              <div
+                className="source-card"
+                style={{
+                  justifyContent: 'space-between',
+                  borderRadius: '16px',
+                  background: 'var(--bg-surface-soft)',
+                  border: '1px solid var(--border-subtle)',
+                  transition: 'all 0.15s ease',
+                  cursor: 'pointer',
+                  minHeight: '68px',
+                  boxSizing: 'border-box',
+                  overflow: 'hidden',
+                }}
+                onClick={(e) => {
+                  // If extra items exist and click was on the badge or dropdown toggle, toggle dropdown
+                  const target = e.target as HTMLElement
+                  if (extraCount > 0 && target.closest('.extra-badge-btn')) {
+                    e.stopPropagation()
+                    setOpenDropdownDomain(isDropdownOpen ? null : group.domain)
+                    return
+                  }
+                  // Otherwise open primary link
+                  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 = 'var(--border-strong)'
+                  el.style.transform = 'translateY(-1px)'
+                }}
+                onMouseLeave={(e) => {
+                  const el = e.currentTarget
+                  el.style.background = 'var(--bg-surface-soft)'
+                  el.style.borderColor = 'var(--border-subtle)'
+                  el.style.transform = 'translateY(0)'
+                }}
+              >
+                {/* Thumbnail (if this source has an associated image) */}
+                {primaryItem.imageUrl && (
+                  <div className="source-card-thumbnail" style={{ overflow: 'hidden', background: 'var(--bg-surface-raised)', flexShrink: 0 }}>
+                    <img
+                      src={resolveMediaUrl(primaryItem.imageUrl)}
+                      alt={primaryItem.title}
+                      loading="lazy"
+                      referrerPolicy="no-referrer"
+                      style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
+                      onError={(e) => { (e.currentTarget as HTMLImageElement).parentElement!.style.display = 'none' }}
+                    />
+                  </div>
+                )}
+
+                <div className="source-card-content" style={{ display: 'flex', flexDirection: 'column', flex: 1, padding: '10px 12px' }}>
+                  {/* Title */}
+                  <div
+                    title={primaryItem.title}
+                    style={{
+                      fontSize: '0.8rem',
+                      fontWeight: 500,
+                      color: 'var(--text-primary)',
+                      lineHeight: '1.3',
+                      display: '-webkit-box',
+                      WebkitLineClamp: 2,
+                      WebkitBoxOrient: 'vertical',
+                      overflow: 'hidden',
+                      marginBottom: '8px',
+                      wordBreak: 'break-word',
+                    }}
+                  >
+                    {primaryItem.title}
+                  </div>
+
+                  {/* Bottom Row */}
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'space-between',
+                      marginTop: 'auto',
+                      paddingTop: '2px',
+                    }}
+                  >
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '6px', overflow: 'hidden', marginRight: '6px' }}>
+                      <img
+                        src={group.faviconUrl}
+                        alt=""
+                        width={14}
+                        height={14}
+                        style={{ borderRadius: '3px', flexShrink: 0 }}
+                        onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = 'none' }}
+                      />
+                      <span
+                        style={{
+                          fontSize: '0.73rem',
+                          color: 'var(--text-muted)',
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                        }}
+                      >
+                        {group.displayDomain}
+                      </span>
+                    </div>
+
+                    {extraCount > 0 ? (
+                      <button
+                        type="button"
+                        className="extra-badge-btn"
+                        title={`${extraCount} extra page${extraCount > 1 ? 's' : ''} from ${group.domain} — click to view`}
+                        style={{
+                          fontSize: '0.68rem',
+                          fontWeight: 600,
+                          color: 'var(--interactive-fg)',
+                          background: 'var(--accent-subtle)',
+                          border: '1px solid var(--accent-border)',
+                          padding: '1px 6px',
+                          borderRadius: '4px',
+                          flexShrink: 0,
+                          cursor: 'pointer',
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: '2px',
+                        }}
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          setOpenDropdownDomain(isDropdownOpen ? null : group.domain)
+                        }}
+                      >
+                        +{extraCount}
+                      </button>
+                    ) : (
+                      <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: 'var(--shadow-lg)',
+                    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: 'var(--text-muted)',
+                        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: 'var(--text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                        {item.url}
+                      </div>
+                    </a>
+                  ))}
+                </div>
+              )}
+            </div>
+          )
+        })}
+
+        {/* Overflow "View X more" Card */}
+        {!isExpanded && remainingSourcesCount > 0 && (
+          <button
+            type="button"
+            className="sources-more-button"
+            aria-expanded={false}
+            onClick={() => setIsExpanded(true)}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              padding: '10px 14px',
+              borderRadius: '16px',
+              background: 'var(--bg-surface-soft)',
+              border: '1px solid var(--border-subtle)',
+              cursor: 'pointer',
+              transition: 'all 0.15s ease',
+              boxSizing: 'border-box',
+            }}
+            onMouseEnter={(e) => {
+              const el = e.currentTarget
+              el.style.background = 'var(--bg-surface-hover)'
+              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 = 'var(--border-subtle)'
+              el.style.transform = 'translateY(0)'
+            }}
+          >
+            {/* Stacked Favicons */}
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              {hiddenGroups.slice(0, 3).map((grp, idx) => (
+                <img
+                  key={idx}
+                  src={grp.faviconUrl}
+                  alt=""
+                  width={18}
+                  height={18}
+                  style={{
+                    borderRadius: '50%',
+                    border: '1.5px solid var(--bg-surface)',
+                    marginLeft: idx === 0 ? 0 : '-6px',
+                    background: 'var(--bg-surface-raised)',
+                    objectFit: 'cover',
+                  }}
+                  onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = 'none' }}
+                />
+              ))}
+            </div>
+
+            <span style={{ fontSize: '0.78rem', fontWeight: 500, color: 'var(--text-secondary)', marginLeft: '8px' }}>
+              View {remainingSourcesCount} more
+            </span>
+          </button>
+        )}
+      </div>
+
+      {/* Collapse button when expanded */}
+      {isExpanded && domainGroups.length > MAX_INITIAL_CARDS && (
+        <div style={{ display: 'flex', justifyContent: 'flex-start', marginTop: '4px' }}>
+          <button
+            type="button"
+            onClick={() => {
+              setIsExpanded(false)
+              setOpenDropdownDomain(null)
+            }}
+            style={{
+              background: 'var(--bg-surface-soft)',
+              border: '1px solid var(--border-subtle)',
+              borderRadius: '8px',
+              padding: '4px 10px',
+              color: 'var(--text-secondary)',
+              fontSize: '0.73rem',
+              fontWeight: 500,
+              cursor: 'pointer',
+              transition: 'background 0.15s',
+            }}
+            onMouseEnter={(e) => { (e.currentTarget as HTMLButtonElement).style.background = 'var(--bg-surface-hover)' }}
+            onMouseLeave={(e) => { (e.currentTarget as HTMLButtonElement).style.background = 'var(--bg-surface-soft)' }}
+          >
+            Show less
+          </button>
+        </div>
+      )}
+    </div>
+  )
+})
+
+export default SourcesBlock

package/src/renderer/shared/components/chat/ThinkingBlock.tsx

@@ -0,0 +1,102 @@
+/**
+ * shared/components/ThinkingBlock.tsx
+ * Renders the collapsible reasoning thoughts block from the LLM.
+ * Shared by both Desktop and Web ChatPanel — do NOT duplicate this.
+ */
+import { useEffect, useRef, useState } from 'react'
+import { Brain, ChevronRight } from 'lucide-react'
+import { renderFormattedMessage } from '../../utils/markdown'
+
+const THINKING_LABELS = {
+  live: 'Thinking…',
+  completed: 'Thinking process',
+  extendedLive: 'Thinking…',
+  extendedCompleted: 'Thought',
+  emptyHint: 'No thoughts recorded',
+} as const
+
+interface Props {
+  thoughts: string[]
+  isLive?: boolean
+  blockKey: string
+  expanded?: boolean
+  onExpandedChange?: (key: string, open: boolean) => void
+  showEmptyHint?: boolean
+  /** 'default' for short agent thoughts, 'extended' for model reasoning tokens */
+  variant?: 'default' | 'extended'
+}
+
+export function ThinkingBlock({
+  thoughts,
+  isLive = false,
+  blockKey,
+  expanded,
+  onExpandedChange,
+  showEmptyHint = false,
+  variant = 'default',
+}: Props) {
+  const contentRef = useRef<HTMLDivElement>(null)
+  const isControlled = expanded !== undefined && Boolean(onExpandedChange)
+  const [localOpen, setLocalOpen] = useState(isLive)
+  const isOpen = isControlled ? Boolean(expanded) : localOpen
+
+  const setOpen = (open: boolean) => {
+    if (isControlled && onExpandedChange) onExpandedChange(blockKey, open)
+    else setLocalOpen(open)
+  }
+
+  useEffect(() => {
+    if (isLive && !isControlled) setLocalOpen(true)
+  }, [isLive, isControlled])
+
+  useEffect(() => {
+    if (!isLive || !isOpen || !contentRef.current) return
+    contentRef.current.scrollTop = contentRef.current.scrollHeight
+  }, [thoughts, isLive, isOpen])
+
+  if (thoughts.length === 0 && !showEmptyHint) return null
+
+  if (thoughts.length === 0) {
+    return (
+      <div className="thinking-block thinking-block-empty-state" data-live={isLive ? 'true' : 'false'}>
+        <span className="thinking-block-empty">{THINKING_LABELS.emptyHint}</span>
+      </div>
+    )
+  }
+
+  const variantClass = variant === 'extended' ? ' is-extended' : ''
+
+  return (
+    <div className={`thinking-block${isLive ? ' is-live' : ''}${isOpen ? ' is-expanded' : ''}${variantClass}`}>
+      <button
+        type="button"
+        className="thinking-block-header"
+        onClick={() => setOpen(!isOpen)}
+        aria-expanded={isOpen}
+      >
+        <Brain size={14} className="thinking-block-icon" style={{ flexShrink: 0 }} />
+        <span className="thinking-block-label">
+          {variant === 'extended'
+            ? (isLive ? THINKING_LABELS.extendedLive : THINKING_LABELS.extendedCompleted)
+            : (isLive ? THINKING_LABELS.live : THINKING_LABELS.completed)
+          }
+        </span>
+        {isLive && <span className="thinking-block-live-dot" aria-hidden="true" />}
+        <span className={`thinking-block-chevron${isOpen ? ' is-open' : ''}`} aria-hidden="true">
+          <ChevronRight size={13} strokeWidth={2.2} />
+        </span>
+      </button>
+      {isOpen && (
+        <div className="thinking-block-body">
+          <div className="thinking-block-content" ref={contentRef}>
+            {thoughts.map((thought, index) => (
+              <div className="thinking-block-step" key={`${blockKey}-${index}`}>
+                <div className="thinking-block-step-body">{renderFormattedMessage(thought)}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

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')
+  })
+})