@pheem49/mint 1.16.0 → 1.18.0

package/src/renderer/shared/components/{ArtifactPreviewPanel.tsx → workspace/ArtifactPreviewPanel.tsx}

@@ -1,18 +1,54 @@
-import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'
-import { openArtifactInMintBrowser } from '../utils/artifactBrowser'
-import { runtimePlatform } from '../platform'
-import { renderFormattedMessage } from '../utils/markdown'
-import { ChatCodeBlock } from './ChatCodeBlock'
+import React, { lazy, Suspense, useState, useEffect, useCallback, useMemo, useRef } from 'react'
+import {
+  Image as ImageIcon,
+  FileCode,
+  FileText,
+  Globe,
+  Music,
+  Video,
+  File,
+  Eye,
+} from 'lucide-react'
+import { openArtifactInBrowser } from '../../utils/artifactBrowser'
+import { runtimePlatform } from '../../platform'
+import { renderFormattedMessage } from '../../utils/markdown'
+import { ChatCodeBlock } from '../chat/ChatCodeBlock'
+import WorkspaceFileInfo from './WorkspaceFileInfo'
+import WorkspaceMediaPreview from './WorkspaceMediaPreview'
 
-export type ArtifactType = 'html' | 'svg' | 'markdown' | 'image' | 'code'
-export type ViewportMode = 'desktop' | 'tablet' | 'mobile'
+const WorkspacePdfPreview = lazy(() => import('./WorkspacePdfPreview'))
 
-export interface ArtifactFile {
-  path: string
-  workspacePath?: string
-  url?: string
-  content?: string
-  type?: ArtifactType
+import {
+  type ArtifactFile,
+  type ArtifactType,
+  type ViewportMode,
+  detectArtifactType,
+  getFileLanguage,
+} from '../../utils/artifacts'
+import { setWorkspaceDragData } from '../../utils/workspaceDrag'
+
+export type { ArtifactFile, ArtifactType, ViewportMode }
+export { detectArtifactType, getFileLanguage }
+
+function renderArtifactTypeIcon(type: ArtifactType) {
+  switch (type) {
+    case 'image':
+      return <ImageIcon size={13} strokeWidth={2.2} aria-hidden="true" />
+    case 'html':
+      return <Globe size={13} strokeWidth={2.2} aria-hidden="true" />
+    case 'svg':
+    case 'code':
+      return <FileCode size={13} strokeWidth={2.2} aria-hidden="true" />
+    case 'markdown':
+    case 'pdf':
+      return <FileText size={13} strokeWidth={2.2} aria-hidden="true" />
+    case 'audio':
+      return <Music size={13} strokeWidth={2.2} aria-hidden="true" />
+    case 'video':
+      return <Video size={13} strokeWidth={2.2} aria-hidden="true" />
+    default:
+      return <File size={13} strokeWidth={2.2} aria-hidden="true" />
+  }
 }
 
 interface Props {
@@ -21,38 +57,27 @@ interface Props {
   workspacePath?: string
 }
 
-export function detectArtifactType(filePath: string): ArtifactType {
-  const lower = filePath.toLowerCase()
-  if (lower.endsWith('.html') || lower.endsWith('.htm')) return 'html'
-  if (/\.(png|jpe?g|gif|webp|ico)$/.test(lower)) return 'image'
-  if (lower.endsWith('.svg')) return 'svg'
-  if (lower.endsWith('.md') || lower.endsWith('.markdown')) return 'markdown'
-  return 'code'
-}
+export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props) {
+  const filePath = artifact?.path || ''
+  const fileName = useMemo(() => {
+    if (!filePath) return ''
+    const parts = filePath.replace(/\\/g, '/').split('/')
+    return parts[parts.length - 1] || filePath
+  }, [filePath])
 
-export function getFileLanguage(filePath: string): string {
-  const ext = filePath.split('.').pop()?.toLowerCase() || ''
-  const map: Record<string, string> = {
-    js: 'javascript',
-    jsx: 'javascript',
-    ts: 'typescript',
-    tsx: 'typescript',
-    html: 'html',
-    htm: 'html',
-    css: 'css',
-    json: 'json',
-    rs: 'rust',
-    py: 'python',
-    svg: 'xml',
-    md: 'markdown',
-  }
-  return map[ext] || ext || 'plaintext'
-}
+  const artifactType: ArtifactType = useMemo(() => {
+    if (artifact?.type) return artifact.type
+    return detectArtifactType(filePath)
+  }, [artifact, filePath])
 
-export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props) {
-  const [activeTab, setActiveTab] = useState<'preview' | 'code'>('preview')
+  const isDualMode = artifactType === 'html' || artifactType === 'svg' || artifactType === 'markdown'
+
+  const [activeTab, setActiveTab] = useState<'preview' | 'code'>(artifactType === 'code' ? 'code' : 'preview')
   const [viewport, setViewport] = useState<ViewportMode>('desktop')
   const [content, setContent] = useState<string>(artifact?.content || '')
+  const [imageUrl, setImageUrl] = useState(artifact?.url || '')
+  const [mediaUrl, setMediaUrl] = useState<string>(artifact?.url || '')
+  const [mediaByteLength, setMediaByteLength] = useState<number | undefined>(artifact?.byteLength)
   const [loading, setLoading] = useState<boolean>(false)
   const [error, setError] = useState<string | null>(null)
   const [openingBrowser, setOpeningBrowser] = useState(false)
@@ -61,32 +86,88 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
   const currentArtifact = useRef(artifact)
   currentArtifact.current = artifact
   const [copied, setCopied] = useState<boolean>(false)
+  const [imageDimensions, setImageDimensions] = useState<{ width: number; height: number } | null>(null)
 
   const [reloadRevision, setReloadRevision] = useState(0)
   const requestRevision = useRef(0)
   const sourceWorkspace = artifact?.workspacePath ?? workspacePath
 
-  const filePath = artifact?.path || ''
-  const fileName = useMemo(() => {
-    if (!filePath) return ''
-    const parts = filePath.replace(/\\/g, '/').split('/')
-    return parts[parts.length - 1] || filePath
-  }, [filePath])
+  const language = useMemo(() => getFileLanguage(filePath), [filePath])
+  const mediaPreview = artifactType === 'pdf' || artifactType === 'audio' || artifactType === 'video'
 
-  const artifactType: ArtifactType = useMemo(() => {
-    if (artifact?.type) return artifact.type
-    return detectArtifactType(filePath)
-  }, [artifact, filePath])
+  const imageFormatLabel = useMemo(() => {
+    if (artifactType !== 'image') return 'Image'
+    const ext = filePath.split('.').pop()?.toUpperCase() || ''
+    if (ext === 'JPG') return 'JPEG'
+    if (['PNG', 'JPEG', 'WEBP', 'GIF', 'SVG', 'ICO', 'AVIF', 'BMP', 'TIFF'].includes(ext)) {
+      return ext
+    }
+    return 'IMAGE'
+  }, [artifactType, filePath])
 
-  const language = useMemo(() => getFileLanguage(filePath), [filePath])
+  const codeLabel = useMemo(() => {
+    if (!language || language === 'plaintext') return 'Code'
+    const customNames: Record<string, string> = {
+      javascript: 'JavaScript',
+      typescript: 'TypeScript',
+      python: 'Python',
+      rust: 'Rust',
+      json: 'JSON',
+      html: 'HTML',
+      css: 'CSS',
+      cpp: 'C++',
+      csharp: 'C#',
+      php: 'PHP',
+      ruby: 'Ruby',
+      shell: 'Shell',
+      bash: 'Bash',
+      sql: 'SQL',
+      yaml: 'YAML',
+      xml: 'XML',
+      toml: 'TOML',
+      markdown: 'Markdown',
+    }
+    return customNames[language.toLowerCase()] || (language.charAt(0).toUpperCase() + language.slice(1))
+  }, [language])
 
-  const fetchContent = useCallback(async () => {
+  const fetchContent = useCallback(async (refreshImage = false) => {
     const revision = ++requestRevision.current
     setError(null)
+    setImageDimensions(null)
     setReloadRevision((value) => value + 1)
     if (!filePath) return
+    if (refreshImage && activeTab === 'preview' && (artifactType === 'image' || artifactType === 'svg') && artifact?.url?.startsWith('data:image/') && sourceWorkspace) {
+      setLoading(true)
+      try {
+        const url = await runtimePlatform.readWorkspaceImage(filePath, sourceWorkspace)
+        if (requestRevision.current === revision) setImageUrl(url)
+      } catch (reason) {
+        if (requestRevision.current === revision) setError(reason instanceof Error ? reason.message : String(reason))
+      } finally { if (requestRevision.current === revision) setLoading(false) }
+      return
+    }
     // Served previews load directly. Text is only needed when their Code tab is selected.
-    if (artifactType === 'image' || (artifact?.url && activeTab === 'preview')) {
+    if (mediaPreview) {
+      if (artifact?.url) {
+        setMediaUrl(artifact.url)
+        setLoading(false)
+        return
+      }
+      setLoading(true)
+      try {
+        const media = await runtimePlatform.readWorkspaceMedia(filePath, sourceWorkspace)
+        if (requestRevision.current === revision) {
+          setMediaUrl(media.url)
+          setMediaByteLength(media.byteLength)
+        }
+      } catch (reason) {
+        if (requestRevision.current === revision) setError(reason instanceof Error ? reason.message : String(reason))
+      } finally {
+        if (requestRevision.current === revision) setLoading(false)
+      }
+      return
+    }
+    if (artifactType === 'file' || artifactType === 'image' || (artifact?.url && activeTab === 'preview')) {
       setLoading(false)
       if (artifactType === 'image' && !artifact?.url) setError('No image preview URL is available')
       return
@@ -102,24 +183,28 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
     } finally {
       if (requestRevision.current === revision) setLoading(false)
     }
-  }, [filePath, sourceWorkspace, artifact, artifactType, activeTab])
+  }, [filePath, sourceWorkspace, artifact, artifactType, activeTab, mediaPreview])
 
   useEffect(() => {
-    setActiveTab('preview')
+    setActiveTab(artifactType === 'code' ? 'code' : 'preview')
     setBrowserError(null)
     setContent(artifact?.content ?? '')
+    setImageUrl(artifact?.url ?? '')
+    setMediaUrl(artifact?.url ?? '')
+    setMediaByteLength(artifact?.byteLength)
+    setImageDimensions(null)
     setError(null)
-  }, [artifact])
+  }, [artifact, artifactType])
 
   useEffect(() => {
-    if (artifact?.content !== undefined && activeTab === 'preview') {
+    if (artifact?.content !== undefined && (activeTab === 'preview' || !filePath)) {
       setLoading(false)
       setError(null)
     } else {
       void fetchContent()
     }
     return () => { requestRevision.current += 1 }
-  }, [artifact, activeTab, fetchContent])
+  }, [artifact, activeTab, filePath, fetchContent])
 
   const handleCopyPath = async () => {
     if (!filePath) return
@@ -138,7 +223,7 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
     setOpeningBrowser(true)
     setBrowserError(null)
     try {
-      await openArtifactInMintBrowser(artifact, sourceWorkspace)
+      await openArtifactInBrowser(artifact, sourceWorkspace)
     } catch (reason: unknown) {
       if (currentArtifact.current === artifact) {
         setBrowserError(reason instanceof Error ? reason.message : String(reason))
@@ -181,7 +266,25 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
           flexShrink: 0,
         }}
       >
-        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', minWidth: 0 }}>
+        <div
+          className="artifact-preview-header-drag"
+          draggable={Boolean(filePath)}
+          onDragStart={filePath ? (event) => {
+            setWorkspaceDragData(event.dataTransfer, {
+              path: filePath,
+              root: sourceWorkspace,
+              url: imageUrl || artifact?.url,
+            })
+          } : undefined}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            minWidth: 0,
+            cursor: filePath ? 'grab' : undefined,
+          }}
+          title={filePath ? `${filePath} (Drag to chat)` : undefined}
+        >
           <span
             style={{
               display: 'inline-flex',
@@ -192,12 +295,12 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
               borderRadius: 'var(--radius-xs, 4px)',
               background: 'color-mix(in srgb, var(--accent) 15%, transparent)',
               color: 'var(--interactive-fg)',
-              fontSize: '0.68rem',
-              fontWeight: 700,
               flexShrink: 0,
             }}
+            title={artifactType.toUpperCase()}
+            aria-label={`${artifactType} artifact`}
           >
-            {artifactType.toUpperCase().slice(0, 3)}
+            {renderArtifactTypeIcon(artifactType)}
           </span>
           <div style={{ minWidth: 0, display: 'flex', flexDirection: 'column' }}>
             <span
@@ -236,51 +339,114 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
 
         {/* Center: Tabs & Viewport */}
         <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
-          {/* Preview vs Code tab toggle */}
-          <div
-            style={{
-              display: 'inline-flex',
-              padding: '2px',
-              background: 'color-mix(in srgb, var(--text-main) 6%, transparent)',
-              borderRadius: 'var(--radius-sm, 6px)',
-              border: '1px solid var(--border)',
-            }}
-          >
-            <button
-              type="button"
-              onClick={() => setActiveTab('preview')}
-              style={{
-                background: activeTab === 'preview' ? 'var(--accent)' : 'transparent',
-                color: activeTab === 'preview' ? '#ffffff' : 'var(--text-muted)',
-                border: 'none',
-                borderRadius: 'var(--radius-xs, 4px)',
-                padding: '3px 9px',
-                fontSize: '0.75rem',
-                fontWeight: 500,
-                cursor: 'pointer',
-                transition: 'all 0.15s ease',
-              }}
-            >
-              Preview
-            </button>
-            {artifactType !== 'image' && <button
-              type="button"
-              onClick={() => setActiveTab('code')}
+          {/* Dual-mode (Preview vs Code): Only for HTML, SVG, and Markdown */}
+          {isDualMode ? (
+            <div
               style={{
-                background: activeTab === 'code' ? 'var(--accent)' : 'transparent',
-                color: activeTab === 'code' ? '#ffffff' : 'var(--text-muted)',
-                border: 'none',
-                borderRadius: 'var(--radius-xs, 4px)',
-                padding: '3px 9px',
-                fontSize: '0.75rem',
-                fontWeight: 500,
-                cursor: 'pointer',
-                transition: 'all 0.15s ease',
+                display: 'inline-flex',
+                padding: '2px',
+                background: 'color-mix(in srgb, var(--text-main) 6%, transparent)',
+                borderRadius: 'var(--radius-sm, 6px)',
+                border: '1px solid var(--border)',
               }}
             >
-              Code
-            </button>}
-          </div>
+              <button
+                type="button"
+                onClick={() => setActiveTab('preview')}
+                style={{
+                  background: activeTab === 'preview' ? 'var(--accent)' : 'transparent',
+                  color: activeTab === 'preview' ? 'var(--text-on-accent)' : 'var(--text-muted)',
+                  border: 'none',
+                  borderRadius: 'var(--radius-xs, 4px)',
+                  padding: '3px 9px',
+                  fontSize: '0.75rem',
+                  fontWeight: 500,
+                  cursor: 'pointer',
+                  transition: 'all 0.15s ease',
+                }}
+              >
+                Preview
+              </button>
+              <button
+                type="button"
+                onClick={() => setActiveTab('code')}
+                style={{
+                  background: activeTab === 'code' ? 'var(--accent)' : 'transparent',
+                  color: activeTab === 'code' ? 'var(--text-on-accent)' : 'var(--text-muted)',
+                  border: 'none',
+                  borderRadius: 'var(--radius-xs, 4px)',
+                  padding: '3px 9px',
+                  fontSize: '0.75rem',
+                  fontWeight: 500,
+                  cursor: 'pointer',
+                  transition: 'all 0.15s ease',
+                }}
+              >
+                Code
+              </button>
+            </div>
+          ) : (
+            <div style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}>
+              <div
+                style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: '5px',
+                  padding: '3px 10px',
+                  background:
+                    artifactType === 'image' || artifactType === 'code'
+                      ? 'color-mix(in srgb, var(--accent) 10%, transparent)'
+                      : 'color-mix(in srgb, var(--text-main) 6%, transparent)',
+                  borderRadius: '9999px',
+                  border:
+                    artifactType === 'image' || artifactType === 'code'
+                      ? '1px solid color-mix(in srgb, var(--accent) 25%, transparent)'
+                      : '1px solid var(--border)',
+                  color: artifactType === 'image' || artifactType === 'code' ? 'var(--accent)' : 'var(--text-muted)',
+                  fontSize: '0.72rem',
+                  fontWeight: 500,
+                  letterSpacing: '0.01em',
+                }}
+              >
+                {artifactType === 'code' ? (
+                  <FileCode size={12} strokeWidth={2.2} aria-hidden="true" />
+                ) : artifactType === 'image' ? (
+                  <ImageIcon size={12} strokeWidth={2.2} aria-hidden="true" />
+                ) : (
+                  <Eye size={12} strokeWidth={2.2} aria-hidden="true" />
+                )}
+                <span>
+                  {artifactType === 'code'
+                    ? codeLabel
+                    : artifactType === 'image'
+                      ? imageFormatLabel
+                      : artifactType === 'file'
+                        ? 'Details'
+                        : 'Preview'}
+                </span>
+              </div>
+              {artifactType === 'image' && imageDimensions && (
+                <div
+                  style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    padding: '3px 9px',
+                    borderRadius: '9999px',
+                    background: 'color-mix(in srgb, var(--text-main) 6%, transparent)',
+                    border: '1px solid var(--border)',
+                    fontSize: '0.7rem',
+                    color: 'var(--text-muted)',
+                    fontFamily: 'var(--font-mono, monospace)',
+                    letterSpacing: '0.01em',
+                    whiteSpace: 'nowrap',
+                  }}
+                  title="Image dimensions (width × height)"
+                >
+                  {imageDimensions.width} × {imageDimensions.height} px
+                </div>
+              )}
+            </div>
+          )}
 
           {/* Viewport switcher for HTML */}
           {activeTab === 'preview' && artifactType === 'html' && (
@@ -347,9 +513,9 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
 
         {/* Right actions */}
         <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
-          <button
+          {!mediaPreview && <button
             type="button"
-            onClick={fetchContent}
+            onClick={() => { void fetchContent(true) }}
             disabled={loading}
             title="Reload content from file"
             style={{
@@ -378,15 +544,15 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
               <polyline points="1 20 1 14 7 14" />
               <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
             </svg>
-          </button>
+          </button>}
 
-          <button
+          {artifactType === 'html' && <button
             type="button"
             onClick={() => { void handleOpenInMintBrowser() }}
             disabled={openingBrowser}
-            aria-label="Open in Mint Browser (Mint Auto)"
+            aria-label="Open preview"
             aria-busy={openingBrowser}
-            title={openingBrowser ? 'Opening Mint Browser…' : 'Open in Mint Browser (Mint Auto)'}
+            title={openingBrowser ? 'Opening preview…' : 'Open preview'}
             style={{
               background: 'none',
               border: 'none',
@@ -403,7 +569,69 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
               <polyline points="15 3 21 3 21 9" />
               <line x1="10" y1="14" x2="21" y2="3" />
             </svg>
-          </button>
+          </button>}
+
+          {(artifact?.url || mediaUrl || content) && (
+            <button
+              type="button"
+              onClick={() => {
+                const downloadUrl = artifact?.url || mediaUrl || (content ? `data:text/plain;charset=utf-8,${encodeURIComponent(content)}` : '')
+                if (!downloadUrl) return
+                const a = document.createElement('a')
+                a.href = downloadUrl
+                a.download = fileName || 'download'
+                document.body.appendChild(a)
+                a.click()
+                document.body.removeChild(a)
+              }}
+              title={`Download ${fileName}`}
+              aria-label={`Download ${fileName}`}
+              style={{
+                background: 'none',
+                border: 'none',
+                color: 'var(--text-muted)',
+                padding: '5px',
+                borderRadius: 'var(--radius-xs, 4px)',
+                cursor: 'pointer',
+                display: 'inline-flex',
+                alignItems: 'center',
+              }}
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                <polyline points="7 10 12 15 17 10" />
+                <line x1="12" y1="15" x2="12" y2="3" />
+              </svg>
+            </button>
+          )}
+
+          {(artifact?.url || mediaUrl) && (
+            <button
+              type="button"
+              onClick={() => {
+                const target = artifact?.url || mediaUrl
+                if (target) window.open(target, '_blank', 'noopener,noreferrer')
+              }}
+              title="Open in new window"
+              aria-label="Open in new window"
+              style={{
+                background: 'none',
+                border: 'none',
+                color: 'var(--text-muted)',
+                padding: '5px',
+                borderRadius: 'var(--radius-xs, 4px)',
+                cursor: 'pointer',
+                display: 'inline-flex',
+                alignItems: 'center',
+              }}
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+                <polyline points="15 3 21 3 21 9" />
+                <line x1="10" y1="14" x2="21" y2="3" />
+              </svg>
+            </button>
+          )}
 
           <button
             type="button"
@@ -430,7 +658,7 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
 
       {browserError && (
         <div role="alert" style={{ padding: '8px 14px', fontSize: '0.8rem', color: 'var(--status-error, #f87171)', flexShrink: 0 }}>
-          Could not open Mint Browser: {browserError}
+          Could not open preview: {browserError}
         </div>
       )}
 
@@ -453,7 +681,7 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
             <p style={{ fontSize: '0.8rem', opacity: 0.8 }}>{error}</p>
             <button
               type="button"
-              onClick={fetchContent}
+              onClick={() => { void fetchContent(true) }}
               style={{
                 marginTop: '12px',
                 padding: '4px 12px',
@@ -468,6 +696,12 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
               Retry
             </button>
           </div>
+        ) : artifactType === 'file' ? (
+          <WorkspaceFileInfo key={`${sourceWorkspace}:${filePath}`} path={filePath} root={sourceWorkspace} />
+        ) : artifactType === 'pdf' && (artifact.url || mediaUrl) ? (
+          <Suspense fallback={<p role="status">Loading PDF viewer…</p>}><WorkspacePdfPreview key={artifact.url || mediaUrl} url={artifact.url || mediaUrl} path={filePath} root={sourceWorkspace} byteLength={artifact.byteLength || mediaByteLength} range={artifact.range} /></Suspense>
+        ) : (artifactType === 'audio' || artifactType === 'video') && (artifact.url || mediaUrl) ? (
+          <WorkspaceMediaPreview key={artifact.url || mediaUrl} kind={artifactType} url={artifact.url || mediaUrl} path={filePath} root={sourceWorkspace} mimeType={artifact.mimeType} />
         ) : activeTab === 'code' ? (
           <div style={{ width: '100%', height: '100%', overflow: 'auto', padding: '12px' }}>
             <ChatCodeBlock code={content} language={language} />
@@ -505,10 +739,32 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
           <div style={{ width: '100%', height: '100%', padding: '24px', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
             <img
               key={reloadRevision}
-              src={artifact.url}
+              ref={(el) => {
+                if (el && el.complete && el.naturalWidth && el.naturalHeight) {
+                  setImageDimensions((prev) => {
+                    if (prev?.width === el.naturalWidth && prev?.height === el.naturalHeight) return prev
+                    return { width: el.naturalWidth, height: el.naturalHeight }
+                  })
+                }
+              }}
+              draggable
+              onDragStart={(event) => {
+                setWorkspaceDragData(event.dataTransfer, {
+                  path: filePath,
+                  root: sourceWorkspace,
+                  url: imageUrl || artifact?.url,
+                })
+              }}
+              src={imageUrl || artifact.url}
               alt={fileName}
-              style={{ width: '100%', height: '100%', objectFit: 'contain' }}
-              onError={() => setError('Unable to load image. Check that the preview server is still running.')}
+              style={{ width: '100%', height: '100%', objectFit: 'contain', cursor: 'grab' }}
+              onLoad={(e) => {
+                const img = e.currentTarget
+                if (img.naturalWidth && img.naturalHeight) {
+                  setImageDimensions({ width: img.naturalWidth, height: img.naturalHeight })
+                }
+              }}
+              onError={() => setError('Unable to load image. Reload the preview or check that the file is still available.')}
             />
           </div>
         ) : artifactType === 'svg' ? (