@pheem49/mint 1.17.0 → 1.18.0

package/src/renderer/shared/components/workspace/ArtifactPreviewPanel.tsx

@@ -9,7 +9,7 @@ import {
   File,
   Eye,
 } from 'lucide-react'
-import { openArtifactInMintBrowser } from '../../utils/artifactBrowser'
+import { openArtifactInBrowser } from '../../utils/artifactBrowser'
 import { runtimePlatform } from '../../platform'
 import { renderFormattedMessage } from '../../utils/markdown'
 import { ChatCodeBlock } from '../chat/ChatCodeBlock'
@@ -25,6 +25,7 @@ import {
   detectArtifactType,
   getFileLanguage,
 } from '../../utils/artifacts'
+import { setWorkspaceDragData } from '../../utils/workspaceDrag'
 
 export type { ArtifactFile, ArtifactType, ViewportMode }
 export { detectArtifactType, getFileLanguage }
@@ -75,6 +76,8 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
   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)
@@ -144,9 +147,28 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
       return
     }
     // Served previews load directly. Text is only needed when their Code tab is selected.
-    if (mediaPreview || artifactType === 'file' || 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 (mediaPreview && !artifact?.url) setError('No media preview source is available')
       if (artifactType === 'image' && !artifact?.url) setError('No image preview URL is available')
       return
     }
@@ -168,6 +190,8 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
     setBrowserError(null)
     setContent(artifact?.content ?? '')
     setImageUrl(artifact?.url ?? '')
+    setMediaUrl(artifact?.url ?? '')
+    setMediaByteLength(artifact?.byteLength)
     setImageDimensions(null)
     setError(null)
   }, [artifact, artifactType])
@@ -199,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))
@@ -242,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',
@@ -508,9 +550,9 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
             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',
@@ -529,6 +571,68 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
             </svg>
           </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"
             onClick={onClose}
@@ -554,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>
       )}
 
@@ -594,10 +698,10 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
           </div>
         ) : artifactType === 'file' ? (
           <WorkspaceFileInfo key={`${sourceWorkspace}:${filePath}`} path={filePath} root={sourceWorkspace} />
-        ) : artifactType === 'pdf' && artifact.url ? (
-          <Suspense fallback={<p role="status">Loading PDF viewer…</p>}><WorkspacePdfPreview key={artifact.url} url={artifact.url} path={filePath} root={sourceWorkspace} byteLength={artifact.byteLength} range={artifact.range} /></Suspense>
-        ) : (artifactType === 'audio' || artifactType === 'video') && artifact.url ? (
-          <WorkspaceMediaPreview key={artifact.url} kind={artifactType} url={artifact.url} path={filePath} root={sourceWorkspace} mimeType={artifact.mimeType} />
+        ) : 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} />
@@ -643,9 +747,17 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
                   })
                 }
               }}
+              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' }}
+              style={{ width: '100%', height: '100%', objectFit: 'contain', cursor: 'grab' }}
               onLoad={(e) => {
                 const img = e.currentTarget
                 if (img.naturalWidth && img.naturalHeight) {

package/src/renderer/shared/components/workspace/CodeReviewPage.test.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import CodeReviewPage from './CodeReviewPage'
+import type { FileChange } from '../../types'
+
+describe('CodeReviewPage', () => {
+  const sampleChanges: FileChange[] = [
+    {
+      path: 'src/generate_harness_pdf.py',
+      created: false,
+      additions: 10,
+      deletions: 2,
+      hunks: [
+        {
+          oldStart: 1,
+          oldLines: 1,
+          newStart: 1,
+          newLines: 2,
+          oldText: 'print("hello")',
+          newText: 'print("hello")\nprint("world")',
+        },
+      ],
+    },
+  ]
+
+  it('renders tree items with draggable attributes and drag tooltip for chat input', () => {
+    const html = renderToStaticMarkup(
+      <CodeReviewPage
+        changes={sampleChanges}
+        workspacePath="/home/user/project"
+      />
+    )
+
+    // Tree file button is draggable
+    expect(html).toContain('class="code-review-tree-file')
+    expect(html).toMatch(/class="code-review-tree-file[^"]*"[^>]*draggable="true"/)
+    expect(html).toContain('title="src/generate_harness_pdf.py (Drag to chat)"')
+
+    // Tree folder button is draggable
+    expect(html).toContain('class="code-review-tree-folder-btn"')
+    expect(html).toMatch(/class="code-review-tree-folder-btn"[^>]*draggable="true"/)
+    expect(html).toContain('title="src (Drag to chat)"')
+
+    // Diff view file bar path is draggable
+    expect(html).toContain('class="code-review-file-bar-path"')
+    expect(html).toMatch(/class="code-review-file-bar-path"[^>]*draggable="true"/)
+    expect(html).toContain('title="src/generate_harness_pdf.py (Drag to chat)"')
+  })
+})

package/src/renderer/shared/components/workspace/CodeReviewPage.tsx

@@ -13,6 +13,8 @@ import {
   folderIcon,
   documentIcon,
 } from '../../utils/fileIcons'
+import { tokenizeLine } from '../../utils/syntaxHighlight'
+import { setWorkspaceDragData } from '../../utils/workspaceDrag'
 import '../../css/code-review.css'
 
 export function undoDescription(entry: WorkspaceHistoryEntry) {
@@ -368,6 +370,16 @@ export default function CodeReviewPage({
               style={{ paddingLeft: `${depth * 14 + 10}px` }}
               onClick={() => toggleFolder(node.path)}
               aria-expanded={!isCollapsed}
+              draggable="true"
+              onDragStart={(event) => {
+                event.stopPropagation()
+                setWorkspaceDragData(event.dataTransfer, {
+                  path: node.path,
+                  root: workspacePath,
+                  kind: 'directory',
+                })
+              }}
+              title={`${node.path} (Drag to chat)`}
             >
               <span className="code-review-chevron">{isCollapsed ? '›' : '⌄'}</span>
               <span className="code-review-tree-icon material-icon folder" aria-hidden="true">
@@ -389,6 +401,7 @@ export default function CodeReviewPage({
       const ext = getExtension(node.name)
       const fileIconSrc = materialFileIcon(node.name, ext) || documentIcon
       const isCreated = Boolean(node.change?.created)
+      const targetPath = node.change?.path || node.path
 
       return (
         <button
@@ -397,7 +410,16 @@ export default function CodeReviewPage({
           className={`code-review-tree-file${isSelected ? ' is-selected' : ''}`}
           style={{ paddingLeft: `${depth * 14 + 12}px` }}
           onClick={() => setSelectedPath(node.path)}
-          title={node.path}
+          title={`${node.path} (Drag to chat)`}
+          draggable="true"
+          onDragStart={(event) => {
+            event.stopPropagation()
+            setWorkspaceDragData(event.dataTransfer, {
+              path: targetPath,
+              root: workspacePath,
+              kind: 'file',
+            })
+          }}
         >
           <span className="code-review-tree-icon material-icon file" aria-hidden="true">
             {fileIconSrc && <img src={fileIconSrc} alt="" draggable={false} />}
@@ -591,7 +613,19 @@ export default function CodeReviewPage({
                 <span className={`code-review-file-bar-status ${selectedChange.created ? 'is-created' : 'is-modified'}`}>
                   {selectedChange.created ? 'A' : 'M'}
                 </span>
-                <span className="code-review-file-bar-path" title={selectedChange.path}>
+                <span
+                  className="code-review-file-bar-path"
+                  title={`${selectedChange.path} (Drag to chat)`}
+                  draggable="true"
+                  onDragStart={(event) => {
+                    event.stopPropagation()
+                    setWorkspaceDragData(event.dataTransfer, {
+                      path: selectedChange.path,
+                      root: workspacePath,
+                      kind: 'file',
+                    })
+                  }}
+                >
                   {selectedChange.path}
                 </span>
                 <button type="button" className="review-undo-button" disabled={!canUndoFile || history.busy} title={canUndoFile ? selectedFileHistory?.label : selectedFileHistory ? 'Undo newer workspace actions first in File history.' : 'No saved undo action for this file.'} onClick={() => selectedFileHistory && requestUndo(selectedFileHistory)}>Undo edit…</button>
@@ -602,25 +636,52 @@ export default function CodeReviewPage({
               <div className="code-review-code-container">
                 {selectedChange.hunks && selectedChange.hunks.length > 0 ? (
                   selectedChange.hunks.map((hunk, hunkIdx) => {
+                    const fileExt = getExtension(selectedChange.path)
                     const oldLines = diffLines(hunk.oldText)
                     const newLines = diffLines(hunk.newText)
                     let lineCounter = 1
                     return (
                       <div className="code-review-hunk-block" key={`${selectedChange.path}-hunk-${hunkIdx}`}>
-                        {oldLines.map((line, idx) => (
-                          <div className="code-review-line is-del" key={`del-${idx}`}>
-                            <span className="code-review-gutter">{lineCounter++}</span>
-                            <span className="code-review-sign">−</span>
-                            <code className="code-review-code-text">{line || ' '}</code>
-                          </div>
-                        ))}
-                        {newLines.map((line, idx) => (
-                          <div className="code-review-line is-add" key={`add-${idx}`}>
-                            <span className="code-review-gutter">{lineCounter++}</span>
-                            <span className="code-review-sign">+</span>
-                            <code className="code-review-code-text">{line || ' '}</code>
-                          </div>
-                        ))}
+                        {oldLines.map((line, idx) => {
+                          const tokens = tokenizeLine(line, fileExt)
+                          return (
+                            <div className="code-review-line is-del" key={`del-${idx}`}>
+                              <span className="code-review-gutter">{lineCounter++}</span>
+                              <span className="code-review-sign">−</span>
+                              <code className="code-review-code-text">
+                                {tokens.length === 0 ? (
+                                  ' '
+                                ) : (
+                                  tokens.map((tok, tIdx) => (
+                                    <span key={tIdx} className={tok.type}>
+                                      {tok.text}
+                                    </span>
+                                  ))
+                                )}
+                              </code>
+                            </div>
+                          )
+                        })}
+                        {newLines.map((line, idx) => {
+                          const tokens = tokenizeLine(line, fileExt)
+                          return (
+                            <div className="code-review-line is-add" key={`add-${idx}`}>
+                              <span className="code-review-gutter">{lineCounter++}</span>
+                              <span className="code-review-sign">+</span>
+                              <code className="code-review-code-text">
+                                {tokens.length === 0 ? (
+                                  ' '
+                                ) : (
+                                  tokens.map((tok, tIdx) => (
+                                    <span key={tIdx} className={tok.type}>
+                                      {tok.text}
+                                    </span>
+                                  ))
+                                )}
+                              </code>
+                            </div>
+                          )
+                        })}
                       </div>
                     )
                   })

package/src/renderer/shared/components/workspace/GitBranchSelector.tsx

@@ -11,6 +11,56 @@ interface GitBranchSelectorProps {
   onBranchChanged?: () => void
 }
 
+function BranchIcon({ className = '', width = 14, height = 14 }: { className?: string; width?: number; height?: number }) {
+  return (
+    <svg className={className} width={width} height={height} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <line x1="6" y1="3" x2="6" y2="15" />
+      <circle cx="18" cy="6" r="3" />
+      <circle cx="6" cy="18" r="3" />
+      <path d="M18 9a9 9 0 0 1-9 9" />
+    </svg>
+  )
+}
+
+function RemoteGlobeIcon({ className = '', width = 14, height = 14 }: { className?: string; width?: number; height?: number }) {
+  return (
+    <svg className={className} width={width} height={height} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
+      <path d="M2 12h20" />
+    </svg>
+  )
+}
+
+function PlusIcon({ className = '', width = 14, height = 14 }: { className?: string; width?: number; height?: number }) {
+  return (
+    <svg className={className} width={width} height={height} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <line x1="12" y1="5" x2="12" y2="19" />
+      <line x1="5" y1="12" x2="19" y2="12" />
+    </svg>
+  )
+}
+
+function GitGraphIcon({ className = '', width = 14, height = 14 }: { className?: string; width?: number; height?: number }) {
+  return (
+    <svg className={className} width={width} height={height} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <circle cx="5" cy="6" r="3" />
+      <circle cx="5" cy="18" r="3" />
+      <line x1="5" y1="9" x2="5" y2="15" />
+      <circle cx="19" cy="9" r="3" />
+      <path d="M5 9c0 4 4 6 8 6h3" />
+    </svg>
+  )
+}
+
+function ChevronBackIcon({ className = '', width = 14, height = 14 }: { className?: string; width?: number; height?: number }) {
+  return (
+    <svg className={className} width={width} height={height} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <polyline points="15 18 9 12 15 6" />
+    </svg>
+  )
+}
+
 function errorMessage(reason: unknown): string {
   if (reason instanceof Error) return reason.message
   if (typeof reason === 'string') return reason
@@ -139,6 +189,7 @@ export default function GitBranchSelector({ workspacePath, disabled = false, onB
           title={`${error} Select to retry.`}
           aria-label="Git branch unavailable. Retry"
         >
+          <BranchIcon className="git-branch-icon" width={14} height={14} />
           <span className="git-branch-name">Git unavailable</span>
         </button>
       </div>
@@ -289,16 +340,11 @@ export default function GitBranchSelector({ workspacePath, disabled = false, onB
         aria-controls="workspace-branch-menu"
         title={`${branchLabel}${info.isDirty ? ' — uncommitted changes' : ''}`}
       >
-        <svg className="git-branch-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-          <circle cx="6" cy="5" r="2" />
-          <circle cx="18" cy="6" r="2" />
-          <circle cx="6" cy="19" r="2" />
-          <path d="M6 7v10M8 7c2 4 8 1 8-1" />
-        </svg>
+        <BranchIcon className="git-branch-icon" width={14} height={14} />
         <span className="git-branch-name">{switchingBranch || branchLabel}</span>
         {info.isDirty && <span className="git-branch-dirty" aria-label="Uncommitted changes" />}
-        <svg className="git-branch-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-          <path d="m6 9 6 6 6-6" />
+        <svg className="git-branch-chevron" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+          <polyline points="6 9 12 15 18 9" />
         </svg>
       </button>
 
@@ -313,9 +359,9 @@ export default function GitBranchSelector({ workspacePath, disabled = false, onB
           {menuView === 'branches' && (
             <>
               <label className="git-branch-search">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
-                  <circle cx="11" cy="11" r="7" />
-                  <path d="m20 20-4-4" />
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  <circle cx="11" cy="11" r="8" />
+                  <path d="m21 21-4.3-4.3" />
                 </svg>
                 <input
                   autoFocus
@@ -339,12 +385,16 @@ export default function GitBranchSelector({ workspacePath, disabled = false, onB
                       disabled={Boolean(switchingBranch)}
                       onClick={() => handleSwitch(branch)}
                     >
-                      <span className="git-branch-option-icon" aria-hidden="true">⑂</span>
+                      <span className="git-branch-option-icon" aria-hidden="true">
+                        <BranchIcon width={14} height={14} />
+                      </span>
                       <span>{branch}</span>
                       {selected && (
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-                          <path d="m5 12 4 4L19 6" />
-                        </svg>
+                        <span className="git-branch-option-check" aria-hidden="true">
+                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                            <polyline points="20 6 9 17 4 12" />
+                          </svg>
+                        </span>
                       )}
                     </button>
                   )
@@ -365,7 +415,9 @@ export default function GitBranchSelector({ workspacePath, disabled = false, onB
                         onClick={() => handleRemoteCheckout(remoteBranch)}
                         title={`Create a local tracking branch from ${remoteBranch}`}
                       >
-                        <span className="git-branch-option-icon" aria-hidden="true">⇄</span>
+                        <span className="git-branch-option-icon" aria-hidden="true">
+                          <RemoteGlobeIcon width={14} height={14} />
+                        </span>
                         <span>{remoteBranch}</span>
                         <span className="git-branch-track-label">Track</span>
                       </button>
@@ -378,12 +430,12 @@ export default function GitBranchSelector({ workspacePath, disabled = false, onB
               )}
               <div className="git-branch-actions">
                 <button type="button" onClick={() => { setMenuView('create'); setError('') }}>
-                  <span aria-hidden="true">＋</span>
-                  Create branch
+                  <PlusIcon width={14} height={14} />
+                  <span>Create branch</span>
                 </button>
                 <button type="button" onClick={openGraph}>
-                  <span aria-hidden="true">⑂</span>
-                  Git graph
+                  <GitGraphIcon width={14} height={14} />
+                  <span>Git graph</span>
                 </button>
               </div>
             </>
@@ -392,7 +444,9 @@ export default function GitBranchSelector({ workspacePath, disabled = false, onB
           {menuView === 'create' && (
             <form className="git-branch-create" onSubmit={handleCreateBranch}>
               <div className="git-branch-view-header">
-                <button type="button" onClick={() => { setMenuView('branches'); setError('') }} aria-label="Back to branches">←</button>
+                <button type="button" onClick={() => { setMenuView('branches'); setError('') }} aria-label="Back to branches">
+                  <ChevronBackIcon width={14} height={14} />
+                </button>
                 <strong>Create branch</strong>
               </div>
               <label htmlFor="new-git-branch-name">Branch name</label>
@@ -415,7 +469,9 @@ export default function GitBranchSelector({ workspacePath, disabled = false, onB
           {menuView === 'graph' && (
             <div className="git-graph-view">
               <div className="git-branch-view-header">
-                <button type="button" onClick={() => { setMenuView('branches'); setError('') }} aria-label="Back to branches">←</button>
+                <button type="button" onClick={() => { setMenuView('branches'); setError('') }} aria-label="Back to branches">
+                  <ChevronBackIcon width={14} height={14} />
+                </button>
                 <strong>Git graph</strong>
                 <button type="button" className="git-graph-refresh" onClick={loadGraph} disabled={graphLoading}>Refresh</button>
               </div>

package/src/renderer/shared/components/workspace/ToolSurfacePage.test.tsx

@@ -65,4 +65,17 @@ describe('Tools launcher', () => {
     expect(html).toContain('All open tabs (3)')
     expect(html).toContain('tool-surface-tabs-badge">3</span>')
   })
+
+  it('marks artifact preview tabs as draggable to allow dragging to chat', () => {
+    const previewProps = {
+      ...props,
+      surfaces: [
+        { id: 'pdf-1', kind: 'preview' as const, title: 'Harness_Presentation.pdf', artifact: { path: 'Harness_Presentation.pdf' } },
+        { id: 'term-1', kind: 'terminal' as const, title: 'Terminal' },
+      ],
+      activeSurfaceId: 'pdf-1',
+    }
+    const html = renderToStaticMarkup(<ToolSurfacePage {...previewProps} />)
+    expect(html).toMatch(/class="tool-surface-tab[^"]*"[^>]*draggable="true"/)
+  })
 })