@pheem49/mint 1.16.0 → 1.18.0

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

@@ -0,0 +1,463 @@
+import React, { memo, useMemo, useState } from 'react'
+import { ChevronRight, Files, RotateCcw } from 'lucide-react'
+import { EMPTY_AGENT_PROGRESS, parseFileChangesFromProgress } from '../../agentProgress'
+import { conversationPlatform } from '../../platform'
+import type { AgentProgress, FileChange, GitCheckpoint } from '../../types'
+import { detectArtifactType, type ArtifactFile } from '../../utils/artifacts'
+import { setWorkspaceDragData, isImageFileName } from '../../utils/workspaceDrag'
+import { materialFileIcon, getExtension } from '../../utils/fileIcons'
+import { tokenizeLine } from '../../utils/syntaxHighlight'
+
+const { listGitCheckpoints } = conversationPlatform
+
+export interface RewindRequestPayload {
+  interaction: any
+  changes: FileChange[]
+  checkpoints: GitCheckpoint[]
+  targetCheckpoint: GitCheckpoint | null
+}
+
+export function getCommonDirectory(paths: string[]): string {
+  if (paths.length === 0) return ''
+  const dirPaths = paths.map((p) => {
+    const normalized = p.replace(/\\/g, '/')
+    const slashIdx = normalized.lastIndexOf('/')
+    return slashIdx !== -1 ? normalized.substring(0, slashIdx) : ''
+  })
+  if (dirPaths.length === 1) return dirPaths[0]
+  if (dirPaths.some((d) => !d)) return ''
+
+  const firstParts = dirPaths[0].split('/')
+  const commonParts: string[] = []
+
+  for (let i = 0; i < firstParts.length; i++) {
+    const part = firstParts[i]
+    if (dirPaths.every((d) => d.split('/')[i] === part)) {
+      commonParts.push(part)
+    } else {
+      break
+    }
+  }
+
+  return commonParts.join('/')
+}
+
+export interface TurnFileChangesProps {
+  progress?: AgentProgress[]
+  changes?: FileChange[]
+  interaction?: any
+  isLive?: boolean
+  defaultOpen?: boolean
+  workspacePath?: string
+  onOpenArtifact?: (artifact: ArtifactFile) => void
+  onOpenReview?: () => void
+  onRewindRequest?: (payload: RewindRequestPayload) => void
+  onRewindError?: (message: string) => void
+  onReferenceFile?: (filePath: string) => void
+}
+
+export const TurnFileChanges = memo(function TurnFileChanges({
+  progress,
+  changes: providedChanges,
+  interaction,
+  isLive = false,
+  defaultOpen = false,
+  workspacePath,
+  onOpenArtifact,
+  onOpenReview,
+  onRewindRequest,
+  onRewindError,
+  onReferenceFile,
+}: TurnFileChangesProps) {
+  const changes = useMemo(
+    () => providedChanges ?? parseFileChangesFromProgress(progress ?? EMPTY_AGENT_PROGRESS),
+    [providedChanges, progress],
+  )
+  const [isOpen, setIsOpen] = useState(defaultOpen)
+  const [showAll, setShowAll] = useState(false)
+  const [openFileDiffs, setOpenFileDiffs] = useState<Record<string, boolean>>({})
+
+  const commonDir = useMemo(
+    () => getCommonDirectory(changes.map((c) => c.path)),
+    [changes],
+  )
+
+  if (changes.length === 0) return null
+
+  const totalAdditions = changes.reduce((sum, c) => sum + c.additions, 0)
+  const totalDeletions = changes.reduce((sum, c) => sum + c.deletions, 0)
+  const createdCount = changes.filter((c) => c.created).length
+  const modifiedCount = changes.length - createdCount
+
+  let summaryLabel = ''
+  if (createdCount > 0 && modifiedCount === 0) {
+    summaryLabel = `${createdCount} ${createdCount === 1 ? 'file created' : 'files created'}`
+  } else if (createdCount > 0 && modifiedCount > 0) {
+    summaryLabel = `${changes.length} ${changes.length === 1 ? 'file changed' : 'files changed'}`
+  } else {
+    summaryLabel = `${changes.length} ${changes.length === 1 ? 'file changed' : 'files changed'}`
+  }
+
+  const visibleChanges = showAll ? changes : changes.slice(0, 3)
+
+  const handleRewind = async (e: React.MouseEvent) => {
+    e.stopPropagation()
+    if (!interaction || !onRewindRequest) return
+    const chatId = interaction.chatId || 'cli'
+    try {
+      const checkpoints = await listGitCheckpoints(chatId)
+      if (!checkpoints || checkpoints.length === 0) {
+        onRewindError?.('No git checkpoints recorded for this session.')
+        return
+      }
+
+      const changePaths = new Set(changes.map((c) => c.path.trim().toLowerCase()))
+      const matching = checkpoints.filter((cp) => {
+        if (!cp.targetPath) return false
+        const cpPath = cp.targetPath.trim().toLowerCase()
+        return changePaths.has(cpPath) || Array.from(changePaths).some((p) => cpPath.endsWith(p) || p.endsWith(cpPath))
+      })
+
+      let targetCp: GitCheckpoint | null = null
+      if (matching.length > 0) {
+        targetCp = matching.reduce((earliest, curr) => (curr.step < earliest.step ? curr : earliest), matching[0])
+      } else {
+        const interactionTs = interaction.createdAt ? new Date(interaction.createdAt).getTime() / 1000 : 0
+        if (interactionTs > 0) {
+          const afterCreated = checkpoints.filter((cp) => cp.timestamp >= interactionTs - 10)
+          if (afterCreated.length > 0) {
+            targetCp = afterCreated[0]
+          }
+        }
+        if (!targetCp) {
+          targetCp = checkpoints[checkpoints.length - 1]
+        }
+      }
+
+      onRewindRequest({
+        interaction,
+        changes,
+        checkpoints,
+        targetCheckpoint: targetCp,
+      })
+    } catch (err: any) {
+      onRewindError?.(`Failed to load checkpoints: ${err?.message || String(err)}`)
+    }
+  }
+
+  const renderChangesList = () => (
+    <div className="file-changes-list" style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+      {commonDir && (
+        <div className="file-changes-common-dir" title={commonDir}>
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+          </svg>
+          <span className="file-changes-common-dir-text">{commonDir}</span>
+        </div>
+      )}
+
+      {visibleChanges.map((change) => {
+        const isDiffOpen = Boolean(openFileDiffs[change.path])
+        const fileName = change.path.split('/').pop() || change.path
+        let subDir = ''
+        let dirPath = ''
+
+        if (commonDir && change.path.startsWith(commonDir)) {
+          const remainder = change.path.slice(commonDir.length).replace(/^\//, '')
+          const parts = remainder.split('/')
+          if (parts.length > 1) {
+            subDir = parts.slice(0, parts.length - 1).join('/')
+          }
+        } else {
+          const slashIdx = change.path.lastIndexOf('/')
+          if (slashIdx !== -1) {
+            dirPath = change.path.substring(0, slashIdx)
+          }
+        }
+
+        return (
+          <div
+            key={change.path}
+            className="file-changes-item"
+            draggable="true"
+            data-path={change.path}
+            onDragStart={(e) => {
+              setWorkspaceDragData(e.dataTransfer, {
+                path: change.path,
+                kind: 'file',
+              })
+            }}
+          >
+            <div
+              className="file-changes-item-header"
+              onClick={() => setOpenFileDiffs((current) => ({ ...current, [change.path]: !current[change.path] }))}
+            >
+              <div style={{ display: 'flex', alignItems: 'center', gap: '8px', minWidth: 0 }}>
+                {materialFileIcon(fileName, getExtension(fileName)) ? (
+                  <img
+                    src={materialFileIcon(fileName, getExtension(fileName))}
+                    alt=""
+                    width="14"
+                    height="14"
+                    style={{ width: 14, height: 14, flexShrink: 0, objectFit: 'contain' }}
+                    aria-hidden="true"
+                    draggable={false}
+                  />
+                ) : (
+                  <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    style={{ color: 'var(--text-muted)', 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 className={`file-changes-filename ${change.created ? 'is-new' : ''}`}>
+                  <span className="file-changes-name">{fileName}</span>
+                  {subDir && <span className="file-changes-subdir">{subDir}/</span>}
+                  {dirPath && <span className="file-changes-dirpath">{dirPath}</span>}
+                  {change.created && <span className="file-changes-chip-new">New file</span>}
+                </span>
+              </div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '0.76rem', flexShrink: 0 }}>
+                {change.created ? (
+                  <span className="file-changes-count-add">
+                    +{change.additions} {change.additions === 1 ? 'line' : 'lines'}
+                  </span>
+                ) : (
+                  <>
+                    {change.additions > 0 && <span className="file-changes-count-add">+{change.additions}</span>}
+                    {change.deletions > 0 && <span className="file-changes-count-del">-{change.deletions}</span>}
+                  </>
+                )}
+                {onReferenceFile && (
+                  <button
+                    type="button"
+                    className="file-changes-mention-btn"
+                    title={`Reference ${change.path} in chat composer`}
+                    aria-label={`Reference ${fileName} in chat composer`}
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      onReferenceFile(change.path)
+                    }}
+                  >
+                    @ Reference in chat
+                  </button>
+                )}
+                {onOpenArtifact && (
+                  <button
+                    type="button"
+                    className="file-changes-preview-btn"
+                    title={`Preview ${fileName}`}
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      const isAbsolute = /^(\/|[a-zA-Z]:[/\\])/.test(change.path)
+                      const resolvedPath = isAbsolute
+                        ? change.path
+                        : workspacePath
+                        ? `${workspacePath.replace(/[/\\]+$/, '')}/${change.path.replace(/^[/\\]+/, '')}`
+                        : change.path
+
+                      onOpenArtifact({
+                        path: resolvedPath,
+                        workspacePath: workspacePath || undefined,
+                        type: detectArtifactType(resolvedPath),
+                      })
+                    }}
+                  >
+                    Preview
+                  </button>
+                )}
+                <svg
+                  width="12"
+                  height="12"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  style={{
+                    color: 'var(--text-muted)',
+                    transform: isDiffOpen ? 'rotate(90deg)' : 'none',
+                    display: 'inline-block',
+                    transition: 'transform 0.15s ease',
+                  }}
+                  aria-hidden="true"
+                >
+                  <polyline points="9 18 15 12 9 6" />
+                </svg>
+              </div>
+            </div>
+
+            {isDiffOpen && (
+              <div className="file-changes-diff-box">
+                {change.hunks.map((hunk, hIdx) => {
+                  const fileExt = getExtension(change.path)
+                  return (
+                    <div
+                      key={hIdx}
+                      className="file-changes-diff-hunk"
+                      style={{ marginBottom: hIdx < change.hunks.length - 1 ? '10px' : 0 }}
+                    >
+                      {hunk.oldText && (
+                        <div className="file-changes-diff-del-block">
+                          {hunk.oldText.split('\n').map((line, lIdx) => {
+                            const tokens = tokenizeLine(line, fileExt)
+                            return (
+                              <div key={lIdx} className="file-changes-diff-line file-changes-diff-line-del">
+                                <span className="file-changes-diff-line-content">
+                                  {tokens.length === 0 ? (
+                                    '\u00A0'
+                                  ) : (
+                                    tokens.map((tok, tIdx) => (
+                                      <span key={tIdx} className={tok.type}>
+                                        {tok.text}
+                                      </span>
+                                    ))
+                                  )}
+                                </span>
+                              </div>
+                            )
+                          })}
+                        </div>
+                      )}
+                      {hunk.newText && (
+                        <div className="file-changes-diff-add-block">
+                          {hunk.newText.split('\n').map((line, lIdx) => {
+                            const tokens = tokenizeLine(line, fileExt)
+                            return (
+                              <div key={lIdx} className="file-changes-diff-line file-changes-diff-line-add">
+                                <span className="file-changes-diff-line-content">
+                                  {tokens.length === 0 ? (
+                                    '\u00A0'
+                                  ) : (
+                                    tokens.map((tok, tIdx) => (
+                                      <span key={tIdx} className={tok.type}>
+                                        {tok.text}
+                                      </span>
+                                    ))
+                                  )}
+                                </span>
+                              </div>
+                            )
+                          })}
+                        </div>
+                      )}
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+          </div>
+        )
+      })}
+      {changes.length > 3 && (
+        <button
+          type="button"
+          className="file-changes-show-more"
+          aria-expanded={showAll}
+          onClick={() => setShowAll((prev) => !prev)}
+        >
+          <span>{showAll ? 'Show fewer files' : `Show ${changes.length - 3} more ${changes.length - 3 === 1 ? 'file' : 'files'}`}</span>
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+        </button>
+      )}
+    </div>
+  )
+
+  return (
+    <div className={`file-changes-summary-container ${isLive ? 'is-live' : ''}`}>
+      <div className="agent-activity-card file-changes-card">
+        <div
+          className={`file-changes-summary-row ${isOpen ? 'is-open' : ''}`}
+          onClick={() => setIsOpen((prev) => !prev)}
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault()
+              setIsOpen((prev) => !prev)
+            }
+          }}
+        >
+          <div className="file-changes-summary-toggle">
+            <span className="file-changes-summary-label">{summaryLabel}</span>
+            <span className="file-changes-summary-counts">
+              {totalAdditions > 0 && <span className="file-changes-count-add">+{totalAdditions}</span>}
+              {totalDeletions > 0 && <span className="file-changes-count-del">-{totalDeletions}</span>}
+            </span>
+            <ChevronRight
+              size={13}
+              className={`file-changes-chevron ${isOpen ? 'is-open' : ''}`}
+              aria-hidden="true"
+            />
+          </div>
+          <div
+            className="file-changes-summary-actions"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {onRewindRequest && (
+              <button
+                type="button"
+                className="file-changes-rewind-btn"
+                onClick={handleRewind}
+                title="Rewind workspace to before these file edits (Git Checkpoint)"
+              >
+                <RotateCcw size={12} aria-hidden="true" />
+                <span>Undo</span>
+              </button>
+            )}
+            {onOpenReview && (
+              <button
+                type="button"
+                className="file-changes-review-btn"
+                title="Review changed code"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onOpenReview()
+                }}
+              >
+                <Files size={13} aria-hidden="true" />
+                <span>Review</span>
+              </button>
+            )}
+          </div>
+        </div>
+        {isOpen && <div className="file-changes-list-container">{renderChangesList()}</div>}
+      </div>
+    </div>
+  )
+})
+
+export default TurnFileChanges

package/src/renderer/shared/components/{VoicePill.css → chat/VoicePill.css}

@@ -1,5 +1,5 @@
 .voice-pill {
-  --vp-accent: #f5f5f5; --vp-icon: #a1a1aa; --vp-bg: #27272a; --vp-size: 28px; --vp-radius: 14px;
+  --vp-accent: var(--text-primary, #f5f5f5); --vp-icon: var(--text-muted, #a1a1aa); --vp-bg: var(--bg-surface-soft, #27272a); --vp-size: 28px; --vp-radius: 14px;
   --vp-reach: 8px; --vp-extra: 0px; --vp-clock-w: 0px; --vp-wave-w: 0px; --vp-slide: 0px; --vp-cancel: 0;
   --vp-stop: 9px; --vp-icon-size: 15px; --vp-time-size: 10px; --vp-open: 200ms; --vp-press: 0.95; --vp-hit: 8px;
   --vp-ease-out: cubic-bezier(0.23, 1, 0.32, 1);

package/src/renderer/shared/components/{VoicePill.jsx → chat/VoicePill.jsx}

@@ -38,7 +38,8 @@ const drawWave = (s,canvas,level,color,floor) => {
   s.acc=Math.max(s.acc,level);s.tick=(s.tick+1)%WAVE_EVERY;
   if(s.tick===0){s.hist.push(s.acc);s.acc=0;if(s.hist.length>WAVE_MAX)s.hist.shift();}
   const bw=2*dpr,step=3*dpr,shift=s.tick/WAVE_EVERY*step;
-  ctx.clearRect(0,0,W,H);ctx.fillStyle=color;
+  const fillColor=typeof color==='string'&&color.startsWith('var(')?(getComputedStyle(canvas).color||'#f5f5f5'):color;
+  ctx.clearRect(0,0,W,H);ctx.fillStyle=fillColor;
   for(let i=0;i<s.hist.length;i++){
     const v=s.hist[s.hist.length-1-i],x=W-(i+1)*step-shift;if(x+bw<0)break;
     const h=Math.max(bw,(floor+(1-floor)*v)*H),t=Math.min(1,Math.max(0,(x+bw/2)/(W*0.55))),fade=t*t*(3-2*t);
@@ -63,7 +64,7 @@ const closeMic=s=>{
 };
 
 export default function VoicePill({
-  accentColor='#f5f5f5',iconColor='#a1a1aa',background='#27272a',size=28,shape='pill',reach=8,
+  accentColor='var(--text-primary)',iconColor='var(--text-muted)',background='var(--bg-surface-soft)',size=28,shape='pill',reach=8,
   showTime=true,waveform=true,slideToCancel=true,cancelDistance=64,attack=40,release=240,sensitivity=1,
   floor=0.1,openDuration=200,pressScale=0.95,mode='auto',holdAfter=300,reactive='simulated',
   disabled=false,ariaLabel='Dictate',onStart,onStop,className='',active,id,title

package/src/renderer/shared/components/{CliSessionsView.test.tsx → extensions/CliSessionsView.test.tsx}

@@ -2,8 +2,8 @@ import React from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { describe, expect, it } from 'vitest'
 import CliSessionsView from './CliSessionsView'
-import { workspacePaths } from '../utils/workspaces'
-import type { ChatSession } from '../types'
+import { workspacePaths } from '../../utils/workspaces'
+import type { ChatSession } from '../../types'
 
 const demo = '/home/pheem49/vscode/Project/Demo'
 const mint = '/home/pheem49/vscode/Project/Mint-CLI'

package/src/renderer/shared/components/{CliSessionsView.tsx → extensions/CliSessionsView.tsx}

@@ -1,10 +1,11 @@
-import SelectField from './SelectField'
+import SelectField from '../ui/SelectField'
 import React, { useState, useMemo, useEffect, useRef } from 'react'
-import type { ChatSession } from '../types'
-import { parseUtcDate } from '../utils/ui'
-import { normalizeWorkspacePath, workspacePaths } from '../utils/workspaces'
-import WorkspaceSelector from './WorkspaceSelector'
-import '../css/code-sessions.css'
+import type { ChatSession } from '../../types'
+import { parseUtcDate } from '../../utils/ui'
+import { normalizeWorkspacePath, workspacePaths } from '../../utils/workspaces'
+import WorkspaceSelector from '../workspace/WorkspaceSelector'
+import { workspaceListPreferences } from '../../utils/workspaceListPreferences'
+import '../../css/code-sessions.css'
 
 export interface CliSessionsViewProps {
   chatSessions: ChatSession[]
@@ -205,6 +206,7 @@ export const CliSessionsView: React.FC<CliSessionsViewProps> = React.memo(functi
               try {
                 const selected = path || await onSelectFolder?.()
                 if (selected) {
+                  workspaceListPreferences.restore(selected)
                   setSelectedWorkspace(normalizeWorkspacePath(selected))
                   setScopeFilter('workspace')
                 }
@@ -356,7 +358,10 @@ export const CliSessionsView: React.FC<CliSessionsViewProps> = React.memo(functi
                       {shortId}
                     </span>
                     {isActive && (
-                      <span className="code-active-badge">active</span>
+                      <span className="code-active-badge">
+                        <span className="code-active-dot" aria-hidden="true" />
+                        <span>active</span>
+                      </span>
                     )}
                   </div>
 
@@ -410,10 +415,10 @@ export const CliSessionsView: React.FC<CliSessionsViewProps> = React.memo(functi
                         }}
                         style={{
                           flex: 1,
-                          background: 'rgba(0, 0, 0, 0.4)',
-                          border: '1px solid var(--border-light, rgba(255, 255, 255, 0.2))',
+                          background: 'var(--bg-input)',
+                          border: '1px solid var(--border-default)',
                           borderRadius: 'var(--radius-xs, 6px)',
-                          color: '#fff',
+                          color: 'var(--text-primary)',
                           padding: '4px 8px',
                           fontSize: '0.88rem',
                           outline: 'none',
@@ -423,9 +428,9 @@ export const CliSessionsView: React.FC<CliSessionsViewProps> = React.memo(functi
                         type="button"
                         onClick={handleSaveRename}
                         style={{
-                          background: 'var(--surface-strong, #3f3f46)',
-                          color: '#fff',
-                          border: 'none',
+                          background: 'var(--bg-surface-hover)',
+                          color: 'var(--text-primary)',
+                          border: '1px solid var(--border-default)',
                           borderRadius: 'var(--radius-xs, 6px)',
                           padding: '4px 10px',
                           fontSize: '0.78rem',
@@ -441,9 +446,7 @@ export const CliSessionsView: React.FC<CliSessionsViewProps> = React.memo(functi
                         {session.title || 'Untitled Session'}
                       </div>
                       <div className="code-session-snippet">
-                        <span style={{ color: 'var(--interactive-fg)', opacity: 0.8, marginRight: '4px' }}>
-                          &gt;
-                        </span>
+                        <span className="code-session-prompt-symbol">&gt;</span>
                         <span>{session.title || 'Interactive shell'}</span>
                       </div>
                     </>

package/src/renderer/shared/components/{LinkedFoldersView.tsx → extensions/LinkedFoldersView.tsx}

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react'
-import { renderLinkedFoldersSvgIcon, renderFolderIcon } from '../constants/plugins'
-import '../css/management-views.css'
-import type { LinkedFolder, LinkedFolderDraft, LinkedFolderNote, LinkedFolderStatus } from '../types'
+import { renderLinkedFoldersSvgIcon, renderFolderIcon } from '../../constants/plugins'
+import '../../css/management-views.css'
+import type { LinkedFolder, LinkedFolderDraft, LinkedFolderNote, LinkedFolderStatus } from '../../types'
 
 export type { LinkedFolder }
 

package/src/renderer/shared/components/{McpRegistryPicker.tsx → extensions/McpRegistryPicker.tsx}

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
-import '../css/management-views.css'
-import { MCP_REGISTRY, type McpRegistryEntry } from '../constants/mcpRegistry'
-import { renderMcpSvgIcon } from '../constants/plugins'
+import '../../css/management-views.css'
+import { MCP_REGISTRY, type McpRegistryEntry } from '../../constants/mcpRegistry'
+import { renderMcpSvgIcon } from '../../constants/plugins'
 
 /**
  * The "pick a known MCP server" list shown in the MCP catalog modal (and inline
@@ -101,13 +101,13 @@ export const McpRegistryPicker: React.FC<McpRegistryPickerProps> = ({
           </svg>
         </div>
 
-        {/* View mode switcher: Grid (แนวนอน) vs List (แนวตั้ง) */}
+        {/* View mode switcher: Grid vs List */}
         <div className="management-filter-pills" style={{ display: 'inline-flex', gap: 2, padding: 3, flexShrink: 0 }}>
           <button
             type="button"
             className={`management-pill-btn ${viewMode === 'grid' ? 'active' : ''}`}
             onClick={() => handleSetViewMode('grid')}
-            title="Grid view (แนวนอน)"
+            title="Grid view"
             style={{ padding: '6px 10px', display: 'inline-flex', alignItems: 'center', gap: 6 }}
           >
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
@@ -122,7 +122,7 @@ export const McpRegistryPicker: React.FC<McpRegistryPickerProps> = ({
             type="button"
             className={`management-pill-btn ${viewMode === 'list' ? 'active' : ''}`}
             onClick={() => handleSetViewMode('list')}
-            title="List view (แนวตั้ง)"
+            title="List view"
             style={{ padding: '6px 10px', display: 'inline-flex', alignItems: 'center', gap: 6 }}
           >
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">