@pheem49/mint 1.16.0 → 1.17.0

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

@@ -1,18 +1,20 @@
-import '../../src/css/tool-surfaces.css'
-import { useState, useEffect, useRef, useCallback } from 'react'
-import type { PointerEvent as ReactPointerEvent } from 'react'
-import type { ArtifactFile } from './ArtifactPreviewPanel'
-import { ArtifactPreviewPanel } from './ArtifactPreviewPanel'
-import CodeReviewPage from './CodeReviewPage'
+import '../../../src/css/tool-surfaces.css'
+import { useState, useEffect, useRef, useCallback, lazy, Suspense } from 'react'
+import type { PointerEvent as ReactPointerEvent, ReactNode, DragEvent as ReactDragEvent } from 'react'
+import { detectArtifactType, type ArtifactFile } from '../../utils/artifacts'
 import TerminalDock from './TerminalDock'
-import type { FileChange } from '../types'
-import { ListTodo, Puzzle } from 'lucide-react'
+import type { FileChange } from '../../types'
+import { ListTodo, Paperclip, Puzzle, Image as ImageIcon, Layers, ChevronLeft, ChevronRight } from 'lucide-react'
+import { WORKSPACE_FILE_MIME, parseWorkspaceFileDrag, type WorkspaceFileDrag } from '../../utils/workspaceDrag'
+
+const ArtifactPreviewPanel = lazy(() => import('./ArtifactPreviewPanel').then(m => ({ default: m.ArtifactPreviewPanel })))
+const CodeReviewPage = lazy(() => import('./CodeReviewPage'))
 
 export type ToolSurface =
   | { id: string; kind: 'preview'; title: string; artifact: ArtifactFile }
   | { id: string; kind: 'review'; title: string; reviewTitle: string; changes: FileChange[] }
   | { id: string; kind: 'terminal'; title: string }
-  | { id: string; kind: 'mods' | 'background'; title: string }
+  | { id: string; kind: 'sources' | 'mods' | 'background'; title: string }
 
 interface Props {
   surfaces: ToolSurface[]
@@ -35,14 +37,20 @@ interface Props {
   onClosePanel: () => void
   desktopTools?: boolean
   backgroundTaskCount?: number
+  sourceCount?: number
+  sourcesContent?: ReactNode
+  onOpenSources: () => void
   onOpenMods: () => void
   onOpenBackgroundTasks: () => void
   onModsPanelTarget: (target: HTMLDivElement | null) => void
   onBackgroundPanelTarget: (target: HTMLDivElement | null) => void
+  onDropWorkspaceFile?: (file: WorkspaceFileDrag) => Promise<void>
 }
 
 
-function surfaceIcon(kind: ToolSurface['kind']) {
+function surfaceIcon(surface: ToolSurface | ToolSurface['kind']) {
+  const kind = typeof surface === 'string' ? surface : surface.kind
+  if (kind === 'sources') return <Paperclip size={13} aria-hidden="true" />
   if (kind === 'mods') return <Puzzle size={13} aria-hidden="true" />
   if (kind === 'background') return <ListTodo size={13} aria-hidden="true" />
   if (kind === 'terminal') {
@@ -63,6 +71,12 @@ function surfaceIcon(kind: ToolSurface['kind']) {
       </svg>
     )
   }
+  if (typeof surface === 'object' && surface.kind === 'preview') {
+    const type = surface.artifact.type || detectArtifactType(surface.artifact.path)
+    if (type === 'image') {
+      return <ImageIcon size={13} strokeWidth={2.2} aria-hidden="true" style={{ verticalAlign: '-1px' }} />
+    }
+  }
   return (
     <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ verticalAlign: '-1px' }}>
       <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
@@ -92,32 +106,99 @@ export default function ToolSurfacePage({
   onClosePanel,
   desktopTools = true,
   backgroundTaskCount = 0,
+  sourceCount = 0,
+  sourcesContent,
+  onOpenSources,
   onOpenMods,
   onOpenBackgroundTasks,
   onModsPanelTarget,
   onBackgroundPanelTarget,
+  onDropWorkspaceFile,
 }: Props) {
   const active = surfaces.find((surface) => surface.id === activeSurfaceId) ?? surfaces[0] ?? null
   const [switcherOpen, setSwitcherOpen] = useState(false)
+  const [tabsSwitcherOpen, setTabsSwitcherOpen] = useState(false)
+  const [tabsSwitcherAlignRight, setTabsSwitcherAlignRight] = useState(false)
+  const tabsSwitcherWrapRef = useRef<HTMLDivElement>(null)
   const [tabMenuState, setTabMenuState] = useState<{ id: string; x: number; y: number } | null>(null)
   const [isMaximized, setIsMaximized] = useState(false)
   const panelRef = useRef<HTMLElement>(null)
+  const [draggingFile, setDraggingFile] = useState(false)
+  const [workspaceDragActive, setWorkspaceDragActive] = useState(false)
+  const [dropError, setDropError] = useState('')
+  const [openingFiles, setOpeningFiles] = useState(0)
+  const dragDepth = useRef(0)
+  const acceptsFile = (event: ReactDragEvent) => Boolean(onDropWorkspaceFile && event.dataTransfer.types.includes(WORKSPACE_FILE_MIME))
+  const resetDrag = () => { dragDepth.current = 0; setDraggingFile(false); setWorkspaceDragActive(false) }
+  useEffect(() => {
+    const start = (event: DragEvent) => {
+      if (onDropWorkspaceFile && event.dataTransfer?.types.includes(WORKSPACE_FILE_MIME)) setWorkspaceDragActive(true)
+    }
+    window.addEventListener('dragstart', start)
+    window.addEventListener('dragend', resetDrag)
+    window.addEventListener('drop', resetDrag)
+    return () => { window.removeEventListener('dragstart', start); window.removeEventListener('dragend', resetDrag); window.removeEventListener('drop', resetDrag) }
+  }, [onDropWorkspaceFile])
+  const dropFile = async (event: ReactDragEvent) => {
+    event.preventDefault()
+    const raw = event.dataTransfer.getData(WORKSPACE_FILE_MIME)
+    resetDrag()
+    if (!onDropWorkspaceFile || !raw) return
+    event.stopPropagation()
+    setDropError('')
+    setOpeningFiles(count => count + 1)
+    try { await onDropWorkspaceFile(parseWorkspaceFileDrag(raw)) }
+    catch (reason) { setDropError(reason instanceof Error ? reason.message : String(reason)) }
+    finally { setOpeningFiles(count => count - 1) }
+  }
 
   useEffect(() => {
-    panelRef.current?.querySelector<HTMLButtonElement>('[role="tab"][aria-selected="true"], [role="menuitem"]')?.focus()
+    panelRef.current?.querySelector<HTMLButtonElement>('[role="tab"][aria-selected="true"], [role="menuitem"]')?.focus({ preventScroll: true })
   }, [active?.id])
 
   useEffect(() => {
-    const dismiss = (event: KeyboardEvent) => {
-      if (event.key !== 'Escape' || event.defaultPrevented || !panelRef.current?.contains(event.target as Node)) return
-      event.preventDefault()
-      if (switcherOpen) { setSwitcherOpen(false); newTabWrapRef.current?.querySelector<HTMLButtonElement>('.tool-surface-dropdown-btn')?.focus() }
-      else if (tabMenuState) setTabMenuState(null)
-      else onClosePanel()
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.defaultPrevented) return
+
+      if (event.key === 'Escape') {
+        if (!panelRef.current?.contains(event.target as Node)) return
+        event.preventDefault()
+        if (tabsSwitcherOpen) {
+          setTabsSwitcherOpen(false)
+          tabsSwitcherWrapRef.current?.querySelector<HTMLButtonElement>('.tool-surface-tabs-switcher-btn')?.focus()
+        } else if (switcherOpen) {
+          setSwitcherOpen(false)
+          newTabWrapRef.current?.querySelector<HTMLButtonElement>('.tool-surface-dropdown-btn')?.focus()
+        } else if (tabMenuState) {
+          setTabMenuState(null)
+        } else {
+          onClosePanel()
+        }
+        return
+      }
+
+      if (surfaces.length > 1) {
+        const isPrev = (event.altKey && event.key === '[') || (event.ctrlKey && event.key === 'PageUp')
+        const isNext = (event.altKey && event.key === ']') || (event.ctrlKey && event.key === 'PageDown')
+        if (isPrev || isNext) {
+          const activeEl = document.activeElement
+          const isInsidePanel = panelRef.current?.contains(activeEl) || activeEl === document.body
+          if (isInsidePanel) {
+            event.preventDefault()
+            const currentIndex = surfaces.findIndex((s) => s.id === (active?.id ?? ''))
+            if (currentIndex !== -1) {
+              const targetIndex = isNext
+                ? (currentIndex + 1) % surfaces.length
+                : (currentIndex - 1 + surfaces.length) % surfaces.length
+              onSelect(surfaces[targetIndex].id)
+            }
+          }
+        }
+      }
     }
-    document.addEventListener('keydown', dismiss)
-    return () => document.removeEventListener('keydown', dismiss)
-  }, [onClosePanel, switcherOpen, tabMenuState])
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [onClosePanel, switcherOpen, tabMenuState, tabsSwitcherOpen, surfaces, active?.id, onSelect])
 
   const [isEntering, setIsEntering] = useState(true)
   const [isResizing, setIsResizing] = useState(false)
@@ -226,6 +307,7 @@ export default function ToolSurfacePage({
   )
 
   const launcherItems = [
+    { label: 'Sources', title: 'Session sources', shortcut: '', icon: <Paperclip />, className: 'is-sources', action: onOpenSources },
     { label: 'Mods', title: 'Workspace mods', shortcut: '', icon: <Puzzle />, className: 'is-mods', action: onOpenMods },
     { label: 'Background tasks', title: 'Background tasks', shortcut: '', icon: <ListTodo />, className: 'is-background', action: onOpenBackgroundTasks },
     ...(desktopTools ? [
@@ -242,6 +324,7 @@ export default function ToolSurfacePage({
         <button type="button" role="menuitem" className="tool-surface-launcher-item" key={item.label} title={item.title} onClick={() => { item.action(); setSwitcherOpen(false) }}>
           <span className={`tool-surface-menu-icon ${item.className}`} aria-hidden="true">{item.icon}</span>
           <span className="tool-surface-menu-copy"><span className="tool-surface-menu-label">{item.label}</span></span>
+          {item.className === 'is-sources' && <span className="tools-task-count" aria-label={`${sourceCount} session sources`}>{sourceCount}</span>}
           {item.className === 'is-background' && backgroundTaskCount > 0 && <span className="tools-task-count" aria-label={`${backgroundTaskCount} active background tasks`}>{backgroundTaskCount}</span>}
           {item.shortcut && <kbd>{item.shortcut}</kbd>}
         </button>
@@ -263,6 +346,17 @@ export default function ToolSurfacePage({
     })
   }
 
+  const toggleTabsSwitcher = () => {
+    setTabsSwitcherOpen((open) => {
+      const next = !open
+      if (next && tabsSwitcherWrapRef.current) {
+        const rect = tabsSwitcherWrapRef.current.getBoundingClientRect()
+        setTabsSwitcherAlignRight(window.innerWidth - rect.left < 310)
+      }
+      return next
+    })
+  }
+
   useEffect(() => {
     if (!switcherOpen) return
     const handleClickOutside = (e: MouseEvent) => {
@@ -275,6 +369,18 @@ export default function ToolSurfacePage({
     return () => window.removeEventListener('mousedown', handleClickOutside)
   }, [switcherOpen])
 
+  useEffect(() => {
+    if (!tabsSwitcherOpen) return
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as HTMLElement | null
+      if (target && !target.closest('.tool-surface-tabs-switcher-wrap')) {
+        setTabsSwitcherOpen(false)
+      }
+    }
+    window.addEventListener('mousedown', handleClickOutside)
+    return () => window.removeEventListener('mousedown', handleClickOutside)
+  }, [tabsSwitcherOpen])
+
   useEffect(() => {
     if (!tabMenuState) return
     const handleClickOutside = (e: MouseEvent) => {
@@ -288,15 +394,17 @@ export default function ToolSurfacePage({
   }, [tabMenuState])
 
   const tabListRef = useRef<HTMLDivElement>(null)
+  const [hasOverflow, setHasOverflow] = useState(false)
   const [canScrollLeft, setCanScrollLeft] = useState(false)
   const [canScrollRight, setCanScrollRight] = useState(false)
 
   const checkTabScroll = useCallback(() => {
     const el = tabListRef.current
     if (!el) return
-    const hasOverflow = el.scrollWidth > el.clientWidth + 2
-    setCanScrollLeft(hasOverflow && el.scrollLeft > 2)
-    setCanScrollRight(hasOverflow && el.scrollLeft + el.clientWidth < el.scrollWidth - 2)
+    const overflow = el.scrollWidth > el.clientWidth + 2
+    setHasOverflow(overflow)
+    setCanScrollLeft(overflow && el.scrollLeft > 2)
+    setCanScrollRight(overflow && el.scrollLeft + el.clientWidth < el.scrollWidth - 2)
   }, [])
 
   useEffect(() => {
@@ -324,18 +432,20 @@ export default function ToolSurfacePage({
 
   const scrollTabs = (direction: 'left' | 'right') => {
     if (!tabListRef.current) return
-    const amount = direction === 'left' ? -180 : 180
+    const amount = direction === 'left' ? -200 : 200
     tabListRef.current.scrollBy({ left: amount, behavior: 'smooth' })
   }
 
   const handleTabWheel = (e: React.WheelEvent<HTMLDivElement>) => {
     if (e.deltaY !== 0) {
       e.currentTarget.scrollLeft += e.deltaY
+    } else if (e.deltaX !== 0) {
+      e.currentTarget.scrollLeft += e.deltaX
     }
   }
 
   const handleAddNewTab = () => {
-    if (active?.kind === 'mods' || active?.kind === 'background') {
+    if (active?.kind === 'sources' || active?.kind === 'mods' || active?.kind === 'background') {
       toggleSwitcher()
       return
     }
@@ -348,7 +458,7 @@ export default function ToolSurfacePage({
     }
   }
 
-  const newTabTooltip = active?.kind === 'mods' || active?.kind === 'background' ? 'Open a tool' : active?.kind === 'review'
+  const newTabTooltip = active?.kind === 'sources' || active?.kind === 'mods' || active?.kind === 'background' ? 'Open a tool' : active?.kind === 'review'
     ? 'New Review Tab'
     : active?.kind === 'preview'
     ? 'Duplicate Preview Tab'
@@ -360,7 +470,24 @@ export default function ToolSurfacePage({
       className={`tool-surface-page ${isEntering ? 'is-entering' : ''} ${isMaximized ? 'is-maximized' : ''} ${isResizing ? 'is-resizing' : ''}`}
       onAnimationEnd={() => setIsEntering(false)}
       aria-label="Tools"
+      onDragEnter={event => {
+        if (!acceptsFile(event)) return
+        event.preventDefault(); dragDepth.current++; setDraggingFile(true)
+      }}
+      onDragOver={event => {
+        if (!acceptsFile(event)) return
+        event.preventDefault(); event.dataTransfer.dropEffect = 'copy'
+      }}
+      onDragLeave={() => {
+        dragDepth.current = Math.max(0, dragDepth.current - 1)
+        if (!dragDepth.current) setDraggingFile(false)
+      }}
+      onDrop={event => { void dropFile(event) }}
     >
+      {workspaceDragActive && <div className="tool-surface-drag-shield" aria-hidden="true" />}
+      {draggingFile && <div className="tool-surface-drop-overlay" role="status"><Paperclip size={24} aria-hidden="true" /><span>Drop to preview</span></div>}
+      {openingFiles > 0 && <div className="tool-surface-drop-status" role="status">Opening file…</div>}
+      {dropError && <div className="tool-surface-drop-error" role="alert">Could not open preview: {dropError}</div>}
       {!isMaximized && (
         <div
           className={`tool-surface-resize-handle ${isResizing ? 'is-resizing' : ''}`}
@@ -385,17 +512,16 @@ export default function ToolSurfacePage({
       {active && (
         <header className="tool-surface-tabs">
           <div className="tool-surface-tabs-container">
-            {canScrollLeft && (
+            {hasOverflow && (
               <button
                 type="button"
-                className="tool-surface-tab-scroll-btn is-left"
+                className={`tool-surface-tab-scroll-btn is-left ${!canScrollLeft ? 'is-disabled' : ''}`}
                 onClick={() => scrollTabs('left')}
+                disabled={!canScrollLeft}
                 aria-label="Scroll tabs left"
                 title="Scroll tabs left"
               >
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-                  <path d="m15 18-6-6 6-6" />
-                </svg>
+                <ChevronLeft size={14} strokeWidth={2.4} aria-hidden="true" />
               </button>
             )}
             <div
@@ -419,25 +545,31 @@ export default function ToolSurfacePage({
                     })
                   }}
                 >
-                  <button type="button" role="tab" aria-selected={surface.id === active.id} onClick={() => { setTabMenuState(null); onSelect(surface.id) }}>
-                    <span className={`tool-surface-tab-icon is-${surface.kind}`} aria-hidden="true">{surfaceIcon(surface.kind)}</span>
+                  <button
+                    type="button"
+                    role="tab"
+                    aria-selected={surface.id === active.id}
+                    title={surface.title}
+                    aria-label={surface.title}
+                    onClick={() => { setTabMenuState(null); onSelect(surface.id) }}
+                  >
+                    <span className={`tool-surface-tab-icon is-${surface.kind}`} aria-hidden="true">{surfaceIcon(surface)}</span>
                     <span className="tool-surface-tab-title">{surface.title}</span>
                   </button>
                   <button type="button" className="tool-surface-tab-close" onClick={() => onClose(surface.id)} aria-label={`Close ${surface.title}`} title="Close">×</button>
                 </div>
               ))}
             </div>
-            {canScrollRight && (
+            {hasOverflow && (
               <button
                 type="button"
-                className="tool-surface-tab-scroll-btn is-right"
+                className={`tool-surface-tab-scroll-btn is-right ${!canScrollRight ? 'is-disabled' : ''}`}
                 onClick={() => scrollTabs('right')}
+                disabled={!canScrollRight}
                 aria-label="Scroll tabs right"
                 title="Scroll tabs right"
               >
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-                  <path d="m9 18 6-6-6-6" />
-                </svg>
+                <ChevronRight size={14} strokeWidth={2.4} aria-hidden="true" />
               </button>
             )}
           </div>
@@ -477,6 +609,89 @@ export default function ToolSurfacePage({
               </div>
             )}
           </div>
+          {surfaces.length > 0 && (
+            <div className="tool-surface-tabs-switcher-wrap" ref={tabsSwitcherWrapRef}>
+              <button
+                type="button"
+                className={`tool-surface-tabs-switcher-btn ${tabsSwitcherOpen ? 'is-active' : ''}`}
+                onClick={(e) => { e.stopPropagation(); toggleTabsSwitcher() }}
+                title={`All open tabs (${surfaces.length})`}
+                aria-label={`All open tabs (${surfaces.length})`}
+                aria-haspopup="menu"
+                aria-expanded={tabsSwitcherOpen}
+              >
+                <Layers size={13} strokeWidth={2.2} aria-hidden="true" />
+                <span className="tool-surface-tabs-badge">{surfaces.length}</span>
+              </button>
+              {tabsSwitcherOpen && (
+                <div
+                  className={`tool-surface-tabs-dropdown-menu ${tabsSwitcherAlignRight ? 'is-align-right' : ''}`}
+                  aria-label="Open tabs list"
+                  role="menu"
+                >
+                  <div className="tool-surface-tabs-dropdown-header">
+                    <span>Open Tabs ({surfaces.length})</span>
+                    <span className="tool-surface-tabs-dropdown-hint">Alt+[ / Alt+]</span>
+                  </div>
+                  <div className="tool-surface-tabs-dropdown-list">
+                    {surfaces.map((s) => {
+                      const isActive = s.id === active.id
+                      return (
+                        <div
+                          key={s.id}
+                          className={`tool-surface-tabs-dropdown-item ${isActive ? 'is-active' : ''}`}
+                          onClick={() => {
+                            onSelect(s.id)
+                            setTabsSwitcherOpen(false)
+                          }}
+                          role="menuitem"
+                          tabIndex={0}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                              e.preventDefault()
+                              onSelect(s.id)
+                              setTabsSwitcherOpen(false)
+                            }
+                          }}
+                        >
+                          <span className={`tool-surface-tab-icon is-${s.kind} tool-surface-tabs-dropdown-item-icon`} aria-hidden="true">
+                            {surfaceIcon(s)}
+                          </span>
+                          <span className="tool-surface-tabs-dropdown-item-title" title={s.title}>
+                            {s.title}
+                          </span>
+                          <button
+                            type="button"
+                            className="tool-surface-tabs-dropdown-item-close"
+                            onClick={(e) => {
+                              e.stopPropagation()
+                              onClose(s.id)
+                            }}
+                            title={`Close ${s.title}`}
+                            aria-label={`Close ${s.title}`}
+                          >
+                            ×
+                          </button>
+                        </div>
+                      )
+                    })}
+                  </div>
+                  <div className="tool-surface-tabs-dropdown-footer">
+                    <button
+                      type="button"
+                      className="tool-surface-tabs-dropdown-footer-btn"
+                      onClick={() => {
+                        onCloseAll()
+                        setTabsSwitcherOpen(false)
+                      }}
+                    >
+                      Close all tabs
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
           <div className="tool-surface-header-right">
             <div className="tool-surface-header-actions">
               <button
@@ -509,47 +724,83 @@ export default function ToolSurfacePage({
               </button>
             </div>
           </div>
-          {tabMenuState && (
-            <div
-              className="tool-surface-tab-menu is-floating"
-              style={{
-                position: 'fixed',
-                top: `${tabMenuState.y}px`,
-                left: `${tabMenuState.x}px`,
-                zIndex: 1000,
-              }}
-              role="menu"
-            >
-              {surfaces.find(surface => surface.id === tabMenuState.id)?.kind !== 'mods' && surfaces.find(surface => surface.id === tabMenuState.id)?.kind !== 'background' && <button type="button" role="menuitem" onClick={() => { onDuplicate(tabMenuState.id); setTabMenuState(null) }}>
-                Duplicate tab
-              </button>}
-              <button type="button" role="menuitem" onClick={() => { onRename(tabMenuState.id); setTabMenuState(null) }}>
-                Rename tab
-              </button>
-              <button type="button" role="menuitem" onClick={() => { onCloseOthers(tabMenuState.id); setTabMenuState(null) }}>
-                Close other tabs
-              </button>
-              <button type="button" role="menuitem" onClick={() => { onClose(tabMenuState.id); setTabMenuState(null) }}>
-                Close tab
-              </button>
-            </div>
-          )}
+          {tabMenuState && (() => {
+            const currentIdx = surfaces.findIndex(s => s.id === tabMenuState.id)
+            const hasTabsToRight = currentIdx >= 0 && currentIdx < surfaces.length - 1
+            const targetSurface = surfaces.find(surface => surface.id === tabMenuState.id)
+            return (
+              <div
+                className="tool-surface-tab-menu is-floating"
+                style={{
+                  position: 'fixed',
+                  top: `${tabMenuState.y}px`,
+                  left: `${tabMenuState.x}px`,
+                  zIndex: 1000,
+                }}
+                role="menu"
+              >
+                {targetSurface?.kind !== 'sources' && targetSurface?.kind !== 'mods' && targetSurface?.kind !== 'background' && (
+                  <button type="button" role="menuitem" onClick={() => { onDuplicate(tabMenuState.id); setTabMenuState(null) }}>
+                    Duplicate tab
+                  </button>
+                )}
+                <button type="button" role="menuitem" onClick={() => { onRename(tabMenuState.id); setTabMenuState(null) }}>
+                  Rename tab
+                </button>
+                {hasTabsToRight && (
+                  <button
+                    type="button"
+                    role="menuitem"
+                    onClick={() => {
+                      const tabsToRight = surfaces.slice(currentIdx + 1)
+                      tabsToRight.forEach(s => onClose(s.id))
+                      setTabMenuState(null)
+                    }}
+                  >
+                    Close tabs to the right
+                  </button>
+                )}
+                <button type="button" role="menuitem" onClick={() => { onCloseOthers(tabMenuState.id); setTabMenuState(null) }}>
+                  Close other tabs
+                </button>
+                <button type="button" role="menuitem" onClick={() => { onClose(tabMenuState.id); setTabMenuState(null) }}>
+                  Close tab
+                </button>
+                <hr />
+                <button
+                  type="button"
+                  role="menuitem"
+                  className="is-destructive"
+                  onClick={() => { onCloseAll(); setTabMenuState(null) }}
+                >
+                  Close all tabs
+                </button>
+              </div>
+            )
+          })()}
         </header>
       )}
 
       <div className={`tool-surface-content${active ? '' : ' is-launcher'}`}>
         {!active && renderLauncher()}
+        {active?.kind === 'sources' && <div className="tool-surface-sources">{sourcesContent}</div>}
         {active?.kind === 'mods' && <div key="mods" className="tool-surface-panel-host" ref={onModsPanelTarget} />}
         {active?.kind === 'background' && <div key="background" className="tool-surface-panel-host" ref={onBackgroundPanelTarget} />}
-        {active?.kind === 'preview' && <ArtifactPreviewPanel key={active.id} artifact={active.artifact} onClose={() => active && onClose(active.id)} workspacePath={workspacePath || undefined} />}
+        {active?.kind === 'preview' && (
+          <Suspense fallback={null}>
+            <ArtifactPreviewPanel key={active.id} artifact={active.artifact} onClose={() => active && onClose(active.id)} workspacePath={workspacePath || undefined} />
+          </Suspense>
+        )}
         {active?.kind === 'review' && (
-          <CodeReviewPage
-            title={active.reviewTitle}
-            changes={active.changes}
-            workspacePath={workspacePath}
-            onBack={() => active && onClose(active.id)}
-            onOpenFiles={onOpenFiles}
-          />
+          <Suspense fallback={null}>
+            <CodeReviewPage
+              title={active.reviewTitle}
+              changes={active.changes}
+              workspacePath={workspacePath}
+              onBack={() => active && onClose(active.id)}
+              onOpenFiles={onOpenFiles}
+            />
+          </Suspense>
         )}
         {surfaces.filter((surface): surface is Extract<ToolSurface, { kind: 'terminal' }> => surface.kind === 'terminal').map((surface) => (
           <TerminalDock

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

@@ -1,4 +1,4 @@
-import '../css/tools-panel.css'
+import '../../css/tools-panel.css'
 
 export default function ToolsPanelToggle({ open, count = 0, onToggle, className = '' }: {
   open: boolean; count?: number; onToggle: () => void; className?: string

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

@@ -0,0 +1,28 @@
+import { useState } from 'react'
+import { File, ExternalLink } from 'lucide-react'
+import { workspaceFileUrl } from '../../utils/workspaceDrag'
+import '../../css/workspace-file-info.css'
+
+export default function WorkspaceFileInfo({ path, root }: { path: string; root?: string }) {
+  const [opening, setOpening] = useState(false)
+  const [error, setError] = useState('')
+  const name = path.replace(/\\/g, '/').split('/').pop() || path
+  const open = async () => {
+    if (!root || opening) return
+    setOpening(true); setError('')
+    try {
+      const target = workspaceFileUrl(root, path)
+      const { invoke } = await import('@tauri-apps/api/core')
+      await invoke('run_desktop_action', { action: { type: 'open_url', target } })
+    } catch (reason) { setError(reason instanceof Error ? reason.message : String(reason)) }
+    finally { setOpening(false) }
+  }
+  return <section className="workspace-file-info" aria-label="File information">
+    <File size={32} aria-hidden="true" />
+    <h2>{name}</h2>
+    <p>Preview is not available for this file type.</p>
+    <dl><dt>File type</dt><dd>{name.includes('.') ? name.split('.').pop()!.toUpperCase() : 'File'}</dd><dt>Path</dt><dd>{path}</dd><dt>Workspace</dt><dd>{root || 'Unavailable'}</dd></dl>
+    <button type="button" disabled={!root || opening} aria-busy={opening} onClick={() => { void open() }}><ExternalLink size={15} aria-hidden="true" />{opening ? 'Opening…' : 'Open with external app'}</button>
+    {error && <p className="workspace-file-info-error" role="alert">Could not open file: {error}</p>}
+  </section>
+}

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

@@ -0,0 +1,17 @@
+import { useEffect, useRef, useState } from 'react'
+import WorkspaceFileInfo from './WorkspaceFileInfo'
+import '../../css/workspace-media-preview.css'
+
+export default function WorkspaceMediaPreview({ kind, url, path, root, mimeType }: { kind: 'audio' | 'video'; url: string; path: string; root?: string; mimeType?: string }) {
+  const player = useRef<HTMLMediaElement>(null)
+  const [failed, setFailed] = useState(false)
+  useEffect(() => {
+    const media = player.current
+    return () => { if (media) { media.pause(); media.removeAttribute('src'); media.querySelector('source')?.removeAttribute('src'); media.load() } }
+  }, [url])
+  return <section className={`workspace-media-preview is-${kind}`} aria-label={`${kind === 'audio' ? 'Audio' : 'Video'} preview`}>
+    {failed ? <><p role="alert" className="workspace-media-error">This file could not be played in Mint. Open it with an external app instead.</p><WorkspaceFileInfo path={path} root={root} /></> : kind === 'audio'
+      ? <audio ref={player as React.RefObject<HTMLAudioElement>} controls preload="metadata" aria-label={path} onError={() => setFailed(true)}><source src={url} type={mimeType} /></audio>
+      : <video ref={player as React.RefObject<HTMLVideoElement>} controls preload="metadata" playsInline aria-label={path} onError={() => setFailed(true)}><source src={url} type={mimeType} /></video>}
+  </section>
+}

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
-import { readWorkspacePaneWidth, workspacePaneKeyWidth, workspacePaneLayout, WORKSPACE_PANE_STORAGE_KEY } from '../utils/workspacePane'
+import { readWorkspacePaneWidth, workspacePaneKeyWidth, workspacePaneLayout, WORKSPACE_PANE_STORAGE_KEY } from '../../utils/workspacePane'
 
 export default function WorkspacePaneResizer() {
   const handle = useRef<HTMLDivElement>(null)