@pheem49/mint 1.14.0 → 1.16.0

package/src/renderer/shared/components/ImageSearchCard.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { Images } from 'lucide-react'
 import { resolveMediaUrl } from '../utils/markdown'
 
@@ -22,119 +22,130 @@ function ImageTile({ image }: { image: ImageSearchHit }) {
   const initialSrc = resolveMediaUrl(image.thumbnailUrl || image.imageUrl)
   const [src, setSrc] = useState(initialSrc)
 
-  if (broken || !src) {
-    return null
-  }
+  const sourceUrl = /^https?:\/\//.test(image.sourceUrl) ? image.sourceUrl : image.imageUrl
 
   return (
-    <a
-      href={image.sourceUrl || image.imageUrl}
-      target="_blank"
-      rel="noopener noreferrer"
-      title={image.title}
+    <article
       style={{
-        position: 'relative',
-        display: 'block',
+        display: 'flex',
+        flex: '0 0 116px',
+        flexDirection: 'column',
         borderRadius: '10px',
         overflow: 'hidden',
-        aspectRatio: '1 / 1',
-        background: 'rgba(255, 255, 255, 0.04)',
-        border: '1px solid rgba(255, 255, 255, 0.08)',
-        textDecoration: 'none',
+        background: 'var(--surface-strong)',
+        border: '1px solid var(--border)',
       }}
     >
-      <img
-        src={src}
-        alt={image.title}
-        loading="lazy"
-        referrerPolicy="no-referrer"
-        onError={() => {
-          const fallback = resolveMediaUrl(image.imageUrl)
-          if (src !== fallback && fallback) {
-            setSrc(fallback)
-          } else {
-            setBroken(true)
-          }
-        }}
-        style={{
-          width: '100%',
-          height: '100%',
-          objectFit: 'cover',
-          display: 'block',
-        }}
-      />
-      {image.title && (
-        <div
-          style={{
-            position: 'absolute',
-            left: 0,
-            right: 0,
-            bottom: 0,
-            padding: '6px 8px',
-            fontSize: '11px',
-            lineHeight: 1.3,
-            color: '#f8fafc',
-            background: 'linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0))',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-          }}
+      <a href={sourceUrl} target="_blank" rel="noopener noreferrer" title={image.title} style={{ display: 'block', width: '100%', aspectRatio: '1 / 1', flexShrink: 0, textDecoration: 'none' }}>
+        {broken || !src ? (
+          <span style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '12px', boxSizing: 'border-box', color: 'var(--text-muted, #94a3b8)', fontSize: '11px', lineHeight: 1.4, textAlign: 'center' }}>
+            Preview unavailable · Open source
+          </span>
+        ) : (
+          <img
+            src={src}
+            alt={image.title}
+            loading="lazy"
+            referrerPolicy="no-referrer"
+            onError={() => {
+              const fallback = resolveMediaUrl(image.imageUrl)
+              if (src !== fallback && fallback) {
+                setSrc(fallback)
+              } else {
+                setBroken(true)
+              }
+            }}
+            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
+          />
+        )}
+      </a>
+      <div style={{ minWidth: 0, padding: '7px 8px', display: 'grid', gap: '5px' }}>
+        {image.title && (
+          <div title={image.title} style={{ fontSize: '11px', lineHeight: 1.3, color: 'var(--text-primary, inherit)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            {image.title}
+          </div>
+        )}
+        <a
+          href={resolveMediaUrl(image.imageUrl)}
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{ justifySelf: 'start', color: 'var(--interactive-fg-hover)', fontSize: '10px', lineHeight: 1.4, textDecoration: 'underline', textUnderlineOffset: '2px' }}
         >
-          {image.title}
-        </div>
-      )}
-    </a>
+          View full image
+        </a>
+      </div>
+    </article>
   )
 }
 
 export default function ImageSearchCard({ data }: { data: ImageSearchData }) {
   const images = (data?.images ?? []).filter((img) => img.thumbnailUrl || img.imageUrl)
 
+  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 cardBg = isDark ? 'rgba(255,255,255,0.03)' : 'rgba(15,23,42,0.04)'
+  const cardBorder = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.12)'
+  const cardText = isDark ? '#f8fafc' : '#0f172a'
+  const labelColor = isDark ? 'rgba(255,255,255,0.6)' : '#64748b'
+  const queryColor = isDark ? 'rgba(255,255,255,0.8)' : '#334155'
+  const emptyColor = isDark ? 'rgba(255,255,255,0.5)' : '#94a3b8'
+
   return (
     <div
       style={{
-        background: 'rgba(255, 255, 255, 0.03)',
+        background: cardBg,
         backdropFilter: 'blur(16px)',
         WebkitBackdropFilter: 'blur(16px)',
-        color: '#f8fafc',
+        color: cardText,
         borderRadius: '12px',
         padding: '16px 20px',
         margin: '12px 0',
-        boxShadow: '0 8px 32px 0 rgba(0, 0, 0, 0.2)',
-        border: '1px solid rgba(255, 255, 255, 0.08)',
+        boxShadow: isDark ? '0 8px 32px 0 rgba(0,0,0,0.2)' : '0 4px 20px 0 rgba(15,23,42,0.08)',
+        border: `1px solid ${cardBorder}`,
         fontFamily: 'system-ui, -apple-system, sans-serif',
       }}
     >
       {/* Header */}
       <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
-        <Images size={16} strokeWidth={2} style={{ opacity: 0.9 }} />
+        <Images size={16} strokeWidth={2} style={{ opacity: 0.9, color: labelColor }} />
         <span
           style={{
             fontSize: '11px',
             fontWeight: 700,
             letterSpacing: '0.8px',
-            color: 'rgba(255, 255, 255, 0.6)',
+            color: labelColor,
           }}
         >
           IMAGE SEARCH
         </span>
         {data?.query && (
-          <span style={{ fontSize: '13px', color: 'rgba(255, 255, 255, 0.8)' }}>
+          <span title={data.query} style={{ minWidth: 0, fontSize: '13px', color: queryColor, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
             &ldquo;{data.query}&rdquo;
           </span>
         )}
       </div>
 
       {images.length === 0 ? (
-        <div style={{ fontSize: '13px', color: 'rgba(255, 255, 255, 0.5)' }}>
+        <div style={{ fontSize: '13px', color: emptyColor }}>
           No images found.
         </div>
       ) : (
         <div
           style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fill, minmax(110px, 1fr))',
+            display: 'flex',
             gap: '8px',
+            overflowX: 'auto',
+            paddingBottom: '4px',
+            scrollbarWidth: 'thin',
           }}
         >
           {images.map((image, idx) => (

package/src/renderer/shared/components/ImageStudioPanel.tsx

@@ -1,15 +1,10 @@
+import SelectField from './SelectField'
 import React, { useState, useRef, useCallback, useEffect } from 'react'
-import {
-  generateImages,
-  getImageGenProviders,
-  fetchImageProviderModels,
-  convertFileSrc,
-  listSavedPictures,
-  type ImageGenRequest,
-  type ImageGenResponse,
-  type ImageGenProviders,
-  type PictureEntry,
-} from '@/tauri'
+import '../css/image-studio.css'
+import { mediaPlatform } from '../platform'
+import type { ImageGenRequest, ImageGenResponse, ImageGenProviders, PictureEntry } from '../types'
+
+const { generateImages, getImageGenProviders, fetchImageProviderModels, convertFileSrc, listSavedPictures } = mediaPlatform
 
 type AspectRatio = '1:1' | '16:9' | '9:16' | '4:3'
 
@@ -17,12 +12,11 @@ interface ImageStudioPanelProps {
   view: string
   onRefreshPictures?: () => void
   onSendToChat?: (dataUri: string, prompt: string) => void
-  onToggleMobileSidebar?: () => void
 }
 
 import { IMAGE_ASPECT_RATIOS, IMAGE_STYLE_PRESETS } from '../constants/studio'
 
-const ASPECT_OPTIONS = IMAGE_ASPECT_RATIOS
+const ASPECT_Options = IMAGE_ASPECT_RATIOS
 const STYLE_SUGGESTIONS = IMAGE_STYLE_PRESETS
 
 import { IMAGE_STUDIO_MODELS } from '../constants/models'
@@ -41,6 +35,12 @@ function providerLabel(key: string) {
   return PROVIDER_LABELS[key] ?? key
 }
 
+function imageSourceForChat(entry: PictureEntry): string {
+  const url = entry.url?.trim()
+  if (url && (/^https?:\/\//i.test(url) || url.startsWith('/api/'))) return url
+  return entry.path || url || ''
+}
+
 function defaultModelForProvider(provider: string): string {
   const models = PROVIDER_MODELS[provider]
   return models?.[0]?.value ?? ''
@@ -54,7 +54,7 @@ function SkeletonCard() {
   )
 }
 
-export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat, onToggleMobileSidebar }: ImageStudioPanelProps) {
+export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat }: ImageStudioPanelProps) {
   const [prompt, setPrompt] = useState('')
   const [negativePrompt, setNegativePrompt] = useState('')
   const [showNegative, setShowNegative] = useState(false)
@@ -242,15 +242,6 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
       {/* Header */}
       <header className="img-studio-header">
         <div className="img-studio-header-title">
-          <button
-            className="mobile-menu-btn"
-            type="button"
-            onClick={onToggleMobileSidebar}
-            aria-label="Toggle menu"
-            style={{ marginRight: '8px' }}
-          >
-            ☰
-          </button>
           <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
             <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
           </svg>
@@ -278,12 +269,12 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
               <label className="img-studio-label" htmlFor="img-studio-provider" style={{ display: 'flex', alignItems: 'center', width: '100%', height: '18px' }}>
                 <span>Provider</span>
               </label>
-              <select
+              <SelectField aria-label="Provider"
                 id="img-studio-provider"
                 className="img-studio-textarea"
-                style={{ padding: '8px 10px', height: '38px', cursor: 'pointer' }}
+
                 value={selectedProvider}
-                onChange={(e) => handleProviderChange(e.target.value)}
+                onValueChange={(nextValue) => handleProviderChange(nextValue)}
                 disabled={generating}
               >
                 {providers.available.map((prov) => (
@@ -291,19 +282,19 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
                     {providerLabel(prov).replace(/^[^a-zA-Z0-9]+/, '') /* remove prefix symbol if preferred or keep it */}
                   </option>
                 ))}
-              </select>
+              </SelectField>
             </div>
 
             <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '4px' }}>
               <label className="img-studio-label" htmlFor="img-studio-model" style={{ display: 'flex', alignItems: 'center', height: '18px' }}>
                 Model
               </label>
-              <select
+              <SelectField aria-label="Model"
                 id="img-studio-model"
                 className="img-studio-textarea"
-                style={{ padding: '8px 10px', height: '38px', cursor: 'pointer' }}
+
                 value={selectedModel}
-                onChange={(e) => setSelectedModel(e.target.value)}
+                onValueChange={(nextValue) => setSelectedModel(nextValue)}
                 disabled={generating}
               >
                 {modelOptions.map(({ value, label }) => (
@@ -312,8 +303,8 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
                 {selectedModel && selectedModel !== 'custom' && !modelOptions.some(m => m.value === selectedModel) && (
                   <option key={selectedModel} value={selectedModel}>{selectedModel}</option>
                 )}
-                <option value="custom">Custom Model ID...</option>
-              </select>
+              <option value="custom">Custom model ID…</option>
+              </SelectField>
             </div>
           </div>
 
@@ -340,7 +331,7 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
           {/* Image Editing / Source Image Attachment */}
           <div className="img-studio-field">
             <label className="img-studio-label">
-              Source Image (Optional for Image Editing)
+              Source image (optional for image editing)
               <span className="img-studio-label-hint">Upload an image to edit / inpaint</span>
             </label>
             {inputImage ? (
@@ -348,16 +339,16 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
                 <img src={inputImage} alt="Input source" className="img-studio-preview-thumb" />
                 <div className="img-studio-preview-info">
                   <div className="img-studio-preview-title">
-                    <span>Source Image Attached</span>
+                    <span>Source image attached</span>
                   </div>
-                  <div className="img-studio-preview-subtitle">Ready for Image Editing</div>
+                  <div className="img-studio-preview-subtitle">Ready for image editing</div>
                 </div>
                 <button
                   type="button"
                   className="img-studio-preview-remove"
                   onClick={() => setInputImage(null)}
                 >
-                  ✕ Remove
+                  ✕ Remove image
                 </button>
               </div>
             ) : (
@@ -381,7 +372,7 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
                   <polyline points="17 8 12 3 7 8"/>
                   <line x1="12" y1="3" x2="12" y2="15"/>
                 </svg>
-                <div className="img-studio-dropzone-text">Click or Drag & Drop image here</div>
+                <div className="img-studio-dropzone-text">Click to choose an image or drag it here</div>
                 <div className="img-studio-dropzone-subtext">PNG, JPG, WEBP up to 10MB</div>
               </div>
             )}
@@ -390,7 +381,7 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
           {/* Prompt */}
           <div className="img-studio-field">
             <label className="img-studio-label" htmlFor="img-studio-prompt">
-              {inputImage ? 'Editing Instruction Prompt' : 'Prompt'}
+              {inputImage ? 'Editing instructions' : 'Prompt'}
               <span className="img-studio-label-hint">{inputImage ? 'Describe what to edit or remove' : 'Describe the image you want'}</span>
             </label>
             <textarea
@@ -462,7 +453,7 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
           <div className="img-studio-field">
             <span className="img-studio-label">Aspect ratio</span>
             <div className="img-studio-aspect-group" role="radiogroup" aria-label="Aspect ratio">
-              {ASPECT_OPTIONS.map(({ value, label, icon }) => (
+              {ASPECT_Options.map(({ value, label, icon }) => (
                 <button
                   key={value}
                   type="button"
@@ -522,14 +513,14 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
             {generating ? (
               <>
                 <span className="img-studio-spinner" aria-hidden="true" />
-                Generating...
+                Generating…
               </>
             ) : (
               <>
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                   <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
                 </svg>
-                Generate Image
+                Generate image
               </>
             )}
           </button>
@@ -622,14 +613,14 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
                           <button
                             type="button"
                             className="img-studio-action-btn img-studio-action-btn--primary"
-                            onClick={() => onSendToChat(entry.url || entry.path, prompt)}
-                            title="Send to Chat"
+                            onClick={() => onSendToChat(imageSourceForChat(entry), prompt)}
+                          title="Send to chat"
                             id={`img-studio-send-${idx}`}
                           >
                             <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                               <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
                             </svg>
-                            Send to Chat
+                            Send to chat
                           </button>
                         )}
                       </div>
@@ -661,7 +652,7 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                 <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
               </svg>
-              <span>Gallery & History</span>
+              <span>Gallery & history</span>
               <span className="img-studio-history-badge">
                 {(() => {
                   const currentIds = new Set(result?.images.map(img => img.id) || [])
@@ -692,11 +683,20 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
                     <article key={picture.id} className="img-studio-card" aria-label={`Saved image ${idx + 1}`}>
                       <div className="img-studio-card-img-wrap">
                         <img
-                          src={convertFileSrc(picture.thumbnailUrl || picture.thumbnailPath || picture.url || picture.path)}
+                          // Prefer filesystem paths: Tauri's convertFileSrc expects a path,
+                          // while thumbnailUrl may be a `file://` URL on desktop.
+                          src={convertFileSrc(picture.thumbnailPath || picture.thumbnailUrl || picture.url || picture.path)}
                           alt={picture.message || 'Generated image'}
                           className="img-studio-card-img"
                           loading="lazy"
                           decoding="async"
+                          onError={(event) => {
+                            const image = event.currentTarget
+                            if (image.dataset.fallback) return
+                            image.dataset.fallback = 'true'
+                            const originalPath = picture.path || picture.url
+                            if (originalPath) image.src = convertFileSrc(originalPath)
+                          }}
                         />
                       </div>
                       <div className="img-studio-card-actions">
@@ -716,14 +716,14 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
                           <button
                             type="button"
                             className="img-studio-action-btn img-studio-action-btn--primary"
-                            onClick={() => onSendToChat(picture.url || picture.path, picture.message || '')}
-                            title="Send to Chat"
+                            onClick={() => onSendToChat(imageSourceForChat(picture), picture.message || '')}
+                          title="Send to chat"
                             id={`img-studio-gallery-send-${idx}`}
                           >
                             <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                               <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
                             </svg>
-                            Send to Chat
+                            Send to chat
                           </button>
                         )}
                       </div>

package/src/renderer/shared/components/InlineThoughtNote.tsx

@@ -0,0 +1,27 @@
+/**
+ * shared/components/InlineThoughtNote.tsx
+ * Renders a short, inline agent thought note in the activity timeline.
+ * These are brief notes like "Switched provider", "Using JSON mode fallback",
+ * or the agent's short reasoning about what to do next — distinct from
+ * extended model thinking (which goes in ThinkingBlock).
+ * Shared by both Desktop and Web ChatPanel — do NOT duplicate this.
+ */
+import { renderFormattedMessage } from '../utils/markdown'
+import { cleanIntermediateThought } from '../utils/agentActivity'
+
+interface Props {
+  thought: string
+}
+
+export function InlineThoughtNote({ thought }: Props) {
+  const cleaned = cleanIntermediateThought(thought)
+  if (!cleaned) return null
+  return (
+    <div className="inline-thought-note">
+      <div className="inline-thought-note-text">
+        {renderFormattedMessage(cleaned) ?? cleaned}
+      </div>
+    </div>
+  )
+}
+

package/src/renderer/shared/components/LibraryItemCard.tsx

@@ -0,0 +1,72 @@
+import { Download, FileText, Image, Trash2, Undo2, Video } from 'lucide-react'
+import type { LibraryItem } from '../types'
+import { useLibraryFile } from '../library/useLibraryFile'
+
+function formatSize(size: number) {
+  if (size < 1024) return `${size} B`
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`
+  return `${(size / 1024 / 1024).toFixed(1)} MB`
+}
+
+function Thumbnail({ item }: { item: LibraryItem }) {
+  const enabled = item.thumbnailStatus === 'ready' && !item.deletedAt && item.availability === 'ready'
+  const file = useLibraryFile(enabled ? item.id : null, true)
+  const Icon = item.kind === 'image' ? Image : item.kind === 'video' ? Video : FileText
+  return (
+    <span className={`library-thumbnail is-${item.kind}`}>
+      {file.url ? <img src={file.url} alt="" loading="lazy" /> : <Icon size={23} />}
+    </span>
+  )
+}
+
+export default function LibraryItemCard({ item, linked, trashed, actionPending, downloadPending, onPreview, onDownload, onMove, onRemove }: {
+  item: LibraryItem
+  linked: boolean
+  trashed: boolean
+  actionPending: boolean
+  downloadPending: boolean
+  onPreview: (item: LibraryItem) => void
+  onDownload: (item: LibraryItem) => void
+  onMove: (item: LibraryItem) => void
+  onRemove: (item: LibraryItem) => void
+}) {
+  const missing = item.availability === 'missing'
+  const disabled = missing || !!item.deletedAt
+  const status = missing ? 'Original file missing' : item.deletedAt ? 'In Trash'
+    : item.origin === 'generated' ? 'AI generated' : item.origin === 'legacy' ? 'Imported from Pictures' : 'Uploaded'
+  return (
+    <article className={`library-item ${linked ? 'is-linked' : ''}`}>
+      <button className="library-item-preview" data-preview={item.id} type="button" disabled={disabled}
+        onClick={() => onPreview(item)} aria-label={`Preview ${item.name}`}>
+        <Thumbnail item={item} />
+        <span className="library-item-copy">
+          <strong title={item.name}>{item.name}</strong>
+          <small>{status} · {formatSize(item.size)}</small>
+        </span>
+      </button>
+      <span className="library-item-date">
+        {new Date(item.createdAt).toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' })}
+      </span>
+      <div className="library-item-actions">
+        {!trashed && (
+          <button type="button" aria-label={`Download ${item.name}`} disabled={disabled || downloadPending} onClick={() => onDownload(item)}>
+            <Download size={16} />
+          </button>
+        )}
+        <button type="button" aria-label={trashed ? `Restore ${item.name}` : `Move ${item.name} to Trash`}
+          data-trash={trashed ? undefined : item.id} data-restore={trashed ? item.id : undefined}
+          disabled={actionPending} onClick={() => onMove(item)}>
+          {trashed ? <Undo2 size={16} /> : <Trash2 size={16} />}
+        </button>
+        {trashed && (
+          <button type="button" data-remove={item.id} disabled={actionPending}
+            aria-label={`Remove ${item.name} from Mint`}
+            title="Remove from Mint and move files to system Trash"
+            onClick={() => onRemove(item)}>
+            <Trash2 size={16} />
+          </button>
+        )}
+      </div>
+    </article>
+  )
+}