@pheem49/mint 1.14.0 → 1.15.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'
 
@@ -25,51 +25,45 @@ function ImageTile({ image }: { image: ImageSearchHit }) {
   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}
+    <div
       style={{
         position: 'relative',
         display: 'block',
         borderRadius: '10px',
         overflow: 'hidden',
         aspectRatio: '1 / 1',
-        background: 'rgba(255, 255, 255, 0.04)',
-        border: '1px solid rgba(255, 255, 255, 0.08)',
+        background: 'var(--surface-strong)',
+        border: '1px solid var(--border)',
         textDecoration: 'none',
       }}
     >
-      <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 href={sourceUrl} target="_blank" rel="noopener noreferrer" title={image.title} style={{ display: 'block', width: '100%', height: '100%' }}>
+        <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>
       {image.title && (
         <div
           style={{
             position: 'absolute',
             left: 0,
             right: 0,
-            bottom: 0,
+            bottom: 24,
             padding: '6px 8px',
             fontSize: '11px',
             lineHeight: 1.3,
@@ -78,55 +72,82 @@ function ImageTile({ image }: { image: ImageSearchHit }) {
             overflow: 'hidden',
             textOverflow: 'ellipsis',
             whiteSpace: 'nowrap',
+            pointerEvents: 'none',
           }}
         >
           {image.title}
         </div>
       )}
-    </a>
+      <a
+        href={resolveMediaUrl(image.imageUrl)}
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{ position: 'absolute', right: 6, bottom: 5, zIndex: 1, padding: '2px 5px', borderRadius: 4, background: 'var(--surface-strong)', color: 'var(--interactive-fg-hover)', fontSize: 10 }}
+      >
+        View full image
+      </a>
+    </div>
   )
 }
 
 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 style={{ fontSize: '13px', color: queryColor }}>
             &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>
       ) : (

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

@@ -1,15 +1,9 @@
 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 +11,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 +34,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 +53,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 +241,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>
@@ -312,7 +302,7 @@ 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>
+              <option value="custom">Custom model ID…</option>
               </select>
             </div>
           </div>
@@ -340,7 +330,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 +338,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 +371,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 +380,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 +452,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 +512,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 +612,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 +651,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 +682,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 +715,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>
+  )
+}
+